/* =========================================================
   CLIENT PAGE — client.css
   ========================================================= */

/* ─── HERO / PAGE HEADER ─────────────────────────────────── */
.client-hero {
  background: transparent;
  padding: 52px 20px 32px;
  text-align: center;
}

.client-hero__inner {
  max-width: 1500px;
  margin: 0 auto;
}

.client-hero__title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.1;
  transition: color var(--transition);
}

/* ─── SECTION WRAPPER ────────────────────────────────────── */
.clients-section {
  padding: 20px 20px 80px;
  display: flex;
  justify-content: center;
}

/* ─── VARIABEL LAYOUT 3-BOX ───────────────────────────────
   --box-overlap : seberapa jauh kotak tengah "keluar" ke
                   atas dan bawah melampaui kotak kiri-kanan.
   Ubah nilai ini untuk menyesuaikan proporsi.
   ──────────────────────────────────────────────────────── */
:root {
  /* overlap dikurangi agar tinggi kotak tengah lebih proporsional/lebih pendek */
  --box-overlap: clamp(10px, 1.5vw, 24px);
  --box-radius-outer: clamp(28px, 3.5vw, 55px);
  --box-radius-center: clamp(20px, 2.5vw, 40px);
  --box-border: 8px;
  --box-red: #e3000f;
  /* --box-glow: rgba(227, 0, 15, 0.55); */

  /* Ukuran logo & variabel perbesaran (upscale) */
  --logo-w: 100px;
  --logo-g: 40px;
  --center-scale: 1.4;
  /* 1.4 = logo membesar 40% di tengah (mencegah overflow/cropping) */
  --center-padding: 8px;
  /* Padding kecil agar sisi logo tidak menyentuh garis merah */
}

/* ─── WRAPPER TIGA KOTAK ──────────────────────────────────
   Posisi relative agar kotak tengah bisa overlap via
   negative margin dan z-index.
   ──────────────────────────────────────────────────────── */
.clients-board {
  /* Tidak ada background PNG lagi — pure CSS */
  background: transparent;

  position: relative;
  width: 90%;
  max-width: 1300px;

  /* Flex column untuk baris marquee */
  display: flex;
  flex-direction: column;
  gap: 40px;

  /* Padding vertikal = overlap agar konten tidak terpotong */
  padding: clamp(28px, 4vw, 56px) 0;

  /* PENTING: overflow visible agar kotak tengah bisa overlap */
  overflow: visible;
}

/* ─── 3-BOX DECORATION (pseudo-element approach) ──────────
   Tiga kotak merah divisualisasikan sebagai ::before (seluruh
   area luar: kiri + kanan sebagai satu kotak besar di belakang)
   dan .clients-board__center (kotak tengah yang overlap).

   Struktur yang dihasilkan secara visual:
     [ KIRI ]  [ TENGAH (lebih tinggi) ]  [ KANAN ]
   Di mana TENGAH menimpa KIRI dan KANAN.
   ──────────────────────────────────────────────────────── */

/* Kotak KIRI + KANAN (Latar Belakang Putih Saja) */
.clients-board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--box-radius-outer);
  pointer-events: none;
  z-index: 0;
  background: #ffffff;
}

/* Efek Blur/Masking Garis Merah Kotak Luar */
.clients-board::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--box-radius-outer);
  border: var(--box-border) solid var(--box-red);
  box-shadow:
    0 0 8px var(--box-glow),
    0 0 20px var(--box-glow),
    inset 0 0 8px rgba(227, 0, 15, 0.08);
  pointer-events: none;
  z-index: 0;
  /* Gradasi masking agar garis horizontal memudar (blur) sebelum masuk ke kotak tengah */
  -webkit-mask-image: linear-gradient(to right,
      black 25%,
      transparent 40%,
      transparent 60%,
      black 75%);
  mask-image: linear-gradient(to right,
      black 25%,
      transparent 40%,
      transparent 60%,
      black 75%);
}

/* Kotak TENGAH (Latar Belakang Putih) */
.clients-board__center {
  position: absolute;
  /* Rumus disesuaikan untuk membingkai persis 2 logo yang diperbesar */
  width: calc((var(--logo-w) * var(--center-scale) * 2) + var(--logo-g) + (var(--center-padding) * 2));
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--box-overlap));
  bottom: calc(-1 * var(--box-overlap));
  border-radius: var(--box-radius-center);
  z-index: 1;
  pointer-events: none;
  background: #ffffff;
}

/* Efek Blur/Masking Garis Merah Kotak Tengah */
.clients-board__center::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--box-border) solid var(--box-red);
  box-shadow:
    0 0 10px var(--box-glow),
    0 0 28px var(--box-glow),
    inset 0 0 10px rgba(227, 0, 15, 0.06);
  pointer-events: none;
  /* Gradasi masking agar garis atas dan bawah memudar (blur putih) persis di titik tengahnya */
  -webkit-mask-image: linear-gradient(to right,
      black 5%,
      transparent 50%,
      black 95%);
  mask-image: linear-gradient(to right, black 5%, transparent 50%, black 95%);
}

/* ─── MEDIA QUERIES BESAR DIHAPUS ───
 * Layout sekarang dibatasi maksimal 1300px (max-width pada .clients-board).
 * Ini memastikan proporsi kotak tengah dan logo TETAP KONSISTEN di layar >14 inch
 * atau saat di-zoom out, tidak akan melar/stretching.
 */

/* ─── SATU BARIS MARQUEE ─────────────────────────────────── */
.marquee-row {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Harus di atas .clients-board__center (z-index 1) agar logo terlihat */
  z-index: 2;
  /* Padding dan negative margin agar logo yang di-scale tidak terpotong oleh overflow: hidden */
  padding: 30px 0;
  margin: -30px 0;

  /*
   * FADE MASK — logo di tepi kiri-kanan memudar secara halus.
   * Ubah persentase (15% dan 85%) untuk memperlebar/mempersempit
   * area fade. Nilai lebih kecil = fade mulai lebih dekat ke tepi.
   */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%);
}

/* ─── TRACK (rel animasi) ────────────────────────────────── */
.marquee-track {
  display: flex;
  align-items: center;

  /*
   * Gap antar logo dalam satu baris.
   * Nilai ini dibaca otomatis oleh client.js dari DOM —
   * tidak perlu sinkronisasi manual. Default: 12px
   */
  gap: var(--logo-g);

  width: max-content;
  will-change: transform;
  /* Animasi dikendalikan sepenuhnya oleh client.js — tidak ada CSS animation di sini */
}

/* ─── HOVER BARIS — kursor menandai baris yang di-pause ─────
   Class "is-hovered" ditambahkan via JS ke .marquee-row yang sedang di-hover.
   Baris yang di-hover diberi efek visual ringan (opacity sedikit naik).
   Baris lain tetap berjalan normal.
   ─────────────────────────────────────────────────────────── */
.marquee-row.is-hovered {
  /* Efek visual opsional saat baris di-pause via hover */
  filter: brightness(1.08);
  cursor: default;
}

/* ─── TIAP LOGO ITEM ─────────────────────────────────────── */
.marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  /*
   * Ukuran kotak slot tiap logo.
   * PENTING: nilai width ini harus sama dengan LOGO_WIDTH di client.js.
   * Default: 100px × 65px
   */
  width: 100px;
  height: 65px;

  /* TIDAK ada background, border-radius, atau shadow — logo tampil transparan */

  /*
   * Transisi untuk efek upscale di tengah.
   * cubic-bezier(0.34, 1.56, 0.64, 1) = efek sedikit overshoot (spring-like)
   * Ubah durasi (0.4s) jika ingin upscale lebih cepat atau lambat.
   */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Gambar logo — tampil apa adanya tanpa background */
.client-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ─── CLASS UPSCALE — ditambahkan via JS ke logo di zona tengah ──
   Ubah nilai scale() untuk mengatur seberapa besar logo diperbesar.
   scale(1.5)  = 50% lebih besar
   scale(1.35) = 35% lebih besar (default)
   ─────────────────────────────────────────────────────────────── */
.marquee-item.is-center {
  transform: scale(var(--center-scale));
  z-index: 2;
}

/* ─── RESPONSIVE KECIL ─────────────────────────────────────── */

/* Tablet (900px ke bawah) */
@media (max-width: 900px) {
  :root {
    --box-overlap: 18px;
    --box-radius-outer: 28px;
    --box-radius-center: 18px;
  }

  .clients-board {
    padding: 32px 0;
    gap: 14px;
  }

  .marquee-item {
    width: 100px;
    height: 64px;
  }
}

/* ──────────────────────────────────────────────────────────
   MOBILE & TABLET (≤ 768px) — behavior khusus:
     • Geser 1 logo per step (bukan 2)
     • Hanya 1 logo membesar di tengah
     • Logo & kontainer fleksibel proporsional (vw)
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --box-overlap: 2.5vw;
    --box-radius-outer: 5vw;
    /* Radius proporsional seperti di layar iPhone SE */
    --box-radius-center: 4vw;
    /* Radius proporsional seperti di layar iPhone SE */
    --box-border: 4px;
    /* Border dipertipis (default desktop 8px) */

    /* Ukuran logo proporsional menggunakan vw */
    --logo-w: 12vw;
    --logo-g: 4vw;
    /* Jarak diperbesar agar logo kiri/kanan tidak menyusup masuk ke kotak tengah */
    --center-padding: 2vw;
    /* Kembalikan ukuran efek perbesaran di tengah ke 1.15 khusus mobile */
    --center-scale: 1.15;
  }

  .clients-board::before,
  .clients-board::after {
    border-radius: var(--box-radius-outer) !important;
  }

  .clients-board::after {
    border-width: var(--box-border) !important;
  }

  .clients-board__center {
    /* Container Grid Khusus Kotak Tengah Wajib 1 Kolom */
    width: calc((var(--logo-w) * var(--center-scale)) + var(--center-padding));
    border-radius: var(--box-radius-center) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .clients-board__center::before {
    border-width: var(--box-border) !important;
  }

  .marquee-item.is-center {
    grid-column: span 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    /* Reset margin/posisi tidak beraturan */
    transform: scale(var(--center-scale)) translate(0, 0) !important;
    /* Bersihkan sisa transform lain */
  }

  .marquee-item.is-center .client-logo-img {
    max-width: 80% !important;
    /* Batasi ukuran aman di dalam kotak merah */
    height: auto !important;
    object-fit: contain !important;
  }

  .clients-board {
    padding: 2vw 0 !important;
    /* Padding diperkecil agar keseluruhan kotak tidak melar ke bawah */
    gap: 1.5vw !important;
    /* Jarak vertikal antar baris dirapatkan agar logo tidak terlalu lowong */
  }

  .marquee-row {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%);
  }

  .marquee-track {
    gap: var(--logo-g);
  }

  .marquee-item {
    /* Mengecil otomatis mengikuti kontainer HP (Skala Fleksibel) */
    width: var(--logo-w);
    height: calc(var(--logo-w) * 0.65);
    /* pertahankan rasio aspek logo */
  }
}

/* HP sangat kecil (≤ 400px) - Tweak minor */
@media (max-width: 400px) {
  :root {
    --box-overlap: 2vw;
  }
}

/* ============================================================
   FINE-TUNING SPESIFIK LAPTOP 14 INCH (Zoom 100%)
   Range layar: 1360px - 1600px
   ============================================================ */
@media screen and (min-width: 1360px) and (max-width: 1600px) {
  /* margin-left adjustment removed to avoid breaking JS offset calculation */
}

/* ============================================================
   FINE-TUNING SPESIFIK ULTRA WIDE (Layar Besar / Zoom Out)
   Range layar: 1920px ke atas
   ============================================================ */
@media screen and (min-width: 1920px) {
  /* margin-left adjustment removed to avoid breaking JS offset calculation */
}

/* ============================================================
   FINE-TUNING SPESIFIK ZOOM OUT EXTREME (50%) / ULTRA WIDE
   Range layar: 2560px ke atas
   ============================================================ */
@media screen and (min-width: 2560px) {
  :root {
    /* Skala 1.5x untuk variabel inti agar membesar proporsional */
    --box-overlap: 36px;
    --box-radius-outer: 82px;
    --box-radius-center: 60px;
    --box-border: 12px;
    --logo-w: 150px;
    --logo-g: 55px;
    --center-padding: 12px;
  }

  .client-hero__title {
    /* Judul membesar dari max 4rem menjadi 6rem */
    font-size: 6rem;
  }

  .clients-board {
    /* Wrapper utama membesar dari max 1300px menjadi 1950px */
    max-width: 1950px;
    gap: 60px;
    padding: 84px 0;
  }

  .marquee-item {
    /* Item membesar 1.5x */
    width: var(--logo-w);
    height: 97.5px;
  }

  .marquee-track {
    /* Gap membesar 1.5x */
    gap: var(--logo-g);
    /* margin-left adjustment removed to avoid breaking JS offset calculation */
  }
}