/* Bakso Citamiang — faithful image-based site
   Each page shows its original design image at full fidelity.
   Only the navigation labels are made clickable (transparent overlays). */

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

html, body { background: #ffffff; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The page wraps its image tightly so % overlays map onto the image. */
.page {
  position: relative;
  max-width: 1366px;   /* native design width; scales down on smaller screens */
  margin: 0 auto;
  container-type: inline-size;   /* enables cqw units for the live nav */
}

/* ---- Live top navigation (real text, slide-on-hover) ---- */
.topnav {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 10.6cqw;
  display: flex;
  align-items: center;
  padding: 0 3.5cqw;
  z-index: 20;
}
.topnav .logolink { flex: none; display: flex; align-items: center; }
.topnav .logo { height: 6.3cqw; display: block; }
.topnav .links {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5cqw;
}
.topnav .links a {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.44cqw;          /* was 2.05cqw — dikecilkan 30% */
  color: #1f5e2e;
  text-decoration: underline;
  text-underline-offset: 0.20cqw;
  text-decoration-thickness: 0.10cqw;
  white-space: nowrap;
  transition: transform .18s ease, color .18s ease;
}
.topnav .links a:hover { transform: translateX(0.75cqw); color: #0c3417; }
.topnav .links a.active {
  color: #ffffff;
  text-decoration: none;
  background: #246130;
  padding: 0.9cqw 2.2cqw;
  border-radius: 0.9cqw;
}
.topnav .links a.active:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .topnav .links a { transition: none; } }

.page-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Scroll-triggered fade-in elements ---- */
.reveal { position: absolute; display: block; }
body.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}
body.js .reveal.visible { opacity: 1; transform: none; }
.panel-pojok { left: 60.3221%; top: 80.4044%; width: 39.6779%; }

/* Section bands: every page is stacked slices that fade in on scroll */
body.js .band { opacity: 0; transition: opacity .9s ease; }
body.js .band.visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body.js .reveal, body.js .band { opacity: 1; transform: none; transition: none; }
}

/* ---- Fade transitions (page load + navigation between pages) ---- */
.page { animation: pageFadeIn .6s ease both; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body { transition: opacity .35s ease; }
body.leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
  body { transition: none; }
}

/* Transparent clickable nav overlays */
.nav {
  position: absolute;
  display: block;
  z-index: 5;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color .15s ease;
}
.nav:focus-visible{ outline: 3px solid rgba(37, 110, 54, 0.65); outline-offset: 2px; }

/* Horizontal positions — consistent across every page (label centers measured
   from the images: Beranda 23.5%, Pojok Edu 39%, Profil 55.5%, Menu 72.1%, Kontak 88.9%). */
.nav.logo    { left: 5.5%;  width: 8.5%; }
.nav.beranda { left: 17.4%; width: 12%;  }
.nav.pojok   { left: 33.0%; width: 12%;  }
.nav.profil  { left: 49.5%; width: 12%;  }
.nav.menu    { left: 66.1%; width: 12%;  }
.nav.kontak  { left: 82.9%; width: 12%;  }

/* Vertical band of the nav differs per image height. */
.h2304 .nav { top: 2.5%; height: 5.0%; }   /* beranda, menu (1366x2304) */
.h3072 .nav { top: 1.9%; height: 3.4%; }   /* (1366x3072) */
.h1536 .nav { top: 3.6%; height: 4.4%; }   /* kontak (1366x1536) */
.htall .nav { top: 1.72%; height: 3.1%; }  /* pojok-edu, profil — enlarged full-image hero */

/* ---- Footer hotspots (green bar, present on every page) ---- */
.fnav {
  position: absolute;
  display: block;
  z-index: 5;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .15s ease;
}
.fnav:focus-visible{ outline: 3px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }

/* Footer bar is a constant 176px-tall strip at the bottom of each image. */
.h2304 .fnav { top: 92.36%; height: 7.64%; }
.h3072 .fnav { top: 94.27%; height: 5.73%; }
.h1536 .fnav { top: 88.54%; height: 11.46%; }
.htall .fnav { top: 94.77%; height: 5.23%; }  /* pojok-edu, profil — enlarged hero */

.fnav.f-logo   { left: 3.5%;  width: 8%;  }
.fnav.f-kontak { left: 41%;   width: 14%; }
.fnav.f-wa     { left: 81.2%; width: 4.7%; }
.fnav.f-ig     { left: 86.0%; width: 4.7%; }

/* ---- Kontak page body contact hotspots ---- */
.cnav {
  position: absolute;
  display: block;
  z-index: 5;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color .15s ease;
}
.cnav:focus-visible{ outline: 3px solid rgba(37, 110, 54, 0.65); outline-offset: 2px; }

.cnav.c-ig   { left: 7.5%; width: 25%; top: 63.2%; height: 6%; }
.cnav.c-wa   { left: 7.5%; width: 24%; top: 72.6%; height: 6%; }
.cnav.c-addr { left: 60%;  width: 35%; top: 72.6%; height: 6%; }

/* ---- Body text as real HTML (was baked into the page images) ----
   Ubah --body-scale untuk memperbesar/memperkecil SEMUA body text sekaligus.
   1 = ukuran desain asli, 0.8855 = 88,5%. */
.page { --body-scale: 0.8855; }
.tx {
  position: absolute;
  z-index: 3;
  font-family: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: none;
}
.tx p { margin: 0; }
.tx p + p { margin-top: var(--para-gap, 3.2em); }   /* jarak antar paragraf */

.tindex0{left:9.2972%;width:49.7072%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:justify;color:#246130;font-weight:400;font-style:italic;top:72.092%;margin-top:-0.2425em}
.tprofil1{left:8.4187%;width:83.1625%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:400;font-style:italic;--para-gap:6.1em;top:34.7981%;margin-top:-0.2425em}
.tprofil2{left:9.2972%;width:84.9195%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:left;color:#246130;font-weight:400;font-style:italic;top:61.2827%;margin-top:-0.2425em}
.tprofil3{left:9.5168%;width:39.5315%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:400;font-style:italic;top:83.4917%;margin-top:-0.2425em}
.tprofil4{left:51.2445%;width:39.2387%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:400;font-style:italic;top:83.4917%;margin-top:-0.2425em}
.tpojokedu5{left:17.9356%;width:67.3499%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:400;font-style:italic;top:33.8983%;margin-top:-0.2425em}
.tpojokedu6{left:50.0732%;width:29.1362%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:justify;color:#246130;font-weight:400;font-style:italic;top:39.9941%;margin-top:-0.2425em}
.tpojokedu7{left:50.5857%;width:33.2357%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:justify;color:#ffffff;font-weight:400;font-style:italic;top:47.2495%;transform:translateY(-50%)}
.tpojokedu8{left:15.3734%;width:32.9429%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:right;color:#ffffff;font-weight:400;font-style:italic;top:60.6899%;transform:translateY(-50%)}
.tpojokedu9{left:40.9956%;width:42.3865%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:justify;color:#246130;font-weight:400;font-style:italic;top:68.3021%;margin-top:-0.2425em}
.tpojokedu10{left:11.4202%;width:43.7042%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:justify;color:#246130;font-weight:400;font-style:italic;top:82.248%;margin-top:-0.2425em}
.tmenu11{left:64.4217%;width:31.8448%;font-size:calc(1.4641cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:700;font-style:italic;top:18.967%;margin-top:-0.235em}
.tmenu12{left:15.6662%;width:11.2738%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:700;font-style:italic;top:47.4826%;transform:translateY(-50%)}
.tmenu13{left:45.8272%;width:11.2738%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:700;font-style:italic;top:47.4826%;transform:translateY(-50%)}
.tmenu14{left:77.672%;width:11.2738%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:700;font-style:italic;top:47.4826%;transform:translateY(-50%)}
.tmenu15{left:12.4451%;width:17.5695%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#ffffff;font-weight:700;font-style:italic;top:49.0017%;margin-top:-0.235em}
.tmenu16{left:12.4451%;width:17.5695%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#ffffff;font-weight:400;font-style:italic;top:51.1719%;margin-top:-0.2425em}
.tmenu17{left:41.7277%;width:19.3265%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#ffffff;font-weight:700;font-style:italic;top:49.0017%;margin-top:-0.235em}
.tmenu18{left:41.7277%;width:19.3265%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#ffffff;font-weight:400;font-style:italic;top:51.1719%;margin-top:-0.2425em}
.tmenu19{left:75.4026%;width:15.5198%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#ffffff;font-weight:700;font-style:italic;top:49.0017%;margin-top:-0.235em}
.tmenu20{left:75.4026%;width:15.5198%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#ffffff;font-weight:400;font-style:italic;top:51.1719%;margin-top:-0.2425em}
.tmenu21{left:10.981%;width:17.5695%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:700;font-style:italic;top:79.7743%;margin-top:-0.235em}
.tmenu22{left:10.981%;width:17.5695%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:400;font-style:italic;top:81.8576%;margin-top:-0.2425em}
.tmenu23{left:45.9736%;width:12.8111%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:700;font-style:italic;top:79.7743%;margin-top:-0.235em}
.tmenu24{left:45.9736%;width:12.8111%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:400;font-style:italic;top:81.8576%;margin-top:-0.2425em}
.tmenu25{left:73.2064%;width:17.5695%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:700;font-style:italic;top:79.7743%;margin-top:-0.235em}
.tmenu26{left:73.2064%;width:17.5695%;font-size:calc(1.757cqw * var(--body-scale));line-height:1.375;text-align:center;color:#246130;font-weight:400;font-style:italic;top:81.8576%;margin-top:-0.2425em}
.tkontak27{left:15.593%;width:21.9619%;font-size:calc(2.123cqw * var(--body-scale));line-height:1.375;text-align:left;color:#246130;font-weight:400;font-style:normal;text-decoration:underline;top:65.7552%;transform:translateY(-50%)}
.tkontak28{left:38.0673%;width:23.8653%;font-size:calc(2.1962cqw * var(--body-scale));line-height:1.733;text-align:center;color:#246130;font-weight:700;font-style:italic;top:65.4948%;transform:translateY(-50%)}
.tkontak29{left:15.8858%;width:19.0337%;font-size:calc(2.1962cqw * var(--body-scale));line-height:1.375;text-align:left;color:#246130;font-weight:400;font-style:normal;top:75.0651%;transform:translateY(-50%)}
.tkontak30{left:65.5198%;width:27.8184%;font-size:calc(1.8302cqw * var(--body-scale));line-height:1.375;text-align:left;color:#246130;font-weight:700;font-style:italic;top:75.1953%;transform:translateY(-50%)}