/* ==========================================================================
   ALBIM — Temel katman
   Sıfırlama, tipografi, düzen. Bileşen yok — o components.css'te.
   Bu dosyada sabit renk/ölçü YAZILMAZ; hep tokens.css'teki değişkenler.
   ========================================================================== */

/* ------------------------------------------------------------- SIFIRLAMA */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--zemin-sayfa);
  color: var(--renk-murekkep);
  font-family: var(--yazi-govde);
  font-size: var(--fs-base);
  line-height: var(--lh-govde);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Türkçe ve Fransızca sık sık uzun kelime üretir; taşma yerine kır */
  overflow-wrap: break-word;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* Liste ve başlıkların tarayıcı varsayılanları sıfırlanır */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

/* --------------------------------------------------------------- TİPOGRAFİ */

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  font-weight: var(--fw-orta);
  line-height: var(--lh-sik);
  letter-spacing: var(--ls-baslik);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

/* Hero başlığı — sadece sayfa başında tek kez */
.albim-hero-baslik {
  font-size: clamp(var(--fs-2xl), 4.4vw, var(--fs-4xl));
  line-height: var(--lh-sik);
}

p { text-wrap: pretty; }

/* Okunan metin 65 karakteri geçmesin */
/* 65ch okunur satir uzunlugu. Yalniz metinden olusan bilgi sayfalarinda
   sutun kabin icinde ORTALANIYOR: solda yasli durunca sagdaki bosluk
   "eksik kalmis" hissi veriyordu. Kart/izgara icindeki kullanimlar
   etkilenmesin diye ortalama yalniz sayfa icerigine veriliyor. */
.albim-metin { max-width: 65ch; }
.albim-kap > article > .albim-metin,
article.page > .albim-metin { margin-inline: auto; }

a {
  color: var(--albim-kirmizi);
  text-decoration: none;
}
a:hover {
  color: var(--albim-kirmizi-koyu);
  text-decoration: underline;
  text-underline-offset: 3px;
}

strong, b { font-weight: var(--fw-kalin); }

/* Mikro etiket — BÜYÜK HARF, geniş harf aralığı */
.albim-etiket {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-kalin);
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--renk-soluk);
}

/* Soluk / ikincil metin */
.albim-soluk { color: var(--renk-govde); }
.albim-cok-soluk { color: var(--renk-soluk); }

/* Rakamların hizalanması gereken her yer: fiyat, saat, adet, tarih */
.albim-rakam,
.albim-fiyat,
table td, table th {
  font-variant-numeric: tabular-nums;
}

/* Fiyat — Fransız mevzuatı gereği yanında birim fiyat da bulunmalı */
.albim-fiyat {
  font-family: var(--yazi-govde);
  font-size: var(--fs-lg);
  font-weight: var(--fw-kalin);
  letter-spacing: -0.01em;
}
.albim-fiyat-eski {
  color: var(--renk-soluk);
  text-decoration: line-through;
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}
.albim-birim-fiyat {
  font-size: var(--fs-xs);
  color: var(--renk-govde);
}

/* ------------------------------------------------------------------ DÜZEN */

.albim-kap {
  width: 100%;
  max-width: calc(var(--icerik-genislik) + var(--sayfa-marj-genis) * 2);
  margin-inline: auto;
  padding-inline: var(--sayfa-marj);
}
@media (min-width: 768px) {
  .albim-kap { padding-inline: var(--sayfa-marj-genis); }
}

/* 12 kolonluk ızgara */
.albim-izgara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--kolon-aralik);
}

/* Dikey yığın — kardeşler arası boşluk margin ile değil gap ile */
.albim-yigin      { display: flex; flex-direction: column; gap: var(--a-3); }
.albim-yigin-s    { display: flex; flex-direction: column; gap: var(--a-2); }
.albim-yigin-l    { display: flex; flex-direction: column; gap: var(--a-6); }
.albim-satir      { display: flex; align-items: center; gap: var(--a-2); }
.albim-satir-arasi{ display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); }

/* Bölüm — sayfa dikey ritmi */
.albim-bolum { padding-block: var(--a-6); }
@media (min-width: 768px) {
  .albim-bolum { padding-block: var(--a-8); }
}
.albim-bolum--serit { background: var(--zemin-serit); }
.albim-bolum--koyu  { background: var(--zemin-koyu); color: var(--uzeri-koyu); }

/* Geniş içerik (tablo, kod, geniş kart dizisi) kendi kabında kaysın —
   sayfa gövdesi ASLA yatay kaymaz */
.albim-kaydir {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* İmza motifi — bölüm ayracı ve başlık altı */
.albim-kivrim {
  height: 12px;
  background-image: var(--motif-kivrim);
  background-repeat: repeat-x;
}
.albim-kivrim--dar { width: 120px; }

/* ------------------------------------------------------------------ ODAK */

/*
 * Uc kural, sirasi onemli.
 *
 * Yalnizca :focus-visible yazsaydik, o secici desteklenmeyen bir tarayicida
 * (eski iOS Safari, 15.4 oncesi) SITEDE HICBIR YERDE odak halkasi kalmazdi —
 * klavyeyle gezen biri nerede oldugunu hic goremezdi. Ilk kural o durumda
 * devrede kalir.
 *
 * Ikinci kural fareyle tiklamada halkayi kaldiriyor; desteklenmeyen
 * tarayicida bu kural da dustugu icin halka fareyle de cikar - fazladan bir
 * halka, hic halka olmamasindan iyidir.
 */
:focus {
  outline: var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset: var(--odak-bosluk);
  border-radius: var(--kose-kucuk);
}
/* Fareyle tıklamada halka çıkmasın, klavyede çıksın */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: var(--odak-kalinlik) solid var(--odak-renk);
  outline-offset: var(--odak-bosluk);
  border-radius: var(--kose-kucuk);
}

/* Klavyeyle atlama bağlantısı */
/*
 * ".albim-atla" KURALLARI BURADAN KALDIRILDI (7 Eylul 2026, #182)
 *
 * Baglantinin tum bicimlendirmesi baslik.css'te (satir 20) ve orasi bu
 * dosyadan SONRA yuklendigi icin buradaki kurallar zaten eziliyordu.
 * Ama tamamen etkisiz degillerdi ve bir HATAYA sebep oluyorlardi:
 *
 * Buradaki ".albim-atla:focus" kurali left:16px veriyordu; baslik.css ise
 * baglantiyi left:50% + transform:translate(-50%, 0) ile ORTALIYOR.
 * ":focus" secicisi daha ozgul oldugu icin odaklanildiginda left 16px'e
 * dusuyor, transform ise hala genisligin yarisi kadar sola cekiyordu.
 * Sonuc: odaklanan "Icerige atla" baglantisi sol = -36 px'e oturuyor,
 * yani ekranin sol kenarindan tasip kirpiliyordu. Olctum: 1440 ve 390
 * px'te ayni.
 *
 * Klavyeyle gezen biri icin sayfadaki ilk oge budur; kirpik olmasi
 * dogrudan erisilebilirlik sorunu. Blok silindi, baslik.css'in kendi
 * duzeni gecerli.
 */

/* ------------------------------------------------------- SADECE EKRAN OKUYUCU */

.albim-gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- HAREKET */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}

/* --------------------------------------------------------------- YAZDIRMA */

@media print {
  .albim-yazdirma-gizle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* hidden özniteliği her zaman kazansın — display:flex/grid veren sınıflar
   aksi hâlde onu eziyor (gizli uyarı metinleri görünür kalıyordu). */
[hidden] { display: none !important; }

/* --------------------------------------------- bilgi sayfalarında yazı ritmi

   /teslimat/ ve /kurumsal/ gibi sayfaların içeriği doğrudan WordPress'ten
   geliyor ve temada bu içerik için hiçbir aralık kuralı yoktu: bütün h2'lerin
   üst boşluğu 0 ölçüldü. Sonuç, başlığın kendinden önceki paragrafa yapışması
   ve sayfanın tek bir yığın gibi akmasıydı — nerede yeni konu başladığı
   görünmüyordu.

   Aralıklar başlığı ÖNCEKİ metinden ayırır, kendi paragrafına yakın tutar:
   okurken hangi metnin hangi başlığa ait olduğu göz kararıyla anlaşılır. */

.albim-metin > h2,
.albim-metin > h3 {
  margin-top: var(--a-5);
  margin-bottom: var(--a-2);
}
.albim-metin > h2:first-child,
.albim-metin > h3:first-child { margin-top: 0; }

.albim-metin > p,
.albim-metin > ul,
.albim-metin > ol { margin-block: 0 var(--a-3); }

.albim-metin > ul,
.albim-metin > ol { padding-inline-start: var(--a-4); }
.albim-metin > ul li,
.albim-metin > ol li { margin-block: var(--a-1); }

.albim-metin > :last-child { margin-bottom: 0; }