/* Halaman depan (beranda) publik — wifi@Konut.
   Dipisah dari views/home/index.php supaya file PHP tetap ringkas dan style
   ini bisa di-cache oleh browser secara terpisah dari markup. */

:root {
  --brand-dark: #0d1b2a;
  --brand-blue: #1b6ec2;
  --brand-cyan: #17c3b2;
}
body {
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  color: #1f2937;
  overflow-x: hidden;
}
/* nav.fixed-top overlaps whatever content is scrolled to the top of the
   viewport -- without this, jumping to any #anchor section (via the navbar
   links or a direct URL fragment) lands that section's top edge flush under
   the fixed navbar, hiding its title/eyebrow and any floating icon badge
   that pokes above the first row of cards. 90px matches .hero's own
   navbar-clearance padding below. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 90px;
}

.navbar-brand-logo {
  font-size: 1.5rem;
  color: var(--brand-cyan);
}

.hero {
  background: radial-gradient(circle at 20% 20%, #123a5e 0%, var(--brand-dark) 55%, #081018 100%);
  color: #fff;
  padding: 90px 0 56px;
  overflow: hidden;
}
.hero .badge-loc {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero h1 {
  font-weight: 700;
  line-height: 1.15;
}
.hero .btn-cta {
  padding: 0.7rem 1.4rem;
  font-weight: 600;
}

/* ---- Hero visual: signal rings radiating from a router badge ---- */
.hero-visual {
  position: relative;
  height: 320px;
  max-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.4;
  will-change: transform;
}
.hero-blob-1 {
  width: 220px;
  height: 220px;
  background: var(--brand-cyan);
  top: 8%;
  left: 12%;
}
.hero-blob-2 {
  width: 180px;
  height: 180px;
  background: var(--brand-blue);
  bottom: 6%;
  right: 10%;
}
.hero-signal {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-signal .ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(23, 195, 178, 0.55);
  animation: hero-ring 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  will-change: transform, opacity;
}
.hero-signal .ring-2 {
  animation-delay: 0.8s;
}
.hero-signal .ring-3 {
  animation-delay: 1.6s;
}
.hero-router-badge {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #fff;
  box-shadow: 0 14px 34px rgba(23, 195, 178, 0.4);
}
@keyframes hero-ring {
  0% {
    transform: scale(0.55);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-signal .ring {
    animation: none;
    opacity: 0.3;
  }
}

/* Belt-and-suspenders with html{scroll-padding-top} above: scroll-margin-top
   targets each section directly instead of relying on root-scroller
   behavior, so an anchor jump (navbar link or #fragment in the URL) never
   lands a section's title/subtitle underneath nav.fixed-top. */
section {
  padding: 52px 0;
  scroll-margin-top: 90px;
}
.section-title {
  font-weight: 700;
}
.section-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-blue);
}

.card-paket {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  /* 44px cleared the badge's 56px layout box (top:-28px), but not its
       6px white ring (box-shadow spread) or the extra growth from
       :hover's scale(1.06)/translateY(-4px) -- 60px gives real breathing
       room instead of a few-px margin that varies by state. */
  padding: 60px 24px 24px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  height: 100%;
}
.card-paket:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(13, 27, 42, 0.1);
}
.card-paket .harga {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.card-layanan {
  position: relative;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  /* Normal padding by default -- items with a logo render a plain 44px
       <img>, not the floating badge, so they don't need extra top
       clearance. Only .card-layanan--badge (items without a logo, e.g.
       Layanan's items) needs the bigger top padding below. */
  padding: 24px;
  height: 100%;
}
.card-layanan--badge {
  /* 44px cleared the badge's 56px layout box (top:-28px), but not its
       6px white ring (box-shadow spread) or the extra growth from
       :hover's scale(1.06)/translateY(-4px) -- 60px gives real breathing
       room instead of a few-px margin that varies by state. */
  padding-top: 60px;
}

/* Grid mode (<=4 items, no .hscroll) has no equivalent of .hscroll's own
   top padding -- the first row's cards sit flush against the section
   header's mb-4 margin, so the floating badge (pokes up ~28-34px above its
   card) overlaps the section eyebrow/title/subtitle above it. Matches
   .hscroll's clearance value. */
.card-grid-badged {
  padding-top: 35px;
}

/* ---- Floating icon badges shared by Paket & Layanan cards ---- */
.paket-icon-float,
.layanan-icon-float {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.paket-icon-float {
  border-radius: 50%;
  box-shadow:
    0 8px 18px rgba(23, 195, 178, 0.35),
    0 0 0 6px #ffffff;
}
.layanan-icon-float {
  border-radius: 14px;
  box-shadow:
    0 8px 18px rgba(23, 195, 178, 0.3),
    0 0 0 6px #f8f9fa;
}
.card-paket:hover .paket-icon-float,
.card-layanan:hover .layanan-icon-float {
  transform: translateX(-50%) translateY(-4px) scale(1.06);
}

/* ---- "Lokasi Server" cards — same model as the admin Router Mikrotik
   grid: icon badge + identity in a flex row (status pill as a
   sibling, not absolutely positioned, so it can never overlap the
   title), address as a smaller muted line below. ---- */
#lokasi {
  background: #f7f9fc;
}
.lokasi-pill {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius: 14px;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.lokasi-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lokasi-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(13, 27, 42, 0.12);
  border-color: #b7e4de;
}
.lokasi-pill:hover::before {
  opacity: 1;
}
.lokasi-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.lokasi-icon-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.lokasi-router-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(23, 195, 178, 0.3);
}
.lokasi-identity {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--brand-dark);
  min-width: 0;
}
.lokasi-pill .lokasi-icon {
  color: var(--brand-cyan);
  font-size: 0.9rem;
}
.lokasi-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7683;
  padding-bottom: 5px;
  border-bottom: 1px solid #eef2f7;
  margin-bottom: 0;
}
.lokasi-footer {
  margin-top: auto;
  padding-top: 8px;
}
.lokasi-pill .lokasi-wa {
  color: #128a53;
  text-decoration: none;
  background: rgba(37, 211, 102, 0.1);
  padding: 4px 8px;
  border-radius: 8px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.lokasi-pill .lokasi-wa:hover {
  background: rgba(37, 211, 102, 0.2);
  text-decoration: none;
}
.lokasi-pill .lokasi-wa:active {
  background: rgba(15, 120, 68, 0.35);
  color: #0a5c39;
}
.lokasi-status {
  flex-shrink: 0;
  margin-top: -2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.lokasi-status.online {
  background: rgba(10, 138, 95, 0.12);
  color: #0a8a5f;
}
.lokasi-status.offline {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
}
.lokasi-status .dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* "Live" pulse ring on the online dot — cheap transform/opacity animation, safe at scale. */
.lokasi-status.online .dot::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  animation: lokasi-pulse 1.8s ease-out infinite;
}
@keyframes lokasi-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lokasi-status.online .dot::before {
    animation: none;
  }
}

#kontak {
  background: var(--brand-dark);
  color: #f1f5f9;
}
#kontak a {
  color: #f1f5f9;
}
.kontak-item,
.paket-item,
.layanan-item {
  padding-top: 28px;
}
.kontak-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 38px 20px 24px;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.kontak-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}
.kontak-icon {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  box-shadow:
    0 8px 18px rgba(23, 195, 178, 0.45),
    0 0 0 6px var(--brand-dark);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.kontak-card:hover .kontak-icon {
  transform: translateX(-50%) translateY(-4px) scale(1.06);
  box-shadow:
    0 12px 24px rgba(23, 195, 178, 0.6),
    0 0 0 6px var(--brand-dark);
}

/* ---- Mitra: rekan bisnis/teknologi, ditampilkan sebagai logo ---- */
#mitra {
  background: #f7f9fc;
}
.mitra-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.mitra-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(13, 27, 42, 0.08);
}

/* ---- Kerjasama: pihak institusional/pemerintah desa, ditampilkan sebagai
   kartu identitas (nama + wilayah + deskripsi kerjasama), bukan logo,
   supaya jelas beda konteks dengan "Mitra" bisnis di atas. ---- */
#kerjasama {
  background: #fff;
}
.kerjasama-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  padding: 24px;
  height: 100%;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.kerjasama-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(13, 27, 42, 0.08);
}
.kerjasama-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: rgba(27, 110, 194, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.kerjasama-location {
  color: #6b7683;
  font-size: 0.82rem;
}

/* ---- Logo pair (perusahaan × pihak kerjasama) di tiap kartu kerjasama.
   Tiap logo dikunci dalam kotak berukuran sama supaya logo wordmark lebar
   (mis. logo perusahaan) dan logo persegi (mis. logo lembaga mitra) tetap
   terlihat setara sebagai dua pihak yang sejajar, bukan timpang. ---- */
.kerjasama-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.kerjasama-logo-box {
  width: 104px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px;
}
.kerjasama-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.kerjasama-logo-fallback {
  color: #cbd5e1;
  font-size: 1.4rem;
}
.kerjasama-logos-sep {
  color: #cbd5e1;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.kerjasama-invite {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
}

/* ---- Horizontal slider (used when a section has many items) ---- */
.hscroll {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden; /* setting overflow-x alone makes browsers force overflow-y to "auto" per spec — pin it to hidden so a floating icon/badge never spawns a stray vertical scrollbar */
  scroll-snap-type: x mandatory;
  /* top padding must clear .paket-icon-float/.layanan-icon-float's
       top:-28px offset (see below) or overflow-y:hidden above clips the
       top of every card's floating badge. */
  padding: 35px 4px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox: keep the scroll, hide the bar — the arrow buttons + dots below already show position/navigation */
  justify-content: center;
  justify-content: safe center;
  cursor: grab;
}
.hscroll.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-user-select: none;
  user-select: none;
}
.hscroll::-webkit-scrollbar {
  display: none;
} /* Chrome/Safari/Edge: same reasoning as scrollbar-width above */
.hscroll-item {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
}
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 4px 10px rgba(13, 27, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
}
.scroll-btn:hover {
  background: var(--brand-cyan);
  color: #06231f;
  border-color: var(--brand-cyan);
}
.scroll-btn-left {
  left: -12px;
}
.scroll-btn-right {
  right: -12px;
}
@media (max-width: 575.98px) {
  .scroll-btn {
    display: none;
  }
}

/* ---- Centered dot indicators under a slider ---- */
.scroll-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.scroll-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #cbd5e1;
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}
.scroll-dots button.active {
  width: 22px;
  background: var(--brand-cyan);
}
#kontak .scroll-dots button {
  background: rgba(255, 255, 255, 0.25);
}
#kontak .scroll-dots button.active {
  background: var(--brand-cyan);
}

footer.site-footer {
  background: #081018;
  color: #94a3b8;
  padding: 48px 0 22px;
}
footer.site-footer img {
  height: 28px;
  opacity: 0.9;
}
footer.site-footer a {
  color: #cbd5e1;
  text-decoration: none;
}
footer.site-footer a:hover {
  color: var(--brand-cyan);
}
footer.site-footer h6 {
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
}
.footer-partner-logo {
  height: 22px;
  max-width: 90px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.8);
  opacity: 0.75;
  transition:
    opacity 0.15s ease,
    filter 0.15s ease;
}
.footer-partner-logo:hover {
  opacity: 1;
  filter: none;
}

.partner-badge {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}