/* ======================================================================
   SMA MA'ARIF DARUL ULUM BRONDONG — MOBILE HOME REFRESH v13
   Hanya aktif pada layar <= 767.98px. Menu dan carousel yang sudah bekerja
   tidak diganti; file ini hanya memperbarui tata letak dan visual homepage.
   ====================================================================== */

@media (max-width: 767.98px) {
  :root {
    --smadu-green-950: #063b2a;
    --smadu-green-800: #0f6844;
    --smadu-green-700: #0f7a43;
    --smadu-green-600: #16a05d;
    --smadu-green-500: #20bd72;
    --smadu-mint-100: #dff8ec;
    --smadu-mint-50: #f0fbf6;
    --smadu-ink: #102238;
    --smadu-muted: #526376;
    --smadu-line: rgba(15, 122, 67, .14);
    --smadu-shadow: 0 16px 38px rgba(15, 35, 55, .11);
  }

  html {
    scroll-behavior: smooth;
    background: #f7fbf9;
  }

  body {
    background: #f7fbf9 !important;
    color: var(--smadu-ink);
    overflow-x: hidden !important;
  }

  /* ---------- HEADER MOBILE ---------- */
  .header-topbar {
    display: none !important;
  }

  [data-toggle="affix"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 2147483000 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(15, 122, 67, .10) !important;
    box-shadow: 0 8px 24px rgba(15, 35, 55, .08) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .nav-menu2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 0 0 18px 18px !important;
    background: transparent !important;
  }

  .nav-menu2 > .row,
  .nav-menu2 > .row > [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar.navbar2 {
    min-height: 58px !important;
    padding: 7px 56px 7px 8px !important;
    background: transparent !important;
    border: 0 !important;
  }

  .navbar2 .nav-brand2 {
    width: auto !important;
    max-width: calc(100vw - 82px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar2 .nav-brand2 img {
    width: min(292px, calc(100vw - 86px)) !important;
    max-width: 100% !important;
    height: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  #smaduHomeMenuLabel {
    right: 8px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background: rgba(15, 122, 67, .06) !important;
  }

  #smaduHomeMenuLabel:active {
    background: rgba(15, 122, 67, .14) !important;
  }

  #smaduStandaloneMobileMenu {
    top: 58px !important;
    left: 8px !important;
    right: 8px !important;
    max-height: calc(100dvh - 68px) !important;
    padding: 12px !important;
    gap: 7px !important;
    border: 1px solid rgba(15, 122, 67, .10) !important;
    border-radius: 0 0 20px 20px !important;
    background: rgba(246, 251, 248, .98) !important;
    box-shadow: 0 22px 50px rgba(15, 35, 55, .20) !important;
  }

  #smaduStandaloneMobileMenu .smadu-mobile-link {
    min-height: 42px !important;
    padding: 11px 14px !important;
    border: 1px solid rgba(15, 122, 67, .07) !important;
    border-radius: 13px !important;
    box-shadow: 0 7px 16px rgba(15, 35, 55, .05) !important;
    font-family: Lora, Georgia, serif !important;
  }

  /* ---------- HERO: MOBILE-FIRST, FOTO LEBIH CEPAT TERLIHAT ---------- */
  section.hero-smanu {
    position: relative !important;
    isolation: isolate;
    padding: 16px 0 32px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 92% 7%, rgba(32, 189, 114, .18), transparent 31%),
      radial-gradient(circle at 7% 58%, rgba(14, 165, 233, .10), transparent 34%),
      linear-gradient(160deg, #effcf6 0%, #f9fffc 56%, #eef8ff 100%) !important;
    border-bottom: 1px solid rgba(15, 122, 67, .08);
  }

  section.hero-smanu::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 150px !important;
    height: 150px !important;
    right: -74px !important;
    top: 110px !important;
    border: 24px solid rgba(32, 189, 114, .07) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  .hero-smanu .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px !important;
  }

  .hero-smanu .row.align-items-center {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  /* display:contents memungkinkan foto ditempatkan sebelum kartu statistik
     tanpa menduplikasi data atau mengubah tampilan desktop. */
  .hero-smanu .row.align-items-center > .col-lg-6:first-child,
  .hero-smanu .hero-smanu-text {
    display: contents !important;
  }

  .hero-smanu .row.align-items-center > .col-lg-6:nth-child(2) {
    order: 6 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 17px 0 0 !important;
    padding: 0 !important;
  }

  .hero-admin-top {
    order: 1 !important;
    justify-self: end !important;
    margin: 0 0 9px !important;
  }

  .hero-admin-btn {
    min-height: 34px !important;
    padding: 7px 12px !important;
    gap: 7px !important;
    border: 1px solid rgba(15, 122, 67, .15) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 8px 18px rgba(15, 122, 67, .08) !important;
    color: var(--smadu-green-950) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .hero-smanu-identity {
    order: 2 !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 0 17px !important;
    padding: 9px 11px !important;
    gap: 9px !important;
    border: 1px solid rgba(15, 122, 67, .16) !important;
    border-left: 4px solid var(--smadu-green-500) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.60) !important;
    box-shadow: 0 10px 25px rgba(15, 122, 67, .07) !important;
  }

  .hero-smanu-identity .identity-icon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    border-radius: 8px !important;
  }

  .hero-smanu-identity .identity-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #184936 !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    letter-spacing: .09em !important;
  }

  .hero-smanu-title {
    order: 3 !important;
    position: relative;
    max-width: 355px;
    margin: 0 0 13px !important;
    color: #0b233d !important;
    font-family: Lora, Georgia, serif !important;
    font-size: clamp(31px, 8.4vw, 37px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  .hero-smanu-title::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--smadu-green-500), #38bdf8);
  }

  .hero-smanu-desc {
    order: 4 !important;
    margin: 0 0 18px !important;
    color: var(--smadu-muted) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }

  .hero-smanu-actions {
    order: 5 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .hero-smanu-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 10px 10px !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    box-shadow: none !important;
  }

  .hero-smanu-btn-main {
    order: 1 !important;
    border-color: var(--smadu-green-700) !important;
    background: linear-gradient(135deg, var(--smadu-green-700), var(--smadu-green-500)) !important;
    box-shadow: 0 12px 24px rgba(15, 122, 67, .22) !important;
  }

  .hero-smanu-btn-ppdb {
    order: 2 !important;
    border-color: rgba(15, 122, 67, .27) !important;
    background: #ffffff !important;
    color: var(--smadu-green-800) !important;
    box-shadow: 0 10px 22px rgba(15, 35, 55, .07) !important;
  }

  .hero-smanu-btn-ghost {
    order: 3 !important;
    grid-column: 1 / -1 !important;
    min-height: 39px !important;
    border-color: transparent !important;
    background: rgba(15, 122, 67, .06) !important;
    color: var(--smadu-green-800) !important;
  }

  /* slider diletakkan sebelum statistik pada mobile */
  .hero-smanu-photo-wrap {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .hero-smanu-photo-card,
  #heroCarousel.hero-carousel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 3px solid rgba(255,255,255,.88) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #dfeee7 !important;
    box-shadow: 0 20px 42px rgba(15, 35, 55, .17) !important;
  }

  #heroCarousel .hero-carousel-track,
  #heroCarousel .hero-carousel-slide {
    height: 228px !important;
  }

  .hero-smanu-photo-img,
  #heroCarousel .hero-carousel-slide img {
    width: 100% !important;
    height: 228px !important;
    min-height: 228px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 19px !important;
  }

  #heroCarousel .hero-carousel-control {
    width: 36px !important;
    height: 44px !important;
    border: 1px solid rgba(15,35,55,.08) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.90) !important;
    color: #123047 !important;
    font-size: 23px !important;
    box-shadow: 0 9px 20px rgba(15,35,55,.14) !important;
  }

  #heroCarousel .hero-carousel-dots {
    bottom: 9px !important;
    padding: 5px 8px !important;
    background: rgba(7, 26, 39, .48) !important;
  }

  .hero-smanu-caption {
    position: absolute !important;
    z-index: 7 !important;
    top: 12px !important;
    left: 12px !important;
    right: 54px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    pointer-events: none !important;
    text-align: left !important;
  }

  .hero-smanu-caption-chip {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 10px !important;
    background: rgba(6, 59, 42, .70) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(6, 59, 42, .18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    letter-spacing: .06em !important;
    white-space: normal !important;
  }

  .hero-smanu-stats {
    order: 7 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 17px 0 0 !important;
  }

  .hero-smanu-stats .stat-box {
    position: relative;
    min-width: 0;
    min-height: 91px;
    margin: 0 !important;
    padding: 14px 13px 13px !important;
    border: 1px solid rgba(15, 122, 67, .11) !important;
    border-top: 3px solid var(--smadu-green-500) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 12px 26px rgba(15, 35, 55, .08) !important;
  }

  .hero-smanu-stats .stat-box:nth-child(2) {
    border-top-color: #38bdf8 !important;
  }

  .hero-smanu-stats .stat-box:nth-child(3) {
    grid-column: 1 / -1 !important;
    min-height: 77px !important;
    border-top-color: #f2b84b !important;
  }

  .hero-smanu-stats .stat-label {
    margin-bottom: 7px !important;
    color: #7890a6 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  .hero-smanu-stats .stat-value {
    color: #102238 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
  }

  /* ---------- SECTION UMUM ---------- */
  .about-smanu,
  .artikel-section,
  .event-smanu,
  .stats-smanu {
    overflow: hidden;
  }

  .about-smanu .container,
  .artikel-section .container,
  .event-smanu .container,
  .stats-smanu .container,
  .footer-smanu .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---------- WELCOME ---------- */
  .about-smanu {
    padding: 46px 0 44px !important;
    background: #ffffff !important;
  }

  .about-smanu-tag {
    padding: 5px 12px !important;
    font-size: 10px !important;
  }

  .about-smanu-title {
    margin: 12px 0 12px !important;
    color: #102238 !important;
    font-size: 27px !important;
    line-height: 1.22 !important;
    letter-spacing: -.02em !important;
  }

  .about-smanu-desc {
    margin-bottom: 0 !important;
    color: var(--smadu-muted) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .about-smanu-points {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
    margin-top: 18px !important;
  }

  .about-smanu-chip {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: var(--smadu-mint-50) !important;
    font-size: 11.5px !important;
  }

  .about-smanu-highlight {
    margin-top: 13px !important;
    padding: 13px 14px !important;
    border-left: 4px solid var(--smadu-green-500) !important;
    border-radius: 13px !important;
    background: linear-gradient(90deg, rgba(32,189,114,.08), rgba(56,189,248,.06)) !important;
    color: #235243 !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }

  .about-smanu .col-lg-5 {
    margin-top: 22px !important;
  }

  .headmaster-card {
    padding: 18px !important;
    border: 1px solid rgba(15, 122, 67, .10) !important;
    border-radius: 20px !important;
    box-shadow: var(--smadu-shadow) !important;
  }

  .headmaster-body {
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .headmaster-photo-wrap {
    width: 88px !important;
    height: 88px !important;
    flex: 0 0 88px !important;
  }

  .headmaster-photo {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .headmaster-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .headmaster-quote {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .headmaster-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
  }

  /* ---------- ARTIKEL: KARTU HORIZONTAL AGAR TIDAK TERLALU KECIL ---------- */
  .artikel-section {
    padding: 44px 0 48px !important;
    background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%) !important;
  }

  .artikel-title,
  .event-title {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }

  .artikel-subtitle {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .artikel-section .row:nth-of-type(2) > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .artikel-card {
    display: grid !important;
    grid-template-columns: 112px minmax(0,1fr) !important;
    min-height: 104px !important;
    border: 1px solid rgba(15, 35, 55, .06) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(15,35,55,.08) !important;
  }

  .artikel-card-img-wrap {
    width: 112px !important;
    height: 104px !important;
  }

  .artikel-card-img {
    border-radius: 15px 0 0 15px !important;
  }

  .artikel-card-body {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 14px !important;
  }

  .artikel-judul {
    margin: 0 !important;
    color: #102238 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .btn-artikel-more {
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
  }

  /* ---------- PENGUMUMAN & AGENDA ---------- */
  .event-smanu {
    padding: 44px 0 48px !important;
    background: linear-gradient(160deg, #effbf5 0%, #fffdf5 52%, #f3f8ff 100%) !important;
  }

  .event-column-head {
    margin-bottom: 15px !important;
  }

  .home-notice-grid > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
  }

  .home-notice-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 13px !important;
    min-height: 92px !important;
    padding: 13px !important;
    text-align: left !important;
    border: 1px solid rgba(15,122,67,.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(15,35,55,.08) !important;
  }

  .home-notice-img {
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
  }

  .home-notice-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .home-notice-body {
    min-width: 0 !important;
  }

  .home-notice-date {
    font-size: 10px !important;
  }

  .home-notice-title {
    margin: 3px 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .home-notice-text {
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  .event-agenda-list {
    padding: 13px 14px 4px !important;
    border: 1px solid rgba(15,35,55,.06) !important;
    border-radius: 17px !important;
    box-shadow: 0 12px 28px rgba(15,35,55,.09) !important;
  }

  .agenda-item {
    gap: 11px !important;
  }

  /* ---------- STATISTIK ---------- */
  .stats-smanu {
    padding: 44px 0 !important;
    background: #ffffff !important;
  }

  .stats-smanu .row {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }

  .stats-smanu .row > [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 10px !important;
  }

  .stats-card {
    min-height: 116px !important;
    padding: 14px 8px !important;
    border: 1px solid rgba(15,122,67,.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(15,35,55,.08) !important;
  }

  .stats-icon img {
    max-width: 38px !important;
    max-height: 38px !important;
  }

  /* ---------- FOOTER LEBIH RINGKAS ---------- */
  .footer-smanu {
    padding: 34px 0 20px !important;
  }

  .footer-smanu .row > [class*="col-"] {
    margin-bottom: 22px !important;
  }

  .footer-smanu h3 {
    margin: 0 0 9px !important;
    font-size: 16px !important;
  }

  .footer-smanu .sitemap ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 12px !important;
  }

  .footer-smanu .sitemap ul li {
    margin: 0 !important;
  }

  .footer-smanu .sitemap ul li a {
    display: block;
    padding: 5px 0;
    font-size: 13px;
  }
}

@media (max-width: 385px) {
  .navbar2 .nav-brand2 img {
    width: calc(100vw - 84px) !important;
    height: 27px !important;
  }

  .hero-smanu .container,
  .about-smanu .container,
  .artikel-section .container,
  .event-smanu .container,
  .stats-smanu .container,
  .footer-smanu .container {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .hero-smanu-title {
    font-size: 30px !important;
  }

  .hero-smanu-actions a {
    font-size: 11.5px !important;
  }

  #heroCarousel .hero-carousel-track,
  #heroCarousel .hero-carousel-slide,
  .hero-smanu-photo-img,
  #heroCarousel .hero-carousel-slide img {
    height: 210px !important;
    min-height: 210px !important;
  }
}