/*body*/
        body{
            background:#f8fafc;
        }

        body{
                background:#f8fafc;
                padding-top:76px;
                }
/*carousel*/
        .carousel img{
            height:400px;
            width:100%;
            object-fit:cover;
        }

        .carousel-caption{
            background:rgba(0,0,0,0.4);
            padding:20px;
            border-radius:10px;
        }

        @media(max-width:768px){

            .carousel img{
                height:250px;
            }

            .carousel-caption h1{
                font-size:22px;
            }

            .carousel-caption p{
                font-size:14px;
            }

        }

/* Judul Section */

        /* Sambutan */
        .sambutan-section{
            background:#eef5ff;
            padding:80px 0;
        }

        /* Berita */
        .berita-section{
            background:#f2fbf4;
            padding:80px 0;
        }

        /* Guru */
        .guru-section{
            background:#fff8eb;
            padding:80px 0;
        }

        /* Galeri */
        .galeri-section{
            background:#faf0ff;
            padding:80px 0;
        }

        /* Kontak */
        .kontak-section{
            background:#f8fafc;
            padding:80px 0;
        }

        /* Hover Card */
        .hover-card{
            transition:.3s;
            border-radius:20px;
        }

        .hover-card:hover{
            transform:translateY(-8px);
            box-shadow:0 15px 35px rgba(0,0,0,.15)!important;
        }

        .sambutan-section,
        .berita-section,
        .guru-section,
        .galeri-section{
            position:relative;
            overflow:hidden;
        }

        .sambutan-section::before,
        .berita-section::before,
        .guru-section::before,
        .galeri-section::before{
            content:"";
            position:absolute;
            width:300px;
            height:300px;
            border-radius:50%;
            background:rgba(255,255,255,0.2);
            top:-100px;
            right:-100px;
        }

        .sambutan-section::after,
        .berita-section::after,
        .guru-section::after,
        .galeri-section::after{
            content:"";
            position:absolute;
            width:200px;
            height:200px;
            border-radius:50%;
            background:rgba(255,255,255,0.15);
            bottom:-80px;
            left:-80px;
        }

        /* Guru */
        .guru-foto{
            width:120px;
            height:120px;
            object-fit:cover;
            border-radius:50%;
            border:4px solid #f8c146;
            margin:20px auto;
        }

        /* Card guru */
        .guru-card{
            border-radius:20px;
        }

        /* Card berita */
        .berita-card{
            border-radius:20px;
            overflow:hidden;
        }

        /* Card galeri */
        .galeri-card{
            border-radius:20px;
            overflow:hidden;
        }

        .card{
        border-radius:20px;
        }

        .card-img-top{
            transition:0.4s;
        }

        .hover-card:hover .card-img-top{
            transform:scale(1.05);
        }

        .section-title{
            font-weight:700;
            text-align:center;
            margin-bottom:50px;
            position:relative;
            letter-spacing:1px;
        }

        .section-title::after{
            content:'';
            width:80px;
            height:5px;
            background:currentColor;
            display:block;
            margin:12px auto 0;
            border-radius:50px;
        }

        .navbar{
        z-index:1030;
        }

        .navbar .nav-link{
        display:flex;
        align-items:center;
        gap:6px;
        }

/*running text*/
        .running-text{

        background:#ffc107;

        color:#000;

        padding:10px 0;

        overflow:hidden;

        white-space:nowrap;

        font-weight:600;

        }
        .running-text span{

        display:inline-block;

        padding-left:100%;

        animation:jalan 25s linear infinite;

        }

        @keyframes jalan{
            from{
                transform:translateX(0);
            }
            to{
                transform:translateX(-100%);
            }
        }

        .modal-content{
            border-radius:20px;
            overflow:hidden;
        }

        .modal-body p{
            line-height:1.8;
        }

/*hero*/
        .hero-overlay{
        position:absolute;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.55);
        display:flex;
        align-items:center;
        justify-content:center;
        }

        .hero h1{
            font-size:58px;
            font-weight:bold;
        }

        .hero{
        min-height:calc(100vh - 76px);
        position:relative;
        }

        @media(max-width:768px){

        .hero{
            height:70vh;
        }

        .hero h1{
            font-size:34px;
        }

        .hero p{
            font-size:17px;
        }

        }

/*footer*/
        .footer{

        background:#0d6efd;

        }

        .footer a{

            color:white;

            text-decoration:none;

            transition:.3s;

        }

        .footer a:hover{

            color:#ffc107;

            padding-left:5px;

        }

        .social{

            display:inline-flex;

            width:42px;

            height:42px;

            background:white;

            color:#0d6efd !important;

            border-radius:50%;

            align-items:center;

            justify-content:center;

            margin-right:10px;

            font-size:20px;

            transition:.3s;

        }

        .social:hover{

            background:#ffc107;

            transform:translateY(-5px);

        }

        #btnTop{

        position:fixed;

        bottom:30px;

        right:30px;

        width:55px;

        height:55px;

        border:none;

        border-radius:50%;

        background:#0d6efd;

        color:white;

        font-size:24px;

        display:none;

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

        transition:.3s;

        z-index:9999;

        }

        #btnTop:hover{

            background:#ffc107;

            color:black;

            transform:translateY(-5px);

        }

        html, body{
        overflow-x: hidden;
        }

        html{
        scroll-behavior:smooth;
        }

        /* ==========================
   Navbar Modern
========================== */

        .navbar .nav-link{
            position: relative;
            color: #fff !important;
            font-weight: 500;
            transition: .3s;
            padding: 10px 15px;
        }

        .navbar .nav-link:hover{
            color: #ffc107 !important;
        }

        .navbar-dark .navbar-nav .nav-link.active{
        color:#ffc107 !important;
        font-weight:700;
        }

        .navbar-dark .navbar-nav .nav-link.active i{
            color:#ffc107 !important;
        }
        .navbar .nav-link::after{
            content:'';
            position:absolute;
            left:50%;
            bottom:0;
            width:0;
            height:3px;
            background:#ffc107;
            transition:.3s;
            transform:translateX(-50%);
            border-radius:50px;
        }

        .navbar .nav-link:hover::after,
        .navbar .nav-link.active::after{
            width:70%;
        }

        .nav-item.dropdown.show .dropdown-icon{
            transform:rotate(180deg);
        }

/* =============================
   Kepala Sekolah
============================= */

        .kepsek-foto{
            width:220px;
            height:280px;
            object-fit:cover;
            border-radius:18px;
            border:5px solid #fff;
            box-shadow:0 10px 25px rgba(0,0,0,.15);
            transition:.3s;
        }

        .kepsek-foto:hover{
            transform:translateY(-5px);
        }

        .kepsek-info{
            width:220px;
            margin:15px auto 0;
            background:linear-gradient(135deg,#0d6efd,#4f8ef7);
            color:#fff;
            padding:12px;
            border-radius:15px;
            box-shadow:0 8px 20px rgba(13,110,253,.25);
        }

        .kepsek-info h5{
            margin:0;
            font-weight:700;
            font-size:18px;
        }

        .kepsek-info p{
            margin:4px 0 0;
            font-size:14px;
            opacity:.95;
        }

/* Dropdown Navbar */
        .dropdown-menu{
            border-radius:18px;
            padding:10px 0;
        }

        .dropdown-item{
            transition:.25s;
            border-radius:10px;
            margin:2px 8px;
        }

        .dropdown-item:hover{
            background:#0d6efd;
            color:#fff;
            transform:translateX(5px);
        }

        .dropdown-item i{
            width:20px;
            text-align:center;
        }

        /* Hilangkan panah bawaan Bootstrap */
        .dropdown-toggle::after{
            display:none;
        }

        .dropdown-icon{
        transition:.3s;
        }

        /* ===========================
   PAGE CONTENT
=========================== */

        .page-title{
            font-size:36px;
            font-weight:700;
            color:#0d6efd;
        }

        .page-subtitle{
            color:#6c757d;
            margin-bottom:40px;
        }

        .page-card{

            background:#fff;

            border-radius:20px;

            padding:40px;

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

        }

        .page-card p{

            text-align:justify;

            line-height:2;

            font-size:17px;

        }

        .page-card p::first-letter{

            font-size:55px;

            float:left;

            line-height:45px;

            padding-right:8px;

            color:#0d6efd;

            font-weight:bold;

        }

        .foto-sekolah{

            border-radius:20px;

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

        }

        .breadcrumb{

            background:none;

            padding:0;

        }

        .breadcrumb-item a{

            text-decoration:none;

        }

        .page-card img{

            transition:.4s;

        }

        .page-card img:hover{

            transform:scale(1.02);

        }

        /* ===========================
   VISI & MISI
=========================== */

        .icon-box{

            width:60px;

            height:60px;

            border-radius:50%;

            background:#e9f2ff;

            display:flex;

            align-items:center;

            justify-content:center;

            font-size:28px;

            color:#0d6efd;

        }

        .visi-text{

            border-left:5px solid #0d6efd;

            padding-left:20px;

            font-size:20px;

            font-style:italic;

            color:#444;

        }

        .misi-item{

            background:#f8f9fa;

            border-radius:12px;

            padding:15px 20px;

            margin-bottom:15px;

            transition:.3s;

            font-size:17px;

        }

        .misi-item:hover{

            background:#eaf4ff;

            transform:translateX(8px);

        }

        /* ===========================
   STRUKTUR ORGANISASI
=========================== */

        .struktur-img{
        width:100%;
        max-width:650px;   /* ukuran maksimal */
        height:auto;
        border-radius:20px;
        box-shadow:0 12px 30px rgba(0,0,0,.15);
        transition:.35s;
        cursor:pointer;
        }

        .struktur-img:hover{
            transform:scale(1.02);
        }

        /* ===========================
   MODAL STRUKTUR
=========================== */

        #modalStruktur{
            z-index: 99999;
        }

        #modalStruktur .modal-dialog{
            max-width:100%;
            margin:0;
        }

        #modalStruktur .modal-content{
            background:rgba(0,0,0,.9);
            border:none;
            border-radius:0;
        }

        #modalStruktur .modal-body{
            display:flex;
            justify-content:center;
            align-items:center;
            min-height:100vh;
            padding:30px;
        }

        #modalStruktur img{
        width:auto;
        max-width:100%;
        max-height:95vh;
        object-fit:contain;
        transition:.3s;
        animation: zoomIn .3s ease;
        }

        @keyframes zoomIn{

            from{
                transform:scale(.9);
                opacity:0;
            }

            to{
                transform:scale(1);
                opacity:1;
            }

        }
            .btn-close-custom{

            position:absolute;

            top:20px;

            right:25px;

            width:50px;

            height:50px;

            border-radius:50%;

            border:none;

            background:rgba(255,255,255,.25);

            color:#fff;

            font-size:30px;

            z-index:100000;

            transition:.3s;

        }

        .btn-close-custom:hover{

            background:#fff;

            color:#000;

        }

        /* ===========================
   GURU
=========================== */

        .guru-card{

            background:#fff;

            border-radius:20px;

            padding:35px 25px;

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

            transition:.35s;

            height:100%;

        }

        .guru-card:hover{

            transform:translateY(-8px);

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

        }

        .guru-photo{

            width:170px;

            height:170px;

            object-fit:cover;

            border-radius:50%;

            border:5px solid #0d6efd;

            margin-bottom:20px;

            transition:.35s;

        }

        .guru-card:hover .guru-photo{

            transform:scale(1.05);

        }

        .guru-name{

            font-size:22px;

            font-weight:700;

            color:#0d6efd;

            margin-bottom:10px;

        }

        .guru-jabatan{

            display:inline-block;

            background:#eaf3ff;

            color:#0d6efd;

            padding:8px 20px;

            border-radius:30px;

            font-size:14px;

            font-weight:600;

        }

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

        .pengumuman-card{

            background:#fff;

            border-radius:20px;

            padding:30px;

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

            transition:.35s;

        }

        .pengumuman-card:hover{

            transform:translateY(-8px);

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

        }

        .tanggal-badge{

            display:inline-block;

            background:#eaf3ff;

            color:#0d6efd;

            padding:8px 18px;

            border-radius:30px;

            font-size:14px;

            margin-bottom:20px;

        }

        .pengumuman-title{

            color:#0d6efd;

            font-size:24px;

            font-weight:700;

            margin-bottom:20px;

        }

        .pengumuman-text{

            color:#666;

            text-align:justify;

            line-height:1.8;

        }

        .pengumuman-title{

        color:#0d6efd;

        font-size:24px;

        font-weight:700;

        min-height:70px;

        }

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

        .galeri-card{

            background:#fff;

            border-radius:18px;

            overflow:hidden;

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

            transition:.3s;

            height:100%;

        }

        .galeri-card:hover{

            transform:translateY(-6px);

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

        }

        .galeri-img{

            width:100%;

            height:250px;

            object-fit:cover;

            cursor:pointer;

            transition:.35s;

        }

        .galeri-card:hover .galeri-img{

            transform:scale(1.06);

        }

        .galeri-body{

            padding:18px;

        }

        .galeri-body h5{

            color:#0d6efd;

            font-weight:700;

            margin-bottom:8px;

        }

        .galeri-body small{

            color:#777;

        }

        /* ===========================
   DETAIL BERITA & PENGUMUMAN
=========================== */

        .detail-card{

            background:#fff;

            border-radius:20px;

            padding:35px;

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

        }

        .detail-date{

            display:inline-block;

            background:#eaf3ff;

            color:#0d6efd;

            padding:8px 18px;

            border-radius:30px;

            font-weight:600;

            margin-bottom:20px;

        }

        .detail-title{

            color:#0d6efd;

            font-size:36px;

            font-weight:700;

            margin-bottom:30px;

            line-height:1.4;

        }

        .detail-image{

            width:100%;

            max-height:500px;

            object-fit:cover;

            border-radius:15px;

            margin-bottom:35px;

        }

        .detail-content{

            color:#555;

            text-align:justify;

            line-height:2;

            font-size:17px;

        }

            @media(max-width:768px){

        .detail-card{

            padding:20px;

        }

        .detail-title{

            font-size:28px;

        }

        .detail-content{

            font-size:16px;

            line-height:1.8;

        }

        }

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

        .kontak-card{

            background:#fff;

            border-radius:20px;

            padding:30px;

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

            height:100%;

        }

        .kontak-item{

            display:flex;

            align-items:flex-start;

            gap:18px;

            margin-bottom:30px;

        }

        .kontak-item i{

            font-size:28px;

            color:#0d6efd;

            width:40px;

            text-align:center;

        }

        .kontak-item strong{

            color:#0d6efd;

        }

       /* ==========================
   AUTO SLIDER
========================== */

        .slider-wrapper{
            overflow:hidden;
            width:100%;
            position:relative;
        }

        .slider-track{
            display:flex;
            gap:24px;
            width:max-content;
        }

        .slider-item{
            flex:0 0 auto;
        }

        /* Desktop */
        .slider-3 .slider-item{
            width:380px;
        }

        /* Tablet */
        @media(max-width:992px){

        .slider-3 .slider-item{
            width:320px;
        }

        }

        /* HP */
        @media(max-width:576px){

        .slider-3 .slider-item{
            width:280px;
        }

        }