/* =====================================================================
   responsive.css — Mobil ve tablet düzenlemeleri (UTF-8)
   ===================================================================== */

/* Tablet */
@media (max-width:1024px){
  .hk-grid,.product-grid,.bolge-grid{grid-template-columns:repeat(3,1fr)}
  .sektor-grid{grid-template-columns:repeat(3,1fr)}
  .surec-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .slide-content h1{font-size:2.1rem}
}

/* Mobil */
@media (max-width:768px){
  body{font-size:15px}
  .tb-hide{display:none}
  .tb-mail{display:none}
  .tb-teslimat{display:inline-flex}
  .topbar-in{justify-content:center;gap:14px}

  /* Menü — mobil açılır (madde 24) */
  .nav-toggle{display:flex;position:relative;z-index:1600}
  /* Menü açıkken hamburger gizlenir; kapatma menü içindeki X ile yapılır */
  body.nav-open .nav-toggle{opacity:0;pointer-events:none}
  .main-nav{
    position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100vh;
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:64px 0 30px;box-shadow:-8px 0 30px rgba(0,0,0,.2);
    transition:right .32s ease;overflow-y:auto;z-index:1550;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav.open{right:0}

  /* Kapatma (X) butonu — menü içinde sağ üst */
  .nav-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:12px;right:14px;
    width:42px;height:42px;border:none;background:var(--gri);
    color:var(--mavi);font-size:2rem;line-height:1;cursor:pointer;
    border-radius:8px;z-index:1560;padding:0;
  }
  .nav-close:hover{background:var(--mavi);color:#fff}
  .main-nav>ul{flex-direction:column;gap:0;width:100%}
  .main-nav>ul>li{width:100%;border-bottom:1px solid var(--border)}
  .main-nav>ul>li>a{padding:15px 24px;border-radius:0}
  .caret{float:right}
  /* Alt menü mobilde akordeon */
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    max-height:0;overflow:hidden;padding:0;transition:max-height .3s ease;
    background:var(--gri);border-radius:0;
  }
  .has-sub.open .submenu{max-height:2000px;padding:6px 0}
  .has-sub:hover .submenu{opacity:1;visibility:visible} /* hover mobilde devre dışı gibi davranır */
  .submenu li a{padding:12px 34px}
  .nav-cta{margin:16px 24px 0;text-align:center}

  /* Menü açıkken arka plan overlay */
  .nav-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1300;
    opacity:0;visibility:hidden;transition:.3s;
  }
  .nav-overlay.show{opacity:1;visibility:visible}

  /* Menü açıkken header'ı (ve içindeki fixed menüyü) overlay'in üstüne çıkar.
     Sticky header kendi stacking context'ini oluşturduğu için, menünün
     overlay üstünde ve tıklanabilir kalması adına header z-index'i yükseltilir. */
  body.nav-open .site-header{z-index:1500}

  /* Slider */
  .slides{height:400px}
  .slide-content h1{font-size:1.6rem}
  .slide-content h2{font-size:1.05rem}
  .slide-content p{font-size:.95rem}
  .slider-nav{width:42px;height:42px;font-size:1.7rem}
  .slider-nav.prev{left:8px}.slider-nav.next{right:8px}

  /* Grid'ler tek/çift sütun */
  .hk-grid,.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sektor-grid,.bolge-grid{grid-template-columns:1fr}
  .surec-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .f-logo{margin-left:auto;margin-right:auto}
  .iletisim-grid{grid-template-columns:1fr}

  .sec-title{font-size:1.5rem}
  .hizmet-hero h1{font-size:1.6rem}
  .hizmet-makale h2{font-size:1.25rem}
  .page-content h1{font-size:1.6rem}

  /* Mobil sabit butonlar görünür */
  .mobile-cta{display:flex}
  body{padding-bottom:56px} /* sabit buton için boşluk */

  .cta-uskir{font-size:.9rem;padding:12px 14px}
}

@media (max-width:420px){
  .hk-grid,.product-grid{grid-template-columns:1fr}
  .slides{height:340px}
  .slide-content h1{font-size:1.4rem}
}