/* style.css — Senopati Tour */

/* Reset ringkas */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:10px 16px;font-weight:600;border:1px solid transparent;transition:.2s}
.btn.primary{background:#5b43d6;color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:#5b43d6;color:#5b43d6}
.btn.ghost:hover{background:#5b43d612}
.btn.sm{padding:8px 12px;font-size:14px}
.btn.lg{padding:12px 22px;font-size:18px}
.btn.block{width:100%}

/* Topbar */
.topbar{background:#4d2fc2;color:#fff;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:40px}
.topbar .left span{margin-right:18px}
.topbar .social a{margin-left:10px;opacity:.9}

/* Header */
.header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{width:38px;height:38px;border-radius:50%}
.nav{display:flex;gap:18px;align-items:center}
.nav a{padding:6px 0}
.dropdown{position:relative}
.dropdown > button{background:transparent;border:0;font:inherit;cursor:pointer;padding:6px 0}
.dropdown .menu{position:absolute;top:120%;left:0;background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:8px;display:none;min-width:200px}
.dropdown:hover .menu{display:block}
.dropdown .menu a{display:block;padding:10px;border-radius:8px}
.dropdown .menu a:hover{background:#f4f3ff}
.hamburger{margin-left:auto;font-size:24px;background:transparent;border:0;display:none}
@media (max-width:980px){
  .nav{position:absolute;left:0;right:0;top:70px;background:#fff;border-bottom:1px solid #eee;display:none;flex-direction:column;padding:10px}
  .nav.show{display:flex}
  .hamburger{display:block}
}

/* ===== HERO (FINAL) — pakai <img>, full responsif, tanpa kotak hitam ===== */
.hero{ position:relative; overflow:hidden; margin-bottom:32px; }
.hero-slide{ display:none; position:relative; background:none !important; min-height:auto; }
.hero-slide.active{ display:block; }

.hero-img{
  width:100%; height:auto; display:block;
  object-fit:contain;
  object-position:center;
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  z-index:1; pointer-events:none;
}
.hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(20px, 5vw, 60px);
  color:#fff; z-index:2;
  background:transparent !important; backdrop-filter:none !important;
}
.hero-content h1{ font-size:40px; line-height:1.15; margin:16px 0 10px; font-weight:800; text-shadow:0 6px 25px rgba(0,0,0,.35); }
.hero-content p{ opacity:.95; margin-bottom:14px; }
.hero-content .price-start{ margin:8px 0 18px; opacity:.95; }

.hero .hero-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:8px; z-index:3; }
.hero-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:#ffffff80; cursor:pointer; }
.hero-dots button.active{ background:#fff; }
.stars{ opacity:.9 }

@media (max-width:768px){
  .hero-content{
    justify-content:flex-end;
    padding:14px 16px 64px;
    max-width:92vw;
  }
  .hero-content h1{ font-size:24px; line-height:1.2; }
  .hero-content p{ font-size:14px; }
  .btn.lg{ padding:10px 16px; font-size:16px; }
  .hero-dots button{ width:8px; height:8px; }
}
@media (min-width:992px){ .hero-content{ justify-content:center; } }

.edit-hook{ display:none }
body.admin .edit-hook{ display:inline-block; margin-top:8px; font-size:12px; opacity:.7 }

/* Icon strip */
.icon-strip{background:#ffffff;margin-top:0}
.icons{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.icon-card{background:#ffffff;border:1px solid #eee;border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.icon-card img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #5b43d620}
.icon-card p{margin:8px 0 0;font-size:13px}
@media (max-width:980px){ .icons{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .icons{grid-template-columns:repeat(2,1fr)} }

/* Section */
.section{padding:40px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.section h2{margin:0}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #eee;border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.05);display:flex;flex-direction:column}
.thumb{display:block;aspect-ratio:16/9;background:#f5f5f5;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.card-body{padding:14px}
.card .title{margin:6px 0;font-size:16px}
.sub{display:flex;align-items:center;gap:8px;color:#666;font-size:13px}
.dot{opacity:.6}
.price{margin:10px 0 12px}
@media (max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cards{grid-template-columns:1fr} }

/* Why */
.why{background:linear-gradient(180deg,#ffffff 0,#f7f6ff 100%);padding-bottom:56px;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:14px}
.why-card{background:#ffffff;border:1px solid #eee;border-radius:18px;padding:18px;box-shadow:0 8px 28px rgba(0,0,0,.05)}
.why-card .ico{font-size:24px}
@media (max-width:980px){ .why-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .why-grid{grid-template-columns:1fr} }

/* Testimoni */
.testi{padding:10px 0;background:oklab(66.027% 0.02214 -0.13839)}
.testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.testi-card{border:1px solid #eee;border-radius:16px;padding:16px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.testi-card .head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.testi-card img{width:40px;height:40px;border-radius:50%}
.testi-card .meta{font-size:12px;color:#666}
.center{text-align:center;margin-top:16px}
@media (max-width:980px){ .testi-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .testi-grid{grid-template-columns:1fr} }

/* CTA */
.cta{background:linear-gradient(180deg,#ffffff 0,#e7e3ff 100%);padding:40px 0}
.cta-box{background:linear-gradient(90deg,#5b43d6,#6a58e6);color:#fff;border-radius:18px;padding:28px;text-align:center;box-shadow:0 15px 40px rgba(91,67,214,.25)}

/* Footer */
.footer{background:linear-gradient(180deg,#0a0830 0,#1a164f 100%);color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 2fr 2fr;gap:18px;padding:36px 0}
.brand.foot span{font-weight:800}
.galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.copy{text-align:center;padding:12px 0;border-top:1px solid #ffffff1a;color:#ddd;font-size:13px}
.footer .social a{margin-right:10px}
@media (max-width:980px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .foot-grid{grid-template-columns:1fr} }

/* Chat promo badge */
.chat-badge{position:fixed;right:18px;bottom:18px;background:#ff3b6b;color:#fff;border-radius:999px;padding:12px 16px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:60}

/* Small helpers */
.primary{background:#5b43d6}

/* ===== FIX FINAL: Hero stabil di semua ukuran, no grey bars ===== */

/* container hero punya tinggi pasti berbasis viewport */
.hero{ margin-bottom: 28px; }

.hero-slide{
  position: relative;
  background: #000;          /* latar netral saat gambar loading */
  height: 62vw;              /* default: proporsional di HP (tinggi = 62% lebar) */
  min-height: 320px;         /* jangan terlalu pendek */
  max-height: 68vh;          /* jangan melebihi 68% layar */
  overflow: hidden;
  display: none;
}
.hero-slide.active{ display:block; }

/* di tablet/desktop, pakai tinggi berbasis viewport */
@media (min-width: 768px){
  .hero-slide{
    height: 56vh;
    min-height: 420px;
    max-height: 72vh;
  }
}
@media (min-width: 1200px){
  .hero-slide{
    height: 70vh;
    min-height: 520px;
    max-height: 80vh;
  }
}

/* gambar jadi layer latar yang mengisi penuh area hero */
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;          /* KUNCI: isi penuh, boleh terpotong sedikit */
  object-position: center;    /* kalau perlu fokus atas: center top */
  display:block;
}

/* overlay gradasi untuk kontras teks */
.hero .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.56));
  z-index:1; pointer-events:none;
}

/* teks mengambang di atas gambar */
.hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(18px, 5vw, 60px);
  color:#fff; z-index:2;
  background:transparent !important; backdrop-filter:none !important;
}

/* di HP, taruh teks ke bawah supaya foto tetap terlihat */
@media (max-width: 768px){
  .hero-content{
    justify-content:flex-end;
    padding: 14px 16px 72px; /* ruang untuk dots */
    max-width: 92vw;
  }
  .hero-dots button{ width:8px; height:8px; }
}

/* indikator slide */
.hero .hero-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:14px; display:flex; gap:8px; z-index:3;
}
.hero-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:#ffffff80; cursor:pointer; }
.hero-dots button.active{ background:#fff; }

/* ==== SLIDER HORIZONTAL UNTUK SECTION PAKET ==== */

/* header section: tombol View All + panah */
.head-actions{display:flex;align-items:center;gap:10px}
.slider-arrows{display:flex;gap:8px}
.slider-arrows .arrow{
  width:36px;height:36px;border-radius:999px;
  border:1px solid #e6e3ff;background:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.08);font-size:18px;line-height:1;transition:.15s;
}
.slider-arrows .arrow:hover{transform:translateY(-1px)}
.slider-arrows .arrow:disabled{opacity:.45;cursor:default;transform:none}

/* scroller: geser kanan-kiri + snap */
.cards.hscroll{
  display:flex;gap:18px;
  overflow-x:auto;overflow-y:visible;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* Firefox */
}
.cards.hscroll::-webkit-scrollbar{display:none} /* WebKit */

/* ukuran kartu di slider */
.cards.hscroll .card{
  flex:0 0 clamp(260px, 30vw, 360px);
  scroll-snap-align:start;
}

/* responsif: di tablet/HP tampilin 1–1.2 kartu */
@media (max-width:980px){ .cards.hscroll .card{flex-basis:78vw} }
@media (max-width:520px){ .cards.hscroll .card{flex-basis:86vw} }

/* Kecilkan tombol CTA di hero (tidak full width) */
.hero-content{
  align-items: flex-start;          /* hindari stretch ke lebar penuh */
}
.hero-content .btn.lg{
  align-self: flex-start;           /* paksa ukuran mengikuti konten */
  width: auto;
  min-width: 0;
  padding: 10px 18px;               /* opsional: agak compact */
}

/* ===== Responsive header & footer SEO/UX ===== */
.tap{touch-action:manipulation}

@media (max-width: 520px){
  /* Topbar stack */
  .topbar .container{
    flex-wrap:wrap; gap:6px; height:auto; padding:8px 20px;
  }
  .topbar .left{display:flex; gap:12px; flex-wrap:wrap}
  .topbar .left .tap{color:#fff; opacity:.95}
  .topbar .social a{font-size:18px}

  /* Header ringkas */
  .header-inner{height:64px}
  .brand img{width:32px;height:32px}
  .brand span{font-size:16px}
  .btn.primary{padding:8px 12px;font-size:14px}
  .nav a{padding:10px 0} /* ruang tap nyaman */
}

@media (max-width: 980px){
  /* Drawer nav: pastikan full width & tap yang nyaman */
  .nav{padding:6px 20px}
  .nav a{display:block;padding:12px 0;font-size:16px}
  .dropdown > button{padding:12px 0}
  .dropdown .menu{position:static; border:0; box-shadow:none; padding:0}
  .dropdown .menu a{padding:10px 0}
}

/* Footer mobile: jadi satu kolom + tap target jelas */
@media (max-width: 720px){
  .foot-grid{grid-template-columns:1fr; gap:12px; padding:24px 0}
  .footer p, .footer a{line-height:1.6}
  .footer .social a{font-size:18px; margin-right:12px}
  .galeri img{width:100%; height:auto}
}

/* --- FIX: Footer tidak menjorok kiri di mobile --- */
.footer .foot-grid { 
  padding: 36px 20px;          /* balikin padding kiri-kanan */
}
@media (max-width: 980px){
  .footer .foot-grid { padding: 28px 18px; }
}
@media (max-width: 520px){
  .footer .foot-grid { padding: 22px 16px; }
}

/* === Tag chips (badge) – kecil & rapat === */
.tags{               /* bungkus kumpulan tag */
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0;
}
a.badge, .badge{
  display:inline-flex !important;   /* paksa bukan block */
  align-items:center;
  width:auto !important;            /* jangan 100% */
  max-width:fit-content;
  padding:4px 8px;                  /* lebih kecil */
  font-size:12px;
  line-height:1;
  border-radius:999px;
  background:#5b43d6;
  color:#fff;
  text-decoration:none;
}

/* Gambar di dalam artikel */
.blog-content .blog-img{ margin:16px 0; text-align:center }
.blog-content .blog-img img{ max-width:100%; height:auto; border-radius:12px }
.blog-content .blog-img figcaption{ font-size:12px; color:#666; margin-top:6px }

/* Ukuran & align opsional */
.blog-content .blog-img.half{ width:50% }
.blog-content .blog-img.third{ width:33% }
.blog-content .blog-img.left{ float:left; margin:0 16px 12px 0; text-align:left }
.blog-content .blog-img.right{ float:right; margin:0 0 12px 16px; text-align:right }

/* Clear float di akhir konten */
.blog-content::after{ content:""; display:block; clear:both; }

/* Mobile tweaks */
@media (max-width:680px){
  .blog-content .blog-img{
    width:100% !important;
    float:none !important;
    margin:12px 0;
    text-align:center;
  }
  .blog-content .blog-img img{
    width:100%;
    height:auto;
  }
  .blog-content .blog-img.half,
  .blog-content .blog-img.third{
    width:100% !important;
  }
  .blog-content .blog-img.left,
  .blog-content .blog-img.right{
    float:none !important;
    margin:12px 0 !important;
    text-align:center;
  }
  .blog-content .blog-img figcaption{
    font-size:11px;
    margin-top:4px;
  }
}

/* ===== RAPIKAN FORM ADMIN (AMAN DIPASANG DI style.css) ===== */

/* Padding ke dalam card/form supaya tidak nempel ke tepi */
.admin-ui .admin-form,
.admin-form{
  padding: 18px 20px;        /* dorong konten ke dalam */
  border-radius: 16px;
}

/* Sedikit “gutter” per kolom */
.admin-ui .admin-form > div,
.admin-form > div{
  padding: 0 8px;
}

/* Spasi label & field */
.admin-ui .admin-form label,
.admin-form label{
  display:block;
  margin: 10px 0 6px;
  font-weight: 600;
}

/* Input/textarea/select lebih empuk & tidak nempel */
.admin-ui .admin-form input[type=text],
.admin-ui .admin-form input[type=file],
.admin-ui .admin-form input[type=number],
.admin-ui .admin-form select,
.admin-ui .admin-form textarea,
.admin-form input[type=text],
.admin-form input[type=file],
.admin-form input[type=number],
.admin-form select,
.admin-form textarea{
  width: 100%;
  padding: 12px 14px;        /* inner padding nyaman */
  border: 1px solid #e7e7ef;
  border-radius: 12px;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 10px;        /* jarak antar field */
}

.admin-ui .admin-form textarea,
.admin-form textarea{
  min-height: 140px;
  line-height: 1.45;
}

/* Grid dua kolom tetap rapi + gap antar kolom */
.admin-ui .admin-form,
.admin-form{
  display: grid;
  grid-template-columns: 1.25fr 1fr; /* kiri sedikit lebih lebar */
  gap: 24px;
  align-items: start;
}

/* Mobile: satu kolom penuh */
@media (max-width: 880px){
  .admin-ui .admin-form,
  .admin-form{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px 16px;
  }
}

/* Sticky footer */
body { height:100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Elemen isi halaman harus mengambil sisa tinggi */
main.page, .page-content{ flex:1 0 auto; }

/* Pastikan footer terdorong ke bawah */
.footer{ margin-top:auto; }

/* ==== Mobile nav menempel ke header tanpa sela ==== */
@media (max-width:980px){
  /* jadikan header-inner acuan posisi si .nav */
  .header-inner{ position: relative; }

  .nav{
    position:absolute;
    left:0; right:0;
    top:100%;              /* nempel persis di bawah header */
    margin-top:-1px;       /* “tutup” garis border header agar tidak ada celah */
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    display:none;
    flex-direction:column;
    padding:10px;
    z-index:50;
  }
  .nav.show{ display:flex; }

  /* sedikit perapihan item menu di mobile */
  .nav a, .dropdown > button{
    padding:12px 16px;
  }
}

/* (opsional) kalau browser kamu sudah dukung :has(), hilangkan border header saat menu terbuka */
@supports(selector(.header:has(.nav.show))){
  .header:has(.nav.show){ border-bottom-color:transparent; }
}

.page-body{ line-height:1.8; font-size:16px; }
.page-body p{ margin:0 0 14px; text-align:justify; }
.page-body ul,.page-body ol{ padding-left:22px; margin:0 0 14px; }


/* Loading overlay */
#app-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#5b43d6,#6f57e6);
  transition:opacity .45s ease, visibility .45s ease;
}
#app-loader.hidden{ opacity:0; visibility:hidden; }

/* spinner */
.loader-ring{
  width:50px; height:50px; border-radius:50%;
  border:6px solid rgba(255,255,255,.35);
  border-top-color:#fff; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* optional: logo + text */
.loader-box{ text-align:center; color:#fff; }
.loader-box img{ width:56px; height:56px; border-radius:50%; margin-bottom:10px }
.loader-box .brand{ font-weight:800; font-size:18px; letter-spacing:.3px }
.loader-gap{ height:14px }

/* FULLSCREEN, di tengah tepat */
#app-loader{
  position: fixed;
  inset: 0;                     /* top:0 right:0 bottom:0 left:0 */
  display: grid;                /* cara paling gampang center */
  place-items: center;          /* center X & Y */
  min-height: 100svh;           /* mobile-safe viewport */
  background: linear-gradient(180deg,#5b43d6,#6050e0);
  z-index: 99999;
  transition: opacity .45s ease, visibility .45s ease;
}

#app-loader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* isi loader diatur kolom & center */
.loader-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.loader-logo{
  width: 64px; height: 64px;
  border-radius: 50%;
  display: block;
}

.loader-title{
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
}

/* cincin animasi */
.loader-ring{
  width: 45px; height: 45px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 6px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }