/* ============================================================
   HaiGili — Portal Layanan Wisata (acuan Manual Book HaiGili)
   Tema: navy utama • biru/cyan aksen • latar putih
   Mobile-first, maks 2 keluarga font, kartu seragam
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#0A2540;        /* identitas utama */
  --navy2:#12355B;
  --blue:#0E7EE4;        /* aksen biru */
  --cyan:#00B4D8;        /* aksen cyan */
  --grad:linear-gradient(135deg,#0E7EE4,#00B4D8);
  --soft:#F2F6FA;
  --line:#E3EAF1;
  --txt:#12233B;
  --mut:#5C6F84;
  --white:#fff;
  --ok:#12A150; --warn:#E8590C; --bad:#E03131;
  --r:14px;
  --sh:0 6px 20px rgba(10,37,64,.08);
  --sh2:0 10px 30px rgba(10,37,64,.14);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:#fff;color:var(--txt);line-height:1.5;font-size:15px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--txt)}
::-webkit-scrollbar{height:6px;width:8px}
::-webkit-scrollbar-thumb{background:#C7D4E0;border-radius:8px}

.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.hidden{display:none!important}

/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:1100px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--navy);letter-spacing:-.3px}
.brand img{height:36px;width:auto}
@media(min-width:760px){.brand img{height:44px}}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.iconbtn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--navy);background:var(--soft);transition:.15s}
.iconbtn:active{transform:scale(.93)}
.langbtn{display:flex;align-items:center;gap:6px;padding:0 12px;height:38px;border-radius:12px;background:var(--soft);font-weight:700;font-size:13px;color:var(--navy)}

/* ============ BOTTOM NAV ============ */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(10,37,64,.07)}
.bnav-in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.bnav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--mut);font-size:10.5px;font-weight:600;border-radius:12px;transition:.15s;min-width:0;flex:1 1 0}
.bnav button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.bnav button svg{width:21px;height:21px}
.bnav button.on{color:var(--blue)}
.bnav .nav-mid{position:relative}
.bnav .nav-mid>span{width:52px;height:52px;margin-top:-26px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px rgba(14,126,228,.4);border:4px solid #fff}
.bnav .nav-mid>span svg{width:24px;height:24px}
.bnav .nav-mid.on>span{box-shadow:0 8px 20px rgba(14,126,228,.55);transform:scale(1.04)}

/* ============ HERO ============ */
.hero{position:relative;background:linear-gradient(180deg,#F0F8FE 0%,#E4F2FC 55%,#DBEFFB 100%);color:var(--txt);overflow:hidden;padding-top:14px}
.hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:26px 0 0}
.hero-top .htx{min-width:0}
.hero h1{font-size:25px;font-weight:800;letter-spacing:-.4px;line-height:1.18;color:var(--navy);max-width:640px}
.hero p.sub{margin-top:7px;font-size:13.5px;color:var(--mut);max-width:600px}
.hero .cta{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:13px;box-shadow:0 8px 22px rgba(0,150,199,.35)}
.hero .cta:active{transform:scale(.97)}
.hsearch{margin:16px 0 0}
.hsearch .sb{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E1ECF5;border-radius:16px;box-shadow:0 10px 30px rgba(10,37,64,.10);padding:7px 7px 7px 16px}
.hsearch .ic{display:flex;color:var(--cyan);flex:none}
.hsearch .ic svg{width:18px;height:18px;display:block}
.hsearch input{flex:1;border:none;outline:none;font-size:14.5px;min-width:0;background:transparent}
.hsearch button{height:42px;padding:0 20px;border-radius:12px;background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap}
.hero-stage{margin:14px 0 0}
.hero-stage .box{position:relative;border-radius:22px;overflow:hidden;background:#CBE4F2;box-shadow:0 20px 44px rgba(14,90,150,.22);aspect-ratio:var(--hb-ar,2.1407);transition:aspect-ratio .4s ease}
.hero-slider{position:absolute;inset:0;z-index:1}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;will-change:opacity;pointer-events:none;z-index:1}
.hero-slide.on{opacity:1;pointer-events:auto;z-index:2}
.hero-slide img{width:100%;height:100%;object-fit:contain;display:block}
.hero-slide .hb-hit{position:absolute;inset:0;z-index:3;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-slide.on .hb-hit:hover{background:linear-gradient(180deg,rgba(3,26,90,0),rgba(3,26,90,.07))}
.hero-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:6px;z-index:5}
.hero-dots button{pointer-events:auto;width:9px;height:9px;border-radius:99px;border:0;padding:0;background:rgba(3,26,90,.32);cursor:pointer;transition:all .3s}
.hero-dots button.on{width:26px;background:#031A5A;box-shadow:0 1px 5px rgba(255,255,255,.65)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 0}
.hero-stats div{background:#fff;border:1px solid #E1ECF5;border-radius:14px;padding:9px 6px;text-align:center;box-shadow:0 4px 14px rgba(10,37,64,.06)}
.hero-stats b{font-size:15px;font-weight:800;color:var(--navy);display:block;line-height:1.1}
.hero-stats span{font-size:9.5px;color:var(--mut);display:block;margin-top:2px;line-height:1.3}
@media(max-width:560px){
  .hero-top{padding-top:20px}
  .hero h1{font-size:20px}
  .hero p.sub{font-size:12.5px}
  .hero .cta{display:none}
  /* BANNER MOBILE: full-bleed (mentok tepi) => tampil lebih besar; poster tetap UTUH (contain, tanpa crop) */
  .hero{padding-top:10px}
  .hero-stage{margin:11px -16px 0}
  .hero-stage .box{border-radius:0;box-shadow:none}
  .hero-dots{right:12px;bottom:9px;gap:5px}
  .hero-dots button{width:7px;height:7px}
  .hero-dots button.on{width:20px}
  .hero-stats span{font-size:8.5px}
  /* KOLOM CARI MOBILE: diperkecil supaya lebih ringkas */
  .hsearch{margin:12px 0 0}
  .hsearch .sb{gap:8px;padding:5px 5px 5px 12px;border-radius:13px}
  .hsearch .ic svg{width:16px;height:16px}
  .hsearch input{font-size:13.5px}
  .hsearch button{height:36px;padding:0 13px;border-radius:10px;font-size:12.5px}
}

/* ============ SECTION ============ */
.sec{padding:18px 0 4px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;row-gap:6px}
.sec-title{font-size:18.5px;font-weight:800;color:var(--navy);letter-spacing:-.3px;min-width:0;line-height:1.3}
.sec-title em{font-style:normal;color:var(--cyan)}
.sec-more{font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap;display:flex;align-items:center;gap:4px;min-width:0}
.sec-more:active{opacity:.7}
.sec-more-txt{white-space:normal;text-align:right;line-height:1.35;max-width:100%}

/* ============ KATEGORI GRID ============ */
.katgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.katcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 6px 10px;text-align:center;transition:.15s;box-shadow:0 2px 8px rgba(10,37,64,.04)}
.katcard:active{transform:scale(.96);border-color:var(--cyan)}
.katcard .ki{width:46px;height:46px;margin:0 auto 7px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:var(--soft)}
.katcard b{display:block;font-size:11px;line-height:1.25;font-weight:700;color:var(--navy)}
.katcard span{font-size:9.5px;color:var(--mut)}
@media(min-width:700px){.katgrid{grid-template-columns:repeat(8,1fr);gap:12px}.katcard .ki{width:52px;height:52px;font-size:26px}.katcard b{font-size:12px}}

/* ============ SECTION HOTEL & VILLA TERSEDIA (ala edgetravelindo) ============ */
.hcard{width:242px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(10,37,64,.06);transition:.18s;display:block}
.hcard:active{transform:scale(.98)}
.hcard .h-ph{position:relative;height:138px;background:linear-gradient(135deg,#E8F1FB,#D3EAF5)}
.hcard .h-ph img{width:100%;height:100%;object-fit:cover;display:block}
.hcard .h-ph-ph{width:100%;height:100%;display:grid;place-items:center;font-size:42px}
.h-av{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);background:rgba(255,255,255,.95);color:#0B5FA8;font-size:10px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(10,37,64,.14)}
.h-av.dim{color:var(--mut)}
.hcard .h-bd{padding:10px 12px 12px}
.hcard h4{font-size:13.5px;line-height:1.3;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.hcard .h-loc{display:block;font-size:11px;color:var(--mut);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .h-pr{display:flex;align-items:baseline;gap:5px;margin-top:8px}
.hcard .h-pr b{font-size:16.5px;color:var(--navy)}
.hcard .h-pr i{font-style:normal;font-size:11px;color:var(--mut);white-space:nowrap}

/* ============ KARTU PRODUK ============ */
.scrollx{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 14px;margin:0 -16px;scroll-snap-type:x mandatory}
.scrollx>*{scroll-snap-align:start;flex:0 0 auto}
.pcard{width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(10,37,64,.05);transition:.18s}
.pcard:active{transform:scale(.98)}
.pcard .ph{position:relative;height:128px;background:var(--soft)}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .badge{position:absolute;top:8px;left:8px;background:var(--warn);color:#fff;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:.4px}
.pcard .badge.b-pop{background:var(--blue)}
.pcard .badge.b-baru{background:var(--ok)}
.pcard .pbd{padding:10px 11px 12px}
.pcard h4{font-size:13px;font-weight:700;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.pcard .ploc{font-size:10.5px;color:var(--mut);margin-top:2px;display:flex;align-items:center;gap:4px}
.pcard .prc{display:flex;align-items:baseline;justify-content:space-between;margin-top:7px}
.pcard .prc b{color:var(--blue);font-size:14.5px;font-weight:800}
/* produk berdurasi (harga tergantung durasi) — nominal tidak ditampilkan di kartu listing */
.pcard .prc b.prc-dur{color:var(--mut);font-size:12px;font-weight:700}
/* harga diganti TEKS (mis. produk 14 → "web dreamdivers.com") */
.pcard .prc b.prc-teks{font-size:11.5px;font-weight:800;letter-spacing:-.2px;line-height:1.25;word-break:break-word}
/* tulisan "web <domain>" = tombol tautan ke situs operator (permintaan Rino 23 Sep 2026):
   diberi garis bawah + kursor tangan supaya jelas bisa diklik */
.pcard .prc b.prc-web{text-decoration:underline;text-decoration-thickness:1.2px;text-underline-offset:2px;cursor:pointer}
.pcard .prc i{font-style:normal;font-size:10px;color:var(--mut)}
.pcard .rate{font-size:11px;font-weight:700;color:var(--navy);background:var(--soft);padding:2px 7px;border-radius:8px}
/* gambar bintang di lencana rating kartu — sebelumnya SVG tanpa ukuran (0x0) sehingga
   angka rating tampil tanpa gambarnya (mis. kartu "Paket Diving Dream Divers" → "5" polos).
   Perbaikan Rino 23 Sep 2026: bintang selalu terlihat, warna emas. */
.pcard .rate svg{width:12px;height:12px;flex:none;color:#F0B429}
/* Revisi 24 Sep 2026 (permintaan Rino): pada kartu operator DIVING (kat=27) bintang 5 pindah
   NAIK ke baris lokasi (class .ploc-web) supaya sejajar dengan tulisan di sampingnya —
   keterangan "web <domain>" di bawahnya sudah dihilangkan. Badge didorong ke kanan. */
.pcard .ploc.ploc-web .rate{margin-left:auto}
.pcard .ploc.ploc-web{align-items:center}

/* grid (jelajahi) */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pgrid .pcard{width:auto}
@media(min-width:640px){.pgrid{grid-template-columns:repeat(4,1fr)}}

/* ---- kategori DIVING (27): kartu DISUSUN ATAS-BAWAH ----
   Permintaan Rino 23 Sep 2026: di #/jelajahi?kat=27 gambar kartu tidak lagi
   berdampingan — satu kartu per baris, foto di atas lalu nama/lokasi/harga. */
.pgrid-tumpuk{grid-template-columns:1fr;gap:16px;max-width:560px;margin:0 auto}
.pgrid-tumpuk .pcard{width:auto}
.pgrid-tumpuk .pcard .ph{height:auto;aspect-ratio:16/9}
.pgrid-tumpuk .pcard .pbd{padding:12px 14px 14px}
.pgrid-tumpuk .pcard h4{font-size:15px;min-height:0}
.pgrid-tumpuk .pcard .ploc{font-size:11.5px;margin-top:4px}
.pgrid-tumpuk .pcard .prc{margin-top:9px}
.pgrid-tumpuk .pcard .prc b{font-size:16px}
.pgrid-tumpuk .pcard .prc b.prc-teks{font-size:13px}
@media(min-width:640px){.pgrid-tumpuk{grid-template-columns:1fr}}
@media(min-width:1024px){.pgrid-tumpuk .pcard{width:auto}.pgrid-tumpuk .pcard .ph{height:auto}}

/* ============ PROMO ============ */
.promo-card{width:290px;border-radius:18px;overflow:hidden;position:relative;color:#fff;box-shadow:var(--sh)}
.promo-card img{width:100%;height:150px;object-fit:cover}
.promo-card .pov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,37,64,.05),rgba(10,37,64,.88));padding:14px;display:flex;flex-direction:column;justify-content:flex-end}
.promo-card .tag{font-size:10px;font-weight:800;letter-spacing:.6px;background:rgba(255,255,255,.2);width:fit-content;padding:3px 10px;border-radius:20px;backdrop-filter:blur(4px)}
.promo-card h4{font-size:16px;font-weight:800;margin-top:6px;line-height:1.25}
.promo-card p{font-size:11.5px;color:#DCE8F5;margin-top:3px}
.promo-card .kode{margin-top:8px;font-size:11px;font-weight:800;color:#FFE29A;letter-spacing:1px}

/* ============ BLOG ============ */
.blogcard{width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(10,37,64,.05)}
.blogcard img{width:100%;height:120px;object-fit:cover}
.blogcard .bb{padding:11px 13px 13px}
.blogcard .bdate{font-size:10.5px;color:var(--mut);font-weight:600}
.blogcard h4{font-size:13.5px;font-weight:800;color:var(--navy);margin-top:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blogcard p{font-size:11.5px;color:var(--mut);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ INFO STRIP / KENAPA ============ */
.whygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.why{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff}
.why .wi{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:8px}
.why b{font-size:13px;color:var(--navy);display:block}
.why span{font-size:11.5px;color:var(--mut)}
@media(min-width:700px){.whygrid{grid-template-columns:repeat(4,1fr)}}

/* ============ FOOTER (gaya app: gradasi biru, logo putih, badge, trust, 3 kolom) ============ */
.foot{background:linear-gradient(180deg,#01A0C6 0%,#0485D6 34%,#006DE8 76%,#025FEE 100%);color:#fff;margin-top:26px;font-size:12.5px}
.foot .fwrap{padding:32px 14px calc(84px + env(safe-area-inset-bottom))}
@media(min-width:760px){.foot .fwrap{padding:44px 26px 36px;max-width:820px;margin:0 auto}}
@media(min-width:760px){.f-logo img{height:64px}.f-addr-t{font-size:14.5px;line-height:1.55}.f-addr{margin-top:20px}.f-shop{gap:74px;margin-top:28px}.f-badges img{width:124px}.f-trusted{font-size:14px}.f-trusted svg{width:17px;height:17px}.f-sec{gap:22px}.f-ssl{gap:11px;padding:10px 16px 10px 12px;border-radius:15px}.f-ssl svg{width:25px;height:25px}.ssl-t b{font-size:13.5px}.ssl-t small{font-size:9.5px;letter-spacing:1.3px}.f-kominfo{height:58px}.f-menus{margin-top:36px;column-gap:20px}.fcol h5{font-size:13.5px;margin-bottom:9px}.fcol a{font-size:12.5px;padding:4px 0}.f-legal{margin-top:32px;padding-top:18px;font-size:12.5px}.f-copy{margin-top:14px;font-size:12px}}
@media(max-width:370px){.foot .fwrap{padding-left:6px;padding-right:6px}.f-menus{column-gap:6px}}
.f-logo img{height:58px;width:auto;display:block}
.f-addr{display:flex;align-items:flex-start;gap:9px;margin-top:17px;color:rgba(255,255,255,.96)}
.f-addr svg{flex:none;width:19px;height:19px;margin-top:2px;color:rgba(255,255,255,.95)}
.f-addr-t{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.5;letter-spacing:.15px}
.f-shop{display:flex;align-items:flex-start;gap:44px;margin-top:24px}
.f-badges{display:flex;flex-direction:column;gap:5px}
.f-badges img{width:104px;height:auto;display:block}
.f-trust{display:flex;flex-direction:column;gap:9px;padding-top:3px}
.f-trusted{display:flex;align-items:center;gap:5px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.2px}
.f-trusted svg{width:15px;height:15px;flex:none}
.f-sec{display:flex;align-items:center;gap:14px}
.f-ssl{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:7px 12px 7px 9px;border-radius:13px}
.f-ssl svg{width:21px;height:21px;flex:none}
.ssl-t{display:flex;flex-direction:column;line-height:1.12}
.ssl-t b{font-size:12px;font-weight:800;letter-spacing:.8px;color:#fff}
.ssl-t small{font-size:8.5px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.97)}
.f-kominfo{height:47px;width:auto;display:block}
.f-menus{display:grid;grid-template-columns:repeat(3,1fr);column-gap:7px;margin-top:30px;text-align:left;width:100%;max-width:100%}
.fcol{min-width:0}
.fcol h5{font-size:12.5px;font-weight:800;letter-spacing:.5px;color:#fff;margin:0 0 6px}
.fcol a{display:block;padding:2.5px 0;color:rgba(255,255,255,.9);font-size:10px;line-height:1.6;letter-spacing:0;overflow-wrap:break-word}
.fcol a:active{color:#fff}
.f-legal{border-top:1px solid rgba(255,255,255,.3);margin-top:28px;padding-top:16px;display:flex;justify-content:center;align-items:center;gap:11px;font-size:11.5px;color:rgba(255,255,255,.75);flex-wrap:wrap}
.f-legal a{color:rgba(255,255,255,.88)}
.f-legal a:active{color:#fff}
.f-legal i{font-style:normal;color:rgba(255,255,255,.45)}
.f-copy{margin-top:13px;text-align:center;font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.3px}

/* ============ PAGE (jelajahi/detail/dll) ============ */
.pagehead{background:var(--navy);color:#fff;padding:22px 0 0}
.pagehead .crumbs{font-size:11.5px;color:#8FB0D2;margin-bottom:6px}
.pagehead h1{font-size:21px;font-weight:800;letter-spacing:-.3px}
.pagehead p{font-size:12.5px;color:#B9CFE6;margin-top:4px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 2px}
.chip{flex:none;padding:8px 16px;border-radius:24px;background:#fff;color:var(--navy);font-weight:700;font-size:12.5px;border:1px solid var(--line)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* detail */
.dhero{position:relative;height:250px;background:var(--soft)}
.dhero img{width:100%;height:100%;object-fit:cover}
.dhero .back{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--navy);box-shadow:0 4px 12px rgba(10,37,64,.2)}
.dinfo{max-width:760px;margin:-22px auto 0;padding:0 14px;position:relative}
.dcard{background:#fff;border-radius:20px;box-shadow:var(--sh2);padding:18px}
.dcard .dtag{display:inline-block;font-size:10px;font-weight:800;color:var(--blue);background:rgba(14,126,228,.1);padding:3px 10px;border-radius:20px;letter-spacing:.4px}
.dcard h1{font-size:20px;font-weight:800;color:var(--navy);margin-top:6px;line-height:1.3}
.dcard .dloc{margin-top:4px;font-size:13px;color:var(--mut);display:flex;gap:5px;align-items:center}
.dcard .drow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.dcard .dprice b{font-size:22px;color:var(--blue);font-weight:800}
.dcard .dprice i{font-style:normal;font-size:11.5px;color:var(--mut)}
.dcard .drate{font-weight:800;font-size:13px;color:var(--navy);background:var(--soft);padding:5px 10px;border-radius:10px}
.dsec{margin-top:16px;background:#fff;border-radius:18px;box-shadow:var(--sh);padding:18px}
.dsec h3{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.dsec p{font-size:13.5px;color:#3E556E;line-height:1.75}

/* form booking */
.frm label{display:block;font-size:11.5px;font-weight:700;color:var(--navy);margin:12px 0 5px;letter-spacing:.2px}
.frm input,.frm select,.frm textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;outline:none;background:#fff;transition:.15s}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,180,216,.14)}
.frm textarea{resize:vertical;min-height:74px}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:13px;width:fit-content;overflow:hidden}
.qty button{width:42px;height:44px;font-size:19px;font-weight:800;color:var(--navy);background:var(--soft)}
.qty button:active{background:#DCE6F0}
.qty b{width:52px;text-align:center;font-size:16px}
.payopt{display:grid;gap:8px;margin-top:6px}
.payopt label{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;margin:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--txt)}
.payopt input{width:auto;accent-color:var(--blue)}
.payopt .po-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px}
.payopt .on{border-color:var(--cyan);background:rgba(0,180,216,.05)}
.btn-main{display:block;width:100%;margin-top:18px;background:var(--grad);color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:15px;box-shadow:0 10px 24px rgba(14,126,228,.35)}
.btn-main:active{transform:scale(.985)}
.btn-ghost{display:block;width:100%;margin-top:10px;border:1.5px solid var(--line);color:var(--navy);font-weight:700;font-size:14px;padding:12px;border-radius:15px;text-align:center;background:#fff}

/* e-ticket */
.eticket{max-width:480px;margin:0 auto;padding:20px 16px 30px}
.et-head{text-align:center;padding:10px 0 16px}
.et-head .ok-ic{width:64px;height:64px;border-radius:50%;background:rgba(18,161,80,.12);display:grid;place-items:center;margin:0 auto;color:var(--ok)}
.et-head h1{font-size:19px;font-weight:800;color:var(--navy);margin-top:10px}
.et-head p{font-size:13px;color:var(--mut)}
.et-card{background:#fff;border-radius:20px;box-shadow:var(--sh2);overflow:hidden}
.et-top{padding:18px;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px}
.et-top .st{font-size:11px;font-weight:800;padding:5px 12px;border-radius:20px}
.et-top .st.Baru{background:rgba(255,193,7,.2);color:#FFE082}
.et-top .st.Dikonfirmasi{background:rgba(0,180,216,.25);color:#9DE9FF}
.et-top .st.Selesai{background:rgba(18,161,80,.25);color:#A5F0C4}
.et-top .st.Dibatalkan{background:rgba(224,49,49,.25);color:#FFB3B3}
.et-body{padding:18px}
.et-kode{text-align:center;padding:16px;background:var(--soft);border-radius:14px;border:2px dashed #B9CFE6}
.et-kode span{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:1px}
.et-kode b{display:block;font-size:24px;letter-spacing:2px;color:var(--navy);font-weight:800;margin-top:4px}
.et-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.et-row:last-child{border:none}
.et-row span{color:var(--mut)}
.et-row b{text-align:right;color:var(--navy);font-weight:700}
.et-note{margin-top:14px;background:rgba(0,180,216,.07);border:1px solid rgba(0,180,216,.25);border-radius:14px;padding:13px 15px;font-size:12px;color:#25607A;line-height:1.7}

/* status tracker */
.track{display:flex;margin:18px 0 4px;position:relative}
.track::before{content:'';position:absolute;top:14px;left:8%;right:8%;height:3px;background:var(--line)}
.track div{flex:1;text-align:center;position:relative;z-index:1}
.track .dot{width:28px;height:28px;margin:0 auto;border-radius:50%;background:#E7EDF4;display:grid;place-items:center;font-size:11px;font-weight:800;color:#9AAEC4}
.track .on .dot{background:var(--blue);color:#fff}
.track .done .dot{background:var(--ok);color:#fff}
.track span{font-size:9.5px;font-weight:700;color:var(--mut);display:block;margin-top:4px}
.track .on span,.track .done span{color:var(--navy)}

/* ============ AKUN ============ */
.akun-hero{background:var(--navy);color:#fff;padding:26px 16px 30px}
.akun-hero .ava{width:58px;height:58px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:24px;font-weight:800}
.akun-hero h2{font-size:19px;font-weight:800;margin-top:10px}
.akun-hero p{font-size:12.5px;color:#A9C4E0}
.akun-menu{max-width:640px;margin:-16px auto 0;padding:0 16px;position:relative;display:grid;gap:10px}
.akun-item{background:#fff;border-radius:16px;box-shadow:var(--sh);display:flex;align-items:center;gap:13px;padding:14px 16px}
.akun-item .ai{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;background:var(--soft)}
.akun-item b{display:block;font-size:13.5px;color:var(--navy)}
.akun-item span{font-size:11.5px;color:var(--mut)}
.akun-item .arr{margin-left:auto;color:#B9C9D9}

/* ============ MISC ============ */
.skel{background:linear-gradient(90deg,#E9EFF6 25%,#F5F8FB 50%,#E9EFF6 75%);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:12px}
@keyframes sh{to{background-position:-200% 0}}
.toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 20px;border-radius:14px;font-size:13px;font-weight:600;z-index:120;opacity:0;transition:.25s;pointer-events:none;max-width:88vw;text-align:center;box-shadow:var(--sh2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sheet{position:fixed;inset:0;z-index:100;display:none}
.sheet.show{display:block}
.sheet .scrim{position:absolute;inset:0;background:rgba(10,20,35,.5)}
.sheet .spop{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;animation:up .25s ease}
@keyframes up{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
.sheet .grip{width:44px;height:4px;border-radius:4px;background:#D8E2EC;margin:0 auto 14px}
.sheet h3{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:12px}
.sheet .close-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--navy)}
/* search result list */
.srow{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.srow img{width:64px;height:52px;border-radius:12px;object-fit:cover;flex:none}
.srow b{font-size:13.5px;color:var(--navy);display:block}
.srow span{font-size:11px;color:var(--mut)}
.srow .pr{margin-left:auto;text-align:right;font-weight:800;font-size:13px;color:var(--blue)}
/* empty */
.empty{text-align:center;padding:46px 20px;color:var(--mut)}
.empty .ei{font-size:44px;margin-bottom:10px}
.empty b{display:block;font-size:15px;color:var(--navy)}
.empty p{font-size:12.5px;margin-top:4px}
/* desktop frame */
@media(min-width:1024px){
  .pcard{width:236px}.pcard .ph{height:140px}
}

/* ============ MODUL TIKET KAPAL (ticketboat-style) ============ */
.boatband{display:flex;align-items:center;gap:14px;margin:18px auto 2px;max-width:640px;background:linear-gradient(115deg,#0A2540,#0E7EE4 70%,#00B4D8);border-radius:20px;padding:16px 18px;color:#fff;box-shadow:0 10px 26px rgba(14,126,228,.28)}
.boatband .bb-ic{font-size:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.boatband .bb-tx{flex:1;min-width:0}
.boatband .bb-tx b{font-size:15px;display:block}
.boatband .bb-tx span{font-size:11.5px;color:#CFE3F7;display:block;margin-top:2px}
.boatband .bb-go{flex:none;font-size:12px;font-weight:800;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:8px 13px;border-radius:24px}
.boat-search{background:#fff;border-radius:20px;box-shadow:var(--sh);border:1px solid var(--line);padding:16px;margin-bottom:14px}
.boat-search label{display:block;font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.boat-search select,.boat-search input[type=date]{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-weight:700;color:var(--navy);background:#fff;outline:none}
/* DARI/KE lebar penuh: batas kanan sejajar dengan TANGGAL & PENUMPANG (revisi video) */
.bs-stack{display:grid;grid-template-columns:1fr;row-gap:0}
.bs-stack .bs-fld{grid-column:1;min-width:0}
.boat-search label.bs-lbltop{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:33px;margin-bottom:5px}
.bs-stack .bs-swap{width:32px;height:32px;font-size:14px}
.bs-swap{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--soft);font-size:16px;font-weight:800;color:var(--blue);cursor:pointer}
.bs-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
.bs-row2 .bs-fld{min-width:0}
.bs-row2 .bs-fld input{min-width:0;max-width:100%}
.bs-rowpax{margin-top:12px}
.bs-rowrute{margin-bottom:12px}
.bs-rowrute select{font-weight:800}
.rutehint{font-size:11px;color:var(--mut);margin-top:5px;line-height:1.35}
.paxline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#fff}
.paxline .paxlab{font-size:12px;color:var(--mut);margin-right:2px}
.paxline .qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:11px;overflow:hidden}
.paxline .qty button{width:32px;height:34px;border:none;background:var(--soft);font-size:17px;font-weight:800;color:var(--navy);cursor:pointer}
.paxline .qty b{min-width:30px;text-align:center;font-size:14px}
.boat-go{width:100%;margin-top:14px;padding:14px;font-size:15px}
.boat-trust{text-align:center;font-size:11px;color:var(--mut);margin-top:10px}
.boat-trust span{color:var(--blue)}
.boat-sub{font-size:14px;font-weight:800;color:var(--navy);margin:14px 0 10px}
.popgrid{display:flex;flex-wrap:wrap;gap:8px}
.popchip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:8px 11px;font-size:11.5px;color:var(--navy);font-weight:600;box-shadow:var(--sh);flex-wrap:wrap}
.popchip em{color:var(--blue);font-style:normal;font-weight:800}
.popchip b{width:100%;color:var(--ok);font-size:10.5px}
.boat-help{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.boat-help>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px}
.boat-help span{font-size:21px}
.boat-help b{display:block;font-size:12px;margin:5px 0 2px;color:var(--navy)}
.boat-help p{font-size:10.5px;color:var(--mut)}
.jd-sum{background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px 15px;box-shadow:var(--sh);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jd-route{display:flex;align-items:center;gap:8px;font-size:13px}
.jd-route b{color:var(--navy)}
.jd-route em{color:var(--blue);display:inline-flex}
.jd-meta{font-size:11.5px;color:var(--mut);width:100%}
.jd-sortbar{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--mut)}
.sched{display:grid;grid-template-columns:116px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 12px;margin-bottom:10px;box-shadow:var(--sh)}
.s-photo{width:116px;height:98px;object-fit:cover;border-radius:13px;background:var(--soft);flex:none}
.s-op{min-width:0}
.s-when{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);font-weight:700;background:var(--soft);border-radius:8px;padding:3px 9px;margin-bottom:6px}
.s-when b{font-size:15px;color:var(--navy)}
.s-when em{font-style:normal;color:var(--cyan)}
.s-op .opn{font-size:14px;font-weight:800;color:var(--navy);display:block;line-height:1.25}
.s-op .opd{font-size:11px;color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.opb{width:40px;height:40px;border-radius:12px;color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;flex:none;letter-spacing:.3px}
.opb.sm{width:26px;height:26px;font-size:10px;border-radius:8px;vertical-align:middle;margin-right:4px}
.s-price{text-align:right}
.s-price b{font-size:15px;color:var(--navy);display:block}
.s-price span{font-size:10px;color:var(--mut)}
.s-price i{font-style:normal;font-size:10px;color:var(--warn);display:block;margin-bottom:7px}
.bc-img,.et-img{width:52px;height:44px;object-fit:cover;border-radius:11px;flex:none;background:var(--soft)}
.et-img{width:36px;height:32px;border-radius:8px;vertical-align:middle;margin-right:6px}
.btn-main.sm{width:auto;padding:8px 14px;font-size:12px;margin:0}
.bs-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:15px;margin-bottom:14px}
.bc-op{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bc-op b{color:var(--navy);font-size:15px;display:block}
.bc-op span:not(.opb){font-size:12px;color:var(--mut)}
.boat-route{display:flex;align-items:center;gap:10px;padding:10px 0;margin:6px 0}
.br-leg{flex:1;text-align:left}
.br-leg.ar{text-align:right}
.br-leg span{display:block;font-size:12px;color:var(--mut);line-height:1.25}
.br-leg b{font-size:16px;color:var(--navy)}
.br-mid{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.br-mid em{font-size:10.5px;color:var(--blue);font-style:normal;font-weight:700}
.br-line{width:34px;border-top:1.5px dashed #B9CDE2}
.bc-meta{font-size:12px;color:var(--mut);font-weight:600;margin-top:8px}
.bc-pax{border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}
.bc-pax>span{display:block;font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
/* Pasangan label+nilai (dipakai form pencarian #/boat): tetap sebaris seperti sebelumnya */
.paxline .paxitem{display:inline-flex;align-items:center;gap:6px}
/* Form pencarian (#/boat): Dewasa & Anak selalu BERJEJER 2 kolom (tidak pernah pecah baris) */
.bs-rowpax .paxline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px;align-items:center}
.bs-rowpax .paxitem{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0}
.bs-rowpax .paxlab{font-size:12px;min-width:0;flex:0 0 auto;white-space:nowrap}
/* Stepper (tombol −/+) dibuat ringkas di HP supaya pasangan kolom penumpang selalu muat berjejer */
.bs-rowpax .qty button,.bc-pax .qty button{width:26px;height:32px;font-size:16px;flex:0 0 auto}
.bs-rowpax .qty b,.bc-pax .qty b{width:24px;min-width:24px;font-size:13px;padding:0}
@media(max-width:340px){
  .bs-rowpax .qty button,.bc-pax .qty button{width:23px}
  .bs-rowpax .qty b,.bc-pax .qty b{width:20px;min-width:20px}
  .bs-rowpax .paxitem{gap:5px}
}
@media(min-width:760px){
  .bs-rowpax .qty button,.bc-pax .qty button{width:32px;height:34px;font-size:17px}
  .bs-rowpax .qty b,.bc-pax .qty b{width:46px;min-width:46px;font-size:14px}
}
/* Kolom penumpang (Dewasa & Anak) selalu BERJEJER 2 kolom — termasuk di layar HP, seperti di halaman /#/boat */
.bc-pax .paxline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;align-items:start;background:#fff}
.bc-pax .paxitem{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.bc-pax .paxlab{display:flex;flex-direction:column;line-height:1.2;font-size:12px;color:var(--mut);margin:0;min-width:0}
.bc-pax .paxlab em{font-style:normal;font-weight:800;font-size:11px;color:var(--navy)}
@media(min-width:760px){
  .bc-pax .paxline{gap:10px 14px}
}
.bc-total{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);margin-top:12px;padding-top:12px}
.bc-total span{font-size:13px;font-weight:700;color:var(--mut)}
.bc-total b{font-size:20px;color:var(--blue)}
.boat-form{background:#fff;border-radius:18px;box-shadow:var(--sh);border:1px solid var(--line);padding:16px}
.et-boatbody{padding:4px 16px 12px}
.et-row.tot{border-top:1.5px solid var(--navy);margin-top:4px;padding-top:10px}
.et-row.tot span{font-weight:800}
.et-row.tot b{font-size:18px;color:var(--blue)}
@media (max-width:560px){
  .sched{grid-template-columns:96px 1fr;grid-auto-rows:auto}
  .s-photo{width:96px;height:92px;grid-row:1/3}
  .s-price{grid-column:1/-1;display:flex;align-items:center;gap:12px;text-align:left;border-top:1px dashed var(--line);padding-top:10px;margin-top:4px}
  .s-price>div{flex:1}
  .boat-help{grid-template-columns:1fr}
  .bs-row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
}

/* ===== HaiGili v2: brand SVG tajam + boat pulang + fasilitas ===== */
.brand .bic, .f-brand .bic{display:block;width:38px;height:38px;flex:0 0 38px;border-radius:11px;overflow:hidden;background:#fff}
.brand .bic img, .f-brand .bic img{width:100%;height:100%;object-fit:contain;display:block}
.brand .btx, .f-brand .btx { display:flex; flex-direction:column; justify-content:center; line-height:1.05; min-width:0 }
.brand .btx b, .f-brand .btx b { font-size:21px; font-weight:800; color:var(--navy); letter-spacing:-.5px; display:flex; align-items:baseline; white-space:nowrap }
.brand .btx em, .f-brand .btx em { font-style:normal; font-weight:800; color:#0AA0AB; margin-left:1px }
/* Tagline header tampil di SEMUA ukuran layar (mobile + desktop), tepat di bawah tulisan haigili.id */
.brand .btx small { display:block; margin-top:3px; font-size:7.2px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis }
/* HP sangat sempit (≤345px): tagline tetap tampil tapi boleh turun 2 baris agar header tidak melebar */
@media(max-width:345px){
  .hdr .brand{min-width:0}
  .hdr .brand .btx{min-width:0}
  .hdr .brand .btx small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;font-size:6.8px;letter-spacing:.1em}
}
@media(min-width:1024px){ .brand .btx small { display:block; margin-top:4px; font-size:7.6px; letter-spacing:.22em } }
.f-brand { display:flex; align-items:center; gap:12px; text-decoration:none }
.f-brand .bic { width:46px; height:46px; flex:0 0 46px }
.f-brand .btx b { color:#fff; font-size:22px }
.f-brand .btx em { color:#7CE7EF }
.f-brand .btx small { display:block; margin-top:4px; font-size:8px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.78) }
.bs-fld .opt { font-style:normal; font-size:9px; color:#94A3B8; text-transform:none; letter-spacing:0; font-weight:600 }
.jd-sech { display:flex; align-items:baseline; gap:6px; font-size:13.5px; font-weight:800; color:var(--navy); margin:16px 0 8px }
.jd-sech span { font-weight:600; color:var(--mut); font-size:11.5px }
.jd-sum-ret { margin-top:8px; border-style:dashed }
.s-op .opd.fas { color:#0B7A5E; font-weight:600; white-space:normal; overflow:visible; text-overflow:clip }
.fas-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px }
.fas-grid span { background:#E9F9F4; color:#0B7A5E; font-size:12px; font-weight:700; padding:5px 11px; border-radius:99px; line-height:1.3 }
.fas-ic { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px }
.fas-ic span { width:27px; height:27px; display:grid; place-items:center; font-size:14px; line-height:1; background:#E9F9F4; border:1px solid #CFEFE4; border-radius:9px; cursor:default }
.ki img { width:100%; height:100%; object-fit:cover; border-radius:inherit }

/* ================= V2: halaman jadwal ala-aplikasi booking ================= */
.jdhero { background:linear-gradient(180deg,#E4F2FC 0%,#D5EBF9 74%,rgba(213,235,249,0) 100%); padding:6px 0 34px }
.jdwrap { max-width:860px }
.jdhero .jd-back { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #D8E7F3; color:var(--navy); font-weight:700; font-size:12.5px; padding:7px 14px 7px 9px; border-radius:999px; box-shadow:0 6px 16px rgba(10,37,64,.08); margin:4px 0 12px; width:auto }
.jdhero .jd-back svg { width:16px; height:16px }
.jdhero .jd-back:hover { background:var(--navy); color:#fff; border-color:var(--navy) }
.jdhero-tx h1 { color:var(--navy); font-size:26px; margin:2px 0 4px; letter-spacing:-.3px }
.jdhero-tx p { color:var(--mut); font-size:13px; margin:0 }
.jdframe { background:linear-gradient(180deg,#F4F9FD,#EAF3FA); border:1px solid #DFEAF4; border-radius:26px; padding:20px 18px 30px; margin:-14px 0 48px; box-shadow:0 14px 34px rgba(10,37,64,.08) }
.jd-head .jd-sum { background:#fff; border:1px solid #E2EDF6; border-radius:15px; box-shadow:0 6px 16px rgba(10,37,64,.07); padding:10px 12px 9px; gap:8px }
.jd-head .jd-sum .btn-ghost { width:auto; flex:none; margin:0 0 0 auto; padding:7px 12px; font-size:12px; border-radius:999px; border-color:#D8E7F3 }
.jd-route { font-size:13px; gap:7px }
.jd-route b { font-size:13.5px; font-weight:800 }
.jd-meta { font-size:10px; background:#F1F7FC; border-radius:999px; padding:3px 9px; width:max-content; max-width:100%; margin:6px 0 }
.jd-meta.jd-meta-top { flex-basis:100%; width:auto; margin:0 0 6px }
.jd-meta.jd-meta-top b { color:var(--navy) }
/* Pil info (tanggal + penumpang) versi mobile: hanya dipakai di HP, desktop tetap pakai pil di dalam kartu */
.jd-meta-out { display:none }
/* Strip tanggal: bisa DIGESER kiri/kanan (swipe di HP) — revisi 23 Sep 2026 (Rino).
   `overscroll-behavior-x:contain` mencegah geseran memicu tombol back browser;
   mask di tepi kiri/kanan jadi penanda bahwa masih ada tanggal lain di luar layar. */
.jd-strip { display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; padding:10px 2px 6px; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%) }
.jd-strip::-webkit-scrollbar { display:none }
.jd-strip.dragging { scroll-snap-type:none; cursor:grabbing; user-select:none }
/* pemisah nama bulan DIHAPUS (revisi 23 Sep 2026, permintaan Rino) */
.dpill { flex:0 0 auto; min-width:50px; display:flex; flex-direction:column; align-items:center; gap:0; background:#fff; border:1.5px solid #D8E7F3; border-radius:13px; padding:5px 7px 6px; text-align:center; color:inherit; box-shadow:0 2px 6px rgba(10,37,64,.05); transition:all .16s; scroll-snap-align:center; cursor:pointer }
.dpill.off { background:#F4F8FC; border-color:#E6EFF7; box-shadow:none; opacity:.55; cursor:default }
.dpill.off b, .dpill.off span, .dpill.off small { color:#9DB0C5 }
.dpill span { font-size:9.5px; color:var(--mut); font-weight:700; text-transform:uppercase; letter-spacing:.3px }
.dpill b { font-size:15px; color:var(--navy); line-height:1.1; font-weight:800 }
.dpill small { font-size:8.5px; color:var(--mut); font-weight:600 }
.jd-bn { position:relative; margin:2px 0 10px; border-radius:15px; overflow:hidden; box-shadow:0 6px 18px rgba(10,37,64,.10); background:var(--soft) }
.jd-bn::before { content:''; position:absolute; inset:0; background-image:var(--bnimg); background-size:cover; background-position:center; filter:blur(18px) saturate(1.15); opacity:.9 }
.jd-bn img { position:relative; z-index:1; display:block; width:100%; height:auto; max-height:min(50vh,360px); object-fit:contain; background:transparent }
.jd-bn figcaption { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 12px; background:#F1F7FC; border-top:1px solid #DCEBF7; color:var(--navy) }
.jd-bn figcaption b { font-size:13px; font-weight:800 }
.jd-bn figcaption span { font-size:11px; color:var(--mut); font-weight:600 }
.dpill:hover { transform:translateY(-2px); border-color:var(--blue) }
.dpill.on { background:var(--navy); border-color:var(--navy); box-shadow:0 8px 18px rgba(10,37,64,.28) }
.dpill.on span, .dpill.on small { color:#9FB9D8 }
.dpill.on b { color:#fff }
.jd-sortbar { margin:8px 2px 14px }
.jd-sortbar .chip { border-radius:999px; background:#fff; border:1.5px solid #D8E7F3; color:var(--navy); font-weight:700; font-size:12px; padding:7px 13px }
.jd-sortbar .chip.on { background:var(--navy); border-color:var(--navy); color:#fff }
.sched { background:#fff; border:1px solid #E1ECF6; border-radius:18px; box-shadow:0 8px 20px rgba(10,37,64,.07); padding:12px; margin-bottom:13px; transition:transform .15s, box-shadow .15s }
.sched:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,37,64,.11) }
.sched .s-photo { border-radius:14px }
.sched .s-when { font-size:11.5px; color:var(--mut); display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.sched .s-when b { font-size:19px; color:var(--navy); font-weight:800 }
.sched .s-when em { font-style:normal; color:var(--blue); font-weight:800 }
.sched .opn { font-size:14.5px; color:var(--navy); margin-top:5px }
.sched .opd { font-size:11.5px }
.sched .s-price { border-left:1px dashed #E1ECF6; padding-left:14px }
.sched .s-price b { font-size:17.5px; color:var(--navy) }
.sched .btn-main.sm { border-radius:999px; box-shadow:0 6px 14px rgba(14,126,228,.3); padding:8px 16px }
.jd-sech { background:#E3F0FB; border-radius:999px; padding:7px 14px; width:max-content; max-width:100%; color:var(--navy); box-shadow:inset 0 0 0 1px rgba(10,37,64,.05) }
.jd-list-note { font-size:12px; color:var(--mut); margin:14px 0 4px; display:flex; align-items:center; gap:6px }
/* ================= V2: hero overlay banner & testimoni ================= */
.hb-cap { position:absolute; inset:auto 0 0 0; padding:38px 20px 62px; background:linear-gradient(180deg,transparent 10%,rgba(5,18,38,.55) 62%,rgba(5,18,38,.8)); color:#fff; display:flex; flex-direction:column; align-items:flex-start; gap:2px; border-radius:0 0 18px 18px; z-index:4; pointer-events:none }
.hb-cap b { font-size:15.5px; font-weight:800; text-shadow:0 1px 8px rgba(0,0,0,.35) }
.hb-cap p { font-size:12px; margin:0; opacity:.92; max-width:88%; line-height:1.4 }
.hb-cap a { pointer-events:auto; margin-top:7px; background:#fff; color:var(--navy); font-weight:800; font-size:11.5px; padding:7px 15px; border-radius:999px; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.25) }
/* CTA "Pesan Sekarang" — selalu TAMPAK di pojok KIRI-BAWAH gambar banner (desktop & mobile) */
.hb-cta { position:absolute; left:18px; bottom:16px; z-index:6; display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--navy); font-weight:800; font-size:12.5px; line-height:1; padding:10px 18px; border-radius:999px; text-decoration:none; white-space:nowrap; box-shadow:0 6px 18px rgba(3,26,90,.32), 0 0 0 2px rgba(255,255,255,.55); transition:transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color:transparent }
.hb-cta:hover { transform:translateY(-1px); box-shadow:0 9px 22px rgba(3,26,90,.42), 0 0 0 2px rgba(255,255,255,.7); color:var(--navy) }
.hb-cta:active { transform:translateY(0) }
.hb-cta .hb-cta-ar { font-size:15px; margin-top:-1px; color:var(--blue) }
.hero-slide:not(.on) .hb-cta { visibility:hidden }
.testigrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px }
.tcard { background:#fff; border:1px solid #E1ECF6; border-radius:18px; padding:16px 16px 14px; box-shadow:0 8px 20px rgba(10,37,64,.05); display:flex; flex-direction:column; gap:9px }
.tcard .tstar { color:#F5A623; font-size:13px; letter-spacing:2.5px }
.tcard p { font-size:13px; line-height:1.6; color:#33415C; margin:0; flex:1 }
.tcard .twho { display:flex; align-items:center; gap:10px; margin-top:6px; padding-top:10px; border-top:1px dashed #E1ECF6 }
.tcard .twho img, .tcard .tav { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none }
.tcard .tav { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; font-weight:800; font-size:15px }
.tcard .twho b { font-size:13px; color:var(--navy); display:block }
.tcard .twho span { font-size:11px; color:var(--mut) }
@media (max-width:560px) {
  /* Halaman jadwal boat (mobile): blok hero atas (tombol "Ubah Pencarian" + judul "Tiket Kapal Cepat" +
     "Jadwal Tersedia") dihilangkan, dan baris rute (mis. Padang Bai → Gili Trawangan) dinaikkan ke PALING ATAS. */
  .jdhero { display:none }
  .jdframe { display:flex; flex-direction:column; border-radius:20px; padding:14px 12px 24px; margin:12px 0 34px }
  .jdframe > .jd-head { order:-2 }
  .jdframe > .jd-strip { order:-1 }
  /* Strip tanggal kalender di HP (revisi 23 Sep 2026): melebar sampai tepi kartu + pil lebih
     besar supaya jelas bisa DIGESER kiri/kanan dan tanggal gampang dipilih dengan jempol. */
  .jd-strip { gap:5px; margin:0 -12px; padding:8px 12px 5px }
  .dpill { min-width:53px; padding:6px 8px 7px; border-radius:14px }
  .dpill b { font-size:16.5px }
  .dpill small { font-size:9px }
  /* Baris rute = SATU baris saja di dalam kartu (judul halaman), tombol kembali jadi ikon bulat,
     info tanggal + penumpang dipindah ke bawah kartu (.jd-meta-out) supaya kotaknya benar-benar 1 baris. */
  .jd-head .jd-sum { padding:7px 8px 7px 11px; gap:8px; border-radius:13px }
  .jd-head .jd-sum .jd-route { order:-1; margin:0; flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow:hidden }
  .jd-route { font-size:clamp(12.5px,3.7vw,15px); gap:6px; white-space:nowrap }
  .jd-route b { font-size:clamp(13px,4vw,15.5px); white-space:nowrap }
  .jd-head .jd-sum .btn-ghost { padding:0; width:30px; height:30px; min-width:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; margin:0 0 0 auto }
  .jd-sum .btn-ghost .bt-lbl { display:none }
  .jd-head .jd-sum .jd-meta.jd-meta-top { display:none }
  .jd-meta-out { display:block; margin:7px 2px 0; font-size:10.5px; padding:3px 9px; width:max-content; max-width:100% }
  /* Kartu jadwal dibuat RINGKAS ala kartu SEWA SEPEDA: foto kapal kecil (persegi) di kiri, info di
     kanan, harga menempel di SAMPING chip "Slot kapal" (bukan baris sendiri di bawah) -> kartu
     pendek & lebar (melebar ke kiri-kanan). Tombol "Pilih" disembunyikan: SELURUH kotak kartu
     bisa diklik (lihat schedRow() di app.js). Harga lama (.s-price) dipakai di desktop saja. */
  .sched { grid-template-columns:64px 1fr; gap:10px; padding:8px 10px; border-radius:14px; margin:0 -11px 10px; align-items:start }
  .sched .s-photo { width:64px; height:64px; grid-row:auto; border-radius:10px; align-self:start }
  .sched .s-when { font-size:10px; padding:2px 8px; margin-bottom:4px; gap:4px }
  .sched .s-when b { font-size:14px }
  .sched .opn { font-size:13.5px; margin-top:0 }
  .sched .opd { font-size:10.5px; margin-top:2px }
  .sched .s-slot { margin-top:0; font-size:9px; padding:1px 5px; white-space:nowrap; flex:0 0 auto }
  .sched .fas-ic { gap:4px; margin-top:5px }
  .sched .fas-ic span { width:22px; height:22px; font-size:11.5px; border-radius:7px }
  .sched .s-last { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px }
  .sched .s-last .s-pr { display:flex; align-items:baseline; gap:5px; white-space:nowrap }
  .sched .s-last .s-pr b { font-size:13.5px; color:var(--navy) }
  .sched .s-last .s-pr em { font-style:normal; font-size:8.5px; color:var(--mut) }
  .sched .s-price { display:none }
  .sched .btn-main.sm { display:none }
  /* banner mobile tampil UTUH sesuai upload → overlay judul/CTA disembunyikan agar tidak menutupi poster (aturan dasar .hb-cap ada di atas, jadi penimpaan wajib di blok ini) */
  .hb-cap { display:none }
  .hb-cap b { font-size:13.5px }
  /* tombol "Pesan Sekarang" TETAP tampil di mobile, versi ringkas, pojok kiri-bawah gambar */
  .hb-cta { left:10px; bottom:10px; font-size:10.5px; padding:7px 13px; gap:4px; box-shadow:0 4px 12px rgba(3,26,90,.3), 0 0 0 1.5px rgba(255,255,255,.55) }
  .hb-cta .hb-cta-ar { font-size:13px }
}

/* ===== KONFIRMASI VIA WA (pengganti pilih metode pembayaran) ===== */
.wa-pay{display:flex;gap:10px;align-items:flex-start;border:1.5px solid #BBEBD0;background:linear-gradient(180deg,#F4FEF8,#E8FAF0);border-radius:14px;padding:12px 12px 10px;margin:0 0 12px}
.wa-pay .wp-ic{flex:none;width:34px;height:34px;border-radius:10px;background:#25D366;display:grid;place-items:center;margin-top:1px;box-shadow:0 3px 8px rgba(37,211,102,.25)}
.wa-pay .wp-ic svg{width:18px;height:18px;fill:#fff}
.wa-pay .wp-tx{flex:1;min-width:0}
.wa-pay .wp-tx b{display:block;font-size:13px;color:#0B6E3B;font-weight:800;letter-spacing:.2px}
.wa-pay .wp-tx>span{display:block;font-size:11.8px;color:#2C6B47;line-height:1.55;margin-top:3px}
.wa-pay .wp-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;border:0;background:#25D366;color:#fff;font:inherit;font-weight:800;font-size:12.5px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:.15s;box-sizing:border-box;text-decoration:none}
.wa-pay .wp-btn:hover{filter:brightness(1.07)}
.wa-pay .wp-btn svg{width:15px;height:15px;fill:#fff;flex:none}
.wa-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;background:#25D366;color:#fff !important;font-weight:800;font-size:13px;padding:11px;border-radius:11px;text-decoration:none;transition:.15s;box-sizing:border-box}
.wa-cta:hover{filter:brightness(1.07);color:#fff !important}
.wa-cta svg{width:16px;height:16px;fill:#fff;flex:none}

/* ===== FASILITAS KAPAL (di bawah info kapal saat pesan tiket) ===== */
.bc-fas{margin:0 0 14px;padding:11px 0 0;border-top:1px dashed var(--line)}
.bc-fas h4{margin:0 0 9px;font-size:12.5px;color:var(--navy);letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.bc-fas .fas-ic{margin-top:0;gap:7px}
.bc-fas .fas-ic span{width:32px;height:32px;font-size:16px;border-radius:10px;box-shadow:0 1px 2px rgba(11,95,74,.07)}
/* foto kapal halaman pesan: banner ala #/boat/jadwal */
.bs-card > .bc-fas:first-child { border-top:0; padding-top:0 }

/* ============ WA FLOAT dihapus (permintaan owner) ============ */

/* ============================================================
   INAP — Hotel & Villa (alur ala edgetravelindo): pilih kamar + checkout
   ============================================================ */
.inap-wrap{max-width:1020px;margin:0 auto;padding:14px 16px 96px}
.inap-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 16px}
.inap-back{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;color:var(--mut);padding:8px 13px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.inap-back svg{width:15px;height:15px}
.inap-steps{display:flex;align-items:center;gap:7px;flex:1;min-width:0;flex-wrap:wrap}
.istep{display:flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:12px;font-weight:800;max-width:100%}
.istep i{width:22px;height:22px;border-radius:50%;background:#B9C6D4;color:#fff;display:grid;place-items:center;font-style:normal;font-size:11px;flex:0 0 auto}
.istep b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.istep-name{max-width:170px}
.istep .istep-check{display:grid;place-items:center}
.istep .istep-check svg{width:12px;height:12px;color:var(--ok)}
.istep.done{border-color:transparent;background:#F2FBF5;color:#0B7A46}
.istep.done i{background:var(--ok)}
.istep.on{background:linear-gradient(135deg,#0E7EE4,#00B4D8);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(14,126,228,.35)}
.istep.on i{background:rgba(255,255,255,.28)}
.istep-arr{display:grid;place-items:center;color:var(--mut)}
.istep-arr svg{width:13px;height:13px}
.inap-hero{border-radius:20px;overflow:hidden;box-shadow:var(--sh);background:linear-gradient(135deg,#E8F1FB,#D3EAF5);position:relative;aspect-ratio:16/9}
.inap-hero img{width:100%;height:100%;object-fit:cover}
.inap-hero-ph{width:100%;height:100%;display:grid;place-items:center;font-size:64px}
.inap-head{padding:18px 2px 2px}
.inap-title{font-size:26px;line-height:1.25;letter-spacing:-.3px}
.inap-sub{font-size:14.5px;font-weight:700;color:var(--navy);margin-top:6px}
.inap-sub2{font-size:13px;color:var(--mut);margin-top:4px}
.inap-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.inap-meta>span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--mut);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.inap-meta>span svg{width:13px;height:13px}
.inap-meta .inap-rate{color:#B47A00;background:#FFF7E0;border-color:#F3E3AE}
.inap-sec{margin-top:24px}
.inap-h2{font-size:19px;letter-spacing:-.2px;margin-bottom:10px}
.inap-h3{font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin-bottom:10px}
.inap-types{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.inap-types::-webkit-scrollbar{display:none}
.inap-chip{white-space:nowrap;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:800;font-size:12.5px;color:var(--txt)}
.inap-chip em{font-style:normal;color:var(--mut);font-weight:700}
.inap-chip.on{border-color:var(--blue);background:#EAF4FE;color:#0B5FA8}
.inap-chip.sold{opacity:.5;cursor:not-allowed}
.inap-none{font-size:13px;color:var(--mut)}
.inap-rooms{display:grid;gap:10px}
.inap-room{text-align:left;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:12px;display:flex;gap:12px;align-items:center;transition:border-color .15s,box-shadow .15s;width:100%}
.inap-room .ir-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.ir-ph{flex:0 0 98px;width:98px;height:90px;border-radius:12px;object-fit:cover;background:var(--soft)}
.ir-ph-ph{display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,#E8F1FB,#D3EAF5)}
.inap-room.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,126,228,.13)}
.inap-room.sold{opacity:.58;cursor:not-allowed}
.ir-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ir-top b{font-size:15.5px}
.ir-tag{border-radius:999px;font-size:10.5px;font-weight:800;padding:4px 11px;background:var(--soft);border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.ir-tag.ok{background:#EAF8F0;color:#0B7A46;border-color:#C9EDDA}
.ir-tag.bad{background:#FDECEC;color:var(--bad);border-color:#F5C6C6}
.ir-tag svg{width:11px;height:11px;vertical-align:-1.5px}
.ir-facts{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);font-weight:600;flex-wrap:wrap}
.ir-facts i{width:3px;height:3px;border-radius:50%;background:#B9C6D4}
.ir-price{display:flex;align-items:baseline;gap:5px}
.ir-price b{font-size:18px;color:var(--navy)}
.ir-price i{font-style:normal;font-size:12px;color:var(--mut)}
.inap-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh)}
.inap-hint{font-size:12.5px;color:var(--mut);margin-bottom:13px}
.inap-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inap-f label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}
.inap-f label i{color:var(--bad);font-style:normal}
.inap-f input,.inap-f select,.inap-malam{width:100%;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:11px 12px;font-size:14px;font-family:inherit;color:var(--txt);appearance:auto}
.inap-f select{font-weight:700}
.inap-f input:focus,.inap-f select:focus{outline:none;border-color:var(--blue)}
.inap-malam{font-weight:800;color:var(--navy);font-size:14px}
.inap-cta{width:100%;margin-top:16px;border-radius:14px;height:50px;background:linear-gradient(135deg,#0E7EE4,#00B4D8);color:#fff;font-weight:800;font-size:15px;box-shadow:0 8px 20px rgba(14,126,228,.35);transition:transform .12s,opacity .15s}
.inap-cta:active:not(:disabled){transform:scale(.985)}
.inap-cta.off,.inap-cta:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* ---- Properti kamar dari mitra: galeri + detail kamar ---- */
.ir-med{position:relative;flex:0 0 98px;width:98px}
.ir-med .ir-ph{display:block;width:98px;height:90px}
.ir-gal-n{position:absolute;left:6px;bottom:6px;background:rgba(8,26,48,.72);color:#fff;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px}
.ir-more{font-size:11.5px;font-weight:800;color:var(--blue);margin-top:2px}
.ird{display:flex;flex-direction:column;gap:14px;text-align:left}
.ird-gal{position:relative;border-radius:16px;overflow:hidden;background:var(--soft);aspect-ratio:16/10}
.ird-gal img{width:100%;height:100%;object-fit:cover;display:block}
.ird-gal-ph{display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,#E8F1FB,#D3EAF5)}
.ird-n{position:absolute;right:10px;bottom:10px;background:rgba(8,26,48,.7);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
/* Tanda ✕ di pojok foto dihapus (revisi Rino 26 Sep 2026) — aturan .ird-x dibuang. */
/* Galeri kamar: gambar kunci bisa DIGESER kiri/kanan & DIKLIK untuk perbesar. */
.ird-gal.ird-bisa{cursor:grab;touch-action:pan-y}
.ird-gal.ird-bisa:active{cursor:grabbing}
.ird-gal.ird-bisa img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.ird-anim{animation:irdFade .22s ease both}
@keyframes irdFade{from{opacity:.35}to{opacity:1}}
.ird-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
.ird-thumbs::-webkit-scrollbar{display:none}
.ird-thumbs button{flex:0 0 66px;width:66px;height:56px;padding:0;border:2px solid transparent;border-radius:11px;overflow:hidden;background:var(--soft);cursor:pointer;scroll-snap-align:center}
.ird-thumbs button.on{border-color:var(--blue)}
.ird-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.ird-nm{font-size:17px;font-weight:900;color:var(--navy);margin:0}
.ird-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ird-tag{font-size:11.5px;font-weight:800;color:#4A6280;background:var(--soft);border-radius:999px;padding:5px 11px;display:inline-flex;align-items:center;gap:5px}
.ird-tag svg{width:13px;height:13px}
.ird-tag.ok{background:#E6F7EE;color:#0B7A43}
.ird-tag.bad{background:#FDECEC;color:#B42318}
.ird-price{margin-top:10px;display:flex;align-items:baseline;gap:6px}
.ird-price b{font-size:19px;font-weight:900;color:var(--blue)}
.ird-price i{font-style:normal;font-size:12px;color:var(--mut);font-weight:700}
.ird-sec{border:1px solid var(--line);border-radius:15px;padding:13px 14px;background:#fff}
.ird-sec h4{margin:0 0 10px;font-size:13px;font-weight:900;color:var(--navy)}
.ird-spec,.ird-info{display:flex;flex-direction:column;gap:9px}
.ird-spec>div,.ird-info>div{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;font-size:12.5px}
.ird-spec>div span,.ird-info>div span{color:var(--mut);font-weight:700;flex:0 0 auto}
.ird-spec>div b,.ird-info>div b{color:var(--txt);font-weight:800;text-align:right}
.ird-fas{display:flex;flex-wrap:wrap;gap:8px}
.ird-fas span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#33506E;background:var(--soft);border-radius:10px;padding:7px 11px}
.ird-fas svg{width:13px;height:13px;color:#0B7A43}
.ird-note{font-size:11px;color:var(--mut);margin:0;text-align:center;line-height:1.5}
.ird .inap-cta{margin-top:2px}
.inap-fas{display:flex;flex-wrap:wrap;gap:8px}
.inap-fas span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--txt);background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 13px}
.inap-fas span b{color:var(--ok);display:inline-flex;align-items:center}
.inap-fas span b svg{width:14px;height:14px}
.inap-desc p{margin-bottom:9px;font-size:14px;color:#3A4B60}
/* ---------- Checkout hotel (langkah 3) ---------- */
.cko-wrap{max-width:1020px;margin:0 auto;padding:14px 16px 96px}
.cko-title{font-size:22px;margin:4px 2px 18px}
.cko-grid{display:grid;gap:16px;align-items:start}
.cko-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.cko-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh)}
.cko-card h2{font-size:15px;margin-bottom:13px;letter-spacing:-.1px}
.cko-field{margin-bottom:12px}
.cko-field:last-child{margin-bottom:0}
.cko-field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}
.cko-field input{width:100%;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:12px 13px;font-size:14px;font-family:inherit}
.cko-field input:focus{outline:none;border-color:var(--blue)}
.cko-field select{width:100%;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:12px 13px;font-size:14px;font-family:inherit;cursor:pointer}
.cko-field select:focus{outline:none;border-color:var(--blue)}
.cko-field select.need,.cko-field input.need{animation:ckoShake .45s ease 2;border-color:#fca5a5;outline:2px solid #fca5a5;outline-offset:2px}
@keyframes ckoShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cko-pay{display:flex;gap:11px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.cko-pay.on{border-color:#2BB673;background:#F2FBF5}
.cko-pay-ic{width:40px;height:40px;border-radius:11px;background:#25D366;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.cko-pay-ic svg{width:21px;height:21px}
.cko-pay b{font-size:13.5px;display:block}
.cko-pay small{font-size:11.5px;color:var(--mut);display:block;margin-top:2px;line-height:1.45}
.cko-pay-check{margin-left:auto;color:#12A150;display:grid;place-items:center}
.cko-pay-check svg{width:19px;height:19px}
.cko-right{min-width:0}
.cko-sum{position:sticky;top:78px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh)}
.cko-sum h2{font-size:15px;margin-bottom:12px}
.cko-prod{display:flex;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.cko-prod img{width:54px;height:54px;border-radius:12px;object-fit:cover;background:var(--soft);flex:0 0 auto}
.cko-prod b{display:block;font-size:14px;line-height:1.3}
.cko-prod span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.cko-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6.5px 0;color:var(--mut)}
.cko-row b{color:var(--txt);font-weight:700;text-align:right}
.cko-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0;border-top:1px dashed var(--line)}
.cko-line span{flex:1}
.cko-line b{font-weight:800;text-align:right}
.cko-total{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0 2px;border-top:1px solid var(--line);margin-top:8px}
.cko-total span{font-size:13px;font-weight:800}
.cko-total b{font-size:22px;color:var(--navy)}
.cko-agree{display:flex;gap:8px;font-size:11.5px;color:var(--mut);margin:11px 0 2px;align-items:flex-start;line-height:1.45;cursor:pointer}
.cko-agree input{accent-color:var(--blue);margin-top:1px}
.cko-note{font-size:11px;color:var(--mut);margin-top:9px;text-align:center;line-height:1.5}
.et-img{width:22px;height:22px;object-fit:cover;border-radius:6px;display:inline-block;vertical-align:-5px}
@media(min-width:980px){
  .cko-grid{grid-template-columns:minmax(0,1fr) 384px}
  .inap-hero{aspect-ratio:21/9}
}
@media(max-width:520px){
  .inap-title{font-size:22px}
  .inap-grid{grid-template-columns:1fr 1fr;gap:10px}
  .istep-name{max-width:110px}
  .inap-rooms{grid-template-columns:1fr}
}
@media(min-width:760px){
  .inap-rooms{grid-template-columns:1fr 1fr}
  .inap-wrap,.cko-wrap{padding-left:24px;padding-right:24px}
}

/* ===== Payment Gateway (Tripay) — jarak & panel pembayaran ===== */
/* jarak banner & menu layanan di bawahnya (revisi video: dipadatkan, jangan terlalu berjarak) */
.hero{padding-bottom:12px}
.hero .wrap{padding-bottom:0}
.et-top .st.Lunas{background:rgba(18,161,80,.28);color:#B7F5D0}
.et-top .st.Kedaluwarsa{background:rgba(120,130,150,.28);color:#D9DEE8}
.et-top .st.Menunggu{background:rgba(255,193,7,.2);color:#FFE082}
.pay-sel{background:#F3FAFF;border:1.5px solid #D6ECFA;border-radius:14px;padding:12px;margin:0 0 12px}
.pay-sel .pay-sel-t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--navy);margin-bottom:10px}
.pay-sel .pay-sel-t svg{width:17px;height:17px;color:var(--blue)}
.payopt{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:0;max-height:none!important;overflow:visible!important;padding-right:0}
.payopt .po-nm-s{display:none}
.payopt label{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:13px;padding:6px 13px;margin:0;cursor:pointer;font-size:13px;font-weight:700;color:var(--txt);background:#fff;transition:border-color .15s,background .15s;width:100%}
.payopt label.on{border-color:var(--cyan);background:rgba(0,180,216,.07)}
.payopt .po-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:15px;background:var(--soft);flex:0 0 auto;overflow:hidden}
.payopt .po-ic img{width:100%;height:100%;object-fit:contain;background:#fff}
.payopt .po-nm,.payopt .po-nm-s{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.payopt input{width:auto;flex:0 0 auto;accent-color:var(--blue)}
.payopt small{flex:0 0 auto;display:inline-block;font-weight:800;color:var(--mut);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;background:var(--soft);border-radius:999px;padding:4px 9px;margin:0;white-space:nowrap}
@media(max-width:759px){.payopt small{display:none}}
/* layar sempit (HP): pakai nama ringkas + kotak lebih rapat supaya tetap 2 kolom KIRI-KANAN tanpa scroll */
@media(max-width:600px){
  .payopt .po-nm{display:none}
  .payopt .po-nm-s{display:block}
  .payopt{gap:5px}
  .payopt label{padding:5px 10px;gap:9px;font-size:12.5px}
  .payopt .po-ic{width:26px;height:26px;border-radius:8px;font-size:14px}
}
/* --- alur baru: metode bayar muncul setelah klik "Buat Pesanan" --- */
.pay-note{background:#F3FAFF;border:1.5px dashed #D6ECFA;border-radius:14px;padding:11px 13px;margin:0 0 12px;font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.45}
.ps-sum{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:9px 12px;margin-bottom:10px}
.ps-prod{font-weight:800;font-size:13.5px;color:var(--navy);padding-bottom:6px;margin-bottom:6px;border-bottom:1px dashed var(--line)}
.ps-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--mut);font-weight:600;padding:2px 0}
.ps-row b{color:var(--navy);font-weight:700;text-align:right}
.ps-row.tot{margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--navy);font-weight:800;align-items:center}
.ps-row.tot b{font-size:16px;color:var(--blue)}
.pb-mini{font-size:11.5px;color:var(--mut);text-align:center;margin-top:10px;line-height:1.5}
/* --- gerbang pembayaran di halaman e-ticket --- */
.et-head .ok-ic.wait{background:rgba(232,89,12,.12);color:var(--warn);font-size:26px}
.et-steps{display:flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 10px;box-shadow:var(--sh);margin-bottom:14px}
.estep{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative}
.estep i{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--mut);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12.5px}
.estep i svg{width:15px;height:15px}
.estep span{font-size:10.5px;font-weight:700;color:var(--mut);line-height:1.3}
.estep.done i{background:rgba(18,161,80,.14);color:var(--ok)}
.estep.on i{background:var(--grad);color:#fff}
.estep.on span{color:var(--navy)}
.et-card.pay-wait{border:1.5px solid #FFE0C7}
.et-card.pay-wait .et-top{border-bottom:1px solid #FFEAD9}
.pay-err{background:#FFF4E5;border:1.5px solid #FFD9A8;color:#A15C00;font-size:12px;border-radius:12px;padding:10px 12px;margin:0 0 12px;line-height:1.5}
/* panel instruksi pembayaran di e-ticket */
.paybox{margin:14px 0 4px;border:1.5px solid #F0C36D;background:linear-gradient(180deg,#FFFBF0,#FFF7E0);border-radius:16px;padding:14px;text-align:center}
.paybox.pay-ok{border-color:#A8E6BE;background:linear-gradient(180deg,#F3FEF7,#E6FAEE)}
.paybox.pay-bad{border-color:#E8A0A0;background:linear-gradient(180deg,#FFF5F5,#FDE8E8)}
.paybox .pb-h{display:flex;align-items:center;gap:10px;text-align:left;justify-content:center;margin-bottom:10px}
.paybox .pb-ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#FFB300,#FF8F00);color:#fff;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 6px 14px rgba(255,152,0,.3)}
.paybox .pb-ic svg{width:21px;height:21px}
.paybox.pay-ok .pb-ic{background:linear-gradient(135deg,#12B76A,#079455)}
.paybox.pay-bad .pb-ic{background:linear-gradient(135deg,#F04438,#D92D20)}
.paybox b.pb-t{font-size:14px;display:block;color:var(--navy)}
.paybox span.pb-s{font-size:11.5px;color:var(--mut);display:block;margin-top:2px;line-height:1.45}
.paybox .pb-amt{font-size:21px;font-weight:800;color:var(--navy);margin:4px 0 2px}
.paybox .pb-mtd{font-size:12px;font-weight:700;color:var(--blue)}
.paybox .pb-qr{width:186px;height:186px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;margin:10px auto 6px}
.paybox .pb-qr img{width:100%;height:100%;object-fit:contain}
.paybox .pb-code{margin:8px auto 4px;max-width:340px;background:#fff;border:1.5px dashed #F0C36D;border-radius:12px;padding:9px 12px;display:flex;align-items:center;gap:10px}
.paybox .pb-code span{flex:1;font-size:18px;font-weight:800;letter-spacing:2px;color:var(--navy);word-break:break-all;text-align:center}
.paybox .pb-copy{flex:0 0 auto;border:0;background:var(--grad);color:#fff;font-weight:700;font-size:12px;border-radius:9px;padding:8px 13px;cursor:pointer}
.paybox .pb-copy:active{transform:scale(.96)}
.paybox .pb-cd{font-size:12px;font-weight:800;color:#B26A00;margin-top:6px}
.paybox.pay-bad .pb-cd{color:#C0392B}
.paybox .pb-acts{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.paybox .btn-main,.paybox .btn-ghost{width:auto;margin:0}
.paybox .pb-mini{font-size:11px;color:var(--mut);margin-top:9px;line-height:1.5}
.paybox .pb-mini a{color:var(--blue);font-weight:700}
.pay-retry{margin:14px 0 4px;text-align:center}
.pay-retry b{font-size:14px;color:var(--navy);display:block}
.pay-retry p{font-size:12px;color:var(--mut);margin:6px 0 12px;line-height:1.5}
/* ---------- Galeri destinasi (Rute Populer) ---------- */
.destgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
.destcell{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line);background:var(--soft)}
.destcard{display:block;position:absolute;inset:0;color:#fff}
.destcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.destcell:hover img{transform:scale(1.07)}
.destcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,16,32,0) 32%,rgba(5,16,32,.8) 100%)}
.desttx{position:absolute;left:0;right:0;bottom:0;padding:11px 13px;z-index:1}
.desttx b{display:block;font-size:16.5px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.desttx span{display:block;font-size:10.5px;line-height:1.3;color:#EAF1FA;opacity:.95;margin:2px 0 6px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.desttx em{font-style:normal;display:inline-block;font-weight:800;font-size:11px;color:#FFE27A;background:rgba(6,19,38,.62);padding:2px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.destcred{position:absolute;top:7px;right:9px;z-index:2;font-size:8.5px;color:#fff;text-decoration:none;background:rgba(5,16,32,.45);padding:1px 7px;border-radius:99px;opacity:0;transition:opacity .25s}
.destcell:hover .destcred{opacity:1}
@media (max-width:900px){.destgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.destgrid{gap:9px}.desttx{padding:9px 11px}.desttx b{font-size:15px}.desttx em{font-size:10px}}
/* ---------- Rute Populer: kartu berfoto (senada Destinasi Favorit) ---------- */
.rutegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
.rutecell{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line);background:var(--soft)}
.rutecard{display:block;position:absolute;inset:0;color:#fff}
.rutecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.rutecell:hover img{transform:scale(1.07)}
.rutecard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,16,32,0) 24%,rgba(5,16,32,.86) 100%)}
.rutebadge{position:absolute;top:8px;left:9px;z-index:1;font-size:9.5px;font-weight:700;color:#fff;background:rgba(5,16,32,.5);border:1px solid rgba(255,255,255,.22);padding:2px 8px;border-radius:99px;backdrop-filter:blur(3px)}
.rutetx{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;z-index:1}
.rutetx b{display:block;font-size:14px;line-height:1.24;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rutetx b .rte-arrow{font-style:normal;color:#FFE27A}
.rutetx .rtemeta{display:block;font-size:10px;line-height:1.3;color:#E7EFF9;opacity:.95;margin:3px 0 7px;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.rutetx .rteprice{font-style:normal;display:inline-block;font-weight:800;font-size:10.5px;color:#FFE27A;background:rgba(6,19,38,.62);padding:2px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.rutecell:hover .destcred{opacity:1}
@media (max-width:900px){.rutegrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.rutegrid{gap:9px}.rutetx{padding:9px 10px}.rutetx b{font-size:12.5px}.rutetx .rtemeta{font-size:9.5px;margin:2px 0 6px}.rutetx .rteprice{font-size:9.5px}.rutebadge{font-size:9px;top:7px;left:7px}}

/* ---------- Sheet pilih bahasa (multi-bahasa) ---------- */
.langlist{display:block}
.langrow{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer;padding:11px 0;display:flex;gap:12px;align-items:center}
.langrow:hover{background:rgba(17,169,180,.06)}
.langrow.on b{color:var(--blue)}
.langrow div{flex:1;min-width:0}
.lflag{flex:none;width:32px;text-align:center;font-size:22px;line-height:1}
.langrow .lchk{margin-left:auto;flex:none;color:var(--blue);font-weight:800;font-size:16px}

/* ---------- Tombol WhatsApp CS mengambang (kanan bawah) ---------- */
.wafloat{position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:75;
  width:50px;height:50px;border-radius:50%;background:#25D366;color:#fff;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,.45),0 2px 6px rgba(10,37,64,.18);
  border:2px solid #fff;transition:transform .18s ease,box-shadow .18s ease}
.wafloat.on{display:flex}
.wafloat:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 28px rgba(37,211,102,.55),0 2px 6px rgba(10,37,64,.2)}
.wafloat:active{transform:scale(.93)}
.wafloat svg{width:29px;height:29px;display:block}
.wafloat::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(37,211,102,.5);animation:wapulse 2.4s ease-out infinite;pointer-events:none}
@keyframes wapulse{0%{transform:scale(.9);opacity:.8}70%{transform:scale(1.28);opacity:0}100%{transform:scale(1.28);opacity:0}}
.wafloat .wafloat-tip{position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);
  background:var(--navy);color:#fff;font-style:normal;font-size:11.5px;font-weight:700;
  padding:5px 11px;border-radius:99px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s}
.wafloat:hover .wafloat-tip{opacity:1}
@media (min-width:900px){
  .wafloat{right:22px;bottom:calc(92px + env(safe-area-inset-bottom));width:56px;height:56px}
  .wafloat svg{width:33px;height:33px}
}
@media (max-width:360px){.wafloat{width:46px;height:46px;right:11px}.wafloat svg{width:26px;height:26px}}
@media (prefers-reduced-motion:reduce){.wafloat::before{animation:none}}

/* ============================================================
   Detail Penumpang (permintaan video): pilih jumlah di halaman
   pencarian (1 kolom sejajar, sheet ala tiket.com) + isi nama
   penumpang di halaman "Isi Data Pemesanan" & e-ticket
   ============================================================ */
.paxsel{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:13px;padding:11px 13px;cursor:pointer;text-align:left;font-family:inherit;min-height:52px}
.paxsel:active{border-color:var(--blue)}
.paxsel-ic{font-size:17px;line-height:1}
.paxsel-main{display:flex;flex-direction:column;min-width:0;flex:1}
.paxsel-main b{font-size:14.5px;color:var(--navy);font-weight:800}
.paxsel-main i{font-style:normal;font-size:11px;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paxsel-chev{color:var(--mut);font-size:13px}

.paxsheet .ps-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.paxsheet .ps-head b{font-size:16px;color:var(--navy)}
.paxsheet .ps-sub{font-size:11px;color:var(--mut)}
.paxsheet .ps-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
/* Sheet "Atur Penumpang" — label baris (Dewasa/Anak/Bayi) WAJIB rata KIRI semua.
   Penting: kelas .ps-row dipakai juga oleh ringkasan pembayaran (.ps-sum) yang punya
   aturan global `.ps-row b{text-align:right}` — aturan itu ikut kena ke sheet ini
   sehingga tulisan Dewasa/Anak/Bayi jadi rata kanan/tidak sejajar. Di-override di sini. */
.paxsheet .ps-lab{display:flex;flex-direction:column;min-width:0;align-items:flex-start;text-align:left}
.paxsheet .ps-lab b{font-size:14px;color:var(--navy);font-weight:700;text-align:left}
.paxsheet .ps-lab span{font-size:11px;color:var(--mut);margin-top:2px;text-align:left}
.paxsheet .ps-row .qty b{text-align:center}
.paxsheet .ps-tot{display:flex;align-items:center;justify-content:space-between;padding:12px 0 4px;font-size:12.5px;color:var(--mut)}
.paxsheet .ps-tot b{font-size:14px;color:var(--navy)}
.paxsheet .ps-lab2{display:block;font-size:11.5px;font-weight:700;color:var(--mut);margin:12px 0 6px;text-transform:uppercase;letter-spacing:.4px}
.paxsheet select,.paxsheet input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-size:14.5px;font-family:inherit;color:var(--txt);background:#fff}
.paxsheet select:focus,.paxsheet input:focus{outline:none;border-color:var(--blue)}
.paxsheet .btn-main{margin-top:14px}

.paxcard .pc-head{margin-bottom:10px}
.paxcard .pc-head h4{font-size:13.5px;color:var(--navy);font-weight:800}
.paxcard .pc-head span{display:block;font-size:11px;color:var(--mut);margin-top:3px;line-height:1.5}
.paxlist{display:flex;flex-direction:column;gap:8px}
.paxrow{display:flex;align-items:center;gap:10px;width:100%;background:var(--soft);border:1.5px solid var(--line);
  border-radius:13px;padding:10px 11px;cursor:pointer;text-align:left;font-family:inherit}
.paxrow.on{background:#fff;border-color:var(--cyan)}
.paxrow .pr-ic{font-size:17px;line-height:1;flex:0 0 auto}
.paxrow .pr-tx{display:flex;flex-direction:column;min-width:0;flex:0 0 auto}
.paxrow .pr-tx b{font-size:13px;color:var(--navy);font-weight:800}
.paxrow .pr-tx i{font-style:normal;font-size:10.5px;color:var(--mut);margin-top:1px}
/* .pr-nm bisa dapat class "empty" (belum diisi nama). Class global .empty punya padding 46px 20px
   yang membuat tiap baris penumpang menggelembung ~105px — di sini padding-nya di-nol-kan. */
.paxrow .pr-nm{flex:1;min-width:0;text-align:right;font-size:12.5px;font-weight:700;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;line-height:1.35}
.paxrow .pr-nm.empty{font-weight:600;color:var(--blue)}
.paxrow .pr-ed{font-size:13px;opacity:.6;flex:0 0 auto}
.pf-head{font-size:13px;color:var(--navy);font-weight:800;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}

.et-pax{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.et-pax .ep-h{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.et-pax .ep-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.et-pax .ep-r:last-child{border-bottom:none}
.et-pax .ep-r span{color:var(--mut);font-size:12px}
.et-pax .ep-r span i{font-style:normal;opacity:.8}
.et-pax .ep-r b{color:var(--navy)}
@media (max-width:400px){.paxrow .pr-nm{font-size:11.5px}}
/* ================= MOBILE: kolom penumpang (Dewasa/Anak/Bayi) SEBARIS + kartu Detail Penumpang dikecilkan =================
   Revisi Rino 15 Sep 2026 — berlaku untuk halaman #/boat/pesan di HP:
   1) DEWASA · ANAK · BAYI tampil BERJEJER 3 kolom dalam satu baris (bukan 2 baris).
   2) Kotak kartu "DETAIL PENUMPANG" (.paxcard) dibuat lebih ringkas/kecil. */
@media (max-width:600px){
  /* --- 1. tiga stepper penumpang sebaris --- */
  .bc-pax .paxline{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 7px;align-items:start;justify-items:center}
  .bc-pax .paxitem{align-items:center;text-align:center;gap:4px;width:100%}
  .bc-pax .paxlab{align-items:center;font-size:10.5px;line-height:1.15;letter-spacing:.1px;white-space:nowrap}
  .bc-pax .paxlab em{font-size:9.5px;margin-top:1px}
  .bc-pax .qty{width:100%;justify-content:space-between;border-radius:10px}
  .bc-pax .qty button{width:25px;height:29px;font-size:15px;padding:0}
  .bc-pax .qty b{flex:1 1 auto;width:auto;min-width:0;font-size:13px;padding:0}
  /* --- 2. kartu Detail Penumpang lebih kecil (revisi 2 — 15 Sep 2026: lebih ringkas lagi) ---
     Catatan: penyebab baris penumpang tinggi sebelumnya adalah bentrok class .empty (padding 46px),
     sudah ditambal di aturan .paxrow .pr-nm (padding:0). */
  .paxcard{padding:9px 10px 10px;border-radius:14px}
  .paxcard .pc-head{margin-bottom:5px}
  .paxcard .pc-head h4{font-size:12px}
  .paxcard .pc-head span{font-size:9.5px;line-height:1.3;margin-top:1px}
  .paxlist{gap:4px}
  .paxrow{gap:6px;padding:5px 8px;border-radius:9px}
  .paxrow .pr-ic{font-size:13px}
  .paxrow .pr-tx b{font-size:11px}
  .paxrow .pr-tx i{font-size:9px;margin-top:0}
  .paxrow .pr-nm{font-size:10.5px}
  .paxrow .pr-ed{font-size:11px}
}
@media (max-width:360px){
  .bc-pax .qty button{width:22px;font-size:13px}
  .bc-pax .qty b{font-size:12px}
  .bc-pax .paxlab{font-size:10px}
  .bc-pax .paxlab em{font-size:9px}
}
/* ---------- Slot Kapal Tersedia (master rute) ---------- */
.slot-note{font-size:11.5px;color:var(--mut);background:#f1f7ff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;margin-bottom:8px;line-height:1.45}
.slot-sum{font-size:12px;color:var(--mut);margin:0 0 8px 2px}
.slot-sum b{color:var(--navy);font-size:13px}
.slot-list{display:flex;flex-direction:column;gap:8px}
.slotcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.slotcard.open{border-color:#bfe0c8;box-shadow:0 4px 14px rgba(0,40,80,.06)}
.slot-hd{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;padding:10px 12px 8px;text-align:left;cursor:pointer;font-family:inherit}
.slot-hd-l{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.slot-hd-l b{font-size:12.5px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-hd-l em{font-style:normal;font-size:11px;color:var(--mut)}
.slot-hd-r{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.slot-hd-r b{font-size:13px;color:#0b8a4b}
.slot-hd-r em{font-style:normal;font-size:10px;color:var(--mut)}
.slot-chev{color:var(--mut);font-size:12px;transition:transform .2s}
.slotcard.open .slot-chev{transform:rotate(180deg)}
.slot-bar{height:5px;background:#eef2f6;margin:0 12px 10px;border-radius:99px;overflow:hidden}
.slot-bar i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:99px}
.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 12px 12px}
.slotchip{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:#fafbfc;text-decoration:none;min-width:0}
.slotchip b{font-size:11px;color:var(--mut);font-weight:700}
.slotchip span{font-size:11.5px;color:var(--navy)}
.slotchip em{font-style:normal;font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slotchip i{font-style:normal;font-size:11px;font-weight:700;color:var(--navy);margin-top:1px}
.slotchip.on{background:#f2fdf5;border-color:#bfe8cd}
.slotchip.on b,.slotchip.on i{color:#0b8a4b}
.s-slot{display:inline-block;margin-top:4px;font-size:10.5px;color:#0b8a4b;background:#f2fdf5;border:1px solid #bfe8cd;border-radius:99px;padding:1px 7px}
/* Baris terakhir kartu jadwal: chip "Slot kapal" + harga versi MOBILE (di sampingnya).
   Desktop: baris ini persis seperti sebelum ada harga (harga desktop tetap di .s-price). */
.s-last{display:block}
.s-last .s-pr{display:none}
@media (min-width:720px){.slot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* ---------- Ikon kategori berbasis gambar (svg/png), mis. img/kat/*.svg ---------- */
.kico{width:1.15em;height:1.15em;object-fit:contain;vertical-align:-.2em;border-radius:24%;flex:none}
.ki .kico{width:100%;height:100%;object-fit:cover;vertical-align:initial;border-radius:inherit}
/* ikon kategori bergambar (mis. Air Terjun Tour): ditampilkan di dalam kotak abu-abu seperti ikon
   emoji lainnya (tidak menutup penuh) supaya tidak mencolok bila dilihat dari jauh — revisi video */
.katcard .ki .kico{width:76%;height:76%;object-fit:contain;border-radius:11px}
.ph-emoji>.kico{position:static;inset:auto;width:min(58%,140px);height:min(58%,140px);object-fit:contain;border-radius:18%;opacity:1}
.ph-fb{width:100%;height:100%;display:grid;place-items:center;font-size:38px;background:linear-gradient(135deg,#E8F1FB,#D3EAF5)}
.ph-fb .kico.ki-lg{width:64px;height:64px;border-radius:18px;vertical-align:initial}
.pd-t-ic .kico{width:1.35em;height:1.35em;vertical-align:-.28em;border-radius:26%}
.chip .kico,.pd-chip .kico{width:1.15em;height:1.15em;vertical-align:-.22em;border-radius:26%}
.pd-big .pd-glas .em .kico{position:static;inset:auto;width:1.15em;height:1.15em;object-fit:contain;vertical-align:-.22em;border-radius:26%}
.inap-hero-ph .kico{width:64px;height:64px;border-radius:18px}

/* ================= HALAMAN PAKET SNORKELING ================= */
.pk-wrap{padding-top:18px;padding-bottom:10px}

/* 22 Sep 2026 — ruang bawah supaya isi halaman tidak tertutup menu bawah (bnav fixed) */
#app{padding-bottom:92px}
@media(min-width:900px){#app{padding-bottom:36px}}
.pk-head{position:relative;background:#fff;border:1px solid #E9F1F5;border-radius:22px;box-shadow:0 10px 28px rgba(10,37,64,.08);padding:22px;display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:center;overflow:hidden}
.pk-head-l .pk-logo{display:flex;align-items:center;gap:11px}
.pk-logo .bic{width:54px;height:54px;border-radius:15px;background:#fff;box-shadow:0 3px 12px rgba(10,37,64,.12);display:block;overflow:hidden;flex:0 0 auto}
.pk-logo .bic img{width:100%;height:100%;object-fit:contain;display:block}
.pk-logo .btx b{font-size:27px;font-weight:800;color:#0A2540;letter-spacing:-.5px}
.pk-logo .btx b em{font-style:normal;color:#12A0B4}
.pk-logo .btx small{display:block;font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:#5A7590;margin-top:2px}
.pk-script{position:absolute;top:26px;right:352px;width:170px;text-align:center;font-family:'Segoe Script','Brush Script MT','Bradley Hand',cursive;font-size:21px;line-height:1.08;color:#0A2540;transform:rotate(-9deg);opacity:.92;pointer-events:none}
.pk-head-l h1{font-size:35px;line-height:1.1;font-weight:800;color:#0A2540;letter-spacing:-.6px;margin:16px 0 8px}
.pk-head-l p{font-size:15px;line-height:1.55;color:#5A7590;max-width:520px;margin:0}
.pk-head-r{position:relative;height:190px;border-radius:16px;overflow:hidden;background:#E8F3F7}
.pk-head-r img{width:100%;height:100%;object-fit:cover;display:block}
.pk-loc{position:absolute;right:11px;bottom:11px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.93);border-radius:13px;padding:8px 12px;box-shadow:0 5px 16px rgba(10,37,64,.18)}
.pk-loc svg{width:19px;height:19px;color:#12A0B4;flex:0 0 auto}
.pk-loc b{display:block;font-size:14px;color:#0A2540;line-height:1.2}
.pk-loc small{display:block;font-size:11px;color:#5A7590}
.pk-list{display:flex;flex-direction:column;gap:18px;margin-top:20px}
/* kelompok paket per induk pada halaman kategori (mode "paket langsung") */
.katpk-sec{display:flex;align-items:center;gap:10px;margin:22px 0 0}
.katpk-sec:first-child{margin-top:0}
.katpk-sec h2{margin:0;font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:-.2px}
.katpk-sec i{flex:1;height:1px;background:var(--line)}
.katpk-sec span{font-size:10.5px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.katpk-sec+.pk-list{margin-top:12px}
.pk-card{background:#fff;border:1px solid #EAF2F6;border-radius:20px;box-shadow:0 9px 26px rgba(10,37,64,.09);overflow:hidden;display:grid;grid-template-columns:330px 1fr}
.pk-ph{position:relative;min-height:248px;background:#E8F3F7}
.pk-ph img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
/* Kartu paket yang bisa DIPILIH (halaman dalam produk induk, alur ala daftar
   tipe kamar hotel): klik kartu = memilih paket, tanda "Dipilih" muncul di
   baris tag. Revisi 14 Sep 2026. */
.pk-pick{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pk-pick:hover{box-shadow:0 12px 30px rgba(10,37,64,.14)}
.pk-pick.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,126,228,.13),0 9px 26px rgba(10,37,64,.09)}
.pk-pick.sold{opacity:.62;cursor:not-allowed}
.pk-pick:focus-visible{outline:3px solid rgba(14,126,228,.35);outline-offset:2px}
.pk-seller{position:absolute;left:14px;bottom:16px;display:inline-flex;align-items:center;gap:5px;font-family:'Segoe Script','Brush Script MT','Bradley Hand',cursive;font-size:23px;color:#fff;transform:rotate(-7deg);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.pk-seller svg{width:20px;height:20px;color:#FFD34D;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.pk-bd{padding:18px 20px 16px}
.pk-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:30px}
.pk-pill{font-size:11px;font-weight:800;letter-spacing:.7px;padding:6px 12px;border-radius:999px;background:#DCF4F8;color:#0E7C95}
.pk-p .pk-pill{background:#D8F3EC;color:#0B7A6B}
.pk-x .pk-pill{background:#FDECD2;color:#96600F}
.pk-meta{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#3C5A75}
.pk-meta svg{width:16px;height:16px;color:#12A0B4}
.pk-meta b{font-weight:700}
.pk-bd h3{font-size:21px;font-weight:800;color:#0A2540;letter-spacing:-.3px;margin:12px 0 6px}
.pk-desc{font-size:14px;line-height:1.55;color:#5A7590;margin:0 0 14px;max-width:560px}
.pk-fas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px 0;border-top:1px dashed #E3EDF3;border-bottom:1px dashed #E3EDF3}
.pk-fi{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pk-fi svg{width:24px;height:24px;color:#12A0B4}
.pk-fi span{font-size:10.5px;line-height:1.25;font-weight:600;color:#3C5A75}
.pk-ls{display:none}
.pk-bt-s{display:none}
.pk-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.pk-price small{display:block;font-size:11.5px;color:#5A7590;margin-bottom:1px}
.pk-price b{font-size:25px;font-weight:800;color:#0A2540;letter-spacing:-.5px}
.pk-price span{font-size:13px;color:#5A7590}
.pk-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,#14A8BC,#0B7385);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 9px 20px rgba(18,160,180,.30);transition:filter .15s}
.pk-btn:hover{filter:brightness(1.07);color:#fff}
.pk-btn svg{width:16px;height:16px}
.pk-feats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:22px 0;padding:16px 10px;background:#fff;border:1px solid #EAF2F6;border-radius:18px;box-shadow:0 6px 18px rgba(10,37,64,.05)}
.pk-feat{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;font-weight:700;color:#0A2540}
.pk-feat svg{width:30px;height:30px;color:#12A0B4}

/* Kartu SEWA SEPEDA di halaman jelajahi (kategori 3): foto produk jadi link
   ke halaman detail (di sana durasi + harganya dipilih), jadi fotonya dibuat
   elemen <a> yang tetap memenuhi kotaknya. */
.pk-pha{display:block;text-decoration:none;color:inherit}
.pk-pha img{transition:transform .35s ease}
.pk-pha:hover img{transform:scale(1.04)}
.pk-tap{position:absolute;right:14px;bottom:16px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 28px);padding:8px 13px;border-radius:999px;background:rgba(10,37,64,.72);backdrop-filter:blur(4px);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.pk-tap svg{width:14px;height:14px;flex:0 0 auto}
.pk-tap i{font-style:normal}
.pk-tap-s{display:none}
.pk-price b.pk-durlbl{font-size:15px;font-weight:700;color:#0E7C95;letter-spacing:0;white-space:normal}
/* Di layar sempit label harga ini lebih panjang dari angka harga biasa, jadi
   dibuat boleh turun baris supaya tombolnya tetap utuh di dalam kartu. */
@media (max-width:900px){
  .pk-price b.pk-durlbl{display:block;font-size:11.5px;line-height:1.3;white-space:normal}
}
@media (max-width:620px){
  .pk-price b.pk-durlbl{font-size:10.5px;line-height:1.25}
  .pk-tap{right:8px;bottom:10px;max-width:calc(100% - 16px);padding:6px 10px;font-size:10px}
  .pk-tap-l{display:none}
  .pk-tap-s{display:inline}
}
@media (max-width:380px){
  .pk-price b.pk-durlbl{font-size:9.6px}
}

/* Detail layanan tambahan di halaman paket (mis. "Sewa Sepeda Listrik Biasa"):
   deskripsi, tabel harga sewa, lokasi, itinerary, fasilitas, ketentuan, ulasan. */
.pk-extra{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.pk-desc p{margin:0 0 10px;font-size:13.5px;line-height:1.75;color:#3C5A70}
.pk-desc p:last-child{margin-bottom:0}
.pk-price{display:flex;flex-direction:column;gap:8px}
.pk-prow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:#F6FBFC;border:1px solid #EAF2F6;border-radius:12px;font-size:13.5px;font-weight:600;color:#0A2540}
.pk-prow b{color:#12A0B4;font-size:15.5px;font-weight:800}
.pk-ban{margin:4px 0 26px}
.pk-script2{font-family:'Segoe Script','Brush Script MT','Bradley Hand',cursive;font-size:22px;text-align:center;color:#0A2540;margin-bottom:12px}
/* HEADER RINGKAS halaman paket (revisi video: blok cover+logo besar dihapus, langsung ke daftar paket) */
.pk-head2{padding:0 0 2px}
.pk-crumb{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#5A7590;margin:0 0 6px}
.pk-crumb a{text-decoration:none;color:#0A2540}
.pk-crumb i{font-style:normal;color:#9DB4C6}
.pk-head2 h1{font-size:35px;line-height:1.1;font-weight:800;color:#0A2540;letter-spacing:-.6px;margin:0 0 6px}
.pk-head2 p{font-size:15px;line-height:1.55;color:#5A7590;max-width:620px;margin:0}
/* keterangan JUMLAH PAKET di samping judul (gaya disamakan dgn halaman kategori, mis. #/jelajahi?kat=11) */
.pk-head2 .pk-sec2{margin:0 0 7px}
.pk-head2 .pk-sec2 h1{margin:0;min-width:0;flex:0 1 auto}
.pk-head2 .pk-sec2 i{min-width:12px}
.pk-head2 .pk-sec2 span{flex:0 0 auto}
.pk-ban img{width:100%;height:180px;object-fit:cover;border-radius:20px;display:block}
@media (max-width:900px){
  /* HEADER: teks di KIRI, foto di KANAN (persis seperti desain contoh) */
  .pk-head{grid-template-columns:1fr clamp(130px,40%,320px);gap:12px;padding:14px 13px;border-radius:18px;align-items:stretch}
  /* foto header BESAR & SEJAJAR: memenuhi tinggi blok teks di kirinya */
  .pk-head-r{order:0;height:auto;min-height:150px;aspect-ratio:auto;align-self:stretch}
  .pk-script{display:none}
  .pk-head2 h1{font-size:22px;margin:0 0 5px;letter-spacing:-.4px}
  .pk-head2 p{font-size:12.2px;line-height:1.5}
  .pk-head2{padding:0}
  .pk-crumb{font-size:10.5px;margin-bottom:5px}
  .pk-logo{gap:8px}
  .pk-logo .bic{width:38px;height:38px;border-radius:11px}
  .pk-logo .btx b{font-size:20px}
  .pk-logo .btx small{font-size:7.5px;letter-spacing:1px;margin-top:1px}
  .pk-head-l h1{font-size:22px;margin:10px 0 5px;letter-spacing:-.4px}
  .pk-head-l p{font-size:12.2px;line-height:1.5}
  .pk-loc{right:6px;bottom:6px;gap:4px;padding:5px 7px;border-radius:9px}
  .pk-loc svg{width:13px;height:13px}
  .pk-loc b{font-size:10.5px}
  .pk-loc small{font-size:8.5px}
  /* Kartu paket: foto kiri rasio ASLI 4:3 (gambar tampil PENUH, tidak di-crop/zoom) & sejajar dengan teks kanan */
  .pk-card{grid-template-columns:clamp(150px,42%,230px) minmax(0,1fr);align-items:stretch}
  .pk-ph{width:100%;min-height:0;height:auto;aspect-ratio:4/3;align-self:start;background:transparent}
  .pk-bd{padding:11px 13px 10px;display:flex;flex-direction:column}
  .pk-tags{gap:4px;min-height:0}
  .pk-pill{font-size:8.6px;padding:3px 7px;letter-spacing:.3px;white-space:nowrap}
  .pk-meta{font-size:9.6px;gap:3px;white-space:nowrap}
  .pk-meta svg{width:11.5px;height:11.5px}
  .pk-bd h3{font-size:15px;line-height:1.15;margin:6px 0 3px}
  .pk-desc{font-size:11.2px;line-height:1.34;margin:0 0 7px;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pk-fas{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:7px 0}
  .pk-fi{gap:3px;min-width:0;overflow:hidden}
  .pk-fi svg{width:16px;height:16px}
  .pk-fi span{font-size:7.9px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pk-fi span.pk-lf{display:none}
  .pk-fi span.pk-ls{display:inline}
  .pk-bt-f{display:none}
  .pk-bt-s{display:inline}
  .pk-foot{gap:7px;margin-top:auto;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between}
  .pk-price{flex:1 1 auto;min-width:0}
  .pk-price small{font-size:9px;line-height:1.15}
  .pk-price b{display:block;font-size:14.5px;line-height:1.15;letter-spacing:-.4px;white-space:nowrap}
  .pk-price span{display:block;font-size:9px;line-height:1.15}
  .pk-btn{flex:0 0 auto;white-space:nowrap;padding:8px 11px;font-size:10.5px;gap:5px}
  .pk-btn svg{width:11.5px;height:11.5px}
  .pk-seller{font-size:15px;left:8px;bottom:11px;gap:3px}
  .pk-seller svg{width:13px;height:13px}
  /* 5 keunggulan satu baris dengan garis pemisah (seperti contoh) */
  .pk-feats{grid-template-columns:repeat(5,1fr);gap:4px;padding:13px 6px;margin:18px 0}
  .pk-feat{gap:6px;font-size:9.5px;line-height:1.25}
  .pk-feat svg{width:22px;height:22px}
  .pk-feat+.pk-feat{border-left:1px solid #EAF2F6}
}
@media (max-width:620px){
  /* HEADER mobile: foto tampil PENUH sebagai banner (rasio asli, tidak di-crop), teks di bawahnya */
  .pk-head{grid-template-columns:1fr;gap:10px;padding:12px 12px 13px}
  .pk-head-r{order:-1;width:100%;height:auto;min-height:0;aspect-ratio:auto;background:transparent;border-radius:14px}
  .pk-head-r img{position:static;width:100%;height:auto;display:block}
  /* MOBILE: kolom foto kiri (lebar dijaga ±50%, maks 185px supaya rasio foto tetap asli 4:3
     jadi GAMBAR TAMPIL PENUH), tinggi foto = tinggi blok teks kanan (SEJAJAR).
     Semua ukuran teks dirapatkan/diperkecil supaya kartu tetap ringkas. */
  .pk-card{grid-template-columns:clamp(148px,50%,185px) minmax(0,1fr);gap:8px}
  .pk-ph{width:100%;height:auto;min-height:0;aspect-ratio:4/3;align-self:stretch;background:transparent}
  .pk-bd{padding:7px 8px 6px}
  .pk-tags{gap:2px;row-gap:2px;margin:0}
  .pk-pill{font-size:6.8px;padding:2px 5px;letter-spacing:.2px}
  .pk-meta{font-size:7.4px;gap:2px}
  .pk-meta svg{width:8.5px;height:8.5px}
  .pk-bd h3{font-size:13px;line-height:1.1;margin:3px 0 1px}
  .pk-desc{font-size:9.2px;line-height:1.2;margin:0 0 3px}
  .pk-fas{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:3px 0;align-content:start}
  .pk-fi{gap:1px;min-width:0;overflow:hidden}
  .pk-fi svg{width:12px;height:12px}
  .pk-fi span{font-size:6.8px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pk-fi span.pk-lf{display:none}
  .pk-fi span.pk-ls{display:inline}
  .pk-bt-f{display:none}
  .pk-bt-s{display:inline}
  .pk-foot{gap:3px;margin-top:auto}
  .pk-price{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 3px}
  .pk-price small{display:inline;font-size:6.8px;line-height:1.1}
  .pk-price div{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 2px}
  .pk-price b{display:inline;font-size:11px;line-height:1.1}
  .pk-price span{display:inline;font-size:6.6px;line-height:1.1}
  .pk-btn{padding:3px 7px;font-size:8px;width:auto;gap:2px;border-radius:9px;box-shadow:0 5px 12px rgba(18,160,180,.24)}
  .pk-btn svg{width:10px;height:10px}
  .pk-seller{font-size:11px;left:6px;bottom:7px;gap:3px}
  .pk-seller svg{width:10px;height:10px}
  .pk-script2{font-size:18px}
  /* ---- REVISI VIDEO: kartu paket lebih ringkas (foto kecil, teks besar, baris ikon fasilitas dihapus) ---- */
  .pk-wrap{padding-top:12px}
  .pk-head2 h1{font-size:19px;margin:0 0 4px}
  .pk-head2 p{font-size:11px;line-height:1.42}
  .pk-crumb{font-size:9.6px;margin-bottom:4px}
  .pk-list{gap:11px;margin-top:12px}
  .pk-card{grid-template-columns:clamp(104px,33%,132px) minmax(0,1fr);gap:8px}
  .pk-bd{padding:8px 9px 7px}
  .pk-pill{font-size:7.6px;padding:2.5px 6px}
  .pk-meta{font-size:8.2px;gap:3px}
  .pk-meta svg{width:9.5px;height:9.5px}
  .pk-bd h3{font-size:15.4px;line-height:1.14;margin:4px 0 2px}
  .pk-desc{font-size:10.4px;line-height:1.3;margin:0 0 5px}
  .pk-price small{font-size:7.6px}
  .pk-price b{font-size:12.6px}
  .pk-price span{font-size:7.4px}
  .pk-btn{padding:4px 10px;font-size:9.2px;gap:3px}
  .pk-btn svg{width:11px;height:11px}
  .pk-seller{font-size:11.5px}
  /* ---- REVISI VIDEO (beranda): rapatkan jarak + grid layanan supaya semua baris kelihatan ---- */
  .sec{padding:13px 0 3px}
  .sec-head{margin-bottom:10px}
  .katgrid{gap:8px}
  .katcard{padding:10px 5px 9px}
  .katcard .ki{width:42px;height:42px;margin:0 auto 5px;border-radius:12px;font-size:21px}
  .katcard b{font-size:10.4px;line-height:1.22}
}

@media (max-width:380px){
  /* Layar sangat kecil (<=380px): rapatkan lagi supaya tinggi teks tetap <= tinggi foto (rasio 4:3) */
  .pk-pill{font-size:6.4px;padding:1.5px 4px}
  .pk-meta{font-size:6.9px;gap:1.5px}
  .pk-meta svg{width:7.5px;height:7.5px}
  .pk-bd h3{font-size:12.4px;margin:2px 0 1px}
  .pk-desc{font-size:8.8px;line-height:1.18;margin:0 0 2px}
  .pk-fas{padding:2px 0}
  .pk-fi svg{width:11px;height:11px}
  .pk-fi span{font-size:6.4px}
  .pk-price small{font-size:6.4px}
  .pk-price b{font-size:10.6px}
  .pk-price span{font-size:6.4px}
  .pk-btn{padding:2px 6px;font-size:7.6px;gap:2px}
  .pk-btn svg{width:9px;height:9px}
  .pk-seller{font-size:10.5px;left:6px;bottom:6px}
}

/* ===== MOBILE: kolom cari + gambar banner beranda TIDAK ikut terscroll =====
   Permintaan user: di tampilan HP, kolom cari dan banner tetap terlihat saat
   halaman digulir. `.hero` adalah wadah `.hsearch` (kolom cari) + `.hero-stage`
   (banner), jadi cukup keduanya dikunci sekali lewat posisi sticky di bawah
   header sticky. `--hdr-h` = tinggi header asli, diisi app.js (lockHeroTop). */
@media(max-width:560px){
  .hero{position:sticky;top:var(--hdr-h,55px);z-index:50;box-shadow:0 10px 26px rgba(10,37,64,.12)}
  /* jaring pengaman: di layar pendek (HP landscape) banner tidak boleh melahap layar */
  .hero-stage .box{max-height:42vh}
}

/* ================= MOBILE: kartu SEWA SEPEDA (kategori 3, #/jelajahi?kat=3) =================
   Revisi Rino 18 Sep 2026 — di HP kartu Sewa Sepeda dibuat seperti kartu jadwal kapal
   (#/boat/jadwal): tulisan/tombol "Durasi" DIHILANGKAN, dan sebagai gantinya SELURUH
   kotak kartu (termasuk fotonya) bisa di-tap untuk masuk ke halaman detail produk —
   di sana durasi (12 jam / 24 jam / 2 hari / 3 hari) beserta harganya dipilih.
   Aturan tap-nya ada di pkCardSewa() pada js/app.js (role="link" + onclick), sama
   seperti pola kartu jadwal kapal di schedRow().
   DESKTOP TIDAK BERUBAH: di layar lebar tombol "Durasi" tetap tampil seperti semula. */
.pk-sewa{cursor:pointer;-webkit-tap-highlight-color:rgba(18,160,180,.12)}
.pk-sewa:focus-visible{outline:3px solid #12A0B4;outline-offset:3px}

/* ================= MOBILE: kartu PAKET di halaman kategori (#/jelajahi?kat=N) =================
   Permintaan Rino 19 Sep 2026 — kartu paket di halaman kategori (dipakai mis. halaman
   Snorkeling & Diving #/jelajahi?kat=4 dan Rinjani Tour #/jelajahi?kat=11) mengikuti
   pola kartu Sewa Sepeda: tulisan tombol "Detail" DIHILANGKAN di HP dan GAMBARNYA bisa
   diklik. Aturan tap + link gambarnya ada di pkCard() pada js/app.js.
   DESKTOP TIDAK BERUBAH: tombol "Lihat Detail" tetap tampil seperti semula.
   Kelas .pk-link HANYA dipasang saat kartu bukan mode "pilih paket" (PKT_PILIH_KAT). */
.pk-link{cursor:pointer;-webkit-tap-highlight-color:rgba(18,160,180,.12)}
.pk-link:focus-visible{outline:3px solid #12A0B4;outline-offset:3px}

@media (max-width:900px){
  /* Kartu PAKET halaman kategori (.pk-link): tulisan tombol "Detail"
     DIHILANGKAN, karena foto kartu (dan seluruh kotaknya) sudah jadi pintu
     masuk ke halaman produk. Batas 900px dipakai supaya tulisan "Detail"
     tidak muncul di lebar manapun (label "Detail" mulai dipakai CSS pada
     ≤900px); di desktop >900px tombol "Lihat Detail" tetap seperti semula. */
  .pk-link .pk-btn{display:none}
  .pk-link .pk-foot{justify-content:flex-start}
  .pk-link .pk-price{flex:1 1 auto;min-width:0}
}

@media (max-width:620px){
  .pk-sewa .pk-btn{display:none}
  .pk-sewa .pk-foot{justify-content:flex-start}
  .pk-sewa .pk-price{flex:1 1 auto;min-width:0}
}

/* ================= RESPONSIVE MOBILE PASS — 22 Sep 2026 (permintaan Pak Rino) =================
   Tujuan: tampilan HP lebih rapi & "kenyal" di semua lebar layar HP.
   Masalah utama yang diperbaiki: SELURUH halaman bisa digeser ke kanan ~30-38px
   di layar 320-430px. Penyebabnya baris footer:
     `.f-shop`  = catatan web (`.f-webnote`) + kolom trust, dipaksa satu baris gap 44px
     `.f-sec`   = kotak SSL (`.f-ssl`) + badge Kominfo (`.f-kominfo`), tanpa wrap
   Di 360px isinya butuh ~397px sehingga meluber keluar layar; karena ada elemen
   yang lebih lebar dari viewport, viewport ikut melebar dan ikut menyeret
   bottom-nav (`.bnav`) jadi 398px. Di HP baris-baris itu sekarang DITUMPUK/WRAP.
   DESKTOP (>760px) TIDAK DIUBAH — semua aturan di bawah hanya untuk layar kecil. */

/* Jaring pengaman: tidak ada geser horizontal (clip, bukan hidden, agar
   header & hero yang position:sticky tetap menempel seperti permintaan user). */
html,body{overflow-x:clip;max-width:100%}

@media (max-width:760px){
  /* --- FOOTER: tumpuk vertikal, jangan melebar keluar layar --- */
  .f-shop{flex-direction:column;align-items:stretch;gap:13px;margin-top:18px}
  .f-webnote{max-width:100%}
  .f-trust{padding-top:0;gap:8px}
  .f-sec{flex-wrap:wrap;column-gap:12px;row-gap:9px}
  .f-badges img{max-width:100%;height:auto}
  .f-bot{flex-wrap:wrap;row-gap:8px}
  .fwrap,.f-in,.f-row,.f-menus,.fcol{max-width:100%}

  /* --- judul/teks panjang tidak menembus tepi kartu --- */
  .sec-title,.sec-more-txt,.katcard b,.f-webnote,.f-addr-t{overflow-wrap:anywhere}
}

/* HP kecil (<=400px): label Menu Layanan sedikit lebih terbaca (grid tetap 4 kolom
   supaya semua baris layanan tetap kelihatan seperti permintaan sebelumnya). */
@media (max-width:400px){
  .katcard b{font-size:11px;line-height:1.24}
  .katcard span{font-size:10px}
  .sec-title{font-size:17.5px}
  .sec{padding:14px 0 3px}
}

/* ================= KOTAK CARI HOTEL & VILLA (kategori 2) =================
   Kerangka ala tiket.com (permintaan Pak Rino, 26 Sep 2026):
   lokasi + tanggal + kamar/tamu (panel bawah) → tombol "Cari Hotel". */
.hs{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 12px rgba(10,37,64,.06);padding:14px;margin:0 0 18px}
.hs-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.hs-head b{font-size:16.5px;font-weight:800;color:var(--navy)}
.hs-head span{font-size:12.5px;color:var(--mut)}
.hs-fld{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:13px;background:var(--soft);padding:9px 12px;margin-bottom:9px;text-align:left;width:100%}
.hs-fld label{font-size:11px;font-weight:800;color:var(--mut);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.hs-fld label i{font-style:normal;font-size:13px}
.hs-fld select,.hs-fld input[type=date]{border:0;background:transparent;font-size:15px;font-weight:700;color:var(--navy);padding:0;width:100%;font-family:inherit;appearance:none}
.hs-fld select:focus,.hs-fld input:focus{outline:none}
.hs-2c{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hs-2c .hs-fld{margin-bottom:9px}
.hs-tap{cursor:pointer}
.hs-tap label{justify-content:space-between;width:100%}
.hs-tap-ub{font-style:normal;font-size:11.5px;font-weight:800;color:var(--blue);background:#E8F3FE;border-radius:8px;padding:3px 8px;text-transform:none;letter-spacing:0;white-space:nowrap}
.hs-tap-l{font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
.hs-tap-l i{font-style:normal;font-size:13px}
.hs-tap-v{font-size:15px;font-weight:700;color:var(--navy);display:block}
.hs-btn{width:100%;height:48px;border-radius:13px;background:var(--grad);color:#fff;font-weight:800;font-size:15px;box-shadow:0 8px 20px rgba(14,126,228,.26);display:grid;place-items:center;border:0;font-family:inherit}
.hs-btn:active{transform:scale(.98)}
/* Tombol "Lihat semua hotel & villa" di dalam kotak hasil kosong */
.hs-semua{max-width:280px;margin:16px auto 0}
.hs-hist{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.hs-hist-h{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--mut);margin-bottom:8px}
.hs-hist-h button{font-size:12.5px;font-weight:800;color:var(--blue);background:none;border:0;font-family:inherit}
.hs-hist-c{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.hs-chip{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;align-items:flex-start;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--navy);text-align:left;font-family:inherit}
.hs-chip i{font-style:normal;font-size:11px;font-weight:600;color:var(--mut);white-space:nowrap}
/* baris ringkasan hasil pencarian */
.hs-res-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.hs-res-h b{display:block;font-size:15.5px;font-weight:800;color:var(--navy)}
.hs-res-h span{font-size:12.5px;color:var(--mut)}
.hs-res-h button{flex:none;font-size:13px;font-weight:800;color:var(--blue);border:1px solid #CFE4FA;background:#F4FAFF;border-radius:10px;padding:7px 14px;font-family:inherit}
.hs-res-l{flex:1 1 auto;min-width:132px}
.hs-res-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;flex:0 1 auto}
.hs-res-act button{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hs-res-act button svg,.hk-fav svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2}
.hs-fav-btn.on{color:#E23744;border-color:#F6C6CB;background:#FFF4F5}
.hs-fav-btn.on svg{fill:currentColor}
/* ikon hati di kartu hotel (favorit tamu) */
.hcard-kat .hk-fav{position:absolute;right:10px;top:10px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);color:#7C93AA;display:grid;place-items:center;box-shadow:0 2px 8px rgba(10,37,64,.2);cursor:pointer}
.hcard-kat .hk-fav svg{width:19px;height:19px}
.hcard-kat .hk-fav.on{color:#E23744}
.hcard-kat .hk-fav.on svg{fill:currentColor}
/* petunjuk sebelum tombol "Cari Hotel & Villa" ditekan (daftar belum tampil) */
.hs-hint{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:16px;padding:22px 16px}
.hs-hint-ic{font-size:26px;line-height:1}
.hs-hint b{font-size:14.5px;font-weight:800;color:var(--navy)}
.hs-hint p{font-size:12.5px;color:var(--mut);margin:0;max-width:420px}
/* kartu hotel: lencana "pilih kamar" di atas foto */
.hcard-kat .hk-av{position:absolute;left:10px;bottom:10px;background:rgba(10,37,64,.82);color:#fff;font-size:10.5px;font-weight:800;border-radius:9px;padding:5px 9px;letter-spacing:.2px}
/* panel bawah (bottom sheet) KAMAR & TAMU */
.hs-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.hs-sheet-bg{position:absolute;inset:0;background:rgba(10,37,64,.45)}
.hs-sheet-bd{position:relative;width:100%;max-width:520px;background:#fff;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(10,37,64,.25);animation:hsUp .18s ease-out}
@keyframes hsUp{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}
.hs-sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hs-sheet-h b{font-size:16.5px;font-weight:800;color:var(--navy)}
.hs-sheet-h button{width:32px;height:32px;border-radius:10px;background:var(--soft);color:var(--navy);font-weight:800;border:0;font-family:inherit}
.hs-srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.hs-srow-t b{display:block;font-size:15px;font-weight:700;color:var(--navy)}
.hs-srow-t span{font-size:12px;color:var(--mut)}
.hs-step{display:flex;align-items:center;gap:12px}
.hs-step button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue);font-size:18px;font-weight:800;display:grid;place-items:center;line-height:1;background:#fff;font-family:inherit}
.hs-step button[disabled]{border-color:var(--line);color:#B9C6D4}
.hs-step b{min-width:20px;text-align:center;font-size:16px;font-weight:800;color:var(--navy)}
.hs-sheet .hs-btn{margin-top:14px}
@media(min-width:640px){.hs{max-width:520px}}

/* ---- Panel LOKASI & kalender TANGGAL MENGINAP (pola alur ala video acuan) ---- */
.hs-sheet-sub{margin:2px 0 12px;font-size:12.5px;color:var(--mut);line-height:1.55}
.hs-opt{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;margin-bottom:8px;text-align:left;font-family:inherit;transition:.15s}
.hs-opt:last-child{margin-bottom:0}
.hs-opt:active{transform:scale(.99)}
.hs-opt.on{border-color:var(--blue);background:#F4FAFF;box-shadow:0 4px 14px rgba(14,126,228,.12)}
.hs-opt-rd{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #C7D6E6;background:#fff}
.hs-opt.on .hs-opt-rd{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 3.5px #fff}
.hs-opt-t{flex:1 1 auto;min-width:0}
.hs-opt-t b{display:block;font-size:14.5px;font-weight:800;color:var(--navy)}
.hs-opt-t i{font-style:normal;font-size:12px;color:var(--mut)}
.hs-opt-ok{flex:none;width:22px;height:22px;color:var(--blue)}
.hs-opt-ok svg{width:20px;height:20px;display:block}
.hs-cal-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hs-cal-top>span{flex:1 1 auto;text-align:center;display:flex;flex-direction:column;font-size:14px;font-weight:800;color:var(--navy)}
.hs-cal-top>span i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--mut)}
.hs-cal-top>button{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:19px;font-weight:800;line-height:1;font-family:inherit}
.hs-cal-top>button[disabled]{opacity:.4}
.hs-cal-scroll{max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;padding:8px 10px}
.hs-cal-mn{font-size:13px;font-weight:800;color:var(--navy);text-align:center;padding:8px 0 6px}
.hs-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.hs-cal-h{text-align:center;font-size:10.5px;font-weight:800;color:var(--mut);padding:4px 0}
.hs-cal-e{height:36px}
.hs-cal-d{height:36px;border:0;background:none;font-size:13.5px;font-weight:700;color:var(--navy);font-family:inherit;border-radius:10px}
.hs-cal-d.off{color:#C6D2DF;text-decoration:line-through}
.hs-cal-d.mid{background:#E8F3FE;border-radius:0}
.hs-cal-d.in,.hs-cal-d.out{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(14,126,228,.24)}
.hs-cal-d.in{border-radius:10px 0 0 10px}
.hs-cal-d.out{border-radius:0 10px 10px 0}
.hs-cal-foot{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;border:1px dashed var(--line);border-radius:13px;background:#FAFCFF}
.hs-cal-foot div{min-width:0}
.hs-cal-foot span{display:block;font-size:11px;font-weight:700;color:var(--mut)}
.hs-cal-foot b{font-size:13px;font-weight:800;color:var(--navy)}
.hs-cal-foot em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--blue);background:#EAF4FF;border-radius:8px;padding:4px 8px;white-space:nowrap}
.hs-btn[disabled]{opacity:.45;box-shadow:none}
/* chip Filter & Urutkan di atas daftar hotel */
.hs-tools{display:flex;gap:8px;overflow-x:auto;margin:-4px 0 12px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.hs-tool{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:8px 13px;font-size:12.5px;font-weight:800;color:var(--navy);font-family:inherit}
.hs-tool.on{border-color:var(--blue);background:#F4FAFF;color:var(--blue)}
.hs-tool.x{border-style:dashed;color:var(--mut)}

/* ---- Detail hotel & checkout (kelengkapan pola alur video acuan) ---- */
.ir-tag.pilih{background:var(--grad);color:#fff;border-color:transparent;font-weight:800;padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(14,126,228,.22)}
.inap-room:hover .ir-tag.pilih{filter:brightness(1.05)}
.cko-opt{font-style:normal;font-size:11.5px;font-weight:700;color:var(--mut);margin-left:6px}
.cko-sec-h{margin:14px 0 8px;padding-top:12px;border-top:1px dashed var(--line);font-size:12px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.4px}
.cko-field textarea{width:100%;min-height:80px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-family:inherit;font-size:14px;color:var(--navy);background:#fff;resize:vertical;box-sizing:border-box}
.cko-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,126,228,.12)}

/* ================= AJAKAN DAFTAR MITRA HOTEL & VILLA (beranda) ================= */
.mitracta{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(135deg,#EAF4FF 0%,#F7FBFF 62%,#FFF 100%);border:1px solid #D5E7FA;border-radius:18px;padding:18px 20px;box-shadow:0 6px 20px rgba(14,126,228,.08)}
.mcta-tx{flex:1 1 340px;min-width:0}
.mcta-tx b{display:block;font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:-.2px;margin-bottom:5px}
.mcta-tx span{display:block;font-size:13px;line-height:1.65;color:var(--mut)}
.mcta-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;text-decoration:none;padding:12px 20px;border-radius:12px;box-shadow:0 8px 20px rgba(14,126,228,.28);transition:.18s}
.mcta-btn:hover{background:#0B6CC7;transform:translateY(-1px)}
@media(max-width:640px){.mitracta{padding:16px}.mcta-btn{width:100%}}

/* beri ruang agar tombol mengambang WhatsApp tidak menutupi kartu kamar terakhir */
#inapKamar .inap-rooms{padding-bottom:58px}