/* Şapkalı “â” Haber · Başlık alanı bileşeni (brif T3; YAPIM-PLANI 2.6, 4.0, 5.1, 6)
 *
 * Bağımlılık: ../belirtecler.css ve ../yazi/yazilar.css. Bütün renkler, aralıklar ve yazı boyları
 * belirteçten; bu dosyada renk değeri yok. Her seçici .baslik-alani, .yapiskan-cubuk,
 * .tema-dugmesi ya da html.tema-geciyor ile başlar (t3.py sayar).
 *
 * Tema eşlemesi (MARKA-KITABI 4.6, H13): açık temada işaret kapalı hâl, koyu ve
 * siyah temada açık hâl (güneş). Hâl, temalı bağlamdan --gor değişkenine yazılır
 * (0 kapalı, 1 açık); parçaların dönüşümü bu değişkenden hesaplanır. Geçiş kuralları
 * yalnız html.tema-geciyor altında: sınıfı yalnız tema düğmesi ekler, 430 ms sonra
 * kaldırır (brif: en geç 450 ms). Sayfa yüklenirken ve sistem teması değişirken işaret anında değişir.
 * Sayfa renkleri (kâğıt, mürekkep) geçişsiz.
 */

/* ------------------------------------------------------------------ */
/* Bileşen ölçüleri. Kilit eni H'den: masaüstü kilitte H = en x 0,0355, */
/* mobil kilitte H = en x 0,0599 (MARKA-KITABI 4.2). Sığmayan ölçüde    */
/* sığan en büyük en (%100) basılır: R-009, pano T1 madde 4 ve 5.      */
/* ------------------------------------------------------------------ */
.baslik-alani,
.yapiskan-cubuk {
  --gor: 0;
  /* wordmark'ın sol kenarı / kilit eni (son/ dosyalarından ölçüldü) */
  --oran-ad-masa: 0.1334;
  --oran-ad-mobil: 0.2168;
  --cubuk-yuk: 3rem; /* 48 px (4.0) */
  --kaydirma-pay: calc(var(--cubuk-yuk) + var(--aralik-4)); /* 64 / 72 px (2.4.11) */
}

/* Adı konmuş bileşen sabitleri. Belirteçlerde karşılığı olmayan her sayı ölçü
 * yalnız bir özel özellikte durur; t3.py bu adların dışında sayı ölçü bulursa
 * sapma yazar (IZINLI_SABITLER). Yazı boyları, aralıklar, çizgiler belirteçten. */
.baslik-alani,
.yapiskan-cubuk,
.tema-dugmesi {
  --hedef: 2.75rem; /* 44 px dokunma hedefi (YAPIM-PLANI 7.2, 2.5.8) */
}

/* Hâl: koyu ve siyah temada açık hâl (güneş) */
.baslik-alani:is([data-tema="koyu"] *, [data-tema="siyah"] *),
.yapiskan-cubuk:is([data-tema="koyu"] *, [data-tema="siyah"] *) {
  --gor: 1;
}

@media (prefers-color-scheme: dark) {
  .baslik-alani:is(:root:not([data-tema]) *),
  .yapiskan-cubuk:is(:root:not([data-tema]) *) {
    --gor: 1;
  }
}

/* ------------------------------------------------------------------ */
/* Kilit (iki hâlli satır içi SVG, son/kilit-B-iki-hal.svg)             */
/* ------------------------------------------------------------------ */
.baslik-alani .kilit-svg,
.yapiskan-cubuk .kilit-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.baslik-alani .kilit-svg .marka,
.yapiskan-cubuk .kilit-svg .marka {
  fill: var(--renk-marka);
}

.baslik-alani .kilit-svg .murekkep,
.yapiskan-cubuk .kilit-svg .murekkep {
  fill: var(--renk-murekkep);
}

/* Dolgu tabana doğru çekilir; dış ışınlar söner; güneş tabanın altından
 * (iç içe svg ile kırpılmış) yükselir. Taban, ok ve deri hiç dönüşmez (L-14). */
.baslik-alani .kilit-svg .dolgu,
.yapiskan-cubuk .kilit-svg .dolgu {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 - var(--gor)));
}

.baslik-alani .kilit-svg .dis,
.yapiskan-cubuk .kilit-svg .dis {
  transform-box: fill-box;
  transform-origin: 15% 100%;
  opacity: calc(1 - var(--gor));
  transform: translateY(calc(var(--gor) * 21%)) scale(calc(1 - var(--gor) * 0.2));
}

.baslik-alani .kilit-svg .acik,
.yapiskan-cubuk .kilit-svg .acik {
  transform-box: fill-box;
  transform: translateY(calc((1 - var(--gor)) * 105%));
}

/* Geçiş (MARKA-KITABI L-12; YAPIM-PLANI 6.3'ün süreleri yerine).
 * Açıktan kapalıya (açık temaya dönüş): güneş 200 ms, dolgu 140 + 260 ms,
 * dış ışın 240 + 160 ms. Kapalıdan açığa (koyu temaya): dolgu 240 ms, dış ışın
 * 140 ms, güneş 120 + 280 ms. En uzun yol 400 ms. Hareket azaltmada tanımsız. */
@media (prefers-reduced-motion: no-preference) {
  html.tema-geciyor .baslik-alani .kilit-svg .dolgu,
  html.tema-geciyor .yapiskan-cubuk .kilit-svg .dolgu {
    transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms;
  }

  html.tema-geciyor .baslik-alani .kilit-svg .dis,
  html.tema-geciyor .yapiskan-cubuk .kilit-svg .dis {
    transition:
      opacity 160ms linear 240ms,
      transform 160ms ease-out 240ms;
  }

  html.tema-geciyor .baslik-alani .kilit-svg .acik,
  html.tema-geciyor .yapiskan-cubuk .kilit-svg .acik {
    transition: transform 200ms cubic-bezier(0.5, 0, 1, 1);
  }

  html.tema-geciyor:is([data-tema="koyu"], [data-tema="siyah"]) .baslik-alani .kilit-svg .dolgu,
  html.tema-geciyor:is([data-tema="koyu"], [data-tema="siyah"]) .yapiskan-cubuk .kilit-svg .dolgu {
    transition: transform 240ms cubic-bezier(0.4, 0, 0.7, 1);
  }

  html.tema-geciyor:is([data-tema="koyu"], [data-tema="siyah"]) .baslik-alani .kilit-svg .dis,
  html.tema-geciyor:is([data-tema="koyu"], [data-tema="siyah"]) .yapiskan-cubuk .kilit-svg .dis {
    transition:
      opacity 140ms linear,
      transform 140ms ease-in;
  }

  html.tema-geciyor:is([data-tema="koyu"], [data-tema="siyah"]) .baslik-alani .kilit-svg .acik,
  html.tema-geciyor:is([data-tema="koyu"], [data-tema="siyah"]) .yapiskan-cubuk .kilit-svg .acik {
    transition: transform 280ms cubic-bezier(0.15, 0.75, 0.25, 1) 120ms;
  }
}

@media (forced-colors: active) {
  .baslik-alani .kilit-svg :is(.marka, .murekkep),
  .yapiskan-cubuk .kilit-svg :is(.marka, .murekkep) {
    fill: CanvasText;
  }
}

/* ------------------------------------------------------------------ */
/* Ortak düğmeler: Ara, Menü (bağlantı), tema düğmesi                  */
/* ------------------------------------------------------------------ */
.baslik-alani .ba-arac,
.yapiskan-cubuk .ba-arac {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--aralik-2);
}

.baslik-alani .ba-dugme,
.yapiskan-cubuk .ba-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--hedef);
  min-inline-size: var(--hedef);
  padding-inline: var(--aralik-2);
  color: var(--renk-murekkep);
  text-decoration-line: none;
}

/* Son düğmenin (Menü) metni kapsayıcının sağ kenarında biter: imza ve ok ucuyla aynı
 * dikey (YAPIM-PLANI 2.6 "imza kapsayıcının sağ kenarında"). İç boşluk yalnız başta,
 * metin kutunun sonuna yaslı; dokunma hedefi 44 px kalır (min-inline-size). Yapışkan
 * çubukta 480 altında iç boşluk zaten 0; aynı kural orada da geçerli, böylece çubuk
 * belirince Menü yerinde kalır (uzman grafikçi revize 3: tam başlıkta yazı 9 px içerideydi,
 * çubukta 8 px yana sıçrıyordu). Negatif kenar boşluğu yerine bu yol: çubukta 480 altında
 * iç boşluk 0 olduğundan -8 px yazıyı kapsayıcının dışına taşırdı (T3-S22). */
.baslik-alani .ba-arac > :last-child,
.yapiskan-cubuk .ba-arac > :last-child {
  justify-content: flex-end;
  padding-inline-end: 0;
}

.baslik-alani .ba-dugme:hover,
.yapiskan-cubuk .ba-dugme:hover {
  text-decoration-line: underline;
}

/* Tema düğmesi: Uğur'un artcycle sitelerindeki güneş-ay düğmesi (MARKA-KITABI
 * L-15; kaynak artcycle-labs ThemeToggle.tsx ve globals.css .gunes-ay). Aynı
 * SVG, aynı eğri ve süreler; data-theme yerine data-tema. JavaScript yoksa
 * hidden; siyah temada gizli (ST-03). */
.tema-dugmesi {
  --dugme-simge: 1.375rem; /* 22 px, labs ThemeToggle.tsx SVG'si (L-15) */
  --ay-kayma: -7px; /* labs .gunes-ay koyu hâli: ay dairesinin kayması */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hedef);
  block-size: var(--hedef);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--renk-murekkep);
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tema-dugmesi:hover {
  transform: scale(1.1);
}

.tema-dugmesi[hidden],
.tema-dugmesi:is([data-tema="siyah"] *) {
  display: none;
}

.tema-dugmesi .gunes-ay {
  inline-size: var(--dugme-simge);
  block-size: var(--dugme-simge);
}

.tema-dugmesi .gunes-ay > :is(.ay, .gunes, .isinlar) {
  transform-origin: center;
}

.tema-dugmesi .gunes-ay > .gunes {
  fill: currentColor;
  transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25);
}

.tema-dugmesi .gunes-ay > .isinlar {
  stroke: currentColor;
  stroke-width: var(--cizgi-kalin-en);
  stroke-linecap: round;
  transition:
    transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25),
    opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1);
}

.tema-dugmesi .gunes-ay .ay > circle {
  transition: transform 0.25s cubic-bezier(0, 0, 0, 1);
}

.tema-dugmesi:is([data-tema="koyu"] *) .gunes-ay > .gunes {
  transform: scale(1.75);
  transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
  transition-duration: 0.25s;
}

.tema-dugmesi:is([data-tema="koyu"] *) .gunes-ay > .isinlar {
  opacity: 0;
  transform: rotateZ(-25deg);
  transition-duration: 0.15s;
}

.tema-dugmesi:is([data-tema="koyu"] *) .gunes-ay .ay > circle {
  transform: translateX(var(--ay-kayma));
  transition-delay: 0.25s;
  transition-duration: 0.5s;
}

@media (prefers-color-scheme: dark) {
  .tema-dugmesi:is(:root:not([data-tema]) *) .gunes-ay > .gunes {
    transform: scale(1.75);
    transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
    transition-duration: 0.25s;
  }

  .tema-dugmesi:is(:root:not([data-tema]) *) .gunes-ay > .isinlar {
    opacity: 0;
    transform: rotateZ(-25deg);
    transition-duration: 0.15s;
  }

  .tema-dugmesi:is(:root:not([data-tema]) *) .gunes-ay .ay > circle {
    transform: translateX(var(--ay-kayma));
    transition-delay: 0.25s;
    transition-duration: 0.5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tema-dugmesi,
  .tema-dugmesi * {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Büyük başlık alanı: üç boy tam (ana sayfa), ic (iç sayfa)           */
/* ------------------------------------------------------------------ */
.baslik-alani {
  --kilit-en: min(434px, 100%); /* tam, 480 altı: H 26 */
  --oran-ad: var(--oran-ad-mobil);
  border-block-end: var(--cizgi-kalin);
}

.baslik-alani .ba-kap {
  inline-size: var(--kapsayici);
  margin-inline: auto;
  padding-block-end: var(--aralik-5);
}

.baslik-alani .ba-arac {
  block-size: var(--cubuk-yuk); /* 48 px araç satırı (2.6) */
}

.baslik-alani .ba-kilit {
  display: block;
  inline-size: var(--kilit-en);
  max-inline-size: 100%;
}

.baslik-alani .ba-kilit:focus-visible {
  outline-offset: var(--aralik-1);
}

/* Kalem seçimi: 1024 altı mobil, üstü masaüstü kilit */
.baslik-alani .kilit-masa {
  display: none;
}

.baslik-alani .ba-slogan,
.baslik-alani .ba-satir,
.baslik-alani .ba-alt {
  padding-inline-start: calc(var(--kilit-en) * var(--oran-ad));
}

.baslik-alani .ba-slogan {
  margin: var(--aralik-3) 0 0;
  font-size: var(--yazi-slogan-boy); /* 16 ile 20 px (YAPIM-PLANI 2.2); 2.6 basamakları için T3-S18 */
}

.baslik-alani .ba-alt {
  margin-block-start: var(--aralik-2);
}

.baslik-alani .ba-tanim {
  margin: 0;
  color: var(--renk-kursun);
  font-size: var(--yazi-tanim-boy); /* 15 ile 16 px */
  /* Satırlar dengeli: 768 px'te son satırda "bir deneme" kalıyordu (uzman grafikçi
   * revize 2). pretty Chromium'da yalnız tek kelimelik dul satırı önlüyor, iki kelime
   * kalıyordu; balance iki satırı eşitler ("... hakkını / kullanması üzerine bir deneme"). */
  text-wrap: balance;
}

.baslik-alani .ba-imza {
  margin: 0;
  text-align: end;
  white-space: nowrap;
  font-size: var(--yazi-imza-baslik-boy); /* 16 ile 18 px */
}

/* 480 altında imza tanımın son satırına sığmaz (pano T1 madde 6): kendi satırına
 * sağa yaslı düşer; üstünde 8 px boşluk, tanıma yapışmaz (T3 revize 1). */
.baslik-alani .ba-alt .ba-imza {
  margin-block-start: var(--aralik-2);
}

/* Gezinme satırı: yalnız 1024 ve üstü (4.0); 1024 altında bölümler menüde */
.baslik-alani .ba-gezinme {
  display: none;
}

@media (min-width: 480px) {
  .baslik-alani[data-boy="tam"] {
    --kilit-en: min(534px, 100%); /* H 32 */
  }

  .baslik-alani .ba-alt {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: last baseline;
    column-gap: var(--aralik-4);
  }

  .baslik-alani .ba-alt .ba-imza {
    margin-block-start: 0;
  }
}

@media (min-width: 768px) {
  .baslik-alani[data-boy="tam"] {
    --kilit-en: min(667px, 100%); /* H 40 (L-08 üst sınırı 667 px) */
  }
}

@media (min-width: 1024px) {
  .baslik-alani {
    --oran-ad: var(--oran-ad-masa);
  }

  .baslik-alani[data-boy="tam"] {
    --kilit-en: min(1296px, 100%); /* H 46 sığmaz, 1216 px'te H 43,2 (R-009) */
  }

  .baslik-alani .kilit-masa {
    display: block;
  }

  .baslik-alani .kilit-mobil {
    display: none;
  }

  .baslik-alani .ba-gezinme {
    display: block;
    inline-size: var(--kapsayici);
    margin-inline: auto;
    border-block-start: var(--cizgi-ince);
  }

  .baslik-alani .ba-kap {
    padding-block-end: 0;
  }

  .baslik-alani .ba-alt,
  .baslik-alani .ba-satir {
    margin-block-end: var(--aralik-5);
  }
}

/* İç sayfa: 1024 altı H 23, üstü H 29; slogan ve imza aynı satırda; tanım yok (H11) */
.baslik-alani[data-boy="ic"] {
  --kilit-en: min(384px, 100%);
}

/* İmza slogan satırına sığmazsa (400 px altı) kendi satırına sağa yaslı düşer;
 * row-gap iki satırı 8 px ayırır, imza slogana basamak gibi yapışmaz (T3 revize 1). */
.baslik-alani[data-boy="ic"] .ba-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;
  column-gap: var(--aralik-4);
  row-gap: var(--aralik-2);
  margin-block-start: var(--aralik-3);
}

.baslik-alani[data-boy="ic"] .ba-satir .ba-slogan {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.baslik-alani[data-boy="ic"] .ba-satir .ba-imza {
  margin-inline-start: auto;
}

/* 1024 ve üstü: kilit ile araç düğmeleri aynı satırda. Kilit eni kapsayıcıdan
 * hesaplanır (araç düğmeleri için 13rem ayrılır), böylece slogan girintisi ile
 * kilit aynı eni kullanır; 1024 ile 1088 px arasında kilit 817 px'e sığmaz,
 * küçülür (1024'te 752, H 26,7) ve slogan yine wordmark'la hizalı kalır. Önceki
 * hâlde kilit ızgara sütununa göre, girinti kapsayıcıya göre çözülüyordu:
 * 1024'te slogan 7 px kayıktı (T3 revize 1, 1280 ölçümünde görünmüyordu). */
@media (min-width: 1024px) {
  .baslik-alani[data-boy="ic"] {
    --arac-pay: 13rem; /* araç düğmeleri (ölçülen 173 px) ve 16 px aralık (T3-S15) */
    --kilit-en: min(817px, 100% - var(--arac-pay));
  }

  .baslik-alani[data-boy="ic"] .ba-ust {
    display: grid;
    grid-template-columns: var(--kilit-en) auto;
    grid-template-areas: "kilit arac";
    justify-content: space-between;
    align-items: center;
    column-gap: var(--aralik-4);
  }

  .baslik-alani[data-boy="ic"] .ba-kilit {
    grid-area: kilit;
    inline-size: 100%; /* sütun zaten --kilit-en; burada % sütuna göre çözülürdü */
  }

  .baslik-alani[data-boy="ic"] .ba-arac {
    grid-area: arac;
  }

  .baslik-alani[data-boy="ic"] .ba-kap {
    padding-block-start: var(--aralik-4);
  }
}

.baslik-alani .ba-gezinme ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--aralik-5);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.baslik-alani .ba-gezinme a {
  display: flex;
  align-items: center;
  block-size: var(--cubuk-yuk);
  color: var(--renk-murekkep);
  text-decoration-line: none;
}

.baslik-alani .ba-gezinme a:hover {
  text-decoration-line: underline;
}

.baslik-alani .ba-gezinme a[aria-current="page"] {
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: var(--cizgi-kalin-en);
}

/* 1024 ile 1100 px arasında aralık 16 px (4.0) */
@media (min-width: 1024px) and (max-width: 1100px) {
  .baslik-alani .ba-gezinme ul {
    gap: var(--aralik-4);
  }
}

/* ------------------------------------------------------------------ */
/* Yapışkan çubuk (4.0, 6.4): büyük başlık görüntüden çıkınca belirir; */
/* 48 / 56 px; 150 ms saydamlık; JavaScript yoksa hidden.               */
/* ------------------------------------------------------------------ */
.yapiskan-cubuk {
  position: fixed;
  box-sizing: border-box;
  block-size: var(--cubuk-yuk);
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  background: var(--renk-kagit);
  border-block-end: var(--cizgi-ince);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 150ms linear,
    visibility 0s linear 150ms;
}

.yapiskan-cubuk[data-gorunur] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 150ms linear,
    visibility 0s;
}

.yapiskan-cubuk[hidden] {
  display: none;
}

.yapiskan-cubuk .ba-kap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  inline-size: var(--kapsayici);
  block-size: 100%;
  margin-inline: auto;
}

/* Kilit H 20 (en 334); sığmazsa kalan ene küçülür. 480 altında Menü dışındaki
 * düğmeler menüye geçer (pano T1 madde 5). L-04 güvenli alanı: ok ucu ile Menü
 * arasında en az 1 H. Bağlantı kutusu kilidi ve sağındaki 1 H'yi birlikte taşır
 * (svg eni = kutu / 1,0599; mobil kilitte H = en x 0,0599), kutu küçülünce
 * güvenli alan da onunla küçülür: 360 px'te kilit 260,4 (H 15,6), 320 px'te
 * 222,7 (H 13,3). T1'deki 268 px (H 16,1) aralığı 9 px bırakıyordu (T3 revize 1). */
.yapiskan-cubuk .ba-kilit {
  --kilit-en-cubuk: 334px; /* H 20 (YAPIM-PLANI 2.6 yapışkan çubuk) */
  --guvenli: 1.0599;
  display: block;
  flex: 0 1 calc(var(--kilit-en-cubuk) * var(--guvenli));
  min-inline-size: 0;
}

.yapiskan-cubuk .ba-kilit .kilit-svg {
  inline-size: calc(100% / var(--guvenli));
}

.yapiskan-cubuk .ba-arac .yalniz-genis {
  display: none;
}

.yapiskan-cubuk .ba-dugme {
  padding-inline: 0;
}

/* 480 ve üstü: kilit ile Ara arasında flex aralığı (8) ve Ara'nın iç boşluğu
 * (8 + ortalama) en az 24,8 px; çubukta H en çok 20, güvenli alan kendiliğinden
 * tutar (t3.py her genişlikte ölçer). */
@media (min-width: 480px) {
  .yapiskan-cubuk .ba-kap {
    gap: var(--aralik-2);
  }

  .yapiskan-cubuk .ba-kilit {
    flex-basis: var(--kilit-en-cubuk);
  }

  .yapiskan-cubuk .ba-kilit .kilit-svg {
    inline-size: 100%;
  }

  .yapiskan-cubuk .ba-arac .yalniz-genis {
    display: inline-flex;
  }

  .yapiskan-cubuk .ba-arac .yalniz-genis[hidden] {
    display: none;
  }

  .yapiskan-cubuk .ba-dugme {
    padding-inline: var(--aralik-2);
  }
}

@media (min-width: 1024px) {
  .yapiskan-cubuk {
    --cubuk-yuk: 3.5rem; /* 56 px */
  }
}

@media (prefers-reduced-motion: reduce) {
  .yapiskan-cubuk,
  .yapiskan-cubuk[data-gorunur] {
    transition: none;
  }

  .yapiskan-cubuk .kilit-svg *,
  .baslik-alani .kilit-svg * {
    transition: none !important;
  }
}