/* ==========================================================================
   ÇAKMAK PEN . 02 TEMEL
   Reset, gövde tipografisi, bağlantı, odak, erişilebilirlik yardımcıları.
   Bileşen kuralı YOK. Ham renk ve ham ölçü YOK, hepsi 01-token.css'ten gelir.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sabit üstbilgi çapa bağlantısını yutmasın */
  scroll-padding-top: calc(var(--ustbilgi-y) + var(--b5));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font);
  font-size: var(--fs-govde);
  font-weight: 400;
  font-variation-settings: "wdth" var(--gen-normal);
  line-height: var(--satir-govde);
  letter-spacing: var(--aralik-govde);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   BAŞLIKLAR
   Archivo tek aile. Hiyerarşi ağırlık ve genişlik ekseniyle kurulur.
   wght 100-300 aralığı bu projede kullanılmaz.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--b4);
  color: var(--metin);
  font-weight: 700;
  line-height: var(--satir-orta);
  letter-spacing: var(--aralik-baslik);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-variation-settings: "wdth" var(--gen-dar);
  line-height: var(--satir-siki);
  letter-spacing: var(--aralik-display);
}

h2 {
  font-size: var(--fs-h2);
  font-variation-settings: "wdth" var(--gen-dar);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
}

p,
ul,
ol,
dl,
blockquote,
figure,
table {
  margin: 0 0 var(--b4);
}

/* Okunabilirlik: gövde metni 60-75 karakterde tutulur (kılavuz 1.13) */
p,
li {
  max-width: var(--olcu);
  text-wrap: pretty;
}

.giris {
  font-size: var(--fs-giris);
  color: var(--metin-sessiz);
}

small,
.mini {
  font-size: var(--fs-mini);
  color: var(--metin-silik);
}

strong,
b {
  font-weight: 600;
}

/* Etiket: versal, geniş harf aralığı (kılavuz 1.13) */
.etiket {
  display: block;
  margin: 0 0 var(--b3);
  color: var(--metin-silik);
  font-size: var(--fs-etiket);
  font-weight: 600;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  line-height: var(--satir-orta);
}

hr {
  height: 1px;
  margin: var(--b7) 0;
  border: 0;
  background: var(--cizgi);
}

/* --------------------------------------------------------------------------
   LİSTELER
   Satır başında tik işareti YOK (yasak liste). Sade işaret kullanılır.
   -------------------------------------------------------------------------- */
ul,
ol {
  padding-left: 1.35em;
}

li + li {
  margin-top: var(--b2);
}

ul.duz,
ol.duz {
  padding-left: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   BAĞLANTI
   Hover yalnızca gerçekten tıklanabilir öğede. Altı çizgi kaldırılmaz,
   kalınlaşır: bağlantı olduğu her zaman görünür kalsın.
   -------------------------------------------------------------------------- */
a {
  color: var(--eylem);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--sure-hizli) var(--yumusama);
}

a:hover {
  text-decoration-thickness: 2px;
}

a:active {
  color: var(--eylem-basili);
}

/* --------------------------------------------------------------------------
   ODAK
   outline + offset. box-shadow ile halo YAPILMAZ (yasak liste: gölge).
   Offset'in açtığı boşluk zemine karşı ayrımı zaten sağlıyor.
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--odak-kalinlik) solid var(--odak);
  outline-offset: var(--odak-bosluk);
  border-radius: var(--radius-kucuk);
}

/* --------------------------------------------------------------------------
   GÖRSEL VE ORTAM
   Her görselin width/height niteliği HTML'de yazılıdır. Düzen kayması yok.
   -------------------------------------------------------------------------- */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  background: var(--notr-100);
}

figure {
  margin-inline: 0;
}

figcaption {
  margin-top: var(--b3);
  color: var(--metin-sessiz);
  font-size: var(--fs-kucuk);
  line-height: var(--satir-orta);
  max-width: var(--olcu);
}

/* --------------------------------------------------------------------------
   TABLO
   Dar ekranda yatay kaydırma kutunun içinde kalır, gövde asla yana kaymaz.
   -------------------------------------------------------------------------- */
.tablo-kap {
  overflow-x: auto;
  margin: 0 0 var(--b5);
  border: 1px solid var(--cizgi);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-kucuk);
}

caption {
  padding: var(--b3);
  color: var(--metin-sessiz);
  font-size: var(--fs-kucuk);
  text-align: left;
}

th,
td {
  padding: var(--b3) var(--b4);
  border-bottom: 1px solid var(--cizgi);
  text-align: left;
  vertical-align: top;
}

thead th {
  font-size: var(--fs-etiket);
  font-weight: 600;
  letter-spacing: var(--aralik-etiket);
  text-transform: uppercase;
  color: var(--metin-silik);
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   FORM TEMELİ
   Sitede teklif formu yok; bu kurallar arama ve filtre gibi tekil
   denetimler ile ileride doğabilecek ihtiyaç için tanımlıdır.
   -------------------------------------------------------------------------- */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   ERİŞİLEBİLİRLİK YARDIMCILARI
   -------------------------------------------------------------------------- */

/* Ekran okuyucuya görünür, gözle görünmez */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "İçeriğe geç": her sayfada ilk odaklanabilir öğe */
.atla-baglantisi {
  position: absolute;
  top: var(--b3);
  left: var(--b3);
  z-index: var(--z-atla);
  padding: var(--b3) var(--b5);
  min-height: var(--dokunma-y);
  display: inline-flex;
  align-items: center;
  background: var(--yesil-100);
  color: var(--beyaz);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.atla-baglantisi:focus-visible {
  transform: translateY(0);
  outline: var(--odak-kalinlik) solid var(--beyaz);
  outline-offset: calc(var(--odak-bosluk) * -2);
}

/* [hidden] hiçbir bileşen kuralıyla ezilemez */
[hidden] {
  display: none !important;
}

/* Fare ile tıklanınca odak halkası çıkmasın, klavyede çıksın */
:target {
  scroll-margin-top: calc(var(--ustbilgi-y) + var(--b5));
}

/* --------------------------------------------------------------------------
   TEK BAŞINA DURAN BAĞLANTI
   Bir paragrafın veya liste öğesinin TEK içeriği olan bağlantı, cümle içi
   bağlantı değildir: kendi başına bir dokunma hedefidir ve 44px olmalıdır.

   Cümlenin içinde geçen bağlantılar bu kuralın dışında; onların boyutu
   satır yüksekliğiyle sınırlı ve WCAG 2.5.8 bunları özellikle muaf tutar.
   Ölçüm: python _araclar/dokunma-denetle.py
   -------------------------------------------------------------------------- */
p > a:only-child,
li > a:only-child,
dd > a:only-child,
.ozellik-listesi__deger > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma-y);
  /* Kisa kelimeler ("Galeri", "Künye") genislikte esigin altinda kaliyor */
  min-width: var(--dokunma-g);
}