/* Reset + tipografi + yardımcı sınıflar. Token kullanımı zorunlu — ham hex/px yok. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-page);
  font-size: 16px;
  line-height: 1.5;
}

img, picture, svg { max-width: 100%; display: block; }

/* Mobilde bazı bölümler (ör. az sayıda ürünle "Öne Çıkan Ürünler" carousel'i)
   kendi overflow-x:auto konteynerine rağmen sayfa düzeyinde yatay kaydırmaya
   sebep oluyordu (ekran görüntüsüyle doğrulandı — logo kırpılıp gerçekten
   kayıyordu). Kök neden: #main-content'in KENDİ genişliği açıkça
   sınırlanmamıştı (yalnızca overflow-x:hidden yetersiz kaldı) — flex
   carousel'in içerik genişliği (birkaç ürün kartı × sabit px genişlik)
   parent'ın "auto" genişlik hesabına sızıp konteyneri de genişletiyordu.
   width:100% + overflow:hidden ile kesin sınırlanır. #main-content,
   header'ın (sticky) ATASI DEĞİL, KARDEŞİ — header'ın position:sticky'sini
   etkilemez (yalnızca html/body'ye uygulanınca bozuluyordu, bu yüzden
   oraya değil buraya uygulandı). */
#main-content,
.dga-footer {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 800; }

/* Tek H1 kuralı — 01-TASARIM-SISTEMI.md §3 */
h1 { font-size: 39px; line-height: 1.05; letter-spacing: -0.02em; }
@media (min-width: 1024px) { h1 { font-size: 48px; } }

.dga-h1--hero { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
@media (min-width: 1024px) { .dga-h1--hero { font-size: 56px; } }

.dga-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dga-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 1024px) { .dga-container { padding-inline: var(--gutter-desktop); } }

.dga-content { max-width: var(--content-max); margin-inline: auto; }

.dga-mono { font-family: var(--font-mono); }

/* Erişilebilirlik — 01-TASARIM-SISTEMI.md §10: her etkileşimli öğede görünür focus halkası */
a, button, input, select, textarea, [tabindex] {
  outline-offset: var(--focus-ring-offset);
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring);
}

.dga-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  z-index: 1000;
}
.dga-skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

.dga-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}