/* ===========================================================
   WEBSITE SEKOLAH — Public Stylesheet
   Redesigned for a cleaner, warmer, more modern UI/UX
=========================================================== */
:root{
    --navy-900:#0b1f4d;
    --navy-800:#0f2a63;
    --navy-700:#15347a;
    --navy-600:#1c4094;
    --gold-500:#f5a623;
    --gold-600:#e0921a;
    --gold-100:#fff4e0;
    --gray-50:#f7f8fc;
    --gray-100:#eef1f8;
    --gray-200:#e2e6f2;
    --gray-600:#5b6478;
    --text-900:#161b2e;
    --radius-lg:18px;
    --radius-md:12px;
    --radius-sm:8px;
    --shadow-sm:0 2px 10px rgba(11,31,77,.06);
    --shadow-md:0 10px 30px rgba(11,31,77,.10);
    --shadow-lg:0 20px 45px rgba(11,31,77,.16);
    --ease:cubic-bezier(.22,.9,.32,1);
}

*{ scroll-behavior:smooth; }

body{
    font-family:'Plus Jakarta Sans','Poppins','Segoe UI',Arial,sans-serif;
    color:var(--text-900);
    background:#fff;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{ font-family:'Poppins','Plus Jakarta Sans',sans-serif; }

a{ text-decoration:none; transition:color .2s var(--ease); }

::selection{ background:var(--gold-500); color:var(--navy-900); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--gray-100); }
::-webkit-scrollbar-thumb{ background:var(--navy-700); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--navy-900); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--gold-500);
    outline-offset:2px;
    border-radius:4px;
}

/* Scroll-reveal utility (progressive enhancement via JS) */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===== Topbar ===== */
.topbar{
    background:var(--navy-900);
    color:#cfd8f0;
    font-size:.82rem;
    letter-spacing:.2px;
}
.topbar-welcome{ display:flex; align-items:center; gap:.4rem; }
.topbar a{ color:#cfd8f0; }
.topbar .social a{
    color:#cfd8f0;
    margin-left:14px;
    display:inline-flex;
    width:26px; height:26px;
    align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.topbar .social a:hover{
    background:var(--gold-500);
    color:var(--navy-900);
    transform:translateY(-2px);
}

/* ===== Navbar ===== */
.navbar-school{
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(10px);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    box-shadow:var(--shadow-sm);
    padding:.65rem 0;
    transition:box-shadow .25s var(--ease), padding .25s var(--ease);
}
.navbar-school.scrolled{
    box-shadow:var(--shadow-md);
    padding:.4rem 0;
}
.navbar-school .navbar-brand img{
    box-shadow:0 0 0 3px var(--gray-100);
    transition:box-shadow .25s var(--ease);
}
.navbar-school .navbar-brand:hover img{ box-shadow:0 0 0 3px var(--gold-100); }
.navbar-school .school-name{
    font-weight:800;
    color:var(--navy-900);
    font-size:1.15rem;
    line-height:1.15;
    letter-spacing:.2px;
}
.navbar-school .school-tagline{
    font-size:.75rem;
    color:var(--gray-600);
}
.navbar-school .nav-link{
    position:relative;
    color:var(--text-900);
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.2px;
    padding:.55rem .9rem !important;
    transition:color .2s var(--ease);
}
.navbar-school .nav-link::after{
    content:"";
    position:absolute;
    left:.9rem; right:.9rem; bottom:.15rem;
    height:2px;
    background:var(--gold-500);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s var(--ease);
}
.navbar-school .nav-link.active,
.navbar-school .nav-link:hover{
    color:var(--navy-800);
}
.navbar-school .nav-link.active::after,
.navbar-school .nav-link:hover::after{ transform:scaleX(1); }
.navbar-school .dropdown-menu{
    border:none;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    padding:.5rem;
    margin-top:.5rem;
}
.navbar-school .dropdown-item{
    border-radius:var(--radius-sm);
    padding:.55rem .8rem;
    font-size:.88rem;
    font-weight:500;
    transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.navbar-school .dropdown-item:hover{
    background:var(--gold-100);
    color:var(--navy-900);
    padding-left:1.05rem;
}

/* ===== Hero / Slider ===== */
.hero-slide{
    position:relative;
    background-size:cover;
    background-position:center;
    min-height:560px;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero-slide::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(6,17,44,.92) 22%, rgba(11,31,77,.55) 60%, rgba(11,31,77,.25) 100%);
}
.hero-content{ position:relative; z-index:2; color:#fff; }
.hero-content .eyebrow{
    font-size:1rem; font-weight:600;
    color:var(--gold-500);
    letter-spacing:.5px;
    display:inline-flex; align-items:center; gap:.4rem;
}
.hero-content h1{
    font-weight:800;
    font-size:2.9rem;
    line-height:1.15;
    margin-top:.4rem;
    text-shadow:0 2px 20px rgba(0,0,0,.2);
}
.hero-content p{ color:#dfe5f7; font-size:1.02rem; max-width:520px; }
.hero-photo img{
    border-radius:var(--radius-lg);
    border:6px solid rgba(255,255,255,.9);
    object-fit:cover;
    box-shadow:var(--shadow-lg);
}
.hero-dots span{
    width:9px;height:9px;border-radius:50%;
    background:rgba(255,255,255,.5);
    display:inline-block;margin:0 4px;
    transition:all .25s var(--ease);
    cursor:pointer;
}
.hero-dots span.active{ background:var(--gold-500); width:26px; border-radius:6px; }
.hero-arrow{
    width:44px;height:44px;border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,.18);
    color:var(--navy-900);
    transition:transform .2s var(--ease), background .2s var(--ease);
}
.carousel-control-prev:hover .hero-arrow,
.carousel-control-next:hover .hero-arrow{
    background:var(--gold-500);
    transform:scale(1.08);
}

/* ===== Buttons ===== */
.btn{ border-radius:var(--radius-sm); font-weight:700; letter-spacing:.2px; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.btn-gold{
    background:var(--gold-500); color:var(--navy-900); border:none;
}
.btn-gold:hover{ background:var(--gold-600); color:var(--navy-900); transform:translateY(-2px); box-shadow:0 10px 22px rgba(245,166,35,.35); }
.btn-navy{
    background:var(--navy-900); color:#fff; border:none;
}
.btn-navy:hover{ background:var(--navy-800); color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(11,31,77,.3); }

/* ===== Quick links strip ===== */
.quicklinks{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    margin-top:-52px;
    position:relative;
    z-index:5;
}
.quicklink-item{
    padding:1.5rem 1.1rem;
    text-align:left;
    border-radius:var(--radius-md);
    transition:background .22s var(--ease), transform .22s var(--ease);
    cursor:default;
}
.quicklink-item:hover{
    background:var(--gray-50);
    transform:translateY(-4px);
}
.quicklink-item .icon-badge{
    width:48px;height:48px;
    border-radius:13px;
    background:var(--gray-100);
    color:var(--navy-800);
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;
    margin-bottom:.7rem;
    transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.quicklink-item:hover .icon-badge{
    background:var(--navy-900);
    color:var(--gold-500);
    transform:scale(1.08) rotate(-4deg);
}
.quicklink-item h6{
    font-weight:800;
    font-size:.82rem;
    letter-spacing:.3px;
    color:var(--navy-900);
    margin-bottom:.25rem;
}
.quicklink-item p{
    font-size:.78rem;
    color:var(--gray-600);
    margin:0;
}

/* ===== Section headings ===== */
.section-title{
    font-weight:800;
    font-size:.95rem;
    letter-spacing:.5px;
    color:var(--navy-900);
    text-transform:uppercase;
    position:relative;
    padding-left:14px;
}
.section-title::before{
    content:"";
    position:absolute; left:0; top:2px; bottom:2px;
    width:4px; border-radius:4px;
    background:var(--gold-500);
}
.section-link{
    font-size:.85rem;
    font-weight:700;
    color:var(--navy-800);
    display:inline-flex; align-items:center; gap:.35rem;
    transition:gap .2s var(--ease), color .2s var(--ease);
}
.section-link:hover{ color:var(--gold-600); gap:.55rem; }

/* ===== Cards ===== */
.card-item{
    background:#fff;
    border:1px solid var(--gray-100);
    border-radius:var(--radius-md);
    overflow:hidden;
    height:100%;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card-item:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:transparent;
}
.card-item img{
    width:100%;height:150px;object-fit:cover;
    transition:transform .4s var(--ease);
}
.card-item .foto-guru{
    width:100px !important;
    height:100px !important;
    object-fit:cover;
}
.card-item:hover img{ transform:scale(1.06); }
.badge-kategori{
    background:var(--navy-800);
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.3px;
    padding:.32rem .6rem;
    border-radius:6px;
}
.card-item h6{
    font-weight:700;
    font-size:.92rem;
    color:var(--text-900);
    transition:color .2s var(--ease);
}
.card-item:hover h6{ color:var(--navy-800); }
.card-item .meta{
    font-size:.76rem;
    color:var(--gray-600);
}

.promo-card{
    background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
    color:#fff;
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.promo-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.promo-card img{ width:100%; height:170px; object-fit:cover; transition:transform .4s var(--ease); }
.promo-card:hover img{ transform:scale(1.05); }
.promo-card .badge-tahun{
    background:var(--gold-500);
    color:var(--navy-900);
    font-weight:800;
    font-size:.7rem;
    padding:.32rem .65rem;
    border-radius:6px;
}

.pengumuman-item{
    display:flex; gap:.85rem;
    padding:.95rem .5rem;
    border-bottom:1px solid var(--gray-100);
    border-radius:var(--radius-sm);
    transition:background .2s var(--ease);
}
.pengumuman-item:hover{ background:var(--gray-50); }
.pengumuman-item:last-child{ border-bottom:none; }
.pengumuman-item .icon-bell{
    width:40px;height:40px;flex:0 0 40px;
    background:var(--gray-100);
    color:var(--navy-800);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s var(--ease), color .2s var(--ease);
}
.pengumuman-item:hover .icon-bell{ background:var(--navy-900); color:var(--gold-500); }
.pengumuman-item h6{ font-size:.86rem; font-weight:700; margin-bottom:.15rem; }
.pengumuman-item .meta{ font-size:.75rem; color:var(--gray-600); }

/* ===== Footer ===== */
.footer-school{
    background:linear-gradient(180deg,var(--navy-900),#081739);
    color:#c8d1ec;
    font-size:.88rem;
}
.footer-school h5, .footer-school h6{ letter-spacing:.3px; }
.footer-school a{
    color:#c8d1ec;
    transition:color .2s var(--ease), padding-left .2s var(--ease);
    display:inline-block;
}
.footer-school a:hover{ color:var(--gold-500); padding-left:4px; }
.footer-school .footer-bottom{
    background:#081739;
    font-size:.78rem;
    color:#9fabd2;
    border-top:1px solid rgba(255,255,255,.06);
}
.btn-scrolltop{
    width:42px;height:42px;border-radius:50%;
    background:var(--gold-500); color:var(--navy-900);
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s var(--ease), background .2s var(--ease);
}
.btn-scrolltop:hover{ background:var(--gold-600); color:var(--navy-900); transform:translateY(-3px); }

/* ===== Inner pages ===== */
.page-header{
    position:relative;
    background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
    color:#fff;
    padding:3.2rem 0;
    overflow:hidden;
}
.page-header::after{
    content:"";
    position:absolute; right:-60px; top:-60px;
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(245,166,35,.18), transparent 70%);
}
.page-header h1{ font-weight:800; font-size:1.9rem; position:relative; z-index:1; }
.breadcrumb-custom{ position:relative; z-index:1; margin-top:.4rem; font-size:.88rem; }
.breadcrumb-custom a{ color:#cfd8f0; transition:color .2s var(--ease); }
.breadcrumb-custom a:hover{ color:var(--gold-500); }
.breadcrumb-custom span{ color:#fff; font-weight:600; }

.content-block{
    background:#fff;
    border:1px solid var(--gray-100);
    border-radius:var(--radius-md);
    padding:1.7rem;
    box-shadow:var(--shadow-sm);
}

/* Forms */
.form-control, .form-select{
    border-radius:var(--radius-sm);
    border:1px solid var(--gray-200);
    padding:.65rem .9rem;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control:focus, .form-select:focus{
    border-color:var(--navy-600);
    box-shadow:0 0 0 .2rem rgba(21,52,122,.12);
}
.form-label{ font-weight:600; font-size:.88rem; color:var(--navy-900); }

/* Pagination */
.pagination .page-link{
    border:none; color:var(--navy-800); font-weight:600;
    margin:0 3px; border-radius:var(--radius-sm) !important;
    transition:background .2s var(--ease), color .2s var(--ease);
}
.pagination .page-item.active .page-link{
    background:var(--navy-900); color:#fff;
}
.pagination .page-link:hover{ background:var(--gray-100); color:var(--navy-900); }

@media(max-width:991px){
    .navbar-collapse{
        margin-top:.75rem;
        border-top:1px solid var(--gray-100);
        padding-top:.5rem;
    }
    .navbar-school .nav-link::after{ display:none; }
}

@media(max-width:767px){
    .hero-slide{ min-height:auto; padding:3rem 0 2.2rem; }
    .hero-content h1{ font-size:1.9rem; }
    .hero-content p{ max-width:100%; }
    .quicklinks{ margin-top:1.2rem; }
    .page-header{ padding:2.2rem 0; }
}