/*
 * bakicibakiyorum.com — tema
 * ------------------------------------------------------------------
 * SURUM DEFTERI (en yeni ustte)
 *   v1.0  08.09.2026  GORSEL DIL GELDI: sinematik, ACIK tema.
 *                     Fildisi zemin, murekkep yazi, kil rengi vurgu.
 *                     Katmanli isik + gren, iri serif basliklar,
 *                     kaydirdikca beliren bolumler.
 *   v0.1  07.09.2026  Iskelet. Renkler yer tutucuydu (yesil).
 * ------------------------------------------------------------------
 *
 * "SINEMATIK" BURADA NE DEMEK — karar gerekcesi
 *   Sinematik denince refleks olarak koyu/siyah tema akla gelir. Burada
 *   ACIK tema secildi, sebebi su: bu site cocuk, yasli ve hasta bakimi
 *   satiyor. Koyu tema luks/teknoloji cagristirir, guven degil. Filmsel
 *   his karanliktan degil su UC seyden geliyor:
 *     1) ISIK — sabit dolgu renk yerine katmanli, agir agir kayan isik
 *     2) OLCEK — genis bosluk, iri serif baslik, dar okuma sutunu
 *     3) ZAMAN — her sey ayni anda degil, kaydirdikca sirayla belirir
 *
 * NEDEN DIS YAZI TIPI YOK
 *   Google Fonts vb. bir CDN'e baglanmiyoruz. Sebep tek: dis servis
 *   yavaslarsa ya da engellenirse yazi tipi gelmez ve sayfa SESSIZCE
 *   bozulur. Isletim sisteminin serif yazi tipi (Georgia / Iowan /
 *   Palatino) zaten filmsel bir his veriyor ve hicbir zaman gelmemezlik
 *   etmiyor. Ayrica gizlilik: ziyaretcinin IP'si uctincu tarafa gitmiyor.
 *
 * NEDEN CSS degiskenleri: renk kararlari tek yerde (:root). Marka rengi
 * degisirse 700 satir taranmaz, 10 satir degisir. Renkleri kurallarin
 * icine gomme.
 *
 * NEDEN mobil-once: kurallarin varsayilani DAR ekrandir; genis ekran icin
 * @media (min-width) ile EKLEME yapilir. Tersi (masaustu once, sonra dar
 * ekranda geri alma) borsaliyorum'da ust bar tasmasina yol acti.
 */

:root {
  /* --- Yuzeyler: fildisi/film pozitifi --- */
  --zemin:         #f7f4ef;   /* sayfa zemini */
  --zemin-2:       #efe9e0;   /* ikincil yuzey */
  --kart:          #fffdfa;
  --koyu:          #171a1d;   /* koyu band zemini */
  --koyu-2:        #22272b;
  --cizgi:         #e0d8cc;
  --cizgi-koyu:    #363c41;

  /* --- Yazi --- */
  --yazi:          #171a1d;
  --yazi-ikincil:  #57606a;
  --yazi-soluk:    #8c8377;
  --yazi-koyuzem:  #efe9e0;
  --yazi-koyuzem-2:#a8a396;

  /* --- Vurgu: kil / yanik turuncu. Sicak, bakim isine yakisir,
         sektorde herkesin kullandigi mavi-yesilden ayrisir. --- */
  --vurgu:         #b0592f;
  --vurgu-acik:    #cf7a4f;
  --vurgu-sis:     rgba(176, 89, 47, 0.10);

  /* --- Ikincil: derin cam yesili. Koyu bandda ve isik katmanlarinda. --- */
  --ikincil:       #27453c;

  /* --- Durum renkleri: dekorasyon degil, hata gosterimi icin --- */
  --hata-zemin:    #fdf2f0;
  --hata-cizgi:    #e8bfb4;
  --hata-yazi:     #8c3320;
  --bilgi-zemin:   #f1f4f2;
  --bilgi-cizgi:   #cbd8d2;
  --bilgi-yazi:    #2c4a40;
  --kurulum-zemin: #2b2118;
  --kurulum-yazi:  #f0d9b8;

  /* --- Olculer --- */
  --ustbar-yuk:    58px;
  --genis:         1080px;   /* bolum genisligi */
  --okuma:         62ch;     /* metin satiri bundan uzarsa okunmaz olur */
  --yumusak:       12px;

  /* --- Yazi tipleri --- */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Hareket: filmsel his hizdan degil YAVASLIKTAN gelir --- */
  --yumusak-egri:  cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* ================================================================== */
/* Temel sifirlama                                                     */
/* ================================================================== */

/* NEDEN border-box: genislik hesabina dolgu ve kenarlik dahil olur.
   Ust bar tasmalarinin klasik sebebi %100 genislik + yanlardan dolgudur. */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* NEDEN: iOS Safari yatay cevirince yaziyi kendiliginden buyutur. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ust bar sabit durdugu icin ic baglantiya atlayinca baslik altinda
     kalmasin diye kaydirma payi. */
  scroll-padding-top: calc(var(--ustbar-yuk) + 12px);
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--sans);
  /* NEDEN 16px taban: daha kucugunde iOS, form alanina dokununca sayfayi
     zorla yakinlastirir ve duzen kayar. */
  font-size: 16px;
  line-height: 1.62;
  /* NEDEN min-height + flex: icerik kisayken alt bilgi ekranin dibine otursun. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /*
   * BURADA overflow-x:hidden YOK — kasten. Once yazilmisti, 08.09'da
   * olculup KALDIRILDI. Iki sebep:
   *
   * 1) Isini yapmiyordu, gizliyordu. Yatay tasmayi kapatmak tasmayi
   *    cozmez, gorunmez yapar — doktrindeki "sessiz eksik" tam olarak
   *    budur. Nitekim gercek tasmayi (100vw'li koyu band) tam da bu
   *    satir gizliyordu; ancak cerceve icinde olcunce ortaya cikti.
   *
   * 2) Ust bari bozuyordu. overflow-x:hidden + overflow-y:visible
   *    birlesimi, overflow-y'yi tarayici tarafindan auto'ya cevirir ve
   *    body bir KAYDIRMA KABI olur. position:sticky en yakin kaydirma
   *    kabina gore calistigi icin ust bar viewport'a degil, hic
   *    kaydirilmayan body'ye yapisirdi — yani hic yapismazdi.
   *
   * Tasmanin tek gercek kaynagi olan .sahne-isik zaten .sahne
   * uzerindeki overflow:hidden ile kirpiliyor. Kok neden orada cozuldu.
   */
}

/* NEDEN yedek: dvh desteklemeyen eski tarayicida ustteki kural gecersiz
   sayilir ve min-height hic uygulanmaz. */
@supports not (min-height: 100dvh) {
  body { min-height: 100vh; }
}

a { color: var(--vurgu); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;          /* serif basliklar kalinlasinca agirlasir */
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Klavyeyle gezenin nerede oldugu HER ZAMAN gorunsun.
   NEDEN :focus-visible: fareyle tiklayinda halka cikmaz, klavyede cikar. */
:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================================================================== */
/* Belirme (reveal)                                                    */
/* ================================================================== */

/*
 * KRITIK KARAR — neden ".js" on eki var:
 *   .bel ogeleri varsayilan olarak GORUNURDUR. Gizleme kurali yalniz
 *   <html class="js"> varken devreye girer, o sinifi da index.php'deki
 *   satir ici betik koyar.
 *
 *   Sebep: gizlemeyi varsayilan yapsaydik ve app.js herhangi bir sebeple
 *   yuklenmeseydi (404, sozdizimi hatasi, tarayici betigi engelledi),
 *   ziyaretci BOMBOS bir sayfa gorurdu ve sebebi hicbir yerde yazmazdi.
 *   Bu, doktrindeki "sessiz eksik" tanimina birebir uyar. Bu haliyle en
 *   kotu durumda animasyon olmaz, icerik yerinde durur.
 */
.js .bel {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   1.0s var(--yumusak-egri),
    transform 1.0s var(--yumusak-egri);
  /* will-change YOK: onlarca ogede birden verilince mobilde bellek
     harciyor ve fayda yerine takilma uretiyor. */
}
.js .bel.belirdi { opacity: 1; transform: none; }

/* Acilistaki sirali belirme. Sahnede ogeler ayni anda degil, birbiri
   ardina gelir — filmsel his buradan cikiyor. */
.js [data-bel="1"] { transition-delay: 0.10s; }
.js [data-bel="2"] { transition-delay: 0.30s; }
.js [data-bel="3"] { transition-delay: 0.48s; }
.js [data-bel="4"] { transition-delay: 0.74s; }
.js [data-bel="5"] { transition-delay: 0.92s; }
.js [data-bel="6"] { transition-delay: 1.08s; }
.js [data-bel="7"] { transition-delay: 1.30s; }

/*
 * IZGARA ICI KADEMELENME.
 * Bes kart ayni anda ekrana girdiginde hepsi birlikte belirirse "toplu
 * yukleme" gibi gorunur; sirayla gelince goz soldan saga okur. Gecikme
 * CSS'te nth-child ile veriliyor — JS'in her ogeye ayri zamanlayici
 * kurmasina gerek yok.
 */
.js .alan-kart:nth-child(2), .js .adim:nth-child(2), .js .soz-kart:nth-child(2) { transition-delay: 0.12s; }
.js .alan-kart:nth-child(3), .js .adim:nth-child(3), .js .soz-kart:nth-child(3) { transition-delay: 0.24s; }
.js .alan-kart:nth-child(4), .js .adim:nth-child(4) { transition-delay: 0.36s; }
.js .alan-kart:nth-child(5) { transition-delay: 0.48s; }

/* ================================================================== */
/* Kurulum seridi — ayar eksikken gorunur                              */
/* ================================================================== */

.kurulum-serit {
  background: var(--kurulum-zemin);
  color: var(--kurulum-yazi);
  font-size: 0.86rem;
  line-height: 1.5;
  border-bottom: 1px solid #4a3626;
}
.kurulum-ic {
  max-width: var(--genis);
  margin: 0 auto;
  padding: 12px 18px;
  padding-left:  max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
.kurulum-baslik { font-weight: 650; margin-bottom: 6px; }
.kurulum-liste { list-style: disc; padding-left: 20px; display: grid; gap: 3px; }
.kurulum-liste li { opacity: 0.92; }
.kurulum-not { margin-top: 8px; opacity: 0.62; font-size: 0.82rem; }
.kurulum-not code,
.kurulum-liste code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
}

/* ================================================================== */
/* Ust bar — dar ekranda TASMAYACAK                                    */
/* ================================================================== */

.ustbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--ustbar-yuk);
  padding: 8px 18px;
  /* Centikli telefonlarda yan guvenli alan kadar ek bosluk. env()
     desteklenmiyorsa deger 0 sayilir, zarari yok. */
  padding-left:  max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  /* Basta saydam: acilis sahnesinin uzerinde yuzsun. Kaydirilinca
     app.js .kaydirildi ekler ve zemin kazanir. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--yumusak-egri),
              border-color 0.4s var(--yumusak-egri);
  /* NEDEN flex-wrap: menu ogeleri dar ekranda yan yana sigmazsa alt
     satira insinler. Ekran disinda kalmaktansa ust bar iki satir olsun —
     borsaliyorum'daki "Cikis dugmesi gorunmuyor" arizasinin kok nedeni
     tam olarak buydu. */
  flex-wrap: wrap;
}

.ustbar.kaydirildi {
  /*
   * 0.88 -> 0.96 (08.09).
   * NEDEN: koyu bant ust barin ALTINDAN gecerken, %88 saydamlikta
   * menu yazilari koyu zemine karisip okunmaz hale gelebiliyordu.
   * Okunurluk backdrop-filter'a BAGLI OLMAMALI: o ozellik bazi
   * tarayicilarda ve bazi olcum ortamlarinda beklenmedik davraniyor.
   * Bulanikligi sus olarak biraktik, okunurlugu opakliga bagladik.
   */
  background: rgba(247, 244, 239, 0.96);
  border-bottom-color: var(--cizgi);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* backdrop-filter desteklenmiyorsa saydamlik okunurlugu bozar; o zaman
   duz zemin ver. Sessiz bir okunurluk kaybi birakmiyoruz. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ustbar.kaydirildi { background: var(--zemin); }
}

.marka {
  text-decoration: none;
  color: var(--yazi);
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  /* NEDEN min-width:0: flex ogesi varsayilan olarak icerigi kadar
     genisler ve KUCULMEZ; uzun marka adi kardesini ekran disina iter. */
  min-width: 0;
  /* NEDEN 44px: marka ayni zamanda "sayfa basina don" baglantisidir.
     Olcumde 29px cikti — parmakla guvenli isabet sinirinin altinda.
     Menudeki baglantilar icin bu kural vardi, markada unutulmustu;
     dar ekran olcumu (rapor\ekran\olcum_*.txt) yakaladi. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.marka-ad {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;   /* sigmazsa uc nokta, tasma degil */
  white-space: nowrap;
  vertical-align: bottom;
}
.marka-ad strong { color: var(--vurgu); font-weight: 400; font-style: italic; }

.ustbar-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Dokunma hedefi en az 44px.
   NEDEN 44px: parmakla guvenli isabet icin yaygin alt sinir; kucuk
   hedefler telefonda yanlis dokunmaya yol acar. */
.ustbar-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--yazi-ikincil);
  font-size: 0.9rem;
  transition: color 0.25s ease, background 0.25s ease;
}
.ustbar-menu a:hover { color: var(--yazi); background: var(--vurgu-sis); }

/*
 * Dar ekranda menudeki uc metin baglantisi gizlenir, yalniz "Talep
 * birakin" dugmesi kalir.
 * NEDEN hamburger menu degil: sayfa TEK sayfa ve dort bolumluk. Acilir
 * menu, ek durum + ek betik + ek erisilebilirlik yuku demek. Dar ekranda
 * ziyaretcinin tek isi var (talep birakmak); bar onu gosteriyor.
 */
@media (max-width: 639px) {
  .ustbar-menu a:not(.dugme) { display: none; }
}

/* ================================================================== */
/* Dugmeler                                                            */
/* ================================================================== */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--yumusak-egri),
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
}
.dugme:hover { transform: translateY(-2px); }
.dugme:active { transform: translateY(0); }

.dugme-dolu {
  background: var(--vurgu);
  color: #fffaf6;
  border-color: var(--vurgu);
}
.dugme-dolu:hover { background: #9b4c26; }

.dugme-cizgi {
  background: transparent;
  color: var(--yazi);
  border-color: var(--cizgi);
}
.dugme-cizgi:hover { border-color: var(--yazi); }

.dugme-kucuk { min-height: 40px; padding: 0 16px; font-size: 0.9rem; }

/* ================================================================== */
/* Govde                                                               */
/* ================================================================== */

.govde {
  flex: 1 0 auto;    /* alt bilgiyi dibe iten kisim */
  width: 100%;
}

/* ================================================================== */
/* ACILIS SAHNESI                                                      */
/* ================================================================== */

.sahne {
  position: relative;
  /* NEDEN ust bar yuksekligi cikariliyor: bar sabit (sticky) ve sahnenin
     uzerinde duruyor; cikarilmazsa sahne bir bar boyu tasar ve telefonda
     "kaydir" imi ekran altinda kalir. */
  min-height: calc(100dvh - var(--ustbar-yuk));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 20px 96px;
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  overflow: hidden;
  isolation: isolate;    /* isik katmani sonraki bolumlere tasmasin */
}
@supports not (min-height: 100dvh) {
  .sahne { min-height: calc(100vh - var(--ustbar-yuk)); }
}

/*
 * ISIK KATMANI — sahnenin "sinematik" dedigimiz kismi.
 * NEDEN radial-gradient, filter:blur degil: buyuk alanli blur mobil
 * GPU'da her karede yeniden hesaplaniyor ve kaydirmayi takiyor. Radyal
 * gecis zaten yumusak; bedava geliyor.
 * NEDEN cok yavas (48s): fark edilen bir animasyon dikkat dagitir;
 * fark edilmeyen bir hareket "canli" hissi verir.
 */
.sahne-isik {
  position: absolute;
  inset: -25%;
  z-index: -2;
  background:
    radial-gradient(46% 42% at 18% 22%, rgba(176, 89, 47, 0.20), transparent 62%),
    radial-gradient(50% 46% at 82% 30%, rgba(39, 69, 60, 0.17),  transparent 64%),
    radial-gradient(60% 52% at 50% 96%, rgba(207, 122, 79, 0.16), transparent 66%);
  animation: isik-kay 48s ease-in-out infinite alternate;
}
@keyframes isik-kay {
  from { transform: translate3d(-2%, -1%, 0) scale(1);    }
  to   { transform: translate3d( 2%,  2%, 0) scale(1.09); }
}

/*
 * GREN — film dokusu. Satir ici SVG (feTurbulence), ayri dosya degil.
 * NEDEN ayri dosya degil: bir dosya daha demek, 404 olabilecek bir sey
 * daha demek. Bu satir hicbir zaman "gelmemezlik" edemez.
 */
.sahne-gren {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

.sahne-ic {
  width: 100%;
  max-width: var(--genis);
  margin: 0 auto;
}

.ust-yazi {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vurgu);
  margin-bottom: 22px;
}

.dev-baslik {
  /* NEDEN clamp: dar ekranda 2.4rem, genis ekranda 5.2rem, arada
     ekranla birlikte suzulur. Kirilma noktasinda ziplama olmaz. */
  font-size: clamp(2.4rem, 8.2vw, 5.2rem);
  margin-bottom: 28px;
  max-width: 15ch;
}
.dev-baslik em {
  font-style: italic;
  color: var(--vurgu);
}

.giris-metin {
  font-size: clamp(1.02rem, 2.4vw, 1.24rem);
  color: var(--yazi-ikincil);
  max-width: var(--okuma);
  margin-bottom: 34px;
}

.dugme-sirasi {
  display: flex;
  flex-wrap: wrap;    /* dar ekranda alt alta, tasma yok */
  gap: 12px;
  margin-bottom: 34px;
}

.sahne-dipnot {
  font-size: 0.9rem;
  color: var(--yazi-soluk);
  max-width: 46ch;
  padding-left: 14px;
  border-left: 2px solid var(--cizgi);
}

.kaydir-imi {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1;
}
.kaydir-cizgi {
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, var(--yazi-soluk));
  animation: im-nefes 2.8s ease-in-out infinite;
}
@keyframes im-nefes {
  0%, 100% { opacity: 0.25; transform: scaleY(0.65); transform-origin: top; }
  50%      { opacity: 0.85; transform: scaleY(1);    transform-origin: top; }
}
/* .bel gizleme kurali transform'u eziyor; im icin ayri sarmalayici
   kullanmak yerine ic cizgiye animasyon verdik — cakisma yok. */

/* ================================================================== */
/* Bolum ortak                                                         */
/* ================================================================== */

.bolum {
  max-width: var(--genis);
  margin: 0 auto;
  padding: 84px 20px;
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.bolum-basi { margin-bottom: 44px; }

.bolum-no {
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yazi-soluk);
  margin-bottom: 14px;
}

.bolum-baslik {
  font-size: clamp(1.85rem, 5.2vw, 3rem);
  margin-bottom: 16px;
  max-width: 20ch;
}

.bolum-giris {
  color: var(--yazi-ikincil);
  max-width: var(--okuma);
  font-size: 1.03rem;
}

/* ================================================================== */
/* 1 · Alanlar                                                         */
/* ================================================================== */

/*
 * IZGARA CIZGILERI — dikkat, burada bir tuzak var.
 *
 * Ilk yazimda cizgiler soyle ciziliyordu: kaba "background: var(--cizgi)"
 * verilir, kartlar arasina 1px bosluk birakilir, boslukta kabin rengi
 * gorunur. Yaygin bir numaradir ve BURADA BOZUKTU:
 *   Kartlar ayni zamanda .bel (belirme) ogeleri. Belirmeden once
 *   opacity:0 olduklari icin ARKA PLANLARI DA saydam oluyor ve kabin
 *   cizgi rengi kartin TAMAMINDA gorunuyordu. Yani her kart, once dolu
 *   gri bir blok olarak beliriyor, sonra kartlasiyordu.
 *   08.09'da ekran goruntusunde yakalandi (rapor\ekran\bolum_3.png).
 *
 * Cozum: cizgi kabin degil OGENIN kendisinin olsun (box-shadow halkasi).
 * Oge saydamken halkasi da saydam olur; ortada gri blok kalmaz.
 * NEDEN box-shadow, border degil: border yer kaplar ve komsu kartlarda
 * cift kalinlik yapar; box-shadow duzeni etkilemez, 1px boslukta iki
 * komsunun halkasi ust uste binip tek cizgi gibi gorunur.
 */
.alan-izgara {
  display: grid;
  gap: 1px;
  border-radius: var(--yumusak);
  overflow: hidden;   /* kose yaricapi halkalari kirpsin */
}

.alan-kart {
  background: var(--kart);
  box-shadow: 0 0 0 1px var(--cizgi);
  padding: 30px 24px;
  transition: background 0.35s ease;
}
.alan-kart:hover { background: #fff; }

.alan-no {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--vurgu);
  margin-bottom: 14px;
  letter-spacing: 0.08em;
}
.alan-ad {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.alan-ozet {
  color: var(--vurgu);
  font-size: 0.94rem;
  margin-bottom: 12px;
}
.alan-metin {
  color: var(--yazi-ikincil);
  font-size: 0.97rem;
  max-width: 46ch;
}

/* ================================================================== */
/* 2 · Nasil calisiyoruz — koyu band                                   */
/* ================================================================== */

/*
 * NEDEN tam genislik: bolum kutusundan tasip ekranin iki yanina yayilir.
 * Filmde sahne degisimi gibi — ritim burada kiriliyor, okuyan
 * "yeni bolum" oldugunu golge yerine ISIK degisiminden anliyor.
 *
 * NASIL: yalnizca max-width kaldiriliyor. Ust kap (.govde) zaten
 * govdenin tam genisligi; kisitlamayi kaldirmak yayilmak icin yetiyor.
 *
 * ILK YAZIMDA BOYLE DEGILDI — 08.09'da olculup duzeltildi:
 *   Once "width:100vw; margin-left:50%; transform:translateX(-50%)"
 *   ucluSu yazilmisti. Iki sorunu vardi:
 *     1) 100vw KAYDIRMA CUBUGUNU DA SAYAR. Cubuk gorunen her tarayicida
 *        bant ~15px fazla genis oluyor ve icerik sola kayiyordu. Olcum
 *        (rapor\ekran\olcum) bunu 305px cerceve icinde "sol -7 / sag 313"
 *        olarak gosterdi.
 *     2) Gereksizdi. Kap zaten tam genislikteydi; numara bir sorunu
 *        cozmuyor, yalnizca bir tane uretiyordu.
 *   Ders: yayilma icin vw kullanma, kisitlamayi kaldir.
 */
.bolum-koyu {
  max-width: none;
  background: var(--koyu);
  color: var(--yazi-koyuzem);
  padding-left: 0;
  padding-right: 0;
  margin-top: 40px;
  margin-bottom: 40px;
}
.bolum-koyu-ic {
  max-width: var(--genis);
  margin: 0 auto;
  padding: 0 20px;
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.bolum-koyu .bolum-no    { color: var(--yazi-koyuzem-2); }
.bolum-koyu .bolum-giris { color: var(--yazi-koyuzem-2); }

/* Ayni tuzak burada da vardi (bkz. .alan-izgara ustundeki not).
   Dikey listede cozum daha basit: ayirici cizgi ogenin KENDI ust
   kenarligi olsun. Oge saydamken kenarligi da saydam olur. */
.adim-listesi { display: grid; }

.adim + .adim { border-top: 1px solid var(--cizgi-koyu); }

.adim {
  padding: 30px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  row-gap: 6px;
  align-items: start;
}
.adim-no {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--vurgu-acik);
  grid-row: 1 / 3;
  line-height: 1;
  padding-top: 4px;
}
.adim-ad { font-size: 1.3rem; color: var(--yazi-koyuzem); }
.adim-metin {
  color: var(--yazi-koyuzem-2);
  font-size: 0.98rem;
  max-width: var(--okuma);
}

/* ================================================================== */
/* 3 · Neden ajans — karsitlik                                         */
/* ================================================================== */

.karsit { display: grid; gap: 18px; }

.karsit-yan {
  padding: 28px 24px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--zemin-2);
}
.karsit-bizim {
  background: var(--kart);
  border-color: var(--vurgu);
  /* Ince ic golge: hangi tarafin "bizim" oldugunu renk degil DERINLIK
     anlatiyor; renkle vurgulamak reklam gibi durur. */
  box-shadow: 0 18px 40px -28px rgba(176, 89, 47, 0.55);
}
.karsit-etiket {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yazi-soluk);
  margin-bottom: 12px;
}
.karsit-bizim .karsit-etiket { color: var(--vurgu); }
.karsit-metin { color: var(--yazi-ikincil); max-width: 46ch; }
.karsit-bizim .karsit-metin { color: var(--yazi); }

/* ================================================================== */
/* 4 · Acik soz                                                        */
/* ================================================================== */

.soz-izgara { display: grid; gap: 18px; }

.soz-kart {
  padding: 28px 24px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--kart);
}
.soz-baslik { font-size: 1.28rem; margin-bottom: 16px; }
.soz-metin  { color: var(--yazi-ikincil); margin-bottom: 12px; }
.soz-metin:last-child { margin-bottom: 0; }
.soz-metin strong { color: var(--yazi); font-weight: 600; }

/* Kontrol listesi bosken cikan durust satir. Sonik degil, soluk:
   bir sey iddia etmedigi belli olsun. */
.soz-bos {
  color: var(--yazi-soluk);
  font-style: italic;
  border-left: 2px solid var(--cizgi);
  padding-left: 14px;
}

.soz-tutar {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--vurgu);
  margin-bottom: 10px;
}

.soz-liste { display: grid; gap: 10px; margin-bottom: 14px; }
.soz-liste li {
  position: relative;
  padding-left: 22px;
  color: var(--yazi-ikincil);
  font-size: 0.97rem;
}
.soz-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--vurgu);
}
/* "Soylemediklerimiz" listesinde im daha soluk — bunlar bir ozellik
   degil, bir yokluk. */
.soz-liste-eksi li::before { background: var(--yazi-soluk); }

.soz-uyari {
  font-size: 0.89rem;
  color: var(--yazi-soluk);
  border-top: 1px solid var(--cizgi);
  padding-top: 14px;
  margin: 0;
}

/* ================================================================== */
/* 5 · Talep formu                                                     */
/* ================================================================== */

.bolum-form { padding-bottom: 96px; }

.form {
  display: grid;
  gap: 18px;
  max-width: 720px;
  padding: 28px 22px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
}

/* Bal kupu: insan gormeyecek, bot gorecek.
   NEDEN display:none DEGIL: bazi botlar gizli alanlari atlar. Ekranin
   disina tasiyoruz — bot icin "normal" bir alan, insan icin yok. */
.bal-kupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-satir { display: grid; gap: 18px; }

.form-alan { display: grid; gap: 7px; }

.form-etiket {
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--yazi-ikincil);
}
.form-istege-bagli { font-weight: 400; color: var(--yazi-soluk); }

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;              /* dokunma hedefi */
  padding: 12px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 9px;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--sans);
  /* NEDEN 16px: iOS'ta bundan kucuk yazili bir alana dokununca tarayici
     sayfayi ZORLA yakinlastirir ve duzen kayar. Estetik degil, arizadan
     kacinma karari. */
  font-size: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form textarea { min-height: 108px; resize: vertical; line-height: 1.55; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-sis);
}

/* Tarayicinin kendi "gecersiz" isaretlemesi form daha doldurulmadan
   kirmiziya boyuyor; yalniz KULLANICI dokunduktan sonra gostersin. */
.form input:user-invalid,
.form select:user-invalid,
.form textarea:user-invalid {
  border-color: var(--hata-cizgi);
}

.form-onay {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.92rem;
  color: var(--yazi-ikincil);
  /* NEDEN min-height: onay kutusunun kendisi 20px ve oyle kalmali —
     44px'lik bir kare gorsel olarak yanlis durur. Ama DOKUNMA HEDEFI
     kutu degil, onu saran etiketin tamamidir. Dar ekranda metin iki
     satira indigi icin etiket zaten 44px'i geciyordu; genis ekranda tek
     satira dusup 24px'e iniyordu (olcumde 1440px'te yakalandi).
     Taban yukseklik, hedefi her genislikte 44px'te tutuyor. */
  min-height: 44px;
}
.form-onay input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--vurgu);
}

.form-alt { display: grid; gap: 14px; }

/* Gonderim sonucu. Bos oldugu surece yer kaplamaz — tek dogruluk
   kaynagi kabin icerigidir, JS ayrica goster/gizle isi yapmaz. */
.form-sonuc:empty { display: none; }
.form-sonuc {
  padding: 13px 15px;
  border-radius: 9px;
  font-size: 0.93rem;
  border: 1px solid var(--bilgi-cizgi);
  background: var(--bilgi-zemin);
  color: var(--bilgi-yazi);
}
.form-sonuc.hata {
  border-color: var(--hata-cizgi);
  background: var(--hata-zemin);
  color: var(--hata-yazi);
}
.form-sonuc .sonuc-sebep {
  display: block;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  /* Teknik sebep uzun ve bosluksuz olabilir; kirilmazsa kutuyu tasirir. */
  overflow-wrap: anywhere;
  opacity: 0.85;
}

.dogrudan { margin-top: 30px; }
.dogrudan-baslik {
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yazi-soluk);
  margin-bottom: 12px;
}
.dogrudan-liste { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.dogrudan-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;         /* dokunma hedefi */
  font-size: 1.06rem;
  text-decoration: none;
  border-bottom: 1px solid var(--vurgu-sis);
}
.dogrudan-liste a:hover { border-bottom-color: var(--vurgu); }
.dogrudan-saat { margin-top: 8px; font-size: 0.9rem; color: var(--yazi-soluk); }

/* ================================================================== */
/* Uyari / hata alani — "sessiz eksik yok"                             */
/* ================================================================== */

/* NEDEN :empty ile gizleme: JS'in ayrica "gorunur yap / gizle" isi
   yapmasi gerekmesin. Icerik varsa gorunur, yoksa yer kaplamaz. */
.uyari-alani:empty { display: none; }
.uyari-alani {
  max-width: var(--genis);
  margin: 0 auto 40px;
  padding: 0 20px;
  display: grid;
  gap: 10px;
}

.uyari {
  border: 1px solid var(--bilgi-cizgi);
  background: var(--bilgi-zemin);
  color: var(--bilgi-yazi);
  border-radius: var(--yumusak);
  padding: 14px 16px;
  font-size: 0.94rem;
}
.uyari.hata {
  border-color: var(--hata-cizgi);
  background: var(--hata-zemin);
  color: var(--hata-yazi);
}
.uyari-baslik { font-weight: 650; margin: 0 0 5px; }
.uyari-sebep {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  /* NEDEN kelime kirma: teknik sebep metni (URL, yigin izi) uzun ve
     bosluksuz olabilir; kirilmazsa kutuyu ve sayfayi yatay tasirir. */
  overflow-wrap: anywhere;
  word-break: break-word;
  opacity: 0.85;
}

/* ================================================================== */
/* Alt bilgi                                                           */
/* ================================================================== */

.altbilgi {
  flex: 0 0 auto;
  border-top: 1px solid var(--cizgi);
  background: var(--zemin-2);
  color: var(--yazi-soluk);
  font-size: 0.84rem;
}
.altbilgi-ic {
  max-width: var(--genis);
  margin: 0 auto;
  padding: 26px 20px;
  padding-left:   max(20px, env(safe-area-inset-left));
  padding-right:  max(20px, env(safe-area-inset-right));
  padding-bottom: max(26px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;          /* dar ekranda alt alta insin, tasmasin */
  gap: 12px 24px;
  justify-content: space-between;
  align-items: flex-end;
}
.altbilgi-sol { display: grid; gap: 4px; }
.altbilgi-marka {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--yazi);
}
.altbilgi-izin { color: var(--yazi-ikincil); }
.altbilgi .damga { font-variant-numeric: tabular-nums; }

/* ================================================================== */
/* GENIS EKRAN EKLEMELERI                                              */
/* (mobil-once: buraya kadarki her sey dar ekran icindir)              */
/* ================================================================== */

@media (min-width: 640px) {
  .ustbar        { padding: 8px 28px; }
  .sahne         { padding: 80px 32px 110px; }
  .bolum         { padding: 104px 32px; }
  .bolum-koyu    { padding-left: 0; padding-right: 0; }
  .bolum-koyu-ic { padding: 0 32px; }
  .alan-kart     { padding: 34px 30px; }
  .karsit        { grid-template-columns: 1fr 1fr; gap: 22px; }
  .form          { padding: 34px 30px; }
  .form-satir    { grid-template-columns: 1fr 1fr; }
  .form-alt      { grid-template-columns: auto 1fr; align-items: center; }
  .altbilgi-ic   { padding: 30px 32px; }
  .adim          { grid-template-columns: 96px 1fr; padding: 36px 0; }
  .adim-no       { font-size: 2rem; }
}

@media (min-width: 900px) {
  /*
   * BES KART, UC SUTUN — bos hucre sorunu.
   *
   * Duz "repeat(3, 1fr)" ile ilk satirda 3 kart, ikinci satirda 2 kart
   * ve sagda BOS bir hucre kaliyor; kart blogunun dikdortgeni kiriliyor.
   * Ilk yazimda buraya "grid-column: span 1" yazilmisti — hicbir sey
   * yapmayan bir kuraldi, yorumu duzeltiyor sanip birakilmisti.
   * 08.09'da ekran goruntusunde gorulup duzeltildi.
   *
   * Cozum: 6 sutunluk izgara.
   *   ilk uc kart  -> 2 sutun (3 x 2 = 6, satir dolu)
   *   son iki kart -> 3 sutun (2 x 3 = 6, satir dolu)
   * Iki satir da tam doluyor, bos hucre kalmiyor.
   */
  .alan-izgara { grid-template-columns: repeat(6, 1fr); }
  .alan-kart { grid-column: span 2; }
  .alan-kart:nth-child(4),
  .alan-kart:nth-child(5) { grid-column: span 3; }
  .soz-izgara  { grid-template-columns: repeat(3, 1fr); }
  .bolum-koyu  { padding-top: 104px; padding-bottom: 104px; }
}

/* 900px alti ama 640 ustu: iki sutun daha iyi durur. */
@media (min-width: 640px) and (max-width: 899px) {
  .alan-izgara { grid-template-columns: repeat(2, 1fr); }
  .soz-izgara  { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
  .bolum-koyu { padding-top: 72px; padding-bottom: 72px; }
}

/* ================================================================== */
/* Hareketi azalt                                                      */
/* ================================================================== */

/*
 * Kullanicinin isletim sistemindeki "hareketi azalt" tercihine uy.
 * NEDEN sadece sureyi kisaltmak yetmiyor: .bel ogeleri opacity:0 ile
 * basliyor. Sureyi 0.01ms yapmak onlari gorunur kilar ama emin olmak
 * icin acikca gorunur yaziyoruz — hareket tercihi yuzunden kimse bos
 * sayfa gormesin.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .bel { opacity: 1 !important; transform: none !important; }
  .sahne-isik  { animation: none; }
  .kaydir-cizgi { animation: none; opacity: 0.5; }
  .dugme:hover { transform: none; }
}

/* ================================================================== */
/* KAPI — giris ekrani                                                 */
/* ================================================================== */

/*
 * Site herkese acik degil; kapi.php giris yapilmadan sayfayi hic
 * cizmiyor. Bu ekran, sitenin geri kalaniyla AYNI dili konussun diye
 * ayni degiskenleri (isik, gren, serif baslik, kil vurgu) kullaniyor —
 * ziyaretci "yanlis yere geldim" hissi yasamasin.
 */

.kapi-govde { background: var(--zemin); }

.kapi {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 40px 20px;
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  overflow: hidden;
  isolation: isolate;
}
@supports not (min-height: 100dvh) {
  .kapi { min-height: 100vh; }
}

/* Acilis sahnesindeki isik katmaninin aynisi — ayni gerekce:
   radial-gradient, filter:blur degil (buyuk alanli blur mobil GPU'da
   her karede yeniden hesaplanir ve takilir). */
.kapi-isik {
  position: absolute;
  inset: -25%;
  z-index: -2;
  background:
    radial-gradient(46% 42% at 22% 26%, rgba(176, 89, 47, 0.20), transparent 62%),
    radial-gradient(50% 46% at 78% 34%, rgba(39, 69, 60, 0.17),  transparent 64%),
    radial-gradient(60% 52% at 50% 96%, rgba(207, 122, 79, 0.16), transparent 66%);
  animation: isik-kay 48s ease-in-out infinite alternate;
}

.kapi-gren {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

.kapi-kutu {
  width: 100%;
  max-width: 420px;
}

.kapi-baslik {
  font-size: clamp(2rem, 7vw, 2.9rem);
  margin: 18px 0 16px;
}
.kapi-baslik em { font-style: italic; color: var(--vurgu); }

.kapi-metin {
  color: var(--yazi-ikincil);
  margin-bottom: 26px;
  max-width: 40ch;
}

.kapi-form {
  display: grid;
  gap: 16px;
  padding: 26px 22px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
}

/* Giris alanlari formdakiyle ayni olculerde — 16px taban, 48px yukseklik.
   NEDEN 16px: bundan kucuk yazili bir alana dokununca iOS sayfayi ZORLA
   yakinlastirir ve duzen kayar. */
.kapi-form input[type="text"],
.kapi-form input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 9px;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--sans);
  font-size: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kapi-form input:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-sis);
}
.kapi-form .dugme { width: 100%; margin-top: 4px; }

/* Kapi ekranindaki uyari kutusu, formun ustunde nefes alsin. */
.kapi-kutu .uyari { margin-bottom: 18px; }

.kapi-alt {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--yazi-soluk);
}

/* ================================================================== */
/* SINEMATIK KATMAN — v1.1 (08.09.2026)                                */
/* ================================================================== */

/*
 * Bu bolumdeki HER SEY sustur. Tek kurali var:
 *   Hicbiri calismasa bile site tam ve okunur kalir.
 * O yuzden hepsi ya .js on ekiyle (betik varsa) ya @supports icinde
 * (tarayici destekliyorsa) yaziliyor; hicbiri icerigin gorunmesinin
 * on sarti degil.
 */

/* ------------------------------------------------------------------ */
/* 1) Baslikta maske acilimi — film jenerigi                           */
/* ------------------------------------------------------------------ */

.dev-baslik .satir {
  display: block;
  /* Kirpma DIS kutunun isi. */
  overflow: hidden;
  /* NEDEN padding + esit negatif margin: overflow:hidden, 'g' 's' 'y'
     harflerinin alt kuyruklarini DURAGAN haldeyken de keser. Kirpma
     alanini asagi itiyoruz; negatif margin duzeni geri aliyor, yani
     satir araligi hic degismiyor. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.js .dev-baslik .satir-ic {
  display: block;
  /* NEDEN inherit: gecikme merdiveni ([data-bel="2"] vb.) DIS kutuya
     veriliyor, ama hareket eden IC katman. Devralmasaydi iki satir ayni
     anda gelir ve kademelenme hic olmazdi. */
  transition-delay: inherit;
  /* %105: harfin en alt noktasi bile kutunun disinda kalsin. */
  transform: translateY(105%);
  transition: transform 1.15s var(--yumusak-egri);
}
.js .dev-baslik .satir.belirdi .satir-ic { transform: none; }

/* Satir kutusunun KENDISI solmasin — yalniz ic kisim kaysin.
   Yoksa hem sonukluk hem kayma olur ve hareket bulaniklasir.
   (.bel varsayilani opacity:0 idi; burada geri aliyoruz.) */
.js .dev-baslik .satir { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* 3) Kaydirma ilerleme cizgisi                                        */
/* ------------------------------------------------------------------ */

/*
 * Sayfanin tepesinde, kaydirdikca soldan saga dolan ince bir serit.
 * NEDEN scroll() zaman cizgisi: kaydirma olayina JS dinleyicisi baglamak
 * saniyede onlarca kez calisir; tarayicinin kendi kaydirma zaman cizgisi
 * bunu bilesik katmanda, bedavaya yakin yapar.
 * Desteklemeyen tarayicida serit HIC gorunmez — dekoratif, kaybi yok.
 */
/*
 * Sirit iki yoldan calisabilir:
 *   1) animation-timeline: scroll()  — saf CSS, tercih edilen
 *   2) <html class="ilerleme-js">    — app.js --ilerleme degiskenini yazar
 * Ikisi de yoksa gorunmez (dekoratif, kaybi yok).
 *
 * NEDEN yedek yol eklendi (08.09): animation-timeline her tarayicida
 * yok. Desteklemeyen cihazda sirit HIC cikmiyordu ve sayfadaki akis
 * hissinin en gorunur parcasi eksik kaliyordu — Ferdi'nin "sureklilik
 * yok" gozlemi kismen bundandi.
 */
.ilerleme { display: none; }

html.ilerleme-js .ilerleme {
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
html.ilerleme-js .ilerleme span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu-acik));
  transform-origin: 0 50%;
  transform: scaleX(var(--ilerleme, 0));
}

@supports (animation-timeline: scroll()) {
  .ilerleme {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 60;
    pointer-events: none;
  }
  .ilerleme span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--vurgu), var(--vurgu-acik));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: ilerle linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes ilerle {
    to { transform: scaleX(1); }
  }
}

/* ------------------------------------------------------------------ */
/* 4) Kaydirmaya bagli parallax                                        */
/* ------------------------------------------------------------------ */

/*
 * Sayfa kaydikca acilis sahnesindeki isik katmani daha YAVAS hareket
 * eder; derinlik hissi buradan cikar (kamera ilerlerken arka planin
 * geride kalmasi). Yalnizca transform/translate degisiyor — duzen
 * hesabi yeniden calismiyor, yani kaydirma takilmiyor.
 */
@supports (animation-timeline: view()) {
  .sahne-isik {
    animation: isik-kay 48s ease-in-out infinite alternate,
               isik-parallax linear both;
    animation-timeline: auto, view();
    animation-range: normal, contain;
  }
  @keyframes isik-parallax {
    from { translate: 0 -6%; }
    to   { translate: 0 14%; }
  }

  /* Bolum basliklari kaydirirken suzulerek yerine oturur — sabit degil,
     "kamera onlari gecerken" hissi. */
  .bolum-baslik {
    animation: baslik-suzul linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 34%;
  }
  @keyframes baslik-suzul {
    from { translate: 0 26px; opacity: 0.55; }
    to   { translate: 0 0;    opacity: 1;    }
  }
}

/* ------------------------------------------------------------------ */
/* 5) Bolum numarasindan uzayan cizgi                                  */
/* ------------------------------------------------------------------ */

.bolum-no { display: flex; align-items: center; gap: 14px; }
.bolum-no::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: var(--cizgi);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.4s var(--yumusak-egri) 0.2s;
}
.bolum-no.belirdi::after { transform: scaleX(1); }

/* Betik yoksa cizgi bastan cizili dursun — yarim kalmis gorunmesin. */
html:not(.js) .bolum-no::after { transform: scaleX(1); }

.bolum-koyu .bolum-no::after { background: var(--cizgi-koyu); }

/* ------------------------------------------------------------------ */
/* 6) Kart etkilesimleri — YALNIZ fare olan cihazlarda                 */
/* ------------------------------------------------------------------ */

/*
 * NEDEN @media (hover: hover): dokunmatik cihazda :hover, dokunduktan
 * SONRA takili kalir ve kart "bozuk" gorunur. Fare yoksa hic tanimlamiyoruz.
 */
@media (hover: hover) and (pointer: fine) {
  .alan-kart {
    transition: background 0.35s ease,
                transform 0.5s var(--yumusak-egri),
                box-shadow 0.5s ease;
  }
  .alan-kart:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--vurgu), 0 22px 40px -26px rgba(176, 89, 47, 0.55);
    z-index: 1;
  }

  .soz-kart { transition: transform 0.5s var(--yumusak-egri), border-color 0.4s ease; }
  .soz-kart:hover { transform: translateY(-3px); border-color: var(--vurgu); }

  .adim-no { transition: transform 0.5s var(--yumusak-egri), color 0.4s ease; }
  .adim:hover .adim-no { transform: translateX(4px); color: var(--vurgu); }
}

/* ------------------------------------------------------------------ */
/* 7) Dolu dugmede isik gecisi                                         */
/* ------------------------------------------------------------------ */

.dugme-dolu { position: relative; overflow: hidden; }
.dugme-dolu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.85s var(--yumusak-egri);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .dugme-dolu:hover::after { transform: translateX(100%); }
}

/* ------------------------------------------------------------------ */
/* 8) Gren cok yavas kimildasin                                        */
/* ------------------------------------------------------------------ */

/*
 * Duragan gren "doku" gibi durur; cok yavas kayan gren "film" gibi.
 * NEDEN steps(): surekli kayma yumusak bir suzulme yapar ve dijital
 * gorunur; basamakli sicrama gercek film greninin titremesine benzer.
 * NEDEN yalniz genis ekranda: mobilde surekli yeniden boyama pil harcar,
 * kazanci ise fark edilmez.
 */
@media (min-width: 900px) {
  .sahne-gren,
  .kapi-gren {
    animation: gren-titre 2.4s steps(4) infinite;
  }
  @keyframes gren-titre {
    0%   { background-position:   0px    0px; }
    25%  { background-position: -40px   20px; }
    50%  { background-position:  30px  -30px; }
    75%  { background-position: -20px  -10px; }
    100% { background-position:   0px    0px; }
  }
}

/* ------------------------------------------------------------------ */
/* 9) HAREKETI AZALT — hepsini kes                                     */
/* ------------------------------------------------------------------ */

/*
 * Yukaridaki her sey sustur; kullanici isletim sisteminde "hareketi
 * azalt" dediyse hicbiri calismamali.
 * ONEMLI: kesilince icerik EKSIKSIZ gorunmeli — bu blogun asil isi
 * animasyonu durdurmak degil, durdururken hicbir seyi gizli birakmamak.
 */
@media (prefers-reduced-motion: reduce) {
  .js .dev-baslik .satir-ic { transform: none !important; }
  .ilerleme span { animation: none !important; transform: scaleX(0) !important; }
  .sahne-isik { animation: none !important; translate: none !important; }
  .bolum-baslik { animation: none !important; translate: none !important; opacity: 1 !important; }
  .bolum-no::after { transform: scaleX(1) !important; transition: none !important; }
  .sahne-gren, .kapi-gren { animation: none !important; }
  .dugme-dolu::after { display: none; }
  .alan-kart:hover, .soz-kart:hover { transform: none !important; }
}

/* ================================================================== */
/* SEFKAT KATMANI — v1.2 (08.09.2026)                                  */
/* ================================================================== */

/*
 * KARAR: acilis "sinematik" kalacak ama SOGUK olmayacak.
 *
 * Onceki surumde sert siyah letterbox cubuklari vardi. Film hissi
 * veriyordu ama yanlis film: resmi, mesafeli, biraz da agir. Bu site
 * cocuk, yasli ve hasta bakimi anlatiyor; acilista insanin icini
 * isitmasi gerek, gerilmesi degil.
 *
 * Sefkatli hareketin uc kurali (sert hareketin tersi):
 *   1) YAVAS BASLA, YAVAS BIT. Ani duran hicbir sey yok; her gecis
 *      iki ucunda da yumusak (ease-in-out benzeri egri).
 *   2) KAYMA DEGIL NEFES. Sert kaydirma yerine cok hafif buyume/kuculme
 *      ve isik degisimi — canli bir seyin nefes almasi gibi.
 *   3) SICAK ISIK. Hareket eden sey golge degil GUN ISIGI; perdeden
 *      suzulup odada gezinen isik.
 */

:root {
  /* Sefkatli egri: baslarken cok yumusak, biterken neredeyse durgun.
     NEDEN ayri degisken: keskin --yumusak-egri arayuz ogeleri (dugme,
     kart) icin dogru; acilis metni ve isik icin fazla atak kaliyor. */
  --sefkat-egri: cubic-bezier(0.33, 0.02, 0.16, 1);

  /* Acilistaki ev sahnesinin tam turu. Cizim + isik + silinme hepsi bu
     surenin icinde; tek yerden degistirilir. */
  --ev-dongu: 21s;
}

/* ------------------------------------------------------------------ */
/* 1) Acilis videosu — YALNIZ ayarda tanimliysa cizilir                */
/* ------------------------------------------------------------------ */

.sahne-video {
  position: absolute;
  inset: 0;
  z-index: -3;              /* isik ve grenin de altinda */
  overflow: hidden;
}
.sahne-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cok hafif, cok yavas yakinlasma — kamera nefes aliyormus gibi.
     NEDEN scale 1.06'da kaliyor: daha fazlasi goruntuyu bozar ve
     hareket fark edilir hale gelir; fark edilen hareket dikkat dagitir. */
  animation: video-nefes 28s var(--sefkat-egri) infinite alternate;
}
@keyframes video-nefes {
  from { transform: scale(1.00); }
  to   { transform: scale(1.06); }
}

/*
 * Videonun uzerine ilik bir ortu. NEDEN sart: video hangi parlaklikta
 * olursa olsun baslik okunur kalmali. Ortu olmadan "bazen okunuyor"
 * durumu olur ve bu, en kotu durumdur — kimse fark etmez ama okunmaz.
 */
.sahne-video-ortu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247,244,239,0.86) 0%, rgba(247,244,239,0.62) 45%, rgba(247,244,239,0.90) 100%),
    radial-gradient(70% 60% at 30% 40%, rgba(247,244,239,0.30), transparent 70%);
}

/* ------------------------------------------------------------------ */
/* 2) Sefkat katmani — perdeden suzulen gun isigi                      */
/* ------------------------------------------------------------------ */

/*
 * Letterbox cubuklarinin yerini bu aldi. Ustten asagi inen ilik bir
 * isik ortusu: sayfa acilirken yavasca cekilir, sonra cok yavas nefes
 * alir. Siyah cubuk "perde kapandi" der; bu "sabah oldu, perde acildi" der.
 */
.sefkat {
  position: absolute;
  inset: 0;
  /*
   * z-index -1 — YAZININ ARKASINDA. Onemli.
   * Ilk yazimda 1 idi, yani metnin USTUNDE duruyordu ve ilik ortu
   * basligi griye ceviriyordu: "Eve giren kisi," murekkep siyahi yerine
   * soluk gri cikiyordu (rapor\ekran_sefkat_son.png ilk cekimi).
   * Bu, videoda kacinmak icin ozellikle uyardigim hatanin ta kendisi:
   * goruntu guzel durur ama yazi SESSIZCE okunmaz hale gelir.
   * Isik artik bosluklarda gorunuyor, harflerin uzerinde degil.
   */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    /* ust kenardan inen sicak isik */
    linear-gradient(180deg, rgba(255, 238, 222, 0.95) 0%, rgba(255, 238, 222, 0.35) 26%, transparent 52%),
    /* sol ustten odaya vuran huzme */
    radial-gradient(58% 48% at 16% 6%, rgba(255, 228, 200, 0.55), transparent 66%),
    /* alttan hafif topraksi sicaklik */
    linear-gradient(0deg, rgba(232, 214, 196, 0.45) 0%, transparent 34%);
}

/* Betik varsa: once dolu, sonra yavasca cekilir ve nefes almaya baslar. */
.js .sefkat {
  opacity: 1;
  animation:
    sefkat-cekil 2.6s var(--sefkat-egri) 0.1s forwards,
    sefkat-nefes 16s ease-in-out 2.7s infinite alternate;
}
@keyframes sefkat-cekil {
  from { opacity: 1;    }
  to   { opacity: 0.32; }
}
@keyframes sefkat-nefes {
  from { opacity: 0.32; }
  to   { opacity: 0.46; }
}

/* ------------------------------------------------------------------ */
/* 3) Basligin acilisi yumusatildi                                     */
/* ------------------------------------------------------------------ */

/*
 * Maske acilimi kaliyor (satirin perdenin altindan yukselmesi guzel),
 * ama SERTLIGI aliniyor:
 *   - sure uzatildi (1.15s -> 1.6s): acele etmeyen bir hareket
 *   - sefkat egrisi: sona dogru neredeyse durur, ani kesilme yok
 *   - yukselirken hafifce belirir (yalniz kayma degil, kayma + isik)
 */
.js .dev-baslik .satir-ic {
  transition:
    transform 1.6s var(--sefkat-egri),
    opacity   1.2s ease-out;
  opacity: 0;
}
.js .dev-baslik .satir.belirdi .satir-ic { opacity: 1; }

/* Genel beliris de yumusatildi: 20px sert sicrama yerine 14px suzulme,
   ve cok hafif buyume — uzaktan yaklasan bir sey gibi. */
.js .bel {
  transform: translateY(14px) scale(0.995);
  transition:
    opacity   1.3s var(--sefkat-egri),
    transform 1.3s var(--sefkat-egri);
}
.js .bel.belirdi { transform: none; }

/* ------------------------------------------------------------------ */
/* 4) Vurgu renginde sicaklik                                          */
/* ------------------------------------------------------------------ */

/*
 * Basligin ikinci satiri (kil rengi italik) acilirken cok hafif
 * isir gibi parlar, sonra durulur. Merhametli bir vurgu: bagirmadan
 * "burasi onemli" der.
 */
.js .dev-baslik em {
  animation: none;
}
.js .dev-baslik .satir.belirdi em {
  animation: vurgu-isin 2.8s var(--sefkat-egri) 0.3s 1;
}
@keyframes vurgu-isin {
  0%   { color: var(--vurgu-acik); }
  55%  { color: var(--vurgu-acik); }
  100% { color: var(--vurgu); }
}

/* ------------------------------------------------------------------ */
/* 5) Kaydirma imi — nabiz gibi                                        */
/* ------------------------------------------------------------------ */

/* Sert yanip sonme yerine yavas bir nabiz. Bekleyen ama zorlamayan. */
.kaydir-cizgi {
  animation: im-nefes 4.2s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/* 6) Isik katmani daha sicak, daha yavas                              */
/* ------------------------------------------------------------------ */

.sahne-isik {
  background:
    radial-gradient(48% 44% at 18% 20%, rgba(214, 138, 92, 0.24), transparent 64%),
    radial-gradient(52% 48% at 82% 32%, rgba(160, 176, 150, 0.18), transparent 66%),
    radial-gradient(64% 56% at 46% 98%, rgba(226, 170, 128, 0.22), transparent 68%);
  /* 48s -> 70s: fark edilmeyen ama "canli" hissettiren yavaslik. */
  animation-duration: 70s;
}

/* ------------------------------------------------------------------ */
/* 7) HAREKETI AZALT — sefkat katmani da kesilir                       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sefkat { opacity: 0.32 !important; animation: none !important; }
  .sahne-video video { animation: none !important; }
  /* Videoyu hic oynatmiyoruz: hareket istemeyen kullaniciya donen bir
     goruntu, animasyondan daha rahatsiz edicidir. Poster kalir. */
  .sahne-video video { display: none; }
  .js .dev-baslik .satir.belirdi em { animation: none !important; }
  .kaydir-cizgi { animation: none !important; opacity: 0.5; }
}

/* ================================================================== */
/* EV SAHNESI — v1.3 (08.09.2026)                                      */
/* ================================================================== */

/*
 * NEDEN BU BOLUM VAR
 *   Onceki surumde acilis "sicak" idi ama SOYUT: kayan isik ve suzulen
 *   yazi. Ferdi'nin gozlemi hakliydi — sefkat anlatilmiyordu, yalnizca
 *   renk sicakti. Duygu, soyut bir gecisten degil TANIDIK bir seyin
 *   olmasindan gelir.
 *
 *   Sahne su: bos bir evin cizgileri tek tek ciziliyor, sonra pencerede
 *   isik yaniyor ve yavasca nefes almaya basliyor. Tek cumlelik anlami
 *   var — "eve biri geldi, isik yandi" — ve marka adinin ta kendisi.
 *
 *   Hiz bilerek yavas: 3.4 saniyede cizim, 1.6 saniyede isik. Acele
 *   eden bir hareket "verimli" hissettirir; yavas hareket "ilgilenen".
 */

.ev-sahne {
  position: absolute;
  /* Genis ekranda metnin sagindaki bos alana oturur. */
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(38vw, 440px);
  aspect-ratio: 220 / 200;
  z-index: -1;          /* YAZININ ARKASINDA — okunurluk her seyden once */
  pointer-events: none;
}

.ev { width: 100%; height: 100%; overflow: visible; }

/* ------------------------------------------------------------------ */
/* Cizgiler — kendini cizen ev                                         */
/* ------------------------------------------------------------------ */

.ev-cizgi {
  stroke: var(--vurgu);
  stroke-width: 1.6;
  opacity: 0.55;
}

/*
 * Betik yoksa ev bastan cizili durur (asagidaki kural devreye girmez).
 * NEDEN: animasyonun yoklugu bos bir kutu birakmamali.
 */
.js .ev-cizgi {
  /* pathLength="1" sayesinde her yol 0..1 arasinda normalize;
     dash deseni tek bir degerle butun yollarda ayni ise yarar. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /*
   * DONGU — 08.09'da Ferdi'nin istegiyle tek seferlik olmaktan cikti.
   * Onceden 'forwards' ile bir kez cizilip kaliyordu; sayfada uzun
   * duran biri sahneyi bir daha gormuyordu.
   * Simdi 24 saniyelik bir dongu: cizilir, isik yanar, nefes alir,
   * usulca silinir, kisa bir sessizlikten sonra bastan cizilir.
   *
   * NEDEN 24 saniye: daha kisasi huzursuz eder (surekli bir sey oluyor);
   * daha uzunu tekrar ettigi fark edilmez. Bu sure, sayfayi okuyan
   * birinin bir kez daha denk gelecegi ama rahatsiz olmayacagi araliktir.
   */
  animation: ev-ciz var(--ev-dongu) var(--sefkat-egri) 0.5s infinite;
}
/* Cizgiler sirayla cikar — tek seferde beliren bir ev "yapistirilmis"
   gorunur; sirayla cizilen ev "yapiliyor" gorunur. */
.js .ev-cizgi:nth-of-type(2) { animation-delay: 0.9s; }
.js .ev-cizgi:nth-of-type(3) { animation-delay: 1.4s; }
.js .ev-cizgi:nth-of-type(4) { animation-delay: 1.7s; }
.js .ev-cizgi:nth-of-type(5) { animation-delay: 2.0s; }
.js .ev-cizgi:nth-of-type(6) { animation-delay: 0.2s; }
.js .ev-cizgi:nth-of-type(7) { animation-delay: 2.3s; }

/*
 * Cizim + silinme tek keyframe'de.
 *   offset  1 = hic cizilmemis
 *   offset  0 = tam cizili
 *   offset -1 = bastan itibaren silinmis
 * Boylece cizgi once BASTAN SONA cizilir, sonra yine BASTAN SONA silinir;
 * ters yone sarilmis gibi durmaz.
 */
/*
 * SESSIZLIK KALDIRILDI (08.09). Once dongunun sonunda ~2 saniye hicbir
 * seyin olmadigi bir aralik vardi; sahne "durdu" gibi gorunuyordu.
 * Simdi silinme tam %100'de bitiyor ve hemen bastan cizim basliyor —
 * arada bosluk yok. Iki uc da gorunmez oldugu icin gecis fark edilmiyor.
 */
@keyframes ev-ciz {
  0%   { stroke-dashoffset: 1;  }
  14%  { stroke-dashoffset: 0;  }
  76%  { stroke-dashoffset: 0;  }
  100% { stroke-dashoffset: -1; }
}

/* ------------------------------------------------------------------ */
/* Pencere isigi — sahnenin kalbi                                      */
/* ------------------------------------------------------------------ */

/*
 * Cizgiler bittikten SONRA yanar ve durmaz: 7 saniyelik bir ritimle
 * nefes alir. Nefes hizi kasten yavas — insanin sakin nefesi gibi.
 * Bu, sayfadaki tek surekli hareket; geri kalan her sey yerine oturup
 * durur. Boylece dikkat dagitmaz ama sayfa "olu" da gorunmez.
 */
.ev-isik {
  fill: var(--vurgu-acik);
  opacity: 0.30;
}
/*
 * Isik da ayni 24 saniyelik dongude: cizim biterken yanar, dongu boyunca
 * nefes alir, cizgiler silinmeden once soner.
 * NEDEN tek keyframe icinde hem yanma hem nefes: iki ayri animasyon
 * (biri forwards, biri infinite) dongude birbirine karisiyordu — isik
 * cizgiler silinirken yanik kaliyordu.
 */
.js .ev-isik {
  opacity: 0;
  animation: ev-isik-dongu var(--ev-dongu) ease-in-out 0.5s infinite;
}
.js .ev-isik-kapi {
  /* Kapinin altindan sizan isik biraz sonra yanar — ev bir anda degil,
     oda oda aydinlanir. */
  animation-delay: 1.4s;
}

@keyframes ev-isik-dongu {
  0%,  13% { opacity: 0;    }
  19%      { opacity: 0.30; }
  29%      { opacity: 0.21; }
  39%      { opacity: 0.40; }
  49%      { opacity: 0.24; }
  59%      { opacity: 0.38; }
  69%      { opacity: 0.26; }
  76%      { opacity: 0.32; }
  86%      { opacity: 0;    }
  100%     { opacity: 0;    }
}

/* ------------------------------------------------------------------ */
/* Gun isiginda gezinen toz                                            */
/* ------------------------------------------------------------------ */

/*
 * Perdeden vuran isikta gorunen toz zerreleri. Cok soluk, cok yavas.
 * NEDEN yalniz bes tane: fark edilmeyecek kadar az, ama sahneyi
 * "duragan" olmaktan cikaracak kadar cok. Onlarca zerre sus olur,
 * bes tanesi hava olur.
 * NEDEN transform ile hareket: duzen hesabi yeniden calismasin.
 */
.toz {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vurgu-acik);
  opacity: 0;
  pointer-events: none;
}
.js .toz { animation: toz-suzul 22s ease-in-out infinite; }

.toz1 { left: 12%; top: 68%; animation-delay: 0.5s;  }
.toz2 { left: 34%; top: 82%; animation-delay: 4.2s;  }
.toz3 { left: 58%; top: 74%; animation-delay: 8.6s;  }
.toz4 { left: 76%; top: 88%; animation-delay: 12.9s; }
.toz5 { left: 92%; top: 70%; animation-delay: 17.3s; }

@keyframes toz-suzul {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0)         scale(0.6); }
  18%  { opacity: 0.30; }
  50%  { opacity: 0.22; transform: translate3d(-14px, -70px, 0) scale(1);   }
  82%  { opacity: 0.12; }
  100% { opacity: 0;    transform: translate3d(10px, -150px, 0) scale(0.7); }
}

/* ------------------------------------------------------------------ */
/* Dar ekran                                                           */
/* ------------------------------------------------------------------ */

/*
 * Telefonda ev metnin SAGINDA duramaz — yer yok. Metnin arkasina,
 * yukari alinir ve iyice soluklastirilir. NEDEN soluk: arkada duran
 * bir cizim, uzerindeki yaziyi okumayi zorlastirmamali. Sahnenin
 * hissi kalir, okunurluk bozulmaz.
 */
@media (max-width: 899px) {
  /*
   * ILK YERLESIM YANLISTI (08.09'da olculdu): ev metnin USTUNDEN
   * gecirilmisti; cati cizgisi tam "Eve giren kisi," basliginin icinden
   * geciyor ve okumayi zorluyordu (rapor\ekran"_ev_mobil.png ilk cekimi).
   * Cizim ne kadar guzel olursa olsun, yaziyi zorlastiriyorsa yanlistir.
   *
   * Simdi sahnenin DIBINE, sag kenardan tasacak sekilde oturuyor:
   * basligin altinda kaliyor, hissi veriyor, okumaya karismiyor.
   */
  .ev-sahne {
    top: auto;
    bottom: 2%;
    right: -20%;
    transform: none;
    width: min(74vw, 320px);
    opacity: 0.32;
  }
  .toz { display: none; }   /* dar ekranda gorunmuyor, pil yakmasin */
}

/* Cok dar ekranda ev iyice geri cekilir. */
@media (max-width: 479px) {
  .ev-sahne { opacity: 0.26; width: 80vw; right: -26%; bottom: 1%; }
}

/* ------------------------------------------------------------------ */
/* HAREKETI AZALT                                                      */
/* ------------------------------------------------------------------ */

/*
 * Hareket istemeyen kullanici evi YINE DE gormeli — cizili ve isigi
 * yanmis halde, ama hicbir sey kimildamadan. Animasyonu kesmek,
 * icerigi kesmek degildir.
 */
@media (prefers-reduced-motion: reduce) {
  .js .ev-cizgi { stroke-dashoffset: 0 !important; animation: none !important; }
  .js .ev-isik  { opacity: 0.30 !important; animation: none !important; }
  .toz          { display: none !important; }
}

/* ================================================================== */
/* ALAN SIMGELERI — v1.4 (08.09.2026)                                  */
/* ================================================================== */

/*
 * Her hizmet kartinin arkasinda, KENDI konusunu anlatan bir cizgi resim
 * ve o konunun KENDI hareketi:
 *   cocuk  -> besik sallanir
 *   yasli  -> sallanan sandalye sallanir
 *   hasta  -> kalp ritmi cizgisi atar
 *   evcil  -> pati izleri sirayla yurur
 *   ev     -> tencere tuter, utu gider gelir
 *
 * UC KURAL — hepsi bunlara uyuyor:
 *   1) YAZININ ARKASINDA ve soluk. Cizim ne kadar guzel olursa olsun
 *      kart metnini okumayi zorlastiriyorsa yanlistir. (Ayni hatayi
 *      08.09'da acilis evinde yapip duzeltmistik.)
 *   2) KART GORUNDUGUNDE cizilir, once degil. Ekranda olmayan bes kartin
 *      animasyonu bosuna donmez.
 *   3) YAVAS. Hepsi 4.5-7 saniyelik ritimlerde. Hizli hareket "reklam"
 *      hissi verir; yavas hareket "yasayan bir sey" hissi verir.
 */

.alan-kart { position: relative; overflow: hidden; }

.alan-simge {
  position: absolute;
  /*
   * KUTU KARTIN ICINDE DURUR — kenardan tasmaz.
   * Ilk yerlesim right/bottom: -6px idi; cizimler basitken (tek besik,
   * tek pati) sorun cikarmiyordu. v2.0'da cizimler ayrintilandi (top,
   * tarak, utu, buhar) ve kenara denk gelen ayrintilar kartin
   * overflow:hidden'i tarafindan KIRPILDI — top yarim, tarak yarim
   * gorunuyordu (08.09, rapor\ekran0_simge_v2.png ilk cekimi).
   * Kirpilan bir cizim, cizim degildir.
   */
  right: 14px;
  bottom: 10px;
  /*
   * GENIS VE ALCAK. Iki karede (cocuk: besik+top, ev: tencere+utu)
   * yan yana IKI sahne var; kare bir kutuda ust uste binip okunmaz
   * oluyorlardi. Yatay kutu ikisine de yer aciyor.
   */
  width: min(200px, 60%);
  height: 116px;
  z-index: 0;            /* metin (asagida z-index:1) ustunde kalir */
  pointer-events: none;
  opacity: 0.16;
}

/* Kart icerigi cizimin USTUNDE. Okunurluk her seyden once. */
.alan-kart > p,
.alan-kart > h3 { position: relative; z-index: 1; }

.alan-simge .simge { width: 100%; height: 100%; overflow: visible; }
.alan-simge .sc,
.alan-simge ellipse,
.alan-simge circle {
  stroke: var(--vurgu);
  stroke-width: 2.4;
  fill: none;
}

/* Genis ekranda kart uzerine gelince cizim biraz belirginlesir —
   "burada bir sey var" der, bagirmadan. Yalniz farenin oldugu yerde. */
@media (hover: hover) and (pointer: fine) {
  .alan-simge { transition: opacity 0.6s var(--sefkat-egri); }
  .alan-kart:hover .alan-simge { opacity: 0.26; }
}

/* ------------------------------------------------------------------ */
/* Cizilme — kart gorundugunde                                         */
/* ------------------------------------------------------------------ */

/*
 * Betik yoksa cizimler bastan tam gorunur (asagidaki kural .js ister).
 * Kart ekrana girip .belirdi aldiginda cizgiler kendini cizer.
 */
.js .alan-simge .sc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .alan-kart.belirdi .alan-simge .sc {
  animation: simge-ciz 2.2s var(--sefkat-egri) 0.35s forwards;
}
@keyframes simge-ciz { to { stroke-dashoffset: 0; } }

/* Pati izleri cizgiyle degil, tek tek BELIREREK gelir (yuruyus). */
.js .alan-simge .pati { opacity: 0; }
.js .alan-kart.belirdi .alan-simge .pati {
  animation: pati-bas 6s ease-in-out infinite;
}
.js .alan-kart.belirdi .pati1 { animation-delay: 0.4s; }
.js .alan-kart.belirdi .pati2 { animation-delay: 1.1s; }
.js .alan-kart.belirdi .pati3 { animation-delay: 1.8s; }
.js .alan-kart.belirdi .pati4 { animation-delay: 2.5s; }
@keyframes pati-bas {
  0%   { opacity: 0;   }
  12%  { opacity: 1;   }
  62%  { opacity: 1;   }
  85%  { opacity: 0;   }
  100% { opacity: 0;   }
}

/* ------------------------------------------------------------------ */
/* Dar ekran                                                           */
/* ------------------------------------------------------------------ */

/*
 * Telefonda kart daha dar; cizim buyuk kalirsa metnin altina girer.
 * Kucultuluyor ve biraz daha soluklastiriliyor.
 */
@media (max-width: 639px) {
  .alan-simge { width: min(168px, 66%); height: 98px; right: 10px; bottom: 8px; opacity: 0.15; }
}

/* ------------------------------------------------------------------ */
/* HAREKETI AZALT                                                      */
/* ------------------------------------------------------------------ */

/*
 * Cizimler GORUNUR kalir, yalniz kimildamazlar. Hareketi kesmek
 * icerigi kesmek degildir — kart yine konusunu anlatir.
 */
@media (prefers-reduced-motion: reduce) {
  .js .alan-simge .sc { stroke-dashoffset: 0 !important; animation: none !important; }
  .js .alan-simge .pati { opacity: 1 !important; animation: none !important; }
  .js .alan-kart.belirdi .besik-govde,
  .js .alan-kart.belirdi .sandalye-govde,
  .js .alan-kart.belirdi .ritim-cizgi { animation: none !important; transform: none !important; }
  .js .alan-kart.belirdi .ritim-cizgi { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* ================================================================== */
/* ALAN SIMGELERI — HAREKETLER v2.0 (08.09.2026)                       */
/* ================================================================== */

/*
 * Ferdi'nin istegi: her simge kendi ISINI YAPSIN.
 * v1.0'da hepsi yalnizca "sallaniyordu" ve patiler yuruyor degil
 * yanip soner gibi duruyordu. Bu bolum onun yerini aliyor.
 *
 * ORTAK KURAL — hepsi buna uyuyor:
 *   Hareket, isin KENDI hareketi olacak. Utu gider gelir cunku utu
 *   gider gelir; besik sallanir cunku besik sallanir. Sus yok.
 *   Ve hicbiri hizli degil.
 */

/* ------------------------------------------------------------------ */
/* COCUK — besik sallanir, ayrica topa vurulur                         */
/* ------------------------------------------------------------------ */

/* Besik askidan sallanir: donme merkezi USTTE. Merkez ortada olsaydi
   hareket "kayma" gibi durur, sallanma gibi durmazdi. */
.js .alan-kart.belirdi .besik-govde {
  transform-origin: 34px 12px;
  animation: besik-salla 4.6s ease-in-out 0.9s infinite alternate;
}
@keyframes besik-salla {
  from { transform: rotate(-3.4deg); }
  to   { transform: rotate( 3.4deg); }
}

/*
 * TEKME — ayak geri cekilir, vurur, geri doner. 4.5 saniyede bir.
 * Vurus ani keskin (%18-%26 arasi), donusu yavas: gercek bir tekme de
 * boyle. Ayni suredeki top animasyonuyla ZAMANLI — top tam vurus aninda
 * firliyor.
 */
.js .alan-kart.belirdi .tekme {
  transform-origin: 74px 88px;
  animation: tekme-vur 4.5s ease-in-out 1.1s infinite;
}
@keyframes tekme-vur {
  0%,  14% { transform: rotate(0deg);   }
  20%      { transform: rotate(14deg);  }  /* geri cekilis */
  27%      { transform: rotate(-26deg); }  /* vurus */
  46%      { transform: rotate(0deg);   }
  100%     { transform: rotate(0deg);   }
}

/*
 * TOP — vurus aninda sag-yukari firlar, kavis cizip yerine doner.
 * NEDEN iki asamali kavis (yukselis + inis ayri): tek bir gidis-donus
 * hareketi lastik gibi durur; yukselip inen bir top kavis cizer.
 */
.js .alan-kart.belirdi .top {
  transform-origin: 100px 80px;
  animation: top-ucus 4.5s ease-out 1.1s infinite;
}
@keyframes top-ucus {
  0%,  27% { transform: translate(0, 0)      rotate(0deg);   }
  40%      { transform: translate(10px, -26px) rotate(90deg);  }
  55%      { transform: translate(16px, -6px)  rotate(150deg); }
  64%      { transform: translate(14px, 0)     rotate(170deg); }  /* yere degdi */
  72%      { transform: translate(8px, -8px)   rotate(200deg); }  /* kucuk sekme */
  85%,100% { transform: translate(0, 0)        rotate(240deg); }
}

/* ------------------------------------------------------------------ */
/* YASLI — sac taranir                                                 */
/* ------------------------------------------------------------------ */

/*
 * Tarak yukaridan asagi iner, sonra basa doner. Inis yavas (tarama),
 * donus hizli ve GORUNMEZ (opacity 0) — cunku tarak geri giderken
 * sacin icinden ters yone gecmis gibi gorunmesin.
 */
.js .alan-kart.belirdi .tarak {
  animation: tarak-in 5.2s ease-in-out 1.0s infinite;
}
@keyframes tarak-in {
  0%       { transform: translate(0, 0);      opacity: 0; }
  8%       { transform: translate(0, 0);      opacity: 1; }
  62%      { transform: translate(-6px, 44px); opacity: 1; }
  74%      { transform: translate(-6px, 48px); opacity: 0; }
  100%     { transform: translate(0, 0);      opacity: 0; }
}

/* Sac telleri, tarak gecerken hafifce kimildar. Cok az — sac savrulmuyor,
   taraniyor. */
.js .alan-kart.belirdi .sac {
  transform-origin: 58px 30px;
  animation: sac-kimilda 5.2s ease-in-out 1.0s infinite;
}
@keyframes sac-kimilda {
  0%, 100% { transform: rotate(0deg);   }
  35%      { transform: rotate(1.6deg); }
  70%      { transform: rotate(-1.2deg);}
}

/* ------------------------------------------------------------------ */
/* HASTA — cizgi ilerler, kalp yanip soner                             */
/* ------------------------------------------------------------------ */

/* Cizgi soldan saga akar: cizilir, sonra soldan silinir. Monitorde
   akan ritim boyle gorunur. */
.js .alan-kart.belirdi .ritim-cizgi {
  animation: ritim-ak 3.6s linear 0.9s infinite;
}
@keyframes ritim-ak {
  0%   { stroke-dashoffset: 1;  opacity: 0; }
  10%  { opacity: 1; }
  62%  { stroke-dashoffset: 0;  opacity: 1; }
  90%  { stroke-dashoffset: -1; opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

/*
 * Kalp yanip soner. NEDEN cizgiyle BIREBIR senkron degil (3.6s'e karsi
 * 2.4s): tam senkron olsaydi "grafik" gibi mekanik durur. Hafif kaymali
 * olunca iki ayri sey gibi, yani canli durur.
 */
.js .alan-kart.belirdi .kalp {
  transform-origin: 102px 74px;
  animation: kalp-at 2.4s ease-in-out 1.2s infinite;
}
@keyframes kalp-at {
  0%, 100% { opacity: 0.35; transform: scale(0.94); }
  14%      { opacity: 1;    transform: scale(1.10); }
  28%      { opacity: 0.6;  transform: scale(0.98); }
  42%      { opacity: 0.95; transform: scale(1.05); }
  60%      { opacity: 0.35; transform: scale(0.94); }
}

/* ------------------------------------------------------------------ */
/* EVCIL — patiler YURUR                                               */
/* ------------------------------------------------------------------ */

/*
 * v1.0'da patiler tek tek yanip soniyordu; yuruyus gibi durmuyordu.
 * Simdi alti iz, sag-sol donusumlu yukseklikte (adim genisligi) ve
 * SIRAYLA basiliyor; arkada kalanlar solmadan duruyor, iz tamamlaninca
 * hepsi birden soluyor ve yuruyus bastan basliyor.
 *
 * NEDEN "basarken" hafif buyume: ayak yere basinca iz bir anda olusur.
 * Yumusak beliren bir iz "hayalet" gibi durur.
 */
.js .alan-simge .pati { opacity: 0; }
.js .alan-kart.belirdi .alan-simge .pati {
  animation: pati-bas 6.4s ease-out infinite;
}
.js .alan-kart.belirdi .pati1 { animation-delay: 0.90s; }
.js .alan-kart.belirdi .pati2 { animation-delay: 1.32s; }
.js .alan-kart.belirdi .pati3 { animation-delay: 1.74s; }
.js .alan-kart.belirdi .pati4 { animation-delay: 2.16s; }
.js .alan-kart.belirdi .pati5 { animation-delay: 2.58s; }
.js .alan-kart.belirdi .pati6 { animation-delay: 3.00s; }

@keyframes pati-bas {
  0%   { opacity: 0; }
  3%   { opacity: 1; }     /* iz aniden olusur */
  55%  { opacity: 1; }
  78%  { opacity: 0; }     /* hepsi birlikte solar */
  100% { opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* EV ISLERI — tencere tuter, utu gider gelir                          */
/* ------------------------------------------------------------------ */

/*
 * Buhar: uc tel, UC FARKLI hizda yukselir ve solar.
 * NEDEN farkli hiz: ucu ayni anda ayni yone giderse duman degil,
 * animasyon gibi durur. Farkli hizda olunca hava akimi gibi durur.
 */
.js .alan-kart.belirdi .buhar1 { animation: buhar-yuksel 4.2s ease-out 1.0s infinite; }
.js .alan-kart.belirdi .buhar2 { animation: buhar-yuksel 5.0s ease-out 1.6s infinite; }
.js .alan-kart.belirdi .buhar3 { animation: buhar-yuksel 4.6s ease-out 2.2s infinite; }

@keyframes buhar-yuksel {
  0%   { opacity: 0;   transform: translateY(6px)   scaleY(0.7); }
  22%  { opacity: 0.9; }
  70%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translateY(-16px) scaleY(1.15); }
}

/*
 * Utu masada gider gelir. Gidisi ve donusu ayni hizda (ease-in-out),
 * cunku utu iterken de cekerken de aynidir. Ucta kisa bir duraklama
 * var — insan utuyu ucta bir an tutar.
 */
.js .alan-kart.belirdi .utu {
  animation: utu-git-gel 3.8s ease-in-out 1.0s infinite;
}
@keyframes utu-git-gel {
  0%,  6%  { transform: translateX(0);    }
  46%      { transform: translateX(14px); }
  54%      { transform: translateX(14px); }  /* ucta kisa duraklama */
  94%,100% { transform: translateX(0);    }
}

/* ------------------------------------------------------------------ */
/* HAREKETI AZALT — hepsi durur, hicbiri KAYBOLMAZ                     */
/* ------------------------------------------------------------------ */

/*
 * Onemli: bu blogun isi animasyonu durdurmak degil, DURDURURKEN hicbir
 * seyi gizli birakmamak. Opacity ile beliren ogeler (pati, buhar, tarak,
 * ritim cizgisi) animasyon kesilince 0'da kalirdi — kart yarim gorunurdu.
 * Hepsi acikca gorunur yapiliyor.
 */
@media (prefers-reduced-motion: reduce) {
  .js .alan-kart.belirdi .besik-govde,
  .js .alan-kart.belirdi .tekme,
  .js .alan-kart.belirdi .top,
  .js .alan-kart.belirdi .sac,
  .js .alan-kart.belirdi .utu {
    animation: none !important;
    transform: none !important;
  }
  .js .alan-simge .pati,
  .js .alan-kart.belirdi .alan-simge .pati {
    opacity: 1 !important; animation: none !important;
  }
  .js .alan-kart.belirdi .tarak {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .js .alan-kart.belirdi .ritim-cizgi {
    animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important;
  }
  .js .alan-kart.belirdi .kalp {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .js .alan-kart.belirdi .buhar1,
  .js .alan-kart.belirdi .buhar2,
  .js .alan-kart.belirdi .buhar3 {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ================================================================== */
/* SUREKLILIK — v1.5 (08.09.2026)                                      */
/* ================================================================== */

/*
 * FERDI'NIN GOZLEMI: "animasyonlar tam akmiyor, sureklilik yok."
 * Hakliydi. Sorunun kaynagi tek bir animasyon degil, SAYFANIN BUTUNUYDU:
 *
 *   - Belirme (.bel) BIR KEZ calisiyor; ilk gecisten sonra sayfanin
 *     buyuk kismi tamamen duragan kaliyordu.
 *   - Surekli hareket yalniz acilis sahnesinde ve bes kartta vardi.
 *     Aradaki bolumlerde (Dort adim, Neden ajans, Acik soz, form)
 *     hicbir sey kimildamiyordu.
 *   - Acilis evinin dongusunde ~2 saniyelik olu bosluk vardi.
 *   - Kaydirma siriti animation-timeline istiyordu; desteklemeyen
 *     tarayicida hic gorunmuyordu.
 *
 * Bu bolum sonuncusu haric hepsini kapatiyor. Kural degismedi:
 * hareket fark edilmeyecek kadar yavas, ama sayfa hicbir an "olu"
 * gorunmeyecek.
 */

/* ------------------------------------------------------------------ */
/* 1) Ortam isigi — sayfanin tamaminda, hep kimildayan                 */
/* ------------------------------------------------------------------ */

/*
 * Acilis sahnesindeki isik yalniz orada kaliyordu; asagi inince sayfa
 * duz bir zemine donusuyordu. Bu katman butun sayfanin arkasinda
 * duruyor ve cok yavas geziniyor — pencereden giren isigin gun icinde
 * odada yer degistirmesi gibi.
 *
 * NEDEN position: fixed: kaydirirken katman yerinde kalir, icerik onun
 * uzerinden akar. Boylece "arkada duran bir oda" hissi olusur.
 * NEDEN z-index -1 ve pointer-events yok: hicbir seyi engellemez.
 * NEDEN 120s: bir tur iki dakika surer. Bakarken fark edilmez, ama
 * sayfada bir sure kalan biri isigin yer degistirdigini sezer.
 */
html { background: var(--zemin); }
body { background: transparent; }

.ortam {
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 20% 24%, rgba(214, 138, 92, 0.16), transparent 68%),
    radial-gradient(42% 38% at 78% 40%, rgba(160, 176, 150, 0.13), transparent 70%),
    radial-gradient(48% 42% at 46% 88%, rgba(226, 170, 128, 0.14), transparent 72%);
}
.js .ortam { animation: ortam-gez 120s ease-in-out infinite alternate; }

@keyframes ortam-gez {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
  50%  { transform: translate3d( 1%,  2%, 0) scale(1.06); }
  100% { transform: translate3d( 3%, -2%, 0) scale(1.02); }
}

/* ------------------------------------------------------------------ */
/* 2) Dort adim — adimlar boyunca akan nabiz                           */
/* ------------------------------------------------------------------ */

/*
 * Koyu bantta hicbir sey kimildamiyordu. Simdi adim numaralari sirayla
 * canlaniyor: 01 -> 02 -> 03 -> 04, sonra bastan. Isik listede asagi
 * dogru akiyor, yani bolumun kendisi "ilerliyor".
 *
 * NEDEN numaralar, metin degil: metnin parlaklik degistirmesi okumayi
 * zorlastirir. Numara dekoratif bir isarettir; onun canlanmasi
 * okumaya karismaz.
 *
 * NEDEN 9 saniye ve 4 gecikme: bir tur 9 saniye, her adim 1.1 saniye
 * arayla. Goz siralamayi yakalar, ama takip etmek zorunda kalmaz.
 */
.js .adim-no {
  animation: adim-nabiz 9s ease-in-out infinite;
}
.js .adim:nth-child(1) .adim-no { animation-delay: 0s;    }
.js .adim:nth-child(2) .adim-no { animation-delay: 1.1s;  }
.js .adim:nth-child(3) .adim-no { animation-delay: 2.2s;  }
.js .adim:nth-child(4) .adim-no { animation-delay: 3.3s;  }

@keyframes adim-nabiz {
  0%,  100% { color: var(--vurgu-acik); opacity: 0.55; }
  6%        { color: #e8a274;           opacity: 1;    }
  18%       { color: var(--vurgu-acik); opacity: 0.72; }
  40%       { color: var(--vurgu-acik); opacity: 0.55; }
}

/* ------------------------------------------------------------------ */
/* 3) Bolum cizgileri — cizildikten sonra da yasasin                   */
/* ------------------------------------------------------------------ */

/*
 * "BOLUM BIR" yanindaki cizgi bir kez cizilip donuyordu. Simdi cizildikten
 * sonra ucunda cok soluk bir parlaklik gezinIyor — bolum baslıklarinin
 * durdugu yerde bile kucuk bir canlilik kaliyor.
 */
.js .bolum-no.belirdi::after {
  background: linear-gradient(90deg,
              var(--cizgi) 0%, var(--vurgu-acik) 50%, var(--cizgi) 100%);
  background-size: 260% 100%;
  animation: cizgi-gez 11s ease-in-out infinite;
}
.js .bolum-koyu .bolum-no.belirdi::after {
  background: linear-gradient(90deg,
              var(--cizgi-koyu) 0%, var(--vurgu) 50%, var(--cizgi-koyu) 100%);
  background-size: 260% 100%;
}
@keyframes cizgi-gez {
  0%,  100% { background-position: 130% 0; }
  50%       { background-position: -30% 0; }
}

/* ------------------------------------------------------------------ */
/* 4) Kaydirma imi — akisin gorunur isareti                            */
/* ------------------------------------------------------------------ */

/* Acilistaki dikey cizgi zaten nefes aliyordu; ritmini ortam isigiyla
   ayni aileye getiriyoruz — sayfadaki butun yavas hareketler ayni
   tempoda olsun, birbirleriyle yarismasin. */
.kaydir-cizgi { animation-duration: 5s; }

/* ------------------------------------------------------------------ */
/* HAREKETI AZALT                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .js .ortam { animation: none !important; transform: none !important; }
  .js .adim-no { animation: none !important; opacity: 1 !important; }
  .js .bolum-no.belirdi::after {
    animation: none !important;
    background: var(--cizgi) !important;
  }
  .js .bolum-koyu .bolum-no.belirdi::after { background: var(--cizgi-koyu) !important; }
}

/* ================================================================== */
/* BAKICI SAYFALARI — v1.0 (08.09.2026)                                */
/* ================================================================== */

/*
 * Kayit, giris, panel ve profil formu. Sitenin geri kalaniyla ayni dili
 * konusuyor (ayni renkler, ayni serif basliklar) ama SUSU YOK:
 * burada is yapiliyor, sahne kurulmuyor. Acilistaki isik ve gren bu
 * sayfalarda yok — form doldururken arka planda bir sey kimildamasi
 * dikkat dagitir.
 */

.bsayfa { background: var(--zemin); }

.bgovde {
  flex: 1 0 auto;
  width: 100%;
  max-width: 760px;          /* form genisligi: goz satiri kaybetmesin */
  margin: 0 auto;
  padding: 34px 20px 80px;
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.bbaslik {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin: 10px 0 18px;
}

.bgiris-metin {
  color: var(--yazi-ikincil);
  max-width: var(--okuma);
  margin-bottom: 24px;
}

.bnot { font-size: 0.92rem; color: var(--yazi-ikincil); margin: 0; }
/*
 * NEDEN dolgu var: metin baglantisi 20px yuksekliginde kaliyordu —
 * parmakla guvenli isabet sinirinin cok altinda (olcum, 08.09).
 * Yazi ayni satirda kaliyor ama dokunma alani 44px'e cikiyor.
 */
.bnot a {
  color: var(--vurgu);
  display: inline-block;
  padding: 12px 4px;
}

.bform { max-width: 100%; }

.bhata-liste {
  list-style: disc;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
}
.bhata-liste li { font-size: 0.94rem; }

/* ------------------------------------------------------------------ */
/* Adim gostergesi                                                     */
/* ------------------------------------------------------------------ */

/*
 * NEDEN adimlar gorunuyor: "daha ne kadar var?" sorusu cevapsiz kalirsa
 * insan formu birakir. Uc adim gormek, uzun bir form gormekten kolaydir.
 */
.badim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: 0.9rem;
}
.badim li a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  text-decoration: none;
  color: var(--yazi-ikincil);
  background: var(--kart);
}
.badim li.etkin a {
  border-color: var(--vurgu);
  color: var(--vurgu);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Hizmet alani secimi                                                 */
/* ------------------------------------------------------------------ */

.balan-kume { border: 0; padding: 0; margin: 0 0 4px; display: grid; gap: 10px; }
.balan-kume legend { padding: 0; margin-bottom: 10px; }

.balan-secim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--kart);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.balan-secim input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vurgu); }
.balan-secim strong { display: block; font-weight: 600; }
.balan-secim em {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--yazi-ikincil);
  margin-top: 2px;
}
/* NEDEN :has(): kutu isaretliyken BUTUN satir belli olsun; kucuk kareyi
   aramak gerekmesin. Desteklemeyen tarayicida yalniz kare isaretli
   gorunur — islev kaybi yok. */
.balan-secim:has(input:checked) { border-color: var(--vurgu); background: #fffaf6; }

/* ------------------------------------------------------------------ */
/* Uyum sorulari                                                       */
/* ------------------------------------------------------------------ */

.bsoru {
  padding: 20px 0;
  border-bottom: 1px solid var(--cizgi);
}
.bsoru:last-of-type { border-bottom: 0; }

.bsoru-metin {
  font-size: 1.02rem;
  margin-bottom: 14px;
  color: var(--yazi);
}

/* --- Bes noktali olcek --- */
.bolcek {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.bolcek-uc {
  font-size: 0.85rem;
  color: var(--yazi-soluk);
  line-height: 1.35;
}
.bolcek-uc:last-child { text-align: right; }

.bolcek-secim { display: flex; gap: 10px; align-items: center; }

/*
 * Radyo dugmesini gizleyip yerine daire ciziyoruz.
 * NEDEN: tarayicinin kendi radyosu 13px; parmakla isabet ettirmesi zor.
 * Etiket 44px dokunma hedefi, icindeki daire gorsel.
 * Radyo GIZLENIYOR ama SILINMIYOR — klavye ve ekran okuyucu icin orada.
 */
.bolcek-secim label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.bolcek-secim input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
}
.bolcek-secim label span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--cizgi);
  background: var(--kart);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--sefkat-egri);
}
/* Uctaki noktalar biraz buyuk: olcegin ucu oldugu belli olsun. */
.bolcek-secim label:first-child span,
.bolcek-secim label:last-child span { width: 24px; height: 24px; }

.bolcek-secim input:checked + span {
  border-color: var(--vurgu);
  background: var(--vurgu);
  transform: scale(1.12);
}
.bolcek-secim input:focus-visible + span {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
}

/* --- Senaryo secenekleri --- */
.bsecenekler { display: grid; gap: 8px; }

.bsecenek {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 15px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--kart);
  cursor: pointer;
  font-size: 0.96rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.bsecenek input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--vurgu); }
.bsecenek:has(input:checked) { border-color: var(--vurgu); background: #fffaf6; }

/* ------------------------------------------------------------------ */
/* KVKK kutusu                                                         */
/* ------------------------------------------------------------------ */

/*
 * Metin acilir kutuda. NEDEN ayri sayfaya link verilmedi: link verilseydi
 * kimse acmazdi ve onay, okunmamis bir metne verilmis olurdu.
 */
.kvkk-kutu {
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--zemin-2);
  padding: 16px 18px;
  display: grid;
  gap: 14px;
}
.kvkk-kutu summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 0;
  min-height: 44px;            /* dokunma hedefi */
  display: flex;
  align-items: center;
}
.kvkk-metin {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 2px 4px;
  border-top: 1px solid var(--cizgi);
  margin-top: 8px;
}
.kvkk-metin h3 { font-size: 1rem; margin: 14px 0 4px; }
.kvkk-metin h3:first-child { margin-top: 0; }
.kvkk-metin p { font-size: 0.92rem; color: var(--yazi-ikincil); }
.kvkk-surum {
  margin-top: 14px;
  font-size: 0.82rem !important;
  color: var(--yazi-soluk) !important;
}

/* Metin hukukcu onayindan gecene kadar gorunur uyari. Saklamiyoruz. */
.kvkk-taslak-not {
  font-size: 0.86rem;
  color: var(--hata-yazi);
  background: var(--hata-zemin);
  border: 1px solid var(--hata-cizgi);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Panel                                                               */
/* ------------------------------------------------------------------ */

.bkart-izgara { display: grid; gap: 18px; }

.bdurum-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.bdurum-liste li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 0.95rem;
}
.bdurum-liste li:last-child { border-bottom: 0; }
.bdurum-liste span { color: var(--yazi-ikincil); }
.bdurum-liste strong { font-weight: 600; text-align: right; }

/* ------------------------------------------------------------------ */
/* Genis ekran                                                         */
/* ------------------------------------------------------------------ */

@media (min-width: 700px) {
  .bkart-izgara { grid-template-columns: 1fr 1fr; }
  .bgovde { padding: 44px 28px 90px; }
}

/* Dar ekranda olcek uclari alta iner — yanyana sigmazlar. */
@media (max-width: 559px) {
  .bolcek { grid-template-columns: 1fr; gap: 8px; }
  .bolcek-uc:last-child { text-align: left; }
  .bolcek-secim { justify-content: space-between; }
}

/* ------------------------------------------------------------------ */
/* Hareketi azalt                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .bolcek-secim input:checked + span { transform: none; }
}

/* ================================================================== */
/* YONETICI EKRANI — v1.0 (08.09.2026)                                 */
/* ================================================================== */

/*
 * Burada sus yok, is var. Yonetici bu ekrana karar vermek icin geliyor:
 * kim bekliyor, ne gonderdi, onaylayayim mi. Tasarim o soruyu
 * kolaylastirmali, guzellesmeye calismamali.
 */

.ysayim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}
.ysayim-kutu {
  padding: 14px 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--kart);
  text-align: center;
}
.ysayim-kutu strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.1;
}
.ysayim-kutu span { font-size: 0.82rem; color: var(--yazi-ikincil); }

/* Bekleyen varsa GORUNSUN — yonetici ekrani tarayarak aramasin. */
.ysayim-kutu.bekliyor {
  border-color: var(--vurgu);
  background: #fffaf6;
}
.ysayim-kutu.bekliyor strong { color: var(--vurgu); }

.ybaslik {
  font-size: 1.35rem;
  margin: 34px 0 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ysayi { font-size: 0.85rem; color: var(--yazi-soluk); font-family: var(--sans); }

/* ------------------------------------------------------------------ */
/* Aday karti                                                          */
/* ------------------------------------------------------------------ */

.yaday {
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--kart);
  padding: 20px 20px 18px;
  margin-bottom: 16px;
}
.yaday-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  align-items: baseline;
  margin-bottom: 14px;
}
.yaday-bas h3 { font-size: 1.25rem; margin: 0; }
.yaday-alt { font-size: 0.88rem; color: var(--yazi-ikincil); margin-top: 3px; }
.yaday-tarih { font-size: 0.8rem; color: var(--yazi-soluk); white-space: nowrap; }

.yaday-metin {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--zemin-2);
  border-radius: 9px;
  font-size: 0.94rem;
  color: var(--yazi-ikincil);
}

/* Eksik veri uyarisi: engellemiyoruz ama SOYLUYORUZ. */
.yaday-uyari {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--hata-yazi);
  background: var(--hata-zemin);
  border: 1px solid var(--hata-cizgi);
  border-radius: 8px;
  padding: 9px 12px;
}

.yaday-islem { margin-top: 16px; display: grid; gap: 12px; }
.yaday-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------------ */
/* Kullanici tablosu                                                   */
/* ------------------------------------------------------------------ */

/*
 * NEDEN sarmalayici: dar ekranda tablo tasar. Sayfayi yatay kaydirmak
 * yerine YALNIZ tabloyu kaydiriyoruz — sayfanin geri kalani yerinde
 * kalir. Tabloyu kartlara cevirmek de bir yol ama alti sutunu kart
 * yapmak listeyi taranamaz hale getirirdi.
 */
.ytablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ytablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 620px;
}
.ytablo th {
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yazi-soluk);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
.ytablo td {
  padding: 10px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}
.ytablo tr:last-child td { border-bottom: 0; }
.ykucuk { font-size: 0.84rem; color: var(--yazi-ikincil); }

.yrozet {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--cizgi);
}
.yrozet.y-bakici   { color: var(--vurgu);   border-color: var(--vurgu);   background: #fffaf6; }
.yrozet.y-aile     { color: var(--ikincil); border-color: #b6c7bd;        background: #f4f8f5; }
.yrozet.y-yonetici { color: #fff; background: var(--koyu); border-color: var(--koyu); }

@media (min-width: 700px) {
  .yaday { padding: 24px 24px 20px; }
}

/* Kapi ekranindaki alt baglanti (bakici kayit). Dokunma hedefi 44px. */
.kapi-alt-baglanti {
  margin-top: 18px;
  font-size: 0.93rem;
  color: var(--yazi-ikincil);
  text-align: center;
}
.kapi-alt-baglanti a {
  color: var(--vurgu);
  display: inline-block;
  padding: 12px 6px;
}

/* Sanal (sahte) kayit rozeti. NEDEN ayri renk: gercek basvurudan
   BAKISTA ayrilmali; okumak zorunda kalinirsa rozet ise yaramaz. */
.yrozet.y-sanal {
  color: #7a5a1f;
  border-color: #d9c08a;
  background: #fdf6e6;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Yonetici: aday havuzu suzgeci --- */
/* NEDEN grid + auto-fit: dar ekranda alt alta, genis ekranda yan yana.
   Sabit sutun sayisi 375px'te tasar; medya sorgusu yazmak yerine
   tarayiciya birakiyoruz. */
.yhavuz-suzgec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 0 0 18px;
}
.yhavuz-suzgec select {
  width: 100%;
  min-height: 44px;            /* dokunma hedefi */
  padding: 10px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: var(--yazi);
}
.yhavuz-suzgec .form-alt { margin: 0; }

/* Profil durumu rozetleri. NEDEN renk ayrimi: "Onaylı" ile "Reddedildi"
   ayni listede yan yana duruyor; okumak zorunda kalmadan ayrilmali. */
.yrozet.y-d-onayli     { color: #2f6f4f; border-color: #a9cdb8; background: #f2f9f4; }
.yrozet.y-d-incelemede { color: #7a5a1f; border-color: #d9c08a; background: #fdf6e6; }
.yrozet.y-d-reddedildi { color: var(--hata-yazi); border-color: #e0b4ac; background: #fdf2f0; }
.yrozet.y-d-taslak     { color: var(--yazi-soluk); }
.yrozet.y-d-pasif      { color: var(--yazi-soluk); }

/* --- Ana sayfa: talep cagrisi (eski formun yerine) --- */
/* NEDEN kutu: cagri, cevresindeki metinden ayrilmali; duz bir baglanti
   bolumun sonunda kayboluyordu. */
.talep-cagri {
  max-width: 62ch;
  margin: 8px auto 0;
  padding: 26px 24px;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--kagit, #fff);
  text-align: center;
}
.talep-cagri-metin {
  color: var(--yazi-ikincil);
  margin-bottom: 20px;
}
.talep-cagri .dugme-sirasi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
@media (max-width: 560px) {
  .talep-cagri { padding: 22px 18px; }
  /* Dar ekranda dugmeler tam genislik: 44px dokunma hedefi korunsun. */
  .talep-cagri .dugme { width: 100%; }
}

/* Alt bilgideki ticari unvan ve adres. Sinif adlari HTML'de vardi ama
   CSS karsiligi yoktu — bicimsiz kalmislar. */
.altbilgi-unvan { font-weight: 550; }
.altbilgi-adres { color: var(--yazi-soluk); font-size: 0.88rem; }

/* Talep durumu rozetleri. */
.yrozet.y-t-yeni        { color: #7a5a1f; border-color: #d9c08a; background: #fdf6e6; }
.yrozet.y-t-inceleniyor { color: var(--vurgu);   border-color: var(--vurgu);  background: #fffaf6; }
.yrozet.y-t-eslesti     { color: #2f6f4f; border-color: #a9cdb8; background: #f2f9f4; }
.yrozet.y-t-kapandi     { color: var(--yazi-soluk); }

/* "Uygun aday: 0" — sifir gozden kacmamali; is orada basliyor. */
.yyok { color: var(--hata-yazi); }

/* --- Is arama durumu (profil formu) --- */
.barayis {
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 6px 0 4px;
}
.barayis legend { padding: 0 6px; }
.barayis .bsecenek { margin-top: 8px; }
.barayis .bnot { margin-top: 12px; }

/* datalist'li metin kutulari, normal input gibi gorunsun. */
input[list] { width: 100%; }

/* --- Yonetici: bolum baglantilari --- */
/* NEDEN sticky degil: sayfa uzun ama surekli goze giren bir cubuk,
   asil isi (aday kartlarini okumayi) daraltirdi. Ustte durur, gerekince
   yukari cikilir. */
.ybolumler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.ybolumler a {
  display: inline-block;
  padding: 10px 14px;          /* 44px dokunma hedefi */
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--yazi-ikincil);
  text-decoration: none;
}
.ybolumler a:hover, .ybolumler a:focus-visible {
  border-color: var(--vurgu);
  color: var(--vurgu);
}

/* Is arayisi rozetleri. NEDEN renk: "aktif ariyor" ile "aramiyor"
   listede yan yana; okumadan ayrilmali. */
.yrozet.y-a-ariyor   { color: #2f6f4f; border-color: #a9cdb8; background: #f2f9f4; }
.yrozet.y-a-aramiyor { color: var(--yazi-soluk); }
.yrozet.y-a-diger    { color: #7a5a1f; border-color: #d9c08a; background: #fdf6e6; }

/* Cipa ile gelince baslik ust bara girmesin. */
.ybaslik[id] { scroll-margin-top: 80px; }

/* ================================================================== */
/* BELGELER (P14, 09.09.2026)                                          */
/* ================================================================== */

/*
 * Is arayanin belge ekrani.
 * Her belge turu kendi kartinda: yuklenmis dosya, boyut/tarih, silme
 * ve yeni yukleme ayni yerde durur. Tek uzun formda olsaydi hangi
 * dosyanin hangi belgeye ait oldugu ancak etikete dikkatle bakilarak
 * anlasilirdi.
 */
.bbelge-kart { display: flex; flex-direction: column; }

.bbelge-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.bbelge-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  background: var(--zemin-2);
  border-radius: 9px;
  /* Dokunma hedefi: satirin tamami 44px'in altina inmesin. */
  min-height: 44px;
}
/*
 * Dosya adi bir BAGLANTI ve dokunma hedefi odur — satirin tamami degil.
 * Ilk yazimda yalniz saran <li> 44px yapilmisti; olcum bes genislikte
 * de bagi 24px olarak raporladi. Ayni hata 08.09'da onay kutusunda da
 * cikmisti: hedef kutu degil, onu saran etiketin tamamidir.
 */
.bbelge-liste a {
  color: var(--vurgu);
  font-size: 0.94rem;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.bbelge-bilgi { font-size: 0.82rem; color: var(--yazi-soluk); }

.bbelge-sil { margin-left: auto; }
.bbelge-sil-dugme {
  border: 1px solid var(--hata-cizgi);
  background: transparent;
  color: var(--hata-yazi);
  border-radius: 8px;
  /* 44px: dar ekranda parmakla basilabilir olmali (0.7'de olculen kural). */
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.bbelge-sil-dugme:hover, .bbelge-sil-dugme:focus-visible {
  background: var(--hata-zemin);
}

.bbelge-yok { margin-top: 12px; font-size: 0.9rem; color: var(--yazi-soluk); }
.bbelge-form { margin-top: 14px; display: grid; gap: 12px; }
.bbelge-form input[type="file"] {
  font: inherit;
  font-size: 0.9rem;
  /* Dosya secme dugmesi tarayicinin kendi cizimidir; kutuyu biz veriyoruz. */
  padding: 10px;
  min-height: 44px;
  border: 1px dashed var(--cizgi);
  border-radius: 9px;
  background: var(--zemin);
  width: 100%;
  /* Uzun dosya adi kutuyu tasirmasin — 320px'te tam bu oluyordu. */
  max-width: 100%;
  box-sizing: border-box;
}

.bbelge-riza { margin-top: 28px; }

/* ------------------------------------------------------------------ */
/* Yonetici ekranindaki belge bloku                                    */
/* ------------------------------------------------------------------ */

.ybelge {
  margin-top: 14px;
  border-top: 1px solid var(--cizgi);
  padding-top: 12px;
}
.ybelge-baslik {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yazi-soluk);
  margin: 0 0 8px;
}
.ybelge-satir {
  display: grid;
  /* Genis ekranda dort sutun; dar ekranda alt alta (asagida). */
  grid-template-columns: 150px 1fr 1fr auto;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--cizgi-soluk, var(--cizgi));
  font-size: 0.88rem;
}
.ybelge-satir:last-child { border-bottom: 0; }
.ybelge-ad { font-weight: 600; }
/*
 * Belge baglantisi = dokunma hedefi. Olcumde 19px (dar) ve 42px
 * (genis) cikti; ikisi de 44px'in altinda. Tablo satirini birkac
 * piksel uzatiyor — dogru olan bu: parmakla acilamayan bir belge
 * baglantisi, yoneticiyi telefonda calisamaz halde birakir.
 */
.ybelge-dosya a, .ybelge-bag {
  color: var(--vurgu);
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ybelge-yok { color: var(--yazi-soluk); }

.ybelge-durum { color: var(--yazi-ikincil); }
.ybelge-durum-goruldu  { color: #2f6f4f; }
.ybelge-durum-gecersiz { color: var(--hata-yazi); }
.ybelge-durum-yok      { color: var(--yazi-soluk); }
.ybelge-not { display: block; font-style: italic; }

.ybelge-islem { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ybelge-islem input[type="text"] {
  font: inherit;
  font-size: 0.84rem;
  padding: 8px 10px;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  width: 170px;
  max-width: 100%;
}
.ybelge-dugme {
  border: 1px solid var(--cizgi);
  background: var(--zemin);
  color: var(--yazi);
  border-radius: 8px;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  white-space: nowrap;
}
.ybelge-dugme:hover, .ybelge-dugme:focus-visible { border-color: var(--vurgu); color: var(--vurgu); }
.ybelge-dugme-ret:hover, .ybelge-dugme-ret:focus-visible {
  border-color: var(--hata-cizgi);
  color: var(--hata-yazi);
}

/*
 * Dar ekran: dort sutun 320px'e sigmaz, ikinci sutun tasardi.
 * Alt alta diziliyor; etiketler zaten kendi basina okunuyor.
 */
@media (max-width: 760px) {
  .ybelge-satir { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .ybelge-islem input[type="text"] { width: 100%; }
}