/* =========================================================
   VOLUPO — Halaman Detail Aktivitas
   Memakai token dari public.css (:root). Style khusus detail.
   ========================================================= */

.det-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-bottom: 1px solid var(--border);
    /* 8px, bukan 10. Bar kepala hanya berisi logo dan satu tombol; setiap
       piksel di sini mendorong gambar produk turun, dan gambar itulah yang
       menjual. Sasaran sentuh tetap aman karena tombol EN punya padding sendiri. */
    padding: 8px 18px;
}
/* .det-back masih dipakai satu tempat: tautan "Kembali ke beranda" pada layar
   error di errorHtml(). Tombol Kembali di kepala halaman sudah dicabut 11 Sep
   dan digantikan breadcrumb. */
.det-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer;
    padding: 6px 10px; border-radius: 10px;
}
.det-back:hover { background: var(--bg); }
/* Tinggi disamakan dengan .topbar .logo img di public.css supaya kepala
   halaman produk dan beranda benar-benar setinggi sama — bukan sekadar mirip. */
.det-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.det-logo img { height: 36px; width: auto; display: block; }

/* padding-atas 24px → 8px: breadcrumb sudah menyediakan jarak nyata ke kepala
   halaman, jadi 24px di sini menumpuk dan membuat isi terdorong jauh ke bawah. */
/* padding-atas NOL di SEMUA lebar. Breadcrumb menyediakan jaraknya sendiri;
   apa pun yang ditambahkan di sini menumpuk di atasnya dan mendorong gambar
   turun. Ini juga membuat jaraknya tidak lagi bergantung pada blok @media —
   sumber kebingungan sebelumnya. */
.det-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }

.det-loading, .det-error { text-align: center; padding: 80px 20px; color: var(--text-2); }
/* 25 Sep 2026 (Lighthouse): CLS 0,621 di halaman produk berasal dari FOOTER yang
   mula-mula tampil tepat di bawah tulisan "Memuat…", lalu terdorong jauh ke bawah
   begitu detail.js menggambar isi produk. Layar muat dibuat setinggi layar supaya
   footer sejak awal berada DI LUAR layar — pergeseran di luar layar tidak dihitung
   sebagai CLS. Hanya berlaku selama "Memuat…"; layar galat (.det-error) tidak kena. */
.det-loading { min-height: 100vh; min-height: 100svh; }

/* 25 Sep 2026 — LAYAR MUAT BERLOGO (permintaan pemilik). Tulisan "Memuat detail
   aktivitas…" diganti logo Volupo dengan kilau miring yang berjalan melintasinya.
   Seluruhnya CSS: detail.js dan HTML tidak diubah. Teks aslinya TETAP ada di DOM
   (hanya disembunyikan dari mata) supaya pembaca layar masih mengumumkan "Memuat…".
   Kilau memakai logo.png sebagai MASKER, jadi cahayanya hanya jatuh di bentuk huruf. */
.det-loading {
    position: relative;
    font-size: 0; line-height: 0; color: transparent;
    padding: 0;
}
.det-loading::before,
.det-loading::after {
    content: '';
    position: absolute; left: 50%; top: 32%;
    width: 160px; height: 41px;
    transform: translate(-50%, -50%);
}
.det-loading::before {
    background: url('/assets/images/logo.png') center / contain no-repeat;
}
.det-loading::after {
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 35%,
        rgba(255,255,255,.85) 50%,
        rgba(255,255,255,0) 65%) 0 0 / 250% 100% no-repeat;
    -webkit-mask: url('/assets/images/logo.png') center / contain no-repeat;
            mask: url('/assets/images/logo.png') center / contain no-repeat;
    animation: vlpKilau 1.6s ease-in-out infinite;
}
@keyframes vlpKilau {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}
/* Pengunjung yang mematikan animasi di perangkatnya: logo diam saja. */
@media (prefers-reduced-motion: reduce) {
    .det-loading::after { animation: none; display: none; }
}

/* Galeri */
.det-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 24px; }
.gal-main { border-radius: 16px; overflow: hidden; height: 360px; background: var(--bg) center/cover no-repeat; }
.gal-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.gal-thumb { border-radius: 14px; overflow: hidden; background: var(--bg) center/cover no-repeat; cursor: pointer; transition: opacity 0.15s; }
.gal-thumb:hover { opacity: 0.9; }
.gal-more { position: relative; }
.gal-more::after { content: attr(data-more); position: absolute; inset: 0; background: rgba(15,45,107,0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }

/* Judul & meta */
/* ===== SKALA HURUF DISELARASKAN KE KLOOK & TRAVELOKA (11 Sep) =====
   Diukur pada halaman produk keduanya di ponsel: judul 20-22px, judul seksi
   16px, teks isi 13-14px. Volupo sebelumnya 24/16/15 — tiap tingkat satu
   ukuran lebih besar, dan pada halaman sepanjang ini selisih itu menumpuk
   jadi hampir satu layar penuh.

   Angka di bawah mengikuti keduanya, tidak lebih kecil: lebih kecil dari
   Klook berarti bertaruh pada hal yang tidak ada yang menuntutnya. */
.det-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.18; letter-spacing: -0.015em; margin-bottom: 8px; }
.det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-2); font-size: 13px; margin-bottom: 6px; }
.det-meta .rating { color: #F59E0B; font-weight: 700; }
.det-meta .rating span { color: var(--text-2); font-weight: 400; }
.det-cat { display: inline-flex; align-items: center; gap: 6px; background: #E9F6F3; color: var(--emerald); font-weight: 600; font-size: 12px; padding: 4px 11px; border-radius: 999px; letter-spacing: .01em; }
.det-badge { background: var(--coral); color: #fff; font-weight: 600; font-size: 12px; padding: 4px 11px; border-radius: 999px; }

/* Grid utama */
.det-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; margin-top: 22px; }

/* Bayangan sangat tipis menggantikan sebagian bobot garis. Garis 1px pada
   latar krem terbaca keras; bayangan rendah membuat kartu terasa terangkat
   sedikit tanpa menambah "kotak" ke halaman. */
.det-section { background: #fff; border: 1px solid #EDF1F7; border-radius: 16px; padding: 18px 19px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15,45,107,.04); }
.det-section h2 { font-size: 16px; color: var(--navy); margin-bottom: 11px; }
/* 15px, bukan ukuran bawaan body. Diukur 11 Sep terhadap Klook & Traveloka:
   keduanya memakai 14px untuk teks isi di ponsel. Punya kita sebelumnya ~16px —
   lebih mudah dibaca, tapi memakan tinggi, dan tinggi itulah yang membuat kotak
   pemesanan terdorong jauh ke bawah pada produk berketerangan panjang.
   15px adalah jalan tengah: masih di atas keduanya, tapi memangkas sekitar satu
   baris untuk tiap tujuh baris teks. */
.det-section p { color: var(--text); line-height: 1.65; white-space: pre-line; font-size: 14px; }

.hl-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hl-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 14px; line-height: 1.5; }
.hl-list li .ic { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 2px; font-weight: 700; }
.ic-check { background: #E7F8EE; color: #15803D; }
.ic-x { background: #FEECEC; color: #B91C1C; }
.ic-star { background: #FEF3E2; color: #B45309; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-item .k { font-size: 12px; color: var(--text-2); font-weight: 600; margin-bottom: 3px; }
.info-item .v { color: var(--text); font-size: 14px; }
.lang-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lang-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--text); }

/* Kotak booking (sticky) */
/* padding 22px → 18px dan jarak label dirapatkan. Kotak ini yang paling
   sering dilihat di ponsel; setiap piksel di sini menggeser daftar tiket. */
.book-box { position: sticky; top: 90px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px rgba(15,45,107,0.08); }
/* flex-wrap WAJIB ada. Tanpanya ketiga anak dipaksa muat dalam satu baris, dan begitu
   labelnya memanjang ("/person" vs "/orang") harga coretnya yang dipendekkan — patah
   jadi "Rp" di atas dan "689.920" di bawah. Dengan wrap, yang turun adalah seluruh
   labelnya, utuh. nowrap per anak memastikan tak satu pun angka pecah di tengah. */
.book-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 7px; margin-bottom: 2px; padding-bottom: 12px; border-bottom: 1px solid #F1F5FA; }
/* CORAL, bukan navy — keputusan pemilik 11 Sep. Disamakan dengan latar tombol
   "Pesan Sekarang" supaya angka dan tindakan terbaca sebagai satu kesatuan.
   Ukuran turun 26px → 22px: pada kolom selebar 340px, 26px memaksa harga panjang
   membungkus ke baris kedua. */
.book-price .now { font-size: 22px; font-weight: 700; color: var(--price,#FF6B4A); white-space: nowrap; }
.book-price .was { font-size: 15px; color: var(--text-2); text-decoration: line-through; white-space: nowrap; }
.book-price .per { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.book-off { display: inline-block; background: #FFF0EC; color: #D9482A; font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; }

.book-label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
.book-input { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; font-family: 'Inter', sans-serif; outline: none; }
.book-input:focus { border-color: var(--ocean); }
.qty-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; }
.qty-row button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: 18px; cursor: pointer; color: var(--navy); }
.qty-row span { font-weight: 700; font-family: 'Space Grotesk', monospace; }
.book-total { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 14px; font-weight: 700; }
.book-total .amt { font-size: 18px; color: var(--price,#FF6B4A); }
.book-cta { width: 100%; background: var(--coral); color: #fff; border: none; border-radius: 13px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(255,107,74,0.24); transition: background 0.18s, box-shadow 0.18s; }
.book-cta:hover { background: var(--coral-hover); box-shadow: 0 6px 18px rgba(255,107,74,0.32); }
.book-cta:active { background: var(--coral-pressed); box-shadow: 0 2px 8px rgba(255,107,74,0.24); }
.book-note { font-size: 11.5px; color: var(--text-2); text-align: center; margin-top: 10px; }

/* Toast */
.toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 48px rgba(17,24,39,0.16); padding: 13px 16px; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: tIn 0.28s ease; }
.toast .d { width: 22px; height: 22px; border-radius: 50%; background: var(--success, #22C55E); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
@keyframes tIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 900px) {
    .det-grid { grid-template-columns: 1fr; }
    .book-box { position: static; }
    .det-gallery { grid-template-columns: 1fr; }
    .gal-main { height: 260px; }
    .gal-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .info-grid { grid-template-columns: 1fr; }
    .det-title { font-size: 21px; }
    /* 13,5px di ponsel — persis kisaran Klook & Traveloka. */
    .det-section p, .hl-list li, .info-item .v { font-size: 13.5px; }
    .det-section { padding: 16px 16px; border-radius: 15px; margin-bottom: 12px; }
    .det-section h2 { font-size: 15.5px; margin-bottom: 10px; }
    .det-wrap { padding-left: 14px; padding-right: 14px; }
    .det-logo img { height: 32px; }
    .det-header { padding: 7px 14px; }
}