:root {
            --cream: #f5f0e8;
            --dark: #1a1410;
            --amber: #c8762a;
            --amber-light: #e8983c;
            --muted: #7a6e60;
            --border: rgba(26,20,16,0.12);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--cream);
            color: var(--dark);
            overflow-x: hidden;
        }

        /* ---- NAVBAR ---- */
        .nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 99;
            padding: 22px 52px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background 0.4s, padding 0.4s, border-bottom 0.4s;
        }
        .nav.scrolled {
            background: rgba(245,240,232,0.88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            padding: 14px 52px;
            border-bottom: 1px solid var(--border);
        }

        .nav-logo {
            font-family: 'Playfair Display', serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--dark);
            letter-spacing: -0.3px;
            text-decoration: none;
        }
        .nav-logo span { color: var(--amber); }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
        }
        .nav-links a {
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            color: var(--muted);
            padding: 8px 16px;
            border-radius: 100px;
            transition: color 0.2s, background 0.2s;
        }
        .nav-links a:hover { color: var(--dark); background: rgba(26,20,16,0.06); }

        .nav-links .btn-nav {
            background: var(--dark);
            color: var(--cream);
            font-weight: 500;
            padding: 9px 22px;
            border-radius: 100px;
            margin-left: 8px;
            transition: background 0.2s, transform 0.2s;
        }
        .nav-links .btn-nav:hover { background: var(--amber); color: #fff; transform: translateY(-1px); }

        /* ---- HERO ---- */
        .tulisankiri{
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            padding: 120px 52px 80px;
            gap: 60px;
            position: relative;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 60% 60% at 70% 50%, rgba(200,118,42,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .hero-text { max-width: 560px; }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--amber);
            margin-bottom: 28px;
        }
        .hero-tag::before {
            content: '';
            width: 28px; height: 1px;
            background: var(--amber);
        }

        .tulisanbadag {
            font-family: 'Playfair Display', serif;
            font-size: clamp(42px, 5.5vw, 72px);
            line-height: 1.1;
            letter-spacing: -1.5px;
            color: var(--dark);
            margin-bottom: 24px;
        }
        .tulisanbadag em {
            font-style: italic;
            color:#c8762a
        }

        .tulisanparagraf {
            font-size: 16px;
            line-height: 1.75;
            color: var(--muted);
            margin-bottom: 44px;
            max-width: 420px;
            font-weight: 300;
        }

        .button-kiri {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .btn-ticket {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: black;
            color: white;
            /* biar gak ada garis itu di teks nya */
            text-decoration: none;
            
            padding: 15px 32px;
            border-radius: 100px;
            font-size: 15px;
            font-weight: 500;
        }
        .btn-ticket:hover {
            box-shadow: 0 8px 32px rgba(200,118,42,0.35);
        }
        .btn-secondary {
            font-size: 14px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
        }
        .btn-secondary:hover {color : dark;}

        .data-statistik {
            display: flex;
            gap: 32px;
            margin-top: 56px;
            padding-top: 32px;
        }
        .stat-num {
            font-family: 'Playfair Display', serif;
            font-size: 30px;
            font-weight: 700;
            line-height: 1;
        }
        .stat-label {
            font-size: 12px;
            margin-top: 4px;
            font-weight: 300;
        }

        /* ---- FOTOOOOOOOOOOOOO ---- */
        .foto-kanan {
            position: relative;
            height: 560px;
            border-radius: 24px;
            overflow: hidden;
        }
        .foto { 
            width: 100%; height: 100%;
            object-fit: cover;
            border-radius: 24px;
            background: linear-gradient(135deg, #c8762a22, #1a141022);
            display: block;
        }
        .tulisan-dibawah-foto {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(26,20,16,0.5) 0%, transparent 50%);
            border-radius: 24px;
        }

        
        .card-bawah-foto {
            position: absolute;
            bottom: 28px;
            left: 28px;
            right: 28px;
            background: rgba(245,240,232,0.92);
            backdrop-filter: blur(14px);
            border-radius: 16px;
            padding: 18px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .agarberjarak { font-size: 10px; }
        .tekstujuan{
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--dark);
            line-height: 1.2;
        }
        .teksfotobawah { color: var(--muted); font-size: 12px; margin-top: 2px; }
        .btn-img {
            background: var(--amber);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 100px;
            white-space: nowrap;
        }
        
        /* foter ngawii */
        .footer-route {
            background: var(--dark);
            color: var(--cream);
            padding: 18px 0;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }
        .footer-route::before, .route-ticker::before, .footer-route::after, .route-ticker::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0;
            width: 80px;
            z-index: 2;
        }

        .route-ticker {
            display: inline-block;
            animation: ticker 25s linear infinite;
        }
        .route-ticker:hover { animation-play-state: paused; }
        @keyframes ticker {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        .route-item {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 300;
            letter-spacing: 0.5px;
            padding: 0 32px;
        }
        .route-dot {
            width: 4px; height: 4px;
            background: var(--amber);
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* ---- FOOTER ---- */
        .footer {
            padding: 40px 52px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
        }
        .footer-logo {
            font-family: 'apple chancery', cursive;
            font-weight: 700;
            font-size: 16px;
            color: var(--dark);
        }
        .footer-logo span { color: var(--amber); }
        .footer-teks {
            font-size: 13px;
        }
        .footer-btn {
            display: flex; gap: 20px;
        }
        .footer-btn a {
            font-size: 13px;
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-btn a:hover { color: var(--dark); }

        /* ---- RESPONSIVE ---- */
        @media (max-width: 900px) {
    .tulisankiri {
        grid-template-columns: 1fr;
        padding: 120px 28px 80px;
        text-align: center;
    }
    .hero-text { max-width: 100%; }
    .hero-tag { justify-content: center; }
    .tulisanparagraf { margin: 0 auto 44px; }
    .button-kiri { justify-content: center; }
    .data-statistik { justify-content: center; }
    .foto-kanan { height: 340px; }
    .nav { padding: 18px 28px; }
    .nav.scrolled { padding: 12px 28px; }
    .footer { padding: 32px 28px; flex-direction: column; align-items: flex-start; }
}

        /* ---- ENTRANCE ANIMATIONS ---- */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .tulisankiri  { animation: fadeUp 0.6s 0.1s both; }
        .button-kiri{ animation: fadeUp 0.7s 0.2s both; }
        .tulisanparagraf  { animation: fadeUp 0.6s 0.35s both; }
        .footer-route{ animation: fadeUp 0.6s 0.5s both; }
        .data-statistik { animation: fadeUp 0.6s 0.65s both; }
        .foto-kanan { animation: fadeUp 0.8s 0.3s both; }