/*
 * VABS · cihaz.css · v19 ortak çekirdek · sürüm 1.0
 * cihaz.js'nin <html data-cihaz data-giris> özniteliklerine göre temel ölçekleme. Sitenin kendi CSS'inden ÖNCE yüklenir;
 * site bu değişkenleri kullanır ya da üzerine yazar.
 *
 * Değişkenler (:root):
 *   --cihaz-kenar      sayfa kenar boşluğu (telefon 16 px)
 *   --cihaz-satir      metin sütununun en çok genişliği (okunabilir satır uzunluğu, ≤ 70ch)
 *   --cihaz-odak       odak halkası kalınlığı
 *   --cihaz-hedef      en küçük dokunma/tıklama hedefi (44 px; dokunmatikte 48 px)
 *   --cihaz-icerik     içerik kabının en çok genişliği
 * Örnek: .kap{max-width:var(--cihaz-icerik);padding-inline:var(--cihaz-kenar);margin-inline:auto}
 *        .metin{max-width:var(--cihaz-satir)}
 *        :focus-visible{outline:var(--cihaz-odak) solid #00A9E0;outline-offset:2px}
 */
:root{
  --cihaz-kenar:16px;
  --cihaz-satir:70ch;
  --cihaz-odak:3px;
  --cihaz-hedef:44px;
  --cihaz-icerik:1200px;
  font-size:100%;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* overflow-x:hidden BİLEREK yok: yatay taşma gizlenmez, düzeltilir (doğrulama scrollWidth ile yapılır). */
img,video,canvas,iframe{max-width:100%;height:auto}
*{box-sizing:border-box}

/* Telefon / katlanır kapalı: 16 px kenar; katlanır kapalı (344 px) için biraz daha sıkı tipografi */
html[data-cihaz="katlanir-kapali"]{font-size:97%}
html[data-cihaz="telefon"],html[data-cihaz="katlanir-kapali"]{--cihaz-kenar:16px;--cihaz-icerik:100%}

/* Tablet (katlanır açık da burada) */
html[data-cihaz="tablet"]{--cihaz-kenar:24px;--cihaz-icerik:100%}

/* Laptop */
html[data-cihaz="laptop"]{--cihaz-kenar:32px;--cihaz-icerik:1200px}

/* Masaüstü (1601–2560): biraz daha büyük yazı, geniş kap */
html[data-cihaz="masaustu"]{font-size:106%;--cihaz-kenar:40px;--cihaz-icerik:1440px}

/* Büyük ekran / TV (> 2560, 3840×2160, 2–3 m okuma mesafesi):
   yazı ölçeği ve odak halkası büyür, satır uzunluğu 70ch ile sınırlı kalır, hedefler büyür. */
html[data-cihaz="buyuk-ekran"]{font-size:175%;--cihaz-kenar:96px;--cihaz-icerik:2600px;--cihaz-odak:6px;--cihaz-hedef:64px;--cihaz-satir:65ch}
html[data-cihaz="buyuk-ekran"] :focus-visible{outline-width:var(--cihaz-odak)}

/* Dokunmatik giriş: hedefler 48 px; üzerine gelme efektleri yok sayılır (hover:none zaten) */
html[data-giris="dokunmatik"]{--cihaz-hedef:48px}
html[data-giris="dokunmatik"] button,html[data-giris="dokunmatik"] [role="button"],html[data-giris="dokunmatik"] a.dugme{min-height:var(--cihaz-hedef)}

/* Okunabilir metin: p, li, dd gibi akışkan metin satırları sınırlı kalır (site sınıflarıyla genişletilebilir) */
.cihaz-metin,.cihaz-metin p{max-width:var(--cihaz-satir)}

/* Yazdırma: ekran ölçeklemesi geri alınır */
@media print{
  :root{font-size:100%;--cihaz-kenar:0;--cihaz-icerik:100%}
  html[data-cihaz]{font-size:100%}
}