/* ============================================================
   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 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:2.1407}
.hero-slider{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;will-change:opacity}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.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}
  .hero-stage .box{border-radius:16px}
  .hero-stats span{font-size:8.5px}
  .hsearch .sb{padding-left:13px}
  .hsearch button{padding:0 14px}
}

/* ============ SECTION ============ */
.sec{padding:26px 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}
.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}

/* 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)}}

/* ============ 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}
.bs-stack{display:grid;grid-template-columns:1fr 46px;column-gap:4px;row-gap:10px}
.bs-stack .bs-fld{grid-column:1;min-width:0}
.bs-stack .bs-swap{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;width:40px;height:40px}
.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) }
.jd-strip { display:flex; gap:6px; overflow-x:auto; padding:10px 2px 6px; scrollbar-width:none; -ms-overflow-style:none }
.jd-strip::-webkit-scrollbar { display:none }
.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 }
.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 14px; 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:2; 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) }
.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) {
  .jdhero-tx h1 { font-size:21px }
  .jdframe { border-radius:20px; padding:16px 12px 24px; margin:-8px 0 34px }
  .jd-route b { font-size:12.5px }
  .sched { grid-template-columns:96px 1fr; }
  .sched .s-photo { height:84px }
  .sched .s-price { grid-column:1/-1; border-left:0; border-top:1px dashed #E1ECF6; padding:10px 2px 2px; display:flex; justify-content:space-between; align-items:center }
  .hb-cap { border-radius:0 0 12px 12px }
  .hb-cap b { font-size:13.5px }
}

/* ===== 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}
.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-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 lega antara gambar banner & menu layanan di bawahnya */
.hero{padding-bottom:28px}
.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}
.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}
.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}}
/* ---------- 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}
@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}
.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}
.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}
.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}
.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-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}
.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}
.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 40%;gap:12px;padding:14px 13px;border-radius:18px}
  .pk-head-r{order:0;height:auto;min-height:172px;align-self:stretch}
  .pk-script{display:none}
  .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: gambar tetap DI SEBELAH keterangan (seperti desktop & contoh) */
  .pk-card{grid-template-columns:38% 1fr}
  .pk-ph{min-height:0;height:auto}
  .pk-bd{padding:13px 14px 12px}
  .pk-tags{gap:5px;min-height:0}
  .pk-pill{font-size:9px;padding:3.5px 8px;letter-spacing:.3px;white-space:nowrap}
  .pk-meta{font-size:10px;gap:3.5px;white-space:nowrap}
  .pk-meta svg{width:12px;height:12px}
  .pk-bd h3{font-size:16.5px;margin:8px 0 4px}
  .pk-desc{font-size:12.2px;line-height:1.45;margin:0 0 9px;max-width:none}
  /* 5 fasilitas dalam SATU baris (seperti contoh) */
  .pk-fas{grid-template-columns:repeat(5,1fr);gap:3px;padding:9px 0}
  .pk-fi{gap:4px}
  .pk-fi svg{width:18px;height:18px}
  .pk-fi span{font-size:8.4px;line-height:1.2;overflow-wrap:break-word}
  /* Harga di kiri, tombol di kanan — satu baris (seperti contoh) */
  .pk-foot{gap:8px;margin-top:9px;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:10px}
  .pk-price b{display:block;font-size:16px;letter-spacing:-.5px;white-space:nowrap}
  .pk-price span{display:block;font-size:10px;line-height:1.25}
  .pk-btn{flex:0 0 auto;white-space:nowrap}
  .pk-seller{font-size:14px;left:8px;bottom:10px}
  .pk-seller svg{width:12px;height:12px}
  /* 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){
  .pk-bd h3{font-size:16px}
  /* 5 fasilitas tetap 1 baris, tapi lebar kolom ikut panjang label → tidak ada kata terpotong */
  .pk-fas{grid-template-columns:repeat(5,auto);justify-content:space-between;gap:5px}
  .pk-price b{font-size:15px}
  .pk-btn{padding:8px 11px;font-size:11px;width:auto;gap:5px;box-shadow:0 7px 15px rgba(18,160,180,.28)}
  .pk-btn svg{width:12px;height:12px}
  .pk-script2{font-size:18px}
}