/* ============================================================
   Kamar Belajar — stylesheet global

   Berisi elemen yang dipakai bersama semua halaman: token desain,
   navbar, footer, kerangka section, dan tipografi responsif.
   Sebelumnya navbar dan footer ditulis ulang di tiap file dengan
   nilai yang sedikit berbeda-beda; sekarang sumbernya satu di sini.

   Gaya visual (warna, sudut membulat, bayangan) dipertahankan
   sama seperti sebelumnya — yang dirapikan adalah konsistensi
   jarak dan perilaku di layar kecil.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ---------- Token desain ---------- */
:root {
    /* Warna */
    --kb-bg: #F1ECE4;
    --kb-surface: #ffffff;
    --kb-surface-alt: #FAF9F6;
    --kb-text: #222222;
    --kb-muted: #5f5f5f;
    --kb-accent: #007bff;
    --kb-footer-bg: #1f2937;
    --kb-footer-text: #d1d5db;
    --kb-highlight: #facc15;
    --kb-border: rgba(0, 0, 0, .08);

    /* Tinggi navbar — dipakai juga sebagai offset konten & titik awal menu mobile */
    --kb-nav-h: 68px;

    /* Lebar isi maksimum dan jarak tepi layar yang menyesuaikan ukuran layar */
    --kb-container: 1200px;
    --kb-gutter: clamp(18px, 5vw, 48px);

    /* Skala jarak */
    --kb-space-xs: 8px;
    --kb-space-sm: 14px;
    --kb-space-md: 24px;
    --kb-space-lg: 40px;
    --kb-space-xl: clamp(28px, 5vw, 56px);

    /* Jarak vertikal antar section — satu nilai untuk semua halaman */
    --kb-section-y: clamp(48px, 7vw, 84px);

    /* Sudut & bayangan */
    --kb-radius-sm: 12px;
    --kb-radius: 20px;
    --kb-radius-lg: 32px;
    --kb-shadow-sm: 0 4px 20px rgba(0, 0, 0, .06);
    --kb-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    --kb-shadow-lg: 0 18px 45px rgba(0, 0, 0, .12);
}

/* ---------- Dasar ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Konten tidak tersembunyi di balik navbar saat melompat ke anchor */
    scroll-padding-top: calc(var(--kb-nav-h) + var(--kb-space-md));
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--kb-bg);
    color: var(--kb-text);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
}

a {
    transition: color .2s ease;
}

/* Placeholder saat foto tidak tersedia */
img[src$="placeholder.png"] {
    object-fit: contain;
    background: #e5e0d8;
}

/* Fokus keyboard tetap terlihat */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

/* ---------- Kerangka isi ---------- */

/* Pembungkus lebar-terbatas dengan jarak tepi yang konsisten */
.kb-container {
    width: 100%;
    max-width: var(--kb-container);
    margin-inline: auto;
    padding-inline: var(--kb-gutter);
}

/* Dorong konten halaman ke bawah navbar yang posisinya tetap */
.kb-page {
    padding-top: var(--kb-nav-h);
}

/* ============================================================
   NAVBAR
   Struktur HTML tetap seperti semula:
   header.nav-container > .logo + nav#navbarMenu + .menu-toggle
   ============================================================ */
header.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--kb-nav-h);
    background: var(--kb-surface);
    box-shadow: var(--kb-shadow-sm);
    z-index: 1000;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--kb-space-md);

    /* Sejajar dengan lebar isi halaman, tapi latar tetap penuh selebar layar */
    padding-inline: max(var(--kb-gutter), calc((100vw - var(--kb-container)) / 2 + var(--kb-gutter)));
}

.nav-container .logo {
    display: flex;
    align-items: center;
}

.nav-container .logo img {
    height: 38px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.nav-container nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--kb-space-xs);
}

.nav-container nav a {
    font-size: 14.5px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.nav-container nav a:hover,
.nav-container nav a:focus-visible {
    color: var(--kb-accent);
    background: rgba(0, 123, 255, .08);
}

.nav-container nav a.active {
    color: var(--kb-accent);
    font-weight: 600;
    background: rgba(0, 123, 255, .1);
}

/* Tombol hamburger */
.nav-container .menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;              /* area sentuh nyaman di layar sentuh */
    height: 44px;
    padding: 10px;
    margin-right: -10px;
    cursor: pointer;
    background: none;
    border: 0;
}

.nav-container .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    border-radius: 10px;
    transition: transform .3s ease, opacity .2s ease;
}

/* Animasi berubah jadi tanda silang saat menu terbuka */
.nav-container .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-container .menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-container .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
    /* Menu tengah berubah menjadi panel melayang, sehingga keluar dari alur
       grid dan tidak lagi mengisi kolom keduanya. Tanpa penyesuaian ini
       tombol menu ikut bergeser ke kolom tengah dan menempel di sebelah logo,
       padahal tempatnya di pojok kanan. */
    header.nav-container {
        grid-template-columns: auto 1fr;
    }

    .nav-container .menu-toggle {
        display: flex;
        grid-column: 2;
        justify-self: end;
    }

    .nav-container nav {
        position: fixed;
        top: var(--kb-nav-h);
        left: 0;
        width: 100%;
        max-height: calc(100vh - var(--kb-nav-h));
        overflow-y: auto;

        background: var(--kb-surface);
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: var(--kb-space-sm) var(--kb-gutter) var(--kb-space-lg);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
        border-top: 1px solid var(--kb-border);

        display: none;
    }

    .nav-container nav.show {
        display: flex;
    }

    .nav-container nav a {
        padding: 14px 16px;
        border-radius: var(--kb-radius-sm);
        font-size: 16px;
    }
}

/* ============================================================
   SECTION
   ============================================================ */

/* Blok putih membulat yang dipakai berulang di beranda */
.kb-panel {
    background: var(--kb-surface);
    border-radius: var(--kb-radius-lg) var(--kb-radius-lg) 0 0;
    padding: var(--kb-section-y) var(--kb-gutter);
    margin-top: var(--kb-section-y);
}

.kb-section-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--kb-space-sm);
}

.kb-section-sub {
    color: var(--kb-muted);
    font-size: clamp(14px, 2vw, 16px);
    max-width: 640px;
    margin: 0 auto var(--kb-space-lg);
}

/* ============================================================
   FOOTER
   Struktur HTML tetap:
   footer.footer > .footer-container > .footer-section  +  .footer-bottom
   ============================================================ */
.footer {
    background: var(--kb-footer-bg);
    color: #fff;
    padding: var(--kb-space-xl) 0 var(--kb-space-md);
    font-family: inherit;          /* sebelumnya Arial, kini ikut Poppins */
    margin-top: var(--kb-section-y);
}

.footer-container {
    width: 100%;
    max-width: var(--kb-container);
    margin-inline: auto;
    padding-inline: var(--kb-gutter);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--kb-space-lg);
    align-items: start;
}

.footer-section {
    min-width: 0;                  /* cegah teks panjang mendorong layout melebar */
}

.footer-section h3,
.footer-section h4 {
    margin: 0 0 var(--kb-space-sm);
    color: var(--kb-highlight);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.footer-section p,
.footer-section a {
    font-size: 14.5px;
    color: var(--kb-footer-text);
    text-decoration: none;
    line-height: 1.9;
}

.footer-section a {
    display: inline-block;
}

/* Sebagian halaman menyusun menu footer sebagai <ul>, sebagian lagi
   memakai <a> + <br>. Titik bulatnya dihilangkan agar keduanya seragam. */
.footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section li {
    margin-bottom: 2px;
}

.footer-section a:hover,
.footer-section a:focus-visible {
    color: var(--kb-highlight);
}

.footer-section i {
    margin-right: 8px;
    color: var(--kb-highlight);
    width: 16px;
    text-align: center;
}

.footer-bottom {
    width: 100%;
    max-width: var(--kb-container);
    margin: var(--kb-space-xl) auto 0;
    padding: var(--kb-space-md) var(--kb-gutter) 0;
    border-top: 1px solid #374151;
    text-align: center;
    font-size: 14px;
    color: var(--kb-footer-text);
}

/* ============================================================
   TOMBOL
   ============================================================ */
.btn-daftar {
    display: inline-block;
    margin-top: var(--kb-space-md);
    background: #25D366;
    color: #fff;
    padding: 14px 32px;
    font-size: clamp(15px, 2vw, 16px);
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
}

.btn-daftar:hover {
    background: #1ebe5d;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(37, 211, 102, .45);
}

/* Tombol "Read More" pada kartu artikel */
.button-read {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #111;
    background: transparent;
    border: 1.5px solid #111;
    border-radius: 999px;
    text-decoration: none;
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.button-read:hover {
    background: #111;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}

/* ============================================================
   KARTU ARTIKEL — dipakai di beranda dan halaman blog
   ============================================================ */
.karya-card {
    /* Sedikit lebih hangat dari panel putih di belakangnya agar batas kartu terbaca */
    background: var(--kb-surface-alt);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    overflow: hidden;
    box-shadow: var(--kb-shadow);
    transition: transform .35s ease, box-shadow .35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.karya-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--kb-shadow-lg);
}

.karya-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #f1f1f1;
}

.karya-info {
    padding: var(--kb-space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.karya-info h3 {
    font-size: clamp(17px, 2.2vw, 19px);
    font-weight: 600;
    color: #111;
    margin: 0;
    line-height: 1.4;
}

.karya-info p {
    font-size: 14.5px;
    color: var(--kb-muted);
    line-height: 1.7;
    margin: 0 0 var(--kb-space-sm);
}

.karya-info .tanggal {
    font-size: 12.5px;
    color: #8a8a8a;
    letter-spacing: .3px;
}

/* ============================================================
   TOMBOL WHATSAPP MELAYANG
   Markup-nya ada di app/tombol_wa.php dan disisipkan di semua
   halaman publik. Warnanya sengaja disamakan dengan tombol
   "Daftar Sekarang" di beranda karena tujuannya memang sama.
   ============================================================ */
.wa-float {
    position: fixed;
    right: clamp(16px, 4vw, 28px);
    bottom: clamp(16px, 4vw, 28px);

    /* Satu tingkat di bawah navbar (1000) supaya panel menu di layar
       kecil tetap menutupi tombol ini saat menu dibuka. */
    z-index: 990;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;

    background: #25D366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.wa-float svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.wa-float:hover,
.wa-float:focus-visible {
    background: #1ebe5d;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(37, 211, 102, .45);
}

.wa-float:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .5);
    outline-offset: 3px;
}

/* Keterangan di sebelah kiri tombol. Disembunyikan dengan opacity,
   bukan display, agar transisinya halus. */
.wa-float-teks {
    position: absolute;
    right: calc(100% + 12px);
    white-space: nowrap;

    background: var(--kb-footer-bg);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: var(--kb-shadow-sm);

    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

/* Hanya untuk perangkat dengan penunjuk presisi. Di layar sentuh tidak
   ada keadaan hover, dan keterangan yang menempel terus justru
   memakan ruang; maknanya sudah dibawa oleh aria-label. */
@media (hover: hover) and (pointer: fine) {

    .wa-float:hover .wa-float-teks,
    .wa-float:focus-visible .wa-float-teks {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 600px) {
    .wa-float {
        width: 52px;
        height: 52px;
    }

    .wa-float svg {
        width: 27px;
        height: 27px;
    }
}

/* ---------- Hormati preferensi pengurangan animasi ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}