/* t62-fitur.css -- halaman Fitur galeri (RANCANGAN_HALAMAN_FITUR_GALERI_20260923.md).
   Dimuat HANYA di is_page('fitur') (lihat enqueue di fitur_halaman_build.py / inc PHP terkait).
   Pakai token desain yang sudah ada (--t62-*, digiqole-child/style.css) -- tanpa warna baru.
   Draf 23 Sep, disesuaikan setelah prototipe 30 Sep bila perlu. */

/* -- Breadcrumb -- */
.t62f-breadcrumb{ font-size:13px; color:var(--t62-muted); margin:0 0 10px; }
.t62f-breadcrumb a{ color:var(--t62-muted); text-decoration:underline; }

/* -- Hero ringkas -- */
.t62f-hero-meta{ font-size:13px; color:var(--t62-muted); font-family:var(--t62-font-mono); margin:6px 0 18px; }

/* -- Navigasi chip lengket -- */
.t62f-chipnav{
  position: sticky; top: 0; z-index: 40; background: var(--t62-bg);
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 2px; margin:0 0 24px; border-bottom:1px solid var(--t62-border);
  scrollbar-width: none;
}
.t62f-chipnav::-webkit-scrollbar{ display:none; }
.t62f-chipnav a{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border-radius:999px; background:var(--t62-surface); border:1px solid var(--t62-border);
  color:var(--t62-text-2); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  scroll-margin-top: 56px;
}
.t62f-chipnav a[aria-current="true"]{
  background:var(--t62-accent-dim); border-color:var(--t62-accent); color:var(--t62-accent);
}

/* -- Bagian (section) -- */
.t62f-section{ scroll-margin-top: 56px; margin: 0 0 40px; }
.t62f-section h2{ margin-top: 0; }
.t62f-section-intro{ color:var(--t62-text-2); font-size:15px; margin:0 0 6px; }
.t62f-cara-baca{ font-size:13px; color:var(--t62-accent); text-decoration:none; }

/* -- Kartu fitur: teks kiri, galeri kanan (desktop); stack (mobile) -- */
.t62f-card{
  display:flex; gap:24px; align-items:flex-start; margin:20px 0;
  padding:18px; background:var(--t62-surface); border:1px solid var(--t62-border); border-radius:10px;
}
.t62f-card-text{ flex:1 1 320px; min-width:0; }
.t62f-card-text h3{ margin:0 0 8px; font-size:17px; }
.t62f-card-text p{ margin:0 0 12px; font-size:14px; color:var(--t62-text-2); }
.t62f-card-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.t62f-card-actions a{
  font-size:13px; font-weight:600; text-decoration:none; padding:8px 14px; border-radius:6px;
}
.t62f-card-actions a.t62f-btn-contoh{ background:var(--t62-accent); color:#fff; }
.t62f-card-actions a.t62f-btn-panduan{ background:var(--t62-accent-dim); color:var(--t62-accent); border:1px solid var(--t62-border); }
.t62f-card-disclaimer{ font-size:12px; color:var(--t62-muted); margin-top:10px; }

/* -- Galeri: tab Desktop | Seluler tanpa JS (radio + :has), 1 gambar besar + caption -- */
.t62f-gallery{ flex:1 1 380px; min-width:0; max-width:560px; }
.t62f-gallery-tabs{ display:flex; gap:6px; margin:0 0 8px; }
.t62f-gallery-tabs input{ position:absolute; opacity:0; pointer-events:none; }
.t62f-gallery-tabs label{
  font-size:12px; font-weight:600; padding:5px 12px; border-radius:6px; cursor:pointer;
  background:var(--t62-bg); border:1px solid var(--t62-border); color:var(--t62-muted);
}
/* v16 (2026-09-24) -- bingkai tinggi dibatasi + scroll internal: putaran 1 tangkapan dari
   Infrastructure Engineer full-page (bukan crop terfokus, lihat UTANG_TEKNIS_GALERI_FITUR_VIEWPORT_CROP.md
   di root repo -- utang teknis dicatat resmi, BUKAN standar permanen). Gambar tetap lebar penuh
   (rasio asli terjaga), tinggi dibatasi max-height + overflow:auto (scroll internal kalau lebih
   tinggi dari bingkai) drpd native full-height yg bikin kartu jadi sangat panjang. "Lihat penuh"
   via lightbox (JS) tetap tersedia utk lihat gambar seutuhnya. */
.t62f-gallery-img{ display:none; position:relative; max-height:420px; overflow:auto; border-radius:8px; background:var(--t62-bg); }
.t62f-gallery-img img{
  /* rasio tetap (tanpa geser tata letak) datang dari atribut width/height HTML asli (bukan attr()
     CSS -- belum didukung luas utk aspect-ratio); browser modern otomatis pakai itu sbg aspect-ratio. */
  display:block; width:100%; height:auto; cursor:zoom-in;
}
.t62f-gallery-img::after{
  content:"Gulir utk lihat lebih \2193  \2022  Klik gambar utk lihat penuh";
  position:sticky; left:0; right:0; bottom:0; display:block;
  padding:6px 10px; margin-top:-28px;
  background:linear-gradient(180deg, rgba(26,26,25,0) 0%, var(--t62-surface) 65%);
  color:var(--t62-muted); font-size:11px; text-align:center; pointer-events:none;
}
.t62f-gallery-caption{ font-size:12px; color:var(--t62-muted); margin-top:8px; }
/* Default: tampilkan desktop (radio desktop punya atribut "checked" di HTML). Kalau radio
   "seluler" (class t62f-mobile-radio) dicentang, tukar tampilan -- murni CSS, tanpa JS. */
.t62f-gallery-img.desktop{ display:block; }
.t62f-gallery:has(input.t62f-mobile-radio:checked) .t62f-gallery-img.desktop{ display:none; }
.t62f-gallery:has(input.t62f-mobile-radio:checked) .t62f-gallery-img.mobile{ display:block; }
.t62f-gallery-tabs label:has(+ input:checked),
.t62f-gallery-tabs input:checked + label{ background:var(--t62-accent-dim); border-color:var(--t62-accent); color:var(--t62-accent); }

/* -- Lightbox (dialog native) -- */
.t62f-lightbox{
  border:0; border-radius:10px; background:var(--t62-surface); color:var(--t62-text);
  max-width:min(92vw, 1100px); max-height:88vh; padding:0;
}
.t62f-lightbox::backdrop{ background:rgba(0,0,0,.72); }
.t62f-lightbox img{ display:block; width:100%; height:auto; max-height:76vh; object-fit:contain; }
.t62f-lightbox-bar{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; gap:10px; }
.t62f-lightbox-bar span{ font-size:12px; color:var(--t62-muted); }
.t62f-lightbox-close, .t62f-lightbox-nav{
  background:var(--t62-bg); border:1px solid var(--t62-border); color:var(--t62-text);
  border-radius:6px; min-height:36px; min-width:36px; cursor:pointer; font-size:16px;
}

/* -- Responsif: 375px, satu kolom, galeri di bawah teks -- */
@media (max-width: 768px){
  .t62f-card{ flex-direction:column; }
  .t62f-gallery{ max-width:100%; }
}

/* -- Hormati prefers-reduced-motion: tanpa transisi/animasi -- */
@media (prefers-reduced-motion: no-preference){
  .t62f-card{ transition: border-color .15s ease; }
}

/* =====================================================================================================================
   v2 MODERN (11 Okt 2026, perintah pemilik "perbaikan tampilan halaman fitur, harus modern"):
   kartu dalam GRID 2 kolom dgn pratinjau di ATAS (bukan teks kiri + galeri kanan yg memanjangkan halaman), bentuk selaras app
   (radius 12px, border 1px, bayangan token, tombol utama outline aksen, target sentuh >=44px, paragraf 16px di ponsel),
   hero dgn lede. Hanya CSS + 1 paragraf lede; token --t62-* yang sudah ada, TANPA warna baru; markup kartu/galeri/lightbox tak berubah.
   ===================================================================================================================== */
.builder-content > h1{ font-family:var(--t62-font-mono); font-weight:700; font-size:28px; line-height:1.25; letter-spacing:-0.01em; margin:0 0 10px; }
.t62f-lede{ font-size:16px; line-height:1.65; color:var(--t62-text-2); max-width:68ch; margin:0 0 20px; }

.t62f-chipnav{ border-bottom:0; padding:10px 2px 12px; margin:0 0 28px; gap:10px; backdrop-filter:saturate(1.1); }
.t62f-chipnav a{ background:var(--t62-surface); transition:border-color .15s ease, color .15s ease; }
.t62f-chipnav a:hover{ border-color:var(--t62-accent); color:var(--t62-text); }

.t62f-section{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; margin:0 0 64px; }
.t62f-section > h2, .t62f-section > .t62f-section-intro{ grid-column:1 / -1; }
.t62f-section > h2{
  display:flex; align-items:center; gap:12px; margin:0; font-family:var(--t62-font-mono); font-weight:700; font-size:22px; line-height:1.3;
}
.t62f-section > h2::before{ content:""; flex:0 0 4px; height:24px; border-radius:2px; background:var(--t62-accent); }
.t62f-section-intro{ color:var(--t62-text-2); font-size:15px; line-height:1.65; max-width:78ch; margin:-8px 0 4px; }

.t62f-card{
  display:flex; flex-direction:column; gap:0; margin:0; padding:0; overflow:hidden;
  background:var(--t62-surface); border:1px solid var(--t62-border); border-radius:12px; box-shadow:var(--t62-shadow);
}
.t62f-card:hover{ border-color:color-mix(in srgb, var(--t62-accent) 55%, var(--t62-border)); }
.t62f-card-text{ order:2; flex:1 1 auto; display:flex; flex-direction:column; padding:18px 20px 20px; }
.t62f-card-text h3{ font-family:var(--t62-font-mono); font-weight:700; font-size:17px; line-height:1.35; margin:0 0 8px; }
.t62f-card-text p{ font-size:15px; line-height:1.65; color:var(--t62-text-2); margin:0 0 14px; }
.t62f-card-actions{ margin-top:auto; gap:12px; align-items:center; }
.t62f-card-actions a{ min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:6px; font-size:14px; font-weight:600; }
.t62f-card-actions a.t62f-btn-contoh{
  background:transparent; color:var(--t62-accent); border:1px solid var(--t62-accent); transition:background .15s ease, color .15s ease;
}
.t62f-card-actions a.t62f-btn-contoh:hover{ background:var(--t62-accent); color:var(--t62-bg); }
.t62f-card-actions a.t62f-btn-panduan{ background:transparent; border:0; padding:0 4px; color:var(--t62-text-2); }
.t62f-card-actions a.t62f-btn-panduan:hover{ color:var(--t62-accent); }
.t62f-card-disclaimer{ font-size:12px; line-height:1.5; color:var(--t62-muted); margin:12px 0 0; }

/* pratinjau di atas kartu */
.t62f-gallery{ order:1; flex:none; width:100%; max-width:none; position:relative; border-bottom:1px solid var(--t62-border); background:var(--t62-bg); }
.t62f-gallery-tabs{ position:absolute; top:10px; left:10px; z-index:3; margin:0; gap:6px; }
.t62f-gallery-tabs label{
  min-height:32px; display:inline-flex; align-items:center; padding:0 12px; font-size:12px;
  background:color-mix(in srgb, var(--t62-bg) 82%, transparent); backdrop-filter:blur(4px);
}
.t62f-gallery-img{ height:260px; max-height:none; overflow:hidden; border-radius:0; background:var(--t62-bg); }
.t62f-gallery-img a{ display:block; height:100%; }
.t62f-gallery-img img{ width:100%; height:100%; object-fit:cover; object-position:top center; cursor:zoom-in; transition:transform .25s ease; }
.t62f-card:hover .t62f-gallery-img img{ transform:scale(1.015); }
.t62f-gallery-img::after{
  content:"Klik untuk memperbesar"; position:absolute; inset:auto 10px 10px auto; left:auto; right:10px; bottom:10px; margin:0;
  padding:5px 10px; border-radius:6px; background:color-mix(in srgb, var(--t62-bg) 82%, transparent); color:var(--t62-text-2);
  font-size:11px; text-align:right; pointer-events:none;
}
.t62f-gallery-caption{ display:none; }

/* kartu pembuka (Satu halaman, satu saham): lebar penuh, teks kiri + pratinjau kanan */
#satu-saham .t62f-card:first-of-type{ grid-column:1 / -1; flex-direction:row; align-items:stretch; }
#satu-saham .t62f-card:first-of-type .t62f-card-text{ order:1; flex:1 1 42%; padding:26px 28px; justify-content:center; }
#satu-saham .t62f-card:first-of-type .t62f-gallery{ order:2; flex:1 1 58%; border-bottom:0; border-left:1px solid var(--t62-border); }
#satu-saham .t62f-card:first-of-type .t62f-gallery-img{ height:380px; }

@media (max-width: 900px){
  .t62f-section{ grid-template-columns:1fr; gap:18px; margin-bottom:48px; }
  #satu-saham .t62f-card:first-of-type{ flex-direction:column; }
  #satu-saham .t62f-card:first-of-type .t62f-card-text{ order:2; padding:18px 20px 20px; }
  #satu-saham .t62f-card:first-of-type .t62f-gallery{ order:1; border-left:0; border-bottom:1px solid var(--t62-border); }
  #satu-saham .t62f-card:first-of-type .t62f-gallery-img{ height:260px; }
}
@media (max-width: 640px){
  .builder-content > h1{ font-size:24px; }
  .t62f-section > h2{ font-size:20px; }
  .t62f-card-text p, .t62f-section-intro{ font-size:16px; }
  .t62f-gallery-img{ height:220px; }
}
@media (prefers-reduced-motion: reduce){
  .t62f-gallery-img img, .t62f-card{ transition:none; }
  .t62f-card:hover .t62f-gallery-img img{ transform:none; }
}

/* lebar + gutter: kontainer tema (.builder-content) full-bleed tanpa padding; dibatasi 1180px dan diberi gutter 16px (CSS ini hanya dimuat di halaman Fitur) */
.builder-content{ max-width:1180px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; box-sizing:border-box; }