/* ==============================
           CSS VARIABLES & RESET
        ============================== */
        :root {
            --ocean-deep:    #0077b6;
            --ocean-mid:     #0096c7;
            --ocean-light:   #00b4d8;
            --ocean-pale:    #90e0ef;
            --ocean-foam:    #caf0f8;
            --cream:         #faf9f7;
            --sand:          #f4ede4;
            --gold:          #c9a96e;
            --gold-light:    #e8c98d;
            --text-dark:     #1a2332;
            --text-mid:      #3d5166;
            --text-soft:     #7a92a8;
            --white:         #ffffff;

            --font-display: 'Cormorant Garamond', Georgia, serif;
            --font-body:    'DM Sans', sans-serif;

            --radius-card:  20px;
            --radius-lg:    32px;
            --shadow-soft:  0 8px 40px rgba(0,119,182,0.10);
            --shadow-card:  0 20px 60px rgba(0,119,182,0.14);
            --shadow-hover: 0 30px 80px rgba(0,119,182,0.22);
            --transition:   0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-body);
            color: var(--text-dark);
            background: var(--cream);
            overflow-x: hidden;
        }

        /* ==============================
           NAVBAR PLACEHOLDER (kept as-is)
        ============================== */
        .navbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            padding: 18px 0;
            background: transparent;
            transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
        }
        .navbar.scrolled {
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(16px);
            padding: 10px 0;
            box-shadow: 0 4px 30px rgba(0,119,182,0.10);
        }
        .navbar .logo-wrapper a {
            display: flex; align-items: center; gap: 12px;
            text-decoration: none;
        }
        .navbar .logo-img { height: 42px; }
        .navbar .logo h2 {
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--white);
            line-height: 1.2;
            transition: color var(--transition);
        }
        .navbar.scrolled .logo h2 { color: var(--text-dark); }
        .navbar-nav .nav-link {
            font-family: var(--font-body);
            font-size: 0.88rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.88) !important;
            padding: 8px 16px !important;
            transition: color var(--transition);
        }
        .navbar.scrolled .navbar-nav .nav-link { color: var(--text-mid) !important; }
        .navbar-nav .nav-link:hover { color: var(--ocean-light) !important; }
        .navbar-toggler {
            border: 1px solid rgba(255,255,255,0.5);
            color: white;
        }
        .navbar.scrolled .navbar-toggler { border-color: var(--ocean-mid); }
        .dropdown-menu {
            border: none;
            border-radius: 14px;
            box-shadow: var(--shadow-card);
            padding: 10px;
        }
        .dropdown-item {
            border-radius: 8px;
            font-size: 0.88rem;
            padding: 8px 16px;
        }
        .dropdown-item:hover { background: var(--ocean-foam); color: var(--ocean-deep); }

        /* ==============================
           HERO SECTION
        ============================== */
        #hero {
            position: relative;
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .hero-bg {
            position: absolute; inset: 0;
            background:
                url("{{ asset('img/tours/masilok_7.jpeg') }}") center/cover no-repeat;
            transform: scale(1.08);
            transition: transform 0.1s linear;
        }
        .hero-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(
                160deg,
                rgba(0,55,100,0.55) 0%,
                rgba(0,119,182,0.40) 40%,
                rgba(0,180,216,0.25) 70%,
                rgba(0,100,160,0.50) 100%
            );
        }
        /* Subtle animated shimmer at bottom */
        .hero-overlay::after {
            content: '';
            position: absolute; bottom: 0; left: 0; right: 0;
            height: 220px;
            background: linear-gradient(to top, rgba(0,40,80,0.45) 0%, transparent 100%);
        }
        .hero-content {
            position: relative; z-index: 2;
            text-align: center;
            padding: 0 20px;
        }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.30);
            backdrop-filter: blur(12px);
            color: rgba(255,255,255,0.90);
            font-size: 0.78rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 8px 22px;
            border-radius: 100px;
            margin-bottom: 28px;
        }
        .hero-badge i { color: var(--gold-light); font-size: 0.9rem; }
        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(3rem, 8vw, 6rem);
            font-weight: 300;
            color: var(--white);
            line-height: 1.08;
            letter-spacing: -0.01em;
            margin-bottom: 20px;
        }
        .hero-title em {
            font-style: italic;
            font-weight: 400;
            color: var(--gold-light);
        }
        .hero-subtitle {
            font-size: clamp(0.95rem, 2vw, 1.15rem);
            font-weight: 300;
            color: rgba(255,255,255,0.80);
            max-width: 520px;
            margin: 0 auto 42px;
            line-height: 1.7;
            letter-spacing: 0.01em;
        }
        .hero-cta-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

        .btn-ocean {
            background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
            color: var(--white);
            border: none;
            padding: 14px 36px;
            border-radius: 100px;
            font-size: 0.88rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: var(--transition);
            box-shadow: 0 8px 32px rgba(0,180,216,0.40);
        }
        .btn-ocean:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 48px rgba(0,180,216,0.55);
            color: var(--white);
        }
        .btn-ghost {
            background: rgba(255,255,255,0.12);
            color: var(--white);
            border: 1px solid rgba(255,255,255,0.45);
            backdrop-filter: blur(8px);
            padding: 14px 32px;
            border-radius: 100px;
            font-size: 0.88rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px;
            transition: var(--transition);
        }
        .btn-ghost:hover {
            background: rgba(255,255,255,0.22);
            color: var(--white);
            transform: translateY(-3px);
        }

        /* Scroll indicator */
        .hero-scroll {
            position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
            z-index: 2; text-align: center; color: rgba(255,255,255,0.60);
            font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
        }
        .scroll-line {
            width: 1px; height: 60px;
            background: linear-gradient(to bottom, rgba(255,255,255,0.0), rgba(255,255,255,0.60));
            margin: 0 auto 10px;
            animation: scrollLine 2s ease-in-out infinite;
        }
        @keyframes scrollLine {
            0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
            50%       { transform: scaleY(1);   opacity: 1;   }
        }

        /* ==============================
           WAVE DIVIDERS
        ============================== */
        .wave-divider {
            width: 100%; overflow: hidden; line-height: 0;
            margin-bottom: -2px;
        }
        .wave-divider svg { display: block; width: 100%; }
        .wave-divider.flip { transform: rotate(180deg); }

        /* ==============================
           SECTION SHARED
        ============================== */
        .section-eyebrow {
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ocean-mid);
            margin-bottom: 12px;
            display: flex; align-items: center; gap: 12px;
        }
        .section-eyebrow::before,
        .section-eyebrow::after {
            content: '';
            width: 32px; height: 1px;
            background: var(--ocean-light);
        }
        .section-title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 400;
            line-height: 1.15;
            color: var(--text-dark);
        }
        .section-title em {
            font-style: italic;
            font-weight: 300;
            color: var(--ocean-mid);
        }
        .section-lead {
            font-size: 1.02rem;
            font-weight: 300;
            color: var(--text-soft);
            line-height: 1.75;
            max-width: 560px;
            margin: 0 auto;
        }

        /* ==============================
           ROOMS SECTION
        ============================== */
        #rooms {
            padding: 100px 0 80px;
            background: var(--cream);
        }

        /* Room Card */
        .room-card {
            border: none;
            border-radius: var(--radius-card);
            overflow: hidden;
            background: var(--white);
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
            cursor: pointer;
            height: 100%;
        }
        .room-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }
        .room-card-img-wrap {
            position: relative;
            overflow: hidden;
            height: 260px;
        }
        .room-card-img-wrap img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .room-card:hover .room-card-img-wrap img { transform: scale(1.08); }
        .room-card-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(
                to top,
                rgba(0,60,100,0.70) 0%,
                rgba(0,119,182,0.10) 60%,
                transparent 100%
            );
            opacity: 0; transition: opacity 0.45s ease;
        }
        .room-card:hover .room-card-overlay { opacity: 1; }
        .room-card-badge {
            position: absolute; top: 16px; left: 16px;
            background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
            color: white;
            font-size: 0.70rem;
            letter-spacing: 0.10em;
            text-transform: uppercase;
            font-weight: 500;
            padding: 5px 14px;
            border-radius: 100px;
        }
        .room-card-body { padding: 26px 28px 28px; }
        .room-card-title {
            font-family: var(--font-display);
            font-size: 1.45rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 6px;
            line-height: 1.25;
        }
        .room-stars { color: var(--gold); font-size: 0.78rem; margin-bottom: 14px; }
        .room-amenities {
            display: flex; flex-wrap: wrap; gap: 8px;
            margin-bottom: 20px;
        }
        .amenity-pill {
            display: inline-flex; align-items: center; gap: 5px;
            background: var(--ocean-foam);
            color: var(--ocean-deep);
            font-size: 0.73rem;
            font-weight: 500;
            padding: 5px 12px;
            border-radius: 100px;
        }
        .amenity-pill i { font-size: 0.78rem; }
        .room-footer {
            display: flex; align-items: center; justify-content: space-between;
            padding-top: 20px;
            border-top: 1px solid rgba(0,119,182,0.08);
        }
        .room-price-label {
            font-size: 0.70rem;
            color: var(--text-soft);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 2px;
        }
        .room-price {
            font-family: var(--font-display);
            font-size: 1.55rem;
            font-weight: 600;
            color: var(--ocean-deep);
            line-height: 1;
        }
        .room-price span { font-size: 0.78rem; font-weight: 400; color: var(--text-soft); }
        .btn-view {
            background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
            color: white;
            border: none;
            padding: 10px 22px;
            border-radius: 100px;
            font-size: 0.80rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            transition: var(--transition);
            box-shadow: 0 4px 18px rgba(0,150,199,0.35);
            white-space: nowrap;
        }
        .btn-view:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(0,150,199,0.50);
            color: white;
        }

        /* ==============================
           EXPERIENCE SECTION
        ============================== */
        #experience {
            padding: 100px 0;
            background: linear-gradient(160deg, #e8f4fc 0%, #f0faff 40%, #e2f5f9 100%);
            position: relative;
        }
        .exp-card {
            text-align: center;
            padding: 44px 32px;
            background: rgba(255,255,255,0.70);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-card);
            border: 1px solid rgba(255,255,255,0.90);
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
            height: 100%;
        }
        .exp-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-card);
            background: rgba(255,255,255,0.90);
        }
        .exp-icon-wrap {
            width: 72px; height: 72px;
            background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light));
            border-radius: 22px;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 24px;
            font-size: 1.7rem;
            color: white;
            box-shadow: 0 8px 28px rgba(0,150,199,0.35);
            transition: var(--transition);
        }
        .exp-card:hover .exp-icon-wrap {
            transform: rotate(-5deg) scale(1.08);
            box-shadow: 0 12px 40px rgba(0,150,199,0.48);
        }
        .exp-title {
            font-family: var(--font-display);
            font-size: 1.30rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 10px;
        }
        .exp-text {
            font-size: 0.88rem;
            color: var(--text-soft);
            line-height: 1.70;
            font-weight: 300;
        }

        

        /* ==============================
           FOOTER STRIP (optional small)
        ============================== */
        .resort-footer {
            background: linear-gradient(135deg, var(--text-dark), #233447);
            color: rgba(255,255,255,0.65);
            text-align: center;
            padding: 28px 20px;
            font-size: 0.80rem;
            letter-spacing: 0.04em;
        }
        .resort-footer strong { color: var(--ocean-pale); }

        /* ==============================
           RESPONSIVE TWEAKS
        ============================== */
        @media (max-width: 768px) {
            .modal-body { padding: 24px; }
            .modal-carousel, .modal-carousel img { height: 240px; }
            .hero-title { font-size: 2.8rem; }
        }

        /* ==============================
           UTILITY
        ============================== */
        .text-ocean { color: var(--ocean-mid) !important; }
        .bg-ocean { background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-light)); }

          /* ============================================================
           MODAL – PREMIUM
        ============================================================ */
        .modal-premium .modal-dialog {
            max-width: 900px;
        }
        .modal-premium .modal-content {
            border: none;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 40px 100px rgba(2,62,107,.35);
        }
        .modal-premium .modal-body { padding: 0; }

        .modal-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        @media (max-width: 767px) {
            .modal-inner { grid-template-columns: 1fr; }
        }

        /* carousel side */
        .modal-carousel-side {
            position: relative;
            min-height: 480px;
            background: var(--ocean-deep);
        }
        .modal-carousel-side .carousel,
        .modal-carousel-side .carousel-inner,
        .modal-carousel-side .carousel-item { height: 100%; min-height: 480px; }
        .modal-carousel-side .carousel-item img {
            width: 100%; height: 100%;
            object-fit: cover;
            filter: brightness(.92);
        }
        .modal-carousel-side .carousel-control-prev,
        .modal-carousel-side .carousel-control-next {
            width: 40px; height: 40px;
            top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,.18);
            backdrop-filter: blur(6px);
            border-radius: 50%;
            opacity: 1;
        }
        .modal-carousel-side .carousel-control-prev { left: 12px; }
        .modal-carousel-side .carousel-control-next { right: 12px; }

        /* info side */
        .modal-info-side {
            padding: 44px 40px;
            overflow-y: auto;
            max-height: 540px;
            display: flex;
            flex-direction: column;
        }

        .modal-close-btn {
            position: absolute;
            top: 16px; right: 16px;
            width: 38px; height: 38px;
            border-radius: 50%;
            background: rgba(255,255,255,.20);
            backdrop-filter: blur(6px);
            border: none;
            color: var(--white);
            font-size: 1rem;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .3s;
        }
        .modal-close-btn:hover { background: rgba(255,255,255,.35); }

        .modal-room-label {
            font-size: .7rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--ocean-bright);
            font-weight: 500;
            margin-bottom: 8px;
        }
        .modal-room-name {
            font-family: var(--font-display);
            font-size: 2.1rem;
            font-weight: 500;
            color: var(--text-dark);
            line-height: 1.15;
            margin-bottom: 10px;
        }

        .star-row { color: var(--gold); font-size: 1rem; margin-bottom: 18px; }

        .modal-desc {
            font-size: .88rem;
            color: var(--text-mid);
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .modal-amenity-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 28px;
        }
        .modal-amenity-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .82rem;
            color: var(--text-mid);
        }
        .modal-amenity-item i {
            color: var(--ocean-mid);
            font-size: 1rem;
            flex-shrink: 0;
        }

        .modal-info-row {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 16px 0;
            border-top: 1px solid rgba(0,119,182,.10);
            border-bottom: 1px solid rgba(0,119,182,.10);
            margin-bottom: 28px;
        }
        .modal-info-item { text-align: center; flex: 1; }
        .modal-info-item span {
            display: block;
            font-size: .68rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--text-light);
            margin-bottom: 4px;
        }
        .modal-info-item strong {
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--text-dark);
        }

        .modal-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .modal-price-label { font-size: .78rem; color: var(--text-light); }
        .modal-price-value {
            font-family: var(--font-display);
            font-size: 1.9rem;
            font-weight: 600;
            color: var(--ocean-mid);
        }
        .modal-price-value small {
            font-size: .85rem;
            font-weight: 300;
            color: var(--text-light);
        }

        .btn-book {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 15px 24px;
            border-radius: 100px;
            background: linear-gradient(135deg, var(--ocean-deep), var(--ocean-mid));
            color: var(--white);
            font-size: .92rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: var(--transition);
            box-shadow: 0 6px 28px rgba(2,62,107,.35);
            letter-spacing: .4px;
        }
        .btn-book:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(2,62,107,.50);
            color: var(--white);
        }

        /* modal animation */
        .modal.fade .modal-dialog {
            transform: scale(.94) translateY(24px);
            transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s;
        }
        .modal.show .modal-dialog { transform: scale(1) translateY(0); }