/* ==========================================
   BASIC RESET & BASE STYLES
   ========================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #000;
  color: #fff;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

.kif-container { max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
.center { text-align: center; }
.dark-bg { background: #080808; border-top: 1px solid #111; border-bottom: 1px solid #111; }

/* ==========================================
   NAVIGATION
   ========================================== */
header {
  position: sticky; top: 0;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid #111;
}
.kif-nav { display: flex; justify-content: center; padding: 20px; gap: 20px; flex-wrap: wrap; }
.kif-nav a {
  text-decoration: none; color: #555;
  font-weight: 800; font-size: 11px;
  letter-spacing: 1px; transition: 0.3s;
}
.kif-nav a.active, .kif-nav a:hover { color: #fff; }

/* ==========================================
   TYPOGRAPHY
   ========================================== */
.label { font-size: 10px; color: #444; letter-spacing: 3px; margin-bottom: 20px; display: block; text-transform: uppercase; }
.label-red { font-size: 10px; color: #ff0000; letter-spacing: 2px; font-weight: bold; }
.big-text { font-size: clamp(32px, 6vw, 70px); font-weight: 900; line-height: 1; margin-bottom: 40px; text-transform: uppercase; }
.big-text span { color: #222; }
.body-text { font-size: 18px; opacity: 0.8; line-height: 1.6; }
.quote-text { font-size: 14px; color: #666; border-left: 2px solid #222; padding-left: 20px; }

/* ==========================================
   COMPONENTS (GRIDS & CARDS)
   ========================================== */
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.grid-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.status-card { background: transparent; border: 1px solid #151515; padding: 40px; transition: 0.3s; }
.highlight-border { background: #0d0d0d; border-color: #222; }
.small-cta { font-size: 10px; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: 1px; border-bottom: 1px solid #333; padding-bottom: 5px; }

/* ==========================================
   INDEX SPECIFIC: HERO & PIPELINE
   ========================================== */
.logo-hero {
  height: 85vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/kif_background_1.jpg');
  background-position: center; background-size: cover;
}
.main-logo { width: 80%; max-width: 280px; height: auto; }
.hero-tagline { margin-top: 20px; font-size: 10px; letter-spacing: 5px; color: #444; }

.pipeline-img-wrapper { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 25px; border: 1px solid #222; }
.pipeline-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(70%); transition: 0.5s ease; }
.status-card:hover .pipeline-img { filter: grayscale(0%); transform: scale(1.05); }

.progress-bar { width: 100%; height: 2px; background: #222; margin: 20px 0; }
.progress-fill { height: 100%; background: #fff; }
.countdown-wrap { display: flex; gap: 25px; margin: 30px 0; }
.time-box span { font-size: 40px; font-weight: 900; display: block; }

/* ==========================================
   SLATE SPECIFIC: FUNDING & PORTFOLIO
   ========================================== */
.main-progress-bar { 
  width: 100%; 
  height: 60px; 
  background: #0a0a0a; 
  border: 1px solid #111; 
  display: flex; 
  align-items: center; 
  position: relative; /* WAJIB: biar tag persen bisa nempel di sini */
  overflow: hidden;
}
.main-progress-fill { 
  height: 100%; background: #fff; 
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.percentage-tag {
  position: absolute; 
  left: 20px; 
  top: 50%; /* Taruh di titik tengah bar */
  transform: translateY(-50%); /* Geser ke atas dikit biar beneran center */
  font-weight: 900; 
  font-size: 12px;
  white-space: nowrap; 
  color: #fff; 
  mix-blend-mode: difference;
  pointer-events: none;
}
.funding-meta { display: flex; justify-content: space-between; margin-top: 15px; font-size: 11px; color: #444; letter-spacing: 1px; }

.work-link { text-decoration: none; color: inherit; display: block; }
.work-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.work-image { 
  width: 100%; aspect-ratio: 16/9; background: #111; position: relative; 
  border: 1px solid #151515; background-size: cover; background-position: center;
  filter: grayscale(60%); transition: 0.5s ease;
}
.fuel-badge { 
  position: absolute; top: 15px; right: 15px; background: #ff0000; color: #fff; 
  padding: 4px 10px; font-size: 9px; font-weight: 900; transition: 0.3s;
}

.work-link:hover .work-card { transform: translateY(-8px); }
.work-link:hover .work-image { filter: grayscale(0%); border-color: #444; }

/* ==========================================
   MATE SPECIFIC
   ========================================== */
.flex-center-wrap { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; }
.rank-1 { font-size: clamp(50px, 12vw, 150px); font-weight: 900; letter-spacing: -5px; transition: 0.5s; }
.rank-2 { font-size: clamp(25px, 6vw, 60px); color: #333; transition: 0.4s; }
.rank-3 { font-size: clamp(15px, 3vw, 25px); color: #1a1a1a; transition: 0.3s; }
.rank-1:hover, .rank-2:hover, .rank-3:hover { color: #fff; }

/* ==========================================
   CAST SPECIFIC: ULTRA COMPACT (7 COLUMNS)
   ========================================== */
.cast-grid { 
  display: grid; 
  /* Memaksa 7 kolom di desktop */
  grid-template-columns: repeat(7, 1fr); 
  gap: 15px; 
}

.cast-photo-wrapper { 
  width: 100%; 
  aspect-ratio: 1/1; /* Kotak sempurna biar gak terlalu tinggi */
  background: #0a0a0a; 
  overflow: hidden; 
  position: relative; 
  border: 1px solid #111; 
}

.cast-photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Menjaga foto gak gepeng */
  filter: grayscale(70%);
  transition: 0.6s ease;
}

.cast-info h3 {
  font-size: 10px; /* Font mungil biar muat 7 orang */
  margin-top: 12px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

.cast-info .label {
  font-size: 7px; /* Label sangat kecil tapi tegas */
  margin-top: 4px;
  color: #555;
  text-align: center;
  letter-spacing: 1px;
}

/* Biar quotes di overlay gak berantakan karena kotaknya kecil */
.cast-overlay p {
  font-size: 9px;
  padding: 10px;
  line-height: 1.2;
}

/* RESPONSIVE: Di HP gak mungkin 7 baris, kita bagi dua baris */
@media (max-width: 768px) {
  .cast-grid { 
    grid-template-columns: repeat(3, 1fr); /* 3 orang per baris di HP */
    gap: 10px;
  }
  .cast-info h3 { font-size: 9px; }
}



/* ==========================================
   ROLL SPECIFIC
   ========================================== */
.action-text { font-style: italic; font-weight: 900; -webkit-text-stroke: 1px #fff; color: transparent; transition: 0.5s; }
#roll:hover .action-text { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 20px #fff; }
.cta-box { padding: 40px; border: 1px solid #111; transition: 0.3s; }
.cta-box:hover { border-color: #333; background: #0d0d0d; }

/* ==========================================
   MOBILE RESPONSIVE (THE FIX)
   ========================================== */
@media (max-width: 768px) {
  /* Layout Dasar */
  .grid-two, .grid-three { 
    grid-template-columns: 1fr; 
  }
  .kif-container { 
    padding: 40px 20px; 
  }
  .big-text { 
    font-size: 36px; 
  }

  /* Progress Bar (SLATE) */
  .main-progress-bar { 
    height: 45px; 
  }
  .percentage-tag {
    font-size: 10px; 
    left: 15px; 
    /* top & transform otomatis ngikut dari class utama */
  }
  .funding-meta { 
    flex-direction: column; 
    gap: 5px; 
  }

  /* Cast Grid (HP: 3 Kolom biar tetep compact) */
  .cast-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
  }
  .cast-info h3 { 
    font-size: 9px; 
  }

  /* Navigasi HP */
  .kif-nav { 
    gap: 10px; 
    padding: 15px 10px; 
  }
  .kif-nav a { 
    font-size: 9px; 
  }
  
  /* Visual Adj: Grayscale dikurangin biar HP gak suram */
  .work-image, .cast-photo, .pipeline-img, .mentor-photo img { 
    filter: grayscale(30%); 
  }

  /* Mentor Section HP */
  .mentor-item {
    gap: 15px;
  }
  .mentor-photo {
    width: 50px !important;
    height: 50px !important;
  }
}