:root{--g9:#0b3d2e;--g8:#0f5132;--g7:#146c43;--g1:#e8f3ee;--gold:#c9a227;--gold2:#f4e3a1;--ink:#1f2937;--mut:#6b7280;--line:#e5e7eb;--bg:#f8faf9;--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--g7)}img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
header.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--g9);font-weight:800;font-size:20px;letter-spacing:.2px}
.logo .mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--g8),var(--g7));display:grid;place-items:center;color:var(--gold2);font-size:18px}
.logo small{display:block;font-size:11px;font-weight:600;color:var(--mut);letter-spacing:.3px}
nav.menu a{margin-left:18px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
nav.menu a:hover{color:var(--g7)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;transition:.15s}
.btn-p{background:var(--g8);color:#fff}.btn-p:hover{background:var(--g9)}
.btn-gold{background:var(--gold);color:#1b1300}.btn-gold:hover{filter:brightness(.95)}
.btn-o{background:#fff;color:var(--g8);border:1.5px solid var(--g8)}
.btn-wa{background:#25d366;color:#fff}.btn-wa:hover{background:#1ebe5b}
.btn-sm{padding:8px 14px;font-size:13px}
.hero{background:radial-gradient(1200px 400px at 80% -10%,rgba(201,162,39,.25),transparent),linear-gradient(135deg,var(--g9),var(--g7));color:#fff;padding:56px 0 64px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .9fr;gap:36px;align-items:center}
.hero h1{font-size:44px;line-height:1.12;margin:10px 0 14px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero p.lead{font-size:18px;opacity:.92;margin:0 0 22px}
.pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{background:#fff;color:var(--ink);border-radius:18px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hero-card h3{margin:0 0 4px;font-size:15px;color:var(--mut);font-weight:600}
.hero-card .big{font-size:34px;font-weight:800;color:var(--g8)}
.hero-card ul{padding:0;margin:14px 0 0;list-style:none}.hero-card li{padding:7px 0;border-top:1px dashed var(--line);font-size:14px;display:flex;gap:8px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-30px;position:relative;z-index:2}
.trust div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:0 6px 20px rgba(15,81,50,.06)}
.trust b{display:block;color:var(--g8);font-size:15px}.trust span{font-size:13px;color:var(--mut)}
section{padding:44px 0}
h2.sec{font-size:28px;margin:0 0 6px;color:var(--g9)}p.sub{margin:0 0 22px;color:var(--mut)}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:sticky;top:72px;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.filters label{font-size:12px;font-weight:700;color:var(--mut);display:block;margin-bottom:4px}
select,input,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:14px;background:#fff}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--g7)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 6px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--g8);border-color:var(--g8);color:#fff}
.count{color:var(--mut);font-size:14px;margin:10px 0 14px}
.month-h{margin:26px 0 12px;font-size:20px;color:var(--g9);display:flex;align-items:baseline;gap:10px}
.month-h small{font-size:13px;color:var(--mut);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.card:hover{box-shadow:0 14px 34px rgba(15,81,50,.12);transform:translateY(-2px)}
.card .hd{padding:14px 16px;background:linear-gradient(135deg,var(--g1),#fff);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.card .date{font-weight:800;font-size:18px;color:var(--g9)}.card .date small{display:block;font-size:12px;color:var(--mut);font-weight:600}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:4px 8px;border-radius:6px;background:var(--gold2);color:#5b4500;white-space:nowrap}
.badge.g{background:var(--g1);color:var(--g8)}.badge.r{background:#fde8e8;color:#9b1c1c}
.card .bd{padding:14px 16px;flex:1;font-size:14px}
.card .row{display:flex;gap:8px;margin:5px 0;color:#374151}.card .row i{font-style:normal;width:20px;text-align:center}
.card .ft{padding:14px 16px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.price small{display:block;font-size:12px;color:var(--mut)}.price b{font-size:22px;color:var(--g8)}
.seat{font-size:12px;font-weight:700;color:var(--g7)}.seat.low{color:#b42318}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.box h3{margin:0 0 10px;color:var(--g9);font-size:18px}
.box ul{margin:0;padding-left:18px}.box li{margin:6px 0}
.box.warn{border-color:var(--gold);background:#fffbeb}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;counter-reset:s}
.steps div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;font-size:13px;position:relative}
.steps div:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--g8);color:#fff;font-weight:800;margin-bottom:8px}
.steps b{display:block;font-size:14px;color:var(--g9)}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:8px 0}
summary{font-weight:700;cursor:pointer;color:var(--g9)}
footer{background:var(--g9);color:#d1e7dd;padding:34px 0 90px;font-size:14px}
footer b{color:#fff}footer a{color:var(--gold2)}
.fab{position:fixed;right:18px;bottom:18px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:30px;text-align:center;color:var(--mut)}
/* detail */
.crumb{font-size:13px;color:var(--mut);margin:18px 0}
.dgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
.opt{border:2px solid var(--line);border-radius:12px;padding:14px;margin:10px 0;cursor:pointer;display:block;background:#fff}
.opt.on{border-color:var(--g7);background:var(--g1)}
.opt input{width:auto;margin-right:8px}
.opt .pr{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:14px}.opt .pr b{color:var(--g8)}
.sticky{position:sticky;top:80px}
.qty{display:grid;grid-template-columns:1fr 110px;gap:8px;align-items:center;margin:8px 0}
.tot{background:var(--g1);border-radius:12px;padding:14px;margin:12px 0}
.tot .l{display:flex;justify-content:space-between;margin:4px 0}.tot .l b{color:var(--g8)}
.msg{padding:12px;border-radius:10px;margin:10px 0;font-size:14px}.msg.err{background:#fde8e8;color:#9b1c1c}.msg.ok{background:var(--g1);color:var(--g8)}
.timeline{list-style:none;padding:0;margin:0}.timeline li{display:flex;gap:10px;align-items:center;padding:8px 0;color:var(--mut)}
.timeline li span{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:12px}
.timeline li.done{color:var(--g8);font-weight:700}.timeline li.done span{background:var(--g8);border-color:var(--g8);color:#fff}
.timeline li.cur{color:var(--ink);font-weight:800}.timeline li.cur span{border-color:var(--gold);background:var(--gold2)}
.hp{position:absolute;left:-9999px}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr}.hero h1{font-size:34px}.grid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:repeat(3,1fr);position:static}.trust{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(3,1fr)}.dgrid{grid-template-columns:1fr}.sticky{position:static}nav.menu{display:none}}
@media(max-width:620px){.grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.hero{padding:36px 0 54px}.hero h1{font-size:29px}}

@media(max-width:760px){footer .wrap[style*=grid]{grid-template-columns:1fr!important}}
.haji-band{background:linear-gradient(135deg,#fffbeb,#fff);border:1.5px solid var(--gold);border-radius:var(--r);padding:22px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.haji-band h3{margin:0 0 6px;color:var(--g9);font-size:22px}