@charset "UTF-8";
/* =============================================================================
   NEMEKS | hasarkurutma.com.tr
   RESPONSIVE / MOBİL STİL DOSYASI  (Madde 22: mobil CSS ayrı dosyada)
   Kırılım noktaları: 1200px, 1024px, 860px, 640px, 420px
   ============================================================================= */

/* ========================================================== 1200px ve altı */
@media (max-width: 1200px) {

  .hizmet-izgara { grid-template-columns: repeat(3, 1fr); }
  .surec-izgara  { grid-template-columns: repeat(2, 1fr); }
  .cihaz-izgara  { grid-template-columns: repeat(2, 1fr); }
  .neden-izgara  { grid-template-columns: repeat(2, 1fr); }

  .ic-link-liste       { grid-template-columns: repeat(4, 1fr); }
  .ic-link-liste-genis { grid-template-columns: repeat(3, 1fr); }
  .bolge-link-liste    { grid-template-columns: repeat(6, 1fr); }
  .bolge-izgara        { grid-template-columns: repeat(4, 1fr); }
  .bolge-izgara-sik    { grid-template-columns: repeat(6, 1fr); }

  .icerik-duzen { grid-template-columns: minmax(0,1fr) 300px; gap: 36px; }
  .alt-ust      { grid-template-columns: 1.5fr 1fr 1fr; }
  .alt-kurumsal { grid-column: 1 / -1; }

  .banner-h1 { font-size: 2.7rem; }
  h1 { font-size: 2.3rem; }
}

/* ========================================================== 1024px ve altı — MOBİL MENÜ */
@media (max-width: 1024px) {

  html { scroll-padding-top: 80px; }

  /* --- Mobil menü düğmesi --- */
  .menu-dugmesi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--mavi-acik);
  }
  .menu-dugmesi span {
    display: block;
    height: 2.5px;
    width: 100%;
    background: var(--lacivert);
    border-radius: 2px;
    transition: all .3s ease;
  }
  .menu-dugmesi[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-dugmesi[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-dugmesi[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* --- Açılır mobil menü ---
     ÖNEMLİ: .site-basligi sticky + z-index taşıdığı için kendi yığın bağlamını
     (stacking context) oluşturur. Menü ve düğme onun ÇOCUĞU olduğundan, kendi
     z-index değerleri body üzerindeki karartma katmanıyla kıyaslanamaz.
     Bu yüzden menü açıkken başlığın kendi z-index'i karartmanın üzerine çıkarılır.
     Ayrıca kayma için 'right' yerine 'transform' kullanılır; 'right: -100%'
     belgeyi yatayda taşırıp mobilde yan kaydırma/bozulma yaratıyordu. */
  .ana-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 88vw);
    height: 100dvh;
    max-height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 88px 0 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 40px rgba(11,37,69,.2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
    z-index: 2;
  }
  .ana-menu.acik { transform: translateX(0); visibility: visible; }

  /* Menü açıkken başlık, karartma katmanının üzerine çıkar */
  body.menu-acik .site-basligi { z-index: 9000; }

  body.menu-acik { overflow: hidden; }
  body.menu-acik::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(7,27,51,.55);
    z-index: 8000;
  }

  /* Yapışkan iletişim çubuğu (z-index 9999) menünün üstüne çıkmasın */
  body.menu-acik .sticky-contact { display: none; }

  .menu-dugmesi { position: relative; z-index: 3; }

  .menu-liste { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-liste > li { border-bottom: 1px solid var(--cizgi-acik); }
  .menu-liste > li > a { padding: 16px 24px; font-size: 1rem; border-radius: 0; }
  .menu-liste > li > a .ok { display: none; }

  /* Mobil alt menü aç/kapa düğmesi */
  .acilir { position: relative; }
  .alt-menu-dugmesi {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 58px; height: 54px;
    z-index: 2;
  }
  .alt-menu-dugmesi::before,
  .alt-menu-dugmesi::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    background: var(--lacivert);
    transition: all var(--gecis);
  }
  .alt-menu-dugmesi::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
  .alt-menu-dugmesi::after  { width: 2px; height: 13px; transform: translate(-50%, -50%); }
  .acilir.acik .alt-menu-dugmesi::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

  .acilir-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--zemin-gri);
    transition: max-height .35s ease;
    columns: 1 !important;
  }
  .acilir.acik > .acilir-menu { max-height: 1400px; overflow-y: auto; padding: 8px 0; }
  .acilir:hover > .acilir-menu { opacity: 1; visibility: visible; }
  .acilir-menu li a { padding: 11px 38px; font-size: .92rem; }

  .menu-cta { padding: 20px 24px; }
  .menu-cta .dugme { width: 100%; }

  /* --- Diğer düzen ayarları --- */
  .icerik-duzen { grid-template-columns: 1fr; }
  .yan-sutun { position: static; grid-row: 2; }
  .yan-link-liste { max-height: none; }

  .sayfa-basi-ic { grid-template-columns: 1fr; gap: 36px; }
  .sayfa-basi-gorsel { order: -1; }
  .kurumsal-ic { grid-template-columns: 1fr; gap: 36px; }

  .guven-izgara { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }

  .banner-slaytlar { height: 540px; }
  .banner-h1 { font-size: 2.3rem; }
  .banner-h2 { font-size: 1.2rem; }

  .hizli-teklif-ic { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hizli-teklif-dugmeler { width: 100%; }
  .hizli-teklif-dugmeler .dugme { flex: 1; }
}

/* ========================================================== 860px ve altı */
@media (max-width: 860px) {

  body { font-size: 15.5px; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }
  .bolum-basligi h2 { font-size: 1.7rem; }
  .sayfa-basi h1 { font-size: 2rem; }
  .makale h2 { font-size: 1.45rem; }
  .makale h3 { font-size: 1.15rem; }

  .hizmet-izgara,
  .ilgili-hizmetler .hizmet-izgara { grid-template-columns: repeat(2, 1fr); }
  .cihaz-izgara  { grid-template-columns: 1fr; }
  .neden-izgara  { grid-template-columns: 1fr; }
  .surec-izgara  { grid-template-columns: 1fr; }
  .kanal-izgara  { grid-template-columns: 1fr; }
  .sube-izgara,
  .sube-izgara-genis { grid-template-columns: 1fr; }
  .kurumsal-kartlar { grid-template-columns: 1fr; }

  .ic-link-liste,
  .ic-link-liste-genis { grid-template-columns: repeat(2, 1fr); }
  .bolge-link-liste    { grid-template-columns: repeat(3, 1fr); }
  .bolge-izgara        { grid-template-columns: repeat(3, 1fr); }
  .bolge-izgara-sik    { grid-template-columns: repeat(4, 1fr); }

  .alt-ust { grid-template-columns: 1fr 1fr; gap: 32px; }
  .alt-son { flex-direction: column; align-items: flex-start; gap: 14px; }
  .alt-son-menu { gap: 16px; }

  .ust-serit-metin { display: none; }
  .ust-serit-ic { justify-content: center; }

  .icerik-alani { padding: 44px 0; }
  .hizmetler-bolumu, .surec, .kurumsal, .cihazlar,
  .neden-biz, .sss, .ic-link-bolumu, .bolge-bolumu, .sube-bolumu { padding: 52px 0; }

  .banner-slaytlar { height: 480px; }
  .banner-h1 { font-size: 1.9rem; }
  .banner-h2 { font-size: 1.05rem; }
  .banner-p  { font-size: .98rem; }
  .banner-ok { display: none; }

  .ozet-satir { grid-template-columns: 1fr; gap: 2px; }
  .ozet-satir dt { font-size: .82rem; color: var(--metin-acik); }

  .site-alt { padding-bottom: 10px; }
}

/* ========================================================== 768px ve altı — YAPIŞKAN İLETİŞİM
   Çağrı/WhatsApp çubuğu yalnızca mobilde görünür. Temel stiller style.css içindedir. */
@media (max-width: 768px) {

  .sticky-contact { display: flex; }

  .contact-btn {
    font-size: 18px;
    padding: 16px 15px;
    gap: 8px;
  }
  .btn-icon { width: 20px; height: 20px; }

  /* Çubuğun içeriğin son satırını kapatmaması için alt boşluk */
  body { padding-bottom: 104px; }
}

@media (max-width: 480px) {

  .contact-btn {
    font-size: 15px;
    padding: 14px 10px;
    gap: 6px;
  }
  .btn-icon { width: 18px; height: 18px; }

  body { padding-bottom: 96px; }
}

/* ========================================================== 640px ve altı */
@media (max-width: 640px) {

  .kapsayici { padding: 0 18px; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.45rem; }
  .bolum-basligi { margin-bottom: 32px; }
  .bolum-basligi h2 { font-size: 1.5rem; }
  .sayfa-basi h1 { font-size: 1.75rem; }
  .sayfa-basi-h2 { font-size: 1.08rem; }

  .hizmet-izgara,
  .ilgili-hizmetler .hizmet-izgara { grid-template-columns: 1fr; }
  .guven-izgara { grid-template-columns: repeat(2, 1fr); }
  .bolge-izgara { grid-template-columns: repeat(2, 1fr); }
  .bolge-izgara-sik { grid-template-columns: repeat(3, 1fr); }
  .bolge-link-liste { grid-template-columns: repeat(2, 1fr); }
  .alt-ust { grid-template-columns: 1fr; }

  .sayfa-basi-dugmeler,
  .banner-dugmeler { flex-direction: column; width: 100%; }
  .sayfa-basi-dugmeler .dugme,
  .banner-dugmeler .dugme { width: 100%; }

  .hizli-teklif-dugmeler { flex-direction: column; }

  .banner-slaytlar { height: auto; min-height: 460px; }
  .banner-slayt { position: relative; padding: 56px 0 76px; }
  .banner-slayt:not(.aktif) { display: none; }
  .banner-h1 { font-size: 1.7rem; }
  .banner-noktalar { bottom: 22px; }

  .makale h2 { font-size: 1.3rem; }
  .makale-cta { padding: 18px 20px; }
  .icindekiler, .ozet-kutusu { padding: 20px 22px; }
  .yan-kutu { padding: 20px; }

  .surec-no { font-size: 2.8rem; }
  .sss-soru { padding: 15px 46px 15px 18px; font-size: .94rem; }
  .sss-cevap { padding: 0 18px 16px; }
  .sss-gezinme { padding: 20px; }

  .tablo-sarici { margin-left: -18px; margin-right: -18px; border-radius: 0; border-left: 0; border-right: 0; }

  .cihaz-gorsel { padding: 20px; }
  .cihaz-gorsel img { max-height: 190px; }

  .hata-kod { font-size: 5rem; }
}

/* ========================================================== 420px ve altı */
@media (max-width: 420px) {

  body { font-size: 15px; }

  .logo img { height: 36px; }
  .basligi-ic { min-height: 66px; }

  h1, .sayfa-basi h1 { font-size: 1.55rem; }
  .banner-h1 { font-size: 1.5rem; }
  .banner-h2 { font-size: .98rem; }

  .guven-izgara { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .guven-oge strong { font-size: 1.25rem; }
  .bolge-izgara-sik { grid-template-columns: repeat(2, 1fr); }

  .ic-link-liste,
  .ic-link-liste-genis,
  .bolge-link-liste { grid-template-columns: 1fr; }

  .ust-serit-iletisim { gap: 14px; font-size: .82rem; }
}

/* ========================================================== YAZDIRMA */
@media print {
  .ust-serit, .site-basligi, .banner, .sticky-contact,
  .hizli-teklif, .ic-link-bolumu, .site-alt, .makale-cta,
  .yan-sutun, .kirinti { display: none !important; }

  body { font-size: 11pt; color: #000; padding: 0; }
  .icerik-duzen { grid-template-columns: 1fr; }
  .makale h2 { page-break-after: avoid; }
  .sss-oge { page-break-inside: avoid; }
  .sss-cevap { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ========================================================== ERİŞİLEBİLİRLİK */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}