/* Bright, full-color theme for SMK PGRI 4 Kota Kediri
   Works with existing index.php markup. Load after base style.css. */
:root{
  --primary:#0f62fe;      /* bright blue */
  --primary-2:#0043ce;    /* darker blue */
  --accent:#ffb000;       /* vibrant gold */
  --accent-2:#ffcd38;     /* light gold */
  --bg:#f8fafc;           /* very light background */
  --card:#ffffff;         /* card surface */
  --muted:#586173;        /* neutral text */
  --text:#0f172a;         /* main text */
  --border:#e6eaf2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial; color:var(--text); background:radial-gradient(1200px 600px at 10% -10%, #e8f1ff 0%, transparent 50%), linear-gradient(180deg, #ffffff 0%, var(--bg) 100%)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);color:var(--text);background:#fff;padding:.7rem 1.05rem;border-radius:12px;transition:.2s;font-weight:600}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,98,254,.12)}
.btn-primary{background:linear-gradient(180deg,var(--accent-2) 0%, var(--accent) 100%);color:#1a1f2e;border-color:transparent;box-shadow:0 8px 22px rgba(255,176,0,.25)}
.btn-primary:hover{filter:brightness(1.03)}
.btn-success{background:linear-gradient(180deg,#22c55e 0%, #16a34a 100%);color:#06210f;border-color:transparent;box-shadow:0 8px 22px rgba(34,197,94,.25)}
.btn-success:hover{filter:brightness(1.03)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-container{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-logo{display:flex;align-items:center;gap:.7rem}
.nav-logo .logo-img{width:40px;height:40px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.08))}
.nav-logo .logo-text h3{margin:0;font-size:1.05rem;color:#0f172a}
.nav-logo .logo-text span{font-size:.82rem;color:#64748b}
.nav-menu{display:flex;gap:.35rem}
.nav-link{padding:.5rem .8rem;border-radius:12px;color:#334155}
.nav-link:hover,.nav-link.active{background:#eaf2ff;color:#0f62fe}
.nav-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer}
.nav-toggle .bar{width:22px;height:2px;background:#111827}
@media (max-width:800px){
  .nav-menu{position:absolute;left:0;right:0;top:70px;background:#ffffff;border-bottom:1px solid var(--border);flex-direction:column;padding:10px 16px;display:none}
  .nav-menu.open{display:flex}
  .nav-toggle{display:flex}
}

/* Hero */
.hero{position:relative;padding:96px 0 84px;background-image:radial-gradient(900px 420px at 85% -10%, rgba(255,176,0,.25) 0%, transparent 60%), linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%), var(--hero-bg, url('../img/school-building.jpg'));background-size:auto, auto, cover;background-position:center top, center, center;background-repeat:no-repeat;overflow:hidden}
.hero-overlay{position:absolute;inset:0;pointer-events:none}
.hero-content{position:relative}
.hero-title{font-size:2.35rem;margin:0 0 .6rem;letter-spacing:.2px;color:#0f172a}
.hero-subtitle{color:#475569;margin:0 0 1.1rem}
.hero-buttons{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-scroll{display:flex;justify-content:center;margin-top:26px;color:#0f62fe;opacity:.85}
.hero-scroll i{animation:bounce 1.6s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Quick info cards */
.quick-info .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.info-card{background:linear-gradient(180deg, #ffffff, #fbfdff);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 10px 24px rgba(15,98,254,.06)}
.info-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(180deg,#0f62fe,#0043ce);color:#ffcd38;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* About */
.about-content{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.about-text h3{margin:.5rem 0;color:#0f62fe}
.about-image img{border-radius:16px;box-shadow:0 12px 28px rgba(2,6,23,.12)}
@media (max-width:900px){.about-content{grid-template-columns:1fr}}

/* Programs */
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.program-card{background:linear-gradient(180deg, #ffffff, #f7fbff);border:1px solid var(--border);border-radius:16px;padding:18px;text-align:center;transition:.2s;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.program-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(2,6,23,.12)}
.program-icon{font-size:30px;color:#ffb000;margin-bottom:10px}
.program-card h3{margin:.25rem 0 .35rem;font-size:1.06rem;color:#0f172a}
.program-card p{margin:0;color:#475569;font-size:.92rem}

/* News */
.news .news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.news-card{background:linear-gradient(180deg, #ffffff, #fbfdff);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.news-image{height:170px;background:#f1f5f9}
.news-image img{width:100%;height:100%;object-fit:cover}
.news-content{padding:14px}
.news-content h3{margin:.2rem 0 .4rem;font-size:1.06rem;color:#0f172a}
.news-content p{margin:0 0 .6rem;color:#475569}
.news-meta{font-size:.86rem;color:#64748b}

/* Gallery */
.gallery-section{padding:10px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gallery-card{background:linear-gradient(180deg,#ffffff,#fbfdff);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(2,6,23,.06);transition:transform .2s, box-shadow .2s}
.gallery-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(2,6,23,.12)}
.gallery-image{aspect-ratio:4/3;background:#f1f5f9}
.gallery-image img{width:100%;height:100%;object-fit:cover}
.gallery-card figcaption{padding:10px 12px;color:#334155;font-size:.92rem}

/* Announcements */
.announcements .announcements-list{display:flex;flex-direction:column;gap:12px}
.announcement-item{display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg, #ffffff, #fbfdff);box-shadow:0 10px 24px rgba(2,6,23,.06)}
.announcement-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(180deg,#0f62fe,#0043ce);color:#ffcd38;display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.announcement-body h4{margin:.15rem 0 .3rem;font-size:1.02rem;color:#0f172a}
.announcement-body p{margin:0 0 .5rem;color:#475569}
.announcement-meta{font-size:.86rem;color:#64748b}
.announcement-high{border-color:#ffd1d1;background:linear-gradient(180deg, #fff5f5, #fffbfb)}

/* Staff */
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.staff-card{background:linear-gradient(180deg, #ffffff, #fbfdff);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.staff-card img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:4px solid #ffcd38;background:#ffffff;margin:0 auto .75rem}
.staff-card h4{margin:.25rem 0 .2rem;font-size:1rem;color:#0f172a}
.staff-card p{margin:0;color:#475569;font-size:.92rem}

/* Headmaster */
.headmaster .headmaster-content{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.headmaster .headmaster-photo{display:flex;justify-content:center}
.headmaster .headmaster-photo img{width:260px;height:260px;object-fit:cover;border-radius:22px;border:6px solid var(--accent-2);background:#fff;box-shadow:0 18px 44px rgba(2,6,23,.12)}
.headmaster .headmaster-info h3{margin:.25rem 0 .5rem;font-size:1.3rem;color:#0f172a}
.headmaster .headmaster-info p{margin:0;color:#475569;line-height:1.7}
@media (max-width:900px){
  .headmaster .headmaster-content{grid-template-columns:1fr;text-align:center}
}

/* Contact */
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-info{display:flex;flex-direction:column;gap:12px}
.contact-item{display:flex;gap:12px;align-items:flex-start}
.contact-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(180deg,#0f62fe,#0043ce);color:#ffcd38;display:flex;align-items:center;justify-content:center}
.contact-details h4{margin:.1rem 0 .25rem;color:#0f172a}
.contact-form .form-group{margin-bottom:12px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:11px;border:1px solid var(--border);border-radius:12px;font:inherit;background:#fff;color:#0f172a}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#94a3b8}
@media (max-width:900px){.contact-content{grid-template-columns:1fr}}

/* PPDB */
.ppdb-cta{padding:3rem 0;background:linear-gradient(135deg,#0f62fe 0%,#36a2ff 100%);color:#fff;text-align:center;margin-top:2rem;border-radius:18px;box-shadow:0 14px 36px rgba(15,98,254,.25)}
.ppdb-cta .btn{margin-top:1rem}

/* Footer */
.footer{margin-top:44px;padding:22px 0;border-top:1px solid var(--border);background:linear-gradient(180deg, #ffffff, #f8fbff);color:#475569}
.footer-content{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}
.footer-logo{display:flex;gap:10px;align-items:center}
.footer-logo img{width:42px;height:42px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.08))}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#0f62fe,#0043ce);color:#ffcd38;transition:all .2s;border:1px solid #e6eaf2}
.social-links a:hover{transform:translateY(-2px);background:#ffcd38;color:#0f172a}

/* Utilities */
.section-header{text-align:center;margin:44px 0 20px}
.section-header h2{margin:0 0 .3rem;font-size:1.7rem;color:#0f172a}
.section-header p{margin:0;color:#64748b}

/* small tweaks */
@media (max-width:640px){
  .hero{padding:72px 0 64px}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;z-index:1000}
.lightbox[aria-hidden="false"]{display:block}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7)}
.lightbox-content{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;align-items:center;justify-items:center;padding:20px}
.lightbox-figure{max-width:min(1080px, 96vw);max-height:min(82vh, 800px);margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 24px 64px rgba(2,6,23,.5)}
.lightbox-caption{color:#e2e8f0;text-align:center}
.lightbox-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;background:#ffffff;color:#0f172a;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.lightbox-prev,.lightbox-next{width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.95);color:#0f172a;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.lightbox-prev{margin-right:14px}
.lightbox-next{margin-left:14px}
@media (max-width:640px){
  .lightbox-content{grid-template-columns:1fr}
  .lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%)}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
}

/* Responsive enhancements */
@media (max-width: 1024px){
  .container{padding:0 18px}
  .about-content{gap:18px}
  .headmaster .headmaster-content{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .container{padding:0 16px}
  .hero{padding:84px 0 70px}
  .hero-title{font-size:1.9rem}
  .hero-subtitle{font-size:1rem}
  .hero-buttons{gap:.6rem}
  .hero-buttons .btn{width:100%;justify-content:center}
  .news .news-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .news-image{height:150px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .staff-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .contact-content{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .hero{padding:72px 0 64px}
  .hero-title{font-size:1.6rem}
  .hero-subtitle{font-size:.95rem}
  .section-header h2{font-size:1.45rem}
  .about-content{grid-template-columns:1fr}
  .news .news-grid{grid-template-columns:1fr}
  .news-image{height:180px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .footer-content{grid-template-columns:1fr}
}

@media (max-width: 400px){
  .container{padding:0 12px}
  .hero-title{font-size:1.45rem}
  .section-header h2{font-size:1.35rem}
  .gallery-grid{grid-template-columns:1fr}
}