/* Şapkalı “â” Haber · Site düzeni (aşama 5)
 *
 * Bağımlılık: yazi/yazilar.css, belirtecler.css, baslik-alani.css. Renk değeri
 * yok; bütün renkler, aralıklar ve yazı boyları belirteçten (YAPIM-PLANI 2, 3).
 * Sayfalar: ana sayfa ve kahraman (4.1, 4.1a), haber detayı (4.2; düzen
 * tasarim/ornek-yazi.html), sabit sayfalar (4.4, 4.11, 4.12, 4.14), hata
 * sayfaları (4.16), alt bilgi (4.0). Kart, gölge, köşe, gradyan yok.
 */

/* ---------------------------------------------------------------- */
/* Ortak                                                             */
/* ---------------------------------------------------------------- */
.kap {
  inline-size: var(--kapsayici);
  margin-inline: auto;
}

.icerige-gec {
  position: absolute;
  inset-inline-start: var(--aralik-4);
  inset-block-start: calc(-1 * var(--aralik-9));
  padding: var(--aralik-2) var(--aralik-4);
  background: var(--renk-kagit);
  color: var(--renk-murekkep);
  z-index: 10;
}

.icerige-gec:focus-visible {
  inset-block-start: var(--aralik-2);
}

.ba-h1 {
  margin: 0;
  font: inherit;
}

.icerik {
  padding-block-end: var(--aralik-bolum);
}

.kursun {
  color: var(--renk-kursun);
}

/* Bölüm başı: 2 px mürekkep çizgi ve bölüm boşluğu (4.1) */
.bolum-basi {
  margin: 0 0 var(--aralik-5);
  padding-block-start: var(--aralik-4);
  border-block-start: var(--cizgi-kalin);
}

/* ---------------------------------------------------------------- */
/* Kahraman (4.1a, yerleşim A). Her iki temada koyu: bölüm koyu zeminin  */
/* değerlerini bant belirteçlerinden yerelde alır (MARKA-KITABI K-08:      */
/* zemin #121314, metin #ECECEA, künye #A3A5AA). data-tema kullanılmaz:    */
/* sayfanın teması (siyah dahil) yalnız <html>'de. Kırmızı yalnız odakta.  */
/* ---------------------------------------------------------------- */
.kahraman {
  color-scheme: dark;
  --renk-kagit: var(--renk-bant-zemin);
  --renk-murekkep: var(--renk-bant-metin);
  --renk-kursun: var(--renk-bant-tarih);
  --renk-cizgi: var(--renk-bant-cizgi);
  --renk-marka: #FF5C72;
  --renk-baglanti-ustu: var(--renk-murekkep);
  --renk-baglanti-ustu-kucuk: var(--renk-murekkep);
  /* Türeyen belirteçler yerelde yeniden (belirtecler.css 3.3 notu). */
  --cizgi-ince: var(--cizgi-ince-en) solid var(--renk-cizgi);
  --cizgi-not: var(--cizgi-kalin-en) solid var(--renk-murekkep);
  --odak: var(--odak-en) solid var(--renk-marka);
  background: var(--renk-kagit);
  color: var(--renk-murekkep);
  padding-block: var(--aralik-bolum);
  border-block: var(--cizgi-ince);
}

.kahraman .kap {
  display: grid;
  gap: var(--aralik-4);
}

.kahraman-foto {
  margin: 0;
}

.kahraman-foto img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--renk-cizgi);
}

.kahraman-foto figcaption,
.kahraman .alinti-kaynak {
  margin-block-start: var(--aralik-2);
  color: var(--renk-kursun);
}

.kahraman-metin {
  align-self: center;
}

.kahraman h2 {
  margin: 0;
  max-inline-size: 16em;
}

.kahraman .alinti {
  margin-block-start: var(--aralik-6);
  max-inline-size: var(--olcu-alinti);
}

.kahraman .alinti > blockquote {
  border-inline-start: var(--cizgi-not);
  font-style: normal; /* söz düz (MARKA-KITABI K-07); italik imzanın sesi */
}

/* Kahramanda kiremit ve kırmızı yok (K-08): bağlantı üzerine gelince mürekkep kalır. */
.kahraman a:hover:not(:focus-visible) {
  color: var(--renk-murekkep);
}

.kahraman .alinti p {
  margin: 0;
}

@media (min-width: 768px) {
  .kahraman .kap {
    grid-template-columns: 3fr 5fr;
    gap: var(--oluk);
  }
}

@media (min-width: 1024px) {
  .kahraman .kap {
    grid-template-columns: 5fr 7fr;
  }
}

/* ---------------------------------------------------------------- */
/* Ana sayfa: manşet ve liste (4.1, sade)                             */
/* ---------------------------------------------------------------- */
.ana {
  padding-block-start: var(--aralik-bolum);
}

.manset {
  padding-block-end: var(--aralik-6);
  border-block-end: var(--cizgi-kalin);
}

.manset h2,
.liste h3 {
  margin: 0;
}

.manset h2 {
  max-inline-size: var(--olcu-manset);
}

.manset a,
.liste a,
.son-eklenenler a {
  text-decoration-line: none;
}

.manset a:hover,
.liste a:hover,
.son-eklenenler a:hover {
  text-decoration-line: underline;
}

.manset .spot {
  margin: var(--aralik-4) 0 0;
  max-inline-size: var(--olcu-spot);
}

.meta {
  margin: var(--aralik-3) 0 0;
  color: var(--renk-kursun);
}

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.liste > li {
  padding-block: var(--aralik-5);
  border-block-end: var(--cizgi-ince);
}

.liste .spot {
  margin: var(--aralik-2) 0 0;
  max-inline-size: var(--olcu-spot);
}

.liste-bos {
  margin: 0;
  color: var(--renk-kursun);
}

@media (min-width: 1024px) {
  .liste {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--oluk);
  }
}

.bolum-baslik-satiri {
  margin-block-start: var(--aralik-bolum);
}

/* ---------------------------------------------------------------- */
/* Haber detayı (4.2; tasarim/ornek-yazi.html "Bir haber, baştan sona")   */
/* ---------------------------------------------------------------- */
.haber {
  max-inline-size: 50rem; /* 8 kolon: 800 px */
  padding-block-start: var(--aralik-7);
}

.haber .yol {
  margin: 0 0 var(--aralik-4);
  color: var(--renk-kursun);
}

.haber .tur {
  margin: 0 0 var(--aralik-3);
}

.haber h1 {
  margin: 0;
  max-inline-size: var(--olcu-h1);
}

.haber .spot {
  margin: var(--aralik-4) 0 0;
  max-inline-size: var(--olcu-spot);
}

.haber .meta {
  margin-block-start: var(--aralik-5);
}

.haber .meta p {
  margin: 0;
}

.not {
  margin: var(--aralik-5) 0 0;
  padding-inline-start: var(--aralik-4);
  border-inline-start: var(--cizgi-not);
  max-inline-size: var(--olcu-kayit);
}

.not-kirmizi {
  border-inline-start: var(--cizgi-kirmizi);
}

.haber .govde {
  max-inline-size: var(--olcu-govde);
  margin-block-start: var(--aralik-6);
}

.haber .govde p,
.haber .govde ul,
.haber .govde ol {
  margin: 0 0 1em;
}

.haber .govde h2,
.haber .govde h3 {
  margin: 1.6em 0 0.5em;
}

.haber .govde .alinti {
  margin: 0 0 1em;
}

.haber .govde .alinti > blockquote {
  max-inline-size: var(--olcu-alinti);
}

.haber .govde blockquote p {
  margin: 0;
}

.haber .govde figure {
  margin: 0 0 1em;
}

.haber .govde img {
  max-inline-size: 100%;
  block-size: auto;
}

.kaynak-no {
  text-decoration-line: none;
  color: var(--renk-kursun);
}

.haber-bolumu {
  margin-block-start: var(--aralik-7);
  padding-block-start: var(--aralik-4);
  border-block-start: var(--cizgi-kalin);
  max-inline-size: var(--olcu-govde);
}

.haber-bolumu h2 {
  margin: 0 0 var(--aralik-4);
}

.haber-bolumu p,
.haber-bolumu ul,
.haber-bolumu ol {
  margin: 0 0 var(--aralik-4);
}

.haber-bolumu ul {
  padding-inline-start: 1.2em;
}

.dayanaklar,
.kaynaklar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dayanaklar > li,
.kaynaklar > li {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  column-gap: var(--aralik-2);
  padding-block: var(--aralik-3);
  border-block-end: var(--cizgi-ince);
  max-inline-size: var(--olcu-dayanak);
}

.dayanaklar .no,
.kaynaklar .no {
  color: var(--renk-kursun);
}

.dayanaklar p,
.kaynaklar p {
  margin: 0;
}

.etiket {
  display: inline-block;
  margin-inline-end: var(--aralik-2);
}

.etiket-belgeli::before { content: "● "; }
.etiket-beyana_dayali::before { content: "◐ "; }
.etiket-iddia::before { content: "○ "; }

.kaynaklar :target,
.kaynaklar li:target {
  outline: var(--odak);
}

.fotograf-kaynaklari {
  margin-block-start: var(--aralik-5);
  color: var(--renk-kursun);
}

.haber .yz-notu {
  margin: 1.6em 0 0;
  max-inline-size: var(--olcu-kayit);
}

.haber .imza-bitisi {
  margin-block-end: 0;
  margin-inline: 0;
  max-inline-size: var(--olcu-govde);
}

/* H96: imzanın önünde metin boyunda işaret. */
.imza-isaret {
  display: inline-block;
  block-size: 0.9em;
  inline-size: auto;
  margin-inline-end: 0.15em;
  vertical-align: -0.08em;
}

.imza-isaret .marka {
  fill: var(--renk-marka);
}

.kayit {
  margin-block-start: var(--aralik-7);
  max-inline-size: var(--olcu-kayit);
}

.kayit h2 {
  margin: 0 0 var(--aralik-3);
}

.kayit ol {
  margin: 0 0 var(--aralik-5);
  padding-inline-start: 1.2em;
}

.siyah-bant {
  margin: 0;
  font-family: var(--aile-sans);
  padding: var(--aralik-3) var(--kenar);
  background: var(--renk-bant-zemin);
  color: var(--renk-bant-metin);
  border-block-end: var(--cizgi-ince-en) solid var(--renk-bant-cizgi);
}

/* ---------------------------------------------------------------- */
/* Sabit sayfalar ve hata sayfaları                                  */
/* ---------------------------------------------------------------- */
.sabit {
  padding-block-start: var(--aralik-7);
}

.sabit > * {
  max-inline-size: var(--olcu-govde);
}

.sabit h1 {
  margin: 0 0 var(--aralik-6);
  max-inline-size: var(--olcu-sayfa-basligi);
}

.sabit h2 {
  margin: var(--aralik-7) 0 var(--aralik-3);
}

.sabit h3 {
  margin: var(--aralik-6) 0 var(--aralik-2);
}

.sabit p,
.sabit ul,
.sabit ol {
  margin: 0 0 1em;
}

.sabit ul,
.sabit ol {
  padding-inline-start: 1.2em;
}

.sabit .tablo-kap {
  max-inline-size: 100%;
  overflow-x: auto;
  margin-block-end: 1em;
}

.sabit table {
  border-collapse: collapse;
  inline-size: 100%;
}

.sabit th,
.sabit td {
  text-align: start;
  vertical-align: top;
  padding: var(--aralik-2) var(--aralik-3) var(--aralik-2) 0;
  border-block-end: var(--cizgi-ince);
}

.sabit th {
  font-family: var(--aile-sans);
  font-weight: 600;
}

/* Atatürk alanı (sabit ve hata sayfaları; defter H62, MARKA-KITABI K-08):
   kahramanla aynı koyu bant, kırmızı ve kiremit yok; fotoğraf solda, söz sağda. */
.ataturk-alani {
  color-scheme: dark;
  --renk-kagit: var(--renk-bant-zemin);
  --renk-murekkep: var(--renk-bant-metin);
  --renk-kursun: var(--renk-bant-tarih);
  --renk-cizgi: var(--renk-bant-cizgi);
  --renk-marka: #FF5C72;
  --renk-baglanti-ustu: var(--renk-murekkep);
  --renk-baglanti-ustu-kucuk: var(--renk-murekkep);
  --cizgi-ince: var(--cizgi-ince-en) solid var(--renk-cizgi);
  --cizgi-not: var(--cizgi-kalin-en) solid var(--renk-murekkep);
  --odak: var(--odak-en) solid var(--renk-marka);
  display: grid;
  gap: var(--aralik-4);
  margin-block: var(--aralik-7);
  padding: var(--aralik-5);
  background: var(--renk-kagit);
  color: var(--renk-murekkep);
}

.sabit > .ataturk-alani:first-child {
  margin-block-start: 0;
}

.ataturk-foto {
  margin: 0;
  max-inline-size: 20rem;
}

.ataturk-foto img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--renk-cizgi);
}

.ataturk-foto figcaption,
.ataturk-alani .alinti-kaynak {
  margin-block-start: var(--aralik-2);
  color: var(--renk-kursun);
}

.ataturk-metin {
  align-self: center;
}

.ataturk-alani .alinti {
  margin: 0;
  max-inline-size: var(--olcu-alinti);
}

.ataturk-alani .alinti > blockquote {
  border-inline-start: var(--cizgi-not);
  font-style: normal; /* söz düz (K-07) */
}

.ataturk-alani a:hover:not(:focus-visible) {
  color: var(--renk-murekkep);
}

.ataturk-alani .alinti > blockquote p {
  margin: 0;
}

@media (min-width: 768px) {
  .ataturk-alani:has(.ataturk-foto) {
    grid-template-columns: minmax(0, 20rem) 1fr;
    gap: var(--oluk);
  }
}

/* Talep formu (YAPIM-PLANI 5.4) */
.form {
  display: grid;
  gap: var(--aralik-4);
  max-inline-size: var(--olcu-govde);
}

.form p {
  margin: 0;
  display: grid;
  gap: var(--aralik-2);
}

.form p[hidden] {
  display: none;
}

.form input,
.form select,
.form textarea {
  border: var(--cizgi-form);
  background: var(--renk-kagit);
  color: var(--renk-murekkep);
  padding: var(--aralik-3);
  min-block-size: 44px;
  box-sizing: border-box;
  inline-size: 100%;
  font: inherit;
}

.form button {
  justify-self: start;
  min-block-size: 44px;
  padding-inline: var(--aralik-5);
  border: var(--cizgi-kalin);
  background: var(--renk-murekkep);
  color: var(--renk-kagit);
  cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* Alt bilgi (4.0)                                                   */
/* ---------------------------------------------------------------- */
.alt-bilgi {
  border-block-start: var(--cizgi-kalin);
  padding-block: var(--aralik-7) var(--aralik-6);
}

.alt-bilgi .ab-ad,
.alt-bilgi .ab-slogan {
  margin: 0;
}

.alt-bilgi .ab-ad a {
  text-decoration-line: none;
}

.ab-sutunlar {
  display: grid;
  gap: var(--aralik-6);
  margin-block: var(--aralik-6);
}

.ab-sutunlar h2 {
  margin: 0 0 var(--aralik-2);
}

.ab-sutunlar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--aralik-2);
}

@media (min-width: 768px) {
  .ab-sutunlar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ab-son {
  display: grid;
  gap: var(--aralik-2);
  padding-block-start: var(--aralik-4);
  border-block-start: var(--cizgi-ince);
  color: var(--renk-kursun);
}

.ab-son p {
  margin: 0;
}

@media (min-width: 768px) {
  .ab-son {
    grid-template-columns: 1fr auto;
  }
}

@media print {
  .kahraman-foto,
  .yapiskan-cubuk,
  .ba-arac {
    display: none;
  }
}

/* ---------------------------------------------- gövde medyası (görsel, video)
   icerik-bicimi.js `medyaSarmali`: figure.belge-medya. Görsel tam metin
   genişliğinde; `genis` yuvası metin sütununu bir miktar aşar. Video önyüzü
   tıklanana kadar bağlantıdır: sayfa açılışında YouTube'a istek gitmez. */
.haber .govde .belge-medya {
  margin: var(--aralik-6) 0;
}

.haber .govde .belge-medya--en-genis {
  max-inline-size: min(56rem, 100%);
}

.belge-medya img,
.belge-medya__gorsel {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--renk-cizgi);
}

.belge-medya__altyazi {
  margin-block-start: var(--aralik-2);
  max-inline-size: var(--olcu-altyazi);
  font: var(--yazi-altyazi-agirlik) var(--yazi-altyazi-boy) / var(--yazi-altyazi-satir) var(--yazi-altyazi-aile);
  color: var(--renk-kursun);
}

.belge-medya__kunye {
  display: block;
  margin-block-start: var(--aralik-1);
}

.video-onyuz {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--aralik-1);
  aspect-ratio: 16 / 9;
  padding: var(--aralik-4);
  background: var(--renk-murekkep);
  color: var(--renk-kagit);
  text-decoration: none;
}

.video-onyuz:focus-visible {
  outline: var(--odak);
  outline-offset: var(--odak-aralik);
}

.video-onyuz__bos {
  position: absolute;
  inset: 0;
}

.video-onyuz__oynat {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 4rem;
  block-size: 4rem;
  margin: -2rem 0 0 -2rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.video-onyuz__oynat::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 54%;
  border-block: 0.6rem solid transparent;
  border-inline-start: 1rem solid currentColor;
  transform: translate(-50%, -50%);
}

.video-onyuz__ad {
  position: relative;
  font-family: var(--aile-sans);
  font-weight: 600;
}

.video-onyuz__kaynak {
  position: relative;
  font: var(--yazi-altyazi-agirlik) var(--yazi-altyazi-boy) / var(--yazi-altyazi-satir) var(--yazi-altyazi-aile);
}

.video-cerceve {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}