:root { --ink:#172d2b; --forest:#184b43; --cream:#f8f5ee; --orange:#f37145; --muted:#65736e; }
* { box-sizing:border-box; }
em { font-style:normal; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Roboto",Arial,sans-serif; }
.site-header { background:var(--cream); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:.55rem; font-size:.78rem; letter-spacing:.06em; font-weight:700; color:var(--ink); }
.brand:hover { color:var(--ink); }.brand-light { display:block; font-weight:500; font-size:.62rem; letter-spacing:.13em; margin-top:-3px; }.brand-mark { background:var(--orange); color:white; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-size:1rem; }
.nav-link { color:#44504c; font-size:.9rem; font-weight:500; }.nav-link:hover,.nav-link.active { color:var(--forest); }.navbar .btn-dark { background:var(--ink); font-size:.85rem; }
.hero-section { min-height:620px; position:relative; overflow:hidden; padding:4.6rem 0 5.2rem; background:linear-gradient(112deg,#f8f5ee 0%,#f8f5ee 56%,#edf0e8 100%); }
.eyebrow { color:var(--forest); text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; font-weight:700; margin-bottom:1.25rem; }.eyebrow span { display:inline-block;width:25px;height:2px;background:var(--orange);vertical-align:middle;margin-right:8px; }
h1,h2,h3 { font-family:"Roboto Slab",Georgia,serif; font-weight:700; }.hero-section h1 { font-size:clamp(3rem,5vw,5rem); line-height:1.02; letter-spacing:-.045em; margin:0; }.hero-section h1 em,h2 em { color:var(--orange); font-weight:600; }.hero-copy { max-width:430px; margin:1.5rem 0 0; color:var(--muted); font-size:1.05rem; line-height:1.7; }.btn-primary { background:var(--forest); border-color:var(--forest); }.btn-primary:hover { background:#113e37;border-color:#113e37; }.play-button { display:inline-grid; place-items:center; width:34px;height:34px;border:1px solid #c6cec9;border-radius:50%; margin-right:.4rem; }
.hero-stats { display:flex; gap:2.2rem; margin-top:3.6rem; }.hero-stats div { display:grid;gap:.18rem; }.hero-stats strong { font-family:"Roboto Slab",Georgia,serif; font-size:1.4rem; }.hero-stats span { color:var(--muted);font-size:.72rem; }
.placeholder-photo { position:relative; overflow:hidden; background-color:#b7cdb8; }.hero-visual { height:480px; border-radius:160px 160px 16px 16px; background:linear-gradient(180deg,#b9d7d0 0%,#dce2bb 49%,#789b6f 50%,#315e56 100%); box-shadow:18px 20px 0 #e5e4d7; }.sun { position:absolute;width:106px;height:106px;border-radius:50%;background:#f7c76f;top:18%;right:19%; }.mountain { position:absolute; bottom:-5%; clip-path:polygon(0 100%,51% 0,100% 100%); }.mountain-back { left:-12%;width:100%;height:54%;background:#719a7a;opacity:.8; }.mountain-front { right:-14%;width:96%;height:44%;background:#35655a; }.photo-label { position:absolute;z-index:4;top:18px;left:18px; padding:.42rem .65rem;background:rgba(255,255,255,.82);color:#53635d;border-radius:20px;font-size:.66rem;letter-spacing:.025em; }.visual-caption { position:absolute;z-index:3;bottom:25px;left:30px;color:#fff;display:grid;gap:.15rem; }.visual-caption span { font-size:.67rem;letter-spacing:.16em; }.visual-caption strong { font-family:"Roboto",sans-serif;font-size:.88rem;letter-spacing:.03em; }
.section-space { padding:6.5rem 0; }.about-section { background:white; }.about-image { height:380px; border-radius:8px 120px 8px 8px; background:linear-gradient(145deg,#cea97d 0%,#f0d7ad 37%,#8cad84 38%,#2f655c 100%); }/* .about-image:after { content:"";position:absolute;width:110%;height:48%;bottom:-10%;left:-5%;background:linear-gradient(150deg,transparent 30%,#557c61 31%,#335b50 78%);clip-path:polygon(0 63%,100% 0,100% 100%,0 100%) ; }*/.about-stamp { position:absolute;z-index:2;bottom:20px;right:-23px;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--orange);color:white;text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.1em;line-height:1.5; }.about-section h2,.explore-section h2,.cta-section h2 { font-size:clamp(2.35rem,3.6vw,3.6rem);line-height:1.1;letter-spacing:-.035em;margin-bottom:1.4rem; }.section-copy { max-width:510px;color:var(--muted);line-height:1.8;font-size:1rem; }.text-link { display:inline-block;margin-top:1rem;color:var(--forest);font-weight:700;text-decoration:none;border-bottom:1px solid #93aaa2;padding-bottom:.4rem; }.text-link i { margin-left:.55rem; }.explore-section { background:#eef3ee; }.destination-card { position:relative;overflow:hidden;display:block;height:390px;border-radius:8px;color:white;text-decoration:none;isolation:isolate;background:#496c59; }.destination-card:before { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,41,36,.05),rgba(10,41,36,.88));z-index:1; }.destination-card:hover { color:white;transform:translateY(-4px);transition:.25s ease; }.destination-one { background:linear-gradient(150deg,#afc39a 0%,#e1dca8 34%,#5b805f 35%,#193f3b 100%); }.destination-two { background:linear-gradient(130deg,#d2ae85 0%,#edc994 40%,#8f6c52 41%,#3f4841 100%); }.destination-three { background:linear-gradient(150deg,#e5b179 0%,#eddb9c 32%,#6f9d78 33%,#214d44 100%); }.destination-content { position:absolute;z-index:2;bottom:0;left:0;width:100%;padding:1.6rem;color:#fff; }.destination-content span { font-size:.7rem;letter-spacing:.14em;opacity:.8; }.destination-content h3 { font-size:1.65rem;line-height:1.1;max-width:250px;margin:.45rem 0 0; }.destination-content > i { position:absolute;right:1.5rem;bottom:1.8rem;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:50%; }.destination-card .photo-label { color:#53635d; }
.cta-section { padding:5rem 0;background:var(--forest);color:#fff; }.cta-section .eyebrow { color:#d6e2d9; }.cta-section h2 { margin:0; }.cta-inner { display:flex;align-items:center;justify-content:space-between;gap:2rem; }.site-footer { padding:1.5rem 0;background:#102f2a;color:#b8cac1;font-size:.78rem; }
@media (max-width:991.98px) { .navbar-nav { align-items:flex-start!important;padding:1rem 0;gap:.6rem!important; }.hero-section { padding-top:3rem; }.hero-visual { max-width:570px; }.section-space { padding:4.7rem 0; } }
@media (max-width:575.98px) { .hero-section { min-height:0;padding-bottom:3.8rem; }.hero-stats { gap:1.15rem;margin-top:2.5rem; }.hero-stats strong { font-size:1.15rem; }.hero-stats span { font-size:.63rem; }.hero-visual { height:355px;border-radius:105px 105px 12px 12px; }.about-image { height:320px; }.about-stamp { right:10px; }.destination-card { height:330px; }.cta-inner { align-items:flex-start;flex-direction:column; }.cta-section { padding:3.8rem 0; } }

/* Indonesia Virtual Tour colour system */
:root { --ink:#000; --forest:#000; --cream:#f7f5f2; --orange:#d2500a; --muted:#68635e; }
.site-header { background:#000; position:sticky; top:0; z-index:1030; box-shadow:0 1px 0 rgba(255,255,255,.08); }
html { scroll-padding-top:150px; }
.brand img { display:block; width:158px; max-height:38px; object-fit:contain; object-position:left center; }
.navbar-toggler { color:#fff; }
.nav-link { color:#dedede; }.nav-link:hover,.nav-link.active { color:#d2500a; }
/* Bootstrap memberi .navbar-nav .nav-link.active warna gelap bawaannya, yang
   hilang di atas navbar hitam. Variabelnya ditimpa langsung di sini. */
.site-header .navbar { --bs-navbar-color:#dedede; --bs-navbar-hover-color:#d2500a; --bs-navbar-active-color:#d2500a; --bs-navbar-brand-color:#fff; --bs-navbar-brand-hover-color:#fff; }
.site-header .navbar-nav .nav-link { position:relative; }
.site-header .navbar-nav .nav-link:hover,.site-header .navbar-nav .nav-link:focus { color:#d2500a; }
.site-header .navbar-nav .nav-link.active { color:#d2500a; font-weight:700; }
.site-header .navbar-nav .nav-link.active:after { content:""; position:absolute; left:0; right:0; bottom:-.3rem; height:2px; border-radius:2px; background:#d2500a; }

/* Menu mobile: panel yang menggeser masuk dari kiri.
   Mulai lg, Bootstrap sendiri yang mengembalikannya jadi baris menu biasa. */
.site-nav-panel { background:#000; }
@media (max-width:991.98px) {
    /* 45% layar, dengan batas bawah supaya "Tentang Jakarta" tidak terpotong di ponsel kecil */
    .site-nav-panel { width:45%; min-width:210px; max-width:420px; border-right:1px solid rgba(255,255,255,.12); }
    .site-nav-panel .offcanvas-header { padding:1.15rem 1.15rem .35rem; }
    .site-nav-panel .offcanvas-title { color:#8a8a8a; font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
    .site-nav-panel .offcanvas-body { padding:.25rem 1.15rem 1.4rem; }
    .site-nav-panel .navbar-nav { width:100%; padding:0 !important; gap:0 !important; }
    .site-nav-panel .nav-item + .nav-item { border-top:1px solid rgba(255,255,255,.07); }
    .site-nav-panel .nav-link { display:block; padding:.7rem 0; font-size:.92rem; }
    .site-nav-panel .nav-link.active:after { display:none; }
    .site-nav-panel .nav-link.active { padding-left:.6rem; border-left:2px solid #d2500a; }
    .site-nav-panel .btn-dark { display:block; margin-top:1rem; text-align:center; }
    .offcanvas-backdrop.show { opacity:.62; }
}
.navbar .btn-dark { background:#d2500a; border-color:#d2500a; }.navbar .btn-dark:hover { background:#aa4006; border-color:#aa4006; }
.hero-section { background:linear-gradient(118deg,#f7f5f2 0%,#f7f5f2 56%,#f1e7df 100%); }
.btn-primary { background:#000; border-color:#000; }.btn-primary:hover { background:#d2500a; border-color:#d2500a; }
.hero-visual { background:linear-gradient(180deg,#d9bfac 0%,#e7d2b9 49%,#925b3c 50%,#211a17 100%); box-shadow:18px 20px 0 #dfd8d2; }.sun { background:#d2500a; }.mountain-back { background:#8e5943; }.mountain-front { background:#1e1916; }
.about-image { background:linear-gradient(145deg,#d39872 0%,#f0d7ad 37%,#986346 38%,#211a17 100%); }.about-image:after { background:linear-gradient(150deg,transparent 30%,#70422f 31%,#1c1715 78%); }
.explore-section { background:#eee8e3; }.destination-card:before { background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.9)); }.destination-one { background:linear-gradient(150deg,#ccaa87 0%,#eed6a6 34%,#875238 35%,#171312 100%); }.destination-two { background:linear-gradient(130deg,#d2ae85 0%,#edc994 40%,#8f4e30 41%,#29201d 100%); }.destination-three { background:linear-gradient(150deg,#e5ad76 0%,#eddb9c 32%,#b3633c 33%,#1d1816 100%); }
.text-link { border-color:#c7aaa0; }.cta-section { background:#000; }.cta-section .eyebrow { color:#f2b899; }.site-footer { background:#000; color:#aaa; border-top:1px solid #2f2f2f; }
.hero-visual { background-image:linear-gradient(180deg,rgba(0,0,0,.04) 36%,rgba(0,0,0,.76) 100%),url('../images/cover.jpg'); background-position:center; background-size:cover; }
.about-image { background-image:url('../images/suasana.jpg'); background-position:center; background-size:cover; }
.destination-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.destination-views { letter-spacing:.02em; opacity:.95; white-space:nowrap; }
.destination-views:before { content:"·"; margin:0 .3rem 0 .15rem; opacity:.65; }
.destination-views i { margin-right:.22rem; font-size:.78rem; vertical-align:-1px; }
/* Versi kecil dari .tour-overlay-badge di halaman detail: ikon VR di atas, 360° di bawah */
.destination-badge { position:absolute; z-index:2; right:1.5rem; bottom:1.75rem; width:52px; height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(0,0,0,.35); font-family:"Roboto",sans-serif; font-weight:700; line-height:1; color:#fff; transition:background .25s ease, border-color .25s ease; }
.destination-badge i { font-size:1.3rem; }
.destination-badge span { margin-top:.15rem; font-size:.55rem; letter-spacing:.08em; }
.destination-card:hover .destination-badge { background:var(--orange); border-color:var(--orange); }

/* Destination landing page */
.destination-hero { padding:1rem 0 5rem; background:linear-gradient(118deg,#f7f5f2 0%,#f7f5f2 56%,#f1e7df 100%); }
.back-link { display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); text-decoration:none; font-size:.85rem; font-weight:600; }
.back-link:hover { color:var(--orange); }
.destination-hero h1 { font-size:clamp(2.6rem,4.5vw,4rem); line-height:1.05; letter-spacing:-.04em; margin:0; }
.destination-description { margin-top:1.4rem; }
.destination-hero-image { position:relative; height:440px; overflow:hidden; border-radius:160px 160px 16px 16px; box-shadow:18px 20px 0 #dfd8d2; background:#d9bfac; }
.destination-hero-image img { width:100%; height:100%; object-fit:cover; display:block; }
.promo-section { background:#fff; }
.promo-section h2 em,.business-section h2 em { color:var(--orange); font-weight:600; }
.promo-card { height:100%; padding:1.8rem; background:var(--cream); border:1px solid #e7dfd8; border-radius:12px; }
.badge-promo { display:inline-block; margin-bottom:1rem; padding:.35rem .7rem; background:var(--orange); color:#fff; border-radius:20px; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.promo-card h3 { font-size:1.3rem; margin-bottom:.6rem; }
.promo-card p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.7; }
.business-section { background:#eee8e3; }
.business-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.4rem; background:#fff; border:1px solid #e7dfd8; border-radius:12px; color:var(--ink); text-decoration:none; }
.business-card:hover { border-color:var(--orange); color:var(--ink); }
.business-card strong { display:block; font-size:.98rem; }
.business-card small { color:var(--muted); font-size:.78rem; }
.business-card i { flex-shrink:0; width:36px; height:36px; display:grid; place-items:center; border:1px solid #d8cec6; border-radius:50%; color:var(--orange); }
.business-tour-card { display:block; height:100%; overflow:hidden; background:#fff; border:1px solid #e7dfd8; border-radius:12px; color:var(--ink); text-decoration:none; transition:border-color .2s ease, transform .2s ease; }
.business-tour-card:hover { border-color:var(--orange); color:var(--ink); transform:translateY(-3px); }
.business-tour-media { position:relative; display:block; }
.business-tour-image { display:block; width:100%; height:190px; object-fit:cover; background:#d9bfac; }
/* Ikon VR ditaruh di tengah gambar; kartunya sendiri yang jadi tautan tur. */
.business-tour-vr { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; gap:.1rem; width:74px; height:74px; border-radius:50%; background:rgba(23,45,43,.55); border:1px solid rgba(255,255,255,.6); color:#fff; backdrop-filter:blur(2px); transition:background-color .2s ease, transform .2s ease; }
.business-tour-vr i { font-size:1.5rem; line-height:1; }
.business-tour-vr small { font-size:.62rem; font-weight:700; letter-spacing:.08em; }
.business-tour-card:hover .business-tour-vr { background:var(--orange); border-color:var(--orange); transform:translate(-50%,-50%) scale(1.06); }
.business-tour-content { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem; }
.business-tour-content strong { display:block; font-size:.98rem; line-height:1.35; }
.business-tour-content small { display:block; margin-top:.2rem; color:var(--muted); font-size:.78rem; }
.business-tour-content i { flex-shrink:0; width:36px; height:36px; display:grid; place-items:center; border:1px solid #d8cec6; border-radius:50%; color:var(--orange); }
.business-empty { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.2rem 2.4rem; background:#fff; border:1px dashed #cbbcb1; border-radius:12px; }
.business-empty h3 { font-size:1.35rem; margin:0 0 .5rem; }
.business-empty p { margin:0; max-width:46ch; color:var(--muted); font-size:.92rem; line-height:1.7; }
@media (max-width:767.98px) { .business-empty { flex-direction:column; align-items:flex-start; gap:1.4rem; padding:1.8rem; } }
@media (max-width:991.98px) { .destination-hero-image { max-width:570px; height:380px; } }
@media (max-width:575.98px) { .destination-hero { padding-bottom:3.5rem; } .destination-hero-image { height:300px; border-radius:105px 105px 12px 12px; } .business-tour-image { height:170px; } }

/* Katalog destinasi */
.catalog-hero { padding:3.4rem 0 2.6rem; background:linear-gradient(118deg,#f7f5f2 0%,#f7f5f2 56%,#f1e7df 100%); }
.catalog-hero h1 { font-size:clamp(2.4rem,4.2vw,3.8rem); line-height:1.06; letter-spacing:-.04em; margin:0; }
.catalog-hero h1 em { color:var(--orange); font-weight:600; }
.catalog-section { padding:2.6rem 0 5.5rem; background:#eee8e3; }
.filter-bar { display:flex; flex-wrap:wrap; gap:.55rem; padding-bottom:.4rem; }
.filter-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; background:#fff; border:1px solid #e2d9d2; border-radius:26px; color:var(--ink); text-decoration:none; font-size:.9rem; font-weight:500; }
.filter-chip span { color:var(--muted); font-size:.76rem; }
.filter-chip:hover { border-color:var(--orange); color:var(--orange); }
.filter-chip.is-active { background:var(--orange); border-color:var(--orange); color:#fff; }
.filter-chip.is-active span { color:rgba(255,255,255,.75); }
.catalog-pagination { margin-top:2.5rem; }
.catalog-pagination .pagination { margin:0; }
.catalog-pagination .page-link { color:var(--ink); border-color:#e2d9d2; }
.catalog-pagination .page-item.active .page-link { background:var(--orange); border-color:var(--orange); color:#fff; }

/* Join — penawaran 360° Virtual Tour */
.join-hero { position:relative; overflow:hidden; padding:5rem 0 5.5rem; background:#0b0a09; color:#fff; }
.join-hero .eyebrow { color:#f2b899; }
.join-hero h1 { font-family:"Roboto Slab",Georgia,serif; font-weight:700; font-size:clamp(2.15rem,3.7vw,3.6rem); line-height:1.06; letter-spacing:-.035em; margin:0; }
.join-hero h1 em { color:var(--orange); font-weight:600; }
.join-hero-copy { max-width:470px; margin:1.5rem 0 0; color:#c6bfb9; font-size:1.02rem; line-height:1.8; }
.join-glow { position:absolute; border-radius:50%; filter:blur(90px); opacity:.42; }
.join-glow-one { width:30rem; height:30rem; background:#d2500a; top:-16rem; left:-10rem; }
.join-glow-two { width:20rem; height:20rem; background:#7a3a12; bottom:-12rem; right:2%; }
.join-stats strong { color:#fff; }.join-stats span { color:#9a938d; }
.join-hero .btn-primary { background:var(--orange); border-color:var(--orange); }.join-hero .btn-primary:hover { background:#aa4006; border-color:#aa4006; }
.join-panel { position:relative; padding:2.2rem; background:#141110; border:1px solid #2d2622; border-radius:16px; box-shadow:18px 20px 0 rgba(210,80,10,.13); }
.join-panel-tag { display:inline-block; padding:.32rem .7rem; border:1px solid #4a3d36; border-radius:20px; color:#c6bfb9; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; }
.join-panel-title { margin:1.5rem 0 0; font-family:"Roboto Slab",Georgia,serif; font-weight:800; font-size:clamp(2.4rem,4vw,3.3rem); line-height:.98; letter-spacing:-.03em; color:#fff; }
.join-panel-title em { color:var(--orange); }
.join-panel-quote { margin:1.5rem 0 0; color:#a9a29c; font-size:.9rem; line-height:1.75; }
.join-panel-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem; color:var(--orange); font-weight:700; font-size:.88rem; text-decoration:none; border-bottom:1px solid rgba(210,80,10,.45); padding-bottom:.35rem; }
.join-panel-link:hover { color:#f2853f; }
.benefit-card { display:flex; gap:1rem; padding:1.15rem 1.3rem; background:var(--cream); border:1px solid #e7dfd8; border-radius:12px; }
.benefit-card:hover { border-color:var(--orange); }
.benefit-no { flex-shrink:0; font-family:"Roboto Slab",Georgia,serif; font-weight:700; font-size:.85rem; color:var(--orange); padding-top:.15rem; }
.benefit-card strong { display:block; font-size:.98rem; }
.benefit-card p { margin:.3rem 0 0; color:var(--muted); font-size:.87rem; line-height:1.65; }
.builder-section { background:#0b0a09; color:#fff; }
.builder-section .eyebrow { color:#f2b899; }
.builder-section h2 { font-size:clamp(2.3rem,3.5vw,3.4rem); line-height:1.1; letter-spacing:-.035em; margin:0; }
.builder-section h2 em { color:var(--orange); font-weight:600; }
.join-muted { color:#a9a29c; }.join-muted strong { color:#fff; }
.builder-do { height:100%; padding:2rem; background:#141110; border:1px solid #2d2622; border-radius:16px; }
.builder-do-head { margin:0 0 1.3rem; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:#f2b899; font-weight:700; }
.builder-list { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.builder-list li { display:flex; gap:.85rem; color:#d6d0cb; font-size:.94rem; line-height:1.65; }
.builder-list i { flex-shrink:0; width:24px; height:24px; margin-top:.1rem; display:grid; place-items:center; border-radius:50%; background:rgba(210,80,10,.16); color:var(--orange); font-size:.8rem; }
.builder-note { margin:1.6rem 0 0; padding-top:1.3rem; border-top:1px solid #2d2622; color:#9a938d; font-size:.84rem; line-height:1.65; }
.builder-note i { color:var(--orange); margin-right:.4rem; }
.value-card { height:100%; padding:1.5rem; background:#141110; border:1px solid #2d2622; border-radius:14px; }
.value-card > i { display:grid; place-items:center; width:38px; height:38px; margin-bottom:1rem; border-radius:10px; background:rgba(210,80,10,.16); color:var(--orange); font-size:1.05rem; }
.value-card strong { display:block; font-size:.98rem; color:#fff; }
.value-card p { margin:.4rem 0 0; color:#9a938d; font-size:.85rem; line-height:1.65; }
.feature-card { height:100%; padding:1.8rem; background:#fff; border:1px solid #e2d9d2; border-radius:14px; }
.feature-card > i { display:grid; place-items:center; width:42px; height:42px; margin-bottom:1.1rem; border-radius:11px; background:#f7ece5; color:var(--orange); font-size:1.15rem; }
.feature-card h3 { font-size:1.15rem; margin:0 0 .5rem; }
.feature-card p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.7; }
.feature-mini { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.4rem; }
.feature-mini li { color:var(--muted); font-size:.85rem; }
.feature-mini li:before { content:"›"; color:var(--orange); margin-right:.5rem; font-weight:700; }
.feature-card-wide { display:flex; align-items:center; justify-content:space-between; gap:2.5rem; }
.feature-card-wide > div:first-child { max-width:340px; flex-shrink:0; }
.feature-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.feature-chips span { padding:.48rem .9rem; background:var(--cream); border:1px solid #e2d9d2; border-radius:20px; font-size:.82rem; color:#4a423d; }
.price-card { position:relative; height:100%; padding:2rem; background:var(--cream); border:1px solid #e2d9d2; border-radius:16px; }
.price-card-featured { background:#fff; border-color:var(--orange); box-shadow:0 0 0 3px rgba(210,80,10,.09); }
.price-badge { display:inline-block; margin-bottom:.9rem; padding:.35rem .7rem; background:var(--orange); color:#fff; border-radius:20px; font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.price-card h3 { font-size:1.45rem; margin:0; }
.price-sub { margin:.4rem 0 1.4rem; color:var(--muted); font-size:.86rem; }
.price-list { list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.price-list li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; border-top:1px solid #e7dfd8; }
.price-list strong { display:block; font-size:.95rem; }
.price-list small { color:var(--muted); font-size:.78rem; }
.price-amount { text-align:right; }
.price-amount del { display:block; color:#a49b94; font-size:.76rem; }
.price-amount span { font-family:"Roboto Slab",Georgia,serif; font-weight:700; font-size:1.02rem; color:var(--orange); }
.price-amount small { color:var(--muted); font-size:.72rem; font-weight:400; }
.price-amount-lg span { font-size:1.5rem; }
.price-add { margin:1.3rem 0 0; padding-top:1.2rem; border-top:1px solid #e7dfd8; color:var(--muted); font-size:.79rem; line-height:1.7; }
.price-sample { display:flex; align-items:center; gap:.85rem; margin-top:1.1rem; padding:.9rem 1.1rem; background:var(--cream); border:1px solid #e2d9d2; border-radius:12px; color:inherit; text-decoration:none; }
.price-sample:hover { border-color:var(--orange); background:#fff; }
.price-sample-thumb { position:relative; flex-shrink:0; width:96px; height:64px; border-radius:10px; overflow:hidden; background:#e7dfd8; }
.price-sample-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.price-sample-icon { position:absolute; inset:0; margin:auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; font-size:.95rem; box-shadow:0 2px 8px rgba(0,0,0,.28); }
.price-sample strong { display:block; font-size:.9rem; }
.price-sample small { color:var(--muted); font-size:.78rem; }
.price-sample .bi-arrow-up-right { color:var(--orange); font-size:.9rem; }
.builder-price { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.9rem 2.2rem; background:#0b0a09; border-radius:16px; color:#fff; }
.builder-price h3 { font-size:1.4rem; margin:.2rem 0 0; }
.builder-price p { margin:.5rem 0 0; color:#9a938d; font-size:.9rem; }
.builder-price .price-amount del { color:#7d746e; }.builder-price .price-amount span { color:#fff; }.builder-price .price-amount small { color:#9a938d; }
.text-link-inline { color:var(--orange); font-weight:600; }
.scope-grid { display:flex; flex-wrap:wrap; gap:.6rem; }
.scope-chip { padding:.72rem 1.15rem; background:#fff; border:1px solid #e2d9d2; border-radius:26px; font-size:.9rem; font-weight:500; }
.scope-chip:hover { border-color:var(--orange); color:var(--orange); }
.cta-section h2 em { color:var(--orange); font-weight:600; }
.contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:3.5rem; padding-top:2.2rem; border-top:1px solid #2f2f2f; }
.contact-grid span { display:block; color:#8d8681; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.5rem; }
.contact-grid strong { font-size:.92rem; font-weight:500; line-height:1.6; }
@media (max-width:991.98px) { .feature-card-wide { flex-direction:column; align-items:flex-start; gap:1.5rem; } .feature-card-wide > div:first-child { max-width:none; } .contact-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767.98px) { .builder-price { flex-direction:column; align-items:flex-start; gap:1.4rem; padding:1.8rem; } .builder-price .price-amount { text-align:left; } }
@media (max-width:575.98px) { .join-hero { padding:3.2rem 0 3.8rem; } .join-panel { padding:1.6rem; } .contact-grid { grid-template-columns:1fr; gap:1.3rem; } }

/* Deskripsi teks kaya — hasil editor Quill di halaman publik */
/* em dinolkan global untuk aksen judul, jadi di sini dikembalikan jadi miring. */
.rich-text em,.ql-editor em { font-style:italic; }
.rich-text u,.ql-editor u { text-decoration:underline; }
.rich-text s,.ql-editor s { text-decoration:line-through; }
.rich-text > :last-child { margin-bottom:0; }
.rich-text p { margin:0 0 1rem; }
.rich-text h2,.rich-text h3,.rich-text h4 { margin:1.6rem 0 .7rem; line-height:1.25; letter-spacing:-.02em; color:var(--ink); }
.rich-text h2 { font-size:1.5rem; }.rich-text h3 { font-size:1.25rem; }.rich-text h4 { font-size:1.08rem; }
.rich-text > :first-child { margin-top:0; }
.rich-text ul,.rich-text ol { margin:0 0 1rem; padding-left:1.35rem; }
.rich-text li { margin-bottom:.4rem; }
.rich-text blockquote { margin:0 0 1rem; padding:.15rem 0 .15rem 1.1rem; border-left:3px solid var(--orange); color:var(--ink); font-style:italic; }
.rich-text hr { margin:1.6rem 0; border:0; border-top:1px solid #ddd4cc; }
.rich-text .ql-align-center { text-align:center; }
.rich-text .ql-align-right { text-align:right; }
.rich-text .ql-align-justify { text-align:justify; }
.rich-text .ql-indent-1 { padding-left:2.4rem; }
.rich-text .ql-indent-2 { padding-left:4.8rem; }
.rich-text .ql-indent-3 { padding-left:7.2rem; }
.rich-text .ql-indent-4 { padding-left:9.6rem; }
.rich-text .ql-indent-5 { padding-left:12rem; }

/* Editor teks kaya (Quill) di dashboard */
.rich-text-editor.ql-container { font-family:inherit; font-size:.95rem; border-color:#dee2e6; border-bottom-left-radius:.375rem; border-bottom-right-radius:.375rem; background:#fff; }
.ql-toolbar.ql-snow { border-color:#dee2e6; border-top-left-radius:.375rem; border-top-right-radius:.375rem; background:#fff; }
.rich-text-editor .ql-editor { line-height:1.7; }
.rich-text-editor .ql-editor.ql-blank:before { font-style:normal; color:#9aa0a6; }
.rich-text-editor.is-invalid.ql-container { border-color:#dc3545; }
.rich-text-editor.is-invalid + .ql-toolbar,.ql-toolbar.ql-snow + .rich-text-editor.is-invalid { border-color:#dc3545; }

/* Tombol virtual tour sebagai overlay di atas gambar hero destinasi */
.tour-overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; color:#fff; text-decoration:none; background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42)); transition:background .25s ease; }
.tour-overlay:hover,.tour-overlay:focus-visible { color:#fff; background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.55)); }
.tour-overlay-badge { display:grid; place-items:center; width:98px; height:98px; border:1px solid rgba(255,255,255,.6); border-radius:50%; background:rgba(0,0,0,.35); line-height:1; transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.tour-overlay-badge i { font-size:2.3rem; }
.tour-overlay-badge span { margin-top:.15rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; }
.tour-overlay:hover .tour-overlay-badge { background:var(--orange); border-color:var(--orange); transform:scale(1.05); }
.tour-overlay-label { padding:.5rem 1.2rem; border-radius:24px; background:rgba(0,0,0,.6); font-size:.9rem; font-weight:600; }

/* Deskripsi panjang dipangkas, selebihnya dibuka lewat modal */
.read-more-button { display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; padding:0; border:0; background:none; color:var(--orange); font-size:.92rem; font-weight:700; }
.read-more-button:hover { color:#a83e07; text-decoration:underline; }
.read-more-button i { font-size:.78rem; }
.modal-body.rich-text { padding:1.5rem; color:var(--muted); line-height:1.8; }
.modal-body.rich-text h2,.modal-body.rich-text h3,.modal-body.rich-text h4 { color:var(--ink); }
@media (max-width:575.98px) {
    .tour-overlay-badge { width:78px; height:78px; }
    .tour-overlay-badge i { font-size:1.8rem; }
    .tour-overlay-label { font-size:.82rem; padding:.4rem 1rem; }
}

/* Penanda bisnis mengambang (halaman detail destinasi)
   ------------------------------------------------------------------ */

/* z-index 1030 = setara navbar, jadi panel menu mobile (1045) tetap menutupinya */
.business-peek { position:fixed; right:1.5rem; bottom:1.5rem; z-index:1030; display:block; width:min(320px,calc(100vw - 2rem)); padding:.7rem .8rem; border-radius:15px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 32px rgba(0,0,0,.3); color:#fff; text-decoration:none; animation:business-peek-bounce 2.4s ease-in-out infinite; transition:opacity .3s ease, visibility .3s ease; }
.business-peek:hover,.business-peek:focus-visible { color:#fff; background:rgba(0,0,0,.7); animation-play-state:paused; }
/* Disembunyikan lewat JS begitu seksi #bisnis sudah terlihat — tidak perlu lagi. */
.business-peek.is-hidden { opacity:0; visibility:hidden; pointer-events:none; animation:none; }
.business-peek-title { display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; color:rgba(255,255,255,.82); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
/* Panahnya ikut ukuran teks judul: em, bukan rem. */
.business-peek-arrow { flex:0 0 auto; display:grid; place-items:center; width:1.7em; height:1.7em; border-radius:50%; background:var(--orange); color:#fff; font-size:inherit; letter-spacing:0; }
.business-peek-body { display:flex; align-items:flex-start; gap:.55rem; }
/* min-width:0 supaya nama panjang boleh terpotong, bukan melebarkan kartunya */
.business-peek-item { flex:1 1 0; min-width:0; max-width:305px; }
.business-peek-item img,.business-peek-item .placeholder-photo { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:9px; background-color:#d9bfac; }
.business-peek-item small { display:block; margin-top:.3rem; font-size:.7em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Kalau bisnisnya cuma satu, jangan biarkan gambarnya melebar sepenuh kartu:
   kunci selebar kolom yang sama seperti saat ada dua bisnis. */
.business-peek-item:only-child { flex:0 0 calc(50% - (.55rem / 2)); }
@keyframes business-peek-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce) { .business-peek { animation:none; } }
/* Di ponsel cukup 40% lebar layar supaya tidak menutupi isi halaman */
@media (max-width:575.98px) {
    .business-peek { right:1rem; bottom:1rem; width:40vw; padding:.5rem .55rem; border-radius:12px; }
    .business-peek-title { gap:.25rem; margin-bottom:.35rem; font-size:.55rem; letter-spacing:.04em; }
    .business-peek-body { gap:.35rem; }
    .business-peek-item:only-child { flex-basis:calc(50% - (.35rem / 2)); }
}

/* Tombol WhatsApp mengambang (halaman Join)
   ------------------------------------------------------------------ */

/* z-index 1030 = setara navbar, jadi panel menu mobile (1045) tetap menutupinya */
.whatsapp-float { position:fixed; right:1.5rem; bottom:1.5rem; z-index:1030; display:inline-flex; align-items:center; gap:.6rem; height:58px; padding:0 1.3rem 0 1.1rem; border-radius:32px; background:#25d366; color:#fff; font-size:.9rem; font-weight:700; text-decoration:none; box-shadow:0 12px 28px rgba(37,211,102,.36); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.whatsapp-float:hover,.whatsapp-float:focus-visible { background:#1eb857; color:#fff; transform:translateY(-2px); box-shadow:0 16px 34px rgba(37,211,102,.48); }
.whatsapp-float i { font-size:1.65rem; line-height:1; }
/* Denyut halus supaya tombolnya menarik perhatian tanpa bergerak-gerak */
.whatsapp-float:after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:whatsapp-pulse 2.6s infinite; pointer-events:none; }
@keyframes whatsapp-pulse { 70% { box-shadow:0 0 0 15px rgba(37,211,102,0); } 100% { box-shadow:0 0 0 0 rgba(37,211,102,0); } }
@media (prefers-reduced-motion:reduce) { .whatsapp-float:after { animation:none; } .whatsapp-float:hover { transform:none; } }
/* Di ponsel tinggal lingkaran ikon, supaya tidak menutupi isi halaman */
@media (max-width:575.98px) {
    .whatsapp-float { right:1rem; bottom:1rem; width:56px; height:56px; padding:0; justify-content:center; }
    .whatsapp-float-label { display:none; }
}

/* Pemilih bahasa (Google Translate dengan tampilan sendiri)
   ------------------------------------------------------------------ */

/* Tampilan bawaan Google — bilah atas, tooltip, sorotan kuning — dimatikan.
   Bilah atasnya muncul dalam dua bentuk: versi lama memakai .goog-te-banner-frame,
   versi baru memakai nama class acak. Keduanya iframe anak langsung <body>,
   jadi selektor terakhirlah yang tetap bekerja saat namanya berganti lagi. */
#google_translate_element { display:none !important; }
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,.goog-te-gadget { display:none !important; }
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd,.VIpgJd-ZVi9od-ORHb-OEVmcd { display:none !important; }
body > iframe.skiptranslate,body > .skiptranslate { display:none !important; visibility:hidden !important; }
/* Google menggeser halaman ke bawah untuk memberi ruang bilahnya */
body { top:0 !important; position:static !important; }
html { margin-top:0 !important; }
/* Tooltip "teks asli" dan sorotan kuning saat kursor melewati teks terjemahan */
#goog-gt-tt,.goog-te-balloon-frame,.VIpgJd-yAWNEb-L7lbkb { display:none !important; }
.goog-text-highlight,.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background:none !important; box-shadow:none !important; }

.language-switcher { display:flex; align-items:center; }
.language-toggle { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; padding:.38rem .85rem; border:1px solid rgba(255,255,255,.24); border-radius:24px; background:rgba(255,255,255,.06); color:#e9e9e9; font-size:.82rem; font-weight:700; letter-spacing:.04em; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.language-toggle:hover,.language-switcher.show .language-toggle { border-color:#d2500a; background:rgba(210,80,10,.2); color:#fff; }
.language-toggle .bi-translate { font-size:1rem; color:#d2500a; }
.language-toggle.dropdown-toggle:after { margin-left:.1rem; border-top-color:currentColor; opacity:.7; }

.language-menu { min-width:236px; margin-top:.6rem; padding:.4rem; border:1px solid #232323; border-radius:14px; background:#121212; box-shadow:0 20px 44px rgba(0,0,0,.5); }
.language-menu-title { padding:.45rem .7rem .55rem; color:#7d7d7d; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.language-menu .dropdown-item { display:flex; align-items:center; gap:.65rem; cursor:pointer; padding:.5rem .7rem; border-radius:9px; background:none; border:0; color:#dcdcdc; font-size:.87rem; }
.language-menu .dropdown-item:hover,.language-menu .dropdown-item:focus { background:rgba(255,255,255,.08); color:#fff; }
.language-menu .dropdown-item.is-active { background:rgba(210,80,10,.18); color:#fff; font-weight:600; }
.language-flag { font-size:1.1rem; line-height:1; }
.language-name { flex:1; }
/* Centang hanya muncul pada bahasa yang sedang dipakai */
.language-menu .dropdown-item .bi-check2 { font-size:.9rem; color:#d2500a; opacity:0; }
.language-menu .dropdown-item.is-active .bi-check2 { opacity:1; }

@media (max-width:991.98px) {
    .language-switcher { width:100%; margin-top:.9rem; }
    .language-toggle { width:100%; justify-content:center; }
    /* min-width bawaannya lebih lebar dari panel menu, jadi dilepas di sini */
    .language-menu { width:100%; min-width:0; padding:.3rem; }
    .language-menu .dropdown-item { gap:.5rem; padding:.45rem .5rem; font-size:.82rem; }
    .language-menu .language-flag { font-size:1rem; }
}

/* Halaman Tentang Jakarta
   ------------------------------------------------------------------ */

/* Slot gambar: kotak bergaris putus-putus selama berkasnya belum diunggah */
.photo-slot { position:relative; margin:0; }
.photo-slot img { display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; }
.photo-slot-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; height:100%; min-height:220px; padding:1.5rem; border:2px dashed #cdc2b8; border-radius:12px; background:#efe9e3; color:#8b8078; text-align:center; }
.photo-slot-empty i { font-size:1.9rem; opacity:.7; }
.photo-slot-label { font-size:.9rem; font-weight:600; color:#6f665f; line-height:1.45; }
.photo-slot-empty code { font-size:.72rem; color:#a1958c; word-break:break-all; }
.photo-slot figcaption { margin-top:.7rem; color:var(--muted); font-size:.82rem; line-height:1.6; }

.about-hero { padding:3.5rem 0 5rem; background:linear-gradient(118deg,#f7f5f2 0%,#f7f5f2 56%,#f1e7df 100%); }
.about-hero h1 { font-family:"Roboto Slab",Georgia,serif; font-size:clamp(2.6rem,4.4vw,4.2rem); line-height:1.05; letter-spacing:-.04em; margin:0; }
.about-hero h1 em { color:var(--orange); font-weight:600; }
.about-hero-photo img,.about-hero-photo .photo-slot-empty { height:420px; border-radius:120px 120px 16px 16px; }
.about-hero-photo img { box-shadow:18px 20px 0 #dfd8d2; }
.about-intro { background:#fff; padding-bottom:0; }
.about-intro h2 { font-size:clamp(2.1rem,3.2vw,3.1rem); line-height:1.12; letter-spacing:-.035em; }
.about-intro .section-copy + .section-copy { margin-top:1.1rem; }

.about-timeline { background:#fff; }
.timeline-intro { max-width:640px; margin-bottom:3.5rem; }
.timeline-intro h2 { font-size:clamp(2.1rem,3.2vw,3.1rem); line-height:1.12; letter-spacing:-.035em; margin-bottom:1.2rem; }

/* Tiap babak dipisah garis tipis, bukan kartu — supaya terbaca sebagai satu alur */
.timeline-era { padding:2.8rem 0; border-top:1px solid #e7ded6; }
.timeline-era:first-child { border-top:0; padding-top:0; }
.timeline-era-head { margin-bottom:1.8rem; }
.timeline-era-number { font-family:"Roboto Slab",Georgia,serif; font-size:.95rem; font-weight:700; color:var(--orange); }
.timeline-era-period { margin-left:.7rem; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.timeline-era-head h3 { font-size:clamp(1.6rem,2.4vw,2.15rem); line-height:1.15; letter-spacing:-.025em; margin:.6rem 0 .7rem; }
.timeline-era-head p { max-width:520px; margin:0; color:var(--muted); line-height:1.75; }

/* Rel vertikal dengan titik di setiap peristiwa */
.timeline-list { position:relative; margin:0; padding:0 0 0 1.75rem; list-style:none; border-left:2px solid #e7ded6; }
.timeline-item { position:relative; padding-bottom:1.9rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item:before { content:""; position:absolute; left:calc(-1.75rem - 7px); top:.35rem; width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#c8bcb2; box-shadow:0 0 0 1px #e7ded6; }
.timeline-item.is-highlight:before { background:var(--orange); box-shadow:0 0 0 1px var(--orange); }
.timeline-year { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }
.timeline-item h4 { font-family:"Roboto Slab",Georgia,serif; font-size:1.08rem; font-weight:700; margin:.35rem 0 .45rem; }
.timeline-item p { margin:0; color:var(--muted); font-size:.95rem; line-height:1.8; }
.timeline-photo img,.timeline-photo .photo-slot-empty { height:340px; }

.about-landmarks { background:#eee8e3; }
.about-landmarks h2 { font-size:clamp(2.1rem,3.2vw,3.1rem); line-height:1.12; letter-spacing:-.035em; margin:0; }
.landmark-card { height:100%; overflow:hidden; border:1px solid #e2d9d1; border-radius:12px; background:#fff; }
.landmark-card .photo-slot img,.landmark-card .photo-slot .photo-slot-empty { height:190px; border-radius:0; border-width:0 0 2px; }
.landmark-body { padding:1.1rem 1.3rem 1.3rem; }
.landmark-body h3 { font-size:1.15rem; margin:0 0 .35rem; }
.landmark-body p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.6; }

.about-sources { padding:3.5rem 0; background:#fff; border-top:1px solid #e7ded6; }
.source-list { margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
.source-list a { color:var(--muted); font-size:.88rem; text-decoration:none; }
.source-list a:hover { color:var(--orange); text-decoration:underline; }
.source-list i { font-size:.72rem; }

@media (min-width:992px) {
    /* Gambar ikut mengikuti selama daftar peristiwanya masih panjang */
    .timeline-photo { position:sticky; top:120px; }
}
@media (max-width:575.98px) {
    .about-hero { padding-bottom:3.5rem; }
    .about-hero-photo img,.about-hero-photo .photo-slot-empty { height:320px; border-radius:90px 90px 12px 12px; }
    .timeline-era { padding:2.2rem 0; }
    .timeline-list { padding-left:1.35rem; }
    .timeline-item:before { left:calc(-1.35rem - 7px); }
    .timeline-photo img,.timeline-photo .photo-slot-empty { height:250px; }
}

/* Halaman klaim voucher (/claim-voucher). Hero-nya meminjam gaya gelap dari
   halaman join, sisanya kartu formulir di atas latar terang. */
.claim-hero { position:relative; overflow:hidden; padding:4.5rem 0 5rem; background:#0b0a09; color:#fff; }
.claim-hero .eyebrow { color:#f2b899; }
.claim-hero h1 { font-family:"Roboto Slab",Georgia,serif; font-weight:700; font-size:clamp(2.05rem,3.5vw,3.4rem); line-height:1.06; letter-spacing:-.035em; margin:0; }
.claim-hero h1 em { color:var(--orange); font-weight:600; }
.claim-hero-done { padding:4rem 0 4.5rem; }
.claim-done-mark { display:inline-grid; place-items:center; width:62px; height:62px; margin-bottom:1.6rem; border-radius:50%; background:var(--orange); color:#fff; font-size:1.9rem; box-shadow:0 0 0 10px rgba(210,80,10,.16); }

/* Kartu voucher di hero: takik kiri-kanan dibuat dari dua lingkaran sewarna latar. */
.claim-ticket { position:relative; padding:2rem 1.9rem; background:#141110; border:1px solid #2d2622; border-radius:16px; box-shadow:18px 20px 0 rgba(210,80,10,.13); }
.claim-ticket:before,.claim-ticket:after { content:""; position:absolute; top:52%; width:22px; height:22px; border-radius:50%; background:#0b0a09; }
.claim-ticket:before { left:-12px; }.claim-ticket:after { right:-12px; }
.claim-ticket-tag { display:inline-block; padding:.32rem .7rem; border:1px solid #4a3d36; border-radius:20px; color:#c6bfb9; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; }
.claim-ticket-value { margin:1.3rem 0 0; font-family:"Roboto Slab",Georgia,serif; font-weight:800; font-size:clamp(2rem,3.2vw,2.7rem); line-height:1; letter-spacing:-.03em; color:var(--orange); }
.claim-ticket-code { margin:.9rem 0 0; padding-top:1.3rem; border-top:1px dashed #3a312c; font-family:ui-monospace,"Courier New",monospace; font-size:1.25rem; letter-spacing:.22em; color:#fff; }
.claim-ticket-code span { color:#6b615a; }
.claim-ticket-note { margin:1rem 0 0; color:#a9a29c; font-size:.82rem; line-height:1.7; }

/* Formulir */
.claim-form .form-label { font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.claim-form .form-control,.claim-form .form-select { padding:.62rem .85rem; border-color:#ddd3cb; border-radius:10px; font-size:.94rem; }
.claim-form .form-control:focus,.claim-form .form-select:focus { border-color:var(--orange); box-shadow:0 0 0 .2rem rgba(210,80,10,.15); }
.claim-form .form-text { font-size:.79rem; color:var(--muted); }
.claim-required { color:var(--orange); }
.claim-field-error { margin-bottom:.6rem; color:#b02a1b; font-size:.83rem; }
.claim-code-input { font-family:ui-monospace,"Courier New",monospace; letter-spacing:.14em; text-transform:uppercase; }
.claim-code-status.is-checking { color:var(--muted); }
.claim-code-status.is-valid { color:#177245; font-weight:600; }
.claim-code-status.is-invalid { color:#b02a1b; font-weight:600; }

/* Pilihan paket sebagai kartu radio */
.claim-pack-group { margin-top:1rem; }
.claim-pack-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem; margin-bottom:.6rem; }
.claim-pack-head strong { font-family:"Roboto Slab",Georgia,serif; font-size:1rem; }
.claim-pack-head span { color:var(--muted); font-size:.78rem; }
.claim-pack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.claim-pack { position:relative; display:flex; gap:.6rem; padding:.9rem; background:var(--cream); border:1px solid #e2d9d2; border-radius:12px; cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease; }
.claim-pack:hover { border-color:#c9b7aa; }
.claim-pack .form-check-input { flex:0 0 auto; margin-top:.15rem; }
.claim-pack .form-check-input:checked { background-color:var(--orange); border-color:var(--orange); }
.claim-pack:has(.form-check-input:checked) { border-color:var(--orange); background:#fff; box-shadow:0 0 0 3px rgba(210,80,10,.1); }
.claim-pack:has(.form-check-input:focus-visible) { outline:2px solid var(--orange); outline-offset:2px; }
.claim-pack-body { display:grid; gap:.12rem; min-width:0; }
.claim-pack-name { font-weight:700; font-size:.92rem; }
.claim-pack-photos { color:var(--muted); font-size:.76rem; }
.claim-pack-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem; margin-top:.3rem; }
.claim-pack-price del { color:#a49a92; font-size:.74rem; }
.claim-pack-price strong { font-size:.92rem; }
.claim-pack-after { margin-top:.15rem; color:#177245; font-size:.73rem; }

/* Kolom kanan */
.claim-aside { position:sticky; top:100px; padding:1.8rem; background:var(--cream); border:1px solid #e6ddd6; border-radius:16px; }
.claim-aside-title { margin:0 0 1.1rem; font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.claim-steps { counter-reset:claim-step; list-style:none; margin:0; padding:0; }
.claim-steps li { position:relative; padding:0 0 1.15rem 2.4rem; }
.claim-steps li:before { counter-increment:claim-step; content:counter(claim-step); position:absolute; left:0; top:0; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--orange); color:#fff; font-size:.75rem; font-weight:700; }
.claim-steps li:not(:last-child):after { content:""; position:absolute; left:13px; top:30px; bottom:.35rem; width:1px; background:#ddd3cb; }
.claim-steps strong { display:block; font-size:.9rem; }
.claim-steps span { display:block; margin-top:.2rem; color:var(--muted); font-size:.82rem; line-height:1.65; }
.claim-aside-note { display:flex; gap:.7rem; padding:.9rem 1rem; margin-top:.4rem; background:#fff; border:1px solid #e6ddd6; border-radius:10px; color:var(--muted); font-size:.82rem; line-height:1.65; }
.claim-aside-note i { color:var(--orange); }
.claim-aside-help { margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid #e0d6ce; font-size:.84rem; }
.claim-aside-help span { display:block; color:var(--muted); margin-bottom:.3rem; }
.claim-aside-help a { color:var(--orange); font-weight:600; text-decoration:none; }
.claim-aside-help a:hover { color:#aa4006; }

/* Halaman bukti klaim */
.claim-receipt { padding:2rem; background:var(--cream); border:1px solid #e2d9d2; border-radius:16px; }
.claim-receipt-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-bottom:1.3rem; margin-bottom:1.3rem; border-bottom:1px dashed #d5c9c0; }
.claim-receipt-head span { display:block; color:var(--muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.claim-receipt-head strong { font-family:ui-monospace,"Courier New",monospace; font-size:1.4rem; letter-spacing:.12em; }
.claim-receipt-value { color:var(--orange); font-family:"Roboto Slab",Georgia,serif; letter-spacing:-.02em; }
.claim-receipt-list { margin:0; }
.claim-receipt-list > div { display:grid; grid-template-columns:180px 1fr; gap:1rem; padding:.55rem 0; border-bottom:1px solid #ece4dd; }
.claim-receipt-list > div:last-child { border-bottom:0; }
.claim-receipt-list dt { color:var(--muted); font-weight:400; font-size:.86rem; }
.claim-receipt-list dd { margin:0; font-size:.92rem; }
.claim-receipt-note { display:flex; gap:.6rem; margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px dashed #d5c9c0; color:var(--muted); font-size:.82rem; line-height:1.7; }
.claim-receipt-note i { color:var(--orange); }

@media (max-width:991.98px) {
    .claim-aside { position:static; }
    .claim-pack-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575.98px) {
    .claim-hero { padding:3.2rem 0 3.8rem; }
    .claim-ticket { padding:1.6rem; }
    .claim-pack-grid { grid-template-columns:1fr; }
    .claim-receipt { padding:1.4rem; }
    .claim-receipt-list > div { grid-template-columns:1fr; gap:.15rem; }
}

/* Kartu destinasi & bisnis — dua kolom di layar kecil */
@media (max-width:767.98px) {
  .destination-card { height:300px; border-radius:10px; }
  .destination-content { padding:1.05rem 1.1rem; }
  .destination-content span { font-size:.62rem; }
  .destination-content h3 { max-width:none; padding-right:3rem; font-size:1.2rem; margin-top:.35rem; }
  .destination-views i { font-size:.7rem; }
  .destination-badge { right:1rem; bottom:1.1rem; width:44px; height:44px; }
  .destination-badge i { font-size:1.1rem; }
  .destination-badge span { font-size:.5rem; }

  .business-tour-card { border-radius:10px; }
  .business-tour-image { height:150px; }
  .business-tour-vr { width:58px; height:58px; }
  .business-tour-vr i { font-size:1.2rem; }
  .business-tour-vr small { font-size:.55rem; }
  .business-tour-content { gap:.6rem; padding:.9rem 1rem; }
  .business-tour-content span { min-width:0; overflow-wrap:anywhere; }
  .business-tour-content strong { font-size:.9rem; }
  .business-tour-content small { font-size:.74rem; }
  .business-tour-content i { width:30px; height:30px; font-size:.8rem; }
}
@media (max-width:479.98px) {
  .destination-card { height:228px; }
  .destination-content { padding:.8rem .85rem; }
  .destination-content span { font-size:.56rem; }
  .destination-content h3 { padding-right:2.5rem; font-size:1rem; margin-top:.28rem; }
  .destination-badge { right:.75rem; bottom:.8rem; width:36px; height:36px; }
  .destination-badge i { font-size:.92rem; }
  .destination-badge span { font-size:.44rem; margin-top:.1rem; }

  .business-tour-image { height:112px; }
  .business-tour-vr { width:46px; height:46px; }
  .business-tour-vr i { font-size:1rem; }
  .business-tour-vr small { font-size:.48rem; }
  .business-tour-content { gap:.5rem; padding:.75rem .8rem; }
  .business-tour-content strong { font-size:.82rem; }
  .business-tour-content small { font-size:.68rem; }
  .business-tour-content i { width:26px; height:26px; font-size:.72rem; }
}

/* ── Identitas Jakarta ──────────────────────────────────────────────────
   Lisplang "gigi balang": ukiran kayu bergerigi di tepi atap rumah Betawi.
   Dipasang berulang di bawah navbar sebagai penanda khas ibu kota.
   --gigi-h = tinggi motif utuh; elemennya dibuat lebih pendek dan motif
   ditambatkan ke bawah, sehingga pita emas di bagian atas ikut terpangkas
   dan hanya menyisakan garis tipis di atas deretan gigi. */
.site-header { background:transparent; box-shadow:none; pointer-events:none; }
.site-header-bar { background:#000; box-shadow:0 1px 0 rgba(255,255,255,.08); pointer-events:auto; }
.gigi-balang { --gigi-h:64px; height:calc(var(--gigi-h) * .78); background:url("../../img/gigi-balang.png") repeat-x center bottom; background-size:auto var(--gigi-h); pointer-events:none; }
@media (max-width:991.98px) { .gigi-balang { --gigi-h:48px; } html { scroll-padding-top:116px; } }
@media (max-width:575.98px) { .gigi-balang { --gigi-h:38px; } html { scroll-padding-top:104px; } }

/* Siluet cakrawala ibu kota di dasar hero — Monas, kubah masjid, dan deretan
   gedung — pengganti dua orb dekoratif yang sebelumnya dipakai. */
.hero-skyline { position:absolute; left:0; right:0; bottom:0; aspect-ratio:1440/150; z-index:0; pointer-events:none; }
@media (max-width:991.98px) { .hero-skyline { aspect-ratio:auto; height:132px; } }
@media (max-width:575.98px) { .hero-skyline { height:104px; } }
.hero-skyline svg { display:block; width:100%; height:100%; }
.skyline-city { fill:#211a17; opacity:.085; }
.skyline-monas { fill:#211a17; opacity:.17; }
.skyline-flame { fill:#d2500a; opacity:.5; }