/* =========================================================
   RESPONSIVE.CSS - SMK SWASTA MARISI MEDAN
   PART 1 : HEADER & MENU
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    /* Mencegah halaman melebar ke samping */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* CONTAINER */
    .container {
        width: 94%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* HEADER */
    header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 9999;
    }

    /* NAVBAR */
    .navbar {
        height: auto;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding: 12px 0 0;
    }

    /* LOGO / JUDUL SEKOLAH */
    .logo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }

    .logo img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
    }

    .logo-text h2 {
        font-size: 18px;
        line-height: 1.3;
        margin: 0;
        text-align: left;
    }

    /* MENU */
    .menu {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin: 0;
        padding: 8px 0 0;
        align-items: stretch;
    }

    .menu li {
        width: 100%;
        margin: 0;
    }

    .menu li a {
        width: 100%;
        min-height: 48px;
        padding: 10px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 13px;
        line-height: 1.2;
    }

    /* GARIS BAWAH HOVER */
    .menu li a::after {
        height: 2px;
    }

   /* ==============================
   DROPDOWN RESPONSIVE
============================== */

.dropdown-content{
    position:relative;
    top:auto;
    left:auto;

    width:100%;
    min-width:0;

    display:none;

    margin:0;
    padding:0;

    list-style:none;

    background:#f8f9fa;

    box-shadow:none;

    border-radius:0;

    z-index:1;
}

/* Dropdown muncul dan mendorong menu di bawah */
.dropdown:hover > .dropdown-content{
    display:block;
}

.dropdown-content li{
    width:100%;
    margin:0;
    padding:0;
    border-bottom:1px solid #e5e5e5;
}

.dropdown-content li:last-child{
    border-bottom:none;
}

.dropdown-content li a{
    display:block;

    width:100%;

    padding:13px 10px;

    box-sizing:border-box;

    font-size:13px;

    line-height:1.4;

    text-align:center;

    color:#333;

    text-decoration:none;
}

.dropdown-content li a:hover{
    background:#0d6efd;
    color:#fff;
}
}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 576px) {

    .container {
        width: 94%;
    }

    /* HEADER */
    header {
        width: 100%;
    }

    /* NAVBAR */
    .navbar {
        padding-top: 10px;
    }

    /* LOGO */
    .logo {
        padding-bottom: 10px;
    }

    .logo img {
        width: 42px;
        height: 42px;
        margin-right: 8px;
    }

    .logo-text h2 {
        font-size: 18px;
        line-height: 1.25;
    }

    /* MENU 3 KOLOM */
    .menu {
        grid-template-columns: repeat(3, 1fr);
        padding-top: 6px;
    }

    .menu li a {
        min-height: 46px;
        padding: 8px 3px;
        font-size: 11px;
        font-weight: 600;
    }

    .dropdown i {
        font-size: 8px;
        margin-left: 3px;
    }

    /* DROPDOWN */
    .dropdown-content {
        min-width: 160px;
    }

    .dropdown-content li a {
        font-size: 12px;
        padding: 11px 13px;
    }

    .about-image {
        display: none;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   HP KECIL
   ========================================================= */

@media (max-width: 430px) {

    .container {
        width: 94%;
    }

    .logo img {
        width: 38px;
        height: 38px;
    }

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

    .menu li a {
        min-height: 44px;
        font-size: 10px;
        padding: 7px 2px;
    }

}


/* =========================================================
   HP SANGAT KECIL
   ========================================================= */

@media (max-width: 375px) {

    .logo img {
        width: 35px;
        height: 35px;
    }

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

    .menu li a {
        font-size: 9px;
    }

}

/* =========================================================
   PART 2 : HERO, SECTION & CARD
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

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

    .hero {
        height: 380px;
        min-height: 380px;
        background-position: center;
    }

    .hero-content {
        width: 100%;
        max-width: 700px;
        padding: 0 20px;
    }

    .hero-content h1 {
        font-size: 34px;
        line-height: 1.3;
    }

    .hero-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-subtitle {
        font-size: 13px;
        padding: 8px 18px;
    }


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

    .hero-button {
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn-primary,
    .btn-outline {
        padding: 12px 25px;
        font-size: 14px;
    }


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

    .section-title {
        margin-bottom: 35px;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .section-title p {
        font-size: 14px;
    }


    /* =========================
       STATISTIK
    ========================= */

    .statistik {
        padding: 50px 0;
    }

    .statistik-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .stat-card {
        max-width: none;
        width: 100%;
        padding: 25px 15px;
    }

    .stat-card i {
        font-size: 38px;
    }

    .stat-card h3 {
        font-size: 30px;
    }


    /* =========================
       ABOUT
    ========================= */

    .about {
        padding: 55px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-image {
        width: 100%;
        text-align: center;
    }

    .about-image img {
        width: 100%;
        max-width: 650px;
    }

    .about-content {
        text-align: center;
    }

    .about-content h2 {
        font-size: 32px;
    }

    .about-content p {
        font-size: 15px;
        line-height: 1.8;
        text-align: justify;
    }

    .about-slider {
        height: 350px;
    }


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

    .galeri {
        padding: 55px 0;
    }

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .galeri-item {
        height: 210px;
    }


    /* =========================
       GALLERY HALAMAN
    ========================= */

    .gallery-item img {
        height: 220px;
    }


    /* =========================
       DATA POKOK SEKOLAH
    ========================= */

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .info-card {
        width: 100%;
    }


    /* =========================
       PROGRAM KEAHLIAN
    ========================= */

    .major-section {
        padding: 60px 0;
    }

    .major-section h2 {
        font-size: 34px;
    }

    .major-box {
        padding: 28px;
    }


    /* =========================
       FASILITAS
    ========================= */

    .facility-section {
        padding: 60px 0;
    }

    .facility-section h2 {
        font-size: 34px;
    }

    .facility-card img {
        height: 220px;
    }


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

    .guru-section {
        padding: 60px 0;
    }

    .guru-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .guru-card {
        padding: 25px 15px;
    }

    .guru-foto {
        width: 110px;
        height: 110px;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 576px) {

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

    .hero {
        height: 420px;
        min-height: 420px;
        background-position: center;
    }

    .hero-content {
        padding: 0 15px;
        text-align: center;
    }

    .hero-subtitle {
        font-size: 11px;
        padding: 8px 15px;
        margin-bottom: 15px;
    }

    .hero-content h1 {
        font-size: 25px;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .hero-content p {
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 20px;
    }


    /* =========================
       BUTTON
    ========================= */

    .hero-button {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        padding: 12px 20px;
        font-size: 13px;
        text-align: center;
    }


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

    .section-title {
        margin-bottom: 30px;
    }

    .section-title span {
        font-size: 12px;
    }

    .section-title h2 {
        font-size: 25px;
        line-height: 1.3;
    }

    .section-title p {
        font-size: 13px;
        line-height: 1.7;
    }


    /* =========================
       STATISTIK
    ========================= */

    .statistik {
        padding: 45px 0;
    }

    .statistik-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 20px 10px;
        border-radius: 12px;
    }

    .stat-card i {
        font-size: 30px;
        margin-bottom: 12px;
    }

    .stat-card h3 {
        font-size: 25px;
        margin-bottom: 5px;
    }

    .stat-card span {
        font-size: 11px;
    }


    /* =========================
       ABOUT
    ========================= */

    .about {
        padding: 45px 0;
    }

    .about-grid {
        gap: 25px;
    }

    .about-image img {
        border-radius: 12px;
    }

    .about-content h2 {
        font-size: 27px;
    }

    .about-content p {
        font-size: 13px;
        line-height: 1.8;
    }

    .about-slider {
        height: 250px;
        border-radius: 12px;
    }


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

    .galeri {
        padding: 45px 0;
    }

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .galeri-item {
        height: 150px;
        border-radius: 10px;
    }


    /* =========================
       GALLERY HALAMAN
    ========================= */

    .gallery-section {
        padding-left: 0;
        padding-right: 0;
    }

    .gallery-item {
        border-radius: 10px;
    }

    .gallery-item img {
        height: 160px;
    }

    .gallery-overlay {
        padding: 10px;
    }

    .gallery-overlay h5 {
        font-size: 13px;
    }


    /* =========================
       DATA POKOK
    ========================= */

    .school-info {
        padding: 45px 0;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .info-card {
        padding: 18px 10px;
        text-align: center;
        border-radius: 12px;
    }

    .info-card i {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .info-card h4 {
        font-size: 14px;
    }

    .info-card p {
        font-size: 12px;
    }


    /* =========================
       PROGRAM KEAHLIAN
    ========================= */

    .major-section {
        padding: 50px 0;
    }

    .major-section h2 {
        font-size: 28px;
    }

    .major-desc {
        font-size: 13px;
        line-height: 1.8;
    }

    .major-box {
        padding: 22px;
        border-radius: 15px;
    }

    .major-header {
        gap: 12px;
    }

    .major-icon {
        width: 65px;
        height: 65px;
        font-size: 28px;
        border-radius: 15px;
    }

    .major-code {
        min-width: 55px;
        height: 40px;
        font-size: 18px;
    }

    .major-box h3 {
        font-size: 21px;
    }

    .major-box p {
        font-size: 13px;
        line-height: 1.8;
    }


    /* =========================
       FASILITAS
    ========================= */

    .facility-section {
        padding: 50px 0;
    }

    .facility-section h2 {
        font-size: 28px;
    }

    .facility-desc {
        font-size: 13px;
    }

    .facility-card {
        border-radius: 15px;
    }

    .facility-card img {
        height: 180px;
    }

    .facility-body {
        padding: 20px;
    }

    .facility-body h4 {
        font-size: 18px;
    }

    .facility-body p {
        font-size: 13px;
        line-height: 1.7;
    }

    .facility-icon {
        width: 55px;
        height: 55px;
        font-size: 23px;
    }


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

    .guru-section {
        padding: 50px 0;
    }

    .guru-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .guru-card {
        padding: 18px 10px;
        border-radius: 12px;
    }

    .guru-foto {
        width: 90px;
        height: 90px;
        border-width: 3px;
        margin-bottom: 12px;
    }

    .guru-card h3 {
        font-size: 14px;
    }

    .guru-nuptk {
        font-size: 11px;
    }

}