/* =========================================================
   WISATA BUNAKEN — CSS
   Theme: Bright & Elegant | Luxury Marine Tourism
   Palette: Pearl White · Sky Aqua · Champagne Gold · Coral Rose
   ========================================================= */

/* ── GOOGLE FONTS (tambahan elegant) ────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── CSS VARIABLES ───────────────────────────────────────── */
:root {
    /* Brand Colours */
    --aqua:        #0891b2;        /* sky-600 — primary action */
    --aqua-light:  #22d3ee;        /* cyan-400 */
    --aqua-pale:   #e0f7fa;        /* very light aqua bg */
    --aqua-dark:   #0e4d6b;        /* deep navy for text/accents */
    --gold:        #c9a84c;        /* champagne gold */
    --gold-light:  #f5e6b2;        /* pale gold */
    --gold-dark:   #a07830;        /* darker gold */
    --coral:       #e05c5c;        /* soft coral/rose */
    --coral-light: #fde8e8;
    --coral-dark:  #c0392b;

    /* Neutrals */
    --white:       #ffffff;
    --pearl:       #f8fbfd;        /* page background */
    --pearl-2:     #eef5f9;        /* section alt background */
    --border:      #d4e8f0;        /* card/input borders */
    --text:        #1a2d3a;        /* primary text */
    --text-2:      #4a6070;        /* secondary text */
    --text-3:      #8ba3b0;        /* muted text */
    --gray-light:  #f0f4f7;

    /* Status */
    --success:     #059669;
    --danger:      #dc2626;
    --warning:     #d97706;
    --info:        #0284c7;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-ui:      'Space Grotesk', system-ui, sans-serif;

    /* Layout */
    --nav-h:        74px;
    --radius:       10px;
    --radius-lg:    18px;
    --radius-xl:    28px;

    /* Shadows — soft & bright */
    --shadow-xs: 0 1px 6px rgba(8,145,178,0.08);
    --shadow:    0 4px 20px rgba(8,145,178,0.10);
    --shadow-md: 0 8px 32px rgba(8,145,178,0.14);
    --shadow-lg: 0 16px 56px rgba(8,145,178,0.16);
    --shadow-xl: 0 24px 80px rgba(8,145,178,0.20);

    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body { font-family:var(--font-body); color:var(--text); background:var(--pearl); overflow-x:hidden; line-height:1.65 }
a  { text-decoration:none; color:inherit; transition:var(--transition) }
img{ max-width:100%; display:block }
ul { list-style:none }
button { cursor:pointer; font-family:inherit }
input,textarea,select { font-family:inherit }

/* =========================================================
   PRELOADER — bright aqua & gold
   ========================================================= */
.preloader {
    position:fixed; inset:0; z-index:9999;
    background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 60%, #fef9ee 100%);
    display:flex; align-items:center; justify-content:center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.hidden { opacity:0; visibility:hidden; pointer-events:none }
.preloader-inner  { text-align:center }
.preloader-fish   { font-size:3.5rem; margin:1rem 0; animation:fishFloat 1.5s ease-in-out infinite }
@keyframes fishFloat { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-14px) rotate(5deg)} }

.preloader-wave { display:flex; gap:7px; justify-content:center; margin-bottom:1rem }
.preloader-wave span {
    width:7px; height:38px; border-radius:4px;
    background: linear-gradient(180deg, var(--aqua-light), var(--aqua));
    animation: waveBar 1.2s ease-in-out infinite;
}
.preloader-wave span:nth-child(2){animation-delay:.15s}
.preloader-wave span:nth-child(3){animation-delay:.30s}
.preloader-wave span:nth-child(4){animation-delay:.45s}
.preloader-wave span:nth-child(5){animation-delay:.60s}
@keyframes waveBar { 0%,100%{transform:scaleY(0.4);opacity:0.4} 50%{transform:scaleY(1);opacity:1} }

.preloader-text {
    font-family:var(--font-display); font-size:1.15rem; font-style:italic;
    color:var(--aqua-dark); margin:0.5rem 0; letter-spacing:0.5px;
}
.preloader-bar {
    width:220px; height:3px; background:var(--aqua-pale);
    border-radius:2px; margin:1rem auto 0; overflow:hidden;
}
.preloader-progress {
    height:100%;
    background: linear-gradient(90deg, var(--aqua), var(--gold));
    border-radius:2px; width:0%;
    animation: progressFill 2s ease forwards;
}
@keyframes progressFill { to { width:100% } }

/* =========================================================
   PAGE TRANSITION
   ========================================================= */
.page-transition {
    position:fixed; inset:0; z-index:8888;
    background: linear-gradient(135deg, #e0f7fa, #ffffff);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.page-transition.active { opacity:1; pointer-events:all }
.transition-fish { font-size:3rem; animation:fishFloat 1s ease-in-out infinite }
.transition-bubbles { display:flex; gap:8px; margin-top:1rem }
.transition-bubbles span {
    width:10px; height:10px; background:var(--aqua-light);
    border-radius:50%; animation:bubbleRise 1s ease-in-out infinite;
}
.transition-bubbles span:nth-child(2){animation-delay:.2s}
.transition-bubbles span:nth-child(3){animation-delay:.4s}
.transition-bubbles span:nth-child(4){animation-delay:.6s}
.transition-bubbles span:nth-child(5){animation-delay:.8s}
@keyframes bubbleRise { 0%,100%{transform:translateY(0);opacity:0.5} 50%{transform:translateY(-20px);opacity:1} }

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
*,*::before,*::after { cursor:none !important }

.cursor-dot {
    position:fixed; top:0; left:0; width:10px; height:10px;
    background:var(--aqua); border-radius:50%; pointer-events:none;
    z-index:99999; transform:translate(-50%,-50%);
    transition:width .2s, height .2s, background .2s;
    box-shadow:0 0 10px rgba(8,145,178,0.6);
}
.cursor-ring {
    position:fixed; top:0; left:0; width:36px; height:36px;
    border:2px solid rgba(8,145,178,0.45); border-radius:50%;
    pointer-events:none; z-index:99998; transform:translate(-50%,-50%);
    transition:width .25s, height .25s, border-color .25s, background .25s;
}
.cursor-trail {
    position:fixed; width:6px; height:6px; border-radius:50%;
    pointer-events:none; z-index:99997; transform:translate(-50%,-50%);
    background:rgba(8,145,178,0.25);
}
body.cursor-hover .cursor-dot {
    width:14px; height:14px; background:var(--gold);
    box-shadow:0 0 16px rgba(201,168,76,0.7);
}
body.cursor-hover .cursor-ring {
    width:52px; height:52px;
    border-color:rgba(201,168,76,0.45);
    background:rgba(201,168,76,0.05);
}
body.cursor-click .cursor-dot { width:8px; height:8px; background:var(--coral) }
body.cursor-click .cursor-ring { width:28px; height:28px; border-color:rgba(224,92,92,0.6) }
.cursor-ripple {
    position:fixed; border-radius:50%; border:2px solid var(--aqua-light);
    pointer-events:none; z-index:99996;
    transform:translate(-50%,-50%) scale(0);
    animation:rippleOut 0.6s ease-out forwards;
}
@keyframes rippleOut {
    0%  { width:10px; height:10px; opacity:1; transform:translate(-50%,-50%) scale(0) }
    100%{ width:80px; height:80px; opacity:0; transform:translate(-50%,-50%) scale(1) }
}
.cursor-fish {
    position:fixed; pointer-events:none; z-index:99995;
    font-size:1.1rem; transform:translate(-50%,-50%);
    transition:opacity 0.3s; opacity:0;
}

/* =========================================================
   NAVBAR — white glass, elegant
   ========================================================= */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height:var(--nav-h); padding:0 2rem;
    background:transparent; transition:var(--transition);
}
.navbar.scrolled {
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(8,145,178,0.1);
    box-shadow:0 2px 24px rgba(8,145,178,0.08);
}
.nav-container {
    max-width:1300px; margin:0 auto; height:100%;
    display:flex; align-items:center; gap:2rem;
}
.nav-brand { display:flex; align-items:center; gap:0.75rem }
.brand-icon { font-size:1.9rem; animation:fishFloat 3s ease-in-out infinite }
.brand-text .brand-name {
    display:block; font-family:var(--font-display); font-size:1.4rem;
    font-weight:700; line-height:1.1;
    /* gradient text — aqua to gold */
    background:linear-gradient(135deg,var(--aqua-dark),var(--aqua));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.navbar.scrolled .brand-text .brand-name {
    background:linear-gradient(135deg,var(--aqua-dark),var(--aqua));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.brand-text .brand-sub {
    font-size:0.68rem; color:var(--gold); letter-spacing:1.5px; text-transform:uppercase;
}
.navbar:not(.scrolled) .brand-text .brand-name {
    background:linear-gradient(135deg,#fff,rgba(255,255,255,0.85));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.navbar:not(.scrolled) .brand-sub { color:rgba(255,255,255,0.75) }

.nav-menu { display:flex; align-items:center; gap:0.25rem; margin-left:auto }
.nav-link {
    font-family:var(--font-ui); font-size:0.875rem; font-weight:500;
    padding:0.5rem 0.875rem; border-radius:8px;
    display:flex; align-items:center; gap:0.4rem;
    transition:var(--transition); color:rgba(255,255,255,0.85);
}
.nav-link i { font-size:0.78rem }
.navbar.scrolled .nav-link { color:var(--text-2) }
.nav-link:hover { background:rgba(8,145,178,0.09); color:var(--aqua) }
.nav-link.active { color:var(--aqua); background:rgba(8,145,178,0.08) }
.navbar:not(.scrolled) .nav-link:hover { background:rgba(255,255,255,0.15); color:#fff }
.navbar:not(.scrolled) .nav-link.active { color:#fff; background:rgba(255,255,255,0.2) }

.nav-auth { display:flex; align-items:center; gap:0.75rem; margin-left:1rem }
.btn-nav {
    background:linear-gradient(135deg,var(--aqua),var(--aqua-dark));
    color:#fff; padding:0.5rem 1.375rem; border-radius:50px;
    font-family:var(--font-ui); font-size:0.85rem; font-weight:600;
    border:none; transition:var(--transition);
    box-shadow:0 4px 14px rgba(8,145,178,0.3);
}
.btn-nav:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(8,145,178,0.4) }
.btn-outline-nav {
    color:rgba(255,255,255,0.9); border:1.5px solid rgba(255,255,255,0.45);
    padding:0.5rem 1.25rem; border-radius:50px;
    font-family:var(--font-ui); font-size:0.85rem; font-weight:500;
    transition:var(--transition);
}
.btn-outline-nav:hover { background:rgba(255,255,255,0.18); color:#fff }
.navbar.scrolled .btn-outline-nav { color:var(--aqua); border-color:var(--aqua) }
.navbar.scrolled .btn-outline-nav:hover { background:var(--aqua); color:#fff }

/* Nav Toggle Mobile */
.nav-toggle {
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; padding:0.5rem; margin-left:auto;
}
.nav-toggle span {
    width:24px; height:2px; border-radius:2px; display:block;
    background:#fff; transition:var(--transition);
}
.navbar.scrolled .nav-toggle span { background:var(--text) }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle.active span:nth-child(2){ opacity:0; transform:scaleX(0) }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* User Dropdown */
.nav-user { position:relative }
.nav-user-avatar {
    display:flex; align-items:center; gap:0.5rem; cursor:pointer;
    padding:0.45rem 0.875rem; border-radius:50px;
    border:1.5px solid rgba(255,255,255,0.35);
    color:#fff; font-size:0.875rem; transition:var(--transition);
}
.navbar.scrolled .nav-user-avatar { border-color:var(--border); color:var(--text) }
.nav-user-avatar:hover { background:rgba(255,255,255,0.15) }
.navbar.scrolled .nav-user-avatar:hover { background:var(--pearl-2) }
.nav-user-avatar i:first-child { font-size:1.1rem; color:var(--aqua) }
.nav-user-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.user-dropdown {
    position:absolute; top:calc(100% + 8px); right:0;
    background:#fff; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); min-width:200px;
    border:1px solid var(--border);
    overflow:hidden; opacity:0; visibility:hidden;
    transform:translateY(-8px); transition:var(--transition); z-index:100;
}
.user-dropdown.open { opacity:1; visibility:visible; transform:translateY(0) }
.user-dropdown a {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.875rem 1.25rem; font-size:0.875rem; color:var(--text-2);
    transition:var(--transition);
}
.user-dropdown a:hover { background:var(--pearl-2); color:var(--aqua) }
.user-dropdown a i { width:16px; color:var(--aqua); font-size:0.85rem }
.user-dropdown .logout-link:hover { background:#fff5f5; color:var(--danger) }
.dropdown-divider { height:1px; background:var(--border); margin:4px 0 }

/* =========================================================
   FLASH MESSAGES
   ========================================================= */
.flash-message {
    position:fixed; top:calc(var(--nav-h) + 14px); right:1.5rem; z-index:5000;
    display:flex; align-items:center; gap:0.75rem;
    padding:1rem 1.5rem; border-radius:var(--radius);
    font-family:var(--font-ui); font-size:0.875rem; font-weight:500;
    box-shadow:var(--shadow-lg); min-width:300px; max-width:460px;
    animation:slideInRight 0.4s ease;
    border-left:4px solid currentColor;
}
@keyframes slideInRight { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }
.flash-success { background:#ecfdf5; color:var(--success); border-color:var(--success) }
.flash-error   { background:#fef2f2; color:var(--danger);  border-color:var(--danger) }
.flash-info    { background:#eff6ff; color:var(--info);    border-color:var(--info) }
.flash-warning { background:#fffbeb; color:var(--warning); border-color:var(--warning) }
.flash-close {
    margin-left:auto; background:none; border:none;
    color:currentColor; font-size:1.2rem; opacity:0.6; padding:0 4px;
}
.flash-close:hover { opacity:1 }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--font-ui); font-weight:600; font-size:0.9rem;
    padding:0.75rem 1.75rem; border-radius:50px;
    border:2px solid transparent; cursor:pointer;
    transition:var(--transition); text-decoration:none;
    white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after {
    content:''; position:absolute; inset:0;
    background:rgba(255,255,255,0.18); opacity:0; transition:opacity 0.25s;
}
.btn:hover::after { opacity:1 }

.btn-primary {
    background:linear-gradient(135deg, var(--aqua), var(--aqua-dark));
    color:#fff; box-shadow:0 4px 18px rgba(8,145,178,0.28);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(8,145,178,0.38) }

.btn-coral {
    background:linear-gradient(135deg, #e8706a, var(--coral-dark));
    color:#fff; box-shadow:0 4px 18px rgba(224,92,92,0.28);
}
.btn-coral:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(224,92,92,0.38) }

.btn-gold {
    background:linear-gradient(135deg, var(--gold), var(--gold-dark));
    color:#fff; box-shadow:0 4px 18px rgba(201,168,76,0.32);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(201,168,76,0.42) }

.btn-outline {
    background:transparent; color:var(--aqua);
    border-color:var(--aqua);
}
.btn-outline:hover { background:var(--aqua); color:#fff; transform:translateY(-2px) }

.btn-white {
    background:#fff; color:var(--aqua-dark);
    box-shadow:0 4px 18px rgba(0,0,0,0.1);
    border-color:#fff;
}
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,0.15) }

.btn-ghost {
    background:rgba(255,255,255,0.15); color:#fff;
    border-color:rgba(255,255,255,0.35); backdrop-filter:blur(8px);
}
.btn-ghost:hover { background:rgba(255,255,255,0.25); transform:translateY(-2px) }

.btn-sm  { padding:0.5rem 1.25rem; font-size:0.8rem }
.btn-lg  { padding:0.95rem 2.25rem; font-size:1rem }
.btn-block { width:100%; justify-content:center }
.btn:disabled { opacity:0.5; cursor:not-allowed; pointer-events:none }

/* =========================================================
   HERO — bright, airy, image-forward
   ========================================================= */
.hero {
    position:relative; min-height:100vh;
    display:flex; flex-direction:column; overflow:hidden;
}
.hero-video-bg {
    position:absolute; inset:0; z-index:-1;
    background:url('https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=1920&q=85') center/cover no-repeat;
    animation:heroPan 14s ease-in-out infinite alternate;
}
@keyframes heroPan { 0%{transform:scale(1.05) translateX(-1%)} 100%{transform:scale(1.05) translateX(1%)} }

/* Bright gradient overlay — lighter top, deeper bottom */
.hero-bg {
    position:absolute; inset:0; z-index:0;
    background:
        linear-gradient(180deg,
            rgba(8,77,107,0.45) 0%,
            rgba(8,100,135,0.25) 40%,
            rgba(14,30,50,0.72) 100%);
}
.hero-particles { position:absolute; inset:0; z-index:1; pointer-events:none }
.bubble {
    position:absolute; bottom:-20px; border-radius:50%;
    background:rgba(34,211,238,0.35);
    animation:bubbleFloat linear infinite;
}
@keyframes bubbleFloat {
    0%  { bottom:-20px; opacity:0; transform:translateX(0) }
    20% { opacity:0.7 }
    80% { opacity:0.3 }
    100%{ bottom:110%; opacity:0; transform:translateX(18px) }
}
.hero-content {
    position:relative; z-index:2;
    max-width:1300px; margin:0 auto; padding:0 2rem;
    display:flex; flex:1; align-items:center;
    padding-top:var(--nav-h);
}
.hero-text { max-width:680px }
.hero-badge {
    display:inline-flex; align-items:center; gap:0.5rem;
    background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.35);
    color:#fff; padding:0.45rem 1.1rem; border-radius:50px;
    font-family:var(--font-ui); font-size:0.78rem; font-weight:600;
    letter-spacing:0.8px; text-transform:uppercase;
    margin-bottom:1.5rem; backdrop-filter:blur(10px);
}
.hero-badge i { color:var(--aqua-light) }
.hero-title {
    font-family:var(--font-display);
    font-size:clamp(2.75rem, 6.5vw, 5.25rem);
    font-weight:700; color:#fff; line-height:1.08;
    margin-bottom:1.5rem; letter-spacing:-0.5px;
    text-shadow:0 2px 20px rgba(0,0,0,0.25);
}
.hero-title .accent      { color:var(--aqua-light) }
.hero-title .accent-gold { color:#f5d87a }
.hero-desc {
    color:rgba(255,255,255,0.88); font-size:1.1rem;
    line-height:1.75; margin-bottom:2.5rem; max-width:520px;
}
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3.5rem }
.hero-stats   { display:flex; gap:2.5rem; flex-wrap:wrap }
.stat-item { color:#fff }
.stat-item .stat-num {
    font-family:var(--font-display); font-size:2.5rem; font-weight:700;
    color:#f5d87a; line-height:1; display:block;
}
.stat-item .stat-label {
    font-size:0.75rem; opacity:0.75; text-transform:uppercase; letter-spacing:0.8px;
}
.hero-scroll {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    z-index:2; display:flex; flex-direction:column; align-items:center; gap:0.4rem;
    color:rgba(255,255,255,0.65); font-size:0.72rem;
    text-transform:uppercase; letter-spacing:1px;
    animation:scrollBounce 2s ease infinite; cursor:pointer;
}
.hero-scroll i { font-size:1.1rem }
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-8px)} }

/* =========================================================
   WAVE DIVIDER
   ========================================================= */
.wave-divider { overflow:hidden; line-height:0; margin-top:-2px }
.wave-divider svg { display:block; width:100% }

/* =========================================================
   SECTION COMMONS
   ========================================================= */
.section    { padding:6rem 2rem }
.section-sm { padding:3rem 2rem }
.container  { max-width:1300px; margin:0 auto }

.section-header { text-align:center; margin-bottom:4rem }
.section-badge {
    display:inline-block;
    background:linear-gradient(135deg, rgba(8,145,178,0.1), rgba(8,145,178,0.05));
    color:var(--aqua); padding:0.35rem 1.1rem; border-radius:50px;
    font-family:var(--font-ui); font-size:0.75rem; font-weight:700;
    letter-spacing:0.8px; text-transform:uppercase;
    margin-bottom:0.75rem;
    border:1px solid rgba(8,145,178,0.18);
}
.section-title {
    font-family:var(--font-display);
    font-size:clamp(1.85rem, 4vw, 2.9rem);
    font-weight:700; color:var(--aqua-dark); line-height:1.2;
    margin-bottom:1rem; letter-spacing:-0.3px;
}
.section-title em { font-style:italic; color:var(--aqua) }
.section-subtitle { color:var(--text-3); font-size:1rem; max-width:580px; margin:0 auto }

/* =========================================================
   FEATURES GRID
   ========================================================= */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem }
.feature-card {
    text-align:center; padding:2.5rem 2rem;
    background:#fff; border-radius:var(--radius-lg);
    box-shadow:var(--shadow); transition:var(--transition);
    border:1px solid var(--border);
    border-bottom:3px solid transparent;
}
.feature-card:hover {
    transform:translateY(-6px); box-shadow:var(--shadow-lg);
    border-bottom-color:var(--aqua);
}
.feature-icon {
    width:70px; height:70px; border-radius:var(--radius-lg);
    margin:0 auto 1.25rem;
    background:linear-gradient(135deg, var(--aqua-pale), #fff);
    display:flex; align-items:center; justify-content:center;
    font-size:1.75rem;
    border:1px solid rgba(8,145,178,0.12);
    box-shadow:0 4px 14px rgba(8,145,178,0.1);
}
.feature-card h3 {
    font-family:var(--font-display); font-size:1.15rem; font-weight:700;
    color:var(--aqua-dark); margin-bottom:0.75rem;
}
.feature-card p { color:var(--text-2); font-size:0.9rem; line-height:1.65 }

/* =========================================================
   BOOKING INFO BANNER
   ========================================================= */
.booking-info-banner {
    display:flex; align-items:center; gap:1rem;
    background:linear-gradient(135deg, rgba(8,145,178,0.06), rgba(34,211,238,0.04));
    border:1px solid rgba(8,145,178,0.16); border-left:4px solid var(--aqua);
    border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:2.5rem;
    flex-wrap:wrap;
}
.bib-icon { font-size:1.5rem; flex-shrink:0 }
.bib-text { font-size:0.88rem; color:var(--text); line-height:1.5 }
.bib-price {
    display:inline-block; background:var(--aqua-dark); color:#fff;
    font-weight:700; font-family:var(--font-ui); font-size:0.82rem;
    padding:2px 10px; border-radius:50px; margin-left:6px;
}

/* =========================================================
   PAKET WISATA CARDS
   ========================================================= */
.paket-section { background:var(--pearl-2) }
.paket-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.75rem }
.paket-card {
    background:#fff; border-radius:var(--radius-xl);
    overflow:hidden; box-shadow:var(--shadow);
    border:1px solid var(--border);
    transition:var(--transition); display:flex; flex-direction:column;
}
.paket-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); border-color:var(--aqua-light) }
.paket-card-img {
    position:relative; aspect-ratio:16/10; overflow:hidden;
    background:var(--aqua-pale);
}
.paket-card-img img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.6s ease;
}
.paket-card:hover .paket-card-img img { transform:scale(1.07) }
.paket-ribbon {
    position:absolute; top:0.875rem; left:0.875rem;
    background:linear-gradient(135deg, var(--gold), var(--gold-dark));
    color:#fff; font-size:0.7rem; font-weight:700;
    font-family:var(--font-ui); padding:3px 10px; border-radius:50px;
    letter-spacing:0.3px; box-shadow:0 2px 8px rgba(201,168,76,0.4);
}
.paket-badge-price {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(to top, rgba(10,45,70,0.88), transparent);
    padding:2rem 1rem 0.75rem;
    display:flex; align-items:baseline; gap:4px;
}
.pbp-label  { font-size:0.68rem; color:rgba(255,255,255,0.65) }
.pbp-amount {
    font-family:var(--font-display); font-size:1.25rem;
    font-weight:700; color:#f5d87a;
}
.pbp-unit { font-size:0.7rem; color:rgba(255,255,255,0.6) }
.paket-card-body { padding:1.5rem; flex:1; display:flex; flex-direction:column }
.paket-card-title {
    font-family:var(--font-display); font-size:1.25rem; font-weight:700;
    color:var(--aqua-dark); margin-bottom:0.5rem;
}
.paket-card-desc { color:var(--text-2); font-size:0.88rem; line-height:1.6; margin-bottom:1rem; flex:1 }
.paket-meta {
    display:flex; gap:1rem; margin-bottom:1rem; flex-wrap:wrap;
}
.paket-meta span {
    display:flex; align-items:center; gap:0.35rem;
    font-size:0.8rem; color:var(--text-3); font-family:var(--font-ui);
}
.paket-meta i { color:var(--aqua); font-size:0.75rem }

/* Price breakdown */
.paket-price-breakdown {
    background:linear-gradient(135deg, var(--aqua-pale), rgba(8,145,178,0.03));
    border:1px solid rgba(8,145,178,0.12); border-radius:var(--radius);
    padding:0.875rem 1rem; margin-bottom:1rem;
}
.ppb-row {
    display:flex; justify-content:space-between;
    font-size:0.82rem; color:var(--text-2); padding:3px 0;
}
.ppb-val { font-family:var(--font-ui) }
.ppb-total {
    border-top:1px dashed var(--border);
    margin-top:5px; padding-top:7px;
    font-weight:700; color:var(--text);
}
.ppb-total-val { color:var(--coral); font-size:0.95rem }

/* Include/Exclude */
.paket-includes { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:1.25rem; font-size:0.78rem }
.pi-col { display:flex; flex-direction:column; gap:3px }
.pi-label {
    font-weight:700; font-family:var(--font-ui); font-size:0.7rem;
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px;
}
.pi-yes .pi-label { color:var(--success) }
.pi-no  .pi-label { color:var(--danger) }
.pi-col span { background:var(--gray-light); border-radius:4px; padding:2px 7px; color:var(--text); line-height:1.5 }
.pi-yes span { background:rgba(5,150,105,0.07); color:#065f46 }
.pi-no  span { background:rgba(220,38,38,0.06); color:#991b1b }
.paket-card-footer { display:flex; gap:0.75rem; margin-top:auto }

/* =========================================================
   BOOKING STEPS
   ========================================================= */
.booking-section {
    background:linear-gradient(160deg, var(--aqua-dark) 0%, #0c3a52 50%, #081e2e 100%);
    position:relative; overflow:hidden;
}
.booking-section::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 20% 50%, rgba(34,211,238,0.08) 0%, transparent 60%),
               radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.06) 0%, transparent 50%);
}
.booking-inner { max-width:1000px; margin:0 auto; position:relative; z-index:1 }
.booking-title {
    font-family:var(--font-display); font-size:2.25rem; font-weight:700;
    color:#fff; margin-bottom:0.5rem;
}
.booking-subtitle { color:rgba(255,255,255,0.6); margin-bottom:2.5rem }
.booking-login-prompt {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-xl);
    padding:3rem; text-align:center; color:#fff;
    backdrop-filter:blur(12px);
}
.booking-login-prompt h3 { font-family:var(--font-display); font-size:1.6rem; margin-bottom:0.5rem }
.booking-login-prompt p  { opacity:0.7 }
.booking-steps { position:relative }
.bs-step {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-xl);
    padding:2.25rem; backdrop-filter:blur(14px);
}
.bs-step-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem }
.bs-num {
    width:42px; height:42px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--gold-dark));
    color:#fff; font-family:var(--font-display); font-size:1.15rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 4px 14px rgba(201,168,76,0.4);
}
.bs-step-header h4 { color:#fff; font-family:var(--font-display); font-size:1.15rem; margin-bottom:2px }
.bs-step-header p  { color:rgba(255,255,255,0.55); font-size:0.84rem }
.bs-paket-options  { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.25rem }
.bs-paket-option {
    display:flex; align-items:center; gap:1rem;
    background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,255,255,0.12);
    border-radius:var(--radius); padding:0.9rem 1rem;
    cursor:pointer; transition:var(--transition); position:relative;
}
.bs-paket-option:hover  { background:rgba(34,211,238,0.1); border-color:rgba(34,211,238,0.4) }
.bs-paket-option.selected { background:rgba(34,211,238,0.14); border-color:var(--aqua-light) }
.bspo-left { flex:1 }
.bspo-nama  { color:#fff; font-weight:600; font-size:0.925rem }
.bspo-durasi{ color:rgba(255,255,255,0.5); font-size:0.8rem; margin-top:2px }
.bspo-right { text-align:right }
.bspo-harga { color:#f5d87a; font-family:var(--font-display); font-size:1.05rem; font-weight:700 }
.bspo-per   { color:rgba(255,255,255,0.4); font-size:0.72rem }
.bspo-check { color:var(--aqua-light); font-size:1.2rem; opacity:0; transition:opacity 0.2s }
.bs-paket-option.selected .bspo-check { opacity:1 }
.booking-form .form-label {
    font-family:var(--font-ui); font-size:0.78rem; font-weight:600;
    color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.5px;
}
.booking-form .form-control {
    background:rgba(255,255,255,0.09); border:1.5px solid rgba(255,255,255,0.15);
    color:#fff; padding:0.875rem 1rem; border-radius:var(--radius);
    font-family:var(--font-body); font-size:0.925rem;
    transition:var(--transition); outline:none; -webkit-appearance:none; width:100%;
}
.booking-form .form-control::placeholder { color:rgba(255,255,255,0.35) }
.booking-form .form-control:focus {
    border-color:var(--aqua-light);
    background:rgba(255,255,255,0.13);
    box-shadow:0 0 0 3px rgba(34,211,238,0.15);
}
.booking-form .form-control option { background:#0e4d6b; color:#fff }
.booking-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.25rem }
.qty-btn {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.2);
    color:#fff; font-size:1.2rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:var(--transition); flex-shrink:0;
}
.qty-btn:hover { background:var(--aqua-light); border-color:var(--aqua-light) }
.modal .qty-btn { background:rgba(8,145,178,0.08); border-color:var(--border); color:var(--aqua-dark) }
.modal .qty-btn:hover { background:var(--aqua); color:#fff }
.booking-price-summary {
    background:rgba(10,30,50,0.55); border:1px solid rgba(34,211,238,0.2);
    border-radius:var(--radius); padding:1.25rem; margin-top:1.25rem;
    backdrop-filter:blur(8px);
}
.bps-title {
    color:var(--aqua-light); font-family:var(--font-ui); font-size:0.82rem;
    font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:0.875rem;
}
.bps-rows  { display:flex; flex-direction:column; gap:0.4rem }
.bps-row   { display:flex; justify-content:space-between; font-size:0.875rem; color:rgba(255,255,255,0.7) }
.bps-divider { height:1px; background:rgba(255,255,255,0.1); margin:6px 0 }
.bps-total { color:#fff; font-weight:700; font-size:1rem }
.bps-total span:last-child { color:#f5d87a; font-family:var(--font-display); font-size:1.15rem }
.bps-note { margin-top:0.75rem; font-size:0.78rem; color:rgba(255,255,255,0.45); display:flex; gap:0.4rem; line-height:1.5 }
.bps-note i { color:var(--aqua-light); margin-top:2px; flex-shrink:0 }

/* =========================================================
   BOOKING MODAL
   ========================================================= */
.modal-overlay {
    position:fixed; inset:0; z-index:7000;
    background:rgba(14,77,107,0.55); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; padding:1rem;
    opacity:0; visibility:hidden; transition:var(--transition);
}
.modal-overlay.open { opacity:1; visibility:visible }
.modal {
    background:#fff; border-radius:var(--radius-xl);
    width:100%; max-width:580px; max-height:90vh; overflow-y:auto;
    box-shadow:var(--shadow-xl); transform:scale(0.96); transition:var(--transition);
    border:1px solid var(--border);
}
.modal-overlay.open .modal { transform:scale(1) }
.modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:1.5rem 1.75rem; border-bottom:1px solid var(--border);
    position:sticky; top:0; background:#fff; z-index:1;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-title {
    font-family:var(--font-display); font-size:1.25rem;
    font-weight:700; color:var(--aqua-dark);
}
.modal-close {
    background:none; border:none; font-size:1.5rem; color:var(--text-3);
    cursor:pointer; width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.modal-close:hover { background:var(--pearl-2); color:var(--text) }
.modal-body { padding:1.75rem }
.modal-paket-info {
    display:flex; justify-content:space-between; align-items:center;
    background:linear-gradient(135deg, var(--aqua-dark), var(--aqua));
    border-radius:var(--radius-lg); padding:1.25rem 1.5rem;
    margin-bottom:1.5rem; color:#fff; gap:1rem;
}
.mpi-label { font-size:0.7rem; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; font-family:var(--font-ui) }
.mpi-nama  { font-family:var(--font-display); font-size:1.1rem; font-weight:700 }
.mpi-durasi{ font-size:0.82rem; color:rgba(255,255,255,0.65); margin-top:2px }
.mpi-right { text-align:right; flex-shrink:0 }
.mpi-harga { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:#f5d87a }
.mpi-per   { font-size:0.75rem; color:rgba(255,255,255,0.5) }
.modal-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media(max-width:580px){ .modal-form-grid{ grid-template-columns:1fr } }
.modal-price-breakdown {
    background:linear-gradient(135deg, var(--aqua-pale), rgba(8,145,178,0.04));
    border:1.5px solid rgba(8,145,178,0.15); border-radius:var(--radius);
    padding:1.25rem; margin-top:1rem;
}
.modal-price-breakdown h5 {
    font-family:var(--font-ui); font-size:0.8rem; font-weight:700;
    color:var(--aqua); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:0.75rem;
}
.mpb-table { width:100%; border-collapse:collapse; font-size:0.875rem }
.mpb-table td { padding:5px 0; color:var(--text) }
.mpb-table td:last-child { text-align:right; font-family:var(--font-ui); color:var(--text-2) }
.mpb-total-row td { border-top:1.5px solid rgba(8,145,178,0.15); padding-top:10px; color:var(--aqua-dark); font-size:1rem }
.mpb-total-row td:last-child { color:var(--coral); font-size:1.1rem }
.mpb-note { display:flex; gap:0.4rem; align-items:flex-start; font-size:0.78rem; color:var(--text-3); margin-top:0.875rem; line-height:1.5 }
.mpb-note i { color:var(--aqua); margin-top:2px; flex-shrink:0 }

/* Light form controls (inside modals, contact, auth) */
.form-control-light {
    background:#fff; border:1.5px solid var(--border);
    color:var(--text); padding:0.875rem 1rem; border-radius:var(--radius);
    font-family:var(--font-body); font-size:0.925rem;
    transition:var(--transition); outline:none; width:100%;
}
.form-control-light::placeholder { color:var(--text-3) }
.form-control-light:focus { border-color:var(--aqua); box-shadow:0 0 0 3px rgba(8,145,178,0.1) }
.form-group { margin-bottom:1.25rem }
.form-group label {
    display:block; font-family:var(--font-ui); font-size:0.8rem; font-weight:600;
    color:var(--text); margin-bottom:0.4rem;
    text-transform:uppercase; letter-spacing:0.3px;
}
.input-group { position:relative }
.input-group .input-icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:0.9rem; pointer-events:none }
.input-group .form-control-light { padding-left:2.75rem }
.input-group .input-toggle { position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-3); cursor:pointer }
.form-divider { display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--text-3); font-size:0.85rem }
.form-divider::before,.form-divider::after { content:''; flex:1; height:1px; background:var(--border) }
.form-footer { text-align:center; margin-top:1.5rem; font-size:0.9rem; color:var(--text-3) }
.form-footer a { color:var(--aqua); font-weight:600 }

/* =========================================================
   KULINER SECTION
   ========================================================= */
.kuliner-section { background:#fff }
.kuliner-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; margin-bottom:2.5rem }
.kuliner-card {
    background:#fff; border-radius:var(--radius-xl);
    overflow:hidden; box-shadow:var(--shadow); transition:var(--transition);
    border:1px solid var(--border); border-bottom:3px solid transparent;
}
.kuliner-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-bottom-color:var(--gold) }
.kuliner-img-wrap { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--pearl-2) }
.kuliner-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s ease }
.kuliner-card:hover .kuliner-img-wrap img { transform:scale(1.08) }
.kuliner-badge {
    position:absolute; top:0.875rem; left:0.875rem;
    background:linear-gradient(135deg, var(--gold), var(--gold-dark));
    color:#fff; font-size:0.7rem; font-weight:700; font-family:var(--font-ui);
    padding:3px 10px; border-radius:50px; letter-spacing:0.3px;
    box-shadow:0 2px 8px rgba(201,168,76,0.4);
}
.kuliner-emoji { position:absolute; bottom:0.875rem; right:0.875rem; font-size:2rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3)) }
.kuliner-body  { padding:1.25rem 1.5rem }
.kuliner-title {
    font-family:var(--font-display); font-size:1.1rem; font-weight:700;
    color:var(--aqua-dark); margin-bottom:0.5rem;
}
.kuliner-desc { font-size:0.875rem; color:var(--text-2); line-height:1.6; margin-bottom:1rem }
.kuliner-meta { display:flex; flex-direction:column; gap:0.4rem }
.kuliner-harga,.kuliner-tempat { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.82rem }
.kuliner-harga i  { color:var(--coral); margin-top:2px; flex-shrink:0 }
.kuliner-tempat i { color:var(--aqua);  margin-top:2px; flex-shrink:0 }
.kuliner-harga span  { color:var(--text); font-weight:700 }
.kuliner-tempat span { color:var(--text-2) }
.kuliner-tips {
    display:flex; align-items:flex-start; gap:1.25rem;
    background:linear-gradient(135deg, var(--aqua-dark), var(--aqua));
    border-radius:var(--radius-xl); padding:2rem; color:#fff;
    box-shadow:var(--shadow-md);
}
.kt-icon { font-size:2.5rem; flex-shrink:0 }
.kt-content h4 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:0.5rem }
.kt-content p  { font-size:0.9rem; line-height:1.7; color:rgba(255,255,255,0.8) }
.kt-content strong { color:#f5d87a }

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testimonial-section {
    background:linear-gradient(160deg, var(--aqua-dark) 0%, #0c3a52 100%);
    color:#fff;
}
.testimonial-card {
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius-xl); padding:2rem;
    backdrop-filter:blur(12px);
}
.testimonial-stars  { display:flex; gap:4px; margin-bottom:1rem; color:#f5d87a }
.testimonial-text   { font-style:italic; color:rgba(255,255,255,0.85); line-height:1.75; margin-bottom:1.5rem; font-family:var(--font-display); font-size:1.05rem }
.testimonial-author { display:flex; align-items:center; gap:0.75rem }
.testimonial-author-avatar {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--gold-dark));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; color:#fff; font-size:1rem;
    flex-shrink:0;
}
.testimonial-author-name   { font-weight:700; font-size:0.95rem }
.testimonial-author-origin { font-size:0.8rem; opacity:0.6 }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-hero {
    padding:calc(var(--nav-h) + 4rem) 2rem 5rem;
    text-align:center; color:#fff; position:relative; overflow:hidden;
    background:linear-gradient(160deg, var(--aqua-dark), var(--aqua));
}
.about-hero::before {
    content:''; position:absolute; inset:0;
    background:url('https://images.unsplash.com/photo-1583212292454-1fe6229603b7?w=1920&q=80') center/cover;
    opacity:0.18;
}
.about-hero-content { position:relative; z-index:1; max-width:800px; margin:0 auto }
.about-hero h1 { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem); font-weight:700; margin-bottom:1rem }
.about-content-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center }
.about-img-wrap { position:relative }
.about-img-main { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3 }
.about-img-main img { width:100%; height:100%; object-fit:cover }
.about-img-badge {
    position:absolute; bottom:-1.5rem; right:-1.5rem;
    background:linear-gradient(135deg, var(--gold), var(--gold-dark));
    color:#fff; padding:1.5rem; border-radius:var(--radius-xl);
    text-align:center; box-shadow:var(--shadow-lg);
}
.about-img-badge .badge-num   { font-family:var(--font-display); font-size:2.5rem; font-weight:900; line-height:1 }
.about-img-badge .badge-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; opacity:0.9 }
.about-facts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem }
.fact-card {
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:1.25rem; text-align:center;
    box-shadow:var(--shadow-xs); transition:var(--transition);
}
.fact-card:hover { box-shadow:var(--shadow-md); border-color:var(--aqua-light); transform:translateY(-3px) }
.fact-icon { font-size:1.75rem; margin-bottom:0.5rem }
.fact-num  { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--aqua-dark) }
.fact-label{ font-size:0.8rem; color:var(--text-3) }
.info-card {
    background:#fff; border-radius:var(--radius-lg); padding:2rem;
    box-shadow:var(--shadow); border-left:4px solid var(--aqua);
    margin-top:2rem; border:1px solid var(--border); border-left:4px solid var(--aqua);
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-filter { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem }
.filter-btn {
    background:#fff; border:1.5px solid var(--border); color:var(--text-2);
    padding:0.5rem 1.25rem; border-radius:50px;
    font-family:var(--font-ui); font-size:0.84rem; font-weight:600;
    cursor:pointer; transition:var(--transition);
    box-shadow:var(--shadow-xs);
}
.filter-btn:hover,.filter-btn.active { background:var(--aqua); border-color:var(--aqua); color:#fff; box-shadow:0 4px 14px rgba(8,145,178,0.3) }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem }
.gallery-item {
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    aspect-ratio:4/3; cursor:pointer; box-shadow:var(--shadow); transition:var(--transition);
    border:1px solid var(--border);
}
.gallery-item:hover { transform:scale(1.02); box-shadow:var(--shadow-lg) }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease }
.gallery-item:hover img { transform:scale(1.1) }
.gallery-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(14,77,107,0.88), transparent 55%);
    opacity:0; transition:var(--transition);
    display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem;
}
.gallery-item:hover .gallery-overlay { opacity:1 }
.gallery-overlay h3  { font-family:var(--font-display); font-size:1rem; color:#fff; margin-bottom:0.25rem }
.gallery-overlay p   { font-size:0.8rem; color:rgba(255,255,255,0.75) }
.gallery-zoom {
    position:absolute; top:1rem; right:1rem;
    width:40px; height:40px; background:rgba(255,255,255,0.2);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1rem; backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.3); transition:var(--transition);
}
.gallery-zoom:hover { background:var(--aqua) }
/* Lightbox */
.lightbox {
    position:fixed; inset:0; z-index:9000;
    background:rgba(10,40,60,0.96); backdrop-filter:blur(14px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:var(--transition);
}
.lightbox.open { opacity:1; visibility:visible }
.lightbox-content {
    max-width:90vw; max-height:90vh; position:relative;
    animation:lightboxIn 0.3s ease;
}
@keyframes lightboxIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox-content img { max-width:90vw; max-height:80vh; border-radius:var(--radius-lg); object-fit:contain }
.lightbox-close { position:absolute; top:-3rem; right:0; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; opacity:0.7 }
.lightbox-close:hover { opacity:1; transform:rotate(90deg) }
.lightbox-prev,.lightbox-next {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    color:#fff; width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1.1rem; transition:var(--transition);
}
.lightbox-prev { left:-60px } .lightbox-next { right:-60px }
.lightbox-prev:hover,.lightbox-next:hover { background:var(--aqua) }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; align-items:start }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr } }
.contact-info-list { display:flex; flex-direction:column; gap:1.25rem }
.contact-item {
    display:flex; gap:1rem; align-items:flex-start;
    background:#fff; padding:1.5rem; border-radius:var(--radius-lg);
    box-shadow:var(--shadow); border:1px solid var(--border); transition:var(--transition);
}
.contact-item:hover { box-shadow:var(--shadow-md); border-color:var(--aqua-light) }
.contact-icon {
    width:48px; height:48px; border-radius:var(--radius);
    background:linear-gradient(135deg, var(--aqua), var(--aqua-dark));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.1rem; flex-shrink:0;
    box-shadow:0 4px 14px rgba(8,145,178,0.25);
}
.contact-item h4 { font-family:var(--font-ui); font-size:0.82rem; font-weight:700; color:var(--text-3); text-transform:uppercase; margin-bottom:0.25rem }
.contact-item p,.contact-item a { font-size:0.925rem; color:var(--text) }
.contact-item a:hover { color:var(--aqua) }
.map-embed { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); height:300px; margin-top:1.5rem; border:1px solid var(--border) }
.map-embed iframe { width:100%; height:100%; border:0 }

/* =========================================================
   BUKU TAMU
   ========================================================= */
.tamu-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem }
@media(max-width:768px){ .tamu-grid{ grid-template-columns:1fr } }
.tamu-card {
    background:#fff; border-radius:var(--radius-xl);
    padding:1.75rem; box-shadow:var(--shadow);
    border:1px solid var(--border);
    border-left:4px solid var(--aqua); transition:var(--transition);
}
.tamu-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.tamu-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem }
.tamu-avatar {
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg, var(--aqua), var(--aqua-dark));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:var(--font-display); font-size:1.2rem; font-weight:700; flex-shrink:0;
}
.tamu-meta h4  { font-family:var(--font-ui); font-size:0.95rem; font-weight:700; color:var(--text) }
.tamu-meta p   { font-size:0.8rem; color:var(--text-3) }
.tamu-stars    { display:flex; gap:2px; margin-bottom:0.75rem }
.tamu-stars i  { color:#f5d87a; font-size:0.85rem }
.tamu-pesan    { color:var(--text-2); font-size:0.925rem; line-height:1.6; font-style:italic; font-family:var(--font-display) }
.tamu-reply {
    margin-top:1rem; padding:1rem;
    background:var(--aqua-pale); border-radius:var(--radius);
    border-left:3px solid var(--aqua);
}
.tamu-reply-label { font-size:0.75rem; font-weight:700; color:var(--aqua); text-transform:uppercase; margin-bottom:0.3rem; font-family:var(--font-ui) }

/* =========================================================
   AUTH FORMS (login / register)
   ========================================================= */
.form-section {
    min-height:100vh; padding:calc(var(--nav-h) + 3rem) 2rem 5rem;
    background:linear-gradient(160deg, var(--pearl) 0%, var(--aqua-pale) 50%, #fef9ee 100%);
    display:flex; align-items:center; justify-content:center;
}
.form-card {
    background:#fff; border-radius:var(--radius-xl);
    box-shadow:var(--shadow-xl); width:100%; max-width:520px;
    padding:3rem; border:1px solid var(--border); position:relative; overflow:hidden;
}
.form-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--aqua), var(--gold), var(--coral));
}
.form-card-wide { max-width:900px }
.form-card-title {
    font-family:var(--font-display); font-size:1.85rem; font-weight:700;
    color:var(--aqua-dark); margin-bottom:0.5rem;
}
.form-card-sub  { color:var(--text-3); font-size:0.925rem; margin-bottom:2rem }
.star-rating { display:flex; gap:0.25rem; flex-direction:row-reverse; justify-content:flex-end }
.star-rating input { display:none }
.star-rating label { font-size:1.5rem; cursor:pointer; color:#d1d5db; transition:color 0.2s }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color:#f5d87a }

/* =========================================================
   PAGE HEADER
   ========================================================= */
.page-header {
    padding:calc(var(--nav-h) + 4rem) 2rem 4rem;
    background:linear-gradient(160deg, var(--aqua-dark) 0%, var(--aqua) 100%);
    text-align:center; color:#fff; position:relative; overflow:hidden;
}
.page-header::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 20% 50%, rgba(34,211,238,0.18) 0%, transparent 60%),
               radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.12) 0%, transparent 45%);
}
.page-header-content { position:relative; z-index:1 }
.page-header h1 { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.25rem); font-weight:700; margin-bottom:0.75rem }
.page-header p  { color:rgba(255,255,255,0.75); font-size:1rem; max-width:580px; margin:0 auto 1.5rem }
.breadcrumb {
    display:flex; align-items:center; justify-content:center; gap:0.5rem;
    font-size:0.85rem; color:rgba(255,255,255,0.6);
}
.breadcrumb a:hover { color:#fff }
.breadcrumb span { opacity:0.45 }

/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */
.admin-layout { display:grid; grid-template-columns:260px 1fr; min-height:100vh; padding-top:var(--nav-h) }
.admin-sidebar {
    background:linear-gradient(180deg, var(--aqua-dark), #081e2e);
    padding:2rem 0; position:sticky; top:var(--nav-h);
    height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.admin-nav-section { margin-bottom:2rem }
.admin-nav-label {
    font-family:var(--font-ui); font-size:0.68rem; font-weight:700;
    color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:1.2px;
    padding:0 1.5rem; margin-bottom:0.5rem;
}
.admin-nav-item {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.75rem 1.5rem; color:rgba(255,255,255,0.6);
    font-family:var(--font-ui); font-size:0.875rem;
    cursor:pointer; transition:var(--transition);
    border-left:3px solid transparent;
}
.admin-nav-item i { width:18px; text-align:center }
.admin-nav-item:hover,.admin-nav-item.active {
    color:#fff; background:rgba(255,255,255,0.07);
    border-left-color:var(--gold);
}
.admin-main { padding:2rem; background:var(--pearl-2); min-height:calc(100vh - var(--nav-h)) }
.admin-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.25rem; margin-bottom:2rem }
.admin-stat-card {
    background:#fff; border-radius:var(--radius-lg); padding:1.5rem;
    box-shadow:var(--shadow); display:flex; align-items:center; gap:1rem;
    border:1px solid var(--border);
}
.admin-stat-icon { width:52px; height:52px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0 }
.admin-stat-icon.blue   { background:rgba(2,132,199,0.1); color:#0284c7 }
.admin-stat-icon.green  { background:rgba(5,150,105,0.1); color:var(--success) }
.admin-stat-icon.orange { background:rgba(224,92,92,0.1); color:var(--coral) }
.admin-stat-icon.teal   { background:rgba(8,145,178,0.1); color:var(--aqua) }
.admin-stat-icon.gold   { background:rgba(201,168,76,0.1); color:var(--gold) }
.admin-stat-num   { font-family:var(--font-display); font-size:1.75rem; font-weight:700; color:var(--text); line-height:1 }
.admin-stat-label { font-size:0.8rem; color:var(--text-3); margin-top:0.2rem }
.admin-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:1.5rem; overflow:hidden; border:1px solid var(--border) }
.admin-card-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.admin-card-title  { font-family:var(--font-ui); font-size:1rem; font-weight:700; color:var(--text) }
.admin-card-body   { padding:1.5rem }
.admin-table { width:100%; border-collapse:collapse; font-size:0.875rem }
.admin-table th { background:var(--pearl-2); padding:0.75rem 1rem; text-align:left; font-family:var(--font-ui); font-size:0.75rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px }
.admin-table td { padding:0.875rem 1rem; border-bottom:1px solid var(--border); color:var(--text) }
.admin-table tr:hover td { background:var(--pearl) }
.admin-table tr:last-child td { border-bottom:none }
.badge-status { padding:0.25rem 0.75rem; border-radius:50px; font-family:var(--font-ui); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px }
.badge-pending   { background:#fef3c7; color:#92400e }
.badge-confirmed { background:#d1fae5; color:#065f46 }
.badge-paid      { background:#dbeafe; color:#1e40af }
.badge-cancelled { background:#fee2e2; color:#991b1b }
.badge-completed { background:#d1fae5; color:#065f46 }

/* =========================================================
   MY ORDERS
   ========================================================= */
.order-price-tag { display:inline-block; background:rgba(224,92,92,0.08); border:1px solid rgba(224,92,92,0.2); color:var(--coral); font-family:var(--font-display); font-size:1.35rem; font-weight:700; padding:4px 14px; border-radius:var(--radius) }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background:linear-gradient(180deg, var(--aqua-dark) 0%, #071520 100%);
    color:rgba(255,255,255,0.65); position:relative; padding:5rem 0 0; overflow:hidden;
}
.footer-waves { position:absolute; top:0; left:0; right:0; height:80px }
.footer-container { max-width:1300px; margin:0 auto; padding:0 2rem }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem }
.footer-brand .footer-logo { display:flex; align-items:center; gap:0.875rem; margin-bottom:1.25rem }
.footer-logo h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:#fff }
.footer-logo p  { font-size:0.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.5px }
.footer-logo .logo-icon { font-size:2rem }
.footer-desc  { font-size:0.875rem; line-height:1.75; margin-bottom:1.5rem }
.footer-social { display:flex; gap:0.75rem }
.social-btn {
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.875rem; transition:var(--transition);
    border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.65);
}
.social-btn:hover { color:#fff; transform:translateY(-3px) }
.social-btn.facebook:hover  { background:#1877f2; border-color:#1877f2 }
.social-btn.instagram:hover { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%); border-color:transparent }
.social-btn.whatsapp:hover  { background:#25d366; border-color:#25d366 }
.social-btn.youtube:hover   { background:#ff0000; border-color:#ff0000 }
.footer-links h4,.footer-contact h4 { font-family:var(--font-ui); font-size:0.875rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:1.25rem }
.footer-links ul { display:flex; flex-direction:column; gap:0.6rem }
.footer-links a { font-size:0.875rem; color:rgba(255,255,255,0.55); display:flex; align-items:center; gap:0.5rem; transition:var(--transition) }
.footer-links a i { font-size:0.68rem; color:var(--gold) }
.footer-links a:hover { color:#fff; padding-left:4px }
.footer-contact ul { display:flex; flex-direction:column; gap:0.875rem }
.footer-contact li { display:flex; gap:0.75rem; align-items:flex-start; font-size:0.875rem }
.footer-contact i { color:var(--gold); margin-top:3px; font-size:0.875rem; flex-shrink:0 }
.footer-contact a:hover { color:#fff }
.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.08);
    padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:1rem; font-size:0.82rem;
}
.footer-bottom strong { color:#fff }
.footer-bottom-right  { color:var(--gold) }

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.wa-float {
    position:fixed; bottom:2rem; right:2rem; z-index:4000;
    text-decoration:none; display:flex; align-items:center;
    gap:0; cursor:none;
}
.wa-float-inner {
    position:relative; width:58px; height:58px;
    background:linear-gradient(135deg,#25d366,#128c7e);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 24px rgba(37,211,102,0.45);
    transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
    flex-shrink:0; z-index:1;
}
.wa-float:hover .wa-float-inner { transform:scale(1.12); box-shadow:0 10px 32px rgba(37,211,102,0.6) }
.wa-icon { color:#fff; font-size:1.7rem; line-height:1; display:block }
.wa-pulse {
    position:absolute; inset:-4px; border-radius:50%;
    border:3px solid rgba(37,211,102,0.5); animation:waPulse 2s ease-out infinite;
}
.wa-pulse::after {
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(37,211,102,0.28); animation:waPulse 2s ease-out infinite 0.4s;
}
@keyframes waPulse { 0%{transform:scale(1);opacity:1} 70%{transform:scale(1.35);opacity:0} 100%{transform:scale(1.35);opacity:0} }
.wa-tooltip {
    position:absolute; right:68px; bottom:50%;
    transform:translateY(50%) translateX(12px);
    opacity:0; pointer-events:none;
    transition:opacity 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    background:#fff; border-radius:14px; padding:0.75rem 1rem;
    box-shadow:0 8px 32px rgba(0,0,0,0.14); display:flex; align-items:center;
    gap:0.625rem; min-width:200px; white-space:nowrap;
    border:1px solid var(--border);
}
.wa-float:hover .wa-tooltip { opacity:1; transform:translateY(50%) translateX(0) }
.wa-tooltip::after {
    content:''; position:absolute; right:-8px; top:50%; transform:translateY(-50%);
    border:8px solid transparent; border-left-color:#fff; border-right:0;
    filter:drop-shadow(2px 0 2px rgba(0,0,0,0.05));
}
.wa-tooltip-avatar { font-size:1.75rem; flex-shrink:0; line-height:1 }
.wa-tooltip-name { font-family:var(--font-ui); font-size:0.82rem; font-weight:700; color:var(--text); line-height:1.2 }
.wa-tooltip-msg  { font-size:0.78rem; color:var(--text-3); margin-top:2px }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top {
    position:fixed; bottom:6.5rem; right:2rem; z-index:500;
    width:46px; height:46px; border-radius:50%;
    background:#fff; color:var(--aqua); border:1.5px solid var(--border);
    font-size:1rem; box-shadow:var(--shadow-md);
    opacity:0; visibility:hidden; transform:translateY(16px);
    transition:var(--transition); display:flex; align-items:center; justify-content:center;
}
.back-to-top.show { opacity:1; visibility:visible; transform:translateY(0) }
.back-to-top:hover { background:var(--aqua); color:#fff; border-color:var(--aqua); transform:translateY(-3px) }

/* =========================================================
   UTILITIES
   ========================================================= */
.text-aqua   { color:var(--aqua) }
.text-gold   { color:var(--gold) }
.text-coral  { color:var(--coral) }
.text-muted  { color:var(--text-3) }
.bg-pearl    { background:var(--pearl) }
.bg-pearl-2  { background:var(--pearl-2) }
.fw-700      { font-weight:700 }
.font-display{ font-family:var(--font-display) }
.text-center { text-align:center }
.loading-spinner {
    width:40px; height:40px; border:3px solid var(--border);
    border-top-color:var(--aqua); border-radius:50%;
    animation:spin 0.8s linear infinite; margin:2rem auto;
}
@keyframes spin { to{transform:rotate(360deg)} }
.empty-state { text-align:center; padding:4rem 2rem; color:var(--text-3) }
.empty-state i { font-size:3rem; margin-bottom:1rem; opacity:0.35 }
.empty-state p { font-size:1rem }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
    .footer-grid { grid-template-columns:1fr 1fr }
    .about-content-grid { grid-template-columns:1fr }
    .admin-layout { grid-template-columns:1fr }
    .admin-sidebar { position:static; height:auto }
}
@media(max-width:768px){
    :root { --nav-h:64px }
    .nav-menu {
        position:fixed; top:var(--nav-h); left:0; right:0;
        background:rgba(255,255,255,0.98); backdrop-filter:blur(20px);
        flex-direction:column; padding:1.5rem; gap:0.25rem;
        transform:translateY(-110%); opacity:0;
        transition:var(--transition); z-index:999;
        border-bottom:1px solid var(--border);
        box-shadow:var(--shadow-lg);
    }
    .nav-menu.open { transform:translateY(0); opacity:1 }
    .nav-link { color:var(--text-2) !important; justify-content:flex-start; padding:0.75rem 1rem; border-radius:8px }
    .nav-link:hover,.nav-link.active { color:var(--aqua) !important; background:var(--aqua-pale) !important }
    .nav-auth { display:none }
    .nav-toggle { display:flex }
    .section { padding:4rem 1.25rem }
    .paket-grid { grid-template-columns:1fr }
    .features-grid { grid-template-columns:1fr }
    .booking-grid { grid-template-columns:1fr }
    .footer-grid { grid-template-columns:1fr }
    .footer-bottom { justify-content:center; text-align:center }
    .hero-stats { gap:1.5rem }
    .stat-item .stat-num { font-size:2rem }
    .kuliner-grid { grid-template-columns:1fr }
    .lightbox-prev { left:-40px } .lightbox-next { right:-40px }
}
@media(max-width:480px){
    .hero-actions { flex-direction:column }
    .about-img-badge { bottom:-1rem; right:-0.5rem; padding:1rem }
    .lightbox-prev,.lightbox-next { display:none }
    .wa-float { bottom:1.25rem; right:1.25rem }
    .wa-float-inner { width:52px; height:52px }
    .wa-icon { font-size:1.5rem }
    .wa-tooltip { display:none }
    .back-to-top { bottom:5.5rem !important }
}

/* AOS fallback */
[data-aos]{ opacity:0; transition-property:transform,opacity }
.aos-animate{ opacity:1!important }

/* =========================================================
   PAYMENT PAGE
   ========================================================= */
.pay-summary-card {
    background:#fff; border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg); border:1px solid var(--border); overflow:hidden;
}
.psc-header {
    background:linear-gradient(135deg,var(--aqua-dark),var(--aqua));
    padding:1.25rem 1.75rem;
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.psc-header-left { display:flex; align-items:center; gap:1rem }
.psc-icon { font-size:2rem }
.psc-label { font-size:0.72rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px }
.psc-code  { font-family:var(--font-ui); font-size:1.1rem; font-weight:700; color:#fff }
.psc-body  { padding:1.75rem }
.psc-paket h3 { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--aqua-dark); margin-bottom:0.5rem }
.psc-meta  { display:flex; gap:1.25rem; flex-wrap:wrap; margin-bottom:1.5rem }
.psc-meta span { font-size:0.85rem; color:var(--text-3); display:flex; align-items:center; gap:0.35rem }
.psc-meta i    { color:var(--aqua); font-size:0.78rem }
.psc-breakdown { background:var(--pearl-2); border-radius:var(--radius); padding:1.25rem }
.psc-row   { display:flex; justify-content:space-between; font-size:0.875rem; color:var(--text-2); padding:4px 0 }
.psc-divider { height:1px; background:var(--border); margin:8px 0 }
.psc-total { font-weight:700; color:var(--aqua-dark); font-size:1rem }
.psc-total span:last-child { color:var(--coral); font-family:var(--font-display); font-size:1.15rem }

.pay-methods { background:#fff; border-radius:var(--radius-xl); padding:1.5rem; box-shadow:var(--shadow); border:1px solid var(--border) }
.pay-methods-label { font-family:var(--font-ui); font-size:0.78rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:1rem }
.pay-methods-list  { display:flex; flex-wrap:wrap; gap:0.75rem }
.pm-item {
    display:flex; align-items:center; gap:0.4rem;
    background:var(--pearl-2); border:1px solid var(--border);
    border-radius:var(--radius); padding:0.5rem 0.875rem;
    font-size:0.82rem; color:var(--text-2);
    transition:var(--transition);
}
.pm-item:hover { border-color:var(--aqua); color:var(--aqua) }
.pm-item i { color:var(--aqua); font-size:0.9rem }

/* =========================================================
   REVIEW CARDS
   ========================================================= */
.review-summary-card {
    background:#fff; border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg); border:1px solid var(--border);
    padding:2rem; display:flex; gap:3rem; align-items:center;
    margin-bottom:1.5rem; flex-wrap:wrap;
}
.rsc-score { text-align:center; flex-shrink:0 }
.rsc-big   { font-family:var(--font-display); font-size:4rem; font-weight:700; color:var(--aqua-dark); line-height:1 }
.rsc-stars { display:flex; gap:4px; justify-content:center; margin:0.5rem 0; color:#f5d87a; font-size:1.1rem }
.rsc-total { font-size:0.82rem; color:var(--text-3) }
.rsc-bars  { flex:1; display:flex; flex-direction:column; gap:0.5rem; min-width:200px }
.rsc-bar-row { display:flex; align-items:center; gap:0.75rem }
.rsc-bar-label { font-family:var(--font-ui); font-size:0.82rem; color:var(--text-2); width:40px; text-align:right; flex-shrink:0 }
.rsc-bar-track { flex:1; height:8px; background:var(--pearl-2); border-radius:4px; overflow:hidden; border:1px solid var(--border) }
.rsc-bar-fill  { height:100%; background:linear-gradient(90deg,var(--gold),var(--aqua)); border-radius:4px; transition:width 0.8s ease }
.rsc-bar-count { font-size:0.78rem; color:var(--text-3); width:24px; flex-shrink:0 }

.review-card {
    background:#fff; border-radius:var(--radius-xl);
    padding:1.75rem; box-shadow:var(--shadow); border:1px solid var(--border);
    transition:var(--transition);
}
.review-card:hover { box-shadow:var(--shadow-md); border-color:var(--aqua-light) }
.rv-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap }
.rv-avatar {
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(135deg,var(--aqua),var(--aqua-dark));
    color:#fff; font-family:var(--font-display); font-size:1.1rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rv-meta h4 { font-family:var(--font-ui); font-size:0.95rem; font-weight:700; color:var(--text) }
.rv-meta p  { font-size:0.78rem; color:var(--text-3) }
.rv-stars   { display:flex; gap:3px; color:#f5d87a; font-size:0.9rem; margin-left:auto }
.rv-title   { font-family:var(--font-display); font-size:1.05rem; color:var(--aqua-dark); margin-bottom:0.5rem }
.rv-body    { color:var(--text-2); font-size:0.9rem; line-height:1.7 }
.rv-footer  { margin-top:1rem; display:flex; gap:0.75rem }
.rv-helpful {
    display:inline-flex; align-items:center; gap:0.4rem;
    background:var(--pearl-2); border:1px solid var(--border);
    color:var(--text-3); padding:0.4rem 0.875rem; border-radius:50px;
    font-family:var(--font-ui); font-size:0.78rem; font-weight:600;
    cursor:pointer; transition:var(--transition);
}
.rv-helpful:hover,.rv-helpful.active { background:var(--aqua-pale); border-color:var(--aqua); color:var(--aqua) }
.rv-helpful i { font-size:0.78rem }

/* Star Rating Interactive */
.star-rating-interactive {
    display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:0.25rem;
}
.star-rating-interactive input { display:none }
.star-rating-interactive label {
    font-size:2.25rem; cursor:pointer; color:#d1d5db; transition:color 0.15s;
    line-height:1;
}
.star-rating-interactive input:checked ~ label,
.star-rating-interactive label:hover,
.star-rating-interactive label:hover ~ label { color:#f5d87a }

/* =========================================================
   PAKET DETAIL PAGE
   ========================================================= */

/* Hero */
.paket-detail-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding-top: var(--nav-h);
}
.pdh-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    animation: heroPan 14s ease-in-out infinite alternate;
    filter: brightness(0.75);
}
.pdh-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,30,50,0.92) 0%, rgba(10,30,50,0.45) 50%, rgba(10,30,50,0.2) 100%);
}
.pdh-content {
    position: relative; z-index: 2;
    padding: 3rem 2rem 0;
}
.pdh-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: flex-end;
    padding-bottom: 3rem;
}
.pdh-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 1rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.pdh-meta {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    margin-bottom: 1rem;
}
.pdh-meta span {
    display: flex; align-items: center; gap: 0.4rem;
    color: rgba(255,255,255,0.8); font-size: 0.9rem;
}
.pdh-meta i { color: var(--aqua-light); font-size: 0.85rem }
.pdh-desc { color: rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.7; max-width:580px }

/* Booking card in hero */
.pdh-booking-card {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}
.pdh-bc-price {
    display: flex; align-items: baseline; gap: 4px;
    margin-bottom: 1rem; flex-wrap: wrap;
}
.pdh-bc-from { font-size: 0.78rem; color: var(--text-3) }
.pdh-bc-amount {
    font-family: var(--font-display);
    font-size: 1.75rem; font-weight: 700;
    color: var(--aqua-dark);
}
.pdh-bc-per { font-size: 0.8rem; color: var(--text-3) }
.pdh-bc-breakdown {
    background: var(--pearl-2);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
}
.pdh-bc-row {
    display: flex; justify-content: space-between;
    font-size: 0.85rem; color: var(--text-2); padding: 3px 0;
}
.pdh-bc-divider { height: 1px; background: var(--border); margin: 6px 0 }
.pdh-bc-total { font-weight: 700; color: var(--text) }
.pdh-bc-total span:last-child { color: var(--coral) }
.pdh-bc-note {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; color: var(--text-3);
    margin-top: 0.875rem; text-align: center; justify-content: center;
}
.pdh-bc-note i { color: var(--success) }

/* Gallery */
.pd-gallery {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 0.75rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-height: 420px;
    border: 1px solid var(--border);
}
.pd-gallery-main { overflow: hidden; background: var(--pearl-2) }
.pd-gallery-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.pd-gallery-main:hover img { transform: scale(1.04) }
.pd-gallery-thumbs {
    display: flex; flex-direction: column; gap: 0.75rem;
    overflow-y: auto;
}
.pd-gallery-thumb {
    flex-shrink: 0; cursor: pointer;
    border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 16/10; opacity: 0.7;
    transition: opacity 0.25s, transform 0.25s;
    border: 2px solid transparent;
}
.pd-gallery-thumb:hover { opacity: 0.9; transform: scale(1.03) }
.pd-gallery-thumb.active { opacity: 1; border-color: var(--aqua) }
.pd-gallery-thumb img { width: 100%; height: 100%; object-fit: cover }

/* Layout */
.pd-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}
.pd-main { min-width: 0 }
.pd-sidebar { position: sticky; top: calc(var(--nav-h) + 1.5rem) }

/* Content blocks */
.pd-block {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.pd-block-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--aqua-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.875rem;
    border-bottom: 2px solid var(--aqua-pale);
}
.pd-block-title i { color: var(--aqua); font-size: 1.1rem }

/* Highlights */
.pd-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pd-highlight-item {
    display: flex; align-items: flex-start; gap: 0.875rem;
    padding: 1rem;
    background: var(--pearl-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: var(--transition);
}
.pd-highlight-item:hover { border-color: var(--aqua-light); background: var(--aqua-pale) }
.pd-hl-icon {
    font-size: 1.75rem; flex-shrink: 0;
    width: 46px; height: 46px;
    background: #fff;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-xs);
}
.pd-highlight-item h4 {
    font-family: var(--font-ui);
    font-size: 0.88rem; font-weight: 700;
    color: var(--text); margin-bottom: 0.25rem;
}
.pd-highlight-item p { font-size: 0.8rem; color: var(--text-2); line-height: 1.5 }

/* Itinerary */
.pd-itinerary { position: relative }
.pd-itinerary::before {
    content: '';
    position: absolute; left: 72px; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(to bottom, var(--aqua), var(--aqua-light));
    opacity: 0.3;
}
.pd-itin-item {
    display: flex; align-items: flex-start; gap: 0;
    padding: 0.75rem 0;
    position: relative;
}
.pd-itin-time {
    width: 65px; flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: 0.82rem; font-weight: 700;
    color: var(--aqua); text-align: right;
    padding-right: 0.875rem;
    padding-top: 2px;
}
.pd-itin-dot {
    width: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; padding-top: 4px;
}
.pd-itin-dot-inner {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--aqua);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.2);
}
.pd-itin-desc {
    flex: 1; padding-left: 1rem;
    font-size: 0.9rem; color: var(--text);
    line-height: 1.6; padding-top: 1px;
}

/* Include / Exclude */
.pd-incexc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.pd-ie-title {
    font-family: var(--font-ui);
    font-size: 0.82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 0.875rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.pd-ie-yes { color: var(--success) }
.pd-ie-no  { color: var(--danger) }
.pd-include ul,
.pd-exclude ul { display: flex; flex-direction: column; gap: 0.5rem }
.pd-include li,
.pd-exclude li {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.875rem; color: var(--text-2); line-height: 1.5;
}
.pd-include li i { color: var(--success); margin-top: 3px; flex-shrink: 0 }
.pd-exclude li i { color: var(--danger); margin-top: 3px; flex-shrink: 0 }

/* Syarat */
.pd-syarat { font-size: 0.9rem; color: var(--text-2); line-height: 1.75 }
.pd-syarat-list { display: flex; flex-direction: column; gap: 0.6rem }
.pd-syarat-list li {
    display: flex; align-items: flex-start; gap: 0.6rem;
}
.pd-syarat-list li i { color: var(--aqua); margin-top: 3px; flex-shrink: 0 }

/* FAQ */
.pd-faq { display: flex; flex-direction: column; gap: 0.5rem }
.pd-faq-item {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}
.pd-faq-item.open { border-color: var(--aqua) }
.pd-faq-q {
    width: 100%; text-align: left;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem;
    background: #fff; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: 0.925rem;
    font-weight: 600; color: var(--text);
    transition: var(--transition); gap: 1rem;
}
.pd-faq-item.open .pd-faq-q { background: var(--aqua-pale); color: var(--aqua-dark) }
.pd-faq-q:hover { background: var(--pearl-2) }
.pd-faq-icon { flex-shrink: 0; transition: transform 0.3s ease; color: var(--aqua) }
.pd-faq-item.open .pd-faq-icon { transform: rotate(180deg) }
.pd-faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background: #fff;
}
.pd-faq-item.open .pd-faq-a { max-height: 300px; padding-bottom: 0.5rem }
.pd-faq-a p {
    padding: 0.5rem 1.25rem 0.75rem;
    font-size: 0.875rem; color: var(--text-2); line-height: 1.7;
}

/* Sticky Booking Sidebar */
.pd-booking-sticky {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.pds-price { margin-bottom: 1.25rem }
.pds-from { font-size: 0.75rem; color: var(--text-3); display: block; margin-bottom: 2px }
.pds-amount {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 700;
    color: var(--aqua-dark); line-height: 1;
    display: block;
}
.pds-per { font-size: 0.8rem; color: var(--text-3) }
.pds-info {
    background: var(--pearl-2);
    border-radius: var(--radius);
    padding: 1rem; margin-bottom: 1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.pds-info-row {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.875rem; color: var(--text-2);
}
.pds-info-row i { color: var(--aqua); width: 16px; text-align: center; font-size: 0.85rem }
.pds-total {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.82rem; color: var(--text-3);
    padding: 0.75rem 0; border-top: 1px solid var(--border);
    margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.25rem;
}
.pds-total strong { color: var(--coral); font-family: var(--font-display); font-size: 1rem }
.pds-note {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-size: 0.75rem; color: var(--text-3);
    margin-top: 0.875rem;
}
.pds-note i { color: var(--success) }

/* Share */
.pd-share {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.pd-share-title {
    font-family: var(--font-ui);
    font-size: 0.78rem; font-weight: 700;
    color: var(--text-3); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 0.75rem;
}
.pd-share-btns { display: flex; gap: 0.6rem }
.pd-share-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; cursor: pointer;
    border: 1.5px solid var(--border); transition: var(--transition);
    text-decoration: none; color: var(--text-2);
    background: #fff;
}
.pd-share-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow) }
.pd-share-wa:hover  { background: #25d366; border-color: #25d366; color: #fff }
.pd-share-fb:hover  { background: #1877f2; border-color: #1877f2; color: #fff }
.pd-share-tw:hover  { background: #1da1f2; border-color: #1da1f2; color: #fff }
.pd-share-copy:hover { background: var(--aqua); border-color: var(--aqua); color: #fff }

/* Responsive */
@media (max-width: 1024px) {
    .pdh-grid  { grid-template-columns: 1fr }
    .pdh-right { display: none }
    .pd-layout { grid-template-columns: 1fr }
    .pd-sidebar { position: static }
    .pd-gallery { grid-template-columns: 1fr }
    .pd-gallery-thumbs { flex-direction: row; overflow-x: auto }
    .pd-gallery-thumb  { width: 100px; flex-shrink: 0 }
}
@media (max-width: 768px) {
    .pd-highlights { grid-template-columns: 1fr }
    .pd-incexc     { grid-template-columns: 1fr }
    .paket-detail-hero { min-height: 60vh }
}

/* =========================================================
   LIVE CHAT / CHATBOT WIDGET
   ========================================================= */

/* Toggle button */
.chat-toggle {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 4500;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aqua), var(--aqua-dark));
    color: #fff;
    border: none;
    box-shadow: 0 6px 24px rgba(8,145,178,0.45);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
    overflow: hidden;
}
.chat-toggle:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 32px rgba(8,145,178,0.55);
}
.chat-toggle .ct-icon-chat,
.chat-toggle .ct-icon-close { transition: opacity 0.25s, transform 0.25s }
.chat-toggle .ct-icon-close  { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.5) }
.chat-toggle.open .ct-icon-chat  { opacity: 0; transform: rotate(90deg) scale(0.5) }
.chat-toggle.open .ct-icon-close { opacity: 1; transform: rotate(0) scale(1) }

/* Unread badge */
.chat-unread {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px;
    background: var(--coral); color: #fff;
    border-radius: 50%; font-size: 0.65rem;
    font-weight: 700; font-family: var(--font-ui);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; opacity: 0; transition: opacity 0.2s;
}
.chat-unread.show { opacity: 1 }

/* Chat window */
.chat-window {
    position: fixed;
    bottom: 5.5rem; left: 2rem;
    z-index: 4400;
    width: 360px; height: 520px;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: scale(0.85) translateY(30px);
    opacity: 0;
    visibility: hidden;
    transform-origin: bottom left;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                opacity 0.3s ease,
                visibility 0.3s;
}
.chat-window.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Chat header */
.chat-header {
    background: linear-gradient(135deg, var(--aqua-dark), var(--aqua));
    padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: 0.875rem;
    flex-shrink: 0;
}
.chat-header-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0;
}
.chat-header-info { flex: 1 }
.chat-header-name {
    font-family: var(--font-ui); font-size: 0.95rem;
    font-weight: 700; color: #fff; line-height: 1.2;
}
.chat-header-status {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; color: rgba(255,255,255,0.7);
    margin-top: 2px;
}
.chat-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,0.8);
    animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.chat-header-actions { display: flex; gap: 0.4rem }
.chat-action-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; cursor: pointer; transition: var(--transition);
}
.chat-action-btn:hover { background: rgba(255,255,255,0.25); color: #fff }

/* Quick reply chips */
.chat-quick-replies {
    padding: 0.5rem 1rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    background: var(--pearl);
    flex-shrink: 0;
}
.chat-quick-replies span { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; color: var(--text-3); display: block; width: 100%; margin-bottom: 2px }
.chat-qr-btn {
    background: #fff; border: 1.5px solid var(--border);
    color: var(--aqua); padding: 4px 10px; border-radius: 50px;
    font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.chat-qr-btn:hover { background: var(--aqua); border-color: var(--aqua); color: #fff }

/* Messages area */
.chat-messages {
    flex: 1; overflow-y: auto; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.75rem;
    scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px }
.chat-messages::-webkit-scrollbar-track { background: transparent }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px }

/* Message bubbles */
.chat-msg { display: flex; align-items: flex-end; gap: 0.5rem; animation: msgIn 0.3s ease }
@keyframes msgIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.chat-msg.user { flex-direction: row-reverse }

.chat-msg-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
}
.chat-msg.bot  .chat-msg-avatar { background: linear-gradient(135deg, var(--aqua), var(--aqua-dark)); color: #fff }
.chat-msg.user .chat-msg-avatar { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #fff }

.chat-bubble {
    max-width: 78%; padding: 0.65rem 0.95rem;
    border-radius: 16px; font-size: 0.86rem; line-height: 1.55;
    white-space: pre-line; word-break: break-word;
}
.chat-msg.bot  .chat-bubble {
    background: var(--pearl-2); color: var(--text);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border);
}
.chat-msg.user .chat-bubble {
    background: linear-gradient(135deg, var(--aqua), var(--aqua-dark));
    color: #fff; border-bottom-right-radius: 4px;
}
.chat-msg-time {
    font-size: 0.65rem; color: var(--text-3);
    margin-top: 3px; text-align: right;
}
.chat-msg.bot .chat-msg-time { text-align: left }

/* Typing indicator */
.chat-typing { display: flex; align-items: center; gap: 0.5rem }
.typing-dots { display: flex; gap: 4px; padding: 0.65rem 0.95rem; background: var(--pearl-2); border-radius: 16px; border-bottom-left-radius: 4px; border: 1px solid var(--border) }
.typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--aqua); display: block;
    animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s }
.typing-dots span:nth-child(3) { animation-delay: 0.4s }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-8px)} }

/* Input area */
.chat-input-area {
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: flex-end; gap: 0.6rem;
    background: #fff; flex-shrink: 0;
}
.chat-input {
    flex: 1; border: 1.5px solid var(--border);
    border-radius: 22px; padding: 0.55rem 1rem;
    font-family: var(--font-body); font-size: 0.875rem;
    color: var(--text); resize: none; max-height: 100px;
    outline: none; transition: var(--transition);
    background: var(--pearl);
    line-height: 1.45;
}
.chat-input::placeholder { color: var(--text-3) }
.chat-input:focus { border-color: var(--aqua); background: #fff; box-shadow: 0 0 0 3px rgba(8,145,178,0.1) }
.chat-send-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--aqua), var(--aqua-dark));
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; flex-shrink: 0;
    transition: var(--transition);
    box-shadow: 0 3px 10px rgba(8,145,178,0.3);
}
.chat-send-btn:hover { transform: scale(1.1); box-shadow: 0 5px 16px rgba(8,145,178,0.45) }
.chat-send-btn:disabled { opacity: 0.5; pointer-events: none }

/* WA link in footer */
.chat-footer-wa {
    text-align: center; padding: 0.4rem;
    font-size: 0.7rem; color: var(--text-3);
    border-top: 1px solid var(--border); background: var(--pearl);
    flex-shrink: 0;
}
.chat-footer-wa a { color: #25d366; font-weight: 700 }

/* Mobile */
@media (max-width: 480px) {
    .chat-window { width: calc(100vw - 2rem); left: 1rem; bottom: 5rem }
    .chat-toggle { left: 1rem; bottom: 1.25rem }
}