/* İçtihat · landing tipografi ve renk katmanı · 29.09.2026
   Kullanım: yalnız ana sayfa body öğesine `tipografi` sınıfını ekleyin;
   bu dosyayı ictihat/ana/hero/ustbar/mobil CSS dosyalarından SONRA yükleyin.
   Mevcut dosyaları silmez. Canlıya uygulanmamıştır. CDN ve font indirmesi yok.
   #icerik kapsamı, eski bileşen font kısayollarını !important olmadan aşar.
   Boyutlar 16px kullanıcı varsayılanına göre adlandırılır; kök px ile kilitlenmez. */

/* İki yazı rolü ve sekiz durak: sistem fontlarıyla çevrimdışı da aynı hiyerarşi. */
body.tipografi {
  --yazi-serif: Georgia, "Times New Roman", serif;
  --yazi-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --yazi-12: .75rem;
  --yazi-14: .875rem;
  --yazi-16: 1rem;
  --yazi-18: 1.125rem;
  --yazi-22: 1.375rem;
  --yazi-28: 1.75rem;
  --yazi-36: 2.25rem;
  --yazi-48: 3rem;
  --yazi-normal: 400;
  --yazi-arayuz-vurgu: 600;
  --yazi-kalin: 700;
  --yazi-satir-hero: 1.15;
  --yazi-satir-baslik: 1.25;
  --yazi-satir-altbaslik: 1.35;
  --yazi-satir-kisa: 1.5;
  --yazi-satir-govde: 1.65;
  --yazi-aralik-hero: -.02em;
  --yazi-aralik-baslik: -.015em;
  --yazi-aralik-etiket: .02em;
  --yazi-hero-boyut: var(--yazi-36);
  --yazi-bolum-boyut: var(--yazi-28);
  --yazi-sayi-boyut: var(--yazi-28);

  --renk-zemin: #FAF8F3;
  --renk-yuzey: #FFFFFF;
  --renk-notr-yuzey: #F0ECE4;
  --renk-murekkep: #182431;
  --renk-ikincil: #535D68;
  --renk-cizgi: #D9D5CB;
  --renk-kontrol: #7B817B;
  --renk-altin: #A8874B;
  --renk-vurgu: #762F30;
  --renk-olumlu: #2F5D4F;
  --renk-olumlu-yuzey: #EDF2EE;
  --renk-uyari: #73521D;
  --renk-uyari-yuzey: #F7EFD9;
  --renk-hata: #94382F;
  --renk-hata-yuzey: #F6E9E5;
  --renk-koyu: #131A24;
  --renk-koyu-ikincil: #C3C9D2;
  --renk-baglanti: #344F70;
  --renk-eylem-hover: #2B3D50;
  --renk-eylem: var(--renk-murekkep);
  --renk-odak: var(--renk-baglanti);

  /* Genel kabuktaki eski adlar aynı semantik paletten beslenir. */
  --murekkep: var(--renk-murekkep);
  --murekkep-2: var(--renk-ikincil);
  --gri: var(--renk-ikincil);
  --gri-ikincil: var(--renk-ikincil);
  --parsomen: var(--renk-zemin);
  --kagit: var(--renk-yuzey);
  --cizgi: var(--renk-cizgi);
  --cizgi-koyu: var(--renk-kontrol);
  --bordo: var(--renk-vurgu);
  --bordo-acik: var(--renk-vurgu);
  --altin: var(--renk-altin);
  --altin-metin: var(--renk-uyari);
  --yesil: var(--renk-olumlu);

  margin: 0;
  background: var(--renk-zemin);
  color: var(--renk-murekkep);
  font: var(--yazi-normal) var(--yazi-16)/var(--yazi-satir-govde) var(--yazi-sans);
  font-kerning: normal;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Tarayıcı kontrolleri ve yardımcı UI sınıfı üçüncü bir font ailesine dönmez. */
body.tipografi :is(.ui, input, select, button, textarea) { font-family: var(--yazi-sans); }

/* Masaüstünde de aynı duraklar kullanılır; sınırsız büyüyen vw başlık yoktur. */
@media (min-width: 48rem) {
  /* Üç hiyerarşi değeri tüm ilgili bileşenleri birlikte büyütür. */
  body.tipografi {
    --yazi-hero-boyut: var(--yazi-48);
    --yazi-bolum-boyut: var(--yazi-36);
    --yazi-sayi-boyut: var(--yazi-36);
  }
}

/* Yerelde yeniden tanımlanan eski değişkenler kökteki ortak sisteme bağlanır. */
body.tipografi #icerik :is(.ic-hero, .urun-sayfasi, .isleyis, .denetim, .baglanti, .fiyat7, .ic-stage.ic-hero-search) {
  --ui: var(--yazi-sans);
  --reading: var(--yazi-serif);
  --sans: var(--yazi-sans);
  --serif: var(--yazi-serif);
  --paper: var(--renk-zemin);
  --white: var(--renk-yuzey);
  --ink: var(--renk-murekkep);
  --muted: var(--renk-ikincil);
  --burgundy: var(--renk-vurgu);
  --gold: var(--renk-altin);
  --green: var(--renk-olumlu);
  --line: var(--renk-cizgi);
  --sand: var(--renk-notr-yuzey);
  --control-line: var(--renk-kontrol);
  --green-wash: var(--renk-olumlu-yuzey);
  --red-wash: var(--renk-hata-yuzey);
  --ic-h-paper: var(--renk-zemin);
  --ic-h-ink: var(--renk-murekkep);
  --ic-h-muted: var(--renk-ikincil);
  --ic-h-burgundy: var(--renk-vurgu);
  --ic-h-gold: var(--renk-altin);
  --ic-h-rule: var(--renk-cizgi);
  --ic-h-control: var(--renk-kontrol);
  --ic-h-ui: var(--yazi-sans);
  --ic-h-reading: var(--yazi-serif);
}

/* Eski 9/11/13/15/17/23/27px ve font kısayollarını yalnız landing'de sıfırlar.
   Boyut/yerleşim/görünürlük değişmez; aşağıdaki rol kuralları hiyerarşiyi kurar. */
body.tipografi #icerik,
body.tipografi #icerik :where(div, section, article, aside, figure, figcaption, blockquote,
  h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, a, span, small, strong, em,
  button, input, select, textarea, summary, label, fieldset, legend, table, th, td, caption, time, del, ins) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Kalınlık anlam taşıyan kısa ifadeye aittir; bütün paragrafı kalınlaştırmayın. */
body.tipografi #icerik :is(strong, b),
body.tipografi strong { font-weight: var(--yazi-kalin); }

/* Tek h1 görsel rolü: Georgia 400; iki satırlık bordo vurgu da aynı ailededir. */
body.tipografi .yazi-hero,
body.tipografi #icerik :is(.yazi-hero, .ic-h-title) {
  font: var(--yazi-normal) var(--yazi-hero-boyut)/var(--yazi-satir-hero) var(--yazi-serif);
  letter-spacing: var(--yazi-aralik-hero);
  overflow-wrap: anywhere;
}

/* Bölüm başlıkları eşit seviyededir; mevcut ikinci h1 de bu görsel role alınır. */
body.tipografi .yazi-bolum,
body.tipografi #icerik :is(h2, :where(#planlar-baslik), .yazi-bolum, .ic-section-title, .u-title) {
  font: var(--yazi-normal) var(--yazi-bolum-boyut)/var(--yazi-satir-baslik) var(--yazi-serif);
  letter-spacing: var(--yazi-aralik-baslik);
  overflow-wrap: anywhere;
}

/* Kart ve örnek başlıklarında gerçek serif bold yüzü 700 kullanılır, ara 500 yok. */
body.tipografi .yazi-altbaslik,
body.tipografi #icerik :is(h3, .yazi-altbaslik, .ic-h-question h2, .version-panel h4) {
  font: var(--yazi-kalin) var(--yazi-22)/var(--yazi-satir-altbaslik) var(--yazi-serif);
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
/* Ürün örneğinin yazıyla çizilen markası da kart başlığı ölçeğini kullanır. */
body.tipografi #icerik .isleyis .brand {
  font: var(--yazi-kalin) var(--yazi-22)/var(--yazi-satir-altbaslik) var(--yazi-serif);
  overflow-wrap: anywhere;
}
/* Örnek üst satırı büyük yazıda tek satıra zorlanmaz. */
body.tipografi #icerik .running-head { flex-wrap: wrap; gap: .5em; }

/* Küçük alt başlık sans kalındır; serif sadece metinsel başlık ve alıntı rolündedir. */
body.tipografi #icerik :is(h4, h5, h6):not(.version-panel h4) {
  font: var(--yazi-arayuz-vurgu) var(--yazi-18)/var(--yazi-satir-altbaslik) var(--yazi-sans);
}

/* Normal gövde ve önem taşıyan açıklamalar kullanıcı kök boyutunu izler. */
body.tipografi .yazi-govde,
body.tipografi #icerik :is(.yazi-govde, .features, .ic-moment p, .explanation, .plan__for, .fiyat-yakinda) {
  font: var(--yazi-normal) var(--yazi-16)/var(--yazi-satir-govde) var(--yazi-sans);
}

/* Tanıtım paragrafı 18px ile başlıktan ayrılır; uzun metin okunabilir ölçüde kalır. */
body.tipografi .yazi-lead,
body.tipografi #icerik :is(.yazi-lead, .ic-h-lead, .u-lead, .lead, .ic-scope-intro) {
  font: var(--yazi-normal) var(--yazi-18)/var(--yazi-satir-govde) var(--yazi-sans);
  max-inline-size: 62ch;
}

/* Cümle düzenindeki etiket, sıfır büyük harf dönüşümüyle Türkçe İ/ı'yı korur. */
body.tipografi .yazi-etiket,
body.tipografi #icerik :is(.yazi-etiket, .ic-h-eyebrow, .ic-h-trust-label, .ic-h-small-label,
  .ic-h-source-id, .ic-h-paper-top, .ic-moment-number, .u-kicker, .eyebrow, .node-type,
  .case-note__time, .plan__type, .plan__ribbon, .sentence-label, .ic-h-answer-label,
  .diff > div > span, .plan__scope h4) {
  font: var(--yazi-arayuz-vurgu) var(--yazi-14)/var(--yazi-satir-kisa) var(--yazi-sans);
  letter-spacing: var(--yazi-aralik-etiket);
  text-transform: none;
}

/* Üyelik koşulu, kaynak sınırlaması ve kontrol metni 14px altına inmez. */
body.tipografi #icerik :is(.ic-h-open-note, .ic-h-package-note, .ic-h-count-note,
  .ic-h-audit-content, .ic-h-audit-scope, .ic-h-status, .ic-h-draft > span,
  .ic-h-source-title, .ic-h-source-tag, .ic-h-institutions ul, .ic-h-legislation span,
  .ic-h-legislation strong, .ic-h-count-line > span, .u-fine, .u-badge, .ic-badge,
  .ic-scope-note, .ic-exclusions, .demo-note, .score, .answer-foot, .graph-caption,
  .graph-foot, .version-note, .year-labels label span, .pricing-note, .small,
  .coverage__date, .coverage__badges, .coverage__missing, .comparison-note,
  .compare-label, .comparison caption, .plan__action small, .closing__action p,
  .source-body, .scope-limit, .audit-body p, .processing p, .fork p, .price > span) {
  font: var(--yazi-normal) var(--yazi-14)/var(--yazi-satir-kisa) var(--yazi-sans);
}

/* 12px yalnız isteğe bağlı kısa dizgi notu ve tarih; işlevsel metin bu sınıfa girmez. */
body.tipografi .yazi-not,
body.tipografi #icerik :is(.yazi-not, .ic-scope-heading time) {
  font: var(--yazi-normal) var(--yazi-12)/var(--yazi-satir-kisa) var(--yazi-sans);
  color: var(--renk-ikincil);
}

/* Temsili örnek uyarısı kritik bağlamdır, küçük dipnot gibi saklanmaz. */
body.tipografi #icerik .ic-h-demo-caption {
  font: var(--yazi-normal) var(--yazi-14)/var(--yazi-satir-kisa) var(--yazi-sans);
  color: var(--renk-ikincil);
}

/* Alıntı ile arayüzü farklılaştırır; otomatik italik uzun okumayı zorlaştırmaz. */
body.tipografi #icerik :is(blockquote, .reading-text, .sentence-text, .unchecked-text,
  .question-slip, .shared-question > p, .diff del, .diff ins, .temporary ins, .audit-body del) {
  font: var(--yazi-normal) var(--yazi-18)/var(--yazi-satir-govde) var(--yazi-serif);
  max-inline-size: 68ch;
}

/* Bordo italik sadece kısa editoryal vurgu; uyarı/hata ve bağlantı anlamı taşımaz. */
body.tipografi .yazi-vurgu,
body.tipografi #icerik :is(.yazi-vurgu, .ic-h-title em) {
  color: var(--renk-vurgu);
  font-family: var(--yazi-serif);
  font-style: italic;
  font-weight: var(--yazi-normal);
}

/* Sayılar sans tabular + lining: hizalı genişlik, normal aralık ve net mürekkep. */
body.tipografi .yazi-sayi,
body.tipografi #icerik :is(.yazi-sayi, .ic-h-count-line strong, .ic-coverage dd,
  .coverage-counts dd, .coverage__value, .price > strong, .annual__price) {
  font: var(--yazi-arayuz-vurgu) var(--yazi-sayi-boyut)/var(--yazi-satir-baslik) var(--yazi-sans);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  color: var(--renk-murekkep);
  overflow-wrap: anywhere;
}

/* Tarih, adım ve karşılaştırma hücresi büyük istatistik değildir; sadece hizalanır. */
body.tipografi #icerik :is(time, .ic-moment-number, .ic-h-count-note, .step-number,
  .article-number, .eyebrow__number, .comparison, .year-labels, .score, .event-date) {
  font-family: var(--yazi-sans);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
}

/* Adım ve madde numarası ölçeğin 22/36 duraklarından gelir; 64px ayrı sistem yok. */
body.tipografi #icerik .step-number { font-size: var(--yazi-22); }
/* Madde numarası okumaya yardım eder, ürün büyüklüğü iddiası gibi vurgulanmaz. */
body.tipografi #icerik .article-number { font-size: var(--yazi-36); }
/* Fiyat kapalıyken açıklama asla büyük fiyat rakamı biçimine dönüşmez. */
body.tipografi #icerik .price .fiyat-yakinda {
  font: var(--yazi-normal) var(--yazi-16)/var(--yazi-satir-govde) var(--yazi-sans);
  color: var(--renk-ikincil);
}

/* Açık zemindeki sabit hex renkler temizlenir; opak ikincil metin kontrastı sabittir. */
body.tipografi #icerik :is(.ic-h-lead, .ic-h-answer > p + p, .ic-h-specimen,
  .ic-h-open-note, .ic-h-package-note, .ic-h-count-note, .ic-h-trust-label,
  .ic-h-small-label, .ic-h-source-tag, .ic-h-audit-content) { color: var(--renk-ikincil); }
/* Etiket için altın yerine açık zeminde 8.91:1 veren bordo kullanılır. */
body.tipografi #icerik :is(.ic-h-eyebrow, .ic-h-source-id) { color: var(--renk-vurgu); }
/* Temsili kâğıt rengi beyazdır; yeni bir dördüncü açık yüzey oluşturulmaz. */
body.tipografi #icerik .ic-h-paper { background: var(--renk-yuzey); }
/* Kaynak zeminindeki altın çizgi dekoratiftir; kaynak anlamını yazılı etiket verir. */
body.tipografi #icerik .ic-h-source { background: var(--renk-notr-yuzey); }
/* Açılır denetimin hover zemini aynı nötr yüzeydir. */
body.tipografi #icerik .ic-h-audit summary:hover { background: var(--renk-notr-yuzey); }
/* İşaretlenen metin altın yazı değil, mürekkep yazı ve nötr yüzeydir. */
body.tipografi #icerik mark { background: var(--renk-notr-yuzey); color: var(--renk-murekkep); }
/* Seçili metin de rol çiftlerinden beslenir; bilinmeyen yarı saydam karışım yok. */
body.tipografi ::selection,
body.tipografi #icerik ::selection { background: var(--renk-murekkep); color: var(--renk-yuzey); }
/* § ve anlam taşıyan ikonlar altından ayrılır; dekoratif çizgiler altın kalır. */
body.tipografi #icerik :is(.ic-h-index, .ic-h-legislation > .ic-h-icon) { color: var(--renk-vurgu); }
/* Dekoratif § bile yeni tip ölçeğine uyar. */
body.tipografi #icerik .ic-h-index {
  font: var(--yazi-normal) var(--yazi-48)/1 var(--yazi-serif);
}

/* Olumlu durum her zaman metin/işaretle birlikte sunulur, yeşil tek başına bilgi değildir. */
body.tipografi .durum--olumlu,
body.tipografi #icerik :is(.ic-h-result, .passed, .audit-note, .diff .new) {
  color: var(--renk-olumlu);
  background: var(--renk-olumlu-yuzey);
  border-color: var(--renk-olumlu);
}
/* Olumlu metinlerin eski sabit yeşilleri aynı role bağlanır. */
body.tipografi #icerik :is(.ic-h-answer-label, .sentence-label, .u-badge--good, .ic-badge-full) {
  color: var(--renk-olumlu);
}
/* Bekleme/eksik bilgi amber uyarıdır; ücret açıklaması başarı durumu değildir. */
body.tipografi .durum--uyari {
  color: var(--renk-uyari);
  background: var(--renk-uyari-yuzey);
  border-color: var(--renk-uyari);
}
/* Çıkarılmış/hatalı içerik ayrı tuğla kırmızısıdır; editoryal bordo ile aynı rol değil. */
body.tipografi .durum--hata,
body.tipografi #icerik :is(.ic-h-draft, .removed, .audit-log, .false-citation, .diff .old) {
  color: var(--renk-hata);
  background: var(--renk-hata-yuzey);
  border-color: var(--renk-hata);
}
/* Hatalı alıntıdaki mark da durum çiftini korur; üstünü çizme mevcut HTML'den gelir. */
body.tipografi #icerik :is(.unchecked-text mark, .u-badge--bad) { color: var(--renk-hata); }

/* Koyu bölümde açık metin gerekir; bordo/ikincil koyu metin burada kullanılmaz. */
body.tipografi #icerik :is(.denetim, .closing) {
  background: var(--renk-koyu);
  color: var(--renk-zemin);
}
/* Bölüm açıklamaları opak tutulur; alpha düşürerek kontrast zayıflatılmaz. */
body.tipografi #icerik :is(.denetim > .u-wrap > .u-section-head, .closing__copy, .closing__action > p) {
  color: var(--renk-zemin);
  opacity: 1;
}
/* Koyu blokların içindeki açık kartlar kendi metin rengini geri alır. */
body.tipografi #icerik .denetim :is(.answer, .coverage, .shared-question) {
  color: var(--renk-murekkep);
}

/* Metin bağlantısı renk dışında alt çizgiyle de tanınır; kısa etiketlerde 14px alt sınır. */
body.tipografi .yazi-link,
body.tipografi #icerik :is(.yazi-link, .ic-h-source-link, .ic-text-link, .u-link, .text-link, .node-action) {
  color: var(--renk-baglanti);
  font: var(--yazi-arayuz-vurgu) var(--yazi-14)/var(--yazi-satir-kisa) var(--yazi-sans);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}
/* Hover da aynı güvenli renk çiftini kullanır; odak ve hover tek başına renk değildir. */
body.tipografi .yazi-link:hover,
body.tipografi #icerik :is(.yazi-link, .ic-h-source-link, .ic-text-link, .u-link, .text-link, .node-action):hover {
  color: var(--renk-murekkep);
  text-decoration-thickness: .14em;
}

/* Düğmeler aynı birincil role geçer; mevcut geometri korunur, metin sarabilir. */
body.tipografi .dugme,
body.tipografi #icerik :is(.dugme, .ic-h-submit, .ic-button, .u-button, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: .65em 1em;
  border: 1px solid var(--renk-eylem);
  border-radius: 3px;
  background: var(--renk-eylem);
  color: var(--renk-yuzey);
  font: var(--yazi-arayuz-vurgu) var(--yazi-16)/var(--yazi-satir-kisa) var(--yazi-sans);
  text-decoration: none;
  white-space: normal;
  text-align: center;
}
/* Hover'da beyaz yazı 11.13:1 oranını korur. */
body.tipografi .dugme:hover,
body.tipografi #icerik :is(.dugme, .ic-h-submit, .ic-button, .u-button, .button):hover {
  background: var(--renk-eylem-hover);
  border-color: var(--renk-eylem-hover);
  color: var(--renk-yuzey);
  text-decoration: none;
}
/* İkincil eylem dolgu rekabeti yaratmaz; gerekli sınır rengi en az 3:1'dir. */
body.tipografi .dugme--ikincil,
body.tipografi #icerik :is(.dugme--ikincil, .ic-h-package, .ic-h-replay, .ic-button-secondary,
  .ic-button-ikincil, .u-button--outline, .button--outline) {
  min-inline-size: 44px;
  min-block-size: 44px;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kontrol);
  color: var(--renk-murekkep);
  font: var(--yazi-arayuz-vurgu) var(--yazi-16)/var(--yazi-satir-kisa) var(--yazi-sans);
  white-space: normal;
  text-decoration: none;
}
/* İkincil hover nötr yüzeydir; beyaz yazı kuralı buraya sızmaz. */
body.tipografi .dugme--ikincil:hover,
body.tipografi #icerik :is(.dugme--ikincil, .ic-h-package, .ic-h-replay, .ic-button-secondary,
  .ic-button-ikincil, .u-button--outline, .button--outline):hover {
  background: var(--renk-notr-yuzey);
  border-color: var(--renk-kontrol);
  color: var(--renk-murekkep);
}
/* Koyu kapanıştaki ana eylem yüzeyi ters çevrilir; altın CTA olarak kullanılmaz. */
body.tipografi #icerik .closing__action .button {
  background: var(--renk-zemin);
  border-color: var(--renk-zemin);
  color: var(--renk-koyu);
}
/* Kapanış hover'ı da açık yüzey/koyu yazı rolünü korur. */
body.tipografi #icerik .closing__action .button:hover { background: var(--renk-notr-yuzey); }

/* Kontrol etiketi erişilebilir boyuttadır; readonly örnekte de metin saklanmaz. */
body.tipografi #icerik :is(summary, .ic-h-type span, .year-labels label) {
  min-block-size: 44px;
  font: var(--yazi-arayuz-vurgu) var(--yazi-14)/var(--yazi-satir-kisa) var(--yazi-sans);
}
/* Seçili arama türü editoryal bordoya yaslanmaz; mürekkep ve alt çizgi birlikte görünür. */
body.tipografi #icerik .ic-h-type input:checked + span {
  color: var(--renk-murekkep);
  border-bottom-color: var(--renk-murekkep);
}
/* Seçili tarih zaten koyu dolguyla ayrılır; işlevsel alt çizgi dekoratif altın olmaz. */
body.tipografi #icerik :is(
  #ic-c-year-2019:checked ~ .year-labels label[for="ic-c-year-2019"],
  #ic-c-year-2022:checked ~ .year-labels label[for="ic-c-year-2022"],
  #ic-c-year-today:checked ~ .year-labels label[for="ic-c-year-today"]
) { box-shadow: inset 0 -4px var(--renk-zemin); }
/* Yazılabilir alanda 16px altına inilmez; mobil tarayıcının otomatik yakınlaşması azalır. */
body.tipografi #icerik :is(input:not([type=radio]):not([type=checkbox]), select, textarea) {
  min-block-size: 44px;
  font: var(--yazi-normal) var(--yazi-16)/var(--yazi-satir-kisa) var(--yazi-sans);
}
/* Placeholder metni de AA metin çiftidir, tarayıcının alpha varsayımı kaldırılır. */
body.tipografi #icerik input::placeholder { color: var(--renk-ikincil); opacity: 1; }
/* Bağımsız kısa bağlantılar 44px hedefe sahip olur, satır içi paragraf bağlantısı değildir. */
body.tipografi #icerik :is(.ic-h-source-link, .ic-text-link, .u-link, .text-link, .node-action) {
  display: inline-flex;
  align-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* Üst bar aynı arayüz ailesini kullanır; SVG kelime markasının konturları değişmez. */
body.tipografi .ustbar.ustbar--yeni {
  --ustbar-koyu: var(--renk-koyu);
  --ustbar-kagit: var(--renk-zemin);
  --ustbar-soluk: var(--renk-koyu-ikincil);
  --ustbar-kenar: var(--renk-kontrol);
  font: var(--yazi-normal) var(--yazi-14)/var(--yazi-satir-kisa) var(--yazi-sans);
  border-block-end-color: var(--renk-eylem-hover);
}
/* Üst barın koyu yüzeydeki ayırıcıları tek dekoratif koyu tona bağlanır. */
body.tipografi .ustbar.ustbar--yeni :is(.ustbar-hizli, .ustbar-menu-dugme) {
  border-block-start-color: var(--renk-eylem-hover);
}
/* Açık paneldeki ayırıcılar kontrol sınırı değil, dekoratif çizgidir. */
body.tipografi .ustbar.ustbar--yeni .ustbar-panel { border-block-start-color: var(--renk-cizgi); }
/* Menü alt ayırıcıları aynı açık çizgi rolünü kullanır. */
body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu a { border-block-end-color: var(--renk-cizgi); }
/* Menü ve arama sabit sistem kısayollarını bırakır; formlarda 16px korunur. */
body.tipografi .ustbar.ustbar--yeni :is(a, button, input) {
  font-family: var(--yazi-sans);
  font-size: var(--yazi-14);
  line-height: var(--yazi-satir-kisa);
  letter-spacing: normal;
}
/* Büyük yazıda hesap eylemleri sözcük aralarından sarılır, grid ekranı aşmaz. */
body.tipografi .ustbar.ustbar--yeni .ustbar-sag > a { white-space: normal; text-align: center; }
/* Masaüstü arama da küçük mobil alanla tutarlı kalır. */
body.tipografi .ustbar.ustbar--yeni .ustbar-arama > input { font-size: var(--yazi-16); }
/* Yazı karakteriyle çizilen ok da sekiz duraklı ölçeğe uyar. */
body.tipografi .ustbar.ustbar--yeni .ustbar-paket > span { font-size: var(--yazi-18); }
/* Mobil arama yüzeyi ve placeholder aynı opak açık yüzey çiftini kullanır. */
body.tipografi .ustbar.ustbar--yeni .ustbar-arama {
  background: var(--renk-yuzey);
  border-color: var(--renk-kontrol);
  color: var(--renk-murekkep);
}
/* Arama istemi kullanıcı metni kadar okunur olmalıdır. */
body.tipografi .ustbar.ustbar--yeni .ustbar-arama > input::placeholder {
  color: var(--renk-ikincil);
  opacity: 1;
}
/* Mobil arama düğmesinin hover yüzeyi yeni palete bağlıdır. */
body.tipografi .ustbar.ustbar--yeni .ustbar-arama > button:hover { background: var(--renk-notr-yuzey); }
/* Koyu zemindeki hesap düğmesi, diğer koyu eylemlerle aynı hover tonundadır. */
body.tipografi .ustbar.ustbar--yeni .ustbar-hesap:hover { background: var(--renk-eylem-hover); }
/* Açık panelin hover ve aktif durumları yalnız nötr yüzey kullanır. */
body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu a:is(:hover, [aria-current]) {
  background: var(--renk-notr-yuzey);
  color: var(--renk-murekkep);
}
/* Aktif menü işareti işlevseldir; dekoratif altın rolünden ayrılır. */
body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu a[aria-current] {
  box-shadow: inset 3px 0 var(--renk-baglanti);
}
/* Menü sırası açık panelde ikincil metindir. */
body.tipografi .ustbar.ustbar--yeni .ustbar-menu-no { color: var(--renk-ikincil); }
/* Hesap bağlantısı karanlık alanın opak ikincil rengine bağlanır. */
body.tipografi .ustbar.ustbar--yeni .ustbar-sag > .ustbar-giris { color: var(--renk-koyu-ikincil); }
/* Marka altı açıklaması ve sıra sayısı isteğe bağlı mikro metindir. */
body.tipografi .ustbar.ustbar--yeni :is(.ustbar-marka-alt, .ustbar-menu-no) {
  font-size: var(--yazi-12);
  letter-spacing: normal;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Altın paket dolgusu kalkar: koyu zemin üzerinde krem eylem yüzeyi. */
body.tipografi .ustbar.ustbar--yeni .ustbar-sag > .ustbar-paket {
  background: var(--renk-zemin);
  border-color: var(--renk-zemin);
  color: var(--renk-koyu);
}
/* Üst bar eylemi hover'da açık yüzey rolünü korur. */
body.tipografi .ustbar.ustbar--yeni .ustbar-sag > .ustbar-paket:hover { background: var(--renk-notr-yuzey); }
/* İşlevsel ok/ikonlar altın değildir; üstte krem, açık menüde bağlantı rengi kullanılır. */
body.tipografi .ustbar.ustbar--yeni :is(.ustbar-hizli > svg, .ustbar-yon) { color: var(--renk-zemin); }
/* Menü oku koyu üst bar değil açık panelde görünür. */
body.tipografi .ustbar.ustbar--yeni .ustbar-menu-ok { color: var(--renk-baglanti); }
/* Altın hover metni kaldırılır; ışık farkı güvenli çiftlerden oluşur. */
body.tipografi .ustbar.ustbar--yeni :is(.ustbar-hizli, .ustbar-menu-dugme):hover { color: var(--renk-zemin); }
/* Seçili gezinme yalnız altın çizgiye bağlı değildir, açık çizgi ve mevcut kalınlık destekler. */
body.tipografi .ustbar.ustbar--yeni .ustbar-hizli[aria-current] {
  box-shadow: inset 0 -2px var(--renk-zemin);
}
/* Masaüstü menüsü koyu yüzeye taşınır; mobildeki koyu yazı burada açık olur. */
@media (min-width: 64rem) {
  /* Arama alanı üst bar ile aynı koyu yüzeyi paylaşır. */
  body.tipografi .ustbar.ustbar--yeni .ustbar-arama {
    background: var(--renk-koyu);
    color: var(--renk-zemin);
  }
  /* Placeholder bu kez koyu yüzeyin açık ikincil rengidir. */
  body.tipografi .ustbar.ustbar--yeni .ustbar-arama > input::placeholder { color: var(--renk-koyu-ikincil); }
  /* Koyu arama düğmesinin hover'ında açık yazı okunur kalır. */
  body.tipografi .ustbar.ustbar--yeni .ustbar-arama > button:hover { background: var(--renk-eylem-hover); }
  /* Masaüstü menüsünü ayıran çizgi, üst barın diğer ayırıcılarıyla aynıdır. */
  body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu { border-block-start-color: var(--renk-eylem-hover); }
  /* Masaüstü gezinmesi aynı metin çiftini kullanır, altın menü yazısı yoktur. */
  body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu a { color: var(--renk-koyu-ikincil); }
  /* Ana hizmetin hiyerarşisi metin kalınlığı ve açık renk ile korunur. */
  body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu .ustbar-ana-hizmet { color: var(--renk-zemin); }
  /* Açık renkli yazı hover/aktif durumda koyu yüzeyde kalır. */
  body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu a:is(:hover, [aria-current]) {
    background: var(--renk-eylem-hover);
    color: var(--renk-yuzey);
  }
  /* Mobildeki dikey aktif çizgi masaüstünde yatay açık çizgidir. */
  body.tipografi .ustbar.ustbar--yeni nav.ustbar-menu a[aria-current] {
    box-shadow: inset 0 -2px var(--renk-zemin);
  }
}
/* Alt sekmede 11px ve dar harf aralığı kaldırılır; etiket işlevseldir, 14px olur. */
body.tipografi .alt-sekme a {
  font: var(--yazi-arayuz-vurgu) var(--yazi-14)/var(--yazi-satir-kisa) var(--yazi-sans);
  min-inline-size: 44px;
  min-block-size: 44px;
  height: auto;
  padding-block: .35rem;
  color: var(--renk-ikincil);
  overflow-wrap: anywhere;
  text-align: center;
}
/* Eski mobil span kuralı bağlantıdan mirası kesiyordu; etiketi tekrar ölçeğe bağlar. */
body.tipografi .alt-sekme a span { font: inherit; letter-spacing: normal; }
/* İki satıra çıkan etiket 56px içine sıkışmaz; kutu yazıyla birlikte büyür. */
@media (max-width: 900px) {
  /* Kabukta alt bilgi/yardım ofsetleri de aynı yeni minimumu izler. */
  body.tipografi {
    --sekme-yuksek: 4.75rem;
    --sekme-tam: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
  /* 14px etiket ile ikon birlikte en az bu yüksekliği ister. */
  body.tipografi .alt-sekme a { min-block-size: var(--sekme-yuksek); }
}
/* Aktif sekme kalınlık/çizgiyle ayırt edilir; yalnız bordo renk göstergesi kullanılmaz. */
body.tipografi .alt-sekme a[aria-current] {
  color: var(--renk-murekkep);
  font-weight: var(--yazi-kalin);
  box-shadow: inset 0 2px var(--renk-murekkep);
}
/* Alt bilgi ve yardım kabuğu üçüncü font oluşturmaz. */
body.tipografi :is(.altbilgi, .destek-panel, .destek-dugme, .atla) {
  font-family: var(--yazi-sans);
  font-size: var(--yazi-14);
  line-height: var(--yazi-satir-kisa);
}
/* Alt bilgi iç kapsayıcısındaki eski .86rem, ölçek dışı 13.76px üretmez. */
body.tipografi .altbilgi .altbilgi-ic {
  color: var(--renk-ikincil);
  font-size: var(--yazi-14);
}
/* Alt bilgideki eski özel krem yerine ortak nötr yüzey kullanılır. */
body.tipografi .altbilgi { background: var(--renk-notr-yuzey); }
/* Yardım panelinin eski kesirli boyutları aynı kısa metin durağına bağlanır. */
body.tipografi .destek-panel :is(p, div, span, button, summary, label) {
  font-family: var(--yazi-sans);
  font-size: var(--yazi-14);
  line-height: var(--yazi-satir-kisa);
}
/* Yardım formunda da yazılabilir alan en az 16px ve 44px hedef kullanır. */
body.tipografi .destek-panel :is(input, textarea) {
  font: var(--yazi-normal) var(--yazi-16)/var(--yazi-satir-kisa) var(--yazi-sans);
  min-block-size: 44px;
}
/* Yardım kapatma/sekme hedefleri masaüstünde de brief'in 44px ölçüsünü korur. */
body.tipografi .destek-panel :is(button, summary) { min-block-size: 44px; min-inline-size: 44px; }
/* Destek simgesi işlevsel olduğu için dekoratif altından ayrılır. */
body.tipografi .destek-isaret {
  border-color: var(--renk-koyu-ikincil);
  color: var(--renk-zemin);
  font-size: var(--yazi-14);
}
/* Alt bilgi linkleri gerçek hedef olarak alt çizgi ve 44px dikey alana sahiptir. */
body.tipografi .altbilgi a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  color: var(--renk-baglanti);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* İki tonlu odak halkası açık/koyu yüzeylerde seçilir; klavye odağı gizlenmez. */
body.tipografi :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.tipografi .ustbar.ustbar--yeni :is(a, button, input):focus-visible,
body.tipografi #icerik :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--renk-odak);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--renk-yuzey);
}
/* Eski input:focus sıfırlamasını aşar; dar giriş alanında halka içeri çizilir. */
body.tipografi .ustbar.ustbar--yeni .ustbar-arama > input:focus-visible {
  outline: 3px solid var(--renk-odak);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px var(--renk-yuzey);
}
/* Arama grubu odağı altın değildir; iki zemin üzerinde görünür çift halka kullanılır. */
body.tipografi .ustbar.ustbar--yeni .ustbar-arama:focus-within {
  outline: 3px solid var(--renk-odak);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--renk-yuzey);
}
/* Gizli radyo odağı görünen etiketine aktarılır; 1px kutu etrafına çizilmez. */
body.tipografi #icerik .ic-h-type input:focus-visible + span {
  outline: 3px solid var(--renk-odak);
  outline-offset: 2px;
}
/* Yıl seçimi CSS ile çalışır; mevcut kardeş ilişkileri ve checked görünürlüğü korunur. */
body.tipografi #icerik :is(#ic-c-year-2019, #ic-c-year-2022, #ic-c-year-today):focus-visible ~ .year-labels {
  outline: 3px solid var(--renk-odak);
  outline-offset: 3px;
}

/* Yazı büyütüldüğünde kısa paket satırı alt satıra inebilir; metin kırpılmaz. */
body.tipografi #icerik .ic-h-offer { flex-wrap: wrap; }
/* Uzun Türkçe başlıklar ve değişken veri belirteçleri kartı yatay büyütmez. */
body.tipografi #icerik :is(.ic-h-intro, .ic-h-demo, .plan, .graph-node, .ic-moment) { min-inline-size: 0; }

/* Yüksek kontrast modunda gerçek sistem renkleri kullanıcı seçimine saygı gösterir. */
@media (forced-colors: active) {
  /* Özel çift halka yerine sistemin odak rengi kullanılır. */
  body.tipografi :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
  body.tipografi .ustbar.ustbar--yeni :is(a, button, input):focus-visible,
  body.tipografi .ustbar.ustbar--yeni .ustbar-arama > input:focus-visible,
  body.tipografi .ustbar.ustbar--yeni .ustbar-arama:focus-within,
  body.tipografi #icerik :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
  /* Radyo etiketi de aynı sistem odak rengini kullanır. */
  body.tipografi #icerik .ic-h-type input:focus-visible + span { outline-color: Highlight; }
  /* Dolgular kaybolduğunda düğme sınırı görünür kalır. */
  body.tipografi .dugme,
  body.tipografi #icerik :is(.dugme, .button, .u-button, .ic-h-submit, .ic-h-package, .ic-h-replay) {
    border-color: ButtonText;
  }
}

/* MARKA KARARI (29.09) · Ajan Georgia onerdi, biz Source Serif 4'te kaliyoruz.
   Gerekce: font zaten yuklu, markanin ayirt edici yuzu o, ve kelime markasi
   da ayni ailede cizildi. Olcek, harf duzeni, renk ve sayi kurallarinin
   TAMAMI ajanin onerdigi gibi kaliyor; yalniz aile degisiyor. */
body.tipografi { --yazi-serif: "Source Serif 4", Georgia, "Times New Roman", serif; }

/* ---- 29.09 ÖLÇÜLMÜŞ İKİ DÜZELTME (Opus kimlik ajanı) --------------------
   1. BAŞLIK AĞIRLIĞI. h1 48px'te ağırlık 400, h2 400 çıkıyordu; sayfa
      "başlık" değil "paragraf" gibi okunuyordu. Kurucunun aylardır tekrar
      ettiği "havası yok" şikayetinin ölçülebilir sebebi buydu.
      Hero 500, bölüm başlıkları 600. Source Serif 4 zaten 400-700 taşıyor,
      ek dosya indirilmiyor.
   2. ALTIN METİN KONTRASTI. --altin-metin (#8A6B33) kum yüzeyde 4,21:1
      ölçüldü, AA için 4,5 gerekiyor. #73521D ile 6,03:1 oluyor.
      Süs altını (#A8874B) metin olarak KULLANILMAZ, yalnız çizgi ve ikon. */
body.tipografi #icerik :is(.yazi-hero, .ic-h-title, h1) { font-weight: 500; }
body.tipografi #icerik :is(h2, :where(#planlar-baslik), .yazi-bolum,
  .ic-section-title, .u-title) { font-weight: 600; }
body.tipografi { --altin-metin: #73521D; }