/* ===== MAIN.CSS v3 ===== */ html{scroll-behavior:smooth} .gold-text{background:linear-gradient(to right,var(--accent),var(--accent-light),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .accordion-content{max-height:0;overflow:hidden;transition:max-height 0.4s ease} .accordion-content.open{max-height:2000px} /* ===================================================================== TEMA: terang (teal, senada invoice/panel/kas/ID card) dan gelap (emas-hitam). Ikut pengaturan perangkat; bisa ditimpa manual (data-theme di ). --on-accent = warna teks di atas tombol berwarna aksen. ===================================================================== */ :root{ --accent:#0891b2;--accent-light:#22b8d0;--accent-glow:rgba(8,145,178,0.18);--on-accent:#FFFFFF; --bg-main:#FFFFFF;--bg-section:#FFFFFF;--bg-section-alt:#F0F9FF;--bg-card:#FFFFFF;--bg-card-hover:#E0F2FE;--bg-input:#FFFFFF; --text-primary:#0F172A;--text-secondary:#0E7490;--text-muted:#64748B; --border-color:rgba(8,145,178,0.30);--border-soft:#E0F2FE; --hero-grad:linear-gradient(160deg,#0C4A6E 0%,#0891B2 58%,#22B8D0 100%); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --accent:#E5B80B;--accent-light:#FFD700;--accent-glow:rgba(229,184,11,0.25);--on-accent:#0A0A0A; --bg-main:#0A0A0A;--bg-section:#0A0A0A;--bg-section-alt:#0F0F0F;--bg-card:#111111;--bg-card-hover:#1A1A1A;--bg-input:#1A1A1A; --text-primary:#FFFFFF;--text-secondary:#A1A1AA;--text-muted:#8B8B93; --border-color:rgba(229,184,11,0.35);--border-soft:rgba(255,255,255,0.07); --hero-grad:radial-gradient(ellipse at 75% 15%,rgba(229,184,11,0.22) 0%,transparent 55%),linear-gradient(160deg,#0A0A0A 0%,#1C1917 100%); } } :root[data-theme="dark"]{ --accent:#E5B80B;--accent-light:#FFD700;--accent-glow:rgba(229,184,11,0.25);--on-accent:#0A0A0A; --bg-main:#0A0A0A;--bg-section:#0A0A0A;--bg-section-alt:#0F0F0F;--bg-card:#111111;--bg-card-hover:#1A1A1A;--bg-input:#1A1A1A; --text-primary:#FFFFFF;--text-secondary:#A1A1AA;--text-muted:#8B8B93; --border-color:rgba(229,184,11,0.35);--border-soft:rgba(255,255,255,0.07); --hero-grad:radial-gradient(ellipse at 75% 15%,rgba(229,184,11,0.22) 0%,transparent 55%),linear-gradient(160deg,#0A0A0A 0%,#1C1917 100%); } body{background:var(--bg-main);color:var(--text-primary);transition:background .4s ease,color .4s ease} .theme-section{background:var(--bg-section);transition:all 0.4s ease} .theme-section-alt{background:var(--bg-section-alt);transition:all 0.4s ease} .theme-card{background:var(--bg-card);border-color:var(--border-color);box-shadow:0 1px 3px rgba(0,0,0,0.15);transition:all 0.4s ease} .theme-card:hover{border-color:var(--accent);box-shadow:0 8px 30px var(--accent-glow)} .theme-input{background:var(--bg-input);border-color:var(--border-soft);color:var(--text-primary);transition:all 0.3s ease} .theme-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ===== HERO: tanpa video. Latar polos bergradasi, atau gambar dari panel (kelas .has-img) ===== */ .hero{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:center;justify-content:center;background:var(--hero-grad);color:#fff} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease} .hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 55%,var(--bg-main) 100%)} .hero.has-img .hero-bg{opacity:1} .hero.has-img::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.30) 0%,rgba(0,0,0,.50) 60%,rgba(0,0,0,.35) 100%)} .hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:128px 20px 96px;text-align:center} .hero-brand{margin:0 0 14px;font-family:'Inter',sans-serif;font-size:13px;font-weight:300;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.85)} .hero-title{margin:0;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:clamp(38px,8vw,68px);line-height:1.04;color:#fff;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.25)} .hero-sub{margin:18px auto 0;max-width:560px;font-size:clamp(14px,2.2vw,17px);line-height:1.65;color:rgba(255,255,255,.9)} .hero-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .hero-points li{font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff} .hero-points li::before{content:'✓ '} .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px} .hero-btn{display:inline-flex;align-items:center;justify-content:center;min-width:180px;padding:13px 26px;border-radius:999px;font-size:12px;font-weight:700;text-decoration:none;transition:filter .2s ease,background .2s ease} .hero-btn-main{background:var(--accent);color:var(--on-accent)} .hero:not(.has-img) .hero-btn-main{background:#fff;color:#0C4A6E} :root[data-theme="dark"] .hero:not(.has-img) .hero-btn-main{background:var(--accent);color:var(--on-accent)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero:not(.has-img) .hero-btn-main{background:var(--accent);color:var(--on-accent)}} .hero-btn-main:hover{filter:brightness(1.08)} .hero-btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.08)} .hero-btn-ghost:hover{background:rgba(255,255,255,.18)} /* ===== CUACA: latar ikut waktu, teks putih, kotak kaca ===== */ .weather-card{position:relative;overflow:hidden;border-radius:32px;padding:24px;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 50px rgba(15,23,42,.18);transition:background 1s ease} @media(min-width:768px){.weather-card{padding:32px}} .weather-card.wx-pagi{background:linear-gradient(135deg,#F59E0B 0%,#EA580C 45%,#0E7490 100%)} .weather-card.wx-siang{background:linear-gradient(135deg,#0284C7 0%,#0891B2 50%,#0E7490 100%)} .weather-card.wx-sore{background:linear-gradient(135deg,#EA580C 0%,#BE185D 55%,#6D28D9 100%)} .weather-card.wx-malam{background:linear-gradient(135deg,#0F172A 0%,#1E1B4B 55%,#312E81 100%)} .weather-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.18),transparent 45%);pointer-events:none} .weather-card h3,.weather-card p,.weather-card span{text-shadow:0 1px 2px rgba(0,0,0,.18)} .wx-muted{color:rgba(255,255,255,.88)!important} .wx-glass{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff} button.wx-glass{cursor:pointer} .wx-hour{min-width:68px;border-radius:16px;padding:10px;text-align:center} .wx-icon{width:110px;height:110px;min-width:110px;display:flex;align-items:center;justify-content:center;font-size:72px;line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.2))} /* ===== PAKET WISATA (template destinasi) ===== */ .paket-card{width:280px;border-radius:20px;overflow:hidden;border:1px solid var(--border-color);display:flex;flex-direction:column} .paket-img{height:176px;background-size:cover;background-position:center;position:relative} .paket-img-combo{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-light) 100%);display:flex;align-items:center;justify-content:center} .paket-combo-mark{font-size:44px} .paket-tag{position:absolute;top:14px;left:14px;padding:4px 12px;border-radius:999px;font-size:10px;font-weight:700;background:var(--accent);color:var(--on-accent)} .paket-img-combo .paket-tag{background:rgba(0,0,0,.35);color:#fff} .paket-body{padding:20px;display:flex;flex-direction:column;flex:1} .paket-title{margin:0;font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;line-height:1.2;color:var(--text-primary)} .paket-dest{margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--text-secondary)} .paket-info{margin:10px 0 0;font-size:11px;color:var(--text-muted)} .paket-price{margin:14px 0 12px;font-size:15px;font-weight:800;color:var(--accent);margin-top:auto;padding-top:14px} .paket-btn{width:100%;padding:11px 14px;border-radius:999px;border:0;font-size:12px;font-weight:700;cursor:pointer;background:var(--accent);color:var(--on-accent)} .paket-btn:hover{filter:brightness(1.08)} /* ===== TRIP CUSTOM ===== */ .tc-chip{padding:8px 16px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);cursor:pointer} .tc-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* ===== RINCIAN: termasuk / tidak termasuk ===== */ .incl-box{margin:0 0 18px;padding:12px 14px;border-radius:14px;border:1px solid var(--border-soft);background:var(--bg-card);font-size:11.5px;line-height:1.55;color:var(--text-secondary)} .incl-box p{margin:0} .incl-box p+p{margin-top:8px} .incl-box b{color:var(--text-primary)} /* ===== Pilihan cara bayar (dibuat main.js) ===== */ .pm-box{margin:0 0 14px;padding:14px;border-radius:16px;border:1px solid var(--border-soft);background:var(--bg-card)} .pm-title{margin:0 0 10px;font-size:12px;font-weight:700;color:var(--text-muted)} .pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pm-opt{display:block;cursor:pointer;position:relative} .pm-opt input{position:absolute;opacity:0;pointer-events:none} .pm-card{display:block;height:100%;padding:12px;border-radius:12px;border:2px solid var(--border-soft);color:var(--text-primary)} .pm-card b{display:block;font-size:13px} .pm-card small{display:block;margin-top:2px;font-size:11px;color:var(--text-muted)} .pm-card.on{border-color:var(--accent);background:var(--accent-glow)} .pm-opt input:focus-visible+.pm-card{outline:2px solid var(--accent);outline-offset:2px} .pm-preview{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--text-primary)} /* ===== FOOTER: ikon kontak & media sosial ===== */ .soc-row{display:flex;gap:10px;justify-content:center;margin-top:18px} .soc{width:42px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-color);background:var(--bg-card);color:var(--accent);transition:background .2s ease,color .2s ease} .soc:hover{background:var(--accent);color:var(--on-accent)} .soc svg{width:20px;height:20px} .soc[hidden]{display:none} /* ===== Modal kapasitas ===== */ #capacityModalBox{background:var(--bg-card);color:var(--text-primary);border-color:var(--border-color)} #capacityModalIcon{background:color-mix(in srgb,#DC2626 12%,var(--bg-card))} .cm-btn{padding:12px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;cursor:pointer} .cm-ghost{background:transparent;border:1px solid var(--border-color);color:var(--text-primary)} .cm-main{background:var(--accent);border:0;color:var(--on-accent)} /* ===== Armada ===== */ .armada-img-container{position:relative}.armada-img-track{position:relative;width:100%;height:100%}.armada-img-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease}.armada-img-slide.active{opacity:1} .dest-checkbox{accent-color:var(--accent)}.dest-item{border:1px solid var(--border-soft);border-radius:12px;padding:10px 12px;transition:all .2s}.dest-item:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--bg-card))} /* (dipertahankan !important: Tailwind CDN menyuntik