/* dosya: varliklar/css/site.css
   Ertelenmis yuklenir. Kritik olmayan her sey burada: izgara, cerceve,
   kart, plaka, buton, form, liste, gorsel alani, alt bilgi.

   KURAL: bu dosya JETON TANIMLAMAZ. Tum palet ve olcek degiskenleri
   kritik.css'teki uc blokta yasar. Buradaki --pah-olcu ve --en-boy gibi
   adlar bilesen ICI yerel degerlerdir, palet jetonu degildir.

   KURAL: yuvarlatilmis kose yoktur. Kose kirilimi logonun 45 derece pah
   modulunun tekrari olarak clip-path ile kurulur.

   KURAL: altin dolgu degildir. Cizgi, cerceve ve tasiyici aks olarak
   kullanilir. Tek istisna .dugme-birincil'dir.

   ODAK NOTU: clip-path outline'i da kirpar. Pahli her bilesen odak
   halkasini ::after ile ICERIDEN cizer; boylece halka gorunur kalir. */

/* --- DUZEN ---------------------------------------------------------- */

.kap {
  width: 100%;
  max-width: var(--olcu-kap);
  margin-inline: auto;
  padding-inline: var(--yan-bosluk);
}

/* Govde metni icin dar olcu: satir uzunlugu okunabilirligi belirler ve
   bu sitenin okuyucusu cogunlukla telefonda ve kriz anindadir. */
.kap-dar { max-width: calc(var(--olcu-metin) + 2 * var(--yan-bosluk)); }

.bolum { padding-block: var(--bolum-y); }
.bolum-ikincil { background: var(--zemin-2); }
/* IKI IKINCIL BOLUM YAN YANA GELDIGINDE tek bir blok gibi okunur ve
   aralarinda IKI bolum boslugu olusur -- ust bolumun alt dolgusu arti alt
   bolumun ust dolgusu. Gorunen sey bir ritim degil, bir bosluktur.
   Alt hizmeti olmayan bir uygulama alani sayfasinda govde ve SSS tam
   olarak boyle yan yana duser (olculdu). Ust dolgu dusurulur; ayirmayi
   ust bolumun alt dolgusu zaten yapiyor. */
.bolum-ikincil + .bolum-ikincil { padding-top: 0; }

.yigin > * + * { margin-top: var(--bosluk-4); }
.yigin-genis > * + * { margin-top: var(--bosluk-6); }

/* Kart izgarasi: mobilde tek sutun, yer buldukca coklu. */
.izgara {
  display: grid;
  gap: var(--bosluk-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.izgara-genis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* SABIT SUTUN GENISLIGI: auto-fit BOS sutunlari toplar ve tek ogeli bir
   liste TUM GENISLIGI kaplar. Olculdu -- 1280 piksellik bir ekranda tek
   avukat karti 1150 piksel genisliyor ve 4:5'lik portre alani 1440 piksel
   yuksekliginde bir bos kutuya donuyordu. auto-fill bos sutunlari AYAKTA
   birakir; bir kart da on kart da ayni genislikte cizilir. Bu buronun
   avukat sayisi BIRDIR, yani burada istisna degil KURAL budur. */
.izgara-sabit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
/* IKILI IZGARA: ogesi DORT olan kumeler icin.
   auto-fit genis ekranda uc sutun verir ve dordu 3+1'e duser; dort giris
   noktasindan biri tek basina kalinca digerlerinden zayif okunur. Iki
   sutun hem dengeli hem de karta daha fazla agirlik verir. */
@media (min-width: 64rem) {
  .izgara-ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Taban 17rem DEGIL 20rem: 17rem'lik bir sutunda serif bir kart basligi
   uc satira kiriliyordu ("What to / expect at a first / hearing"). 20rem,
   72rem'lik kapta uc sutun verir ve baslik iki satirda kalir. */

/* Imza izgarasi: logonun 15 modullu kurgusu. Yalnizca genis ekranda
   acilir; altinda her sey tek sutuna yigilir. */
.izgara-modul { display: grid; gap: var(--bosluk-6); }
@media (min-width: 64rem) {
  .izgara-modul { grid-template-columns: repeat(15, minmax(0, 1fr)); }
  .mod-4  { grid-column: span 4; }
  .mod-5  { grid-column: span 5; }
  .mod-6  { grid-column: span 6; }
  .mod-7  { grid-column: span 7; }
  .mod-8  { grid-column: span 8; }
  .mod-9  { grid-column: span 9; }
  .mod-10 { grid-column: span 10; }
  .mod-15 { grid-column: span 15; }
}

/* --- CERCEVE: pahli hat -----------------------------------------------
   clip-path bir kenarligin pah kenarini da keser; o yuzden hat, dis
   katmanin zemini olarak boyanir ve ic dolgu 1px iceriden kapatir.
   Tek ogeyle calisir: ::before dolguyu tasir, icerik onun ustunde kalir
   (isolation: isolate sayesinde z-index: -1 kutudan disari tasmaz). */
.cerceve {
  --pah-olcu: var(--pah-buyuk);
  position: relative;
  isolation: isolate;
  background: var(--altin-hat);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.cerceve::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--zemin-2);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.cerceve-kucuk { --pah-olcu: var(--pah-kucuk); }
/* Notr hat: gorsel alani ve ikincil kutular icin. Altin yalnizca vurgu
   tasiyan kutularda kullanilir; her kutuda kullanilirsa vurgu kalmaz. */
.cerceve-notr { background: var(--hat); }
.cerceve-zemin::before { background: var(--zemin); }

/* --- KART ----------------------------------------------------------- */
.kart {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  padding: var(--bosluk-5);
  height: 100%;
}
.kart > :last-child { margin-bottom: 0; }
.kart-baslik {
  font-family: var(--serif);
  font-size: var(--yazi-3);
  line-height: 1.2;
  margin: 0;
}
.kart-baslik a { color: inherit; text-decoration: none; }
.kart-baslik a:hover { color: var(--altin); }
/* Kart bir baglantiysa tum kutu tiklanabilir olur. Odak halkasi kartin
   kendi cercevesidir: clip-path disaridaki outline'i kirpardi. */
.kart-bag::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* ODAK HALKASI -- OLCULEN KUSUR VE DUZELTMESI (Revizyon Gorev 2).
   Eski kural halkayi .kart uzerine bagliyordu ve .kart, cerceveyi
   cizen kutu DEGIL onun icindeki <article>'dir. Sonuc
   gercek tarayicida goruldu: klavyeyle bir karta gelindiginde kartin
   TAMAMI dolu altin oluyor ve altin metinli kart basligi altin zeminde
   KAYBOLUYORDU. Ustelik bu, sartname §3.1'in tek sert kuralini da
   kiriyordu -- altin dolgu degildir.
   Halka artik cerceveyi cizen kutuya baglidir ve ICERIDEN cizilir
   (kisit 19: clip-path outline'i kirpar): dis katman altin kalir, ic
   dolgu 1px yerine 3px iceriden kapatir, yani ortaya 3 pikselik bir
   altin bant cikar. Uzerine gelme hattinin (::after) :focus-within
   karsiligi zaten var; ikisi birlikte odagi tartismasiz gosterir. */
.cerceve:focus-within { background: var(--altin); }
.cerceve:focus-within::before { inset: 3px; }

/* --- PLAKA -----------------------------------------------------------
   Logonun dort plakasi gibi ust uste dizilir. Ayni plaka dili kunye
   verisinin her kullaniminda tekrarlanir: baro, lisans, tarih. */
.plaka-yigin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plaka {
  --pah-olcu: var(--pah-kucuk);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-4);
  padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-3) var(--bosluk-5);
  color: var(--plaka-metin);
  /* Altin, plakanin tasiyici aksidir: 3px dikey hat. Dolgu degildir. */
  background-color: var(--plaka-zemin);
  background-image: linear-gradient(var(--altin), var(--altin));
  background-repeat: no-repeat;
  background-size: 3px 100%;
  background-position: left top;
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.plaka-etiket {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--yazi-mikro);
  opacity: .8;
}
.plaka-deger {
  font-family: var(--serif);
  font-size: var(--yazi-4);
  white-space: nowrap;
}

/* --- BUTON -----------------------------------------------------------
   48px dokunma hedefi: bu sayfayi telefonda, aceleyle ve cogu zaman
   ikinci dilinde okuyan biri kullanir. */
.dugme {
  --pah-olcu: var(--pah-kucuk);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: 3rem;
  padding: .8rem 1.5rem;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--yazi-kucuk);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
  transition: background-color .18s ease, color .18s ease;
}
/* Odak halkasi ICERIDEN cizilir; disaridaki outline clip-path ile
   birlikte gorunmez olurdu. */
.dugme::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 2px solid transparent;
  pointer-events: none;
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.dugme:focus-visible { outline: none; }
.dugme:focus-visible::after { border-color: currentColor; }

/* ALTININ TEK DOLGU ISTISNASI. Metin her iki temada da lacivert kalir;
   bu birlesim ikisinde de AA'yi gecer (olculen oran 7,2:1). */
.dugme-birincil {
  background: var(--buton-zemin);
  color: var(--buton-metin);
}
.dugme-birincil:hover { background: #B98D52; }

/* Ikincil buton: altin CERCEVE, dolgu degil. Uzerine gelindiginde hat
   1px yerine 2px olur; renk degismez. */
.dugme-ikincil {
  background: var(--altin-hat);
  color: var(--altin);
}
.dugme-ikincil::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--zemin);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.dugme-ikincil:hover::before { inset: 2px; }
.dugme-ikincil-zemin2::before { background: var(--zemin-2); }

/* Duz metin butonu: yalnizca alt hat. */
.dugme-metin {
  min-height: 2.75rem;
  padding-inline: 0;
  color: var(--altin);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

/* Tema dugmesi (Gorev 6'nin betigi bunu surer, Gorev 7 yerlestirir). */
.tema-dugmesi {
  --pah-olcu: var(--pah-kucuk);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--metin);
  background: var(--hat);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.tema-dugmesi::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--zemin);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.tema-dugmesi:hover { background: var(--altin-hat); }
.tema-dugmesi:focus-visible { outline: none; background: var(--altin-hat); }
.tema-dugmesi:focus-visible::before { inset: 3px; }

/* --- FORM ------------------------------------------------------------
   Girdi kutusu pahli bir hat tasir. Girdi ogesinin KENDISINE clip-path
   uygulanmaz: kirpma hem kenarligin pah kenarini hem de odak halkasini
   siler. Bunun yerine hat sarmalayicidadir ve odakta altina doner. */
.alan { display: block; margin-bottom: var(--bosluk-5); }

.etiket {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--yazi-kucuk);
  letter-spacing: .04em;
  color: var(--metin);
  margin-bottom: var(--bosluk-2);
}
.etiket-zorunlu { color: var(--altin); }

.alan-kutu {
  --pah-olcu: var(--pah-kucuk);
  position: relative;
  isolation: isolate;
  display: block;
  background: var(--hat);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.alan-kutu::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--zemin-2);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
/* Odak: hat altina doner ve 2px olur. Gorunur, kirpilmaz. */
.alan-kutu:focus-within { background: var(--altin-hat); }
.alan-kutu:focus-within::before { inset: 2px; }
.alan-kutu-hatali { background: #B3261E; }

.girdi {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: .8rem 1rem;
  border: 0;
  background: transparent;
  color: var(--metin);
  font-family: var(--sans);
  font-size: var(--yazi-4);
  line-height: 1.5;
}
.girdi:focus { outline: none; }
.girdi::placeholder { color: var(--govde); opacity: 1; }
.girdi-metin { min-height: 9rem; resize: vertical; }

/* Secim kutusu oku CSS ile cizilir: hicbir dis dosya istenmez. */
.alan-kutu-secim::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.35rem;
  background: var(--altin);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.alan-kutu-secim .girdi {
  appearance: none;
  padding-right: 2.5rem;
}

/* Onay ve secenek kutulari yerli birakilir: yerli olan her zaman daha
   erisilebilirdir. Yalnizca vurgu rengi markaya cekilir. */
.onay {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  font-size: var(--yazi-kucuk);
  color: var(--govde);
}
.onay input {
  accent-color: var(--altin);
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .2rem;
  flex: none;
}

.yardim {
  display: block;
  font-size: var(--yazi-kucuk);
  color: var(--govde);
  margin-top: var(--bosluk-2);
}
.hata {
  display: block;
  font-size: var(--yazi-kucuk);
  color: #B3261E;
  margin-top: var(--bosluk-2);
  font-weight: 600;
}

/* --- TIPOGRAFI YARDIMCILARI ------------------------------------------ */

/* Bolum ust basligi: kisa bir altin hat + kunye tipografisi. */
.ust-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--yazi-mikro);
  color: var(--altin);
  margin-bottom: var(--bosluk-4);
}
.ust-baslik::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--altin);
  flex: none;
}

/* Giris paragrafi: govdeden bir kademe buyuk ve tam kontrastta. */
.lede {
  font-size: var(--yazi-3);
  line-height: 1.45;
  color: var(--metin);
}

/* Tasiyici aks: bir blogun solunda duran altin hat. */
.aks {
  padding-left: var(--bosluk-5);
  background-image: var(--altin-hat);
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: left top;
}

blockquote {
  margin: 0;
  font-size: var(--yazi-3);
  line-height: 1.4;
}
blockquote cite {
  display: block;
  margin-top: var(--bosluk-3);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--yazi-mikro);
  color: var(--altin);
}

/* Liste isareti pah modulunun kendisidir: 45 derecelik bir ucgen. */
.liste { list-style: none; margin: 0 0 1em; padding: 0; }
.liste > li {
  position: relative;
  padding-left: var(--bosluk-5);
  margin-bottom: var(--bosluk-3);
  color: var(--govde);
}
.liste > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: .5rem;
  height: .5rem;
  background: var(--altin);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.liste a { color: inherit; }

.ayrac {
  border: 0;
  height: 1px;
  background: var(--hat);
  margin-block: var(--bosluk-7);
}

/* --- GORSEL ALANI ----------------------------------------------------
   Fotograflar yerlestirilmez (sartname §3.5). Alan aspect-ratio ile
   REZERVE edilir; fotograf gelmeden de duzen bozulmaz ve CLS olusmaz.
   Her kullanim yerinde alanin icine cekim brief'i yorum olarak yazilir. */
.gorsel-alani {
  --en-boy: 4 / 5;
  display: block;
  width: 100%;
  aspect-ratio: var(--en-boy);
  background: var(--zemin-2);
  overflow: hidden;
}
/* <picture> AVIF/WebP icin sarmalayicidir ve VARSAYILAN OLARAK INLINE'dir.
   Blok yapilmazsa satir ici kutu satir yuksekligi kadar fazladan bosluk
   birakir ve rezerve edilen alan ile gercek alan AYRISIR -- yani tam da
   aspect-ratio'nun onlemek icin var oldugu CLS geri gelirdi. Olcu
   kurallari hem <img>'e hem <picture>'a yazilir; ikisi de tasiyicinin
   TAMAMINI doldurur ve kirpma object-fit ile yapilir. */
.gorsel-alani picture { display: block; width: 100%; height: 100%; }
.gorsel-alani img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gorsel-yatay { --en-boy: 3 / 2; }
.gorsel-genis { --en-boy: 16 / 9; }
.gorsel-kare  { --en-boy: 1 / 1; }

/* TABLET BANDINDA PORTRE ORANI YATAYA DONER.
   Iki sutunlu duzen 64rem'de kuruluyor; altinda her sey tek sutuna
   duser ve 4:5 bir portre TAM GENISLIK kaplar. Olculdu: 929 piksellik
   bir ekranda kahraman alani 855x1068 piksele cikiyor ve sayfanin
   tamamini yutuyordu -- ziyaretci once dev bir bos kutu goruyor.
   ORAN degistirilir, yukseklik KIRPILMAZ: aspect-ratio hala belirleyici
   oldugu icin ayrilan alan tahmin edilebilir kalir ve CLS sifirdadir.
   48rem altinda portre orani geri gelir -- telefonda dikey bir portre
   dogru okunur ve 4:5 orada yalnizca 335x419 piksel eder. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .gorsel-alani { --en-boy: 3 / 2; }
  .gorsel-genis { --en-boy: 16 / 9; }
}

/* --- YIV RAYI --------------------------------------------------------
   Sol kenardaki imza ogesi: sutunun yiv ritmini tekrarlayan esit arali
   dikey hatlar. Sayfa kaydikca altin hat yukaridan asagi dolar.

   Dolumu JS SURMEZ, yalnizca OLCER: ray.js tek bir ozel ozellik
   (--kaydirma) yazar, yukseklik hesabini CSS yapar. Boylece is bilesik
   katmanda kalir ve INP butcesi korunur. Toplam JS butcesi 5 KB'dir ve
   bu ray onun yaklasik yirmide birini harcar.

   Dar ekranda ray HIC cizilmez: 56px, telefonda okunabilir genislikten
   calar ve bu sayfayi okuyan kisi cogunlukla telefondadir. */
.yiv-rayi { display: none; }
@media (min-width: 64rem) {
  .yiv-rayi {
    display: block;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--ray-genislik);
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--metin) 8%, transparent) 0 1px,
      transparent 1px 8px
    );
  }
  .yiv-rayi__dolum {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 2px;
    height: calc(var(--kaydirma, 0) * 100%);
    background-image: var(--altin-hat);
  }
  .yiv-rayi-var { padding-left: var(--ray-genislik); }
}

/* AZALTILMIS HAREKET: ray SABIT durur, dolum animasyonu CALISMAZ.
   ray.js bu kipte hic calismaz ve --kaydirma hic yazilmaz; asagidaki
   kural olmadan ray o ziyaretcide surekli BOS gorunurdu. */
@media (prefers-reduced-motion: reduce) {
  .yiv-rayi__dolum { height: 100%; transition: none; }
}

/* --- IKON SETI -------------------------------------------------------
   Satir ici SVG'ler (sablonlar/parca/ikon.php). Rengi currentColor
   oldugu icin burada RENK VERILMEZ; verilen tek sey akistaki
   davranisidir.

   BOSLUK GLOBAL BIR KURALLA VERILMEZ. Ikonlarin neredeyse tamami zaten
   flex bir kutunun (.dugme, .sss__soru, .dil-secici__oge) icindedir ve
   o kutunun kendi gap'i vardir; genel bir '.ikon + *' kurali oralarda
   boslugu IKI KEZ verirdi. Akis icindeki tek tek durumlar asagida kendi
   yerlerinde ayarlanir. */
.ikon {
  flex: none;
  vertical-align: -.18em;
}
/* Bayrak keskin bir dikdortgendir ve ince hattini SVG'nin kendisi
   tasir; burada yalnizca akistaki davranisi verilir. */
.bayrak {
  flex: none;
  display: block;
}

/* --- UST BILGI -------------------------------------------------------
   TAM GENISLIK, UC BOLGE, SIFIR SATIR KIRILMASI.

   OLCULEN KUSUR (musteri revizyonu, Gorev 1): .ustbilgi__ic hem
   flex-wrap: wrap tasiyordu hem de .kap ile 72rem'e sikismisti. Dil
   secici uc dil adini yan yana bastigi icin ust bilginin en genis
   parcasiydi; 72rem'lik kaba sigmadigi anda satir kiriliyor ve ust
   bilgi DILDEN DILE farkli yukseklikte ciziliyordu. Musterinin gordugu
   "kayma" buydu.

   IKI DEGISIKLIK BIRLIKTE COZER:
   1. Kap kalkti. Arka plan ve alt cizgi zaten kenardan kenaraydi;
      artik ICERIK de oyle. Yan bosluk sayfanin geri kalaniyla ayni
      jetondan (--yan-bosluk) gelir, yani logo govdenin dis hattiyla
      ayni dikey cizgide baslar.
   2. flex-wrap kalkti; yerine SABIT uc bolgeli bir izgara geldi.
      Izgara satir kirmaz: yer daralirsa orta bolge (gezinme) daralir
      ve kendi icinde yatay kayar. Dil adlari artik acilir panelin
      icinde oldugu icin gorunur genislik zaten sabittir. */
/* UST BILGI TAM GENISLIKTIR -- yiv rayinin altindan da gecer.
   Yiv rayi govdeye 56px'lik bir sol bosluk aciyor (.yiv-rayi-var) ve
   ust bilgi o boslugun ICINDE baslayinca kenardan kenara uzanmiyordu:
   1440px'lik bir pencerede 1369px cikiyordu. Musteri tam genislik
   istedi. Cozum negatif kenar bosluguyla o boslugun DISINA tasmak;
   ic icerik kendi yan boslugunu ayrica tasidigi icin hizalama bozulmaz
   ve ray ust bilginin altinda gorunmeye devam eder. */
.ustbilgi {
  border-bottom: 1px solid var(--hat);
  padding-block: var(--bosluk-4);
  position: relative;
  z-index: 2;
  background: var(--zemin);
}
@media (min-width: 64rem) {
  .yiv-rayi-var .ustbilgi {
    margin-inline-start: calc(-1 * var(--ray-genislik));
    width: calc(100% + var(--ray-genislik));
  }
  /* Ic icerik rayin ustune binmesin: solda ray kadar ek bosluk. */
  .yiv-rayi-var .ustbilgi__ic {
    padding-inline-start: calc(var(--yan-bosluk) + var(--ray-genislik));
  }
}
.ustbilgi__ic {
  display: grid;
  grid-template-areas: "marka gezinme eylem";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bosluk-5);
  width: 100%;
  padding-inline: var(--yan-bosluk);
}
/* 80rem ALTINDA GEZINME KENDI SATIRINA INER -- ve bu bir tasma degil,
   secilmis bir duzendir. Ust satirda marka ve eylemler kalir; ikisi de
   dile gore genislik degistirmez, yani telefonda da masaustunde de ust
   bilgi tek ve ONGORULEBILIR bir yukseklige sahiptir.

   ESIK 64rem DEGIL 80rem -- VE BU OLCULDU. 64rem esigiyle 1024-1250
   piksel arasinda gezinme tek satirda kaliyor ama SIGMIYORDU: kutu
   yatay kaydiriciya donuyor ve o kaydirici ust bilgiyi 15 piksel
   uzatiyordu. Uzama DILE BAGLIYDI -- 1200 pikselde Almanca menu
   tasiyor, Ingilizce ve Turkce tasmiyordu; yani ust bilgi Almancada
   87, digerlerinde 77 piksel oluyordu. Musterinin bildirdigi "dilden
   dile kayma" kusurunun geri kalan yarisi tam olarak buydu.
   80rem'de uc dilin de menusu rahat siger (olculen en genis menu,
   Almanca, 438 piksel; o genislikte kutuya 509 piksel dusuyor). */
@media (max-width: 79.99rem) {
  .ustbilgi__ic {
    grid-template-areas: "marka eylem" "gezinme gezinme";
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--bosluk-4);
  }
}

.marka {
  grid-area: marka;
  /* Kutu icerigine yapisir: 1fr sutunu onu GERDIRIRDI ve o zaman
     logonun sagindaki bos alan da tiklanabilir olurdu. */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-3);
  min-width: 0;
  max-width: 20rem;
  color: var(--metin);
  text-decoration: none;
  font-family: var(--serif);
  font-size: var(--yazi-4);
  line-height: 1.2;
}
/* GERCEK LOGO, satir ici SVG olarak gomulu.
   Dolgusu currentColor; rengi .marka'dan miras alir, yani tema
   degistiginde ikinci bir istek olmadan dogru renge doner.
   Yukseklikten olceklenir: logonun kendi en-boy orani korunur. */
.marka > svg {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: 100%;
}
@media (min-width: 64rem) {
  .marka > svg { height: 2rem; }
}
.marka:hover > svg { opacity: .82; }

/* Ekran okuyucuya gorunur, goze gorunmez. Logo bir <svg> oldugu icin
   buro adi metin olarak AYRICA tasinir -- arama motoru ve ekran
   okuyucu icin. */
.gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* KAYDIRICI GIZLENIR -- ve bu bir suslemeden fazlasidir.
   Gorunur bir yatay kaydirici, kutunun YUKSEKLIGINI 15 piksel
   buyutur; kutu tastigi anda ust bilgi uzar ve tasma DILE BAGLI
   oldugu icin ust bilgi dilden dile farkli yukseklikte cizilir --
   duzeltilen kusurun ta kendisi. Bedeli olculdu ve kabul edildi:
   gezinme yalnizca KENDI SATIRINDAYKEN (80rem alti) tasabilir ve
   orada satirin tamami onundur; gercekten tastigi tek yer dar
   telefondur ve orada kaydirma zaten bir dokunma hareketidir. */
.ana-gezinme {
  grid-area: gezinme;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ana-gezinme::-webkit-scrollbar { display: none; }
.ana-gezinme__liste {
  display: flex;
  gap: var(--bosluk-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ana-gezinme__liste a {
  display: inline-block;
  padding-block: var(--bosluk-2);
  color: var(--metin);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--yazi-kucuk);
  letter-spacing: .06em;
  white-space: nowrap;
}
.ana-gezinme__liste a:hover {
  text-decoration: underline;
  text-decoration-color: var(--altin);
  text-underline-offset: .3em;
}
@media (min-width: 80rem) {
  .ana-gezinme__liste { justify-content: center; }
}

/* EYLEM BOLGESI: dil secici, telefon, tema. WRAP YOK -- bu bolgenin
   satir kirmasi tam olarak duzeltilen kusurdur. */
.ustbilgi__eylem {
  grid-area: eylem;
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  white-space: nowrap;
}

/* TELEFONDA UC SATIR: marka / eylemler / gezinme.
   OLCULDU: logo (161px) + eylem bolgesi (320px) + aradaki bosluk, yan
   bosluklarla birlikte 545 piksel ister. Bunun altinda iki satirli
   duzen marka sutununu 1fr'den SIFIRA kadar eziyor ve LOGO GORUNMEZ
   OLUYORDU (390 pikselde olculdu: .marka genisligi 0). Uc satir bunu
   kesin olarak cozer ve -- onemlisi -- uc dilde de AYNI yuksekligi
   verir. Eski flex-wrap duzeni de telefonda zaten cok satirliydi;
   fark, satir sayisinin artik SECILMIS olmasidir. */
@media (max-width: 36rem) {
  .ustbilgi__ic {
    grid-template-areas: "marka" "eylem" "gezinme";
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--bosluk-3);
  }
  .ustbilgi__eylem { justify-content: space-between; }
  /* PANEL YON DEGISTIRIR. Genis ekranda dil secici satirin SAGINDADIR
     ve panel sag kenara hizalanir; telefonda ayni dugme satirin SOL
     BASINDADIR ve ayni hizalama paneli ekranin disina tasirdi
     (390 pikselde olculdu: panelin sol kenari -10 piksel, bayraklar
     kirpiliyordu). */
  .dil-secici__liste {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
}

/* 360 PIKSELIN ALTINDA NUMARA DUSER, IKON VE DOKUNMA HEDEFI KALIR.
   Eski kural "numara hicbir zaman dusurulmez" diyordu ve o zaman
   dogruydu: dusurulurse geriye ETIKETSIZ bir dugme kalirdi. Artik
   geriye ahize ikonu kaliyor ve dugmenin aria-label'i numarayi
   ZATEN tasiyor (sablonlar/kabuk/ustbilgi.php); yani ne anlam ne de
   erisilebilirlik kaybi var. 320 pikselde alternatif, eylem
   bolgesinin ekrandan TASMASIYDI. */
@media (max-width: 22.5rem) {
  .ustbilgi__tel-no { display: none; }
}

/* --- DIL SECICI ------------------------------------------------------
   K1 geregi dil YALNIZCA adresten cozulur: Turkce tarayicili bir
   ziyaretci kendiliginden Turkceye gitmez. Bu yuzden secici gorunur
   olmak ZORUNDADIR -- ama gorunur olmak, uc dil adini birden ust
   bilgiye yaymak demek degildir.

   Yeni bicim: bayrak + iki harf + ok. Gorunur genislik DILDEN BAGIMSIZ
   ve sabittir; dil adlari panelin icindedir ve panel akista yer
   KAPLAMAZ (position: absolute), yani acilip kapanmasi ust bilginin
   yuksekligini degistirmez.

   Davranis <details>/<summary> ile gelir: klavye, sekme sirasi ve
   genisletilmis/daraltilmis bildirimi yerlidir; JS butcesinden tek
   bayt harcanmaz. */
.dil-secici__kutu { position: relative; }

.dil-secici__dugme {
  --pah-olcu: var(--pah-kucuk);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 2.75rem;
  padding: .35rem .65rem;
  cursor: pointer;
  color: var(--govde);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--yazi-mikro);
  letter-spacing: .08em;
  /* Iki satir birlikte: yerli acilir ucgen hem WebKit'te hem
     digerlerinde kalkar; isareti setin kendi 'ok' ikonu tasir. */
  list-style: none;
  background: var(--altin-hat);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.dil-secici__dugme::-webkit-details-marker { display: none; }
/* Altin hat DOLGU DEGIL CERCEVEDIR: ic katman zemini 1px iceriden
   kapatir (.dugme-ikincil ile ayni kurgu, ayni gerekce). */
.dil-secici__dugme::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--zemin);
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.dil-secici__dugme:hover { color: var(--metin); }
/* KISIT 19: clip-path outline'i da kirpar; odak halkasi ICERIDEN
   cizilir. Halkayi ::after tasir -- ::before zaten zemin katmanidir. */
.dil-secici__dugme::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 2px solid transparent;
  pointer-events: none;
  clip-path: polygon(
    var(--pah-olcu) 0, 100% 0, 100% calc(100% - var(--pah-olcu)),
    calc(100% - var(--pah-olcu)) 100%, 0 100%, 0 var(--pah-olcu)
  );
}
.dil-secici__dugme:focus-visible { outline: none; }
.dil-secici__dugme:focus-visible::after { border-color: currentColor; }
/* Ok panel acikken doner: durumu goz de gorur. */
.dil-secici__kutu[open] .dil-secici__dugme .ikon { transform: rotate(180deg); }

/* PANEL: PLAKA RENKLERI, PAHLI, AKISTA YER KAPLAMAZ.
   Plaka paleti iki temada da TERS kontrastlidir (acikta lacivert
   uzerine krem, koyuda krem uzerine lacivert) ve ikisinde de AA'yi
   gecer. Altin burada METIN DEGIL, yalnizca aktif dilin kenar
   hattidir -- kisit 18 koyu temada altin govde metnini yasaklar.
   Golge YOK: bu tasarimda hicbir yerde golge kullanilmiyor, ustelik
   clip-path box-shadow'u da kirpar ve golge zaten cizilmezdi. */
.dil-secici__liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--bosluk-2));
  inset-inline-end: 0;
  min-width: 11.5rem;
  margin: 0;
  padding: var(--bosluk-2);
  list-style: none;
  background: var(--plaka-zemin);
  color: var(--plaka-metin);
  clip-path: polygon(
    var(--pah-buyuk) 0, 100% 0, 100% calc(100% - var(--pah-buyuk)),
    calc(100% - var(--pah-buyuk)) 100%, 0 100%, 0 var(--pah-buyuk)
  );
}
.dil-secici__oge {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  min-height: 2.5rem;
  padding: .4rem .55rem;
  border-inline-start: 2px solid transparent;
  color: inherit;
  text-decoration: none;
  font-family: var(--sans);
  font-size: var(--yazi-kucuk);
}
.dil-secici__oge:hover { background: rgba(199, 158, 100, .24); }
/* Panel kendisi pahlidir ve kenardaki ogenin outline'ini kirpardi;
   halka bu yuzden ICERIDEN cizilir (kisit 19). */
.dil-secici__oge:focus-visible { outline: none; }
.dil-secici__oge:focus-visible::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid currentColor;
  pointer-events: none;
}
/* AKTIF DIL: kenar hatti + kalin kod. Yalnizca renkle isaretlenmez --
   renk korligi olan ziyaretci icin hat ikinci bir sinyaldir. */
.dil-secici__oge[aria-current] {
  border-inline-start-color: var(--buton-zemin);
  font-weight: 700;
}
.dil-secici__kod {
  min-width: 1.85rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.dil-secici__ad { white-space: nowrap; }

/* Telefon: kriz anindaki ziyaretcinin en kisa yolu. Etiket dar ekranda
   dusurulur; NUMARA ve IKON hicbir zaman dusurulmez. */
.ustbilgi__tel {
  min-height: 2.75rem;
  padding: .5rem 1rem;
  letter-spacing: .04em;
}
.ustbilgi__tel-no { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .ustbilgi__tel-etiket { display: none; }
  .ustbilgi__tel { padding-inline: .8rem; }
}

/* --- ANA SAYFA: KAHRAMAN ---------------------------------------------
   "Ilk Dil": ziyaretcinin ilk gordugu sey kendi dilinde karsilandigidir.
   Karsilama satiri sayfanin en ustunde ve serif olarak durur; buro adi,
   konum ve iki eylem onun altinda. Iki eylem de BIRINCI EKRANDA kalir:
   bu sayfaya bakan kisi cogunlukla kriz anindadir ve telefonundadir. */
.kahraman__metin > * + * { margin-top: var(--bosluk-4); }

.kahraman__karsilama {
  font-family: var(--serif);
  font-size: var(--yazi-3);
  line-height: 1.3;
  color: var(--altin);
  margin: 0;
}

.kahraman__baslik { margin-bottom: var(--bosluk-3); }
.kahraman__buro { display: block; }
.kahraman__konu {
  display: block;
  margin-top: var(--bosluk-3);
  font-size: var(--yazi-3);
  line-height: 1.3;
  color: var(--govde);
}
.kahraman__konum { color: var(--govde); margin: 0; }

/* Eylemler telefonda alt alta, yer buldukca yan yana; her ikisi de
   48px dokunma hedefini .dugme tabanindan alir. */
.kahraman__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-6);
}

.kahraman__gorsel { align-self: start; }

/* Konusulan diller: "Ilk Dil" fikrinin gorunur kanitidir. Degerler
   yapilandirilmis dillerden gelir, sablonda uydurulmaz. */
.dil-rozet-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2);
  margin: 0;
}
.dil-rozet-satir__etiket {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--yazi-mikro);
  color: var(--govde);
}
/* Plaka dilinin kucuk hali: altin yine TASIYICI AKS, dolgu degil. */
.dil-rozet {
  display: inline-block;
  padding: .25rem .7rem .25rem .9rem;
  color: var(--metin);
  background-color: var(--zemin-2);
  background-image: linear-gradient(var(--altin), var(--altin));
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: left top;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--yazi-mikro);
}

/* Kart listeleri isaretsizdir: kartin kendisi zaten bir kutudur. */
.kart-liste { list-style: none; margin: 0; padding: 0; }

/* Rezerve edilmis ama HENUZ FOTOGRAFI OLMAYAN alan: capraz tarama, alanin
   bos degil BEKLIYOR oldugunu soyler. Fotograf geldiginde sinif dusurulur. */
.gorsel-alani-bos {
  /* ZEMIN YOK, YALNIZCA TARAMA -- ve bu OLCULMUS bir degisiklik.
     Alan --zemin-2 ile boyaniyordu; --zemin uzerindeki bir bolumde bu,
     icinde hicbir sey olmayan BEYAZ BIR PLAKA demekti ve sayfanin en
     buyuk ogesi oydu. Musterinin "cok duz ve bos" dedigi seyin buyuk
     parcasi bu kutulardi. Tarama zemine dogrudan cizilince alan "bos"
     degil "REZERVE" okunur -- ve sutun motifi de arkasindan gecebilir.
     Fotograf geldiginde sinif zaten dusuruluyor. */
  background-color: transparent;
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--metin) 6%, transparent) 0 1px,
    transparent 1px 12px
  );
}

/* Iletisim bandi: --zemin uzerinde durur ve ustunde tam genislikte altin
   bir hat tasir. --zemin-2 SECILMEDI cunku bandin ikincil butonu altin
   metindir ve o birlesim koyu temada 4,21:1 verir (asagidaki nota bkz). */
.bant {
  background-image: var(--altin-hat);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: left top;
}
.bant__satir { display: block; }
.bant__kunye { color: var(--govde); }

/* --- KONTRAST DUZELTMESI: IKINCIL YUZEYDE ALTIN METIN -----------------
   OLCULDU (Gorev 5 raporu, endise 1): koyu temada --altin metin --zemin-2
   uzerinde 4,21:1 verir ve AA'nin 4,5 esiginin ALTINDA kalir; --zemin
   uzerinde 4,64:1 ile gecer. Asagidaki secicilerin hepsi KUCUK metindir
   (12-14px), yani "buyuk metin" icin gecerli 3:1 muafiyetinden
   yararlanamaz. Metin --metin'e cevrilir; altin CIZGI olarak kalir. */
.bolum-ikincil .ust-baslik,
.bolum-ikincil .dugme-metin,
.bolum-ikincil blockquote cite,
.kart blockquote cite {
  color: var(--metin);
}
.bolum-ikincil .dugme-metin {
  text-decoration-color: var(--altin);
}

/* --- ALT BILGI ------------------------------------------------------- */
.altbilgi {
  background: var(--zemin-2);
  border-top: 1px solid var(--hat);
  padding-block: var(--bolum-y) var(--bosluk-6);
  font-size: var(--yazi-kucuk);
}
.altbilgi-izgara {
  display: grid;
  gap: var(--bosluk-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* OLCULMUS DUZELTME (Gorev 5 raporu, endise 1): koyu temada --altin
   metin --zemin-2 uzerinde 4,21:1 verir ve AA'nin 4,5 esiginin ALTINDA
   kalir. Bu basliklar 12px/600'dur, yani "buyuk metin" sayilmaz ve 3:1
   muafiyetinden yararlanamaz. Metin --metin'e cekildi; altin, altindaki
   2rem'lik HAT olarak kaldi — zaten tasarim dilinin kurali budur. */
.altbilgi h2, .altbilgi h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--yazi-mikro);
  color: var(--metin);
  margin-bottom: var(--bosluk-4);
  padding-bottom: var(--bosluk-2);
  background-image: linear-gradient(var(--altin), var(--altin));
  background-repeat: no-repeat;
  background-size: 2rem 1px;
  background-position: left bottom;
}
.altbilgi-liste { list-style: none; margin: 0; padding: 0; }
.altbilgi-liste li { margin-bottom: var(--bosluk-2); }
.altbilgi-liste a { color: var(--govde); text-decoration: none; }
.altbilgi-liste a:hover {
  color: var(--metin);
  text-decoration: underline;
  text-decoration-color: var(--altin);
  text-underline-offset: .3em;
}
/* Kunye: adres, telefon ve e-posta tek kaynaktan gelir ve her yerde ayni
   bicimde durur — tutarsiz kunye yerel aramada dogrudan siralama kaybidir. */
.altbilgi-kunye { font-style: normal; color: var(--govde); }
.altbilgi-kunye a { color: var(--metin); text-decoration: none; font-weight: 600; }
.altbilgi-kunye a:hover { text-decoration: underline; text-decoration-color: var(--altin); }
.altbilgi-kunye__ad {
  display: block;
  color: var(--metin);
  font-family: var(--serif);
  font-size: var(--yazi-4);
  margin-bottom: var(--bosluk-2);
}
/* Kunye satirlari IKONLU: adres, telefon ve e-posta birbirine benzeyen
   uc kisa metindir ve goz onlari ancak bir isaretle ayirir. Ikon
   flex'in ilk ogesidir; hizalama baseline degil ilk satirin ustudur,
   cunku adres iki satira sarabilir ve ikon o zaman ORTADA degil
   BASINDA durmalidir. */
.altbilgi-kunye__satir {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
}
.altbilgi-kunye__satir .ikon { margin-top: .28em; color: var(--altin); }
.altbilgi__sutun { min-width: 0; }
.altbilgi-telif { margin: 0; }
/* Telif ve yapimci kunyesi TEK BLOKTUR ve sagda durur; hukuki uyari
   solda kalir. Ikisini ayri esnek oge yapmak, uyari uzun oldugunda
   yapimci satirini ortada birakiyordu. */
.altbilgi-kunye-alt {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-1);
  text-align: end;
}
.altbilgi-yapan { margin: 0; font-size: var(--yazi-mikro); }
.altbilgi-yapan a {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--govde);
  text-decoration: none;
}
.altbilgi-yapan a:hover {
  color: var(--metin);
  text-decoration: underline;
  text-decoration-color: var(--altin);
  text-underline-offset: .3em;
}
.altbilgi-alt {
  margin-top: var(--bosluk-7);
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--hat);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-4);
  justify-content: space-between;
  align-items: flex-end;
  color: var(--govde);
}
/* Illinois meslek kurallari uyarisi: kucuk ama okunur kalir. */
.hukuki-uyari {
  max-width: var(--olcu-metin);
  font-size: var(--yazi-mikro);
  line-height: 1.6;
}

/* --- KIRINTI YOLU ----------------------------------------------------
   Gorsel iz ve BreadcrumbList semasi tek yerden uretilir
   (sablonlar/parca/breadcrumb.php).

   BUYUK HARFE CEVRILMEZ -- ve bu bilincli. Sitedeki her mikro etiket
   text-transform: uppercase tasir, ama kirinti yolu ICERIK tasir: buro
   adi ve uygulama alani basliklari. Turkce bir sayfada Ingilizce bir
   ozel adi buyuk harfe cevirmek "INTERNATIONAL" yerine
   "INTERNATİONAL" uretir (noktali I) -- ayni kusur Gorev 7'de gercek
   bir tarayicida gorulmustu. Ustelik uc-dort basamakli bir izin tamami
   versal olsaydi zaten okunmazdi. */
.kirinti { margin-bottom: var(--bosluk-5); }
.kirinti__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--yazi-kucuk);
  line-height: 1.4;
}
.kirinti__oge { display: inline-flex; align-items: center; }
/* Ayrac: ikon setinin 'ok-sag' yolu. Isaretlemeden gelir (parca/
   breadcrumb.php), CSS'ten degil -- boylece sitedeki her ok AYNI
   dosyadan cizilir. Renk burada verilir cunku ikon currentColor
   kullanir ve kirinti metni --govde'dir. */
.kirinti__oge .ikon {
  margin-inline: var(--bosluk-3);
  color: var(--altin);
}
.kirinti a {
  color: var(--govde);
  text-decoration: none;
  padding-block: var(--bosluk-1);
}
.kirinti a:hover {
  color: var(--metin);
  text-decoration: underline;
  text-decoration-color: var(--altin);
  text-underline-offset: .3em;
}
.kirinti__aktif { color: var(--metin); }

/* --- UYGULAMA ALANI KARTININ ALT HIZMET LISTESI -----------------------
   Ziyaretci "Criminal Defense" basliginda kendi durumunu tanimayabilir;
   "DUI" satirini gorunce tanir. Bu yuzden indeks karti alanin adiyla
   yetinmez, altindaki hizmetleri de gosterir.

   margin-top: auto liste kutunun DIBINE yaslar (.kart bir flex sutunudur)
   ve boylece farkli uzunluktaki ozetlere ragmen izgaradaki listeler ayni
   hizada baslar. */
.alan-alt-liste {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--hat);
}
.alan-alt-liste > li {
  margin-bottom: var(--bosluk-2);
  font-size: var(--yazi-kucuk);
}
.alan-alt-liste > li:last-child { margin-bottom: 0; }
.alan-alt-liste a { color: var(--metin); text-decoration: none; }
.alan-alt-liste a:hover {
  text-decoration: underline;
  text-decoration-color: var(--altin);
  text-underline-offset: .3em;
}

/* --- SIK SORULAN SORULAR ---------------------------------------------
   <details>/<summary> yerli olarak calisir: klavye, ekran okuyucu ve
   sayfa ici arama (Ctrl+F, modern tarayicilarda kapali icerigi de bulur)
   kutudan cikar. Toplam JS butcesi 5 KB ve bu bilesen ondan TEK BAYT
   harcamaz. */
.sss { border-top: 1px solid var(--hat); }
.sss__oge { border-bottom: 1px solid var(--hat); }
.sss__soru {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  padding-block: var(--bosluk-4);
  cursor: pointer;
  /* Iki satir birlikte: yerli ucgen isareti hem WebKit'te hem
     digerlerinde kalkar, yerine pah modulunun ucgeni gelir. */
  list-style: none;
  font-family: var(--serif);
  font-size: var(--yazi-4);
  line-height: 1.35;
  color: var(--metin);
}
.sss__soru::-webkit-details-marker { display: none; }
/* ACILIR ISARETI ARTIK IKON SETININ 'ok-sag' YOLUDUR.
   Onceki hali ::before ile cizilen bir CSS ucgeniydi; sekli dogruydu
   ama sitedeki tek ok o degildi (kart devam baglantilari ve dil secici
   de ok gosteriyor) ve ayni isaretin uc farkli sekilde cizilmesi seti
   set olmaktan cikariyordu. Renk yine altindir: ikon currentColor
   kullandigi icin renk BURADA verilir. */
.sss__soru .ikon {
  margin-top: .3em;
  color: var(--altin);
  transition: transform .18s ease;
}
.sss__oge[open] .sss__soru .ikon { transform: rotate(90deg); }
.sss__cevap {
  max-width: var(--olcu-metin);
  padding-bottom: var(--bosluk-5);
}
.sss__cevap p:last-child { margin-bottom: 0; }

/* --- ZENGIN METIN ----------------------------------------------------
   Panelden gelen zenginmetin govdesi. Sablon bu alani h() ile
   KACIRMAZ (projedeki tek istisna); bicimi burada verilir cunku
   musteri panelde yalnizca yapiyi secer, gorunusu tema belirler.

   BAGLANTI RENGI --metin'dir, --altin DEGIL. Govde bu sayfalarda
   --zemin-2 uzerinde durur ve koyu temada altin metin orada 4,21:1
   verir -- AA'nin 4,5 esiginin ALTINDA (ortak.md kisit 18). Altin,
   tasarim dilinin dedigi yerde kalir: alt cizginin rengi olarak. */
.zengin { color: var(--govde); }
.zengin > :first-child { margin-top: 0; }
.zengin > :last-child { margin-bottom: 0; }
.zengin h2 { font-size: var(--yazi-2); margin-top: var(--bosluk-7); }
.zengin h3 { font-size: var(--yazi-3); margin-top: var(--bosluk-6); }
.zengin p { margin: 0 0 1em; }
.zengin a {
  color: var(--metin);
  text-decoration-color: var(--altin);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.zengin strong, .zengin b { color: var(--metin); font-weight: 600; }
/* Isaretsiz liste: madde isareti pah modulunun ucgenidir. */
.zengin ul { list-style: none; margin: 0 0 1em; padding: 0; }
.zengin ul > li {
  position: relative;
  padding-left: var(--bosluk-5);
  margin-bottom: var(--bosluk-3);
}
.zengin ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: .5rem;
  height: .5rem;
  background: var(--altin);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* Sirali listede SAYI korunur: "ikinci adim" ifadesi ucgenle anlatilamaz. */
.zengin ol { margin: 0 0 1em; padding-left: var(--bosluk-6); }
.zengin ol > li { margin-bottom: var(--bosluk-3); }
.zengin li::marker { color: var(--altin); }
.zengin blockquote {
  margin: var(--bosluk-6) 0;
  padding-left: var(--bosluk-5);
  color: var(--metin);
  background-image: var(--altin-hat);
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: left top;
}
.zengin img { display: block; margin-block: var(--bosluk-5); }
/* Genis bir tabloyu kirpmak yerine KENDI icinde kaydirmak, dar ekranda
   tum sayfayi yatay kaydirilir yapmaktan iyidir. */
.zengin table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.zengin th, .zengin td {
  border-bottom: 1px solid var(--hat);
  padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-3) 0;
  text-align: start;
  vertical-align: top;
}
.zengin th { color: var(--metin); font-family: var(--sans); font-weight: 600; }

/* Govde olcusunu tek sutunlu bir duzende de sinirlar: satir uzunlugu
   okunabilirligi belirler ve bu sayfanin okuyucusu cogunlukla
   telefondadir. */
.olcu-metin { max-width: var(--olcu-metin); }

/* --- HAREKET GUVENLIGI ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- AVUKAT PROFILI: KUNYE BLOKLARI ----------------------------------
   Baro plakalari .plaka-yigin ile cizilir; o bilesen Gorev 7'de kuruldu
   ve alt bilgi ile ana sayfa da onu kullanir. Burada UCUNCU kez tekrar
   eder: sartname §3.1 "ayni plaka dili kunye verisinin her kullaniminda
   tekrarlanir" diyor ve tekrarin kendisi tasarimin imzasidir. */
.avukat-plakalar { margin-top: var(--bosluk-5); }
.avukat-plakalar__baslik {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--yazi-mikro);
  color: var(--govde);
  margin: 0 0 var(--bosluk-3);
}

/* Egitim ve lisans satirlari. Plaka DEGIL, cunku plaka dili ODULE degil
   YETKIYE ayrilmistir: baro kaydi bir izindir, diploma bir gecmistir.
   Ikisini ayni kutuya koymak plakanin anlamini zayiflatirdi. */
.kunye-liste { list-style: none; margin: 0 0 1em; padding: 0; }
.kunye-liste__oge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3) 0;
  border-bottom: 1px solid var(--hat);
}
.kunye-liste__oge:first-child { border-top: 1px solid var(--hat); }
.kunye-liste__ad { color: var(--metin); }
/* KISIT 18: bu deger --zemin-2 uzerinde de cizilebilir; ALTIN DEGILDIR.
   Koyu temada altin kucuk metin o yuzeyde 4,21:1 verir ve AA'nin altinda
   kalir. Sayilar tabular: yan yana duran yillar hizali okunur. */
.kunye-liste__deger {
  color: var(--govde);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- MAKALE ----------------------------------------------------------
   Tarih HER YERDE ISO bicimindedir (YYYY-MM-DD). '12/03/2026' uc dilli
   bir sitede iki farkli gun demektir; ay adi cevirmek ise ucuncu taraf
   bir kutuphane (intl) gerektirirdi ve sartname §8.1 buna kapalidir. */
.makale-tarih {
  color: var(--govde);
  font-variant-numeric: tabular-nums;
}
.kart .makale-tarih { margin: 0 0 var(--bosluk-2); }

.makale-kunye {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bosluk-4);
  color: var(--govde);
  margin: 0 0 var(--bosluk-6);
}
/* KISIT 18: yazar bagi --metin'dir, altin yalnizca ALT CIZGIDIR. Ayni
   kural .makale-alan icin de gecerlidir; ikisi de kucuk metindir ve
   makale kartlari --zemin-2 uzerinde durur. */
.makale-kunye a,
.makale-alan a {
  color: var(--metin);
  text-decoration-color: var(--altin);
  text-decoration-thickness: 1px;
}
/* Vurgu RENK DEGISTIREREK degil, cizgiyi kalinlastirarak verilir:
   uzerine gelindiginde altina donmek ayni kontrast sorununu geri
   getirirdi. */
.makale-kunye a:hover,
.makale-alan a:hover { text-decoration-thickness: 2px; }

/* Kartin alan etiketi GERDIRILMIS BAGLANTININ USTUNDE durur.
   OLCULEN KUSUR SINIFI (alan-indeksi.php, Gorev 2): .kart-bag::after
   katmani tum karti ortuyor ve altinda kalan her baglanti TIKLANAMAZ
   oluyordu. Orada cozum .kart-bag'i hic kullanmamakti; burada kartin
   tamaminin tiklanabilir kalmasi isteniyor, bu yuzden etiket kendi
   yigin baglaminda ustte tutulur. */
.kart-ustu {
  position: relative;
  z-index: 1;
  margin: var(--bosluk-3) 0 0;
}

.makale-kapak { margin-block: var(--bosluk-6); }

.makale-etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin: var(--bosluk-6) 0;
}

/* --- YORUM PUANI -----------------------------------------------------
   YILDIZ KARAKTERI KULLANILMAZ. '*' isaretinin yildiz hali bir font
   meselesidir: yedek yiginda bulunmayan bir sistemde kare kutu olarak
   cizilir ve puan OKUNAMAZ hale gelir. Bir SVG ikonu ise byte butcesine
   (kural 8) ve kritik CSS'e girerdi. Isaret bu yuzden dilin kendisidir:
   bes adet 45 derece pahli kare, dolusu altin, bosu hat rengi.

   KISIT 19 NOTU: .puan__mark clip-path TASIR ve bu bir istisna DEGILDIR --
   oge odak alamaz. Bos bir <span>'dir, tabindex yoktur, ve tasiyicisi
   aria-hidden'dir; odak halkasi kirpilma sorunu yalnizca ODAKLANABILIR
   kutular icin vardir. Sayisal deger ekran okuyucuya .gorsel-gizli ile
   ayrica verilir. */
.puan { margin: 0 0 var(--bosluk-4); }
.puan__satir {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.puan__mark {
  width: .55rem;
  height: .55rem;
  background: var(--hat);
  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}
.puan__mark-dolu { background: var(--altin); }

/* Ortalama puan plakalari. Plaka dili burada UCUNCU baglaminda tekrar
   eder (baro, lisans, puan) -- sartname §3.1. */
.yorum-ozet {
  margin-top: var(--bosluk-6);
  max-width: 24rem;
}

/* KISIT 18: yorum kartlari --zemin-2 uzerindedir; bu kunye satiri
   --govde'dir, altin DEGIL. */
.yorum-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  color: var(--govde);
  margin: var(--bosluk-4) 0 0;
}

/* --- HUKUKI BILDIRIM METNI -------------------------------------------
   Govde zemin_text()'ten gelir ve bir ICERIK ALANI DEGILDIR: kacirilir
   ve paragraflara ayrilir (bkz. sablonlar/hukuki.php). Bu yuzden .zengin
   kullanilmaz -- o sinif baslik, liste ve tablo bicimlendirir ve burada
   hicbiri olusamaz. */
.hukuki-metin { color: var(--govde); }
.hukuki-metin p { margin: 0 0 1em; }
.hukuki-metin > p:last-child { margin-bottom: 0; }
.hukuki-diger { margin-top: var(--bosluk-7); }

/* --- FORM DUZENI -----------------------------------------------------
   Alan bilesenleri (.alan, .etiket, .alan-kutu, .girdi, .onay, .hata,
   .yardim) Gorev 1'de kuruldu ve BURADA YENIDEN TANIMLANMAZ; asagidakiler
   yalnizca iki form sayfasinin (danisma ve randevu) duzen parcalaridir. */

/* Istege bagli alan isareti. ZORUNLU alan bir yildizla ISARETLENIR ve
   istege bagli olan KELIMEYLE soylenir: bir formda ikisini de yildizla
   anlatmak, isaretin anlamini ziyaretcinin tahmin etmesine birakir. */
.etiket-istege-bagli {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--govde);
}
.etiket-istege-bagli::before { content: '\00b7'; margin-inline: .4em; }

.form-eylem { margin: var(--bosluk-6) 0 0; }

/* Genel hata (hiz siniri, bakim/geri yukleme penceresi) FORMUN USTUNDE
   durur: alan basina degil sayfa basina bir sebep tasir ve ziyaretci onu
   formu doldurmaya baslamadan gormelidir. */
.form-genel-hata {
  max-width: var(--olcu-metin);
  margin-bottom: var(--bosluk-5);
  font-size: var(--yazi-govde);
}

/* Basari kutusu: form yerine gecer, o yuzden formla ayni genisligi ve
   ayni ic dolguyu tasir. Hat ALTINDIR (varsayilan .cerceve) -- sayfadaki
   tek olumlu vurgu odur ve baska hicbir yerde kullanilmaz. */
.form-basari {
  max-width: var(--olcu-metin);
  padding: var(--bosluk-6);
}
/* Zorunlu uyari (sartname 5.3) formun HEMEN ALTINDA durur ama gonderim
   dugmesine YAPISMAZ: bitisik duran bir mikro metin, dugmenin bir alt
   satiri gibi okunur ve uyari OLARAK gorulmez. */
.form-danisma + .hukuki-uyari,
.form-randevu + .hukuki-uyari { margin-top: var(--bosluk-6); }

.form-basari > :first-child { margin-top: 0; }
.form-basari > :last-child { margin-bottom: 0; }
.form-basari h2 { margin-top: 0; }

/* --- RANDEVU AKISI ---------------------------------------------------
   Uc adim JavaScript OLMADAN calisir: gun listesi -> saat listesi ->
   onay formu. Buradaki her sey bu uc ekranin duzenidir; hicbir etkilesim
   CSS'e ya da betige bagli DEGILDIR, adimlar arasi gecis sunucudadir. */

/* Saat dilimi satiri. Slotlar buronun diliminde uretilir ve ziyaretci
   Turkiye'den ya da Almanya'dan bakiyor olabilir: dilim SUS DEGIL
   ZORUNLU bilgidir (08-RANDEVU.md bolum 2). */
.randevu-dilim {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bosluk-3);
  margin: var(--bosluk-6) 0 0;
  color: var(--govde);
  font-size: var(--yazi-kucuk);
}
.randevu-dilim__deger {
  color: var(--metin);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* Adim gostergesi. <ol>'dur cunku bu bir gezinme degil bir SIRADIR;
   sayilar ::before ile listeden uretilir, isaretlemeye yazilmaz. */
.randevu-adimlar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3) var(--bosluk-5);
  margin: var(--bosluk-5) 0 0;
  padding: 0;
  counter-reset: kl-adim;
  font-family: var(--sans);
  font-size: var(--yazi-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--govde);
}
.randevu-adimlar__oge {
  counter-increment: kl-adim;
  display: flex;
  align-items: baseline;
  gap: var(--bosluk-2);
}
.randevu-adimlar__oge::before {
  content: counter(kl-adim);
  font-variant-numeric: tabular-nums;
  color: var(--altin);
}
/* KISIT 18: aktif adim --zemin uzerindedir ve --metin ile yazilir; altin
   govde metni koyu temada 4,21:1 verir ve AA'nin altinda kalir. */
.randevu-adimlar__oge-aktif { color: var(--metin); font-weight: 700; }

/* Secilen gun/saat ozeti ve yanindaki geri donus baglantisi. */
.randevu-ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bosluk-3) var(--bosluk-5);
  margin: 0 0 var(--bosluk-6);
  font-family: var(--sans);
  font-size: var(--yazi-3);
  font-variant-numeric: tabular-nums;
  color: var(--metin);
}
.randevu-ozet__dilim {
  font-size: var(--yazi-kucuk);
  color: var(--govde);
}

.randevu-ay + .randevu-ay { margin-top: var(--bosluk-7); }
.randevu-ay__baslik {
  font-family: var(--sans);
  font-size: var(--yazi-mikro);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--govde);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--bosluk-4);
}

/* Gun ve saat listeleri. Ogeler .dugme'dir, yani odak halkasi zaten
   ::after ile ICERIDEN cizilir (kisit 19) ve pah kirpmasi onu yemez;
   burada yalnizca sarmalayicinin akisi tanimlanir. Sabit taban genislik:
   '2026-09-04' ve '09:00' ayni izgarada hizali okunur ve dokunmatik
   hedefi 44 pikselin altina dusmez. */
.secim-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
}
.secim-liste__oge {
  min-width: 7.5rem;
  font-variant-numeric: tabular-nums;
}

/* --- DERINLIK REVIZYONU (musteri: "tasarim cok duz ve bos") -----------
   Yeni bir tasarim dili KURULMADI. Buradaki her kural sartname §3.1'in
   kendi sozcukleriyle konusur: 45 derece pah modulu, yiv ritmi, plaka
   dili ve CIZGI olarak altin. Cesaret tek yere -- sutun motifine --
   harcandi; asagidakiler onun etrafini sakin ve olculu tutar. */

/* 1. BOLUM = PLAKA. Ikincil bolumun kenari yoktu ve acik temada
      #F7F5F1 ile #FFFFFF arasindaki fark neredeyse gorunmuyordu: uc
      bolum tek bir duz yuzey gibi okunuyordu. Bir kil hat, yuzeyi
      zeminin UZERINE kaldirir ve bolum gecisini okunabilir yapar.
      Koyu temada da ayni hat, ayni jetondan. */
.bolum-ikincil {
  border-block: 1px solid var(--hat);
}
/* Iki ikincil bolum yan yana geldiginde tek plaka gibi okunur (yukarida
   ust dolgu zaten sifirlaniyor); aradaki hat o plakayi ORTADAN bolerdi. */
.bolum-ikincil + .bolum-ikincil { border-top: 0; }
/* Alt bilginin kendi ust hatti var; ust komsusu ikincil bolumse iki hat
   ust uste gelir ve 1 piksellik cizgi 2 piksel olur. */
.bolum-ikincil + .altbilgi { border-top: 0; }

/* 2. KART BIR PLAKADIR VE ZEMININDEN AYRILIR.
      OLCULDU: .cerceve-zemin kartin ic yuzeyini --zemin yapar. Ikincil
      (beyaz) bolumde bu dogru bir fark uretir; ama BIRINCIL bolumde
      kart, uzerinde durdugu zeminle AYNI renge duser ve geriye yalnizca
      1 pikselik cerceve kalir. Ana sayfanin makale kartlari tam olarak
      oyleydi. Kart her iki durumda da zemininden bir kademe ayrilir. */
.bolum:not(.bolum-ikincil) .kart-liste > li.cerceve-zemin::before {
  background: var(--zemin-2);
}

/* 3. UST BASLIK YIV RITMINI TASIR.
      Onceki hali 2rem'lik duz bir altin cizgiydi. Ayni yerde, ayni
      agirlikta, ama artik sol kenardaki yiv rayinin ritmini tekrar
      ediyor: esit arali dikey hatlar. Sayfada otuz dort kez gecer --
      tekrarin kendisi imzadir (sartname §3.1). */
.ust-baslik::before {
  width: 2.5rem;
  height: .8rem;
  /* ADIM 8 PIKSEL: yiv rayinin adimiyla BIREBIR ayni (site.css, .yiv-rayi
     repeating-linear-gradient'i). Ayni ritmi iki farkli adimda tekrar
     etmek onu ritim olmaktan cikarirdi. */
  background: repeating-linear-gradient(
    90deg,
    var(--altin) 0 1px,
    transparent 1px 8px
  );
}

/* 4. BOLUM BASI ILE ICERIGI ARASINDA NEFES.
      Baslik izgaranin uzerine yapisiyordu; "bos" ile "nefes alan"
      arasindaki fark tam olarak budur. */
h2 + .izgara,
h2 + .kart-liste { margin-top: var(--bosluk-7); }
.kart-liste + p { margin-top: var(--bosluk-6); }

/* 5. KART UZERINE GELINCE: HAFIF KALKIS + SOLDAN CIZILEN ALTIN HAT.
      Yalnizca transform. Hat bir DOLGU degil, cizgidir; kartin alt
      kenarinda soldan saga cizilir ve pahin kestigi yerde biter --
      yani cizginin sonunu da logonun 45 derecesi belirler.
      :focus-within ile klavyede de calisir. */
.kart-liste > li {
  transition: transform .3s cubic-bezier(.2, .6, .2, 1);
}
.kart-liste > li::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--altin);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .6, .2, 1);
}
.kart-liste > li:hover::after,
.kart-liste > li:focus-within::after { transform: scaleX(1); }

/* Kalkis YALNIZCA gercek bir isaretleyicide. Dokunmatik cihazda :hover
   "son dokunulan oge" olarak yapisir ve kart kalkik kalirdi. */
@media (hover: hover) {
  .kart-liste > li:hover { transform: translateY(-4px); }
}