/* ============================================================
   Oymadere Köyü — sayfa biçimleri
   Bu dosyada ham renk kodu ya da sabit px boşluk YOKTUR.
   Bütün değerler tokens.css içindeki var() değişkenlerinden gelir.
   Mobil öncelikli: önce telefon, sonra @media ile büyür.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Doku + zemin: kagit hissi. Dokusuz duz bir zemin, ne kadar sicak
     olursa olsun ekranda "boyanmis alan" gibi duruyordu. */
  background: var(--doku-kagit) repeat, var(--renk-zemin);
  color: var(--renk-metin);
  font-family: var(--yazi-govde);
  font-size: var(--olcu-3);
  line-height: var(--satir-orta);
}

h1, h2, h3 { font-family: var(--yazi-baslik); line-height: var(--satir-sik); margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: var(--odak-mesafe); }

/* Klavyeyle gezenler nerede olduklarını görsün. Odak halkasını
   asla kaldırmıyoruz; erişilebilirliğin en temel maddesi. */
:focus-visible {
  outline: var(--odak-kalinlik) solid var(--renk-odak);
  outline-offset: var(--odak-mesafe);
}

/* Ekran okuyucuya görünür, göze görünmez */
.gizli-yazi {
  /* 1px: ekran okuyucuya görünür kalması için standart kalıp, ölçü değil */
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Klavye kullanıcısı menüyü atlayıp içeriğe geçebilsin */
.atla {
  position: absolute; left: var(--bosluk-2); top: calc(var(--bosluk-2) * -10);
  z-index: var(--kat-ustu);
  background: var(--renk-vurgu); color: var(--renk-vurgu-metin);
  padding: var(--bosluk-3) var(--bosluk-4);
  font-weight: var(--kalinlik-kalin);
  transition: top var(--sure-kisa) var(--yumusama);
}
.atla:focus { top: var(--bosluk-2); }

.kap {
  max-width: var(--genislik-sayfa);
  margin-inline: auto;
  padding-inline: var(--bosluk-4);
}

/* ---------------------------------------------------- üst şerit */
/* Gazete kunyesi: ince ust cizgi, seyrek buyuk harf, altta ayirici.
   Sayfanin en ustunde "bu bir yayin" duygusu veriyor. */
.ust-serit {
  font-size: var(--olcu-1);
  letter-spacing: var(--harf-aralik-genis);
  text-transform: uppercase;
  color: var(--renk-metin-soluk);
  padding-block: var(--bosluk-3);
  border-block-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
  display: flex; justify-content: space-between; gap: var(--bosluk-3);
}
.ust-serit__dernek { display: none; }

/* ---------------------------------------------------- başlık */
/* Telefonda amblem + yazi + hava kutusu tek satira sigmiyordu: 390 piksel
   ekranda kaba 358, amblem 64 ve hava kutusu ~170 piksel alinca YAZIYA 92
   PIKSEL kaliyordu. Sonucta "Oymadere Koyu" ikiye, alt basligi dorde
   sariyor, blok dagilmis gorunuyordu. Artik sariyor: amblem ve yazi ust
   satirda, hava kutusu kendi satirinda tam genislikte. */
.basagi {
  display: flex; align-items: center; gap: var(--bosluk-4); flex-wrap: wrap;
  border-top: var(--cizgi-kalin) solid var(--renk-cizgi);
  padding-block: var(--bosluk-4);
}
.basagi__amblem { width: 4rem; height: 4rem; object-fit: contain; flex: none; }
.basagi__amblem--koyu { display: none; }
.basagi__yazi { display: flex; flex-direction: column; gap: var(--bosluk-1); min-width: 0; flex: 1 1 10rem; }
/* Telefonda olcu-6 (28px): olcu-7 ile "Oymadere Koyu" tek satira sigmiyordu.
   Genis ekranda asagida olcu-8'e cikiyor. */
/* Baglanti oldugu icin dokunma hedefi en az 44px olmali (WCAG 2.5.8,
   Apple HIG). Olculdu: 278x41 idi. Yazi boyutunu buyutmeden kutuyu
   buyutuyoruz. */
/* Sitenin adi SERIF ve buyuk.
   Onceden font-family verilmedigi icin govde yazisini (Fira Sans) miras
   aliyordu: kalin, sans-serif bir baslik. Sitenin display fontu Cormorant
   Garamond'du ve baslikta hic kullanilmiyordu -- "hazir tema" hissinin
   en buyuk sebebi buydu. Artik yillik kapagi gibi: serif, buyuk, sikisik. */
.basagi__ad {
  font-family: var(--yazi-baslik);
  /* Telefonda olcu-7: olcu-8 ile "Oymadere Koyu" ikiye sariyor ve
     ekranin ustunde 160 piksel yer kapliyordu. Genis ekranda olcu-8. */
  font-size: var(--olcu-7); font-weight: var(--kalinlik-agir);
  line-height: var(--satir-sik); letter-spacing: -.015em;
  min-block-size: var(--dokunma-hedefi); display: flex; align-items: center;
}
/* text-wrap: balance — telefonda "Kultur ve Yardimlasma Dernegi ·" satir
   sonunda ayracla kalip "OYDER" tek basina alt satira dusuyordu. Balance
   iki satiri esitliyor. Desteklemeyen tarayicida eski davranis suruyor. */
.basagi__alt { font-family: var(--yazi-baslik); font-size: var(--olcu-4); color: var(--renk-vurgu); text-wrap: balance; }
/* Telefonda gizli: ust seritte zaten "SIVAS · HAFIK" yaziyor ve dernegin
   kurulus yili alt bilgide de var. Dar ekranda bu satir yalnizca yer
   kapliyordu. Genis ekranda geri geliyor. */
.basagi__not { font-size: var(--olcu-2); color: var(--renk-metin-soluk); display: none; }

@media (prefers-color-scheme: dark) {
  .basagi__amblem--acik { display: none; }
  .basagi__amblem--koyu { display: block; }
}

/* ---------------------------------------------------- hava durumu */
.hava {
  display: flex; align-items: center; gap: var(--bosluk-3);
  border: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
  padding: var(--bosluk-2) var(--bosluk-3);
  margin-block-end: 0;
  flex: 1 0 100%;          /* telefonda kendi satiri; genis ekranda sifirlaniyor */
}
.hava__yazi { display: flex; flex-direction: column; }
/* "OYMADERE · SU AN" telefonda gizli: site zaten koyun sitesi ve hava
   kutusunun su ani gosterdigi belli. Uc satirlik kutu ikiye iniyor. */
.hava__yer {
  font-size: var(--olcu-1); letter-spacing: var(--harf-aralik-genis);
  text-transform: uppercase; color: var(--renk-metin-soluk);
  white-space: nowrap; display: none;
}
.hava__olcum { display: flex; align-items: baseline; gap: var(--bosluk-2); flex-wrap: wrap; }
.hava__derece { font-family: var(--yazi-baslik); font-size: var(--olcu-6); font-weight: var(--kalinlik-kalin); }
.hava__durum { font-size: var(--olcu-2); color: var(--renk-metin-soluk); }
/* Telefonda gizli: hava kutusu ekranin ustunde ~110 piksel yer kapliyordu
   ve "en yuksek / en dusuk" bir koy sitesinde ikincil bilgi. Su anki
   derece ve durum kaliyor. Genis ekranda geri geliyor. */
.hava__aralik { font-size: var(--olcu-1); color: var(--renk-metin-soluk); display: none; }

.hava__gunes { transform-box: fill-box; transform-origin: center; animation: hava-don 26s linear infinite; }
.hava__isin  { animation: hava-nefes 3.4s ease-in-out infinite; }
.hava__bulut { transform-box: fill-box; animation: hava-suzul 7s ease-in-out infinite; }
@keyframes hava-don    { to { transform: rotate(360deg); } }
@keyframes hava-nefes  { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes hava-suzul  { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(2.5px); } }

/* ---------------------------------------------------- menü */
/* Menu artik DOLU YESIL BIR SERIT DEGIL.
   Tam genislikte dolu renkli bir menu cubugu, hazir temalarin en belirgin
   isareti; sayfanin kalanini editoryal hale getirince tek basina sirittiyor.
   Yerine yillik/gazete duzeni: kagit zemin, ustte ve altta cizgi, kucuk
   harfli seyrek yazi. Bulundugun sayfa altindan kalin bir cizgiyle
   isaretleniyor -- renk yerine cizgi, cunku renk tek basina bilgi
   tasimamali (WCAG 1.4.1). */
.menu {
  background: transparent;
  border-block-start: var(--cizgi-kalin) solid var(--renk-vurgu);
  border-block-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
}
/* Telefonda SARIYOR, kaydirmiyordu. Eskiden yatay kaydirmaliydi ve
   ekranin sagindan "Koyun T..." diye YARIM BIR KELIMEYLE kesiliyordu;
   kaydirilabilir oldugu belli olmadigi icin son iki madde yok gibi
   duruyordu. Hedef kitle yasli, gizli kaydirmaya guvenilmiyor. */
.menu__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  max-width: var(--genislik-sayfa); margin-inline: auto;
}
.menu__liste::-webkit-scrollbar { display: none; }
.menu__bag {
  display: flex; align-items: center; white-space: nowrap;
  /* Telefonda menu iki satira sariyor; 52 yerine 44 (WCAG 2.5.8 asgarisi,
     Apple HIG 44pt) iki satirda 32 piksel kazandiriyor. Genis ekranda
     tek satir oldugu icin asagida 52'ye donuyor. */
  min-height: var(--dokunma-hedefi);
  padding-inline: var(--bosluk-4);
  /* Yesil MUREKKEP olarak: zemin boyamiyor, yazinin kendisi yesil.
     Bulunulan sayfa hem koyu mürekkeple hem alttan kalin cizgiyle
     isaretleniyor -- renk tek basina bilgi tasimasin (WCAG 1.4.1). */
  color: var(--renk-vurgu);
  font-size: var(--olcu-2); font-weight: var(--kalinlik-kalin);
  letter-spacing: var(--harf-aralik-genis); text-transform: uppercase;
  border-block-end: var(--odak-kalinlik) solid transparent;
  transition: border-color var(--sure-kisa) var(--yumusama);
}
.menu__bag:hover { text-decoration: none; border-block-end-color: var(--renk-cizgi-soluk); }
.menu__bag--acik {
  color: var(--renk-metin); font-weight: var(--kalinlik-agir);
  border-block-end-color: var(--renk-vurgu);
}

/* ---------------------------------------------------- kuşak (ana sayfa) */
.kusak {
  position: relative; overflow: hidden;
  /* Telefonda 16/9: dar ekranda daha yatik bir seritten geriye ince bir
     dilim kalirdi. Genis ekranda asagida alcaltiliyor. */
  aspect-ratio: 16 / 9;
  background: var(--renk-bos-1);
  border-block-end: var(--cizgi-kalin) solid var(--renk-cizgi);
}
.kusak__slayt {
  position: absolute; inset: 0; opacity: 0;
  animation-iteration-count: infinite; animation-timing-function: ease;
}
.kusak__slayt img { width: 100%; height: 100%; object-fit: cover; }
.kusak__noktalar {
  position: absolute; inset-inline-end: var(--bosluk-4); inset-block-end: var(--bosluk-3);
  display: flex; gap: var(--bosluk-2); color: var(--renk-nokta); mix-blend-mode: difference;
}
.kusak__nokta {
  width: var(--bosluk-2); height: var(--bosluk-2); border-radius: 50%;
  background: currentColor; opacity: .4;
  animation-iteration-count: infinite; animation-timing-function: ease;
}

/* Tek fotograf: hic donmesin, oylece dursun. */
.kusak--1 .kusak__slayt { opacity: 1; animation: none; }
.kusak--1 .kusak__noktalar { display: none; }

/* Iki ile alti arasi. Serit panelden yonetiliyor ve kac fotograf
   konacagi bilinmiyor; bu yuzden gecisler slayt SAYISINA gore yaziliyor.
   Onceden tam uc slayta gore sabit gecikmeler vardi, sahibi dorduncuyu
   yukleyince sonuncusu hic gorunmezdi. Her slayt 6 saniye duruyor,
   dongu = 6 x slayt sayisi. Sablon .kusak--<sayi> sinifini basiyor.
   Alti fotograftan sonrasi sablonda kesiliyor: bir koy sayfasinda ondan
   fazlasi zaten donup durmaz. */
@keyframes kusak-2 {
  0%, 45.0% { opacity: 1; }
  50.0%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kusak-nokta-2 {
  0%, 45.0% { opacity: 1; }
  50.0%, 95% { opacity: .4; }
  100% { opacity: 1; }
}
.kusak--2 .kusak__slayt { animation-name: kusak-2; animation-duration: 12s; }
.kusak--2 .kusak__nokta { animation-name: kusak-nokta-2; animation-duration: 12s; }
.kusak--2 .kusak__slayt:nth-child(1), .kusak--2 .kusak__nokta:nth-child(1) { animation-delay: 0s; }
.kusak--2 .kusak__slayt:nth-child(2), .kusak--2 .kusak__nokta:nth-child(2) { animation-delay: -6s; }

@keyframes kusak-3 {
  0%, 28.3% { opacity: 1; }
  33.3%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kusak-nokta-3 {
  0%, 28.3% { opacity: 1; }
  33.3%, 95% { opacity: .4; }
  100% { opacity: 1; }
}
.kusak--3 .kusak__slayt { animation-name: kusak-3; animation-duration: 18s; }
.kusak--3 .kusak__nokta { animation-name: kusak-nokta-3; animation-duration: 18s; }
.kusak--3 .kusak__slayt:nth-child(1), .kusak--3 .kusak__nokta:nth-child(1) { animation-delay: 0s; }
.kusak--3 .kusak__slayt:nth-child(2), .kusak--3 .kusak__nokta:nth-child(2) { animation-delay: -6s; }
.kusak--3 .kusak__slayt:nth-child(3), .kusak--3 .kusak__nokta:nth-child(3) { animation-delay: -12s; }

@keyframes kusak-4 {
  0%, 20.0% { opacity: 1; }
  25.0%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kusak-nokta-4 {
  0%, 20.0% { opacity: 1; }
  25.0%, 95% { opacity: .4; }
  100% { opacity: 1; }
}
.kusak--4 .kusak__slayt { animation-name: kusak-4; animation-duration: 24s; }
.kusak--4 .kusak__nokta { animation-name: kusak-nokta-4; animation-duration: 24s; }
.kusak--4 .kusak__slayt:nth-child(1), .kusak--4 .kusak__nokta:nth-child(1) { animation-delay: 0s; }
.kusak--4 .kusak__slayt:nth-child(2), .kusak--4 .kusak__nokta:nth-child(2) { animation-delay: -6s; }
.kusak--4 .kusak__slayt:nth-child(3), .kusak--4 .kusak__nokta:nth-child(3) { animation-delay: -12s; }
.kusak--4 .kusak__slayt:nth-child(4), .kusak--4 .kusak__nokta:nth-child(4) { animation-delay: -18s; }

@keyframes kusak-5 {
  0%, 15.0% { opacity: 1; }
  20.0%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kusak-nokta-5 {
  0%, 15.0% { opacity: 1; }
  20.0%, 95% { opacity: .4; }
  100% { opacity: 1; }
}
.kusak--5 .kusak__slayt { animation-name: kusak-5; animation-duration: 30s; }
.kusak--5 .kusak__nokta { animation-name: kusak-nokta-5; animation-duration: 30s; }
.kusak--5 .kusak__slayt:nth-child(1), .kusak--5 .kusak__nokta:nth-child(1) { animation-delay: 0s; }
.kusak--5 .kusak__slayt:nth-child(2), .kusak--5 .kusak__nokta:nth-child(2) { animation-delay: -6s; }
.kusak--5 .kusak__slayt:nth-child(3), .kusak--5 .kusak__nokta:nth-child(3) { animation-delay: -12s; }
.kusak--5 .kusak__slayt:nth-child(4), .kusak--5 .kusak__nokta:nth-child(4) { animation-delay: -18s; }
.kusak--5 .kusak__slayt:nth-child(5), .kusak--5 .kusak__nokta:nth-child(5) { animation-delay: -24s; }

@keyframes kusak-6 {
  0%, 11.7% { opacity: 1; }
  16.7%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kusak-nokta-6 {
  0%, 11.7% { opacity: 1; }
  16.7%, 95% { opacity: .4; }
  100% { opacity: 1; }
}
.kusak--6 .kusak__slayt { animation-name: kusak-6; animation-duration: 36s; }
.kusak--6 .kusak__nokta { animation-name: kusak-nokta-6; animation-duration: 36s; }
.kusak--6 .kusak__slayt:nth-child(1), .kusak--6 .kusak__nokta:nth-child(1) { animation-delay: 0s; }
.kusak--6 .kusak__slayt:nth-child(2), .kusak--6 .kusak__nokta:nth-child(2) { animation-delay: -6s; }
.kusak--6 .kusak__slayt:nth-child(3), .kusak--6 .kusak__nokta:nth-child(3) { animation-delay: -12s; }
.kusak--6 .kusak__slayt:nth-child(4), .kusak--6 .kusak__nokta:nth-child(4) { animation-delay: -18s; }
.kusak--6 .kusak__slayt:nth-child(5), .kusak--6 .kusak__nokta:nth-child(5) { animation-delay: -24s; }
.kusak--6 .kusak__slayt:nth-child(6), .kusak--6 .kusak__nokta:nth-child(6) { animation-delay: -30s; }

/* ---------------------------------------------------- yıl şeridi */
.yil-serit {
  display: flex; overflow-x: auto; scrollbar-width: none;
  border-block-start: var(--cizgi-kalin) solid var(--renk-vurgu);
  border-block-end: var(--cizgi-ince) solid var(--renk-cizgi);
}
.yil-serit::-webkit-scrollbar { display: none; }
.yil-serit__oge {
  flex: none; min-width: 5.25rem; min-height: var(--dokunma-hedefi);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bosluk-1); padding: var(--bosluk-3) var(--bosluk-4);
  border-inline-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
}
.yil-serit__yil { font-family: var(--yazi-baslik); font-size: var(--olcu-6); font-weight: var(--kalinlik-kalin); }
/* nowrap: "20 foto" iki satira sariyor, "33 foto" sarmiyordu; sarmayan
   hucreler asagi kayip serit tirtikli goruniyordu. */
.yil-serit__sayi { font-size: var(--olcu-1); color: var(--renk-metin-soluk); white-space: nowrap; }

/* ---------------------------------------------------- sayfa gövdesi */
.sayfa { padding-block: var(--bosluk-5) var(--bosluk-7); display: flex; flex-direction: column; gap: var(--bosluk-5); }
.sayfa--bitisik { padding-block-end: 0; }        /* altındaki bölümle birleşir */
.ortala { text-align: center; }
.giris-metni { font-family: var(--yazi-baslik); font-size: var(--olcu-4); line-height: var(--satir-genis); }
.kutu__govde > * + * { margin-block-start: var(--bosluk-4); }
.sayfa__basi {
  display: flex; flex-direction: column; gap: var(--bosluk-1);
  border-block-end: var(--cizgi-kalin) solid var(--renk-cizgi);
  padding-block-end: var(--bosluk-3);
}
.sayfa__baslik {
  font-size: var(--olcu-7); font-weight: var(--kalinlik-agir);
  line-height: var(--satir-sik); letter-spacing: -.015em;
}
.sayfa__alt { font-size: var(--olcu-2); color: var(--renk-metin-soluk); }

.iz { font-size: var(--olcu-2); color: var(--renk-metin-soluk); display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-2); }
.iz a, .iz > span { min-height: var(--dokunma-hedefi); display: inline-flex; align-items: center; }

/* ---------------------------------------------------- bantlı kutu */
/* Bölümler artık ÇERÇEVELİ KUTU DEĞİL.
   Eskiden her bölüm 1 piksel çerçeveli bir kutuydu ve tepesinde dolu
   yeşil bir şerit vardı. Ana sayfada bu şeritlerden dört tane alt alta
   dizilince site "hazır tema" gibi duruyordu: her bölüm aynı ağırlıkta,
   hiyerarşi yok, sayfa kutulara bölünmüş.

   Yerine gazete/yıllık düzeni: kalın bir çizgi, üstünde küçük harfli
   bölüm etiketi, altında serif başlık. Zemin kâğıt olarak kalıyor, içerik
   üstünde duruyor. Vurgu rengi artık zemin boyamak için değil, yalnızca
   bağlantı ve etkileşim için kullanılıyor. */
.kutu { display: flex; flex-direction: column; gap: var(--bosluk-4); }
/* Bolum basligi: gazete bolum ayraci.
   Ustte ince, altta kalin cizgi (cift kural); baslik Cormorant ve buyuk;
   etiket yesil murekkeple ve numarali. Numara ::before ile sayaçtan
   geliyor, sablonda elle yazilmiyor. */
.kutu__baslik {
  margin: 0; padding-block: var(--bosluk-2);
  border-block-start: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
  border-block-end: var(--cizgi-kalin) solid var(--renk-cizgi);
  font-family: var(--yazi-baslik);
  font-size: var(--olcu-7); font-weight: var(--kalinlik-agir);
  line-height: var(--satir-sik); letter-spacing: -.01em;
  color: var(--renk-metin);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--bosluk-3); flex-wrap: wrap;
}
/* Bölüm etiketi: "ARŞİV", "VİDEO" gibi. Küçük, seyrek harfli, soluk —
   başlığın üstünde durur ve okuyucuya nerede olduğunu söyler. */
.kutu__etiket {
  display: flex; align-items: center; gap: var(--bosluk-2);
  font-family: var(--yazi-govde); font-size: var(--olcu-1);
  letter-spacing: var(--harf-aralik-genis); text-transform: uppercase;
  color: var(--renk-vurgu); font-weight: var(--kalinlik-agir);
  margin-block-end: var(--bosluk-1);
}
/* Bolum numarasi: 01, 02, 03 ... Sayac sayfa basinda sifirlaniyor ve her
   bolum basliginda bir artiyor; sablonda numara yazili degil, bolum
   eklenip cikarilinca kendiliginden duzeliyor. */
main { counter-reset: bolum; }
.kutu__etiket::before {
  counter-increment: bolum;
  content: counter(bolum, decimal-leading-zero);
  font-family: var(--yazi-baslik); font-size: var(--olcu-3);
  font-weight: var(--kalinlik-agir); letter-spacing: 0;
  color: var(--renk-vurgu-2);
}
/* Etiketten sonra ince bir kural: gazete bolum ayraci gorunumu */
.kutu__etiket::after {
  content: ""; flex: 1; block-size: var(--cizgi-ince);
  background: var(--renk-cizgi-soluk);
}
/* WCAG 2.2 (2.5.8): hedef en az 24x24. Bu bağlantı 18px yüksekliğindeydi. */
.kutu__baglanti {
  font-family: var(--yazi-govde); font-size: var(--olcu-2);
  font-weight: var(--kalinlik-orta);
  color: var(--renk-vurgu-2);
  text-decoration: underline; text-underline-offset: var(--odak-mesafe);
  min-height: var(--dokunma-hedefi); display: inline-flex; align-items: center;
}
.kutu__govde { padding: 0; }
/* Taziye kutusu tek istisna: gözle ayrılması gereken tek bölüm o.
   Çerçeve ve soluk zemin, dolu şerit değil. */
.kutu--taziye {
  border-inline-start: var(--cizgi-kalin) solid var(--renk-metin);
  padding-inline-start: var(--bosluk-4);
}

/* ---------------------------------------------------- galeri kartı */
.kart-izgara {
  display: grid; gap: var(--bosluk-4);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.galeri-kart { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.galeri-kart__kapak {
  aspect-ratio: 4 / 3; display: block; overflow: hidden;
  border: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
  background: var(--renk-bos-1);
}
/* Fotograf uzerine gelince hafifce yaklassin: kartin tiklanabilir oldugunu
   soyluyor. Yalnizca transform, yani yeniden yerlesim yok. */
.galeri-kart__kapak img { transition: transform var(--sure-orta) var(--yumusama); }
.galeri-kart:hover .galeri-kart__kapak img { transform: scale(1.03); }
.galeri-kart:hover .galeri-kart__baslik { text-decoration: underline; text-underline-offset: var(--odak-mesafe); }
.galeri-kart__kapak img { width: 100%; height: 100%; object-fit: cover; }
.galeri-kart__baslik { font-family: var(--yazi-baslik); font-size: var(--olcu-5); font-weight: var(--kalinlik-kalin); }
.galeri-kart__sayi { font-size: var(--olcu-2); font-weight: var(--kalinlik-kalin); color: var(--renk-vurgu-2); }
.galeri-kart__not { font-size: var(--olcu-2); color: var(--renk-metin-soluk); }

/* yıl bandı: yıl solda dar bir rayda, galeriler yanında akar */
.yil-bant { border: var(--cizgi-ince) solid var(--renk-cizgi); background: var(--renk-kart); }
.yil-bant__yil {
  margin: 0; padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--renk-vurgu); color: var(--renk-vurgu-metin);
  font-size: var(--olcu-6); font-weight: var(--kalinlik-kalin);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bosluk-3);
}
.yil-bant__ozet { font-family: var(--yazi-govde); font-size: var(--olcu-2); font-weight: var(--kalinlik-normal); }
.yil-bant__icerik { padding: var(--bosluk-4); }

/* ---------------------------------------------------- fotoğraf ızgarası */
.foto-izgara {
  display: grid; gap: var(--bosluk-2);
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}
.foto-izgara__oge {
  aspect-ratio: 1 / 1; display: block; overflow: hidden;
  border: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
  background: var(--renk-bos-1);
}
.foto-izgara__oge img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------- sayfalama */
.sayfalama {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--bosluk-2); padding-block: var(--bosluk-3);
}
.sayfalama__oge {
  min-width: var(--dokunma-hedefi); min-height: var(--dokunma-hedefi);
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--bosluk-3);
  border: var(--cizgi-ince) solid var(--renk-cizgi);
  font-size: var(--olcu-3); font-weight: var(--kalinlik-kalin);
}
.sayfalama__oge--acik { background: var(--renk-vurgu); color: var(--renk-vurgu-metin); }
/* opacity .4 kontrasti 4.5:1'in altina dusuruyordu (axe: color-contrast).
   Soluk ama okunur bir renk ve kesik cizgi kullaniliyor: durum yalnizca
   renkle degil, kenarlik biciminde de anlatiliyor (WCAG 1.4.1). */
.sayfalama__oge--pasif {
  color: var(--renk-metin-soluk);
  border-style: dashed;
  cursor: default;
}
.sayfalama__bilgi { font-size: var(--olcu-2); color: var(--renk-metin-soluk); width: 100%; text-align: center; }

/* ---------------------------------------------------- video */
.video-liste { display: flex; flex-direction: column; }
.video-satir {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--bosluk-3); align-items: center;
  padding: var(--bosluk-3) var(--bosluk-4);
  border-block-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
}
.video-satir:last-child { border-block-end: 0; }
.video-satir__kapak {
  position: relative; aspect-ratio: 16 / 9; display: block; overflow: hidden;
  border: var(--cizgi-ince) solid var(--renk-cizgi-soluk); background: var(--renk-bos-1);
}
.video-satir__kapak img { width: 100%; height: 100%; object-fit: cover; }
.video-satir__rozet {
  position: absolute; inset-inline-start: var(--bosluk-1); inset-block-end: var(--bosluk-1);
  padding: var(--bosluk-1) var(--bosluk-2);
  background: var(--renk-metin); color: var(--renk-zemin);
  font-size: var(--olcu-1); font-weight: var(--kalinlik-kalin);
}
.video-satir__baslik { font-family: var(--yazi-baslik); font-size: var(--olcu-4); font-weight: var(--kalinlik-kalin); }
.video-satir__not { font-size: var(--olcu-2); color: var(--renk-metin-soluk); }

.video-cerceve { position: relative; aspect-ratio: 16 / 9; background: var(--renk-metin); }
.video-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------- uzun metin */
/* Yalniz yazidan olusan sayfalarda (Koyun Tarihcesi) BASLIK DA metin
   genisliginde dursun ve ortalansin. Eskiden baslik cizgisi tam genislikte
   uzanip metin solda dar bir sutunda kaliyordu; sag yari bombos duruyordu
   ve sayfa yarim kalmis gibi gorunuyordu. */
.sayfa--metin { max-inline-size: var(--genislik-metin); margin-inline: auto; }
.yazi { max-width: var(--genislik-metin); font-size: var(--olcu-4); line-height: var(--satir-genis); }
/* Gomme harf: yazinin ilk harfi uc satir boyunda, serif ve yesil.
   Yilliklarin ve gazetelerin klasik acilisi; sayfaya "buradan basla"
   diyor. Yalnizca ilk paragrafta, yalnizca genis ekranda. */
.yazi > p:first-of-type::first-letter {
  font-family: var(--yazi-baslik); font-weight: var(--kalinlik-agir);
  color: var(--renk-vurgu);
  float: inline-start; font-size: 3.4em; line-height: .82;
  padding-inline-end: var(--bosluk-3); padding-block-start: var(--bosluk-1);
}
.yazi > * + * { margin-block-start: var(--bosluk-4); }
.yazi h2 { font-size: var(--olcu-6); margin-block-start: var(--bosluk-6); }
.yazi h3 { font-size: var(--olcu-5); margin-block-start: var(--bosluk-5); }
.yazi ul, .yazi ol { padding-inline-start: var(--bosluk-5); }
.yazi li + li { margin-block-start: var(--bosluk-2); }
.yazi a { color: var(--renk-vurgu-2); text-decoration: underline; text-underline-offset: var(--odak-mesafe); }
.yazi table { border-collapse: collapse; width: 100%; font-size: var(--olcu-3); }
.yazi td, .yazi th { border: var(--cizgi-ince) solid var(--renk-cizgi-soluk); padding: var(--bosluk-2) var(--bosluk-3); text-align: start; }

/* Uzun metin ve geniş tablolar sayfayı yatay kaydırtmasın */
.kaydir { overflow-x: auto; }

/* "Buradan devam edebilirsiniz" listesi — düzyazı değil, gezinme.
   WCAG 2.2 AA (2.5.8) dokunma hedefi için en az 24x24 px ve komşusuyla
   yeterli boşluk istiyor; satır yüksekliğine bırakılınca bağlantılar
   üst üste biniyordu. Kural bilerek bu listeye özel: düzyazı içindeki
   listelerin bağlantılarını şişirmek metni bozar. */
.yon-listesi {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--bosluk-2);
}
.yon-listesi a {
  display: flex; align-items: center;
  min-height: var(--dokunma-hedefi);
  padding-inline: var(--bosluk-3);
  border: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
  text-decoration: none;
}
.yon-listesi a::before { content: "→"; margin-inline-end: var(--bosluk-3); color: var(--renk-vurgu-2); }

/* ---------------------------------------------------- duyuru / etkinlik / taziye */
.duyuru { display: flex; flex-direction: column; gap: var(--bosluk-1); padding: var(--bosluk-3) var(--bosluk-4); border-block-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk); min-height: var(--dokunma-hedefi); }
.duyuru__tarih { font-family: var(--yazi-baslik); font-style: italic; font-size: var(--olcu-3); color: var(--renk-vurgu-2); }
.duyuru__baslik { font-weight: var(--kalinlik-orta); }

.etkinlik { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--bosluk-3); align-items: center; padding: var(--bosluk-3) var(--bosluk-4); border-block-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk); }
.etkinlik__tarih { display: flex; flex-direction: column; align-items: center; border: var(--cizgi-ince) solid var(--renk-cizgi); padding-block: var(--bosluk-1); }
.etkinlik__gun { font-family: var(--yazi-baslik); font-size: var(--olcu-5); font-weight: var(--kalinlik-kalin); }
.etkinlik__ay { font-size: var(--olcu-1); letter-spacing: var(--harf-aralik-genis); text-transform: uppercase; }
.etkinlik__ad { font-weight: var(--kalinlik-orta); }
.etkinlik__yer { font-size: var(--olcu-2); color: var(--renk-metin-soluk); }

.taziye { display: flex; flex-direction: column; gap: var(--bosluk-1); padding: var(--bosluk-3) var(--bosluk-4); border-block-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk); }
.taziye__ad { font-family: var(--yazi-baslik); font-size: var(--olcu-5); font-weight: var(--kalinlik-kalin); }
.taziye__bilgi { font-size: var(--olcu-2); color: var(--renk-metin-soluk); }
.taziye__mesaj { font-family: var(--yazi-baslik); font-style: italic; font-size: var(--olcu-3); }

/* ---------------------------------------------------- ayak */
.ayak-sarmal { border-block-start: var(--cizgi-kalin) solid var(--renk-cizgi); margin-block-start: var(--bosluk-5); }
.ayak {
  /* Alt dolgu fazladan: telefonda ekrana yapisan alt menu, kisa sayfalarda
     (orn. 404) alt bilgiyi ortuyordu -- axe target-size "partially
     obscured" veriyordu. Cubugun yuksekligi kadar bosluk birakiliyor.
     Genis ekranda cubuk zaten gizli, asagida sifirlaniyor. */
  padding-block: var(--bosluk-4) calc(var(--bosluk-6) + var(--bosluk-8));
  font-size: var(--olcu-2); color: var(--renk-metin-soluk);
  display: flex; flex-direction: column; gap: var(--bosluk-2);
}
/* Alt bilgi menüsü: menünün tamamı. Telefonda üstteki menü gizli olduğu
   için tek tam liste burası; dokunma hedefleri kural gereği 44px. */
.ayak-menu {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-5);
  padding-block-end: var(--bosluk-3);
  margin-block-end: var(--bosluk-2);
  border-block-end: var(--cizgi-ince) solid var(--renk-cizgi-soluk);
}
.ayak-menu__bag {
  display: flex; align-items: center;
  min-block-size: var(--dokunma-hedefi);
  font-size: var(--olcu-2); color: var(--renk-metin);
  letter-spacing: var(--harf-aralik-genis); text-transform: uppercase;
}
.ayak-menu__bag:hover { text-decoration: underline; text-underline-offset: var(--odak-mesafe); }

/* Telefonda üstteki yeşil menü gizli: alttaki yapışkan çubuk zaten aynı
   yerlere gidiyor ve ikisi birden ekranın %71'ini kaplıyordu. Menünün
   tamamı alt bilgide duruyor. Geniş ekranda üst menü geri geliyor,
   alttaki çubuk zaten orada gizleniyor. */
.menu { display: none; }

/* Odaklanan öğe yapışkan alt menünün altında kalmasın (WCAG 2.2 — 2.4.11).
   Tarayıcı odağa kaydırırken bu payı bırakır. */
a, button, [tabindex], summary, :target {
  scroll-margin-block-end: calc(var(--alt-menu-boyu) + var(--bosluk-4));
  scroll-margin-block-start: var(--bosluk-4);
}

/* ---------------------------------------------------- telefon alt menüsü */
.alt-menu {
  position: sticky; inset-block-end: 0; z-index: var(--kat-yapisik);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--renk-zemin);
  border-block-start: var(--cizgi-kalin) solid var(--renk-cizgi);
  /* Telefonun alt çubuğu düğmelerin üstüne binmesin */
  padding-block-end: env(safe-area-inset-bottom, 0);
}
.alt-menu__oge {
  min-height: var(--dokunma-genis);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bosluk-1); padding-block: var(--bosluk-2);
  font-size: var(--olcu-1); font-weight: var(--kalinlik-orta);
  color: var(--renk-metin-soluk);
}
.alt-menu__oge--acik { color: var(--renk-vurgu); font-weight: var(--kalinlik-kalin); }
.alt-menu__oge:hover { text-decoration: none; }

/* ---------------------------------------------------- lightbox */
.perde {
  position: fixed; inset: 0; z-index: var(--kat-perde);
  background: var(--renk-perde); color: var(--renk-perde-metin);
  display: flex; flex-direction: column;
}
.perde[hidden] { display: none; }
.perde__ust {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-block-end: var(--cizgi-ince) solid var(--renk-perde-cizgi);
}
.perde__ad { font-family: var(--yazi-baslik); font-size: var(--olcu-5); font-weight: var(--kalinlik-kalin); }
.perde__sayac { font-weight: var(--kalinlik-kalin); font-variant-numeric: tabular-nums; }
.perde__orta { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--bosluk-3); min-height: 0; }
/* width/height 100% + contain: kucuk fotograflar da bosluga yayilir.
   Eskiden yalnizca max-* vardi, yani 720x540'lik bir fotograf 1440'lik
   ekranin ortasinda 720 piksel kalip pul gibi duruyordu. Arsivin %87'si
   400-800 piksel oldugu icin bu neredeyse her fotografta oluyordu.
   Buyutunce bir miktar yumusuyor ama okunakli buyukluk bundan onemli. */
.perde__gorsel { width: 100%; height: 100%; object-fit: contain; }
.perde__alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4);
  border-block-start: var(--cizgi-ince) solid var(--renk-perde-cizgi);
}
.perde__aciklama { font-family: var(--yazi-baslik); font-style: italic; font-size: var(--olcu-3); }
.perde__ipucu { font-size: var(--olcu-2); opacity: .75; display: flex; gap: var(--bosluk-3); }
.perde__ipucu kbd { border: var(--cizgi-ince) solid var(--renk-perde-kenar); border-radius: var(--yaricap-kucuk); padding: 0 var(--bosluk-2); font-family: inherit; }

.perde__dugme {
  width: var(--dokunma-genis); height: var(--dokunma-genis); flex: none;
  border-radius: 50%; cursor: pointer;
  border: var(--cizgi-kalin) solid var(--renk-perde-dugme);
  background: var(--renk-perde-dolgu); color: inherit;
  font-size: var(--olcu-6); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.perde__dugme[disabled] { opacity: .3; cursor: default; }
.perde__gez { position: absolute; top: 50%; transform: translateY(-50%); }
.perde__gez--onceki { inset-inline-start: var(--bosluk-3); }
.perde__gez--sonraki { inset-inline-end: var(--bosluk-3); }

/* Lightbox açıkken arka sayfa kaymasın */
body.perde-acik { overflow: hidden; }

/* ---------------------------------------------------- hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .kusak__slayt { opacity: 0; }
  .kusak__slayt:first-child { opacity: 1; }
  .kusak__nokta:first-child { opacity: 1; }
}

/* ============================================================
   Geniş ekranlar
   ============================================================ */

@media (min-width: 40rem) {          /* 640px */
  .ust-serit__dernek { display: block; }
  /* Genis ekranda butun yillar gorunsun: kaydirma yerine sarma.
     Masaustunde kesilmis bir serit, kaydirilabilir oldugu belli olmadigi
     icin ziyaretciye "2018 ve 2024 yok" izlenimi veriyordu. */
  /* Kusak genis ekranda alcaliyor. 16/9, 1440 piksellik bir ekranda 810
     piksel yer kapliyordu: menunun altinda sayfadan baska hicbir sey
     gorunmuyordu. Ust sinir da var, cok genis ekranda oran tek basina
     yetmiyor (1920'de 5/2 hala 768 piksel eder). */
  /* aspect-ratio KULLANILMIYOR. aspect-ratio + max-block-size birlikte
     verilince tarayici yuksekligi kisitlayinca GENISLIGI de orani korumak
     icin daraltiyor: 1440 piksellik ekranda serit 1280'de kesilip sagda
     bos bir seride birakiyordu. Dogrudan yukseklik vermek hem tam
     genisligi koruyor hem de davranisi ongorulebilir kiliyor:
     ekranin %38'i, en fazla 26rem, ve en fazla pencere yuksekliginin
     %42'si. Ucuncu sinir sonradan eklendi: yalniz genislige bakmak kisa
     ekranlarda yetmiyordu. 1366x768 bir dizustunde 38vw = 519 piksel,
     26rem siniri 416'da kesiyor; ama tarayici cubuklari dustukten sonra
     gorunen alan ~650 piksel kaliyor ve baslik + serit ekrani dolduruyor.
     42vh o ekranda 273 pikselde kesiyor. */
  .kusak { aspect-ratio: auto; block-size: min(32vw, 22rem, 34vh); }

  /* Genis ekranda butun yillar TEK SATIRDA. auto-fill ile 16 yil
     sigmiyordu (1300 piksel / 16 = 81 piksel, minmax'in 5.25rem = 84
     pikselinin altinda) ve serit 13 + 3 diye ikiye bolunuyordu; alt
     satirda kalan 2015-2018-2024 kopuk duruyordu. grid-auto-flow: column
     sutun sayisini icerige gore belirliyor, hepsi esit daraliyor. */
  .yil-serit {
    display: grid; overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4rem, 1fr);
  }
  .yil-serit__oge { min-width: 0; }
  .alt-menu { display: none; }
  .basagi__amblem { width: 5.5rem; height: 5.5rem; }
  .basagi__ad { font-size: var(--olcu-8); }
  .hava { margin-block-end: 0; margin-inline-start: auto; flex: none; }
  .hava__yer { display: block; }
  .hava__aralik { display: block; }
  .basagi__not { display: block; }
  .menu { display: block; }
  .menu__bag { min-height: var(--dokunma-genis); }
  .menu__liste { flex-wrap: nowrap; }
  .basagi { flex-wrap: wrap; }
  /* Tam uc sutun: auto-fill ile sutun sayisi kap genisligine gore
     degisiyordu ve dort kart 3+1 diye bolunuyordu. Ana sayfada uc galeri
     var, uc sutun tam oturuyor. */
  .kart-izgara { grid-template-columns: repeat(3, 1fr); }
  .foto-izgara { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .sayfa__basi { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .sayfalama__bilgi { width: auto; }
  .yil-bant { display: grid; grid-template-columns: 8rem minmax(0, 1fr); }
  .yil-bant__yil { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--bosluk-1); }
}

@media (min-width: 64rem) {          /* 1024px */
  .sayfa--yan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--bosluk-5);
    align-items: start;
  }
  .sayfa__yan { display: flex; flex-direction: column; gap: var(--bosluk-4); }
  .sayfa__ana { display: flex; flex-direction: column; gap: var(--bosluk-5); min-width: 0; }
  /* Alt bilgi: menu kendi TAM GENISLIKTEKI satirinda, kunye altinda iki
     yana yaslanmis. Eskiden ucu birden tek satirda yarisiyordu ve alti
     maddelik menu 4+2 diye sariyordu. */
  .ayak {
    display: grid; grid-template-columns: 1fr auto; column-gap: var(--bosluk-5);
    padding-block-end: var(--bosluk-6);
  }
  .ayak-menu { grid-column: 1 / -1; }
}