:root {
   /* Palet warna e-reader */
   --ereader-default: #F5F5F5;
   /* abu-abu terang */
   --ereader-warm: #FAF3E0;
   /* krem lembut */
   --ereader-neutral: #F2F2F2;
   /* abu-abu netral */
   --ereader-sepia: #FFF8DC;
   /* cornsilk klasik */
   --ereader-dark: #000000;
   /* hitam pekat */
   --ereader-soft-dark: #121212;
   /* hitam keabu-abuan */

   /* Font */
   --ereader-font-serif: "Georgia", "Bookerly", serif;
   --ereader-font-sans: "Helvetica", "Verdana", sans-serif;
   --ereader-font-accessible: "OpenDyslexic", sans-serif;
}


.andika-regular {
   font-family: "Andika", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1.2rem;
   line-height: 1.8;
}

.andika-bold {
   font-family: "Andika", sans-serif;
   font-weight: 700;
   font-style: normal;
}

.andika-regular-italic {
   font-family: "Andika", sans-serif;
   font-weight: 400;
   font-style: italic;
}

.andika-bold-italic {
   font-family: "Andika", sans-serif;
   font-weight: 700;
   font-style: italic;
}

body {
   font-size: 1.1rem;
   font-family: 'Andika', sans-serif;
   background-color: var(--ereader-soft-dark);
   color: var(--ereader-sepia);
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   position: relative;
}

/* class main harus berada ditengah secara vertikal terhadap body dan lebar maksimalnya 1025px */
.main {
   display: flex;
   justify-content: center;
   flex-direction: column;
   /* align-items: center; */
   /* height: 100vh; */
   min-height: 65vh;
   margin: 0 auto;

   /* === Responsive width — diatur via media query di bawah === */
}

/* ----------------------------------------------------------
   RESPONSIVE — .main width
   Mobile  : < 600px   → full width dengan padding sisi
   Tablet  : 600–1024px → 90% lebar viewport
   Desktop : ≥ 1025px  → max-width tetap 1025px, terpusat
---------------------------------------------------------- */

/* Mobile (s/d 599px) */
@media screen and (max-width: 599px) {
   .main {
      width: 100%;
      max-width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      box-sizing: border-box;
   }
}

/* Tablet (600px – 1024px) */
@media screen and (min-width: 600px) and (max-width: 1024px) {
   .main {
      width: 90%;
      max-width: 90%;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
   }
}

/* Desktop (≥ 1025px) */
@media screen and (min-width: 1025px) {
   .main {
      width: 100%;
      max-width: 1025px;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
   }
}

/* lebar class header sama dengan induknya yaitu main dan selalu berada diatas konten */
.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0 0;
   padding: 1rem 1.2rem;
   position: sticky;
   top: 0;
   z-index: 100;
   background-color: rgba(18, 18, 18, 0.13);
   backdrop-filter: blur(10px);
   /* border-radius: 0 0 10px 10px; */
}

/* ============================================================
   MENU DESKTOP
============================================================ */
.menu--desktop {
   display: flex;
   gap: 2rem;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
}

.menu--desktop a {
   color: var(--ereader-sepia);
   text-decoration: none;
   font-size: 1rem;
   letter-spacing: 0.04em;
   padding: 0.25rem 0;
   position: relative;
   transition: color 0.2s ease;
}

.menu--desktop a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -2px;
   width: 0;
   height: 2px;
   background-color: var(--ereader-sepia);
   transition: width 0.25s ease;
}

.menu--desktop a:hover::after {
   width: 100%;
}

/* ============================================================
   HAMBURGER BUTTON (CSS-only, muncul hanya di mobile & tablet)
============================================================ */

/* Sembunyikan checkbox asli */
.nav-toggle {
   display: none;
}

/* Tombol hamburger */
.hamburger {
   display: none;
   /* hidden by default — tampil via media query */
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   cursor: pointer;
   padding: 6px;
   z-index: 200;
   position: relative;
}

.hamburger .bar {
   display: block;
   width: 26px;
   height: 2px;
   background-color: var(--ereader-sepia);
   border-radius: 2px;
   transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease;
   transform-origin: center;
}

/* Animasi bar → X saat toggle aktif */
.nav-toggle:checked~.header .hamburger .bar:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked~.header .hamburger .bar:nth-child(2) {
   opacity: 0;
   width: 0;
}

.nav-toggle:checked~.header .hamburger .bar:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   OVERLAY GELAP
============================================================ */
.nav-overlay {
   display: none;
   /* hidden by default */
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   opacity: 0;
   z-index: 150;
   transition: opacity 0.3s ease;
   cursor: pointer;
}

.nav-toggle:checked~.nav-overlay {
   opacity: 1;
}

/* ============================================================
   NAV DRAWER (panel samping dari kanan)
============================================================ */
.nav-drawer {
   display: none;
   /* hidden by default */
   position: fixed;
   top: 0;
   right: -280px;
   /* tersembunyi di luar layar */
   width: 260px;
   height: 100vh;
   background-color: #1a1a1a;
   padding: 2rem 1.5rem;
   box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
   z-index: 300;
   flex-direction: column;
   gap: 0;
   transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   box-sizing: border-box;
}

.nav-toggle:checked~.nav-drawer {
   right: 0;
   /* slide masuk */
}

/* Tombol tutup (×) */
.nav-drawer__close {
   font-size: 2rem;
   line-height: 1;
   color: var(--ereader-sepia);
   cursor: pointer;
   align-self: flex-end;
   margin-bottom: 1.5rem;
   opacity: 0.7;
   transition: opacity 0.2s ease;
   display: block;
   text-align: right;
}

.nav-drawer__close:hover {
   opacity: 1;
}

/* Link di dalam drawer */
.nav-drawer__link {
   display: block;
   color: var(--ereader-sepia);
   text-decoration: none;
   font-size: 1.15rem;
   padding: 0.85rem 0;
   border-bottom: 1px solid rgba(255, 248, 220, 0.1);
   letter-spacing: 0.04em;
   transition: padding-left 0.2s ease, opacity 0.2s ease;
}

.nav-drawer__link:last-child {
   border-bottom: none;
}

.nav-drawer__link:hover {
   padding-left: 0.5rem;
   opacity: 0.8;
}

.content {
   padding: 1rem 1rem;
   /* min-width: calc(90% - 40px); */
   min-height: 100vh;
}

.footer {
   /* position: absolute; */
   bottom: 0;
   left: 0;
   width: 100%;
   text-align: center;
   padding: 1.5rem 1rem 0 0;
}

/* ============================================================
   RESPONSIVE — hamburger & drawer
   Tampil  : mobile (≤ 599px) & tablet (600px – 1024px)
   Sembunyi: desktop (≥ 1025px)
============================================================ */

/* Mobile & Tablet: tampilkan hamburger + sembunyikan menu desktop */
@media screen and (max-width: 1024px) {
   .hamburger {
      display: flex;
   }

   .nav-overlay {
      display: block;
   }

   .nav-drawer {
      display: flex;
   }

   .menu--desktop {
      display: none;
   }
}

/* Desktop: sembunyikan hamburger, tampilkan menu desktop */
@media screen and (min-width: 1025px) {
   .hamburger {
      display: none;
   }

   .nav-overlay {
      display: none !important;
   }

   .nav-drawer {
      display: none !important;
   }

   .menu--desktop {
      display: flex;
   }
}

/* Footer style */
.footer-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0 0;
   padding: 1rem 1.2rem;
   /* position: sticky; */
   top: 0;
   z-index: 100;
   background-color: rgba(18, 18, 18, 0.13);
   backdrop-filter: blur(10px);
}

.contact {
   display: flex;
   flex-direction: column;
   text-align: left;
   text-decoration: none;
   /* justify-content: center; */
   /* align-items: center; */
}

.contact p {
   font-size: 1.25rem;
}

.contact a {
   text-decoration: none;
   color: var(--ereader-sepia);
   letter-spacing: 0.04em;
   /* margin-bottom: 0.4rem; */
   padding-bottom: 0.4rem;
   transition: color 0.2s ease;
   border-bottom: 1px solid transparent;
   /* transition: border-bottom 0.2s ease; */
}

.contact a:hover {
   color: yellow;
   border-bottom: 1px solid var(--ereader-sepia);
   transition: border-bottom 0.2s ease;
   /* transition: color 0.2s ease; */
}

/* ============================================================
   CAROUSEL
============================================================ */

.carousel {
   position: relative;
   width: 100%;
   border-radius: 16px;
   overflow: hidden;
   margin: 2rem 0;
   background-color: #0d0d0d;
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
   /* Pastikan tombol yang keluar batas tetap terlihat */
   isolation: isolate;
}

/* --- Track --- */
.carousel__track {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;   /* rasio tetap — ubah sesuai kebutuhan */
   overflow: hidden;
   border-radius: 16px;
}

/* --- Slide --- */
.carousel__slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transform: scale(1.03);
   transition:
      opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
}

.carousel__slide--active {
   opacity: 1;
   transform: scale(1);
   pointer-events: auto;
}

.carousel__slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 16px;
}

/* --- Caption overlay --- */
.carousel__caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 2.5rem 1.5rem 1.2rem;
   background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75) 0%,
      transparent 100%
   );
   border-radius: 0 0 16px 16px;
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.carousel__slide--active .carousel__caption {
   opacity: 1;
   transform: translateY(0);
}

.carousel__caption-tag {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ereader-sepia);
   background: rgba(255, 248, 220, 0.15);
   border: 1px solid rgba(255, 248, 220, 0.3);
   backdrop-filter: blur(6px);
   padding: 0.2rem 0.6rem;
   border-radius: 4px;
   width: fit-content;
}

.carousel__caption p {
   margin: 0;
   font-size: 0.95rem;
   color: rgba(255, 248, 220, 0.9);
   line-height: 1.4;
}

/* ============================================================
   TOMBOL PREV / NEXT — Glassmorphism
============================================================ */

.carousel__btn {
   /* posisi absolute terhadap .carousel */
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;

   /* Ukuran & bentuk */
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 1px solid rgba(255, 248, 220, 0.25);
   cursor: pointer;

   /* Glassmorphism */
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);

   /* Icon */
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ereader-sepia);

   /* Transisi */
   transition:
      background 0.25s ease,
      border-color 0.25s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;

   outline: none;
}

.carousel__btn svg {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

/* Posisi kiri */
.carousel__btn--prev {
   left: 14px;
}

/* Posisi kanan */
.carousel__btn--next {
   right: 14px;
}

/* Hover state */
.carousel__btn:hover {
   background: rgba(255, 248, 220, 0.18);
   border-color: rgba(255, 248, 220, 0.55);
   box-shadow: 0 0 18px rgba(255, 248, 220, 0.15);
   transform: translateY(-50%) scale(1.08);
}

/* Active/press state */
.carousel__btn:active {
   transform: translateY(-50%) scale(0.96);
   background: rgba(255, 248, 220, 0.1);
}

/* ============================================================
   CONTROLS (dots + counter)
============================================================ */

.carousel__controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   padding: 0.8rem 0 0.5rem;
}

/* --- Dot indicator --- */
.carousel__dots {
   display: flex;
   align-items: center;
   gap: 6px;
}

.carousel__dot {
   width: 6px;
   height: 6px;
   border-radius: 999px;
   border: none;
   background: rgba(255, 248, 220, 0.3);
   cursor: pointer;
   padding: 0;
   transition: width 0.35s ease, background 0.3s ease;
}

.carousel__dot--active {
   width: 22px;
   background: var(--ereader-sepia);
}

/* --- Counter teks --- */
.carousel__counter {
   font-size: 0.75rem;
   color: rgba(255, 248, 220, 0.45);
   letter-spacing: 0.08em;
   font-family: var(--ereader-font-sans);
   user-select: none;
}

/* ============================================================
   RESPONSIVE — carousel tombol & caption
============================================================ */

/* Mobile: tombol lebih kecil */
@media screen and (max-width: 599px) {
   .carousel__btn {
      width: 36px;
      height: 36px;
   }

   .carousel__btn svg {
      width: 16px;
      height: 16px;
   }

   .carousel__btn--prev { left: 8px; }
   .carousel__btn--next { right: 8px; }

   .carousel__caption {
      padding: 1.8rem 1rem 0.8rem;
   }

   .carousel__caption p {
      font-size: 0.82rem;
   }
}