/* =========================================================
   VISIT DUMAI - BERANDA
   Modern Melayu Pesisir
========================================================= */

.page-beranda {
    background: #f4f8f5;
    color: #17212b;
    font-family: "Nunito Sans", sans-serif;
}

.page-beranda h1,
.page-beranda h2,
.page-beranda h3,
.page-beranda h4 {
    font-family: "Poppins", sans-serif;
}


/* =========================================================
   HERO
========================================================= */

.vd-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(0, 55, 75, .94),
            rgba(0, 119, 182, .82)
        ),
        url("/images/2384ab08-a6b2-42fe-9217-dbcc34b17694.png")
        center/cover no-repeat;
}

.vd-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(255, 183, 3, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(255,255,255,.08),
            transparent 35%
        );
}

.vd-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    padding: 90px 0 110px;
    text-align: center;
}

.vd-hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    color: #ffb703;
}

.vd-hero-ornament span {
    width: 65px;
    height: 1px;
    background: rgba(255,255,255,.45);
}

.vd-hero-ornament i {
    font-size: 24px;
}

.vd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px;

    background: rgba(255,255,255,.10);
    backdrop-filter: blur(12px);

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.vd-eyebrow i {
    color: #ffb703;
}

.vd-hero-title {
    margin: 20px 0 18px;

    font-size: clamp(2.4rem, 6vw, 4.5rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.vd-hero-title span {
    display: block;

    background: linear-gradient(
        90deg,
        #ffd166,
        #ffb703,
        #ffe9a6
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vd-hero-description {
    max-width: 700px;
    margin: auto;

    color: rgba(255,255,255,.88);

    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================================
   SEARCH
========================================================= */

.vd-search {
    position: relative;

    display: flex;
    align-items: center;

    max-width: 680px;
    margin: 32px auto 22px;

    padding: 7px;

    background: rgba(255,255,255,.96);

    border: 1px solid rgba(255,255,255,.3);
    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

    transition: .3s ease;
}

.vd-search:focus-within {
    transform: translateY(-2px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.25);
}

.vd-search-icon {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #0077b6;
    font-size: 18px;
}

.vd-search input {
    flex: 1;

    height: 50px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #17212b;

    font-size: .95rem;
}

.vd-search input::placeholder {
    color: #8b98a5;
}

.vd-search button {
    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 12px;

    background: #f1f5f9;
    color: #64748b;

    cursor: pointer;

    transition: .2s ease;
}

.vd-search button:hover {
    background: #e2e8f0;
    color: #0077b6;
}


/* =========================================================
   QUICK INFO
========================================================= */

.vd-quick-info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.vd-info-pill {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 15px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;

    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);

    text-align: left;
}

.vd-info-pill > i {
    color: #ffb703;
}

.vd-info-pill small {
    display: block;
    color: rgba(255,255,255,.65);
    font-size: .68rem;
}

.vd-info-pill strong {
    display: block;
    font-size: .8rem;
}


/* =========================================================
   WAVE
========================================================= */

.vd-wave {
    position: absolute;
    bottom: -1px;
    left: 0;

    width: 100%;
    height: 90px;

    z-index: 3;
}

.vd-wave svg {
    width: 100%;
    height: 100%;
}

.vd-wave path {
    fill: #f4f8f5;
}


/* =========================================================
   STATISTIC
========================================================= */

.vd-stat-section {
    margin-top: -10px;
    position: relative;
    z-index: 5;
}

.vd-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.vd-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px;

    background: #fff;

    border: 1px solid #e7edf0;
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);

    transition: .3s ease;
}

.vd-stat-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10);
}

.vd-stat-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    font-size: 20px;
}

.vd-stat-icon.blue {
    background: #e0f2fe;
    color: #0284c7;
}

.vd-stat-icon.gold {
    background: #fef3c7;
    color: #d97706;
}

.vd-stat-icon.green {
    background: #dcfce7;
    color: #16a34a;
}

.vd-stat-icon.orange {
    background: #ffedd5;
    color: #ea580c;
}

.vd-stat-card strong {
    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 1.25rem;
}

.vd-stat-card span {
    display: block;

    color: #718096;

    font-size: .78rem;
}


/* =========================================================
   MAIN
========================================================= */

.vd-main-container {
    padding-top: 75px;
    padding-bottom: 70px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.vd-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 28px;
}

.vd-section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #0077b6;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.vd-section-heading h2 {
    margin: 8px 0 8px;

    font-size: 2rem;
    font-weight: 800;
}

.vd-section-heading p {
    max-width: 650px;

    margin: 0;

    color: #718096;
}

.vd-section-decoration {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #e0f2fe;

    color: #0077b6;

    font-size: 24px;
}


/* =========================================================
   FILTER
========================================================= */

.vd-filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px;

    margin-bottom: 18px;

    background: white;

    border: 1px solid #e5ebef;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0,0,0,.05);
}

.vd-filter-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.vd-filter-title {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #17212b;

    font-size: .85rem;
    font-weight: 800;
}

.vd-filter-title i {
    color: #0077b6;
}

.vd-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.vd-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 13px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #fff;

    color: #64748b;

    font-size: .78rem;
    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}

.vd-category:hover,
.vd-category.active {
    background: #0077b6;
    border-color: #0077b6;
    color: white;
}

.vd-open-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 14px;

    border: 1px solid #bbf7d0;
    border-radius: 10px;

    background: #f0fdf4;
    color: #15803d;

    font-size: .78rem;
    font-weight: 800;

    cursor: pointer;
}

.vd-open-filter.active {
    background: #16a34a;
    border-color: #16a34a;
    color: white;
}


/* =========================================================
   RESULT INFO
========================================================= */

.vd-result-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 35px;

    margin-bottom: 15px;

    color: #718096;

    font-size: .78rem;
}

.vd-result-info strong {
    color: #17212b;
}


/* =========================================================
   DESTINATION GRID
========================================================= */

.vd-destination-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   DESTINATION CARD
========================================================= */

.vd-destination-card {
    overflow: hidden;

    background: white;

    border: 1px solid #e7edf0;
    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.05);

    opacity: 0;
    transform: translateY(20px);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        opacity .5s ease;
}

.vd-destination-card.vd-card-visible {
    opacity: 1;
    transform: translateY(0);
}

.vd-destination-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.11);
}


/* IMAGE */

.vd-card-image {
    position: relative;

    height: 230px;

    overflow: hidden;

    background: #e2e8f0;
}

.vd-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.vd-destination-card:hover .vd-card-image img {
    transform: scale(1.06);
}

.vd-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            rgba(0,0,0,.35)
        );
}


/* CATEGORY */

.vd-card-category,
.vd-card-status {
    position: absolute;

    z-index: 2;

    top: 14px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    border-radius: 9px;

    font-size: .68rem;
    font-weight: 800;

    backdrop-filter: blur(8px);
}

.vd-card-category {
    left: 14px;

    background: rgba(255,255,255,.94);

    color: #0077b6;
}

.vd-card-status {
    right: 14px;
}

.vd-card-status.open {
    background: rgba(220,252,231,.95);
    color: #15803d;
}

.vd-card-status.closed {
    background: rgba(254,226,226,.95);
    color: #b91c1c;
}


/* CONTENT */

.vd-card-content {
    padding: 20px;
}

.vd-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.vd-card-title-row h3 {
    margin: 0;

    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35;
}

.vd-rating {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 4px;

    color: #d97706;

    font-size: .75rem;
    font-weight: 800;
}

.vd-rating i {
    font-size: .7rem;
}

.vd-card-description {
    margin: 10px 0 15px;

    color: #718096;

    font-size: .8rem;
    line-height: 1.65;
}

.vd-card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 13px 0;

    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
}

.vd-card-meta div {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    color: #64748b;

    font-size: .74rem;
}

.vd-card-meta i {
    width: 16px;

    margin-top: 2px;

    color: #0077b6;
}

.vd-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 15px;
}

.vd-map-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 13px;

    border-radius: 10px;

    background: #e0f2fe;
    color: #0369a1;

    text-decoration: none;

    font-size: .74rem;
    font-weight: 800;

    transition: .2s ease;
}

.vd-map-button:hover {
    background: #0077b6;
    color: white;
}

.vd-no-map {
    color: #94a3b8;

    font-size: .74rem;
}

.vd-explore-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #f8fafc;

    color: #0077b6;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.vd-empty-state {
    grid-column: 1 / -1;

    padding: 60px 20px;

    text-align: center;
}

.vd-empty-icon {
    width: 75px;
    height: 75px;

    margin: auto auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background: #e0f2fe;

    color: #0077b6;

    font-size: 28px;
}

.vd-empty-state h3 {
    font-size: 1.2rem;
}

.vd-empty-state p {
    color: #718096;
}

.vd-reset-button {
    border: 0;

    padding: 10px 15px;

    border-radius: 10px;

    background: #0077b6;
    color: white;

    font-weight: 700;
}


/* =========================================================
   TRIP CALCULATOR
========================================================= */

.vd-trip-card {
    position: relative;

    overflow: hidden;

    margin-top: 70px;

    padding: 38px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #004d66,
            #0077b6
        );

    color: white;

    box-shadow:
        0 20px 50px rgba(0,77,102,.2);
}

.vd-trip-decoration {
    position: absolute;

    right: -30px;
    top: -30px;

    width: 180px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.07);

    font-size: 80px;

    transform: rotate(-15deg);

    color: rgba(255,255,255,.15);
}

.vd-trip-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #ffcf55;

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.vd-trip-card h2 {
    margin: 10px 0;

    font-size: 1.8rem;
}

.vd-trip-card p {
    margin: 0;

    color: rgba(255,255,255,.7);

    line-height: 1.7;
}

.vd-trip-form {
    position: relative;
    z-index: 2;

    padding: 20px;

    border-radius: 18px;

    background: white;

    color: #17212b;

    box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

.vd-trip-form label {
    display: block;

    margin-bottom: 6px;

    color: #64748b;

    font-size: .75rem;
    font-weight: 800;
}

.vd-trip-form label i {
    margin-right: 5px;
    color: #0077b6;
}

.vd-trip-form select {
    min-height: 44px;

    border-color: #e2e8f0;

    border-radius: 10px;

    font-size: .8rem;
}

.vd-trip-button {
    width: 100%;

    padding: 11px;

    border: 0;
    border-radius: 10px;

    background: #0077b6;
    color: white;

    font-size: .8rem;
    font-weight: 800;

    cursor: pointer;

    transition: .2s ease;
}

.vd-trip-button:hover {
    background: #005f8f;
    transform: translateY(-1px);
}

.vd-trip-result {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 15px;
    padding: 13px;

    border-radius: 12px;

    background: #f1f5f9;
}

.vd-trip-result-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #e0f2fe;
    color: #0077b6;
}

.vd-trip-result small {
    display: block;
    color: #94a3b8;
    font-size: .65rem;
}

.vd-trip-result strong {
    display: block;
    font-size: .78rem;
}

.vd-trip-result-value {
    margin-left: auto;
    text-align: right;
}

.vd-trip-result-value strong {
    color: #0077b6;
}

.vd-trip-result-value span {
    color: #64748b;
    font-size: .7rem;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.vd-bottom-cta {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 60px;
    padding: 28px;

    border: 1px solid #e5ebef;
    border-radius: 20px;

    background: white;
}

.vd-cta-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #fff7df;

    color: #d97706;

    font-size: 22px;
}

.vd-bottom-cta span {
    color: #0077b6;

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.vd-bottom-cta h3 {
    margin: 4px 0;

    font-size: 1.2rem;
}

.vd-bottom-cta p {
    margin: 0;

    color: #718096;

    font-size: .8rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .vd-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vd-destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vd-filter-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .vd-open-filter {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 767px) {

    .vd-hero {
        min-height: 650px;
    }

    .vd-hero-content {
        padding: 70px 15px 100px;
    }

    .vd-hero-title {
        font-size: 2.35rem;
    }

    .vd-hero-description {
        font-size: .9rem;
    }

    .vd-quick-info {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vd-info-pill {
        justify-content: center;
    }

    .vd-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .vd-section-heading {
        align-items: flex-start;
    }

    .vd-section-decoration {
        display: none;
    }

    .vd-section-heading h2 {
        font-size: 1.55rem;
    }

    .vd-destination-grid {
        grid-template-columns: 1fr;
    }

    .vd-trip-card {
        padding: 25px 18px;
    }

    .vd-trip-card h2 {
        font-size: 1.45rem;
    }

    .vd-bottom-cta {
        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .vd-stat-grid {
        grid-template-columns: 1fr;
    }

    .vd-search {
        border-radius: 14px;
    }

    .vd-card-image {
        height: 215px;
    }

    .vd-main-container {
        padding-top: 50px;
    }

}

/* ==========================================================
   4. PAGE: KULINER (.page-kuliner)
   ========================================================== */

.page-kuliner{
    --primary:#0F766E;
    --secondary:#F59E0B;
    --danger:#EF4444;
    --success:#16A34A;
    --light:#F8FAFC;
    --dark:#1F2937;
    --gray:#6B7280;
    --shadow:0 12px 30px rgba(0,0,0,.08);
    --radius:18px;

    background:#f5f7fa;
    color:#333;
}

.page-kuliner .hero-page{
    position:relative;
    background:linear-gradient(rgba(15,118,110,.65),rgba(15,118,110,.65)),
    url("../images/kuliner-bg.jpg") center/cover no-repeat;
    padding:120px 20px;
    color:#fff;
    text-align:center;
}
.page-kuliner .hero-page h1{ font-size:48px; font-weight:700; margin-bottom:20px; }
.page-kuliner .hero-page p{ max-width:700px; margin:auto; font-size:18px; opacity:.95; }
.page-kuliner .hero-eyebrow{
    display:inline-block; padding:8px 20px; background:rgba(255,255,255,.18);
    border-radius:50px; margin-bottom:20px; backdrop-filter:blur(10px);
}

.page-kuliner .search-box{ max-width:600px; margin:40px auto 0; }
.page-kuliner .search-box input{
    width:100%; padding:16px 22px; border:none; border-radius:50px;
    font-size:16px; box-shadow:var(--shadow);
}
.page-kuliner .search-box input:focus{ outline:none; }

.page-kuliner .section-title{ text-align:center; margin-bottom:50px; }
.page-kuliner .section-title h2{ font-size:36px; color:var(--primary); margin-bottom:10px; }
.page-kuliner .section-title p{ color:var(--gray); }

.page-kuliner .filter-menu{
    display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:40px 0;
}
.page-kuliner .filter-btn{
    border:none; padding:12px 24px; border-radius:30px; background:#fff;
    cursor:pointer; transition:.3s; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.page-kuliner .filter-btn:hover, .page-kuliner .filter-btn.active{ background:var(--primary); color:#fff; }

.page-kuliner .card-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:30px;
}

.page-kuliner .food-card{
    background:#fff; border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); transition:.35s;
    opacity:0; transform:translateY(40px);
}
.page-kuliner .food-card.in-view{ opacity:1; transform:translateY(0); }
.page-kuliner .food-card:hover{ transform:translateY(-10px); }

.page-kuliner .food-image{ position:relative; height:240px; overflow:hidden; }
.page-kuliner .food-image img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.page-kuliner .food-card:hover img{ transform:scale(1.08); }

.page-kuliner .badge{
    position:absolute; top:15px; left:15px;
    background:var(--secondary); color:#fff;
    padding:8px 14px; border-radius:30px; font-size:13px; font-weight:600;
}

.page-kuliner .food-body{ padding:24px; }
.page-kuliner .food-body h3{ color:var(--primary); margin-bottom:10px; }
.page-kuliner .food-body p{ color:#666; margin-bottom:18px; }

.page-kuliner .food-info{ list-style:none; margin-bottom:20px; }
.page-kuliner .food-info li{ margin-bottom:8px; color:#555; font-size:15px; }

.page-kuliner .rating{ color:#fbbf24; font-size:18px; margin-bottom:15px; }

.page-kuliner .price{
    display:inline-block; background:#E8F5E9; color:var(--success);
    padding:8px 16px; border-radius:30px; font-weight:700; margin-bottom:18px;
}

.page-kuliner .btn-primary{
    display:inline-block; width:100%; text-align:center; padding:13px;
    background:var(--primary); color:#fff; border-radius:12px;
    text-decoration:none; transition:.3s; font-weight:600;
}
.page-kuliner .btn-primary:hover{ background:#0a5f58; color:#fff; }

.page-kuliner .btn-secondary{
    display:inline-block; width:100%; text-align:center; padding:13px; margin-top:10px;
    background:#f1f5f9; color:#333; border-radius:12px; text-decoration:none; transition:.3s;
}
.page-kuliner .btn-secondary:hover{ background:var(--secondary); color:#fff; }

.page-kuliner .empty-state{ text-align:center; padding:80px 20px; color:#888; }
.page-kuliner .empty-state i{ font-size:60px; color:var(--primary); margin-bottom:20px; }

.page-kuliner .cta-box{
    background:linear-gradient(135deg,var(--primary),#14b8a6);
    padding:70px; border-radius:25px; color:#fff; text-align:center; margin-top:80px;
}
.page-kuliner .cta-box h2{ margin-bottom:15px; }
.page-kuliner .cta-box p{ max-width:700px; margin:auto auto 30px; }

/* Kartu destinasi terkait (dipakai di halaman kuliner) */
.page-kuliner .destination-card{
    background:#fff; border-radius:18px; overflow:hidden; transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.08); height:100%;
}
.page-kuliner .destination-card:hover{ transform:translateY(-8px); }
.page-kuliner .destination-card .img-box{ height:230px; overflow:hidden; }
.page-kuliner .destination-card .img-box img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.page-kuliner .destination-card:hover img{ transform:scale(1.08); }
.page-kuliner .destination-card .body-box{ padding:25px; }
.page-kuliner .destination-card h4{ color:#0B4F6C; font-weight:700; margin-bottom:15px; }
.page-kuliner .destination-card p{ color:#666; line-height:1.8; }

@media(max-width:992px){
    .page-kuliner .hero-page h1{ font-size:38px; }
    .page-kuliner .section-title h2{ font-size:30px; }
}
@media(max-width:768px){
    .page-kuliner .hero-page{ padding:90px 20px; }
    .page-kuliner .hero-page h1{ font-size:30px; }
    .page-kuliner .hero-page p{ font-size:15px; }
    .page-kuliner .card-grid{ grid-template-columns:1fr; }
    .page-kuliner .search-box{ width:100%; }
    .page-kuliner .filter-menu{ gap:10px; }
    .page-kuliner .filter-btn{ width:100%; }
    .page-kuliner .cta-box{ padding:40px 25px; }
}


/* ==========================================================
   5. PAGE: KONTAK (.page-kontak)
   ========================================================== */


.page-kontak{
    --ocean-deep:        #052E3E;
    --ocean:             #0B4F6C;
    --sea-teal:          #148B9C;
    --sea-teal-light:    #EAF4FA;
    --sand-gold:         #E3A23B;
    --sand-gold-hover:   #C9860F;
    --foam:              #F3F9FA;
    --ink:               #12313C;
    --ink-soft:          #5C7681;
    --card-border:       #EEF4F6;
    --font-display:      'Poppins', system-ui, -apple-system, sans-serif;
    --font-body:         'Nunito Sans', system-ui, -apple-system, sans-serif;

    font-family: var(--font-body);
    color: var(--ink);
    background-color: #fafcfd;
    line-height: 1.6;
}

.page-kontak .contact-hero{
    background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean) 50%, var(--sea-teal) 100%);
    color: #ffffff; padding: 70px 0 90px;
    border-radius: 0 0 32px 32px;
    position: relative; overflow: hidden;
    box-shadow: 0 10px 30px rgba(5, 46, 62, 0.15);
}
.page-kontak .contact-hero::before,
.page-kontak .contact-hero::after{
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, 0.04); pointer-events: none;
}
.page-kontak .contact-hero::before{ top: -60px; left: -60px; width: 220px; height: 220px; }
.page-kontak .contact-hero::after{ bottom: -80px; right: -80px; width: 300px; height: 300px; }
.page-kontak .contact-hero h1{ font-family: var(--font-display); letter-spacing: -0.5px; }

.page-kontak .contact-info-card{
    background: #ffffff; border-radius: 20px; padding: 28px 24px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 25px rgba(5, 46, 62, 0.04);
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page-kontak .contact-info-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 35px rgba(5, 46, 62, 0.09); }
.page-kontak .contact-icon-box{
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, var(--ocean-deep), var(--sea-teal));
    color: #ffffff; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(20, 139, 156, 0.25);
}

.page-kontak .form-card{
    background: #ffffff; border-radius: 24px; padding: 38px 32px;
    border: 1px solid var(--card-border);
    box-shadow: 0 12px 35px rgba(5, 46, 62, 0.05);
}
.page-kontak .form-card h3{ font-family: var(--font-display); color: var(--ocean-deep); }
.page-kontak .form-card .form-control,
.page-kontak .form-card .form-select{
    border-radius: 12px; padding: 12px 18px; border: 1.5px solid #e2eaf0;
    font-size: 0.95rem; color: var(--ink); background-color: #fafcfd; transition: all 0.25s ease;
}
.page-kontak .form-card .form-control:focus,
.page-kontak .form-card .form-select:focus{
    background-color: #ffffff; border-color: var(--sea-teal);
    box-shadow: 0 0 0 4px rgba(20, 139, 156, 0.12);
}

.page-kontak .btn-submit-modern{
    background: linear-gradient(135deg, var(--ocean) 0%, var(--sea-teal) 100%);
    color: #ffffff; padding: 14px 28px; border-radius: 14px;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem; border: none;
    transition: all 0.3s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 20px rgba(11, 79, 108, 0.25);
}
.page-kontak .btn-submit-modern:hover{ color: #ffffff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 139, 156, 0.35); }
.page-kontak .btn-submit-modern:active{ transform: translateY(0); }

/* Widget radio streaming */
.page-kontak .radio-widget-card{
    background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean) 100%);
    border-radius: 22px; padding: 28px 24px; color: #ffffff;
    box-shadow: 0 16px 40px rgba(5, 46, 62, 0.22);
    position: relative; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.page-kontak .radio-widget-card::before{
    content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(227, 162, 59, 0.25) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.page-kontak .radio-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-kontak .radio-badge-live{
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(220, 53, 69, 0.2); border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b6b; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px;
}
.page-kontak .radio-badge-live .live-dot{
    width: 8px; height: 8px; background-color: #ff4d4d; border-radius: 50%; animation: livePulse 1.2s infinite;
}
@keyframes livePulse{
    0%{ transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); }
    70%{ transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); }
    100%{ transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
.page-kontak .radio-body-controls{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-kontak .radio-play-btn{
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, var(--sand-gold) 0%, #f4bc65 100%);
    color: var(--ocean-deep); border: none;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer;
    box-shadow: 0 8px 22px rgba(227, 162, 59, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0;
}
.page-kontak .radio-play-btn:hover{ transform: scale(1.08); box-shadow: 0 10px 28px rgba(227, 162, 59, 0.55); }
.page-kontak .radio-play-btn:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }
.page-kontak .radio-info{ flex: 1; min-width: 180px; }
.page-kontak .radio-info h6{ font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; color: #ffffff; line-height: 1.3; }
.page-kontak .radio-info p{ font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); margin: 0; }

.page-kontak .equalizer-bars{ display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.page-kontak .equalizer-bars .bar{ width: 3px; background-color: var(--sand-gold); border-radius: 3px; height: 4px; transition: height 0.2s ease; }
.page-kontak .equalizer-bars.playing .bar{ animation: eqAnim 1s ease-in-out infinite alternate; }
.page-kontak .equalizer-bars.playing .bar:nth-child(1){ animation-delay: 0.1s; }
.page-kontak .equalizer-bars.playing .bar:nth-child(2){ animation-delay: 0.4s; }
.page-kontak .equalizer-bars.playing .bar:nth-child(3){ animation-delay: 0.2s; }
.page-kontak .equalizer-bars.playing .bar:nth-child(4){ animation-delay: 0.5s; }
@keyframes eqAnim{ 0%{ height: 4px; } 100%{ height: 22px; } }

.page-kontak .radio-extra-controls{
    display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.page-kontak .radio-search-box input{
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff; border-radius: 12px; padding: 8px 14px; font-size: 0.85rem; width: 100%;
    outline: none; transition: all 0.2s ease;
}
.page-kontak .radio-search-box input::placeholder{ color: rgba(255, 255, 255, 0.55); }
.page-kontak .radio-search-box input:focus{ border-color: var(--sand-gold); background: rgba(255, 255, 255, 0.15); }

.page-kontak .station-select{
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff; border-radius: 12px; padding: 8px 12px; font-size: 0.85rem;
    outline: none; width: 100%; cursor: pointer; transition: border-color 0.2s ease;
}
.page-kontak .station-select:focus{ border-color: var(--sand-gold); }
.page-kontak .station-select option, .page-kontak .station-select optgroup{
    background-color: var(--ocean-deep); color: #ffffff; padding: 6px;
}

.page-kontak .volume-container{ display: flex; align-items: center; gap: 8px; }
.page-kontak .volume-slider{ width: 85px; height: 4px; accent-color: var(--sand-gold); cursor: pointer; }

.page-kontak .map-container{
    border-radius: 22px; overflow: hidden; box-shadow: 0 12px 32px rgba(5, 46, 62, 0.08); border: 1px solid var(--card-border);
}
.page-kontak .accordion-button:not(.collapsed){ color: var(--sea-teal); background-color: var(--sea-teal-light); }
.page-kontak .accordion-button:focus{ box-shadow: none; border-color: rgba(20, 139, 156, 0.25); }

@media (max-width: 768px){
    .page-kontak .contact-hero{ padding: 45px 0 65px; }
    .page-kontak .form-card{ padding: 26px 20px; }
    .page-kontak .radio-widget-card{ padding: 22px 18px; }
    .page-kontak .radio-play-btn{ width: 50px; height: 50px; font-size: 1.35rem; }
}


/* ==========================================================
   6. PAGE (ADMIN): ATRAKSI — INDEX / DAFTAR (.page-atraksi-index)
   ========================================================== */

.page-atraksi-index .atraksi-hero{
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 1rem; color: #fff; padding: 2.25rem 2rem;
    position: relative; overflow: hidden;
}
.page-atraksi-index .atraksi-hero::before{
    content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
    background: rgba(255, 255, 255, .08); border-radius: 50%;
}
.page-atraksi-index .atraksi-hero::after{
    content: ""; position: absolute; bottom: -60px; right: 60px; width: 120px; height: 120px;
    background: rgba(255, 255, 255, .06); border-radius: 50%;
}
.page-atraksi-index .atraksi-hero .hero-stat{ background: rgba(255, 255, 255, .12); border-radius: .75rem; padding: .6rem 1rem; }

.page-atraksi-index .toolbar-card{ border: none; border-radius: 1rem; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .05); }

.page-atraksi-index .atraksi-card{
    border: none; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 .35rem 1.25rem rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease; height: 100%;
}
.page-atraksi-index .atraksi-card:hover{ transform: translateY(-4px); box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .1); }
.page-atraksi-index .atraksi-card .card-img-wrap{ position: relative; height: 180px; background: #f1f3f5; overflow: hidden; }
.page-atraksi-index .atraksi-card .card-img-wrap img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.page-atraksi-index .atraksi-card:hover .card-img-wrap img{ transform: scale(1.06); }
.page-atraksi-index .atraksi-card .card-img-placeholder{
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ced4da; font-size: 2rem;
}
.page-atraksi-index .atraksi-card .kategori-badge{
    position: absolute; top: .75rem; left: .75rem; padding: .3rem .7rem; border-radius: 2rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #fff;
    box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .15);
}
.page-atraksi-index .badge-budaya{ background: #d97706; }
.page-atraksi-index .badge-alam{ background: #198754; }
.page-atraksi-index .badge-kuliner{ background: #dc3545; }

.page-atraksi-index .atraksi-card .card-price{ font-weight: 700; color: #0d6efd; font-size: 1.05rem; }
.page-atraksi-index .atraksi-card .card-desc{
    color: #6c757d; font-size: .87rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.page-atraksi-index .btn-icon-sm{ border-radius: .5rem; padding: .35rem .6rem; font-size: .85rem; }

.page-atraksi-index .empty-state{ border: 2px dashed #dee2e6; border-radius: 1rem; padding: 3rem 1.5rem; text-align: center; color: #6c757d; }

.page-atraksi-index .guide-card{ border: none; border-radius: 1rem; background: #f8f9fc; }
.page-atraksi-index .guide-step{ display: flex; gap: .85rem; align-items: flex-start; padding: .55rem 0; }
.page-atraksi-index .guide-step-number{
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #0d6efd; color: #fff; font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}


/* ==========================================================
   7. PAGE (ADMIN): ATRAKSI — CREATE / TAMBAH (.page-atraksi-create)
   Sudah dibungkus wrapper ".atraksi-scope" oleh developer,
   jadi CSS-nya sudah aman dari bentrok — dibiarkan apa adanya.
   ========================================================== */

.atraksi-scope{
    --a-ink: #101828;
    --a-ink-soft: #667085;
    --a-ink-faint: #98A2B3;
    --a-bg: #F5F7FA;
    --a-card: #FFFFFF;
    --a-card-muted: #FAFBFC;
    --a-border: #E4E7EC;
    --a-accent: #1F7A5C;
    --a-accent-dark: #175C46;
    --a-accent-soft: #E7F4EF;
    --a-danger: #D92D20;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--a-ink);
}
.atraksi-scope h1, .atraksi-scope h2, .atraksi-scope h3, .atraksi-scope .font-display{ font-family: 'Manrope', 'Inter', sans-serif; }
.atraksi-scope .font-mono{ font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.atraksi-scope .form-atraksi-wrapper{ background: var(--a-bg); min-height: calc(100vh - 100px); padding: 2.75rem 0 4rem; }

.atraksi-scope .breadcrumb-wrapper .breadcrumb{ background: transparent; padding: 0; margin-bottom: 1.5rem; font-size: 0.85rem; }
.atraksi-scope .breadcrumb-wrapper a{ color: var(--a-ink-soft); font-weight: 500; text-decoration: none; }
.atraksi-scope .breadcrumb-wrapper a:hover{ color: var(--a-accent); }
.atraksi-scope .breadcrumb-wrapper .breadcrumb-item.active{ color: var(--a-ink); font-weight: 600; }
.atraksi-scope .breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before{ color: var(--a-ink-faint); }

.atraksi-scope .page-header{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
.atraksi-scope .page-header .badge-new{
    display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.6rem;
    padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--a-accent-soft);
    color: var(--a-accent-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.atraksi-scope .page-header h1{ margin-bottom: 0.35rem; color: var(--a-ink); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; }
.atraksi-scope .page-header p{ max-width: 46ch; margin-bottom: 0; color: var(--a-ink-soft); font-size: 0.95rem; }

.atraksi-scope .atraksi-grid{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; gap: 1.75rem; }

.atraksi-scope .form-atraksi-card{
    overflow: hidden; padding: 0; background: var(--a-card); border: 1px solid var(--a-border);
    border-radius: 0.85rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.atraksi-scope .form-section{ position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 1.1rem; padding: 1.75rem 1.9rem; }
.atraksi-scope .form-section:not(:last-child){ border-bottom: 1px solid var(--a-border); }
.atraksi-scope .form-section .section-marker{ display: flex; flex-direction: column; align-items: center; }
.atraksi-scope .form-section .section-num{
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background: var(--a-accent-soft);
    color: var(--a-accent-dark); font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 700;
}
.atraksi-scope .form-section .section-line{ flex: 1; width: 1.5px; margin-top: 0.4rem; background: var(--a-border); }
.atraksi-scope .section-body h2{ margin-bottom: 0.2rem; color: var(--a-ink); font-size: 1rem; font-weight: 700; }
.atraksi-scope .section-body .section-desc{ margin-bottom: 1.2rem; color: var(--a-ink-soft); font-size: 0.83rem; }

.atraksi-scope .field-block{ margin-bottom: 1.15rem; }
.atraksi-scope .field-block:last-child{ margin-bottom: 0; }
.atraksi-scope .form-label{ display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; color: var(--a-ink); font-size: 0.87rem; font-weight: 600; }
.atraksi-scope .form-label .req{ color: var(--a-danger); }

.atraksi-scope .form-control,
.atraksi-scope .form-select{
    padding: 0.62rem 0.85rem; background: var(--a-card); border: 1.5px solid var(--a-border);
    border-radius: 0.55rem; color: var(--a-ink); font-family: 'Inter', sans-serif; font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.atraksi-scope .form-control:focus,
.atraksi-scope .form-select:focus{ border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(31, 122, 92, 0.13); outline: none; }
.atraksi-scope .form-control::placeholder{ color: var(--a-ink-faint); }

.atraksi-scope .input-group-text{
    background-color: var(--a-card-muted); border: 1.5px solid var(--a-border); border-right: none;
    border-radius: 0.55rem 0 0 0.55rem; color: var(--a-ink-soft); font-family: 'IBM Plex Mono', monospace; font-size: 0.88rem; font-weight: 600;
}
.atraksi-scope .input-group .form-control{ border-radius: 0 0.55rem 0.55rem 0; }
.atraksi-scope .form-text{ margin-top: 0.3rem; color: var(--a-ink-faint); font-size: 0.78rem; }
.atraksi-scope .invalid-feedback{ font-size: 0.78rem; }

.atraksi-scope .kategori-segmented{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.atraksi-scope .seg-option{ position: relative; cursor: pointer; }
.atraksi-scope .seg-option input{ position: absolute; opacity: 0; pointer-events: none; }
.atraksi-scope .seg-face{
    display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.5rem;
    background: var(--a-card); border: 1.5px solid var(--a-border); border-radius: 0.55rem;
    color: var(--a-ink-soft); font-size: 0.85rem; font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.atraksi-scope .seg-face i{ font-size: 0.95rem; }
.atraksi-scope .seg-option:hover .seg-face{ border-color: var(--a-accent); color: var(--a-accent-dark); }
.atraksi-scope .seg-option input:focus-visible + .seg-face{ outline: 3px solid var(--a-accent); outline-offset: 2px; }
.atraksi-scope .seg-option input:checked + .seg-face{ background: var(--a-accent-soft); border-color: var(--a-accent); color: var(--a-accent-dark); }

.atraksi-scope .form-actions{ display: flex; gap: 0.65rem; padding: 1.4rem 1.9rem; background: var(--a-card-muted); border-top: 1px solid var(--a-border); }
.atraksi-scope .btn-simpan{
    padding: 0.65rem 1.5rem; background: var(--a-accent); border: none; border-radius: 0.55rem;
    color: #fff; font-size: 0.9rem; font-weight: 700;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.atraksi-scope .btn-simpan:hover{ background: var(--a-accent-dark); box-shadow: 0 4px 12px rgba(31, 122, 92, 0.28); color: #fff; }
.atraksi-scope .btn-simpan:active{ transform: scale(0.98); }
.atraksi-scope .btn-batal{
    padding: 0.65rem 1.4rem; background: transparent; border: 1.5px solid var(--a-border);
    border-radius: 0.55rem; color: var(--a-ink-soft); font-size: 0.9rem; font-weight: 600;
}
.atraksi-scope .btn-batal:hover{ background: var(--a-card-muted); border-color: var(--a-ink-faint); color: var(--a-ink); }

.atraksi-scope .side-col{ position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.atraksi-scope .side-card{ padding: 1.35rem 1.4rem; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 0.85rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.atraksi-scope .side-card h3{ margin-bottom: 0.2rem; color: var(--a-ink); font-size: 0.88rem; font-weight: 700; }
.atraksi-scope .progress-summary{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.8rem; }
.atraksi-scope .progress-summary .count{ color: var(--a-accent-dark); font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 700; }
.atraksi-scope .progress-track{ height: 6px; margin-bottom: 1.1rem; overflow: hidden; background: var(--a-border); border-radius: 999px; }
.atraksi-scope .progress-fill{ width: 0%; height: 100%; background: var(--a-accent); border-radius: 999px; transition: width 0.25s ease; }

.atraksi-scope .checklist{ display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.atraksi-scope .checklist li{ display: flex; align-items: center; gap: 0.55rem; color: var(--a-ink-soft); font-size: 0.85rem; }
.atraksi-scope .checklist li.is-done{ color: var(--a-ink); }
.atraksi-scope .checklist .check-dot{
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 18px; height: 18px;
    border: 1.5px solid var(--a-border); border-radius: 50%; transition: background 0.15s ease, border-color 0.15s ease;
}
.atraksi-scope .checklist .check-dot i{ color: #fff; font-size: 0.65rem; opacity: 0; transition: opacity 0.15s ease; }
.atraksi-scope .checklist li.is-done .check-dot{ background: var(--a-accent); border-color: var(--a-accent); }
.atraksi-scope .checklist li.is-done .check-dot i{ opacity: 1; }

.atraksi-scope .guide-card .guide-intro{ margin: 0.15rem 0 1rem; color: var(--a-ink-soft); font-size: 0.82rem; line-height: 1.5; }
.atraksi-scope .guide-list{ display: flex; flex-direction: column; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.atraksi-scope .guide-list li{ display: grid; grid-template-columns: 30px 1fr; gap: 0.65rem; }
.atraksi-scope .guide-list .guide-icon{
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px;
    background: var(--a-accent-soft); border-radius: 0.5rem; color: var(--a-accent-dark); font-size: 0.85rem;
}
.atraksi-scope .guide-list .guide-text strong{ display: block; margin-bottom: 0.1rem; color: var(--a-ink); font-size: 0.84rem; font-weight: 700; }
.atraksi-scope .guide-list .guide-text span{ color: var(--a-ink-soft); font-size: 0.8rem; line-height: 1.45; }

@media (max-width: 991px){
    .atraksi-scope .atraksi-grid{ grid-template-columns: 1fr; }
    .atraksi-scope .side-col{ position: static; }
}
@media (max-width: 420px){
    .atraksi-scope .kategori-segmented{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
    .atraksi-scope .progress-fill, .atraksi-scope .btn-simpan, .atraksi-scope .seg-face, .atraksi-scope .checklist .check-dot{ transition: none !important; }
}
.atraksi-scope :focus-visible{ outline: 3px solid var(--a-accent); outline-offset: 2px; }


/* ==========================================================
   8. PAGE (ADMIN): ATRAKSI — EDIT (.page-atraksi-edit)
   ========================================================== */

.page-atraksi-edit .edit-hero{
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 1rem; color: #fff; padding: 2.25rem 2rem;
    position: relative; overflow: hidden;
}
.page-atraksi-edit .edit-hero::before{
    content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
    background: rgba(255, 255, 255, .08); border-radius: 50%;
}
.page-atraksi-edit .edit-hero::after{
    content: ""; position: absolute; bottom: -60px; right: 60px; width: 120px; height: 120px;
    background: rgba(255, 255, 255, .06); border-radius: 50%;
}

.page-atraksi-edit .form-card{ border: none; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .06); }
.page-atraksi-edit .form-section-title{
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; margin-bottom: 1rem;
}
.page-atraksi-edit .form-floating > label{ color: #6c757d; }
.page-atraksi-edit .form-control:focus,
.page-atraksi-edit .form-select:focus{ border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); }

.page-atraksi-edit .preview-box{
    border: 2px dashed #dee2e6; border-radius: .75rem; min-height: 160px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #f8f9fa; color: #adb5bd; font-size: .9rem; text-align: center; padding: .5rem;
}
.page-atraksi-edit .preview-box img{ width: 100%; height: 100%; object-fit: cover; }

.page-atraksi-edit .kategori-badge{
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 2rem; font-size: .78rem; font-weight: 600;
}

.page-atraksi-edit .btn-save{ border-radius: .6rem; padding: .6rem 1.6rem; font-weight: 600; }

.page-atraksi-edit .guide-card{ border: none; border-radius: 1rem; background: #f8f9fc; }
.page-atraksi-edit .guide-step{ display: flex; gap: .85rem; align-items: flex-start; padding: .6rem 0; }
.page-atraksi-edit .guide-step-number{
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #0d6efd; color: #fff; font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.page-atraksi-edit .sticky-actions{
    position: sticky; bottom: 0; background: #fff; padding-top: 1rem; margin-top: .5rem; border-top: 1px solid #eee;
}


/* ==========================================================
   9. PAGE (ADMIN): DAFTAR USER (.page-user-list)
   ========================================================== */

.page-user-list{
    --paper:        #F5F6FB;
    --surface:      #FFFFFF;
    --line:         #E5E8F0;
    --ink:          #1B2233;
    --ink-soft:     #6B7280;
    --ink-faint:    #A0A6B4;
    --indigo:       #4A55D6;
    --indigo-deep:  #3641B0;
    --indigo-tint:  #EEF0FD;
    --teal:         #1F9E90;
    --teal-tint:    #E7F7F4;
    --amber:        #C8892A;
    --amber-tint:   #FBF1DF;
    --coral:        #E14F3B;
    --coral-deep:   #B93A28;
    --coral-tint:   #FDECE9;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 10px 30px rgba(27, 34, 51, .06), 0 1px 2px rgba(27,34,51,.04);
    --shadow-pop:  0 24px 60px rgba(27, 34, 51, .22);
}

.page-user-list .user-page{ font-family: var(--font-body); color: var(--ink); max-width: 1100px; }
.page-user-list .user-page *{ box-sizing: border-box; }

.page-user-list .user-page .breadcrumb{ background: transparent; padding: 0; margin-bottom: 22px; font-family: var(--font-body); font-size: .86rem; }
.page-user-list .user-page .breadcrumb-item a{ color: var(--ink-soft); text-decoration: none; font-weight: 500; transition: color .15s ease; }
.page-user-list .user-page .breadcrumb-item a:hover{ color: var(--indigo); }
.page-user-list .user-page .breadcrumb-item.active{ color: var(--ink); font-weight: 600; }
.page-user-list .user-page .breadcrumb-item + .breadcrumb-item::before{
    content: "→"; color: var(--ink-faint); padding-right: .5rem; font-size: .78rem;
}

.page-user-list .user-page-header{ align-items: flex-end !important; margin-bottom: 28px !important; gap: 16px; flex-wrap: wrap; }
.page-user-list .user-page-header .heading-block .eyebrow{
    display: block; font-family: var(--font-body); font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; font-size: .72rem; color: var(--indigo); margin-bottom: 6px;
}
.page-user-list .user-page-header h2{ font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--ink); margin: 0 0 4px; }
.page-user-list .user-page-header .subcount{ color: var(--ink-soft); font-size: .92rem; margin: 0; }
.page-user-list .user-page-header .subcount strong{ color: var(--ink); font-weight: 700; }

.page-user-list .btn-add-user{
    display: inline-flex; align-items: center; gap: 8px; background: var(--indigo); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem; padding: 12px 22px;
    border-radius: 999px; text-decoration: none; box-shadow: 0 8px 20px rgba(74,85,214,.28);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap;
}
.page-user-list .btn-add-user i{ font-size: .95rem; }
.page-user-list .btn-add-user:hover{
    background: var(--indigo-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(74,85,214,.36);
}

.page-user-list .user-table-wrap{ background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.page-user-list .user-table{ margin: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
.page-user-list .user-table thead th{
    background: var(--paper); color: var(--ink-soft); font-family: var(--font-body); font-weight: 700;
    font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; padding: 16px 22px;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.page-user-list .user-table tbody td{ padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: .94rem; color: var(--ink); vertical-align: middle; }
.page-user-list .user-table tbody tr{ transition: background .15s ease; }
.page-user-list .user-table tbody tr:hover{ background: #FAFAFD; }
.page-user-list .user-table tbody tr:last-child td{ border-bottom: none; }

.page-user-list .user-identity{ display: flex; align-items: center; gap: 12px; }
.page-user-list .user-avatar{
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .88rem; flex-shrink: 0;
}
.page-user-list .user-identity .user-name{ font-weight: 600; color: var(--ink); font-size: .95rem; }
.page-user-list .user-email{ font-family: var(--font-mono); font-size: .84rem; color: var(--ink-soft); }

.page-user-list .role-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .2px; }
.page-user-list .role-badge i{ font-size: .74rem; }
.page-user-list .role-badge.role-admin{ background: var(--amber-tint); color: var(--amber); }
.page-user-list .role-badge.role-user{ background: var(--teal-tint); color: var(--teal); }

.page-user-list .action-cell{ display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.page-user-list .btn-edit-user,
.page-user-list .btn-delete-user{
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600;
    font-size: .82rem; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; transition: all .15s ease; background: transparent;
}
.page-user-list .btn-edit-user{ color: var(--indigo); border-color: var(--indigo-tint); background: var(--indigo-tint); }
.page-user-list .btn-edit-user:hover{ background: var(--indigo); border-color: var(--indigo); color: #fff; }
.page-user-list .btn-delete-user{ color: var(--coral); border-color: var(--coral-tint); background: var(--coral-tint); position:relative; overflow:hidden; }
.page-user-list .btn-delete-user:hover{ background: var(--coral); border-color: var(--coral); color: #fff; }
.page-user-list .btn-delete-user:active{ transform: scale(.96); }

.page-user-list .btn-delete-icon{ display:inline-flex; transition: transform .25s ease; }
.page-user-list .btn-delete-user:hover .btn-delete-icon{ animation: trashShake .45s ease; }
@keyframes trashShake{
    0%, 100%{ transform: rotate(0deg); }
    25%{ transform: rotate(-12deg); }
    50%{ transform: rotate(10deg); }
    75%{ transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){
    .page-user-list .btn-delete-user:hover .btn-delete-icon{ animation:none; }
}

.page-user-list .user-empty{ padding: 70px 20px !important; text-align: center; border-bottom: none !important; }
.page-user-list .user-empty .empty-icon{
    width: 60px; height: 60px; border-radius: 50%; background: var(--indigo-tint); color: var(--indigo);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 16px;
}
.page-user-list .user-empty .empty-title{ font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.page-user-list .user-empty .empty-sub{ color: var(--ink-soft); font-size: .88rem; }

@media (max-width: 767px){
    .page-user-list .user-table thead{ display: none; }
    .page-user-list .user-table, .page-user-list .user-table tbody, .page-user-list .user-table tbody tr, .page-user-list .user-table tbody td{ display: block; width: 100%; }
    .page-user-list .user-table tbody tr{ padding: 16px 18px; border-bottom: 8px solid var(--paper); }
    .page-user-list .user-table tbody td{ border-bottom: none; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .page-user-list .user-table tbody td::before{
        content: attr(data-label); font-size: .7rem; font-weight: 700; letter-spacing: .6px;
        text-transform: uppercase; color: var(--ink-faint); flex-shrink: 0;
    }
    .page-user-list .action-cell{ justify-content: flex-end; }
}

/* Modal konfirmasi "cabut akses" (tekan & tahan) */
.page-user-list .revoke-backdrop{
    position: fixed; inset: 0; background: rgba(20, 24, 38, .55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.page-user-list .revoke-backdrop.is-open{ opacity: 1; visibility: visible; }
.page-user-list .revoke-card{
    position: relative; width: 100%; max-width: 380px; background: var(--surface); border-radius: 18px;
    box-shadow: var(--shadow-pop); padding: 0; overflow: hidden;
    transform: translateY(24px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.page-user-list .revoke-backdrop.is-open .revoke-card{ transform: translateY(0) scale(1); }

.page-user-list .revoke-head{ background: linear-gradient(135deg, var(--ink) 0%, #2B334A 100%); color: #fff; padding: 22px 24px 20px; position: relative; }
.page-user-list .revoke-head .revoke-tag{
    font-family: var(--font-body); font-weight: 700; font-size: .68rem; letter-spacing: 1.6px;
    text-transform: uppercase; color: rgba(255,255,255,.55); display: block; margin-bottom: 10px;
}
.page-user-list .revoke-head .revoke-close{
    position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.1); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem;
    transition: background .15s ease;
}
.page-user-list .revoke-head .revoke-close:hover{ background: rgba(255,255,255,.22); }

.page-user-list .revoke-target{ display: flex; align-items: center; gap: 12px; }
.page-user-list .revoke-target .user-avatar{ width: 46px; height: 46px; font-size: 1rem; }
.page-user-list .revoke-target .revoke-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.page-user-list .revoke-target .revoke-email{ font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.65); }

.page-user-list .revoke-perforation{ position: relative; height: 0; border-top: 2px dashed #E3C3BC; margin: 0 24px; }
.page-user-list .revoke-perforation::before,
.page-user-list .revoke-perforation::after{ content: ""; position: absolute; top: -10px; width: 20px; height: 20px; background: var(--paper); border-radius: 50%; }
.page-user-list .revoke-perforation::before{ left: -34px; }
.page-user-list .revoke-perforation::after{ right: -34px; }

.page-user-list .revoke-body{ padding: 22px 24px 26px; text-align: center; }
.page-user-list .revoke-body p{ color: var(--ink-soft); font-size: .88rem; line-height: 1.6; margin: 0 0 20px; }
.page-user-list .revoke-body p strong{ color: var(--ink); }

.page-user-list .hold-btn{
    position: relative; width: 100%; padding: 15px 20px; border-radius: 999px; border: none;
    background: var(--coral-tint); color: var(--coral-deep); font-family: var(--font-body);
    font-weight: 700; font-size: .92rem; cursor: pointer; overflow: hidden;
    user-select: none; -webkit-user-select: none; touch-action: none;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: color .15s ease;
}
.page-user-list .hold-btn .hold-fill{
    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: linear-gradient(90deg, var(--coral), var(--coral-deep)); z-index: 0; transition: width .05s linear;
}
.page-user-list .hold-btn .hold-label, .page-user-list .hold-btn i{ position: relative; z-index: 1; }
.page-user-list .hold-btn.is-filling{ color: #fff; }
.page-user-list .hold-btn.is-filling .hold-fill{ transition: none; }
.page-user-list .hold-btn.is-stamped{ background: var(--coral-deep); color: #fff; }
.page-user-list .hold-btn:active{ transform: scale(.99); }

.page-user-list .revoke-hint{
    margin-top: 12px !important; font-size: .74rem !important; color: var(--ink-faint) !important;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.page-user-list .revoke-cancel{
    display: block; margin: 14px auto 0; background: none; border: none; color: var(--ink-soft);
    font-size: .84rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.page-user-list .revoke-cancel:hover{ color: var(--ink); }

.page-user-list .revoke-stamp{
    position: absolute; top: 46%; left: 50%; width: 132px; height: 132px;
    border: 4px solid var(--coral); border-radius: 50%; color: var(--coral);
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center; text-align: center; text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(-18deg) scale(2.2); opacity: 0; pointer-events: none;
    background: rgba(255,255,255,.94); z-index: 5;
}
.page-user-list .revoke-stamp.is-visible{ animation: stampDown .45s cubic-bezier(.2,.85,.35,1.3) forwards; }
@keyframes stampDown{
    0%{ opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(2.4); }
    60%{ opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(.92); }
    100%{ opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
    .page-user-list .revoke-card, .page-user-list .revoke-backdrop, .page-user-list .hold-btn .hold-fill, .page-user-list .revoke-stamp{
        transition: none !important; animation: none !important;
    }
}

.page-user-list .yt-player-frame{ position:absolute; width:0; height:0; overflow:hidden; }

/* ============================================================
   10. PAGE (ADMIN): EDIT DESTINASI (.page-destinasi-edit)
   ============================================================ */

.page-destinasi-edit{
    --sea-green: #0d9488;
    --sea-green-dark: #0f766e;
    --sky-blue: #38bdf8;
    --sky-blue-dark: #0ea5e9;
}

.page-destinasi-edit .form-page-header {
    background: linear-gradient(135deg, var(--sea-green) 0%, var(--sky-blue) 100%);
    border-radius: 18px;
    padding: 40px 35px;
    color: #fff;
    margin-bottom: -60px;
    position: relative;
    z-index: 1;
}
.page-destinasi-edit .form-page-header h2 { font-weight: 700; margin-bottom: 4px; }
.page-destinasi-edit .form-page-header p { opacity: .9; margin-bottom: 0; }

.page-destinasi-edit .edit-destinasi-card,
.page-destinasi-edit .form-card {
    position: relative;
    z-index: 2;
    border: none;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(13,148,136,.12);
    overflow: hidden;
}

.page-destinasi-edit .edit-destinasi-header {
    background: linear-gradient(135deg, #0a5c8a, #17a2b8);
    color: #fff;
    padding: 2rem 2rem 1.5rem;
}
.page-destinasi-edit .edit-destinasi-header .icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .75rem;
}

.page-destinasi-edit .edit-destinasi-body {
    padding: 2rem;
}

.page-destinasi-edit .edit-destinasi-body .form-label,
.page-destinasi-edit .form-label {
    font-weight: 600;
    font-size: .9rem;
    color: #343a40;
}

.page-destinasi-edit .edit-destinasi-body .form-control,
.page-destinasi-edit .edit-destinasi-body .form-select,
.page-destinasi-edit .form-control,
.page-destinasi-edit .form-select {
    border-color: #dfe6ea;
    padding: .6rem .9rem;
    border-left: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.page-destinasi-edit .edit-destinasi-body .form-control:focus,
.page-destinasi-edit .edit-destinasi-body .form-select:focus,
.page-destinasi-edit .form-control:focus,
.page-destinasi-edit .form-select:focus {
    border-color: var(--sky-blue-dark);
    box-shadow: 0 0 0 .2rem rgba(56,189,248,.2);
}
.page-destinasi-edit textarea.form-control { border-left: 1px solid #ced4da; }

.page-destinasi-edit .form-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--sea-green-dark);
    margin-bottom: 16px;
}
.page-destinasi-edit .form-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e9ecef;
}
.page-destinasi-edit .form-section-label:not(:first-child) {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #e9ecef;
}

.page-destinasi-edit .input-group-text {
    background: #eefbfa;
    border-right: none;
    color: var(--sea-green-dark);
}
.page-destinasi-edit .input-group:focus-within .input-group-text {
    border-color: var(--sky-blue-dark);
    color: var(--sea-green-dark);
}

.page-destinasi-edit .harga-input-group .input-group-text {
    background: #fff4e0;
    color: #b5760a;
    font-weight: 700;
    border-color: #dfe6ea;
}

.page-destinasi-edit .form-text{ font-size: .8rem; }

/* Preview gambar interaktif */
.page-destinasi-edit .gambar-edit-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.page-destinasi-edit .gambar-preview-box {
    position: relative;
    flex-shrink: 0;
    width: 170px;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f1f1;
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.page-destinasi-edit .gambar-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-destinasi-edit .gambar-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    background: rgba(10,92,138,.6);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.page-destinasi-edit .gambar-preview-box:hover .gambar-preview-overlay {
    opacity: 1;
}
.page-destinasi-edit .gambar-preview-box.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 1.8rem;
    border: 1px dashed #dee2e6;
}

.page-destinasi-edit .gambar-upload-col {
    flex: 1;
    min-width: 200px;
}
.page-destinasi-edit .gambar-upload-hint {
    font-size: .78rem;
    color: #6c757d;
    margin-top: .4rem;
}
.page-destinasi-edit .gambar-upload-error {
    font-size: .78rem;
    color: #dc3545;
    margin-top: .4rem;
}

/* Tombol aksi */
.page-destinasi-edit .btn-submit-destinasi,
.page-destinasi-edit .btn-save {
    background: linear-gradient(135deg, var(--sea-green) 0%, var(--sky-blue-dark) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 10px;
    transition: opacity .2s ease, box-shadow .2s ease, transform .2s ease;
}
.page-destinasi-edit .btn-submit-destinasi:hover,
.page-destinasi-edit .btn-save:hover {
    opacity: .95;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(13,148,136,.25);
}

.page-destinasi-edit .btn-cancel-destinasi,
.page-destinasi-edit .btn-cancel {
    border-radius: 10px;
    border-color: #dfe6ea;
    color: #495057;
    font-weight: 600;
    padding: 10px 24px;
    transition: background .2s ease, border-color .2s ease;
}
.page-destinasi-edit .btn-cancel-destinasi:hover,
.page-destinasi-edit .btn-cancel:hover {
    background: #f8f9fa;
    border-color: #ced4da;
    color: #212529;
}

/* Kotak info penghapusan */
.page-destinasi-edit .delete-info-box {
    background: #f0fdfa;
    border: 1px dashed var(--sea-green);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 28px;
}
.page-destinasi-edit .delete-info-box .info-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sea-green), var(--sky-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.page-destinasi-edit .delete-info-box h6 {
    font-weight: 700;
    color: var(--sea-green-dark);
    margin-bottom: 4px;
}
.page-destinasi-edit .delete-info-box p {
    color: #495057;
    font-size: .87rem;
    margin-bottom: 0;
    line-height: 1.6;
}


/* =========================================================
   VISIT DUMAI - LOGIN PAGE
   Modern • Simple • Elegant
========================================================= */

:root {
    --login-primary: #075985;
    --login-primary-dark: #063b55;
    --login-secondary: #0e7490;
    --login-gold: #f5b301;
    --login-gold-dark: #d99600;

    --login-bg: #eef5f8;
    --login-text: #163447;
    --login-muted: #718096;

    --login-border: #e2e8f0;
    --login-white: #ffffff;

    --login-radius: 22px;
}


/* =========================================================
   PAGE
========================================================= */

.page-auth {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.page-auth main {
    padding: 0 !important;
}

.login-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    padding: 40px 20px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(245,179,1,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(14,116,144,.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f5f9fb 0%,
            #eaf3f7 100%
        );
}


/* =========================================================
   DECORATION
========================================================= */

.login-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.decoration-1 {
    width: 330px;
    height: 330px;

    top: -170px;
    left: -120px;

    background: rgba(7,89,133,.08);
}

.decoration-2 {
    width: 240px;
    height: 240px;

    right: -90px;
    bottom: -100px;

    background: rgba(245,179,1,.10);
}

.decoration-3 {
    width: 100px;
    height: 100px;

    right: 12%;
    top: 12%;

    border: 20px solid rgba(7,89,133,.04);
}


/* =========================================================
   LOGIN WRAPPER
========================================================= */

.login-wrapper {
    width: 100%;
    max-width: 440px;

    position: relative;
    z-index: 5;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {

    background: rgba(255,255,255,.96);

    border: 1px solid rgba(255,255,255,.8);

    border-radius: var(--login-radius);

    padding: 38px 38px 28px;

    box-shadow:
        0 25px 70px rgba(15, 55, 75, .12),
        0 5px 20px rgba(15, 55, 75, .05);

    backdrop-filter: blur(12px);

    animation: loginCardIn .55s ease both;
}


@keyframes loginCardIn {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   LOGO
========================================================= */

.login-logo {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 26px;
}


.logo-circle {

    width: 48px;
    height: 48px;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 20px;

    background:
        linear-gradient(
            145deg,
            var(--login-primary),
            var(--login-secondary)
        );

    box-shadow:
        0 8px 20px rgba(7,89,133,.22);
}


.logo-text {

    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.logo-text strong {

    font-size: 19px;

    color: var(--login-primary-dark);

    font-weight: 800;

    letter-spacing: -.3px;
}


.logo-text span {

    margin-top: 4px;

    font-size: 11px;

    color: var(--login-muted);

}


/* =========================================================
   HEADER
========================================================= */

.login-header {

    text-align: center;

    margin-bottom: 25px;
}


.login-header h1 {

    margin: 0;

    font-size: 30px;

    font-weight: 800;

    letter-spacing: -.8px;

    color: var(--login-text);
}


.login-header p {

    margin: 7px 0 0;

    font-size: 14px;

    color: var(--login-muted);
}


/* =========================================================
   ALERT
========================================================= */

.login-alert {

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    margin-bottom: 18px;

    border-radius: 11px;

    font-size: 13px;
}


.login-alert.success {

    color: #166534;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;
}


.login-alert.danger {

    color: #b91c1c;

    background: #fef2f2;

    border: 1px solid #fecaca;
}


/* =========================================================
   GOOGLE BUTTON
========================================================= */

.google-button {

    height: 48px;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 12px;

    text-decoration: none;

    background: #fff;

    border: 1px solid var(--login-border);

    color: #334155;

    font-size: 14px;

    font-weight: 600;

    transition: .2s ease;
}


.google-button i {

    font-size: 17px;
}


.google-button:hover {

    color: var(--login-primary);

    border-color: #b8cad5;

    background: #f8fafc;

    transform: translateY(-1px);

}


/* =========================================================
   DIVIDER
========================================================= */

.login-divider {

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 22px 0;
}


.login-divider::before,
.login-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: var(--login-border);
}


.login-divider span {

    color: #94a3b8;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .8px;
}


/* =========================================================
   FORM
========================================================= */

.login-form {

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.form-group {

    display: flex;

    flex-direction: column;
}


.form-group label {

    margin-bottom: 7px;

    color: #334155;

    font-size: 13px;

    font-weight: 700;
}


.form-group label i {

    margin-right: 5px;

    color: var(--login-primary);
}


/* =========================================================
   PASSWORD LABEL
========================================================= */

.password-label-row {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.password-label-row a {

    color: var(--login-primary);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;
}


.password-label-row a:hover {

    color: var(--login-gold-dark);

}


/* =========================================================
   INPUT
========================================================= */

.input-wrapper {

    position: relative;

    display: flex;

    align-items: center;
}


.input-wrapper .input-icon {

    position: absolute;

    left: 15px;

    color: #94a3b8;

    font-size: 14px;

    pointer-events: none;

    z-index: 2;
}


.input-wrapper input {

    width: 100%;

    height: 48px;

    border-radius: 12px;

    border: 1px solid var(--login-border);

    background: #f8fafc;

    padding:
        0 45px
        0 42px;

    outline: none;

    color: var(--login-text);

    font-size: 13px;

    transition: .2s ease;
}


.input-wrapper input::placeholder {

    color: #a0aec0;

}


.input-wrapper input:hover {

    border-color: #cbd5e1;

}


.input-wrapper input:focus {

    background: #fff;

    border-color: var(--login-primary);

    box-shadow:
        0 0 0 3px rgba(7,89,133,.09);
}


.input-wrapper input:focus + .password-toggle {

    color: var(--login-primary);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {

    position: absolute;

    right: 8px;

    top: 50%;

    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    border: none;

    background: transparent;

    color: #94a3b8;

    cursor: pointer;

    border-radius: 8px;

    transition: .2s ease;
}


.password-toggle:hover {

    color: var(--login-primary);

    background: #eef5f8;

}


/* =========================================================
   ERROR
========================================================= */

.field-error {

    margin-top: 6px;

    color: #dc2626;

    font-size: 11px;
}


.field-error i {

    margin-right: 3px;
}


/* =========================================================
   REMEMBER
========================================================= */

.login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: -3px;
}


.remember {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    color: #64748b;

    font-size: 12px;
}


.remember input {

    display: none;
}


.checkmark {

    width: 17px;
    height: 17px;

    border-radius: 5px;

    border: 1px solid #cbd5e1;

    background: white;

    position: relative;

    transition: .2s ease;
}


.remember input:checked + .checkmark {

    background: var(--login-primary);

    border-color: var(--login-primary);
}


.remember input:checked + .checkmark::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 9px;

    left: 5px;
    top: 2px;

    border:
        solid white;

    border-width:
        0 2px 2px 0;

    transform: rotate(45deg);
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-button {

    width: 100%;

    height: 50px;

    border: none;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    cursor: pointer;

    color: white;

    font-size: 14px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            var(--login-primary),
            var(--login-secondary)
        );

    box-shadow:
        0 8px 20px rgba(7,89,133,.20);

    transition: .25s ease;
}


.login-button i {

    font-size: 12px;

    transition: .25s ease;
}


.login-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(7,89,133,.25);
}


.login-button:hover i {

    transform: translateX(4px);
}


.login-button:active {

    transform: translateY(0);
}


/* =========================================================
   BACK HOME
========================================================= */

.back-home {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 22px;

    color: #64748b;

    font-size: 12px;

    text-decoration: none;

    transition: .2s ease;
}


.back-home:hover {

    color: var(--login-primary);

}


.back-home i {

    font-size: 11px;
}


/* =========================================================
   FOOTER
========================================================= */

.login-footer {

    display: flex;

    justify-content: center;

    margin-top: 23px;

    padding-top: 20px;

    border-top: 1px solid #edf2f5;
}


.login-footer span {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #94a3b8;

    font-size: 10px;

    letter-spacing: .2px;
}


.login-footer i {

    color: var(--login-gold);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 576px) {

    .login-page {

        padding: 20px 14px;
    }

    .login-card {

        padding: 30px 22px 23px;

        border-radius: 18px;
    }

    .login-header h1 {

        font-size: 26px;
    }

    .logo-circle {

        width: 44px;
        height: 44px;
    }

}


@media (max-height: 700px) {

    .login-page {

        align-items: flex-start;

        padding-top: 25px;

        padding-bottom: 25px;

    }

}


/* ==========================================================
   12. DASHBOARD ADMIN — quick menu, chat, activity, online badge
   ========================================================== */

.quick-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 15px;
    background: #f8faf9;
    border: 1px solid #edf1ef;
    text-decoration: none;
    transition: all .3s ease;
    height: 100%;
}
.quick-menu:hover {
    transform: translateY(-4px);
    background: #fff;
    border-color: rgba(14,59,54,.15);
    box-shadow: 0 8px 20px rgba(14,59,54,.10);
}
.quick-menu strong {
    display: block;
    color: #24332F;
    font-size: 13px;
}
.quick-menu span {
    display: block;
    color: #8A9692;
    font-size: 11px;
    margin-top: 3px;
}
.quick-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
}
.quick-icon.green { color: #0E3B36; background: rgba(14,59,54,.10); }
.quick-icon.gold { color: #B78320; background: rgba(214,168,79,.15); }
.quick-icon.blue { color: #2980B9; background: rgba(41,128,185,.12); }
.quick-icon.purple { color: #7053A5; background: rgba(112,83,165,.12); }
.quick-icon.orange { color: #D97706; background: rgba(217,119,6,.12); }
.quick-icon.gray { color: #64748B; background: rgba(100,116,139,.12); }

.online-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 20px;
    background: rgba(25,135,84,.08);
    color: #198754;
    font-size: 11px;
    font-weight: 600;
}
.online-badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #198754;
    animation: onlinePulse 1.5s infinite;
}
@keyframes onlinePulse {
    0% { box-shadow: 0 0 0 0 rgba(25,135,84,.4); }
    70% { box-shadow: 0 0 0 7px rgba(25,135,84,0); }
    100% { box-shadow: 0 0 0 0 rgba(25,135,84,0); }
}

.chat-list {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 5px;
}
.chat-item {
    display: flex;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1ef;
}
.chat-item:last-child { border-bottom: 0; }
.chat-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #0E3B36;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.avatar-gold { background: #B78320; }
.avatar-blue { background: #2980B9; }
.chat-content { flex: 1; }
.chat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.chat-top strong { color: #24332F; font-size: 13px; }
.chat-top small { color: #9AA5A1; font-size: 10px; }
.chat-content p {
    margin: 6px 0;
    color: #697671;
    font-size: 12px;
    line-height: 1.6;
}
.chat-actions { display: flex; gap: 8px; }
.chat-actions button {
    border: 0;
    background: transparent;
    color: #0E3B36;
    padding: 0;
    font-size: 11px;
    cursor: pointer;
}
.chat-actions button:hover { color: #D6A84F; }
.view-all-btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 10px;
    background: rgba(14,59,54,.08);
    color: #0E3B36;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}
.view-all-btn:hover { background: #0E3B36; color: #fff; }

.activity-item {
    display: flex;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1ef;
}
.activity-item:last-child { border-bottom: 0; }
.activity-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activity-icon.green { color: #0E3B36; background: rgba(14,59,54,.10); }
.activity-icon.gold { color: #B78320; background: rgba(214,168,79,.15); }
.activity-icon.blue { color: #2980B9; background: rgba(41,128,185,.12); }
.activity-icon.purple { color: #7053A5; background: rgba(112,83,165,.12); }
.activity-content { flex: 1; }
.activity-content strong { display: block; color: #24332F; font-size: 12px; }
.activity-content span { display: block; color: #7F8B87; font-size: 11px; margin-top: 3px; }
.activity-content small { display: block; color: #A0AAA6; font-size: 10px; margin-top: 4px; }

@media(max-width: 576px) {
    .quick-menu { padding: 12px; }
    .quick-icon { width: 38px; height: 38px; min-width: 38px; }
    .chat-top { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* =========================================================
   VISIT DUMAI - LOGIN PAGE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/* =========================================================
   RESET
   ========================================================= */

.page-auth {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}


/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page {

    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;

    overflow: hidden;

    background-image:
        linear-gradient(
            135deg,
            rgba(0, 42, 67, 0.75),
            rgba(0, 119, 182, 0.45)
        ),
        url('../images/login-bg.jpg');

    background-size: cover;
    background-position: center;

    background-attachment: fixed;
}


/* =========================================================
   BACKGROUND OVERLAY
   ========================================================= */

.login-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 183, 3, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(0, 180, 216, 0.20),
            transparent 35%
        );

    pointer-events: none;
}


/* =========================================================
   LOGIN CONTAINER
   ========================================================= */

.login-container {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 450px;

    padding: 38px 40px 30px;

    border-radius: 28px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.7);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.30),
        0 8px 30px rgba(0, 119, 182, 0.15);

    backdrop-filter: blur(18px);

    animation: loginAppear 0.7s ease;
}


@keyframes loginAppear {

    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   HEADER
   ========================================================= */

.login-header {

    text-align: center;

    margin-bottom: 18px;
}


.brand-icon {

    width: 55px;
    height: 55px;

    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: white;

    font-size: 24px;

    background:
        linear-gradient(
            135deg,
            #0077b6,
            #00b4d8
        );

    box-shadow:
        0 10px 25px rgba(0, 119, 182, 0.30);
}


.login-header h1 {

    margin: 0;

    font-size: 26px;

    font-weight: 700;

    color: #073b4c;

    letter-spacing: -0.5px;
}


.login-header p {

    margin: 6px 0 0;

    color: #718096;

    font-size: 13px;
}


.login-header strong {

    color: #0077b6;
}


/* =========================================================
   AVATAR
   ========================================================= */

.login-avatar {

    display: flex;

    justify-content: center;

    margin: 5px 0 18px;
}


.avatar-circle {

    width: 92px;
    height: 92px;

    padding: 5px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0077b6,
            #00b4d8,
            #ffb703
        );

    box-shadow:
        0 10px 30px rgba(0, 119, 182, 0.25);
}


.avatar-circle img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    background: white;

    border: 4px solid white;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.login-divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 15px 0;
}


.login-divider::before,
.login-divider::after {

    content: '';

    flex: 1;

    height: 1px;

    background: #e2e8f0;
}


.login-divider span {

    color: #94a3b8;

    font-size: 11px;

    white-space: nowrap;
}


/* =========================================================
   GOOGLE BUTTON
   ========================================================= */

.social-login-btn {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    text-decoration: none;

    border-radius: 13px;

    border: 1px solid #e2e8f0;

    background: white;

    color: #334155;

    font-size: 13px;

    font-weight: 500;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.social-login-btn i {

    font-size: 17px;

    color: #db4437;
}


.social-login-btn:hover {

    transform: translateY(-2px);

    border-color: #cbd5e1;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    color: #0077b6;
}


/* =========================================================
   ALERT
   ========================================================= */

.login-alert {

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 18px 0 12px;

    padding: 12px 14px;

    border-radius: 12px;

    font-size: 12px;
}


.login-success {

    color: #166534;

    background: #dcfce7;

    border: 1px solid #bbf7d0;
}


.login-danger {

    color: #991b1b;

    background: #fee2e2;

    border: 1px solid #fecaca;
}


/* =========================================================
   FORM
   ========================================================= */

.login-form {

    margin-top: 20px;
}


.login-form-group {

    margin-bottom: 18px;
}


.login-form-group label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    color: #334155;

    font-size: 12px;

    font-weight: 600;
}


.login-form-group label i {

    color: #0077b6;

    font-size: 12px;
}


/* =========================================================
   INPUT
   ========================================================= */

.login-input {

    position: relative;

    display: flex;

    align-items: center;
}


.input-icon {

    position: absolute;

    left: 15px;

    z-index: 2;

    color: #94a3b8;

    font-size: 14px;

    pointer-events: none;
}


.login-input input {

    width: 100%;

    height: 50px;

    box-sizing: border-box;

    padding: 0 45px 0 43px;

    border: 1px solid #dbe3ea;

    border-radius: 13px;

    outline: none;

    background: #f8fafc;

    color: #1e293b;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.login-input input::placeholder {

    color: #a0aec0;
}


.login-input input:focus {

    background: white;

    border-color: #00a8d6;

    box-shadow:
        0 0 0 4px rgba(0, 168, 214, 0.10);
}


.login-input:focus-within .input-icon {

    color: #0077b6;
}


.login-input input.input-error {

    border-color: #ef4444;
}


/* =========================================================
   PASSWORD TOGGLE
   ========================================================= */

.password-toggle {

    position: absolute;

    right: 7px;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 10px;

    background: transparent;

    color: #94a3b8;

    cursor: pointer;

    transition: all 0.2s ease;
}


.password-toggle:hover {

    color: #0077b6;

    background: #eff8fc;
}


/* =========================================================
   ERROR
   ========================================================= */

.login-error {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 6px;

    color: #dc2626;

    font-size: 11px;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 2px 0 18px;
}


.remember-label {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #64748b;

    font-size: 11px;

    cursor: pointer;
}


.remember-label input {

    accent-color: #0077b6;

    cursor: pointer;
}


.forgot-password {

    color: #0077b6;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.2s ease;
}


.forgot-password:hover {

    color: #004d66;

    text-decoration: underline;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-button {

    width: 100%;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #0077b6,
            #00a8d6
        );

    color: white;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(0, 119, 182, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.login-button i {

    font-size: 13px;

    transition: transform 0.25s ease;
}


.login-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(0, 119, 182, 0.35);
}


.login-button:hover i {

    transform: translateX(4px);
}


.login-button:active {

    transform: translateY(0);
}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {

    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #edf2f7;

    text-align: center;
}


.cancel-button {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #64748b;

    font-size: 11px;

    text-decoration: none;

    transition: color 0.2s ease;
}


.cancel-button:hover {

    color: #0077b6;
}


/* =========================================================
   BRAND FOOTER
   ========================================================= */

.login-brand-footer {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    margin-top: 20px;

    color: #0077b6;

    font-size: 12px;

    font-weight: 600;
}


.login-brand-footer i {

    font-size: 14px;
}


.login-brand-footer small {

    color: #94a3b8;

    font-size: 9px;

    font-weight: 400;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 576px) {

    .login-page {

        padding: 25px 15px;

        background-attachment: scroll;
    }


    .login-container {

        max-width: 100%;

        padding: 30px 24px 25px;

        border-radius: 22px;
    }


    .login-header h1 {

        font-size: 23px;
    }


    .avatar-circle {

        width: 82px;
        height: 82px;
    }


    .login-input input {

        height: 48px;
    }


    .login-button {

        height: 50px;
    }

}


@media (max-height: 700px) {

    .login-page {

        align-items: flex-start;

        padding-top: 25px;
    }

}
/* =========================================================
   VISIT DUMAI
   DESTINASI DETAIL
   MODERN MELAYU PESISIR
========================================================= */

:root {
    --vd-primary: #006b8f;
    --vd-primary-dark: #003f57;
    --vd-secondary: #008fa8;
    --vd-gold: #d6a84f;
    --vd-gold-light: #f4d98a;
    --vd-green: #16836c;
    --vd-danger: #d9534f;

    --vd-bg: #f5f8f8;
    --vd-card: #ffffff;
    --vd-text: #172b36;
    --vd-muted: #71808a;
    --vd-border: #e5ecef;

    --vd-radius: 24px;
    --vd-shadow: 0 18px 50px rgba(0, 50, 70, .09);
}


/* =========================================================
   BASE
========================================================= */

.vd-detail-page {
    background:
        radial-gradient(circle at 5% 10%, rgba(214,168,79,.08), transparent 25%),
        radial-gradient(circle at 95% 20%, rgba(0,107,143,.07), transparent 25%),
        var(--vd-bg);

    min-height: 100vh;

    font-family: 'Poppins', sans-serif;

    color: var(--vd-text);

    padding: 25px 0 70px;
}


.vd-container {
    width: min(1180px, calc(100% - 32px));
    margin: auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.vd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 22px;

    font-size: 13px;
    color: var(--vd-muted);

    overflow: hidden;
}


.vd-breadcrumb a {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--vd-primary);
    text-decoration: none;

    font-weight: 600;

    transition: .25s;
}


.vd-breadcrumb a:hover {
    color: var(--vd-gold);
}


.vd-breadcrumb .current {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   HERO
========================================================= */

.vd-hero-card {
    display: grid;
    grid-template-columns: 48% 52%;

    background: var(--vd-card);

    border-radius: 30px;

    overflow: hidden;

    box-shadow: var(--vd-shadow);

    border: 1px solid rgba(0,0,0,.04);

    min-height: 570px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.vd-hero-image {
    position: relative;

    min-height: 570px;

    overflow: hidden;

    background: #dce8eb;
}


.vd-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 1s ease;
}


.vd-hero-card:hover .vd-hero-image img {
    transform: scale(1.035);
}


.vd-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,31,44,.78),
            rgba(0,31,44,.10) 55%,
            rgba(0,0,0,.05)
        );
}


.vd-image-ornament {
    position: absolute;

    top: 28px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--vd-gold-light);

    opacity: .9;
}


.vd-image-ornament span {
    width: 45px;
    height: 1px;

    background: rgba(244,217,138,.8);
}


.vd-image-ornament i {
    font-size: 17px;
}


/* =========================================================
   STATUS
========================================================= */

.vd-status {
    position: absolute;

    top: 25px;
    left: 25px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 15px;

    border-radius: 999px;

    background: rgba(255,255,255,.94);

    backdrop-filter: blur(10px);

    font-size: 12px;
    font-weight: 700;

    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}


.vd-status.open {
    color: #087857;
}


.vd-status.closed {
    color: #b33b38;
}


.vd-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: currentColor;

    box-shadow: 0 0 0 4px rgba(0,0,0,.05);
}


/* =========================================================
   IMAGE LOCATION
========================================================= */

.vd-image-location {
    position: absolute;

    bottom: 25px;
    left: 25px;
    right: 25px;

    display: flex;
    align-items: center;
    gap: 9px;

    color: white;

    font-size: 13px;
    font-weight: 500;
}


.vd-image-location i {
    color: var(--vd-gold-light);

    font-size: 18px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.vd-hero-content {
    padding: 55px 50px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.vd-category {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 13px;

    background: #edf8fa;

    color: var(--vd-primary);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    margin-bottom: 15px;
}


.vd-eyebrow {
    color: var(--vd-gold);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 10px;
}


.vd-title {
    font-family: 'Playfair Display', serif;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.08;

    color: var(--vd-primary-dark);

    margin: 0;

    max-width: 600px;
}


.vd-title-decoration {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 18px 0 20px;
}


.vd-title-decoration span {
    width: 45px;
    height: 2px;

    background: var(--vd-gold);
}


.vd-title-decoration i {
    color: var(--vd-gold);

    font-size: 8px;
}


.vd-description {
    color: var(--vd-muted);

    font-size: 14px;

    line-height: 1.85;

    max-width: 650px;

    margin-bottom: 25px;
}


.vd-description p {
    margin: 0;
}


.muted {
    color: #9aa7ad !important;
}


/* =========================================================
   INFO GRID
========================================================= */

.vd-info-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 25px;
}


.vd-info-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px;

    border: 1px solid var(--vd-border);

    border-radius: 15px;

    background: #fbfdfd;

    transition: .25s;
}


.vd-info-card:hover {
    transform: translateY(-3px);

    border-color: rgba(0,107,143,.25);

    box-shadow: 0 10px 25px rgba(0,50,70,.07);
}


.vd-info-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 16px;
}


.vd-info-icon.blue {
    background: #e7f5fa;
    color: var(--vd-primary);
}


.vd-info-icon.green {
    background: #e7f8f1;
    color: var(--vd-green);
}


.vd-info-icon.gold {
    background: #fff7df;
    color: #bd8a22;
}


.vd-info-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.vd-info-text span {
    color: var(--vd-muted);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.vd-info-text strong {
    color: var(--vd-text);

    font-size: 12px;

    margin-top: 2px;

    overflow: hidden;
    text-overflow: ellipsis;
}


.vd-info-text strong.free {
    color: var(--vd-green);
}


/* =========================================================
   BUTTONS
========================================================= */

.vd-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.vd-btn {
    border: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 10px 15px;

    border-radius: 12px;

    font-family: inherit;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition: .25s;
}


.vd-btn:hover {
    transform: translateY(-2px);
}


.vd-btn-light {
    background: #eef3f5;
    color: var(--vd-text);
}


.vd-btn-map {
    background: var(--vd-primary);
    color: white;
}


.vd-btn-contact {
    background: #16836c;
    color: white;
}


.vd-btn-edit {
    background: #fff1c9;
    color: #966d14;
}


.vd-btn-delete {
    background: #ffeded;
    color: #b43a3a;
}


.vd-delete-form {
    margin: 0;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.vd-highlight-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    margin: 20px 0 65px;
}


.vd-highlight-card {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px;

    background: white;

    border: 1px solid var(--vd-border);

    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0,50,70,.04);

    transition: .25s;
}


.vd-highlight-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(0,50,70,.08);
}


.vd-highlight-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        var(--vd-primary),
        var(--vd-secondary)
    );

    color: white;

    border-radius: 13px;
}


.vd-highlight-card strong,
.vd-highlight-card span {
    display: block;
}


.vd-highlight-card strong {
    font-size: 12px;

    color: var(--vd-text);

    margin-bottom: 3px;
}


.vd-highlight-card span {
    font-size: 10px;

    color: var(--vd-muted);
}


/* =========================================================
   SECTION
========================================================= */

.vd-section {
    margin-bottom: 70px;
}


.vd-section-heading,
.vd-review-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 25px;
}


.vd-section-eyebrow {
    color: var(--vd-gold);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 800;
}


.vd-section-heading h2,
.vd-review-header h2 {
    font-family: 'Playfair Display', serif;

    font-size: 35px;

    color: var(--vd-primary-dark);

    margin: 7px 0;
}


.vd-section-heading p,
.vd-review-header p {
    margin: 0;

    color: var(--vd-muted);

    font-size: 13px;

    max-width: 650px;
}


.vd-heading-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #fff8e6;

    color: var(--vd-gold);

    font-size: 24px;
}


/* =========================================================
   ATTRACTION
========================================================= */

.vd-attraction-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.vd-attraction-card {
    background: white;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid var(--vd-border);

    box-shadow: 0 10px 35px rgba(0,50,70,.06);

    transition: .3s;
}


.vd-attraction-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 20px 45px rgba(0,50,70,.11);
}


.vd-attraction-image {
    position: relative;

    height: 210px;

    overflow: hidden;
}


.vd-attraction-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s;
}


.vd-attraction-card:hover .vd-attraction-image img {
    transform: scale(1.07);
}


.vd-attraction-number {
    position: absolute;

    top: 13px;
    right: 13px;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    color: var(--vd-gold);

    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}


.vd-attraction-content {
    padding: 20px;
}


.vd-attraction-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--vd-primary);

    font-size: 10px;

    font-weight: 700;

    margin-bottom: 7px;
}


.vd-attraction-content h3 {
    margin: 0 0 8px;

    color: var(--vd-text);

    font-size: 18px;

    font-weight: 700;
}


.vd-attraction-content p {
    color: var(--vd-muted);

    font-size: 12px;

    line-height: 1.7;

    min-height: 42px;

    margin-bottom: 15px;
}


.vd-attraction-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-top: 14px;

    border-top: 1px solid var(--vd-border);
}


.vd-attraction-price small,
.vd-attraction-price strong {
    display: block;
}


.vd-attraction-price small {
    font-size: 9px;

    color: var(--vd-muted);
}


.vd-attraction-price strong {
    font-size: 12px;

    color: var(--vd-primary);
}


.vd-attraction-price strong.free {
    color: var(--vd-green);
}


.vd-detail-btn {
    border: none;

    background: #edf7f9;

    color: var(--vd-primary);

    padding: 8px 12px;

    border-radius: 9px;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

    transition: .25s;
}


.vd-detail-btn:hover {
    background: var(--vd-primary);

    color: white;
}


/* =========================================================
   EMPTY
========================================================= */

.vd-empty {
    grid-column: 1 / -1;

    text-align: center;

    padding: 60px 20px;

    background: white;

    border: 1px dashed #ccdadd;

    border-radius: 20px;
}


.vd-empty-icon {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    background: #edf7f9;

    color: var(--vd-primary);

    border-radius: 50%;

    font-size: 28px;
}


.vd-empty h3 {
    font-size: 18px;

    margin-bottom: 5px;
}


.vd-empty p {
    color: var(--vd-muted);

    font-size: 12px;

    margin: 0;
}


/* =========================================================
   REVIEW
========================================================= */

.vd-review-section {
    padding: 35px;

    background: white;

    border-radius: 25px;

    border: 1px solid var(--vd-border);

    box-shadow: 0 15px 45px rgba(0,50,70,.06);
}


.vd-rating-summary {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    background: #fffaf0;

    border-radius: 16px;

    border: 1px solid #f1dfad;
}


.vd-rating-summary > strong {
    color: var(--vd-gold);

    font-size: 32px;

    line-height: 1;
}


.vd-stars {
    display: flex;

    gap: 3px;

    color: var(--vd-gold);

    font-size: 12px;
}


.vd-rating-summary small {
    display: block;

    color: var(--vd-muted);

    font-size: 9px;

    margin-top: 3px;
}


.vd-review-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}


.vd-review-card {
    display: flex;

    gap: 13px;

    padding: 17px;

    border: 1px solid var(--vd-border);

    border-radius: 16px;

    background: #fbfdfd;
}


.vd-avatar {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        var(--vd-primary),
        var(--vd-secondary)
    );

    color: white;

    font-size: 16px;

    font-weight: 700;

    overflow: hidden;
}


.vd-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.vd-review-content {
    flex: 1;

    min-width: 0;
}


.vd-review-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}


.vd-review-top h3 {
    font-size: 13px;

    margin: 0 0 4px;
}


.vd-review-top time {
    font-size: 9px;

    color: var(--vd-muted);

    white-space: nowrap;
}


.vd-review-text {
    margin: 10px 0 0;

    color: #5f7078;

    font-size: 11px;

    line-height: 1.7;
}


.vd-review-button {
    margin-top: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 12px;

    background: var(--vd-primary);

    color: white;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition: .25s;
}


.vd-review-button:hover {
    color: white;

    background: var(--vd-primary-dark);

    transform: translateY(-2px);
}


/* =========================================================
   FACILITIES
========================================================= */

.vd-facility-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}


.vd-facility-card {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 18px;

    background: white;

    border: 1px solid var(--vd-border);

    border-radius: 17px;

    transition: .25s;
}


.vd-facility-card:hover {
    transform: translateY(-4px);

    border-color: rgba(0,107,143,.2);

    box-shadow: 0 12px 30px rgba(0,50,70,.07);
}


.vd-facility-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #edf8fa,
        #fff8e6
    );

    color: var(--vd-primary);

    font-size: 19px;
}


.vd-facility-card strong,
.vd-facility-card span {
    display: block;
}


.vd-facility-card strong {
    font-size: 12px;

    margin-bottom: 3px;
}


.vd-facility-card span {
    color: var(--vd-muted);

    font-size: 9px;
}


/* =========================================================
   MODAL
========================================================= */

.vd-modal .modal-content {
    border: none;

    border-radius: 23px;

    overflow: hidden;

    box-shadow: 0 30px 80px rgba(0,0,0,.2);
}


.vd-modal .modal-header {
    padding: 20px 24px;

    border-bottom: 1px solid var(--vd-border);
}


.vd-modal .modal-header small {
    color: var(--vd-gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.vd-modal .modal-title {
    color: var(--vd-primary-dark);

    font-family: 'Playfair Display', serif;

    font-size: 25px;

    margin-top: 5px;
}


.vd-modal .modal-body {
    padding: 22px;
}


.vd-modal-image {
    width: 100%;

    max-height: 400px;

    object-fit: cover;

    border-radius: 16px;

    margin-bottom: 17px;
}


.vd-modal-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;
}


.vd-modal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 11px;

    border-radius: 999px;

    background: #edf7f9;

    color: var(--vd-primary);

    font-size: 10px;

    font-weight: 600;
}


.vd-modal-description {
    color: #5e6f77;

    font-size: 13px;

    line-height: 1.8;
}


.vd-modal .modal-footer {
    border-top: 1px solid var(--vd-border);

    padding: 15px 22px;
}


.vd-modal-close {
    border: none;

    padding: 9px 15px;

    border-radius: 10px;

    background: #edf1f3;

    color: var(--vd-text);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   BOTTOM ORNAMENT
========================================================= */

.vd-bottom-ornament {
    display: flex;
    align-items: center;

    justify-content: center;

    gap: 20px;

    padding-top: 10px;
}


.vd-bottom-ornament > span {
    height: 1px;

    flex: 1;

    max-width: 230px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--vd-gold)
    );
}


.vd-bottom-ornament > span:last-child {
    background: linear-gradient(
        90deg,
        var(--vd-gold),
        transparent
    );
}


.vd-bottom-ornament div {
    text-align: center;

    color: var(--vd-gold);
}


.vd-bottom-ornament i {
    display: block;

    font-size: 8px;

    margin-bottom: 5px;
}


.vd-bottom-ornament strong {
    display: block;

    font-family: 'Playfair Display', serif;

    font-size: 15px;

    letter-spacing: 2px;
}


.vd-bottom-ornament small {
    display: block;

    margin-top: 2px;

    color: var(--vd-muted);

    font-size: 8px;

    letter-spacing: 1px;
}


/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 992px) {

    .vd-hero-card {
        grid-template-columns: 1fr;
    }

    .vd-hero-image {
        min-height: 430px;
    }

    .vd-hero-content {
        padding: 40px 35px;
    }

    .vd-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vd-attraction-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vd-facility-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 700px) {

    .vd-detail-page {
        padding-top: 15px;
    }


    .vd-container {
        width: min(100% - 20px, 1180px);
    }


    .vd-breadcrumb {
        font-size: 10px;

        margin-bottom: 14px;
    }


    .vd-hero-card {
        border-radius: 20px;
    }


    .vd-hero-image {
        min-height: 340px;
    }


    .vd-status {
        top: 15px;
        left: 15px;

        padding: 8px 12px;

        font-size: 10px;
    }


    .vd-image-location {
        left: 15px;
        right: 15px;
        bottom: 17px;

        font-size: 11px;
    }


    .vd-hero-content {
        padding: 30px 20px;
    }


    .vd-title {
        font-size: 36px;
    }


    .vd-description {
        font-size: 12px;

        line-height: 1.7;
    }


    .vd-info-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .vd-info-card {
        padding: 11px;
    }


    .vd-actions {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }


    .vd-btn {
        width: 100%;

        padding: 10px 8px;

        font-size: 10px;
    }


    .vd-delete-form {
        width: 100%;
    }


    .vd-delete-form .vd-btn {
        width: 100%;
    }


    .vd-highlight-grid {
        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin-bottom: 45px;
    }


    .vd-highlight-card {
        padding: 12px;

        gap: 8px;
    }


    .vd-highlight-icon {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        font-size: 13px;
    }


    .vd-highlight-card strong {
        font-size: 10px;
    }


    .vd-highlight-card span {
        font-size: 8px;
    }


    .vd-section {
        margin-bottom: 45px;
    }


    .vd-section-heading,
    .vd-review-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .vd-section-heading h2,
    .vd-review-header h2 {
        font-size: 28px;
    }


    .vd-attraction-grid {
        grid-template-columns: 1fr;
    }


    .vd-attraction-image {
        height: 220px;
    }


    .vd-review-section {
        padding: 20px;

        border-radius: 20px;
    }


    .vd-review-list {
        grid-template-columns: 1fr;
    }


    .vd-facility-grid {
        grid-template-columns: 1fr;
    }


    .vd-bottom-ornament {
        gap: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .vd-actions {
        grid-template-columns: 1fr;
    }


    .vd-highlight-grid {
        grid-template-columns: 1fr;
    }


    .vd-title {
        font-size: 32px;
    }


    .vd-hero-image {
        min-height: 300px;
    }

}
/* =========================================================
   DESTINASI-EDIT.CSS — Form Edit Destinasi (Wisata Kota Dumai)
   ========================================================= */

:root {
    --de-teal-deep:   #0e4f52;
    --de-teal:        #14848a;
    --de-teal-bright: #1fb3ac;
    --de-coral:       #ff6f59;
    --de-coral-dark:  #e85a45;
    --de-mint:        #f3f9fa;
    --de-ink:         #0f2b2d;
    --de-ink-soft:    #4a6367;
    --de-line:        #dfeceb;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 13.5px;
}

.breadcrumb-item a {
    color: var(--de-teal);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--de-ink-soft);
}

/* =========================================================
   CARD
   ========================================================= */

.edit-destinasi-card {
    border: 1px solid var(--de-line);
    border-radius: 18px;
    overflow: hidden;
}

.edit-destinasi-header {
    padding: 28px 32px 24px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--de-teal-deep), var(--de-teal) 70%, var(--de-teal-bright));
}

.edit-destinasi-header .icon-circle {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    font-size: 20px;
}

.edit-destinasi-header h2 {
    color: #ffffff;
}

.edit-destinasi-body {
    padding: 32px;
    background: #ffffff;
}

/* =========================================================
   FORM SECTIONS
   ========================================================= */

.form-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--de-teal-deep);
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--de-line);
}

.form-section-label:first-of-type {
    margin-top: 4px;
}

.form-section-label i {
    color: var(--de-coral);
}

.edit-destinasi-body .form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--de-ink);
}

.edit-destinasi-body .form-control,
.edit-destinasi-body .form-select {
    border: 1px solid var(--de-line);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--de-ink);
}

.edit-destinasi-body .form-control:focus,
.edit-destinasi-body .form-select:focus {
    border-color: var(--de-teal-bright);
    box-shadow: 0 0 0 3px rgba(31, 179, 172, 0.15);
}

.edit-destinasi-body .form-text,
.edit-destinasi-body .text-muted {
    font-size: 12.5px;
    color: var(--de-ink-soft) !important;
}

/* =========================================================
   IMAGE PREVIEW + UPLOAD
   ========================================================= */

.gambar-edit-wrap {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.gambar-preview-box {
    position: relative;
    width: 150px;
    height: 150px;
    flex: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--de-mint);
    border: 1px solid var(--de-line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gambar-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gambar-preview-box.no-image {
    color: var(--de-teal);
}

.gambar-preview-box #gambarPreviewIcon,
.gambar-preview-box .bi-image {
    font-size: 32px;
    color: var(--de-teal-bright);
}

.gambar-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(14, 79, 82, 0.7);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gambar-preview-box:hover .gambar-preview-overlay {
    opacity: 1;
}

.gambar-upload-col {
    flex: 1 1 220px;
    min-width: 220px;
}

.gambar-upload-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--de-ink-soft);
}

.gambar-upload-hint code {
    background: var(--de-mint);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--de-teal-deep);
}

/* =========================================================
   HARGA INPUT GROUP
   ========================================================= */

.harga-input-group .input-group-text {
    background: var(--de-mint);
    border: 1px solid var(--de-line);
    color: var(--de-teal-deep);
    font-weight: 700;
    border-radius: 10px 0 0 10px;
}

.harga-input-group .form-control {
    border-radius: 0 10px 10px 0;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-submit-destinasi {
    background: linear-gradient(90deg, var(--de-coral), var(--de-coral-dark));
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-submit-destinasi:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(232, 90, 69, 0.35);
}

.btn-cancel-destinasi {
    background: var(--de-mint);
    color: var(--de-teal-deep);
    border: 1px solid var(--de-line);
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 22px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-cancel-destinasi:hover {
    background: #ffffff;
    border-color: var(--de-teal-bright);
    color: var(--de-teal-deep);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 576px) {
    .edit-destinasi-header {
        padding: 24px 20px 20px;
    }

    .edit-destinasi-body {
        padding: 22px 18px;
    }

    .gambar-edit-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .gambar-upload-col {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================
   VISIT DUMAI — STYLE.CSS (rapi & di-scope per halaman)
   ==========================================================
   Cara kerja: setiap halaman punya class unik di <body>,
   contoh <body class="page-beranda">. Semua style khusus
   halaman itu ditulis sebagai `.page-beranda .hero-page {...}`
   dst, supaya tidak bentrok/menimpa halaman lain yang
   kebetulan memakai nama class sama (.hero-page, .card-grid,
   .destination-card, .form-card, .guide-card, dll).

   Daftar class body yang dipakai (tambahkan di tiap view,
   lihat PANDUAN.md yang saya kirim terpisah):
     page-beranda            -> beranda / home
     page-destinasi          -> daftar/list destinasi
     page-destinasi-detail   -> detail 1 destinasi
     page-kuliner            -> daftar kuliner
     page-kontak              -> halaman kontak
     page-atraksi-index      -> admin: daftar atraksi
     page-atraksi-create     -> admin: tambah atraksi
     page-atraksi-edit       -> admin: edit atraksi
     page-destinasi-edit     -> admin: edit destinasi
     page-user-list          -> admin: daftar user
     page-auth               -> login / register
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ==========================================================
   0. RESET & GLOBAL (berlaku di semua halaman)
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f8fc;
    color:#333;
    line-height:1.7;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.mt-5{ margin-top:60px; }
.text-center{ text-align:center; }
.bg-primary{ background:linear-gradient(135deg,#0d6efd,#0a58ca)!important; }

/* ---------- Navbar ---------- */

.navbar{
    position:sticky;
    top:0;
    z-index:999;
    background:#0c4a6e;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.navbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:75px;
}

/* ================================================
   LOGO NAVBAR — Visit Dumai
   Satu-satunya sumber style logo. Jangan duplikat
   aturan ini di tempat lain (mis. <style> inline di
   layout), supaya tidak saling override.
   ================================================ */

.navbar .logo {
    display: flex;
    align-items: center;
    padding: 4px 0;
    height: 100%;
}

.navbar-logo-img {
    height: 80px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
    transition: transform 0.15s ease;
}

.navbar .logo:hover .navbar-logo-img {
    transform: scale(1.04);
}

@media (max-width: 576px) {
    .navbar-logo-img {
        height: 38px;
        max-width: 150px;
    }
}

.nav-menu{ display:flex; list-style:none; gap:25px; }
.nav-menu a{ text-decoration:none; color:white; font-weight:500; transition:.3s; }
.nav-menu a:hover, .nav-menu a.active{ color:#FFD54F; }

.menu-toggle{ display:none; color:#fff; font-size:26px; cursor:pointer; }

@media(max-width:768px){
    .menu-toggle{ display:block; }
    .nav-menu{
        position:absolute;
        top:75px; left:0; width:100%;
        background:#0c4a6e;
        flex-direction:column;
        display:none;
        padding:20px;
    }
    .nav-menu.show{ display:flex; }
}

/* ---------- Footer ---------- */

footer{ background:#0c4a6e; color:white; margin-top:80px; }

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:35px;
    padding:60px 0;
}

.footer-grid h2, .footer-grid h3{ margin-bottom:18px; }
.footer-grid ul{ list-style:none; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid a{ color:white; text-decoration:none; transition:.3s; }
.footer-grid a:hover{ color:#FFD54F; }

.social{ display:flex; gap:12px; margin-top:15px; }
.social a{
    width:42px; height:42px;
    display:flex; justify-content:center; align-items:center;
    border-radius:50%;
    background:white; color:#0c4a6e;
    transition:.3s;
}
.social a:hover{ background:#FFD54F; }

.copyright{
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.15);
}

/* ---------- Scroll to top ---------- */

#scrollTop{
    position:fixed; right:20px; bottom:20px;
    width:50px; height:50px;
    border:none; border-radius:50%;
    background:#14b8a6; color:white;
    cursor:pointer; display:none;
    font-size:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}
#scrollTop:hover{ background:#0c4a6e; }

/* ---------- Form dasar (fallback umum, tiap halaman boleh override) ---------- */

.form-group{ margin-bottom:20px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:600; color:#0c4a6e; }

.form-control{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
    transition:.3s;
}
.form-control:focus{
    outline:none;
    border-color:#14b8a6;
    box-shadow:0 0 10px rgba(20,184,166,.2);
}
textarea.form-control{ resize:vertical; }

button.btn-primary{
    border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
}


/* ==========================================================
   1. PAGE: BERANDA (.page-beranda)
   ========================================================== */

.page-beranda{
    --ocean-deep:  #052E3E;
    --ocean:       #0B4F6C;
    --sea-teal:    #148B9C;
    --leaf:        #1F7A4D;
    --leaf-deep:   #124E33;
    --sand-gold:   #E3A23B;
    --sand-gold-d: #C9860F;
    --foam:        #F4F8F5;
    --ink:         #12312B;
    --ink-soft:    #5C7368;
    --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;

    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--foam);
}

/* Hero */
.page-beranda .hero-page{
    position: relative;
    min-height: 52vh;
    display: flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 50% 25%, rgba(227, 162, 59, 0.25), transparent 60%),
        linear-gradient(180deg, rgba(5,46,62,0.85) 0%, rgba(18,78,51,0.7) 50%, rgba(5,46,62,0.95) 100%),
        url('../images/Kota Dumai Gambar.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 50px 0 80px;
    border-bottom: 4px solid var(--sand-gold);
}
@supports (-webkit-touch-callout: none) {
    .page-beranda .hero-page{ background-attachment: scroll; }
}

.page-beranda .hero-content{ position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }

.page-beranda .melayu-ornament-top{
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--sand-gold); font-size: 1.1rem; margin-bottom: 8px;
}
.page-beranda .melayu-ornament-top::before,
.page-beranda .melayu-ornament-top::after{
    content: ""; width: 35px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--sand-gold));
    display: inline-block;
}
.page-beranda .melayu-ornament-top::after{
    background: linear-gradient(90deg, var(--sand-gold), transparent);
}

.page-beranda .hero-eyebrow{
    display: inline-block;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    font-size: 0.75rem; color: #ffffff;
    background: linear-gradient(135deg, rgba(227,162,59,0.3), rgba(18,78,51,0.4));
    border: 1px solid var(--sand-gold);
    padding: 6px 18px; border-radius: 30px;
    backdrop-filter: blur(4px);
}

.page-beranda .hero-content h1{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.1rem, 4.8vw, 3.5rem);
    letter-spacing: 0.5px;
    text-shadow: 0 3px 20px rgba(0,0,0,0.5);
    color: #ffffff;
}
.page-beranda .hero-content h1 span.gold-text{
    color: var(--sand-gold);
    text-shadow: 0 2px 10px rgba(227,162,59,0.3);
}
.page-beranda .hero-content p{
    max-width: 680px;
    margin: 16px auto 0;
    font-size: 1.08rem;
    line-height: 1.8;
    opacity: 0.95;
    text-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

/* Search box */
.page-beranda .search-box{ max-width: 480px; margin: 0 auto; position: relative; }
.page-beranda .search-box::before{
    content: "\f002";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    color: var(--sea-teal); font-size: 0.95rem;
}
.page-beranda .search-box input{
    width: 100%;
    padding: 12px 20px 12px 48px;
    border-radius: 40px;
    border: 2px solid var(--sand-gold);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink);
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(5,46,62,0.25);
    outline: none;
    transition: all 0.25s ease;
}
.page-beranda .search-box input:focus{
    box-shadow: 0 10px 28px rgba(227,162,59,0.4);
    border-color: var(--sand-gold-d);
}
.page-beranda .search-box input::placeholder{ color: var(--ink-soft); }

.page-beranda .widget-pill{
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 4px 14px; border-radius: 25px;
    font-size: 0.8rem; color: #ffffff;
}

.page-beranda .wave-divider{ position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; }
.page-beranda .wave-divider svg{ width: 100%; height: 50px; display: block; }

/* Filter menu */
.page-beranda .filter-menu-wrapper{ margin-top: -28px; position: relative; z-index: 3; }
.page-beranda .filter-menu{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 18px;
    border: 1px solid rgba(227,162,59,0.3);
    box-shadow: 0 8px 24px rgba(5,46,62,0.08);
}
.page-beranda .filter-btn{
    border: 1px solid #e0ebe3;
    background: var(--foam);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 18px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.page-beranda .filter-btn:hover{
    background: #e4f3e7; color: var(--leaf-deep); border-color: var(--leaf);
}
.page-beranda .filter-btn.active{
    background: linear-gradient(135deg, var(--leaf-deep), var(--sea-teal));
    color: #ffffff;
    border-color: var(--sand-gold);
    box-shadow: 0 6px 14px rgba(18,78,51,0.3);
}

/* Banner hutan / warisan Melayu */
.page-beranda .forest-banner{
    position: relative;
    margin: 50px 0;
    border-radius: 26px;
    overflow: hidden;
    min-height: 320px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: #ffffff;
    background-image:
        linear-gradient(160deg, rgba(5,46,62,0.7) 0%, rgba(18,78,51,0.85) 100%),
        url('../images/budaya.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border: 2px solid var(--sand-gold);
    box-shadow: 0 14px 40px rgba(5,46,62,0.2);
}
@supports (-webkit-touch-callout: none) {
    .page-beranda .forest-banner{ background-attachment: scroll; }
}
.page-beranda .forest-banner .forest-banner-inner{
    position: relative; z-index: 2; padding: 50px 30px; max-width: 680px;
}
.page-beranda .forest-banner i.fa-crown{ font-size: 2rem; color: var(--sand-gold); margin-bottom: 16px; }
.page-beranda .forest-banner h2{
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    margin-bottom: 14px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
    color: #ffffff;
}
.page-beranda .forest-banner p{ opacity: 0.95; line-height: 1.8; font-size: 1.02rem; }

/* Section title */
.page-beranda .section-title h2{
    font-family: var(--font-display); font-weight: 700; color: var(--ocean-deep);
    margin-bottom: 8px; position: relative; display: inline-block;
}
.page-beranda .section-title h2::after{
    content: ""; display: block; width: 60px; height: 3px;
    background: var(--sand-gold); margin: 8px auto 0; border-radius: 2px;
}
.page-beranda .section-title p{ color: var(--ink-soft); }

/* Kartu destinasi (versi ringkas, tampil di beranda) */
.page-beranda .card-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
}
.page-beranda .destination-card{
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(5,46,62,0.06);
    border: 1px solid #e2ebe4;
    display: block;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.4s ease;
}
.page-beranda .destination-card.in-view{ opacity: 1; transform: translateY(0); }
.page-beranda .destination-card:hover{
    box-shadow: 0 16px 32px rgba(5,46,62,0.14);
    transform: translateY(-5px);
    border-color: var(--sand-gold);
}
.page-beranda .card-media{ position: relative; height: 180px; overflow: hidden; }
.page-beranda .card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.page-beranda .destination-card:hover .card-media img{ transform: scale(1.08); }
.page-beranda .card-media .badge{
    position: absolute; top: 12px; left: 12px;
    background: linear-gradient(135deg, var(--leaf-deep), var(--sea-teal));
    border: 1px solid var(--sand-gold);
    color: #ffffff;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 18px;
}
.page-beranda .card-body{ padding: 18px 20px 20px; }
.page-beranda .card-body h3{
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    color: var(--ocean-deep); margin-bottom: 4px;
}
.page-beranda .rating{ color: var(--sand-gold-d); font-size: 0.85rem; margin-bottom: 8px; }
.page-beranda .card-body p{ color: var(--ink-soft); font-size: 0.88rem; line-height: 1.55; margin-bottom: 12px; }
.page-beranda .info-list{ list-style: none; padding: 0; margin: 0 0 10px; }
.page-beranda .info-list li{ font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 4px; }
.page-beranda .status-badge{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 12px; border-radius: 20px; font-size: 0.76rem; font-weight: 700;
}
.page-beranda .status-badge.open{ background: #e4f3e7; color: var(--leaf-deep); }
.page-beranda .status-badge.closed{ background: #fdeaea; color: #C0392B; }
.page-beranda .card-action .btn-secondary{
    display: inline-block;
    background: var(--foam);
    color: var(--leaf-deep);
    font-weight: 700; font-size: 0.8rem;
    padding: 5px 14px; border-radius: 20px;
    text-decoration: none;
    border: 1px solid #d4ecd8;
    transition: all 0.2s ease;
}
.page-beranda .card-action .btn-secondary:hover{
    background: var(--leaf-deep); color: #ffffff; border-color: var(--leaf-deep);
}
.page-beranda .empty-state{ grid-column: 1 / -1; color: var(--ink-soft); }

/* Kalkulator estimasi rute */
.page-beranda .trip-calculator-card{
    background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--leaf-deep) 100%);
    border-radius: 22px;
    padding: 28px 24px;
    color: #ffffff;
    border: 2px solid var(--sand-gold);
    box-shadow: 0 12px 30px rgba(5,46,62,0.18);
}
.page-beranda .trip-calculator-card .form-select{ border-radius: 10px; border: 1px solid #d2e0d7; }
.page-beranda .trip-calculator-card .form-select:focus{
    border-color: var(--sand-gold);
    box-shadow: 0 0 0 3px rgba(227,162,59,0.25);
}

/* Filter toolbar: dropdown kategori + chip "Sedang Buka" jadi satu bar */
.page-beranda .filter-toolbar{
    background: #ffffff;
    border-radius: 22px;
    padding: 24px 28px;
    box-shadow: 0 12px 30px rgba(5,46,62,0.07);
    border: 1px solid rgba(227,162,59,0.15);
    margin-top: -30px;
    position: relative;
    z-index: 5;
}

.page-beranda .filter-control-group{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-beranda .filter-dropdown{ position: relative; }

.page-beranda .filter-dropdown-toggle{
    display: flex; align-items: center; gap: 10px;
    min-width: 190px;
    background: var(--foam);
    border: 1.5px solid #e0ebe3;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 700; font-size: 0.88rem;
    padding: 11px 18px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.page-beranda .filter-dropdown-toggle:hover{ border-color: var(--leaf); }
.page-beranda .filter-dropdown-toggle i:first-child{ color: var(--sea-teal); }
.page-beranda .filter-dropdown-toggle span{ flex: 1; text-align: left; }
.page-beranda .filter-dropdown-caret{ font-size: 0.72rem; color: var(--ink-soft); transition: transform 0.2s ease; }
.page-beranda .filter-dropdown.open .filter-dropdown-toggle{
    border-color: var(--leaf); background: #ffffff; box-shadow: 0 6px 18px rgba(18,78,51,0.12);
}
.page-beranda .filter-dropdown.open .filter-dropdown-caret{ transform: rotate(180deg); }

.page-beranda .filter-dropdown-menu{
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6eee8;
    box-shadow: 0 18px 40px rgba(5,46,62,0.16);
    padding: 8px;
    list-style: none;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 20;
}
.page-beranda .filter-dropdown.open .filter-dropdown-menu{
    opacity: 1; visibility: visible; transform: translateY(0);
}
.page-beranda .filter-dropdown-menu li{ margin: 0; }
.page-beranda .filter-dropdown-item{
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    background: transparent; border: none;
    padding: 10px 12px; border-radius: 10px;
    font-family: var(--font-body); font-weight: 600; font-size: 0.86rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.page-beranda .filter-dropdown-item i{ width: 16px; text-align: center; color: var(--sea-teal); font-size: 0.8rem; }
.page-beranda .filter-dropdown-item:hover{ background: #e4f3e7; color: var(--leaf-deep); }
.page-beranda .filter-dropdown-item.active{
    background: linear-gradient(135deg, var(--leaf-deep), var(--sea-teal));
    color: #ffffff;
}
.page-beranda .filter-dropdown-item.active i{ color: #ffffff; }

.page-beranda .filter-chip-toggle{
    display: flex; align-items: center; gap: 8px;
    background: var(--foam);
    border: 1.5px solid #e0ebe3;
    color: var(--ink-soft);
    font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
    padding: 11px 18px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.page-beranda .filter-chip-toggle:hover{ border-color: #20c997; }
.page-beranda .filter-chip-toggle.active{
    background: linear-gradient(135deg, #1F7A4D, #20c997);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(32,201,151,0.3);
}

@media (max-width: 767px){
    .page-beranda .hero-page{ min-height: 45vh; padding: 40px 0 65px; }
    .page-beranda .filter-menu-wrapper{ margin-top: -22px; }
    .page-beranda .filter-menu{ padding: 10px; gap: 6px; }
    .page-beranda .filter-btn{ padding: 6px 14px; font-size: 0.8rem; }
    .page-beranda .forest-banner{ min-height: 260px; }
    .page-beranda .trip-calculator-card{ padding: 20px 16px; }
    .page-beranda .filter-toolbar{ margin-top: -22px; padding: 18px 16px; }
    .page-beranda .filter-control-group{ justify-content: stretch; }
    .page-beranda .filter-dropdown{ flex: 1; }
    .page-beranda .filter-dropdown-toggle{ width: 100%; min-width: 0; }
    .page-beranda .filter-chip-toggle{ flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){
    .page-beranda .destination-card, .page-beranda .card-media img{ transition: none; }
}


/* ==========================================================
   2. PAGE: DESTINASI — daftar/list (.page-destinasi)
   ========================================================== */

.page-destinasi{
    --ocean-deep:  #052E3E;
    --ocean:       #0B4F6C;
    --sea-teal:    #148B9C;
    --sand-gold:   #E3A23B;
    --sand-gold-d: #C9860F;
    --foam:        #F3F9FA;
    --ink:         #12313C;
    --ink-soft:    #5C7681;
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Nunito Sans', sans-serif;

    font-family: var(--font-body);
    color: var(--ink);
    background: var(--foam);
}

/* Hero (versi ringkas terkini, dipakai di halaman daftar destinasi) */
.page-destinasi .hero-page,
.page-destinasi .hero-page-destinasi{
    position: relative;
    min-height: 52vh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 50% 10%, rgba(227, 162, 59, 0.25), transparent 100%),
        linear-gradient(180deg, rgba(5,46,62,0.85) 0%, rgba(18,78,51,0.7) 50%, rgba(5,46,62,0.95) 100%),
        url('../images/bg-destinasi-melayu.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 25px 0 80px;
    border-bottom: 4px solid var(--sand-gold);
}
@supports (-webkit-touch-callout: none) {
    .page-destinasi .hero-page,
    .page-destinasi .hero-page-destinasi{ background-attachment: scroll; }
}

.page-destinasi .hero-content{ position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.page-destinasi .hero-eyebrow{
    display: inline-block; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    font-size: .78rem; color: var(--sand-gold);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    padding: 6px 18px; border-radius: 30px; margin-bottom: 22px;
}
.page-destinasi .hero-content h1{
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.1rem, 4.8vw, 3.5rem);
    letter-spacing: .3px;
    text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.page-destinasi .hero-content > p{
    font-size: 1.06rem; line-height: 1.75; opacity: .95; margin: 16px auto 0;
}

/* Search box (dengan tombol) */
.page-destinasi .search-box{
    max-width: 460px; margin: 0 auto; position: relative;
    display: flex; align-items: center;
    background: #fff; border-radius: 40px;
    box-shadow: 0 14px 34px rgba(5,46,62,.28);
    padding: 5px 5px 5px 22px;
    transition: box-shadow .2s ease;
}
.page-destinasi .search-box:focus-within{
    box-shadow: 0 14px 34px rgba(5,46,62,.28), 0 0 0 3px var(--sand-gold);
}
.page-destinasi .search-box i{ color: var(--ink-soft); font-size: .92rem; margin-right: 10px; }
.page-destinasi .search-box input{
    flex: 1; border: none; outline: none; padding: 12px 4px;
    font-size: .98rem; font-family: var(--font-body); color: var(--ink); background: transparent;
}
.page-destinasi .search-box button{
    border: none;
    background: linear-gradient(135deg, var(--ocean), var(--sea-teal));
    color: #fff; font-weight: 700; font-size: .9rem;
    padding: 12px 26px; border-radius: 34px;
    white-space: nowrap;
    transition: filter .2s ease;
}
.page-destinasi .search-box button:hover{ filter: brightness(1.08); }

.page-destinasi .wave-divider{ position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; }
.page-destinasi .wave-divider svg{ width: 100%; height: 70px; display: block; }

/* Filter */
.page-destinasi .filter-menu{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 46px 0 8px;
}
.page-destinasi .filter-btn{
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    color: var(--ocean-deep); background: #fff; border: 1px solid #dfe8ea;
    padding: 10px 26px; border-radius: 30px; cursor: pointer; transition: all .2s ease;
}
.page-destinasi .filter-btn:hover{ border-color: var(--sea-teal); color: var(--sea-teal); }
.page-destinasi .filter-btn.active{
    background: linear-gradient(135deg, var(--ocean), var(--sea-teal));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px rgba(11,79,108,.28);
}

/* Grid kartu destinasi */
.page-destinasi .card-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 30px;
}
.page-destinasi .destination-card{
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 8px 26px rgba(5,46,62,.08);
    border: 1px solid #eef2f4;
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(26px) scale(.98);
    transition: opacity .6s ease, transform .6s ease, box-shadow .25s ease;
}
.page-destinasi .destination-card.in-view{ opacity: 1; transform: translateY(0) scale(1); }
.page-destinasi .destination-card:hover{ box-shadow: 0 20px 40px rgba(5,46,62,.16); transform: translateY(-6px); }
.page-destinasi .destination-card.in-view:hover{ transform: translateY(-6px) scale(1); }

.page-destinasi .card-media{ position: relative; height: 210px; overflow: hidden; background: var(--foam); }
.page-destinasi .card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.page-destinasi .destination-card:hover .card-media img{ transform: scale(1.06); }
.page-destinasi .card-media .badge{
    position: absolute; top: 14px; left: 14px;
    background: rgba(5,46,62,.82); color: #fff;
    font-size: .74rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 20px;
}

.page-destinasi .card-body{ padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.page-destinasi .card-body h3{
    font-family: var(--font-display); font-weight: 700; font-size: 1.16rem;
    color: var(--ocean-deep); margin-bottom: 8px;
}
.page-destinasi .card-body > p{
    color: var(--ink-soft); font-size: .94rem; line-height: 1.65; margin-bottom: 16px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.page-destinasi .rating{ color: var(--sand-gold-d); font-size: .92rem; margin-bottom: 10px; }
.page-destinasi .rating small{ color: var(--ink-soft); margin-left: 4px; }

.page-destinasi .info-list{ list-style: none; padding: 14px 0 0; margin: 0 0 20px; border-top: 1px dashed #e3eaec; }
.page-destinasi .info-list li{ font-size: .88rem; color: var(--ink-soft); margin-bottom: 7px; }
.page-destinasi .info-list li:last-child{ margin-bottom: 0; }
.page-destinasi .info-list .status.open{ color: #1E8E5A; font-weight: 600; }
.page-destinasi .info-list .status.closed{ color: #C0392B; font-weight: 600; }

.page-destinasi .card-action{ margin-top: auto; display: flex; gap: 10px; }
.page-destinasi .card-action .btn-primary,
.page-destinasi .card-action .btn-secondary{
    flex: 1; text-align: center; font-weight: 700; font-size: .9rem;
    padding: 10px 0; border-radius: 30px; text-decoration: none;
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.page-destinasi .card-action .btn-primary{
    background: linear-gradient(135deg, var(--ocean), var(--sea-teal)); color: #fff;
}
.page-destinasi .card-action .btn-primary:hover{ filter: brightness(1.08); color: #fff; }
.page-destinasi .card-action .btn-secondary{ background: var(--foam); color: var(--ocean); border-color: #dcecef; }
.page-destinasi .card-action .btn-secondary:hover{ background: var(--ocean); color: #fff; }

.page-destinasi .empty-state{ grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.page-destinasi .empty-state i{ font-size: 2.4rem; color: #cfdadd; margin-bottom: 14px; display: block; }

/* Pagination (Laravel/Bootstrap default) */
.page-destinasi .pagination-wrapper{ display: flex; justify-content: center; align-items: center; width: 100%; }
.page-destinasi .pagination-wrapper svg{ width: 18px !important; height: 18px !important; vertical-align: middle; }
.page-destinasi .pagination-wrapper nav > div:first-child{ display: none !important; }
.page-destinasi .pagination-wrapper .pagination,
.page-destinasi .pagination-wrapper nav ul{
    display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0;
}
.page-destinasi .pagination-wrapper .page-link,
.page-destinasi .pagination-wrapper nav ul li a,
.page-destinasi .pagination-wrapper nav ul li span{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 14px;
    font-size: 0.92rem; font-weight: 600;
    color: #0B4F6C; background: #ffffff;
    border: 1px solid #E2EAF0; border-radius: 12px !important;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(5, 46, 62, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-destinasi .pagination-wrapper .page-link:hover,
.page-destinasi .pagination-wrapper nav ul li a:hover{
    background: #F3F9FA; color: #148B9C; border-color: #148B9C;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(20, 139, 156, 0.15);
}
.page-destinasi .pagination-wrapper .page-item.active .page-link,
.page-destinasi .pagination-wrapper nav ul li.active span,
.page-destinasi .pagination-wrapper nav ul li [aria-current="page"]{
    background: linear-gradient(135deg, #0B4F6C, #148B9C) !important;
    color: #ffffff !important; border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(11, 79, 108, 0.3) !important;
}
.page-destinasi .pagination-wrapper .page-item.disabled .page-link,
.page-destinasi .pagination-wrapper nav ul li.disabled span,
.page-destinasi .pagination-wrapper nav ul li [aria-disabled="true"]{
    background: #F5F8FA !important; color: #B2C3C9 !important;
    border-color: #E8EEF1 !important; cursor: not-allowed;
    box-shadow: none !important; transform: none !important;
}

/* Pagination model panah samping */
.page-destinasi .destinasi-pagination-container{ position: relative; display: flex; align-items: center; gap: 20px; width: 100%; }
.page-destinasi .destinasi-pagination-container .card-grid{ flex: 1; }
.page-destinasi .nav-arrow{
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; min-width: 50px;
    background: #ffffff; color: var(--ocean-deep);
    border: 1px solid #E2EAF0; border-radius: 50%;
    font-size: 1.1rem; text-decoration: none;
    box-shadow: 0 8px 20px rgba(5, 46, 62, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer; z-index: 5;
}
.page-destinasi .nav-arrow:hover:not(.disabled){
    background: linear-gradient(135deg, var(--ocean), var(--sea-teal));
    color: #ffffff; border-color: transparent;
    transform: scale(1.1);
    box-shadow: 0 10px 24px rgba(20, 139, 156, 0.3);
}
.page-destinasi .nav-arrow.disabled{
    opacity: 0.35; background: #f0f4f6; color: var(--ink-soft);
    border-color: #e0e7eb; cursor: not-allowed; box-shadow: none;
}
.page-destinasi .page-indicator span{
    font-size: 0.9rem; color: var(--ink-soft);
    background: #ffffff; padding: 6px 16px; border-radius: 20px; border: 1px solid #E2EAF0;
}

@media (max-width: 480px){
    .page-destinasi .search-box{ flex-wrap: wrap; border-radius: 22px; padding: 14px 18px; }
    .page-destinasi .search-box input{ width: 100%; padding: 8px 0; }
    .page-destinasi .search-box button{ width: 100%; margin-top: 8px; }
}
@media (max-width: 767px){
    .page-destinasi .hero-page,
    .page-destinasi .hero-page-destinasi{ min-height: 54vh; }
    .page-destinasi .card-action{ flex-direction: column; }
    .page-destinasi .destinasi-pagination-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "cards cards" "prev next";
        gap: 15px;
    }
    .page-destinasi .destinasi-pagination-container .card-grid{ grid-area: cards; width: 100%; }
    .page-destinasi .nav-arrow.nav-prev{ grid-area: prev; justify-self: end; width: 44px; height: 44px; min-width: 44px; }
    .page-destinasi .nav-arrow.nav-next{ grid-area: next; justify-self: start; width: 44px; height: 44px; min-width: 44px; }
}
@media (max-width: 576px){
    .page-destinasi .pagination-wrapper .page-link,
    .page-destinasi .pagination-wrapper nav ul li a,
    .page-destinasi .pagination-wrapper nav ul li span{
        min-width: 36px; height: 36px; padding: 0 10px; font-size: 0.85rem; border-radius: 8px !important;
    }
}
@media (prefers-reduced-motion: reduce){
    .page-destinasi .destination-card, .page-destinasi .card-media img, .page-destinasi .card-action a{ transition: none; }
}

/* Filter toolbar tambahan untuk halaman daftar destinasi */
.page-destinasi .filter-toolbar{
    background:#ffffff;
    border-radius:25px;
    padding:30px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,119,182,.08);
    margin-top:-30px;
    position:relative;
    z-index:5;
}
.page-destinasi .only-open-box{
    background:#f8fafc;
    border-radius:50px;
    padding:12px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e3eaf2;
    transition:.3s;
}
.page-destinasi .only-open-box:hover{
    background:#ecfff1;
    border-color:#20c997;
}
.page-destinasi .only-open-box label{
    cursor:pointer;
    font-weight:600;
    margin-left:8px;
}
.page-destinasi .only-open-box input{
    width:18px;
    height:18px;
}
@media(max-width:991px){
    .page-destinasi .filter-toolbar{ text-align:center; }
    .page-destinasi .only-open-box{ margin-top:20px; }
}


/* ==========================================================
   3. PAGE: DESTINASI — detail (.page-destinasi-detail)
   Tema: "Kartu Pos Perjalanan"
   ========================================================== */

.page-destinasi-detail{
    --forest: #1F4B43;
    --forest-dark: #163831;
    --sand: #FBF8F2;
    --sage: #E7EFE7;
    --gold: #C88A2E;
    --gold-dark: #A76F1D;
    --ink: #1C2521;
    --muted: #5B6B63;
    --danger: #B3452C;
    --danger-dark: #8F3620;
    --line: #DCE3DA;
    --radius: 14px;
    --shadow-soft: 0 10px 30px -12px rgba(28, 37, 33, 0.18);
}

.page-destinasi-detail .container.py-5{ font-family: 'Work Sans', sans-serif; color: var(--ink); }
.page-destinasi-detail h1{
    font-family: 'Fraunces', serif; font-weight: 600; color: var(--forest-dark); letter-spacing: -0.01em;
}
.page-destinasi-detail .lead{ color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

.page-destinasi-detail .breadcrumb{ font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.page-destinasi-detail .breadcrumb-item a{ color: var(--forest); text-decoration: none; }
.page-destinasi-detail .breadcrumb-item a:hover{ text-decoration: underline; }
.page-destinasi-detail .breadcrumb-item.active{ color: var(--gold-dark); }
.page-destinasi-detail .breadcrumb-item + .breadcrumb-item::before{ content: "→"; color: var(--muted); }

.page-destinasi-detail .detail-image-wrap{
    position: relative; padding: 10px; background: #fff;
    border-radius: var(--radius); box-shadow: var(--shadow-soft);
    transform: rotate(-1deg); transition: transform 0.35s ease;
}
.page-destinasi-detail .detail-image-wrap:hover{ transform: rotate(0deg); }
.page-destinasi-detail .detail-image-wrap img{
    width: 100%; height: 100%; max-height: 420px; object-fit: cover;
    border-radius: calc(var(--radius) - 6px); display: block;
}

.page-destinasi-detail .badge-status{
    position: absolute; top: 24px; left: 24px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; background: rgba(255, 255, 255, 0.92);
    color: var(--forest-dark); font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.page-destinasi-detail .badge-status .dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: #3E9B6F; box-shadow: 0 0 0 0 rgba(62, 155, 111, 0.6);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot{
    0%{ box-shadow: 0 0 0 0 rgba(62, 155, 111, 0.55); }
    70%{ box-shadow: 0 0 0 8px rgba(62, 155, 111, 0); }
    100%{ box-shadow: 0 0 0 0 rgba(62, 155, 111, 0); }
}

.page-destinasi-detail .info-list{ border: 1px dashed var(--line); border-radius: var(--radius); overflow: hidden; background: var(--sage); }
.page-destinasi-detail .info-list .list-group-item{
    display: flex; align-items: center; gap: 12px; background: transparent;
    border: none; border-bottom: 1px solid var(--line); padding: 14px 18px;
}
.page-destinasi-detail .info-list .list-group-item:last-child{ border-bottom: none; }
.page-destinasi-detail .info-icon{
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    background: #fff; color: var(--forest); border-radius: 50%;
    font-size: 1rem; box-shadow: 0 2px 6px rgba(31, 75, 67, 0.12);
}

.page-destinasi-detail .action-btn{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; font-size: 0.9rem; font-weight: 600;
    text-decoration: none; border-radius: 999px; border: 1px solid transparent;
    transition: all 0.2s ease;
}
.page-destinasi-detail .btn-back{ background: transparent; color: var(--forest-dark); border-color: var(--forest-dark); }
.page-destinasi-detail .btn-back:hover{ background: var(--forest-dark); color: #fff; }
.page-destinasi-detail .btn-contact{ background: var(--gold); color: #fff; }
.page-destinasi-detail .btn-contact:hover{ background: var(--gold-dark); color: #fff; }

.page-destinasi-detail .btn-delete{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; font-size: 0.9rem; font-weight: 600;
    color: var(--danger); background: transparent;
    border: 1px solid var(--danger); border-radius: 999px;
    cursor: pointer; transition: all 0.2s ease;
}
.page-destinasi-detail .btn-delete:hover{ background: var(--danger-dark); border-color: var(--danger-dark); color: #fff; }

.page-destinasi-detail hr.my-5{ border: none; border-top: 2px dashed var(--line); }
.page-destinasi-detail h5.mb-3{ font-family: 'Fraunces', serif; font-weight: 600; color: var(--forest-dark); }

.page-destinasi-detail .facility-box{
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 22px 12px; height: 100%; text-align: center; font-size: 0.88rem; font-weight: 500;
    color: var(--ink); background: var(--sand); border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.page-destinasi-detail .facility-box i{ font-size: 1.6rem; color: var(--gold); }
.page-destinasi-detail .facility-box:hover{ transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-soft); }

.page-destinasi-detail .action-btn:focus-visible,
.page-destinasi-detail .btn-delete:focus-visible,
.page-destinasi-detail .breadcrumb-item a:focus-visible{
    outline: 2px solid var(--gold-dark); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
    .page-destinasi-detail .detail-image-wrap,
    .page-destinasi-detail .facility-box,
    .page-destinasi-detail .badge-status .dot{ animation: none; transition: none; }
}
@media (max-width: 767.98px){
    .page-destinasi-detail .detail-image-wrap{ transform: none; }
    .page-destinasi-detail .action-btn,
    .page-destinasi-detail .btn-delete{ width: 100%; justify-content: center; }
    .page-destinasi-detail .d-flex.flex-wrap.gap-2{ flex-direction: column; align-items: stretch !important; }
}

/* ---- Tambahan halaman detail destinasi: harga tiket, tombol edit, kartu atraksi, ulasan ---- */

.page-destinasi-detail .price-tag {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: #4d3301;
}
.page-destinasi-detail .price-tag.gratis {
    color: #28a745;
}

.page-destinasi-detail .action-btn.btn-edit {
    color: #fff;
    background: linear-gradient(135deg, #f4a300, #ffb52e);
}
.page-destinasi-detail .action-btn.btn-edit:hover {
    color: #212529;
    box-shadow: 0 8px 20px rgba(244,163,0,.35);
}
.page-destinasi-detail .action-btn.btn-edit:hover i {
    transform: rotate(-8deg);
}

.page-destinasi-detail .detail-atraksi .section-title {
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.page-destinasi-detail .detail-atraksi .section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(135deg, #f4a300, #ffb52e);
}

.page-destinasi-detail .atraksi-card {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.page-destinasi-detail .atraksi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.page-destinasi-detail .atraksi-card .atraksi-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f1f1;
}
.page-destinasi-detail .atraksi-card .atraksi-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.page-destinasi-detail .atraksi-card:hover .atraksi-img-wrap img {
    transform: scale(1.08);
}

.page-destinasi-detail .atraksi-card .card-body {
    padding: 1rem 1.1rem 1.2rem;
}
.page-destinasi-detail .atraksi-card .card-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .5rem;
    color: #212529;
}
.page-destinasi-detail .atraksi-card .badge-kategori {
    display: inline-block;
    padding: .35em .75em;
    font-size: .75rem;
    font-weight: 500;
    border-radius: 50px;
    background: #fff4e0;
    color: #b5760a;
}

.page-destinasi-detail .atraksi-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    width: 100%;
    border: 1px dashed #dee2e6;
    border-radius: 14px;
    color: #6c757d;
    background: #fafafa;
}
.page-destinasi-detail .atraksi-empty i {
    font-size: 1.75rem;
    color: #adb5bd;
}

/* Section Ulasan (gaya testimoni elegan) */
.page-destinasi-detail .ulasan-elegant-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b5760a;
    margin-bottom: .35rem;
}

.page-destinasi-detail .ulasan-elegant-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 2.1rem;
    color: #212529;
    margin-bottom: 0;
}

.page-destinasi-detail .ulasan-summary {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem 1.15rem;
    border-radius: 14px;
    background: #fff4e0;
}
.page-destinasi-detail .ulasan-summary-score {
    font-size: 1.9rem;
    font-weight: 700;
    color: #b5760a;
    line-height: 1;
}
.page-destinasi-detail .ulasan-summary-meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.page-destinasi-detail .ulasan-summary-stars i {
    color: #f4a300;
    font-size: .85rem;
}
.page-destinasi-detail .ulasan-summary-meta small {
    color: #6c757d;
    font-size: .78rem;
}

.page-destinasi-detail .ulasan-elegant-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.25rem;
    padding-left: 34px;
}
.page-destinasi-detail .ulasan-elegant-card:last-of-type {
    margin-bottom: 1rem;
}

.page-destinasi-detail .ulasan-elegant-photo {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    margin-top: 24px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    background: linear-gradient(135deg, #f4a300, #ffb52e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.7rem;
    font-family: 'Playfair Display', serif;
    z-index: 2;
    overflow: hidden;
}
.page-destinasi-detail .ulasan-elegant-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-destinasi-detail .ulasan-elegant-content {
    flex: 1;
    min-width: 0;
    margin-left: -34px;
    padding: 1.75rem 1.75rem 1.5rem 4.75rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,.07);
    position: relative;
}

.page-destinasi-detail .ulasan-elegant-name {
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: .92rem;
    margin-bottom: .35rem;
    color: #212529;
}

.page-destinasi-detail .ulasan-elegant-stars {
    color: #f4a300;
    font-size: .9rem;
    margin-bottom: .9rem;
    letter-spacing: 2px;
}

.page-destinasi-detail .ulasan-elegant-quote {
    font-size: .95rem;
    line-height: 1.7;
    color: #495057;
    margin: 0;
    padding-right: 2rem;
}

.page-destinasi-detail .ulasan-elegant-date {
    display: block;
    font-size: .74rem;
    color: #adb5bd;
    margin-top: .6rem;
}

.page-destinasi-detail .ulasan-elegant-mark {
    position: absolute;
    right: 1.4rem;
    bottom: .6rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.2rem;
    line-height: 1;
    color: #f4a300;
    opacity: .3;
    pointer-events: none;
}

@media (max-width: 576px) {
    .page-destinasi-detail .ulasan-elegant-card {
        padding-left: 0;
    }
    .page-destinasi-detail .ulasan-elegant-photo {
        width: 64px;
        height: 64px;
        font-size: 1.3rem;
        margin-top: 20px;
    }
    .page-destinasi-detail .ulasan-elegant-content {
        margin-left: -22px;
        padding: 1.4rem 1.2rem 1.2rem 3.2rem;
    }
    .page-destinasi-detail .ulasan-elegant-mark {
        font-size: 2.2rem;
    }
}

.page-destinasi-detail .ulasan-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    border: 1px dashed #dee2e6;
    border-radius: 14px;
    color: #6c757d;
    background: #fafafa;
    text-align: center;
}
.page-destinasi-detail .ulasan-empty i {
    font-size: 1.75rem;
    color: #adb5bd;
}

.page-destinasi-detail .action-btn.btn-tulis-ulasan {
    color: #fff;
    background: linear-gradient(135deg, #f4a300, #ffb52e);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.page-destinasi-detail .action-btn.btn-tulis-ulasan:hover {
    color: #212529;
    box-shadow: 0 8px 20px rgba(244,163,0,.35);
}


/* ==========================================================
   4. PAGE: KULINER (.page-kuliner)
   ========================================================== */

.page-kuliner{
    --primary:#0F766E;
    --secondary:#F59E0B;
    --danger:#EF4444;
    --success:#16A34A;
    --light:#F8FAFC;
    --dark:#1F2937;
    --gray:#6B7280;
    --shadow:0 12px 30px rgba(0,0,0,.08);
    --radius:18px;

    background:#f5f7fa;
    color:#333;
}

.page-kuliner .hero-page{
    position:relative;
    background:linear-gradient(rgba(15,118,110,.65),rgba(15,118,110,.65)),
    url("../images/kuliner-bg.jpg") center/cover no-repeat;
    padding:120px 20px;
    color:#fff;
    text-align:center;
}
.page-kuliner .hero-page h1{ font-size:48px; font-weight:700; margin-bottom:20px; }
.page-kuliner .hero-page p{ max-width:700px; margin:auto; font-size:18px; opacity:.95; }
.page-kuliner .hero-eyebrow{
    display:inline-block; padding:8px 20px; background:rgba(255,255,255,.18);
    border-radius:50px; margin-bottom:20px; backdrop-filter:blur(10px);
}

.page-kuliner .search-box{ max-width:600px; margin:40px auto 0; }
.page-kuliner .search-box input{
    width:100%; padding:16px 22px; border:none; border-radius:50px;
    font-size:16px; box-shadow:var(--shadow);
}
.page-kuliner .search-box input:focus{ outline:none; }

.page-kuliner .section-title{ text-align:center; margin-bottom:50px; }
.page-kuliner .section-title h2{ font-size:36px; color:var(--primary); margin-bottom:10px; }
.page-kuliner .section-title p{ color:var(--gray); }

.page-kuliner .filter-menu{
    display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:40px 0;
}
.page-kuliner .filter-btn{
    border:none; padding:12px 24px; border-radius:30px; background:#fff;
    cursor:pointer; transition:.3s; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.page-kuliner .filter-btn:hover, .page-kuliner .filter-btn.active{ background:var(--primary); color:#fff; }

.page-kuliner .card-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:30px;
}

.page-kuliner .food-card{
    background:#fff; border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); transition:.35s;
    opacity:0; transform:translateY(40px);
}
.page-kuliner .food-card.in-view{ opacity:1; transform:translateY(0); }
.page-kuliner .food-card:hover{ transform:translateY(-10px); }

.page-kuliner .food-image{ position:relative; height:240px; overflow:hidden; }
.page-kuliner .food-image img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.page-kuliner .food-card:hover img{ transform:scale(1.08); }

.page-kuliner .badge{
    position:absolute; top:15px; left:15px;
    background:var(--secondary); color:#fff;
    padding:8px 14px; border-radius:30px; font-size:13px; font-weight:600;
}

.page-kuliner .food-body{ padding:24px; }
.page-kuliner .food-body h3{ color:var(--primary); margin-bottom:10px; }
.page-kuliner .food-body p{ color:#666; margin-bottom:18px; }

.page-kuliner .food-info{ list-style:none; margin-bottom:20px; }
.page-kuliner .food-info li{ margin-bottom:8px; color:#555; font-size:15px; }

.page-kuliner .rating{ color:#fbbf24; font-size:18px; margin-bottom:15px; }

.page-kuliner .price{
    display:inline-block; background:#E8F5E9; color:var(--success);
    padding:8px 16px; border-radius:30px; font-weight:700; margin-bottom:18px;
}

.page-kuliner .btn-primary{
    display:inline-block; width:100%; text-align:center; padding:13px;
    background:var(--primary); color:#fff; border-radius:12px;
    text-decoration:none; transition:.3s; font-weight:600;
}
.page-kuliner .btn-primary:hover{ background:#0a5f58; color:#fff; }

.page-kuliner .btn-secondary{
    display:inline-block; width:100%; text-align:center; padding:13px; margin-top:10px;
    background:#f1f5f9; color:#333; border-radius:12px; text-decoration:none; transition:.3s;
}
.page-kuliner .btn-secondary:hover{ background:var(--secondary); color:#fff; }

.page-kuliner .empty-state{ text-align:center; padding:80px 20px; color:#888; }
.page-kuliner .empty-state i{ font-size:60px; color:var(--primary); margin-bottom:20px; }

.page-kuliner .cta-box{
    background:linear-gradient(135deg,var(--primary),#14b8a6);
    padding:70px; border-radius:25px; color:#fff; text-align:center; margin-top:80px;
}
.page-kuliner .cta-box h2{ margin-bottom:15px; }
.page-kuliner .cta-box p{ max-width:700px; margin:auto auto 30px; }

/* Kartu destinasi terkait (dipakai di halaman kuliner) */
.page-kuliner .destination-card{
    background:#fff; border-radius:18px; overflow:hidden; transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.08); height:100%;
}
.page-kuliner .destination-card:hover{ transform:translateY(-8px); }
.page-kuliner .destination-card .img-box{ height:230px; overflow:hidden; }
.page-kuliner .destination-card .img-box img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.page-kuliner .destination-card:hover img{ transform:scale(1.08); }
.page-kuliner .destination-card .body-box{ padding:25px; }
.page-kuliner .destination-card h4{ color:#0B4F6C; font-weight:700; margin-bottom:15px; }
.page-kuliner .destination-card p{ color:#666; line-height:1.8; }

@media(max-width:992px){
    .page-kuliner .hero-page h1{ font-size:38px; }
    .page-kuliner .section-title h2{ font-size:30px; }
}
@media(max-width:768px){
    .page-kuliner .hero-page{ padding:90px 20px; }
    .page-kuliner .hero-page h1{ font-size:30px; }
    .page-kuliner .hero-page p{ font-size:15px; }
    .page-kuliner .card-grid{ grid-template-columns:1fr; }
    .page-kuliner .search-box{ width:100%; }
    .page-kuliner .filter-menu{ gap:10px; }
    .page-kuliner .filter-btn{ width:100%; }
    .page-kuliner .cta-box{ padding:40px 25px; }
}


/* ==========================================================
   5. PAGE: KONTAK (.page-kontak)
   ========================================================== */


.page-kontak{
    --ocean-deep:        #052E3E;
    --ocean:             #0B4F6C;
    --sea-teal:          #148B9C;
    --sea-teal-light:    #EAF4FA;
    --sand-gold:         #E3A23B;
    --sand-gold-hover:   #C9860F;
    --foam:              #F3F9FA;
    --ink:               #12313C;
    --ink-soft:          #5C7681;
    --card-border:       #EEF4F6;
    --font-display:      'Poppins', system-ui, -apple-system, sans-serif;
    --font-body:         'Nunito Sans', system-ui, -apple-system, sans-serif;

    font-family: var(--font-body);
    color: var(--ink);
    background-color: #fafcfd;
    line-height: 1.6;
}

.page-kontak .contact-hero{
    background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean) 50%, var(--sea-teal) 100%);
    color: #ffffff; padding: 70px 0 90px;
    border-radius: 0 0 32px 32px;
    position: relative; overflow: hidden;
    box-shadow: 0 10px 30px rgba(5, 46, 62, 0.15);
}
.page-kontak .contact-hero::before,
.page-kontak .contact-hero::after{
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, 0.04); pointer-events: none;
}
.page-kontak .contact-hero::before{ top: -60px; left: -60px; width: 220px; height: 220px; }
.page-kontak .contact-hero::after{ bottom: -80px; right: -80px; width: 300px; height: 300px; }
.page-kontak .contact-hero h1{ font-family: var(--font-display); letter-spacing: -0.5px; }

.page-kontak .contact-info-card{
    background: #ffffff; border-radius: 20px; padding: 28px 24px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 25px rgba(5, 46, 62, 0.04);
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page-kontak .contact-info-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 35px rgba(5, 46, 62, 0.09); }
.page-kontak .contact-icon-box{
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, var(--ocean-deep), var(--sea-teal));
    color: #ffffff; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(20, 139, 156, 0.25);
}

.page-kontak .form-card{
    background: #ffffff; border-radius: 24px; padding: 38px 32px;
    border: 1px solid var(--card-border);
    box-shadow: 0 12px 35px rgba(5, 46, 62, 0.05);
}
.page-kontak .form-card h3{ font-family: var(--font-display); color: var(--ocean-deep); }
.page-kontak .form-card .form-control,
.page-kontak .form-card .form-select{
    border-radius: 12px; padding: 12px 18px; border: 1.5px solid #e2eaf0;
    font-size: 0.95rem; color: var(--ink); background-color: #fafcfd; transition: all 0.25s ease;
}
.page-kontak .form-card .form-control:focus,
.page-kontak .form-card .form-select:focus{
    background-color: #ffffff; border-color: var(--sea-teal);
    box-shadow: 0 0 0 4px rgba(20, 139, 156, 0.12);
}

.page-kontak .btn-submit-modern{
    background: linear-gradient(135deg, var(--ocean) 0%, var(--sea-teal) 100%);
    color: #ffffff; padding: 14px 28px; border-radius: 14px;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem; border: none;
    transition: all 0.3s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 20px rgba(11, 79, 108, 0.25);
}
.page-kontak .btn-submit-modern:hover{ color: #ffffff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 139, 156, 0.35); }
.page-kontak .btn-submit-modern:active{ transform: translateY(0); }

/* Widget radio streaming */
.page-kontak .radio-widget-card{
    background: linear-gradient(135deg, var(--ocean-deep) 0%, var(--ocean) 100%);
    border-radius: 22px; padding: 28px 24px; color: #ffffff;
    box-shadow: 0 16px 40px rgba(5, 46, 62, 0.22);
    position: relative; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.page-kontak .radio-widget-card::before{
    content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(227, 162, 59, 0.25) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.page-kontak .radio-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-kontak .radio-badge-live{
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(220, 53, 69, 0.2); border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ff6b6b; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px;
}
.page-kontak .radio-badge-live .live-dot{
    width: 8px; height: 8px; background-color: #ff4d4d; border-radius: 50%; animation: livePulse 1.2s infinite;
}
@keyframes livePulse{
    0%{ transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); }
    70%{ transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); }
    100%{ transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
.page-kontak .radio-body-controls{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-kontak .radio-play-btn{
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, var(--sand-gold) 0%, #f4bc65 100%);
    color: var(--ocean-deep); border: none;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer;
    box-shadow: 0 8px 22px rgba(227, 162, 59, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0;
}
.page-kontak .radio-play-btn:hover{ transform: scale(1.08); box-shadow: 0 10px 28px rgba(227, 162, 59, 0.55); }
.page-kontak .radio-play-btn:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }
.page-kontak .radio-info{ flex: 1; min-width: 180px; }
.page-kontak .radio-info h6{ font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; color: #ffffff; line-height: 1.3; }
.page-kontak .radio-info p{ font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); margin: 0; }

.page-kontak .equalizer-bars{ display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.page-kontak .equalizer-bars .bar{ width: 3px; background-color: var(--sand-gold); border-radius: 3px; height: 4px; transition: height 0.2s ease; }
.page-kontak .equalizer-bars.playing .bar{ animation: eqAnim 1s ease-in-out infinite alternate; }
.page-kontak .equalizer-bars.playing .bar:nth-child(1){ animation-delay: 0.1s; }
.page-kontak .equalizer-bars.playing .bar:nth-child(2){ animation-delay: 0.4s; }
.page-kontak .equalizer-bars.playing .bar:nth-child(3){ animation-delay: 0.2s; }
.page-kontak .equalizer-bars.playing .bar:nth-child(4){ animation-delay: 0.5s; }
@keyframes eqAnim{ 0%{ height: 4px; } 100%{ height: 22px; } }

.page-kontak .radio-extra-controls{
    display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.page-kontak .radio-search-box input{
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff; border-radius: 12px; padding: 8px 14px; font-size: 0.85rem; width: 100%;
    outline: none; transition: all 0.2s ease;
}
.page-kontak .radio-search-box input::placeholder{ color: rgba(255, 255, 255, 0.55); }
.page-kontak .radio-search-box input:focus{ border-color: var(--sand-gold); background: rgba(255, 255, 255, 0.15); }

.page-kontak .station-select{
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff; border-radius: 12px; padding: 8px 12px; font-size: 0.85rem;
    outline: none; width: 100%; cursor: pointer; transition: border-color 0.2s ease;
}
.page-kontak .station-select:focus{ border-color: var(--sand-gold); }
.page-kontak .station-select option, .page-kontak .station-select optgroup{
    background-color: var(--ocean-deep); color: #ffffff; padding: 6px;
}

.page-kontak .volume-container{ display: flex; align-items: center; gap: 8px; }
.page-kontak .volume-slider{ width: 85px; height: 4px; accent-color: var(--sand-gold); cursor: pointer; }

.page-kontak .map-container{
    border-radius: 22px; overflow: hidden; box-shadow: 0 12px 32px rgba(5, 46, 62, 0.08); border: 1px solid var(--card-border);
}
.page-kontak .accordion-button:not(.collapsed){ color: var(--sea-teal); background-color: var(--sea-teal-light); }
.page-kontak .accordion-button:focus{ box-shadow: none; border-color: rgba(20, 139, 156, 0.25); }

@media (max-width: 768px){
    .page-kontak .contact-hero{ padding: 45px 0 65px; }
    .page-kontak .form-card{ padding: 26px 20px; }
    .page-kontak .radio-widget-card{ padding: 22px 18px; }
    .page-kontak .radio-play-btn{ width: 50px; height: 50px; font-size: 1.35rem; }
}


/* ==========================================================
   6. PAGE (ADMIN): ATRAKSI — INDEX / DAFTAR (.page-atraksi-index)
   ========================================================== */

.page-atraksi-index .atraksi-hero{
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 1rem; color: #fff; padding: 2.25rem 2rem;
    position: relative; overflow: hidden;
}
.page-atraksi-index .atraksi-hero::before{
    content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
    background: rgba(255, 255, 255, .08); border-radius: 50%;
}
.page-atraksi-index .atraksi-hero::after{
    content: ""; position: absolute; bottom: -60px; right: 60px; width: 120px; height: 120px;
    background: rgba(255, 255, 255, .06); border-radius: 50%;
}
.page-atraksi-index .atraksi-hero .hero-stat{ background: rgba(255, 255, 255, .12); border-radius: .75rem; padding: .6rem 1rem; }

.page-atraksi-index .toolbar-card{ border: none; border-radius: 1rem; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .05); }

.page-atraksi-index .atraksi-card{
    border: none; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 .35rem 1.25rem rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease; height: 100%;
}
.page-atraksi-index .atraksi-card:hover{ transform: translateY(-4px); box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .1); }
.page-atraksi-index .atraksi-card .card-img-wrap{ position: relative; height: 180px; background: #f1f3f5; overflow: hidden; }
.page-atraksi-index .atraksi-card .card-img-wrap img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.page-atraksi-index .atraksi-card:hover .card-img-wrap img{ transform: scale(1.06); }
.page-atraksi-index .atraksi-card .card-img-placeholder{
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ced4da; font-size: 2rem;
}
.page-atraksi-index .atraksi-card .kategori-badge{
    position: absolute; top: .75rem; left: .75rem; padding: .3rem .7rem; border-radius: 2rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #fff;
    box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .15);
}
.page-atraksi-index .badge-budaya{ background: #d97706; }
.page-atraksi-index .badge-alam{ background: #198754; }
.page-atraksi-index .badge-kuliner{ background: #dc3545; }

.page-atraksi-index .atraksi-card .card-price{ font-weight: 700; color: #0d6efd; font-size: 1.05rem; }
.page-atraksi-index .atraksi-card .card-desc{
    color: #6c757d; font-size: .87rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.page-atraksi-index .btn-icon-sm{ border-radius: .5rem; padding: .35rem .6rem; font-size: .85rem; }

.page-atraksi-index .empty-state{ border: 2px dashed #dee2e6; border-radius: 1rem; padding: 3rem 1.5rem; text-align: center; color: #6c757d; }

.page-atraksi-index .guide-card{ border: none; border-radius: 1rem; background: #f8f9fc; }
.page-atraksi-index .guide-step{ display: flex; gap: .85rem; align-items: flex-start; padding: .55rem 0; }
.page-atraksi-index .guide-step-number{
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #0d6efd; color: #fff; font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}


/* ==========================================================
   7. PAGE (ADMIN): ATRAKSI — CREATE / TAMBAH (.page-atraksi-create)
   Sudah dibungkus wrapper ".atraksi-scope" oleh developer,
   jadi CSS-nya sudah aman dari bentrok — dibiarkan apa adanya.
   ========================================================== */

.atraksi-scope{
    --a-ink: #101828;
    --a-ink-soft: #667085;
    --a-ink-faint: #98A2B3;
    --a-bg: #F5F7FA;
    --a-card: #FFFFFF;
    --a-card-muted: #FAFBFC;
    --a-border: #E4E7EC;
    --a-accent: #1F7A5C;
    --a-accent-dark: #175C46;
    --a-accent-soft: #E7F4EF;
    --a-danger: #D92D20;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--a-ink);
}
.atraksi-scope h1, .atraksi-scope h2, .atraksi-scope h3, .atraksi-scope .font-display{ font-family: 'Manrope', 'Inter', sans-serif; }
.atraksi-scope .font-mono{ font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.atraksi-scope .form-atraksi-wrapper{ background: var(--a-bg); min-height: calc(100vh - 100px); padding: 2.75rem 0 4rem; }

.atraksi-scope .breadcrumb-wrapper .breadcrumb{ background: transparent; padding: 0; margin-bottom: 1.5rem; font-size: 0.85rem; }
.atraksi-scope .breadcrumb-wrapper a{ color: var(--a-ink-soft); font-weight: 500; text-decoration: none; }
.atraksi-scope .breadcrumb-wrapper a:hover{ color: var(--a-accent); }
.atraksi-scope .breadcrumb-wrapper .breadcrumb-item.active{ color: var(--a-ink); font-weight: 600; }
.atraksi-scope .breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before{ color: var(--a-ink-faint); }

.atraksi-scope .page-header{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
.atraksi-scope .page-header .badge-new{
    display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.6rem;
    padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--a-accent-soft);
    color: var(--a-accent-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.atraksi-scope .page-header h1{ margin-bottom: 0.35rem; color: var(--a-ink); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; }
.atraksi-scope .page-header p{ max-width: 46ch; margin-bottom: 0; color: var(--a-ink-soft); font-size: 0.95rem; }

.atraksi-scope .atraksi-grid{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; gap: 1.75rem; }

.atraksi-scope .form-atraksi-card{
    overflow: hidden; padding: 0; background: var(--a-card); border: 1px solid var(--a-border);
    border-radius: 0.85rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.atraksi-scope .form-section{ position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 1.1rem; padding: 1.75rem 1.9rem; }
.atraksi-scope .form-section:not(:last-child){ border-bottom: 1px solid var(--a-border); }
.atraksi-scope .form-section .section-marker{ display: flex; flex-direction: column; align-items: center; }
.atraksi-scope .form-section .section-num{
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background: var(--a-accent-soft);
    color: var(--a-accent-dark); font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 700;
}
.atraksi-scope .form-section .section-line{ flex: 1; width: 1.5px; margin-top: 0.4rem; background: var(--a-border); }
.atraksi-scope .section-body h2{ margin-bottom: 0.2rem; color: var(--a-ink); font-size: 1rem; font-weight: 700; }
.atraksi-scope .section-body .section-desc{ margin-bottom: 1.2rem; color: var(--a-ink-soft); font-size: 0.83rem; }

.atraksi-scope .field-block{ margin-bottom: 1.15rem; }
.atraksi-scope .field-block:last-child{ margin-bottom: 0; }
.atraksi-scope .form-label{ display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; color: var(--a-ink); font-size: 0.87rem; font-weight: 600; }
.atraksi-scope .form-label .req{ color: var(--a-danger); }

.atraksi-scope .form-control,
.atraksi-scope .form-select{
    padding: 0.62rem 0.85rem; background: var(--a-card); border: 1.5px solid var(--a-border);
    border-radius: 0.55rem; color: var(--a-ink); font-family: 'Inter', sans-serif; font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.atraksi-scope .form-control:focus,
.atraksi-scope .form-select:focus{ border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(31, 122, 92, 0.13); outline: none; }
.atraksi-scope .form-control::placeholder{ color: var(--a-ink-faint); }

.atraksi-scope .input-group-text{
    background-color: var(--a-card-muted); border: 1.5px solid var(--a-border); border-right: none;
    border-radius: 0.55rem 0 0 0.55rem; color: var(--a-ink-soft); font-family: 'IBM Plex Mono', monospace; font-size: 0.88rem; font-weight: 600;
}
.atraksi-scope .input-group .form-control{ border-radius: 0 0.55rem 0.55rem 0; }
.atraksi-scope .form-text{ margin-top: 0.3rem; color: var(--a-ink-faint); font-size: 0.78rem; }
.atraksi-scope .invalid-feedback{ font-size: 0.78rem; }

.atraksi-scope .kategori-segmented{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.atraksi-scope .seg-option{ position: relative; cursor: pointer; }
.atraksi-scope .seg-option input{ position: absolute; opacity: 0; pointer-events: none; }
.atraksi-scope .seg-face{
    display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.5rem;
    background: var(--a-card); border: 1.5px solid var(--a-border); border-radius: 0.55rem;
    color: var(--a-ink-soft); font-size: 0.85rem; font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.atraksi-scope .seg-face i{ font-size: 0.95rem; }
.atraksi-scope .seg-option:hover .seg-face{ border-color: var(--a-accent); color: var(--a-accent-dark); }
.atraksi-scope .seg-option input:focus-visible + .seg-face{ outline: 3px solid var(--a-accent); outline-offset: 2px; }
.atraksi-scope .seg-option input:checked + .seg-face{ background: var(--a-accent-soft); border-color: var(--a-accent); color: var(--a-accent-dark); }

.atraksi-scope .form-actions{ display: flex; gap: 0.65rem; padding: 1.4rem 1.9rem; background: var(--a-card-muted); border-top: 1px solid var(--a-border); }
.atraksi-scope .btn-simpan{
    padding: 0.65rem 1.5rem; background: var(--a-accent); border: none; border-radius: 0.55rem;
    color: #fff; font-size: 0.9rem; font-weight: 700;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.atraksi-scope .btn-simpan:hover{ background: var(--a-accent-dark); box-shadow: 0 4px 12px rgba(31, 122, 92, 0.28); color: #fff; }
.atraksi-scope .btn-simpan:active{ transform: scale(0.98); }
.atraksi-scope .btn-batal{
    padding: 0.65rem 1.4rem; background: transparent; border: 1.5px solid var(--a-border);
    border-radius: 0.55rem; color: var(--a-ink-soft); font-size: 0.9rem; font-weight: 600;
}
.atraksi-scope .btn-batal:hover{ background: var(--a-card-muted); border-color: var(--a-ink-faint); color: var(--a-ink); }

.atraksi-scope .side-col{ position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.atraksi-scope .side-card{ padding: 1.35rem 1.4rem; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 0.85rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.atraksi-scope .side-card h3{ margin-bottom: 0.2rem; color: var(--a-ink); font-size: 0.88rem; font-weight: 700; }
.atraksi-scope .progress-summary{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.8rem; }
.atraksi-scope .progress-summary .count{ color: var(--a-accent-dark); font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 700; }
.atraksi-scope .progress-track{ height: 6px; margin-bottom: 1.1rem; overflow: hidden; background: var(--a-border); border-radius: 999px; }
.atraksi-scope .progress-fill{ width: 0%; height: 100%; background: var(--a-accent); border-radius: 999px; transition: width 0.25s ease; }

.atraksi-scope .checklist{ display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.atraksi-scope .checklist li{ display: flex; align-items: center; gap: 0.55rem; color: var(--a-ink-soft); font-size: 0.85rem; }
.atraksi-scope .checklist li.is-done{ color: var(--a-ink); }
.atraksi-scope .checklist .check-dot{
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 18px; height: 18px;
    border: 1.5px solid var(--a-border); border-radius: 50%; transition: background 0.15s ease, border-color 0.15s ease;
}
.atraksi-scope .checklist .check-dot i{ color: #fff; font-size: 0.65rem; opacity: 0; transition: opacity 0.15s ease; }
.atraksi-scope .checklist li.is-done .check-dot{ background: var(--a-accent); border-color: var(--a-accent); }
.atraksi-scope .checklist li.is-done .check-dot i{ opacity: 1; }

.atraksi-scope .guide-card .guide-intro{ margin: 0.15rem 0 1rem; color: var(--a-ink-soft); font-size: 0.82rem; line-height: 1.5; }
.atraksi-scope .guide-list{ display: flex; flex-direction: column; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.atraksi-scope .guide-list li{ display: grid; grid-template-columns: 30px 1fr; gap: 0.65rem; }
.atraksi-scope .guide-list .guide-icon{
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px;
    background: var(--a-accent-soft); border-radius: 0.5rem; color: var(--a-accent-dark); font-size: 0.85rem;
}
.atraksi-scope .guide-list .guide-text strong{ display: block; margin-bottom: 0.1rem; color: var(--a-ink); font-size: 0.84rem; font-weight: 700; }
.atraksi-scope .guide-list .guide-text span{ color: var(--a-ink-soft); font-size: 0.8rem; line-height: 1.45; }

@media (max-width: 991px){
    .atraksi-scope .atraksi-grid{ grid-template-columns: 1fr; }
    .atraksi-scope .side-col{ position: static; }
}
@media (max-width: 420px){
    .atraksi-scope .kategori-segmented{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
    .atraksi-scope .progress-fill, .atraksi-scope .btn-simpan, .atraksi-scope .seg-face, .atraksi-scope .checklist .check-dot{ transition: none !important; }
}
.atraksi-scope :focus-visible{ outline: 3px solid var(--a-accent); outline-offset: 2px; }


/* ==========================================================
   8. PAGE (ADMIN): ATRAKSI — EDIT (.page-atraksi-edit)
   ========================================================== */

.page-atraksi-edit .edit-hero{
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 1rem; color: #fff; padding: 2.25rem 2rem;
    position: relative; overflow: hidden;
}
.page-atraksi-edit .edit-hero::before{
    content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
    background: rgba(255, 255, 255, .08); border-radius: 50%;
}
.page-atraksi-edit .edit-hero::after{
    content: ""; position: absolute; bottom: -60px; right: 60px; width: 120px; height: 120px;
    background: rgba(255, 255, 255, .06); border-radius: 50%;
}

.page-atraksi-edit .form-card{ border: none; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .06); }
.page-atraksi-edit .form-section-title{
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; margin-bottom: 1rem;
}
.page-atraksi-edit .form-floating > label{ color: #6c757d; }
.page-atraksi-edit .form-control:focus,
.page-atraksi-edit .form-select:focus{ border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); }

.page-atraksi-edit .preview-box{
    border: 2px dashed #dee2e6; border-radius: .75rem; min-height: 160px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #f8f9fa; color: #adb5bd; font-size: .9rem; text-align: center; padding: .5rem;
}
.page-atraksi-edit .preview-box img{ width: 100%; height: 100%; object-fit: cover; }

.page-atraksi-edit .kategori-badge{
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 2rem; font-size: .78rem; font-weight: 600;
}

.page-atraksi-edit .btn-save{ border-radius: .6rem; padding: .6rem 1.6rem; font-weight: 600; }

.page-atraksi-edit .guide-card{ border: none; border-radius: 1rem; background: #f8f9fc; }
.page-atraksi-edit .guide-step{ display: flex; gap: .85rem; align-items: flex-start; padding: .6rem 0; }
.page-atraksi-edit .guide-step-number{
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #0d6efd; color: #fff; font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.page-atraksi-edit .sticky-actions{
    position: sticky; bottom: 0; background: #fff; padding-top: 1rem; margin-top: .5rem; border-top: 1px solid #eee;
}


/* ==========================================================
   9. PAGE (ADMIN): DAFTAR USER (.page-user-list)
   ========================================================== */

.page-user-list{
    --paper:        #F5F6FB;
    --surface:      #FFFFFF;
    --line:         #E5E8F0;
    --ink:          #1B2233;
    --ink-soft:     #6B7280;
    --ink-faint:    #A0A6B4;
    --indigo:       #4A55D6;
    --indigo-deep:  #3641B0;
    --indigo-tint:  #EEF0FD;
    --teal:         #1F9E90;
    --teal-tint:    #E7F7F4;
    --amber:        #C8892A;
    --amber-tint:   #FBF1DF;
    --coral:        #E14F3B;
    --coral-deep:   #B93A28;
    --coral-tint:   #FDECE9;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 10px 30px rgba(27, 34, 51, .06), 0 1px 2px rgba(27,34,51,.04);
    --shadow-pop:  0 24px 60px rgba(27, 34, 51, .22);
}

.page-user-list .user-page{ font-family: var(--font-body); color: var(--ink); max-width: 1100px; }
.page-user-list .user-page *{ box-sizing: border-box; }

.page-user-list .user-page .breadcrumb{ background: transparent; padding: 0; margin-bottom: 22px; font-family: var(--font-body); font-size: .86rem; }
.page-user-list .user-page .breadcrumb-item a{ color: var(--ink-soft); text-decoration: none; font-weight: 500; transition: color .15s ease; }
.page-user-list .user-page .breadcrumb-item a:hover{ color: var(--indigo); }
.page-user-list .user-page .breadcrumb-item.active{ color: var(--ink); font-weight: 600; }
.page-user-list .user-page .breadcrumb-item + .breadcrumb-item::before{
    content: "→"; color: var(--ink-faint); padding-right: .5rem; font-size: .78rem;
}

.page-user-list .user-page-header{ align-items: flex-end !important; margin-bottom: 28px !important; gap: 16px; flex-wrap: wrap; }
.page-user-list .user-page-header .heading-block .eyebrow{
    display: block; font-family: var(--font-body); font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; font-size: .72rem; color: var(--indigo); margin-bottom: 6px;
}
.page-user-list .user-page-header h2{ font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--ink); margin: 0 0 4px; }
.page-user-list .user-page-header .subcount{ color: var(--ink-soft); font-size: .92rem; margin: 0; }
.page-user-list .user-page-header .subcount strong{ color: var(--ink); font-weight: 700; }

.page-user-list .btn-add-user{
    display: inline-flex; align-items: center; gap: 8px; background: var(--indigo); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem; padding: 12px 22px;
    border-radius: 999px; text-decoration: none; box-shadow: 0 8px 20px rgba(74,85,214,.28);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap;
}
.page-user-list .btn-add-user i{ font-size: .95rem; }
.page-user-list .btn-add-user:hover{
    background: var(--indigo-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(74,85,214,.36);
}

.page-user-list .user-table-wrap{ background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.page-user-list .user-table{ margin: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
.page-user-list .user-table thead th{
    background: var(--paper); color: var(--ink-soft); font-family: var(--font-body); font-weight: 700;
    font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; padding: 16px 22px;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.page-user-list .user-table tbody td{ padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: .94rem; color: var(--ink); vertical-align: middle; }
.page-user-list .user-table tbody tr{ transition: background .15s ease; }
.page-user-list .user-table tbody tr:hover{ background: #FAFAFD; }
.page-user-list .user-table tbody tr:last-child td{ border-bottom: none; }

.page-user-list .user-identity{ display: flex; align-items: center; gap: 12px; }
.page-user-list .user-avatar{
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .88rem; flex-shrink: 0;
}
.page-user-list .user-identity .user-name{ font-weight: 600; color: var(--ink); font-size: .95rem; }
.page-user-list .user-email{ font-family: var(--font-mono); font-size: .84rem; color: var(--ink-soft); }

.page-user-list .role-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .2px; }
.page-user-list .role-badge i{ font-size: .74rem; }
.page-user-list .role-badge.role-admin{ background: var(--amber-tint); color: var(--amber); }
.page-user-list .role-badge.role-user{ background: var(--teal-tint); color: var(--teal); }

.page-user-list .action-cell{ display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.page-user-list .btn-edit-user,
.page-user-list .btn-delete-user{
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600;
    font-size: .82rem; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; transition: all .15s ease; background: transparent;
}
.page-user-list .btn-edit-user{ color: var(--indigo); border-color: var(--indigo-tint); background: var(--indigo-tint); }
.page-user-list .btn-edit-user:hover{ background: var(--indigo); border-color: var(--indigo); color: #fff; }
.page-user-list .btn-delete-user{ color: var(--coral); border-color: var(--coral-tint); background: var(--coral-tint); position:relative; overflow:hidden; }
.page-user-list .btn-delete-user:hover{ background: var(--coral); border-color: var(--coral); color: #fff; }
.page-user-list .btn-delete-user:active{ transform: scale(.96); }

.page-user-list .btn-delete-icon{ display:inline-flex; transition: transform .25s ease; }
.page-user-list .btn-delete-user:hover .btn-delete-icon{ animation: trashShake .45s ease; }
@keyframes trashShake{
    0%, 100%{ transform: rotate(0deg); }
    25%{ transform: rotate(-12deg); }
    50%{ transform: rotate(10deg); }
    75%{ transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){
    .page-user-list .btn-delete-user:hover .btn-delete-icon{ animation:none; }
}

.page-user-list .user-empty{ padding: 70px 20px !important; text-align: center; border-bottom: none !important; }
.page-user-list .user-empty .empty-icon{
    width: 60px; height: 60px; border-radius: 50%; background: var(--indigo-tint); color: var(--indigo);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 16px;
}
.page-user-list .user-empty .empty-title{ font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.page-user-list .user-empty .empty-sub{ color: var(--ink-soft); font-size: .88rem; }

@media (max-width: 767px){
    .page-user-list .user-table thead{ display: none; }
    .page-user-list .user-table, .page-user-list .user-table tbody, .page-user-list .user-table tbody tr, .page-user-list .user-table tbody td{ display: block; width: 100%; }
    .page-user-list .user-table tbody tr{ padding: 16px 18px; border-bottom: 8px solid var(--paper); }
    .page-user-list .user-table tbody td{ border-bottom: none; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .page-user-list .user-table tbody td::before{
        content: attr(data-label); font-size: .7rem; font-weight: 700; letter-spacing: .6px;
        text-transform: uppercase; color: var(--ink-faint); flex-shrink: 0;
    }
    .page-user-list .action-cell{ justify-content: flex-end; }
}

/* Modal konfirmasi "cabut akses" (tekan & tahan) */
.page-user-list .revoke-backdrop{
    position: fixed; inset: 0; background: rgba(20, 24, 38, .55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.page-user-list .revoke-backdrop.is-open{ opacity: 1; visibility: visible; }
.page-user-list .revoke-card{
    position: relative; width: 100%; max-width: 380px; background: var(--surface); border-radius: 18px;
    box-shadow: var(--shadow-pop); padding: 0; overflow: hidden;
    transform: translateY(24px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.page-user-list .revoke-backdrop.is-open .revoke-card{ transform: translateY(0) scale(1); }

.page-user-list .revoke-head{ background: linear-gradient(135deg, var(--ink) 0%, #2B334A 100%); color: #fff; padding: 22px 24px 20px; position: relative; }
.page-user-list .revoke-head .revoke-tag{
    font-family: var(--font-body); font-weight: 700; font-size: .68rem; letter-spacing: 1.6px;
    text-transform: uppercase; color: rgba(255,255,255,.55); display: block; margin-bottom: 10px;
}
.page-user-list .revoke-head .revoke-close{
    position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.1); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem;
    transition: background .15s ease;
}
.page-user-list .revoke-head .revoke-close:hover{ background: rgba(255,255,255,.22); }

.page-user-list .revoke-target{ display: flex; align-items: center; gap: 12px; }
.page-user-list .revoke-target .user-avatar{ width: 46px; height: 46px; font-size: 1rem; }
.page-user-list .revoke-target .revoke-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.page-user-list .revoke-target .revoke-email{ font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.65); }

.page-user-list .revoke-perforation{ position: relative; height: 0; border-top: 2px dashed #E3C3BC; margin: 0 24px; }
.page-user-list .revoke-perforation::before,
.page-user-list .revoke-perforation::after{ content: ""; position: absolute; top: -10px; width: 20px; height: 20px; background: var(--paper); border-radius: 50%; }
.page-user-list .revoke-perforation::before{ left: -34px; }
.page-user-list .revoke-perforation::after{ right: -34px; }

.page-user-list .revoke-body{ padding: 22px 24px 26px; text-align: center; }
.page-user-list .revoke-body p{ color: var(--ink-soft); font-size: .88rem; line-height: 1.6; margin: 0 0 20px; }
.page-user-list .revoke-body p strong{ color: var(--ink); }

.page-user-list .hold-btn{
    position: relative; width: 100%; padding: 15px 20px; border-radius: 999px; border: none;
    background: var(--coral-tint); color: var(--coral-deep); font-family: var(--font-body);
    font-weight: 700; font-size: .92rem; cursor: pointer; overflow: hidden;
    user-select: none; -webkit-user-select: none; touch-action: none;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: color .15s ease;
}
.page-user-list .hold-btn .hold-fill{
    position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
    background: linear-gradient(90deg, var(--coral), var(--coral-deep)); z-index: 0; transition: width .05s linear;
}
.page-user-list .hold-btn .hold-label, .page-user-list .hold-btn i{ position: relative; z-index: 1; }
.page-user-list .hold-btn.is-filling{ color: #fff; }
.page-user-list .hold-btn.is-filling .hold-fill{ transition: none; }
.page-user-list .hold-btn.is-stamped{ background: var(--coral-deep); color: #fff; }
.page-user-list .hold-btn:active{ transform: scale(.99); }

.page-user-list .revoke-hint{
    margin-top: 12px !important; font-size: .74rem !important; color: var(--ink-faint) !important;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.page-user-list .revoke-cancel{
    display: block; margin: 14px auto 0; background: none; border: none; color: var(--ink-soft);
    font-size: .84rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.page-user-list .revoke-cancel:hover{ color: var(--ink); }

.page-user-list .revoke-stamp{
    position: absolute; top: 46%; left: 50%; width: 132px; height: 132px;
    border: 4px solid var(--coral); border-radius: 50%; color: var(--coral);
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center; text-align: center; text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(-18deg) scale(2.2); opacity: 0; pointer-events: none;
    background: rgba(255,255,255,.94); z-index: 5;
}
.page-user-list .revoke-stamp.is-visible{ animation: stampDown .45s cubic-bezier(.2,.85,.35,1.3) forwards; }
@keyframes stampDown{
    0%{ opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(2.4); }
    60%{ opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(.92); }
    100%{ opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
    .page-user-list .revoke-card, .page-user-list .revoke-backdrop, .page-user-list .hold-btn .hold-fill, .page-user-list .revoke-stamp{
        transition: none !important; animation: none !important;
    }
}

.page-user-list .yt-player-frame{ position:absolute; width:0; height:0; overflow:hidden; }

/* ============================================================
   10. PAGE (ADMIN): EDIT DESTINASI (.page-destinasi-edit)
   ============================================================ */

.page-destinasi-edit{
    --sea-green: #0d9488;
    --sea-green-dark: #0f766e;
    --sky-blue: #38bdf8;
    --sky-blue-dark: #0ea5e9;
}

.page-destinasi-edit .form-page-header {
    background: linear-gradient(135deg, var(--sea-green) 0%, var(--sky-blue) 100%);
    border-radius: 18px;
    padding: 40px 35px;
    color: #fff;
    margin-bottom: -60px;
    position: relative;
    z-index: 1;
}
.page-destinasi-edit .form-page-header h2 { font-weight: 700; margin-bottom: 4px; }
.page-destinasi-edit .form-page-header p { opacity: .9; margin-bottom: 0; }

.page-destinasi-edit .edit-destinasi-card,
.page-destinasi-edit .form-card {
    position: relative;
    z-index: 2;
    border: none;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(13,148,136,.12);
    overflow: hidden;
}

.page-destinasi-edit .edit-destinasi-header {
    background: linear-gradient(135deg, #0a5c8a, #17a2b8);
    color: #fff;
    padding: 2rem 2rem 1.5rem;
}
.page-destinasi-edit .edit-destinasi-header .icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .75rem;
}

.page-destinasi-edit .edit-destinasi-body {
    padding: 2rem;
}

.page-destinasi-edit .edit-destinasi-body .form-label,
.page-destinasi-edit .form-label {
    font-weight: 600;
    font-size: .9rem;
    color: #343a40;
}

.page-destinasi-edit .edit-destinasi-body .form-control,
.page-destinasi-edit .edit-destinasi-body .form-select,
.page-destinasi-edit .form-control,
.page-destinasi-edit .form-select {
    border-color: #dfe6ea;
    padding: .6rem .9rem;
    border-left: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.page-destinasi-edit .edit-destinasi-body .form-control:focus,
.page-destinasi-edit .edit-destinasi-body .form-select:focus,
.page-destinasi-edit .form-control:focus,
.page-destinasi-edit .form-select:focus {
    border-color: var(--sky-blue-dark);
    box-shadow: 0 0 0 .2rem rgba(56,189,248,.2);
}
.page-destinasi-edit textarea.form-control { border-left: 1px solid #ced4da; }

.page-destinasi-edit .form-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--sea-green-dark);
    margin-bottom: 16px;
}
.page-destinasi-edit .form-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e9ecef;
}
.page-destinasi-edit .form-section-label:not(:first-child) {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #e9ecef;
}

.page-destinasi-edit .input-group-text {
    background: #eefbfa;
    border-right: none;
    color: var(--sea-green-dark);
}
.page-destinasi-edit .input-group:focus-within .input-group-text {
    border-color: var(--sky-blue-dark);
    color: var(--sea-green-dark);
}

.page-destinasi-edit .harga-input-group .input-group-text {
    background: #fff4e0;
    color: #b5760a;
    font-weight: 700;
    border-color: #dfe6ea;
}

.page-destinasi-edit .form-text{ font-size: .8rem; }

/* Preview gambar interaktif */
.page-destinasi-edit .gambar-edit-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.page-destinasi-edit .gambar-preview-box {
    position: relative;
    flex-shrink: 0;
    width: 170px;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f1f1;
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.page-destinasi-edit .gambar-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-destinasi-edit .gambar-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    background: rgba(10,92,138,.6);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.page-destinasi-edit .gambar-preview-box:hover .gambar-preview-overlay {
    opacity: 1;
}
.page-destinasi-edit .gambar-preview-box.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 1.8rem;
    border: 1px dashed #dee2e6;
}

.page-destinasi-edit .gambar-upload-col {
    flex: 1;
    min-width: 200px;
}
.page-destinasi-edit .gambar-upload-hint {
    font-size: .78rem;
    color: #6c757d;
    margin-top: .4rem;
}
.page-destinasi-edit .gambar-upload-error {
    font-size: .78rem;
    color: #dc3545;
    margin-top: .4rem;
}

/* Tombol aksi */
.page-destinasi-edit .btn-submit-destinasi,
.page-destinasi-edit .btn-save {
    background: linear-gradient(135deg, var(--sea-green) 0%, var(--sky-blue-dark) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 10px;
    transition: opacity .2s ease, box-shadow .2s ease, transform .2s ease;
}
.page-destinasi-edit .btn-submit-destinasi:hover,
.page-destinasi-edit .btn-save:hover {
    opacity: .95;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(13,148,136,.25);
}

.page-destinasi-edit .btn-cancel-destinasi,
.page-destinasi-edit .btn-cancel {
    border-radius: 10px;
    border-color: #dfe6ea;
    color: #495057;
    font-weight: 600;
    padding: 10px 24px;
    transition: background .2s ease, border-color .2s ease;
}
.page-destinasi-edit .btn-cancel-destinasi:hover,
.page-destinasi-edit .btn-cancel:hover {
    background: #f8f9fa;
    border-color: #ced4da;
    color: #212529;
}

/* Kotak info penghapusan */
.page-destinasi-edit .delete-info-box {
    background: #f0fdfa;
    border: 1px dashed var(--sea-green);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 28px;
}
.page-destinasi-edit .delete-info-box .info-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sea-green), var(--sky-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.page-destinasi-edit .delete-info-box h6 {
    font-weight: 700;
    color: var(--sea-green-dark);
    margin-bottom: 4px;
}
.page-destinasi-edit .delete-info-box p {
    color: #495057;
    font-size: .87rem;
    margin-bottom: 0;
    line-height: 1.6;
}


/* ==========================================================================
   11. PAGE: AUTH — LOGIN / REGISTER (.page-auth)
   Versi Avatar Card (versi final yang dipakai)
   ========================================================================== */

body.page-auth {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--dumai-navy);
}

.page-auth{
    --dumai-navy: #0F2A3D;
    --dumai-slate: #5B7185;
    --dumai-primary: #0B6FB8;
    --dumai-primary-dark: #084F87;
    --dumai-teal: #12A69A;
    --dumai-bg-top: #0B6FB8;
    --dumai-bg-bottom: #0C3A5C;
    --dumai-border: #E3EAF1;
    --dumai-card: #FFFFFF;
    --dumai-danger: #DC3545;
    --dumai-danger-bg: #FDECEE;
    --dumai-success: #12A69A;
    --dumai-success-bg: #E7F6F4;
    --radius-lg: 26px;
    --radius-md: 12px;
}

/* Latar halaman: gradasi laut + ombak dekoratif */
.page-auth .login-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 40px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--dumai-bg-top) 0%, var(--dumai-bg-bottom) 100%);
}

.page-auth .login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 15%, rgba(255,255,255,0.10) 0, transparent 40%),
        radial-gradient(circle at 88% 8%, rgba(255,255,255,0.08) 0, transparent 35%);
    pointer-events: none;
}

.page-auth .login-page::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 160' preserveAspectRatio='none'%3E%3Cpath d='M0 90 Q125 60 250 90 T500 90 T750 90 T1000 90 L1000 160 L0 160 Z' fill='%23FFFFFF' fill-opacity='0.06'/%3E%3Cpath d='M0 115 Q125 90 250 115 T500 115 T750 115 T1000 115 L1000 160 L0 160 Z' fill='%23FFFFFF' fill-opacity='0.09'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

/* Kartu login */
.page-auth .login-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    background: var(--dumai-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -15px rgba(8, 30, 48, 0.45);
    padding: 76px 34px 34px;
    text-align: center;
    box-sizing: border-box;
}

/* Avatar (mengambang di atas kartu) */
.page-auth .login-avatar {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin-bottom: 0;
}

.page-auth .avatar-circle {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, var(--dumai-primary), var(--dumai-teal));
    box-shadow: 0 10px 22px -6px rgba(11, 111, 184, 0.55);
    margin: 0 auto;
}

.page-auth .avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    display: block;
}

/* Judul */
.page-auth .login-title-box {
    border: none;
    height: auto;
    margin-bottom: 0;
}
.page-auth .login-title-box h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    color: var(--dumai-navy);
    margin: 0 0 22px;
}

/* Alert */
.page-auth .login-alert {
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    margin: 0 0 16px;
}

.page-auth .login-success {
    background: var(--dumai-success-bg);
    color: #0C7A70;
    border: none;
}

.page-auth .login-danger {
    background: var(--dumai-danger-bg);
    color: var(--dumai-danger);
    border: none;
}

/* Form */
.page-auth .login-container form,
.page-auth .register-card form {
    text-align: left;
    padding: 0;
}

.page-auth .login-form-group {
    margin-bottom: 16px;
}

.page-auth .login-form-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dumai-slate);
    margin-bottom: 7px;
}

.page-auth .login-input {
    position: relative;
    width: 100%;
}

.page-auth .login-input input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    height: auto;
    font-size: 0.92rem;
    font-family: 'Inter', sans-serif;
    color: var(--dumai-navy);
    background: #F6F9FC;
    border: 1.5px solid var(--dumai-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.page-auth .login-input input::placeholder {
    color: #A7B4C0;
}

.page-auth .login-input input:focus {
    border-color: var(--dumai-primary);
    background: #FFFFFF;
    box-shadow: none;
}

.page-auth .login-input input.input-error {
    border-color: var(--dumai-danger);
    background: var(--dumai-danger-bg);
}

.page-auth .password-wrapper input {
    padding-right: 44px;
}

.page-auth .password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    left: auto;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--dumai-slate);
    cursor: pointer;
    border-radius: 50%;
    font-size: 15px;
    transition: color 0.15s ease, background 0.15s ease;
}

.page-auth .password-toggle:hover {
    color: var(--dumai-primary);
    background: rgba(11, 111, 184, 0.08);
}

.page-auth .login-error {
    font-size: 0.76rem;
    color: var(--dumai-danger);
    margin-top: 6px;
}

/* Tombol Masuk */
.page-auth .login-button {
    width: 100%;
    padding: 13px 0;
    height: auto;
    margin-top: 4px;
    background: var(--dumai-primary);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.page-auth .login-button:hover {
    background: var(--dumai-primary-dark);
    transform: translateY(-1px);
}

.page-auth .login-button:active {
    transform: translateY(0);
}

/* Ingat saya */
.page-auth .remember-wrapper {
    margin-top: 16px;
    padding: 0;
    display: flex;
    justify-content: center;
}

.page-auth .remember-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--dumai-slate);
    cursor: pointer;
    user-select: none;
}

.page-auth .remember-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--dumai-primary);
    cursor: pointer;
}

/* Footer */
.page-auth .login-footer {
    min-height: auto;
    margin-top: 22px;
    padding: 18px 0 0;
    border-top: 1px solid var(--dumai-border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.page-auth .cancel-button {
    display: inline;
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--dumai-slate);
    text-decoration: none;
}

.page-auth .cancel-button:hover {
    background: transparent;
    color: var(--dumai-navy);
    text-decoration: underline;
}

.page-auth .forgot-password {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--dumai-primary);
    text-decoration: none;
}

.page-auth .forgot-password span {
    color: inherit;
    text-decoration: underline;
}

.page-auth .forgot-password:hover {
    color: var(--dumai-primary-dark);
}

/* Register */
.page-auth .register-card {
    padding-top: 25px;
}
.page-auth .register-avatar {
    margin-bottom: 30px;
}
.page-auth .register-avatar .avatar-circle i {
    font-size: 92px;
}
.page-auth .register-card .login-form-group {
    margin-bottom: 14px;
}
.page-auth .register-confirm-group {
    margin-bottom: 18px !important;
}
.page-auth .register-button {
    margin-top: 3px;
    margin-bottom: 15px;
}
.page-auth .register-footer {
    margin-top: 0;
}
.page-auth .register-login-link {
    white-space: nowrap;
}

/* Validasi */
.page-auth .login-input input.input-error {
    border-color: #e53935;
}

/* Responsif */
@media (max-width: 600px) {
    .page-auth .login-page {
        padding-top: 15px;
        padding-bottom: 25px;
    }
    .page-auth .login-container {
        max-width: calc(100% - 20px);
        padding: 70px 24px 28px;
        border-radius: 20px;
    }
    .page-auth .login-title-box h1 {
        font-size: 1.12rem;
    }
    .page-auth .register-avatar {
        margin-bottom: 24px;
    }
    .page-auth .register-avatar .avatar-circle {
        width: 160px;
        height: 160px;
    }
    .page-auth .register-avatar .avatar-circle i {
        font-size: 70px;
    }
    .page-auth .register-card form {
        padding-left: 15px;
        padding-right: 15px;
    }
    .page-auth .register-footer {
        padding: 20px 15px;
    }
    .page-auth .register-login-link {
        font-size: 14px;
    }
}


/* ==========================================================
   12. DASHBOARD ADMIN — quick menu, chat, activity, online badge
   ========================================================== */

.quick-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 15px;
    background: #f8faf9;
    border: 1px solid #edf1ef;
    text-decoration: none;
    transition: all .3s ease;
    height: 100%;
}
.quick-menu:hover {
    transform: translateY(-4px);
    background: #fff;
    border-color: rgba(14,59,54,.15);
    box-shadow: 0 8px 20px rgba(14,59,54,.10);
}
.quick-menu strong {
    display: block;
    color: #24332F;
    font-size: 13px;
}
.quick-menu span {
    display: block;
    color: #8A9692;
    font-size: 11px;
    margin-top: 3px;
}
.quick-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
}
.quick-icon.green { color: #0E3B36; background: rgba(14,59,54,.10); }
.quick-icon.gold { color: #B78320; background: rgba(214,168,79,.15); }
.quick-icon.blue { color: #2980B9; background: rgba(41,128,185,.12); }
.quick-icon.purple { color: #7053A5; background: rgba(112,83,165,.12); }
.quick-icon.orange { color: #D97706; background: rgba(217,119,6,.12); }
.quick-icon.gray { color: #64748B; background: rgba(100,116,139,.12); }

.online-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 20px;
    background: rgba(25,135,84,.08);
    color: #198754;
    font-size: 11px;
    font-weight: 600;
}
.online-badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #198754;
    animation: onlinePulse 1.5s infinite;
}
@keyframes onlinePulse {
    0% { box-shadow: 0 0 0 0 rgba(25,135,84,.4); }
    70% { box-shadow: 0 0 0 7px rgba(25,135,84,0); }
    100% { box-shadow: 0 0 0 0 rgba(25,135,84,0); }
}

.chat-list {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 5px;
}
.chat-item {
    display: flex;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1ef;
}
.chat-item:last-child { border-bottom: 0; }
.chat-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #0E3B36;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.avatar-gold { background: #B78320; }
.avatar-blue { background: #2980B9; }
.chat-content { flex: 1; }
.chat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.chat-top strong { color: #24332F; font-size: 13px; }
.chat-top small { color: #9AA5A1; font-size: 10px; }
.chat-content p {
    margin: 6px 0;
    color: #697671;
    font-size: 12px;
    line-height: 1.6;
}
.chat-actions { display: flex; gap: 8px; }
.chat-actions button {
    border: 0;
    background: transparent;
    color: #0E3B36;
    padding: 0;
    font-size: 11px;
    cursor: pointer;
}
.chat-actions button:hover { color: #D6A84F; }
.view-all-btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 10px;
    background: rgba(14,59,54,.08);
    color: #0E3B36;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}
.view-all-btn:hover { background: #0E3B36; color: #fff; }

.activity-item {
    display: flex;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1ef;
}
.activity-item:last-child { border-bottom: 0; }
.activity-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activity-icon.green { color: #0E3B36; background: rgba(14,59,54,.10); }
.activity-icon.gold { color: #B78320; background: rgba(214,168,79,.15); }
.activity-icon.blue { color: #2980B9; background: rgba(41,128,185,.12); }
.activity-icon.purple { color: #7053A5; background: rgba(112,83,165,.12); }
.activity-content { flex: 1; }
.activity-content strong { display: block; color: #24332F; font-size: 12px; }
.activity-content span { display: block; color: #7F8B87; font-size: 11px; margin-top: 3px; }
.activity-content small { display: block; color: #A0AAA6; font-size: 10px; margin-top: 4px; }

@media(max-width: 576px) {
    .quick-menu { padding: 12px; }
    .quick-icon { width: 38px; height: 38px; min-width: 38px; }
    .chat-top { align-items: flex-start; flex-direction: column; gap: 2px; }
}
/* =========================================================
   FIX FINAL — KARTU DESTINASI & GAMBAR
   ========================================================= */

body.page-destinasi {
    background: #f3f9fa;
}

/* GRID */
.page-destinasi .card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* CARD */
.page-destinasi .destination-card {
    position: relative;
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-width: 0;

    background: #ffffff;
    border: 1px solid #e4ecef;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 24px rgba(5, 46, 62, 0.08);

    opacity: 1;
    transform: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* HOVER */
.page-destinasi .destination-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 139, 156, 0.35);

    box-shadow:
        0 16px 34px rgba(5, 46, 62, 0.14);
}

/* =========================================================
   GAMBAR
   ========================================================= */

.page-destinasi .card-media {
    position: relative;

    width: 100%;
    height: 205px;

    flex: 0 0 205px;

    overflow: hidden;

    background: #eaf3f4;

    margin: 0;
    padding: 0;

    line-height: 0;
}

/* GAMBAR */
.page-destinasi .card-media img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center;

    border: 0;
    outline: 0;

    transition:
        transform 0.45s ease,
        filter 0.3s ease;
}

/* Efek gambar */
.page-destinasi .destination-card:hover .card-media img {
    transform: scale(1.05);
    filter: brightness(1.03);
}

/* Overlay halus pada gambar */
.page-destinasi .card-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.00) 45%,
            rgba(0, 0, 0, 0.12) 100%
        );

    pointer-events: none;
}

/* =========================================================
   BADGE KATEGORI
   ========================================================= */

.page-destinasi .card-media .badge {
    position: absolute;
    top: 12px;
    left: 12px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    padding: 5px 12px;

    background: rgba(5, 46, 62, 0.88);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;

    line-height: 1.2;

    backdrop-filter: blur(5px);
}

/* =========================================================
   CARD BODY
   ========================================================= */

.page-destinasi .card-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    min-height: 0;

    padding: 18px 19px 20px;

    background: #ffffff;

    border: 0;
}

/* Judul */
.page-destinasi .card-body h3 {
    margin: 0 0 7px;

    color: #052e3e;

    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;

    line-height: 1.35;
}

/* Deskripsi */
.page-destinasi .card-body > p {
    margin: 0 0 12px;

    color: #5c7681;

    font-size: 0.86rem;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}

/* =========================================================
   RATING
   ========================================================= */

.page-destinasi .rating {
    display: flex;
    align-items: center;
    gap: 2px;

    margin: 0 0 10px;

    color: #e3a23b;

    font-size: 0.85rem;
}

.page-destinasi .rating small {
    margin-left: 5px;

    color: #78909c;

    font-size: 0.75rem;
}

/* =========================================================
   INFORMASI DESTINASI
   ========================================================= */

.page-destinasi .info-list {
    list-style: none;

    margin: 5px 0 15px;
    padding: 12px 0 0;

    border-top: 1px dashed #e1e9ec;
}

.page-destinasi .info-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin: 0 0 7px;

    color: #607d86;

    font-size: 0.78rem;
    line-height: 1.45;
}

.page-destinasi .info-list li:last-child {
    margin-bottom: 0;
}

/* =========================================================
   STATUS BUKA / TUTUP
   ========================================================= */

.page-destinasi .info-list .status {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 0.73rem;
    font-weight: 700;

    line-height: 1.2;
}

.page-destinasi .info-list .status.open {
    color: #16734b;
    background: #e7f6ed;
}

.page-destinasi .info-list .status.closed {
    color: #b42318;
    background: #fdebea;
}

/* =========================================================
   TOMBOL
   ========================================================= */

.page-destinasi .card-action {
    display: flex;
    gap: 8px;

    margin-top: auto;
    padding-top: 5px;
}

.page-destinasi .card-action a {
    flex: 1;

    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;

    border-radius: 10px;

    font-size: 0.78rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.page-destinasi .card-action a:hover {
    transform: translateY(-2px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .page-destinasi .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 850px) {

    .page-destinasi .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

}

@media (max-width: 576px) {

    .page-destinasi .card-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .page-destinasi .card-media {
        height: 220px;
        flex-basis: 220px;
    }

    .page-destinasi .card-body {
        padding: 17px 18px 19px;
    }

}
/* ============================================================
   VISIT DUMAI — DESTINASI DETAIL
   Versi final: modern, rapi, elegan, responsif
   ============================================================ */

.page-destinasi-detail {
    --dd-primary: #006b78;
    --dd-primary-dark: #034b58;
    --dd-primary-soft: #e9f6f5;
    --dd-accent: #e6a72d;
    --dd-accent-soft: #fff5dc;
    --dd-text: #17343c;
    --dd-muted: #6b7f86;
    --dd-border: #e2ebed;
    --dd-surface: #ffffff;
    --dd-background: #f5f9f8;
    --dd-danger: #c94343;
    --dd-shadow: 0 16px 40px rgba(3, 55, 65, .09);
    --dd-radius: 22px;
    --dd-font: 'Poppins', sans-serif;

    background:
        radial-gradient(circle at 8% 10%, rgba(230, 167, 45, .08), transparent 22rem),
        radial-gradient(circle at 92% 20%, rgba(0, 107, 120, .07), transparent 24rem),
        var(--dd-background);
    color: var(--dd-text);
    font-family: var(--dd-font);
}

.page-destinasi-detail * {
    box-sizing: border-box;
}

.page-destinasi-detail img {
    max-width: 100%;
}

.destination-detail-page {
    min-height: 100vh;
    padding: 34px 0 70px;
}

.destination-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.destination-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--dd-muted);
    font-size: .82rem;
}

.destination-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dd-primary);
    text-decoration: none;
    font-weight: 600;
}

.destination-breadcrumb a:hover {
    color: var(--dd-primary-dark);
}

.destination-breadcrumb > i {
    color: #9badb1;
    font-size: .72rem;
}

.destination-breadcrumb span {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   HERO DETAIL
   ============================================================ */

.destination-hero-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(0, 107, 120, .10);
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--dd-shadow);
}

.destination-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 34px;
    align-items: stretch;
}

.destination-photo-column {
    min-width: 0;
}

.destination-main-photo {
    position: relative;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    border-radius: 22px;
    background: #dfeceb;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.destination-main-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease, filter .4s ease;
}

.destination-main-photo:hover > img {
    transform: scale(1.025);
    filter: saturate(1.04);
}

.destination-photo-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(0deg, rgba(0, 38, 45, .38), transparent 48%);
}

.destination-open-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(9, 91, 70, .88);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0,0,0,.13);
    backdrop-filter: blur(8px);
}

.destination-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #73e6a5;
    box-shadow: 0 0 0 4px rgba(115,230,165,.18);
}

.destination-photo-caption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 12px;
    background: rgba(2, 38, 45, .62);
    color: #fff;
    font-size: .78rem;
    backdrop-filter: blur(8px);
}

.destination-photo-caption i {
    color: #ffd36a;
}

/* ============================================================
   INFORMASI
   ============================================================ */

.destination-info-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 10px 8px 10px 0;
}

.destination-category {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-bottom: 16px;
    padding: 7px 12px;
    border: 1px solid rgba(0,107,120,.14);
    border-radius: 999px;
    background: var(--dd-primary-soft);
    color: var(--dd-primary-dark);
    font-size: .74rem;
    font-weight: 700;
}

.destination-eyebrow,
.destination-section-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--dd-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.destination-title {
    margin: 0;
    color: var(--dd-primary-dark);
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.destination-title-line {
    width: 74px;
    height: 4px;
    margin: 18px 0 20px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--dd-accent), var(--dd-primary));
}

.destination-description {
    margin-bottom: 20px;
}

.destination-description p {
    margin: 0;
    color: #536b72;
    font-size: .92rem;
    line-height: 1.8;
}

.destination-description .is-muted,
.is-muted {
    color: #9aa9ad !important;
}

/* ============================================================
   INFO BOX
   ============================================================ */

.destination-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.destination-info-box {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 13px 11px;
    border: 1px solid var(--dd-border);
    border-radius: 14px;
    background: #fbfdfd;
}

.destination-info-icon {
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--dd-primary-soft);
    color: var(--dd-primary);
    font-size: .85rem;
}

.destination-info-box div {
    min-width: 0;
}

.destination-info-box small {
    display: block;
    margin-bottom: 4px;
    color: #829297;
    font-size: .65rem;
    font-weight: 600;
}

.destination-info-box strong {
    display: block;
    color: var(--dd-text);
    font-size: .72rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.destination-info-box .price-free {
    color: #1c8a5d;
}

.destination-info-box .price-normal {
    color: var(--dd-primary-dark);
}

/* ============================================================
   ACTIONS
   ============================================================ */

.destination-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.destination-action,
.destination-write-review,
.destination-detail-button {
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.destination-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .76rem;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.destination-action:hover,
.destination-write-review:hover {
    transform: translateY(-2px);
}

.destination-action-back {
    background: #f1f5f5;
    border-color: var(--dd-border);
    color: #47646b;
}

.destination-action-contact {
    background: var(--dd-primary);
    color: #fff;
    box-shadow: 0 7px 18px rgba(0,107,120,.16);
}

.destination-action-map {
    background: #fff6df;
    border-color: #f0d998;
    color: #956e18;
}

.destination-action-edit {
    background: #edf3ff;
    color: #3567a9;
}

.destination-action-delete {
    background: #fff0f0;
    color: var(--dd-danger);
    border-color: #f4d2d2;
}

.destination-action-contact:hover {
    background: var(--dd-primary-dark);
    color: #fff;
}

.destination-delete-form {
    margin: 0;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.destination-section {
    margin-top: 54px;
}

.destination-section-heading {
    margin-bottom: 22px;
}

.destination-section-heading h2,
.destination-review-heading h2 {
    margin: 0 0 8px;
    color: var(--dd-primary-dark);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.destination-section-heading p {
    max-width: 650px;
    margin: 0;
    color: var(--dd-muted);
    font-size: .86rem;
    line-height: 1.7;
}

/* ============================================================
   ATRAKSI
   ============================================================ */

.destination-attraction-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.destination-attraction-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--dd-border);
    border-radius: 18px;
    background: var(--dd-surface);
    box-shadow: 0 8px 24px rgba(3,55,65,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.destination-attraction-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(3,55,65,.11);
}

.destination-attraction-image {
    position: relative;
    height: 205px;
    overflow: hidden;
    background: #e7eeee;
}

.destination-attraction-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.destination-attraction-card:hover .destination-attraction-image img {
    transform: scale(1.045);
}

.destination-attraction-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px;
}

.destination-attraction-category {
    align-self: flex-start;
    margin-bottom: 8px;
    color: var(--dd-primary);
    font-size: .67rem;
    font-weight: 800;
}

.destination-attraction-body h3 {
    margin: 0 0 8px;
    color: var(--dd-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.destination-attraction-body p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 15px;
    color: var(--dd-muted);
    font-size: .78rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.destination-attraction-price {
    margin-top: auto;
    margin-bottom: 14px;
}

.destination-attraction-price small {
    display: block;
    margin-bottom: 3px;
    color: #9aa7aa;
    font-size: .66rem;
}

.destination-attraction-price strong {
    color: var(--dd-primary-dark);
    font-size: .85rem;
}

.destination-attraction-price .price-free {
    color: #1c8a5d;
}

.destination-detail-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #d9e8e9;
    border-radius: 10px;
    background: #f7fbfb;
    color: var(--dd-primary);
    font-size: .75rem;
    font-weight: 700;
    transition: .2s ease;
}

.destination-detail-button:hover {
    border-color: var(--dd-primary);
    background: var(--dd-primary);
    color: #fff;
}

/* ============================================================
   MODAL
   ============================================================ */

.destination-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(0,0,0,.2);
}

.destination-modal .modal-header {
    align-items: flex-start;
    padding: 20px 22px;
    border-bottom: 1px solid var(--dd-border);
}

.destination-modal .modal-header small {
    color: var(--dd-accent);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.destination-modal .modal-title {
    margin-top: 3px;
    color: var(--dd-primary-dark);
    font-size: 1.25rem;
    font-weight: 800;
}

.destination-modal .modal-body {
    padding: 22px;
}

.destination-modal-image {
    display: block;
    width: 100%;
    max-height: 420px;
    margin-bottom: 18px;
    border-radius: 14px;
    object-fit: cover;
}

.destination-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.destination-modal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--dd-primary-soft);
    color: var(--dd-primary-dark);
    font-size: .72rem;
    font-weight: 700;
}

.destination-modal-description {
    color: #566e74;
    font-size: .87rem;
    line-height: 1.8;
    white-space: normal;
}

.destination-modal .modal-footer {
    padding: 15px 22px;
    border-top: 1px solid var(--dd-border);
}

.destination-modal-close {
    min-width: 85px;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    background: #eef3f3;
    color: #50686e;
    font-weight: 700;
}

/* ============================================================
   EMPTY
   ============================================================ */

.destination-empty-state {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 150px;
    padding: 25px;
    border: 1px dashed #cbdcde;
    border-radius: 18px;
    background: rgba(255,255,255,.7);
}

.destination-empty-icon {
    display: grid;
    flex: 0 0 50px;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--dd-primary-soft);
    color: var(--dd-primary);
    font-size: 1.25rem;
}

.destination-empty-state h3 {
    margin: 0 0 4px;
    color: var(--dd-primary-dark);
    font-size: .95rem;
    font-weight: 800;
}

.destination-empty-state p {
    margin: 0;
    color: var(--dd-muted);
    font-size: .78rem;
}

/* ============================================================
   ULASAN
   ============================================================ */

.destination-review-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.destination-rating-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #ead9a7;
    border-radius: 14px;
    background: #fffaf0;
}

.destination-rating-summary > strong {
    color: #9b741f;
    font-size: 1.8rem;
    line-height: 1;
}

.destination-rating-summary small {
    color: #8d8b7d;
    font-size: .68rem;
}

.destination-stars {
    display: flex;
    gap: 2px;
    color: #e5a72c;
    font-size: .78rem;
}

.destination-review-list {
    display: grid;
    gap: 14px;
}

.destination-review-card {
    display: flex;
    gap: 15px;
    padding: 18px;
    border: 1px solid var(--dd-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(3,55,65,.04);
}

.destination-review-avatar {
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 3px solid #e9f4f3;
    border-radius: 50%;
    background: var(--dd-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.destination-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-review-content {
    flex: 1;
    min-width: 0;
}

.destination-review-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.destination-review-top h3 {
    margin: 0 0 4px;
    color: var(--dd-text);
    font-size: .88rem;
    font-weight: 800;
}

.destination-review-top time {
    color: #9aa7aa;
    font-size: .68rem;
    white-space: nowrap;
}

.destination-review-quote {
    margin: 10px 0 0;
    color: #5c7076;
    font-size: .8rem;
    line-height: 1.7;
}

.destination-write-review {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 15px;
    border-radius: 11px;
    background: var(--dd-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(0,107,120,.15);
}

.destination-write-review:hover {
    color: #fff;
    background: var(--dd-primary-dark);
}

/* ============================================================
   FASILITAS
   ============================================================ */

.destination-facility-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.destination-facility-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 145px;
    padding: 20px 12px;
    border: 1px solid var(--dd-border);
    border-radius: 17px;
    background: rgba(255,255,255,.9);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.destination-facility-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,107,120,.18);
    box-shadow: 0 12px 26px rgba(3,55,65,.08);
}

.destination-facility-card > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 11px;
    border-radius: 14px;
    background: var(--dd-primary-soft);
    color: var(--dd-primary);
    font-size: 1.15rem;
}

.destination-facility-card strong {
    color: var(--dd-text);
    font-size: .8rem;
}

.destination-facility-card small {
    margin-top: 4px;
    color: #8b9b9f;
    font-size: .65rem;
}

/* ============================================================
   PENUTUP
   ============================================================ */

.destination-bottom-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 55px;
    color: var(--dd-accent);
}

.destination-bottom-ornament span {
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d9b65f);
}

.destination-bottom-ornament span:last-child {
    background: linear-gradient(90deg, #d9b65f, transparent);
}

.destination-bottom-ornament b {
    color: var(--dd-primary);
    font-size: .65rem;
    letter-spacing: .22em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .destination-hero-grid {
        grid-template-columns: 1fr;
    }

    .destination-main-photo,
    .destination-main-photo > img {
        min-height: 440px;
        height: 440px;
    }

    .destination-info-column {
        padding: 6px 4px 8px;
    }

    .destination-attraction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    .destination-detail-page {
        padding: 22px 0 50px;
    }

    .destination-container {
        width: min(100% - 22px, 680px);
    }

    .destination-hero-card {
        padding: 12px;
        border-radius: 20px;
    }

    .destination-main-photo,
    .destination-main-photo > img {
        min-height: 340px;
        height: 340px;
        border-radius: 16px;
    }

    .destination-title {
        font-size: 2rem;
    }

    .destination-info-grid {
        grid-template-columns: 1fr;
    }

    .destination-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .destination-action,
    .destination-delete-form,
    .destination-delete-form .destination-action {
        width: 100%;
    }

    .destination-review-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .destination-facility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 560px) {

    .destination-breadcrumb {
        font-size: .72rem;
    }

    .destination-breadcrumb span {
        max-width: 180px;
    }

    .destination-main-photo,
    .destination-main-photo > img {
        min-height: 285px;
        height: 285px;
    }

    .destination-open-badge {
        top: 12px;
        left: 12px;
    }

    .destination-photo-caption {
        right: 10px;
        bottom: 10px;
        left: 10px;
    }

    .destination-title {
        font-size: 1.7rem;
    }

    .destination-description p {
        font-size: .82rem;
    }

    .destination-attraction-grid {
        grid-template-columns: 1fr;
    }

    .destination-attraction-image {
        height: 215px;
    }

    .destination-actions {
        grid-template-columns: 1fr;
    }

    .destination-review-card {
        gap: 10px;
        padding: 14px;
    }

    .destination-review-top {
        flex-direction: column;
        gap: 5px;
    }

    .destination-facility-grid {
        gap: 10px;
    }

    .destination-facility-card {
        min-height: 125px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .page-destinasi-detail *,
    .page-destinasi-detail *::before,
    .page-destinasi-detail *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

}
/* =========================================================
   VISIT DUMAI - CONTACT PAGE
   Compact Modern Design
========================================================= */

.page-kontak {
    background: #f4f7fa;
    color: #17324d;
    font-family: "Poppins", sans-serif;
}


/* =========================================================
   GLOBAL
========================================================= */

.contact-page {
    min-height: 100vh;
}

.contact-wrapper {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.contact-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #123e54 0%,
            #075b72 52%,
            #11849a 100%
        );

    color: white;
}


/* dekorasi lingkaran */

.contact-hero-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.decoration-left {
    width: 220px;
    height: 220px;
    left: -100px;
    top: -100px;
    background: rgba(255, 255, 255, .045);
}

.decoration-right {
    width: 260px;
    height: 260px;
    right: -100px;
    bottom: -150px;
    background: rgba(255, 193, 7, .07);
}


/* hero content */

.contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: auto;
    padding: 55px 0 70px;
    text-align: center;
}


/* icon */

.contact-hero-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    border-radius: 17px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);

    font-size: 25px;
}


/* badge */

.contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 15px;

    border-radius: 50px;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.25);

    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* title */

.contact-hero h1 {
    margin: 17px 0 10px;

    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;

    font-weight: 800;
    letter-spacing: -2px;
}

.contact-hero h1 span {
    color: #ffbd17;
}


/* paragraph */

.contact-hero-content > p {
    max-width: 650px;
    margin: 0 auto;

    color: rgba(255,255,255,.86);

    font-size: 14px;
    line-height: 1.8;
}


/* mini info */

.contact-hero-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 20px;
}

.contact-hero-features span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: rgba(255,255,255,.9);

    font-size: 11px;
}

.contact-hero-features i {
    color: #ffbd17;
}


/* wave */

.contact-wave {
    position: absolute;
    bottom: -1px;
    left: 0;

    width: 100%;
    height: 55px;

    z-index: 3;
}

.contact-wave svg {
    width: 100%;
    height: 100%;
}

.contact-wave path {
    fill: #f4f7fa;
}


/* =========================================================
   MAIN
========================================================= */

.contact-main {
    padding: 48px 0 70px;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.contact-section-heading {
    text-align: center;
    margin-bottom: 28px;
}

.contact-section-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #0879a0;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.contact-section-heading > span i {
    color: #ffb703;
}

.contact-section-heading h2 {
    margin: 8px 0 5px;

    color: #17324d;

    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
}

.contact-section-heading p {
    margin: 0;

    color: #718096;
    font-size: 13px;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-bottom: 35px;
}


.contact-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 220px;

    padding: 22px;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #e6edf2;

    box-shadow:
        0 8px 25px rgba(17, 50, 70, .06);

    text-decoration: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);

    border-color: rgba(0,119,182,.2);

    box-shadow:
        0 15px 35px rgba(17, 50, 70, .10);
}


/* icon */

.contact-card-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    margin-bottom: 15px;

    font-size: 19px;
}

.contact-card-icon.location {
    background: #e8f4fa;
    color: #0879a0;
}

.contact-card-icon.whatsapp {
    background: #e8f8ef;
    color: #16a05d;
}

.contact-card-icon.email {
    background: #fff4dc;
    color: #e59b00;
}


/* content */

.contact-card-label {
    display: block;

    margin-bottom: 3px;

    color: #8a9aaa;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.contact-card h3 {
    margin: 0 0 7px;

    color: #17324d;

    font-size: 17px;
    font-weight: 700;
}

.contact-card p {
    margin: 0;

    color: #718096;

    font-size: 11px;
    line-height: 1.7;
}

.contact-card small {
    display: block;

    margin-top: 7px;

    color: #82909c;

    font-size: 10px;
}

.contact-number {
    color: #334e68 !important;
    font-weight: 600;
}

.email-text {
    font-size: 11px !important;
}


/* bottom link */

.contact-card-link {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: auto;
    padding-top: 14px;

    color: #0879a0;

    font-size: 10px;
    font-weight: 700;
}

.contact-card-link i {
    transition: transform .2s ease;
}

.contact-card:hover .contact-card-link i {
    transform: translateX(4px);
}

.whatsapp-link {
    color: #15965a;
}

.email-link {
    color: #d89400;
}


/* =========================================================
   FORM + HELP
========================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);

    gap: 20px;

    align-items: stretch;

    margin-bottom: 25px;
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    padding: 28px;

    background: #fff;

    border: 1px solid #e4ebf0;
    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(17, 50, 70, .06);
}


/* heading */

.contact-form-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-bottom: 22px;
}

.contact-form-icon {
    flex: 0 0 auto;

    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eaf5fa;
    color: #0879a0;

    font-size: 18px;
}

.contact-form-heading span {
    display: block;

    color: #0879a0;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.contact-form-heading h2 {
    margin: 3px 0 3px;

    color: #17324d;

    font-size: 23px;
    font-weight: 800;
}

.contact-form-heading p {
    margin: 0;

    color: #82909c;

    font-size: 11px;
    line-height: 1.6;
}


/* form grid */

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.contact-field.full,
.contact-submit.full {
    grid-column: 1 / -1;
}


/* label */

.contact-field label {
    display: block;

    margin-bottom: 7px;

    color: #334e68;

    font-size: 11px;
    font-weight: 700;
}

.contact-field label i {
    margin-right: 4px;
    color: #0879a0;
}


/* input */

.contact-input,
.contact-textarea {
    position: relative;
}

.contact-input > i,
.contact-textarea > i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: #91a2b0;

    font-size: 14px;

    pointer-events: none;
}

.contact-input input,
.contact-input select,
.contact-textarea textarea {
    width: 100%;

    border: 1px solid #dce5eb;

    background: #f9fbfc;

    border-radius: 10px;

    color: #334e68;

    font-family: inherit;
    font-size: 11px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.contact-input input,
.contact-input select {
    height: 43px;

    padding: 0 38px;
}

.contact-textarea textarea {
    min-height: 120px;

    padding: 13px 38px;

    resize: vertical;

    line-height: 1.6;
}

.contact-input input:focus,
.contact-input select:focus,
.contact-textarea textarea:focus {
    background: #fff;

    border-color: #0879a0;

    box-shadow:
        0 0 0 3px rgba(8,121,160,.08);
}


/* select */

.select-icon {
    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #8193a1;

    pointer-events: none;
}

.contact-input select {
    appearance: none;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {
    margin-top: 2px;
}

.contact-submit button {
    width: 100%;

    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #0879a0,
            #07536f
        );

    color: white;

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(8,121,160,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.contact-submit button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(8,121,160,.25);
}

.contact-submit button span {
    color: #ffbd17;
}


/* security */

.contact-security {
    margin-top: 16px;

    padding-top: 13px;

    border-top: 1px solid #edf1f4;

    color: #8997a4;

    font-size: 9px;

    text-align: center;
}

.contact-security i {
    color: #15965a;
    margin-right: 4px;
}


/* =========================================================
   ALERT
========================================================= */

.contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 12px 14px;

    margin-bottom: 18px;

    border-radius: 10px;

    font-size: 10px;
}

.contact-alert > i {
    font-size: 17px;
}

.contact-alert strong {
    display: block;

    margin-bottom: 2px;

    font-size: 11px;
}

.contact-alert p {
    margin: 0;
}

.contact-alert ul {
    margin: 4px 0 0;
    padding-left: 16px;
}

.contact-alert.success {
    background: #edf9f2;
    color: #147b46;
    border: 1px solid #ccebd9;
}

.contact-alert.error {
    background: #fff0f0;
    color: #a63131;
    border: 1px solid #f2d0d0;
}

.contact-alert.warning {
    background: #fff8e7;
    color: #956c00;
    border: 1px solid #f2dfaa;
}


/* =========================================================
   HELP CARD
========================================================= */

.contact-help-card {
    position: relative;
    overflow: hidden;

    padding: 28px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #123f55,
            #075d73
        );

    color: white;

    box-shadow:
        0 12px 35px rgba(17, 50, 70, .12);
}


/* decorative */

.contact-help-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background: rgba(255,255,255,.05);
}

.contact-help-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    left: -70px;
    bottom: -60px;

    border-radius: 50%;

    background: rgba(255,189,23,.06);
}


/* help content */

.help-icon {
    position: relative;
    z-index: 1;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    border-radius: 14px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);

    color: #ffbd17;

    font-size: 21px;
}

.help-label {
    position: relative;
    z-index: 1;

    color: #ffbd17;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.contact-help-card h2 {
    position: relative;
    z-index: 1;

    margin: 10px 0;

    font-size: 25px;
    line-height: 1.25;
    font-weight: 800;
}

.contact-help-card h2 span {
    display: block;
    color: #ffbd17;
}

.contact-help-card > p {
    position: relative;
    z-index: 1;

    color: rgba(255,255,255,.76);

    font-size: 11px;
    line-height: 1.7;
}


/* help list */

.help-list {
    position: relative;
    z-index: 1;

    display: grid;

    gap: 10px;

    margin: 20px 0;
}

.help-list div {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(255,255,255,.88);

    font-size: 10px;
}

.help-list i {
    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,189,23,.15);

    color: #ffbd17;

    font-size: 10px;
}


/* whatsapp */

.help-whatsapp {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    border-radius: 11px;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.12);

    color: white;

    text-decoration: none;

    transition: background .2s ease;
}

.help-whatsapp:hover {
    background: rgba(255,255,255,.16);
    color: white;
}

.help-whatsapp > i:first-child {
    color: #36d477;
    font-size: 21px;
}

.help-whatsapp span {
    flex: 1;
}

.help-whatsapp small {
    display: block;

    color: rgba(255,255,255,.6);

    font-size: 8px;
}

.help-whatsapp span {
    font-size: 11px;
    font-weight: 700;
}

.help-whatsapp > i:last-child {
    color: #ffbd17;
}


/* =========================================================
   LOCATION
========================================================= */

.location-card {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 20px 22px;

    border-radius: 16px;

    background: white;

    border: 1px solid #e4ebf0;

    box-shadow:
        0 8px 25px rgba(17,50,70,.05);
}

.location-icon {
    flex: 0 0 auto;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eaf5fa;

    color: #0879a0;

    font-size: 19px;
}

.location-content {
    flex: 1;
}

.location-content span {
    display: block;

    margin-bottom: 3px;

    color: #0879a0;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.location-content h2 {
    margin: 0 0 3px;

    color: #17324d;

    font-size: 17px;
    font-weight: 800;
}

.location-content p {
    margin: 0;

    color: #718096;

    font-size: 10px;
    line-height: 1.6;
}

.location-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 14px;

    border-radius: 9px;

    background: #0879a0;

    color: white;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    transition: .2s ease;
}

.location-button:hover {
    background: #07536f;
    color: white;

    transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .contact-cards {
        grid-template-columns: 1fr 1fr;
    }

    .contact-cards .contact-card:last-child {
        grid-column: 1 / -1;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .contact-wrapper {
        width: min(100% - 24px, 1100px);
    }

    .contact-hero {
        min-height: 330px;
    }

    .contact-hero-content {
        padding: 45px 0 65px;
    }

    .contact-hero h1 {
        font-size: 39px;
        letter-spacing: -1px;
    }

    .contact-hero-content > p {
        font-size: 12px;
        line-height: 1.7;
    }

    .contact-hero-features {
        gap: 9px 15px;
    }

    .contact-hero-features span {
        font-size: 9px;
    }

    .contact-cards {
        grid-template-columns: 1fr;
    }

    .contact-cards .contact-card:last-child {
        grid-column: auto;
    }

    .contact-card {
        min-height: 190px;
    }

    .contact-form-card,
    .contact-help-card {
        padding: 20px;
        border-radius: 16px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .contact-field.full,
    .contact-submit.full {
        grid-column: auto;
    }

    .location-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .location-button {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 420px) {

    .contact-main {
        padding-top: 35px;
    }

    .contact-section-heading h2 {
        font-size: 25px;
    }

    .contact-form-heading {
        gap: 10px;
    }

    .contact-form-heading h2 {
        font-size: 20px;
    }

}