/* ===== FILE: ufuk-navbar-mobile.css ===== */
/* =========================================================
   ARM NAVBAR — MOBILE OVERRIDES
   Bu dosya sadece 991.98px altı davranışı “sade + şık” yapmak için.
   ========================================================= */

@media (max-width: 991.98px){

  /* Offcanvas panel (mobil menü) — cam + degradeli */
  #ufukMobileMenu.ufuk-canvas.offcanvas{
    --bs-offcanvas-width: min(92vw, 380px);

    /* Üstte katı beyaz “katman” hissini azalt */
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.84) 52%,
      rgba(255,255,255,.78) 100%
    ) !important;

    border-left: 1px solid rgba(15,23,42,.10);
    box-shadow: -14px 0 44px rgba(2,6,23,.18);

    backdrop-filter: blur(14px) saturate(165%);
    -webkit-backdrop-filter: blur(14px) saturate(165%);

    overflow: hidden;

    /* GPU/compositor stabilizasyonu */
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    will-change: transform;
  }

/* Performans: panel kapalıyken blur kapalı (scroll jitter riskini azaltır) */
  #ufukMobileMenu.ufuk-canvas.offcanvas:not(.show):not(.showing){
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Üstte hafif rose glow (mobilde daha az agresif) */
  #ufukMobileMenu.ufuk-canvas.offcanvas::before{
    content:"";
    position:absolute;
    inset:-45% -40% auto auto;
    width:320px; height:320px;
    background: radial-gradient(circle at 30% 30%,
      rgba(0,74,173,.24) 0%,
      rgba(0,74,173,.10) 35%,
      rgba(0,74,173,0) 70%
    );
    filter: blur(10px);
    pointer-events:none;
    z-index:0;
  }

  #ufukMobileMenu.ufuk-canvas.offcanvas::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:46%;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(0,74,173,.06) 55%,
      rgba(2,6,23,.04) 100%
    );
    pointer-events:none;
    z-index:0;
  }

  /* Header */
  #ufukMobileMenu .offcanvas-header{
    z-index: 1;

    background: linear-gradient(
      180deg,
      rgba(255,255,255,.76),
      rgba(255,255,255,.60)
    ) !important;

    border-bottom: 1px solid rgba(15,23,42,.06);
    padding: 12px 14px;

    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
  }

  #ufukMobileMenu .btn-close{
    opacity: .80;
    filter: none;
  }

  #ufukMobileMenu .offcanvas-body{
    z-index: 1;

    padding: 14px 14px 18px;
    background: transparent !important;

    display: flex;
    flex-direction: column;
  }

  /* Mobil menü listesi */
  #ufukMobileMenu .ufuk-menu-mobile{
    list-style: none;
    padding: 6px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Mobil menü linkleri — kart görünümü (glass) */
  #ufukMobileMenu .ufuk-m-pill{
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.10);

    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 12px 26px rgba(2,6,23,.10);

    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);

    display: flex;
    align-items: center;
    gap: 12px;

    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  }

  #ufukMobileMenu .ufuk-m-pill:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(2,6,23,.14);
    border-color: rgba(0,74,173,.18);
    background: rgba(255,255,255,.88) !important;
  }

  #ufukMobileMenu .ufuk-m-pill.is-active{
    background: rgba(255,228,230,.74) !important;
    border-color: rgba(0,74,173,.30);
    color: var(--ufuk-rose-dark);
  }

  /* Backdrop-filter fallback */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    #ufukMobileMenu.ufuk-canvas.offcanvas{
      background: #ffffff !important;
    }
    #ufukMobileMenu .ufuk-m-pill{
      background: #ffffff !important;
    }
  }
}