style-melayu-royal-heritage.css

/* ============================================================
   PATCH KONTRAS — TEKS PUTIH DI BACKGROUND TERANG
   ============================================================ */

/* Semua judul section (h2.judul-ungu) yang berada di background
   krem terang, dibuat gelap agar terbaca */
.judul-ungu{
  color: var(--heritage-green) !important;
}

/* Kutipan aksen (quote-emas) di background terang */
.quote-emas{
  color:#4A453D !important;
  border-left-color: var(--gold);
}

/* Paragraf intro section yang pakai inline style off-white
   (mis. deskripsi Paket Wisata, Metode Pembayaran) */
.section-royal .text-center p[style],
.bg-lembut .text-center p[style]{
  color:#4A453D !important;
}

/* Judul h2 dengan inline style putih di section terang
   (mis. "Kami Siap Melayani Anda", "Ceritakan Rencana Perjalanan Anda") */
.section-royal h2[style*="white"],
.bg-lembut h2[style*="white"]{
  color: var(--heritage-green) !important;
}

/* Checklist "value" di form kontak (Konsultasi tanpa biaya, dll) */
#form-kontak .contact-quick .value{
  color: var(--heritage-green) !important;
}

:root{
  --purple-deep:#0B3D2E;
  --purple-royal:#0B3D2E;
  --purple-mid:#155B45;
  --purple-light:#2A765C;
  --gold:#C5A059;
  --gold-light:#C5A059;
  --gold-soft:#E4D2A8;
  --white:#FFFFFF;
  --off-white:#FFFFFF;
  --ink:#1A1A1A;
}

*{box-sizing:border-box;}

body{
  background:var(--purple-deep);
  color:var(--off-white);
  font-family:'Jost', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display-font{
  font-family:'Cinzel', serif;
  letter-spacing:.02em;
}

.tagline-font{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
}

a{ text-decoration:none; }

::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
}

/* ---------- Ornamental divider ---------- */
.ornament-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  margin:1.4rem 0 1.8rem;
}
.ornament-divider .line{
  height:1px;
  width:56px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ornament-divider .dot{
  width:6px; height:6px;
  background:var(--gold);
  transform:rotate(45deg);
}

/* ==================================================
   NAVBAR
================================================== */

.navbar-royal{
    background:var(--purple-deep);
    border-bottom:1px solid rgba(201,162,39,.35);
    backdrop-filter:blur(10px);
    transition:.3s;
}

/* Logo */

.navbar-brand-royal{
    font-family:'Cinzel', serif;
    color:var(--white) !important;
    font-size:1.3rem;
    font-weight:700;
    letter-spacing:.08em;
    transition:.3s;
}

.navbar-brand-royal:hover{
    color:var(--gold-light) !important;
}

/* Menu */

.nav-link-royal{
    color:var(--off-white) !important;
    font-size:.95rem;
    font-weight:500;
    letter-spacing:.05em;
    margin-left:1rem;
    position:relative;
    transition:color .3s ease;
}

/* Garis bawah */

.nav-link-royal::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:width .3s ease;
}

/* Hover */

.nav-link-royal:hover{
    color:var(--gold-light) !important;
}

.nav-link-royal:hover::after{
    width:100%;
}

/* Active */

.nav-link-royal.active{
    color:var(--gold-light) !important;
}

.nav-link-royal.active::after{
    width:100%;
}

/* Toggle */

.navbar-toggler{
    border:1px solid rgba(255,255,255,.25);
}

.navbar-toggler:focus{
    box-shadow:none;
}

/* ---------- Hero ---------- */
.hero-royal{
  position:relative;
  padding:7.5rem 0 6rem;
  background:
    radial-gradient(ellipse at top left, rgba(42,118,92,.35), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(201,162,39,0.12), transparent 50%),
    linear-gradient(160deg, var(--purple-deep) 0%, var(--purple-royal) 55%, #083526 100%);
  border-bottom:1px solid rgba(201,162,39,0.3);
  overflow:hidden;
}
.hero-royal::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(201,162,39,0.035) 0 2px, transparent 2px 46px);
  pointer-events:none;
}
.hero-frame{
  position:relative;
  z-index:2;
}
.eyebrow-gold{
  color:var(--gold-light);
  font-size:.78rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  font-family:'Jost', sans-serif;
  font-weight:500;
}
.hero-royal h1{
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  color:var(--white);
  text-shadow:0 0 30px rgba(232,205,112,0.15);
}
.hero-royal h1 em{
  font-style:normal;
  color:var(--gold-light);
}
.hero-welcome{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.28rem;
  line-height:1.75;
  color:var(--off-white);
  max-width:640px;
}

/* Royal seal badge (signature element) */
.seal-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.seal-wrap svg{
  width:230px; height:230px;
  filter:drop-shadow(0 8px 26px rgba(201,162,39,0.25));
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.seal-wrap:hover svg{ transform:rotate(14deg) scale(1.03); }
.seal-ring{ animation:spin-slow 40s linear infinite; transform-origin:115px 115px; }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .seal-ring{ animation:none; }
  .seal-wrap svg{ transition:none; }
}

/* ---------- Trust strip ---------- */
.trust-strip{
  background:var(--purple-royal);
  border-bottom:1px solid rgba(201,162,39,0.25);
}
.trust-item{
  display:flex; align-items:center; gap:.7rem;
  font-size:.85rem;
  color:var(--off-white);
  padding:1rem 0;
}
.trust-item i{
  color:var(--gold-light);
  font-size:1.25rem;
}

/* ---------- Info cards ---------- */
.section-royal{
  padding:5rem 0;
}
.card-royal{
  background:linear-gradient(165deg, rgba(21,91,69,.35), rgba(11,61,46,.60));
  border:1px solid rgba(201,162,39,0.35);
  border-radius:4px;
  padding:2.2rem 2rem;
  height:100%;
  position:relative;
  transition:border-color .3s ease, transform .3s ease;
}
.card-royal:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.card-royal .icon-badge{
  width:52px; height:52px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-light);
  font-size:1.35rem;
  margin-bottom:1.2rem;
}
.card-royal h3{
  font-size:1.1rem;
  color:var(--white);
  margin-bottom:1rem;
}
.hours-row{
  display:flex;
  justify-content:space-between;
  font-size:.88rem;
  padding:.5rem 0;
  border-bottom:1px dashed rgba(201,162,39,0.25);
}
.hours-row:last-child{ border-bottom:none; }
.hours-row .day{ color:var(--off-white); }
.hours-row .time{ color:var(--gold-light); font-weight:500; }
.badge-live{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; letter-spacing:.08em;
  color:#8DEBB0;
  margin-top:.9rem;
}
.badge-live .dot-live{
  width:7px; height:7px; border-radius:50%;
  background:#3FE07E;
  box-shadow:0 0 0 0 rgba(63,224,126,.6);
  animation:pulse-live 1.8s infinite;
}
@keyframes pulse-live{
  0%{ box-shadow:0 0 0 0 rgba(63,224,126,.55); }
  70%{ box-shadow:0 0 0 8px rgba(63,224,126,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,224,126,0); }
}

/* Social media interactive */
.social-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.7rem;
}
.social-link{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:3px;
  padding:.65rem .8rem;
  color:var(--off-white) !important;
  font-size:.82rem;
  background:rgba(255,255,255,0.02);
  transition:all .3s ease;
}
.social-link i{
  font-size:1.05rem;
  color:var(--gold-light);
  transition:transform .3s ease;
}
.social-link:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink) !important;
}
.social-link:hover i{
  color:var(--ink);
  transform:scale(1.15) rotate(-6deg);
}

.contact-quick{
  display:flex; align-items:flex-start; gap:.85rem;
  margin-bottom:1.15rem;
}
.contact-quick i{
  color:var(--gold-light);
  font-size:1.15rem;
  margin-top:.15rem;
}
.contact-quick .label{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-soft);
  display:block;
}
.contact-quick .value{
  color:var(--white);
  font-size:.92rem;
}

/* ---------- Contact form ---------- */
.form-panel{
  background:linear-gradient(180deg, #FFFFFF, #FCFBF8);
  border-radius:6px;
  padding:2.8rem;
  color:var(--ink);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.45);
  position:relative;
}
.form-panel::before{
  content:"";
  position:absolute; inset:0;
  border:1px solid var(--gold);
  border-radius:6px;
  margin:8px;
  pointer-events:none;
}
.form-panel h3{
  color:var(--purple-royal);
}
.form-label-royal{
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--purple-royal);
  font-weight:500;
  margin-bottom:.35rem;
}
.form-control-royal{
  border:1px solid #D8D1C4;
  border-radius:2px;
  padding:.65rem .85rem;
  font-family:'Jost', sans-serif;
  font-size:.92rem;
  background:var(--white);
}
.form-control-royal:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 .2rem rgba(201,162,39,0.18);
}
.btn-royal-submit{
  background:linear-gradient(120deg, var(--purple-royal), var(--purple-mid));
  border:1px solid var(--gold);
  color:var(--white);
  padding:.75rem 2.2rem;
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:2px;
  transition:all .3s ease;
}
.btn-royal-submit:hover{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.security-note{
  display:flex; align-items:center; gap:.5rem;
  font-size:.78rem;
  color:#6D6251;
  margin-top:1.2rem;
}
.security-note i{ color:var(--purple-mid); }

/* ---------- Alert kirim form ---------- */
.alert-royal-success{
  background:rgba(63,224,126,0.12);
  border:1px solid #3FE07E;
  color:#1E7A45;
  border-radius:3px;
  padding:.9rem 1.1rem;
  font-size:.88rem;
  margin-bottom:1.5rem;
}
.alert-royal-error{
  background:rgba(224,63,63,0.1);
  border:1px solid #E03F3F;
  color:#8C2020;
  border-radius:3px;
  padding:.9rem 1.1rem;
  font-size:.88rem;
  margin-bottom:1.5rem;
}

/* ---------- Map ---------- */
.map-frame{
  border:1px solid rgba(201,162,39,0.35);
  border-radius:4px;
  overflow:hidden;
  filter:grayscale(.15) contrast(1.05);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Footer ---------- */
footer{
  background:var(--purple-deep);
  border-top:1px solid rgba(201,162,39,0.3);
  padding:2.6rem 0 1.6rem;
}
.footer-social a{
  width:38px; height:38px;
  border:1px solid rgba(201,162,39,0.4);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gold-light);
  margin-left:.5rem;
  transition:all .3s ease;
}
.footer-social a:hover{
  background:var(--gold);
  color:var(--ink);
  transform:translateY(-3px);
}
.footer-copy{
  font-size:.78rem;
  color:rgba(255,255,255,.62);
}

/* ============================================================
   HALAMAN TENTANG KAMI
============================================================ */

/* ---------- Hero kompak ---------- */
.hero-ungu{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(rgba(11,61,46,.65), rgba(11,61,46,.65)),
        url("../images/hero-medan.jpg");

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

    border-bottom: 1px solid rgba(201,162,39,.3);
    overflow: hidden;
}

.hero-ungu::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(201,162,39,0.035) 0 2px, transparent 2px 46px);
  pointer-events:none;
}
.hero-ungu .container{ position:relative; z-index:2; }
.hero-ungu h1{
  font-size:clamp(2rem, 4vw, 2.8rem);
  color:var(--white);
}
.hero-ungu p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.15rem;
  color:var(--off-white);
}

/* ---------- Tipografi bagian ---------- */
.judul-ungu{
  color:var(--white);
}
.aksen-emas{
  color:var(--gold-light);
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:500;
}

/* ---------- Section lembut (alternating background) ---------- */
.bg-lembut{
  background:linear-gradient(180deg, rgba(21,91,69,.18), rgba(11,61,46,.40));
  border-top:1px solid rgba(201,162,39,0.2);
  border-bottom:1px solid rgba(201,162,39,0.2);
}
.bg-lembut .p-4.bg-white{
  background:linear-gradient(165deg, rgba(21,91,69,.35), rgba(11,61,46,.60)) !important;
  border:1px solid rgba(201,162,39,0.35);
  transition:border-color .3s ease, transform .3s ease;
}
.bg-lembut .p-4.bg-white:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.bg-lembut h5{ color:var(--white); }
.bg-lembut p{ color:var(--off-white); }
.bg-lembut .shadow-sm{ box-shadow:none !important; }

/* ---------- Galeri foto modern ---------- */
.galeri-modern{
  --r:10px;
}
.galeri-modern img{
  border-radius:var(--r);
  transition:transform .5s ease, filter .5s ease;
  filter:saturate(.95) contrast(1.02);
}
.galeri-modern .foto-utama{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(201,162,39,0.4);
}
.galeri-modern .foto-utama::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,61,46,.75) 0%, transparent 45%);
  pointer-events:none;
}
.galeri-modern .foto-utama .caption{
  position:absolute; left:1.1rem; bottom:.9rem;
  z-index:2;
  color:var(--gold-light);
  font-family:'Cinzel', serif;
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.galeri-modern .foto-utama:hover img{ transform:scale(1.06); }
.galeri-modern .foto-thumb{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  transition:border-color .3s ease;
}
.galeri-modern .foto-thumb:hover{ border-color:var(--gold); }
.galeri-modern .foto-thumb:hover img{ transform:scale(1.12); filter:saturate(1.1); }

/* Galeri mini: baris foto kecil seragam, untuk kasus gambar tidak boleh dominan */
.galeri-mini{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:.5rem;
}
.galeri-mini .foto-thumb{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,0.3);
  aspect-ratio:1/1;
  transition:border-color .3s ease;
}
.galeri-mini .foto-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0;
  transition:transform .4s ease;
}
.galeri-mini .foto-thumb:hover{ border-color:var(--gold); }
.galeri-mini .foto-thumb:hover img{ transform:scale(1.15); }
.galeri-mini-label{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-top:.7rem;
  display:block;
}

/* ---------- Kutipan aksen ---------- */
.quote-emas{
  border-left:2px solid var(--gold);
  padding-left:1.2rem;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.15rem;
  color:var(--off-white);
  margin:1.6rem 0;
}

/* ============================================================
   HALAMAN DESTINASI UNGGULAN
============================================================ */
.jam-sekarang{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem;
  color:var(--gold-soft);
  letter-spacing:.05em;
}
.jam-sekarang i{ color:var(--gold-light); }

.destinasi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.8rem;
}

.kartu-destinasi{
  background:linear-gradient(165deg, rgba(21,91,69,.35), rgba(11,61,46,.60));
  border:1px solid rgba(201,162,39,0.35);
  border-radius:6px;
  padding:1.6rem 1.6rem 1.8rem;
  transition:border-color .3s ease, transform .3s ease;
}
.kartu-destinasi:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}

.kartu-top{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.1rem;
}
.kartu-thumb{
  width:64px; height:64px;
  flex:0 0 64px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,0.45);
}
.kartu-thumb img{
  width:100%; height:100%;
  object-fit:cover;
}
.kartu-top-text{ flex:1; min-width:0; }
.kartu-top-text h3{
  font-size:1.15rem;
  color:var(--white);
  margin-bottom:.3rem;
  line-height:1.35;
}
.kartu-kategori{
  display:inline-flex; align-items:center; gap:.35rem;
  color:var(--gold-light);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.status-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem;
  font-weight:500;
  padding:.3rem .75rem;
  border-radius:20px;
  margin-bottom:1rem;
}
.status-pill .dot{ width:7px; height:7px; border-radius:50%; }
.status-buka{
  background:rgba(63,224,126,0.15);
  border:1px solid #3FE07E;
  color:#8DEBB0;
}
.status-buka .dot{ background:#3FE07E; box-shadow:0 0 0 0 rgba(63,224,126,.6); animation:pulse-live 1.8s infinite; }
.status-tutup{
  background:rgba(224,63,63,0.15);
  border:1px solid #E0736F;
  color:#F0A9A6;
}
.status-tutup .dot{ background:#E0736F; }

.kartu-destinasi-body p{
  font-size:1rem;
  line-height:1.7;
  color:var(--off-white);
  margin-bottom:1.1rem;
}
.destinasi-meta{
  display:flex; align-items:center; gap:.45rem;
  font-size:.85rem;
  color:var(--gold-soft);
  border-top:1px dashed rgba(201,162,39,0.25);
  padding-top:.8rem;
}
.destinasi-meta i{ color:var(--gold-light); }

/* ============================================================
   HALAMAN DESTINASI DETAIL
============================================================ */

/* ---------- Hero Detail (dengan gambar) ---------- */
.hero-detail{
  position:relative;
  height:65vh;
  min-height:420px;
  overflow:hidden;
  border-bottom:1px solid rgba(201,162,39,0.3);
}
.hero-detail img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero-detail::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, var(--purple-deep) 0%, rgba(11,61,46,.35) 55%, rgba(11,61,46,.05) 100%);
}
.hero-detail-content{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:2.4rem 0;
}
.hero-detail-breadcrumb{
  font-size:.82rem;
  color:rgba(255,255,255,.82);
  margin-bottom:.9rem;
}
.hero-detail-breadcrumb a{
  color:rgba(255,255,255,.82);
  transition:color .3s ease;
}
.hero-detail-breadcrumb a:hover{ color:var(--gold-light); }
.hero-detail-breadcrumb .sep{ margin:0 .5rem; color:var(--gold); }
.hero-detail-breadcrumb .current{ color:var(--gold-light); }

.hero-detail h1{
  font-size:clamp(1.9rem, 4vw, 3rem);
  color:var(--white);
  text-shadow:0 0 30px rgba(0,0,0,0.4);
  margin-bottom:1rem;
}

.hero-detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
}
.hero-detail-badges .badge-item{
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem;
  color:var(--off-white);
}
.hero-detail-badges .badge-item i{
  color:var(--gold-light);
  font-size:1.05rem;
}

/* Informasi Detail Destinasi */
.info-detail .list-group-item{
    background: linear-gradient(135deg, #0B3D2E, #155B45);
    color: #fff;
    border: none;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 14px 18px;
    box-shadow: 0 6px 15px rgba(11,61,46,.18);
    transition: all .3s ease;
}

.info-detail .list-group-item i{
    color: #C5A059; /* emas */
    margin-right: 8px;
    font-size: 1.1rem;
}

.info-detail .list-group-item strong{
    color: #fff;
}

.info-detail .list-group-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(11,61,46,.28);
}

/* ---------- Konten Detail ---------- */
.detail-section{
  margin-bottom:3rem;
}
.detail-section h2{
  font-size:1.5rem;
  color:var(--white);
  margin-bottom:1.2rem;
  position:relative;
  padding-bottom:.7rem;
}
.detail-section h2::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:44px; height:2px;
  background:var(--gold);
}
.detail-section p, .detail-desc{
  color:var(--off-white);
  line-height:1.85;
  font-size:.98rem;
}

/* ---------- Galeri Detail ---------- */
.galeri-detail-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.7rem;
}
.galeri-detail-grid .foto-item{
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,0.3);
  transition:border-color .3s ease;
}
.galeri-detail-grid .foto-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.galeri-detail-grid .foto-item:hover{ border-color:var(--gold); }
.galeri-detail-grid .foto-item:hover img{ transform:scale(1.12); }

@media (max-width:576px){
  .galeri-detail-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- Fasilitas ---------- */
.fasilitas-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.8rem;
}
.fasilitas-item{
  display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(201,162,39,0.25);
  border-radius:4px;
  padding:.75rem .9rem;
  font-size:.85rem;
  color:var(--off-white);
  transition:border-color .3s ease;
}
.fasilitas-item:hover{ border-color:var(--gold); }
.fasilitas-item i{
  color:var(--gold-light);
  font-size:1rem;
  flex-shrink:0;
}

@media (max-width:576px){
  .fasilitas-grid{ grid-template-columns:repeat(2, 1fr); }
}



/* ---------- Destinasi Lainnya ---------- */
.destinasi-lain-card{
  display:block;
  background:linear-gradient(165deg, rgba(21,91,69,.30), rgba(11,61,46,.55));
  border:1px solid rgba(201,162,39,0.3);
  border-radius:6px;
  overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
}
.destinasi-lain-card:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.destinasi-lain-card .thumb{
  height:180px;
  overflow:hidden;
}
.destinasi-lain-card .thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.destinasi-lain-card:hover .thumb img{ transform:scale(1.08); }
.destinasi-lain-card .info{
  padding:1rem 1.1rem;
}
.destinasi-lain-card .info h3{
  font-size:1rem;
  color:var(--white);
  margin-bottom:.25rem;
}
.destinasi-lain-card .info span{
  font-size:.8rem;
  color:var(--gold-soft);
}
/* ============================================================
   SEARCH BAR DESTINASI
============================================================ */
.destinasi .input-group .form-control{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,162,39,0.35);
  color:var(--off-white);
  font-family:'Jost', sans-serif;
  font-size:.92rem;
  padding:.65rem 1rem;
  border-radius:3px 0 0 3px;
}
.destinasi .input-group .form-control::placeholder{
  color:rgba(255,255,255,.62);
}
.destinasi .input-group .form-control:focus{
  background:rgba(255,255,255,0.06);
  border-color:var(--gold);
  box-shadow:0 0 0 .2rem rgba(201,162,39,0.18);
  color:var(--white);
}
.destinasi .input-group .btn-primary{
  background:linear-gradient(120deg, var(--purple-royal), var(--purple-mid));
  border:1px solid var(--gold);
  border-left:none;
  color:var(--white);
  font-size:.85rem;
  letter-spacing:.05em;
  padding:.65rem 1.4rem;
  border-radius:0 3px 3px 0;
  transition:all .3s ease;
}
.destinasi .input-group .btn-primary:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
}

/* ============================================================
   PAGINATION (Laravel default -> tema royal)
============================================================ */
.pagination{
  gap:.4rem;
  flex-wrap:wrap;
}
.pagination .page-link{
  min-width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .6rem;
  background:rgba(21,91,69,.25);
  border:1px solid rgba(201,162,39,0.35);
  color:var(--off-white);
  font-family:'Jost', sans-serif;
  font-size:.85rem;
  border-radius:4px;
  transition:all .25s ease;
}
.pagination .page-link:hover{
  background:rgba(201,162,39,0.15);
  border-color:var(--gold);
  color:var(--gold-light);
}
.pagination .page-link:focus{
  box-shadow:0 0 0 .15rem rgba(201,162,39,0.25);
}
.pagination .page-item.active .page-link{
  background:linear-gradient(120deg, var(--gold), var(--gold-light));
  border-color:var(--gold);
  color:var(--ink);
  font-weight:600;
}
.pagination .page-item.disabled .page-link{
  background:rgba(255,255,255,0.02);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.25);
}
/* ===== TOMBOL CARI (override Bootstrap) ===== */
.destinasi .input-group .btn-cari-royal {
  background: linear-gradient(120deg, var(--purple-royal), var(--purple-mid));
  border: 1px solid var(--gold);
  border-left: none;
  color: var(--white);
  font-size: .85rem;
  letter-spacing: .05em;
  padding: .65rem 1.4rem;
  border-radius: 0 3px 3px 0;
  transition: all .3s ease;
}

.destinasi .input-group .btn-cari-royal:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
/* ===== FOOTER (3 kolom) ===== */
.footer-container{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
  padding:3.5rem 1rem 2.5rem;
}
.footer-col h4{
  font-family:'Cinzel', serif;
  color:var(--gold-light);
  font-size:1.1rem;
  margin-bottom:1.1rem;
  letter-spacing:.03em;
}
.footer-col p{
  color:var(--off-white);
  font-size:.88rem;
  line-height:1.7;
  margin-bottom:.5rem;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-col ul li{
  margin-bottom:.6rem;
}
.footer-col ul li a{
  color:var(--off-white);
  font-size:.88rem;
  transition:color .25s ease, padding-left .25s ease;
}
.footer-col ul li a:hover{
  color:var(--gold-light);
  padding-left:4px;
}
@media (max-width:768px){
  .footer-container{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

/* ===== PAKET WISATA ===== */
.paket-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
  margin-top:1rem;
}
.kartu-paket{
  background:linear-gradient(165deg, rgba(21,91,69,.35), rgba(11,61,46,.60));
  border:1px solid rgba(201,162,39,0.35);
  border-radius:8px;
  padding:2.4rem 1.8rem 1.8rem;
  text-align:center;
  position:relative;
  transition:border-color .3s ease, transform .3s ease;
}
.kartu-paket:hover{
  border-color:var(--gold);
  transform:translateY(-6px);
}
.kartu-paket.populer{
  border-color:var(--gold);
  box-shadow:0 14px 34px rgba(201,162,39,0.22);
}
.badge-populer{
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(120deg, var(--gold), var(--gold-light));
  color:var(--ink);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.4rem 1.1rem;
  border-radius:20px;
  white-space:nowrap;
}
.kartu-paket h3{
  color:var(--white);
  font-size:1.3rem;
  margin-bottom:.9rem;
}
.harga-paket{
  font-family:'Cinzel', serif;
  font-size:1.65rem;
  color:var(--gold-light);
  margin-bottom:1.6rem;
}
.harga-paket span{
  display:block;
  font-family:'Jost', sans-serif;
  font-size:.75rem;
  color:var(--gold-soft);
  font-weight:400;
  margin-top:.2rem;
}
.list-fasilitas{
  list-style:none;
  padding:0;
  margin:0 0 1.8rem;
  text-align:left;
}
.list-fasilitas li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:.88rem;
  color:var(--off-white);
  padding:.55rem 0;
  border-bottom:1px dashed rgba(201,162,39,0.2);
}
.list-fasilitas li:last-child{ border-bottom:none; }
.list-fasilitas li i{
  color:var(--gold-light);
  margin-top:.15rem;
  flex-shrink:0;
}

/* ===== ULASAN PENGUNJUNG (kartu testimoni) ===== */
.testimoni-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.8rem;
  margin-top:1rem;
}
.kartu-testimoni{
  background:linear-gradient(165deg, rgba(21,91,69,.35), rgba(11,61,46,.60));
  border:1px solid rgba(201,162,39,0.35);
  border-radius:8px;
  padding:1.8rem;
  transition:border-color .3s ease, transform .3s ease;
}
.kartu-testimoni:hover{
  border-color:var(--gold);
  transform:translateY(-5px);
}
.testimoni-top{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1rem;
}
.testimoni-avatar{
  width:46px; height:46px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:1.1rem;
  flex-shrink:0;
}
.testimoni-nama{
  color:var(--white);
  font-weight:600;
  font-size:.95rem;
}
.testimoni-kota{
  color:var(--gold-soft);
  font-size:.78rem;
}
.testimoni-bintang{
  color:var(--gold-light);
  font-size:.85rem;
  margin-bottom:.9rem;
}
.kartu-testimoni p{
  color:var(--off-white);
  font-size:.9rem;
  line-height:1.7;
  font-style:italic;
  margin:0;
}

/* ===== GALERI MEDIA ===== */
.galeri-media-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:170px;
  gap:.8rem;
}
.galeri-media-item{
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,0.3);
  cursor:pointer;
  transition:border-color .3s ease;
}
.galeri-media-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.galeri-media-item:hover{ border-color:var(--gold); }
.galeri-media-item:hover img{ transform:scale(1.1); }

.galeri-media-item:first-child{
  grid-column:span 2;
  grid-row:span 2;
}

@media (max-width:768px){
  .galeri-media-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:140px;
  }
  .galeri-media-item:first-child{
    grid-column:span 2;
    grid-row:span 1;
  }
}
/* ==========================================================
   FAQ / PERTANYAAN
========================================================== */

.faq-section{
    padding:5rem 0;
    background:linear-gradient(
        180deg,
        rgba(21,91,69,.10),
        rgba(11,61,46,.35)
    );
}

.faq-accordion{
    max-width:900px;
    margin:auto;
}

.faq-accordion .accordion-item{
    background:linear-gradient(
        165deg,
        rgba(21,91,69,.35),
        rgba(11,61,46,.60)
    );
    border:1px solid rgba(201,162,39,.35);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:1rem;
    transition:.3s;
}

.faq-accordion .accordion-item:hover{
    border-color:var(--gold);
    transform:translateY(-2px);
}

.faq-accordion .accordion-button{
    background:transparent;
    color:var(--white);
    font-family:'Cinzel', serif;
    font-size:1rem;
    padding:1.2rem 1.5rem;
    box-shadow:none;
}

.faq-accordion .accordion-button i{
    color:var(--gold-light);
}

.faq-accordion .accordion-button:not(.collapsed){
    background:rgba(201,162,39,.10);
    color:var(--gold-light);
}

.faq-accordion .accordion-button:focus{
    box-shadow:none;
}

.faq-accordion .accordion-button::after{
    filter:brightness(0) invert(1);
}

.faq-accordion .accordion-body{
    background:rgba(255,255,255,.03);
    border-top:1px solid rgba(201,162,39,.2);
    color:var(--off-white);
    line-height:1.8;
    padding:1.3rem 1.5rem;
}

@media(max-width:768px){

    .faq-section{
        padding:4rem 0;
    }

    .faq-accordion .accordion-button{
        font-size:.92rem;
        padding:1rem;
    }

    .faq-accordion .accordion-body{
        padding:1rem;
        font-size:.9rem;
    }

}
.form-panel{
    height:auto;
    padding:2rem;
}

.form-control-royal{
    margin-bottom:.4rem;
}

textarea.form-control-royal{
    height:120px;
    resize:none;
}

/* HERO SECTION DENGAN BACKGROUND IMAGE */
.hero-dengan-bg {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay gelap agar text lebih readable */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-dengan-bg h1 {
    font-size: 3.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 1rem !important;
}

.hero-subtitle {
    font-size: 1.3rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    font-weight: 300;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-dengan-bg {
        height: 400px;
    }
    
    .hero-dengan-bg h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
}


/* ============================================================
   WISATA MEDAN — MELAYU ROYAL HERITAGE
   THEME OVERRIDE
   Tempel file ini PALING BAWAH style.css lama,
   atau jadikan isi style.css utama.
   ============================================================ */

:root{
  --purple-deep:#0B3D2E;
  --purple-royal:#0B3D2E;
  --purple-mid:#155B45;
  --purple-light:#2A765C;

  --gold:#C5A059;
  --gold-light:#C5A059;
  --gold-soft:#E4D2A8;

  --white:#FFFFFF;
  --off-white:#FFFFFF;
  --ink:#1A1A1A;

  --heritage-bg:#F9F6F0;
  --heritage-green:#0B3D2E;
  --heritage-gold:#C5A059;
}

/* ---------- GLOBAL ---------- */
*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--heritage-bg);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:400;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display-font{
  font-family:'Cinzel',serif;
  letter-spacing:.02em;
}

a{text-decoration:none;}

::selection{
  background:var(--gold);
  color:var(--ink);
}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- POLA SONGKET MELAYU ---------- */
.songket-pattern,
.section-royal,
.bg-lembut,
.faq-section,
footer{
  position:relative;
}

.section-royal::before,
.bg-lembut::before,
.faq-section::before,
footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.055;
  background-image:
    linear-gradient(45deg, transparent 46%, var(--gold) 47%, var(--gold) 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--gold) 47%, var(--gold) 53%, transparent 54%);
  background-size:34px 34px;
}

.section-royal > .container,
.bg-lembut > .container,
.faq-section > .container,
footer > .container,
footer > .footer-copy{
  position:relative;
  z-index:1;
}

/* ---------- ORNAMENT ---------- */
.ornament-divider .line{
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.ornament-divider .dot{background:var(--gold);}

/* ============================================================
   NAVBAR — HIJAU ISTANA
   ============================================================ */
.navbar-royal{
  background:var(--heritage-green) !important;
  border-bottom:1px solid rgba(197,160,89,.55);
  backdrop-filter:blur(10px);
}

.navbar-brand-royal{
  color:var(--white) !important;
}

.navbar-brand-royal:hover{
  color:var(--gold) !important;
}

.nav-link-royal{
  color:rgba(255,255,255,.92) !important;
}

.nav-link-royal:hover,
.nav-link-royal.active{
  color:var(--gold) !important;
}

.nav-link-royal::after{
  background:var(--gold);
}

.navbar-toggler{
  border-color:rgba(255,255,255,.45);
}

/* ============================================================
   HERO — FOTO + MELAYU ROYAL
   ============================================================ */
.hero-royal,
.hero-ungu{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(197,160,89,.55);
}

/* hero-ungu adalah hero yang dipakai beranda kamu */
.hero-ungu{
  min-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(
      180deg,
      rgba(11,61,46,.18) 0%,
      rgba(11,61,46,.24) 50%,
      rgba(11,61,46,.48) 100%
    ),
    url("../images/icon-medan.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero-ungu::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  pointer-events:none;
  background-image:
    linear-gradient(45deg,transparent 45%,rgba(197,160,89,.8) 46%,transparent 50%),
    linear-gradient(-45deg,transparent 45%,rgba(197,160,89,.8) 46%,transparent 50%);
  background-size:70px 70px;
}

.hero-ungu .container{
  position:relative;
  z-index:2;
}

.hero-ungu h1,
.hero-royal h1{
  color:var(--white);
  text-shadow:0 4px 20px rgba(0,0,0,.35);
}

.hero-ungu p,
.hero-welcome{
  color:var(--white);
}

.eyebrow-gold{
  color:var(--gold) !important;
}

.jam-sekarang,
.jam-sekarang i{
  color:var(--gold) !important;
}

/* ============================================================
   SECTION TENTANG — PUTIH GADING
   ============================================================ */
#tentang-daerah{
  background:var(--heritage-bg) !important;
  color:var(--ink);
}

#tentang-daerah .judul-ungu,
#tentang-daerah h2{
  color:var(--ink) !important;
}

#tentang-daerah .aksen-emas{
  color:var(--gold) !important;
}

#tentang-daerah p,
#tentang-daerah p[style]{
  color:var(--ink) !important;
}

#tentang-daerah .quote-emas{
  color:#4A453D !important;
  border-left-color:var(--gold);
}

#tentang-daerah .bi{
  color:var(--gold) !important;
}

#tentang-daerah .row.mt-2 div div{
  color:var(--ink) !important;
}

#tentang-daerah .row.mt-2 div div div:last-child{
  color:#6D6251 !important;
}

/* ============================================================
   GALERI FOTO — 24PX + GOLD SHADOW
   ============================================================ */
.galeri-modern{
  --r:24px;
}

.galeri-modern .foto-utama,
.galeri-modern .foto-thumb{
  border-radius:24px !important;
  border:1px solid rgba(197,160,89,.5);
  overflow:hidden;
  box-shadow:0 12px 30px rgba(11,61,46,.10);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.galeri-modern .foto-utama:hover,
.galeri-modern .foto-thumb:hover{
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 18px 38px rgba(197,160,89,.28);
}

.galeri-modern img{
  border-radius:24px !important;
}

/* ============================================================
   ICON CARDS — HIJAU + PUTIH + GOLD
   ============================================================ */
#tentang-daerah > .container > .row.g-4.mt-5{
  position:relative;
}

#tentang-daerah .card-royal{
  background:var(--heritage-green) !important;
  border:1px solid rgba(197,160,89,.75) !important;
  border-radius:24px !important;
  color:var(--white);
  padding:2rem;
  box-shadow:0 10px 28px rgba(11,61,46,.12);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

#tentang-daerah .card-royal:hover{
  transform:translateY(-7px);
  border-color:var(--gold) !important;
  box-shadow:0 18px 35px rgba(197,160,89,.28);
}

#tentang-daerah .card-royal .icon-badge{
  color:var(--gold) !important;
  border-color:var(--gold) !important;
}

#tentang-daerah .card-royal h3{
  color:var(--white) !important;
}

#tentang-daerah .card-royal p,
#tentang-daerah .card-royal p[style]{
  color:rgba(255,255,255,.88) !important;
}

/* ============================================================
   DESTINASI — TERANG, PREMIUM
   ============================================================ */
#destinasi-list,
.destinasi{
  background:var(--heritage-bg) !important;
  color:var(--ink);
}

#destinasi-list .judul-ungu,
#destinasi-list h2{
  color:var(--ink) !important;
}

#destinasi-list .aksen-emas{
  color:var(--gold) !important;
}

#destinasi-list > .container > .text-center p{
  color:#4A453D !important;
}

.kartu-destinasi{
  background:var(--white) !important;
  border:1px solid rgba(197,160,89,.48) !important;
  border-radius:24px !important;
  padding:1.5rem;
  box-shadow:0 8px 25px rgba(11,61,46,.08);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.kartu-destinasi:hover{
  transform:translateY(-7px);
  border-color:var(--gold) !important;
  box-shadow:0 18px 38px rgba(197,160,89,.28);
}

.kartu-thumb{
  border-radius:18px !important;
  border-color:rgba(197,160,89,.6) !important;
}

.kartu-top-text h3{
  color:var(--heritage-green) !important;
}

.kartu-kategori,
.kartu-kategori i,
.destinasi-meta,
.destinasi-meta i{
  color:#8A6A32 !important;
}

.kartu-destinasi-body p{
  color:#4A453D !important;
}

.destinasi-meta{
  border-top-color:rgba(197,160,89,.3);
}

.btn-pesan-tiket{
  background:var(--heritage-green) !important;
  color:var(--white) !important;
  border:1px solid var(--gold) !important;
  border-radius:12px !important;
  padding:.7rem 1rem;
  transition:.3s ease;
}

.btn-pesan-tiket:hover{
  background:var(--gold) !important;
  color:var(--ink) !important;
}

.status-buka{
  background:rgba(39,125,85,.10) !important;
  border-color:#3D9B70 !important;
  color:#246B4C !important;
}

.status-tutup{
  background:rgba(180,70,55,.08) !important;
  border-color:#C47A70 !important;
  color:#93483F !important;
}

/* ============================================================
   HUBUNGI KAMI — PUTIH
   ============================================================ */
#kontak{
  background:#FFFFFF !important;
  color:var(--ink);
}

#kontak .judul-ungu,
#kontak h2{
  color:var(--ink) !important;
}

#kontak .aksen-emas{
  color:var(--gold) !important;
}

#kontak .text-center > p{
  color:#4A453D !important;
}

#kontak .card-royal{
  background:var(--heritage-green) !important;
  border:1px solid rgba(197,160,89,.7) !important;
  border-radius:24px !important;
  box-shadow:0 12px 30px rgba(11,61,46,.12);
}

#kontak .contact-quick i{
  color:var(--gold) !important;
}

#kontak .contact-quick .label{
  color:var(--gold-soft) !important;
}

#kontak .contact-quick .value{
  color:var(--white) !important;
}

.form-panel{
  background:var(--white) !important;
  border:1px solid rgba(197,160,89,.45);
  border-radius:20px !important;
  padding:2.8rem !important;
  color:var(--ink) !important;
  box-shadow:0 18px 45px rgba(11,61,46,.14) !important;
}

.form-panel::before{
  border-color:rgba(197,160,89,.35) !important;
  border-radius:16px !important;
}

.form-panel h3,
.form-label-royal{
  color:var(--heritage-green) !important;
}

.form-control-royal{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  border:1px solid #D8D1C4 !important;
  border-radius:12px !important;
}

.form-control-royal:focus{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 .2rem rgba(197,160,89,.18) !important;
}

.btn-royal-submit{
  background:var(--heritage-green) !important;
  border:1px solid var(--gold) !important;
  color:var(--white) !important;
  border-radius:12px !important;
}

.btn-royal-submit:hover{
  background:var(--gold) !important;
  color:var(--ink) !important;
}

.security-note,
.security-note i{
  color:#6D6251 !important;
}

/* Social links */
.social-link{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(197,160,89,.35) !important;
  color:var(--white) !important;
  border-radius:12px !important;
}

.social-link i{
  color:var(--gold) !important;
}

.social-link:hover{
  background:var(--gold) !important;
  color:var(--ink) !important;
}

/* ============================================================
   DETAIL DESTINASI
   ============================================================ */
.hero-detail::after{
  background:linear-gradient(
    0deg,
    rgba(11,61,46,.88) 0%,
    rgba(11,61,46,.34) 55%,
    rgba(11,61,46,.05) 100%
  ) !important;
}

.hero-detail-breadcrumb,
.hero-detail-breadcrumb a{
  color:rgba(255,255,255,.82) !important;
}

.info-detail .list-group-item{
  background:var(--heritage-green) !important;
  color:var(--white) !important;
  border:1px solid rgba(197,160,89,.65) !important;
  border-radius:16px !important;
  box-shadow:0 8px 20px rgba(11,61,46,.12) !important;
}

.info-detail .list-group-item i{
  color:var(--gold) !important;
}

.info-detail .list-group-item strong{
  color:var(--white) !important;
}

.detail-section h2{
  color:var(--heritage-green) !important;
}

.detail-section p,
.detail-desc{
  color:#3E3A34 !important;
}

.fasilitas-item{
  background:var(--white) !important;
  border-color:rgba(197,160,89,.4) !important;
  border-radius:16px !important;
  color:#3E3A34 !important;
}

.fasilitas-item i{
  color:var(--gold) !important;
}

.destinasi-lain-card{
  background:var(--white) !important;
  border-color:rgba(197,160,89,.45) !important;
  border-radius:24px !important;
  box-shadow:0 8px 25px rgba(11,61,46,.08);
}

.destinasi-lain-card:hover{
  border-color:var(--gold) !important;
  box-shadow:0 18px 38px rgba(197,160,89,.25);
}

/* ============================================================
   PAKET & TESTIMONI
   ============================================================ */
.kartu-paket,
.kartu-testimoni{
  background:var(--white) !important;
  border:1px solid rgba(197,160,89,.45) !important;
  border-radius:24px !important;
  box-shadow:0 8px 25px rgba(11,61,46,.08);
  color:var(--ink);
}

.kartu-paket:hover,
.kartu-testimoni:hover{
  border-color:var(--gold) !important;
  box-shadow:0 18px 38px rgba(197,160,89,.25);
}

.kartu-paket h3,
.testimoni-nama{
  color:var(--heritage-green) !important;
}

.harga-paket,
.testimoni-bintang{
  color:#8A6A32 !important;
}

.list-fasilitas li,
.kartu-testimoni p{
  color:#4A453D !important;
}

.testimoni-avatar{
  background:var(--gold) !important;
  color:var(--ink) !important;
}

.badge-populer{
  background:var(--gold) !important;
  color:var(--ink) !important;
}

/* ============================================================
   GALERI MEDIA
   ============================================================ */
.galeri-media-item,
.galeri-detail-grid .foto-item{
  border-radius:24px !important;
  border-color:rgba(197,160,89,.45) !important;
  box-shadow:0 8px 24px rgba(11,61,46,.08);
}

.galeri-media-item:hover,
.galeri-detail-grid .foto-item:hover{
  border-color:var(--gold) !important;
  box-shadow:0 15px 32px rgba(197,160,89,.25);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{
  background:var(--heritage-bg) !important;
}

.faq-accordion .accordion-item{
  background:var(--white) !important;
  border-color:rgba(197,160,89,.45) !important;
  border-radius:20px !important;
  box-shadow:0 8px 25px rgba(11,61,46,.06);
}

.faq-accordion .accordion-button{
  color:var(--heritage-green) !important;
}

.faq-accordion .accordion-button i{
  color:var(--gold) !important;
}

.faq-accordion .accordion-button:not(.collapsed){
  background:rgba(197,160,89,.10) !important;
  color:var(--heritage-green) !important;
}

.faq-accordion .accordion-body{
  background:#FFFFFF !important;
  color:#4A453D !important;
  border-top-color:rgba(197,160,89,.25);
}

/* ============================================================
   SEARCH & PAGINATION
   ============================================================ */
.destinasi .input-group .form-control{
  background:#FFFFFF !important;
  border-color:rgba(197,160,89,.5) !important;
  color:var(--ink) !important;
  border-radius:12px 0 0 12px !important;
}

.destinasi .input-group .form-control::placeholder{
  color:#8A8378 !important;
}

.destinasi .input-group .btn-primary,
.destinasi .input-group .btn-cari-royal{
  background:var(--heritage-green) !important;
  border-color:var(--gold) !important;
  color:var(--white) !important;
}

.destinasi .input-group .btn-primary:hover,
.destinasi .input-group .btn-cari-royal:hover{
  background:var(--gold) !important;
  color:var(--ink) !important;
}

.pagination .page-link{
  background:var(--white) !important;
  border-color:rgba(197,160,89,.45) !important;
  color:var(--heritage-green) !important;
  border-radius:10px !important;
}

.pagination .page-link:hover{
  background:rgba(197,160,89,.12) !important;
  color:var(--heritage-green) !important;
}

.pagination .page-item.active .page-link{
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:var(--ink) !important;
}

/* ============================================================
   FOOTER — HIJAU ISTANA
   ============================================================ */
footer{
  background:var(--heritage-green) !important;
  border-top:1px solid rgba(197,160,89,.55);
}

.footer-col h4{
  color:var(--gold) !important;
}

.footer-col p,
.footer-col ul li a{
  color:rgba(255,255,255,.86) !important;
}

.footer-col ul li a:hover{
  color:var(--gold) !important;
}

.footer-copy{
  color:rgba(255,255,255,.62) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
 

  .form-panel{
    padding:2rem 1.3rem !important;
  }

  .galeri-modern .foto-utama,
  .galeri-modern .foto-thumb{
    border-radius:18px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ---------- FINAL DETAIL: KARTU ICON DI ATAS BAND HIJAU ---------- */
#tentang-daerah > .container > .row.g-4.mt-5{
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  position:relative;
  isolation:isolate;
}

#tentang-daerah > .container > .row.g-4.mt-5::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-color:var(--heritage-green);
  background-image:
    linear-gradient(45deg,transparent 45%,rgba(197,160,89,.14) 46%,transparent 50%),
    linear-gradient(-45deg,transparent 45%,rgba(197,160,89,.14) 46%,transparent 50%);
  background-size:42px 42px;
  border-top:1px solid rgba(197,160,89,.35);
  border-bottom:1px solid rgba(197,160,89,.35);
}

#tentang-daerah > .container > .row.g-4.mt-5 .card-royal{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  border:1px solid rgba(197,160,89,.75) !important;
  border-radius:24px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

#tentang-daerah > .container > .row.g-4.mt-5 .card-royal:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 38px rgba(197,160,89,.30);
}

#tentang-daerah > .container > .row.g-4.mt-5 .card-royal .icon-badge{
  color:var(--gold) !important;
  border-color:var(--gold) !important;
}

#tentang-daerah > .container > .row.g-4.mt-5 .card-royal h3{
  color:var(--heritage-green) !important;
}

#tentang-daerah > .container > .row.g-4.mt-5 .card-royal p,
#tentang-daerah > .container > .row.g-4.mt-5 .card-royal p[style]{
  color:#4A453D !important;
}

/* Toggle Bootstrap tetap putih di navbar hijau */
.navbar-toggler-icon{
  filter:brightness(0) invert(1);
}

/* =========================================================
   HERO WISATA MEDAN — FINAL
   FOTO TERLIHAT + OVERLAY TIPIS + ANIMASI
   ========================================================= */

.hero-ungu {
    position: relative;
    min-height: 82vh;

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

    overflow: hidden;

    /* FOTO UTAMA */
    

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

    border-bottom: 1px solid rgba(197, 160, 89, 0.55);
}


/* =========================================================
   LAPISAN GELAP DI ATAS FOTO
   ========================================================= */

.hero-ungu::after {
    content: "";

    position: absolute;
    inset: 0;

    /*
       Overlay sengaja dibuat TIPIS
       supaya foto tetap terlihat jelas.
    */
    background: linear-gradient(
        135deg,
        rgba(11, 61, 46, 0.12),
        rgba(0, 0, 0, 0.32)
    );

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   POLA EMAS MELAYU
   ========================================================= */

.hero-ungu::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            45deg,
            transparent 45%,
            rgba(197, 160, 89, 0.18) 46%,
            transparent 50%
        ),
        linear-gradient(
            -45deg,
            transparent 45%,
            rgba(197, 160, 89, 0.18) 46%,
            transparent 50%
        );

    background-size: 70px 70px;

    opacity: 0.18;

    z-index: 2;

    pointer-events: none;
}


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

.hero-ungu .container {
    position: relative;

    z-index: 3;

    animation: heroFadeUp 1s ease-out forwards;
}


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

.hero-ungu h1 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(2.2rem, 5vw, 4rem);

    font-weight: 700;

    color: #FFFFFF;

    line-height: 1.15;

    margin-bottom: 20px;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.65),
        0 0 25px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   TEKS KECIL DI ATAS JUDUL
   ========================================================= */

.hero-ungu .eyebrow-gold {
    font-family: "Poppins", sans-serif;

    font-size: 0.85rem;

    font-weight: 600;

    color: #C5A059 !important;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 12px;
}


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

.hero-ungu p {
    font-family: "Poppins", sans-serif;

    font-size: 1.05rem;

    line-height: 1.7;

    color: #FFFFFF !important;

    max-width: 650px;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.6);
}


/* =========================================================
   JAM SEKARANG
   ========================================================= */

.hero-ungu .jam-sekarang {
    font-family: "Poppins", sans-serif;

    color: #C5A059 !important;

    font-size: 0.85rem;

    font-weight: 500;
}


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

@keyframes heroFadeUp {

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

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

}


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

@media (max-width: 768px) {

    .hero-ungu {
        min-height: 72vh;

        padding: 5rem 1rem;

        background-position: center center;
    }

    .hero-ungu h1 {
        font-size: 2.1rem;
    }

    .hero-ungu p {
        font-size: 0.95rem;
    }

}

.hero-ungu {
    position: relative;
    overflow: hidden;
}

.hero-ungu::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(11, 61, 46, 0.20),
        rgba(0, 0, 0, 0.55)
    );

    z-index: 1;
}

.hero-ungu .container {
    position: relative;
    z-index: 2;

    animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {

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

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

}



/* ============================================================
   ULASAN PENGUNJUNG
   ============================================================ */

.detail-ulasan {
    margin-top: 4rem;
    padding: 3rem 0;
}

.detail-ulasan .section-eyebrow {
    display: inline-block;
    color: #C5A059;
    font-family: 'Poppins', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.detail-ulasan .section-title {
    margin: 0;
    color: #0B3D2E;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
}

.ulasan-subtitle {
    margin-top: .6rem;
    color: #777;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
}

/* KARTU ULASAN */
.ulasan-card {
    background: #FFFFFF;
    border: 1px solid rgba(11, 61, 46, .10);
    border-radius: 16px;
    padding: 1.3rem 1.5rem;
    box-shadow: 0 6px 20px rgba(11, 61, 46, .06);
    transition: all .25s ease;
}

.ulasan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11, 61, 46, .10);
    border-color: rgba(197, 160, 89, .35);
}

/* AVATAR */
.ulasan-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #0B3D2E,
        #155B45
    );
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(11, 61, 46, .18);
}

/* NAMA */
.ulasan-nama {
    color: #0B3D2E;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 600;
}

/* RATING */
.ulasan-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ulasan-rating i {
    color: #C5A059;
    font-size: .85rem;
}

.rating-angka {
    color: #777;
    font-family: 'Poppins', sans-serif;
    font-size: .78rem;
    font-weight: 500;
    margin-left: 5px;
}

/* KOMENTAR */
.ulasan-komentar {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 61, 46, .08);
    color: #4B5563;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    line-height: 1.7;
}

/* TOMBOL EDIT */
.btn-edit-ulasan {
    border: 1px solid #0B3D2E;
    color: #0B3D2E;
    background: transparent;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    padding: .35rem .75rem;
    transition: all .2s ease;
}

.btn-edit-ulasan:hover {
    background: #0B3D2E;
    color: #FFFFFF;
}

/* BELUM ADA ULASAN */
.ulasan-kosong {
    background: #FAFAF8;
    border: 1px dashed rgba(11, 61, 46, .20);
    border-radius: 18px;
    padding: 3rem 1.5rem;
}

.ulasan-kosong-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(197, 160, 89, .12);
    color: #C5A059;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.ulasan-kosong h5 {
    color: #0B3D2E;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    margin-bottom: .5rem;
}

.ulasan-kosong p {
    color: #777;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    max-width: 500px;
    margin: 0 auto;
}

/* TOMBOL TULIS ULASAN */
.btn-tulis-ulasan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #0B3D2E,
        #155B45
    );
    border: none;
    color: #FFFFFF;
    padding: .75rem 1.5rem;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(11, 61, 46, .18);
    transition: all .25s ease;
}

.btn-tulis-ulasan:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(11, 61, 46, .25);
    background: linear-gradient(
        135deg,
        #155B45,
        #2A765C
    );
}

/* RESPONSIVE */
@media (max-width: 576px) {

    .detail-ulasan {
        padding: 2rem 0;
    }

    .detail-ulasan .section-title {
        font-size: 1.6rem;
    }

    .ulasan-card {
        padding: 1rem;
    }

    .ulasan-avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: .9rem;
    }

    .ulasan-komentar {
        font-size: .85rem;
    }
}


/* =========================================================
   ADMIN DASHBOARD — WISATA MEDAN
   Mengikuti layout dashboard referensi
========================================================= */


/* =========================================================
   BASIC
========================================================= */

.admin-page {
    margin: 0;
    padding: 0;
    background: #F7F5F0;
    color: #1D2925;
    font-family: "Segoe UI", Arial, sans-serif;
    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
========================================================= */

.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;

    width: 250px;

    background:
        linear-gradient(
            180deg,
            #0B3D2E 0%,
            #0E4939 55%,
            #083329 100%
        );

    color: #FFFFFF;

    padding: 28px 18px;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    box-shadow:
        8px 0 30px rgba(11, 61, 46, .12);
}


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

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 8px 22px;
}


.admin-brand-icon {
    width: 42px;
    height: 42px;

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

    background: #C5A059;

    color: #0B3D2E;

    border-radius: 12px;

    font-size: 20px;

    box-shadow:
        0 6px 18px rgba(197,160,89,.25);
}


.admin-brand-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .2px;
}


.admin-brand-subtitle {
    margin-top: 2px;

    font-size: 9px;
    letter-spacing: 1.4px;

    color: #E4D2A8;
}


/* =========================================================
   SIDEBAR LINE
========================================================= */

.admin-sidebar-line {
    height: 1px;

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

    margin: 4px 0 22px;
}


/* =========================================================
   MENU
========================================================= */

.admin-menu-title {
    font-size: 9px;
    font-weight: 700;

    color: #CDBE9B;

    letter-spacing: 1.2px;

    padding:
        0 10px 10px;
}


.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;

    min-height: 44px;

    padding: 10px 12px;

    margin-bottom: 5px;

    border-radius: 10px;

    color: #F8F8F8;

    text-decoration: none;

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

    transition:
        .2s ease;
}


.admin-menu-link i:first-child {
    width: 20px;

    text-align: center;

    font-size: 15px;
}


.admin-menu-link:hover {
    background:
        rgba(255,255,255,.10);

    color: #FFFFFF;

    transform:
        translateX(2px);
}


.admin-menu-link.active {
    background:
        linear-gradient(
            135deg,
            #C5A059,
            #D9B86F
        );

    color: #0B3D2E;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(197,160,89,.18);
}


.admin-menu-arrow {
    margin-left: auto;

    font-size: 11px !important;
}


/* =========================================================
   SIDEBAR BOTTOM
========================================================= */

.admin-sidebar-bottom {
    margin-top: auto;
}


.admin-back-link {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #E8E4D8;

    text-decoration: none;

    font-size: 11px;

    padding: 8px 10px;
}


.admin-back-link:hover {
    color: #FFFFFF;
}


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

.admin-main {
    margin-left: 250px;

    min-height: 100vh;

    background: #F7F5F0;
}


/* =========================================================
   TOPBAR
========================================================= */

.admin-topbar {
    height: 76px;

    background: #FFFFFF;

    border-bottom:
        1px solid #E8E4DB;

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

    padding: 0 30px;

    position: sticky;
    top: 0;

    z-index: 900;
}


.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}


.admin-page-title {
    font-size: 16px;

    font-weight: 750;

    color: #14241F;
}


.admin-page-subtitle {
    margin-top: 2px;

    font-size: 10px;

    color: #8C8A82;
}


.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}


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

.admin-search {
    width: 210px;

    height: 38px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    border:
        1px solid #E7E3DA;

    border-radius: 9px;

    background: #FAFAF8;
}


.admin-search i {
    color: #8B918B;

    font-size: 13px;
}


.admin-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    font-size: 11px;

    color: #24332D;
}


.admin-search input::placeholder {
    color: #A6A49E;
}


/* =========================================================
   TOP ICON
========================================================= */

.admin-top-icon {
    border: 0;

    background: #F2EFE8;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: #155B45;

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

    cursor: pointer;
}


.admin-top-icon:hover {
    background: #E4D2A8;
}


/* =========================================================
   PROFILE
========================================================= */

.admin-profile {
    display: flex;
    align-items: center;
    gap: 9px;

    padding-left: 8px;
}


.admin-profile-icon {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #E4D2A8;

    color: #0B3D2E;

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


.admin-profile-info {
    display: flex;
    flex-direction: column;

    line-height: 1.2;
}


.admin-profile-info strong {
    font-size: 11px;

    color: #1A2924;
}


.admin-profile-info small {
    font-size: 9px;

    color: #929088;
}


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

.admin-content {
    padding: 25px 30px 45px;
}


/* =========================================================
   WELCOME
========================================================= */

.admin-welcome {
    position: relative;

    min-height: 112px;

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

    overflow: hidden;

    padding: 24px 28px;

    margin-bottom: 18px;

    border-radius: 15px;

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #0B3D2E,
            #155B45
        );

    box-shadow:
        0 10px 25px rgba(11,61,46,.15);
}


.admin-welcome::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -60px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(197,160,89,.12);
}


.admin-welcome-small {
    display: block;

    color: #E4D2A8;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    margin-bottom: 6px;
}


.admin-welcome h1 {
    position: relative;

    z-index: 2;

    font-size: 20px;

    font-weight: 750;

    margin: 0 0 6px;
}


.admin-welcome p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #E7EFEA;

    font-size: 11px;
}


.admin-welcome-icon {
    position: relative;

    z-index: 2;

    font-size: 65px;

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

    padding-right: 20px;
}


/* =========================================================
   STATISTICS
========================================================= */

.admin-stat-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 18px;
}


.admin-stat-card {
    position: relative;

    min-height: 120px;

    background: #FFFFFF;

    border:
        1px solid #E9E5DD;

    border-radius: 13px;

    padding: 18px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    box-shadow:
        0 5px 20px rgba(45,40,30,.045);

    transition: .2s ease;
}


.admin-stat-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px rgba(45,40,30,.08);
}


.admin-stat-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 11px;

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

    font-size: 16px;
}


.admin-stat-icon.green {
    background: #E5F1EC;
    color: #155B45;
}


.admin-stat-icon.gold {
    background: #F8F0D9;
    color: #A68127;
}


.admin-stat-icon.blue {
    background: #E5F0F1;
    color: #287078;
}


.admin-stat-icon.rose {
    background: #F6E7E8;
    color: #9B4A55;
}


.admin-stat-content {
    display: flex;
    flex-direction: column;
}


.admin-stat-content span {
    font-size: 9px;

    color: #8C8981;

    margin-bottom: 4px;
}


.admin-stat-content strong {
    font-size: 24px;

    line-height: 1;

    color: #12362C;

    margin-bottom: 5px;
}


.admin-stat-content small {
    font-size: 8px;

    color: #A09C93;
}


.admin-card-more {
    position: absolute;

    right: 14px;
    top: 13px;

    color: #B2AEA6;

    font-size: 13px;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.admin-dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        315px;

    gap: 18px;

    align-items: start;
}


.admin-dashboard-left {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.admin-dashboard-right {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


/* =========================================================
   PANEL
========================================================= */

.admin-panel {
    background: #FFFFFF;

    border:
        1px solid #E9E5DD;

    border-radius: 14px;

    box-shadow:
        0 5px 20px rgba(45,40,30,.045);

    overflow: hidden;
}


.admin-panel-header {
    min-height: 70px;

    padding: 17px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid #F0ECE5;
}


.admin-panel-header h2 {
    margin: 0;

    font-size: 14px;

    color: #172D25;

    font-weight: 750;
}


.admin-panel-header p {
    margin: 4px 0 0;

    font-size: 9px;

    color: #98948C;
}


.admin-panel-icon {
    color: #C5A059;

    font-size: 17px;
}


/* =========================================================
   CHART
========================================================= */

.chart-panel {
    min-height: 410px;
}


.admin-chart-period {
    padding: 7px 10px;

    border-radius: 7px;

    background: #F5F2EB;

    color: #5D625D;

    font-size: 9px;
}


.admin-chart-summary {
    padding: 16px 20px 0;

    display: flex;

    align-items: baseline;

    gap: 8px;
}


.admin-chart-summary strong {
    font-size: 27px;

    color: #12362C;
}


.admin-chart-summary span {
    font-size: 10px;

    color: #6E716B;
}


.admin-chart-summary small {
    color: #C5A059;

    font-size: 9px;
}


.admin-chart-wrapper {
    height: 275px;

    padding: 10px 18px 18px;
}


/* =========================================================
   TWO COLUMN
========================================================= */

.admin-two-column {
    display: grid;

    grid-template-columns:
        1.25fr
        .9fr;

    gap: 18px;
}


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

.travel-status-list {
    padding: 15px 20px 18px;
}


.travel-status-item {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;
}


.travel-status-item:last-child {
    margin-bottom: 0;
}


.travel-status-icon {
    width: 34px;
    height: 34px;

    border-radius: 9px;

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

    flex-shrink: 0;
}


.travel-status-icon.green {
    background: #E5F1EC;
    color: #155B45;
}


.travel-status-icon.gold {
    background: #F8F0D9;
    color: #A68127;
}


.travel-status-icon.blue {
    background: #E5F0F1;
    color: #287078;
}


.travel-status-info {
    flex: 1;
}


.travel-status-info > div:first-child {
    display: flex;

    justify-content: space-between;

    margin-bottom: 7px;
}


.travel-status-info strong {
    font-size: 10px;

    color: #37433F;
}


.travel-status-info span {
    font-size: 10px;

    font-weight: 700;

    color: #173B30;
}


.travel-progress {
    height: 6px;

    background: #EEF0EC;

    border-radius: 10px;

    overflow: hidden;
}


.travel-progress div {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #0B3D2E,
            #2A765C
        );

    border-radius: inherit;
}


.travel-progress.blue-progress div {
    background:
        linear-gradient(
            90deg,
            #438A91,
            #72ADB0
        );
}


/* =========================================================
   TOTAL EXPLORE
========================================================= */

.total-explore-panel {
    min-height: 255px;
}


.explore-number {
    padding: 18px 20px 0;

    font-size: 38px;

    line-height: 1;

    font-weight: 800;

    color: #0B3D2E;
}


.explore-label {
    padding: 7px 20px 0;

    font-size: 9px;

    color: #99958C;
}


.explore-bars {
    height: 85px;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding: 10px 20px 20px;
}


.explore-bars div {
    flex: 1;

    background:
        linear-gradient(
            180deg,
            #C5A059,
            #E4D2A8
        );

    border-radius:
        4px 4px 0 0;
}


/* =========================================================
   POPULAR LOCATION
========================================================= */
/* =========================================================
   POPULAR LOCATION — VERSI PREMIUM
========================================================= */

.popular-location-panel {
    min-height: 320px;
}

.admin-view-link {
    color: #A17D28;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

.admin-view-link:hover {
    color: #0B3D2E;
}

.popular-location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 18px 20px 22px;
}

.popular-location-card {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #0B3D2E, #155B45);
    box-shadow: 0 10px 26px rgba(11,61,46,.16);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}

.popular-location-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 42px rgba(197,160,89,.32);
}

.popular-location-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

.popular-location-card:hover img {
    transform: scale(1.13);
    filter: brightness(.8);
}

/* garis emas tipis muncul saat hover */
.popular-location-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 16px;
    z-index: 3;
    pointer-events: none;
    transition: border-color .35s ease;
}

.popular-location-card:hover::before {
    border-color: rgba(197,160,89,.65);
}

/* overlay gradient lebih dalam + smooth */
.popular-location-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 16px 15px;
    background: linear-gradient(
        0deg,
        rgba(5,25,19,.92) 0%,
        rgba(5,25,19,.55) 45%,
        transparent 100%
    );
    color: #FFFFFF;
    z-index: 2;
    transition: padding-bottom .35s ease;
}

.popular-location-card:hover .popular-location-overlay {
    padding-bottom: 20px;
}

.popular-location-overlay h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.popular-location-overlay span {
    font-size: 10px;
    color: #E9E9E9;
    display: flex;
    align-items: center;
    gap: 5px;
}

.popular-location-overlay i {
    color: #E4D2A8;
}

/* badge "Populer" pojok kanan atas biar gak polos */
.popular-location-card::after {
    content: "★ Populer";
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(197,160,89,.95);
    color: #0B3D2E;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* placeholder saat belum ada gambar, biar gak kosong garing */
.popular-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.35);
    font-size: 34px;
    background: linear-gradient(135deg, #0B3D2E, #2A765C);
}


/* =========================================================
   HISTORY
========================================================= */

.history-table-wrapper {
    overflow-x: auto;

    padding: 4px 20px 18px;
}


.admin-history-table {
    width: 100%;

    min-width: 650px;

    border-collapse: separate;

    border-spacing: 0 7px;
}


.admin-history-table th {
    padding: 8px 10px;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .6px;

    color: #9A958B;

    font-weight: 700;
}


.admin-history-table td {
    padding: 9px 10px;

    background: #F8F7F3;

    border-top:
        1px solid #EEEAE2;

    border-bottom:
        1px solid #EEEAE2;

    font-size: 9px;

    color: #666A65;
}


.admin-history-table tr td:first-child {
    border-left:
        1px solid #EEEAE2;

    border-radius:
        8px 0 0 8px;
}


.admin-history-table tr td:last-child {
    border-right:
        1px solid #EEEAE2;

    border-radius:
        0 8px 8px 0;
}


.history-destination {
    display: flex;

    align-items: center;

    gap: 9px;
}


.history-destination img,
.history-image-placeholder {
    width: 38px;
    height: 38px;

    border-radius: 7px;

    object-fit: cover;
}


.history-image-placeholder {
    background: #EAE6DD;

    color: #9B978E;

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


.history-destination strong {
    color: #33433B;

    font-size: 10px;
}


.status-badge {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #31725D;

    background: #E8F2ED;

    padding: 5px 8px;

    border-radius: 20px;

    font-size: 8px;

    font-weight: 700;
}


.status-badge span {
    width: 5px;
    height: 5px;

    background: #3C9B77;

    border-radius: 50%;
}


/* =========================================================
   RECENT ACTIVITY
========================================================= */

.recent-activity-panel {
    min-height: 380px;
}


.activity-list {
    padding: 8px 18px 15px;
}


.activity-item {
    display: flex;

    gap: 10px;

    padding: 12px 0;

    border-bottom:
        1px solid #F0ECE5;
}


.activity-item:last-child {
    border-bottom: 0;
}


.activity-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

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

    background: #EAF2EE;

    color: #155B45;

    font-size: 13px;
}


.activity-content {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.activity-content strong {
    color: #34413C;

    font-size: 10px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.activity-content span {
    margin-top: 2px;

    color: #88867F;

    font-size: 8px;

    line-height: 1.4;
}


.activity-content small {
    margin-top: 3px;

    color: #B0ACA3;

    font-size: 7px;
}


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

.wisata-stat-panel {
    padding-bottom: 18px;
}


.wisata-stat-grid {
    display: grid;

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

    gap: 10px;

    padding: 15px 18px 0;
}


.wisata-stat-box {
    min-height: 112px;

    border-radius: 11px;

    padding: 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;
}


.green-box {
    background: #E7F1EC;
}


.gold-box {
    background: #F7EFD9;
}


.blue-box {
    background: #E5F0F1;
}


.rose-box {
    background: #F6E8E9;
}


.wisata-stat-circle {
    width: 55px;
    height: 55px;

    border-radius: 50%;

    border: 4px solid rgba(255,255,255,.9);

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

    background: #FFFFFF;
}


.green-box .wisata-stat-circle {
    color: #155B45;
}


.gold-box .wisata-stat-circle {
    color: #A68127;
}


.blue-box .wisata-stat-circle {
    color: #287078;
}


.rose-box .wisata-stat-circle {
    color: #9B4A55;
}


.wisata-stat-circle strong {
    font-size: 15px;
}


.wisata-stat-box > span {
    font-size: 9px;

    font-weight: 700;

    color: #56605A;
}


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

.admin-empty {
    padding: 25px;

    text-align: center;

    color: #99958D;

    font-size: 10px;
}


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

.admin-alert {
    border: 0;

    border-radius: 10px;

    font-size: 11px;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.admin-mobile-button {
    display: none;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 9px;

    background: #E8F0EC;

    color: #0B3D2E;
}


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

@media (max-width: 1200px) {

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


    .admin-dashboard-grid {
        grid-template-columns:
            1fr;
    }


    .admin-dashboard-right {
        display: grid;

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

}


@media (max-width: 900px) {

    .admin-sidebar {
        transform:
            translateX(-100%);

        transition:
            transform .25s ease;
    }


    .admin-sidebar.show {
        transform:
            translateX(0);
    }


    .admin-main {
        margin-left: 0;
    }


    .admin-mobile-button {
        display: flex;

        align-items: center;

        justify-content: center;
    }


    .admin-search {
        display: none;
    }


    .admin-topbar {
        padding:
            0 18px;
    }


    .admin-content {
        padding:
            20px 18px 35px;
    }


    .admin-two-column {
        grid-template-columns:
            1fr;
    }


    .admin-dashboard-right {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

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


    .admin-welcome {
        padding: 20px;

        min-height: 125px;
    }


    .admin-welcome h1 {
        font-size: 17px;
    }


    .admin-welcome-icon {
        display: none;
    }


    .popular-location-grid {
        grid-template-columns:
            1fr;
    }


    .popular-location-card {
        height: 200px;
    }


    .admin-profile-info {
        display: none;
    }


    .admin-chart-wrapper {
        height: 230px;
    }

}

/* ===== TOMBOL TAMBAH DESTINASI ===== */
.btn-tambah-destinasi{
  display:inline-flex;
  align-items:center;
  background:linear-gradient(120deg, #0B3D2E, #155B45);
  border:1px solid #C5A059;
  color:#FFFFFF;
  font-family:'Jost', sans-serif;
  font-size:.9rem;
  font-weight:500;
  padding:.65rem 1.3rem;
  border-radius:10px;
  white-space:nowrap;
  transition:all .3s ease;
}
.btn-tambah-destinasi:hover{
  background:#C5A059;
  color:#1A1A1A;
  border-color:#C5A059;
}

/* ===== AKSI ADMIN DI HALAMAN DETAIL (EDIT + HAPUS) ===== */
.aksi-admin-destinasi{
  display:flex;
  justify-content:center;
  gap:.9rem;
  flex-wrap:wrap;
}

.btn-edit-royal{
  display:inline-flex;
  align-items:center;
  background:transparent;
  border:1.5px solid #0B3D2E;
  color:#0B3D2E;
  font-family:'Jost', sans-serif;
  font-size:.88rem;
  font-weight:600;
  padding:.7rem 1.5rem;
  border-radius:10px;
  transition:all .3s ease;
}
.btn-edit-royal:hover{
  background:#0B3D2E;
  color:#FFFFFF;
}

.btn-hapus-royal{
  display:inline-flex;
  align-items:center;
  background:transparent;
  border:1.5px solid #DC3545;
  color:#DC3545;
  font-family:'Jost', sans-serif;
  font-size:.88rem;
  font-weight:600;
  padding:.7rem 1.5rem;
  border-radius:10px;
  cursor:pointer;
  transition:all .3s ease;
}
.btn-hapus-royal:hover{
  background:#DC3545;
  color:#FFFFFF;
}

@media (max-width:576px){
  .aksi-admin-destinasi{
    flex-direction:column;
  }
  .aksi-admin-destinasi a,
  .aksi-admin-destinasi form,
  .aksi-admin-destinasi button{
    width:100%;
  }
}