/* ibrahimakkaya.com — mimari çizim estetiği
   Tasarım dili ibak.homes ile ortak: beyaz kâğıt, sıcak mürekkep, terrakota vurgu,
   iri ve ince serif başlık, minik geniş-aralıklı versal etiketler, kıl payı çizgiler.
   Kontrast oranları zemine karşı ölçülüdür (WCAG AA = 4.5:1). */

:root {
  color-scheme: light;                /* bilinçli tercih: tek tema, mimari portfolyo geleneği */

  --kagit:      #ffffff;
  --kagit-sicak:#faf8f5;              /* bölüm zemini */
  --murekkep:   #141210;              /* saf siyah değil, sıcak mürekkep — 17.6:1 ✓ */
  --soluk:      rgba(20, 18, 16, .62);/* ikincil metin — beyazda 5.23:1 · sıcak zeminde 5.13:1 ✓ */
  --sonuk:      rgba(20, 18, 16, .62);/* etiket/versal metin — sıcak zeminde 5.13:1 ✓
                                         (.55 idi: 4.06:1, AA'nın altında kalıyordu — ölçüldü) */
  --cizik:      rgba(20, 18, 16, .30);/* YALNIZ dekoratif çizgi/ikon — metinde kullanılmaz */
  --cizgi:      rgba(20, 18, 16, .08);
  --cizgi-koyu: rgba(20, 18, 16, .16);
  --vurgu:      #C45D2C;              /* terrakota — 4.6:1 ✓ */
  --yuzey:      var(--kagit);         /* bulunulan bölümün zemini — kaydırma gölgesi bunu maskeler */

  /* ── TİPOGRAFİK ÖLÇEK ──────────────────────────────────────────────
     Yedi kademe. Ara değer icat edilmez; bir şey "biraz daha küçük" olacaksa
     bir alt kademeye iner. Önceki durumda 8 farklı ad hoc boy vardı ve
     h3 (14 px) gövdeden (15 px) küçüktü — hiyerarşi tersine dönmüştü. */
  --ol-etiket: .75rem;      /* 12 — versal etiket, tablo başlığı, künye adı, yıl */
  --ol-kucuk:  .875rem;     /* 14 — yardımcı metin, tablo hücresi, kart açıklaması */
  --ol-govde:  1rem;        /* 16 — ana gövde */
  --ol-girisi: 1.125rem;    /* 18 — bölüm giriş paragrafı */
  --ol-alt:    1.1875rem;   /* 19 — h3 / madde başlığı */
  --ol-orta:   clamp(1.625rem, 3.2vw, 2.25rem);   /* h2 */
  --ol-buyuk:  clamp(2.5rem, 7vw, 5rem);          /* h1 */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", Helvetica, Arial, sans-serif;
  --en:    72rem;
  --dar:   36rem;   /* 16 px gövdede ~66 karakter — okuma için ideal bant */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font: 400 var(--ol-govde)/1.75 var(--sans);
  color: var(--murekkep);
  background: var(--kagit);
  overflow-x: hidden;
}

.atla { position: absolute; left: -9999px; background: var(--murekkep); color: #fff; padding: .6rem 1rem; z-index: 10; }
.atla:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 1px solid var(--vurgu); outline-offset: 4px; }

a { color: inherit; text-decoration: none; }
p a, li a, dd a { border-bottom: 1px solid var(--cizgi-koyu); transition: border-color .3s, color .3s; }
p a:hover, li a:hover, dd a:hover { color: var(--vurgu); border-color: var(--vurgu); }

/* ── tipografi ─────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 400; margin: 0; }

h1 {
  font-family: var(--serif);
  font-size: var(--ol-buyuk);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
}
h2 {
  font-family: var(--serif);
  font-size: var(--ol-orta);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
}
/* h3 gövdeden BÜYÜK olmalı — aksi halde başlık gibi okunmaz */
h3 { font-size: var(--ol-alt); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }

/* minik, geniş aralıklı versal etiket — bu tasarımın imzası */
.etiket {
  font-size: var(--ol-etiket);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--sonuk);
  margin: 0;
}
.soluk { color: var(--soluk); }
.giris-metni { font-size: var(--ol-girisi); line-height: 1.75; color: var(--soluk); }
.okuma { max-width: var(--dar); }

/* ── kap ve bölüm ritmi ────────────────────────────────────── */
.kap { max-width: var(--en); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
/* DİKKAT: yalnız dikey boşluk verilecekse padding-block kullanılır.
   Kısayol `padding: X 0` yazmak .kap'ın yatay boşluğunu sıfırlar; masaüstünde
   max-width ortalaması bunu gizler, telefonda içerik ekran kenarına yapışır. */
section, .bolum { padding-block: clamp(3rem, 9vw, 7.5rem); }
.serit { background: var(--kagit-sicak); border-block: 1px solid var(--cizgi); --yuzey: var(--kagit-sicak); }

/* bölüm başlığı: solda minik etiket, sağda içerik */
.bolum-bas { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; align-items: baseline; margin-bottom: 3rem; }
@media (max-width: 46rem) { .bolum-bas { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 2rem; } }

/* ── başlık şeridi ─────────────────────────────────────────── */
header.tepe { border-bottom: 1px solid var(--cizgi); background: var(--kagit); position: sticky; top: 0; z-index: 5; }
.tepe-ic { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between;
           padding: 1.5rem clamp(1.5rem, 5vw, 4rem); max-width: var(--en); margin: 0 auto; }
.marka { font-size: var(--ol-kucuk); text-transform: uppercase; letter-spacing: .3em; font-weight: 400; }
/* min-width:0 olmadan nav, flex öğesi olarak max-content genişliğine oturur ve
   flex-wrap hiç devreye girmez: beşinci öğe (Basın kiti) eklenince 390 px'de
   "İletişim" ekranın 50 px dışında kaldı, bir önceki de kırpıldı (15.09.2026).
   Gövdede yatay taşma olmadığı için denetim aracı da bunu görmüyordu. */
nav.menu { display: flex; flex-wrap: wrap; gap: 2rem; min-width: 0; }
nav.menu a { font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .15em; opacity: .45; transition: opacity .3s; }
nav.menu a:hover, nav.menu a[aria-current="page"] { opacity: .9; }

/* ── kapak ─────────────────────────────────────────────────── */
.kapak { padding-block: clamp(4rem, 14vw, 11rem) clamp(2.5rem, 7vw, 6rem); }
.kapak.ic { padding-block: clamp(2.5rem, 8vw, 6.5rem) clamp(2rem, 5vw, 4rem); }
.kapak.ic h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); }
.kapak h1 { margin: 1.5rem 0 0; }
.kapak .unvan {
  font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .15em;
  color: var(--soluk); margin: 2rem 0 0; line-height: 2.2;
}
.kapak .unvan strong { font-weight: 500; color: var(--murekkep); }

/* ── künye ─────────────────────────────────────────────────── */
.kunye { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2.5rem 2rem; margin: 0; padding: 0; }
/* sütun sayısı tesadüfe bırakılmaz: 6 öğe 3×2, 4 öğe 4×1 olarak oturur */
.kunye--3 { grid-template-columns: repeat(3, 1fr); }
.kunye--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 60rem) { .kunye--3, .kunye--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .kunye--3, .kunye--4 { grid-template-columns: 1fr; } }
.kunye dt { font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .2em; color: var(--sonuk); margin-bottom: .6rem; }
.kunye dd { margin: 0; font-size: var(--ol-govde); }

/* ── zaman çizgisi ─────────────────────────────────────────── */
.zaman { list-style: none; margin: 0; padding: 0; }
.zaman > li { display: grid; grid-template-columns: 12rem 1fr; gap: 0 2rem; padding: 2rem 0; border-top: 1px solid var(--cizgi); }
.zaman > li:last-child { border-bottom: 1px solid var(--cizgi); }
.zaman .yil { font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .2em; color: var(--sonuk);
              font-variant-numeric: tabular-nums; padding-top: .35rem; }
.zaman .baslik { font-size: var(--ol-alt); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.zaman p { margin: .5rem 0 0; color: var(--soluk); max-width: 34rem; }
@media (max-width: 46rem) { .zaman > li { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; } }

/* ── tablo ─────────────────────────────────────────────────── */
/* Dar ekranda tablo yatay kayar. Kaydığı belli olsun diye kenarlarda gölge:
   maske katmanları zeminle birlikte kayar (local), gölge katmanları sabit durur —
   yani gölge yalnız gerçekten taşma varken görünür. */
.tablo-sar {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--yuzey) 42%, rgba(255,255,255,0)) 0 0 / 34px 100% no-repeat local,
    linear-gradient(to left,  var(--yuzey) 42%, rgba(255,255,255,0)) 100% 0 / 34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,    rgba(20,18,16,.16), rgba(20,18,16,0)) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20,18,16,.16), rgba(20,18,16,0)) 100% 0 / 14px 100% no-repeat scroll;
}
table { border-collapse: collapse; width: 100%; font-size: var(--ol-kucuk); min-width: 32rem; }
th, td { text-align: left; padding: 1.1rem 1.5rem 1.1rem 0; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
th { font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .2em; color: var(--sonuk); font-weight: 400; padding-bottom: 1rem; }
tr:last-child td { border-bottom: none; }
td.sayi { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--soluk); }

/* ── listeler ──────────────────────────────────────────────── */
.dizi { list-style: none; margin: 0; padding: 0; }
.dizi li { padding: 1rem 0; border-top: 1px solid var(--cizgi); }
.dizi li:last-child { border-bottom: 1px solid var(--cizgi); }
.dizi .alt { color: var(--soluk); font-size: var(--ol-kucuk); }

.sutunlu { list-style: none; margin: 0; padding: 0;
           display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 3rem; }
.sutunlu li { padding: .9rem 0; border-top: 1px solid var(--cizgi); font-size: var(--ol-govde); }

/* ── kartlar (çerçevesiz — yalnız üst çizgi) ───────────────── */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem 3rem; }
.kart { border-top: 1px solid var(--cizgi-koyu); padding-top: 1.25rem; }
.kart h3 { margin: 0 0 .5rem; }
.kart p { margin: 0; color: var(--soluk); font-size: var(--ol-kucuk); }

/* ── alıntı ────────────────────────────────────────────────── */
blockquote { margin: 0; padding: 0; font-family: var(--serif); font-weight: 300;
             font-size: clamp(1.25rem, 2.6vw, 1.875rem); line-height: 1.35; letter-spacing: -.01em; max-width: 30rem; }
blockquote footer { font-family: var(--sans); font-size: var(--ol-etiket); text-transform: uppercase;
                    letter-spacing: .2em; color: var(--sonuk); margin-top: 1.5rem; }

/* ── konuşma metni ─────────────────────────────────────────── */
.konusma p { margin: 0 0 1.35rem; }
.konusma p strong { font-weight: 500; }
.konusma blockquote { margin: 2.5rem 0; padding-left: 1.25rem; border-left: 1px solid var(--vurgu); }
.konusma .imza { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cizgi); font-weight: 500; }

/* ── afiş ──────────────────────────────────────────────────── */
.afis { margin: 0; }
.afis img { display: block; width: 100%; max-width: 26rem; height: auto; border: 1px solid var(--cizgi); }
.afis figcaption { font-size: var(--ol-kucuk); color: var(--soluk); margin-top: 1rem; max-width: 26rem; }

/* ── basında ───────────────────────────────────────────────── */
/* ── basında: kanal kartları ─────────────────────────────────────
   Her haber, yayımlandığı kanalın markasını taşıyan bir kart. Üst şerit kanalın
   kendi rengi (--kanal), sol üstte logosu. Kaynağın neresi olduğu bir bakışta belli. */
.haberler { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .haberler { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.haber {
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--kagit); border: 1px solid var(--cizgi-koyu); border-top: 3px solid var(--kanal, var(--murekkep));
  padding: 1.1rem 1.15rem 1rem; color: inherit; text-decoration: none;
  transition: border-color .25s, transform .25s;
}
a.haber:hover { border-color: var(--kanal, var(--murekkep)); transform: translateY(-2px); }
a.haber:hover .haber-baslik { color: var(--kanal, var(--vurgu)); }
.kanal { display: flex; align-items: center; gap: .65rem; }
.kanal-logo { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; flex: none;
  background: var(--kagit-sicak); border: 1px solid var(--cizgi); }
.kanal-bos { display: inline-block; }
.kanal-ad { font-size: var(--ol-kucuk); font-weight: 500; letter-spacing: .01em; }
/* Tür rozeti kanalın KENDİ rengindeydi ve 9,9 px'ti: açık renkli markalarda
   kontrast 1,67:1'e kadar düşüyordu (gerek 4,5:1) — okunmuyordu. Marka rengi
   zaten üst şeritte ve kanal adında var; bu minik etiket nötr tona alındı ve
   12 px'in altına inmiyor. /basinda ve /basin-kiti'yi birlikte düzeltir. */
.kanal-tur { margin-left: auto; font-size: var(--ol-etiket); text-transform: uppercase;
  letter-spacing: .16em; color: var(--sonuk); }
.haber-baslik { margin: 0; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.01em; color: var(--murekkep);
  transition: color .25s; }
.haber-ozet { margin: 0; font-size: var(--ol-kucuk); color: var(--soluk); }
.haber-alt { margin: auto 0 0; padding-top: .6rem; border-top: 1px solid var(--cizgi);
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--ol-etiket); letter-spacing: .12em; text-transform: uppercase; color: var(--sonuk); }
.haber-git { letter-spacing: .04em; text-transform: none; }

/* ── basın kiti ────────────────────────────────────────────── */
/* Kapak: solda portre, sağda başlık ve form daveti. 52rem altında portre üste
   geçer ve yüksekliği sınırlanır — telefonda 1200×1802'lik dikey kare ekranın
   tamamını kaplayıp formu ekranın dışına itiyordu. */
/* Kapak = kimlik + TESLİM KARTI yan yana. Kart ilk ekranda durur; sayfanın tek
   işi kiti vermek ve bu, aşağıda sıradan bir bölüm olunca anlaşılmıyordu. */
.bk-kapak { display: grid; grid-template-columns: 1fr minmax(0, 27rem); gap: clamp(2rem, 5vw, 4.5rem);
            align-items: start; padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 5rem); }
.bk-portre { margin: 0 0 2rem; max-width: 15rem; }
.bk-portre img { display: block; width: 100%; height: auto; border: 1px solid var(--cizgi); }
.bk-kapak-yazi h1 { margin: 1rem 0 0; font-size: clamp(2rem, 5vw, 3.5rem); }
.bk-kapak-yazi .unvan { font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .15em;
                        color: var(--soluk); margin: 1.25rem 0 0; }

.bk-teslim { background: var(--kagit-sicak); border: 1px solid var(--cizgi-koyu);
             padding: clamp(1.5rem, 4vw, 2.25rem); position: sticky; top: 7rem; }
.bk-teslim h2 { margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.75rem); letter-spacing: -.015em; }
.bk-icindekiler { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0;
                  border-block: 1px solid var(--cizgi); }
.bk-icindekiler li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
                     padding: .6rem 0; font-size: var(--ol-kucuk); }
.bk-icindekiler li + li { border-top: 1px solid var(--cizgi); }
.bk-icindekiler span { font-size: var(--ol-etiket); letter-spacing: .12em; color: var(--sonuk); flex: none; }
.bk-form .bk-onay-satir { margin-top: 1.75rem; }
.bk-form .uyari { margin-top: 1.25rem; }

/* Büyük çağrı düğmesi. Sitenin varsayılan düğmesi 12 px versal ve dar; burada
   sayfanın TEK eylemi olduğu için tam genişlik, 17 px ve düz yazım — versal
   harf aralıklı metin küçük puntoda yavaş okunuyor. */
.bk-cta { display: block; width: 100%; margin-top: 1.75rem; padding: 1.15rem 1.5rem;
          font-size: 1.0625rem; font-weight: 500; text-transform: none; letter-spacing: .01em;
          min-height: 56px; border-radius: 2px; }
.bk-cta-not { margin: .9rem 0 0; font-size: var(--ol-etiket); line-height: 1.6;
              letter-spacing: 0; text-transform: none; color: var(--sonuk); text-align: center; }

@media (max-width: 58rem) {
  /* Kapak üst boşluğu kısılır: çerez şeridi ekranın altında 160 px yer kaplıyor
     (position:fixed) ve ilk ziyarette CTA'nın üstüne biniyordu — sayfanın tek
     düğmesi örtülü açılıyordu. Ölçüldü: CTA 744 px, şerit 685 px'ten başlıyor. */
  .bk-kapak { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.5rem 2rem; }
  .bk-teslim { position: static; padding: 1.35rem 1.25rem 1.5rem; }
  .bk-teslim h2 { font-size: 1.375rem; }
  .bk-form label { margin-bottom: .5rem; }
  .bk-form input[type="text"] { padding: .7rem 0; }
  /* Telefonda portre ADIN YANINA geçer. Alt alta dizilince kimlik bloğu 400 px
     tutuyor ve teslim kartı katlamanın altına düşüyordu — sayfanın ne iş yaptığı
     ilk ekranda görünmüyordu (ölçüldü: CTA 1018 px'te, ekran 844 px). */
  .bk-kapak-yazi { display: grid; grid-template-columns: 5.75rem 1fr; gap: 1rem; align-items: center; }
  .bk-portre { max-width: none; margin: 0; }
  .bk-kapak-yazi .etiket { grid-column: 2; margin: 0; }
  .bk-kapak-yazi h1 { grid-column: 2; margin: .35rem 0 0; font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .bk-kapak-yazi .unvan { grid-column: 2; margin: .5rem 0 0; line-height: 1.5; }
  .bk-portre { grid-row: 1 / span 3; grid-column: 1; }
  /* İçindekiler telefonda tek satır: üç satırlık liste kartı 130 px uzatıp
     düğmeyi katlamanın altına itiyordu. Bilgi aynı, yer üçte bir. */
  .bk-icindekiler { display: flex; flex-wrap: wrap; gap: .4rem .75rem;
                    margin: 1rem 0 1.25rem; padding: .7rem 0; }
  .bk-icindekiler li { display: inline; padding: 0; font-size: var(--ol-etiket); color: var(--soluk); }
  .bk-icindekiler li + li { border-top: 0; }
  .bk-icindekiler li + li::before { content: "·"; margin-right: .75rem; color: var(--sonuk); }
  .bk-icindekiler span { display: none; }
  .bk-cta { margin-top: 1.5rem; }
}
.bk-ara-bas { font-size: var(--ol-alt); font-weight: 500; letter-spacing: -.01em;
              margin: 4rem 0 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--cizgi-koyu); }
.bk-ara-bas:first-of-type { margin-top: 3rem; }
.bk-dipnot { font-size: .8125rem; margin-top: 1.5rem; }

.bk-duz { margin-top: 4rem; border-top: 1px solid var(--cizgi-koyu); padding-top: 1.25rem; }
.bk-duz summary { cursor: pointer; font-size: var(--ol-etiket); text-transform: uppercase;
                  letter-spacing: .2em; color: var(--sonuk); min-height: 44px; display: flex; align-items: center; }
.bk-duz summary:hover { color: var(--murekkep); }
.bk-duz-not { font-size: var(--ol-kucuk); color: var(--soluk); margin-top: .5rem; }
.bk-duz-metin { overflow-x: auto; background: var(--kagit-sicak); border: 1px solid var(--cizgi);
                padding: 1.25rem; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
                font-size: .8125rem; line-height: 1.7; white-space: pre; margin: 1.5rem 0 0; }

/* Zaman tüneli: solda yıl, sağda o yılın kartları. .zaman'ın geometrisini
   tekrarlar ama ayrı sınıf — .zaman p kuralı .haber-ozet'in boşluğunu eziyordu. */
.basin-zaman { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.basin-zaman > li { display: grid; grid-template-columns: 12rem 1fr; gap: 0 2rem;
                    padding: 2.5rem 0; border-top: 1px solid var(--cizgi); }
.basin-zaman > li:last-child { border-bottom: 1px solid var(--cizgi); }
.basin-zaman .yil { margin: 0; font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .2em;
                    color: var(--sonuk); font-variant-numeric: tabular-nums; padding-top: .35rem;
                    position: sticky; top: 6rem; align-self: start; }
.basin-zaman .yil em { display: block; font-style: normal; letter-spacing: .12em; opacity: .7; margin-top: .4rem; }
/* min-width:0 ŞART: ızgara öğesi varsayılan min-width:auto ile min-content
   genişliğinin altına inemiyor, 1fr kolonu şişiyor ve sayfa yatay taşıyordu
   (iPad'de 917>768 ölçüldü). Kart içindeki uzun alan adları da kırılabilir
   olmalı, yoksa aynı taşma dar ekranda geri gelir. */
.basin-zaman .haberler { margin-top: 0; min-width: 0; }
.basin-zaman .haber { min-width: 0; }
.basin-zaman .haber-baslik, .basin-zaman .haber-ozet { overflow-wrap: anywhere; }
.basin-zaman .haber-git { overflow-wrap: anywhere; text-align: right; }
.basin-zaman .haber-alt { flex-wrap: wrap; gap: .25rem .75rem; }
/* Uzun kanal adı, margin-left:auto ile sağa yaslanan tür rozetini kartın dışına
   itiyordu (iPad'de 18 px taştı). Zaman tünelinin kolonu dar olduğu için burada
   görülüyor; sarma + kırılabilir ad ikisini de kartın içinde tutar. */
.basin-zaman .kanal { flex-wrap: wrap; }
.basin-zaman .kanal-ad { min-width: 0; overflow-wrap: anywhere; }
.basin-zaman .kanal-tur { margin-left: auto; }
@media (max-width: 46rem) {
  .basin-zaman > li { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; }
  .basin-zaman .yil { position: static; padding-top: 0; }
  .basin-zaman .yil em { display: inline; margin: 0 0 0 .6rem; }
}
/* Kaydırınca beliren kartlar. .js-kademe sınıfını YALNIZ betik ekler; JS kapalıyken
   ya da IntersectionObserver yokken bu kurallar hiç devreye girmez ve kartlar
   olduğu gibi görünür. İçerik JS'e bağlı gizlenmez. */
.js-kademe .bz-kart { opacity: 0; transform: translateY(10px);
                      transition: opacity .5s ease, transform .5s ease; }
.js-kademe .bz-kart.gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-kademe .bz-kart { opacity: 1; transform: none; transition: none; }
}

/* ── söyleşi videosu (tıkla-oynat) ─────────────────────────── */
.ss-video-sar { padding-block: 0 clamp(2rem, 5vw, 3.5rem); }
.ss-video { position: relative; aspect-ratio: 16 / 9; background: #14120f;
            border: 1px solid var(--cizgi-koyu); overflow: hidden; }
.ss-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Düğme tüm yüzeyi kaplar (dokunma hedefi kapağın tamamı) ama boyamaz —
   küçük resmin kendi yazısı okunur kalsın. Görünen tek şey ortadaki daire. */
.ss-oynat { position: absolute; inset: 0; width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            padding: 0; cursor: pointer; border: 0; background: transparent; }
.ss-oynat::before { content: ""; position: absolute; width: 74px; height: 74px;
            border-radius: 50%; background: rgba(20,18,16,.68);
            box-shadow: 0 2px 18px rgba(0,0,0,.4); transition: background .25s, transform .25s; }
.ss-oynat:hover::before { background: var(--vurgu); transform: scale(1.06); }
.ss-oynat:focus-visible::before { background: var(--vurgu); }
/* Üçgen: ayrı bir görsel dosyası yüklemeden, kenarlıkla çizilir. */
.ss-ok { position: relative; width: 0; height: 0; border-style: solid;
         border-width: 12px 0 12px 20px; margin-left: 5px;
         border-color: transparent transparent transparent #fff; }
.ss-altyazi { margin: 1rem 0 0; font-size: var(--ol-govde); max-width: 46rem; }
.ss-kredi { margin: .6rem 0 0; font-size: var(--ol-kucuk); color: var(--soluk); max-width: 46rem; }
.ss-basliklar li { color: var(--murekkep); }

/* Konu çipleri — formun tek tıklık girişi. Dokunma hedefi 44 px'in altına
   inmez; sarmalı dizilim, dar ekranda 13 çip birkaç satıra yayılır. */
/* Form bölümü dar: %67 ziyaretçi hiç kaydırmıyor, çipler ilk ekranda görünmeli. */
.ss-form-bolum { padding-block: 1.25rem clamp(2rem, 5vw, 3.5rem); }
.ss-form-bas { font-size: clamp(1.375rem, 4.5vw, 1.875rem); letter-spacing: -.015em; margin: 0; }
.ss-form-alt { margin: .5rem 0 0; color: var(--soluk); font-size: var(--ol-kucuk); }
.ss-konular { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.ss-konu { font: inherit; font-size: var(--ol-kucuk); text-transform: none; letter-spacing: 0;
           min-height: 44px; padding: .55rem 1rem; cursor: pointer; color: var(--murekkep);
           background: var(--kagit); border: 1px solid var(--cizgi-koyu); border-radius: 999px;
           transition: background .2s, border-color .2s, color .2s; }
.ss-konu:hover { border-color: var(--vurgu); color: var(--vurgu); background: var(--kagit); }
.ss-konu.secili { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.ss-konu.secili:hover { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.ss-aday-not { margin-top: 2rem; font-size: var(--ol-kucuk); }

/* ── alt bilgi ─────────────────────────────────────────────── */
footer.dip { border-top: 1px solid var(--cizgi); padding-block: 3rem; }
.dip-ic { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; align-items: baseline; }
.kunye-yapim a { border-bottom: 1px solid var(--cizgi-koyu); }
.kunye-yapim a:hover { color: var(--vurgu); border-color: var(--vurgu); }
footer.dip p { margin: 0; font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .15em; color: var(--sonuk); }

/* ── form (giriş / yönetim) ────────────────────────────────── */
/* 18vh üst boşluk klavye açılınca küçülüyor ve form zıplıyordu (6 Eyl). Sabit rem;
   masaüstünde daha geniş. */
.form-kart { max-width: 24rem; margin: 3.5rem auto 4rem; padding: 0 1.5rem; }
@media (min-height: 700px) and (min-width: 48rem) { .form-kart { margin-top: 18vh; } }
/* Ekran okuyucuya görünür, göze görünmez. katil.html'de her adımda kullanılıyordu
   ama tanımı hiç yazılmamış: başlığın altında gereksiz bir etiket olarak duruyordu
   ("Hangi grupta kayıtlısınız?" altında "MESLEK GRUBU"). */
.gizli-etiket {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
label { display: block; font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .2em; color: var(--sonuk); margin-bottom: .75rem; }
input[type="tel"], input[type="text"], input[type="email"], select, textarea {
  /* 16px altına düşerse iOS odaklanınca sayfayı yakınlaştırır — bilerek 1rem */
  width: 100%; padding: .85rem 0; font: inherit; font-size: 1rem; color: var(--murekkep);
  background: transparent; border: none; border-bottom: 1px solid var(--cizgi-koyu); border-radius: 0;
}
textarea { padding: .85rem .75rem; border: 1px solid var(--cizgi-koyu); resize: vertical; line-height: 1.7; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--vurgu); }
textarea:focus { border-color: var(--vurgu); }
/* Uzun formda alanlar birbirine yapışmasın; label kendi üst boşluğunu taşır. */
form + form, .okuma form label + * { margin-bottom: 0; }
.okuma form > label:not(:first-of-type) { margin-top: 2rem; }
.alan-not { font-size: var(--ol-etiket); line-height: 1.6; color: var(--sonuk); margin-top: .75rem; }
.istege-bagli { text-transform: none; letter-spacing: 0; opacity: .75; }
button {
  font: inherit; font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .15em; cursor: pointer;
  padding: .95rem 2rem; color: #fff; background: var(--murekkep); border: 1px solid var(--murekkep);
  transition: background .3s, border-color .3s;
}
button:hover { background: var(--vurgu); border-color: var(--vurgu); }
button[disabled] { opacity: .4; cursor: default; }
.onay { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--ol-kucuk); color: var(--soluk); }
/* 13×13 px'lik varsayılan kutu dokunmak için çok küçüktü */
.onay input { width: 22px; height: 22px; margin: .15rem 0 0; flex: none; accent-color: var(--vurgu); }
.onay { cursor: pointer; min-height: 44px; }
.onay-metin { font-size: var(--ol-etiket); line-height: 1.6; letter-spacing: 0; text-transform: none; }
.uyari { font-size: var(--ol-kucuk); color: var(--vurgu); border-left: 1px solid var(--vurgu); padding-left: 1rem; }

/* ── yazdırma ──────────────────────────────────────────────── */
@media print {
  header.tepe, footer.dip, .atla { display: none; }
  body { font-size: 10pt; }
  .serit { background: none; }
  section, .bolum { padding-block: 1.5rem; }
  .zaman > li { break-inside: avoid; }
}

/* ─────────────────────────────────────────────────────────────
   DOKUNMATİK — telefon ve tablet (genişlikten bağımsız)
   iPad 768 px olduğu için 46rem eşiğinin dışında kalıyordu; oysa hedef
   boyutu ekran genişliğine değil parmağa bağlıdır. Ölçüt: 44×44 px.
   ───────────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  nav.menu a, .marka { display: inline-flex; align-items: center; min-height: 44px; }
  nav.menu a { letter-spacing: .1em; }

  /* minik versal metin dokunmatikte 12 px'in altına inmez */
  .kapak .unvan { font-size: var(--ol-etiket); }

  /* liste satırının tamamı hedef olsun */
  .dizi li { padding: 0; }
  .dizi li > a { display: block; padding: .9rem 0; min-height: 44px; }
  .dizi li:not(:has(> a)) { padding: .9rem 0; }

  /* künyedeki telefon/e-posta ve tek başına duran çağrı bağlantıları */
  .kunye dd a,
  main p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

}

/* ─────────────────────────────────────────────────────────────
   MOBİL — 46rem altı
   Ölçüler Playwright cihaz emülasyonuyla doğrulanmıştır (iPhone SE/14/Max, iPad).
   Headless Chrome pencereyi 500 px altına indirmediği için --window-size ile
   yapılan ölçüm yanıltıcıdır; bkz. bin/uiux-denetim.py.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 46rem) {
  body { line-height: 1.7; }

  .etiket, .kunye dt, th, .zaman .yil, .haber-alt,
  footer.dip p, label, blockquote footer { letter-spacing: .14em; }

  /* başlık şeridi: marka üstte, menü altında tek kaydırılabilir satır */
  .tepe-ic { flex-direction: column; align-items: flex-start; gap: .25rem; padding: .5rem 1.5rem .75rem; }
  .marka { font-size: var(--ol-kucuk); letter-spacing: .22em; }
  nav.menu a { white-space: nowrap; }
  nav.menu {
    width: 100%; gap: 0 1rem; flex-wrap: nowrap;
    justify-content: space-between; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    /* Beşinci öğe (Basın kiti) eklenince şerit taştı ve son bağlantı ekranın
       dışında kaldı; çubuk gizli olduğu için kaydırılabildiğine dair hiçbir
       işaret yoktu, kırpılmış "BASIN K" bozuk görünüyordu (15.09.2026).
       Çözüm .tablo-sar'daki kalıp: maske katmanları zeminle birlikte kayar
       (local), gölge katmanı sabit durur — yani gölge YALNIZ gerçekten taşma
       varken görünür ve menü sığdığında hiç çıkmaz. */
    background:
      linear-gradient(to right, var(--kagit) 40%, rgba(255,255,255,0)) 0 0 / 22px 100% no-repeat local,
      linear-gradient(to left,  var(--kagit) 40%, rgba(255,255,255,0)) 100% 0 / 22px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,    rgba(20,18,16,.20), rgba(20,18,16,0)) 0 0 / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(20,18,16,.20), rgba(20,18,16,0)) 100% 0 / 10px 100% no-repeat scroll;
  }
  nav.menu::-webkit-scrollbar { display: none; }

  /* dikey ritim */
  section, .bolum { padding-block: 2.75rem; }
  .kapak { padding-block: 2.5rem 2rem; }
  .kapak.ic { padding-block: 2rem 1.25rem; }
  .kapak h1 { margin-top: .75rem; }
  .kapak .unvan { margin-top: 1.25rem; line-height: 1.9; letter-spacing: .1em; }
  .bolum-bas { margin-bottom: 1.5rem; }

  .kunye { gap: 1.5rem 1.5rem; }
  .zaman > li { padding: 1.25rem 0; }
  .zaman p { margin-top: .4rem; }
  .kartlar { gap: 1.75rem; }

  .sutunlu li { padding: .9rem 0; }


  .tablo-sar { -webkit-overflow-scrolling: touch; }

  th, td { padding: .9rem 1rem .9rem 0; }

  blockquote { max-width: none; }
  .afis img, .afis figcaption { max-width: none; }
  footer.dip { padding-block: 2.25rem; }

}

/* çok dar ekran (≤ 22rem / 352 px) */
@media (max-width: 22rem) {
  nav.menu a { font-size: var(--ol-etiket); letter-spacing: .06em; }
  .kap { padding-inline: 1.15rem; }
}

/* ── meslek grubu formu (grup-01..11) ─────────────────────────────────────
   /katil ile aynı uçlara yazar; grup sayfadan geldiği için komite sorulmaz. */
.gf { margin-top: 1.1rem; padding: 1.1rem; border: 1px solid var(--cizgi, #e2ded7);
      border-radius: 12px; background: var(--kart, #fff); }
.gf-sec { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gf-btn { padding: .75rem 1.1rem; min-height: 44px; font: inherit; font-size: .92rem; cursor: pointer;
          color: var(--metin, #1a1a1a); background: transparent;
          border: 1px solid var(--cizgi, #e2ded7); border-radius: 999px; text-transform: none; }
.gf-btn[aria-pressed="true"] { background: var(--metin, #1a1a1a); color: #fff; border-color: var(--metin, #1a1a1a); }
.gf label { display: block; margin: .9rem 0 .35rem; font-size: 1rem; letter-spacing: 0;
            text-transform: none; color: var(--metin-2, #55524c); }
.gf input[type="text"], .gf input[type="tel"], .gf textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--cizgi-koyu, #cfcac1); border-radius: 8px; background: #fff; }
.gf textarea { resize: vertical; min-height: 4.5rem; }
.gf .gf-onay-satir { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.1rem;
                     font-size: 1rem; text-transform: none; letter-spacing: 0; line-height: 1.6; }
.gf .gf-onay-satir input { margin-top: .15rem; flex: none; width: 22px; height: 22px; }
.gf .duz { margin-top: 1rem; width: 100%; }
.gf-uyari { margin: .7rem 0 0; padding: .55rem .7rem; border-radius: 8px;
            background: #fdf0ee; color: #b42318; font-size: .9rem; }
@media (min-width: 640px) { .gf .duz { width: auto; min-width: 12rem; } }

/* ── meslek grubu sayfası: hero + sorun seçkisi (10.09.2026) ──────────────
   Sıra bilinçli: hero çağrı yapar, sorun seçkisi fikir verir, form hemen altında.
   Görsel koyu katmanın altında durur — atmosfer verir, metnin önüne geçmez. */


.hero-ust { margin: 0 0 .5rem; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase;
            color: rgba(255,255,255,.92); }
.hero h1 { margin: 0; color: #fff; font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.05; font-weight: 400; }
.hero-alt { margin: .9rem 0 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.55;
            color: rgba(255,255,255,.86); }
.hero-cagri { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1.6rem 0 0; }
.hero-cagri span { font-size: .84rem; color: rgba(255,255,255,.66); }
.duz.buyuk { padding: .85rem 1.6rem; font-size: 1rem; }

.ks-izgara { display: grid; gap: .8rem; margin-top: 1.2rem;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.ks { padding: 1.1rem; background: var(--kart, #fff); border: 1px solid var(--cizgi, #e2ded7);
      border-left: 3px solid var(--vurgu, #c05f38); border-radius: 10px; }
.ks h3 { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.3; }
.ks p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--metin-2, #55524c); }
.ks footer { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem;
             font-size: .78rem; color: var(--metin-3, #86827a); }
.ks-tarih { font-variant-numeric: tabular-nums; }
.gorsel-kunye { margin: 2.4rem auto 1rem; font-size: .76rem; color: var(--metin-3, #86827a); }
/* .duz buton için tanımlıydı; hero çağrısı bağlantı olduğu için aynı görünüm buraya taşındı */
a.duz { display: inline-block; padding: .8rem 1.5rem; background: var(--vurgu, #c05f38); color: #fff;
        border: 0; border-radius: 8px; font: inherit; font-size: 1rem; font-weight: 500;
        text-decoration: none; letter-spacing: 0; text-transform: none; cursor: pointer; }
a.duz:hover { filter: brightness(1.08); color: #fff; }
/* Sorunlar kısa madde listesi (10.09): kimse adına konuşulmuyor, kaynak tek satırda. */
.ks-liste { margin: 1rem 0 .6rem; padding-left: 1.1rem; display: grid; gap: .5rem; }
.ks-liste li { font-size: 1.05rem; line-height: 1.6; }
/* Bölüm içi soru başlığı — sitenin iki satırlı başlık dili (katil sayfasıyla aynı ölçek) */
.bolum-baslik { margin: .2rem 0 .9rem; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.12; font-weight: 400; }
.gf-not { margin: .3rem 0 0; font-size: .84rem; }

/* Çalıştay düzeltmeleri (10.09.2026) — bölüm kabuğu hafifledi, gönder düğmesi
   sabit şeridin altında kalmıyor, iki satırlık tablo telefonda yatay kaymıyor. */
.bolum-bas { margin-bottom: 1rem; }
.bolum-bas .etiket { font-size: .84rem; letter-spacing: .06em; color: var(--metin-2, #55524c); }
.gf { padding-bottom: 4.5rem; }
.grup-dl { display: grid; gap: .5rem; margin: 1rem 0 0; }
.grup-dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
               border-bottom: 1px solid var(--cizgi, #e2ded7); font-size: 1rem; }
.grup-dl b { font-variant-numeric: tabular-nums; }
/* İkincil eylem: asıl düğmeyle yarışmaz ama gizli de değil. */
.duz-ikincil { display: inline-block; margin-top: .6rem; padding: .7rem 1.2rem; min-height: 44px;
  background: transparent; color: var(--metin-2, #55524c); border: 1px solid var(--cizgi-koyu, #cfcac1);
  border-radius: 8px; font: inherit; font-size: .95rem; cursor: pointer; }
.gf-aday-link { color: var(--vurgu, #c05f38); }
.dipnot { padding-top: 1.5rem; }
/* Şeritteki ikincil eylem düğme değil bağlantı ağırlığında — sayfanın kendi çağrısıyla yarışmasın. */
.riza-dg .riza-ince { background: transparent; border: 0; color: rgba(255,255,255,.66);
  font-size: .85rem; text-decoration: underline; padding: .4rem .2rem; cursor: pointer; }
/* Grup sayfası bölümleri: global 7.5rem padding iki bölüm arasında 240px boşluk
   bırakıyordu; bu sayfalarda liste ve form arka arkaya okunmalı (Hasan, 10.09). */
.bolum.sik { padding-block: clamp(1.5rem, 4vw, 2.75rem); }
.bolum.sik .ks-liste { margin-bottom: .4rem; }
.bolum.sik .ks-liste + .soluk { margin: 0 0 .8rem; }

/* Dar ekranda portre metnin arkasına düşer: orada dikey karartma korunur. */
@media (max-width: 700px) {
  
  .hero-ic { max-width: 100%; }
}

/* Telefonda portre metnin arkasında kalıyor: odak yüze değil gövdeye kayar, karartma artar. */
@media (max-width: 700px) {  }

/* ── hero: solda söz, sağda portre (10.09.2026 çalıştayı) ─────────────────
   Portre arka plan olarak kullanılınca cover ikinci kez kırpıyor ve yüz kesiliyordu;
   artık kendi sütununda, kendi oranında duruyor. */
.hero { position: relative; display: grid; grid-template-columns: 1fr; align-items: end;
        min-height: auto; padding: 0; background: #14110e; overflow: hidden; }
.hero-foto { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover;
             object-position: 50% 22%; opacity: .5; }
.hero-ic { grid-area: 1 / 1; position: relative; z-index: 1; width: 100%; max-width: 46rem;
           padding-block: 3rem 2.5rem; color: #fff;
           background: linear-gradient(180deg, rgba(20,17,14,.35), rgba(20,17,14,.85)); }
@media (min-width: 860px) {
  .hero { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
  .hero-foto { grid-area: 1 / 2; opacity: 1; object-position: 50% 18%; }
  .hero-ic { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end;
             padding-block: 4rem 3.5rem; background: none; }
  .hero::after { content: ""; grid-area: 1 / 2; position: relative; z-index: 1;
                 background: linear-gradient(90deg, #14110e 0%, rgba(20,17,14,.35) 26%, transparent 60%); }
}

/* Hero metin ölçeği (iki sütunlu düzende yeniden tanımlandı) */
.hero-ust { margin: 0 0 .6rem; font-size: .88rem; letter-spacing: .05em; text-transform: uppercase;
            color: rgba(255,255,255,.86); }
.hero h1 { margin: 0; color: #fff; font-weight: 400; line-height: 1.06;
           font-size: clamp(2rem, 5.4vw, 3.2rem); }
.hero-alt { margin: 1rem 0 0; max-width: 32rem; font-size: 1.05rem; line-height: 1.55;
            color: rgba(255,255,255,.9); }
.hero-alt b { color: #fff; }
.hero-cagri { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 1.7rem 0 0; }
.hero-cagri span { font-size: .86rem; color: rgba(255,255,255,.68); }
.hero { max-height: 78vh; }
.hero-foto { max-height: 78vh; }