/* =============================================================================
   RESPONSIVE — Breakpoint uyarlamaları
   En son yüklenen modüldür; önceki kuralları geçersiz kılabilir.

   Kırılım noktaları (Bootstrap ile uyumlu):
     1399px  büyük masaüstü altı
     1199px  laptop / küçük masaüstü — masaüstü menü kapanır
      991px  tablet yatay
      767px  tablet dikey / büyük telefon
      575px  telefon
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Büyük masaüstü altı — 1399px
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  :root { --container-max: 1180px; }

  .mega__inner { grid-template-columns: 240px 1fr; }
}

/* -----------------------------------------------------------------------------
   Laptop — 1199px
   Masaüstü menü kapanır, çekmece devreye girer.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  :root { --header-h: 76px; --header-h-sm: 62px; }

  .burger { display: flex; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: clamp(2.5rem, 5vw, 3.5rem); }
  .footer-brand { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
   Tablet yatay — 991px
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* İki sütunlu bloklar tek sütuna iner; görsel her zaman metnin üstünde */
  .split,
  .split--wide-text,
  .split--wide-media { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .split--media-right > .split__media { order: 0; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Vitrin ızgarası: ilk kart tam genişlik, diğerleri yan yana */
  .showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }
  .showcase > :first-child { grid-row: auto; grid-column: 1 / -1; }
  .showcase .product-card { aspect-ratio: 4 / 5; }
  .showcase > :first-child.product-card { aspect-ratio: 16 / 10; }

  /* Hero alt şeridi dikey yığılır */
  .hero__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .hero-tabs { width: 100%; justify-content: space-between; }

  /* CTA şeridi dikey */
  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
  .cta-band h2 { max-width: none; }

  /* Bülten dikey */
  .footer-news__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .news-form { min-width: 0; }

  /* Başlık + yan aksiyon dikey */
  .section-head-row { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }

  /* Kayan çerçeve gölgesi dar ekranda taşmasın */
  .frame-offset::after { display: none; }
  .intro__badge { right: var(--sp-4); }
}

/* -----------------------------------------------------------------------------
   Tablet dikey / büyük telefon — 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root {
    --section-y: clamp(3.5rem, 2rem + 6vw, 5rem);
    --section-y-sm: clamp(2.5rem, 1.5rem + 4vw, 3.5rem);
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }

  .showcase { grid-template-columns: 1fr; }
  .showcase > :first-child { grid-column: auto; }
  .showcase .product-card,
  .showcase > :first-child.product-card { aspect-ratio: 4 / 5; }

  /* İstatistik şeridi: sol çizgi yerine üst çizgi */
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .stat-strip .stat {
    padding-left: 0;
    padding-top: var(--sp-4);
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .stat-strip--invert .stat { border-top-color: var(--line-invert); }

  /* Hero: sekmeler kaydırılabilir şeride dönüşür */
  .hero { min-height: 88svh; }
  .hero-tabs {
    gap: var(--sp-6);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
  }
  .hero-tabs::-webkit-scrollbar { display: none; }
  .hero__actions .btn-ak { flex: 1 1 auto; justify-content: center; }

  /* Alt bilgi tek sütun */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-legal { gap: var(--sp-4); }

  /* Akordeon başlığı küçülür */
  .acc__trigger { font-size: 1.25rem; padding-block: var(--sp-5); }
}

/* -----------------------------------------------------------------------------
   Telefon — 575px
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

  /* Dokunma hedefleri en az 44px yüksekliğinde kalsın */
  .btn-ak { padding: 1rem 1.75rem; width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }

  /* Butonlar %100 genişlikte olduğu için sarmalayıcı da tam genişlik olmalı;
     aksi halde içeriği kısa olan CTA'larda blok sağdan kırpılmış görünüyor */
  .cta-band__actions { width: 100%; align-self: stretch; }

  .stat-strip { grid-template-columns: 1fr; }


  .page-hero { min-height: 300px; }

  /* Çekmece tam genişlik */
  .drawer { width: 100%; }
  .drawer__link { font-size: 1.35rem; }

  /* Harita yüksekliği azaltılır */
  .footer-map { height: 200px; }

  /* Kart iç boşlukları sıkışır */
  .card-ak__body { padding: var(--sp-5); }
}

/* -----------------------------------------------------------------------------
   Çok küçük ekranlar — 359px
   -------------------------------------------------------------------------- */
@media (max-width: 359.98px) {
  .shell { padding-inline: 1rem; }
  .hero__title { font-size: 2.35rem; }
}

/* -----------------------------------------------------------------------------
   Yatay mod — düşük yükseklikli telefonlar
   Hero tam ekran yerine içerik yüksekliğine uysun.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 3rem; }
  .hero__foot { margin-top: var(--sp-6); }
}

/* -----------------------------------------------------------------------------
   Yazdırma
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .to-top, .scroll-progress,
  .drawer, .drawer-veil, .cta-band, .hero__stage { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}