/* Amiral Kimya — akışkan genişlik ve mobil uyarlama katmanı
 *
 * TEMEL KURAL
 * ───────────
 * Mockup 1440px'lik bir artboard'dur ve portu birebir yapıldı: inline style'lar
 * hiç değiştirilmedi. Bu dosya onları SİLMEZ, yalnızca ezer. Böylece 1440px'te
 * render mockup'la piksel piksel aynı kalır (piksel-diff bunu her koşuda doğrular),
 * diğer genişliklerde sayfa akar.
 *
 * NEDEN .ak-shell HER GENİŞLİKTE AKIŞKAN
 * ──────────────────────────────────────
 * Kabuk 1440px'e sabitken 1440'tan geniş ekranlarda sayfa sola yapışıp sağda
 * beyaz bir şerit bırakıyordu. Bölümlerin koyu zeminleri kenara kadar uzanmalı;
 * içerik ise ortalanmalı. Şablonlardaki her iç kapsayıcı zaten
 * "max-width: 1160/1240px; margin: 0 auto; width: 100%" ile yazılmış durumda,
 * yani kabuğu serbest bırakmak tek başına doğru davranışı veriyor:
 *   1440px'te → birebir aynı (100% = 1440)
 *   daha geniş → zeminler kenara uzanır, içerik ortalanır
 *   daha dar   → içerik daralır, yatay kaydırma olmaz
 */

.ak-shell {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
}

/* KUTU MODELİ — neden yalnızca 1440'ın ALTINDA
 * ────────────────────────────────────────────
 * Mockup'taki kapsayıcılar "width: 100%" ile "padding: 0 40px"u birlikte
 * kullanıyor. box-sizing varsayılanı content-box olduğu için bu, kapsayıcıyı
 * ebeveyninden 80px DAHA GENİŞ yapar. 1440px'lik artboard'da taşan kısım
 * kırpıldığı için fark edilmiyordu; 390px'te taşma ekranın sekizde birine
 * denk geliyor ve içerik sağdan kesiliyordu.
 *
 * Düzeltme 1440'ın altına kilitli: mockup dosyaları bu stil sayfasını
 * yüklemiyor, dolayısıyla border-box'ı her genişlikte açmak 1440px'teki
 * piksel-diff eşitliğini bozardı. 1440 ve üstü mockup'la aynı kalır. */
@media (max-width: 1439px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

/* Görseller hiçbir genişlikte taşmasın. */
img {
  max-width: 100%;
  height: auto;
}

/* ── Tablet yatay: 1024–1279px ────────────────────────────────────────────
   Dört kolonlu ızgaralar ikiye iner, bölüm boşlukları biraz kısalır. */
@media (max-width: 1279px) {
  .ak-section > div[style*="margin: 0 auto"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .ak-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Ürün detaydaki "diğer beş marka" şeridi: 5 kolon 1280 altında sıkışıyor. */
  .ak-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── Tablet dikey: 768–1023px ─────────────────────────────────────────────
   Hero iki kolondan tek kolona iner; bindiren kart hizası sıfırlanır. */
@media (max-width: 1023px) {
  .ak-section > div[style*="margin: 0 auto"] {
    padding-top: 84px !important;
    padding-bottom: 84px !important;
  }
  .ak-hero > div[style*="margin: 0 auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
    padding-bottom: 110px !important;
  }
  .ak-footer-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 40px !important;
  }

  /* Ürün detay: görsel + bilgi iki kolondan alt alta iner. Sağdaki dikey
     ayraç yatay çizgiye döner, yoksa kartın ortasında asılı kalır. */
  .ak-detay-kart {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .ak-detay-kart > div:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid #e7ebf1 !important;
  }
  .ak-grid-3,
  .ak-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Form + yan kart düzeni tek kolona iner. Form kartındaki -64px'lik
     bindirme korunur (hero'ya oturan tasarım hareketi), yan kart normal
     akışta altına geçer. */
  .ak-iki-kolon {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  /* CTA bandı tek kolona inince butonlar sola hizalanmalı. */
  .ak-cta-bant {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  .ak-cta-bant > div:last-child {
    justify-content: flex-start !important;
  }

  /* Hero başlığı: 64px tablet genişliğinde taşıyor.
     Vurgu kelimesi (Cormorant italic) çevresinden %12 büyük kalmalı — bu oran
     DESIGN-SYSTEM-V2'de tanımlı, ezerken de korunuyor: 46 → 52. */
  .ak-hero [style*="font-size: 64px"] {
    font-size: 46px !important;
    letter-spacing: -1px !important;
  }
  .ak-hero [style*="font-size: 72px"] {
    font-size: 52px !important;
  }
}

/* ── Menü kırılımı: ≤899px ────────────────────────────────────────────────
   Hamburger 767'de açılıyordu; oysa yatay menü 900px civarında sıkışmaya
   başlıyor — 768px'te "Ana Sayfa" ve "Teklif Alın" iki satıra kırılıyor,
   header 72px'lik yüksekliğini koruyamıyordu. Bu yüzden menü kırılımı
   içerik kırılımından (767) ayrı ve daha erken. */
@media (max-width: 899px) {
  /* Header: menüyü butonun arkasına al. */
  .ak-header {
    position: relative !important;
  }
  .ak-header-ic {
    height: auto !important;
    min-height: 72px;
    padding: 12px 24px !important;
  }
  .ak-menu-btn {
    display: inline-flex !important;
  }
  .ak-nav {
    display: none !important;
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    background: #0a1426;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px 24px 20px !important;
    z-index: 40;
    border-top: 1px solid rgba(200, 162, 74, 0.2);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  }
  .ak-nav[data-acik="1"] {
    display: flex !important;
  }
  /* JavaScript kapalıysa menü açık kalır — linkler erişilebilir olmalı. */
  .ak-nav.ak-nojs {
    display: flex !important;
    position: static !important;
    box-shadow: none !important;
    border-top: 0 !important;
    padding: 0 0 16px !important;
  }
  .ak-nav-link {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .ak-nav a:last-child {
    margin-top: 12px;
    justify-content: center;
  }
}

/* ── Telefon: ≤767px ──────────────────────────────────────────────────────
   Menü hamburger'e döner, tüm ızgaralar tek kolon olur, başlıklar küçülür. */
@media (max-width: 767px) {
  /* İçerik */
  .ak-section > div[style*="margin: 0 auto"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .ak-grid-3,
  .ak-grid-4,
  .ak-grid-5,
  .ak-form-cift,
  .ak-footer-cols {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  /* Form kartı telefonda 36px dolguyla çok daralıyordu. */
  .ak-iki-kolon > div:first-child {
    padding: 24px !important;
  }
  /* Detay kartı telefonda kenar boşluklarını yer; iç dolgu küçülür.
     Görsel panelinde üst dolgu ayrıca büyütülür: segment ve hacim rozetleri
     mutlak konumlu (top: 20px) ve dar ekranda tenekenin üstüne biniyorlardı. */
  .ak-detay-kart > div {
    padding: 28px 24px !important;
  }
  .ak-detay-kart > div:first-child {
    padding-top: 68px !important;
  }

  /* Portföy kartı başlığı: etiket ile sayaç rozeti yan yana sığmıyor,
     ikisi de kelime kelime kırılıyordu. Alt alta alınır. */
  .ak-portfoy-baslik {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .ak-detay-cta,
  .ak-cta-bant > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ak-detay-cta a,
  .ak-cta-bant a {
    justify-content: center !important;
  }
  .ak-hero > div[style*="margin: 0 auto"] {
    padding: 64px 24px 90px !important;
    gap: 36px !important;
  }

  /* İstatistik şeridi: dikey ayraçlar yatay çizgiye döner. */
  .ak-stats {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }
  .ak-stats > div[style*="width: 1px"] {
    width: 100% !important;
    height: 1px !important;
    align-self: auto !important;
  }

  /* Hero başlığı telefonda 34px; vurgu kelimesi oranı korunuyor (34 → 38). */
  .ak-hero [style*="font-size: 64px"] {
    font-size: 34px !important;
    letter-spacing: -0.8px !important;
  }
  .ak-hero [style*="font-size: 72px"] {
    font-size: 38px !important;
  }

  /* Butonlar alt alta ve tam genişlik — parmakla basılabilir hedef.
     Kapsayıcı flex satırdı; sarmalamak yerine kolona çeviriyoruz ki
     "Ürünleri İnceleyin" iki satıra kırılıp sıkışmasın. */
  .ak-hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ak-hero a[style*="height: 54px"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Küçük telefon: ≤400px ───────────────────────────────────────────────── */
@media (max-width: 400px) {
  .ak-section > div[style*="margin: 0 auto"],
  .ak-hero > div[style*="margin: 0 auto"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}