/* ******************************************************************
default: 1em atau 24px
default: 1rem atau 16px
0: Mengubah margin menjadi 0.
1: Nilai $spacer * 0.25 (4px).
2: Nilai $spacer * 0.5 (8px).
3: Nilai $spacer (16px).
4: Nilai $spacer * 1.5 (24px).
5: Nilai $spacer * 3 (48px).
 ***************************************************************** */
:root {
  /* ==========================================================================
     1. WARNA TEMA UTAMA (THEME COLORS) - Digunakan untuk .text-* dan .bg-*
     ========================================================================== */
  --bs-primary-rgb: 13, 110, 253;    /* Biru (Primary) */
  --bs-secondary-rgb: 108, 117, 125; /* Abu-abu (Secondary) */
  --bs-success-rgb: 25, 135, 84;     /* Hijau (Success) */
  --bs-info-rgb: 13, 202, 240;       /* Biru Muda (Info) */
  --bs-warning-rgb: 255, 193, 7;     /* Kuning (Warning) */
  --bs-danger-rgb: 220, 53, 69;      /* Merah (Danger) */
  --bs-light-rgb: 248, 249, 250;     /* Putih Pudar (Light) */
  --bs-light-dark-rgb: 239, 239, 239;
  --bs-dark-rgb: 33, 37, 41;         /* Hitam Arang (Dark) */

  /* ==========================================================================
     2. WARNA UTAMA DASAR (BASE COLORS)
     ========================================================================== */
  --bs-white-rgb: 255, 255, 255;     /* Putih Bersih */
  --bs-black-rgb: 0, 0, 0;           /* Hitam Pekat */

  /* ==========================================================================
     3. WARNA KHUSUS PALET INDIVIDU (INDIVIDUAL PALETTE COLORS)
     ========================================================================== */
  --bs-blue-rgb: 13, 110, 253;
  --bs-indigo-rgb: 102, 16, 242;
  --bs-purple-rgb: 111, 66, 193;
  --bs-pink-rgb: 214, 51, 132;
  --bs-red-rgb: 220, 53, 69;
  --bs-orange-rgb: 253, 126, 20;
  --bs-yellow-rgb: 255, 193, 7;
  --bs-green-rgb: 25, 135, 84;
  --bs-teal-rgb: 32, 201, 151;
  --bs-cyan-rgb: 13, 202, 240;

  /* ==========================================================================
     4. WARNA BODY & KOMPONEN DEFAULT
     ========================================================================== */
  --bs-body-color-rgb: 33, 37, 41;   /* Warna teks utama halaman */
  --bs-body-bg-rgb: 255, 255, 255;   /* Warna latar belakang halaman */
}

/* ==========================================================================
   2. KONSTANTA WARNA BERDASARKAN TENANT (SEKOLAH)
   ========================================================================== */

/* SD: Identik dengan warna Merah/Hati */
[data-tenant="sd"] {
  --bs-primary-rgb: 163, 0, 0;          /* Merah SD */
  --bs-primary-dark-rgb: 69, 82, 94;
  --bs-secondary-rgb: 220, 53, 69;
}

/* SMP: Identik dengan warna Biru Tua / Navy */
[data-tenant="smp"] {
  --bs-primary-rgb: 0, 51, 153;         /* Biru SMP */
  --bs-primary-dark-rgb: 3, 30, 84;
  --bs-secondary-rgb: 13, 110, 253;
}

/* MTs / MA / Sekolah Islam: Identik dengan warna Hijau */
[data-tenant="mi"], [data-tenant="mts"], [data-tenant="ma"] {
  --bs-primary-rgb: 25, 135, 84;        /* Hijau Madrasah */
  --bs-primary-dark-rgb: 16, 56, 37;
  --bs-secondary-rgb: 40, 167, 69;
}

/* SMA: Identik dengan warna Abu-abu / Biru Langit */
[data-tenant="sma"] {
  --bs-primary-rgb: 112, 128, 144;      /* Abu-abu SMA */
  --bs-primary-dark-rgb: 69, 82, 94;
  --bs-secondary-rgb: 173, 216, 230;
}


/* ==========================================================================
   3. KELAS UTILITAS BACKGROUND & TEKS (YANG MEMAKAI VARIABEL DI ATAS)
   ========================================================================== */
.bg-primary {
  background-color: rgba(var(--bs-primary-rgb), 1) !important;
}

.bg-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 1) !important;
}

.text-primary {
  color: rgba(var(--bs-primary-rgb), 1) !important;
}

/* Efek transparan/opasitas jika dibutuhkan */
.bg-primary-subtle {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;background: #f5f7fa;}

/* Ukuran 0 (0px) */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ms-0 { margin-left: 0 !important; } /* ms = kiri */
.me-0 { margin-right: 0 !important; } /* me = kanan */
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Ukuran 1 (4px) */
.m-1 { margin: 0.25rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }

/* Ukuran 2 (8px) */
.m-2 { margin: 0.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

/* Ukuran 3 (16px) */
.m-3 { margin: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ms-3 { margin-left: 1rem !important; }
.me-3 { margin-right: 1rem !important; }
.mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

/* Ukuran 4 (24px) */
.m-4 { margin: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

/* Ukuran 5 (48px) */
.m-5 { margin: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-5 { margin-left: 3rem !important; }
.me-5 { margin-right: 3rem !important; }
.mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Otomatis (Auto) */
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Ukuran 0 (0px) */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.ps-0 { padding-left: 0 !important; }
.pe-0 { padding-right: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Ukuran 1 (4px) */
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.ps-1 { padding-left: 0.25rem !important; }
.pe-1 { padding-right: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }

/* Ukuran 2 (8px) */
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

/* Ukuran 3 (16px) */
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.ps-3 { padding-left: 1rem !important; }
.pe-3 { padding-right: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* Ukuran 4 (24px) */
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

/* Ukuran 5 (48px) */
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pe-5 { padding-right: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Lebar (Width) */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.mw-100 { max-width: 100% !important; }
.vw-100 { width: 100vw !important; }

/* Tinggi (Height) */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mh-100 { max-height: 100% !important; }
.vh-100 { height: 100vh !important; }

/* Ukuran 0 (0px) */
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

/* Ukuran 1 (Setara 4px jika font-size elemen 16px) */
.ml-1 { margin-left: 0.25em !important; }
.mr-1 { margin-right: 0.25em !important; }

/* Ukuran 2 (Setara 8px jika font-size elemen 16px) */
.ml-2 { margin-left: 0.5em !important; }
.mr-2 { margin-right: 0.5em !important; }

/* Ukuran 3 (Setara 16px jika font-size elemen 16px) */
.ml-3 { margin-left: 1em !important; }
.mr-3 { margin-right: 1em !important; }

/* Ukuran 4 (Setara 24px jika font-size elemen 16px) */
.ml-4 { margin-left: 1.5em !important; }
.mr-4 { margin-right: 1.5em !important; }

/* Ukuran 5 (Setara 48px jika font-size elemen 16px) */
.ml-5 { margin-left: 3em !important; }
.mr-5 { margin-right: 3em !important; }

/* Otomatis (Auto) */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* Display */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex Direction */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }

/* Justify Content (Horizontal jika flex-row) */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

/* Align Items (Vertikal jika flex-row) */
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }

/* Warna Teks */
.text-primary { color: rgba(var(--bs-primary-rgb), 1) !important; }   /* Biru */
.text-secondary { color: rgba(var(--bs-secondary-rgb), 1) !important; } /* Abu-abu */
.text-success { color: rgba(var(--bs-success-rgb), 1) !important; }     /* Hijau */
.text-danger { color: rgba(var(--bs-danger-rgb), 1) !important; }       /* Merah */
.text-warning { color: rgba(var(--bs-warning-rgb), 1) !important; }     /* Kuning */
.text-white { color: rgba(var(--bs-white-rgb), 1) !important; }         /* Putih */
.text-dark { color: rgba(var(--bs-dark-rgb), 1) !important; }           /* Hitam */
.text-muted { color: #6c757d !important; }

/* Warna Latar Belakang */
.bg-primary { background-color: rgba(var(--bs-primary-rgb), 1) !important; }
.bg-success { background-color: rgba(var(--bs-success-rgb), 1) !important; }
.bg-danger { background-color: rgba(var(--bs-danger-rgb), 1) !important; }
.bg-light { background-color: rgba(var(--bs-light-rgb), 1) !important; }
.bg-transparent { background-color: transparent !important; }

/* ============================= HEADER ============================= */
.header {
    background: linear-gradient(rgba(0, 0, 0, 0.384), rgba(0, 0, 0, 0.39)), url('https://ma-umarmasud.sch.id/assets/image/6f7b6dd534a60e75f5b3a965255550efa096f91dd447dce4bdac9deb102309cd.jpg');
    background-size: cover;color: white;padding: 20px 15px;text-align: center;height: 150px;max-height: 240px;height: auto;
}
/* .header h1 {font-size: 22px;} */
/* .header p {font-size: 12px;margin-top: 5px;} */
.contact-info {display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;margin-top: 12px;font-size: 11px;}
.contact-info span i {margin-right: 4px;color: #ffd966;}
.header-main-wrapper {display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 0 0;}
.header-container {display: flex;align-items: center;gap: 20px;}
.header-logo {width: 80px;height: auto;}
.header-text h1 {margin: 0 0 5px 0;font-family: serif;font-weight: bolder;font-size: 2.4em;}
.contact-info {display: flex;flex-direction: column;align-items: flex-end;gap: 5px;text-align: right;}
.contact-info span i {margin-right: 5px;}

/* ============================= RUNNING TEXT ============================= */
.running-text {
    background: rgba(var(--bs-primary-dark-rgb), 1) !important;color: #c0c0c0;
    padding: 10px 0;overflow: hidden;white-space: nowrap;font-size: 14px;
    border-top: 1px solid #80808052;border-bottom: 1px solid #80808052;}
.running-text .marquee {display: inline-block;animation: slide 25s linear infinite; font-weight: 500;}
.running-text .marquee i {margin: 0 8px;color: #ffd966 !important;}
.marquee svg:not(:host).svg-inline--fa, .marquee svg:not(:root).svg-inline--fa {
    overflow: visible;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    color: #FFC107;
}
@keyframes slide {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}

/* ============================= MENU ============================= */
.menu {
    background: #ffffff;
    padding: 10px 70px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;top: 0;z-index: 99;overflow-x: auto;
    white-space: nowrap;
}
.menu a {
    display: inline-block;
    padding: 6px 16px;
    margin: 0 3px;
    text-decoration: none;
    border: 1px solid rgb(218, 218, 218);
    border-radius: 30px;
    font-size: 1em;
    font-weight: 500;
    color: rgba(var(--bs-primary-dark-rgb), 1) !important;
}
.menu a:hover, .menu a.active:hover {
    transform: translateY(-2px);
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
    color: rgba(var(--bs-white-rgb), 1) !important;
    font-weight: 600;
    border: 3px solid #c6cfce;
}
.menu a.active{
    background: rgba(var(--bs-primary-dark-rgb), 1) !important;
    color: rgba(var(--bs-white-rgb), 1) !important;
    border: 3px solid #c6cfce !important;
    font-weight: 600;
}

/* ============================= SEARCH ============================= */
.search {background: white;padding: 10px 15px;text-align: center;border-top: 1px solid #eee;}
.search input {padding: 7px 15px;width: 65%;border-radius: 30px;border: 1px solid #ccc;outline: none;}
.search button {
    padding: 7px 18px;
    background: rgba(var(--bs-primary-rgb), 1) !important;
    border: none;border-radius: 30px;color: white;cursor: pointer;
}

.container {max-width: 1200px;margin: auto;padding: 0 4rem;}

section {padding: 1.25rem 0;}
.section-title {text-align: center;font-size: clamp(1.5rem, 5vw, 2rem);font-weight: 700;margin-bottom: 1.5rem;position: relative;color: #1e2a3e;}
.section-title:after {content: '';display: block;width: 70px;height: 4px;background: #2c7a4d;margin: 12px auto 0;border-radius: 4px;}

/* ============================= HERO SLIDER ============================= */
.hero {position: relative;border-radius: 1.5rem;overflow: hidden;background: linear-gradient(135deg, #e9f5ef 0%, #d1e7dd 100%);}
.hero img {width: 100%;object-fit: cover;}
.hero-caption {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);color: white;}
.hero-caption .badge {font-size: 12px; background: rgba(4, 46, 3, 0.418);display: inline-block; padding: 5px 10px; border-radius: 20px;}
/* .hero-caption h3 {font-size: 18px; margin-top: 6px;} */
/* Hero Swiper Navigation */
.swiper-button-next, .swiper-button-prev {color: white !important;background: rgba(0,0,0,0.3);width: 35px !important;height: 35px !important;border-radius: 50%;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 18px !important;}
.swiper-pagination-bullet {background: white !important;}
.swiper-pagination-bullet-active {background: #ffd966 !important;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, .swiper-pagination-fraction {bottom: 1rem !important;}

/* ============================= BREADCRUMB ============================= */
.breadcrumb {background: #e2e8f0;padding: 8px 15px;border-radius: 30px;}
.breadcrumb .text {font-size: 18px;}

/* ============================= FOOTER ============================= */
.footer {
    background: rgba(var(--bs-primary-dark-rgb), 1) !important;color: #cbd5e1;padding: 35px 15px 20px;
}
.footer-grid {max-width: 1200px;margin: auto;display: grid;grid-template-columns: 1.5fr 1fr 1fr 1fr;gap: 2rem;text-align: center;}
.footer-grid p,.footer-grid a {font-size: .8em;}
/* .footer-grid {grid-template-columns: 2fr 1fr 1fr 1fr;gap: 30px;align-items: start;} */
.footer h4 {color: white;margin-bottom: 12px;}
.footer p,.footer a {margin-bottom: 6px;color: #cbd5e1;text-decoration: none;display: block;}
.footer i {margin-right: 8px;color: #2c6e4f;}
.social a {display: inline-block;margin: 0 8px;font-size: 18px;}
.social-fab {font-size: 24px;}
.copyright {padding-top: 20px;margin-top: 20px;border-top: 1px solid #2c4a3b;}
.copyright {
    text-align: center;
    font-size: .8em;
    white-space: nowrap;
}
.copyright strong,.copyright a {
    display: inline-block;
    margin: 0 2px;
}

/* DESKTOP (di atas 768px) */
@media (min-width: 768px) {
    .row {display: flex;gap: 1.5rem;}
    .col-left {flex: 2;}
    .col-right {flex: 1;}
    
    .hero img {height: 380px;}
    .hero-caption {padding: 0 1.5rem 2.5rem;}
}

/* DESKTOP (di bawah 768px) */
@media screen and (max-width: 768px) {
    .mb-4 {margin-bottom: 1rem !important;}
    .header {padding: 15px 15px;}
    .header-main-wrapper {flex-direction: column;align-items: center;text-align: center;gap: 10px;}
    .header-container {flex-direction: column;gap: 10px;}
    .header-text h1 {font-size: 26px;}
    .header-text p {font-size: 11px;}
    .contact-info {margin-top: 0px;align-items: center;text-align: center;width: 100%;border-top: 1px solid #eee;padding-top: 10px;}
    .menu {padding: 8px;} .menu a {font-size: .8em;}
    .search input {width: 75% !important;}
    .container {padding: 0 1rem;}
    
    .hero {border-radius: 1rem;}
    .hero img {height: 200px !important;}
    .hero-caption {padding: 0 1rem 1.5rem;}
    .hero-caption h3 {font-size: .9em;}
    .swiper-button-next, .swiper-button-prev {display: none !important;}
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, 
    .swiper-pagination-custom, .swiper-pagination-fraction {bottom: .75rem !important;}

    .breadcrumb {font-size: 14px;}
    .breadcrumb .text {font-size: 14px;}

    .footer {padding: 1rem;}
    .footer .footer-grid {grid-template-columns: 1.5fr 1fr !important;gap: 1.25rem 1.25rem !important;}
    .footer-grid p,.footer-grid a {font-size: .7em;}
    /* .footer p,.footer a {font-size: .7em;} */
    .footer .footer-grid div a {
        display: block !important;width: 100% !important;margin-bottom: 8px !important;text-decoration: none;color: inherit;
    }
    .footer .footer-grid .social a {
        display: inline-block !important;
        width: auto !important;
        margin-right: 5px !important;
        margin-bottom: 0 !important;
    }
    .social-fab {font-size: 16px !important;}
    .copyright {font-size: .7em; font-weight: 600;}
}