/* ========================================================================== KANINDRA WISATA — Design System Palet: Charcoal · Emas · Ivory | Marcellus + Plus Jakarta Sans Struktur: 01 Token & reset 06 Kartu & paket 02 Tipografi & layout 07 Galeri, lightbox, video 03 Tombol & badge 08 Testimoni, FAQ, timeline 04 Header & navigasi 09 Form & kontak 05 Hero & section 10 Footer, WA float, utilitas, responsif ========================================================================== */ /* ---------- 01 TOKEN ------------------------------------------------------ */ /* PALET KANINDRA — Hitam/Charcoal + Emas (mewah, eksklusif; sesuai brosur). Nama variabel dipertahankan; "--merah" di sini bernilai charcoal gelap. */ :root{ --merah: #26221B; /* primary: charcoal hangat mendekati hitam */ --merah-dark: #12100C; /* hover, footer, hero */ --merah-soft: #4A4238; /* aksen sekunder */ --gold: #C6A24E; /* emas */ --gold-soft: #E9D6A0; /* emas halus */ --cream: #F8F3E9; /* kanvas ivory hangat */ --putih: #FFFFFF; --ink: #1C1812; /* teks utama */ --muted: #6A6156; /* teks sekunder */ --line: #E9E0CF; /* garis pemisah */ --shadow: 0 10px 30px rgba(18,16,12,.10); --shadow-sm: 0 2px 10px rgba(18,16,12,.06); --shadow-lg: 0 24px 60px rgba(18,16,12,.18); --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --font-serif: "Marcellus", "Playfair Display", Georgia, serif; --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --container: 1180px; --gutter: clamp(1rem, 4vw, 2rem); --section-y: clamp(3.5rem, 8vw, 6.5rem); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video,iframe{ max-width:100%; height:auto; display:block; } img{ background:linear-gradient(120deg,#F3EDE2,#FBF7F0); } a{ color:var(--merah); text-decoration:none; transition:color .25s var(--ease); } a:hover{ color:var(--gold); } button{ font:inherit; } ul,ol{ margin:0; padding:0; } li{ list-style:none; } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--merah); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; color:#fff; } ::selection{ background:var(--gold-soft); color:var(--ink); } /* ---------- 02 TIPOGRAFI & LAYOUT ---------------------------------------- */ h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:400; /* Marcellus hanya tersedia weight 400 */ line-height:1.2; margin:0 0 .6em; letter-spacing:.005em; } h1{ font-size:clamp(2.2rem, 5.4vw, 3.7rem); } h2{ font-size:clamp(1.8rem, 3.9vw, 2.7rem); } h3{ font-size:clamp(1.18rem, 2.2vw, 1.5rem); } h4{ font-size:1.05rem; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .container--narrow{ max-width:860px; } .section{ padding-block:var(--section-y); position:relative; } .section--cream{ background:var(--cream); } .section--white{ background:var(--putih); } .section--tint{ background:linear-gradient(180deg,#FFFFFF 0%, #FBF7F0 100%); } .section--dark{ background:var(--merah-dark); color:#F6EDE3; } .section--dark h2,.section--dark h3{ color:#fff; } .section--dark .section-head__sub{ color:rgba(255,255,255,.72); } .section-head{ max-width:720px; margin:0 auto clamp(2rem,4vw,3.2rem); text-align:center; } .section-head--left{ margin-inline:0; text-align:left; } .section-head__eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-sans); font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; } .section-head__eyebrow::before, .section-head__eyebrow::after{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); } .section-head--left .section-head__eyebrow::before{ display:none; } .section-head__eyebrow::after{ background:linear-gradient(90deg,var(--gold),transparent); } .section-head__sub{ color:var(--muted); font-size:1.02rem; margin:0; } /* Ornamen emas halus */ .gold-rule{ width:88px; height:2px; margin:1.2rem auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); position:relative; } .gold-rule::after{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%) rotate(45deg); background:var(--gold); } .section-head--left .gold-rule{ margin-inline:0; } .arabesque{ position:absolute; inset:auto; pointer-events:none; opacity:.05; background-repeat:repeat; background-size:120px 120px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2326221B' stroke-width='1'%3E%3Cpath d='M60 8 112 60 60 112 8 60z'/%3E%3Cpath d='M60 28 92 60 60 92 28 60z'/%3E%3Ccircle cx='60' cy='60' r='16'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- 03 TOMBOL & BADGE -------------------------------------------- */ .btn{ --btn-bg:var(--merah); --btn-fg:#fff; --btn-bd:transparent; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.85rem 1.6rem; font-family:var(--font-sans); font-size:.95rem; font-weight:600; line-height:1.2; color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd); border-radius:999px; cursor:pointer; text-align:center; transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease); box-shadow:0 6px 18px rgba(38,34,27,.16); } .btn:hover{ transform:translateY(-2px); color:var(--btn-fg); } .btn:active{ transform:translateY(0); } .btn--primary{ --btn-bg:var(--merah); --btn-fg:#fff; } .btn--primary:hover{ --btn-bg:var(--merah-dark); border-color:var(--gold); box-shadow:0 10px 26px rgba(38,34,27,.28); } .btn--gold{ --btn-bg:var(--gold); --btn-fg:#2A1F10; box-shadow:0 6px 18px rgba(196,162,76,.28); } .btn--gold:hover{ --btn-bg:var(--gold-soft); } .btn--outline{ --btn-bg:transparent; --btn-fg:var(--merah); --btn-bd:var(--gold); box-shadow:none; } .btn--outline:hover{ --btn-bg:var(--gold); --btn-fg:#2A1F10; --btn-bd:var(--gold); } .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); box-shadow:none; } .btn--ghost:hover{ --btn-bd:var(--gold); --btn-fg:var(--merah); } .btn--light{ --btn-bg:#fff; --btn-fg:var(--merah); box-shadow:0 8px 24px rgba(0,0,0,.14); } .btn--light:hover{ --btn-bg:var(--cream); } .btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.6); box-shadow:none; } .btn--outline-light:hover{ --btn-bg:rgba(255,255,255,.12); --btn-bd:var(--gold); } .btn--sm{ padding:.6rem 1.1rem; font-size:.85rem; } .btn--lg{ padding:1rem 2rem; font-size:1rem; } .btn--block{ display:flex; width:100%; } .badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--merah); color:#fff; } .badge--gold{ background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#2A1F10; } .badge--soft{ background:#F5EDE0; color:var(--merah); } .badge--open{ background:#E8F3EC; color:#1F6B41; } .badge--almost{ background:#FDF1E1; color:#9A5B12; } .badge--closed{ background:#F1EDEA; color:var(--muted); } .pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.8rem; color:var(--muted); } /* ---------- 04 HEADER & NAVIGASI ----------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(251,247,240,.88); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid transparent; transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .site-header.is-stuck{ background:rgba(255,255,255,.95); border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(18,16,12,.06); } .site-header__inner{ display:flex; align-items:center; gap:.5rem; min-height:76px; flex-wrap:nowrap; } .brand{ display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); flex:0 0 auto; } .brand:hover{ color:var(--ink); } .brand__mark{ display:grid; place-items:center; } .brand__text{ display:flex; flex-direction:column; line-height:1.15; } .brand__name{ font-family:var(--font-serif); font-size:1.12rem; font-weight:700; letter-spacing:.01em; } .brand__sub{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600; } .brand__logo{ height:44px; width:auto; object-fit:contain; background:none; } .site-nav{ margin-inline:auto; } .site-nav__list{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; } .site-nav__link{ position:relative; display:block; padding:.5rem .6rem; white-space:nowrap; letter-spacing:.01em; font-size:.88rem; font-weight:500; color:var(--ink); border-radius:8px; } .site-nav__link::after{ content:""; position:absolute; left:.6rem; right:.6rem; bottom:.3rem; height:1.5px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .site-nav__link:hover{ color:var(--merah); } .site-nav__link:hover::after, .site-nav__link.is-active::after{ transform:scaleX(1); } .site-nav__link.is-active{ color:var(--merah); font-weight:600; } .site-nav__close,.site-nav__mobile-cta{ display:none; } .site-header__actions{ display:flex; align-items:center; gap:.45rem; flex:0 0 auto; } .lang-switch{ display:inline-flex; align-items:center; gap:.15rem; padding:.25rem .5rem; border:1px solid var(--line); border-radius:999px; background:#fff; } .lang-switch__btn{ font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--muted); padding:.1rem .3rem; border-radius:6px; } .lang-switch__btn.is-active{ color:var(--merah); } .lang-switch__sep{ color:var(--line); font-size:.75rem; } .ico{ flex:0 0 auto; } .ico--wa{ stroke-width:1.4; } .nav-toggle{ display:none; width:42px; height:42px; padding:0; background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .nav-toggle span{ display:block; width:18px; height:1.7px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.7px) rotate(-45deg); } .nav-backdrop{ position:fixed; inset:0; z-index:98; background:rgba(18,16,12,.45); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; } .nav-backdrop.is-open{ opacity:1; visibility:visible; } /* ---------- 05 HERO & SECTION -------------------------------------------- */ .hero{ position:relative; isolation:isolate; min-height:clamp(560px, 88vh, 820px); display:flex; align-items:center; color:#fff; overflow:hidden; } .hero__bg{ position:absolute; inset:-8% 0 -8% 0; z-index:-2; } .hero__bg img{ width:100%; height:100%; object-fit:cover; } .hero__overlay{ position:absolute; inset:0; z-index:-1; background: radial-gradient(120% 90% at 20% 20%, rgba(38,34,27,.72) 0%, rgba(18,16,12,.82) 55%, rgba(10,9,6,.92) 100%); } .hero__inner{ padding-block:clamp(4rem,10vw,7rem); max-width:760px; } .hero__eyebrow{ display:inline-flex; align-items:center; gap:.6rem; padding:.4rem 1rem; margin-bottom:1.4rem; border:1px solid rgba(196,162,76,.55); border-radius:999px; background:rgba(255,255,255,.06); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); } .hero h1{ color:#fff; margin-bottom:.5em; text-shadow:0 2px 30px rgba(0,0,0,.28); } .hero h1 em{ font-style:italic; color:var(--gold-soft); } .hero__sub{ font-size:clamp(1rem,1.5vw,1.15rem); color:rgba(255,255,255,.86); max-width:56ch; } .hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; } .hero__meta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16); } .hero__meta-item{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:rgba(255,255,255,.8); } .hero__meta-item .ico{ color:var(--gold); } .hero__scroll{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); display:grid; place-items:center; gap:.4rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); } .hero__scroll span{ display:block; width:1px; height:34px; background:linear-gradient(180deg,var(--gold),transparent); animation:scrollHint 2.4s var(--ease) infinite; } @keyframes scrollHint{ 0%,100%{ transform:scaleY(.4); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } } /* Trust bar */ .trustbar{ background:var(--putih); border-block:1px solid var(--line); } .trustbar__grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); padding-block:2.2rem; } .trustbar__item{ display:flex; gap:.9rem; align-items:flex-start; } .trustbar__icon{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#FBF3E6; color:var(--merah); border:1px solid var(--line); } .trustbar__title{ font-family:var(--font-sans); font-weight:700; font-size:.95rem; margin:0 0 .15rem; } .trustbar__text{ font-size:.84rem; color:var(--muted); margin:0; line-height:1.55; } /* Statistik */ .stats{ background:linear-gradient(180deg,#FBF7F0,#F6EFE3); position:relative; overflow:hidden; } .stats__grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .stat-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.4rem; text-align:center; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .stat-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); } .stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .stat-card__icon{ color:var(--gold); margin-bottom:.6rem; display:flex; justify-content:center; } .stat-card__value{ font-family:var(--font-serif); font-size:clamp(2rem,4.5vw,2.8rem); font-weight:700; color:var(--merah); line-height:1; margin-bottom:.4rem; } .stat-card__label{ font-size:.85rem; color:var(--muted); letter-spacing:.02em; } /* ---------- 06 KARTU & PAKET --------------------------------------------- */ .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold-soft); } .card__body{ padding:1.5rem; } .card__title{ font-size:1.2rem; margin-bottom:.4rem; } .card__text{ color:var(--muted); font-size:.92rem; } .grid{ display:grid; gap:clamp(1rem,2.4vw,1.8rem); } .grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .grid--3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); } .grid--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } /* Kartu keunggulan */ .feature-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.6rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .feature-card::after{ content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(196,162,76,.14),transparent 70%); transition:transform .5s var(--ease); } .feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold-soft); } .feature-card:hover::after{ transform:scale(1.4); } .feature-card__icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#FBF3E6,#F5E7CE); color:var(--merah); border:1px solid rgba(196,162,76,.35); margin-bottom:1.1rem; } .feature-card h3{ font-size:1.12rem; margin-bottom:.45rem; } .feature-card p{ color:var(--muted); font-size:.9rem; margin:0; } /* Kartu paket */ .pkg-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); height:100%; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .pkg-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:var(--gold-soft); } .pkg-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#F3EDE2; } .pkg-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .pkg-card:hover .pkg-card__media img{ transform:scale(1.06); } .pkg-card__badges{ position:absolute; top:.85rem; left:.85rem; display:flex; gap:.4rem; flex-wrap:wrap; } .pkg-card__cat{ position:absolute; bottom:.85rem; left:.85rem; background:rgba(18,16,12,.6); color:#fff; backdrop-filter:blur(6px); padding:.28rem .7rem; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.06em; } .pkg-card__body{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; } .pkg-card__title{ font-size:1.2rem; margin-bottom:.5rem; } .pkg-card__title a{ color:var(--ink); } .pkg-card__title a:hover{ color:var(--merah); } .pkg-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; } .pkg-card__excerpt{ color:var(--muted); font-size:.88rem; margin-bottom:1rem; } .pkg-card__facilities{ display:grid; gap:.35rem; margin-bottom:1.1rem; } .pkg-card__facilities li{ display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--muted); } .pkg-card__facilities .ico{ color:var(--gold); margin-top:.25rem; } .pkg-card__foot{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .pkg-card__price-label{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .pkg-card__price{ font-family:var(--font-serif); font-size:1.4rem; font-weight:700; color:var(--merah); line-height:1.2; } .pkg-card__price small{ font-family:var(--font-sans); font-size:.72rem; color:var(--muted); font-weight:500; } /* Filter paket */ .filter-bar{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.4rem; } .filter-btn{ padding:.55rem 1.35rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:.88rem; font-weight:600; cursor:pointer; transition:all .3s var(--ease); } .filter-btn:hover{ border-color:var(--gold); color:var(--merah); } .filter-btn.is-active{ background:var(--merah); border-color:var(--merah); color:#fff; box-shadow:0 6px 16px rgba(38,34,27,.2); } /* Jadwal keberangkatan */ .schedule-list{ display:grid; gap:.8rem; } .schedule-row{ display:grid; gap:1rem; align-items:center; grid-template-columns:auto 1fr auto auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem 1.2rem; box-shadow:var(--shadow-sm); transition:border-color .3s var(--ease), transform .3s var(--ease); } .schedule-row:hover{ border-color:var(--gold-soft); transform:translateX(3px); } .schedule-date{ display:grid; place-items:center; width:64px; padding:.45rem 0; background:linear-gradient(160deg,var(--merah),var(--merah-dark)); color:#fff; border-radius:12px; line-height:1.1; } .schedule-date__day{ font-family:var(--font-serif); font-size:1.35rem; font-weight:700; } .schedule-date__mon{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); } .schedule-info__name{ font-weight:600; font-size:.98rem; margin:0 0 .15rem; } .schedule-info__note{ font-size:.8rem; color:var(--muted); margin:0; } .schedule-seats{ font-size:.84rem; color:var(--muted); white-space:nowrap; } .schedule-seats strong{ color:var(--merah); font-size:1.05rem; } /* Detail paket */ .pkg-hero{ position:relative; color:#fff; overflow:hidden; } .pkg-hero__bg{ position:absolute; inset:0; z-index:-2; } .pkg-hero__bg img{ width:100%; height:100%; object-fit:cover; } .pkg-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(18,16,12,.9) 10%,rgba(38,34,27,.62) 100%); } .pkg-hero__inner{ padding-block:clamp(3.4rem,7vw,5.6rem); max-width:720px; } .pkg-hero h1{ color:#fff; } .pkg-hero__meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; } .pkg-hero__meta .pill{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:#fff; } .detail-layout{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); grid-template-columns:minmax(0,1fr) 340px; align-items:start; } .detail-aside{ position:sticky; top:100px; display:grid; gap:1rem; } .price-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); text-align:center; position:relative; overflow:hidden; } .price-box::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--merah),var(--gold),var(--merah)); } .price-box__label{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .price-box__value{ font-family:var(--font-serif); font-size:2rem; font-weight:700; color:var(--merah); margin:.2rem 0 .1rem; } .price-box__note{ font-size:.78rem; color:var(--muted); margin-bottom:1.2rem; } .price-box .btn{ width:100%; margin-bottom:.6rem; } .price-box .btn:last-child{ margin-bottom:0; } .spec-list{ display:grid; gap:.05rem; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .spec-list__row{ display:flex; gap:1rem; justify-content:space-between; padding:.85rem 1.1rem; background:#fff; font-size:.88rem; } .spec-list__key{ color:var(--muted); display:flex; align-items:center; gap:.5rem; } .spec-list__val{ font-weight:600; text-align:right; } .prose{ font-size:1rem; color:#3B322B; } .prose h2{ margin-top:2.2rem; } .prose h3{ margin-top:1.8rem; } .prose p{ margin-bottom:1.15em; } .prose ul{ display:grid; gap:.55rem; margin-bottom:1.4em; } .prose ul li{ position:relative; padding-left:1.6rem; } .prose ul li::before{ content:""; position:absolute; left:.25rem; top:.62em; width:7px; height:7px; transform:rotate(45deg); background:var(--gold); } .prose blockquote{ margin:1.6rem 0; padding:1.2rem 1.5rem; background:#FBF3E6; border-left:3px solid var(--gold); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-family:var(--font-serif); font-size:1.08rem; font-style:italic; } .check-list{ display:grid; gap:.6rem; } .check-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.93rem; } .check-list .ico{ flex:0 0 auto; margin-top:.28rem; } .check-list--yes .ico{ color:#1F6B41; } .check-list--no .ico{ color:var(--merah-soft); } /* Timeline itinerary */ .timeline{ position:relative; display:grid; gap:1.2rem; padding-left:1.9rem; } .timeline::before{ content:""; position:absolute; left:.52rem; top:.6rem; bottom:.6rem; width:1px; background:linear-gradient(180deg,var(--gold),var(--line)); } .timeline__item{ position:relative; } .timeline__item::before{ content:""; position:absolute; left:-1.62rem; top:.45rem; width:11px; height:11px; border-radius:50%; background:#fff; border:2px solid var(--gold); box-shadow:0 0 0 4px var(--cream); } .timeline__day{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.15rem; } .timeline__title{ font-family:var(--font-serif); font-size:1.08rem; font-weight:600; margin:0 0 .25rem; } .timeline__desc{ font-size:.9rem; color:var(--muted); margin:0; } /* Tab detail */ .tabs{ display:flex; gap:.35rem; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:1.8rem; } .tabs__btn{ padding:.75rem 1.15rem; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:600; font-size:.92rem; cursor:pointer; transition:all .3s var(--ease); } .tabs__btn:hover{ color:var(--merah); } .tabs__btn.is-active{ color:var(--merah); border-bottom-color:var(--gold); } .tabs__panel{ display:none; } .tabs__panel.is-active{ display:block; animation:fadeIn .4s var(--ease); } @keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } } /* ---------- 07 GALERI, LIGHTBOX, VIDEO ----------------------------------- */ .gallery-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } .gallery-item{ position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm); aspect-ratio:1/1; background:#F3EDE2; cursor:zoom-in; border:1px solid var(--line); } .gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .gallery-item:hover img{ transform:scale(1.08); } .gallery-item__cap{ position:absolute; inset:auto 0 0 0; padding:1.6rem .8rem .7rem; background:linear-gradient(transparent,rgba(18,16,12,.78)); color:#fff; font-size:.78rem; opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .gallery-item:hover .gallery-item__cap{ opacity:1; transform:none; } .gallery-item--wide{ grid-column:span 2; aspect-ratio:2/1; } .album-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); color:var(--ink); height:100%; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .album-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold-soft); color:var(--ink); } .album-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#F3EDE2; } .album-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .album-card:hover .album-card__media img{ transform:scale(1.05); } .album-card__date{ position:absolute; top:.8rem; left:.8rem; background:rgba(255,255,255,.94); color:var(--merah); padding:.3rem .75rem; border-radius:999px; font-size:.74rem; font-weight:700; } .album-card__body{ padding:1.3rem 1.4rem 1.5rem; } .album-card__title{ font-size:1.12rem; margin-bottom:.35rem; } .album-card__desc{ font-size:.87rem; color:var(--muted); margin-bottom:.8rem; } .album-card__count{ display:flex; gap:.8rem; font-size:.78rem; color:var(--muted); } /* Lite YouTube */ .lite-yt{ position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; background:#1a1210; border:1px solid var(--line); } .lite-yt__thumb{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .4s; } .lite-yt:hover .lite-yt__thumb{ transform:scale(1.04); opacity:.86; } .lite-yt__play{ position:absolute; inset:0; display:grid; place-items:center; transition:transform .35s var(--ease); } .lite-yt__play svg{ filter:drop-shadow(0 6px 18px rgba(0,0,0,.4)); width:68px; height:48px; } .lite-yt:hover .lite-yt__play{ transform:scale(1.08); } .lite-yt__label{ position:absolute; left:0; right:0; bottom:0; padding:1.8rem .9rem .8rem; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; font-size:.85rem; font-weight:500; } .lite-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* Lightbox */ .lightbox{ position:fixed; inset:0; z-index:200; display:none; background:rgba(10,9,6,.94); padding:clamp(1rem,4vw,3rem); align-items:center; justify-content:center; } .lightbox.is-open{ display:flex; animation:fadeIn .28s var(--ease); } .lightbox__figure{ max-width:min(1100px,94vw); max-height:88vh; text-align:center; } .lightbox__img{ max-height:78vh; width:auto; margin-inline:auto; border-radius:var(--radius-sm); box-shadow:0 30px 80px rgba(0,0,0,.5); background:none; } .lightbox__cap{ color:rgba(255,255,255,.8); font-size:.88rem; margin-top:1rem; } .lightbox__btn{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .3s var(--ease), border-color .3s var(--ease); } .lightbox__btn:hover{ background:var(--merah); border-color:var(--gold); } .lightbox__prev{ left:clamp(.6rem,2vw,2rem); } .lightbox__next{ right:clamp(.6rem,2vw,2rem); } .lightbox__close{ position:absolute; top:clamp(.8rem,2vw,1.6rem); right:clamp(.8rem,2vw,1.6rem); transform:none; } .lightbox__counter{ position:absolute; top:clamp(1rem,2vw,1.8rem); left:clamp(1rem,2vw,2rem); color:rgba(255,255,255,.6); font-size:.85rem; letter-spacing:.1em; } /* Instagram embed */ .ig-embed{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; } .ig-cta{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; padding:1.5rem 1.8rem; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,#fff,#FBF3E6); } /* ---------- 08 TESTIMONI, FAQ -------------------------------------------- */ .testi-track{ display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } .testi-track::-webkit-scrollbar{ height:6px; } .testi-track::-webkit-scrollbar-thumb{ background:var(--gold-soft); border-radius:99px; } .testi-track::-webkit-scrollbar-track{ background:var(--line); border-radius:99px; } .testi-card{ flex:0 0 min(400px,86vw); scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); position:relative; display:flex; flex-direction:column; } .testi-card::before{ content:"”"; position:absolute; top:.1rem; right:1.2rem; font-family:var(--font-serif); font-size:5rem; color:var(--gold); opacity:.22; line-height:1; } .testi-card__quote{ font-family:var(--font-serif); font-size:1.02rem; font-style:italic; color:#3B322B; margin-bottom:1.4rem; flex:1; } .testi-card__person{ display:flex; align-items:center; gap:.85rem; padding-top:1.1rem; border-top:1px solid var(--line); } .testi-card__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-soft); flex:0 0 auto; } .testi-card__name{ font-weight:700; font-size:.95rem; margin:0; } .testi-card__city{ font-size:.8rem; color:var(--muted); margin:0; } .testi-nav{ display:flex; gap:.5rem; justify-content:center; margin-top:1.4rem; } .testi-nav__btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--merah); cursor:pointer; display:grid; place-items:center; transition:all .3s var(--ease); } .testi-nav__btn:hover{ background:var(--merah); color:#fff; border-color:var(--merah); } .stars{ display:inline-flex; gap:2px; margin-bottom:.8rem; } .star{ fill:#E4DED4; } .star--on{ fill:var(--gold); } /* Accordion FAQ */ .accordion{ display:grid; gap:.8rem; } .acc-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .acc-item.is-open{ border-color:var(--gold-soft); box-shadow:var(--shadow-sm); } .acc-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.35rem; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-sans); font-size:1rem; font-weight:600; color:var(--ink); } .acc-btn:hover{ color:var(--merah); } .acc-icon{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); display:grid; place-items:center; transition:transform .35s var(--ease), background .3s; font-size:1.1rem; line-height:1; } .acc-item.is-open .acc-icon{ transform:rotate(45deg); background:var(--gold); color:#fff; } .acc-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .acc-panel__inner{ padding:0 1.35rem 1.35rem; color:var(--muted); font-size:.94rem; } /* Kartu artikel & panduan */ .post-card{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold-soft); } .post-card__media{ aspect-ratio:16/10; overflow:hidden; background:#F3EDE2; } .post-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .post-card:hover .post-card__media img{ transform:scale(1.05); } .post-card__body{ padding:1.4rem; display:flex; flex-direction:column; flex:1; } .post-card__cat{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; } .post-card__title{ font-size:1.12rem; margin-bottom:.5rem; } .post-card__title a{ color:var(--ink); } .post-card__title a:hover{ color:var(--merah); } .post-card__excerpt{ font-size:.88rem; color:var(--muted); margin-bottom:1rem; } .post-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--muted); padding-top:.9rem; border-top:1px solid var(--line); } /* Breadcrumb & page hero */ .page-hero{ position:relative; padding-block:clamp(3rem,6vw,4.6rem); background:linear-gradient(160deg,var(--merah-dark),var(--merah) 60%,#2E2A22); color:#fff; overflow:hidden; } .page-hero .arabesque{ inset:0; opacity:.07; } .page-hero__inner{ position:relative; max-width:760px; } .page-hero h1{ color:#fff; margin-bottom:.35em; } .page-hero__sub{ color:rgba(255,255,255,.82); font-size:1.02rem; margin:0; } .breadcrumb{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.82rem; color:rgba(255,255,255,.66); margin-bottom:1rem; } .breadcrumb a{ color:rgba(255,255,255,.86); } .breadcrumb a:hover{ color:var(--gold-soft); } .breadcrumb span[aria-hidden]{ opacity:.5; } /* CTA penutup */ .cta-band{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--merah-dark),var(--merah) 55%,#3A322A); color:#fff; } .cta-band .arabesque{ inset:0; opacity:.08; } .cta-band__inner{ position:relative; text-align:center; max-width:720px; margin-inline:auto; padding-block:clamp(3rem,7vw,5rem); } .cta-band h2{ color:#fff; } .cta-band p{ color:rgba(255,255,255,.84); } .cta-band__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.8rem; } /* ---------- 09 FORM & KONTAK --------------------------------------------- */ .form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow); } .form-grid{ display:grid; gap:1.1rem; } .form-grid--2{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .field{ display:grid; gap:.4rem; } .field label{ font-size:.85rem; font-weight:600; color:var(--ink); } .field label .req{ color:var(--merah); } .field label .opt{ color:var(--muted); font-weight:400; font-size:.78rem; } .input,.select,.textarea{ width:100%; padding:.8rem 1rem; font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(196,162,76,.18); } .textarea{ min-height:130px; resize:vertical; } .select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6259' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; } .field__error{ font-size:.78rem; color:var(--merah); } .field.has-error .input,.field.has-error .textarea,.field.has-error .select{ border-color:var(--merah); } .hp-field{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; } .alert{ display:flex; gap:.7rem; align-items:flex-start; padding:1rem 1.2rem; border-radius:var(--radius-sm); font-size:.92rem; margin-bottom:1.2rem; border:1px solid; } .alert--success{ background:#EDF7F0; border-color:#BEDFCB; color:#1F6B41; } .alert--error{ background:#FCEEEE; border-color:#F0C9C9; color:#26221B; } .alert--info{ background:#FBF3E6; border-color:#EBDDBE; color:#7A5C18; } .contact-info{ display:grid; gap:1.1rem; } .contact-info__item{ display:flex; gap:.9rem; align-items:flex-start; } .contact-info__icon{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:#FBF3E6; border:1px solid var(--line); color:var(--merah); display:grid; place-items:center; } .contact-info__label{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .1rem; } .contact-info__value{ font-weight:600; margin:0; font-size:.95rem; } .contact-info__value a{ color:var(--ink); } .contact-info__value a:hover{ color:var(--merah); } .map-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); line-height:0; } .map-embed iframe{ width:100%; min-height:340px; border:0; } /* Mitra & legalitas */ .partner-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); align-items:center; } .partner-item{ display:grid; place-items:center; padding:1.2rem; min-height:100px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); transition:border-color .3s var(--ease), transform .3s var(--ease); } .partner-item:hover{ border-color:var(--gold-soft); transform:translateY(-3px); } .partner-item img{ max-height:56px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .35s, opacity .35s; background:none; } .partner-item:hover img{ filter:none; opacity:1; } .legal-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .legal-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .legal-card__media{ aspect-ratio:3/4; background:#F3EDE2; overflow:hidden; cursor:zoom-in; } .legal-card__media img{ width:100%; height:100%; object-fit:cover; } .legal-card__body{ padding:1rem 1.2rem 1.2rem; } .legal-card__title{ font-size:.98rem; font-family:var(--font-sans); font-weight:700; margin:0 0 .2rem; } .legal-card__num{ font-size:.8rem; color:var(--muted); margin:0; } /* Pagination */ .pagination{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-top:2.6rem; } .pagination a,.pagination span{ min-width:42px; height:42px; display:grid; place-items:center; padding-inline:.8rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-size:.9rem; font-weight:600; } .pagination a:hover{ border-color:var(--gold); color:var(--merah); } .pagination .is-active{ background:var(--merah); border-color:var(--merah); color:#fff; } .pagination .is-disabled{ opacity:.45; } /* Empty state */ .empty-state{ text-align:center; padding:clamp(2.5rem,6vw,4rem) 1rem; color:var(--muted); } .empty-state__icon{ color:var(--gold); margin-bottom:1rem; display:flex; justify-content:center; } /* ---------- 10 FOOTER, WA FLOAT, UTILITAS -------------------------------- */ .site-footer{ position:relative; background:var(--merah-dark); color:rgba(255,255,255,.78); margin-top:0; } .footer-ornament{ height:4px; background:linear-gradient(90deg,var(--merah),var(--gold),var(--gold-soft),var(--gold),var(--merah)); } .site-footer__grid{ display:grid; gap:2.2rem; padding-block:clamp(2.8rem,6vw,4rem); grid-template-columns:1.4fr 1fr 1.3fr 1.1fr; } .site-footer__title{ font-family:var(--font-sans); font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:1.1rem; } .footer-brand{ margin-bottom:1rem; } .footer-brand__name{ font-family:var(--font-serif); font-size:1.4rem; font-weight:700; color:#fff; } .footer-brand img{ background:none; } .site-footer__desc{ font-size:.9rem; margin-bottom:.6rem; } .site-footer__legalname{ font-size:.82rem; color:var(--gold-soft); margin-bottom:1.2rem; } .site-footer__links,.site-footer__contact,.site-footer__legal{ display:grid; gap:.6rem; } .site-footer__links a{ color:rgba(255,255,255,.78); font-size:.9rem; } .site-footer__links a:hover{ color:var(--gold-soft); padding-left:4px; } .site-footer__contact li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.87rem; } .site-footer__contact .ico{ color:var(--gold); flex:0 0 auto; margin-top:.28rem; } .site-footer__contact a{ color:rgba(255,255,255,.85); } .site-footer__contact a:hover{ color:var(--gold-soft); } .site-footer__legal li{ font-size:.83rem; padding-left:.9rem; position:relative; margin-bottom:.35rem; } .site-footer__legal li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); } .site-footer__socials{ display:flex; gap:.5rem; } .social-btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.85); transition:background .3s var(--ease), border-color .3s var(--ease), color .3s, transform .3s var(--ease); } .social-btn:hover{ background:var(--gold); border-color:var(--gold); color:#2A1F10; transform:translateY(-2px); } .site-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); } .site-footer__bottom-inner{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; padding-block:1.2rem; font-size:.82rem; } .site-footer__bottom p{ margin:0; } .site-footer__ig a{ color:var(--gold-soft); } .wa-float{ position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:90; display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.1rem; border-radius:999px; background:#25D366; color:#fff; font-weight:600; font-size:.9rem; box-shadow:0 10px 30px rgba(37,211,102,.35); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .wa-float:hover{ transform:translateY(-3px) scale(1.02); color:#fff; box-shadow:0 14px 36px rgba(37,211,102,.45); } .wa-float__label{ white-space:nowrap; } /* Animasi reveal */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible{ opacity:1; transform:none; } .reveal--d1{ transition-delay:.08s; } .reveal--d2{ transition-delay:.16s; } .reveal--d3{ transition-delay:.24s; } .reveal--d4{ transition-delay:.32s; } /* Utilitas */ .text-center{ text-align:center; } .text-gold{ color:var(--gold); } .text-merah{ color:var(--merah); } .text-muted{ color:var(--muted); } .mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; } .mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.6rem; } .mt-4{ margin-top:2.4rem; } .mb-1{ margin-bottom:.5rem; } .mb-2{ margin-bottom:1rem; } .mb-3{ margin-bottom:1.6rem; } .mb-4{ margin-bottom:2.4rem; } .flex{ display:flex; } .flex-wrap{ flex-wrap:wrap; } .items-center{ align-items:center; } .justify-center{ justify-content:center; } .justify-between{ justify-content:space-between; } .gap-1{ gap:.5rem; } .gap-2{ gap:1rem; } .gap-3{ gap:1.6rem; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .no-scroll{ overflow:hidden; } /* ---------- RESPONSIF ----------------------------------------------------- */ @media (max-width:1080px){ .site-footer__grid{ grid-template-columns:1.3fr 1fr 1.2fr; } .site-footer__col--brand{ grid-column:1 / -1; } .detail-layout{ grid-template-columns:minmax(0,1fr); } .detail-layout > *{ min-width:0; } .detail-aside{ position:static; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } } @media (max-width:960px){ /* Matikan backdrop-filter di mobile: filter membuat .site-header menjadi containing-block bagi drawer position:fixed, sehingga drawer runtuh setinggi header. Ganti dengan latar hampir opaque agar tetap legibel. */ .site-header, .site-header.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(248,243,233,.98); } :root[data-theme="dark"] .site-header, :root[data-theme="dark"] .site-header.is-stuck{ background:rgba(16,13,10,.98); } .nav-toggle{ display:flex; } .site-header__cta{ display:none; } .site-nav{ position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:99; background:var(--putih); box-shadow:-12px 0 40px rgba(18,16,12,.16); padding:5rem 1.6rem 2rem; margin:0; transform:translateX(100%); transition:transform .38s var(--ease); overflow-y:auto; display:flex; flex-direction:column; gap:1.2rem; } .site-nav.is-open{ transform:none; } .site-nav__list{ flex-direction:column; align-items:stretch; gap:.1rem; } .site-nav__link{ padding:.85rem .4rem; border-bottom:1px solid var(--line); border-radius:0; font-size:1rem; } .site-nav__link::after{ display:none; } .site-nav__close{ display:grid; place-items:center; position:absolute; top:1.1rem; right:1.1rem; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; } .site-nav__mobile-cta{ display:block; margin-top:auto; } } @media (max-width:760px){ body{ font-size:15.5px; } .site-footer__grid{ grid-template-columns:1fr 1fr; } .schedule-row{ grid-template-columns:auto 1fr; row-gap:.7rem; } .schedule-row .btn{ grid-column:1 / -1; } .schedule-seats{ grid-column:2; text-align:right; } .gallery-item--wide{ grid-column:span 1; aspect-ratio:1/1; } .wa-float__label{ display:none; } .wa-float{ padding:.9rem; } .hero{ min-height:auto; } .hero__inner{ padding-block:clamp(3.4rem,14vw,5rem); } .hero__scroll{ display:none; } .tabs{ overflow-x:auto; flex-wrap:nowrap; } .tabs__btn{ white-space:nowrap; } } @media (max-width:520px){ .site-footer__grid{ grid-template-columns:1fr; } .hero__actions .btn{ width:100%; } .gallery-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); } .lightbox__btn{ width:40px; height:40px; } } /* Hormati preferensi gerak minimal */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } } /* Cetak */ @media print{ .site-header,.site-footer,.wa-float,.nav-toggle,.lightbox{ display:none !important; } body{ background:#fff; color:#000; } } /* ========================================================================== 11 DARK / LIGHT MODE Mode terang tetap identik: dark hanya aktif saat :root[data-theme="dark"]. Skrip anti-FOUC di header.php menetapkan data-theme sebelum CSS dimuat. ========================================================================== */ /* Tombol toggle (berfungsi di terang & gelap, termasuk tampilan mobile) */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; padding:0; background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--muted); cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .theme-toggle:hover{ border-color:var(--gold); color:var(--gold); background:rgba(198,162,78,.08); transform:translateY(-1px); } .theme-toggle svg{ width:18px; height:18px; } /* Hanya SATU ikon tampil sesuai mode. Selektor diberi prefiks .theme-toggle agar spesifisitasnya mengalahkan aturan svg di atas (mencegah dua ikon muncul). */ .theme-toggle .theme-toggle__moon{ display:block; } /* mode terang: bulan */ .theme-toggle .theme-toggle__sun{ display:none; } :root[data-theme="dark"] .theme-toggle .theme-toggle__moon{ display:none; } :root[data-theme="dark"] .theme-toggle .theme-toggle__sun{ display:block; } /* mode gelap: matahari */ :root[data-theme="dark"] .theme-toggle{ color:var(--gold-soft); border-color:var(--line); } :root[data-theme="dark"] .theme-toggle:hover{ color:var(--gold-soft); background:rgba(224,192,121,.14); border-color:var(--gold); } /* Transisi warna lembut saat berganti mode (dihormati oleh reduce-motion di atas) */ @media (prefers-reduced-motion:no-preference){ body{ transition:background-color .3s var(--ease), color .3s var(--ease); } } /* ---------- Pemetaan ulang token untuk mode gelap ------------------------ */ :root[data-theme="dark"]{ --merah: #E3C27C; /* aksen utama jadi emas terang agar terbaca di gelap */ --merah-dark: #0C0A07; /* tetap gelap: footer, section gelap, hero overlay */ --merah-soft: #CDBB92; --cream: #100D0A; /* kanvas near-black hangat (lebih dalam agar kartu menonjol) */ --putih: #241F18; /* permukaan kartu lebih terang agar kontras dengan kanvas */ --ink: #F4EEE1; /* teks utama ivory terang */ --muted: #B8AE9C; /* teks sekunder abu terang */ --line: #3C3427; /* garis pemisah lebih terlihat */ --shadow: 0 14px 34px rgba(0,0,0,.5); --shadow-sm: 0 2px 12px rgba(0,0,0,.4); --shadow-lg: 0 26px 64px rgba(0,0,0,.6); } /* --gold & --gold-soft dipertahankan (emas menonjol indah di atas gelap). */ /* ---------- Hero/CTA yang memakai var(--merah) sebagai stop gradient ------ --merah kini emas terang, jadi gradient dipetakan ulang agar tetap gelap. */ /* Gradient charcoal + emas (TANPA merah) agar konsisten identitas Kanindra */ :root[data-theme="dark"] .page-hero{ background:linear-gradient(160deg,#0C0A07,#2A241C 60%,#181510); } :root[data-theme="dark"] .cta-band{ background:linear-gradient(135deg,#0C0A07,#26201A 55%,#14110C); } /* ---------- Header (latar blur putih -> gelap) --------------------------- */ :root[data-theme="dark"] .site-header{ background:rgba(21,19,15,.86); } :root[data-theme="dark"] .site-header.is-stuck{ background:rgba(28,25,20,.95); box-shadow:0 4px 24px rgba(0,0,0,.5); } /* ---------- Placeholder gambar ------------------------------------------- */ :root[data-theme="dark"] img{ background:linear-gradient(120deg,#26221B,#1B1813); } :root[data-theme="dark"] .pkg-card__media, :root[data-theme="dark"] .album-card__media, :root[data-theme="dark"] .post-card__media, :root[data-theme="dark"] .legal-card__media, :root[data-theme="dark"] .gallery-item{ background:#2A251D; } /* ---------- Permukaan yang meng-hardcode #fff -> permukaan gelap --------- */ :root[data-theme="dark"] .pill, :root[data-theme="dark"] .lang-switch, :root[data-theme="dark"] .nav-toggle, :root[data-theme="dark"] .site-nav__close, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .card, :root[data-theme="dark"] .feature-card, :root[data-theme="dark"] .pkg-card, :root[data-theme="dark"] .filter-btn, :root[data-theme="dark"] .schedule-row, :root[data-theme="dark"] .price-box, :root[data-theme="dark"] .spec-list__row, :root[data-theme="dark"] .album-card, :root[data-theme="dark"] .ig-embed, :root[data-theme="dark"] .testi-card, :root[data-theme="dark"] .testi-nav__btn, :root[data-theme="dark"] .acc-item, :root[data-theme="dark"] .post-card, :root[data-theme="dark"] .form-card, :root[data-theme="dark"] .input, :root[data-theme="dark"] .select, :root[data-theme="dark"] .textarea, :root[data-theme="dark"] .partner-item, :root[data-theme="dark"] .legal-card, :root[data-theme="dark"] .pagination a, :root[data-theme="dark"] .pagination span, :root[data-theme="dark"] .timeline__item::before{ background:var(--putih); } /* ---------- Section & panel bernuansa terang (gradient hardcoded) -------- */ :root[data-theme="dark"] .section--tint{ background:linear-gradient(180deg,#161209 0%,#100D0A 100%); } :root[data-theme="dark"] .stats{ background:linear-gradient(180deg,#171308,#100D0A); } :root[data-theme="dark"] .ig-cta{ background:linear-gradient(135deg,#241F18,#2A241C); border-color:#3C3427; } /* ---------- Elevasi & border emas halus: kartu menonjol elegan di gelap --- */ :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .feature-card, :root[data-theme="dark"] .pkg-card, :root[data-theme="dark"] .testi-card, :root[data-theme="dark"] .price-box, :root[data-theme="dark"] .post-card, :root[data-theme="dark"] .album-card, :root[data-theme="dark"] .card, :root[data-theme="dark"] .form-card{ border-color:#40382A; box-shadow:0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(231,199,124,.07); } :root[data-theme="dark"] .stat-card:hover, :root[data-theme="dark"] .feature-card:hover, :root[data-theme="dark"] .pkg-card:hover, :root[data-theme="dark"] .album-card:hover, :root[data-theme="dark"] .post-card:hover{ border-color:var(--gold); } /* Angka statistik & garis emas tetap menyala terang */ :root[data-theme="dark"] .stat-card__value{ color:var(--gold-soft); } :root[data-theme="dark"] .feature-card__icon{ background:linear-gradient(135deg,#2E271C,#241F18); border-color:#4A3F2A; color:var(--gold-soft); } :root[data-theme="dark"] .trustbar__icon, :root[data-theme="dark"] .contact-info__icon{ background:#26201A; border-color:#40382A; color:var(--gold-soft); } :root[data-theme="dark"] .trustbar{ background:#141009; border-color:#2A241C; } :root[data-theme="dark"] .section--white{ background:#120F0B; } :root[data-theme="dark"] .badge--soft{ background:#2E2717; color:var(--gold-soft); } :root[data-theme="dark"] .pkg-card__cat{ background:rgba(0,0,0,.55); } :root[data-theme="dark"] .prose blockquote{ background:#211D17; } :root[data-theme="dark"] .trustbar__icon, :root[data-theme="dark"] .contact-info__icon{ background:#26221B; } :root[data-theme="dark"] .feature-card__icon{ background:linear-gradient(135deg,#2A251D,#211D17); } :root[data-theme="dark"] .badge--soft{ background:#2E2820; color:var(--gold); } /* ---------- Teks yang di-hardcode gelap (#3B322B) ------------------------ */ :root[data-theme="dark"] .prose{ color:var(--ink); } :root[data-theme="dark"] .testi-card__quote{ color:#E8E0D2; } /* ---------- Tombol: emas terang butuh teks gelap ------------------------- */ :root[data-theme="dark"] .btn{ box-shadow:0 6px 18px rgba(0,0,0,.4); } :root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn--primary{ --btn-bg:var(--gold); --btn-fg:#1A160F; } :root[data-theme="dark"] .btn--primary:hover{ --btn-bg:var(--gold-soft); --btn-fg:#1A160F; box-shadow:0 10px 26px rgba(0,0,0,.5); } :root[data-theme="dark"] .btn--light{ --btn-bg:#F2EBDD; --btn-fg:#1A160F; } :root[data-theme="dark"] .btn--light:hover{ --btn-bg:#E4DBC9; } /* ---------- Chip/badge/kontrol berlatar aksen -> teks gelap -------------- */ :root[data-theme="dark"] .badge{ color:#1A160F; } :root[data-theme="dark"] .filter-btn.is-active{ color:#1A160F; } :root[data-theme="dark"] .pagination .is-active{ color:#1A160F; } :root[data-theme="dark"] .acc-item.is-open .acc-icon{ color:#1A160F; } :root[data-theme="dark"] .testi-nav__btn:hover{ color:#1A160F; } :root[data-theme="dark"] .skip-link{ color:#1A160F; } :root[data-theme="dark"] .schedule-date{ background:linear-gradient(160deg,#2E2820,#211D17); color:var(--gold-soft); } :root[data-theme="dark"] .album-card__date{ background:rgba(20,17,13,.82); color:var(--gold-soft); } /* ---------- Detail halus ------------------------------------------------- */ :root[data-theme="dark"] .select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B4AA98' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .star{ fill:#4A4238; } :root[data-theme="dark"] ::selection{ background:var(--gold-soft); color:#1A160F; } /* ---------- Header polish: satu baris rapi di layar sedang ---------------- */ @media (min-width:961px) and (max-width:1300px){ .site-header__inner{ gap:.35rem; } .site-nav__list{ gap:0; } .site-nav__link{ padding:.5rem .45rem; font-size:.82rem; } .site-header__actions{ gap:.35rem; } } /* ========================================================================== 12 PERBAIKAN RESPONSIF MOBILE & TABLET (layout saja; warna & desktop utuh) Semua aturan di sini berada dalam media query max-width sehingga tampilan desktop (>=1025px) tidak berubah. Berlaku sama untuk mode terang & gelap karena hanya mengatur tata letak, bukan warna. ========================================================================== */ /* AKAR penyebab horizontal-scroll di HP/tablet: drawer off-canvas (.site-nav, position:fixed, translateX(100%)) menjulur ke kanan viewport sehingga menambah lebar dokumen (scrollWidth). overflow-x:clip pada memangkas luapan viewport TERMASUK elemen fixed, tanpa membuat konteks scroll baru (posisi sticky header tetap berfungsi). */ html{ overflow-x:clip; } body{ overflow-x:clip; } /* Cegah kata/URL panjang mendorong lebar melewati kontainer */ h1,h2,h3,h4,p,.hero__sub,.page-hero__sub,.breadcrumb,.pill,.badge, .pkg-card__title,.post-card__title,.card__title{ overflow-wrap:anywhere; } .spec-list__val,.contact-info__value{ overflow-wrap:anywhere; min-width:0; } /* ---------- Header: brand + kontrol tidak berdesakan di HP/tablet -------- */ @media (max-width:960px){ /* Drawer aman: tidak boleh melebihi lebar viewport */ .site-nav{ max-width:100vw; } /* Beri ruang shrink pada brand agar aksi (tema/bahasa/hamburger) selalu utuh */ .brand{ flex:0 1 auto; min-width:0; } .brand__text{ min-width:0; } .brand__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .site-header__inner{ gap:.4rem; } .site-header__actions{ gap:.35rem; } } @media (max-width:420px){ /* Ruang paling sempit: rapatkan kontrol & sederhanakan brand */ .brand__sub{ display:none; } .brand__mark svg{ width:32px; height:32px; } .brand__name{ font-size:1rem; } .site-header__inner{ min-height:64px; } .lang-switch{ padding:.2rem .35rem; } .lang-switch__btn{ padding:.1rem .2rem; } .theme-toggle{ width:36px; height:36px; } .nav-toggle{ width:38px; height:38px; } } /* ---------- Tipografi: heading tidak kebesaran di layar kecil ------------ */ @media (max-width:600px){ h1{ font-size:clamp(1.85rem,7vw,2.4rem); } h2{ font-size:clamp(1.5rem,5.6vw,2rem); } .hero h1,.pkg-hero h1{ font-size:clamp(1.9rem,7.6vw,2.5rem); } .page-hero h1{ font-size:clamp(1.7rem,6.8vw,2.2rem); } .hero__sub{ font-size:1rem; } } /* ---------- Hero: tinggi wajar, CTA & meta membungkus rapi --------------- */ @media (max-width:760px){ .hero__meta{ gap:1rem 1.4rem; } .hero__actions{ gap:.7rem; } .pkg-hero__inner{ padding-block:clamp(2.6rem,8vw,3.6rem); } } @media (max-width:520px){ .hero__actions{ flex-direction:column; align-items:stretch; } .hero__actions .btn{ width:100%; } .pkg-hero__meta .pill,.hero__meta-item{ max-width:100%; } .cta-band__actions .btn{ width:100%; } } /* ---------- Halaman /tiket: form pencarian & kartu Klook rapi di HP ------ Selektor .tiket-box > .tiket-grid dibuat lebih spesifik (0,2,0) agar mengalahkan blok