/* =====================================
PANEMBAHAN WONOKROMO — FINAL MAIN CSS
OVERWRITE READY VERSION
===================================== */

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

:root {
--bg-main: #000;
--text: #f5f5f5;
--muted: #aaa;
--gold: #d4af37;
--gold-soft: #b68a0a;
}

[data-theme="light"] {
--bg-main: #fff;
--text: #111;
--muted: #555;
}

html {
scroll-behavior: smooth;
}

body {
background: var(--bg-main);
color: var(--text);
font-family: Georgia, serif;
padding-top: 74px;
overflow-x: hidden;
}

/* =====================================
NAVBAR
===================================== */

.navbar {
position: fixed;
top: 0;
width: 100%;
height: 74px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32px;
z-index: 1000;
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

.navbar.gold {
background: linear-gradient(90deg, #8a6a12, var(--gold), #8a6a12);
}

.brand-wrap {
display: flex;
flex-direction: column;
}

.brand {
color: #000;
font-weight: bold;
font-size: 1rem;
letter-spacing: 1px;
text-decoration: none;
}

.tagline {
font-size: 0.68rem;
color: #000;
letter-spacing: 1px;
opacity: 0.8;
}

.nav-right {
display: flex;
align-items: center;
gap: 14px;
}

.lang {
color: #000;
text-decoration: none;
font-weight: bold;
}

.icon-btn,
.menu-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
transition: 0.25s ease;
}

.icon-btn:hover,
.menu-toggle:hover {
transform: scale(1.08);
}

/* =====================================
SIDE MENU
===================================== */

.side-menu {
position: fixed;
top: 74px;
right: -100%;
width: 320px;
height: calc(100vh - 74px);
background: rgba(0,0,0,0.96);
display: flex;
flex-direction: column;
padding: 42px 34px;
transition: right 0.35s ease;
z-index: 9999;
backdrop-filter: blur(12px);
border-left: 1px solid rgba(212,175,55,0.15);
}

.side-menu.open {
right: 0;
}

.side-menu a {
color: var(--gold);
text-decoration: none;
margin-bottom: 24px;
font-size: 1.05rem;
transition: 0.25s ease;
}

.side-menu a:hover {
color: #ffd700;
transform: translateX(5px);
}

/* =====================================
FOOTER
===================================== */

.site-footer {
text-align: center;
color: var(--muted);
padding: 56px 20px;
border-top: 1px solid rgba(212,175,55,0.12);
}

.footer-inner {
max-width: 900px;
margin: auto;
text-align: center;
}

.footer-note {
margin-top: 10px;
opacity: 0.7;
font-size: 0.82rem;
}

.footer-center {
text-align: center;
padding: 60px 0;
font-size: 13px;
color: #777;
}

/* =====================================
DARK THEME
===================================== */

.dark-theme {
background: #000;
color: #f5f5f5;
}

.dark-theme a {
color: #d4af37;
text-decoration: none;
}

.dark-theme a:visited {
color: #d4af37;
}

.dark-theme a:hover {
color: #ffd700;
}

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

.epics-hero {
text-align: center;
padding: 120px 20px 60px;
}

.epics-hero.small {
padding: 80px 20px 40px;
}

.epics-title {
font-size: 42px;
color: #d4af37;
margin-bottom: 10px;
}

.epics-subtitle {
font-size: 16px;
color: #ccc;
}

/* =====================================
EPICS GRID
===================================== */

.epics-grid {
display: flex;
justify-content: center;
gap: 40px;
padding: 60px 40px;
}

.epic-card,
.card {
background: linear-gradient(180deg, #111, #000);
border-radius: 16px;
padding: 32px;
width: 420px;
border: 1px solid rgba(212,175,55,0.14);
box-shadow: 0 0 30px rgba(0,0,0,0.45);
}

.epic-name {
color: #d4af37;
font-size: 22px;
margin-bottom: 10px;
}

.epic-desc {
font-size: 14px;
color: #ccc;
margin-bottom: 24px;
}

.epic-actions,
.actions {
display: flex;
gap: 16px;
}

/* =====================================
BUTTONS
===================================== */

.btn-gold {
display: inline-block;
background: #d4af37;
color: #000 !important;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease;
}

.btn-outline-gold {
display: inline-block;
border: 1px solid #d4af37;
color: #d4af37 !important;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
transition: all 0.25s ease;
}

.btn-gold:hover,
.btn-outline-gold:hover {
opacity: 0.9;
transform: translateY(-2px);
}

/* =====================================
PREMIUM READER
===================================== */

.no-select {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}

.epic-reader {
max-width: 820px;
margin: 80px auto;
font-size: 18px;
line-height: 1.8;
color: #f2f2f2;
}

.epic-reader p {
margin-bottom: 28px;
}

.watermark {
position: relative;
}

.watermark::before {
content: "SONY KUSBIANTO MR";
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 64px;
color: rgba(212,175,55,0.08);
pointer-events: none;
z-index: 0;
}

/* =====================================
EPIC PAGE
===================================== */

.epic-page {
background: #000;
color: #f5f5f5;
}

.epic-container {
max-width: 880px;
margin: 0 auto;
padding: 100px 24px 80px;
}

.epic-header {
text-align: center;
margin-bottom: 60px;
}

.epic-title {
font-size: 2.8rem;
color: #d4af37;
margin-bottom: 12px;
}

.epic-tagline {
font-size: 1.1rem;
color: #cfcfcf;
font-style: italic;
}

.epic-synopsis p {
font-size: 1.05rem;
line-height: 1.85;
margin-bottom: 22px;
color: #e6e6e6;
}

.epic-closing {
margin-top: 36px;
font-style: italic;
color: #d0d0d0;
}

.epic-cta {
margin-top: 60px;
text-align: left;
}

/* =====================================
READER
===================================== */

.reader {
background: #000;
color: #eee;
font-family: "Georgia", "Times New Roman", serif;
}

.reader-container {
max-width: 760px;
margin: 0 auto;
padding: 80px 24px;
}

.chapter-header h1 {
font-size: 2.4rem;
color: #d4af37;
margin-bottom: 0.5em;
}

.chapter-header h2 {
font-size: 1.4rem;
color: #c9a227;
margin-bottom: 0.5em;
}

.chapter-meta {
font-size: 0.9rem;
color: #aaa;
margin-bottom: 3em;
font-style: italic;
}

.subchapter {
margin-bottom: 4em;
}

.subchapter h3 {
font-size: 1.3rem;
color: #d4af37;
margin-bottom: 1.2em;
}

.subchapter p {
font-size: 1.05rem;
line-height: 1.85;
margin-bottom: 1.4em;
text-align: justify;
}

/* =====================================
GOLD TYPOGRAPHY
===================================== */

.epic-synopsis h1,
.epic-synopsis h2 {
color: #d4af37;
text-shadow: 0 0 1px rgba(212,175,55,0.35);
letter-spacing: 0.5px;
}

.epic-synopsis h1 {
font-size: 2.4rem;
margin-bottom: 0.3em;
}

.epic-synopsis h2 {
font-size: 1.5rem;
margin-top: 2.2em;
margin-bottom: 1em;
}

.epic-synopsis .subtitle {
color: #bfae6a;
font-style: italic;
}

/* =====================================
LIGHT MODE
===================================== */

[data-theme="light"] .navbar.gold {
background: linear-gradient(90deg, #f1e3a3, #e6c95a, #f1e3a3);
}

[data-theme="light"] .brand,
[data-theme="light"] .tagline,
[data-theme="light"] .lang,
[data-theme="light"] .icon-btn,
[data-theme="light"] .menu-toggle {
color: #111;
}

[data-theme="light"] .side-menu {
background: #fff;
}

[data-theme="light"] .side-menu a {
color: #8a6a12;
}

/* =====================================
MOBILE RESPONSIVE
===================================== */

@media (max-width: 768px) {

body {
padding-top: 74px;
}

.navbar {
padding: 0 18px;
}

.brand {
font-size: 0.92rem;
}

.tagline {
font-size: 0.58rem;
}

.side-menu {
width: 100%;
padding: 40px 28px;
}

.main-content,
.page-content,
.content,
.container {
padding: 30px 16px;
}

.hero {
min-height: auto;
padding-top: 40px;
padding-bottom: 40px;
}

h1 {
font-size: 2rem;
line-height: 1.3;
text-align: center;
}

h2 {
font-size: 1.45rem;
line-height: 1.4;
}

p {
font-size: 15px;
line-height: 1.7;
}

.epics-grid {
flex-direction: column;
padding: 32px 18px;
gap: 24px;
}

.epic-card,
.card {
width: 100%;
padding: 24px;
}

.epic-actions,
.actions {
flex-direction: column;
}

.actions a,
.btn-gold,
.btn-outline-gold {
width: 100%;
text-align: center;
}

.reader-container {
padding: 50px 16px;
}

.chapter-header h1 {
font-size: 1.9rem;
}

.epic-reader,
.reader-container,
.epic-container {
padding-left: 18px;
padding-right: 18px;
}

}

---

# HOTFIX — MENU TOGGLE & BILINGUAL FIX

Masalah terjadi karena `main.css` baru membutuhkan struktur `header.php` baru.

Kalau hanya CSS yang dioverwrite:

* menu mati
* toggle mati
* bilingual mati

itu normal karena class lama tidak sinkron.

---

# OVERWRITE /partials/header.php

```php
<?php
$currentPage = basename($_SERVER['PHP_SELF']);
?>

<header class="navbar gold">

  <div class="brand-wrap">

    <a href="/" class="brand">
      Panembahan Wonokromo
    </a>

    <span class="tagline">
      Epic Literary Archive
    </span>

  </div>

  <div class="nav-right">

    <a href="?lang=id" class="lang">ID</a>
    <a href="?lang=en" class="lang">EN</a>

    <button id="themeToggle" class="icon-btn">
      ☀
    </button>

    <button id="menuToggle" class="menu-toggle">
      ☰
    </button>

  </div>

</header>

<nav id="mainMenu" class="side-menu">

  <a href="/">Home</a>
  <a href="/pages/epics/">Epics</a>
  <a href="/pages/sports/">Sports</a>
  <a href="/pages/articles/">Articles</a>
  <a href="/pages/documents/">Documents</a>
  <a href="/pages/profile/">Profile</a>
  <a href="/pages/contact/">Contact</a>

</nav>
```

---

# OVERWRITE /js/main.js

```javascript
document.addEventListener("DOMContentLoaded", () => {

  const menuToggle = document.getElementById("menuToggle");
  const mainMenu = document.getElementById("mainMenu");

  if (menuToggle && mainMenu) {

    menuToggle.addEventListener("click", () => {

      mainMenu.classList.toggle("open");

    });

  }

  const themeToggle = document.getElementById("themeToggle");

  if (themeToggle) {

    themeToggle.addEventListener("click", () => {

      const currentTheme = document.documentElement.getAttribute("data-theme");

      const newTheme = currentTheme === "light"
        ? "dark"
        : "light";

      document.documentElement.setAttribute("data-theme", newTheme);

      localStorage.setItem("theme", newTheme);

    });

    const savedTheme = localStorage.getItem("theme") || "dark";

    document.documentElement.setAttribute("data-theme", savedTheme);

  }

});