/*
  Önder Kahraman — site.css
  Sitenin bütün görsel kararları burada. Kaynak: docs/tasarim/onizleme-*.html
  (onaylanmış tasarım önizlemeleri — referans olarak kullanılır, düzenlenmez).
*/

/* ============================================================
   Yazı karakteri — kendi sunucumuzdan servis edilir.

   TEK aile var: Ubuntu (D-82). Gövde, arayüz ve başlıklar aynı aileden
   çiziliyor; ayrım artık aile değil, punto ve ağırlık taşıyor. Önce iki aile
   vardı (gövde Archivo, başlık Bitstream Vera Mono); ikisi de kaldırıldı.

   DİKKAT — Ubuntu DEĞİŞKEN (variable) font DEĞİLDİR. Her ağırlık kendi
   dosyasını ve kendi @font-face'ini ister. Buradaki tuzak Archivo'dan kalma:
   o değişkendi ve tek dosyaya aralık sözdizimiyle (font-weight: 400 700)
   bağlanıyordu. Aynı sözdizimini buraya uygulamak sessizce bozar — tarayıcı
   tek dosyayı bütün ağırlıklar için kullanır, hata vermez, tasarım yalnızca
   "düz" görünür.

   Üç ağırlık iniyor: 400 Regular, 500 Medium, 700 Bold.

   Ubuntu'da 600 kesimi YOKTUR. Arayüzde 600 kullanan on sekiz yer bilerek
   500'e çekildi (D-82). 600 yazılı bırakılsaydı tarayıcı yukarı yuvarlar ve
   700'ü çizerdi; menü, sekme ve düğmeler olduğundan kalın çıkardı.

   DOSYALAR DEĞİŞTİRİLMEDEN sunuluyor (.ttf, 0.80 dağıtımı). Ubuntu Font
   Licence, değiştirilen sürümün yeniden adlandırılmasını şart koşuyor; alt
   küme çıkarmak ve woff2'ye çevirmek de birer değişikliktir. Boyutu üçte bire
   indirirdi ama lisansı tartışmalı hale getirmektense üç dosyada ~1005 KB'a
   razı olundu. Bkz. lisanslar/OKUBENI.md

   Eksik işaret: ₺ (U+20BA). Font 2011'den, lira simgesi 2012'de kabul edildi.
   Bu yüzden fiyatlar "TL" ile yazılıyor — bkz. Infrastructure/ParaBicimi.cs.
   Türkçenin on iki harfi (ı İ ğ Ğ ş Ş ö Ö ü Ü ç Ç) üç kesimde de tam.
   ============================================================ */

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Ubuntu-R.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Ubuntu-M.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Ubuntu-B.ttf") format("truetype");
}

/* ============================================================
   Tasarım belirteçleri
   ============================================================ */

:root {
  /* zemin ve metin
     D-64 DENEMESİ: sayfa zemini beyaza, sayfa bantları griye alındı.
     Geri almak için iki satır yeter: --kagit'i #EEEEEE, --bant-zemin'i
     var(--murekkep) yap. */
  --kagit: #FFFFFF;      /* gövde zemini — denemeden önce #EEEEEE idi */
  --bant-zemin: #757575;  /* sayfa bandının zemini — denemeden önce koyuydu */
  --ak: #FFFFFF;          /* kart ve panel zemini */
  --murekkep: #272727;    /* metin, kart şeridi, buton zemini */
  --gri: #757575;         /* ara metin */
  --acikgri: #BDBDBD;     /* soluk metin */

  /* vurgu */
  --su: #584611;          /* tek vurgu — bağlantı, aktif menü */
  --altin: #FFEDB0;        /* hover zemini, olumlu bildirim */
  --iz: #E0E0E0;           /* çizgi ve kenarlık */

  /* D-72: olumsuz geri bildirim. "Kaydedildi" ile "kaydedilemedi" aynı sarı
     zemindeydi; kullanıcı iyi haberi bekleyip kötü haberi okumadan geçiyordu.
     Renk tonu --altin ile aynı yumuşaklıkta seçildi ki panel çığlık atmasın —
     ama kırmızı olduğu bir bakışta anlaşılsın. */
  --kirmizi-zemin: #FADCDC; /* olumsuz bildirim zemini */
  --kirmizi: #8E1B1B;       /* olumsuz bildirim şeridi ve metni */

  /* D-80: haritada seçili/üstüne gelinen il. Kademelerin yeşil ailesinden
     ama daha doygun — kademelerden biri sanılmasın diye. */
  --harita-vurgu: #A5DBBE;

  /* Üst şerit (39px) + başlık bloğu (22 + logo 76 + 22 + 1px çizgi = 121px).
     Açılış bölümü bu kadarını düşerek tam ekranı doldurur; yoksa sayfa üst
     blok kadar taşar ve açılış yazısı ekranın altında kalır.
     D-34'te şerit kaldırılmıştı, D-35 ile geri geldi — değer de geri alındı. */
  --ust-yukseklik: 160px;

  /* harita yoğunluk basamakları */
  --y0: #E2E2E2;
  --y1: #F0DFA8;
  --y2: #D4B45E;
  --y3: #96762A;
  --y4: #584611;

  /* ölçü
     D-92: 1180 -> 1400. Fotoğrafçı sayfa bantlarının referans sitedekiler
     kadar geniş olmasını istedi. Ölçüldü (dannygreenphotography.com):
     içerik şeridi 1920 ekranda 1400 px, dar ekranda görüntü alanının
     %90'ı — padding'siz. Bizimki 1180 kutu eksi 2x28 padding = 1124 px
     içerik veriyordu; 1920'de iki yanda 390'ar piksel boşluk kalıyordu.
     Görsel bantların (.bant, .acilis) genişliği zaten tam ekrandı ve
     iki sitede de aynı; dar duran içerik şeridiydi. */
  --olcu: 1400px;

  /* yazı aileleri
     D-82: iki aile tek aileye indi, ikisi de aynı değeri gösteriyor.

     --baslik silinmedi. On iki seçicide geçiyor ve başlıklar ileride yeniden
     ayrışmak isterse dönülecek yer burası — o gün tek satır değişir, on iki
     seçici değil. Bugün ayrımı punto ve ağırlık taşıyor. */
  --baslik: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* yazı ağırlıkları (D-82)
     Aile iki belirteçten geliyordu, ağırlık ise otuz sekiz yerde tek tek
     yazılıydı. 600 -> 500 değişikliği bu yüzden on sekiz satıra dokundu;
     aynı iş aile tarafında tek satır olurdu.

     Başlık ve arayüz BUGÜN aynı değerde ama AYRI belirteç. Dün farklıydılar
     (500 ve 600) ve yarın yine ayrışabilirler. Tek belirtece bağlamak iki
     rolü sessizce kaynatır: "menüler biraz kalınlaşsın" dendiğinde
     başlıklar da kalınlaşırdı. */
  --agirlik-govde: 400;   /* akan metin */
  --agirlik-baslik: 500;  /* h1-h4, kart adı, marka */
  --agirlik-arayuz: 500;  /* menü, sekme, düğme, etiket, rozet */
  --agirlik-kalin: 700;   /* seçili/etkin durum, tablo başlığı */
}

/* ============================================================
   Sıfırlama ve temel gövde
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Native [hidden] her zaman kazanmalı — bazı bileşenler (ör.
   .form-alani, .koleksiyon-secili-gosterge) kendi display değerini
   tanımlıyor; aynı özgüllükte sonraki kural kazanır ve [hidden]'ı
   ezerdi. K-23: ülke/il görünürlüğü ve koleksiyon kutusu JS ile bu
   öznitelik üzerinden anlık değişiyor, bu yüzden garanti altına alınır. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* D-98: WebP için <img>'ler <picture> ile sarıldı. `display: contents`
   picture'ı yerleşimden tamamen çıkarır — img, doğrudan eski ebeveyninin
   çocuğuymuş gibi konumlanır. Bütün img kuralları (.kart .foto img gibi)
   torun seçicisi olduğu için aynen çalışmaya devam eder; sarmalayıcı araya
   girse bile ızgara ve flex ölçüleri değişmez. */
picture { display: contents; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--baslik);
  font-weight: var(--agirlik-baslik);
  margin: 0;
}

/* Sayaç ve adet gibi değişen rakamlar için sabit genişlik — düzen zıplamasın */
.rakam,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* D-92: sabit kutu + padding yerine referansın kuralı — genişlik, üst sınır
   ile görüntü alanının %90'ından hangisi küçükse o. Padding kalktı: %90 zaten
   iki yanda %5 boşluk bırakıyor, dar ekranda da kenara yapışmıyor. Sabit
   1180'de orta boy ekranlarda (1440) şerit 1124'te donup kalıyordu; şimdi
   1283 — referansla birebir aynı. */
.kap {
  width: min(var(--olcu), 90%);
  margin: 0 auto;
}

/* Erişilebilirlik: hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--su);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Üst şerit
   ============================================================ */

.serit {
  border-bottom: 1px solid var(--iz);
  background: var(--kagit);
}
.serit .kap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  font-size: 12.5px;
  color: var(--gri);
  letter-spacing: .02em;
}
.serit a { text-decoration: none; }
.serit a:hover { color: var(--su); }
.serit-sag { display: flex; gap: 22px; }
.serit-sag a {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: var(--agirlik-arayuz);
  font-size: 11.5px;
}

/* D-38: şeride üçüncü bağlantı (Hakkımda) eklenince telefonda taşma başladı —
   390 piksellik ekranda içerik 433 piksel tutuyordu ve bütün sayfalar yana
   kayıyordu. Şerit tek satır kalmalı: yüksekliği --ust-yukseklik'e gömülü ve
   anasayfanın açılışı ondan hesaplanıyor, sarmasına izin verilirse açılış
   taşar. Bu yüzden dar ekranda e-posta gizleniyor; tek başına 166 piksel
   tutuyor ve şeritteki en az gerekli parça — İletişim bağlantısı hemen yanında,
   adres altbilgide ve İletişim sayfasında yazılı. */
@media (max-width: 560px) {
  .serit .kap { justify-content: flex-end; }
  .serit .kap > a { display: none; }
  .serit-sag { gap: 16px; }
}

/* ============================================================
   Başlık / header
   ============================================================ */

header.ust {
  background: var(--kagit);
  border-bottom: 1px solid var(--iz);
}
header.ust .kap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  padding-bottom: 22px;
  gap: 40px;
}
/* Logo yüksekliği 76px: logodaki kamera ikonu ve dikey çizgi ince çizgili,
   daha küçük boyutta detayı kayboluyor. Dolgu 26 → 22 düşürüldü ki header
   büyümesin — fotoğraflara kalan alan daralmasın. */
.logo img { height: 76px; width: auto; }

/* D-93: boşluk 30 -> 22, harf arası .1em -> .07em. Yedi başlığın ikisi iki
   kelimeli (NEREDE ÇEKİLMİŞ, AYIN FOTOĞRAFI); menü 741 px tutuyordu ve dar
   pencerede kelimeler alt satıra kırılıyordu. Sıkıştırma menüyü 669'a indirdi.
   Punto ve büyük harf düzenine dokunulmadı — kırılmanın sebebi onlar değildi. */
nav.ana ul {
  display: flex;
  gap: 22px;
}
nav.ana a {
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--agirlik-arayuz);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--murekkep);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .18s, color .18s;
}
nav.ana a:hover,
nav.ana a[aria-current="page"] {
  border-color: var(--su);
  color: var(--su);
}

/* Açılır menü düğmesi — yalnızca dar ekranda görünür */
.menu-dugme {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--iz);
  background: var(--ak);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.menu-dugme-cizgi,
.menu-dugme-cizgi::before,
.menu-dugme-cizgi::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--murekkep);
  transition: transform .18s ease, opacity .18s ease;
}
/* ::before ve ::after'in hizalandigi kutu dugme degil, ORTADAKI CIZGI —
   cunki o da position:absolute ve kendi icin kapsayici kutu kuruyor. Paylasilan
   kuraldaki left/right:10px bu 18px'lik kutuda genisligi eksiye dusuruyor,
   tarayici sifira kirpiyor ve iki cizgi cizilmis ama gorunmez oluyordu:
   hamburger uc yerine tek cizgi gosteriyordu. Burada 0'a cekiliyor ki iki yan
   cizgi ortadakiyle ayni ende olsun. */
.menu-dugme-cizgi::before,
.menu-dugme-cizgi::after { left: 0; right: 0; }
.menu-dugme-cizgi { top: 19px; }
.menu-dugme-cizgi::before { top: -7px; }
.menu-dugme-cizgi::after { top: 7px; }
.menu-dugme[aria-expanded="true"] .menu-dugme-cizgi { background: transparent; }
.menu-dugme[aria-expanded="true"] .menu-dugme-cizgi::before { transform: translateY(7px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] .menu-dugme-cizgi::after { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Altbilgi
   ============================================================ */

footer {
  background: var(--murekkep);
  color: rgba(255,255,255,.78);
  margin-top: 0;
  padding: 56px 0 0;
  font-size: 14px;
}
.fut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
}
footer h3 {
  color: #fff;
  font-size: 19px;
  font-weight: var(--agirlik-baslik);
  margin: 0 0 14px;
}
footer p { margin: 0; max-width: 38ch; color: rgba(255,255,255,.62); }
footer ul { display: grid; gap: 8px; }
footer a { text-decoration: none; color: rgba(255,255,255,.78); }
footer a:hover { color: #fff; }
.telif {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 18px 0;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  display: flex;
  /* D-90: telif satırı üç öğeliyken space-between doğruydu. Telif künyeye
     taşınınca geriye iki yasal bağlantı kaldı ve ikisi ekranın iki ucuna
     savruluyordu. Artık yan yana bir grup. */
  justify-content: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}

/* D-90: künye — sayfanın en altı, ortalı. Telif satırındaki yasal
   bağlantılardan (gizlilik, mesafeli satış) ayrı durur: onlar gezinilecek
   yerler, bu bir imza. Bu yüzden bir tık daha sönük. */
.kunye {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px 0 4px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.42);
}
/* footer p'nin 38ch okuma genişliği burada geçersiz: o kural altbilgideki
   tanıtım cümlesi için. Künye satırı ortalanacaksa tam genişlik olmalı,
   yoksa "ortalanmış" ama sola sıkışmış bir blok çıkıyor — ölçülerek
   yakalandı (satır 257 px genişlikti, 1124 px yerine). */
.kunye p { margin: 0; max-width: none; }
.kunye a { color: rgba(255,255,255,.62); }
.kunye a:hover { color: #fff; }

/* ============================================================
   Duyarlı kırılımlar
   ============================================================ */

/* D-93: menünün hamburgere geçtiği yer 900 -> 1000.
   900 yanlış yerdeydi: menü yatay kalıyor ama sığmıyordu. Sıkışan öğeler
   satır kırmıyor (flex nowrap), içlerindeki kelimeler kırılıyordu — dar
   pencerede "MAKRO / DOĞA" alt alta düşüp başlık bloğunu iki katına
   çıkarıyordu. Ölçüldü: sarma 1041 px'te başlayıp 901'e kadar sürüyordu,
   yani hamburgerin devreye girdiği yerle arasında 140 piksellik bozuk bir
   aralık vardı. D-92 bu aralığı açmadı ama genişletti (988 -> 1041):
   şerit sabit kutu yerine %90 olunca menüye kalan yer daraldı.

   1000: sıkıştırılmış menü (669) + logo (151) + aradaki 40 = 860; 1001 px'lik
   pencerede şerit 901 px, yani 41 piksel pay kalıyor. Yazı tipi ilk yüklemede
   yedeğe düşerse menü birkaç piksel genişler, pay onu da karşılar.

   Altbilginin tek sütuna inmesi 900'de bırakıldı — onun menüyle ilgisi yok,
   üç sütun 1000 px'te hâlâ rahat duruyor. */
@media (max-width: 1000px) {
  .menu-dugme { display: block; }

  nav.ana {
    display: none;
    position: absolute;
    left: 0; right: 0;
    background: var(--ak);
    border-bottom: 1px solid var(--iz);
    padding: 8px 0;
    z-index: 20;
  }
  nav.ana.acik { display: block; }
  nav.ana ul { flex-direction: column; gap: 0; }
  nav.ana li { border-bottom: 1px solid var(--iz); }
  nav.ana li:last-child { border-bottom: 0; }
  nav.ana a {
    display: block;
    padding: 14px 28px;
    border-bottom: 0;
  }

  header.ust .kap { position: relative; }

  /* Dar ekranda logo 76px yerine 56px: hamburger düğmesiyle birlikte
     satırı doldurmasın. Oran korunur, okunaklılık yeterli. */
  .logo img { height: 56px; }

  /* Logo kısalınca üst blok da kısalıyor: 39 + 22 + 56 + 22 + 1 = 140px. */
  :root { --ust-yukseklik: 140px; }
}

/* Altbilgi: menüden bağımsız kırılım (D-93). */
@media (max-width: 900px) {
  .fut { grid-template-columns: 1fr; }
}

/* ============================================================
   Sayfa bandı
   ============================================================ */

.bant {
  position: relative;
  /* D-95: örnek sitenin bandı oransal DEĞİL, kademeli. İlk ölçümde üç nokta
     (1440/1920/2560) alınmış ve aradan bir oran uydurulmuştu (28vw); üç nokta
     da tuttuğu için doğru sanıldı. Aralar ölçülünce kademeler çıktı:

       ≥1600 -> 540 | 960-1599 -> 400 | 768-959 -> 340 | <768 -> 240

     28vw bu kademelerin altında kalıyordu: 1014 px'lik pencerede bizim bant
     284, örnek sitenin 400 — %40 fark. Fotoğrafçının yan yana ekran
     görüntüsünde görünen buydu.

     Ders: iki uçtan geçen bir oran, aradan da geçtiğini göstermez. */
  height: 540px;
  overflow: hidden;
  background: var(--bant-zemin);
}
.bant .gorsel {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.bant .yazi {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(20, 23, 26, .62));
  padding: 46px 0 28px;
}
.bant h1 {
  font-weight: var(--agirlik-baslik);
  color: #fff;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1;
  margin: 0;
  letter-spacing: -.015em;
}
.bant p {
  color: rgba(255, 255, 255, .86);
  margin: 10px 0 0;
  font-size: 15px;
  max-width: 52ch;
}

/* D-95: bandın kademeleri — örnek sitenin eşikleriyle birebir. */
@media (max-width: 1599px) { .bant { height: 400px; } }
@media (max-width: 959px)  { .bant { height: 340px; } }
@media (max-width: 767px)  { .bant { height: 240px; } }

/* ============================================================
   Bölüm başlığı — sayfa içi içerik blokları
   ============================================================ */

.bolum { padding: 74px 0; }
.bolum + .bolum { border-top: 1px solid var(--iz); }

.etiket {
  font-size: 11px;
  font-weight: var(--agirlik-kalin);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acikgri);
  margin: 0 0 10px;
}
/* D-73: geri bağlantısının durduğu satır. Başlığın hemen üstünde, önyüzde de
   panelde de aynı: aynı punto, aynı boşluk, aynı yer. Görünüşü .etiket ile
   birebir aynı tutuluyor — önyüzde zaten orada duran bölüm etiketinin yerini
   alıyor, yani sayfaya yeni bir satır eklemiyor. */
.geri-satiri {
  font-size: 11px;
  font-weight: var(--agirlik-kalin);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* D-70: geri bağlantısının kendisi. Dokunmatikte kolay yakalansın diye
   düşey dolgu verildi. */
.geri-bag {
  color: var(--gri);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  transition: color .16s ease, transform .16s ease;
}
.geri-bag:hover,
.geri-bag:focus-visible {
  color: var(--murekkep);
  transform: translateX(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .geri-bag { transition: none; }
  .geri-bag:hover, .geri-bag:focus-visible { transform: none; }
}
.bolum h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.giris {
  max-width: 60ch;
  color: var(--gri);
  margin: 0 0 38px;
  font-size: 15.5px;
}

/* ============================================================
   Galeri kartı — fotoğraf + koyu şeritte ad ve adet
   Veri Faz 4'te gelir; burada yalnızca stil.
   ============================================================ */

.kartlar {
  display: grid;
  /* minmax(0, 1fr) değil düz 1fr kullanılırsa örtük alt sınır "auto" olur:
     kırılmayan uzun bir başlık (ör. "Kızılırmak Deltası") sütunu kendi
     min-content genişliğine kadar zorlayıp sayfayı dar ekranda yatay
     taşırabilir (bkz. görev listesi G4.4 doğrulama #13). */
  /* D-57: satırda DÖRT. Gösterilen kart sayısı da dörde çekildi
     (HomeController.SonKoleksiyonSayisi / SonTurSayisi), yoksa satırda boş
     kutu kalırdı. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
/* Kart bir SÜTUN (D-46). Önce display:block idi ve şu kusuru veriyordu:
   ızgara, satırdaki bütün kartları en uzun kartın boyuna gerer. Bir tür adı
   iki satıra kayınca (ör. "Akyanaklı arapbülbülü") o kart uzuyor, komşuları
   da geriliyor — ama içlerindeki fotoğrafın oranı ve siyah şeridin yüksekliği
   sabit olduğu için altta kartın BEYAZ ZEMİNİ açıkta kalıyordu.

   Sütun yapınca şerit (.alt) kalan boşluğu doldurabiliyor: satırdaki bütün
   şeritler aynı boya geliyor ve fazlalık beyaz değil koyu kalıyor. */
.kart {
  background: var(--ak);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.kart:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -14px rgba(20, 23, 26, .35);
}
/* D-57: kapak KIRPILMIYOR. Önce `aspect-ratio: 4/3` + `object-fit: cover`
   vardı; kutu sabit orandaydı ve fotoğraf o orana kırpılıyordu — dikey bir
   kare yatay kutuya sığdırılırken üstü altı gidiyordu. Bu, "fotoğrafa
   dokunulmaz" ilkesinin görüntü tarafındaki karşılığını çiğniyordu.

   Artık kutu fotoğrafın kendi oranını alıyor. Satırdaki kartlar farklı boyda
   fotoğraf taşıyabilir; D-46'daki çözüm bunu zaten karşılıyor — `.alt` şeridi
   kalan boşluğu doldurduğu için altta beyaz zemin açıkta kalmıyor.

   flex: none kaldırıldı: fotoğrafın kendi yüksekliği neyse o. */
.kart .foto { position: relative; overflow: hidden; background: var(--iz); }
.kart .foto img { width: 100%; height: auto; display: block; }
/* Kapağı olmayan kart: fotoğraf yok, kutuya bir oran vermek gerekiyor. */
.kart .foto div { aspect-ratio: 3 / 2; width: 100%; background: var(--iz); }
.kart .alt {
  background: var(--murekkep);
  color: #fff;
  padding: 15px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

/* Kalan boşluğu kartın SON öğesi doldurur (D-46) — yoksa altta kartın beyaz
   zemini açıkta kalıyordu.

   Neden ".alt" değil de ":last-child": gezi kartlarında şeridin ALTINDA bir
   bilgi bloğu (.gezi-bilgi) var. Şeridi büyütseydik o blok aşağı itilir,
   ortada kocaman bir koyu alan kalırdı. Kuş kartlarında son öğe zaten şerit,
   gezi kartlarında bilgi bloğu — ikisinde de doğru öğe uzuyor. */
.kart > :last-child {
  flex: 1 1 auto;
}
/* min-width: 0 ve kelime kırma (D-40, E-11): kart şeridi bir flex satırı;
   tür adı varsayılan olarak küçülmediği için yanındaki sayıyı kartın dışına
   itiyordu ve telefonda bütün sayfa yana kayıyordu. Uzun tür adları artık
   alt satıra sarıyor, sayı kartın içinde kalıyor. */
.kart .ad {
  font-family: var(--baslik);
  /* 18 değil 16 (D-45) — AMA BU GEREKÇE ARTIK GEÇERSİZ, bkz. aşağısı.

     D-45'in gerekçesi: başlık yazı tipi Archivo'dan Bitstream Vera Mono'ya
     geçince aynı metin genişlemişti. "Akyanaklı arapbülbülü" 18 puntoda
     Archivo'da 179, Vera Mono'da 228 piksel — %28 fazla. 513 tür adının
     74'ü (%14) iki satıra kayıyordu, punto 16'ya çekildi ve 37'ye (%7) indi.

     D-82 ile Vera Mono kalktı, yerine Ubuntu geldi ve genişleme sorunu
     ortadan kalktı. Yeniden ölçüldü (Kuşlar sayfası, 513 kart):

       aynı metin 18 puntoda   Ubuntu 187 px  (Archivo 179 idi — %4 fazla)
       iki satıra saran kart   16 px → 5      17 px → 9      18 px → 18

     Yani Ubuntu 18 puntoda bile Vera Mono'nun 15 puntodan (27 kart) daha az
     sarıyor. 16 punto şimdi fazla temkinli kalıyor; 18'e dönmek D-45 öncesi
     tasarıma dönmek olur ve bedeli 513 kartın 18'i (%3,5).

     DEĞER BİLEREK DEĞİŞTİRİLMEDİ. Punto ayarı ayrı bir tur olarak konuşulacak
     (D-82, "sonraya bırakıldı") — font geçişiyle karıştırılmadı. Buradaki
     sayılar o konuşma için hazır duruyor. */
  font-size: 16px;
  font-weight: var(--agirlik-baslik);
  min-width: 0;
  overflow-wrap: anywhere;
}
.kart .adet {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Gezi kartı — kapak/ad/adet üstündeki .alt şeridine ek olarak tarih ve yer
   (görev listesi G4.4: "Kart: kapak, ad, tarih, yer"). */
.kart .gezi-bilgi {
  padding: 12px 18px 18px;
  color: var(--gri);
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kart .gezi-bilgi .tarih { font-variant-numeric: tabular-nums; color: var(--murekkep); }
.kart .gezi-bilgi .ozet {
  color: var(--gri);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* ============================================================
   Tür kutusu — kare görsel, ad, adet. Boş hali ince çerçeve ve tire.
   ============================================================ */


/* ============================================================
   İkili sekme — Türkiye / Dünya ayrımı
   ============================================================ */

/* D-78: Nerede Çekilmiş'in Türkiye/Dünya sekmeleri (.harita-sekmeler) artık
   Kuşlar'daki Türkiye/Dünya seçiciyle AYNI kurala bağlı. İkisi de aynı işi
   yapıyor — iki harita/liste arasında seçim — ama farklı görünüyorlardı:
   orada ayrık, köşesi yuvarlatılmış kutular, burada birleşik koyu çerçeve.
   Kullanıcının sözü: "diğer bölümlerdeki butonlar gibi davranmıyor."
   Kural tek yerde duruyor; iki ayrı düğme dili yok. */
.ikili,
.harita-sekmeler {
  display: inline-flex;
  border: 1px solid var(--murekkep);
  margin-bottom: 22px;
}
.ikili button,
.harita-sekmeler a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: var(--agirlik-arayuz);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: 0;
  background: transparent;
  color: var(--murekkep);
  cursor: pointer;
  /* Bağlantı satır içidir; kalkma hareketi ancak blok olursa işler. */
  display: inline-block;
  text-decoration: none;
}
/* D-68: sarı zemin kalktı, yerine hafif kalkma. Seçili sekme koyu kalıyor —
   burada iki sekme yan yana ve hangisinin açık olduğu güçlü görünmeli. */
.ikili button:hover,
.harita-sekmeler a:hover,
.harita-sekmeler a:focus-visible { transform: translateY(-1px); }
.ikili button[aria-pressed="true"],
.harita-sekmeler a.secili { background: var(--murekkep); color: #fff; }

/* ============================================================
   Süzgeç butonları
   ============================================================ */

/* D-78: Nerede Çekilmiş'teki bölüm süzgeci (.bolum-suzgec) de buraya bağlandı.
   Sitedeki bütün süzgeç şeritleri aynı düğme dilini konuşuyor; orada ayrı bir
   dil vardı — yuvarlatılmış köşe, seçilide koyu dolgu, üstüne gelince yalnızca
   çerçeve değişimi. Üçü de D-64/D-68'de kaldırılmış şeylerdi, oraya
   sıçramamıştı. */
.suzgec,
.bolum-suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}
.suzgec button,
.suzgec a,
.bolum-suzgec a {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: var(--agirlik-arayuz);
  padding: 7px 15px;
  border: 1px solid var(--iz);
  background: var(--ak);
  color: var(--gri);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: .16s;
}
/* D-68: üstüne gelince RENK DEĞİŞMİYOR — düğme hafifçe kalkıyor ve altına
   gölge düşüyor. Sarı zemin fotoğrafçının hoşuna gitmedi; hareket, rengin
   yaptığı işi görüyor ve fotoğrafların yanında sessiz kalıyor. */
.suzgec button:hover,
.suzgec a:hover,
.bolum-suzgec a:hover,
.bolum-suzgec a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px rgba(20, 23, 26, .5);
  border-color: var(--murekkep);
}
/* Seçili: koyu çerçeve ve kalın yazı — zemin beyaz kalıyor.
   Ay şeridiyle (D-64) aynı dil; fotoğrafçı o görünümü onayladı. */
.suzgec button[aria-pressed="true"],
.suzgec a[aria-pressed="true"],
.bolum-suzgec a.secili {
  background: var(--ak);
  border-color: var(--murekkep);
  color: var(--murekkep);
  font-weight: var(--agirlik-kalin);
}
.suzgec .say,
.bolum-suzgec .adet { font-variant-numeric: tabular-nums; opacity: .65; margin-left: 5px; }

/* D-69: koleksiyon seçicideki bölüm süzgeci — .suzgec kalıbını olduğu gibi
   kullanıyor, yalnızca arama kutusuna olan boşluğu kısaltıyor. */
.koleksiyon-secici-bolumler { margin-bottom: 14px; }

/* ============================================================
   Çetele şeridi — sitenin imza öğesi. 513 çizgi; dolular tam boy
   ve koyu, boşlar yarım boy ve açık. Sayaç aynı bilgiyi metinle
   verdiği için ekran okuyucudan aria-hidden ile gizlenir.
   ============================================================ */

.cetele-blok { margin-bottom: 40px; }
.cetele-ust {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}
.cetele-yazi { font-size: 15px; color: var(--gri); }
.cetele-yazi b {
  font-family: var(--baslik);
  font-size: 27px;
  font-weight: var(--agirlik-arayuz);
  color: var(--murekkep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-right: 2px;
}

.cetele { display: flex; gap: 1px; height: 30px; align-items: flex-end; }
.cetele i {
  flex: 1 1 0;
  /* min-width: 0 — çizgi alt-piksele kadar küçülebilmeli (D-40).
     Önce 1px'di ve 513 çizgi × (1px + 1px boşluk) = 1025 piksellik bir taban
     yaratıyordu: kap bundan darsa şerit taşıyor ve SAYFANIN TAMAMI yana
     kayıyordu. 1200 pikselin altındaki her ekranda oluyordu — dizüstünde,
     tablette. Aşağıdaki 560px kuralı bunu yalnızca telefonda düzeltiyordu,
     asıl aralık açıkta kalmıştı.

     1px sınırının masaüstünde zaten bir etkisi yoktu: 1124 piksellik kapta
     513 çizgiye düşen pay 1 pikselin üstünde. Yalnızca dar ekranda zarar
     veriyordu. Boşluk (gap) hâlâ 1px, o yüzden taban 512 piksel; ondan
     darsı için 560px kuralı boşluğu da sıfırlıyor. */
  min-width: 0;
  background: var(--iz);
  height: 12px;
  transition: height .2s, background .2s;
}
.cetele i.dolu { background: var(--murekkep); height: 30px; }
.cetele-alt {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11px;
  color: var(--acikgri);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ============================================================
   Anahtar — "Sadece çekilenleri göster"
   ============================================================ */

.anahtar {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--gri);
  cursor: pointer;
  user-select: none;
}
.anahtar .kutu {
  width: 34px;
  height: 19px;
  border: 1px solid var(--acikgri);
  background: var(--ak);
  position: relative;
  transition: .18s;
}
.anahtar .kutu::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  background: var(--acikgri);
  transition: .18s;
}
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar input:checked + .kutu { border-color: var(--su); background: var(--su); }
.anahtar input:checked + .kutu::after { left: 17px; background: #fff; }
.anahtar input:focus-visible + .kutu { outline: 2px solid var(--su); outline-offset: 2px; }

/* ============================================================
   Arama kutusu ve harf şeridi — 513 türlük Kuşlar sayfası için (G4.3).
   ============================================================ */

.arama-satiri { margin-bottom: 18px; }
.arama {
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--iz);
  background: var(--ak);
  color: var(--murekkep);
  width: 100%;
  max-width: 360px;
}
.arama::placeholder { color: var(--acikgri); }
.arama:focus-visible { outline: 2px solid var(--su); outline-offset: 2px; }

.harf-seridi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 22px;
}
.harf-seridi button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: var(--agirlik-arayuz);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--iz);
  background: var(--ak);
  color: var(--murekkep);
  cursor: pointer;
  transition: .16s;
}
/* D-68: sarı yerine hareket. Harfler küçük olduğu için kalkma da küçük. */
.harf-seridi button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--murekkep);
}
.harf-seridi button:disabled {
  color: var(--acikgri);
  border-color: var(--iz);
  background: transparent;
  cursor: default;
}

/* ============================================================
   İkili sekme, .suzgec — <a> yanında <button> ile de kullanılabilsin
   diye G4.1'deki gibi hem buton hem bağlantı biçimi desteklenir.
   ============================================================ */

.kus-katalog[hidden] { display: none; }

@media (max-width: 900px) {
  /* Dört sütun dar ekranda çok incelir — D-57 satırda dördü geniş ekran için
     söylüyor, mobilde ikiye iniyor (zaten öyleydi). */
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kartlar, .turler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .harf-seridi button { width: 26px; height: 26px; font-size: 11px; }
  /* 513 çizgilik çetele şeridi: masaüstünde her çizgi en az 1px + 1px boşluk
     payı alır (görsel netlik için), ama dar ekranda 513 × 2px konteyneri
     taşırır. Burada payı sıfırlayıp tarayıcının alt-piksel genişliğe
     küçültmesine izin veriyoruz — şerit orantısını korur, taşma olmaz. */
  .cetele { gap: 0; }
  .cetele i { min-width: 0; }
  /* Yedi aile etiketi tek satırda dar ekrana sığmıyor — alt alta sarsın. */
  .cetele-alt { flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; }
}

/* ============================================================
   Galeri detay — gezi bilgisi ve fotoğraf ızgarası (G4.2).
   Izgara CSS sütunlarıyla (masonry) kurulur: fotoğraflar KIRPILMAZ, kendi
   en/boy oranında yerleşir (görev listesi G4.2, "kendi oranında, kırpılmaz").
   ============================================================ */

.gezi-bilgi {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 30px;
  padding: 18px 22px;
  background: var(--ak);
  border: 1px solid var(--iz);
}
.gezi-bilgi > div { min-width: 140px; }
.gezi-bilgi dt {
  font-size: 11px;
  font-weight: var(--agirlik-kalin);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acikgri);
  margin: 0 0 4px;
}
.gezi-bilgi dd { margin: 0; color: var(--murekkep); }
.gezi-bilgi .anlati { flex-basis: 100%; }
.gezi-bilgi .anlati dd { color: var(--gri); max-width: 70ch; line-height: 1.55; }

.kare-sayisi {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acikgri);
  font-variant-numeric: tabular-nums;
  margin: 0 0 24px;
}

/* Koleksiyon sayfasının kare ızgarası — satırda DÖRT.
   D-70: `columns` (gazete sütunu) bırakıldı, gerçek ızgaraya geçildi.

   `columns` "satırda dört" diye çalışmaz: sütun YÜKSEKLİKLERİNİ dengeler.
   Altı kare varken "3 sütun × 2" dengeli geldiği için dördüncü sütunu boş
   bırakıyordu — ekranda satırda üç kare ve sağda 285 piksel boşluk. Kare
   sayısı değiştikçe düzen de zıplıyordu.

   Izgarada her satır gerçekten dört. `align-items: start` kareleri kendi
   oranlarında bırakır (D-57: kırpma yok); satır altları eşit bitmez, o
   doğaldır — fotoğrafın oranını bozmamanın bedeli budur. */
.izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

/* Ayın Fotoğrafı (D-54) — ay şeridi ve arşiv ızgarası.
   Izgara satırda İKİ kare: referans sayfa böyle. Kırpma yok (ilke #1);
   kareler kendi oranlarını korur, yükseklik içeriğe göre değişir. */
.ay-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
/* D-63: ay düğmeleri artık alt sayfalardaki süzgeç düğmeleriyle (.suzgec)
   AYNI biçimde — aynı punto, aynı dolgu, aynı renkler, aynı geçiş. İki ayrı
   düğme dili taşımanın anlamı yoktu. */
.ay-serit .ay,
.ay-serit .ay-tum {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: var(--agirlik-arayuz);
  padding: 7px 15px;
  border: 1px solid var(--iz);
  background: var(--ak);
  color: var(--gri);
  text-decoration: none;
  display: inline-block;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
/* D-68: sarı zemin kalktı; kalkma ve gölge kaldı. Süzgeç şeridiyle aynı. */
.ay-serit a.ay:hover,
.ay-serit a.ay-tum:hover {
  border-color: var(--murekkep);
  color: var(--murekkep);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px rgba(20, 23, 26, .5);
}
/* D-64: seçili ay ARTIK RENK DEĞİŞTİRMİYOR — düğme beyaz kalıyor, yalnızca
   yazısı kalınlaşıyor. Önce koyu zemin + beyaz yazıydı; fotoğrafçı sadeliği
   istedi. Çerçevesi biraz koyulaşıyor ki "seçili" yalnızca kalınlığa
   yaslanmasın (renk körlüğü ve düşük kontrastlı ekranlar için). */
.ay-serit .etkin {
  background: var(--ak);
  border-color: var(--murekkep);
  color: var(--murekkep);
  font-weight: var(--agirlik-kalin);
}
/* Karesi olmayan ay: gizlenmez, soluk durur (ilke #4). Tıklanamaz.
   D-63: kesikli çerçeve kaldırıldı — hoş görünmüyordu. Soluk yazı ve
   soluk zemin "burada bir şey yok" demeye zaten yetiyor. */
.ay-serit .soluk {
  color: var(--acikgri);
  background: transparent;
  cursor: default;
}
/* D-59: satırda DÖRT. D-54'te referansa birebir sadakat için iki sütundu;
   fotoğrafçının sonraki isteği "tüm alt sayfalarda ızgara dörde çıksın" oldu
   ve son söylenen geçerlidir. */
/* D-78: `align-items: start` — kullanıcının "fotoğrafların altında gri bant"
   dediği şey buydu. Izgara satırındaki kutular varsayılan olarak birbirine
   eşitlenir (stretch); satırın en uzun karesi kutuyu belirler, kısa kalan
   karenin altında `.foto-ogesi`nin gri zemini (#E0E0E0) açıkta kalır. Ölçüldü:
   tek bir kısa karede etiketin altında 69 piksel gri. Kutular artık kendi
   boylarında duruyor. Aynı düzeltme koleksiyon ızgarasına D-70'te yapılmıştı;
   buraya sıçramamış. */
.ayin-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
}
/* Ad bandı — site genelindeki kart şeridiyle (.kart .alt) aynı: koyu zemin,
   beyaz metin, aynı dolgu.

   Önce zemini yoktu ve `margin-top: 8px` ile görselden ayrılıyordu. O boşlukta
   ALTTAKİ .foto-ogesi'nin gri zemini (--iz) açığa çıkıyor, etiket de onun
   üstünde oturuyordu — sayfadaki "gri bant" buydu. D-78'de ızgaranın stretch
   yüzünden uzayan kutuları düzeltilmişti; bu ondan ayrı bir şey, kutu doğru
   boyda olsa da bant yine griydi.

   .foto-ogesi'nin zeminine DOKUNULMADI: o sınıfı koleksiyon detay sayfası da
   kullanıyor (Views/Shared/KoleksiyonDetay.cshtml) ve orada gri zemin görsel
   yüklenene kadar duran doğru yer tutucu.

   text-decoration: none gerekiyor — etiket bir bağlantının içinde, yoksa
   beyaz metin koyu bantta altı çizili çıkıyor. */
.ayin-etiket {
  display: block;
  background: var(--murekkep);
  color: #fff;
  padding: 15px 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
/* Hover hareketi — anasayfadaki .ayin-kare ile aynı dil: gölge kalkar,
   görsel hafifçe büyür. Arşivde daha önce hiç hareket yoktu.

   Kural .foto-ogesi'ne GENEL yazılmadı, .ayin-izgara ile sınırlandı: o sınıfı
   koleksiyon detay sayfası da kullanıyor ve orada kendi hover'ı var
   (.ad-ipucu açığa çıkıyor). İki hareketi üst üste bindirmemek gerekiyordu. */
.ayin-izgara .foto-ogesi { transition: box-shadow .28s ease; }
.ayin-izgara .foto-ogesi img { transition: transform .5s ease; }
.ayin-izgara .foto-ogesi:hover,
.ayin-izgara .foto-ogesi:focus-visible {
  box-shadow: 0 18px 38px -20px rgba(20, 23, 26, .45);
}
.ayin-izgara .foto-ogesi:hover img,
.ayin-izgara .foto-ogesi:focus-visible img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .ayin-izgara .foto-ogesi img { transition: none; }
  .ayin-izgara .foto-ogesi:hover img,
  .ayin-izgara .foto-ogesi:focus-visible img { transform: none; }
}

@media (max-width: 1100px) {
  .ayin-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ayin-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
  .ayin-izgara { grid-template-columns: 1fr; gap: 18px; }
}
/* Anasayfadaki şeritte gösterilen ayın adı — fotoğrafçının çizdiği düzende
   şeridin altında sade bir satır olarak duruyor. */
.ay-adi {
  font-size: 20px;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
/* D-70: `break-inside` ve `margin-bottom` gazete sütunu düzeninden kalmıştı;
   ızgarada boşluğu `gap` veriyor, alt boşluk fazladan satır aralığı yaratıyordu. */
.foto-ogesi {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--iz);
  cursor: pointer;
}
.foto-ogesi img { display: block; width: 100%; height: auto; }
.foto-ogesi .ad-ipucu {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 9px;
  background: linear-gradient(to top, rgba(39, 39, 39, .82), transparent);
  color: #fff;
  font-size: 12.5px;
  font-family: var(--baslik);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.foto-ogesi:hover .ad-ipucu,
.foto-ogesi:focus-visible .ad-ipucu { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) { .izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .izgara { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Sayfalama şeridi (D-83)

   Düğme dili sitedeki süzgeç/sekme düğmeleriyle aynı: ince kenarlık, büyük
   harf değil (numaralar zaten kısa), üstüne gelince koyulaşan kenarlık.
   Seçili sayfa dolu koyu — sekmelerdeki "seçili" ile aynı vurgu.
   ============================================================ */

.sayfalama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 38px 0 4px;
}
.sayfalama-numaralar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sayfalama-sayfa,
.sayfalama-ok {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--iz);
  background: var(--ak);
  color: var(--murekkep);
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--agirlik-arayuz);
  letter-spacing: .02em;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.sayfalama-sayfa:hover,
.sayfalama-ok:hover,
.sayfalama-sayfa:focus-visible,
.sayfalama-ok:focus-visible {
  border-color: var(--murekkep);
  background: var(--altin);
}
.sayfalama-secili,
.sayfalama-secili:hover {
  background: var(--murekkep);
  border-color: var(--murekkep);
  color: #fff;
}
/* Uçtaki ok, gidilecek yer kalmayınca kayboluyor değil SOLUYOR — şeridin
   genişliği sayfadan sayfaya zıplamasın, numaralar yerinde kalsın. */
.sayfalama-pasif {
  opacity: .34;
  cursor: default;
}
.sayfalama-bosluk {
  padding: 0 2px;
  color: var(--acikgri);
}

/* Kare sayısı satırındaki "3 / 7. sayfa" eki — sayıdan bir ton soluk. */
.kare-sayisi-sayfa { color: var(--gri); }

@media (max-width: 560px) {
  /* Dar ekranda ok yazıları şeridi iki satıra kırıyordu; numaralar yeter. */
  .sayfalama-ok { padding: 8px 10px; font-size: 12px; }
  .sayfalama-sayfa { padding: 8px 11px; }
}

body.kilit-scroll { overflow: hidden; }

/* Büyük görüntü (lightbox) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 22px;
  background: rgba(20, 20, 20, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
.lightbox.acik { opacity: 1; visibility: visible; }
.lightbox-govde {
  max-width: min(1200px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox-govde img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  background: var(--murekkep);
}
.lightbox-bilgi { text-align: center; color: #fff; }
.lightbox-bilgi .ad { font-family: var(--baslik); font-size: 20px; margin: 0 0 6px; }
.lightbox-bilgi .exif {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .65);
  font-variant-numeric: tabular-nums;
}
.lightbox-kapat,
.lightbox-onceki,
.lightbox-sonraki {
  position: absolute;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  cursor: pointer;
  transition: .16s;
}
.lightbox-kapat:hover,
.lightbox-onceki:hover,
.lightbox-sonraki:hover { background: var(--altin); border-color: var(--altin); color: var(--murekkep); }
.lightbox-kapat {
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 1;
}
.lightbox-onceki,
.lightbox-sonraki {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 24px;
  line-height: 1;
}
.lightbox-onceki { left: 16px; }
.lightbox-sonraki { right: 16px; }

@media (max-width: 560px) {
  .lightbox { padding: 70px 12px; }
  .lightbox-onceki { left: 6px; }
  .lightbox-sonraki { right: 6px; }
}

/* ============================================================
   Nerede Çekilmiş — özet satırı, ölçek, harita ve il paneli.
   Etkileşim (tıklama, panel doldurma) Faz 6'ya ait; burada yalnızca
   stiller hazır. SVG dosyasının kendisi hakkında bkz. lisanslar/OKUBENI.md
   — satır içi stil temizliği ve İstanbul filtresi kod tarafında yapılır.
   ============================================================ */

.ozet {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.ozet-yazi { font-size: 15px; color: var(--gri); }
.ozet-yazi b {
  font-family: var(--baslik);
  font-size: 27px;
  font-weight: var(--agirlik-arayuz);
  color: var(--murekkep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.olcek { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--gri); }
.olcek .basamaklar { display: flex; }
.olcek i { width: 26px; height: 13px; display: block; }
.olcek .uc { letter-spacing: .06em; }

.harita-alan {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 34px;
  align-items: start;
}
.harita-kutu { background: var(--ak); padding: 18px; color: var(--gri); }

svg#svg-turkey { width: 100%; height: auto; display: block; }
svg#svg-turkey path {
  fill: var(--y0);
  stroke: var(--ak);
  stroke-width: .8;
  transition: fill .18s ease;
  cursor: pointer;
}
svg#svg-turkey g.d1 path { fill: var(--y1); }
svg#svg-turkey g.d2 path { fill: var(--y2); }
svg#svg-turkey g.d3 path { fill: var(--y3); }
svg#svg-turkey g.d4 path { fill: var(--y4); }
svg#svg-turkey g.bos path { cursor: default; }
svg#svg-turkey g:hover:not(.bos) path { fill: var(--murekkep); }
svg#svg-turkey g.secili path { fill: var(--murekkep); }
svg#svg-turkey g:focus { outline: none; }
svg#svg-turkey g:focus-visible path { stroke: var(--murekkep); stroke-width: 2; }

/* Yan panel — seçili ilin dökümü */
.panel { background: var(--ak); padding: 22px; min-height: 340px; }
.panel .bos-mesaj { color: var(--gri); font-size: 14.5px; }
.panel h2 { font-size: 26px; margin: 0 0 2px; line-height: 1.1; }
.panel .plaka {
  font-size: 11.5px;
  color: var(--acikgri);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.panel .sayi {
  font-size: 14px;
  color: var(--gri);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--iz);
  margin-bottom: 14px;
}
.panel .sayi b { color: var(--murekkep); font-variant-numeric: tabular-nums; }
.dokum { display: grid; gap: 9px; margin-bottom: 18px; }
.dokum div { display: flex; justify-content: space-between; font-size: 14px; gap: 10px; }
.dokum span:last-child { font-variant-numeric: tabular-nums; color: var(--gri); }
.panel .kucukler { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 16px; }
.panel .kucukler div,
.panel .kucukler img { aspect-ratio: 3 / 2; }
.panel a.git {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--agirlik-arayuz);
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--murekkep);
  color: #fff;
  padding: 10px 17px;
  text-decoration: none;
  transition: .16s;
}
.panel a.git:hover { background: var(--altin); color: var(--murekkep); }

@media (max-width: 900px) {
  .harita-alan { grid-template-columns: 1fr; }
}

/* ============================================================
   Yönetim paneli — aynı belirteçler, ama daha yoğun ve süssüz.
   Sınıflar "yonetim-" öneki taşır; halka açık sitedeki .panel /
   .kart gibi adlarla çakışmasın diye.
   ============================================================ */

.yonetim-govde {
  display: flex;
  min-height: 100vh;
  background: var(--kagit);
  font-size: 14px;
}

/* D-89: menü yerinde durur, içerikle birlikte kaymaz.
   Fotoğrafçının sözleri: "Panelde sayfa ekranı taşıyorsa scrol edilebiliyor.
   Ancak side menü de scrol oluyor. Menü'nün olduğu yerde durması gerekir."
   Uzun listelerde (513 koleksiyon, tür kataloğu) menü ekranın çok üstünde
   kalıyor, başka ekrana geçmek için sayfanın tepesine dönmek gerekiyordu.

   `align-self: flex-start` şart: esnek kutuda öğe varsayılan olarak boyuna
   geriliyor, gerilen öğede `sticky` tutunacak yer bulamaz.
   `height: 100vh` + `overflow-y: auto`: menü ekrandan uzunsa KENDİ İÇİNDE
   kayar, sayfayı sürüklemez. */
.yonetim-yan {
  width: 240px;
  flex-shrink: 0;
  background: var(--murekkep);
  color: rgba(255, 255, 255, .85);
  padding: 24px 20px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.yonetim-marka {
  font-family: var(--baslik);
  font-size: 19px;
  font-weight: var(--agirlik-baslik);
  color: #fff;
  margin: 0 0 28px;
}
.yonetim-yan nav ul { display: grid; gap: 2px; }
.yonetim-yan nav a,
.yonetim-yan nav span {
  display: block;
  padding: 9px 10px;
  font-size: 13px;
  text-decoration: none;
  color: rgba(255, 255, 255, .78);
  border-left: 2px solid transparent;
}
.yonetim-yan nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.yonetim-yan nav a[aria-current="page"] {
  color: #fff;
  border-left-color: var(--altin);
  background: rgba(255, 255, 255, .08);
  font-weight: var(--agirlik-arayuz);
}
.yonetim-yan nav span {
  color: rgba(255, 255, 255, .38);
  cursor: default;
}

.yonetim-icerik { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.yonetim-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--ak);
  border-bottom: 1px solid var(--iz);
  font-size: 13px;
  color: var(--gri);
}
.yonetim-icerik main { padding: 28px; }
.yonetim-icerik h1 {
  font-size: 22px;
  font-weight: var(--agirlik-baslik);
  margin: 0 0 22px;
}
.yonetim-not { color: var(--gri); font-size: 14px; }
.yonetim-not-alt { margin: 6px 0 0; }
.yonetim-not-sifir { margin: 0; }
.yonetim-not-kucuk { font-size: 12px; }
.yonetim-nowrap { white-space: nowrap; }

/* Oturum ekranları (giriş / kurulum) — ortalanmış kart, yan menü yok */
.yonetim-oturum {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kagit);
  padding: 24px;
}
.yonetim-oturum-kutu {
  background: var(--ak);
  border: 1px solid var(--iz);
  padding: 36px 34px;
  width: 100%;
  max-width: 380px;
}
.yonetim-oturum-kutu .yonetim-marka {
  color: var(--murekkep);
  margin-bottom: 22px;
}
.yonetim-oturum-kutu h1 { font-size: 21px; margin: 0 0 6px; }
.yonetim-oturum-kutu p.yonetim-not { margin: 0 0 22px; font-size: 13.5px; }

/* Formlar */
.form-alani { display: grid; gap: 5px; margin-bottom: 18px; max-width: 420px; }
.form-alani label {
  font-size: 12px;
  font-weight: var(--agirlik-arayuz);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gri);
}
.yonetim-govde input[type="text"],
.yonetim-govde input[type="password"],
.yonetim-govde input[type="email"],
.yonetim-govde input[type="number"],
.yonetim-govde input[type="date"],
.yonetim-govde input[type="file"],
.yonetim-govde textarea,
.yonetim-govde select,
.yonetim-oturum input[type="text"],
.yonetim-oturum input[type="password"] {
  font-family: var(--sans);
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--iz);
  background: var(--ak);
  color: var(--murekkep);
  width: 100%;
}

/* Tablo içindeki dar sayı alanları (Ayarlar — profil ölçüleri) */
.yonetim-govde input:focus-visible,
.yonetim-govde textarea:focus-visible,
.yonetim-govde select:focus-visible,
.yonetim-oturum input:focus-visible {
  outline: 2px solid var(--su);
  outline-offset: 1px;
  border-color: var(--su);
}

/* Düğmeler */
/* D-107: ikincil düğme birincilin KUTUSUNU paylaşıyor, yalnızca rengi ayrı.
   Önce `.dugme-ikincil` tek başına yalnızca zemin/renk/çerçeve tanımlıyordu;
   yazı tipi, punto ve dolgu `.dugme`de kalmıştı. İki sınıf hiçbir yerde
   birlikte kullanılmıyor (78 yerde yalnız `.dugme-ikincil` var), yani o
   düğmeler baştan beri eksik stille duruyordu.

   Ölçüldü — aynı satırdaki üç düğme üç ayrı görünümdeydi:

   |                          | punto    | yazı tipi | dolgu    | yazının solu |
   |--------------------------|----------|-----------|----------|--------------|
   | `.dugme` (a)             | 13 px    | Ubuntu    | 10/20 px | 21 px        |
   | `.dugme-ikincil` (button)| 13,33 px | **Arial** | 1/6 px   | 7 px         |
   | `.dugme-ikincil` (a)     | 14 px    | Ubuntu    | **0**    | 1 px         |

   `<button>` Arial'a düşüyordu çünkü tarayıcı form denetimlerine sayfanın
   yazı tipini vermiyor; kural onu yazmadığı için varsayılan kalıyordu.

   `line-height` neden açıkça yazılıyor: gövdeden 1.6 geliyor ve `<a>` bunu
   alıyor, `<button>` almıyor (tarayıcı form denetimlerine `normal` veriyor).
   1.6 yazılınca ikisi de 20,8 px oluyor ve **mevcut `.dugme` yüksekliği
   (43 px) değişmiyor** — yani birincil düğmeler olduğu gibi kalıyor.

   `margin: 0`: aralık flex `gap` ile veriliyor, düğmenin kendi kenar boşluğu
   olmamalı. Tarayıcıların form denetimlerine verdiği varsayılan kenar boşluğu
   da böylece kapanıyor. */
.dugme,
.dugme-ikincil {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: var(--agirlik-arayuz);
  letter-spacing: .02em;
  line-height: 1.6;
  margin: 0;
  padding: 10px 20px;
  border: 1px solid var(--murekkep);
  background: var(--murekkep);
  color: #fff;
  cursor: pointer;
  transition: .16s;
}
.dugme:hover { background: var(--altin); color: var(--murekkep); border-color: var(--altin); }
.dugme-ikincil { background: transparent; color: var(--murekkep); border-color: var(--iz); }
.dugme-ikincil:hover { border-color: var(--murekkep); background: transparent; }

/* Tablolar */
.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tablo th {
  text-align: left;
  font-size: 11px;
  font-weight: var(--agirlik-kalin);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gri);
  padding: 8px 10px;
  border-bottom: 1px solid var(--murekkep);
}
.tablo td { padding: 9px 10px; border-bottom: 1px solid var(--iz); }
.tablo tr:hover td { background: var(--kagit); }

/* Bildirim kutusu — sakin, suçlayıcı olmayan.
   Sarı zemin OLUMLU ve uyarı niteliğindeki iletiler için: "kaydedildi",
   "bu işlem geri alınamaz", "şu kadar koleksiyon kategorisiz kalacak". */
.hata-kutusu,
.validation-summary-errors {
  background: var(--altin);
  border-left: 3px solid var(--su);
  color: var(--murekkep);
  padding: 14px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}
/* D-72: OLUMSUZ ileti — "yapılamadı". Kullanıcının sözleri: "kayıt yapıldı
   olumlu mesajı ile kayıt yapılamadı olumsuz cevabı ikisi de sarı olduğundan
   okumadım mesajı." Haklı: iki karşıt haber aynı kutuda, aynı renkte
   duruyordu. Renk artık haberi kendisi söylüyor, kullanıcı okumadan önce
   biliyor. Yalnız renge yaslanmıyor: şerit de koyulaşıyor ve metin kırmızı
   mürekkeple yazılıyor (renk körlüğü, tek renk ekran, kötü aydınlatma). */
.hata-kutusu-olumsuz,
.validation-summary-errors {
  background: var(--kirmizi-zemin);
  border-left-color: var(--kirmizi);
  color: var(--kirmizi);
}
.hata-kutusu ul,
.validation-summary-errors ul {
  margin: 4px 0 0;
  padding-left: 18px;
  list-style: disc;
}
.validation-summary-valid { display: none; }
/* Alan altındaki tek satırlık hata da aynı dili konuşuyor: eskiden bağlantı
   rengindeydi (--su), yani "olumsuz" olduğu renkten anlaşılmıyordu. */
.field-validation-error {
  display: block;
  color: var(--kirmizi);
  font-size: 12.5px;
  margin-top: 3px;
}
.field-validation-valid { display: none; }
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
  border-color: var(--kirmizi);
}

/* ============================================================
   Panel yardımcı bileşenleri — liste başlığı, süzgeç/arama formu,
   sayfalama, tablo sarmalayıcı, ağaç görünümü, ızgara kartları,
   bilgi grubu (fieldset). G3.3–G3.7 ekranlarının ortak iskeleti;
   satır içi stil yerine burada tanımlı (temizlik görevi).
   ============================================================ */

/* Başlık satırı: sayaç/özet üstte, eylem düğmeleri altında ve SOLDA.
   D-86: eskiden düğmeler space-between ile sayfanın en sağına gidiyordu.
   Fotoğrafçı sordu: "Yükleme butonları neden sayfanın en sağında? Diğer her
   sayfadaki gibi solda olmalı." Haklıydı — panelin geri kalanında düğme
   grubu (.yonetim-eylemler) her yerde kendi satırında ve sola dayalı duruyor;
   yalnızca bu dört ekran ayrıksıydı. Göz düğmeyi aramak için ekranın öbür
   ucuna gitmiyor artık.

   Sütun düzeni ve gap bilerek seçildi: satırda tek çocuk varken (yalnızca
   özet cümlesi, düğmesiz — Ayın Fotoğrafı yıl ekranı) altta boşluk kalmıyor. */
.yonetim-satir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.yonetim-satir p.yonetim-not { margin: 0; }

/* Düğme grubu — satır sonu, form altı gibi tekrar eden gruplar */
.yonetim-eylemler {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* D-106: gruptaki form yalnızca gönderme kabı, bir kutu değil.
   `display: flex` ile formun yüksekliği içindeki düğmeye eşitleniyor ve
   düğme, formun gerilen boyunu doldurup komşularıyla aynı boya geliyor.

   Neden gerekti: form varsayılan olarak blok. İçindeki satır içi düğmenin
   altına birkaç piksel satır boşluğu ekliyor, yani komşu bağlantılardan
   yüksek oluyordu; grubun `stretch` hizası da bağlantıları o boya kadar
   gerip düğmelerinin altında boş kutular bırakıyordu.

   `align-items: flex-start` de denendi — hizayı düzeltiyor ama düğmeleri
   eşit yükseklikte tutan `stretch`'i kaldırdığı için bu sefer boylar
   ayrışıyor: `.dugme`de `line-height` tanımlı değil, `<a>` gövdeninkini
   alırken `<button>` tarayıcının `normal` değerini alıyor. `stretch`
   kalsın, düzeltme formda olsun. */
.yonetim-eylemler > form { display: flex; }

/* Süzgeç / arama formu */
.yonetim-suzgec-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 20px;
}
.yonetim-alan-inline {
  display: grid;
  gap: 5px;
  margin-bottom: 0;
}
.yonetim-alan-inline label {
  font-size: 12px;
  font-weight: var(--agirlik-arayuz);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gri);
}
.yonetim-alan-inline input[type="text"],
.yonetim-alan-inline select {
  min-width: 220px;
}

/* Tablo yatay kaydırma sarmalayıcı */
.yonetim-tablo-sarma { overflow-x: auto; }

/* Sayfalama */
.yonetim-sayfalama {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Bölüm sekmeleri (Kategori ekranı: Kuşlar/Geziler/Makro Doğa) */
.yonetim-sekmeler {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

/* Kategori ağacı */
.yonetim-agac-ekle {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.yonetim-agac-ekle input[type="text"],
.yonetim-agac-dal-ekle input[type="text"] {
  max-width: 280px;
}

/* Katalog aile seçicisi (G9.5) yanındaki metin kutusuyla aynı genişlikte
   durmalı; sınırsız bırakılınca satırı baştan sona kaplıyordu. */
.yonetim-aile-secici {
  max-width: 280px;
}
.yonetim-agac-dal { margin-bottom: 2px; }
/* Başlık satırı sayfanın tamamına yayılmıyor: Düzenle/Sil bağlantıları
   adın 780px ötesine düşünce hangi satıra ait oldukları güç anlaşılıyordu.
   Sınırlı genişlik hem yakınlaştırıyor hem sütun hizasını koruyor. */
.yonetim-agac-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 4px;
  max-width: 400px;
  border-radius: 2px;
}
.yonetim-agac-baslik:hover {
  background: var(--altin);
}
.yonetim-agac-eylemler {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.yonetim-agac-dal-ekle {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.yonetim-agac-altlar {
  list-style: none;
  margin: 0 0 0 24px;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--iz);
}

/* Bilgi grubu — gezi alanları gibi ilişkili form bölümleri */
.yonetim-fieldset {
  border: 1px solid var(--iz);
  padding: 16px;
  margin-bottom: 18px;
}
.yonetim-fieldset legend {
  padding: 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gri);
}

/* Küçük görsel ızgarası — koleksiyon/fotoğraf listeleri */
.yonetim-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.yonetim-izgara-kart {
  background: var(--ak);
  border: 1px solid var(--iz);
}
.yonetim-izgara-gorsel {
  aspect-ratio: 4 / 3;
  background: var(--kagit);
  overflow: hidden;
}
.yonetim-izgara-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yonetim-izgara-alt { padding: 8px 10px 10px; }
.yonetim-izgara-ad { font-size: 13px; margin-bottom: 6px; }
.yonetim-izgara-olcu {
  font-size: 11px;
  color: var(--acikgri);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.yonetim-izgara-eylemler { display: flex; gap: 6px; flex-wrap: wrap; }

/* D-104: kapak denetimi her kartta KENDİ satırında dursun.
   Yoksa şu oluyordu: "Kapak yap" düğmesi Düzenle/Sil ile aynı satıra
   sığmayıp alta kayıyor, ama kapak olan karedeki kısa "Kapak" yazısı
   sığıyordu — böylece Düzenle ve Sil kartlar arasında yer değiştiriyordu.
   Sil geri alınamaz (orijinal dosya da gider); düğmenin yerinin oynaması
   yanlış tıklama davetidir. */
.yonetim-izgara-eylemler > .yonetim-izgara-kapak { flex-basis: 100%; }

/* Ayın Fotoğrafı — yıl şeridi ve boş ay kutusu (D-54) */
.yonetim-yil-serit {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* Boş ay, dolu ayla aynı kutuyu kaplar — ızgara zıplamasın. Sitedeki soluk
   ay göstergesiyle aynı dili konuşur (ilke #4: eksik gizlenmez, gösterilir). */
.yonetim-bos-kutu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: var(--acikgri);
  letter-spacing: 0.06em;
}
/* Izgara kartında seçili olanı belli et — tablodaki .yonetim-secili-satir'ın
   kart karşılığı. */
.yonetim-izgara-kart.yonetim-secili-satir { border-color: var(--altin); border-width: 2px; }

/* Bilgi dökümü — EXIF gibi anahtar/değer çiftleri */
.yonetim-dokum { display: grid; gap: 8px; margin-bottom: 18px; max-width: 420px; }
.yonetim-dokum div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.yonetim-dokum span:last-child { color: var(--gri); font-variant-numeric: tabular-nums; }

/* Watermark önizleme kutusu (Ayarlar ekranı) */
.yonetim-onizleme {
  position: relative;
  max-width: 420px;
  background: var(--kagit);
  border: 1px solid var(--iz);
  overflow: hidden;
}
.yonetim-onizleme img { width: 100%; display: block; }
.yonetim-onizleme .yonetim-onizleme-logo {
  position: absolute;
  pointer-events: none;
}

/* Menü ayracı — bölüm bazlı panel (K-26, D-17): "Özet" ile bölüm sayfaları
   arasında, bölüm sayfaları ile diğer ekranlar arasında ince bir çizgi. */
.yonetim-yan nav .yonetim-menu-ayrac {
  height: 1px;
  margin: 8px 10px;
  background: rgba(255, 255, 255, .12);
}

/* Grup başlığı (D-42). Ayraç yalnızca bir çizgiydi ve neyi neden ayırdığını
   söylemiyordu; başlık, menüyü ilk kez açan için grubu adlandırıyor.
   Tıklanabilir değil — bir ekran değil, bir küme adı. */
.yonetim-yan nav .yonetim-menu-baslik {
  margin: 18px 10px 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: rgba(255, 255, 255, .38);
}
.yonetim-yan nav li:first-child + .yonetim-menu-baslik {
  margin-top: 12px;
}

/* Kilitli bölüm rozeti — koleksiyon formunda "hangi bölüm?" kararı ortadan
   kalktığı için (K-26) bölüm artık seçilmez, yalnızca gösterilir. */
.yonetim-bolum-rozet {
  display: inline-block;
  margin: 0;
  padding: 7px 12px;
  background: var(--kagit);
  border: 1px solid var(--iz);
  font-size: 13.5px;
  font-weight: var(--agirlik-arayuz);
}

/* Alt başlık — Türkiye ekranındaki "Yurtdışı" ve seçili grup başlıkları gibi
   ikincil bölümler için (G4 sayfa iskeletiyle çakışmasın diye kendi sınıfı). */
.yonetim-alt-baslik {
  font-family: var(--baslik);
  font-size: 18px;
  font-weight: var(--agirlik-baslik);
  margin: 30px 0 14px;
}

/* Seçili tablo satırı — Türkiye ekranında hangi il/ülkenin gösterildiğini işaretler. */
.yonetim-secili-satir td { background: var(--altin); }

/* Küçük görsel ızgarası kartı bir bağlantı olduğunda (Türkiye ekranı —
   fotoğrafa tıklayınca düzenleme ekranına gider) düz metin gibi görünmesin. */
a.yonetim-izgara-baglanti {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.yonetim-izgara-baglanti:hover { border-color: var(--su); }

@media (max-width: 700px) {
  .yonetim-govde { flex-direction: column; }
  /* Dar ekranda menü yatay bir şerit — üstte, içeriğin önünde. Orada
     yapışkanlık istenmez: ekranın yarısını kaplardı (D-89). */
  .yonetim-yan {
    width: 100%;
    padding: 16px 20px;
    position: static;
    height: auto;
    overflow: visible;
  }
  .yonetim-yan nav ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .yonetim-yan nav a,
  .yonetim-yan nav span { padding: 4px 0; border-left: 0; }
  .yonetim-icerik main { padding: 20px; }
}

/* Koleksiyon seçici (D-19) — fotoğraf listesi ve yükleme formu ortak kullanır.
   519 koleksiyon var; ızgara hep ekranda durur, yazdıkça süzülür, 25'erli
   sayfalanır. Eski açılır liste (koleksiyon-arama-*) kaldırıldı: sunucudaki
   LIKE araması Türkçe harflerde çalışmıyordu, süzme artık tarayıcıda. */
.koleksiyon-secici { max-width: 560px; }

.koleksiyon-secici-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.koleksiyon-secici-ust label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--murekkep);
  opacity: 0.7;
}
.koleksiyon-secici-kutu {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--iz);
  background: var(--ak);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--murekkep);
}
.koleksiyon-secici-sayac {
  font-size: 12.5px;
  color: var(--murekkep);
  opacity: 0.65;
  white-space: nowrap;
}

.koleksiyon-secici-liste {
  border: 1px solid var(--iz);
  background: var(--ak);
}
.koleksiyon-secici-liste .yonetim-not { padding: 12px; margin: 0; }

.koleksiyon-secici-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 8px 11px;
  border: none;
  border-bottom: 1px solid var(--iz);
  background: transparent;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--murekkep);
  text-decoration: none;
  cursor: pointer;
}
.koleksiyon-secici-satir:last-child { border-bottom: none; }
.koleksiyon-secici-satir:hover,
.koleksiyon-secici-satir:focus-visible {
  background: var(--altin);
  outline: none;
}
.koleksiyon-secici-ad { font-weight: var(--agirlik-baslik); }
.koleksiyon-secici-bolum {
  font-size: 12px;
  opacity: 0.6;
  white-space: nowrap;
}

.koleksiyon-secici-sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}
.koleksiyon-secici-sayfa-dugmesi {
  padding: 5px 11px;
  border: 1px solid var(--iz);
  background: var(--ak);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--murekkep);
  cursor: pointer;
}
.koleksiyon-secici-sayfa-dugmesi:hover:not(:disabled) { background: var(--altin); }
.koleksiyon-secici-sayfa-dugmesi:disabled { opacity: 0.4; cursor: default; }
.koleksiyon-secici-sayfa-durum { font-size: 13px; opacity: 0.7; }

.koleksiyon-secici-uyari { padding: 12px; margin: 0; font-size: 13.5px; }

.koleksiyon-secili-gosterge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--iz);
  background: var(--ak);
  max-width: 560px;
}
.koleksiyon-secili-gosterge b { font-weight: var(--agirlik-arayuz); }

/* Sayfa bantları ekranı (D-20) — altı bölümün bant görseli ve açıklaması. */
.bant-kutusu-bilgi {
  border: 1px solid var(--iz);
  border-left: 3px solid var(--altin);
  background: var(--ak);
  padding: 12px 14px;
  margin: 14px 0 24px;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 760px;
}

.bant-satiri {
  border-top: 1px solid var(--iz);
  padding-top: 18px;
  margin-top: 24px;
}
.bant-satiri h2 { margin: 0 0 12px; }

.bant-satiri-govde {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Önizleme, bandın gerçek oranına yakın dursun — orada da orta şerit görünür. */
.bant-onizleme {
  flex: 0 0 300px;
  height: 96px;
  border: 1px solid var(--iz);
  background: var(--murekkep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bant-onizleme img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bant-onizleme-bos {
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
}

.bant-satiri-alanlar { flex: 1 1 320px; min-width: 0; }
.bant-satiri-alanlar textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--iz);
  background: var(--ak);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--murekkep);
  resize: vertical;
}

@media (max-width: 700px) {
  .bant-onizleme { flex: 1 1 100%; }
}

/* ============================================================
   Anasayfa — açılış ve Hakkımda (D-21, şartname §7.1 ve §7.2)
   ============================================================ */

/* Açılış: genişliğe bağlı, ekran boyuna değil (D-94). Görsel hem yatay hem
   dikey ortadan kırpılır — panelin ölçü yazısı bunu söylüyor, değişmedi. */
.acilis {
  position: relative;
  /* D-94: eskiden ekranın tamamını kaplıyordu (`calc(100svh - üst blok)`).
     Fotoğrafçı örnek siteyle yan yana koyunca fark buradaydı: bizde açılış
     pencereyi doldurup altındaki "Son Yüklenenler" bölümünü ekranın dışına
     itiyordu, örnek sitede açılışın altı ilk ekranda görünüyor.

     Örnek sitenin kuralı ölçüldü (dannygreenphotography.com açılış görseli):
     1014 px pencerede 532, 1440'ta 598, 1920'de 598, 2560'ta 598 — yani
     genişliğin ~%52'si, 600'de tavan yapıyor. Ekran YÜKSEKLİĞİNE bağlı
     değil; alçak bir pencerede de aynı boyda kalıyor.

     clamp'in tabanı 420: dar telefonda %52 çok kısa kalıyor (375 px'de 195)
     ve açılış yazısı sığmıyor. Eski kuralın min-height'ı da 420'ydi. */
  height: clamp(420px, 52vw, 600px);
  overflow: hidden;
  background: var(--murekkep);
  display: flex;
  align-items: flex-end;
}
.acilis-gorsel {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.acilis-yazi {
  position: relative;
  width: 100%;
  background: linear-gradient(transparent, rgba(20, 23, 26, .68));
  padding: 90px 0 52px;
}
.acilis h1 {
  font-weight: var(--agirlik-baslik);
  color: #fff;
  font-size: clamp(42px, 6.5vw, 86px);
  line-height: 1;
  margin: 0;
  letter-spacing: -.02em;
}
.acilis p {
  color: rgba(255, 255, 255, .88);
  margin: 14px 0 0;
  font-size: 17px;
  max-width: 54ch;
}

.hakkimda-govde {
  display: flex;
  gap: 44px;
  align-items: flex-start;
}
/* Portre kırpılmaz — yüklenen oran korunur (panelin ölçü yazısı böyle diyor).
   D-38: bölüm anasayfadan kendi sayfasına taşınınca portre 300'den 340'a
   büyütüldü ve yapışkan yapıldı. Özgeçmiş uzun; portre eskiden yukarıda kalıp
   yanında uzun bir boşluk bırakıyordu. Yapışkanlık salt CSS, JavaScript yok
   (§0) — üst başlık sabit değil, bu yüzden basit bir üst boşluk yetiyor. */
.hakkimda-portre {
  flex: 0 0 340px;
  position: sticky;
  top: 40px;
}
.hakkimda-portre img {
  width: 100%;
  height: auto;
  display: block;
}
.hakkimda-metin { flex: 1 1 auto; min-width: 0; }
.hakkimda-metin p + p { margin-top: 1em; }

@media (max-width: 800px) {
  .hakkimda-govde { flex-direction: column; gap: 26px; }
  /* Dar ekranda portre metnin üstünde tam genişlikte akar; yapışkanlık
     burada işe yaramaz, kapatılıyor. */
  .hakkimda-portre { flex: 0 0 auto; max-width: 260px; position: static; }
  .acilis-yazi { padding: 64px 0 36px; }
}

/* Panel: Hakkımda portre önizlemesi dikey durur; açılış önizlemesi geniş. */
.portre-onizleme {
  flex: 0 0 160px;
  border: 1px solid var(--iz);
  background: var(--murekkep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 200px;
}
.portre-onizleme img { width: 100%; height: auto; display: block; }
.bant-onizleme-genis { flex: 0 0 360px; height: 202px; }
.bant-grup-basligi { margin-top: 40px; }

/* "Görseli kaldır" ikinci bir form; "Kaydet"e yapışmasın. */
.bant-satiri-alanlar form + form { margin-top: 14px; }

/* Şifre değiştirme formu (D-22) — tek sütun, dar. */
.dar-form { max-width: 420px; }
.dar-form input[type="password"] {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--iz);
  background: var(--ak);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--murekkep);
}

/* ============================================================
   Koleksiyon kartında hover ipucu ve lightbox küçük resim paneli (D-23)
   ============================================================ */

/* Referans sitedeki "View Gallery" karşılığı. Kartın kendisi zaten bağlantı;
   bu yazı yalnızca görsel bir davet, o yüzden aria-hidden. Dokunmatik
   ekranda hover olmadığı için görünmez — kayıp yok. */
.kart-ipucu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 23, 26, .42);
  color: #fff;
  font-family: var(--baslik);
  font-size: 17px;
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.kart-ipucu::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(50% - 16px);
  width: 128px;
  height: 1px;
  background: rgba(255, 255, 255, .55);
}
.kart:hover .kart-ipucu,
.kart:focus-visible .kart-ipucu { opacity: 1; }

/* --- Lightbox: ızgara düğmesi --- */
.lightbox-izgara-dugmesi {
  position: absolute;
  top: 18px;
  right: 68px;          /* kapat düğmesinin solunda */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  cursor: pointer;
  transition: .16s;
}
.lightbox-izgara-dugmesi:hover,
.lightbox-izgara-dugmesi[aria-pressed="true"] {
  background: var(--altin);
  border-color: var(--altin);
}
.izgara-simge {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 3px;
}
.izgara-simge i { display: block; background: currentColor; }
.lightbox-izgara-dugmesi[aria-pressed="true"] .izgara-simge i { background: var(--murekkep); }

/* --- Lightbox: sahne ve küçük resim paneli --- */
.lightbox-sahne {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: min(1200px, 92vw);
  max-height: 92vh;
}
/* Panel açılınca sahne genişler ki daralan görsel ortada boğulmasın. */
.lightbox.kucukler-acik .lightbox-sahne { max-width: min(1500px, 96vw); }

.lightbox-kucukler {
  flex: 0 0 232px;
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lightbox-kucukler ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.kucuk-oge {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
  opacity: .62;
  transition: opacity .16s ease, border-color .16s ease;
}
.kucuk-oge img { width: 100%; height: 76px; object-fit: cover; display: block; }
.kucuk-oge:hover,
.kucuk-oge:focus-visible { opacity: 1; outline: none; border-color: rgba(255, 255, 255, .5); }
.kucuk-oge.secili { opacity: 1; border-color: var(--altin); }

/* Panel açıkken büyük görsel daralır — ikisi aynı anda görünsün. */
.lightbox.kucukler-acik .lightbox-govde img { max-height: 66vh; }

/* Dar ekranda yan yana sığmaz: panel alta iner, tek satır şerit olur. */
@media (max-width: 860px) {
  .lightbox-sahne { flex-direction: column; gap: 12px; }
  .lightbox-kucukler {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .lightbox-kucukler ul { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 92px; }
  .kucuk-oge img { height: 62px; }
  .lightbox.kucukler-acik .lightbox-govde img { max-height: 46vh; }
  .lightbox-izgara-dugmesi { right: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .kart-ipucu, .kucuk-oge, .lightbox-izgara-dugmesi { transition: none; }
}

/* .lightbox-govde artık .lightbox-sahne'nin içinde; kendi genişlik sınırı
   sahnedekiyle çakışıp panel açıkken daralmasını engelliyordu. */
.lightbox-sahne .lightbox-govde {
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* ============================================================
   Türkiye sayfası — harita süzgeci (D-24, K-13, şartname §6)
   ============================================================ */

/* D-81: bölümün üst boşluğu bu sayfada kısaldı. Sayfa haritayla açılıyor;
   74 piksellik boşluk haritayı aşağı itmekten başka bir iş görmüyordu. */
.harita-bolumu { padding-top: 30px; }

.harita-sarma { margin-top: 6px; }

/* D-80: harita ilk bakışta bütün görünmeli — kullanıcının isteği buydu.
   Haritadan önceki metinler altına alındı ve harita, üstünde kalan yerden
   fazlasını kaplamayacak şekilde sınırlandı.

   D-81: kazanılan 94 piksel (bölüm boşluğu 74→30, sekme üstü 18→0, sekmeyle
   harita arası 48→16) haritaya verildi. İki sınır birden gevşedi:

   · Genişlik 1005 → 1180: içerik sütununun tam eni. Harita artık sütunu
     dolduruyor; 1005 sayısı SVG'nin doğal eniydi, bir karar değildi.
   · Yükseklikteki pay 400 → 310: haritanın üstünde kalan yer o kadar azaldı.

   Ölçüldü (1440×900): harita 1005×490 → 1180×575, yani %17 büyüdü ve anahtar
   şeridiyle birlikte hâlâ ekrana sığıyor. Alçak ekranda yükseklik sınırı
   devreye girip haritayı küçültüyor — küçük ama TAMAMI görünür kalıyor.
   240 piksellik taban, çok kısa pencerelerde haritanın okunmaz hâle
   gelmesini engelliyor. */
.harita {
  display: block;
  width: 100%;
  height: auto;
  /* D-92: 1180 sabiti kalktı. D-81'in gerekçesi "içerik sütununun tam eni"
     idi; sütun 1400'e çıkınca sabit sayı o gerekçeyi bozup haritayı sütunun
     içinde dar bırakırdı. Gerekçe yazıya geçti: sütun ne kadarsa o kadar. */
  max-width: 100%;
  max-height: max(240px, calc(100vh - 310px));
  margin: 0 auto;
}

/* Koyuluk kademeleri — sitenin kendi paletinden, zeminden mürekkebe.
   Altın vurgu seçili il için ayrıldı, kademelerde kullanılmıyor. */
.harita .il path {
  stroke: var(--kagit);
  stroke-width: 1;
  transition: fill .16s ease;
}
.harita .kademe-0 path { fill: #dcdcd8; }
.harita .kademe-1 path { fill: #b9c3bd; }
.harita .kademe-2 path { fill: #8ba094; }
.harita .kademe-3 path { fill: #5c7668; }
.harita .kademe-4 path { fill: #33473d; }

/* D-80: haritadaki sarı kalktı. Sitedeki son sarı hover'lardan biriydi
   (D-68'de kaldırılmıştı, haritaya sıçramamış) ve beş kademeli yeşil
   ölçeğin ortasında yabancı duruyordu.

   Yerine gelen renk kademelerden BİRİ DEĞİL, olamaz da: seçili il "en çok
   kare" gibi okunurdu. Aynı yeşil ailesinden ama belirgin biçimde daha
   doygun bir ton seçildi (#8FC7A8) — kademeler soluk olduğu için doygunluk
   tek başına ayırt ediyor. Seçili ilde ayrıca koyu ve kalın çerçeve var,
   yani ayrım yalnızca renge yaslanmıyor. */
.harita a { cursor: pointer; }
.harita a:hover path,
.harita a:focus-visible path { fill: var(--harita-vurgu); }
.harita a:focus-visible { outline: none; }
.harita a:focus-visible path { stroke: var(--murekkep); stroke-width: 1.6; }

.harita .secili path {
  fill: var(--harita-vurgu);
  stroke: var(--murekkep);
  stroke-width: 1.4;
}

/* Fotoğrafı olmayan iller tıklanamaz — imleç de bunu söylesin. */
.harita g.il { cursor: default; }

.harita-anahtar {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(20, 23, 26, .62);
}
.harita-anahtar li { display: flex; align-items: center; gap: 6px; }
.harita-anahtar i {
  width: 15px;
  height: 15px;
  display: block;
  border: 1px solid rgba(20, 23, 26, .12);
}
.harita-anahtar .kademe-0 { background: #dcdcd8; }
.harita-anahtar .kademe-1 { background: #b9c3bd; }
.harita-anahtar .kademe-2 { background: #8ba094; }
.harita-anahtar .kademe-3 { background: #5c7668; }
.harita-anahtar .kademe-4 { background: #33473d; }

.il-sonuc-ust {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.il-sonuc-ust h2 { margin: 0; }
.il-sonuc-ust .giris { margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .harita .il path { transition: none; }
}


/* --- Nerede Çekilmiş: bölüm süzgeci ve koleksiyon öbekleri (D-27) --- */

/* Süzgeç bir bağlantı şerididir; JS yok, her biri kendi adresine gider. */
/* D-78: bu şeridin kendi düğme kuralları kaldırıldı; biçim artık .suzgec ile
   ortak (yukarıda). Burada yalnızca şeridi sonuçlardan ayıran çizgi kalıyor —
   o, sayfaya özgü ve düğme dilinin parçası değil. */
.bolum-suzgec {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--iz);
}

.obek { margin-bottom: 44px; }
.obek:last-child { margin-bottom: 0; }

.obek-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.obek-ust h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: .01em;
}
.obek-bilgi {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  color: var(--gri);
}
.obek-bolum {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Kareler ızgarası — koleksiyon sayfasındaki ızgaradan daha küçük gözlü,
   çünkü burada bir ilde çok koleksiyon yan yana durabilir. */
.obek-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
/* D-57: burada da kırpma yok — kutu fotoğrafın oranını alıyor. */
.obek-kare {
  display: block;
  overflow: hidden;
  background: var(--iz);
  align-self: start;
}
.obek-kare img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s ease;
}
.obek-kare:hover img,
.obek-kare:focus-visible img { transform: scale(1.03); }

.obek-hepsi {
  margin: 12px 0 0;
  font-size: 13px;
}
.obek-hepsi a { color: var(--gri); }
.obek-hepsi a:hover { color: var(--murekkep); }

.geri-yol { margin: -8px 0 24px; font-size: 14px; }

@media (max-width: 560px) {
  .obek-izgara { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .obek-kare img { transition: none; }
  .obek-kare:hover img { transform: none; }
}

/* Türkiye / Dünya sekmeleri (D-25) — bölüm süzgeciyle aynı kalıp, ama
   haritanın üstünde durduğu için biraz daha belirgin. */
/* D-78: bu sekmelerin kendi kuralları kaldırıldı; biçim artık .ikili ile
   ortak (yukarıda). Kalan yalnızca boşluklar.

   D-81: sekmeler yukarı çekildi ve haritayla arası daraltıldı. Üstteki
   18 piksel ve alttaki 22 pikselden kazanılan yer haritaya gitti; sekmelerle
   harita zaten aynı işin iki parçası, aralarında bir bölüm boşluğu kadar
   mesafe olmasının bir gerekçesi yoktu. */
.harita-sekmeler {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Çekilmemiş tür — kart kalıbının soluk hâli (K-04: katalog tam gösterilir,
   çekilmemişler soluk durur). Kart olarak durur ki tür kataloğu sitenin geri
   kalanıyla aynı görünsün; boş kutu çerçeveyle belirtilir. */
.kart.bos { background: transparent; box-shadow: none; }
.kart.bos:hover { transform: none; box-shadow: none; }
.kart.bos .foto {
  background: transparent;
  border: 1px solid var(--iz);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kart.bos .foto::after { content: ""; width: 18px; height: 1px; background: var(--iz); }
.kart.bos .alt { background: transparent; color: var(--acikgri); padding-left: 0; padding-right: 0; }
.kart.bos .ad { color: var(--acikgri); }
.kart.bos .adet { color: var(--acikgri); }

/* Tür kataloğu 513 kart taşıyor; genel üç sütunluk ızgara burada fazla iri
   kalıyor. Aynı kart kalıbı, biraz daha sık gözle. */
.turler { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) {
  .turler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .turler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- İletişim sayfası (şartname §9) --- */

.iletisim-duzen {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 30px;
  align-items: start;
}
/* .form-alani panel ekranlarına göre 420 piksele sınırlı; burada sütunu
   doldurmalı. */
.iletisim-form .form-alani { max-width: none; margin-bottom: 18px; }
.iletisim-form label { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .04em; }
.iletisim-form .istege-bagli { color: var(--gri); letter-spacing: 0; }
.iletisim-form input[type="text"],
.iletisim-form input[type="email"],
.iletisim-form input[type="tel"],
.iletisim-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--iz);
  border-radius: 2px;
  background: var(--ak);
  font: inherit;
  color: var(--murekkep);
}
.iletisim-form input:focus-visible,
.iletisim-form textarea:focus-visible { outline: none; border-color: var(--murekkep); }
.iletisim-form textarea { resize: vertical; min-height: 150px; }

.iletisim-not {
  font-size: 12.5px;
  color: var(--gri);
  line-height: 1.6;
  margin: 4px 0 18px;
  max-width: 52ch;
}

/* Bal küpü — gözden ve ekran okuyucudan uzak, ama display:none değil:
   bazı botlar display:none alanları atlar, konumlandırılmış olanı doldurur. */
.bal-kupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.iletisim-bilgi h3 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gri);
  margin: 0 0 14px;
}
.iletisim-bilgi ul { list-style: none; padding: 0; margin: 0; }
.iletisim-bilgi li { margin-bottom: 10px; line-height: 1.5; }

@media (max-width: 900px) {
  .iletisim-duzen { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* Panelden gelen düz metin sayfaları (gizlilik vb.) — okunaklı satır uzunluğu. */
.duz-metin { margin-top: 24px; }
.duz-metin p { margin: 0 0 16px; line-height: 1.75; }
.duz-metin p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Okuma sütunu (D-40)

   Uzun metin sayfalarında — blog yazısı, gizlilik/KVKK metni —
   içeriğin tamamı bu sütunda durur ve sütun kabın ORTASINDA olur.

   Öncesinde metin 68ch ile sınırlıydı ama kabın soluna yapışıyordu:
   1600 piksellik ekranda solda 231, sağda 746 piksel boşluk kalıyor,
   sayfa tek yana yığılmış görünüyordu.

   Sınır neden hâlâ var: satır uzadıkça göz satır başını kaybeder.
   Metni kabın tamamına yaymak okumayı zorlaştırırdı. Doğru çözüm
   sütunu genişletmek değil, ortalamak.

   Başlık ve etiket de bu sütunun İÇİNDE durmalı — yalnızca
   paragrafları ortalayıp başlığı solda bırakmak daha kötü görünür.
   ------------------------------------------------------------ */
.okuma-sutunu {
  max-width: 68ch;
  margin-inline: auto;
}

/* ============================================================
   Anasayfa — üç kapı, ayın fotoğrafı, kuş sayacı, son kareler
   (şartname §7.3-§7.7, D-33)
   ============================================================ */

/* Kapılar: eşit genişlikte büyük kartlar, altta koyu şeritte ad.
   D-58 ile dört oldu (Kuşlar · Geziler · Galeri · Makro Doğa). */
.kapilar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.kapi {
  display: block;
  text-decoration: none;
  background: var(--murekkep);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.kapi:hover,
.kapi:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(20, 23, 26, .4);
}
/* D-68: seçili kutu artık sarı çerçeveyle değil, DAHA KOYU BİR GÖLGEYLE
   belli oluyor. Kutu hafifçe kalkık duruyor — üstüne gelinmiş gibi, ama
   kalıcı. Fotoğrafçı sarı çerçeveyi beğenmedi; renk yerine derinlik.
   Fotoğrafın yanında renk yarışa girer, gölge girmez. */
.kapi.etkin {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(20, 23, 26, .55);
}

/* Seçili kapının koleksiyonları */
.kapi-koleksiyonlar { margin-top: 26px; }
.kapi-koleksiyonlar > .giris { margin-top: 16px; }
/* D-102: kapı görseli sabit 2:1 kutuda, KIRPILARAK yerleşiyor. D-57'nin
   "kırpma yok" kuralı burada geçerli değil — gerekçesi buraya uymuyor.

   Neden: kutudaki görsel bir koleksiyon kapağı değil, o bölümün SAYFA BANDI.
   Bantlar bant olarak ayrı ayrı hazırlandığı için oranları tutmuyor; canlıda
   ölçüldü — Kuşlar 1,50 · Geziler 2,28 · Galeri 2,67 · Makro Doğa 2,28.
   Görsel yükseklikleri 213/140/120/140 px çıkıyordu. Kutu boyu dördünde de
   281 px olduğu için kısa görselin ALTINDA koyu boşluk kalıyor (Galeri'de
   93 px) ve dört ad dört ayrı hizada duruyordu.

   D-57 asıl geçerli olduğu yerde, koleksiyon kapaklarında (.kart .foto)
   olduğu gibi duruyor: orada görsel sergilenen karenin kendisidir. Buradaki
   ise tıklanacak bir kapının üstündeki gezinme döşemesi — bandın tam hâli
   zaten bölüm sayfasının tepesinde duruyor.

   Oran neden 2:1: bu görseller geniş şerit kadrajıyla hazırlanıyor. 16:9 da
   denendi, geniş olanlardan daha çok yiyordu (Geziler'de en sağdaki
   yürüyüşçü kesiliyordu); 2:1'de dördü de içeride kalıyor.

   :empty kuralı kalktı: kutunun oranı artık taban kuralda olduğu için
   görseli olmayan kapı da aynı boyda duruyor — hizanın bozulmaması zaten
   bu kararın amacı. */
.kapi-gorsel {
  aspect-ratio: 2 / 1;
  background: var(--iz);
  overflow: hidden;
}
.kapi-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.kapi:hover .kapi-gorsel img { transform: scale(1.04); }
.kapi-yazi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px 18px;
  color: #fff;
}
.kapi-yazi .ad { font-family: var(--baslik); font-size: 21px; }
.kapi-yazi .adet { font-size: 11.5px; color: rgba(255, 255, 255, .6); letter-spacing: .05em; }

/* Ayın fotoğrafı: tek büyük kare, sayfanın soluğunu kestiği yer. */
/* D-63: ayın fotoğrafına da üstüne gelince hareket. Sayfadaki diğer kareler
   (kapılar, son kareler) zaten böyle davranıyordu; bu bölüm cansız kalıyordu.
   Hareket görselin kendisinde: kutu sabit, fotoğraf hafifçe büyüyor —
   `overflow: hidden` taşanı kesiyor, düzen kaymıyor. */
.ayin-kare {
  display: block;
  margin-top: 22px;
  background: var(--iz);
  overflow: hidden;
  transition: box-shadow .28s ease;
}
.ayin-kare img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}
.ayin-kare:hover,
.ayin-kare:focus-visible {
  box-shadow: 0 18px 38px -20px rgba(20, 23, 26, .45);
}
.ayin-kare:hover img,
.ayin-kare:focus-visible img { transform: scale(1.03); }
/* D-76: karenin altındaki satır griydi — "soluk dursa nasıl görünür" diye
   denenmişti, güzel durmadı. Sitedeki metin rengine döndü. Kare zaten sayfanın
   en büyük görseli; altındaki tek satırın ondan kaçması gerekmiyor. */
.ayin-bilgi {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--murekkep);
}
.ayin-bilgi .ad { font-family: var(--baslik); font-size: 17px; }

/* D-58: Kuş sayacı anasayfadan kaldırıldı; .sayac-baslik ve .sayac-bolum
   kuralları da onunla birlikte gitti. Kullanılmayan CSS bırakılmadı. */

/* D-90: "Son Kareler" ve "Son koleksiyonlar" bölümleri anasayfadan
   kaldırıldı (fotoğrafçının isteği); .son-kareler, .son-kare ve
   .son-koleksiyonlar-bolum kuralları da onlarla birlikte gitti.
   Kullanılmayan CSS bırakılmadı — D-58'de kurulan âdet. */

@media (max-width: 900px) {
  /* Dört kapı dar ekranda 2×2 (D-58) — dördü yan yana sıkışıyordu. */
  .kapilar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kapi-yazi { padding: 12px 14px 14px; }
  .kapi-yazi .ad { font-size: 17px; }
  .kapi-yazi .adet { display: none; }
}

@media (max-width: 560px) {
  .kapilar { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* Tek sütunda kutu sayfanın tamamı kadar geniş; 2:1 orada fazla yassı
     kalıyor, bu yüzden 16:9 korundu.

     D-102 notu: bu kural zaten vardı ama `object-fit` yoktu — kutuya oran
     verilip görsele `height: auto` bırakıldığı için görsel taşıyor ve
     `overflow: hidden` onu ALTTAN kesiyordu. Artık ortalanarak kırpılıyor. */
  .kapi-gorsel { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .kapi, .kapi-gorsel img { transition: none; }
  .kapi:hover { transform: none; }
  .kapi:hover .kapi-gorsel img { transform: none; }

  /* D-63: ayın fotoğrafı ve ay düğmeleri de "daha az hareket" tercihine uyar.
     Renk değişimi kalıyor — geri bildirim kaybolmasın; kayan/büyüyen hareket
     kalkıyor. */
  .ayin-kare, .ayin-kare img, .ay-serit .ay, .ay-serit .ay-tum { transition: none; }
  .ayin-kare:hover img,
  .ayin-kare:focus-visible img { transform: none; }
  .ay-serit a.ay:hover,
  .ay-serit a.ay-tum:hover { transform: none; }

  /* D-68: hareket artık RENGİN yerini tuttuğu için, "daha az hareket"
     tercihinde geri bildirimi gölge ve çerçeve taşır — kayma kalkar ama
     düğmenin tepki verdiği yine belli olur. Hiçbir işaret bırakmamak
     düğmeyi ölü gösterirdi. */
  .suzgec button:hover,
  .suzgec a:hover,
  .harf-seridi button:hover:not(:disabled),
  .ikili button:hover { transform: none; }

  .kapi.etkin { transform: none; }
}

/* Panelde ayın fotoğrafı seçimi — radyo düğmesi gizli, seçili kare çerçeveli. */
.ayin-secim {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.ayin-aday { display: block; cursor: pointer; }
.ayin-aday input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ayin-aday-gorsel {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--iz);
  border: 2px solid transparent;
  transition: border-color .15s ease;
}
.ayin-aday-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ayin-aday input:checked + .ayin-aday-gorsel { border-color: var(--murekkep); }
.ayin-aday input:focus-visible + .ayin-aday-gorsel { border-color: var(--su); }
.ayin-aday-ad {
  display: block;
  font-size: 11.5px;
  color: var(--gri);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ayin-aday input:checked ~ .ayin-aday-ad { color: var(--murekkep); font-weight: var(--agirlik-arayuz); }

/* ============================================================
   Blog (D-36)
   ============================================================ */

.yazi-listesi { display: grid; gap: 26px; margin-top: 26px; }
.yazi-karti {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 26px;
  text-decoration: none;
  align-items: start;
}
.yazi-karti-gorsel { aspect-ratio: 3 / 2; overflow: hidden; background: var(--iz); }
.yazi-karti-gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.yazi-karti:hover .yazi-karti-gorsel img { transform: scale(1.03); }
.yazi-karti-yazi time {
  display: block;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acikgri);
  margin-bottom: 8px;
}
.yazi-karti-yazi h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: var(--agirlik-baslik);
  color: var(--murekkep);
}
.yazi-karti-yazi p { margin: 0; color: var(--gri); line-height: 1.65; max-width: 64ch; }

/* Yazı gövdesi — okunaklı satır uzunluğu. Genişlik sınırı artık
   .okuma-sutunu'nda; burada yalnızca tipografi kaldı (D-40). */
.yazi-govde p { line-height: 1.8; margin: 0 0 18px; }
.yazi-tarih {
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acikgri);
  margin: -4px 0 22px;
}
.yazi-ozet { font-size: 18px; }

/* Metnin içine yerleştirilen görsel: okuma sütununu aşar, nefes alsın. */
.yazi-gorsel { margin: 30px 0; }
.yazi-gorsel img { width: 100%; height: auto; display: block; background: var(--iz); }
.yazi-gorsel figcaption,
.yazi-ek-gorseller figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--gri);
  line-height: 1.5;
}

/* Numarası yazılmamış görseller — yazının altında ızgara. */
.yazi-ek-gorseller {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin: 34px 0 26px;
  padding-top: 26px;
  border-top: 1px solid var(--iz);
}
.yazi-ek-gorseller figure { margin: 0; }
.yazi-ek-gorseller img { width: 100%; height: auto; display: block; background: var(--iz); }

/* Panelde görsel satırları */
.yazi-gorsel-listesi { display: grid; gap: 14px; margin: 18px 0 26px; }
.yazi-gorsel-satiri {
  display: grid;
  grid-template-columns: 52px 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  background: var(--ak);
  border: 1px solid var(--iz);
}
.yazi-gorsel-numara {
  font-family: var(--baslik);
  font-size: 19px;
  text-align: center;
  color: var(--murekkep);
}
.yazi-gorsel-onizleme { aspect-ratio: 3 / 2; overflow: hidden; background: var(--iz); }
.yazi-gorsel-onizleme img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yazi-gorsel-eylem { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.yazi-gorsel-aciklama { display: flex; gap: 8px; align-items: flex-end; flex: 1 1 320px; }
.yazi-gorsel-aciklama label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gri);
  display: block;
  margin-bottom: 4px;
}
.yazi-gorsel-aciklama > div { flex: 1; }
.yazi-gorsel-aciklama input { width: 100%; }

@media (max-width: 760px) {
  .yazi-karti { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .yazi-gorsel-satiri { grid-template-columns: 40px 90px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .yazi-karti-gorsel img { transition: none; }
  .yazi-karti:hover .yazi-karti-gorsel img { transform: none; }
}

/* ============================================================
   Baskı (D-39, şartname §10)
   ============================================================ */

.baski-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 30px;
}

.baski-kart {
  background: var(--ak);
  display: flex;
  flex-direction: column;
}
.baski-kart-gorsel {
  display: block;
  overflow: hidden;
  background: var(--iz);
}
.baski-kart-gorsel img {
  width: 100%;
  height: auto;
  display: block;
}

/* Fotoğrafçının istediği siyah şerit: fiyat solda, düğme sağda.
   Düğme <a> — sitede JavaScript yok, sipariş ayrı bir sayfa. */
.baski-kart-alt {
  background: var(--murekkep);
  color: var(--kagit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
}
.baski-kart-bilgi { min-width: 0; }
.baski-kart-bilgi h3 {
  margin: 0;
  font-size: 15px;
  font-weight: var(--agirlik-baslik);
  color: var(--kagit);
  /* Uzun tür adları şeridi bozmasın. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baski-fiyat {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--acikgri);
  letter-spacing: .02em;
}
.baski-siparis-dugmesi {
  flex: 0 0 auto;
  background: var(--kagit);
  color: var(--murekkep);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: var(--agirlik-arayuz);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 9px 14px;
  white-space: nowrap;
}
.baski-siparis-dugmesi:hover { background: var(--altin); }

/* --- Sipariş sayfası --- */

.baski-siparis {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  margin-top: 26px;
}
.baski-siparis-gorsel {
  flex: 1 1 46%;
  min-width: 0;
  position: sticky;
  top: 40px;
}
.baski-siparis-gorsel img {
  width: 100%;
  height: auto;
  display: block;
}
.baski-siparis-form { flex: 1 1 54%; min-width: 0; }

.baski-olcu-secimi {
  border: 1px solid var(--iz);
  padding: 16px 18px;
}
.baski-olcu-secimi legend {
  padding: 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gri);
}
.baski-olcu-secenek {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--iz);
}
.baski-olcu-secenek:last-of-type { border-bottom: 0; }
.baski-olcu-ad { flex: 1 1 auto; }
.baski-olcu-fiyat { font-weight: var(--agirlik-arayuz); white-space: nowrap; }

@media (max-width: 800px) {
  .baski-siparis { flex-direction: column; gap: 26px; }
  /* Dar ekranda görsel metnin üstünde akar; yapışkanlık işe yaramaz. */
  .baski-siparis-gorsel { position: static; }
}

@media (max-width: 560px) {
  .baski-izgara { grid-template-columns: 1fr; gap: 20px; }
  /* Şerit dar ekranda tek satıra sığmıyor; düğme alta iner. */
  .baski-kart-alt { flex-wrap: wrap; }
  .baski-siparis-dugmesi { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------
   Fotoğrafları kopyalamayı zorlaştırma (D-40)

   Fotoğrafçının isteği. Bu bir koruma değil caydırıcıdır — gerekçe ve
   sınırları site.js içinde uzun uzun yazılı. Gerçek koruma watermark,
   1920 piksel tavanı (K-09) ve orijinallerin hiç sunulmaması (K-08).

   Buradaki iş: görseli sürükleyip masaüstüne bırakmayı ve uzun basınca
   çıkan "görseli kaydet" menüsünü kesmek. Sağ tık engeli JS tarafında ve
   yalnızca görsellerde; metin seçimi ise HİÇBİR yerde engellenmiyor —
   ziyaretçinin bir adresi ya da tür adını kopyalamasına engel olmak
   siteyi korumaz, yalnızca kullanmayı zorlaştırır.
   ------------------------------------------------------------ */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  /* iOS'ta uzun basınca çıkan kaydet/paylaş menüsü */
  -webkit-touch-callout: none;
}

/* Panelde önizlemeler için engel gerekmiyor; yönetici kendi karesini
   zaten diskten alabilir ve orada sürükleme işe yarayabilir. */
.yonetim-govde img {
  -webkit-user-drag: auto;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-touch-callout: default;
}

/* ------------------------------------------------------------
   Panel: ekran yardımı (D-40)

   Her panel ekranının en altındaki "bu sayfa nasıl çalışır" bölümü.
   Yalnızca yönetim panelinde vardır.

   Biçim bilerek sakin: içeriğin altında, kenarlıkla ayrılmış, gri.
   Dikkat çekmemeli — her gün panele giren fotoğrafçı için gürültü
   olmamalı, ama ilk kez bir ekranı açan biri için orada olmalı.
   ------------------------------------------------------------ */
.ekran-yardimi {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--iz);
  max-width: 760px;
  color: var(--gri);
  font-size: 13.5px;
  line-height: 1.7;
}
.ekran-yardimi h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--acikgri);
  margin: 0 0 12px;
}
.ekran-yardimi h3 {
  font-size: 13.5px;
  font-weight: var(--agirlik-baslik);
  color: var(--murekkep);
  margin: 18px 0 6px;
}
/* h3'ün altındaki ara başlık — tür kataloğundaki "Aile dosyası" / "Tür
   dosyası" gibi. h3'ten bir tık sakin, gövde metninden ayrık (D-89). */
.ekran-yardimi h4 {
  font-size: 13px;
  font-weight: var(--agirlik-arayuz);
  color: var(--murekkep);
  margin: 14px 0 6px;
}
.ekran-yardimi p { margin: 0 0 10px; }
/* Yardım metnindeki tablo dar ve sakin durur; gövde metniyle aynı ritim. */
.ekran-yardimi table.tablo { margin: 0 0 14px; font-size: 12.5px; }
.ekran-yardimi table.tablo td { vertical-align: top; }
/* Genel sıfırlamada ul'lerin madde işareti kapalı (menüler için doğru);
   yardım metninde liste, liste gibi görünmeli. */
.ekran-yardimi ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }
.ekran-yardimi li { margin-bottom: 5px; }
.ekran-yardimi b { color: var(--murekkep); }
.ekran-yardimi code {
  background: var(--ak);
  border: 1px solid var(--iz);
  padding: 1px 5px;
  font-size: 12.5px;
}

/* ------------------------------------------------------------
   Panel: görünürlük seçimi (D-43)

   Üç durumlu radyo — her seçeneğin altında ne yaptığını söyleyen bir satır.
   Fotoğrafçı "kapalı / bağlantıyla / açık" arasındaki farkı okumadan
   seçemez; etiketin tek başına yetmediği yerlerden biri.
   ------------------------------------------------------------ */
.gorunurluk-secimi {
  border: 1px solid var(--iz);
  padding: 14px 16px;
  max-width: 640px;
}
.gorunurluk-secimi legend {
  padding: 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gri);
}
/* Panelde form etiketleri büyük harf ve seyrek aralıklı; burada bir etiket
   değil bir cümle var — devralınan biçim okunaksız kılıyordu (D-43). */
.gorunurluk-secenek {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--iz);
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  color: var(--murekkep);
  font-weight: var(--agirlik-govde);
}
.gorunurluk-secenek:last-of-type { border-bottom: 0; }
.gorunurluk-secenek input { margin-top: 3px; }
.gorunurluk-aciklama {
  display: block;
  font-size: 12.5px;
  color: var(--gri);
  line-height: 1.5;
}

/* ============================================================
   Kaydırırken beliren içerik — D-57
   ============================================================

   Gizleme sınıfını (.belirir) CSS değil BETİK ekliyor. Böylece JavaScript
   kapalıysa hiçbir şey gizlenmez, sayfa olduğu gibi görünür. İçeriğin
   görünürlüğü hiçbir zaman betiğe bağlanmaz.

   Hareket yalnızca opaklık ve küçük bir kaydırma — düzen değişmiyor, bu
   yüzden sayfa zıplamıyor (transform ve opacity düzeni etkilemez). */
/* D-65: mesafe ve süre kısaldı (18px/.55s → 12px/.4s). Uzun mesafe ve uzun
   süre, öğenin "gelmesini beklemek" hissini büyütüyordu. Artık göz fark
   etmeden yerine oturuyor. */
.belirir {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.belirdi {
  opacity: 1;
  transform: none;
}

/* "Daha az hareket" tercihi: betik zaten hiç çalışmıyor, ama sınıf bir şekilde
   sayfada kalırsa içerik yine de görünür olsun — gizli kalmasın. */
@media (prefers-reduced-motion: reduce) {
  .belirir,
  .belirdi {
    opacity: 1;
    transform: none;
    transition: none;
  }
}