/* ═══════════════════════════════════════════════════
   KARO RAMEN — UNIFIED STYLE SYSTEM
   ═══════════════════════════════════════════════════ */

/* ── 1. RESET & ROOT ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
    --gold:        #C8972A;
    --gold-lt:     #F0C060;
    --gold-dim:    rgba(200,151,42,0.13);
    --gold-line:   rgba(200,151,42,0.22);
    --accent-gold: #f4b860;
    --maroon-dark: #3a0a14;
    --maroon-deep: #2d0811;
    --maroon-mid:  #5a1020;
    --maroon-rich: #4a0e1c;
    --bg-main:     linear-gradient(160deg, #4a0e1c 0%, #2d0811 100%);
    --text-white:  #ffffff;
    --text-dim:    rgba(255,255,255,0.6);
    --text-muted:  rgba(255,255,255,0.35);
    --card-bg:     rgba(30,10,15,0.7);
    --glass-border:rgba(255,215,0,0.15);
    --nav-h:       72px;
    --ease:        cubic-bezier(0.22,1,0.36,1);
    --ease-back:   cubic-bezier(0.34,1.56,0.64,1);
}

html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#f4b860 #0f0101; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#0f0101; }
::-webkit-scrollbar-thumb { background:#f4b860; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#d99a40; }

body {
    font-family:'Jost', 'Segoe UI', sans-serif;
    background: linear-gradient(160deg, #4a0e1c 0%, #2d0811 100%);
    background-attachment: fixed;
    min-height:100vh;
    color: var(--text-white);
    overflow-x:hidden;
}

/* ── 2. NAVIGATION ── */
nav#navbar {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:transparent;
    border-bottom:1px solid rgba(255,255,255,0.08);
    transition:all 0.4s ease;
}
nav#navbar.scrolled {
    background:rgba(30,5,12,0.95);
    backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid var(--gold-line);
    box-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.nav-inner {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 48px; height:var(--nav-h);
    max-width:1400px; margin:0 auto;
}
.nav-logo {
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:#fff;
    font-family:'Cormorant Garamond', serif;
    font-size:1.25rem; font-weight:700;
    transition:opacity 0.3s;
}
.nav-logo:hover { opacity:0.85; }
.logo-flame { width:42px; height:42px; filter:drop-shadow(0 0 6px rgba(244,184,96,0.5)); }

.nav-links {
    display:flex; list-style:none; gap:6px;
}
.nav-links a {
    text-decoration:none; color:rgba(255,255,255,0.75);
    font-size:0.78rem; font-weight:600; letter-spacing:0.12em;
    text-transform:uppercase; padding:8px 14px; border-radius:6px;
    position:relative; transition:all 0.3s ease;
}
.nav-links a:hover, .nav-links a.nav-active { color:#fff; }
.nav-links a::after {
    content:''; position:absolute; bottom:4px; left:14px; right:14px;
    height:1.5px; background:var(--accent-gold); border-radius:2px;
    transform:scaleX(0); transition:transform 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.nav-active::after { transform:scaleX(1); }
.nav-links a.nav-active { color:var(--accent-gold); }

.nav-right { display:flex; align-items:center; gap:16px; }
.nav-cart-btn {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px; text-decoration:none;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.85); font-size:1.1rem;
    transition:all 0.25s ease;
}
.nav-cart-btn:hover { background:rgba(200,151,42,0.12); border-color:var(--gold-line); color:var(--accent-gold); }
.cart-badge {
    position:absolute; top:-6px; right:-6px;
    background:var(--accent-gold); color:#1a0408;
    font-size:0.65rem; font-weight:800; min-width:18px; height:18px;
    border-radius:9px; display:flex; align-items:center; justify-content:center;
    padding:0 4px; border:2px solid var(--maroon-dark);
}

/* Hamburger */
.hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; z-index:1001; padding:4px; }
.hamburger span { width:22px; height:2.5px; background:#fff; border-radius:2px; transition:all 0.3s ease; display:block; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Sidebar */
.mobile-menu {
    position:fixed; top:0; left:-100%; width:290px; height:100vh;
    background:linear-gradient(160deg,#1a0408 0%,#2e0b12 100%);
    z-index:9999; transition:left 0.45s cubic-bezier(0.77,0,0.175,1);
    display:flex; flex-direction:column;
    box-shadow:10px 0 40px rgba(0,0,0,0.8);
    border-right:1px solid rgba(200,151,42,0.12);
}
.mobile-menu.active { left:0; }
.sidebar-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.75);
    backdrop-filter:blur(6px); z-index:9998;
    display:none; opacity:0; transition:opacity 0.35s;
}
.sidebar-overlay.active { display:block; opacity:1; }
.sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 20px 16px 24px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.brand-identity { display:flex; align-items:center; gap:12px; }
.sidebar-logo { width:38px; filter:drop-shadow(0 0 8px rgba(200,151,42,0.7)); }
.brand-text { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:700; color:#fff; }
.sidebar-header .close-btn {
    background:transparent; border:none; color:rgba(255,255,255,0.4);
    font-size:1.1rem; cursor:pointer; padding:6px; border-radius:8px;
    transition:all 0.2s; display:flex; align-items:center;
}
.sidebar-header .close-btn:hover { color:#ff6666; }
.sidebar-links { padding:24px 16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.mobile-menu a {
    text-decoration:none; color:rgba(230,220,210,0.85);
    font-size:0.95rem; font-weight:500; padding:14px 18px;
    border-radius:10px; display:flex; align-items:center; gap:14px;
    transition:all 0.28s ease; border:1px solid transparent;
}
.mobile-menu a:hover { background:rgba(200,151,42,0.1); color:#fff; border-color:rgba(200,151,42,0.2); padding-left:22px; }
.icon-menu { font-size:1rem; color:var(--gold); width:20px; text-align:center; }
.sidebar-footer { padding:16px 24px; border-top:1px solid rgba(255,255,255,0.05); }
.sidebar-footer p { color:rgba(255,255,255,0.25); font-size:0.72rem; letter-spacing:0.06em; }

/* ── 3. PAGE HERO MINI (sub pages) ── */
.page-hero-mini {
    position:relative; padding:0; overflow:hidden;
    height:260px; display:flex; align-items:center;
    margin-top:var(--nav-h);
}
.phm-bg {
    position:absolute; inset:0;
    background:linear-gradient(135deg, #5a1020 0%, #2d0811 60%, #1a0408 100%);
}
.phm-bg::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 80% at 70% 50%, rgba(200,151,42,0.08) 0%, transparent 65%);
}
.phm-bg::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(to right, transparent, var(--gold-line), transparent);
}
.phm-inner { position:relative; z-index:2; padding:0 8%; }
.phm-eyebrow {
    font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    color:rgba(255,255,255,0.4); margin-bottom:12px;
}
.phm-eyebrow a { color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.2s; }
.phm-eyebrow a:hover { color:var(--accent-gold); }
.phm-eyebrow i { font-size:0.55rem; margin:0 6px; opacity:0.5; }
.phm-title {
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(2.2rem,5vw,3.5rem);
    font-weight:700; line-height:1.1; color:#fff; margin-bottom:10px;
}
.phm-title em { font-style:italic; color:var(--accent-gold); }
.phm-sub { color:rgba(255,255,255,0.5); font-size:0.95rem; font-weight:300; }

/* ── 4. HERO HOME ── */
.hero-home {
    position:relative; min-height:100vh;
    display:flex; align-items:center; overflow:hidden;
    padding-top:var(--nav-h);
}
.hero-canvas {
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0;
}
.hero-blob {
    position:absolute; border-radius:50%; pointer-events:none; z-index:0;
    filter:blur(80px);
}
.hero-blob-1 {
    width:600px; height:600px; top:-200px; left:-100px;
    background:radial-gradient(circle, rgba(90,16,32,0.7) 0%, transparent 65%);
}
.hero-blob-2 {
    width:500px; height:500px; bottom:-150px; right:-80px;
    background:radial-gradient(circle, rgba(58,10,20,0.55) 0%, transparent 65%);
}
.hero-inner {
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    gap:60px; width:100%; max-width:1400px; margin:0 auto;
    padding:60px 8%;
}
/* Hero Text */
.hero-text { flex:1; max-width:560px; }
.hero-badge-pill {
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(200,151,42,0.1); border:1px solid var(--gold-line);
    border-radius:50px; padding:8px 18px;
    font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--accent-gold); margin-bottom:28px;
    animation:fadeUp 0.7s var(--ease) 0.1s both;
}
.badge-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--accent-gold);
    box-shadow:0 0 8px rgba(200,151,42,0.8);
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }

.hero-h1 {
    display:flex; flex-direction:column;
    margin-bottom:24px;
    animation:fadeUp 0.7s var(--ease) 0.2s both;
}
.h1-eyebrow {
    font-family:'Jost', sans-serif; font-size:0.85rem; font-weight:400;
    color:rgba(255,255,255,0.5); letter-spacing:0.12em; text-transform:uppercase;
    margin-bottom:8px;
}
.h1-main {
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(3rem,6vw,5rem); font-weight:700; line-height:1;
    color:#fff; letter-spacing:-0.02em;
}
.h1-main em { font-style:italic; color:var(--accent-gold); }
.h1-sub {
    font-size:0.82rem; color:rgba(255,255,255,0.35); letter-spacing:0.1em;
    font-weight:400; margin-top:10px;
}
.hero-desc {
    color:rgba(255,255,255,0.58); font-weight:300; line-height:1.75;
    font-size:0.96rem; margin-bottom:36px;
    animation:fadeUp 0.7s var(--ease) 0.3s both;
}
.hero-actions {
    display:flex; align-items:center; gap:16px; margin-bottom:44px;
    animation:fadeUp 0.7s var(--ease) 0.4s both;
}
.btn-hero-primary {
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:16px 36px;
    background:linear-gradient(135deg,#C8972A 0%,#E8B84B 50%,#C8972A 100%);
    background-size:200% auto;
    color:#1a0800; text-decoration:none;
    border-radius:50px; font-weight:700; font-size:0.85rem; letter-spacing:0.12em;
    text-transform:uppercase; overflow:hidden;
    transition:background-position 0.5s ease, transform 0.3s, box-shadow 0.3s;
    box-shadow:0 6px 30px rgba(200,151,42,0.38), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-hero-primary:hover { background-position:right center; transform:translateY(-3px); box-shadow:0 14px 40px rgba(200,151,42,0.48); }
.btn-shine {
    position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.28),transparent);
    transform:skewX(-20deg); transition:left 0.55s;
}
.btn-hero-primary:hover .btn-shine { left:140%; }

.btn-hero-ghost {
    color:rgba(255,255,255,0.7); text-decoration:none; font-size:0.85rem;
    font-weight:600; letter-spacing:0.08em; padding:8px 4px;
    border-bottom:1px solid rgba(255,255,255,0.2);
    transition:all 0.3s ease;
}
.btn-hero-ghost:hover { color:#fff; border-color:var(--accent-gold); }

.hero-stats-row {
    display:flex; align-items:center; gap:24px;
    animation:fadeUp 0.7s var(--ease) 0.5s both;
}
.hs-item { display:flex; flex-direction:column; }
.hs-num { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700; color:var(--accent-gold); line-height:1; }
.hs-lbl { font-size:0.66rem; color:rgba(255,255,255,0.4); letter-spacing:0.1em; text-transform:uppercase; margin-top:3px; }
.hs-sep { width:1px; height:36px; background:rgba(255,255,255,0.1); }

/* Hero Visual */
.hero-visual {
    flex:0 0 500px; position:relative;
    display:flex; align-items:center; justify-content:center;
    animation:fadeUp 0.8s var(--ease) 0.25s both;
}
.hv-ring {
    position:absolute; border-radius:50%;
    border:1px solid rgba(200,151,42,0.12);
    animation:ringPulse 4s ease-in-out infinite;
}
.hv-ring-1 { width:480px; height:480px; animation-delay:0s; }
.hv-ring-2 { width:380px; height:380px; animation-delay:1.3s; border-style:dashed; opacity:0.7; }
.hv-ring-3 { width:280px; height:280px; animation-delay:2.6s; opacity:0.5; }
@keyframes ringPulse { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }

.hv-bowl { width:420px; height:420px; position:relative; z-index:2; animation:bowlFloat 5s ease-in-out infinite; }
.bowl-image {
    width:100%; height:100%;
    background:url('picture/ramen.webp') no-repeat center;
    background-size:contain;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5)) drop-shadow(0 0 50px rgba(200,151,42,0.15));
}
@keyframes bowlFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

.hv-float {
    position:absolute; z-index:10;
    display:flex; align-items:center; gap:8px;
    background:rgba(20,10,5,0.88); backdrop-filter:blur(12px);
    border:1px solid var(--gold-line); border-radius:50px;
    padding:10px 18px; font-size:0.75rem; font-weight:600; color:#fff;
    white-space:nowrap; box-shadow:0 8px 30px rgba(0,0,0,0.4);
}
.hv-float i { color:var(--accent-gold); font-size:0.9rem; }
.hv-float-1 { top:15%; left:-30px; animation:floatBob 4s ease-in-out infinite; }
.hv-float-2 { bottom:20%; left:-20px; animation:floatBob 4.5s ease-in-out infinite 1s; }
.hv-float-3 { top:25%; right:-20px; animation:floatBob 3.8s ease-in-out infinite 0.5s; }
@keyframes floatBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Scroll cue */
.hero-scroll-cue {
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px; z-index:5;
    font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.3);
}
.scroll-mouse {
    width:22px; height:36px; border:1.5px solid rgba(255,255,255,0.2);
    border-radius:12px; display:flex; justify-content:center; align-items:flex-start; padding-top:6px;
}
.scroll-wheel {
    width:3px; height:8px; background:var(--accent-gold); border-radius:2px;
    animation:scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollWheel { 0%{opacity:1;transform:translateY(0)} 60%{opacity:0;transform:translateY(10px)} 100%{opacity:0;transform:translateY(0)} }

/* ── 5. MARQUEE STRIP ── */
.marquee-wrap {
    background:linear-gradient(135deg, #1a0408 0%, #2e0b12 100%);
    border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line);
    overflow:hidden; padding:14px 0;
}
.marquee-track {
    display:flex; gap:0; white-space:nowrap;
    animation:marqueeScroll 30s linear infinite;
}
.marquee-track span {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.72rem; font-weight:600; letter-spacing:0.1em;
    text-transform:uppercase; color:rgba(255,255,255,0.65);
    padding:0 28px;
}
.marquee-track span.sep { color:var(--accent-gold); padding:0 4px; font-size:0.55rem; opacity:0.6; }
.marquee-track span i { color:var(--accent-gold); font-size:0.75rem; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── 6. HOME SECTIONS ── */
.home-sect { position:relative; padding:100px 8%; }

.sect-head { text-align:center; margin-bottom:60px; }
.sect-eyebrow {
    font-size:0.7rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
    color:rgba(200,151,42,0.7); margin-bottom:14px; display:block;
}
.sect-title {
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(2rem,4vw,3rem); font-weight:700; line-height:1.15;
    color:#fff; margin-bottom:14px;
}
.sect-title em { font-style:italic; color:var(--accent-gold); }
.sect-sub { color:rgba(255,255,255,0.45); font-size:0.92rem; font-weight:300; }
.sect-cta { text-align:center; margin-top:50px; }

/* Buttons */
.btn-outline-gold {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 32px; border:1.5px solid var(--gold-line);
    background:rgba(200,151,42,0.06); color:var(--accent-gold);
    text-decoration:none; border-radius:50px;
    font-size:0.8rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    transition:all 0.3s ease;
}
.btn-outline-gold:hover { background:rgba(200,151,42,0.15); border-color:var(--accent-gold); transform:translateY(-2px); }

.btn-wa-cta {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 32px;
    background:linear-gradient(135deg,#25d366 0%,#18a84a 100%);
    color:#fff; text-decoration:none; border-radius:50px;
    font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    transition:all 0.3s ease;
    box-shadow:0 6px 24px rgba(37,211,102,0.3);
}
.btn-wa-cta:hover { transform:translateY(-3px); box-shadow:0 12px 34px rgba(37,211,102,0.4); }

.btn-ghost-white {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; border:1.5px solid rgba(255,255,255,0.25);
    color:rgba(255,255,255,0.8); text-decoration:none; border-radius:50px;
    font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    transition:all 0.3s ease; background:transparent;
}
.btn-ghost-white:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.6); color:#fff; }

/* ── 7. MENU PREVIEW GRID ── */
.menu-preview-sect { background:linear-gradient(to bottom, #4a0e1c, #2d0811); }
.menu-preview-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:28px; max-width:1300px; margin:0 auto;
}

/* Card di Index */
.menu-preview-grid .card.animate-in {
    opacity: 0;
    animation: cardFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--card-delay, 0s);
}

/* Gambar, Judul, Deskripsi di Index (Samakan dengan yang kamu kirim) */
.menu-preview-grid .card.animate-in .product-img-wrapper img {
    animation: imgFadeIn 0.6s ease both;
    animation-delay: calc(var(--card-delay, 0s) + 0.05s);
}

.menu-preview-grid .card.animate-in .card-info h3 {
    animation: elFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--card-delay, 0s) + 0.12s);
}

.menu-preview-grid .card.animate-in .card-info p {
    animation: elFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--card-delay, 0s) + 0.18s);
}

.menu-preview-grid .card.animate-in .card-footer {
    animation: elFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--card-delay, 0s) + 0.24s);
}

.mp-card {
    background:rgba(20,8,12,0.85); border:1px solid rgba(255,255,255,0.06);
    border-radius:20px; overflow:hidden; cursor:pointer;
    transition:all 0.4s var(--ease);
    box-shadow:0 8px 30px rgba(0,0,0,0.35);
}
.mp-card:hover { transform:translateY(-10px); border-color:var(--gold-line); box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.mp-img-wrap { position:relative; height:200px; overflow:hidden; }
.mp-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease); display:block; }
.mp-card:hover .mp-img-wrap img { transform:scale(1.08); }
.mp-img-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 50%, rgba(10,2,6,0.9) 100%); }
.mp-body { padding:20px 22px 22px; }
.mp-name { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:700; color:#fff; margin-bottom:8px; }
.mp-desc { font-size:0.8rem; color:rgba(255,255,255,0.42); line-height:1.6; margin-bottom:18px; font-weight:300; }
.mp-foot { display:flex; align-items:center; justify-content:space-between; }
.mp-price { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:700; color:var(--accent-gold); }
.mp-add-btn {
    width:36px; height:36px; border-radius:10px;
    background:rgba(200,151,42,0.12); border:1px solid var(--gold-line);
    color:var(--accent-gold); cursor:pointer; font-size:0.85rem;
    transition:all 0.25s; display:flex; align-items:center; justify-content:center;
}
.mp-add-btn:hover { background:rgba(200,151,42,0.25); border-color:var(--accent-gold); transform:scale(1.1); }

/* ── 8. ABOUT TEASER ── */
.about-teaser-sect { background:linear-gradient(to bottom, #2d0811, #3a0a14); }
.about-teaser-wrap {
    display:flex; align-items:center; gap:80px;
    max-width:1200px; margin:0 auto;
}
.at-img-side { flex:1; position:relative; }
.at-img-frame {
    position:relative; border-radius:20px; overflow:hidden;
    height:480px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    border:1px solid rgba(200,151,42,0.2);
}
.at-img-frame::after {
    content:''; position:absolute; top:20px; left:20px; right:-20px; bottom:-20px;
    border:1.5px solid var(--gold-line); border-radius:20px; z-index:-1;
}
.at-img-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.at-year-pill {
    position:absolute; bottom:-20px; right:-20px;
    background:linear-gradient(135deg,#C8972A,#E8B84B);
    border-radius:16px; padding:16px 24px;
    display:flex; flex-direction:column; align-items:center;
    box-shadow:0 10px 30px rgba(200,151,42,0.4);
}
.at-yr-num { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:700; color:#1a0800; line-height:1; }
.at-yr-lbl { font-size:0.65rem; font-weight:700; color:rgba(0,0,0,0.55); text-transform:uppercase; letter-spacing:0.1em; margin-top:2px; }
.at-text-side { flex:1.1; }
.at-desc { color:rgba(255,255,255,0.65); line-height:1.8; margin-bottom:30px; font-size:0.96rem; font-weight:300; }
.at-checks { display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }
.at-checks span { display:flex; align-items:center; gap:12px; font-size:0.88rem; color:rgba(255,255,255,0.75); }
.at-checks i { color:var(--accent-gold); font-size:0.85rem; }

/* ── 9. GALLERY ── */
.gallery-section { background:var(--maroon-dark); padding:80px 0 100px; overflow:hidden; text-align:center; }
.gallery-header { position:relative; z-index:5; margin-bottom:0; padding:0 5%; }
.gallery-header h2 { font-family:'Cormorant Garamond',serif; font-weight:700; font-size:clamp(2.2rem,5vw,3.2rem); color:#fff; margin-bottom:10px; }
.gallery-header p { color:rgba(255,255,255,0.5); font-weight:300; font-size:0.93rem; }
.highlight-text { color:var(--gold); font-style:italic; position:relative; display:inline-block; }
.highlight-text::after {
    content:''; position:absolute; left:0; bottom:-8px; width:100%; height:10px;
    background-image:url("data:image/svg+xml,%3Csvg width='100' height='16' viewBox='0 0 100 16' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q 25 16 50 8 T 100 8' stroke='%23C8972A' stroke-width='2.5' fill='none' stroke-linecap='round' /%3E%3C/svg%3E");
    background-repeat:no-repeat; background-size:100% 100%; opacity:0.6;
}
.gallery-scroll-wrapper { width:100%; max-width: 100%; display:flex; justify-content:center; overflow-x:hidden; margin-top:50px; position:relative; }
.gallery-container {
    position:relative; width:100%; display:flex; justify-content:center;
    align-items:flex-start; gap:60px; padding:90px 80px 60px;
}
.string-container {
    position:absolute; left:50%; transform:translateX(-50%);
    width:100%; height:70px; top:38px; z-index:3; pointer-events:none; max-width: 100vw
}
.string-svg { width:100%; height:100%; }
.path-desktop { display:block; }
.path-mobile  { display:none; }
@keyframes tali-swing { 0%{transform:scaleY(1)} 25%{transform:scaleY(1.25)} 48%{transform:scaleY(0.90)} 68%{transform:scaleY(1.09)} 83%{transform:scaleY(0.97)} 100%{transform:scaleY(1)} }
.string-svg.animate-string { transform-origin:top center; animation:tali-swing 1.6s var(--ease) forwards; }
.pin-clip {
    position:absolute; top:-40px; left:50%; transform:translateX(-50%);
    width:22px; height:44px;
    background:linear-gradient(160deg,#f5df80 0%,#d4a017 42%,#9a6d04 100%);
    border-radius:4px 4px 6px 6px;
    box-shadow:inset 0 1px 3px rgba(255,255,255,0.45), 0 4px 16px rgba(0,0,0,0.55);
    z-index:10;
}
.pin-clip::before { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,0.32); }
.pin-clip::after  { content:''; position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:6px; height:13px; border-radius:3px; background:rgba(0,0,0,0.22); }
.polaroid-card {
    background:#fdf8ee; padding:12px 12px 52px; width:280px; flex-shrink:0;
    border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,0.2),0 10px 28px rgba(0,0,0,0.45),0 28px 56px rgba(0,0,0,0.28);
    position:relative; z-index:2; transform-origin:top center;
    opacity:0; transform:translateY(-50px) rotate(var(--tilt,0deg)) scale(0.9);
    cursor:pointer;
}
.rotate-left   { --tilt:-5deg;  margin-top:20px; }
.rotate-center { --tilt: 1deg;  margin-top:40px; }
.rotate-right  { --tilt: 4deg;  margin-top:10px; }
@keyframes polaroid-drop {
    0%   { opacity:0; transform:translateY(-50px) rotate(var(--tilt)) scale(0.88); }
    50%  { opacity:1; transform:translateY(8px)   rotate(var(--tilt)) scale(1.02); }
    70%  {            transform:translateY(-4px)  rotate(var(--tilt)) scale(0.995); }
    85%  {            transform:translateY(2px)   rotate(var(--tilt)) scale(1.002); }
    100% { opacity:1; transform:translateY(0)     rotate(var(--tilt)) scale(1); }
}
.polaroid-card.muncul { animation:polaroid-drop 0.9s var(--ease) forwards; }
.polaroid-card:hover { transform:translateY(-20px) rotate(0deg) scale(1.05) !important; z-index:20; box-shadow:0 30px 60px rgba(200,151,42,0.2); }
.photo-frame { width:100%; height:220px; overflow:hidden; border-radius:2px; background:#c8bfac; }
.photo-frame img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.65s var(--ease); }
.polaroid-card:hover .photo-frame img { transform:scale(1.07); }
.photo-caption { position:absolute; bottom:0; left:0; right:0; padding:10px 12px 16px; }
.photo-caption h4 { margin:0; color:#1e0c04; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.12rem; text-align:center; }
.gallery-footer-text { border-top:1px solid rgba(255,255,255,0.08); padding:28px 20px 0; max-width:560px; margin:0 auto; }
.gallery-footer-text p { color:rgba(200,151,42,0.55); font-size:0.88rem; font-weight:300; letter-spacing:0.04em; }

/* ── 10. TESTIMONI PREVIEW ── */
.testi-prev-sect { background:linear-gradient(to bottom, #3a0a14, #2d0811); }
.tp-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
    gap:24px; max-width:1200px; margin:0 auto;
}
.tp-card {
    background:rgba(20,8,12,0.85); border:1px solid rgba(255,255,255,0.06);
    border-radius:20px; padding:30px 26px 26px;
    position:relative; overflow:hidden;
    transition:all 0.38s var(--ease);
}
.tp-card:hover { border-color:var(--gold-line); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.45); }
.tp-quote {
    position:absolute; top:8px; right:16px;
    font-family:'Cormorant Garamond',serif; font-size:6rem; font-weight:700;
    color:rgba(200,151,42,0.06); line-height:1; pointer-events:none;
}
.tp-stars { display:flex; gap:4px; margin-bottom:14px; }
.tp-stars i { color:var(--accent-gold); font-size:0.75rem; }
.tp-stars i.fa-regular { color:rgba(255,255,255,0.2); }
.tp-text { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-style:italic; color:rgba(240,234,224,0.85); line-height:1.75; margin-bottom:22px; }
.tp-author { display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.05); }
.tp-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),#E8B84B);
    display:flex; align-items:center; justify-content:center;
    font-size:0.9rem; font-weight:800; color:#1a0800; flex-shrink:0;
}
.tp-author span { font-size:0.83rem; font-weight:600; color:var(--accent-gold); }

/* ── 11. CTA BANNER ── */
.cta-banner-sect { padding:0 8% 0; }
.cta-banner-inner {
    background:linear-gradient(135deg, #5a1020 0%, #3a0a14 60%);
    border:1px solid var(--gold-line); border-radius:24px;
    padding:60px; display:flex; align-items:center; justify-content:space-between;
    gap:40px; position:relative; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
    margin-bottom:100px;
}
.cta-b-deco {
    position:absolute; top:-100px; right:-100px;
    width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(200,151,42,0.08) 0%, transparent 60%);
    pointer-events:none;
}
.cta-b-text h2 { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700; color:#fff; margin-bottom:8px; }
.cta-b-text p { color:rgba(255,255,255,0.55); font-size:0.92rem; font-weight:300; }
.cta-b-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; }

/* ── 12. MENU FULL PAGE ── */
.menu-full-sect { padding:50px 8% 100px; }
.menu-filter-bar {
    display:flex; flex-direction:column; align-items:center;
    gap:20px; margin-bottom:50px; max-width:900px; margin-left:auto; margin-right:auto;
}
.search-box-wrap { width:100%; max-width:520px; }
.search-box {
    display:flex; align-items:center; gap:14px;
    background:rgba(255,255,255,0.04); border:1px solid rgba(200,151,42,0.2);
    border-radius:50px; padding:6px 24px;
    transition:all 0.3s ease;
    box-shadow:inset 0 2px 8px rgba(0,0,0,0.4);
}
.search-box:focus-within { border-color:var(--accent-gold); background:rgba(255,255,255,0.07); box-shadow:0 0 20px rgba(200,151,42,0.12),inset 0 2px 8px rgba(0,0,0,0.3); }
.search-box i { color:rgba(200,151,42,0.6); font-size:0.9rem; }
.search-box input { width:100%; background:transparent; border:none; color:#fff; font-family:'Jost',sans-serif; font-size:0.93rem; font-weight:300; padding:12px 0; outline:none; }
.search-box input::placeholder { color:rgba(255,255,255,0.28); letter-spacing:0.06em; }

.category-filter { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.cat-btn {
    background:transparent; border:1px solid rgba(200,151,42,0.25);
    color:rgba(255,255,255,0.6); padding:10px 24px; border-radius:50px;
    cursor:pointer; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em;
    transition:all 0.3s ease; font-family:'Jost',sans-serif; font-weight:500;
}
.cat-btn:hover, .cat-btn.active {
    background:var(--accent-gold); color:#1a0408;
    border-color:var(--accent-gold); font-weight:700; transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(200,151,42,0.35);
}
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:80px 30px; padding:60px 20px; max-width:1200px; margin:0 auto; }

/* Product Card (menu full page) */
.card {
    background:var(--card-bg); backdrop-filter:blur(10px);
    border-radius:28px; padding:0 25px 28px;
    position:relative; cursor:pointer;
    transition:all 0.5s cubic-bezier(0.23,1,0.32,1);
    border:1px solid var(--glass-border);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    width:100%; max-width:350px; margin:60px auto 0;
    box-shadow:0 20px 40px rgba(0,0,0,0.4);

    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.card:hover { transform:translateY(-14px) translateZ(0); box-shadow:0 30px 60px rgba(200,151,42,0.15); border-color:rgba(200,151,42,0.4); }
.product-img-wrapper { width:220px; height:180px; margin-top:-60px; margin-bottom:20px; overflow:visible; position:relative; z-index:2; display:flex; justify-content:center; align-items:center; transition:transform 0.5s var(--ease-back); }
.card:hover .product-img-wrapper { transform:scale(1.1) rotate(5deg) translateZ(0); }
.product-img-wrapper img { width:100%; height:100%; transform: translateZ(0); -webkit-transform: translateZ(0); object-fit:cover; filter:drop-shadow(0 20px 30px rgba(0,0,0,0.7)); }
.card-content { margin-top:20px; width:100%; }
.card-info h3 { font-family:'Cormorant Garamond',serif; font-size:1.55rem; color:#fff; margin-bottom:8px; text-transform:capitalize; }
.card-info p { color:rgba(160,160,160,1); font-size:0.86rem; line-height:1.5; margin-bottom:22px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:300; }
.card-footer { display:flex; justify-content:space-between; align-items:center; width:100%; padding-top:18px; border-top:1px solid rgba(255,255,255,0.07); }
.price { font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.2rem; color:var(--accent-gold); }
.order-now {
    font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
    color:var(--accent-gold); background:transparent; padding:9px 20px;
    border-radius:50px; border:1px solid rgba(200,151,42,0.35);
    transition:all 0.4s var(--ease); cursor:pointer; position:relative; overflow:hidden;
}
.card:hover .order-now { color:#1a0800; background:var(--accent-gold); border-color:var(--accent-gold); box-shadow:0 8px 20px rgba(200,151,42,0.3); }

/* Empty State */
.empty-state { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; text-align:center; background:rgba(255,255,255,0.02); border-radius:20px; border:1px dashed rgba(200,151,42,0.2); }
.empty-icon { margin-bottom:20px; filter:drop-shadow(0 0 10px rgba(200,151,42,0.2)); }
.empty-state h3 { color:var(--accent-gold); font-size:1.7rem; font-weight:600; margin-bottom:10px; }
.empty-state p { color:#a0a0a0; max-width:360px; line-height:1.6; margin-bottom:28px; font-size:0.9rem; }
.reset-filter-btn { background:transparent; border:1px solid var(--accent-gold); color:var(--accent-gold); padding:12px 28px; border-radius:50px; cursor:pointer; font-weight:600; transition:all 0.3s; text-transform:uppercase; font-size:0.78rem; letter-spacing:0.12em; }
.reset-filter-btn:hover { background:var(--accent-gold); color:#1a0408; }

/* Loading */
.loading-container { width:100%; min-height:400px; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.aroma-bowl { position:relative; width:150px; height:100px; display:flex; justify-content:center; align-items:flex-end; margin-bottom:20px; }
.bowl-line { width:100px; height:40px; border-radius:0 0 100px 100px; border-bottom:3px solid #F4D03F; border-left:1px solid transparent; border-right:1px solid transparent; box-shadow:0 10px 20px -5px rgba(244,208,63,0.5); position:absolute; bottom:0; opacity:0; animation:bowlFadeIn 3s ease-in-out infinite; }
.bowl-glow { width:60px; height:10px; background:#F4D03F; border-radius:50%; position:absolute; bottom:10px; filter:blur(15px); opacity:0.4; animation:glowPulse 3s ease-in-out infinite; }
.steam-source { position:absolute; bottom:30px; width:100%; display:flex; justify-content:center; }
.vapor { position:absolute; bottom:0; background:#fffce0; border-radius:50%; filter:blur(8px); opacity:0; }
.v1{width:15px;height:40px;left:45%;animation:riseVapor 4s infinite linear;}
.v2{width:20px;height:60px;left:55%;background:#F4D03F;animation:riseVapor 4s infinite linear;animation-delay:1.5s;}
.v3{width:10px;height:30px;left:40%;animation:riseVapor 3s infinite linear;animation-delay:2.5s;}
.v4{width:12px;height:50px;left:60%;animation:riseVapor 3.5s infinite linear;animation-delay:0.5s;}
.loading-text { font-family:'Jost',sans-serif; font-size:1.1rem; font-weight:900; color:#fff; letter-spacing:2px; text-transform:uppercase; display:flex; }
.loading-text span { display:inline-block; animation:textFade 3.5s infinite; opacity:0.1; }
.loading-text .space { width:12px; }
@keyframes riseVapor{0%{transform:translateY(0) scaleX(1);opacity:0}20%{opacity:0.6}50%{transform:translateY(-40px) scaleX(1.5)}100%{transform:translateY(-90px) scaleX(3);opacity:0;filter:blur(15px)}}
@keyframes bowlFadeIn{0%,100%{opacity:0.5;border-color:#c7a930}50%{opacity:1;border-color:#F4D03F}}
@keyframes glowPulse{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:0.6;transform:scale(1.2)}}
@keyframes textFade{0%,100%{opacity:0.1}50%{opacity:1;text-shadow:0 0 10px #F4D03F}}
.loading-text span:nth-child(1){animation-delay:0s}.loading-text span:nth-child(2){animation-delay:.1s}.loading-text span:nth-child(3){animation-delay:.2s}.loading-text span:nth-child(4){animation-delay:.3s}.loading-text span:nth-child(5){animation-delay:.4s}.loading-text span:nth-child(6){animation-delay:.5s}.loading-text span:nth-child(8){animation-delay:.6s}.loading-text span:nth-child(9){animation-delay:.7s}.loading-text span:nth-child(10){animation-delay:.8s}.loading-text span:nth-child(11){animation-delay:.9s}

/* Pagination */
#pagination-controls { display:flex; justify-content:center; gap:12px; margin-top:40px; padding-bottom:20px; }

/* 3. Tombol Prev & Next (Solusi untuk kesan "Mewah") */
.page-btn {
    padding: 12px 32px; /* Area padding diperbesar sedikit agar tombol tidak terlihat kurus */
    background: rgba(255, 215, 0, 0.03); /* Latar transparan yang sangat tipis agar tidak terlalu flat */
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: 'Jost', sans-serif;
    font-weight: 500; /* Sedikit diturunkan dari 600 agar terlihat lebih elegan dan modern */
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 50px; /* Dibuat lebih membulat sempurna (pill shape) */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transisi lebih lambat dan natural */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Efek dimensi / bayangan halus */
}

/* Efek saat kursor diarahkan ke tombol */
.page-btn:hover {
    background: var(--accent-gold);
    color: #1a0408;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25); /* Efek 'glow' keemasan yang mewah */
    transform: translateY(-2px); /* Tombol sedikit melayang saat di-hover */
}

/* Kondisi tombol saat tidak bisa diklik (Disabled) */
.page-btn.disabled {
    border-color: rgba(255, 255, 255, 0.15); /* Menggunakan warna semi-transparan, bukan abu-abu pekat */
    color: rgba(255, 255, 255, 0.3);
    background: transparent;
    pointer-events: none;
    box-shadow: none; /* Hilangkan bayangan agar terlihat benar-benar tidak aktif */
}

/* ── 13. HISTORY / SEJARAH SECTION ── */
.history-section { padding:100px 10% 120px; background:linear-gradient(to bottom, #4a0e1c, #2d0811); position:relative; overflow:hidden; }
.history-container { display:flex; align-items:center; gap:80px; max-width:1200px; margin:0 auto; position:relative; z-index:2; }
.history-image { flex:1; position:relative; }
.image-frame { width:100%; height:450px; position:relative; }
.image-frame img { width:100%; height:100%; object-fit:cover; border-radius:20px; border:1px solid rgba(200,151,42,0.3); box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.image-frame::after { content:''; position:absolute; top:25px; left:25px; right:-25px; bottom:-25px; border:2px solid var(--gold-line); border-radius:20px; z-index:-1; }
.history-content { flex:1.2; }
.gold-tag { color:var(--accent-gold); text-transform:uppercase; letter-spacing:5px; font-size:0.82rem; font-weight:600; display:block; margin-bottom:15px; }
.history-content h2 { font-family:'Cormorant Garamond',serif; font-size:3rem; line-height:1.2; margin-bottom:24px; background:linear-gradient(to right,#fff,var(--accent-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.history-content p { color:rgba(255,255,255,0.8); line-height:1.85; font-size:1rem; margin-bottom:18px; font-weight:300; }
.history-footer { margin-top:36px; padding-top:28px; border-top:1px solid rgba(200,151,42,0.25); display:flex; gap:36px; }
.stat-item h4 { color:var(--accent-gold); font-size:1.7rem; margin-bottom:4px; font-family:'Cormorant Garamond',serif; font-weight:700; }
.stat-item span { font-size:0.78rem; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.5); }

/* ── 14. VISION MISSION ── */
.vision-mission { padding:100px 5%; background:var(--maroon-dark); position:relative; overflow:hidden; }
.vm-container { position:relative; z-index:1; }
.vm-header { text-align:center; margin-bottom:60px; max-width:800px; margin-left:auto; margin-right:auto; }
.vm-header .section-title { font-family:'Cormorant Garamond',serif; font-size:2.8rem; color:#fff; margin-bottom:10px; background:linear-gradient(to right,#fff,var(--accent-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.vm-header .section-subtitle { color:rgba(255,255,255,0.6); font-size:0.95rem; font-weight:300; }
.vm-header-divider { width:70px; height:3px; background:var(--accent-gold); margin:18px auto; border-radius:2px; }
.vm-content-wrapper { display:grid; grid-template-columns:1fr 0.8fr 1fr; gap:36px; align-items:center; max-width:1300px; margin:0 auto; }
.vm-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); border-radius:22px; padding:38px 28px; text-align:center; transition:all 0.6s var(--ease); height:100%; }
.vm-card:hover { transform:translateY(-8px) scale(1.01); border-color:rgba(200,151,42,0.45); background:rgba(255,255,255,0.055); box-shadow:0 28px 55px rgba(0,0,0,0.3),0 0 40px rgba(200,151,42,0.1); }
.vm-icon-wrapper { font-size:2.2rem; color:var(--accent-gold); margin-bottom:18px; transition:transform 0.5s; }
.vm-card:hover .vm-icon-wrapper { transform:scale(1.15) rotate(8deg); }
.vm-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.7rem; color:#fff; margin-bottom:10px; }
.vm-divider { width:36px; height:2.5px; background:var(--accent-gold); margin:14px auto 22px; transition:width 0.4s; }
.vm-card:hover .vm-divider { width:72px; }
.vm-card p, .mission-list li { color:rgba(255,255,255,0.68); line-height:1.65; font-size:0.93rem; font-weight:300; }
.mission-list { list-style:none; padding:0; text-align:left; }
.mission-list li { margin-bottom:12px; display:flex; gap:10px; }
.mission-list i { color:var(--accent-gold); margin-top:3px; flex-shrink:0; }
.vm-values-vertical { display:flex; flex-direction:column; gap:16px; }
.value-item-row { display:flex; align-items:center; gap:18px; background:rgba(255,255,255,0.025); padding:18px; border-radius:14px; border:1px solid rgba(255,255,255,0.04); transition:all 0.35s ease; }
.value-item-row:hover { background:rgba(255,255,255,0.07); transform:translateX(4px); border-color:rgba(200,151,42,0.25); }
.val-icon-small { width:46px; height:46px; background:rgba(200,151,42,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent-gold); font-size:1.1rem; flex-shrink:0; }
.val-text h4 { color:#fff; font-size:1.05rem; margin-bottom:4px; font-family:'Cormorant Garamond',serif; }
.val-text p { color:rgba(255,255,255,0.5); font-size:0.84rem; margin:0; font-weight:300; }
.vm-bg-decor { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }

/* ── 15. FAQ ── */
.faq-section { padding:80px 20px; background:linear-gradient(to bottom,var(--maroon-deep),var(--maroon-dark)); color:#fff; position:relative; }
.container-faq { max-width:780px; margin:0 auto; }
.section-title { font-size:3rem; font-family:'Cormorant Garamond',serif; background:linear-gradient(to right,#fff,var(--accent-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; margin-bottom:14px; }
.section-subtitle { color:var(--accent-gold); text-transform:uppercase; letter-spacing:4px; font-size:0.82rem; font-weight:300; opacity:0.7; text-align:center; }
.accordion-item { background:rgba(255,255,255,0.04); border:1px solid rgba(200,151,42,0.25); margin-bottom:14px; border-radius:14px; overflow:hidden; transition:0.3s; }
.accordion-item:hover { border-color:var(--accent-gold); }
.accordion-header { padding:20px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1rem; color:#fff; transition:0.3s; }
.accordion-header:hover, .accordion-item.active .accordion-header { color:var(--accent-gold); }
.icon-arrow { color:var(--accent-gold); transition:transform 0.4s; }
.accordion-item.active .icon-arrow { transform:rotate(180deg); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height 0.4s ease-out; background:rgba(0,0,0,0.15); }
.accordion-body p { padding:22px; margin:0; color:rgba(255,255,255,0.75); line-height:1.7; font-size:0.92rem; font-weight:300; }

/* ── 16. CONTACT ── */
.contact-section { position:relative; padding:100px 10%; background:var(--maroon-dark); }
.contact-container { max-width:1300px; margin:0 auto; }
.contact-header { text-align:center; margin-bottom:60px; }
.gold-tag-bright { color:var(--accent-gold); text-transform:uppercase; letter-spacing:5px; font-size:0.82rem; font-weight:600; display:block; margin-bottom:14px; }
.section-title-light { font-size:clamp(2rem,5vw,3.2rem); font-family:'Cormorant Garamond',serif; background:linear-gradient(to right,#fff,var(--accent-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.contact-grid-simple { display:grid; grid-template-columns:1fr 1.5fr; gap:40px; margin-top:50px; }
.info-card-premium { background:rgba(255,255,255,0.04); border:1px solid var(--gold-line); border-radius:24px; padding:38px; height:100%; }
.info-item-box { display:flex; gap:18px; margin-bottom:36px; }
.info-item-box i { font-size:1.4rem; color:var(--accent-gold); background:rgba(200,151,42,0.1); width:56px; height:56px; min-width:56px; display:flex; align-items:center; justify-content:center; border-radius:14px; flex-shrink:0; border:1px solid var(--gold-line); transition:0.3s; }
.info-item-box:hover i { background:rgba(200,151,42,0.2); transform:scale(1.05); }
.text-content h4 { color:var(--accent-gold); font-size:1.1rem; margin-bottom:7px; font-family:'Cormorant Garamond',serif; }
.text-content p { color:rgba(255,255,255,0.75); line-height:1.6; font-size:0.92rem; font-weight:300; }
.operating-hours { list-style:none; padding:0; margin-top:8px; }
.operating-hours li { display:flex; justify-content:space-between; color:rgba(255,255,255,0.75); padding:5px 0; border-bottom:1px dashed rgba(255,255,255,0.07); font-size:0.9rem; }
.operating-hours li span:first-child { color:var(--accent-gold); }
.map-wrapper { position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(200,151,42,0.25); box-shadow:0 20px 40px rgba(0,0,0,0.4); min-height:450px; }
.map-overlay-border { position:absolute; inset:0; pointer-events:none; border:12px solid transparent; }

/* Sosmed Section Kontak */
.kontak-sosmed-sect { padding:60px 8% 100px; }
.kontak-sosmed-inner { max-width:900px; margin:0 auto; }
.sosmed-cards { display:flex; flex-direction:column; gap:14px; }
.sosmed-card {
    display:flex; align-items:center; gap:20px;
    background:rgba(20,8,12,0.85); border:1px solid rgba(255,255,255,0.06);
    border-radius:16px; padding:20px 24px; text-decoration:none;
    color:#fff; transition:all 0.3s ease;
}
.sosmed-card:hover { border-color:var(--gold-line); transform:translateX(8px); background:rgba(30,12,18,0.95); }
.sosmed-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; flex-shrink:0; }
.sosmed-info { flex:1; }
.sosmed-platform { display:block; font-size:0.78rem; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:4px; }
.sosmed-handle { font-size:1rem; font-weight:600; color:#fff; }
.sosmed-arrow { color:rgba(255,255,255,0.3); font-size:0.85rem; }
.sosmed-card:hover .sosmed-arrow { color:var(--accent-gold); }

/* ── 17. PRODUCT MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(6,4,3,0.84); backdrop-filter:blur(18px); display:flex; align-items:center; justify-content:center; padding:16px; z-index:2000; opacity:0; visibility:hidden; transition:opacity 0.38s,visibility 0.38s; }
.modal-overlay.active { opacity:1; visibility:visible; }
.detail-box { background:#141210; width:100%; max-width:840px; display:flex; border-radius:26px; overflow:hidden; position:relative; border:1px solid rgba(200,151,42,0.18); box-shadow:0 0 0 1px rgba(200,151,42,0.04),0 40px 100px rgba(0,0,0,0.8); opacity:0; transform:translateY(28px) scale(0.96); transition:opacity 0.44s var(--ease),transform 0.44s var(--ease); }
.modal-overlay.active .detail-box { opacity:1; transform:translateY(0) scale(1); }
.close-btn { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.35); font-size:18px; cursor:pointer; z-index:20; display:flex; align-items:center; justify-content:center; transition:all 0.22s; user-select:none; }
.close-btn:hover { background:rgba(255,60,60,0.14); color:#ff7070; transform:scale(1.1) rotate(90deg); }
.img-side { flex:0 0 320px; position:relative; display:flex; align-items:center; justify-content:center; padding:36px 20px; overflow:hidden; background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(200,151,42,0.08) 0%,transparent 70%),linear-gradient(160deg,#100F0D 0%,#1C1710 55%,#0C0B09 100%); border-right:1px solid rgba(255,255,255,0.04); }
.img-side::before { content:''; position:absolute; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(200,151,42,0.07) 0%,transparent 65%); top:50%; left:50%; transform:translate(-50%,-50%); animation:imgGlow 4s ease-in-out infinite; }
.img-side::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,transparent 65%,#141210 100%); pointer-events:none; }
@keyframes imgGlow{0%,100%{opacity:0.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.img-side .img-ring { position:absolute; width:280px; height:280px; border-radius:50%; border:1px solid rgba(200,151,42,0.07); top:50%; left:50%; transform:translate(-50%,-50%); animation:ringPulse 4s ease-in-out infinite; }
.img-side .img-ring-2 { position:absolute; width:200px; height:200px; border-radius:50%; border:1px dashed rgba(200,151,42,0.05); top:50%; left:50%; transform:translate(-50%,-50%); animation:ringPulse 4s ease-in-out infinite 1.5s; }
.img-side .img-badge { position:absolute; bottom:16px; left:16px; z-index:5; display:flex; align-items:center; gap:6px; opacity:0.45; }
.img-side .img-badge-line { width:16px; height:1px; background:linear-gradient(to right,var(--accent-gold),transparent); }
.img-side .img-badge-text { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:10px; letter-spacing:0.12em; color:var(--accent-gold); }
.img-side img { width:100%; max-width:270px; position:relative; z-index:1; filter:drop-shadow(0 20px 44px rgba(0,0,0,0.85)); transition:transform 0.5s var(--ease-back); }
.img-side img:hover { transform:scale(1.06) translateY(-6px); }
.info-side { flex:1; padding:32px 28px 28px; color:#f0ead8; display:flex; flex-direction:column; overflow-y:auto; max-height:90vh; scrollbar-width:thin; scrollbar-color:#C8972A #1A1814; }
.info-side::-webkit-scrollbar{width:4px}.info-side::-webkit-scrollbar-track{background:#1A1814;border-radius:10px}.info-side::-webkit-scrollbar-thumb{background:#C8972A;border-radius:10px}
#modal-nama { font-family:'Cormorant Garamond',serif; font-size:1.95rem; font-weight:600; color:#f5f0e8; line-height:1.1; margin-bottom:9px; }
.description { font-size:0.82rem; color:rgba(255,255,255,0.42); line-height:1.7; margin-bottom:18px; font-weight:300; }
.price-tag { font-family:'Cormorant Garamond',serif; color:var(--accent-gold); font-size:2rem; font-weight:600; display:block; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.06); }
.order-section { display:flex; flex-direction:column; flex:1; }
.qty-label { display:block; font-size:0.6rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(200,151,42,0.65); margin-bottom:10px; }
.modal-type-selector { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; }
.modal-type-selector input[type="radio"] { display:none; }
.type-btn { display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.45); font-size:0.78rem; font-weight:500; cursor:pointer; transition:all 0.22s; }
.type-btn:hover { border-color:rgba(200,151,42,0.28); color:rgba(255,255,255,0.85); }
.modal-type-selector input[type="radio"]:checked+.type-btn { background:linear-gradient(135deg,#f4b860 0%,#e09a35 100%); border-color:transparent; color:#1a0e00; font-weight:700; box-shadow:0 4px 20px rgba(200,151,42,0.38); }
.qty-wrapper { display:inline-flex; align-items:center; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:50px; overflow:hidden; margin-bottom:18px; width:fit-content; }
.qty-btn { width:42px; height:42px; background:transparent; border:none; color:rgba(255,255,255,0.85); font-size:1.1rem; cursor:pointer; transition:0.18s; display:flex; align-items:center; justify-content:center; }
.qty-btn:hover { background:rgba(200,151,42,0.1); color:var(--accent-gold); }
#qty-display { min-width:48px; text-align:center; font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:600; color:#f5f0e8; border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.06); padding:0 4px; line-height:42px; }
#modal-nama-pemesan { width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:12px 14px; color:#f0ead8; font-family:'Jost',sans-serif; font-size:0.85rem; font-weight:300; outline:none; transition:border-color 0.22s,box-shadow 0.22s; margin-bottom:14px; }
#modal-nama-pemesan::placeholder { color:rgba(255,255,255,0.2); font-style:italic; }
#modal-nama-pemesan:focus { border-color:rgba(200,151,42,0.4); box-shadow:0 0 0 3px rgba(200,151,42,0.07); }
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
#modal-nama-pemesan.error { border-color:rgba(231,76,60,0.6); animation:shake 0.35s ease; }
#modal-catatan { width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:11px 13px; color:#f0ead8; font-family:'Jost',sans-serif; font-size:0.82rem; font-weight:300; resize:none; outline:none; line-height:1.65; min-height:54px; transition:border-color 0.22s,box-shadow 0.22s; margin-bottom:20px; }
#modal-catatan::placeholder { color:rgba(255,255,255,0.2); font-style:italic; }
#modal-catatan:focus { border-color:rgba(200,151,42,0.4); box-shadow:0 0 0 3px rgba(200,151,42,0.07); }
.action-buttons { display:flex; gap:10px; margin-top:auto; }
.btn-wa { flex:1; height:50px; border:none; border-radius:50px; background:linear-gradient(135deg,#25d366 0%,#18a84a 100%); color:#fff; font-family:inherit; font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.26s; box-shadow:0 4px 20px rgba(37,211,102,0.28); display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-wa:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,0.45); }
.btn-cart-add { width:50px; height:50px; border-radius:50px; background:transparent; border:1.5px solid rgba(200,151,42,0.45); color:var(--accent-gold); font-size:1.05rem; cursor:pointer; transition:all 0.26s; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.btn-cart-add:hover { background:rgba(200,151,42,0.1); border-color:var(--accent-gold); transform:translateY(-2px); }
@media(max-width:640px){.modal-overlay{padding:10px}.detail-box{flex-direction:column;max-height:93vh;overflow-y:auto;border-radius:20px}.img-side{flex:0 0 auto;height:185px;padding:14px 18px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.05)}.img-side::after{background:linear-gradient(to bottom,transparent 55%,#141210 100%)}.img-side img{max-width:150px;max-height:155px;width:auto}.info-side{padding:20px 18px 22px;max-height:none}#modal-nama{font-size:1.55rem}.price-tag{font-size:1.7rem}}

/* ── 18. TOAST ── */
#toast-container { position:fixed; top:30px; left:50%; transform:translateX(-50%); z-index:99999; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:14px; padding:14px 22px; background:#1A1710; border:1px solid rgba(200,151,42,0.35); border-radius:50px; box-shadow:0 8px 40px rgba(0,0,0,0.6); white-space:nowrap; pointer-events:auto; position:relative; opacity:0; transform:translateY(-14px) scale(0.95); transition:opacity 0.38s var(--ease),transform 0.38s var(--ease); }
.toast.show { opacity:1; transform:translateY(0) scale(1); }
.toast.hide { opacity:0; transform:translateY(-10px) scale(0.95); }
.toast-icon { width:32px; height:32px; border-radius:50%; background:rgba(200,151,42,0.15); border:1px solid rgba(200,151,42,0.3); display:flex; align-items:center; justify-content:center; font-size:13px; color:#F4B860; flex-shrink:0; }
.toast-text { display:flex; flex-direction:column; gap:2px; }
.toast-title { font-size:12.5px; font-weight:600; color:#F0EAE0; }
.toast-sub { font-size:10.5px; color:rgba(200,151,42,0.75); font-weight:400; }
.toast-progress { position:absolute; bottom:0; left:16px; right:16px; height:1.5px; background:rgba(200,151,42,0.15); border-radius:10px; overflow:hidden; }
.toast-progress-bar { height:100%; width:100%; background:linear-gradient(to right,#C8972A,#F4B860); border-radius:10px; transform-origin:left; animation:toastProgress 2.8s linear forwards; }
@keyframes toastProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ── 19. FOOTER ── */
.main-footer { background:#1a0408; border-top:1px solid rgba(200,151,42,0.18); }
.footer-top { padding:70px 0 0; }
.footer-container { max-width:1200px; margin:0 auto; padding:0 5% 55px; display:grid; grid-template-columns:1.5fr 0.85fr 0.85fr 1.1fr; gap:48px; }
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.footer-logo span { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:700; color:var(--accent-gold); }
.brand-desc { color:rgba(255,255,255,0.5); line-height:1.8; font-size:0.88rem; font-weight:300; }
.footer-col h4 { color:#fff; font-family:'Cormorant Garamond',serif; font-size:1.2rem; margin-bottom:24px; position:relative; }
.footer-col h4::after { content:''; position:absolute; left:0; bottom:-8px; width:28px; height:1.5px; background:var(--accent-gold); }
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom:12px; }
.footer-links a { color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.88rem; font-weight:300; transition:all 0.3s; }
.footer-links a:hover { color:var(--accent-gold); padding-left:6px; }
.social-links { display:flex; flex-direction:column; gap:11px; }
.social-links a { display:flex; align-items:center; gap:10px; text-decoration:none; color:rgba(255,255,255,0.55); font-size:0.88rem; font-weight:300; transition:0.3s; }
.social-links a i { width:32px; height:32px; background:rgba(200,151,42,0.1); color:var(--accent-gold); border-radius:8px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(200,151,42,0.2); transition:0.3s; font-size:0.85rem; }
.social-links a:hover { color:var(--accent-gold); }
.social-links a:hover i { background:var(--accent-gold); color:#1a0408; }
.footer-hours p { display:flex; justify-content:space-between; color:rgba(255,255,255,0.5); font-size:0.83rem; font-weight:300; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.footer-hours p span:first-child { color:rgba(200,151,42,0.7); }
.footer-bottom { background:rgba(0,0,0,0.2); padding:20px 5%; border-top:1px solid rgba(255,255,255,0.04); }
.footer-bottom-container { max-width:1200px; margin:0 auto; display:flex; justify-content:center; }
.footer-bottom-container p { color:rgba(255,255,255,0.25); font-size:0.78rem; letter-spacing:0.06em; font-weight:300; }

/* ── 20. FAQ / VM CLOUD DECOR ── */
.faq-bg-decor { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.faq-cloud { position:absolute; opacity:0.12; animation:floatReal 6s ease-in-out infinite; }
@keyframes floatReal{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}
.c1{top:5%;left:-20px;width:170px}.c2{top:22%;right:-45px;width:210px;animation-delay:2s}.c3{bottom:18%;left:8%;width:140px;opacity:.08}.c4{top:8%;right:28%;width:150px;opacity:.07;animation-delay:5s}.c5{bottom:38%;left:38%;width:190px;opacity:.05;animation-delay:1s}
.vm1{top:-45px;left:8px;width:280px;opacity:.14}.vm2{bottom:-35px;right:8px;width:280px;opacity:.11;animation-delay:2s}.vm3{top:5%;right:18%;width:190px;opacity:.09;animation-delay:5s}.vm4{bottom:8%;left:-18px;width:260px;opacity:.09;animation-delay:1s}.vm5{top:38%;right:-28px;width:230px;opacity:.09;animation-delay:3s}.vm7{bottom:100px;left:38%;width:280px;opacity:.07;animation-delay:1.5s}
.vmd-1{top:-25px;left:-25px;width:200px;opacity:.14}.vmd-2{top:8px;right:-35px;width:185px;transform:scaleX(-1);opacity:.11;animation-delay:1.5s}.vmd-3{top:33%;left:-55px;width:260px;opacity:.09;animation-delay:2s}.vmd-4{bottom:-35px;right:-45px;width:300px;opacity:.11;animation-delay:0.5s}
.pc-1{top:-45px;left:8px;width:210px;opacity:.14}.pc-2{top:18px;right:-18px;width:220px;transform:scaleX(-1);opacity:.11;animation-delay:1.5s}.pc-4{bottom:-35px;right:8px;width:280px;opacity:.11}.pc-5{bottom:8%;left:-28px;width:260px;opacity:.09;animation-delay:2s}.pc-6{top:4%;left:38%;width:190px;opacity:.07;animation-delay:4s}

/* ── 21. SCROLL ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-scroll { opacity:0; transform:translateY(45px); transition:all 0.85s cubic-bezier(0.25,1,0.5,1); }
.fade-scroll.muncul { opacity:1; transform:translateY(0); }
.fade-up-slow { opacity:0; transform:translateY(45px); transition:transform 0.85s cubic-bezier(0.2,0.8,0.2,1),opacity 0.85s ease-out; will-change:transform,opacity; }
.fade-up-slow.muncul { opacity:1; transform:translateY(0); }

/* ── 22. CART PAGE SPECIFIC ── */
/* Cart styles are inline in cart.php */

/* ── 23. TESTIMONI PAGE SPECIFIC ── */
.page-testimoni { background:var(--maroon-dark); }
.testi-hero { position:relative; z-index:1; text-align:center; padding:60px 48px 90px; margin-top:var(--nav-h); overflow:visible; }
.hero-line { position:absolute; height:1px; background:linear-gradient(to right,transparent,var(--gold-line),transparent); left:0; right:0; pointer-events:none; animation:lineGrow 1.2s var(--ease) 0.3s both; }
.hero-line-top{top:0}.hero-line-bot{bottom:0}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-ornament { position:absolute; width:60px; height:60px; border-color:var(--gold-line); border-style:solid; pointer-events:none; opacity:0; animation:fadeUp 0.8s var(--ease) 0.4s both; }
.hero-ornament-tl{top:10px;left:48px;border-width:1px 0 0 1px}.hero-ornament-tr{top:10px;right:48px;border-width:1px 1px 0 0}
.hero-eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:0.65rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; animation:fadeUp 0.6s var(--ease) 0.15s both; }
.hero-eyebrow::before, .hero-eyebrow::after { content:''; display:block; width:36px; height:1px; background:linear-gradient(to right,transparent,var(--gold)); }
.hero-eyebrow::after{transform:scaleX(-1)}
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,7vw,6rem); font-weight:600; line-height:1; color:var(--text-white); margin-bottom:22px; animation:fadeUp 0.7s var(--ease) 0.22s both; }
.hero-title em { font-style:italic; color:var(--gold-lt); -webkit-text-fill-color:var(--gold-lt); animation:shimmerColor 5s linear infinite; }
@keyframes shimmerColor{0%,100%{color:var(--gold);-webkit-text-fill-color:var(--gold)}50%{color:var(--gold-lt);-webkit-text-fill-color:var(--gold-lt)}}
.star-arc { display:flex; justify-content:center; align-items:flex-end; gap:8px; height:64px; margin:0 auto 32px; animation:fadeUp 0.6s var(--ease) 0.38s both; }
.star-arc i { opacity:0; animation:starPop 0.5s var(--ease-back) both; }
.star-arc i.fa-solid{color:var(--gold-lt);filter:drop-shadow(0 4px 10px rgba(200,151,42,0.55))}
.star-arc i.fa-regular{color:rgba(255,255,255,0.2)}
.star-arc i:nth-child(1){font-size:1.4rem;margin-bottom:20px;animation-delay:.40s}.star-arc i:nth-child(2){font-size:1.9rem;margin-bottom:9px;animation-delay:.46s}.star-arc i:nth-child(3){font-size:2.5rem;margin-bottom:0;animation-delay:.52s}.star-arc i:nth-child(4){font-size:1.9rem;margin-bottom:9px;animation-delay:.58s}.star-arc i:nth-child(5){font-size:1.4rem;margin-bottom:20px;animation-delay:.64s}
@keyframes starPop{from{opacity:0;transform:scale(0.4) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.hero-subtitle { max-width:500px; margin:0 auto 36px; font-size:0.9rem; color:rgba(240,234,224,0.52); line-height:1.8; animation:fadeUp 0.7s var(--ease) 0.42s both; }
.hero-actions-testi { display:flex; flex-direction:column; align-items:center; gap:18px; animation:fadeUp 0.7s var(--ease) 0.52s both; }
.score-pill { display:inline-flex; align-items:center; gap:18px; background:rgba(20,16,10,0.9); border:1px solid var(--gold-line); border-radius:50px; padding:14px 28px; box-shadow:0 8px 40px rgba(0,0,0,0.5); }
.score-num { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:700; color:var(--gold-lt); line-height:1; }
.score-divider{width:1px;height:40px;background:var(--gold-line)}.score-right{text-align:left}
.score-stars{display:flex;gap:4px;margin-bottom:4px}.score-stars i{color:var(--gold);font-size:0.78rem}
.score-count{font-size:0.7rem;color:rgba(255,255,255,0.35);letter-spacing:.08em}
.btn-tulis-ulasan { position:relative; display:inline-flex; align-items:center; gap:11px; padding:16px 38px; background:linear-gradient(135deg,var(--gold) 0%,var(--gold-lt) 50%,var(--gold) 100%); background-size:200% auto; color:#120800; border:none; border-radius:50px; font-family:'Jost',sans-serif; font-size:0.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; overflow:hidden; transition:background-position 0.5s,transform 0.3s,box-shadow 0.3s; box-shadow:0 6px 30px rgba(200,151,42,0.35); }
.btn-tulis-ulasan:hover { background-position:right center; transform:translateY(-3px); }
.testi-section { position:relative; z-index:1; padding:0 40px 110px; max-width:1300px; margin:0 auto; }
.testi-section-label { display:flex; align-items:center; gap:16px; margin-bottom:36px; }
.testi-section-label span { font-size:0.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,0.3); white-space:nowrap; }
.testi-section-label::before,.testi-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(200,151,42,0.15))}.testi-section-label::after{transform:scaleX(-1)}
.testi-grid { columns:3; column-gap:22px; }
.testi-card { break-inside:avoid; margin-bottom:22px; background:rgba(20,16,10,0.9); border:1px solid rgba(255,255,255,0.04); border-radius:20px; padding:30px 26px 24px; position:relative; overflow:hidden; transition:transform 0.38s var(--ease),border-color 0.38s,box-shadow 0.38s; }
.testi-card:hover { transform:translateY(-6px); border-color:var(--gold-line); box-shadow:0 24px 60px rgba(0,0,0,0.55); }
.testi-card.featured { background:linear-gradient(150deg,#1D1408 0%,#120D06 100%); border-color:rgba(200,151,42,0.3); }
.quote-float { position:absolute; top:10px; right:18px; font-family:'Cormorant Garamond',serif; font-size:7rem; font-weight:700; line-height:1; color:rgba(200,151,42,0.055); pointer-events:none; }
.card-stars{display:flex;gap:4px;margin-bottom:14px}.card-stars i{color:var(--gold);font-size:.72rem}
.card-komentar { font-family:'Cormorant Garamond',serif; font-size:1.08rem; font-style:italic; color:rgba(240,234,224,0.88); line-height:1.75; margin-bottom:22px; }
.card-footer-testi { display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid rgba(255,255,255,0.05); }
.card-author{font-size:.82rem;font-weight:600;color:var(--gold);letter-spacing:.04em}
.card-sumber{font-size:.66rem;color:rgba(255,255,255,0.3);display:flex;align-items:center;gap:5px}
.card-sumber i{color:rgba(200,151,42,0.7);font-size:.58rem}
.testi-modal-overlay { position:fixed; inset:0; background:rgba(4,2,1,0.88); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:9999; opacity:0; visibility:hidden; transition:opacity 0.38s,visibility 0.38s; }
.testi-modal-overlay.active { opacity:1; visibility:visible; }
.modal-card { background:rgba(20,16,10,0.95); border:1px solid var(--gold-line); border-radius:28px; padding:44px 40px; width:100%; max-width:490px; max-height:92vh; overflow-y:auto; scrollbar-width:none; position:relative; box-shadow:0 50px 120px rgba(0,0,0,0.8); transform:scale(0.88) translateY(20px); transition:transform 0.42s var(--ease-back); }
.modal-card::-webkit-scrollbar{display:none}
.testi-modal-overlay.active .modal-card { transform:scale(1) translateY(0); }
.close-modal { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.35); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.22s; }
.close-modal:hover { background:rgba(220,60,60,0.14); color:#ff7070; transform:rotate(90deg); }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:600; color:var(--text-white); margin-bottom:28px; }
.modal-title em{font-style:italic;color:var(--gold)}
.field-label { display:block; font-size:0.63rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
.input-group-testi { margin-bottom:16px; }
.input-group-testi input, .input-group-testi textarea { width:100%; padding:13px 16px; background:rgba(30,22,14,0.9); border:1px solid rgba(255,255,255,0.07); border-radius:14px; color:var(--text-white); font-family:'Jost',sans-serif; font-size:0.88rem; font-weight:300; resize:none; transition:border-color 0.25s,box-shadow 0.25s,background 0.25s; }
.input-group-testi input::placeholder, .input-group-testi textarea::placeholder { color:rgba(255,255,255,0.22); font-style:italic; }
.input-group-testi input:focus, .input-group-testi textarea:focus { outline:none; border-color:rgba(200,151,42,0.45); background:rgba(36,26,16,0.9); box-shadow:0 0 0 3px rgba(200,151,42,0.09); }
.checkbox-group { display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:0.78rem; color:rgba(255,255,255,0.45); line-height:1.5; }
.checkbox-group input[type="checkbox"] { accent-color:var(--gold); width:15px; height:15px; flex-shrink:0; }
.rating-group{margin-bottom:20px}
.star-rating-input { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; width:100%; margin-bottom:10px; }
.star-rating-input input[type="radio"]{display:none}
.star-rating-input label { color:rgba(240,234,224,0.18); cursor:pointer; line-height:1; transition:transform 0.15s,color 0.15s; user-select:none; }
.star-rating-input label::before{content:'★'}
.star-rating-input label[for="star1"],.star-rating-input label[for="star2"],.star-rating-input label[for="star3"],.star-rating-input label[for="star4"],.star-rating-input label[for="star5"]{font-size:2.8rem;margin-bottom:0}
.star-rating-input label.lit { color:var(--gold-lt); filter:drop-shadow(0 2px 8px rgba(200,151,42,0.55)); }
.star-rating-input label:hover{transform:scale(1.15)}
.rating-reaction { font-size:1.05rem; font-weight:500; font-style:italic; color:var(--gold); min-height:30px; letter-spacing:.02em; transition:transform .18s; }
.btn-submit-gold { width:100%; padding:16px; background:linear-gradient(135deg,var(--gold) 0%,var(--gold-lt) 50%,var(--gold) 100%); background-size:200% auto; color:#120800; border:none; border-radius:50px; font-family:'Jost',sans-serif; font-size:0.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; margin-top:10px; transition:background-position 0.5s,transform 0.3s,box-shadow 0.3s; box-shadow:0 4px 26px rgba(200,151,42,0.3); }
.btn-submit-gold:hover { background-position:right center; transform:translateY(-2px); box-shadow:0 12px 34px rgba(200,151,42,0.42); }
.success-card{text-align:center}
.icon-sukses-wrapper { width:84px; height:84px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--gold); margin:0 auto 22px; animation:floatAnim 3s ease-in-out infinite; }
@keyframes floatAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.success-title{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--text-white);margin-bottom:10px}
.success-desc{font-size:.88rem;color:rgba(255,255,255,0.52);margin-bottom:30px;line-height:1.7}
#toast-container-testi { position:fixed; top:26px; left:50%; transform:translateX(-50%); z-index:99999; pointer-events:none; }
.toast-notif { display:flex; align-items:center; gap:12px; padding:13px 24px; background:rgba(20,16,10,0.95); border:1px solid rgba(200,151,42,0.32); border-radius:50px; box-shadow:0 10px 40px rgba(0,0,0,0.6); font-size:0.82rem; color:var(--text-white); white-space:nowrap; opacity:0; transform:translateY(-14px) scale(0.94); transition:opacity 0.35s var(--ease),transform 0.35s var(--ease); }
.toast-notif.show{opacity:1;transform:translateY(0) scale(1)}
.toast-notif i{color:var(--gold);font-size:.8rem}
.blob-tr { position:fixed; top:-200px; right:-200px; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(90,35,8,0.5) 0%,transparent 65%); pointer-events:none; z-index:0; }
.blob-bl { position:fixed; bottom:-200px; left:-150px; width:550px; height:550px; border-radius:50%; background:radial-gradient(circle,rgba(55,22,4,0.4) 0%,transparent 65%); pointer-events:none; z-index:0; }
.animate-enter { opacity:0; animation:fadeUp 0.75s var(--ease) both; }
@media(max-width:1000px){.testi-grid{columns:2}}
@media(max-width:600px){.testi-grid{columns:1}.modal-card{padding:36px 22px}.testi-hero{padding:40px 24px 70px;margin-top:70px}.testi-section{padding:0 20px 80px}}

/* ── 24. ADMIN DROPDOWN ── */
.admin-dropdown{position:relative;display:inline-block}
.admin-icon{color:var(--accent-gold);font-size:1.1rem;cursor:pointer;transition:.3s}
.dropdown-content{display:none;position:absolute;right:0;top:100%;background:#1a0101;min-width:155px;box-shadow:0 8px 20px rgba(0,0,0,0.5);border:1px solid var(--accent-gold);border-radius:10px;z-index:1000;overflow:hidden}
.dropdown-content a{color:#fff;padding:12px 16px;text-decoration:none;display:block;font-size:0.86rem;transition:.2s;border-bottom:1px solid rgba(255,255,255,0.08)}
.dropdown-content a:hover{background:var(--accent-gold);color:#4a0404}
.admin-dropdown:hover .dropdown-content{display:block}

/* ── 25. RESPONSIVE ── */
@media(max-width:1200px){
    .nav-inner{padding:0 32px}
    .hero-inner{padding:60px 5%;gap:40px}
    .hero-visual{flex:0 0 420px}
    .hv-bowl{width:360px;height:360px}
    .hv-ring-1{width:400px;height:400px}.hv-ring-2{width:310px;height:310px}.hv-ring-3{width:230px;height:230px}
}
@media(max-width:1024px){
    .hero-inner{flex-direction:column;text-align:center;padding-top:30px;gap:20px}
    .hero-text{max-width:100%}
    .hero-actions{justify-content:center}
    .hero-stats-row{justify-content:center}
    .hero-visual{flex:0 0 auto}
    .hero-scroll-cue{display:none}
    .about-teaser-wrap{flex-direction:column;gap:60px}
    .at-img-frame{height:340px}
    .history-container{flex-direction:column;gap:50px}
    .image-frame{height:350px}
    .vm-content-wrapper{grid-template-columns:1fr}
    .vm-values-vertical{flex-direction:row;flex-wrap:wrap;justify-content:center}
    .value-item-row{flex:1;min-width:230px}
    .contact-grid-simple{grid-template-columns:1fr}
    .map-wrapper{min-height:300px}
    .cta-banner-inner{flex-direction:column;text-align:center;gap:30px}
    .cta-b-actions{justify-content:center}
    .footer-container{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    :root{--nav-h:64px}
    .nav-inner{padding:0 20px}
    .nav-links{display:none}
    .hamburger{display:flex}
    .hero-inner{padding:40px 5% 60px}
    .hv-bowl{width:280px;height:280px}
    .hv-ring-1{width:310px;height:310px}.hv-ring-2{width:240px;height:240px}.hv-ring-3{width:180px;height:180px}
    .hv-float{display:none}
    .home-sect{padding:70px 5%}
    .menu-preview-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
    .tp-grid{grid-template-columns:1fr}
    .gallery-header h2{font-size:2rem;padding:0 5%}
    .gallery-container{padding:70px 28px 30px;gap:14px}
    .string-container{top:28px;height:55px}
    .polaroid-card{width:165px;padding:8px 8px 42px}
    .pin-clip{width:16px;height:30px;top:-28px}
    .photo-frame{height:130px}
    .photo-caption h4{font-size:.85rem}
    .path-desktop{display:none}.path-mobile{display:block}
    .gallery-scroll-wrapper{justify-content:flex-start;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
    .gallery-scroll-wrapper::-webkit-scrollbar{display:none}
    .gallery-container{width:max-content;min-width:100vw}
    .page-hero-mini{height:200px}
    .phm-title{font-size:2rem}
    .cta-banner-inner{padding:40px 28px;margin-bottom:60px}
    .footer-container{grid-template-columns:1fr;gap:36px}
}
@media(max-width:480px){
    .hero-inner{padding:30px 5% 50px}
    .h1-main{font-size:2.6rem}
    .hero-stats-row{flex-direction:column;gap:16px}
    .hs-sep{display:none}
    .hv-bowl{width:220px;height:220px}
    .hv-ring-1{width:250px;height:250px}.hv-ring-2{display:none}.hv-ring-3{display:none}
    .menu-preview-grid{grid-template-columns:1fr}
    .about-teaser-wrap{gap:40px}
    .at-img-frame{height:260px}
    .cta-banner-inner{padding:32px 20px}
    .cta-b-text h2{font-size:1.6rem}
    .cta-b-actions{flex-direction:column;width:100%}
    .btn-wa-cta,.btn-ghost-white{text-align:center;justify-content:center}
    .sect-title{font-size:1.8rem}
    .history-content h2{font-size:2rem}
    .product-grid{padding:40px 5px}
}

/* ══════════════════════════════════════════════════════
   MENU PAGE — menu-page.css
   Override style.css khusus halaman menu.php
══════════════════════════════════════════════════════ */

/* ── Hero mini sedikit lebih tinggi ── */
.page-menu .page-hero-mini {
    height: 300px;
}

/* Grid lines background di hero */
.phm-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(200,151,42,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,151,42,0.035) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.35) 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.35) 50%, transparent 100%);
}

/* Kanji dekor kanan */
.phm-kanji {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(5rem, 12vw, 9rem);
    color: rgba(200, 151, 42, 0.05);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* Hero inner slide-up saat masuk */
.page-menu .phm-inner {
    animation: menuHeroIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes menuHeroIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stats floating di kanan bawah hero */
.phm-stats {
    position: absolute;
    right: 8%;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 3;
    animation: menuHeroIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.phm-stat { text-align: center; }
.phm-stat-num {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--accent-gold);
    line-height: 1;
}
.phm-stat-lbl {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
    display: block;
}
.phm-stat-sep {
    width: 1px;
    height: 34px;
    background: rgba(255,255,255,0.1);
}

/* ── Filter bar slide in ── */
.menu-full-sect {
    padding: 60px 6% 120px;
}
.menu-filter-bar {
    animation: menuFilterIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes menuFilterIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Search clear button */
.search-clear {
    background: none;
    border: none;
    color: rgba(255,255,255,0.22);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 4px 2px;
    display: none;
    flex-shrink: 0;
    transition: color 0.2s;
    line-height: 1;
}
.search-clear.visible { display: block; }
.search-clear:hover { color: rgba(255, 100, 100, 0.8); }

/* Category badge count */
.cat-btn { display: inline-flex; align-items: center; gap: 6px; }
.cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.15);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
}

/* Results info bar */
.results-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 24px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.results-info-bar.visible { opacity: 1; }
.results-count { font-size: 0.78rem; color: rgba(255,255,255,0.32); }
.results-count strong { color: var(--accent-gold); }
.sort-hint { font-size: 0.7rem; color: rgba(255,255,255,0.2); letter-spacing: 0.06em; }


/* ══════════════════════════════════════════════════════
   ANIMASI — hanya per-elemen dalam card
   Setiap card punya --card-delay dari JS
══════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes cardFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes elFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes imgFadeIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

/* Card keseluruhan masuk */
.page-menu .card.animate-in {
    opacity: 0;
    animation: cardFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--card-delay, 0s);
}

/* Gambar dalam card */
.page-menu .card.animate-in .product-img-wrapper img {
    opacity: 0;
    animation: imgFadeIn 0.6s ease both;
    animation-delay: calc(var(--card-delay, 0s) + 0.05s);
}

/* Judul */
.page-menu .card.animate-in .card-info h3 {
    opacity: 0;
    animation: elFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--card-delay, 0s) + 0.12s);
}

/* Deskripsi */
.page-menu .card.animate-in .card-info p {
    opacity: 0;
    animation: elFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--card-delay, 0s) + 0.18s);
}

/* Footer (harga + tombol) */
.page-menu .card.animate-in .card-footer {
    opacity: 0;
    animation: elFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--card-delay, 0s) + 0.24s);
}

/* ══════════════════════════════════════════════════════
   TENTANG PAGE — tentang-page.css
   Background menyatu, tanpa gambar awan, animasi scroll
══════════════════════════════════════════════════════ */


/* Override section backgrounds supaya transparan — semua nyatu */
.page-tentang .history-section,
.page-tentang .vision-mission,
.page-tentang .tp-keunggulan,
.page-tentang .tp-timeline-sect,
.page-tentang .faq-section {
    background: transparent;
}

/* Section wrapper umum */
.tp-sect {
    position: relative;
    padding: 100px 8%;
    overflow: hidden;
}

/* Pembatas halus antar section */
.tp-sect + .tp-sect::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,151,42,0.12), transparent);
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.tp-hero { overflow: hidden; }

/* Orb dekorasi CSS (gantikan gambar awan) */
.tp-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
}
.tp-orb-1 {
    width: 500px; height: 500px;
    top: -200px; right: -100px;
    background: radial-gradient(circle, rgba(200,151,42,0.07) 0%, transparent 65%);
    animation: orbDrift 8s ease-in-out infinite;
}
.tp-orb-2 {
    width: 350px; height: 350px;
    bottom: -150px; left: -80px;
    background: radial-gradient(circle, rgba(90,16,32,0.5) 0%, transparent 65%);
    animation: orbDrift 10s ease-in-out infinite reverse;
}
@keyframes orbDrift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(20px,-15px) scale(1.04); }
    66%      { transform: translate(-12px,10px) scale(0.97); }
}

/* ══════════════════════════════════════════════════════
   BACKGROUND ORBS (dekorasi section, gantikan awan)
══════════════════════════════════════════════════════ */
.tp-bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: 0;
}
.tp-bg-orb-r {
    width: 600px; height: 600px;
    top: -150px; right: -200px;
    background: radial-gradient(circle, rgba(200,151,42,0.055) 0%, transparent 60%);
    animation: orbDrift 12s ease-in-out infinite;
}
.tp-bg-orb-l {
    width: 450px; height: 450px;
    bottom: -100px; left: -150px;
    background: radial-gradient(circle, rgba(90,16,32,0.35) 0%, transparent 60%);
    animation: orbDrift 9s ease-in-out infinite 2s;
}
.tp-bg-orb-center {
    width: 700px; height: 700px;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(200,151,42,0.04) 0%, transparent 55%);
    animation: orbPulse 7s ease-in-out infinite;
}
@keyframes orbPulse {
    0%,100% { transform: translate(-50%,-50%) scale(1); opacity:0.6; }
    50%      { transform: translate(-50%,-50%) scale(1.1); opacity:1; }
}

/* ══════════════════════════════════════════════════════
   ANIMASI FADE SCROLL — per elemen
   Pakai class .tp-fade-up dan --tp-delay
   Pakai class .tp-reveal-left / .tp-reveal-right untuk slide
══════════════════════════════════════════════════════ */
.tp-fade-up {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--tp-delay, 0s);
}
.tp-fade-up.tp-visible {
    opacity: 1;
    transform: translateY(0);
}

.tp-reveal-left {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-reveal-right {
    opacity: 0;
    transform: translateX(48px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.15s;
}
.tp-reveal-left.tp-visible,
.tp-reveal-right.tp-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ══════════════════════════════════════════════════════
   SEJARAH — image badge tambahan
══════════════════════════════════════════════════════ */
.page-tentang .history-section {
    padding: 100px 8% 120px;
}
.page-tentang .history-container {
    position: relative;
    z-index: 2;
}

.tp-img-badge {
    position: absolute;
    bottom: -18px;
    right: -18px;
    background: linear-gradient(135deg, #C8972A, #F0C060);
    border-radius: 16px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 36px rgba(200,151,42,0.4);
    z-index: 5;
}
.tp-img-badge i {
    font-size: 1.4rem;
    color: #1a0800;
}
.tp-img-badge span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a0800;
}

/* ══════════════════════════════════════════════════════
   SECTION HEADER — shared
══════════════════════════════════════════════════════ */
.tp-sect-header {
    text-align: center;
    margin-bottom: 60px;
}
.tp-sect-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-top: 10px;
}
.tp-sect-title em {
    font-style: italic;
    color: var(--accent-gold);
}

/* ══════════════════════════════════════════════════════
   KEUNGGULAN GRID
══════════════════════════════════════════════════════ */
.tp-keunggulan { padding: 90px 8%; }

.tp-keunggulan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}

.tp-ku-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 32px 26px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
                border-color 0.3s,
                box-shadow 0.4s;
}
/* Gold line bawah saat hover */
.tp-ku-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.tp-ku-card:hover {
    transform: translateY(-8px);
    border-color: rgba(200,151,42,0.25);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 4px 16px rgba(200,151,42,0.08);
}
.tp-ku-card:hover::after { transform: scaleX(0.7); }

.tp-ku-icon {
    width: 52px; height: 52px;
    background: rgba(200,151,42,0.1);
    border: 1px solid rgba(200,151,42,0.2);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    color: var(--accent-gold);
    margin-bottom: 20px;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
}
.tp-ku-card:hover .tp-ku-icon {
    transform: scale(1.12) rotate(-6deg);
    background: rgba(200,151,42,0.18);
}
.tp-ku-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}
.tp-ku-card p {
    color: rgba(255,255,255,0.5);
    font-size: 0.86rem;
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
}

/* ══════════════════════════════════════════════════════
   VISI MISI — override background transparent
══════════════════════════════════════════════════════ */
.page-tentang .vision-mission {
    padding: 90px 8%;
}

/* ══════════════════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════════════════ */
.tp-timeline-sect { padding: 90px 8%; }

.tp-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Garis tengah vertikal */
.tp-timeline-line {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1.5px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(200,151,42,0.3) 15%,
        rgba(200,151,42,0.3) 85%,
        transparent);
    transform: translateX(-50%);
}

.tp-tl-item {
    position: relative;
    width: 46%;
    margin-bottom: 48px;
}
.tp-tl-left  { margin-right: auto; padding-right: 40px; text-align: right; }
.tp-tl-right { margin-left: auto;  padding-left: 40px;  text-align: left; }

/* Dot di garis tengah */
.tp-tl-dot {
    position: absolute;
    top: 24px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(200,151,42,0.3);
    border: 2px solid rgba(200,151,42,0.5);
    transition: transform 0.3s, background 0.3s;
}
.tp-tl-left  .tp-tl-dot { right: -47px; }
.tp-tl-right .tp-tl-dot { left: -47px; }

.tp-tl-dot-active {
    background: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 4px rgba(200,151,42,0.2);
}
.tp-tl-item:hover .tp-tl-dot {
    transform: scale(1.4);
    background: var(--accent-gold);
    border-color: var(--accent-gold);
}

.tp-tl-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 22px 24px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.tp-tl-card:hover {
    border-color: rgba(200,151,42,0.2);
    box-shadow: 0 12px 36px rgba(0,0,0,0.3);
    transform: translateY(-4px);
}
.tp-tl-card-active {
    border-color: rgba(200,151,42,0.25) !important;
    background: rgba(200,151,42,0.04) !important;
}

.tp-tl-year {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 8px;
    background: rgba(200,151,42,0.1);
    padding: 3px 10px;
    border-radius: 50px;
}
.tp-tl-card h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 600;
}
.tp-tl-card p {
    color: rgba(255,255,255,0.5);
    font-size: 0.84rem;
    line-height: 1.65;
    margin: 0;
    font-weight: 300;
}

/* ══════════════════════════════════════════════════════
   FAQ — override background
══════════════════════════════════════════════════════ */
.page-tentang .faq-section {
    padding: 90px 8%;
}
.page-tentang .container-faq {
    max-width: 780px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .tp-keunggulan-grid { grid-template-columns: repeat(2, 1fr); }
    .tp-tl-item { width: 48%; }
}

@media (max-width: 768px) {
    .tp-sect { padding: 70px 5%; }
    .tp-keunggulan { padding: 70px 5%; }
    .tp-keunggulan-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .tp-ku-card { padding: 22px 18px; }

    /* Timeline: satu kolom di mobile */
    .tp-timeline-line { left: 18px; }
    .tp-tl-item { width: 100%; margin-bottom: 28px; }
    .tp-tl-left  {
        text-align: left;
        padding-right: 0;
        padding-left: 44px;
        margin-right: 0;
    }
    .tp-tl-right {
        padding-left: 44px;
        margin-left: 0;
    }
    .tp-tl-left  .tp-tl-dot { right: auto; left: -33px; }
    .tp-tl-right .tp-tl-dot { left: -33px; }

    .tp-img-badge { bottom: -12px; right: -4px; padding: 12px 16px; }
    .tp-img-badge i { font-size: 1rem; }
    .tp-img-badge span { font-size: 1rem; }

    .page-tentang .history-section { padding: 70px 5% 90px; }
    .page-tentang .faq-section { padding: 70px 5%; }
    .page-tentang .vision-mission { padding: 70px 5%; }
    .tp-timeline-sect { padding: 70px 5%; }
}

@media (max-width: 480px) {
    .tp-keunggulan-grid { grid-template-columns: 1fr; gap: 12px; }
    .tp-sect-title { font-size: 1.75rem; }
}

/* ══════════════════════════════════════════════════════
   KONTAK PAGE — kontak-page.css
══════════════════════════════════════════════════════ */

/* Override semua section background jadi transparan */
.page-kontak .contact-section,
.page-kontak .kp-jadwal-sect,
.page-kontak .kp-cara-pesan,
.page-kontak .kp-sosmed-sect,
.page-kontak .kontak-sosmed-sect {
    background: transparent;
}

/* Section wrapper */
.kp-sect {
    position: relative;
    padding: 90px 8%;
    overflow: hidden;
}
/* Divider halus antar section */
.kp-sect + .kp-sect::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,151,42,0.1), transparent);
}
.kp-sect-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════
   ORBS CSS — gantikan gambar awan
══════════════════════════════════════════════════════ */
.kp-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    z-index: 0;
}
.kp-orb-1 {
    width: 500px; height: 500px;
    top: -180px; right: -120px;
    background: radial-gradient(circle, rgba(200,151,42,0.07) 0%, transparent 65%);
    animation: kpOrbDrift 10s ease-in-out infinite;
}
.kp-orb-2 {
    width: 380px; height: 380px;
    bottom: -130px; left: -90px;
    background: radial-gradient(circle, rgba(90,16,32,0.45) 0%, transparent 65%);
    animation: kpOrbDrift 13s ease-in-out infinite reverse;
}
.kp-orb-mid-r {
    width: 500px; height: 500px;
    top: -80px; right: -180px;
    background: radial-gradient(circle, rgba(200,151,42,0.05) 0%, transparent 60%);
    animation: kpOrbDrift 11s ease-in-out infinite 1s;
}
.kp-orb-mid-l {
    width: 450px; height: 450px;
    top: 50%; left: -160px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(90,16,32,0.35) 0%, transparent 60%);
    animation: kpOrbDrift 9s ease-in-out infinite 3s;
}
@keyframes kpOrbDrift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(18px,-14px) scale(1.03); }
    66%      { transform: translate(-10px,12px) scale(0.98); }
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.kp-hero { overflow: hidden; }

.kp-grid-lines {
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(200,151,42,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,151,42,0.03) 1px, transparent 1px);
    background-size: 55px 55px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, rgba(0,0,0,0.35) 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 5%, rgba(0,0,0,0.35) 50%, transparent 100%);
}

/* Hero pill quick-info */
.kp-hero-pills {
    position: absolute;
    bottom: 28px;
    left: 8%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 3;
}
.kp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20,8,12,0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(200,151,42,0.2);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.kp-pill i { color: var(--accent-gold); font-size: 0.8rem; }

/* Hero inner animasi */
.page-kontak .phm-inner {
    animation: kpHeroIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
@keyframes kpHeroIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   ANIMASI SCROLL FADE
══════════════════════════════════════════════════════ */
.kp-fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--kp-delay, 0s);
}
.kp-fade-up.kp-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   KONTAK UTAMA
══════════════════════════════════════════════════════ */
.page-kontak .contact-section {
    padding: 90px 8%;
}
.page-kontak .contact-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.page-kontak .contact-header {
    margin-bottom: 50px;
}

/* Link mini di bawah alamat */
.kp-link-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-gold);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 8px;
    transition: gap 0.2s;
}
.kp-link-mini:hover { gap: 8px; }
.kp-link-mini i { font-size: 0.65rem; }

/* WhatsApp inline button */
.kp-wa-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37,211,102,0.1);
    border: 1px solid rgba(37,211,102,0.25);
    color: #4ade80;
    text-decoration: none;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 6px;
    transition: all 0.3s;
    letter-spacing: 0.02em;
}
.kp-wa-inline:hover {
    background: rgba(37,211,102,0.18);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37,211,102,0.25);
}

/* Map badge */
.kp-map-badge {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20,8,12,0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(200,151,42,0.25);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    pointer-events: none;
}
.kp-map-badge i { color: #ea4335; font-size: 0.85rem; }

/* ══════════════════════════════════════════════════════
   SECTION HEADER shared
══════════════════════════════════════════════════════ */
.kp-sect-header { text-align: center; margin-bottom: 52px; }
.kp-sect-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-top: 10px;
}
.kp-sect-title em { font-style: italic; color: var(--accent-gold); }
.kp-sect-sub {
    color: rgba(255,255,255,0.42);
    font-size: 0.88rem;
    font-weight: 300;
    margin-top: 10px;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════
   JAM OPERASIONAL
══════════════════════════════════════════════════════ */
.kp-jadwal-sect { padding: 90px 8%; }

.kp-jadwal-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 36px;
}

.kp-jadwal-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.35s;
    position: relative;
    overflow: hidden;
}
.kp-jadwal-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.kp-jadwal-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200,151,42,0.22);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.kp-jadwal-card:hover::after { transform: scaleX(0.65); }

.kp-jadwal-special {
    border-color: rgba(200,151,42,0.2);
    background: rgba(200,151,42,0.04);
}

.kp-jadwal-days {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
}
.kp-jadwal-days span {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.05);
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.06);
}
.kp-jadwal-time {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}
.kp-jadwal-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
}
.kp-jadwal-status.open {
    background: rgba(34,197,94,0.1);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.2);
}
.kp-jadwal-status.special {
    background: rgba(200,151,42,0.1);
    color: var(--accent-gold);
    border: 1px solid rgba(200,151,42,0.2);
}
.kp-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: kpStatusPulse 1.8s ease-in-out infinite;
}
@keyframes kpStatusPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.7); }
}
.kp-jadwal-note {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-top: 10px;
    font-style: italic;
}

/* Status buka sekarang */
.kp-open-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 20px 28px;
    max-width: 500px;
    margin: 0 auto;
    transition: border-color 0.3s;
}
.kp-open-now.is-open {
    border-color: rgba(34,197,94,0.25);
    background: rgba(34,197,94,0.04);
}
.kp-open-now.is-closed {
    border-color: rgba(255,80,80,0.2);
    background: rgba(255,80,80,0.03);
}
.kp-on-icon {
    font-size: 1.6rem;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.kp-open-now.is-open  .kp-on-icon { color: #4ade80; background: rgba(34,197,94,0.1); }
.kp-open-now.is-closed .kp-on-icon { color: #f87171; background: rgba(255,80,80,0.1); }
.kp-on-text { display: flex; flex-direction: column; }
.kp-on-text strong { font-size: 0.95rem; color: #fff; font-weight: 700; }
.kp-on-text span { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 3px; font-weight: 300; }

/* ══════════════════════════════════════════════════════
   CARA PESAN
══════════════════════════════════════════════════════ */
.kp-cara-pesan { padding: 90px 8%;  background: var(--maroon-dark); }

.kp-cara-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
/* Garis titik di bawah section title — diletakkan di header, bukan grid */
/* Step connector line — di atas grid cara pesan */
.kp-cara-connector {
    max-width: 1200px;
    margin: 0 auto 0;
    padding: 0 calc(12.5% + 10px);
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}
.kp-cara-connector-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        rgba(200,151,42,0.18) 10%,
        rgba(200,151,42,0.18) 90%,
        transparent);
    position: relative;
}
/* Titik di setiap 25%, 50%, 75% (junction antar card) */
.kp-cara-connector-line::before,
.kp-cara-connector-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(200,151,42,0.4);
    border: 1px solid rgba(200,151,42,0.6);
}
.kp-cara-connector-line::before { left: calc(25% - 3px); }
.kp-cara-connector-line::after  { left: calc(75% - 3px); }



.kp-cara-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 32px 22px 28px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.4s;
}
.kp-cara-card:hover {
    transform: translateY(-8px);
    border-color: rgba(200,151,42,0.22);
    box-shadow: 0 18px 44px rgba(0,0,0,0.38), 0 4px 14px rgba(200,151,42,0.08);
}

.kp-cara-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: rgba(200,151,42,0.12);
    line-height: 1;
    margin-bottom: 6px;
    transition: color 0.3s;
}
.kp-cara-card:hover .kp-cara-num { color: rgba(200,151,42,0.25); }

.kp-cara-icon {
    width: 52px; height: 52px;
    background: rgba(200,151,42,0.1);
    border: 1px solid rgba(200,151,42,0.2);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    color: var(--accent-gold);
    margin: 0 auto 18px;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
}
.kp-cara-card:hover .kp-cara-icon {
    transform: scale(1.12) rotate(-5deg);
    background: rgba(200,151,42,0.18);
}
.kp-cara-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}
.kp-cara-card p {
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    line-height: 1.65;
    margin-bottom: 16px;
    font-weight: 300;
}
.kp-cara-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-gold);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: gap 0.25s;
}
.kp-cara-link:hover { gap: 9px; }
.kp-cara-link i { font-size: 0.65rem; }

/* ══════════════════════════════════════════════════════
   SOSMED
══════════════════════════════════════════════════════ */
.kp-sosmed-sect { padding: 90px 8%; }

.kp-sosmed-card {
    position: relative;
}
.kp-sosmed-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    font-style: italic;
    font-weight: 300;
    flex: 1;
    text-align: right;
    padding-right: 12px;
}
/* Override sosmed-card supaya punya desc */
.page-kontak .sosmed-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 18px;
}
.page-kontak .sosmed-card .sosmed-info { min-width: 0; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .kp-cara-grid { grid-template-columns: repeat(2, 1fr); }
    .kp-jadwal-grid { grid-template-columns: 1fr 1fr; }
    .kp-jadwal-grid .kp-jadwal-card:last-child { grid-column: span 2; }
}
@media (max-width: 768px) {
    .kp-sect { padding: 70px 5%; }
    .page-kontak .contact-section { padding: 70px 5%; }
    .kp-jadwal-sect { padding: 70px 5%; }
    .kp-cara-pesan { padding: 70px 5%; }
    .kp-sosmed-sect { padding: 70px 5%; }
    .kp-hero-pills { display: none; }
    .kp-jadwal-grid { grid-template-columns: 1fr; }
    .kp-jadwal-grid .kp-jadwal-card:last-child { grid-column: span 1; }
    .page-kontak .sosmed-card {
        grid-template-columns: auto 1fr auto;
    }
    .kp-sosmed-desc { display: none; }
}
@media (max-width: 480px) {
    .kp-cara-grid { grid-template-columns: 1fr; gap: 14px; }
    .kp-jadwal-time { font-size: 1.35rem; }
    .kp-sect-title { font-size: 1.7rem; }
}

/* ══════════════════════════════════════════════════════
   TESTIMONI PAGE — testimoni-page.css
   Background nyambung, popup lebih rapi, card modern
══════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
    --gold:        #C8972A;
    --gold-lt:     #F0C060;
    --gold-dim:    rgba(200,151,42,0.12);
    --gold-line:   rgba(200,151,42,0.2);
    --ink:         #3a0a14;
    --s2:          rgba(20,14,10,0.92);
    --s3:          rgba(28,20,14,0.95);
    --text:        #F0EAE0;
    --text-dim:    rgba(240,234,224,0.52);
    --text-muted:  rgba(240,234,224,0.28);
    --ease:        cubic-bezier(0.22,1,0.36,1);
    --ease-back:   cubic-bezier(0.34,1.56,0.64,1);
}


/* ══════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════ */
@keyframes tsFadeUp  { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes tsStarPop { from { opacity:0; transform:scale(0.4) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes tsLineGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes tsOrbDrift { 0%,100%{transform:translate(0,0)}33%{transform:translate(20px,-14px)}66%{transform:translate(-12px,12px)} }
@keyframes tsGlow { 0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} }
@keyframes tsFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes tsShimmerColor { 0%,100%{color:var(--gold);-webkit-text-fill-color:var(--gold)} 50%{color:var(--gold-lt);-webkit-text-fill-color:var(--gold-lt)} }

.animate-enter {
    opacity: 0;
    animation: tsFadeUp 0.7s var(--ease) both;
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.testi-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 60px 48px 90px;
    margin-top: var(--nav-h, 72px);
    overflow: hidden;
}

/* CSS orbs gantikan blob-tr / blob-bl */
.testi-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}
.testi-orb-1 {
    width: 600px; height: 600px;
    top: -250px; right: -180px;
    background: radial-gradient(circle, rgba(90,10,20,0.5) 0%, transparent 65%);
    animation: tsOrbDrift 12s ease-in-out infinite;
}
.testi-orb-2 {
    width: 450px; height: 450px;
    bottom: -180px; left: -120px;
    background: radial-gradient(circle, rgba(60,8,15,0.4) 0%, transparent 65%);
    animation: tsOrbDrift 9s ease-in-out infinite reverse;
}

/* Garis dekoratif */
.hero-line {
    position: absolute; height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-line), transparent);
    left: 0; right: 0; pointer-events: none; transform-origin: center;
    animation: tsLineGrow 1.2s var(--ease) 0.3s both;
}
.hero-line-top { top: 0; }
.hero-line-bot { bottom: 0; }

/* Ornamen sudut */
.hero-ornament {
    position: absolute; width: 56px; height: 56px;
    border-color: var(--gold-line); border-style: solid;
    pointer-events: none; opacity: 0;
    animation: tsFadeUp 0.8s var(--ease) 0.4s both;
}
.hero-ornament-tl { top: 14px; left: 48px; border-width: 1px 0 0 1px; }
.hero-ornament-tr { top: 14px; right: 48px; border-width: 1px 1px 0 0; }

/* Eyebrow */
.hero-eyebrow {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 0.65rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 20px;
    animation: tsFadeUp 0.6s var(--ease) 0.15s both;
}
.hero-eyebrow::before, .hero-eyebrow::after {
    content: ''; display: block; width: 32px; height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
}
.hero-eyebrow::after { transform: scaleX(-1); }

/* Judul */
.hero-title {
    position: relative; z-index: 2;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 600; line-height: 1;
    color: var(--text); margin-bottom: 20px;
    animation: tsFadeUp 0.7s var(--ease) 0.22s both;
}
.hero-title em {
    font-style: italic; color: var(--gold-lt);
    -webkit-text-fill-color: var(--gold-lt);
    animation: tsShimmerColor 5s linear infinite;
}

/* Bintang arc */
.star-arc {
    position: relative; z-index: 2;
    display: flex; justify-content: center; align-items: flex-end;
    gap: 8px; height: 60px; margin: 0 auto 28px;
    animation: tsFadeUp 0.6s var(--ease) 0.38s both;
}
.star-arc i { opacity: 0; animation: tsStarPop 0.5s var(--ease-back) both; }
.star-arc i.fa-solid   { color: var(--gold-lt); filter: drop-shadow(0 4px 10px rgba(200,151,42,0.55)); }
.star-arc i.fa-regular { color: var(--text-muted); }
.star-arc i:nth-child(1) { font-size: 1.4rem; margin-bottom: 18px; animation-delay: .40s; }
.star-arc i:nth-child(2) { font-size: 1.85rem; margin-bottom: 8px;  animation-delay: .46s; }
.star-arc i:nth-child(3) { font-size: 2.4rem;  margin-bottom: 0;    animation-delay: .52s; }
.star-arc i:nth-child(4) { font-size: 1.85rem; margin-bottom: 8px;  animation-delay: .58s; }
.star-arc i:nth-child(5) { font-size: 1.4rem;  margin-bottom: 18px; animation-delay: .64s; }

/* Subtitle */
.hero-subtitle {
    position: relative; z-index: 2;
    max-width: 480px; margin: 0 auto 32px;
    font-size: 0.88rem; color: var(--text-dim); line-height: 1.8;
    animation: tsFadeUp 0.7s var(--ease) 0.42s both;
}

/* Hero actions */
.hero-actions1 {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    animation: tsFadeUp 0.7s var(--ease) 0.52s both;
}

/* Score pill */
.score-pill {
    display: inline-flex; align-items: center; gap: 16px;
    background: rgba(14,10,8,0.85);
    backdrop-filter: blur(14px);
    border: 1px solid var(--gold-line);
    border-radius: 50px; padding: 14px 26px;
    box-shadow: 0 8px 36px rgba(0,0,0,0.5);
}
.score-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem; font-weight: 700;
    color: var(--gold-lt); line-height: 1;
}
.score-divider { width: 1px; height: 38px; background: var(--gold-line); }
.score-right { text-align: left; }
.score-stars { display: flex; gap: 4px; margin-bottom: 4px; }
.score-stars i { color: var(--gold); font-size: 0.75rem; }
.score-stars i.fa-regular { color: var(--text-muted); }
.score-count { font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.08em; }

/* Tombol tulis ulasan */
.btn-tulis-ulasan {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 34px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 50%, var(--gold) 100%);
    background-size: 200% auto;
    color: #120800; border: none; border-radius: 50px;
    font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; overflow: hidden;
    transition: background-position 0.5s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 6px 28px rgba(200,151,42,0.35);
}
.btn-tulis-ulasan:hover {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(200,151,42,0.45);
}
.btn-tulis-ulasan::after {
    content: ''; position: absolute; top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg); transition: left 0.55s;
}
.btn-tulis-ulasan:hover::after { left: 140%; }

/* ══════════════════════════════════════════════════════
   GRID KARTU
══════════════════════════════════════════════════════ */
.testi-section {
    position: relative; z-index: 1;
    padding: 0 40px 100px;
    max-width: 1300px; margin: 0 auto;
}

.testi-section-label {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 36px;
    animation: tsFadeUp 0.6s var(--ease) 0.1s both;
}
.testi-section-label span {
    font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap;
}
.testi-section-label::before,
.testi-section-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,151,42,0.14));
}
.testi-section-label::after { transform: scaleX(-1); }

/* Masonry grid */
.testi-grid { columns: 3; column-gap: 22px; }

/* ── Kartu ── */
.testi-card {
    break-inside: avoid; margin-bottom: 22px;
    background: rgba(16,10,8,0.9);
    border: 1px solid rgba(255,255,255,0.045);
    border-radius: 20px; padding: 28px 24px 22px;
    position: relative; overflow: hidden;
    transition: transform 0.38s var(--ease), border-color 0.38s, box-shadow 0.38s;
    backdrop-filter: blur(6px);
}
.testi-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(140deg, rgba(200,151,42,0.05) 0%, transparent 55%);
    opacity: 0; transition: opacity 0.38s; border-radius: inherit; pointer-events: none;
}
.testi-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200,151,42,0.25);
    box-shadow: 0 22px 55px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,151,42,0.08);
}
.testi-card:hover::before { opacity: 1; }

.testi-card.featured {
    background: linear-gradient(150deg, rgba(28,18,8,0.97) 0%, rgba(18,12,6,0.97) 100%);
    border-color: rgba(200,151,42,0.28);
    box-shadow: 0 12px 50px rgba(0,0,0,0.5);
}

/* Kutipan dekoratif */
.quote-float {
    position: absolute; top: 6px; right: 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 6rem; font-weight: 700; line-height: 1;
    color: rgba(200,151,42,0.05); pointer-events: none; user-select: none;
}

.card-stars { display: flex; gap: 4px; margin-bottom: 12px; }
.card-stars i { color: var(--gold); font-size: 0.7rem; }
.card-stars i.fa-regular { color: var(--text-muted); }

.card-komentar {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.06rem; font-style: italic;
    color: rgba(240,234,224,0.85); line-height: 1.75; margin-bottom: 20px;
}

/* Footer kartu redesign */
.card-footer-testi {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
    gap: 10px;
}
.card-author-wrap {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.card-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-lt));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 800; color: #1a0800;
}
.card-author {
    display: block;
    font-size: 0.82rem; font-weight: 600; color: var(--gold);
    letter-spacing: 0.03em; line-height: 1.2;
}
.card-sumber {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.64rem; color: var(--text-muted); margin-top: 3px;
}
.card-sumber i { color: rgba(200,151,42,0.6); font-size: 0.56rem; }

.card-rating-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(200,151,42,0.1); border: 1px solid rgba(200,151,42,0.2);
    border-radius: 50px; padding: 4px 10px;
    font-size: 0.72rem; font-weight: 700; color: var(--gold);
    flex-shrink: 0;
}
.card-rating-badge i { font-size: 0.6rem; }

/* Empty state */
.testi-empty {
    column-span: all; text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}
.testi-empty i { font-size: 2.5rem; opacity: 0.25; margin-bottom: 14px; display: block; }
.testi-empty p { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-style: italic; }

/* ══════════════════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════════════════ */
.testi-cta-sect {
    padding: 0 8% 80px;
}
.testi-cta-inner {
    background: linear-gradient(135deg, rgba(90,16,32,0.6) 0%, rgba(45,8,17,0.8) 100%);
    border: 1px solid var(--gold-line);
    border-radius: 20px; padding: 44px 52px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 32px;
    backdrop-filter: blur(10px);
}
.testi-cta-text h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem; font-weight: 600; color: #fff;
    margin-bottom: 6px;
}
.testi-cta-text p {
    color: var(--text-dim); font-size: 0.88rem; font-weight: 300;
}

/* ══════════════════════════════════════════════════════
   MODAL FORM — redesign total
══════════════════════════════════════════════════════ */
.testi-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(4,2,1,0.86);
    backdrop-filter: blur(18px) saturate(150%);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 9999;
    opacity: 0; visibility: hidden;
    transition: opacity 0.38s, visibility 0.38s;
}
.testi-modal-overlay.active { opacity: 1; visibility: visible; }

.testi-modal-card {
    background: linear-gradient(160deg, #1a0e0a 0%, #110b08 100%);
    border: 1px solid rgba(200,151,42,0.18);
    border-radius: 28px;
    padding: 44px 40px 40px;
    width: 100%; max-width: 500px;
    max-height: 92vh; overflow-y: auto; scrollbar-width: none;
    position: relative;
    box-shadow:
        0 50px 120px rgba(0,0,0,0.8),
        0 0 0 1px rgba(200,151,42,0.05),
        inset 0 1px 0 rgba(255,255,255,0.04);
    transform: scale(0.88) translateY(24px);
    transition: transform 0.42s var(--ease-back);
}
.testi-modal-card::-webkit-scrollbar { display: none; }
.testi-modal-overlay.active .testi-modal-card { transform: scale(1) translateY(0); }

/* Tombol tutup */
.close-modal {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.3); font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.22s;
}
.close-modal:hover { background: rgba(220,60,60,0.14); color: #ff7070; transform: rotate(90deg); }

/* Modal header */
.testi-modal-head { text-align: center; margin-bottom: 32px; }
.testi-modal-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(200,151,42,0.1); border: 1px solid var(--gold-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--gold);
    margin: 0 auto 16px;
}
.modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.modal-title em { font-style: italic; color: var(--gold); }
.testi-modal-sub {
    font-size: 0.8rem; color: var(--text-muted); font-weight: 300;
}

/* Divider di bawah header */
.testi-modal-head::after {
    content: '';
    display: block; height: 1px; margin-top: 24px;
    background: linear-gradient(to right, transparent, var(--gold-line), transparent);
}

/* Field label */
.field-label {
    display: block; font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(200,151,42,0.65); margin-bottom: 8px;
}

/* Input wrapper dengan icon */
.input-group-testi { margin-bottom: 18px; }
.testi-input-wrap { position: relative; }
.testi-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: rgba(200,151,42,0.35); font-size: 0.82rem;
    pointer-events: none; transition: color 0.25s;
}
.testi-input-icon-top { top: 16px; transform: none; }
.testi-input-wrap:focus-within .testi-input-icon { color: rgba(200,151,42,0.65); }

.input-group-testi input,
.input-group-testi textarea {
    width: 100%;
    padding: 13px 14px 13px 38px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; color: var(--text);
    font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 300; resize: none;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.input-group-testi textarea { padding-left: 38px; }
.input-group-testi input::placeholder,
.input-group-testi textarea::placeholder { color: var(--text-muted); font-style: italic; }
.input-group-testi input:focus,
.input-group-testi textarea:focus {
    outline: none;
    border-color: rgba(200,151,42,0.4);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 0 3px rgba(200,151,42,0.08);
}

/* Checkbox */
.checkbox-group {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 18px;
    font-size: 0.78rem; color: var(--text-muted); line-height: 1.5;
}
.checkbox-group input[type="checkbox"] {
    accent-color: var(--gold); width: 15px; height: 15px;
    flex-shrink: 0; margin-top: 2px;
}
.testi-checkbox-hint { opacity: 0.55; font-size: 0.72rem; }

/* Stars wrapper */
.testi-stars-wrap {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px; padding: 16px 12px 12px;
    text-align: center;
}
.rating-group { margin-bottom: 18px; }
.star-rating-input {
    display: flex; flex-direction: row; align-items: center;
    justify-content: center; gap: 8px; width: 100%; margin-bottom: 10px;
}
.star-rating-input input[type="radio"] { display: none; }
.star-rating-input label {
    color: rgba(240,234,224,0.15); cursor: pointer; line-height: 1;
    transition: transform 0.15s, color 0.15s, filter 0.15s; user-select: none;
}
.star-rating-input label::before { content: '★'; }
.star-rating-input label[for="star1"],
.star-rating-input label[for="star2"],
.star-rating-input label[for="star3"],
.star-rating-input label[for="star4"],
.star-rating-input label[for="star5"] { font-size: 2.6rem; }
.star-rating-input label.lit {
    color: var(--gold-lt);
    filter: drop-shadow(0 2px 8px rgba(200,151,42,0.55));
}
.star-rating-input label:hover { transform: scale(1.18); }
.rating-reaction {
    font-size: 1rem; font-weight: 500; font-style: italic;
    color: var(--gold); min-height: 28px; letter-spacing: 0.02em;
    transition: transform 0.18s;
}

/* Submit */
.btn-submit-gold {
    width: 100%; padding: 15px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 50%, var(--gold) 100%);
    background-size: 200% auto; color: #120800; border: none; border-radius: 50px;
    font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; margin-top: 12px;
    transition: background-position 0.5s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 24px rgba(200,151,42,0.3);
}
.btn-submit-gold:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(200,151,42,0.42);
}

/* Success card */
.success-card { text-align: center; }
.icon-sukses-wrapper {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--gold-dim); border: 1px solid var(--gold-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--gold); margin: 0 auto 20px;
    animation: tsFloat 3s ease-in-out infinite;
}
.success-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem; font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.success-desc {
    font-size: 0.86rem; color: var(--text-dim); margin-bottom: 28px; line-height: 1.7;
}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
#toast-container-testi {
    position: fixed; top: 26px; left: 50%;
    transform: translateX(-50%); z-index: 99999; pointer-events: none;
}
.toast-notif {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 22px;
    background: rgba(14,10,8,0.95);
    border: 1px solid rgba(200,151,42,0.3);
    border-radius: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    font-family: 'Jost', sans-serif; font-size: 0.8rem; color: var(--text);
    white-space: nowrap;
    opacity: 0; transform: translateY(-14px) scale(0.94);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.toast-notif.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-notif i { color: var(--gold); font-size: 0.78rem; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1000px) { .testi-grid { columns: 2; } }
@media (max-width: 768px) {
    .testi-hero { padding: 40px 24px 70px; }
    .hero-ornament { display: none; }
    .testi-section { padding: 0 20px 80px; }
    .score-pill { flex-wrap: wrap; gap: 10px; padding: 12px 18px; }
    .testi-cta-inner { flex-direction: column; text-align: center; padding: 32px 28px; }
    .testi-modal-card { padding: 36px 24px 32px; }
}
@media (max-width: 600px) {
    .testi-grid { columns: 1; }
    .star-rating-input label[for="star1"],
    .star-rating-input label[for="star2"],
    .star-rating-input label[for="star3"],
    .star-rating-input label[for="star4"],
    .star-rating-input label[for="star5"] { font-size: 2.2rem; }
    .testi-cta-sect { padding: 0 5% 60px; }
}

/* ══════════════════════════════════════════════════════
   HISTORY PAGE — history-page.css
   Font konsisten Jost + Cormorant Garamond
══════════════════════════════════════════════════════ */

.page-history {
    font-weight: 300;
    background: linear-gradient(160deg, #4a0e1c 0%, #2d0811 50%, #1a0408 100%) fixed;
    color: #fff;
    min-height: 100vh;
}

/* ── Keyframes ── */
@keyframes histFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes histOrbDrift {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(18px,-14px); }
}

/* ══ WRAPPER ══ */
.hist-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: calc(var(--nav-h, 72px) + 48px) 24px 80px;
}

/* ══ PAGE HEADER ══ */
.hist-page-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 36px;
    overflow: hidden;
}
.hist-page-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,151,42,0.22), transparent);
}
.hist-orb {
    position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(80px); z-index: 0;
}
.hist-orb-1 {
    width: 400px; height: 400px; top: -150px; right: -150px;
    background: radial-gradient(circle, rgba(200,151,42,0.06) 0%, transparent 65%);
    animation: histOrbDrift 11s ease-in-out infinite;
}
.hist-orb-2 {
    width: 350px; height: 350px; top: -100px; left: -150px;
    background: radial-gradient(circle, rgba(90,16,32,0.4) 0%, transparent 65%);
    animation: histOrbDrift 9s ease-in-out infinite reverse;
}
.hist-eyebrow {
    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.24em;
    text-transform: uppercase; color: rgba(200,151,42,0.65);
    margin-bottom: 12px; display: block; position: relative; z-index: 1;
    animation: histFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.hist-title {
    font-size: clamp(2rem, 5vw, 3rem) !important;
    font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 10px;
    position: relative; z-index: 1;
    animation: histFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.18s both;
}
.hist-title em { font-style: italic; color: #F0C060; }
.hist-title i { font-size: 0.65em; color: rgba(200,151,42,0.5); margin-right: 10px; }
.hist-sub {
    font-size: 0.84rem; color: rgba(255,255,255,0.35); font-weight: 300;
    position: relative; z-index: 1;
    animation: histFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.26s both;
}

/* ══ STATS BAR ══ */
.hist-stats {
    display: flex; align-items: center; justify-content: center; gap: 28px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(200,151,42,0.12);
    border-radius: 16px; padding: 20px 32px; margin-bottom: 36px;
    animation: histFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.32s both;
}
.hist-stat-item { text-align: center; }
.hist-stat-num {
    font-size: 1.45rem !important; font-weight: 700; color: #F0C060;
    display: block; line-height: 1; margin-bottom: 5px;
}
.hist-stat-lbl {
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.hist-stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,0.07); flex-shrink: 0; }

/* ══ HISTORY CARD ══ */
.hist-card {
    background: rgba(18,8,12,0.9); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px; padding: 22px 24px 18px; margin-bottom: 16px;
    position: relative; overflow: hidden; backdrop-filter: blur(8px);
    opacity: 0; animation: histFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both;
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.38s;
}
.hist-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(to right, transparent, #C8972A, transparent);
    transform: scaleX(0); transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
}
.hist-card:hover {
    transform: translateY(-6px); border-color: rgba(200,151,42,0.22);
    box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 4px 14px rgba(200,151,42,0.07);
}
.hist-card:hover::after { transform: scaleX(0.65); }

.hist-card-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 14px;
}
.hist-card-left { display: flex; flex-direction: column; gap: 7px; }
.hist-card-date {
    font-size: 0.76rem; color: rgba(255,255,255,0.36); font-weight: 400;
    display: flex; align-items: center; gap: 6px;
}
.hist-card-date i { font-size: 0.68rem; color: rgba(200,151,42,0.45); }
.hist-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.hist-tipe-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.67rem; font-weight: 700; letter-spacing: 0.05em;
    padding: 4px 11px; border-radius: 50px;
}
.hist-tipe-dinein {
    background: rgba(99,179,237,0.1); border: 1px solid rgba(99,179,237,0.22); color: #90cdf4;
}
.hist-tipe-takeaway {
    background: rgba(200,151,42,0.1); border: 1px solid rgba(200,151,42,0.22); color: #F0C060;
}
.hist-nama-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.67rem; font-weight: 500; color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    padding: 4px 10px; border-radius: 50px;
}
.hist-nama-badge i { font-size: 0.58rem; color: rgba(200,151,42,0.4); }

.hist-card-total {
    font-size: 1.35rem !important; font-weight: 700; color: #F0C060;
    white-space: nowrap; flex-shrink: 0;
}

.hist-items { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 9px; }
.hist-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hist-item-left { display: flex; align-items: flex-start; gap: 9px; flex: 1; min-width: 0; }
.hist-item-qty {
    font-size: 0.95rem !important; font-weight: 700; color: #C8972A; min-width: 26px; flex-shrink: 0;
}
.hist-item-name { font-size: 0.88rem; color: rgba(255,255,255,0.8); font-weight: 400; line-height: 1.3; }
.hist-item-note {
    font-size: 0.7rem; color: rgba(255,255,255,0.25); font-style: italic;
    margin-top: 3px; display: flex; align-items: center; gap: 4px;
}
.hist-item-note i { font-size: 0.58rem; color: rgba(200,151,42,0.3); }
.hist-item-price { font-size: 0.82rem; color: rgba(255,255,255,0.45); white-space: nowrap; flex-shrink: 0; }

.hist-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.04);
}
.hist-item-count { font-size: 0.7rem; color: rgba(255,255,255,0.22); letter-spacing: 0.06em; }

.hist-btn-reorder {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; background: transparent; border: 1px solid rgba(200,151,42,0.32);
    color: #C8972A; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; border-radius: 50px; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.hist-btn-reorder:hover {
    background: #C8972A; color: #1a0800; border-color: #C8972A;
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,151,42,0.28);
}

/* ══ CLEAR + EMPTY ══ */
.hist-clear-wrap { text-align: center; margin-top: 28px; animation: histFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.5s both; }
.btn-clear-history {
    background: none; border: none; color: rgba(255,80,80,0.5); cursor: pointer;
    font-size: 0.76rem; font-weight: 500; display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 4px; border-bottom: 1px solid transparent; transition: all 0.25s;
}
.btn-clear-history:hover { color: rgba(255,80,80,0.9); border-bottom-color: rgba(255,80,80,0.45); }

.hist-empty { text-align: center; padding: 80px 20px; animation: histFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s both; }
.hist-empty-icon { font-size: 3rem; color: rgba(255,255,255,0.1); margin-bottom: 18px; }
.hist-empty h3 { font-size: 1.65rem !important; color: rgba(255,255,255,0.55); margin-bottom: 10px; font-weight: 600; }
.hist-empty p { font-size: 0.84rem; color: rgba(255,255,255,0.28); margin-bottom: 26px; }
.hist-empty-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px;
    background: transparent; border: 1px solid rgba(200,151,42,0.32); color: #C8972A;
    text-decoration: none; border-radius: 50px; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s;
}
.hist-empty-btn:hover { background: #C8972A; color: #1a0800; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,151,42,0.28); }

/* ══ MODAL ══ */
.hist-modal-overlay {
    position: fixed; inset: 0; background: rgba(4,2,1,0.85); backdrop-filter: blur(14px);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 9999;
    opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
.hist-modal-overlay.active { opacity: 1; visibility: visible; }
.hist-modal-card {
    background: linear-gradient(160deg, #1a0e0a 0%, #100908 100%);
    border: 1px solid rgba(200,151,42,0.16); border-radius: 24px; padding: 38px 34px;
    width: 100%; max-width: 420px; text-align: center;
    box-shadow: 0 40px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
    transform: scale(0.88) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.hist-modal-overlay.active .hist-modal-card { transform: scale(1) translateY(0); }
.hist-modal-icon {
    width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 18px;
    background: rgba(200,151,42,0.1); border: 1px solid rgba(200,151,42,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #F0C060;
}
.hist-modal-icon-danger { background: rgba(255,80,80,0.1) !important; border-color: rgba(255,80,80,0.18) !important; color: #f87171 !important; }
.hist-modal-title { font-size: 1.55rem !important; font-weight: 600; color: #fff; margin-bottom: 10px; }
.hist-modal-desc { font-size: 0.83rem; color: rgba(255,255,255,0.4); line-height: 1.65; margin-bottom: 26px; font-weight: 300; }
.hist-modal-actions { display: flex; gap: 12px; }
.btn-modal-cancel {
    flex: 1; padding: 12px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.25s;
}
.btn-modal-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn-modal-confirm {
    flex: 1; padding: 12px; border-radius: 12px;
    background: linear-gradient(135deg, #C8972A, #F0C060); border: none; color: #1a0800;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: all 0.3s; box-shadow: 0 4px 18px rgba(200,151,42,0.28);
}
.btn-modal-confirm:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200,151,42,0.42); }
.btn-modal-danger { background: linear-gradient(135deg, #dc2626, #ef4444) !important; color: #fff !important; box-shadow: 0 4px 18px rgba(220,38,38,0.28) !important; }
.btn-modal-danger:hover { box-shadow: 0 10px 26px rgba(220,38,38,0.42) !important; }

/* ══ RESPONSIVE ══ */
@media (max-width: 600px) {
    .hist-wrap { padding-top: calc(var(--nav-h, 64px) + 28px); }
    .hist-stats { flex-direction: column; gap: 14px; padding: 16px 18px; }
    .hist-stat-sep { width: 40px; height: 1px; }
    .hist-card { padding: 16px 16px 14px; }
    .hist-card-header { flex-direction: column; gap: 6px; }
    .hist-modal-card { padding: 30px 20px; }
    .hist-modal-actions { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════
   LEGAL PAGES — legal-pages.css
   Untuk: syarat_ketentuan.php & kebijakan_privasi.php
   Masukkan ke style.css atau link terpisah
══════════════════════════════════════════════════════ */

/* ── Background unified (ikuti halaman lain) ── */
.page-legal {
    background: linear-gradient(160deg, #4a0e1c 0%, #2d0811 50%, #1a0408 100%) fixed;
}

/* ── Hero orbs gantikan inline style ── */
.legal-hero { overflow: hidden; }
.legal-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}
.legal-orb-1 {
    width: 450px; height: 450px;
    top: -180px; right: -120px;
    background: radial-gradient(circle, rgba(200,151,42,0.07) 0%, transparent 65%);
    animation: legalOrbDrift 10s ease-in-out infinite;
}
.legal-orb-2 {
    width: 380px; height: 380px;
    bottom: -140px; left: -100px;
    background: radial-gradient(circle, rgba(90,16,32,0.45) 0%, transparent 65%);
    animation: legalOrbDrift 13s ease-in-out infinite reverse;
}
@keyframes legalOrbDrift {
    0%,100% { transform: translate(0,0); }
    33%     { transform: translate(16px,-12px); }
    66%     { transform: translate(-10px,10px); }
}

/* ── Scroll fade animation ── */
.legal-fade {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.75s cubic-bezier(0.22,1,0.36,1),
        transform 0.75s cubic-bezier(0.22,1,0.36,1);
    transition-delay: var(--ld, 0s);
}
.legal-fade.legal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   WRAPPER
══════════════════════════════════════════════════════ */
.legal-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 8% 100px;
}

/* ── Intro paragraph ── */
.legal-intro {
    background: rgba(200,151,42,0.06);
    border: 1px solid rgba(200,151,42,0.15);
    border-left: 3px solid var(--accent-gold, #f4b860);
    border-radius: 0 14px 14px 0;
    padding: 20px 24px;
    margin-bottom: 52px;
}
.legal-intro p {
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    line-height: 1.75;
    font-weight: 300;
    margin: 0;
}
.legal-intro strong { color: #fff; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   GRID KARTU
══════════════════════════════════════════════════════ */
.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 52px;
}

/* ── Card ── */
.legal-card {
    background: rgba(18,8,12,0.88);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 28px 26px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1),
                border-color 0.3s,
                box-shadow 0.38s;
}
/* Gold bottom line on hover */
.legal-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(to right, transparent, var(--accent-gold, #f4b860), transparent);
    transform: scaleX(0);
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
}
.legal-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200,151,42,0.22);
    box-shadow: 0 18px 46px rgba(0,0,0,0.48), 0 4px 14px rgba(200,151,42,0.07);
}
.legal-card:hover::after { transform: scaleX(0.65); }

/* ── Icon ── */
.legal-card-icon {
    width: 48px; height: 48px;
    min-width: 48px;
    background: rgba(200,151,42,0.1);
    border: 1px solid rgba(200,151,42,0.2);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    color: var(--accent-gold, #f4b860);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
}
.legal-card:hover .legal-card-icon {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(200,151,42,0.18);
}

/* ── Body teks ── */
.legal-card-body { flex: 1; min-width: 0; }
.legal-card-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
}
.legal-card-body p {
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 10px;
    font-weight: 300;
}
.legal-card-body ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.legal-card-body li {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    font-weight: 300;
    padding-left: 14px;
    position: relative;
}
/* Bullet dot custom — pakai pseudo absolute bukan flex */
.legal-card-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(200,151,42,0.55);
    flex-shrink: 0;
}
.legal-card-body strong { color: #fff; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   ACTION BUTTONS
══════════════════════════════════════════════════════ */
.legal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.legal-btn-gold {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #C8972A, #F0C060);
    color: #1a0800; text-decoration: none; border-radius: 50px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 6px 22px rgba(200,151,42,0.35);
}
.legal-btn-gold:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(200,151,42,0.45); }

.legal-btn-outline {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 28px;
    background: transparent;
    border: 1.5px solid rgba(200,151,42,0.35);
    color: var(--accent-gold, #f4b860); text-decoration: none; border-radius: 50px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    transition: all 0.3s;
}
.legal-btn-outline:hover {
    background: rgba(200,151,42,0.1);
    border-color: var(--accent-gold, #f4b860);
    transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .legal-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
    .legal-wrap { padding: 50px 5% 80px; }
    .legal-card { padding: 22px 18px; gap: 14px; }
    .legal-card-icon { width: 42px; height: 42px; min-width: 42px; font-size: 1rem; }
    .legal-actions { flex-direction: column; align-items: stretch; }
    .legal-btn-gold, .legal-btn-outline { text-align: center; justify-content: center; }
}

/* ══════════════════════════════════════════════════
   MODAL POPUP — CSS tambahan untuk dine-in fields
   Tambahkan ke style.css setelah blok modal-type-selector
══════════════════════════════════════════════════ */

/* Wrapper dine-in fields — muncul dengan animasi */
.modal-dinein-fields {
    margin-bottom: 16px;
    animation: fadeUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 2 kolom: Jumlah Pax | Jam Kedatangan */
.modal-dinein-row {
    display: flex;
    gap: 12px;
}
.modal-dinein-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.modal-dinein-col .qty-label { margin-bottom: 8px; }

/* Input number & time — ikuti style input modal */
.modal-dinein-col input[type="number"],
.modal-dinein-col input[type="time"] {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 11px 13px;
    color: #f0ead8;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    outline: none;
    transition: border-color 0.22s, box-shadow 0.22s;
}
.modal-dinein-col input:focus {
    border-color: rgba(200,151,42,0.4);
    box-shadow: 0 0 0 3px rgba(200,151,42,0.07);
}
.modal-dinein-col input::placeholder {
    color: rgba(255,255,255,0.2);
    font-style: italic;
}

.modal-dinein-col input.error {
    border-color: rgba(231, 76, 60, 0.6);
    animation: shake 0.35s ease;
}

/* ══════════════════════════════════════════════════════
   CART PAGE — salin ke style.css
   :root dan body sudah ada di style.css, tidak perlu dicopy
══════════════════════════════════════════════════════ */

/* Grain texture */
.page-cart::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0;
}

/* Maroon radial background */
.page-cart::after {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at -10% -10%, rgba(90,16,32,0.85) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 110% 110%, rgba(58,10,20,0.6) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 0%, rgba(74,12,26,0.4) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}

@keyframes fadeInUpLux {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.container-full {
    display: flex;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    align-items: stretch;
    position: relative; z-index: 1;
}

/* --- SISI KIRI: DAFTAR PRODUK --- */
.cart-section {
    flex: 2;
    padding: 60px;
    display: flex;
    flex-direction: column;
    padding-top: 100px;
}

.animate-enter {
    opacity: 0;
    animation: fadeInUpLux 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.cart-section h2 {
    font-size: 2.2rem; margin-bottom: 10px; font-weight: 700; color: white;
}
.cart-section h2 span { color: var(--accent-gold); }

.cart-gold-divider {
    height: 1px; border: none; margin: 16px 0 30px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), rgba(244,184,96,0.15), transparent);
    background-size: 200% auto;
    animation: goldShimmer 4s linear infinite;
}

.product-table-header {
    display: grid; grid-template-columns: 2fr 1fr 1fr 0.5fr; padding-bottom: 15px;
    border-bottom: 1px solid rgba(244, 184, 96, 0.1); color: rgba(244, 184, 96, 0.5);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em;
}

#cart-list-container { flex-grow: 1; min-height: 400px; }

.cart-item {
    display: grid; grid-template-columns: 2fr 1fr 1fr 0.5fr; align-items: center; padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.25s;
    opacity: 1;
}
.cart-item:hover { background: rgba(244,184,96,0.03); border-radius: 8px; }

.cart-item.animate-item {
    opacity: 0;
    animation: fadeInUpLux 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.product-info { display: flex; align-items: center; gap: 18px; }
.product-info img {
    width: 68px; height: 68px; border-radius: 12px; object-fit: cover;
    border: 1px solid rgba(244, 184, 96, 0.2);
}
.product-info h3 { margin: 0 0 3px; font-size: 0.95rem; font-weight: 600; }

.qty-controls {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 7px 14px; border-radius: 50px; width: fit-content;
}
.qty-btn {
    background: none; border: none; color: var(--accent-gold); cursor: pointer;
    font-size: 0.8rem; display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; transition: transform 0.15s;
}
.qty-btn:hover { transform: scale(1.4); }

.btn-remove-item {
    color: rgba(255, 255, 255, 0.2); background: none; border: none;
    cursor: pointer; font-size: 1.1rem; transition: 0.3s;
}
.btn-remove-item:hover { color: #ff5566; transform: scale(1.2); }

#page-info { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }

/* --- SISI KANAN: SUMMARY --- */
.summary-section {
    flex: 1;
    background: rgba(0, 0, 0, 0.35);
    border-left: 1px solid rgba(244, 184, 96, 0.1);
    padding: 80px 40px;
    display: flex; flex-direction: column; justify-content: flex-start;
    min-height: 100vh; position: relative;
    backdrop-filter: blur(6px);
}
.summary-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(to right, transparent, rgba(244,184,96,0.55), transparent);
}

.summary-content-wrapper { margin-top: 20px; }
.summary-eyebrow {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent-gold); opacity: 0.65;
    margin-bottom: 8px; display: block;
}

.input-group { margin-bottom: 25px; }
.input-group label {
    display: block; margin-bottom: 10px; font-size: 0.7rem;
    color: rgba(244,184,96,0.6); text-transform: uppercase; letter-spacing: 0.12em;
}
.input-group input, .input-group textarea {
    width: 100%; padding: 13px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px; color: white; box-sizing: border-box;
    font-family: inherit; font-size: 0.9rem; transition: 0.3s;
}
.input-group input:focus, .input-group textarea:focus {
    outline: none;
    border-color: rgba(244, 184, 96, 0.45);
    background: rgba(244, 184, 96, 0.04);
}
.input-group textarea { resize: none; }

.total-row {
    display: flex; justify-content: space-between; align-items: center;
    margin: 30px 0; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: auto;
}
.total-row .total-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: rgba(255,255,255,0.4);
}

.btn-checkout-wa {
    width: 100%; padding: 18px;
    background: var(--accent-gold); color: var(--maroon-bg);
    border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase;
    cursor: pointer; transition: 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: relative; overflow: hidden;
}
.btn-checkout-wa::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-100%); transition: transform 0.5s ease;
}
.btn-checkout-wa:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(244, 184, 96, 0.3); }
.btn-checkout-wa:hover::after { transform: translateX(100%); }

/* --- MODAL POP-UP --- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000; visibility: hidden; opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.modal-overlay.active { visibility: visible; opacity: 1; }
.modal-card {
    background: #160408; padding: 36px 30px;
    border-radius: 24px; text-align: center; width: 85%; max-width: 380px;
    border: 1px solid rgba(244,184,96,0.25);
    box-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 0 1px rgba(244,184,96,0.05);
    transform: scale(0.8) translateY(16px);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.active .modal-card { transform: scale(1) translateY(0); }

/* Tombol Riwayat */
.history-btn-top {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 8px 18px;
    border: 1px solid rgba(244,184,96,0.2);
    border-radius: 20px; transition: all 0.3s ease;
    background: rgba(244,184,96,0.04); white-space: nowrap;
}
.history-btn-top:hover {
    color: var(--maroon-bg); background: var(--accent-gold);
    border-color: var(--accent-gold); transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(244, 184, 96, 0.2);
}

/* --- CUSTOM RADIO TIPE PESANAN --- */
.custom-radio-group { display: flex; gap: 15px; margin-top: 5px; }
.custom-radio-group input[type="radio"] { display: none; }
.custom-radio-group .radio-btn {
    flex: 1; text-align: center; padding: 14px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px; color: rgba(255, 255, 255, 0.45);
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 0.85rem; font-weight: 600;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.custom-radio-group .radio-btn i { font-size: 1.1rem; }
.custom-radio-group .radio-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(244, 184, 96, 0.4); color: white;
}
.custom-radio-group input[type="radio"]:checked + .radio-btn {
    background: var(--accent-gold); color: var(--maroon-bg);
    border-color: var(--accent-gold);
    box-shadow: 0 5px 15px rgba(244, 184, 96, 0.3);
    transform: translateY(-2px);
}

/* Dine-in box */
#dine-in-fields {
    background: rgba(244,184,96,0.04);
    border: 1px solid rgba(244,184,96,0.18);
    border-radius: 12px; padding: 16px; margin-top: 16px;
}

/* Responsive */
@media (max-width: 600px) {
    .history-btn-top { font-size: 0.72rem; padding: 6px 12px; }
    h2 { font-size: 1.5rem !important; }
}
@media (max-width: 850px) {
    .container-full { flex-direction: column; }
    .cart-section { padding: 70px 20px; }
    .product-table-header { display: none !important; }
    .cart-item { grid-template-columns: auto 1fr auto; gap: 15px; }
    .mobile-price-tag { display: block; color: var(--accent-gold); font-weight: 600; margin-top: 5px; }
    .qty-controls { grid-column: 2; margin-top: 10px; }
    .desktop-price-col { display: none; }
    .summary-section { min-height: auto; padding: 40px 20px; }
}
@media (min-width: 851px) { .mobile-price-tag { display: none; } }


/* ══════════════════════════════════════════════════════
   PERFORMANCE — Mobile optimizations
   Tambahkan di PALING BAWAH style.css kamu
   Matikan animasi & efek berat di perangkat touch/mobile
══════════════════════════════════════════════════════ */

/* Hapus backdrop-filter dari card — paling berat di HP */
@media (max-width: 768px) {
    .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .modal-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .detail-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Matikan semua hover transform/animasi berat di touch device */
@media (hover: none) {
    /* Card produk */
    .card:hover { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
    .card:hover .product-img-wrapper { transform: none; }

    /* Menu page card */
    .page-menu .card:hover { transform: none; }
    .page-menu .card:hover .product-img-wrapper { transform: none; }
    .page-menu .card:hover .product-img-wrapper img { transform: none; filter: none; }

    /* Modal image */
    .img-side img:hover { transform: none; }

    /* Ring animasi di modal */
    .img-side .img-ring { animation: none; }
    .img-side .img-ring-2 { animation: none; }
    .img-side::before { animation: none; }

    /* Polaroid hover */
    .polaroid-card:hover { transform: translateY(-8px) rotate(0deg) scale(1) !important; }
    .polaroid-card:hover .photo-frame img { transform: none; }

    /* Buttons */
    .btn-hero-primary:hover { transform: none; }
    .btn-outline-gold:hover { transform: none; }
    .btn-wa-cta:hover { transform: none; }
    .btn-wa:hover { transform: none; }
    .btn-cart-add:hover { transform: none; }
    .nav-cart-btn:hover { transform: none; }
    .order-now:hover { transform: none; }

    /* Halaman tentang */
    .tp-ku-card:hover { transform: none; }
    .tp-ku-card:hover .tp-ku-icon { transform: none; }
    .vm-card:hover { transform: none; }
    .vm-card:hover .vm-icon-wrapper { transform: none; }
    .value-item-row:hover { transform: none; }
    .tp-tl-card:hover { transform: none; }
    .tp-tl-item:hover .tp-tl-dot { transform: none; }

    /* Halaman legal */
    .legal-card:hover { transform: none; }
    .legal-card:hover .legal-card-icon { transform: none; }

    /* Sosmed & kontak */
    .sosmed-card:hover { transform: none; }
    .kp-cara-card:hover { transform: none; }
    .kp-jadwal-card:hover { transform: none; }
    .kp-cara-card:hover .kp-cara-icon { transform: none; }

    /* History & testimoni */
    .hist-card:hover { transform: none; }
    .testi-card:hover { transform: none; }
    .tp-card:hover { transform: none; }

    /* Modal close btn */
    .close-btn:hover { transform: none; }
    .close-modal:hover { transform: none; }
}

/* Kurangi box-shadow besar di mobile */
@media (max-width: 768px) {
    .card { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
    .detail-box { box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
    .polaroid-card { box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
    .hist-card { box-shadow: none; }
    .legal-card { box-shadow: none; }
    .tp-ku-card { box-shadow: none; }

    /* Transisi lebih ringan di mobile */
    .card { transition: opacity 0.2s ease; }
    .fade-up-slow { transition: transform 0.6s ease, opacity 0.6s ease; }
    .fade-scroll  { transition: opacity 0.6s ease, transform 0.6s ease; }
}

/* Matikan animasi loop yang jalan terus-menerus di mobile */
@media (max-width: 768px) {
    .hv-float-1, .hv-float-2, .hv-float-3 { animation: none; }
    .hv-ring-1, .hv-ring-2, .hv-ring-3 { animation: none; }
    .hv-bowl { animation: none; }
    .badge-dot { animation: none; }
}

/* ══════════════════════════════════════════════════════
   MODAL MOBILE — tambahkan di paling bawah style.css
   Ringankan popup produk di HP
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Overlay — hapus blur berat, ganti solid gelap */
    .modal-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(4,2,3,0.92);
        /* Muncul lebih cepat — tidak pakai opacity transition berat */
        transition: opacity 0.2s ease, visibility 0.2s;
    }

    /* detail-box — hapus scale animation, cukup fade+geser kecil */
    .detail-box {
        transform: translateY(16px);
        /* Shadow lebih ringan */
        box-shadow: 0 8px 32px rgba(0,0,0,0.7);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .modal-overlay.active .detail-box {
        transform: translateY(0);
    }

    /* Hapus animasi ring & glow yang loop terus */
    .img-side::before { animation: none; opacity: 0.4; }
    .img-side .img-ring  { animation: none; opacity: 0.5; }
    .img-side .img-ring-2 { display: none; }

    /* Gambar — hapus drop-shadow berat */
    .img-side img {
        filter: none;
        transition: none;
    }

    /* Input focus — hapus box-shadow glow emas */
    #modal-nama-pemesan:focus,
    #modal-catatan:focus,
    .modal-dinein-col input:focus,
    .lp-field input:focus {
        box-shadow: none;
    }

    /* Radio checked — hapus box-shadow */
    .modal-type-selector input[type="radio"]:checked + .type-btn {
        box-shadow: none;
    }

    /* Btn WA — transisi lebih ringan */
    .btn-wa { transition: opacity 0.2s ease; box-shadow: none; }
    .btn-wa:hover { box-shadow: none; }
    .btn-cart-add { transition: opacity 0.2s ease; }

}

/* ══════════════════════════════════════════════════════
   RESPONSIVE FIX — tambahkan di paling bawah style.css
   Fix hero + semua section untuk: tablet, HP mode desktop
══════════════════════════════════════════════════════ */

/* ── 1280px — Large tablet landscape / small desktop ── */
@media (max-width: 1280px) {
    .hero-visual { flex: 0 0 440px; }
    .hv-bowl { width: 380px; height: 380px; }
    .hv-ring-1 { width: 420px; height: 420px; }
    .hv-ring-2 { width: 330px; height: 330px; }
    .hv-ring-3 { width: 240px; height: 240px; }
    .hero-inner { gap: 40px; padding: 60px 6%; }
}

/* ── 1024px — Tablet landscape / HP mode desktop ── */
@media (max-width: 1024px) {
    /* Hero: stack vertikal, centered */
    .hero-inner {
        flex-direction: column;
        text-align: center;
        padding: 48px 6% 60px;
        gap: 32px;
    }
    .hero-text { max-width: 600px; margin: 0 auto; }
    .hero-actions { justify-content: center; }
    .hero-stats-row { justify-content: center; }
    .hero-visual {
        flex: 0 0 auto;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }
    .hv-bowl { width: 320px; height: 320px; }
    .hv-ring-1 { width: 360px; height: 360px; }
    .hv-ring-2 { width: 280px; height: 280px; }
    .hv-ring-3 { width: 210px; height: 210px; }
    .hv-float-1 { left: 0; }
    .hv-float-2 { left: 0; }
    .hv-float-3 { right: 0; }
    .hero-scroll-cue { display: none; }

    /* Sections lain */
    .about-teaser-wrap { flex-direction: column; gap: 48px; }
    .at-img-frame { height: 320px; }
    .at-year-pill { bottom: -12px; right: 0; }
    .history-container { flex-direction: column; gap: 48px; }
    .image-frame { height: 320px; }
    .vm-content-wrapper { grid-template-columns: 1fr; }
    .vm-values-vertical { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .value-item-row { flex: 1; min-width: 200px; }
    .contact-grid-simple { grid-template-columns: 1fr; }
    .map-wrapper { min-height: 300px; }
    .cta-banner-inner { flex-direction: column; text-align: center; gap: 24px; }
    .cta-b-actions { justify-content: center; }
    .footer-container { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ── 900px — Tablet portrait ── */
@media (max-width: 900px) {
    .hero-inner { padding: 40px 5% 52px; gap: 24px; }
    .hero-visual { max-width: 320px; }
    .hv-bowl { width: 280px; height: 280px; }
    .hv-ring-1 { width: 310px; height: 310px; }
    .hv-ring-2 { width: 240px; height: 240px; }
    .hv-ring-3 { width: 180px; height: 180px; }
    .hv-float { display: none; }

    .hero-h1 .h1-main { font-size: clamp(2.4rem, 5vw, 3.5rem); }
    .hero-desc { font-size: 0.9rem; margin-bottom: 28px; }
    .hero-actions { gap: 12px; margin-bottom: 32px; }
    .btn-hero-primary { padding: 14px 28px; font-size: 0.8rem; }

    /* Sections */
    .home-sect { padding: 70px 5%; }
    .menu-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .tp-grid { grid-template-columns: 1fr 1fr; }
    .testi-grid { columns: 2; }
    .footer-container { grid-template-columns: 1fr 1fr; }
    .page-hero-mini { height: 220px; }
    .kp-cara-grid { grid-template-columns: repeat(2, 1fr); }
    .kp-cara-grid::before { display: none; }
    .kp-jadwal-grid { grid-template-columns: 1fr 1fr; }
    .tp-keunggulan-grid { grid-template-columns: repeat(2, 1fr); }
    .tp-timeline-line { left: 18px; }
    .tp-tl-item { width: 100%; padding-left: 44px; text-align: left; margin-right: 0; }
    .tp-tl-left { padding-right: 0; margin-right: 0; }
    .tp-tl-right { margin-left: 0; }
    .tp-tl-left .tp-tl-dot { right: auto; left: -33px; }
    .tp-tl-right .tp-tl-dot { left: -33px; }
}

/* ── 768px — Mobile landscape / small tablet ── */
@media (max-width: 768px) {
    :root { --nav-h: 64px; }
    .nav-inner { padding: 0 20px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }

    .hero-inner { padding: 36px 5% 52px; }
    .hero-visual { max-width: 280px; }
    .hv-bowl { width: 250px; height: 250px; }
    .hv-ring-1 { width: 280px; height: 280px; }
    .hv-ring-2 { display: none; }
    .hv-ring-3 { display: none; }

    .home-sect { padding: 60px 5%; }
    .menu-preview-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .tp-grid { grid-template-columns: 1fr; }
    .testi-grid { columns: 1; }
    .footer-container { grid-template-columns: 1fr; gap: 32px; }
    .page-hero-mini { height: 200px; }
    .phm-title { font-size: 2rem; }
    .cta-banner-inner { padding: 36px 24px; margin-bottom: 60px; }

    /* Gallery */
    .gallery-header h2 { font-size: 2rem; padding: 0 5%; }
    .gallery-container { padding: 70px 28px 30px; gap: 14px; }
    .string-container { top: 28px; height: 55px; }
    .polaroid-card { width: 165px; padding: 8px 8px 42px; }
    .pin-clip { width: 16px; height: 30px; top: -28px; }
    .photo-frame { height: 130px; }
    .photo-caption h4 { font-size: 0.85rem; }
    .path-desktop { display: none; }
    .path-mobile  { display: block; }
    .gallery-scroll-wrapper { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .gallery-scroll-wrapper::-webkit-scrollbar { display: none; }
    .gallery-container { width: max-content; min-width: 100%; }
}

/* ── 480px — Mobile portrait ── */
@media (max-width: 480px) {
    .hero-inner { padding: 28px 5% 44px; }
    .h1-main { font-size: 2.4rem; }
    .hero-stats-row { flex-direction: column; gap: 14px; }
    .hs-sep { display: none; }
    .hero-visual { max-width: 240px; }
    .hv-bowl { width: 220px; height: 220px; }
    .hv-ring-1 { width: 250px; height: 250px; }

    .menu-preview-grid { grid-template-columns: 1fr; }
    .about-teaser-wrap { gap: 36px; }
    .at-img-frame { height: 240px; }
    .cta-banner-inner { padding: 28px 18px; }
    .cta-b-text h2 { font-size: 1.5rem; }
    .cta-b-actions { flex-direction: column; width: 100%; }
    .btn-wa-cta, .btn-ghost-white { text-align: center; justify-content: center; }
    .sect-title { font-size: 1.75rem; }
    .history-content h2 { font-size: 1.9rem; }
    .product-grid { padding: 20px 5px; }
    .kp-cara-grid { grid-template-columns: 1fr; }
    .tp-keunggulan-grid { grid-template-columns: 1fr; }
    .kp-jadwal-grid { grid-template-columns: 1fr; }
    .kp-jadwal-grid .kp-jadwal-card:last-child { grid-column: span 1; }
    .tp-sect-title { font-size: 1.7rem; }
    .sect-title { font-size: 1.7rem; }
}

/* ── 360px — Very small mobile ── */
@media (max-width: 360px) {
    .h1-main { font-size: 2rem; }
    .hero-visual { max-width: 200px; }
    .hv-bowl { width: 190px; height: 190px; }
    .hv-ring-1 { width: 210px; height: 210px; }
    .btn-hero-primary { padding: 12px 22px; font-size: 0.76rem; }
    .home-sect { padding: 50px 4%; }
}
/* ══════════════════════════════════════════════════════
   HERO HEIGHT FIX — tambahkan di paling bawah style.css
   Fix ruang kosong atas bawah hero saat HP mode desktop
══════════════════════════════════════════════════════ */

/* Ganti min-height 100vh dengan auto di layar pendek */
@media (max-height: 700px) {
    .hero-home {
        min-height: auto;
        padding-top: calc(var(--nav-h) + 32px);
        padding-bottom: 48px;
    }
}

/* Tablet & HP mode desktop — hero tidak perlu full screen height */
@media (max-width: 1024px) {
    .hero-home {
        min-height: auto;
        padding-top: calc(var(--nav-h) + 40px);
        padding-bottom: 60px;
    }
}

@media (max-width: 768px) {
    .hero-home {
        min-height: auto;
        padding-top: calc(var(--nav-h) + 28px);
        padding-bottom: 48px;
    }
}

@media (max-width: 480px) {
    .hero-home {
        padding-top: calc(var(--nav-h) + 20px);
        padding-bottom: 36px;
    }
}