/* Cihaz katmanı

   Beş cihaz sınıfı. Her biri ayrı bir düzen; aynı düzenin
   büyütülmüş hâli değil.

   Sıra küçükten büyüğe: önce mobil yazılır, üstüne eklenir.
   Böylece en kısıtlı cihaz eksik kalmaz. */

:root {
  --okuma-genisligi: 68ch;
  --dokunma-hedefi: 44px;
  --kenar-bosluk: var(--aralik-4, 16px);
  --sutun: 1;
}

/* Yatay kayma hiçbir cihazda olmamalı */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg, table { max-width: 100%; height: auto; }

/* Dokunma hedefleri parmak ölçüsünde */
button, a[role="button"], input[type="submit"], .dokunulabilir {
  min-height: var(--dokunma-hedefi);
  min-width: var(--dokunma-hedefi);
}

/* Okuma genişliği: uzun satır okunmaz */
p, li, blockquote { max-width: var(--okuma-genisligi); }

/* Mobil — Tek sütun · tek elle kullanım · alt gezinme · büyük dokunma hedefi */
.sinif-mobil { display: block; }
:root {
  --sutun: 1;
  --kenar-bosluk: var(--aralik-4, 16px);
}

/* Gezinme altta: başparmak oraya ulaşır */
.gezinme { position: fixed; bottom: 0; left: 0; right: 0; }

/* Büyük mobil — Tek sütun ama rahat · yan yana ikili öğeler · alt gezinme */
@media (min-width: 480px) {
  :root {
    --sutun: 1;
    --kenar-bosluk: var(--aralik-5, 24px);
  }
}

/* Tablet — İki sütun · açılır yan panel · hem dokunma hem imleç */
@media (min-width: 768px) {
  :root {
    --sutun: 2;
    --kenar-bosluk: var(--aralik-6, 32px);
  }

  /* Gezinme üste taşınır, yan panel açılabilir */
  .gezinme { position: static; }
  .yan-panel { display: block; }
}

/* Web — Çok sütun · üst gezinme · imleç odaklı · üzerine gelme etkileri */
@media (min-width: 1024px) {
  :root {
    --sutun: 3;
    --kenar-bosluk: var(--aralik-7, 48px);
  }
}

/* Masaüstü — Geniş ekran · kenarlar sınırlanır · okuma genişliği korunur */
@media (min-width: 1440px) {
  :root {
    --sutun: 4;
    --kenar-bosluk: var(--aralik-8, 64px);
  }

  /* Geniş ekranda içerik kenarlara yapışmaz */
  .kapsayici { max-width: 1320px; margin-inline: auto; }
}

/* Izgara, sütun sayısını cihazdan alır */
.izgara {
  display: grid;
  grid-template-columns: repeat(var(--sutun), minmax(0, 1fr));
  gap: var(--aralik-4, 16px);
}

/* CİHAZIN KENDİSİ
   Ekran genişliği tek başına yetmez: 1024px'lik bir dokunmatik
   ekran, aynı genişlikteki bir dizüstünden farklı davranmalı. */

/* Dokunmatik: hedefler büyür, üzerine gelme etkileri kapanır */
@media (hover: none) and (pointer: coarse) {
  :root { --dokunma-hedefi: 48px; }
  .ustune-gelince { display: none; }
  .dokununca { display: block; }
}

/* İnce imleç: üzerine gelme etkileri açılır */
@media (hover: hover) and (pointer: fine) {
  .ustune-gelince { display: block; }
}

/* Yatay tutulan telefon: yükseklik kısıtlı */
@media (max-height: 480px) and (orientation: landscape) {
  .gezinme { position: static; }
  .tam-ekran { min-height: auto; }
}

/* Hareket azaltma isteği: saygı gösterilir */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Yoğun ekran: ince çizgiler kaybolmasın */
@media (min-resolution: 2dppx) {
  .ince-cizgi { border-width: 0.5px; }
}

/* Yazdırma: gezinme ve süs çıkar */
@media print {
  .gezinme, .yan-panel, .sus { display: none; }
  body { max-width: none; }
}