/* ============================================================
   AREA EKSPOR — lapisan tampilan halaman ikhtisar
   ============================================================

   Dimuat SESUDAH export.css, dan tidak menimpanya.

   Dipisah karena export.css sudah dipakai halaman lot, detail lot,
   formulir permintaan, dan proforma. Berkas ini hanya menambah
   perabot baru untuk halaman ikhtisar; kalau suatu hari tampilan ini
   tidak disukai, cukup satu <link> dicabut dan halaman lain tidak
   tersentuh sama sekali.

   Tokennya meminjam dari export.css (--ex-forest-*, --ex-gold,
   --ex-paper, Fraunces, Public Sans, JetBrains Mono), jadi halaman ini
   tetap satu wajah dengan sisa area ekspor dan dengan merek.

   Awalan .exp- dipakai supaya tidak pernah berbenturan dengan .ex-
   yang sudah ada.

   Catatan rancangan — kenapa versi ini tidak lagi berupa tumpukan
   kotak: versi pertama menyusun tiap bagian dengan irama yang persis
   sama (judul di tengah, lalu tiga kartu berbingkai). Rapi, tetapi
   enam kali berturut-turut membuatnya terbaca seperti templat. Yang
   diubah di sini adalah iramanya: tinggi yang berbeda-beda, potongan
   miring antarbagian, nomor raksasa di latar, satu sisi yang sengaja
   lebih berat daripada sisi lain, dan gerak yang menyusul guliran.
   ============================================================ */

:root{
  --exp-emas-lembut:rgba(184,135,59,.22);
  --exp-radius:18px;
  --exp-miring:54px;          /* tinggi potongan miring antarbagian */

  /* Kedalaman.
     --------------------------------------------------------------
     Bayangan BERLAPIS, bukan satu bayangan besar. Benda nyata punya
     dua bayangan sekaligus: kontak yang rapat dan gelap tepat di
     bawahnya, dan sebaran lembut yang jauh lebih luas. Satu
     box-shadow tunggal hanya bisa meniru salah satunya, dan hasilnya
     selalu terbaca sebagai stiker yang diberi kabut.

     Sorotan tepi atas setebal 1px itu yang membuat permukaan terbaca
     MIRING ke arah cahaya. Tanpa itu, kartu bergradasi pun tetap
     terbaca sebagai bidang datar yang kebetulan berwarna dua. */
  --exp-bayang-1:0 1px 2px rgba(29,26,21,.10), 0 3px 6px -1px rgba(29,26,21,.10);
  --exp-bayang-2:0 2px 4px rgba(29,26,21,.08), 0 10px 18px -6px rgba(29,26,21,.18),
                 0 22px 40px -16px rgba(29,26,21,.22);
  --exp-bayang-3:0 4px 8px rgba(29,26,21,.10), 0 20px 36px -10px rgba(29,26,21,.26),
                 0 44px 72px -24px rgba(29,26,21,.34);
  --exp-bayang-gelap:0 2px 4px rgba(0,0,0,.3), 0 14px 28px -10px rgba(0,0,0,.55),
                     0 32px 56px -22px rgba(0,0,0,.6);
  --exp-kilau:inset 0 1px 0 rgba(255,255,255,.95);
  --exp-kilau-gelap:inset 0 1px 0 rgba(251,249,244,.13);
}

/* ------------------------------------------------------------
   Gerak: muncul saat digulir
   ------------------------------------------------------------ */

.exp-muncul{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.8,.3,1), transform .75s cubic-bezier(.2,.8,.3,1);
  will-change:opacity, transform;
}
.exp-muncul.exp-tampak{ opacity:1; transform:none }

.exp-muncul[data-exp-jeda="1"]{ transition-delay:.09s }
.exp-muncul[data-exp-jeda="2"]{ transition-delay:.18s }
.exp-muncul[data-exp-jeda="3"]{ transition-delay:.27s }
.exp-muncul[data-exp-jeda="4"]{ transition-delay:.36s }

/* Masuk dari samping, untuk blok yang berdampingan. */
.exp-muncul-kiri{ transform:translateX(-30px) }
.exp-muncul-kanan{ transform:translateX(30px) }
.exp-muncul-kiri.exp-tampak,
.exp-muncul-kanan.exp-tampak{ transform:none }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.exp-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:clamp(620px, 94vh, 1000px);
  padding:96px 0 0;
  color:var(--ex-paper);
  background:
    radial-gradient(120% 110% at 14% -10%, #2d5436 0%, transparent 56%),
    radial-gradient(90% 80% at 92% 12%, rgba(184,135,59,.16) 0%, transparent 55%),
    linear-gradient(168deg, var(--ex-forest-900) 0%, var(--ex-forest-950) 62%, #0b1810 100%);
}

.exp-hero-foto{
  position:absolute;
  inset:-8% 0 0 0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  opacity:.32;
  filter:saturate(.8);
  will-change:transform;
}

.exp-hero-kabut{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to bottom,
    rgba(18,36,26,.42) 0%, rgba(18,36,26,.76) 56%, var(--ex-forest-950) 100%);
}

/* Garis kontur dataran tinggi. SVG sebaris, bukan berkas gambar —
   tidak ada aset yang perlu diunggah dan tidak ada yang bisa 404. */
.exp-kontur{
  position:absolute;
  inset:auto 0 -2px 0;
  z-index:-1;
  width:100%;
  height:auto;
  pointer-events:none;
  opacity:.55;
  will-change:transform;
}
.exp-kontur path{ fill:none; stroke:var(--ex-gold); stroke-width:1; opacity:.32 }
.exp-kontur path:nth-child(even){ opacity:.16 }

.exp-hero-kisi{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .78fr);
  gap:54px;
  align-items:center;
  padding-bottom:40px;
}

.exp-hero-isi{ position:relative; max-width:640px }

.exp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 20px;
  padding:7px 15px 7px 12px;
  font-family:var(--ex-font-body);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ex-gold-300);
  background:rgba(184,135,59,.12);
  border:1px solid var(--exp-emas-lembut);
  border-radius:999px;
}
.exp-eyebrow::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ex-gold-300);
  box-shadow:0 0 0 0 rgba(224,188,126,.55);
  animation:exp-denyut 2.4s ease-out infinite;
}
@keyframes exp-denyut{
  0%{ box-shadow:0 0 0 0 rgba(224,188,126,.5) }
  70%{ box-shadow:0 0 0 9px rgba(224,188,126,0) }
  100%{ box-shadow:0 0 0 0 rgba(224,188,126,0) }
}

.exp-h1{
  margin:0 0 22px;
  font-family:var(--ex-font-display);
  font-weight:600;
  font-size:clamp(36px, 5.6vw, 66px);
  line-height:1.03;
  letter-spacing:-.024em;
}
.exp-h1 em{ font-style:italic; color:var(--ex-gold-300) }

.exp-lead{
  margin:0 0 32px;
  max-width:560px;
  font-size:clamp(15px, 1.5vw, 17px);
  line-height:1.74;
  color:rgba(251,249,244,.74);
}

.exp-aksi{ display:flex; flex-wrap:wrap; gap:12px }

/* ---- tombol ---- */

.exp-tombol{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  font-family:var(--ex-font-body);
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .24s, background .24s, color .24s;
}
.exp-tombol svg{ width:17px; height:17px; flex:0 0 auto; transition:transform .25s }
.exp-tombol:hover{ transform:translateY(-3px) }
.exp-tombol:hover svg{ transform:translateX(3px) }

.exp-tombol-emas{
  color:#1a1206;
  /* Gradasi TEGAK, bukan diagonal: cahaya datang dari atas, dan
     tombol yang terangnya di pojok kiri-atas terbaca sebagai kartu
     miring, bukan sebagai tombol yang menonjol. */
  background:linear-gradient(180deg, #f3e0ab 0%, #d9ab41 46%, #a9781e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -2px 0 rgba(74,45,8,.3),
             0 2px 3px rgba(74,45,8,.3),
             0 12px 26px -10px rgba(184,135,59,.85);
}
.exp-tombol-emas:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             inset 0 -2px 0 rgba(74,45,8,.3),
             0 3px 5px rgba(74,45,8,.3),
             0 20px 40px -12px rgba(184,135,59,1);
}
/* Ditekan = benar-benar turun, dan sorotan atasnya padam. */
.exp-tombol-emas:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 5px rgba(74,45,8,.45), 0 1px 2px rgba(74,45,8,.3);
}

/* Kilau yang melintas sekali saat disentuh. */
.exp-tombol-emas::after{
  content:'';
  position:absolute;
  inset:0 auto 0 -60%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
.exp-tombol-emas:hover::after{ left:120% }

.exp-tombol-tipis{
  color:var(--ex-paper);
  border-color:rgba(251,249,244,.26);
  background:linear-gradient(180deg, rgba(251,249,244,.11), rgba(251,249,244,.03));
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(251,249,244,.22), 0 8px 18px -10px rgba(0,0,0,.6);
}
.exp-tombol-tipis:hover{
  border-color:rgba(251,249,244,.5);
  box-shadow:inset 0 1px 0 rgba(251,249,244,.3), 0 14px 26px -10px rgba(0,0,0,.7);
}
.exp-tombol-tipis:active{ transform:translateY(2px); box-shadow:inset 0 2px 5px rgba(0,0,0,.4) }

.exp-tombol-tanah{
  color:var(--ex-paper);
  background:linear-gradient(180deg, #35593f 0%, #1f3d29 55%, #15291c 100%);
  box-shadow:inset 0 1px 0 rgba(251,249,244,.16),
             inset 0 -2px 0 rgba(0,0,0,.3),
             0 2px 3px rgba(18,36,26,.4),
             0 14px 28px -12px rgba(18,36,26,.85);
}
.exp-tombol-tanah:hover{ box-shadow:inset 0 1px 0 rgba(251,249,244,.22),
             inset 0 -2px 0 rgba(0,0,0,.3), 0 20px 36px -12px rgba(18,36,26,.95) }
.exp-tombol-tanah:active{ transform:translateY(2px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5) }

/* ---- kartu lot melayang di sisi kanan hero ----
   Mengisi separuh hero yang pada versi pertama dibiarkan kosong, dan
   mengisinya dengan DATA SUNGGUHAN: lot teratas yang sedang tersedia.
   Pembeli melihat penawaran nyata sebelum menggulir sekali pun. */

.exp-lotkartu{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(251,249,244,.16);
  background:rgba(251,249,244,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--exp-bayang-gelap), inset 0 1px 0 rgba(251,249,244,.18);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1), border-color .3s, box-shadow .34s;
}
.exp-lotkartu:hover{ transform:translateY(-6px); border-color:rgba(184,135,59,.5) }

.exp-lotkartu-foto{
  height:148px;
  background-size:cover;
  background-position:center;
  background-color:var(--ex-forest-800);
}

.exp-lotkartu-isi{ padding:22px 24px 24px }

.exp-lotkartu-atas{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.exp-lotkartu-tanda{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ex-gold-300);
}
.exp-lotkartu-skor{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(184,135,59,.18);
  border:1px solid rgba(184,135,59,.4);
}
.exp-lotkartu-skor b{
  font-family:var(--ex-font-mono);
  font-size:16px;
  font-weight:500;
  color:var(--ex-gold-300);
}
.exp-lotkartu-skor span{ font-size:10px; color:rgba(251,249,244,.6) }

.exp-lotkartu h3{
  margin:0 0 16px;
  font-family:var(--ex-font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.26;
  color:var(--ex-paper);
}

.exp-lotkartu-spek{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
  margin:0 0 18px;
  padding:16px 0 0;
  border-top:1px solid rgba(251,249,244,.13);
}
.exp-lotkartu-spek dt{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(251,249,244,.46);
}
.exp-lotkartu-spek dd{
  margin:3px 0 0;
  font-family:var(--ex-font-mono);
  font-size:13.5px;
  color:var(--ex-paper);
}

.exp-lotkartu-tautan{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:700;
  text-decoration:none;
  color:var(--ex-gold-300);
}
.exp-lotkartu-tautan svg{ width:15px; height:15px; transition:transform .25s }
.exp-lotkartu:hover .exp-lotkartu-tautan svg{ transform:translateX(4px) }

/* Panel pengganti ketika belum ada lot yang ditayangkan. */
.exp-ringkas{
  padding:28px 26px;
  border-radius:22px;
  border:1px solid rgba(251,249,244,.16);
  background:rgba(251,249,244,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.exp-ringkas dl{ margin:0; display:grid; gap:18px }
.exp-ringkas dt{
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(251,249,244,.5);
}
.exp-ringkas dd{
  margin:5px 0 0;
  font-family:var(--ex-font-display);
  font-size:21px; font-weight:600; color:var(--ex-gold-300);
}

/* ---- angka utama ---- */

.exp-stat{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid rgba(251,249,244,.14);
}
.exp-stat > div{
  padding:26px 20px 30px 0;
  border-right:1px solid rgba(251,249,244,.1);
}
.exp-stat > div:last-child{ border-right:0 }
.exp-stat > div + div{ padding-left:22px }

.exp-stat b{
  display:block;
  font-family:var(--ex-font-display);
  font-weight:600;
  font-size:clamp(27px, 3.3vw, 40px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ex-gold-300);
  font-variant-numeric:tabular-nums;
}
.exp-stat b small{ font-size:.46em; letter-spacing:0 }
.exp-stat span{
  display:block;
  margin-top:9px;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.03em;
  color:rgba(251,249,244,.58);
}

/* ------------------------------------------------------------
   Pita berjalan
   ------------------------------------------------------------
   Isinya fakta yang memang sudah benar di halaman ini — bukan logo
   perusahaan pelayaran yang tidak kami kenal. Gerak yang jujur. */

.exp-pita{
  position:relative;
  overflow:hidden;
  padding:15px 0;
  background:var(--ex-forest-950);
  border-top:1px solid rgba(184,135,59,.2);
  border-bottom:1px solid rgba(184,135,59,.2);
}
.exp-pita::before,
.exp-pita::after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:90px;
  z-index:2;
  pointer-events:none;
}
.exp-pita::before{ left:0; background:linear-gradient(to right, var(--ex-forest-950), transparent) }
.exp-pita::after{ right:0; background:linear-gradient(to left, var(--ex-forest-950), transparent) }

.exp-pita-jalur{
  display:flex;
  width:max-content;
  animation:exp-pita 42s linear infinite;
}
.exp-pita:hover .exp-pita-jalur{ animation-play-state:paused }

@keyframes exp-pita{ to{ transform:translateX(-50%) } }

.exp-pita-isi{ display:flex; align-items:center; flex:0 0 auto }
.exp-pita-isi span{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0 26px;
  font-family:var(--ex-font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  white-space:nowrap;
  color:rgba(251,249,244,.66);
}
.exp-pita-isi span::after{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--ex-gold);
  opacity:.65;
}

/* ------------------------------------------------------------
   Strip kredensial
   ------------------------------------------------------------ */

.exp-kredensial{
  padding:22px 0;
  background:rgba(13,28,20,.96);
  border-bottom:1px solid rgba(251,249,244,.1);
}
.exp-kred-item{ display:inline-flex; flex-direction:column; gap:3px }
.exp-kred-item span{
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(251,249,244,.46);
}
.exp-kred-item b{
  font-family:var(--ex-font-mono);
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  color:var(--ex-gold-300);
}

/* ------------------------------------------------------------
   Bagian umum
   ------------------------------------------------------------ */

.exp-bagian{
  position:relative;
  overflow:hidden;
  padding:92px 0;
  background:var(--ex-paper);
}
.exp-bagian-kertas{ background:var(--ex-paper-2) }

.exp-bagian-gelap{
  color:var(--ex-paper);
  background:
    radial-gradient(85% 120% at 88% -10%, #26472e 0%, transparent 58%),
    var(--ex-forest-950);
}
.exp-bagian-gelap .exp-h2{ color:var(--ex-paper) }
.exp-bagian-gelap .exp-teks{ color:rgba(251,249,244,.72) }

/* Potongan miring. Menghilangkan garis lurus yang membuat halaman
   terbaca sebagai tumpukan pita. */
.exp-miring-atas{
  margin-top:calc(var(--exp-miring) * -1);
  padding-top:calc(92px + var(--exp-miring));
  clip-path:polygon(0 var(--exp-miring), 100% 0, 100% 100%, 0 100%);
}
.exp-miring-bawah{
  padding-bottom:calc(92px + var(--exp-miring));
  margin-bottom:calc(var(--exp-miring) * -1);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--exp-miring)), 0 100%);
}

/* Nomor raksasa di latar tiap bagian. Hiasan, tapi ia yang memberi
   tiap bagian bobot berbeda dan memutus keseragaman. */
.exp-nomor-hantu{
  position:absolute;
  top:26px;
  inset-inline-end:2%;
  z-index:0;
  font-family:var(--ex-font-display);
  font-size:clamp(130px, 20vw, 290px);
  font-weight:600;
  line-height:.8;
  letter-spacing:-.04em;
  color:var(--ex-ink);
  opacity:.035;
  pointer-events:none;
  user-select:none;
}
.exp-bagian-gelap .exp-nomor-hantu{ color:var(--ex-gold-300); opacity:.07 }

.exp-bagian > .ex-wrap{ position:relative; z-index:1 }

.exp-kepala{ max-width:660px; margin-bottom:48px }
.exp-kepala-tengah{ margin-inline:auto; text-align:center }

.exp-tanda{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ex-soil-600);
}
.exp-tanda::before{
  content:'';
  width:26px; height:1px;
  background:currentColor;
  opacity:.5;
}
.exp-bagian-gelap .exp-tanda{ color:var(--ex-gold-300) }
.exp-kepala-tengah .exp-tanda{ justify-content:center }

.exp-h2{
  margin:0 0 18px;
  font-family:var(--ex-font-display);
  font-weight:600;
  font-size:clamp(27px, 3.6vw, 44px);
  line-height:1.12;
  letter-spacing:-.022em;
  color:var(--ex-ink);
}

.exp-teks{ margin:0; font-size:15.5px; line-height:1.76; color:var(--ex-ink-2) }
.exp-teks + .exp-teks{ margin-top:14px }

/* ------------------------------------------------------------
   Kisi & kartu
   ------------------------------------------------------------ */

.exp-tiga{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px }
.exp-dua{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px }

/* Sengaja tidak 50/50. Sisi kiri lebih berat supaya halamannya punya
   arah baca, bukan dua kolom yang saling menyeimbangkan sampai diam. */
.exp-belah{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:58px;
  align-items:center;
}
.exp-belah-balik{ grid-template-columns:.88fr 1.12fr }

.exp-kartu{
  position:relative;
  overflow:hidden;
  padding:30px 28px;
  background:linear-gradient(168deg, #ffffff 0%, #fdfaf4 52%, #f4eee1 100%);
  border:1px solid var(--ex-line);
  border-radius:var(--exp-radius);
  box-shadow:var(--exp-bayang-2), var(--exp-kilau);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1), box-shadow .34s, border-color .26s;
}
/* Garis emas yang menyapu dari kiri saat disentuh. */
.exp-kartu::before{
  content:'';
  position:absolute;
  top:0; left:0;
  height:3px; width:100%;
  background:linear-gradient(90deg, var(--ex-gold), var(--ex-gold-300));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.9,.3,1);
}
.exp-kartu:hover{
  transform:translateY(-8px);
  border-color:#cdc3ab;
  box-shadow:var(--exp-bayang-3), var(--exp-kilau);
}
.exp-kartu:hover::before{ transform:scaleX(1) }

.exp-bagian-gelap .exp-kartu{
  background:linear-gradient(168deg, rgba(251,249,244,.1) 0%, rgba(251,249,244,.045) 55%,
             rgba(0,0,0,.12) 100%);
  border-color:rgba(251,249,244,.14);
  box-shadow:var(--exp-bayang-gelap), var(--exp-kilau-gelap);
}
.exp-bagian-gelap .exp-kartu:hover{
  border-color:rgba(184,135,59,.45);
  box-shadow:0 6px 12px rgba(0,0,0,.35), 0 26px 48px -14px rgba(0,0,0,.65),
             0 50px 80px -26px rgba(0,0,0,.7), var(--exp-kilau-gelap);
}

.exp-kartu h3{
  margin:0 0 11px;
  font-family:var(--ex-font-display);
  font-weight:600; font-size:20px; line-height:1.3;
  color:var(--ex-ink);
}
.exp-bagian-gelap .exp-kartu h3{ color:var(--ex-paper) }

.exp-kartu p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--ex-ink-2) }
.exp-bagian-gelap .exp-kartu p{ color:rgba(251,249,244,.68) }

.exp-ikon{
  width:46px; height:46px;
  display:grid; place-items:center;
  margin-bottom:18px;
  border-radius:13px;
  color:var(--ex-soil-600);
  background:rgba(131,63,40,.09);
  transition:transform .3s cubic-bezier(.2,1.5,.4,1), background .26s;
}
.exp-ikon svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6 }
.exp-kartu:hover .exp-ikon{ transform:scale(1.1) rotate(-5deg); background:rgba(131,63,40,.15) }
.exp-bagian-gelap .exp-ikon{ color:var(--ex-gold-300); background:rgba(184,135,59,.14) }

/* Nomor indeks pada kartu kemasan — menggantikan ikon yang mirip-mirip. */
.exp-indeks{
  display:block;
  margin-bottom:14px;
  font-family:var(--ex-font-display);
  font-size:38px; font-weight:600; line-height:1;
  color:var(--ex-line);
  transition:color .3s;
}
.exp-kartu:hover .exp-indeks{ color:var(--ex-gold) }

/* ------------------------------------------------------------
   Bingkai gambar
   ------------------------------------------------------------ */

.exp-gambar{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--ex-line);
  background:linear-gradient(145deg, var(--ex-forest-800) 0%, var(--ex-forest-950) 100%);
  aspect-ratio:4 / 5;
  box-shadow:var(--exp-bayang-3), inset 0 1px 0 rgba(251,249,244,.12);
}
.exp-gambar img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
.exp-gambar:hover img{ transform:scale(1.05) }
.exp-gambar-lebar{ aspect-ratio:16 / 10 }

/* Dibuat lebih tinggi daripada kolomnya dan sedikit keluar dari alur,
   supaya dua kolomnya tidak sama rata. */
.exp-gambar-tinggi{ aspect-ratio:3 / 4.4; margin-block:-26px }

.exp-gambar-kosong::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:repeating-radial-gradient(circle at 32% 68%,
    transparent 0 17px, rgba(184,135,59,.17) 17px 18px);
  opacity:.65;
}

/* Tanda biji samar di tengah slot yang belum berisi foto. Tanpa ini,
   panelnya terbaca sebagai lubang yang belum terisi; dengan ini, ia
   terbaca sebagai panel yang memang digambar begitu. */
.exp-gambar-cap{
  position:absolute;
  top:50%; left:50%;
  width:84px; height:84px;
  transform:translate(-50%,-58%);
  fill:none; stroke:var(--ex-gold); stroke-width:.9;
  opacity:.3;
}

.exp-gambar-tanda{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:20px 22px;
  font-size:12.5px; line-height:1.5;
  color:rgba(251,249,244,.74);
  background:linear-gradient(to top, rgba(13,28,20,.94), transparent);
}
.exp-gambar-tanda b{
  display:block;
  font-family:var(--ex-font-display);
  font-size:16px; color:var(--ex-paper);
}

/* ------------------------------------------------------------
   Diagram ketinggian
   ------------------------------------------------------------ */

.exp-ketinggian{
  margin:28px 0 0;
  padding:24px 26px;
  border:1px solid var(--ex-line);
  border-radius:var(--exp-radius);
  background:#fff;
  box-shadow:0 20px 44px -34px rgba(29,26,21,.5);
}
.exp-ketinggian svg{ display:block; width:100%; height:auto }
.exp-ketinggian figcaption{
  margin-top:14px; font-size:12.5px; line-height:1.62; color:var(--ex-ink-3);
}

/* ------------------------------------------------------------
   Alur kerja — garis waktu
   ------------------------------------------------------------ */

.exp-alur{ position:relative; display:grid }

.exp-alur-item{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:26px;
  padding:0 0 38px;
}
.exp-alur-item:last-child{ padding-bottom:0 }

.exp-alur-item::before{
  content:'';
  position:absolute;
  left:37px; top:66px; bottom:4px;
  width:2px;
  background:linear-gradient(to bottom, var(--exp-emas-lembut), rgba(184,135,59,.05));
}
.exp-alur-item:last-child::before{ display:none }

.exp-alur-no{
  position:relative;
  z-index:1;
  width:76px; height:76px;
  display:grid; place-items:center;
  border-radius:50%;
  font-family:var(--ex-font-display);
  font-size:25px; font-weight:600;
  color:var(--ex-gold-300);
  /* Bola, bukan cakram: sumber cahaya di kiri-atas, bagian bawah
     kanan meredup, dan ada pantulan balik tipis di tepi bawah. */
  background:radial-gradient(circle at 34% 28%, #3d6648 0%, #244030 46%, #11231a 100%);
  box-shadow:inset 0 2px 3px rgba(251,249,244,.18),
             inset 0 -6px 12px rgba(0,0,0,.5),
             0 0 0 1px rgba(184,135,59,.3),
             0 6px 10px rgba(0,0,0,.3),
             0 20px 36px -16px rgba(0,0,0,.75);
  text-shadow:0 2px 3px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1), box-shadow .3s;
}
.exp-alur-item:hover .exp-alur-no{
  transform:scale(1.07);
  box-shadow:0 0 0 1px rgba(184,135,59,.7), 0 20px 40px -18px rgba(18,36,26,.95);
}

.exp-alur-isi{ padding-top:8px }
.exp-alur-isi h3{
  margin:0 0 5px;
  font-family:var(--ex-font-display);
  font-weight:600; font-size:22px; color:var(--ex-ink);
}
.exp-alur-waktu{
  display:inline-block;
  margin:0 0 11px;
  padding:4px 12px;
  font-family:var(--ex-font-mono);
  font-size:11.5px; letter-spacing:.02em;
  color:var(--ex-soil-600);
  background:rgba(131,63,40,.08);
  border-radius:999px;
}
.exp-alur-isi p{ margin:0; font-size:15px; line-height:1.74; color:var(--ex-ink-2) }

/* ------------------------------------------------------------
   Tabel syarat dagang
   ------------------------------------------------------------ */

.exp-syarat{ width:100%; border-collapse:collapse; font-size:14.5px }
.exp-syarat th,
.exp-syarat td{
  padding:17px 6px;
  text-align:start;
  vertical-align:top;
  border-bottom:1px solid rgba(251,249,244,.12);
  transition:background .2s;
}
.exp-syarat tr:last-child th,
.exp-syarat tr:last-child td{ border-bottom:0 }
.exp-syarat tr:hover th,
.exp-syarat tr:hover td{ background:rgba(251,249,244,.035) }
.exp-syarat th{
  width:240px;
  font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ex-gold-300);
}
.exp-syarat td{ color:rgba(251,249,244,.78); line-height:1.66 }
.exp-syarat td b{ font-family:var(--ex-font-mono); font-weight:500; color:var(--ex-paper) }

/* ------------------------------------------------------------
   Rute pengapalan
   ------------------------------------------------------------ */

.exp-rute{
  display:flex;
  margin-top:34px;
  border:1px solid rgba(251,249,244,.14);
  border-radius:var(--exp-radius);
  overflow:hidden;
}
.exp-rute-tahap{
  position:relative;
  flex:1 1 0;
  padding:24px 22px;
  background:rgba(251,249,244,.04);
  transition:background .26s;
}
.exp-rute-tahap:hover{ background:rgba(251,249,244,.08) }
.exp-rute-tahap + .exp-rute-tahap{ border-inline-start:1px solid rgba(251,249,244,.12) }

/* Panah penghubung antar tahap. */
.exp-rute-tahap + .exp-rute-tahap::before{
  content:'';
  position:absolute;
  inset-inline-start:-7px; top:50%;
  width:12px; height:12px;
  margin-top:-6px;
  border-top:1px solid rgba(184,135,59,.6);
  border-right:1px solid rgba(184,135,59,.6);
  transform:rotate(45deg);
  background:var(--ex-forest-950);
}
.exp-rute-tahap span{
  display:block; margin-bottom:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,249,244,.48);
}
.exp-rute-tahap b{
  display:block;
  font-family:var(--ex-font-display);
  font-size:18px; font-weight:600; color:var(--ex-paper);
}
.exp-rute-tahap small{
  display:block; margin-top:6px; font-size:12.5px; color:rgba(251,249,244,.58);
}
.exp-rute-tahap:last-child{ background:rgba(184,135,59,.1) }
.exp-rute-tahap:last-child b{ color:var(--ex-gold-300) }

/* ------------------------------------------------------------
   Lot — berderet, bisa digeser di layar kecil
   ------------------------------------------------------------ */

.exp-lot-kisi{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px }

/* ------------------------------------------------------------
   Undangan kunjungan
   ------------------------------------------------------------ */

.exp-undang{
  position:relative;
  overflow:hidden;
  padding:54px 50px;
  border-radius:26px;
  color:var(--ex-paper);
  background:
    radial-gradient(100% 140% at 0% 0%, #2f5a39 0%, transparent 58%),
    linear-gradient(135deg, var(--ex-forest-800), var(--ex-forest-950));
  box-shadow:0 40px 80px -44px rgba(18,36,26,.9);
}
.exp-undang::after{
  content:'';
  position:absolute;
  inset-inline-end:-80px; bottom:-110px;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(184,135,59,.22), transparent 68%);
  pointer-events:none;
}
.exp-undang-isi{ position:relative; z-index:1; max-width:580px }
.exp-undang h2{
  margin:0 0 14px;
  font-family:var(--ex-font-display);
  font-weight:600;
  font-size:clamp(24px, 2.9vw, 34px);
  line-height:1.16;
}
.exp-undang p{ margin:0 0 26px; font-size:15px; line-height:1.74; color:rgba(251,249,244,.76) }

/* ------------------------------------------------------------
   Penutup
   ------------------------------------------------------------ */

.exp-tutup{
  position:relative;
  overflow:hidden;
  padding:96px 0 104px;
  text-align:center;
  background:var(--ex-paper-2);
}
.exp-tutup .exp-h2{ max-width:640px; margin-inline:auto }
.exp-tutup .exp-teks{ max-width:580px; margin-inline:auto }
.exp-tutup .exp-aksi{ justify-content:center; margin:30px 0 0 }

/* ------------------------------------------------------------
   Video profil
   ------------------------------------------------------------ */

.exp-video{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--ex-line);
  background:var(--ex-forest-950);
  cursor:pointer;
  box-shadow:0 36px 70px -40px rgba(29,26,21,.6);
}
.exp-video img, .exp-video iframe{
  display:block; width:100%; height:100%; border:0; object-fit:cover;
}
.exp-video-putar{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(13,28,20,.3);
  border:0; cursor:pointer;
}
.exp-video-putar i{
  width:78px; height:78px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(251,249,244,.93);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  transition:transform .22s;
}
.exp-video-putar i::after{
  content:'';
  margin-inline-start:5px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ex-forest-900);
}
.exp-video-putar:hover i{ transform:scale(1.1) }

/* ------------------------------------------------------------
   Mengapa memilih kami — delapan petak
   ------------------------------------------------------------ */

.exp-alasan{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:rgba(251,249,244,.1);
  border:1px solid rgba(251,249,244,.1);
  border-radius:var(--exp-radius);
  overflow:hidden;
}

.exp-alasan-sel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:26px 20px 32px;
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(251,249,244,.07) 0%, transparent 62%),
    var(--ex-forest-950);
  box-shadow:inset 0 1px 0 rgba(251,249,244,.06);
  transition:background .26s;
}
.exp-alasan-sel:hover{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(251,249,244,.1) 0%, transparent 62%),
    var(--ex-forest-900);
}

/* Ilustrasi, bukan ikon garis.
   --------------------------------------------------------------
   Pada petak selebar ini, pictogram setebal 1,5px nyaris hilang di
   latar hijau gelap — delapan petak jadi terbaca sebagai delapan
   lingkaran kosong yang sama. Bidang berwarna penuh bertahan. */
.exp-ilus{
  width:154px;
  height:154px;
  margin-bottom:4px;
  margin-top:-10px;
  flex:0 0 auto;
  /* Bayangan jatuh di luar SVG, menimpa bayangan kontak yang sudah
     digambar di dalamnya. Dua bayangan itu mengerjakan hal berbeda:
     yang di dalam menempelkan benda ke alas, yang ini mengangkat
     seluruh gambar dari kartunya. */
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.4));
  transition:transform .35s cubic-bezier(.2,1.4,.4,1), filter .35s;
}
.exp-alasan-sel:hover .exp-ilus{ filter:drop-shadow(0 18px 16px rgba(0,0,0,.5)) }
.exp-alasan-sel:hover .exp-ilus{ transform:translateY(-5px) scale(1.05) }

.exp-alasan-sel b{
  font-size:14.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--ex-paper);
}
.exp-alasan-sel span{
  font-size:12.5px;
  line-height:1.6;
  color:rgba(251,249,244,.56);
}

/* ------------------------------------------------------------
   Proses produksi — empat petak foto
   ------------------------------------------------------------ */

.exp-petak{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.exp-petak-sel{
  position:relative;
  margin:0;
  overflow:hidden;
  aspect-ratio:3 / 4;
  border-radius:var(--exp-radius);
  border:1px solid var(--ex-line);
  background:linear-gradient(150deg, var(--ex-forest-800), var(--ex-forest-950));
  box-shadow:var(--exp-bayang-2), inset 0 1px 0 rgba(251,249,244,.1);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1), box-shadow .34s;
}
.exp-petak-sel:hover{ box-shadow:var(--exp-bayang-3), inset 0 1px 0 rgba(251,249,244,.14) }
/* Petak kedua dan keempat diturunkan sedikit. Empat petak yang rata
   sempurna terbaca sebagai tabel; sedikit selang-seling membuatnya
   terbaca sebagai susunan. */
.exp-petak-sel:nth-child(even){ transform:translateY(24px) }
.exp-petak-sel:hover{ transform:translateY(-6px) }
.exp-petak-sel:nth-child(even):hover{ transform:translateY(18px) }

.exp-petak-sel img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
.exp-petak-sel:hover img{ transform:scale(1.06) }

.exp-petak-sel figcaption{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:18px 16px 16px;
  font-size:13px; line-height:1.4; font-weight:600;
  color:var(--ex-paper);
  background:linear-gradient(to top, rgba(11,24,16,.94), transparent);
}
.exp-petak-sel figcaption b{
  display:block;
  margin-bottom:4px;
  font-family:var(--ex-font-mono);
  font-size:11px; font-weight:500;
  color:var(--ex-gold-300);
}

/* ------------------------------------------------------------
   Negara tujuan
   ------------------------------------------------------------ */

.exp-tujuan-angka{
  margin:0 0 28px;
  text-align:center;
}
.exp-tujuan-angka b{
  display:block;
  font-family:var(--ex-font-display);
  font-size:clamp(54px, 9vw, 96px);
  font-weight:600; line-height:1;
  letter-spacing:-.03em;
  color:var(--ex-gold-300);
  font-variant-numeric:tabular-nums;
}
.exp-tujuan-angka span{
  display:block; margin-top:8px;
  font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(251,249,244,.52);
}

.exp-tujuan{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.exp-tujuan li{
  padding:10px 20px;
  font-size:14px; font-weight:600;
  color:rgba(251,249,244,.84);
  background:linear-gradient(180deg, rgba(251,249,244,.1), rgba(251,249,244,.025));
  border:1px solid rgba(251,249,244,.14);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(251,249,244,.2), 0 6px 14px -8px rgba(0,0,0,.6);
  transition:border-color .22s, background .22s, transform .22s, box-shadow .26s;
}
.exp-tujuan li:hover{
  transform:translateY(-3px);
  border-color:rgba(184,135,59,.55);
  background:rgba(184,135,59,.12);
}

/* ------------------------------------------------------------
   Artikel & kabar
   ------------------------------------------------------------ */

.exp-kabar{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none;
  background:linear-gradient(168deg, #ffffff 0%, #fdfaf4 55%, #f4eee1 100%);
  border:1px solid var(--ex-line);
  border-radius:var(--exp-radius);
  box-shadow:var(--exp-bayang-2), var(--exp-kilau);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1), box-shadow .34s, border-color .26s;
}
.exp-kabar:hover{
  transform:translateY(-8px);
  border-color:#cdc3ab;
  box-shadow:var(--exp-bayang-3), var(--exp-kilau);
}

.exp-kabar-foto{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  background-size:cover;
  background-position:center;
  background-color:var(--ex-forest-900);
}

.exp-kabar-isi{ display:block; padding:22px 24px 26px }
.exp-kabar-isi time{
  display:block; margin-bottom:9px;
  font-family:var(--ex-font-mono);
  font-size:11.5px; letter-spacing:.04em;
  color:var(--ex-soil-600);
}
.exp-kabar-isi b{
  display:block; margin-bottom:9px;
  font-family:var(--ex-font-display);
  font-size:18.5px; font-weight:600; line-height:1.3;
  color:var(--ex-ink);
}
.exp-kabar-isi > span{
  display:block;
  font-size:14px; line-height:1.68;
  color:var(--ex-ink-2);
}

/* ------------------------------------------------------------
   Rel kemajuan di tepi layar
   ------------------------------------------------------------ */

.exp-rel{
  position:fixed;
  inset-inline-start:26px;
  top:50%;
  z-index:30;
  transform:translateY(-50%);
  display:grid;
  gap:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
}
.exp-rel.exp-rel-tampak{ opacity:1; pointer-events:auto }

.exp-rel a{
  position:relative;
  display:block;
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(29,26,21,.22);
  transition:background .25s, transform .25s;
}
.exp-rel a:hover{ transform:scale(1.35) }
.exp-rel a.exp-rel-aktif{ background:var(--ex-gold); transform:scale(1.35) }

.exp-rel a span{
  position:absolute;
  inset-inline-start:20px; top:50%;
  transform:translateY(-50%);
  padding:5px 11px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  white-space:nowrap;
  color:var(--ex-paper);
  background:var(--ex-forest-900);
  border-radius:7px;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s;
}
.exp-rel a:hover span{ opacity:1 }

/* ------------------------------------------------------------
   Layar kecil
   ------------------------------------------------------------ */

@media (max-width:1200px){
  .exp-rel{ display:none }
}

@media (max-width:980px){
  .exp-alasan{ grid-template-columns:repeat(2, 1fr) }
  .exp-petak{ grid-template-columns:repeat(2, 1fr); gap:14px }
  .exp-petak-sel:nth-child(even){ transform:none }
  .exp-hero-kisi{ grid-template-columns:1fr; gap:38px }
  .exp-hero{ min-height:0; padding-bottom:20px }
  .exp-belah, .exp-belah-balik{ grid-template-columns:1fr; gap:36px }
  .exp-tiga, .exp-lot-kisi{ grid-template-columns:1fr 1fr }
  .exp-gambar-tinggi{ aspect-ratio:16 / 10; margin-block:0 }
  .exp-rute{ flex-direction:column }
  .exp-rute-tahap + .exp-rute-tahap{
    border-inline-start:0;
    border-top:1px solid rgba(251,249,244,.12);
  }
  .exp-rute-tahap + .exp-rute-tahap::before{
    inset-inline-start:50%; top:-7px; margin:0 0 0 -6px;
    transform:rotate(135deg);
  }
}

@media (max-width:720px){
  :root{ --exp-miring:30px }
  .exp-hero{ padding-top:64px }
  .exp-bagian{ padding:62px 0 }
  .exp-miring-atas{ padding-top:calc(62px + var(--exp-miring)) }
  .exp-miring-bawah{ padding-bottom:calc(62px + var(--exp-miring)) }
  .exp-tiga{ grid-template-columns:1fr }
  .exp-dua{ grid-template-columns:1fr }
  .exp-alasan{ grid-template-columns:1fr 1fr }
  .exp-alasan-sel{ padding:24px 14px 22px }
  .exp-alasan-sel b{ font-size:13px }
  .exp-alasan-sel span{ font-size:11.5px }
  .exp-ilus{ width:112px; height:112px; margin-bottom:0; margin-top:-8px }
  .exp-petak{ grid-template-columns:1fr 1fr; gap:10px }
  .exp-tujuan li{ padding:8px 15px; font-size:13px }
  .exp-stat{ grid-template-columns:1fr 1fr }
  .exp-stat > div{ padding:18px 14px 20px 0 }
  .exp-stat > div:nth-child(2){ border-right:0 }
  .exp-stat > div:nth-child(3),
  .exp-stat > div:nth-child(4){ border-top:1px solid rgba(251,249,244,.1) }
  .exp-stat > div:nth-child(3){ padding-left:0 }
  .exp-alur-item{ grid-template-columns:56px 1fr; gap:17px }
  .exp-alur-no{ width:56px; height:56px; font-size:20px }
  .exp-alur-item::before{ left:27px; top:50px }
  .exp-syarat th{ width:auto; display:block; padding-bottom:4px }
  .exp-syarat td{ display:block; padding-top:0; padding-bottom:17px }
  .exp-undang{ padding:36px 24px }
  .exp-tutup{ padding:64px 0 72px }
  .exp-nomor-hantu{ font-size:120px; top:14px }

  /* Lot digeser menyamping, bukan ditumpuk. Tiga kartu bertumpuk
     memaksa pengunjung ponsel menggulir panjang hanya untuk lewat. */
  .exp-lot-kisi{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin-inline:-18px;
    padding:4px 18px 14px;
    -webkit-overflow-scrolling:touch;
  }
  .exp-lot-kisi > *{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
}

/* Pengunjung yang meminta gerakan dikurangi mendapat halaman yang
   sama, hanya tanpa yang bergerak. Elemen .exp-muncul HARUS tetap
   terlihat — kalau animasinya dimatikan tanpa mengembalikan opacity,
   seluruh isi halaman tinggal kosong. */
@media (prefers-reduced-motion: reduce){
  .exp-muncul,
  .exp-muncul-kiri,
  .exp-muncul-kanan{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .exp-pita-jalur{ animation:none }
    .exp-eyebrow::before{ animation:none }
  .exp-kartu, .exp-tombol, .exp-ikon, .exp-alur-no,
  .exp-gambar img, .exp-lotkartu, .exp-video-putar i{
    transition:none !important;
  }
  .exp-kartu:hover, .exp-tombol:hover, .exp-lotkartu:hover{ transform:none }
  .exp-gambar:hover img{ transform:none }
}

/* ------------------------------------------------------------
   Gelembung WhatsApp mengambang
   ------------------------------------------------------------
   Dipasang di sisi akhir halaman (inset-inline-end), bukan "kanan",
   supaya di versi bahasa Arab ia pindah sendiri ke kiri dan tidak
   bertumpuk dengan rel kemajuan .exp-rel yang memakai sisi awal.
   ------------------------------------------------------------ */

.exp-wa{
  position:fixed;
  inset-inline-end:24px;
  bottom:24px;
  z-index:40;

  display:inline-flex;
  align-items:center;
  gap:0;
  padding:0;
  max-width:62px;                 /* selebar bulatannya saja */
  border-radius:999px;
  overflow:hidden;

  text-decoration:none;
  background:linear-gradient(145deg, #3ee07a 0%, #25d366 46%, #10a84d 100%);
  color:#fff;

  /* Kedalaman yang sama dengan kartu-kartu lain di halaman ini, plus
     satu garis kilau di tepi atas supaya bulatannya terbaca sebagai
     benda, bukan sebagai lingkaran datar.

     Cincin putih tipis di lapisan terluar bukan hiasan. Halaman ini
     punya beberapa bagian berlatar HIJAU TUA, dan gelembung hijau
     WhatsApp di atasnya hampir menyatu dengan latarnya — saya lihat
     sendiri saat mengujinya. Cincin putih memisahkannya di sana, dan
     di atas latar krem ia praktis tidak terlihat karena warnanya
     memang sudah sedekat itu dengan latar. Jadi ia hanya bekerja di
     tempat yang membutuhkannya. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 0 0 3px rgba(255,255,255,.92),
    0 3px 6px rgba(16,70,38,.26),
    0 14px 26px -8px rgba(16,70,38,.5);

  opacity:0;
  transform:translateY(14px) scale(.9);
  transition:max-width .34s cubic-bezier(.2,.9,.3,1.05),
             opacity .45s ease,
             transform .45s cubic-bezier(.2,.9,.3,1.3),
             box-shadow .25s ease;
}

/* Muncul sebentar setelah halaman siap, bukan langsung bersama hero.
   Kelasnya dipasang lewat CSS murni (animation-delay) supaya tetap
   muncul walaupun JavaScript halaman gagal dimuat. */
.exp-wa{ animation:exp-wa-masuk .5s cubic-bezier(.2,.9,.3,1.3) .7s forwards }

@keyframes exp-wa-masuk{
  from{ opacity:0; transform:translateY(14px) scale(.9) }
  to  { opacity:1; transform:none }
}

.exp-wa-bulat{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:62px; height:62px;
}

.exp-wa-bulat svg{
  width:27px; height:27px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
}

.exp-wa-teks{
  white-space:nowrap;
  padding-inline-end:22px;
  font-size:14.5px;
  font-weight:650;
  letter-spacing:.01em;
  opacity:0;
  transition:opacity .22s ease .08s;
}

/* Melebar saat disentuh tetikus atau saat mendapat fokus papan ketik.
   Fokus ikut dihitung supaya pengguna yang menyusuri halaman dengan Tab
   juga tahu tombol ini untuk apa — bukan hanya bulatan hijau tanpa
   keterangan. */
.exp-wa:hover,
.exp-wa:focus-visible{
  max-width:360px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 0 0 3px rgba(255,255,255,.96),
    0 4px 8px rgba(16,70,38,.28),
    0 20px 34px -10px rgba(16,70,38,.58);
}

.exp-wa:hover .exp-wa-teks,
.exp-wa:focus-visible .exp-wa-teks{ opacity:1 }

.exp-wa:focus-visible{
  outline:3px solid var(--ex-gold);
  outline-offset:3px;
}

.exp-wa:active{ transform:translateY(1px) scale(.985) }

/* Di layar kecil: tetap bulat, tidak pernah melebar. Label yang
   terbentang di HP akan menutupi sepertiga lebar layar, dan di layar
   sentuh tidak ada hover yang bisa menutupnya kembali. */
@media (max-width:640px){
  .exp-wa{
    inset-inline-end:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    max-width:56px;
  }
  .exp-wa:hover, .exp-wa:focus-visible{ max-width:56px }
  .exp-wa-teks{ display:none }
  .exp-wa-bulat{ width:56px; height:56px }
  .exp-wa-bulat svg{ width:25px; height:25px }
}

/* Saat dicetak, tombol mengambang tidak ada gunanya. */
@media print{ .exp-wa{ display:none } }

@media (prefers-reduced-motion: reduce){
  .exp-wa{
    animation:none;
    opacity:1;
    transform:none;
    transition:max-width .01s, box-shadow .01s;
  }
  .exp-wa-teks{ transition:none }
}

/* Hanya untuk pembaca layar. Dipakai pada <caption> tabel harga: tabel
   tanpa caption menyulitkan pengguna pembaca layar yang melompat antar
   tabel, tapi judulnya sudah ada sebagai <h2> tepat di atasnya — jadi
   caption-nya tidak perlu ikut terlihat dua kali. */
.ex-sr{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ------------------------------------------------------------
   Daftar harga FOB
   ------------------------------------------------------------ */

.exp-harga-kepala{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 16px;
}

.exp-harga-cap{
  display:inline-flex; align-items:center;
  padding:6px 13px;
  border-radius:999px;
  font-size:12px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ex-ink);
  background:var(--exp-emas-lembut);
  border:1px solid rgba(184,135,59,.3);
}
.exp-harga-cap-sunyi{
  color:var(--ex-ink-2);
  background:transparent;
  border-color:rgba(29,26,21,.16);
  font-weight:600;
  text-transform:none; letter-spacing:.01em;
}

.exp-harga-bingkai{
  border-radius:var(--exp-radius);
  background:#fff;
  border:1px solid var(--ex-line);
  box-shadow:var(--exp-bayang-2);
  overflow:hidden;
}

.exp-harga{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}

.exp-harga thead th{
  padding:14px 18px;
  text-align:start;
  font-size:11.5px; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ex-ink-2);
  background:var(--ex-paper-2);
  border-bottom:1px solid rgba(29,26,21,.12);
  white-space:nowrap;
}

.exp-harga tbody th,
.exp-harga tbody td{
  padding:15px 18px;
  text-align:start;
  vertical-align:top;
  border-bottom:1px solid rgba(29,26,21,.08);
  font-weight:400;
  color:var(--ex-ink);
}
.exp-harga tbody tr:last-child th,
.exp-harga tbody tr:last-child td{ border-bottom:0 }
.exp-harga tbody tr:hover th,
.exp-harga tbody tr:hover td{ background:rgba(184,135,59,.05) }

.exp-harga tbody th a{
  font-weight:700;
  color:var(--ex-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.exp-harga tbody th a:hover{ border-bottom-color:var(--ex-gold) }

.exp-harga small{
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:1.45;
  color:var(--ex-ink-2);
}

/* Kolom angka rata kanan, dan angkanya memakai lebar digit yang sama
   supaya harga antar baris benar-benar sejajar dan bisa dibandingkan
   sekali lihat — itu seluruh gunanya daftar harga. */
.exp-harga .exp-harga-no{
  text-align:end;
  font-variant-numeric:tabular-nums;
}

.exp-harga-angka{
  font-weight:800;
  font-size:15px;
  white-space:nowrap;
  color:var(--ex-ink);
}

.exp-harga-minta{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px; font-weight:650;
  white-space:nowrap;
  color:var(--ex-ink-2);
  background:rgba(29,26,21,.055);
  border:1px solid var(--ex-line);
}

.exp-harga-kaki{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:18px;
  margin-top:24px;
}
.exp-harga-kaki p{
  flex:1 1 320px;
  margin:0;
  font-size:13.5px; line-height:1.65;
  color:var(--ex-ink-2);
}
.exp-harga-aksi{ display:flex; flex-wrap:wrap; gap:12px }

/* Di layar sempit tabel diubah jadi kartu bertumpuk, bukan digulung ke
   samping. Tabel enam kolom yang digulung mendatar memaksa pembeli
   menggeser bolak-balik hanya untuk memasangkan nama lot dengan
   harganya — dan harga itu yang ia cari. */
@media (max-width:760px){
  .exp-harga-bingkai{ background:transparent; border:0; box-shadow:none; overflow:visible }
  .exp-harga, .exp-harga tbody, .exp-harga tr, .exp-harga th, .exp-harga td{ display:block }
  .exp-harga thead{ display:none }

  .exp-harga tbody tr{
    margin-bottom:14px;
    border-radius:var(--exp-radius);
    background:#fff;
    border:1px solid var(--ex-line);
    box-shadow:var(--exp-bayang-1);
    overflow:hidden;
  }

  .exp-harga tbody th{
    padding:14px 16px 12px;
    background:var(--ex-paper-2);
    border-bottom:1px solid var(--ex-line);
  }

  .exp-harga tbody td{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding:10px 16px;
    text-align:end;
  }
  .exp-harga tbody td::before{
    content:attr(data-exp-l);
    flex:0 0 auto;
    text-align:start;
    font-size:11.5px; font-weight:800;
    letter-spacing:.09em; text-transform:uppercase;
    color:var(--ex-ink-2);
  }
  /* Keterangan kecil (jumlah karung, pelabuhan) turun ke barisnya
     sendiri, tidak berimpit di samping angka utamanya. */
  .exp-harga tbody td{ flex-wrap:wrap }
  .exp-harga tbody td small{ flex:1 0 100%; margin-top:2px; text-align:end }
  .exp-harga .exp-harga-no{ text-align:end }
}

/* Daftar harga adalah salah satu dari sedikit halaman yang memang
   dicetak dan diteruskan lewat surel. */
@media print{
  .exp-harga-bingkai{ box-shadow:none; border:1px solid #999 }
  .exp-harga thead th{ background:#eee }
  .exp-harga tbody tr{ break-inside:avoid }
  .exp-harga-aksi{ display:none }
}

/* Tombol sekunder untuk LATAR TERANG.
   .exp-tombol-tipis sudah ada, tapi ia bergaya kaca dengan teks krem —
   dibuat untuk bagian berlatar gelap. Dipasang di atas kertas, teksnya
   putih di atas putih dan tombolnya hilang sama sekali; itu yang terjadi
   pada percobaan pertama daftar harga ini. */
.exp-tombol-garis{
  color:var(--ex-ink);
  border:1px solid rgba(29,26,21,.22);
  background:linear-gradient(180deg, #fff 0%, #f7f3ea 100%);
  box-shadow:inset 0 1px 0 #fff, 0 2px 3px rgba(29,26,21,.07),
             0 10px 20px -12px rgba(29,26,21,.4);
}
.exp-tombol-garis:hover{
  border-color:var(--ex-gold);
  box-shadow:inset 0 1px 0 #fff, 0 3px 5px rgba(29,26,21,.09),
             0 16px 28px -12px rgba(29,26,21,.45);
}
.exp-tombol-garis:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 5px rgba(29,26,21,.16);
}

/* ------------------------------------------------------------
   Pratinjau foto lot (rasio asli)
   ------------------------------------------------------------
   Foto di dalam galeri sengaja TETAP dipotong 3:2 oleh export.css.
   Itu bukan kelalaian: kalau bingkainya ikut rasio asli, tinggi
   halaman melompat setiap kali foto berganti, dan foto potret
   setinggi layar mendorong seluruh spesifikasi ke bawah lipatan.

   Rasio aslinya tempatnya di pratinjau ini — tempat memang hanya ada
   satu foto dan tidak ada apa pun di bawahnya yang bisa terdorong.
   ------------------------------------------------------------ */

.ex-galeri-buka{
  position:relative;
  display:block;
  cursor:zoom-in;
  border-radius:inherit;
  overflow:hidden;
}

/* Kaca pembesar kecil di pojok. Tanpa penanda apa pun, tidak ada yang
   memberi tahu pembeli bahwa fotonya bisa dibuka lebih besar. */
.ex-galeri-kaca{
  position:absolute;
  inset-inline-end:12px;
  bottom:12px;
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  color:var(--ex-ink);
  background:rgba(251,249,244,.9);
  box-shadow:0 2px 4px rgba(0,0,0,.18), 0 10px 20px -8px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(6px) scale(.9);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.3);
  pointer-events:none;
}
.ex-galeri-kaca svg{ width:19px; height:19px }

.ex-galeri-buka:hover .ex-galeri-kaca,
.ex-galeri-buka:focus-visible .ex-galeri-kaca{ opacity:1; transform:none }

/* Di layar sentuh tidak ada hover, jadi penandanya ditampilkan terus. */
@media (hover: none){
  .ex-galeri-kaca{ opacity:1; transform:none }
}

.ex-galeri-buka:focus-visible{ outline:3px solid var(--ex-gold); outline-offset:3px }

/* ---- lapisan pratinjau ---- */

.exp-lihat{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(14px, 4vw, 40px);
  background:rgba(14,12,9,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .2s ease;
}
.exp-lihat[hidden]{ display:none }
.exp-lihat.exp-lihat-tampil{ opacity:1 }

/* Inilah intinya: lebar DAN tinggi dibiarkan menyesuaikan sendiri, hanya
   dibatasi ukuran layar. Gambar lanskap dibatasi lebarnya, gambar potret
   dibatasi tingginya, dan rasio aslinya tidak pernah disentuh. Tidak ada
   object-fit:cover di sini, karena memotong foto di layar pratinjau
   meniadakan seluruh gunanya pratinjau. */
.exp-lihat-gambar{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 180px);
  width:auto;
  height:auto;
  border-radius:10px;
  background:rgba(251,249,244,.06);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  transform:scale(.97);
  transition:transform .24s cubic-bezier(.2,.9,.3,1.1);
}
@supports (max-height: 100dvh){
  .exp-lihat-gambar{ max-height:calc(100dvh - 180px) }
}
.exp-lihat-tampil .exp-lihat-gambar{ transform:none }

.exp-lihat-ket{
  max-width:min(760px, 92vw);
  margin:0;
  text-align:center;
  font-size:14px;
  line-height:1.6;
  color:rgba(251,249,244,.78);
}
.exp-lihat-ket:empty{ display:none }

.exp-lihat-hitung{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  color:rgba(251,249,244,.5);
  font-variant-numeric:tabular-nums;
}

/* ---- tombol ---- */

.exp-lihat button{
  display:grid; place-items:center;
  border:1px solid rgba(251,249,244,.22);
  border-radius:50%;
  background:rgba(251,249,244,.1);
  color:#fbf9f4;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.exp-lihat button:hover{ background:rgba(251,249,244,.2); border-color:rgba(251,249,244,.45) }
.exp-lihat button:focus-visible{ outline:3px solid var(--ex-gold); outline-offset:3px }
.exp-lihat button svg{ width:22px; height:22px; stroke-width:1.8 }

.exp-lihat-tutup{
  position:absolute;
  top:clamp(12px, 3vw, 26px);
  inset-inline-end:clamp(12px, 3vw, 26px);
  width:46px; height:46px;
}

.exp-lihat-geser{
  position:absolute;
  top:50%;
  width:50px; height:50px;
  transform:translateY(-50%);
}
.exp-lihat-mundur{ inset-inline-start:clamp(8px, 2.5vw, 26px) }
.exp-lihat-maju{ inset-inline-end:clamp(8px, 2.5vw, 26px) }
.exp-lihat-geser[hidden]{ display:none }

/* Panah menunjuk arah yang benar di versi Arab tanpa ikon kedua. */
[dir="rtl"] .exp-lihat-geser svg{ transform:scaleX(-1) }

@media (max-width:560px){
  .exp-lihat-gambar{ max-height:calc(100vh - 210px) }
  .exp-lihat-geser{ top:auto; bottom:clamp(12px, 4vw, 24px); transform:none }
}

@media (prefers-reduced-motion: reduce){
  .exp-lihat, .exp-lihat-gambar, .ex-galeri-kaca, .exp-lihat button{
    transition:none;
    transform:none;
  }
  .ex-galeri-kaca{ opacity:1 }
}

/* Badan halaman dikunci selama pratinjau terbuka, supaya menggulung
   tidak menggeser halaman di belakangnya. */
body.exp-lihat-kunci{ overflow:hidden }

/* ── Video di kotak "Asal" ────────────────────────────────────────────────
   Videonya tegak (1080x1920) dan kotaknya juga tegak, jadi object-fit:cover
   nyaris tidak memotong apa pun. Bingkai pembuka videonya kebetulan berlatar
   hijau tua yang sama dengan kotak ini, sehingga sambungannya tidak terlihat
   saat poster berganti menjadi gambar bergerak. */
.exp-gambar-video{
  display:block; width:100%; height:100%;
  object-fit:cover;
  background:var(--ex-forest-950);
}

/* Tombol suara. Video diputar tanpa suara karena itu satu-satunya cara
   pemutaran otomatis diizinkan peramban; tombol ini yang mengembalikan
   pilihan itu ke pengunjung. Ditaruh di atas, supaya tidak bertabrakan
   dengan tanda lokasi di bawah. */
.exp-video-suara{
  position:absolute; top:14px; right:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ex-paper);
  background:rgba(13,28,20,.62);
  border:1px solid rgba(251,249,244,.26);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .18s ease, border-color .18s ease;
}
.exp-video-suara:hover{ background:rgba(13,28,20,.82); border-color:rgba(251,249,244,.44) }
.exp-video-suara svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round }
.exp-video-suara .exp-ikon-suara{ display:none }
.exp-video-suara[aria-pressed="true"] .exp-ikon-bisu{ display:none }
.exp-video-suara[aria-pressed="true"] .exp-ikon-suara{ display:block }
@media (max-width:640px){
  .exp-video-suara span{ display:none }
  .exp-video-suara{ padding:9px; top:12px; right:12px }
}

/* Di lebar HP, .exp-gambar-tinggi dipaksa 16/10 (melebar). Untuk FOTO itu
   masuk akal. Untuk VIDEO TEGAK tidak: kotak melebar akan memotongnya jadi
   pita tipis di bagian tengah. Jadi kotak yang berisi video tetap tegak. */
@media (max-width:860px){
  /* max-height mencegah kartunya jadi lebih tinggi daripada layar di tablet
     (tanpa ini 965px pada layar 900px). Rasionya sedikit terpangkas dan
     object-fit:cover yang mengurus sisanya — itu lebih baik daripada kartu
     yang tidak muat sekali pandang. */
  .exp-gambar-adavideo{ aspect-ratio:3 / 4; margin-block:0; max-height:70vh }
}
@media (max-width:520px){
  .exp-gambar-adavideo{ aspect-ratio:4 / 5 }
}

/* Tombol putar cadangan. Hanya tampil kalau pemutaran otomatis ditolak
   peramban atau videonya tidak kunjung bergerak. */
.exp-video-putar{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:3; width:68px; height:68px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,28,20,.66); border:1px solid rgba(251,249,244,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .18s ease, transform .18s ease;
}
.exp-video-putar:hover{ background:rgba(13,28,20,.84); transform:translate(-50%,-50%) scale(1.06) }
.exp-video-putar[hidden]{ display:none }
.exp-video-putar svg{ width:30px; height:30px; fill:var(--ex-paper); margin-left:3px }