/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fa;
    color:#222;
    overflow-x:hidden;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

/* ===========================
   CONTAINER
=========================== */

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ===========================
   HEADER
=========================== */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:75px;
    background:#0B3B91;
    color:#fff;
    z-index:999;
    box-shadow:0 4px 15px rgba(0,0,0,.15);
}

.header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:75px;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    width:55px;
}

.logo-text h2{
    font-size:22px;
}

.logo-text p{
    font-size:13px;
    opacity:.9;
}

.menu-btn{
    width:46px;
    height:46px;
    border:none;
    border-radius:10px;
    background:#fff;
    color:#0b3b91;
    cursor:pointer;
    font-size:20px;
    transition:.3s;
}

.menu-btn:hover{
    transform:scale(1.05);
}

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

.hero{
    margin-top:75px;
    position:relative;
}

.hero-slider{
    position:relative;
    height:600px;
    overflow:hidden;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .8s;
}

.slide.active{
    opacity:1;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-content{
    position:absolute;
    top:50%;
    left:10%;
    transform:translateY(-50%);
    color:#fff;
    max-width:550px;
}

.hero-content h1{
    font-size:20px;
    letter-spacing:3px;
}

.hero-content h2{
    font-size:48px;
    margin:10px 0;
}

.hero-content p{
    margin:20px 0;
    font-size:18px;
}

.btn{
    display:inline-block;
    padding:14px 28px;
    background:#155eef;
    color:#fff;
    border-radius:8px;
    transition:.3s;
}

.btn:hover{
    background:#0b3b91;
}

.slider-dot{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}

.slider-dot span{
    width:13px;
    height:13px;
    border-radius:50%;
    background:#fff;
    opacity:.4;
    cursor:pointer;
}

.slider-dot span.active{
    opacity:1;
}

/* ===========================
   SIDEBAR
=========================== */

.sidebar{
    position:fixed;
    top:0;
    right:-320px;
    width:320px;
    height:100%;
    background:#fff;
    z-index:1001;
    transition:.35s;
    overflow:auto;
    box-shadow:-5px 0 20px rgba(0,0,0,.2);
}

.sidebar.active{
    right:0;
}

.sidebar-header{
    background:#0b3b91;
    color:#fff;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sidebar-header button{
    border:none;
    background:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

.sidebar ul li{
    border-bottom:1px solid #eee;
}

.sidebar ul li a,
.drop-btn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:16px 22px;
    background:none;
    border:none;
    cursor:pointer;
    font-size:15px;
}

.drop-btn:hover,
.sidebar a:hover{
    background:#eef4ff;
}

.submenu{
    display:none;
    background:#f7f9fc;
}

.submenu li a{
    padding-left:40px;
}

.dropdown.active .submenu{
    display:block;
}

/* ===========================
   OVERLAY
=========================== */

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.3s;
    z-index:1000;
}

.overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

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

footer{
    background:#0b3b91;
    color:#fff;
    text-align:center;
    padding:30px;
    margin-top:60px;
}

/*================================
SAMBUTAN
================================*/

.welcome{

padding:80px 0;

background:#fff;

}

.welcome-grid{

display:grid;

grid-template-columns:350px 1fr;

gap:50px;

align-items:center;

}

.welcome-photo img{

width:100%;

border-radius:15px;

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.welcome-text h4{

color:#155EEF;

font-size:16px;

margin-bottom:10px;

letter-spacing:2px;

}

.welcome-text h2{

font-size:34px;

margin-bottom:20px;

color:#0B3B91;

}

.welcome-text p{

text-align:justify;

font-size:16px;

line-height:1.9;

margin-bottom:30px;

}

/*=============================
SAMBUTAN READ MORE
=============================*/

.welcome-message{

    max-height:170px;
    overflow:hidden;
    position:relative;
    transition:max-height .5s ease;

}

/* efek gradasi supaya tidak terlihat terpotong */
.welcome-message::after{

    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:70px;

    background:linear-gradient(
        rgba(255,255,255,0),
        rgba(255,255,255,1)
    );

}

.welcome-message.active{

    max-height:5000px;

}

.welcome-message.active::after{

    display:none;

}

.read-more{

    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:20px;
    color:#155EEF;
    font-weight:600;
    cursor:pointer;
    user-select:none;

}

.read-more i{

    transition:.3s;

}

.read-more.active i{

    transform:rotate(180deg);

}

/*==================================
SECTION TITLE
==================================*/

.section-title{

text-align:center;

margin-bottom:40px;

}

.section-title h2{

font-size:34px;

color:#0B3B91;

margin-bottom:10px;

}

.section-title p{

color:#666;

}

/*==================================
VIDEO
==================================*/

.video-section{

padding:80px 0;

background:#f5f7fa;

}

.video-wrapper{

position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

border-radius:15px;

box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.video-wrapper iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:none;

}

/*==================================
SOCIAL MEDIA
==================================*/

.social-media{

display:flex;

justify-content:center;

gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

.social-media a{

width:58px;

height:58px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:#fff;

transition:.3s;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}

.social-media a:hover{

transform:translateY(-8px);

}

.facebook{

background:#1877F2;

}

.instagram{

background:#E1306C;

}

.youtube{

background:#FF0000;

}

.tiktok{

background:#111;

}

.telegram{

background:#229ED9;

}

.whatsapp{

background:#25D366;

}

/*==================================
BERITA
==================================*/

.news{

padding:80px 0;

background:#ffffff;

}

.news-slider{

overflow:hidden;

}

.news-track{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.news-card{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

}

.news-card:hover{

transform:translateY(-10px);

}

.news-card img{

width:100%;

height:220px;

object-fit:cover;

}

.news-content{

padding:25px;

}

.news-date{

display:block;

color:#155EEF;

font-size:14px;

margin-bottom:15px;

}

.news-content h3{

font-size:22px;

margin-bottom:15px;

color:#0B3B91;

}

.news-content p{

font-size:15px;

color:#555;

line-height:1.7;

margin-bottom:20px;

}

.btn-news{

display:inline-block;

padding:10px 20px;

background:#155EEF;

color:#fff;

border-radius:8px;

transition:.3s;

}

.btn-news:hover{

background:#0B3B91;

}

/*=================================
PENGUMUMAN
=================================*/

.info-section{

padding:80px 0;

background:#f5f7fa;

}

.info-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}

.info-box{

background:#fff;

padding:30px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.info-list{

margin-top:20px;

}

.info-list li{

padding:18px 0;

border-bottom:1px solid #eee;

}

.info-list li:last-child{

border:none;

}

.info-date{

display:block;

font-size:13px;

color:#155EEF;

margin-bottom:6px;

font-weight:600;

}

.info-list a{

font-size:16px;

color:#333;

transition:.3s;

}

.info-list a:hover{

color:#155EEF;

padding-left:10px;

}

/*=================================
GURU & STAFF SLIDER
=================================*/

.teacher-section{
    padding:80px 0;
    background:#ffffff;
}

.teacher-slider-wrapper{
    position:relative;
    display:flex;
    align-items:center;
}

.teacher-slider{
    display:flex;
    gap:30px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:10px 60px;
    scroll-snap-type:x mandatory;
}

.teacher-slider::-webkit-scrollbar{
    display:none;
}

.teacher-card{
    min-width:280px;
    flex:0 0 280px;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
    transition:.3s;
    scroll-snap-align:start;
}

.teacher-card:hover{
    transform:translateY(-10px);
}

.teacher-card img{
    width:100%;
    height:320px;
    object-fit:cover;
}

.teacher-card h3{
    margin:20px 15px 10px;
    font-size:20px;
    color:#0B3B91;
}

.teacher-card p{
    margin-bottom:20px;
    color:#666;
    font-size:15px;
}

.center-btn{
    text-align:center;
    margin-top:40px;
}

.teacher-prev,
.teacher-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:#0B3B91;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    z-index:10;
    transition:.3s;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.teacher-prev{
    left:5px;
}

.teacher-next{
    right:5px;
}

.teacher-prev:hover,
.teacher-next:hover{
    background:#155EEF;
    transform:translateY(-50%) scale(1.08);
}

/*=================================
PARTNER
=================================*/

.partner-section{
    padding:80px 0;
    background:#f5f7fa;
    overflow:hidden;
}

.partner-slider{
    overflow:hidden;
}

.partner-track{
    display:flex;
    gap:40px;
    width:max-content;
    animation:partnerMove 30s linear infinite;
}

.partner-item{
    width:180px;
    height:100px;
    background:#fff;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    flex-shrink:0;
}

.partner-item img{
    max-width:120px;
    max-height:70px;
    object-fit:contain;
    transition:.3s;
}

.partner-item img:hover{
    transform:scale(1.08);
}

@keyframes partnerMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/*=================================
GALERI
=================================*/

.gallery-section{
    padding:80px 0;
    background:#ffffff;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.gallery-item{
    overflow:hidden;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.1);
}

.gallery-item img{
    width:100%;
    height:250px;
    object-fit:cover;
    transition:.4s;
}

.gallery-item:hover img{
    transform:scale(1.12);
}

/* ===========================
   ICON MENU SIDEBAR
=========================== */

.sidebar ul li a,
.drop-btn{

display:flex;
align-items:center;
justify-content:space-between;
gap:12px;

}

.sidebar ul li a i{

width:22px;
color:#0B3B91;
font-size:16px;

}

.drop-btn span{

display:flex;
align-items:center;
gap:12px;

}

.drop-btn span i{

width:22px;
color:#0B3B91;

}


/*====================================
PAGE HEADER
====================================*/

.page-header{

margin-top:75px;
padding:70px 0;
background:linear-gradient(135deg,#0B3B91,#155EEF);
color:white;
text-align:center;

}

.page-header h1{

font-size:42px;
margin-bottom:10px;

}

.page-header p{

font-size:15px;

}

.page-header a{

color:#fff;

}

.page-content{

padding:80px 0;
background:#fff;

}

.page-image{

width:100%;
max-height:450px;
object-fit:cover;
border-radius:15px;
margin-bottom:40px;

}

.page-image7{
    width:100%;
    max-width:1200px;
    display:block;
    margin:0 auto;
}

.page-image8{
    width:100%;
    max-width:700px;
    display:block;
    margin:0 auto;
}

.page-content h2{

margin:35px 0 15px;
color:#0B3B91;

}

.page-content p{

text-align:justify;
line-height:1.9;

}

.list-check{

margin-top:20px;

}

.list-check li{

padding:10px 0;
padding-left:28px;
position:relative;

}

.list-check li::before{

content:"✔";
position:absolute;
left:0;
color:#155EEF;
font-weight:bold;

}

.video-wrapper{
    position:relative;
    z-index:100;
}

.video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    z-index:101;
    pointer-events:auto;
}

/*=================================
BACK TO TOP
=================================*/

.back-to-top{

position:fixed;
right:25px;
bottom:25px;

width:50px;
height:50px;

border:none;
border-radius:50%;

background:#155EEF;
color:#fff;

font-size:20px;

cursor:pointer;

display:flex;
justify-content:center;
align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.25);

opacity:0;
visibility:hidden;

transition:.35s;

z-index:999;

}

.back-to-top.show{

opacity:1;
visibility:visible;

}

.back-to-top:hover{

background:#0B3B91;

transform:translateY(-5px);

}

/*=================================
LOKASI SEKOLAH
=================================*/

.map-section{

    padding:80px 0;
    background:#f5f7fa;

}

.map-wrapper{

    overflow:hidden;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.map-wrapper iframe{

    width:100%;
    height:450px;
    border:0;

}


/* =================================
   PROTEKSI GAMBAR
================================= */

img{
    -webkit-user-drag:none;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
}


/* =========================================
   SUB MENU BERTINGKAT - PERBAIKAN
========================================= */

/* Semua link di dalam submenu rata kiri */
.sidebar .submenu li a{
    justify-content:flex-start;
    gap:12px;
    padding:13px 22px 13px 40px;
    font-size:14px;
}

/* Ikon submenu */
.sidebar .submenu li a i{
    width:22px;
    min-width:22px;
    color:#0B3B91;
}

/* Dropdown yang berada di dalam submenu */
.sidebar .submenu .dropdown{
    position:relative;
}

/* Tombol dropdown tingkat 2 */
.sidebar .submenu .dropdown > .drop-btn{
    justify-content:space-between;
    padding:13px 22px 13px 40px;
    font-size:14px;
    color:#333;
}

/* Bagian nama + ikon */
.sidebar .submenu .dropdown > .drop-btn span{
    display:flex;
    align-items:center;
    gap:12px;
}

/* Ikon nama */
.sidebar .submenu .dropdown > .drop-btn span i{
    width:22px;
    color:#0B3B91;
}

/* Panah */
.sidebar .submenu .dropdown > .drop-btn > i{
    width:auto;
    color:#0B3B91;
    font-size:11px;
    transition:.3s;
}

/* Submenu tingkat 2 */
.sidebar .submenu .dropdown > .submenu{
    display:none;
    background:#eef4ff;
}

/* Saat dibuka */
.sidebar .submenu .dropdown.active > .submenu{
    display:block;
}

/* Isi submenu tingkat 2 */
.sidebar .submenu .dropdown > .submenu li a{
    justify-content:flex-start;
    padding:12px 20px 12px 60px;
    font-size:13px;
}

/* Ikon submenu tingkat 2 */
.sidebar .submenu .dropdown > .submenu li a i{
    width:20px;
    min-width:20px;
}

/* Hover */
.sidebar .submenu li a:hover{
    background:#e5efff;
    color:#0B3B91;
}

/* Panah berputar */
.sidebar .submenu .dropdown.active > .drop-btn > i{
    transform:rotate(180deg);
}


/* ===================================
   KONTAK
=================================== */

.contact-section{
    padding:80px 0;
    background:#fff;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.contact-card{
    display:flex;
    gap:20px;
    padding:30px;
    background:#f5f7fa;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.contact-icon{
    width:55px;
    height:55px;
    min-width:55px;
    border-radius:50%;
    background:#155EEF;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.contact-card h3{
    color:#0B3B91;
    margin-bottom:8px;
}

.contact-card p{
    color:#555;
    line-height:1.7;
}

.contact-link{
    display:inline-block;
    margin-top:8px;
    color:#155EEF;
    font-weight:600;
}


/* ===================================
   GOOGLE MAPS
=================================== */

.map-section{
    padding:80px 0;
    background:#f5f7fa;
}

.map-wrapper{
    overflow:hidden;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.map-wrapper iframe{
    display:block;
    width:100%;
    height:450px;
    border:0;
}


/* ===================================
   FORM KONTAK
=================================== */

.contact-form-section{
    padding:80px 0;
    background:#fff;
}

.contact-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
}

.contact-form-info h2{
    color:#0B3B91;
    margin-bottom:20px;
    font-size:32px;
}

.contact-form-info p{
    line-height:1.9;
    color:#555;
    margin-bottom:30px;
}

.contact-info-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-info-list div{
    display:flex;
    align-items:center;
    gap:15px;
    color:#444;
}

.contact-info-list i{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#eef4ff;
    color:#155EEF;
    display:flex;
    align-items:center;
    justify-content:center;
}


/* ===================================
   FORM
=================================== */

.contact-form{
    background:#f5f7fa;
    padding:30px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#333;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:13px 15px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    outline:none;
    background:#fff;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#155EEF;
    box-shadow:0 0 0 3px rgba(21,94,239,.1);
}

.form-group textarea{
    resize:vertical;
}


/* ===================================
   WHATSAPP
=================================== */

.contact-whatsapp{
    padding:60px 0;
    background:#f5f7fa;
}

.whatsapp-box{
    background:#0B3B91;
    color:#fff;
    padding:35px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.whatsapp-box h2{
    margin-bottom:8px;
}

.whatsapp-box p{
    opacity:.9;
}

.whatsapp-btn{
    background:#25D366;
    white-space:nowrap;
}

.whatsapp-btn:hover{
    background:#1ebe5d;
}











/* ==========================================
   HASIL PENDAFTARAN
========================================== */

.success-box{

    max-width:800px;

    margin:40px auto;

    padding:45px 35px;

    background:#ffffff;

    border-radius:18px;

    text-align:center;

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);

}


/* ICON CHECK */

.success-icon{

    width:64px;

    height:64px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#20b96b;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}


.success-box h2{

    margin-bottom:8px;

    color:#111827;

}


.success-text{

    color:#555;

    margin-bottom:25px;

}


/* ==========================================
   DATA PENDAFTAR
========================================== */

.registration-result{

    background:#f5f8fc;

    border-radius:12px;

    padding:25px;

    margin-bottom:20px;

}


.result-item{

    margin-bottom:20px;

}


.result-item:last-child{

    margin-bottom:0;

}


.result-item span{

    display:block;

    font-size:15px;

    color:#555;

    margin-bottom:6px;

}


.result-item strong{

    display:block;

    font-size:18px;

    color:#0b3b91;

}


/* ==========================================
   NOMOR PENDAFTARAN
========================================== */

.registration-number{

    display:inline-block;

    margin-top:8px;

    padding:14px 22px;

    border-radius:10px;

    background:#edf4ff;

    color:#0b3b91;

    font-size:25px;

    font-weight:700;

    letter-spacing:1px;

}


/* ==========================================
   PERINGATAN
========================================== */

.save-warning{

    font-weight:600;

    color:#333;

    margin:20px 0;

}


.save-warning i{

    color:#155eef;

    margin-right:5px;

}


/* ==========================================
   TOMBOL CETAK
========================================== */

.btn-cetak{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:13px 22px;

    margin:5px;

    border:none;

    border-radius:8px;

    background:#155eef;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.btn-cetak:hover{

    background:#0b3b91;

    transform:translateY(-1px);

}


/* ==========================================
   TOMBOL KEMBALI
========================================== */

.btn-kembali{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:13px 22px;

    margin:5px;

    border-radius:8px;

    background:#e9eef5;

    color:#333;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}


.btn-kembali:hover{

    background:#dce3ec;

}


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

@media(max-width:600px){

    .success-box{

        margin:20px 15px;

        padding:30px 20px;

    }


    .registration-number{

        font-size:21px;

        padding:12px 16px;

    }


    .btn-cetak,
    .btn-kembali{

        width:100%;

        margin:6px 0;

    }

}