/* =====================================================================
   TEMA 20 - PAPAN TULIS
   Hero & footer berupa papan tulis hijau berbingkai kayu dengan tulisan
   kapur; statistik seperti papan kecil; kartu seperti kertas yang dipaku.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Nunito:wght@400;700&display=swap');

body.tema-papantulis {
    --radius-lg: 10px;
    --radius-md: 6px;
    --board: #2c5a4b;
    --board-dark: #1f4237;
    --wood: #8b5a2b;
    --wood-dark: #5e3b19;
    --chalk: #f5f7f2;
    --chalk-yellow: #ffe58a;
    background: #fbf6ea;
}
body.tema-papantulis h1, body.tema-papantulis h2, body.tema-papantulis h3, body.tema-papantulis h4,
body.tema-papantulis .hero-title, body.tema-papantulis .stat-number { font-family: 'Gochi Hand', 'Nunito', cursive; letter-spacing: .01em; }

body.tema-papantulis .top-bar { background: var(--wood-dark); color: #e9d9bf; }
body.tema-papantulis .top-bar a { color: #fff; }
body.tema-papantulis .navbar { background: #fffaf0; border-bottom: 4px solid var(--wood); box-shadow: 0 3px 0 rgba(94, 59, 25, .15); }
body.tema-papantulis .brand-text h1 { font-size: 20px; color: var(--board-dark); }
body.tema-papantulis .nav-link:hover { color: var(--wood); }
body.tema-papantulis .btn-nav-action, body.tema-papantulis .btn-hero { border-radius: 8px; }

/* Hero = papan tulis berbingkai kayu */
body.tema-papantulis .hero {
    margin: 14px 14px 0; padding: 70px 0 78px; border-radius: 10px;
    border: 16px solid var(--wood);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, .5), 0 0 0 3px var(--wood-dark), 0 14px 26px -10px rgba(0, 0, 0, .45);
    background:
        radial-gradient(800px 300px at 30% 20%, rgba(255, 255, 255, .07), transparent 70%),
        radial-gradient(600px 260px at 80% 90%, rgba(255, 255, 255, .05), transparent 70%),
        var(--board);
}
body.tema-papantulis .hero::before { opacity: .06; mix-blend-mode: screen; }
body.tema-papantulis .hero-title { color: var(--chalk); font-size: clamp(34px, 4.8vw, 58px); font-weight: 400; line-height: 1.12; text-shadow: 1px 1px 0 rgba(255, 255, 255, .25), 0 0 8px rgba(255, 255, 255, .25); }
body.tema-papantulis .hero-title span { color: var(--chalk-yellow); text-decoration: underline wavy rgba(255, 229, 138, .8); text-underline-offset: 8px; text-decoration-thickness: 2px; }
body.tema-papantulis .hero-subtitle { color: #d9e4dc; font-family: 'Nunito', sans-serif; }
body.tema-papantulis .hero-badge { border: 2px dashed rgba(245, 247, 242, .6); background: transparent; border-radius: 6px; backdrop-filter: none; font-family: 'Gochi Hand', cursive; font-size: 14px; }
body.tema-papantulis .btn-hero-secondary { border: 2px dashed rgba(245, 247, 242, .65); background: transparent; }
body.tema-papantulis .radar-card { background: #fffaf0; border-radius: 6px; border: 3px solid var(--wood); box-shadow: 4px 6px 0 rgba(0, 0, 0, .3); }
body.tema-papantulis .panoramic-hero { margin: 14px 14px 0; border: 16px solid var(--wood); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px var(--wood-dark); }
body.tema-papantulis .portal-bar-card, body.tema-papantulis .magazine-hub-card { background: #fffaf0; border: 3px solid var(--wood); border-radius: 8px; box-shadow: 4px 5px 0 rgba(94, 59, 25, .25); }
body.tema-papantulis .portal-btn-item, body.tema-papantulis .hub-link-btn { border-radius: 6px; }

/* Statistik = papan tulis kecil */
body.tema-papantulis .stats-grid { margin-top: 36px; gap: 18px; }
body.tema-papantulis .stat-card { background: var(--board); border: 8px solid var(--wood); border-radius: 6px; box-shadow: inset 0 0 22px rgba(0, 0, 0, .45), 3px 5px 0 rgba(94, 59, 25, .3); transition: transform .2s ease; }
body.tema-papantulis .stat-card:hover { transform: translateY(-4px) rotate(-.6deg); }
body.tema-papantulis .stat-number { color: var(--chalk-yellow); font-size: 46px; font-weight: 400; text-shadow: 0 0 8px rgba(255, 229, 138, .3); }
body.tema-papantulis .stat-label { color: var(--chalk); font-family: 'Nunito', sans-serif; }

body.tema-papantulis .section { padding: 72px 0; }
body.tema-papantulis .section-header { text-align: center; }
body.tema-papantulis .section-tag { background: var(--board) !important; color: var(--chalk-yellow) !important; border: 3px solid var(--wood); border-radius: 6px; padding: 3px 14px; font-family: 'Gochi Hand', cursive; font-size: 14px; }
body.tema-papantulis .section-title { font-size: clamp(32px, 4.2vw, 48px); font-weight: 400; color: var(--board-dark); }
body.tema-papantulis .section-title::after { content: ''; display: block; width: 140px; border-bottom: 4px dashed var(--wood); margin: 6px auto 0; }
body.tema-papantulis #berita { background: #fffaf0 !important; border-color: #e5d7b9 !important; }
body.tema-papantulis #guru { background: #f1e7d0 !important; }
body.tema-papantulis #kehadiran, body.tema-papantulis #ptsp { border-color: #e5d7b9 !important; }

/* Kartu = kertas dengan paku merah */
body.tema-papantulis .about-card, body.tema-papantulis .guru-card { position: relative; background: #fffdf6; border: 2px solid #e5d7b9; border-radius: 4px; box-shadow: 3px 5px 10px rgba(94, 59, 25, .18); transition: transform .2s ease; }
body.tema-papantulis .about-card::before, body.tema-papantulis .guru-card::before {
    content: ''; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff8a8a, #c42b2b 70%); box-shadow: 1px 2px 3px rgba(0, 0, 0, .35); z-index: 2;
}
body.tema-papantulis .guru-card:nth-child(odd)  { transform: rotate(-.7deg); }
body.tema-papantulis .guru-card:nth-child(even) { transform: rotate(.7deg); }
body.tema-papantulis .guru-card:hover { transform: rotate(0) translateY(-4px); }
body.tema-papantulis .guru-avatar { border: 3px solid var(--wood); }
body.tema-papantulis .guru-name { font-family: 'Gochi Hand', cursive; font-size: 18px; }
body.tema-papantulis .guru-badge { background: var(--board); color: var(--chalk-yellow); border-radius: 4px; }

body.tema-papantulis #berita article { background: #fffdf6 !important; border: 2px solid #e5d7b9 !important; border-radius: 4px !important; box-shadow: 3px 5px 10px rgba(94, 59, 25, .18) !important; }
body.tema-papantulis #berita article h4 { font-family: 'Gochi Hand', cursive; font-size: 1.3rem !important; font-weight: 400; }
body.tema-papantulis #berita .btn-hero-secondary { background: #0284c7 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; }
body.tema-papantulis #berita .btn-hero-secondary span, body.tema-papantulis #berita .btn-hero-secondary i { color: #ffffff !important; }

/* Footer = papan tulis dengan rak kapur */
body.tema-papantulis .footer { background: var(--board); border-top: 14px solid var(--wood); box-shadow: inset 0 14px 30px -10px rgba(0, 0, 0, .5); }