/* ===== base & tokens ===== */
:root{
  --primary:#0ea5e9; /* sky-500 */
  --accent:#f59e0b;  /* amber-500 */
  --dark:#0b1220;
  --light:#f8fafc;

  --nav-fg:#0b6b7a;
  --shadow:0 3px 10px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--light);
  color:#111;
  padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)); /* ruang bottom nav */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Header ===== */
.headhead{margin:0 auto 4px !important; padding:0 !important;}
.headhead img{
  display:block; width:100%; height:auto; object-fit:cover; line-height:0;
  image-rendering: -webkit-optimize-contrast;
}

/* === Slideshow === */
.slideshow{
  position: relative;
  overflow: hidden;
  width: 100%;
  /* aspect-ratio menjaga tinggi responsif, bisa kamu ubah 21/9, 4/3 dll */
  aspect-ratio: 28/9;
  background: #e5eef3; /* warna latar saat gambar loading */
  border-radius: 16px;
}

.slide-container{
  height: 100%;
  display: flex;
  will-change: transform;
  /* transisi diatur via JS agar bisa non-animate saat lompat clone */
  transition: transform 0.5s ease;
}

.slideshow img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* jaga gambar selalu penuh dan rapi */
  user-select: none;
  pointer-events: none;
}

/* Dots/pagination */
.slider-dots{
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 5;
  padding: 0 10px;
}
.slider-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transform: scale(1);
  transition: transform .2s ease, background .2s ease;
}
.slider-dot.active{
  background: white;
  transform: scale(1.3);
}

/* Tombol panah (opsional, muncul saat hover/gesture) */
.slider-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff; display: grid; place-items: center;
  font: 700 16px system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  cursor: pointer; z-index: 6; border: 0; outline: 0;
  opacity: .0; transition: opacity .2s ease;
}
.slideshow:hover .slider-arrow{ opacity: 1; }
.slider-arrow.left{ left: 8px; }
.slider-arrow.right{ right: 8px; }

/* Aksesibilitas */
.slider-arrow:focus-visible{ box-shadow: 0 0 0 3px rgba(14,165,233,.55); }

/* Menghormati prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .slide-container{ transition: none !important; }
}


/* ===== Section headings ===== */
.section-title{
  font-weight:800;
  letter-spacing:.3px;
  text-align:center;
  color:#1f2937;
  margin:8px 0 10px;
}

/* ===== Tiles (SELALU 4 kolom) ===== */
.tiles{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr)); /* tetap 4 di semua lebar */
  gap:14px;
  padding:0 12px;
}
.tile{
  display:block;
  text-align:center;
  padding:6px 4px;
  border-radius:24px;
  text-decoration:none;
}
.tile img{
  width:90px; height:90px;
  object-fit:contain;
  border-radius:24px;
  box-shadow: var(--shadow);
  margin:0 auto 6px;
  background:#fff;
}
.tile span{
  display:block;
  font-weight:700;
  font-size:.66rem;
  color:#000;
  text-decoration:none;
}

/* — Skala turun di layar kecil, TETAP 4 kolom — */
@media (max-width: 480px){
  .tiles{gap:10px; padding:0 10px;}
  .tile{padding:4px 2px;}
  .tile img{width:64px; height:64px;}
  .tile span{font-size:.6rem;}
}
@media (max-width: 360px){
  .tiles{gap:8px; padding:0 8px;}
  .tile img{width:56px; height:56px;}
  .tile span{font-size:.56rem;}
}

/* ===== News card ===== */
.news-card{
  background:linear-gradient(180deg,#ef4444,#f59e0b);
  border-radius:24px; color:#fff; padding:12px
}
.news-item{display:flex; gap:10px; align-items:flex-start}
.news-item img{width:92px; height:64px; object-fit:cover; border-radius:10px}

/* ===== Hero ===== */
.hero-mock{
  background: linear-gradient(90deg,#f43f5e,#f59e0b);
  color:#fff; padding:16px;
  border-bottom-left-radius:24px; border-bottom-right-radius:24px;
}
.hero-mock h2{font-weight:800; font-size:1.4rem; margin:0}
.hero-mock .subtext{opacity:.9; font-size:.9rem}

/* ===== Bottom nav (centered + safe area) ===== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#ffffff,#eef6f8);
  display:flex; gap:10px; justify-content:space-around;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index:999;
  border-top-left-radius:24px; border-top-right-radius:24px;
  max-width:480px; margin:0 auto;
  backdrop-filter: saturate(1.2) blur(2px);
}
.bottom-nav .nav-item{
  display:flex; flex-direction:column; align-items:center;
  font-size:.85rem; color:var(--nav-fg); text-decoration:none
}
.bottom-nav .nav-item.active{font-weight:700}

/* ===== Util ===== */
.card-menu{border-radius:16px; text-decoration:none; color:#111;}
.card-menu.disabled{opacity:.5; pointer-events:none;}
.gradient-orange{
  background: linear-gradient(90deg,#ef4444,#f59e0b);
  border-bottom-left-radius:16px;border-bottom-right-radius:16px;
}