/* Font klasik */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:wght@400;700&display=swap');

:root {
  --bg:#0b0b0b;
  --panel:#1a1a1a;
  --gold:#c9a227;
  --text:#f5f5dc;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  font-family:'Cormorant Garamond', serif;
  background:var(--bg);
  color:var(--text);
}

/* Header & Nav */
.site-header { background:var(--panel); border-bottom:2px solid var(--gold); }
.nav { display:flex; justify-content:center; gap:24px; padding:14px; }
.nav a {
  color:var(--gold);
  text-decoration:none;
  font-weight:700;
  font-family:'Cinzel', serif;
}
.nav a:hover { color:#fff; }

/* Hero */
.hero {
  position:relative;
  text-align:center;
  padding:60px 20px;
  overflow:hidden;
}
.hero h1 {
  font-family:'Cinzel', serif;
  font-size:54px;
  color:var(--gold);
  margin-bottom:22px;
}

/* Kotak persegi (paragraf) */
.square-box {
  border:3px solid var(--gold);
  background:var(--panel);
  max-width:800px;
  margin:0 auto;
  padding:22px;
}
.square-box.narrow { max-width:700px; }

/* Canvas partikel emas */
#goldParticles {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Section title */
.section-title {
  text-align:center;
  font-family:'Cinzel', serif;
  color:var(--gold);
  margin:30px 0;
  font-size:28px;
}

/* Slider Era */
.slider {
  max-width:900px;
  margin:24px auto;
  overflow:hidden;
  border:2px solid var(--gold);
  border-radius:0; /* persegi */
  background:var(--panel);
}
.slides {
  display:flex;
  transition:transform 0.5s ease;
}
.slide {
  min-width:100%;
  padding:28px;
}
.slide h3 {
  font-family:'Cinzel', serif;
  color:var(--gold);
  margin:0 0 10px;
}
.controls { text-align:center; margin-top:10px; }
.btn {
  display:inline-block;
  background:var(--gold);
  color:var(--bg);
  border:none;
  padding:10px 16px;
  margin:5px;
  border-radius:0; /* persegi */
  cursor:pointer;
  font-weight:700;
  font-family:'Cinzel', serif;
  text-decoration:none;
}
.btn:hover { background:#e6c84c; }

/* Tabel persegi profil siswa */
.square-table {
  width:90%;
  margin:0 auto 40px;
  border-collapse:collapse;
  background:var(--panel);
}
.square-table th, .square-table td {
  border:2px solid var(--gold);
  padding:14px;
  text-align:center;
}
.square-table th {
  color:var(--gold);
  font-family:'Cinzel', serif;
  font-weight:700;
}

/* Galeri pemain: diagram persegi */
.gallery {
  width:92%;
  max-width:1100px;
  margin:0 auto 40px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}
.square-diagram {
  border:3px solid var(--gold);
  background:var(--panel);
  padding:10px;
  text-align:center;
  text-decoration:none;
}
.square-diagram img {
  width:100%;
  height:240px;
  object-fit:cover;
  border:2px solid var(--gold);
  display:block;
}
.square-diagram h3 {
  color:var(--gold);
  font-family:'Cinzel', serif;
  margin:10px 0 0;
}

/* Detail pemain */
.player-detail {
  width:92%;
  max-width:1000px;
  margin:30px auto 50px;
}
.actions { text-align:center; margin-top:20px; }

/* Footer */
.site-footer {
  text-align:center;
  padding:20px;
  background:var(--panel);
  color:var(--gold);
  border-top:2px solid var(--gold);
}