/* 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; }
nav.menu { display: flex; flex-wrap: wrap; gap: 2rem; }
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 ───────────────────────────────────────────────── */
.haber { padding: 1.5rem 0; border-top: 1px solid var(--cizgi); }
.haber:last-child { border-bottom: 1px solid var(--cizgi); }
.haber .kaynak { font-size: var(--ol-etiket); text-transform: uppercase; letter-spacing: .2em; color: var(--soluk); margin: 0 0 .5rem; }
.haber-baslik { margin: 0; font-size: var(--ol-alt); line-height: 1.4; letter-spacing: -.015em; }
.haber-ozet { margin: .5rem 0 0; 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) ────────────────────────────────── */
.form-kart { max-width: 24rem; margin: 18vh auto; padding: 0 1.5rem; }
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 .kaynak,
  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;
  }
  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; }
}