/* =========================================================
   VERSI 41 - HEADER HP/TABLET + DRAWER MENU RAPIH
   Fokus:
   - Nama sekolah di HP/Tablet dibuat 2 baris rapi.
   - Drawer menu kembali dari kiri.
   - Tombol menu mobile diberi ikon dan ukuran lebih proporsional.
   ========================================================= */

@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px){

  .site-header{
    background:linear-gradient(100deg,#08275f 0%, #0b3c92 58%, #2f6af2 100%) !important;
  }

  .site-header .container,
  .site-header .container.site-header-inner,
  .site-header-inner,
  header.site-header > .container{
    min-height:86px !important;
    padding-left:18px !important;
    padding-right:18px !important;
    gap:12px !important;
  }

  .brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:calc(100% - 72px) !important;
    gap:12px !important;
    overflow:hidden !important;
  }

  .brand > div{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .brand-logo{
    width:54px !important;
    height:54px !important;
    flex:0 0 54px !important;
  }

  .brand-title{
    display:block !important;
    max-width:100% !important;
    font-size:0 !important;
    line-height:0 !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  .brand-title::after{
    content:"SD AL-WILDAN 4\A ISLAMIC SCHOOL JAKARTA" !important;
    display:block !important;
    white-space:pre-line !important;
    font-size:clamp(16px, 3.6vw, 21px) !important;
    line-height:1.05 !important;
    letter-spacing:.01em !important;
    font-weight:900 !important;
    color:#fff !important;
    text-transform:uppercase !important;
  }

  .brand-sub{
    display:block !important;
    margin-top:4px !important;
    font-size:clamp(13px, 2.7vw, 16px) !important;
    line-height:1.05 !important;
    color:rgba(255,255,255,.92) !important;
    white-space:nowrap !important;
  }

  .mobile-menu-btn{
    width:56px !important;
    height:56px !important;
    flex:0 0 56px !important;
    border-radius:18px !important;
    margin-left:8px !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.25) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 30px rgba(2,18,46,.18) !important;
  }

  .mobile-menu-btn .hamb{
    width:26px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
  }

  .mobile-menu-btn .hamb span{
    width:26px !important;
    height:3px !important;
    border-radius:999px !important;
    background:#ffffff !important;
  }

  .mobile-drawer{
    align-items:stretch !important;
    justify-content:flex-start !important;
    background:rgba(3,14,35,.46) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }

  .mobile-panel,
  .mobile-panel-v41{
    width:min(360px, 86vw) !important;
    max-width:86vw !important;
    height:100dvh !important;
    margin-left:0 !important;
    margin-right:auto !important;
    padding:calc(env(safe-area-inset-top, 0px) + 18px) 18px 28px !important;
    background:#fff !important;
    border-radius:0 28px 28px 0 !important;
    box-shadow:24px 0 60px rgba(2,18,46,.26) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    overflow-y:auto !important;
  }

  .mobile-panel .close{
    align-self:flex-end !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    margin:0 0 10px !important;
    border:0 !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,#2f6af2,#1d4ed8) !important;
    color:#fff !important;
    font-size:34px !important;
    line-height:1 !important;
    font-weight:400 !important;
    box-shadow:0 14px 32px rgba(37,99,235,.25) !important;
  }

  .mobile-panel a{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    min-height:58px !important;
    padding:15px 16px !important;
    border-radius:18px !important;
    background:#f7faff !important;
    border:1px solid rgba(37,99,235,.08) !important;
    box-shadow:0 10px 26px rgba(15,39,71,.04) !important;
    color:#0b2f6f !important;
    font-weight:900 !important;
    font-size:20px !important;
    line-height:1.1 !important;
    text-decoration:none !important;
  }

  .mobile-panel a svg{
    width:23px !important;
    height:23px !important;
    flex:0 0 23px !important;
    color:#2563eb !important;
    stroke-width:2.35 !important;
  }

  .mobile-panel a span{
    display:block !important;
    min-width:0 !important;
  }

  .mobile-panel a.active,
  .mobile-panel a:hover{
    background:#eaf2ff !important;
    border-color:rgba(37,99,235,.18) !important;
    color:#1558d6 !important;
  }

  .mobile-panel a.active svg,
  .mobile-panel a:hover svg{
    color:#1558d6 !important;
  }

  .app-sidebar{
    left:0 !important;
    right:auto !important;
    border-radius:0 26px 26px 0 !important;
  }
}

@media (max-width:480px){
  .site-header .container,
  .site-header .container.site-header-inner,
  .site-header-inner,
  header.site-header > .container{
    min-height:84px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .brand{
    max-width:calc(100% - 66px) !important;
    gap:10px !important;
  }

  .brand-logo{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }

  .brand-title::after{
    font-size:clamp(15px, 4.3vw, 18px) !important;
    line-height:1.03 !important;
    letter-spacing:0 !important;
  }

  .brand-sub{
    font-size:14px !important;
    margin-top:3px !important;
  }

  .mobile-menu-btn{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
    border-radius:16px !important;
  }

  .mobile-panel,
  .mobile-panel-v41{
    width:84vw !important;
    max-width:84vw !important;
    padding-left:16px !important;
    padding-right:16px !important;
    border-radius:0 24px 24px 0 !important;
  }

  .mobile-panel a{
    min-height:54px !important;
    font-size:18px !important;
    border-radius:16px !important;
    padding:14px 15px !important;
  }

  .mobile-panel a svg{
    width:21px !important;
    height:21px !important;
    flex-basis:21px !important;
  }
}

@media (min-width:768px) and (max-width:1180px){
  .brand-title::after{
    content:"SD AL-WILDAN 4 ISLAMIC SCHOOL JAKARTA" !important;
    white-space:nowrap !important;
    font-size:20px !important;
  }
  .brand-sub{font-size:16px !important}
  .mobile-panel,.mobile-panel-v41{width:390px !important;max-width:390px !important}
}