:root{--drawer-bg:#0b1020;--drawer-border:rgba(255,255,255,.08)}
/* Mobile drawer */
#drawerOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.2s;z-index:90}
#drawerOverlay.active{opacity:1;visibility:visible}
#mobileDrawer{position:fixed;top:0;bottom:0;right:0;width:86vw;max-width:360px;background:var(--drawer-bg);border-left:1px solid var(--drawer-border);transform:translateX(100%);transition:transform .25s ease;z-index:91;display:flex;flex-direction:column;padding:16px;overflow:auto}
#mobileDrawer.active{transform:none}
#mobileDrawer .menu{width:100%}
#mobileDrawer .menu > ul{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
#mobileDrawer .menu li{list-style:none}
#mobileDrawer .menu .menu-item > a{display:flex;justify-content:space-between;align-items:center;padding:12px 12px;border-radius:10px;border:1px solid var(--drawer-border);color:#e5e7eb;text-decoration:none}
#mobileDrawer .menu .menu-level{display:none;padding-left:12px;margin-top:6px}
#mobileDrawer .menu .menu-level .menu-item > a{border:none;padding:8px 8px;color:#e5e7eb}
#mobileDrawer .menu .menu-item.open > .menu-level{display:block}
#mobileClose{align-self:flex-end;margin-bottom:6px;background:transparent;color:#fff;border:1px solid var(--drawer-border);width:38px;height:38px;border-radius:10px;display:grid;place-items:center}

/* Footer responsive */
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width: 768px){
  .footer-cols{grid-template-columns:1fr}
  .footer-accordion{border:1px solid var(--drawer-border);border-radius:12px;background:rgba(255,255,255,.02)}
  .footer-accordion summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:600}
  .footer-accordion[open] summary{border-bottom:1px solid var(--drawer-border)}
  .footer-accordion .panel{padding:12px 14px}
}

/* Desktop dropdown styles */
header .menu.dropdown > ul{display:flex;gap:10px}
header .menu .menu-item{position:relative}
header .menu .menu-item > a{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px}
header .menu .menu-item .menu-level{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#0b1020;border:1px solid var(--drawer-border);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.35);padding:8px;z-index:50}
header .menu .menu-item .menu-level > .menu-item > a{display:block;padding:8px 10px;border-radius:8px}
/* show on hover (desktop) */
@media (hover:hover){
  header .menu .menu-item:hover > .menu-level{display:block}
}
/* show when expanded via JS */
header .menu .menu-item > a[aria-expanded="true"] + .menu-level{display:block}

/* Mobile toggle button visibility */
.menu-toggle{display:none}
@media (max-width: 768px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border:1px solid var(--drawer-border);border-radius:10px;background:rgba(255,255,255,.02);color:#e5e7eb}
  header nav.menu{display:none}
  /* Ensure drawer menu is visible on phone widths */
  #mobileDrawer nav.menu{display:block !important}
}

/* Sayfa Kayma (Shift) Sorunu Çözümü */
/* Drawer açıkken body'de kaydırma çubuğunu gizlerken kaymayı engeller */
body.drawer-open {
    overflow: hidden;
    /* Scrollbar genişliği (genellikle 17px) kadar sağa padding ekle */
    padding-right: 17px; 
}

/* Mobil toggle görünürlüğü ve drawer içi menü */
@media (max-width: 768px){
  /* Masaüstünde görünür kalsın, sadece mobilde kapat */
  header .header-menu-wrapper { 
    display: none !important;
  }
  /* Drawer içindeki menüyü göster */
  #mobileDrawer .header-menu-wrapper {
    display: block !important; 
    width: 100%;
    padding-top: 10px;
  }
  /* Drawer menü grid genişliği */
  #mobileDrawer .menu{width:100%; margin-top: 10px;}
}

/* Drawer açıkken mobilde sağ padding'i kaldırarak yatay kaymayı engelle */
@media (max-width: 640px){
  body.drawer-open{ padding-right: 0; }
}

/* Global mobile layout hardening */
@media (max-width: 900px){
  .grid.cols-2{grid-template-columns:1fr !important}
  .grid.cols-3{grid-template-columns:1fr !important}
}
@media (max-width: 640px){
  header{position:static !important; margin-bottom:8px}
  .topbar .container, .topbar-row{flex-wrap:wrap}
  .form-grid{grid-template-columns:1fr !important}
  .form-field{min-width:0}
  .form-field.col-span-2{grid-column:1 / -1}
  .form-control,
  .form-field input,
  .form-field select,
  .form-field textarea{width:100% !important;max-width:100%}
  .faq-item summary{display:block;overflow-wrap:anywhere;word-break:break-word}
}