/* Mobile Navbar - İlk durumun tüm özellikleri korundu */

:root{
  --nav-z: 9999;
  --nav-bg: #0a1849;          /* menu background */
  --nav-link: #ffffff;        /* link color */
  --nav-link-hover: #ffb703;  /* link hover */
  --overlay-bg: rgba(0,0,0,.45);
}

/* Base: hide mobile UI on desktop */
.mobile-navbar-toggle,
.mobile-navbar-overlay,
.mobile-navbar-menu{ display:none; }

@media (max-width: 767px){

  /* Toggle (hamburger) - İLK DURUMDAKİ GİBİ */
  .mobile-navbar-toggle{
    display:block;
    position:fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width:44px; height:44px;
    z-index: var(--nav-z);
    border:none; outline:0;
    background:rgba(0,0,0,.35);  /* Yarı saydam siyah - İLK DURAMDAKİ GİBİ */
    border-radius:12px;
    backdrop-filter:saturate(180%) blur(6px);  /* Bulanıklık efekti - İLK DURUMDAKİ GİBİ */
    cursor:pointer;
  }
  .mobile-navbar-toggle span,
  .mobile-navbar-toggle span::before,
  .mobile-navbar-toggle span::after{
    position:absolute; left:50%;
    width:22px; height:2px; background:#fff;
    transform:translateX(-50%);
    transition:transform .25s ease, opacity .2s ease, top .25s ease;
    content:"";
  }
  .mobile-navbar-toggle span{ top:50%; }
  .mobile-navbar-toggle span::before{ top:-7px; }
  .mobile-navbar-toggle span::after{ top:7px; }
  .mobile-navbar-toggle.active span{ background:transparent; }
  .mobile-navbar-toggle.active span::before{
    top:0; transform:translateX(-50%) rotate(45deg);
  }
  .mobile-navbar-toggle.active span::after{
    top:0; transform:translateX(-50%) rotate(-45deg);
  }

  /* Overlay */
  .mobile-navbar-overlay{
    display:block;
    position:fixed; inset:0;
    background:var(--overlay-bg);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
    z-index: calc(var(--nav-z) - 1);
  }
  .mobile-navbar-overlay.active{
    opacity:1; pointer-events:auto;
  }

  /* Slide-in Menu */
  .mobile-navbar-menu{
    display:block;
    position:fixed; inset:0 0 0 auto; /* right drawer */
    width:min(80vw, 360px);
    background:var(--nav-bg);
    color:var(--nav-link);
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
    z-index: var(--nav-z);
    padding-top: calc(28px + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow:-8px 0 24px rgba(0,0,0,.25);
    overflow-y:auto;
  }
  .mobile-navbar-menu.active{ transform:translateX(0); }

  .mobile-navbar-menu ul{
    list-style:none; margin:0; padding:16px 18px 32px;
    display:flex; flex-direction:column; gap:6px;
  }

  .mobile-navbar-menu a{
    display:block;
    padding:14px 12px;
    text-decoration:none;
    color:var(--nav-link);
    font-weight:600;
    letter-spacing:.2px;
    border-radius:10px;
  }
  .mobile-navbar-menu a:hover,
  .mobile-navbar-menu a:focus{
    background:rgba(255,255,255,.06);
    color:var(--nav-link-hover);
    outline:none;
  }

  /* Alt menü sistemi */
  .mobile-navbar-menu .has-sub > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .mobile-navbar-menu .arrow {
    font-size: 14px;
    transition: transform .2s ease;
    margin-left: 8px;
  }
  
  .mobile-navbar-menu .has-sub.open .arrow { 
    transform: rotate(180deg); 
  }

  /* Alt menü */
  .mobile-navbar-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    padding-left: 12px;
    margin-top: 4px;
  }
  
  .mobile-navbar-menu .sub-menu li {
    margin: 2px 0;
  }
  
  .mobile-navbar-menu .sub-menu a {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    opacity: 0.9;
  }

  /* Optional: thin divider under top area */
  .mobile-navbar-menu::before{
    content:"";
    position:sticky; top:0; display:block; height:1px;
    background:rgba(255,255,255,.08);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mobile-navbar-toggle span,
  .mobile-navbar-toggle span::before,
  .mobile-navbar-toggle span::after,
  .mobile-navbar-overlay,
  .mobile-navbar-menu{ transition:none !important; }
}