/* style.css */
/* ========== Reset & Base ========== */
* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:#0c0c0f;
  color:#e0e0e0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; border-radius:8px; }

/* NAVBAR */
.site-nav {
  background: linear-gradient(90deg, rgba(18,18,20,0.9), rgba(20,16,30,0.9));
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: sticky;
  top: 0;
  z-index: 999;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand {
  color:#fff;
  font-weight:700;
  text-decoration:none;
  letter-spacing:0.4px;
}
.nav-links {
  list-style:none;
  display:flex;
  gap:1rem;
  align-items:center;
  margin:0;
  padding:0;
}
.nav-links a {
  color:#ddd;
  text-decoration:none;
  padding:6px 10px;
  border-radius:6px;
  transition: background .15s, color .15s;
}
.nav-links a:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}

/* mobile */
.nav-toggle { display:none; background:none; border:0; cursor:pointer; }
.nav-toggle .hamb { width:22px; height:2px; background:#fff; display:block; position:relative; }
.nav-toggle .hamb::after, .nav-toggle .hamb::before {
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff;
}
.nav-toggle .hamb::before { top:-7px; }
.nav-toggle .hamb::after { top:7px; }

@media (max-width:820px) {
  .nav-toggle { display:block; }
  .nav-links { position: absolute; right: 1rem; top:64px; background: rgba(10,10,12,0.95); padding:0.8rem; border-radius:8px; flex-direction:column; display:none; }
  .nav-links.show { display:flex; }
}

.site-nav {
  position: sticky; /* atau fixed */
  top: 0;
  z-index: 9999;    /* pastikan lebih tinggi dari elemen lain */
  background: rgba(10,10,15,0.9);
}

/* juga pastikan tombol sendiri di depan */
.nav-toggle {
  position: relative;
  z-index: 10000;
  cursor: pointer;
}


/* ========== Container ========== */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem;
}

/* ========== Hero ========== */
/* Logo OSIS di Hero */
.osis-logo {
  display: block;
  margin: 0 auto 1rem;
  width: 120px;
  height: auto;
}

.hero {
  text-align:center;
  margin-bottom:3rem;
}
.hero h1 {
  font-size:2.5rem;
  margin-bottom:.5rem;
}

/* Separator antara header dan content */
.hero {
  /* existing styles… */
  padding-bottom: 2rem;          /* beri ruang bawah */
  margin-bottom: 2rem;           /* beri jarak sebelum main */
  border-bottom: 2px solid #9d00ff; /* garis pemisah */
}


/* ==== Hero Sosmed Icons ==== */
.hero-sosmed {
  display: flex;
  justify-content: center;   /* center horizontal */
  gap: 1rem;                 /* jarak antar icon */
  margin-top: 1.5rem;        /* spasi di atas */
}

.hero-sosmed img {
  width: 40px;               /* sesuaikan ukuran */
  height: auto;
  transition: transform .2s;
}

.hero-sosmed img:hover {
  transform: scale(1.1);     /* efek hover */
}


/* Hero Title Glow */
.Bidang-hero {
  color: white;
  text-shadow: 
  0 0 7px #ffffff;
  font-size: 60px;

}

.Osis-hero {
  color: white;
  text-shadow: 
  0 0 7px #ffffff;
  font-size: 60px;
}

.SMKN-1-hero {
  color: rgb(88, 105, 255);
  text-shadow: 
  0 0 7px rgb(88, 105, 255);
  font-size: 60px; 
}

.Stabat-hero {
  color: rgb(59, 130, 246);
  text-shadow: 
  0 0 7px rgb(59, 130, 246);
  font-size: 60px;
}

.hero p {
  font-size: 1.1rem;
  color:#aaaaaa;
}

/* ========== Section & Timeline ========== */
.section {
  position:relative;
  display:flex;
  align-items:center;
  gap:2rem;
  margin-bottom:3rem;
}
/* alternating left/right on desktop */
@media (min-width:769px) {
  .section:nth-child(even) { flex-direction:row-reverse; }
}

/* the vertical line */
.section::before {
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:4px;
  background:linear-gradient(to bottom, #78a9ff, #6c63ff);
  transform:translateX(-50%);
  z-index:0;
}

/* milestone bubble */
.milestone {
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:1;
  width:40px; height:40px;
  background:#000;
  color:#6c63ff;
  border:2px solid #6c63ff;
  border-radius:50%;
  text-align:center;
  line-height:36px;
  font-weight:bold;
  flex-shrink:0;
}

/* text & image */
.section .text { flex:1; }
.section .text h2 {
  font-size: 2.2rem;
  color:#fff;
  margin-bottom:.5rem;
}

.Bidang-section {
  color: white;
  text-shadow: 
  0 0 7px #ffffff;
}

.Inti {
  color: white;
  text-shadow: 
  0 0 7px #ffffff;
  animation: glow-white-text-shadow 1s infinite;
}

:root{
  --color-ketua: #ff4d4d;        /* merah */
  --color-sekretaris: #4da6ff;   /* biru */
  --color-bendahara: #4dff88;    /* hijau */
}

/* badge umum untuk peran */
.role {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 4px 8px;
  border-radius: 8px;
  margin-right: 6px;
  vertical-align: middle;
  background: rgba(255,255,255,0.02); /* subtle bg agar kontras */
  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset;
  transition: transform .15s, box-shadow .2s;
}

/* warna spesifik + glow */
.role.ketua {
  color: var(--color-ketua);
  text-shadow: 0 0 8px rgba(255,77,77,0.9);
  box-shadow: 0 0 18px rgba(255,77,77,0.14);
}
.role.sekretaris {
  color: var(--color-sekretaris);
  text-shadow: 0 0 8px rgba(77,166,255,0.9);
  box-shadow: 0 0 18px rgba(77,166,255,0.14);
}
.role.bendahara {
  color: var(--color-bendahara);
  text-shadow: 0 0 8px rgba(77,255,136,0.9);
  box-shadow: 0 0 18px rgba(77,255,136,0.12);
}

/* hover effect */
.role:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}

/* alternatif: kalau takut soal kontras, tambahkan border */
.role.ketua { border: 1px solid rgba(255,77,77,0.25); }
.role.sekretaris { border: 1px solid rgba(77,166,255,0.25); }
.role.bendahara { border: 1px solid rgba(77,255,136,0.18); }

/* aksesibilitas: jangan hanya bergantung warna
   - tambahkan bold/ikon di HTML jika ingin menandai selain warna */


.Hubungan-Masyarakat {
  color: #00ffff;
  text-shadow: 
  0 0 7px #00d9ff;
  animation: glow-cyan-text-shadow 1s infinite;
}

.Budi-Pekerti-Luhur {
  color: #00ff00;
  text-shadow: 
  0 0 7px #00ff00;
  animation: glow-green-text-shadow 1s infinite;
}

.Sosial-Politik {
  color: #ff3333;
  text-shadow: 
  0 0 7px #ff3333;
  animation: glow-red-text-shadow 1s infinite;
}

.Prestasi-Akademik {
  color: #ffff66;
  text-shadow: 
  0 0 7px #ffff66;
  animation: glow-yellow-text-shadow 1s infinite;
}

.Non-Prestasi-Akademik {
  color: #ffa54f;
  text-shadow: 
  0 0 7px #ffa54f;
  animation: glow-orange-text-shadow 1s infinite;
}

.Yang-Maha-Esa {
  color: #ce67ff;
  text-shadow: 
  0 0 7px #ce67ff;
  animation: glow-purple-text-shadow 1s infinite;
}

.Kewirausahaan {
  color: #2b00ff;
  text-shadow: 
  0 0 7px #2b00ff;
  animation: glow-blue-text-shadow 1s infinite;
}

.Bela-Negara {
  color: #ff48ea;
  text-shadow: 
  0 0 7px #ff48ea;
  animation: glow-pink-text-shadow 1s infinite;
}

/* Reset & Base */
* { box-sizing: border-box; margin:0; padding:0; }
body {
  background:#0c0c0f;
  color:#e0e0e0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; border-radius:8px; }

/* Container */
.container { max-width:1200px; margin:0 auto; padding:2rem 1rem; }

/* Hero */
.osis-logo { display:block; margin:0 auto 1rem; width:120px; }
.hero { text-align:center; margin-bottom:3rem; padding-bottom:2rem; border-bottom:2px solid #9d00ff; }
.hero h1 { font-size:2.5rem; margin-bottom:.5rem; }
.hero-sosmed { display:flex; justify-content:center; gap:1rem; margin-top:1.5rem; }
.hero-sosmed img { width:40px; transition: transform .2s; }
.hero-sosmed img:hover { transform:scale(1.08); }

/* Title glow (kept from your theme) */
.Bidang-hero, .Osis-hero { color:#fff; text-shadow:0 0 7px #fff; font-size:60px; }
.SMKN-1-hero { color:rgb(88,105,255); text-shadow:0 0 7px rgb(88,105,255); font-size:60px; }
.Stabat-hero { color:rgb(59,130,246); text-shadow:0 0 7px rgb(59,130,246); font-size:60px; }

/* Sections and timeline */
.section { position:relative; display:flex; align-items:center; gap:2rem; margin-bottom:3rem; }
@media (min-width:769px){ .section:nth-child(even){ flex-direction:row-reverse; } }
.section::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:4px; background:linear-gradient(to bottom,#78a9ff,#6c63ff); transform:translateX(-50%); z-index:0; }
.milestone { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:1; width:40px;height:40px;background:#000;color:#6c63ff;border:2px solid #6c63ff;border-radius:50%;text-align:center;line-height:36px;font-weight:bold; }

/* Text & image */
.section .text { flex:1; }
.section .text h2 { font-size:2.2rem; color:#fff; margin-bottom:.5rem; }
.section .image { flex:1; }
.section .text p.desc { font-size:1.05rem; color:#e6e6e6; line-height:1.5; }

/* ========== ROLE (badge colors) ========== */
:root{
  --color-ketua: #ff4d4d;
  --color-sekretaris: #4da6ff;
  --color-bendahara: #4dff88;
}

/* role badges */
.role { display:inline-block; font-weight:700; font-size:0.95rem; padding:4px 8px; border-radius:8px; margin:0 6px; vertical-align:middle; background:rgba(255,255,255,0.02); box-shadow:0 0 8px rgba(0,0,0,0.25) inset; transition: transform .15s, box-shadow .2s; }
.role.ketua { color:var(--color-ketua); text-shadow:0 0 8px rgba(255,77,77,0.9); box-shadow:0 0 18px rgba(255,77,77,0.12); border:1px solid rgba(255,77,77,0.18); }
.role.sekretaris { color:var(--color-sekretaris); text-shadow:0 0 8px rgba(77,166,255,0.9); box-shadow:0 0 18px rgba(77,166,255,0.12); border:1px solid rgba(77,166,255,0.16); }
.role.bendahara { color:var(--color-bendahara); text-shadow:0 0 8px rgba(77,255,136,0.95); box-shadow:0 0 18px rgba(77,255,136,0.12); border:1px solid rgba(77,255,136,0.14); }

/* highlight classes for descriptions (hl = highlight) */
.hl { font-weight:700; padding:2px 8px; border-radius:6px; display:inline-block; margin:0 4px; }

/* variants */
.hl-inti { color:#ffffff; background:rgba(255,107,107,0.06); text-shadow:0 0 8px rgba(255, 255, 255, 0.9); box-shadow:0 0 18px rgba(255,107,107,0.06); }
.hl-humas { color:#4ef1d4; background:rgba(78,241,212,0.05); text-shadow:0 0 8px rgba(78,241,212,0.85); box-shadow:0 0 18px rgba(78,241,212,0.05); }
.hl-buhur { color:#7cff6b; background:rgba(124,255,107,0.05); text-shadow:0 0 8px rgba(124,255,107,0.85); }
.hl-sospol { color:#ff8a5b; background:rgba(255,138,91,0.05); text-shadow:0 0 10px rgba(255,138,91,0.9); }
.hl-presmik { color:#fff07a; background:rgba(255,240,122,0.04); text-shadow:0 0 10px rgba(255,240,122,0.85); }
.hl-nonpres { color:#ffba6b; background:rgba(255,186,107,0.04); text-shadow:0 0 8px rgba(255,186,107,0.9); }
.hl-yme { color:#c687ff; background:rgba(198,135,255,0.04); text-shadow:0 0 10px rgba(198,135,255,0.85); }
.hl-kkw { color:#7aa8ff; background:rgba(122,168,255,0.04); text-shadow:0 0 8px rgba(122,168,255,0.85); }
.hl-bela { color:#ff7bd6; background:rgba(255,123,214,0.04); text-shadow:0 0 8px rgba(255,123,214,0.85); }

/* responsive: mobile layout */
@media (max-width:768px) {
  .section { flex-direction:column; align-items:flex-start; padding-left:80px; }
  .section::before { left:20px; transform:none; }
  .milestone { left:20px; transform:translateX(-50%) translateY(0); top:10px; }
  .Bidang-hero, .Osis-hero, .SMKN-1-hero, .Stabat-hero { font-size:36px; }
}

/* glow keyframes (kept minimal) */
@keyframes glow { 0% { text-shadow:0 0 10px rgba(255,255,255,0.2);} 50%{ text-shadow:0 0 22px rgba(255,255,255,0.4);} 100%{ text-shadow:0 0 10px rgba(255,255,255,0.2);} }

/* IntersectionObserver animation (hidden -> fade-in) */
.hero, .section, .site-footer { opacity:0; transform:translateY(10px); transition:opacity .6s ease-out, transform .6s ease-out; }
.hidden { opacity:0; transform:translateY(10px); }
.fade-in { opacity:1 !important; transform:translateY(0) !important; transition:opacity .6s, transform .6s; }

/* Footer */
.site-footer { text-align:center; padding:2rem 1rem; margin-top:2rem; background:#000; }
.site-footer .footer-content p { color:#aaa; font-size:.9rem; }


.section .text p {
  font-size:1.2rem;
  color:#ffffff;
  font-style: italic;
}
.section .image { flex:1; }

/* ========== Responsive (Mobile) ========== */
@media (max-width:768px) {
  .section {
    flex-direction:column;
    align-items:flex-start;
    padding-left:80px; /* space for line+bubble */
  }
  .section::before {
    left:20px;      /* garis ke kiri */
    transform:none;
  }
  .milestone {
    left:20px;      /* bubble juga ke kiri */
    transform:translateX(-50%) translateY(0);
    top:10px;       /* turun sedikit */
  }
}

@keyframes glow-white-text-shadow {
  0% {
    text-shadow: 0 0 20px #ffffff;
  }
  50% {
    text-shadow: 0 0 40px #ffffff;
  }
  100% {
    text-shadow: 0 0 20px #ffffff;
  }
}

@keyframes glow-cyan-text-shadow {
  0% {
    text-shadow: 0 0 20px rgb(0, 191, 255);
  }
  50% {
    text-shadow: 0 0 40px rgb(0, 200, 255);
  }
  100% {
    text-shadow: 0 0 20px rgb(0, 179, 255);
  }
}

@keyframes glow-green-text-shadow {
  0% {
    text-shadow: 0 0 20px #00ff00;
  }
  50% {
    text-shadow: 0 0 40px #00ff00;
  }
  100% {
    text-shadow: 0 0 20px #00ff00;
  }
}

@keyframes glow-red-text-shadow {
  0% {
    text-shadow: 0 0 20px #ff3333;
  }
  50% {
    text-shadow: 0 0 40px #ff3333;
  }
  100% {
    text-shadow: 0 0 20px #ff3333;
  }
}

@keyframes glow-yellow-text-shadow {
  0% {
    text-shadow: 0 0 20px #ffff66;
  }
  50% {
    text-shadow: 0 0 40px #ffff66;
  }
  100% {
    text-shadow: 0 0 20px #ffff66;
  }
}

@keyframes glow-orange-text-shadow {
  0% {
    text-shadow: 0 0 20px #ffa54f;
  }
  50% {
    text-shadow: 0 0 40px #ffa54f;
  }
  100% {
    text-shadow: 0 0 20px #ffa54f;
  }
}

@keyframes glow-purple-text-shadow {
  0% {
    text-shadow: 0 0 20px #ce67ff;
  }
  50% {
    text-shadow: 0 0 40px #ce67ff;
  }
  100% {
    text-shadow: 0 0 20px #ce67ff;
  }
}

@keyframes glow-blue-text-shadow {
  0% {
    text-shadow: 0 0 20px #2b00ff;
  }
  50% {
    text-shadow: 0 0 40px #2b00ff;
  }
  100% {
    text-shadow: 0 0 20px #2b00ff;
  }
}

@keyframes glow-pink-text-shadow {
  0% {
    text-shadow: 0 0 20px #ff48ea;
  }
  50% {
    text-shadow: 0 0 40px #ff48ea;
  }
  100% {
    text-shadow: 0 0 20px #ff48ea;
  }
}

@keyframes glow-red {
  0% {
    box-shadow: 0 0 5px rgb(255, 51, 0)
  }
  50% {
    box-shadow: 0 0 20px red
  }
  100% {
    box-shadow: 0 0 5px rgb(255, 51, 0)
  }
}

/* Semua elemen ini ter-hide dulu */
.hero,
.section,
.site-footer {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Kelas yang memicu animasi */
.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.hidden { opacity: 0; transform: translateY(10px); }
.fade-in { opacity: 1; transform: translateY(0); transition: opacity 0.6s, transform 0.6s; }


/* ========== Footer ========== */
.site-footer {
  text-align:center;
  padding:2rem 1rem;
  margin-top:2rem;
  background:#000;
}
.site-footer .footer-content p {
  color:#aaa;
  font-size:.9rem;
}


.site-footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 30px 20px;
  margin-top: 40px;
  /* border-top: 3px solid #ff0000; */
}

.site-footer a {
  color: cyan;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-content p {
  margin: 5px 0;
  font-size: 14px;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}