/* Dijital Kent Arsivi - ortak stil */
body { font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.font-display { font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; }
.num { font-variant-numeric:tabular-nums; }

.hairline { box-shadow: 0 0 0 1px #E5E0D6; }
.dark .hairline { box-shadow: 0 0 0 1px #3A332B; }
.ring-focus:focus-visible { outline:2px solid #2C3E47; outline-offset:2px; }
.dark .ring-focus:focus-visible { outline-color:#6FA5BD; }

/* ---- Seçili kart çerçevesi — 09.10.2026 ----------------------------------
   Özgün tasarımda seçili kart "hairline ring-2 ring-visne" ile 2 px bordo çerçeve alır
   (Bağış: seçili tür ve lisans kartı). Sitede bu çerçeve HİÇ çizilmiyordu: .hairline
   çerçevesi de Tailwind'in ring-2 çerçevesi de box-shadow ile çizilir ve bu dosya sonra
   yüklendiği için ince çerçeve kalını eziyordu (ölçüm: box-shadow yalnız "0 0 0 1px").
   İki sınıf birlikteyse çerçeve halkanın renginde 2 px çizilir. Koyu temada tasarımdaki
   gibi açık bordo (ring-visne-dk derlenmiş stilde yok). Yüksek kontrastta bütün çerçeveler
   siyah / beyaz olduğundan seçili kart kalınlıkla ayrılır (3 px; üstüne gelinen kart 2 px).
   Yazdırmada değişiklik yok (oradaki kural gölgeyi zaten kaldırır).
   Müze kataloğu ve Eğitim kademe kartı özgün tasarımdaki gibi çerçevesizdir: oralarda
   bu iki sınıf bilerek kullanılmaz. */
.hairline.ring-2, .dark .hairline.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color); }
.dark .hairline.ring-2.ring-visne { --tw-ring-color: #D9635B; }
@media screen {
  .yuksek-kontrast .hairline.ring-2, .yuksek-kontrast .hairline.ring-2:hover { box-shadow: 0 0 0 3px #000 !important; }
  .yuksek-kontrast.dark .hairline.ring-2, .yuksek-kontrast.dark .hairline.ring-2:hover { box-shadow: 0 0 0 3px #fff !important; }
}

/* Koyu modda soluk metin (11.09.2026). text-ink-muted (#6B6660) 572 yerde
   kullanılıyor, yalnızca 33'ünde dark:text-ink-d-muted eşi var; kalanlar koyu
   zeminde okunmuyordu (kontrast ~3:1). Tek tek eş eklemek yerine koyu modda
   sınıfın rengi tasarımın koyu "muted" tonuna eşitleniyor (kontrast ~6:1).
   :where() → özgüllük düşük: öğede açıkça dark:text-… yazıyorsa o kazanır,
   hover:text-… da çalışmaya devam eder. Renk tailwind.config.js'teki
   ink-d.muted (#A39C8F = 163 156 143) ile AYNI olmalı. */
:where(.dark) .text-ink-muted     { color:#A39C8F; }
:where(.dark) .text-ink-muted\/70 { color:rgb(163 156 143 / .7); }
:where(.dark) .text-ink-muted\/80 { color:rgb(163 156 143 / .8); }
:where(.dark) .text-ink-muted\/90 { color:rgb(163 156 143 / .9); }
:where(.dark) .placeholder\:text-ink-muted\/80::placeholder { color:rgb(163 156 143 / .8); }
/* Aynı sebeple: hover:text-ink (#1A1A1A) koyu modda üzerine gelince metni siyaha
   çeviriyordu (arama, koleksiyon, yönetim · 3 yer). Koyu modda açık metin rengine. */
:where(.dark) .hover\:text-ink:hover { color:#F5F1E8; }
/* Koyu modda bordo yazı (11.09.2026): text-visne (#7A1F1F) 94 yerde, 17'sinin koyu mod eşi
   yoktu ve koyu zeminde okunmuyordu. Koyu modda tuğla kırmızısına (#D9635B, kontrast ~5:1)
   döner; açık mod aynı. Renk tailwind.config.js'teki visne.dk ile AYNI olmalı. */
:where(.dark) .text-visne { color:#D9635B; }
:where(.dark) .hover\:text-visne:hover { color:#D9635B; }
/* Koyu modda yeşil, soluk ve bordo yazı (30.09.2026 · kurum hata listesi 2, genel koyu tema taraması).
   text-ok (#2D6A4F) koyu zeminde 2,2–2,9:1'di (akademik, istatistik, hakkımızda, yardım): koyu eşi
   ok.dk (#5BA77F) → 5,3–7,3:1. text-ink-soft'un koyu eşi olmayan yerleri (#4A4744) koyu zeminde 2:1'di:
   ink-d.soft (#C9C2B4). Açık kahve (…-d-alt) kartların içindeki bordo yazı 4,3:1'di → biraz açık tuğla
   (#E07870, 5,2:1); yalnız o kartların içinde, sitenin geri kalanında bordo aynı.
   :where() → özgüllük düşük: öğede dark:… rengi yazıyorsa o kazanır. Renkler tailwind.config.js ile AYNI. */
:where(.dark) .text-ok { color:#5BA77F; }
:where(.dark) .text-ink-soft { color:#C9C2B4; }
.dark :is(.dark\:bg-paper-d-alt, .dark\:bg-surface-d-alt) :is(.text-visne, .dark\:text-visne-dk) { color:#E07870; }
/* Aynı düzeltmenin "üzerine gelme" ve tablo eşi (01.10.2026 · panel koyu tema taraması). Bordo yazı, üzerine
   gelince açık kahveye dönen zeminde ("Çıkış yap", "Sil", pano rozetleri) ve tabloların çift / üzerine gelinen
   satırlarında 3,9–4,4:1'de kalıyordu. Ton aynı (#E07870); açık tema ve sitenin geri kalanı değişmez. */
.dark .dark\:hover\:bg-paper-d-alt:hover:is(.text-visne, .dark\:text-visne-dk),
.dark .dark\:hover\:bg-paper-d-alt:hover :is(.text-visne, .dark\:text-visne-dk),
.dark .dt :is(.text-visne, .dark\:text-visne-dk) { color:#E07870; }
/* Durum renkleri (30.09.2026 · 2. tur tarama): koyu eşi yazılmamış text-warn (403 "Yetkili hesap", panel içerik
   kalitesi, istatistik "İncelemede"), text-err / text-info (panel yapay zekâ sayaçları) ve text-gece (bülten
   "Tıklayan") koyu zeminde 1,5–3,8:1'di. tailwind.config.js'teki …dk tonlarına döner (5–8:1). */
:where(.dark) .text-warn { color:#E0973F; }
:where(.dark) .text-err  { color:#E06262; }
:where(.dark) .text-info { color:#7AA2F7; }
:where(.dark) .text-gece { color:#6FA5BD; }
/* Isı tablosu sayıları (02.10.2026 · istatistik "Dönem kapsamı"). Kutu rengi saydam bordo: orta koyulukta ne eski
   beyaz (text-paper) ne de koyu yazı 4,5:1'e ulaşıyordu (açık temada 3,2:1; koyu temada en dolu kutuda 3,4:1 — orada
   beyaz değil KOYU yazı gerekir). Yazı tam siyah / tam beyaz; hangisi olacağını istatistik.php kutunun koyuluğuna göre
   seçer: isi-a = açık temada koyu kutu (≥ .70), isi-k = koyu temada parlak kutu (≥ .84). Kutu renkleri (#7A1F1F,
   #D9635B) ya da kart zemini değişirse eşikler yeniden hesaplanmalı. Yüksek kontrast: layout_head.php. */
.isi-sayi { color:#000; }
.isi-sayi.isi-a { color:#fff; }
.dark .isi-sayi { color:#fff; }
.dark .isi-sayi.isi-k { color:#000; }
/* Kişinin kendi e-posta adresi (05.10.2026 · kurum hata listesi: "kendi adresine basınca Gmail açılıyor"). Adres düz
   yazıdır, sitenin koyduğu bir bağlantı yoktur; telefon tarayıcıları (iPhone'da Chrome) yazıdaki e-posta adresini
   kendiliğinden bağlantıya çevirip dokununca posta uygulamasını açıyor. Sayfa başındaki "algılama" etiketi tarayıcının
   onu dinlemesine bağlı; bu kural ondan bağımsızdır: .eposta-yazi taşıyan yazı ve tarayıcının İÇİNE EKLEDİĞİ her öğe
   dokunmaya kapalıdır ve bağlantı gibi boyanmaz (!important: eklenen öğenin kendi satır içi stili de ezilir).
   Yazı okunur, seçilip kopyalanabilir; yalnız üzerine dokunmak / tıklamak bir şey yapmaz. */
.eposta-yazi, .eposta-yazi * { pointer-events: none !important; }
.eposta-yazi * { color: inherit !important; text-decoration: none !important; border: 0 !important; background: none !important; }

/* Açık temada altın YAZI (14.09.2026). text-altin (#C9A961) açık zeminde ~2,2:1 kontrastla
   okunmuyordu (WCAG AA: en az 4,5:1; Lighthouse her sayfada işaretliyordu). Açık temada
   yazı rengi aynı tonun koyusu "eski altın"a çekilir: #7D6326 → beyazda 5,7:1, altın tonlu
   kutularda (bg-altin/[.06]…/20) en az 4,6:1. YALNIZ YAZI: bg-altin, border-altin, çizgi,
   nokta ve süslemeler aynı altın kalır. Koyu temada değişiklik yok (koyu zeminde zaten ~8:1).
   Koyu bir zemin ya da fotoğraf üstünde altın yazı gerekirse öğeye .altin-parlak eklenir.
   :where() → özgüllük düşük; öğede hover:/dark: rengi yazıyorsa o kazanır. */
:where(html:not(.dark)) .text-altin:where(:not(.altin-parlak)) { color:#7D6326; }

/* YAZI BOYUTU ÖLÇEĞİ (14.09.2026) — bu dosyadaki bütün piksel yazı boyutları
   calc(Npx * var(--yazi-olcek, 1)) biçiminde. erisim.php'deki "Yazı boyutu" aracı
   <html>'e --yazi-olcek yazar; tanımsızken 1'dir, görünüm değişmez.
   Buraya YENİ yazı boyutu eklerken de aynı biçimi kullan, yoksa araç o metni büyütmez.
   (tailwind.css'teki text-[..] sınıfları bunu derlemede kendiliğinden yapar —
   bkz. tailwind/tailwind.config.js · yaziOlcegi.) */

/* Yazı büyütme açıkken (erisim.php → html.yazi-buyuk) üst şerit taşmasın: büyüyen düğme ve
   boşluklar menüyü ekrandan itiyordu. Hızlı arama kutusu gizlenir (Arama sayfası menüde);
   masaüstü menüsü 1280 px'e kadar ☰ menüsüne toplanır. */
.yazi-buyuk .ust-hizli-arama { display:none !important; }
@media (max-width: 1279.98px) {
  .yazi-buyuk .ust-nav { display:none !important; }
  .yazi-buyuk details.mobil-menu { display:block !important; }
}

.placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(122,31,31,.06) 0 6px, rgba(122,31,31,0) 6px 14px),
    linear-gradient(180deg,#F7F2E8,#EFE8D9);
  color:#6B6660;
}
.dark .placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(232,199,126,.05) 0 6px, rgba(232,199,126,0) 6px 14px),
    linear-gradient(180deg,#221C16,#1A1612);
  color:#8A8478;
}
.placeholder-2 {
  background:
    repeating-linear-gradient(45deg, rgba(44,62,71,.06) 0 6px, rgba(44,62,71,0) 6px 14px),
    linear-gradient(180deg,#EAEEF0,#DDE3E6);
}
.dark .placeholder-2 {
  background:
    repeating-linear-gradient(45deg, rgba(111,165,189,.06) 0 6px, rgba(111,165,189,0) 6px 14px),
    linear-gradient(180deg,#1B2226,#15191C);
}
.placeholder-3 {
  background:
    repeating-linear-gradient(90deg, rgba(201,169,97,.08) 0 6px, rgba(201,169,97,0) 6px 14px),
    linear-gradient(180deg,#F4EAD0,#E8DAB6);
}
.dark .placeholder-3 {
  background:
    repeating-linear-gradient(90deg, rgba(232,199,126,.06) 0 6px, rgba(232,199,126,0) 6px 14px),
    linear-gradient(180deg,#221C16,#1A1612);
}
/* placeholder-4/-5: veritabanı koleksiyonlara ve belgelere placeholder-1..5
   dağıtıyor ama CSS'te yalnız üç ton vardı; -1/-4/-5 aynı tona düşüp anasayfa
   tek renk görünüyordu (07.09.2026 denetimi: 21'er koleksiyon, 294'er belge).
   Aynı arşiv paletinde iki ton daha — kâğıt aileden çıkılmadı. */
.placeholder-4 {
  background:
    repeating-linear-gradient(135deg, rgba(74,93,74,.06) 0 6px, rgba(74,93,74,0) 6px 14px),
    linear-gradient(180deg,#EFF2EA,#E1E7DC);
  color:#63695F;
}
.dark .placeholder-4 {
  background:
    repeating-linear-gradient(135deg, rgba(154,186,150,.05) 0 6px, rgba(154,186,150,0) 6px 14px),
    linear-gradient(180deg,#1B211B,#151915);
  color:#7F8A7C;
}
.placeholder-5 {
  background:
    repeating-linear-gradient(45deg, rgba(120,96,72,.07) 0 6px, rgba(120,96,72,0) 6px 14px),
    linear-gradient(180deg,#F4EFE6,#E9E0D2);
  color:#6E655A;
}
.dark .placeholder-5 {
  background:
    repeating-linear-gradient(45deg, rgba(206,178,142,.05) 0 6px, rgba(206,178,142,0) 6px 14px),
    linear-gradient(180deg,#211B15,#1A1511);
  /* #8B8173 idi: kutu içindeki "[ belge ]" ve koleksiyon başlığındaki düğmeler 4,47:1 (30.09.2026) */
  color:#978C7E;
}

/* Standart önizleme künyesi — tasarım B1'deki "[ belge · Meclis Tutanağı ]"
   etiketinin karşılığı. Gerçek tarama yerine standart görsel gösterildiğinde
   kutunun ne olduğunu YAZIYLA söyler; boş bir renk kutusu bırakmaz. */
.ph-kunye {
  position:absolute; left:.75rem; top:.75rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:calc(10.5px * var(--yazi-olcek, 1)); letter-spacing:.02em;
  background:rgba(26,22,18,.82); color:#F5F1E8;
  border-radius:4px; padding:2px 6px;
}
.ph-orta {
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:calc(11px * var(--yazi-olcek, 1)); letter-spacing:.06em; text-transform:uppercase;
  opacity:.42;
}

/* --------------------------------------------------------------------------
 * Sanal müze sahnesi (tasarım B5)
 * Müze zemini bilerek KOYU: hem açık hem koyu temada aynı kalır. Sergi vitrini
 * gibi davranması isteniyor — eserin etrafındaki her şey geri çekilsin diye.
 * ph-3d-l açık gövdeli eserler için ikinci varyant.
 * ------------------------------------------------------------------------ */
.ph-3d {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,169,97,.18), transparent 55%),
    radial-gradient(ellipse at 70% 75%, rgba(122,31,31,.10), transparent 55%),
    linear-gradient(160deg, #2A241D 0%, #14110E 100%);
}
.ph-3d-l {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,169,97,.30), transparent 55%),
    radial-gradient(ellipse at 70% 75%, rgba(44,62,71,.18), transparent 55%),
    linear-gradient(160deg, #F2EEE6 0%, #DDE3E6 100%);
}
/* Perspektifli ızgara zemin. Kapsayıcının position'ı olmalı (sahne relative).
   mask ile yukarı doğru eriyor, yoksa ızgara eserin üstünde bir duvar gibi durur. */
.grid-floor { position: relative; }
.grid-floor::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 50%; pointer-events: none;
  background-image:
    linear-gradient(rgba(201,169,97,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,97,.12) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, black, transparent);
          mask-image: linear-gradient(to top, black, transparent);
}
/* Dönüş ve yakınlaştırma AYNI transform özelliğini paylaşıyor. Zoom'u JS'ten
   style.transform ile yazsaydık animasyonu ezerdi; ölçek bir değişkenle
   taşınıyor ve her karede yeniden okunuyor. Hareket kapalıyken (reduced-motion)
   animasyon durur, taban transform ölçeği sürdürür. */
.obj-spin { transform: scale(var(--olcek, 1)); animation: dka-doner 24s linear infinite; }
@keyframes dka-doner {
  from { transform: scale(var(--olcek, 1)) rotateY(0deg); }
  to   { transform: scale(var(--olcek, 1)) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) { .obj-spin { animation: none; } }

.paper-tex {
  background-image:
    radial-gradient(rgba(122,31,31,.025) 1px, transparent 1px),
    radial-gradient(rgba(201,169,97,.018) 1px, transparent 1px);
  background-size: 24px 24px, 17px 17px;
  background-position: 0 0, 12px 8px;
}
.dark .paper-tex {
  background-image:
    radial-gradient(rgba(232,199,126,.025) 1px, transparent 1px),
    radial-gradient(rgba(196,75,75,.018) 1px, transparent 1px);
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D4CDBE;border-radius:8px}
.dark ::-webkit-scrollbar-thumb{background:#3A332B}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Tarihte bugün şeridi: sağdan sola, sabit hızda (linear), kesintisiz sakin akış.
   width:max-content -> şerit gerçek içerik genişliğinde olur.
   Boşluk için ortak "gap" yerine her öğeye sağ-margin veriyoruz: böylece SON öğeden sonra da
   boşluk kalır ve -50% tam olarak bir kopyaya birebir oturur -> hiç sıçrama/dikiş olmaz.
   animation ... !important -> reduced-motion kısıtına takılmadan akmaya devam eder. Hızı tek yerden ayarla: 90s. */
.marquee-row { display:flex; width:max-content; animation: marq 90s linear infinite !important; }
.marquee-row > * { margin-right:24px; }
@keyframes marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-row:hover { animation-play-state: paused; }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }

/* Yönetim > Ayarlar'daki "i" açıklama düğmesi (yonetici.php).
   Burada, Tailwind'in derlenmiş dosyasında değil: yeni bir yardımcı sınıf için
   tailwind.css'i yeniden derlemek gerekirdi, oysa bu tek bir küçük rozet.
   Çerçeve ve üzerine gelme rengi .hairline'dan gelir. */
.ayar-i { display:inline-grid; place-items:center; width:18px; height:18px;
          border-radius:9999px; font-size:11px; line-height:1; color:#6B6660; }
:where(.dark) .ayar-i { color:#A39C8F; }
.ayar-i:hover { color:#1A1A1A; }
:where(.dark) .ayar-i:hover { color:#F5F1E8; }
/* Açıklama kutusu balon gibi ÜSTTE açılır: aksi hâlde açılınca satırı aşağı itip
   formu zıplatıyordu.
   HİZA SATIRA GÖRE (25.09.2026): kutu rozete göre konumlanınca telefonda sağa taşıyordu
   (rozet satırın ortasında, kutu 420 px). Artık .ayar-satir'a hizalı: dar ekranda satır
   kadar, geniş ekranda en çok 420 px. */
.ayar-satir { position:relative; }
.ayar-yardim { display:inline-block; vertical-align:middle; }
.ayar-yardim > .ayar-yardim-kutu {
  position:absolute; left:0; right:0; top:24px; z-index:30;
  max-width:420px; background:#FFFFFF;
}
:where(.dark) .ayar-yardim > .ayar-yardim-kutu { background:#1F1B16; }

input[type=range]{appearance:none;height:2px;background:#E5E0D6}
.dark input[type=range]{background:#3A332B}
input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#7A1F1F;border:2px solid #FAFAF7;cursor:pointer}
.dark input[type=range]::-webkit-slider-thumb{background:#D9635B;border-color:#14110E}

mark{background:rgba(201,169,97,.32);color:inherit;padding:0 .15em;border-radius:2px}
.dark mark{background:rgba(232,199,126,.25)}

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:8px; font-size:calc(13.5px * var(--yazi-olcek, 1)); font-weight:500; line-height:1; transition:opacity .15s, background .15s; }
.btn-primary { background:#7A1F1F; color:#FAFAF7; }
.btn-primary:hover { background:#641818; }
.dark .btn-primary { background:#D9635B; color:#14110E; }
.btn-ink { background:#1A1A1A; color:#FAFAF7; }
.dark .btn-ink { background:#2A241D; color:#F5F1E8; }
.btn-ghost { box-shadow:0 0 0 1px #E5E0D6; background:transparent; }
.dark .btn-ghost { box-shadow:0 0 0 1px #3A332B; }
/* btn-ink ve btn-ghost'un hover hâli yoktu — yalnız btn-primary'de vardı.
   İkisi de tıklanabilir olduğu belli olmayan düğmelerdi. */
.btn-ink:hover        { background:#333030; }
.dark .btn-ink:hover  { background:#3A332B; }
.btn-ghost:hover      { background:#F2EEE6; }
.dark .btn-ghost:hover{ background:#2A241D; }

/* ============================================================
   TIKLANABİLİRLİK GERİ BİLDİRİMİ (imleç üstüne gelince)

   SORUN: .hairline sitenin "çerçeveli kutu" sınıfı ve hem KARTLARDA hem de
   DÜĞMELERDE kullanılıyor. Kartların çoğunda hover:shadow-lg gibi bir Tailwind
   sınıfı var; ama sayfalama numaraları, süzgeç düğmeleri, görünüm değiştirme
   düğmeleri gibi 62 tıklanabilir öğede HİÇBİR hover yoktu — fare üstüne
   gelince hiçbir şey olmuyor, öğenin tıklanabilir olduğu anlaşılmıyordu
   (kurum geri bildirimi, 09.09.2026).

   NEDEN 62 YERE TEK TEK YAZILMADI: aynı hatanın 63.'sü yarın eklenirdi.
   Burada bir kez tanımlanınca, ileride eklenen her hairline düğme de
   kendiliğinden doğru davranır.

   ÖZGÜLLÜK BİLEREK DÜŞÜK TUTULDU (:where sıfır özgüllük verir):
   bu kural (0,1,0) ağırlığında, Tailwind'in hover:bg-* sınıfları ise en az
   (0,2,0). Yani bu YALNIZCA YEDEKtir — bir öğeye açıkça hover rengi verilmişse
   o kazanır, buradaki kural onu ezmez. Kartların mevcut hover davranışı
   olduğu gibi kalır.

   Yalnız a / button / label / summary hedefleniyor: <div class="hairline">
   olan duran kutular etkilenmez. ============================================ */
:where(a, button, label, summary):where(.hairline) {
  transition: background-color .15s ease, background-image .15s ease;
}
/* 16.09.2026 (kurum hata listesi · 5): hover ARKA PLAN RENGİNİ DEĞİŞTİRMEZ, üstüne
   saydam ince bir katman koyar. Eskiden background-color veriliyordu; :hover sözde
   sınıfı yüzünden bu kural, seçili çipin kendi rengiyle (bg-ink + text-paper) aynı
   ağırlıkta olup sonra geldiği için onu eziyordu: "Alt koleksiyonlarla" düğmesi fare
   üstüne gelince açık zemine dönüp yazıyı okunmaz yapıyordu (ölçüm: kontrast 16.6 → 1.11).
   Katman yönteminde öğenin background-color'ı yerinde kalır, üstüne yalnız ince bir
   ton biner: hem koyu hem açık düğmelerde okunaklılık korunur, geri bildirim de sürer. */
:where(a, button, label, summary):where(.hairline):hover {
  background-image: linear-gradient(rgba(26, 24, 22, .06), rgba(26, 24, 22, .06));
}
:where(.dark) :where(a, button, label, summary):where(.hairline):hover {
  background-image: linear-gradient(rgba(245, 241, 232, .07), rgba(245, 241, 232, .07));
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, label, summary):where(.hairline) { transition: none; }
}

/* ---- hidden her koşulda gizlesin — 16.09.2026 ---------------------------
   Tarayıcının [hidden] kuralı, öğeye verilmiş bir display sınıfı (Tailwind'in
   inline-flex, grid, flex…) tarafından eziliyor. Bağış sihirbazında son adımda
   "Devam" düğmesi gizlendiği hâlde ekranda kalıyordu ("Devam" ve "Bağışı gönder"
   yan yana görünüyordu). Tek kural hepsini çözer. */
[hidden] { display: none !important; }

.flash { padding:.85rem 1rem; border-radius:8px; font-size:calc(13.5px * var(--yazi-olcek, 1)); margin-bottom:1rem; }
.flash-ok { background:rgba(45,106,79,.12); color:#1f4d39; border:1px solid rgba(45,106,79,.3); }
.flash-err { background:rgba(153,27,27,.12); color:#7a1f1f; border:1px solid rgba(153,27,27,.3); }
.flash-info { background:rgba(30,64,175,.10); color:#1e3a8a; border:1px solid rgba(30,64,175,.25); }
/* Koyu temada ileti kutuları (30.09.2026 · Paket 3 önizlemesinde bulundu): koyu eşleri yoktu, koyu zeminde koyu
   yeşil/kırmızı/mavi yazı 1,6–2,0:1 kalıyordu (giriş, kayıt, bağış, panel · 32 yer). Açık tonlar → 7–11:1. Açık tema aynı. */
:where(.dark) .flash-ok   { background:rgba(91,167,127,.14); color:#8FD1AD; border-color:rgba(91,167,127,.35); }
:where(.dark) .flash-err  { background:rgba(224,98,98,.14);  color:#F2A3A3; border-color:rgba(224,98,98,.35); }
:where(.dark) .flash-info { background:rgba(122,162,247,.12); color:#AFC6FA; border-color:rgba(122,162,247,.3); }

/* ---- Bildirim balonu (toast) — 16.09.2026, kurum hata listesi · 7 -------
   SORUN: Panom'da şifre değiştiren kişi sayfanın altındaki formda duruyor; sonuç
   mesajı ise sağ sütunun EN ÜSTÜNE basılıyordu. Kullanıcı hiçbir şey olmamış gibi
   görüyordu ("şifre değişti ama uyarı gelmedi").
   ÇÖZÜM: Mesaj, ekranın sağ altında sabit duran bir balona taşınır; 6 saniye sonra
   kendiliğinden kapanır, elle de kapatılabilir. Renkler site paletinden: başarı
   yeşili #2D6A4F (ok), hata vişnesi #7A1F1F. JavaScript kapalıysa satır içi mesaj
   olduğu gibi kalır — bilgi hiçbir koşulda kaybolmaz. */
/* Balon SAYFANIN ÜSTÜNDE, ortada durur (16.09.2026): kullanıcı işlemi bitirdiğinde
   gözü sayfanın üst-orta bölgesinde oluyor; sağ altta gözden kaçıyordu. Yapışkan
   başlığın (65px) altına iniyor ki başlığı kapatmasın. */
.toast-kutu { position:fixed; z-index:60; display:flex; flex-direction:column; gap:.5rem;
              top:calc(env(safe-area-inset-top, 0px) + 76px); left:50%; transform:translateX(-50%);
              width:min(520px, calc(100vw - 2rem)); pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:flex-start; gap:.6rem;
         padding:.8rem .9rem; border-radius:10px; background:#2D6A4F; color:#FFFFFF;
         box-shadow:0 10px 28px rgba(26,24,22,.22); line-height:1.45;
         font-size:calc(13.5px * var(--yazi-olcek, 1)); animation:toast-gir .2s ease-out; }
.toast-err { background:#7A1F1F; }
.toast > span { flex:1; }
.toast-kapat { flex:none; background:none; border:0; color:inherit; opacity:.75; cursor:pointer;
               font-size:calc(16px * var(--yazi-olcek, 1)); line-height:1; padding:.1rem .15rem; border-radius:4px; }
.toast-kapat:hover { opacity:1; }
.toast-kapat:focus-visible { outline:2px solid #FFFFFF; outline-offset:2px; }
.toast.gidiyor { opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; }

/* ---- Görsel iskeleti (yükleniyor zemini) — 16.09.2026 -------------------
   Belge sayfasındaki tarama küçük görselleri eski sunucudan api/gorsel.php ile
   küçültülerek geliyor; ilk açılışta her biri tek tek ulaştığı için yerleri bir
   süre BOŞ görünüyordu ("görseller sonradan geliyor"). Bu sınıf doğrudan <img>
   öğesine veriliyor: görsel boyanana kadar kendi arka planı görünür, boyandığında
   görselin kendisi üstünü kapatır. JavaScript gerekmez, düzen değişmez —
   yer zaten aspect-[3/4] ile ayrılmış durumda. */
.iskelet {
  background-color: #EFEBE2;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.7) 42%, rgba(255,255,255,0) 64%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: iskelet-kay 1.5s linear infinite;
}
:where(.dark) .iskelet {
  background-color: #2A241D;
  background-image: linear-gradient(100deg, rgba(245,241,232,0) 20%, rgba(245,241,232,.09) 42%, rgba(245,241,232,0) 64%);
}
@keyframes iskelet-kay { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
  .iskelet { animation: none; }
}

/* ---- Panom: çapaya inilen bölümün vurgusu — 16.09.2026 ------------------
   Bölüm BOŞ olduğunda ("Henüz bağışın yok.") sayfa doğru yere kaysa bile göz
   ekranın ortasına baktığı için hangi başlığa gelindiği anlaşılmıyordu. Çapaya
   inilen bölüm kısa süre altın tonuyla vurgulanır; kutu kenarının biraz dışına
   taşsın diye gölge de aynı renkte veriliyor. Yalnız CSS :target ile çalışır,
   ek betik yok. Hareket azaltma açıksa yanıp sönme olmaz, vurgu sabit kalır.
   17.09.2026: .bolum-vurgu aynı efektin site geneli adı — Yardım (SSS), İstatistik
   ve Hakkımızda › İletişim bölümleri de soldaki menüden/bağlantıdan inilince yanar.
   Aynı bağlantıya tekrar basınca yeniden oynatma: footer.php · "çapa vurgusu". */
.pano-bolum, .bolum-vurgu { border-radius: 10px; }
.pano-bolum:target, .bolum-vurgu:target { animation: pano-vurgu 2s ease-out; }
@keyframes pano-vurgu {
  0%, 35% { background-color: rgba(201,169,97,.20); box-shadow: 0 0 0 6px rgba(201,169,97,.20); }
  100%    { background-color: transparent;          box-shadow: 0 0 0 6px rgba(201,169,97,0); }
}
:where(.dark) .pano-bolum:target, :where(.dark) .bolum-vurgu:target { animation-name: pano-vurgu-koyu; }
@keyframes pano-vurgu-koyu {
  0%, 35% { background-color: rgba(232,199,126,.14); box-shadow: 0 0 0 6px rgba(232,199,126,.14); }
  100%    { background-color: transparent;           box-shadow: 0 0 0 6px rgba(232,199,126,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pano-bolum:target, .bolum-vurgu:target { animation: none; background-color: rgba(201,169,97,.14); }
  :where(.dark) .pano-bolum:target, :where(.dark) .bolum-vurgu:target { background-color: rgba(232,199,126,.10); }
}
@keyframes toast-gir { from { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation:none; }
  .toast.gidiyor { transition:none; }
}

/* ---- Rozetler (tag-chip) ----------------------------------------------
   Okunabilirlik kuralı: rozetin kendi zemini olmalı; metin rengi tek başına
   yeterli değil. Kapak görselinin üstüne binen rozetler için .chip-media
   varyantı kullanılır (aşağıda) — o varyant temadan ve görselden bağımsız
   olarak her zaman koyu plaka + açık metin ile çizilir. */
.tag-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:calc(11px * var(--yazi-olcek, 1)); font-weight:600; line-height:1.45;
            border-radius:9999px; padding:.18rem .6rem; border:1px solid #D4CDBE;
            background:rgba(26,26,26,.06); color:#3A3734; white-space:nowrap; }
.tag-chip.kind-period { color:#22333C; background:rgba(44,62,71,.13); border-color:rgba(44,62,71,.45); }
.tag-chip.kind-type   { color:#6E1B1B; background:rgba(122,31,31,.13); border-color:rgba(122,31,31,.45); }
.tag-chip.kind-rights { color:#7A5E18; background:rgba(201,169,97,.22); border-color:rgba(160,130,60,.55); }
/* Dil rozeti — arama kartlarında Osmanlıca/Türkçe ayrımı için (tasarım B2). */
.tag-chip.kind-lang { color:#2C4A57; background:rgba(44,62,71,.10); border-color:rgba(44,62,71,.30); }
.tag-chip.kind-new    { color:#6E1B1B; background:rgba(122,31,31,.16); border-color:rgba(122,31,31,.55); }

/* Koyu tema: kind-* renkleri daha önce tanımlı değildi, koyu metin koyu
   zeminde kayboluyordu. Açık tonlu karşılıkları burada. */
.dark .tag-chip { border-color:#4A4238; background:rgba(245,241,232,.09); color:#D8D2C6; }
.dark .tag-chip.kind-period { color:#9CCBE0; background:rgba(111,165,189,.16); border-color:rgba(111,165,189,.42); }
.dark .tag-chip.kind-type   { color:#E99191; background:rgba(196,75,75,.18); border-color:rgba(196,75,75,.45); }
.dark .tag-chip.kind-rights { color:#EFCE8A; background:rgba(232,199,126,.16); border-color:rgba(232,199,126,.42); }
.dark .tag-chip.kind-lang { color:#9CC7D8; background:rgba(111,165,189,.14); border-color:rgba(111,165,189,.34); }
.dark .tag-chip.kind-new    { color:#E99191; background:rgba(196,75,75,.22); border-color:rgba(196,75,75,.55); }

/* Kapak görseli / placeholder üstündeki rozetler.
   Görselin rengi öngörülemez olduğu için plaka her iki temada da koyu ve
   yüksek opaklıkta; metin açık tonlu ama tür rengini korur. */
.tag-chip.chip-media,
.dark .tag-chip.chip-media {
  background:rgba(14,11,9,.80); border-color:rgba(255,255,255,.26); color:#F2EEE6;
  -webkit-backdrop-filter:blur(8px) saturate(115%); backdrop-filter:blur(8px) saturate(115%);
  box-shadow:0 1px 5px rgba(0,0,0,.42);
}
.tag-chip.chip-media.kind-period, .dark .tag-chip.chip-media.kind-period { color:#ADD5E8; }
.tag-chip.chip-media.kind-type,   .dark .tag-chip.chip-media.kind-type   { color:#F4AEAE; }
.tag-chip.chip-media.kind-rights, .dark .tag-chip.chip-media.kind-rights { color:#F2D496; }
.tag-chip.chip-media.kind-new,    .dark .tag-chip.chip-media.kind-new    { color:#F4AEAE; }

/* ============================================================
   Anasayfa açılış animasyonları — kademeli beliriş + sayaç + daktilo
   (tetikleme kaydırmaya bağlı değil; zamanlama includes/footer.php içinde)
   Kural: öğeler YALNIZCA JS aktifken (.reveal-on) gizli başlar.
   JS kapalı veya bir hata olursa hiçbir şey gizlenmez; tasarım
   birebir korunur. Sadece opacity + transform kullanılır (GPU,
   reflow yok) → scroll akıcı kalır, takılma olmaz.
   ============================================================ */
.reveal-on [data-reveal]{
  opacity:0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .75s cubic-bezier(.22,.61,.36,1);
}
.reveal-on [data-reveal="left"]{  transform: translateX(-44px); }
.reveal-on [data-reveal="right"]{ transform: translateX(44px); }
.reveal-on [data-reveal].is-in{ opacity:1; transform:none; }

/* Kart ızgaraları: çocuklar teker teker (stagger) yukarıdan gelir */
.reveal-on [data-reveal-stagger] > *{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal-on [data-reveal-stagger].is-in > *{ opacity:1; transform:none; }

/* Daktilo (typewriter) — hero başlığı yazılana kadar gizli, harf harf gelir */
.reveal-on [data-type]{ opacity:0; }
.reveal-on .tw{ opacity:0; transition: opacity .1s linear; }
/* İmleç YER KAPLAMAZ (03.11.2026 · kurum: "yazı animasyonu tamamlandığında sayfa içerikleri hareket ediyor").
   Eskiden satıra 1,05em boyunda bir kutu olarak giriyordu: satır aralığı sıkı başlıklarda (leading .95 / 1.02)
   satırı 2–10 px uzatıyor, yazım bitip imleç kalkınca altındaki her şey (düğmeler, ızgaralar) yukarı kayıyordu.
   Artık sıfır boyutlu bir işaret; çizgiyi ::after çiziyor, satırın boyu ve yazının yeri hiç değişmez. */
.tw-caret{
  display:inline-block; position:relative; width:0; height:0;
}
.tw-caret::after{
  content:""; position:absolute; left:.04em; bottom:-.14em;
  width:.08em; height:1.05em; background:currentColor; border-radius:1px;
  animation: tw-blink .9s steps(1) infinite;
}
@keyframes tw-blink{ 0%,49%{opacity:.9} 50%,100%{opacity:0} }

/* ============================================================
   BELGE DETAY DÜZENİ (dokuman.php · 28.09.2026 · eski tasarım B3)
   HTML sırası: kimlik kartı → görsel/içerik → üst veri. Telefonda bu sırayla
   alt alta akar (başlık görselin üstünde). Masaüstünde kart sağ üste, görsel
   sola (iki satır boyu), üst veri kartın altına oturur. Satırlar "auto 1fr":
   uzun görsel sütununun fazlası ikinci satıra gider, kartın altında boşluk kalmaz.
   ============================================================ */
@media (min-width: 1024px) {
  .dk-duzen { grid-template-rows: auto 1fr; row-gap: 1rem; }
  .dk-duzen > .dk-kimlik { grid-column: 9 / span 4; grid-row: 1; }
  .dk-duzen > .dk-ana    { grid-column: 1 / span 8; grid-row: 1 / span 2; }
  .dk-duzen > .dk-yan    { grid-column: 9 / span 4; grid-row: 2; align-self: start; }
}
/* Kimlik kartındaki 2×2 işlem ızgarası: favori düğmesi form ya da bağlantı olarak
   gelir (includes/favori.php · 'arac'); hücreyi doldursun, komşularıyla aynı boyda olsun. */
.dk-islem > form, .dk-islem > form > button, .dk-islem > a { width: 100%; }
.dk-islem > form > button, .dk-islem > a:not(.bg-visne) { height: 2.5rem; justify-content: center; font-size: 13px; }

/* /yasal "Birden çok yazdır" paneli (28.09.2026): telefonda satırın altında tam genişlik
   (açılır kutu ekran dışına taşmasın), geniş ekranda düğmenin altında açılır kutu. */
.yasal-coklu > summary::-webkit-details-marker { display: none; }
.yasal-coklu > summary { list-style: none; }
.yasal-coklu[open] { flex-basis: 100%; }            /* telefonda: açılınca satırın tamamını alır */
.yasal-coklu-panel { margin-top: .5rem; width: 100%; }
@media (min-width: 640px) {
  .yasal-coklu[open] { flex-basis: auto; }
  .yasal-coklu-panel { position: absolute; left: 0; top: 100%; margin-top: .25rem; width: 18rem; }
}
/* Yazdırılacak metinlerin kopyası ekranda hiç görünmez (yalnız kağıtta; aşağıda 5g). */
#yasal-coklu { display: none; }

/* Arama · yıl sürgüsü (29.09.2026 · eski tasarım B2): iki ayrı sürgü tek rayın üstünde üst üste;
   yalnız tutamaklar tıklanır (pointer-events), ray ve aradaki dolgu altta çizilir. Tutamak görünümü
   yukarıdaki genel input[type=range] kuralından gelir; burada yalnız üst üste bindirme. */
.yil-surgu { position: relative; height: 20px; }
.yil-surgu::before, .yil-surgu-dolu { content: ""; position: absolute; top: 9px; height: 2px; border-radius: 2px; }
.yil-surgu::before { left: 0; right: 0; background: #E5E0D6; }
.dark .yil-surgu::before { background: #3A332B; }
.yil-surgu-dolu { background: #7A1F1F; }
.dark .yil-surgu-dolu { background: #D9635B; }
.yil-surgu input[type=range] { position: absolute; left: 0; top: -2px; width: 100%; height: 24px; margin: 0; background: transparent; pointer-events: none; z-index: 2; }
.yil-surgu input[type=range]::-webkit-slider-thumb { pointer-events: auto; }
.yil-surgu input[type=range]::-moz-range-track { background: transparent; }
.yil-surgu input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #7A1F1F; border: 2px solid #FAFAF7; cursor: pointer; }
.dark .yil-surgu input[type=range]::-moz-range-thumb { background: #D9635B; border-color: #14110E; }
.yil-surgu input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(122, 31, 31, .35); }
.yil-surgu input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(122, 31, 31, .35); }

/* ============================================================
   YAZDIRMA (28.09.2026 — kurum hata listesi: /egitim, /yasal)
   Sitede hiç yazdırma kuralı yoktu: "Yazdır"a basıldığı an animasyon hangi
   karedeyse kağıda o basılıyordu (yarım yazılmış başlık "Şeffaf sözleş",
   görünmez kartlar), yapışkan üst şerit sayfanın ORTASINA düşüp içeriğin
   üstüne biniyor, kartlar iki sayfaya bölünüyordu.
   Sayaçların son değeri CSS ile verilemediği için includes/footer.php içinde
   "beforeprint" olayı da var; ikisi birlikte çalışır.
   ============================================================ */
@media print {
  /* 1) Animasyon yok: her şey son hâlinde basılır */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-on [data-reveal],
  .reveal-on [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .reveal-on [data-type], .reveal-on .tw { opacity: 1 !important; }
  .tw-caret { display: none !important; }

  /* 2) Yapışkan şeritler kağıtta yerinde, bir kez basılır (üst şerit, sekme satırları, yan menüler) */
  .sticky, .lg\:sticky { position: static !important; }

  /* 3) Kağıtta işe yaramayanlar: gezinme menüsü ve üst şeridin sağındaki düğmeler.
        Logo kalır; hangi siteden basıldığı belli olsun. */
  header nav, header .ml-auto, details.mobil-menu, [data-yazdirma-gizle] { display: none !important; }

  /* 4) Yana kayan satırlar (sekmeler, çipler) kağıtta kesilmesin, alt satıra sarsın.
        Üst/alt boşluk: sarılan ikinci satır şeridin alt çizgisine yapışıp "üstünden çizgi
        geçiyor" gibi görünmesin (/yasal belge sekmeleri, 28.09.2026). */
  .overflow-x-auto { overflow: visible !important; }
  .overflow-x-auto.flex { flex-wrap: wrap !important; height: auto !important; row-gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }

  /* 5) Kartlar ve başlıklar sayfa sonunda ikiye bölünmesin.
        "article" burada YOK (28.09.2026): /yasal ve blog metni 3 sayfalık tek bir article;
        "bölünmesin" denince Chrome onu önce yeni sayfaya itiyor (arkasında yarım sayfa boşluk),
        sığmayınca satırları sayfa sınırında ikiye kesiyordu. Kart olan article'lar .hairline
        taşıdığı için kuralı yine alır. */
  .hairline, figure, blockquote, [data-reveal-stagger] > * { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* 5b) /yasal: ekranda üç sütunlu ızgara (içindekiler · metin · kısa yollar). Kağıtta zaten
        tek sütun; düz alt alta akışa çevrilir ki Chrome uzun metni ızgara kutusu gibi ele alıp
        sayfa sınırında satırları ikiye kesmesin. gap-10 yerine aynı boşluk. */
  #belge { display: block !important; }
  #belge > * + * { margin-top: 2.5rem; }

  /* 5c) Çerçeve kutunun İÇİNE çizilir. Ekrandaki .hairline çerçevesi kutunun 1px DIŞINA
        taşan bir gölge; kart yeni sayfaya itilince o 1px'lik üst kenar önceki sayfanın dibinde
        ince bir çizgi olarak kalıyor, yeni sayfadaki kartın da üst kenarı eksik görünüyordu
        (/egitim kademe kartları, kurum ekran görüntüsündeki yer). Koyu zeminli düğmelerin
        çerçevesi 6. maddede ayrıca verilir, onlara dokunulmaz. */
  .hairline:not(.bg-ink):not(.bg-visne):not(.bg-gece) { box-shadow: none !important; outline: 1px solid #E5E0D6; outline-offset: -1px; }

  /* 5d) Resimler kağıtta boş kutu çıkmasın. Kapaklar ve materyal resimleri sayfaya ARKA PLAN
        resmi olarak konuyor (helpers.php · kapak_style); Chrome "Arka plan grafikleri" kapalıyken
        (varsayılan) arka planı basmıyor → boş kutu (/egitim sınıf önizlemesi, 28.09.2026).
        Yalnız gerçek resim taşıyan kutular her durumda basılır. Özellik alt öğelere geçer: resmin
        üstündeki koyu etiketler ve karartma katmanı da basılır, açık renkli yazı okunur kalır.
        Resmi olmayan desenli kutular etkilenmez. */
  [style*="background-image"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 5e) /egitim "Kademe seç": dört kart ekranda tek sıra. Kağıt ekrandan dar olduğu için 2×2'ye
        düşüyor, sayfa sonunda ikinci sıra (Lise, Üniversite) bir sonraki sayfaya kayıyordu — grup
        ikiye ayrılıyordu (28.09.2026). Kağıtta da tek sıra; tek sıra bölünmez. Yalnız bu ızgara
        (egitim.php · .kademe-izgara); sitedeki öteki dört sütunlu ızgaralara dokunmaz. */
  .kademe-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; break-inside: avoid; page-break-inside: avoid; }

  /* 5f) Belge detay (dokuman.php · 28.09.2026 yeni düzen): kimlik kartındaki düğmeler, sekme
        şeridi ve seri gezinmesi kağıtta basılmaz (data-yazdirma-gizle, 3. madde) — görsel 1.
        sayfaya sığar. "Sayfalar" kutusu (63 taramalık kitap gibi) sayfadan uzun olabilir: bütün
        hâlinde yeni sayfaya itilince arkasında yarım sayfa boşluk kalıyordu → kutu akar, içindeki
        küçük kartlar bölünmez. */
  #sayfalar { break-inside: auto !important; page-break-inside: auto !important; }
  #sayfalar li { break-inside: avoid; page-break-inside: avoid; }

  /* 5g) /yasal "Birden çok yazdır" (28.09.2026): seçilen metinler #yasal-coklu içinde sırayla;
        o an ekrandaki tek metin (#belge) basılmaz. Her metin yeni sayfadan başlar. Baştaki
        notlar (KVKK uyumu · belge sayısı · güncelleme) üst bölümde kalır. */
  html.yasal-coklu-acik #belge { display: none !important; }
  html.yasal-coklu-acik #yasal-coklu { display: block !important; }
  #yasal-coklu > article + article { break-before: page; page-break-before: always; }
  /* Metnin sonundaki "Bu metin … güncellendi" notu tek başına yeni sayfaya düşmesin:
     önündeki paragrafla birlikte kalır (boş bir sayfada yalnız iki satır kalıyordu). */
  #yasal-coklu > article > .hairline:last-child, #belge article > .hairline:last-child { break-before: avoid; page-break-before: avoid; }
  /* Metin başlığı ve "Son güncelleme" satırı sayfa dibinde tek kalmasın: ilk bölümle birlikte. */
  #yasal-coklu > article > div:nth-child(-n+2), #belge article > div:nth-child(-n+2) { break-after: avoid; page-break-after: avoid; }
  #yasal-coklu > article > section:first-of-type, #belge article > section:first-of-type { break-inside: avoid; page-break-inside: avoid; }
  /* Hukuki metinde bir madde (paragraf) iki sayfaya bölünmesin: sığmazsa bütün olarak sonraki
     sayfaya geçer (kullanıcı, 28.09.2026 — "İlgili kişinin hakları" 4+2 satır bölünüyordu). */
  #yasal-coklu article p, #belge article p { break-inside: avoid; page-break-inside: avoid; }
  /* Madde 11 kutusu (29.09.2026 · eski tasarım "Haklarınız"): kağıtta sıkı. Kutu gelince KVKK
     çıktısı 4 sayfadan 5'e çıkıyor, son bölüm ("Değişiklikler") tek başına yeni sayfaya düşüyordu.
     Ekrandaki görünüm aynı; yalnız kağıtta iç boşluk ve satır aralığı daralır. */
  .yasal-m11 { padding: .45rem .7rem !important; margin-top: .5rem !important; }
  .yasal-m11 > div:first-child { margin-bottom: .2rem !important; }
  .yasal-m11 ul { font-size: 11.5px !important; line-height: 1.35 !important; row-gap: 0 !important; }

  /* 5h) /istatistik "Yazdır / PDF" (29.09.2026): çubuklar, ısı haritası ve dönem kapsamı tablosu
        ZEMİN rengiyle çiziliyor; Chrome "Arka plan grafikleri" kapalıyken (varsayılan) zemini
        basmıyor, grafikler kağıtta boş kalıyordu. Yalnız bu sayfanın içeriğinde renkler olduğu
        gibi basılır (istatistik.php · main.ist-sayfa). Koyu tema kağıtta zaten kapalı (footer.php). */
  main.ist-sayfa, main.ist-sayfa * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* On yıllık çubuklar: 4. madde (yana kayan şeritler kağıtta alt satıra iner) bu grafiği ikiye
     bölüyor, alt satırdaki birkaç çubuk bütün genişliğe yayılıp orantısız görünüyordu. Kağıtta tek
     satır; çubuklar daralır (20 on yıl A4 genişliğine sığar), yükseklik ekrandaki gibi sabit. */
  main.ist-sayfa .ist-cubuk { flex-wrap: nowrap !important; height: 9rem !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: visible !important; }
  main.ist-sayfa .ist-cubuk > * { min-width: 0 !important; }

  /* 6) Koyu zeminli düğmeler ve seçili sekmeler ("Kitapçığı indir", "KVKK Aydınlatma Metni"):
        tarayıcı zemini basmaz, beyaz yazı beyaz kağıtta kaybolur. Zemin kaldırılır, yazı koyu,
        çevresine ince çerçeve — "arka plan grafikleri" açık basılsa da okunur kalsın. */
  /* :not(:empty) — içi boş olanlar süs noktası (sekmelerdeki renkli nokta); çerçeve almasın. */
  .bg-ink:not(:empty), .bg-visne:not(:empty), .bg-gece:not(:empty) {
    background: transparent !important; box-shadow: inset 0 0 0 1px #1A1A1A !important;
  }
  .bg-ink, .bg-ink *, .bg-visne, .bg-visne *, .bg-gece, .bg-gece * { color: #1A1A1A !important; }
}

/* Erişilebilirlik: hareketi azalt seçeneği açıksa animasyon yok, her şey görünür. */
@media (prefers-reduced-motion: reduce){
  .reveal-on [data-reveal],
  .reveal-on [data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .reveal-on [data-type]{ opacity:1 !important; }
  .reveal-on .tw{ opacity:1 !important; }
  .tw-caret{ display:none !important; }
}

/* Arama filtre paneli: kendi içinde kayan alan. Kaydırma çubuğu ince ve ayrı bir
   olukta (gutter) durur → sağdaki sayıların üstüne binmez, tasarıma sinen bir çizgi olur. */
.filtre-scroll {
  scrollbar-gutter: stable;
  scrollbar-width: thin;                     /* Firefox */
  scrollbar-color: #C9BEA6 transparent;      /* Firefox: thumb / track */
}
.dark .filtre-scroll { scrollbar-color: #4A4238 transparent; }
.filtre-scroll::-webkit-scrollbar { width: 6px; }
.filtre-scroll::-webkit-scrollbar-track { background: transparent; }
.filtre-scroll::-webkit-scrollbar-thumb { background: #D4CDBE; border-radius: 8px; }
.filtre-scroll::-webkit-scrollbar-thumb:hover { background: #C9BEA6; }
.dark .filtre-scroll::-webkit-scrollbar-thumb { background: #4A4238; }

/* Harita kümesi: yakın noktaları toplayan sayılı daire (harita.php).
   Leaflet ikona kendi sınıflarını (leaflet-marker-icon) ve satır içi
   genişlik/yükseklik stillerini de ekliyor. Bu yüzden sayıyı dış kutunun
   display'ine (grid/flex) güvenerek ortalamak GÜVENİLİR DEĞİL — ilk denemede
   sayı sol üst köşede kaldı. Çözüm: sayıyı mutlak konumla kutunun tamamına
   yayıp orada ortalamak; dışarıdan ne gelirse gelsin sonuç değişmiyor. */
/* --------------------------------------------------------------------------
 * Kâğıt harita görünümü (tasarım B8)
 * Mockup'ta harita çizilmiş bir kâğıt paftaydı; bizde gerçek OSM döşemeleri
 * var. Döşeme KATMANINA süzgeç uygulanıyor — imleçler, balonlar ve harita
 * üstündeki kartlar ayrı panellerde olduğu için onlara bulaşmıyor.
 * Koyu temada invert+hue-rotate: OSM'in koyu sürümü yok, açık döşemeyi
 * tersine çevirmek tek yol; hue-rotate olmadan mavi sular turuncuya dönüyor.
 * ------------------------------------------------------------------------ */
.harita-kagit .leaflet-tile-pane {
  filter: sepia(.38) saturate(.72) contrast(1.02) brightness(1.02);
}
.dark .harita-kagit .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) sepia(.22) saturate(.7) brightness(.85) contrast(.95);
}

.kume-ikon {
  position: relative;
  box-sizing: border-box;               /* 2px kenarlık ölçüyü şişirmesin */
  border-radius: 999px;
  background: rgba(122, 31, 31, .88);   /* visne */
  border: 2px solid rgba(245, 241, 232, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: transform .12s ease;
}
.kume-ikon > span {
  position: absolute;
  inset: 0;                             /* kutunun tamamını kapla */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F5F1E8;
  font: 600 12.5px/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;   /* rakam genişlikleri eşit, sayı oynamaz */
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;                 /* tıklama daireye gitsin */
}
.kume-ikon:hover { transform: scale(1.08); }
.dark .kume-ikon { background: rgba(155, 45, 45, .9); border-color: rgba(245, 241, 232, .8); }

@media (prefers-reduced-motion: reduce) {
  .kume-ikon, .kume-ikon:hover { transition: none; transform: none; }
}

/* Aynı noktadaki kayıtları listeleyen harita balonu (harita.php > kumePopup).
   Leaflet balonu belgeye eklendiği için buradaki kurallar geçerli. Satır içi
   stille yazılamayacak iki şey burada: :hover ve ok işareti. Onlar olmadan
   satırlar düz metin gibi duruyor, tıklanabilir olduğu anlaşılmıyordu. */
/* max-height satır içinde JS'ten veriliyor: harita kutusunun yüksekliğine göre
   hesaplanıyor (bkz. harita.php > kumePopup). Burada yalnızca kaydırma davranışı.
   overflow-x:hidden — satırların yatayda taşıp ikinci bir kaydırma çubuğu
   doğurmasını engeller. overscroll-behavior — listenin sonuna gelince kaydırma
   sayfaya/haritaya sıçramasın. */
.kume-liste {
  font-family: ui-sans-serif, system-ui, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
/* Kaydırırken başlık üstte kalır: 23 satırın ortasındayken hangi kümede
   olduğun görünsün. Zemin şart, yoksa satırlar başlığın altından geçer. */
.kume-liste-bas {
  position: sticky; top: 0; z-index: 1;
  background: #fff;
  font-family: Fraunces, Georgia, serif;
  font-size: calc(15px * var(--yazi-olcek, 1)); line-height: 1.2;
  padding-bottom: 6px;
}
.kume-satir {
  display: block;
  position: relative;
  padding: 7px 22px 7px 4px;          /* sağda ok + kaydırma çubuğu için yer */
  border-top: 1px solid #E5E0D5;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color .12s ease;
}
.kume-satir:hover { background: #F2EEE4; }
.kume-satir::after {                  /* tıklanabilirlik işareti */
  content: '→';
  position: absolute; right: 5px; top: 50%;
  transform: translateY(-50%);
  color: #7A1F1F;
  opacity: 0; transition: opacity .12s ease;
}
.kume-satir:hover::after { opacity: 1; }
.kume-satir-ad {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: calc(13.5px * var(--yazi-olcek, 1)); line-height: 1.25;
}
.kume-satir-alt {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(10px * var(--yazi-olcek, 1)); color: #6B6660; margin-top: 2px;
}
.kume-liste-not {
  border-top: 1px solid #E5E0D5;
  padding: 7px 4px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(10px * var(--yazi-olcek, 1)); color: #8A8478;
}
/* Aynı öğe artık bir DÜĞME: eskiden "+12 kayıt daha" yazan ölü bir nottu,
   şimdi kalan kayıtları listeye ekliyor. Tıklanabilir olduğu görünmeli —
   yoksa yine not sanılır ve kimse basmaz. Düğme öğesinin tarayıcı
   varsayılanları (zemin, kenarlık, hizalama) burada sıfırlanıyor. */
.kume-liste-devam {
  display: block; width: 100%;
  margin-top: 4px;
  background: none; border: 0; border-top: 1px solid #E5E0D5;
  text-align: left; cursor: pointer;
  color: #7A1F1F;
  transition: color .15s ease;
}
.kume-liste-devam:hover { color: #5E1717; text-decoration: underline; }
.dark .kume-liste-devam { color: #D9635B; }
.dark .kume-liste-devam:hover { color: #D96A6A; }
/* Harita balonu · koyu tema (01.10.2026 koyu tema taraması). Leaflet'in balonu koyu temada beyaz kalıyordu:
   koyu ekranın ortasında parlak bir kutu. Balon sitenin koyu yüzeyine çekildi; içindeki sabit renkler
   (başlık zemini, satır çizgisi, soluk künye, bağlantı) koyu eşlerini aldı. Tek kayıt balonundaki satır içi
   renkler --balon-* değişkenlerini okur (harita.php · popupHtml); açık temada değişken tanımsız olduğundan
   eski renkler aynen kalır. AÇIK TEMA DEĞİŞMEDİ. */
.dark .leaflet-popup-content-wrapper,
.dark .leaflet-popup-tip { background: #1F1B16; color: #F5F1E8; box-shadow: 0 3px 14px rgba(0,0,0,.6), 0 0 0 1px #3A332B; }
.dark .leaflet-popup-content-wrapper { --balon-soluk: #B5AD9F; --balon-soluk2: #A39C8F; --balon-bag: #E8867F; }
.dark .leaflet-container a.leaflet-popup-close-button { color: #C9C2B4; }
.dark .leaflet-container a.leaflet-popup-close-button:hover { color: #F5F1E8; }
.dark .kume-liste { scrollbar-color: #4A4238 transparent; }
.dark .kume-liste-bas { background: #1F1B16; }
.dark .leaflet-container a.kume-satir { color: #F5F1E8; border-top-color: #3A332B; }
.dark .kume-satir:hover { background: #2A241D; }
.dark .kume-satir::after { color: #E8867F; }
.dark .kume-satir-alt { color: #B5AD9F; }
.dark .kume-liste-not { color: #A39C8F; border-top-color: #3A332B; }
.dark .kume-liste-devam { border-top-color: #3A332B; }
.dark .leaflet-container .leaflet-control-attribution { background: rgba(31,27,22,.92); color: #C9C2B4; }
.dark .leaflet-container .leaflet-control-attribution a { color: #C9C2B4; }
@media (prefers-reduced-motion: reduce) { .kume-liste-devam { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .kume-satir, .kume-satir::after { transition: none; }
}

/* Arama sonucu kartındaki favori yıldızı. Kapak görselinin üstünde durduğu için
   rengi sabit değil: koyu yarı saydam bir daire, altındaki fotoğraf açık da olsa
   koyu da olsa yıldız okunur kalsın. */
.fav-dugme {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  font-size: calc(15px * var(--yazi-olcek, 1)); line-height: 1;
  color: #F5F1E8;
  background: rgba(26, 24, 22, .55);
  border: 1px solid rgba(245, 241, 232, .28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color .15s ease, transform .12s ease, color .15s ease;
}
.fav-dugme:hover { background: rgba(26, 24, 22, .8); transform: scale(1.08); }
.fav-dugme:active { transform: scale(.96); }
.fav-acik { color: #E0BE6E; }

@media (prefers-reduced-motion: reduce) {
  .fav-dugme, .fav-dugme:hover, .fav-dugme:active { transition: none; transform: none; }
}

/* SSS (yardım) akordeon — sade artı işareti açıkken ×'e döner, içerik yumuşak açılır.
   Yalnızca .faq-* sınıfları hedeflenir; sitenin diğer <details> öğeleri etkilenmez. */
.faq-item { transition: box-shadow .2s ease; }
.faq-summary { cursor: pointer; }
.faq-plus {
  position: relative; width: 15px; height: 15px; flex: none; color: #6B6660;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.faq-plus::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }   /* yatay çizgi */
.faq-plus::after  { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }   /* dikey çizgi */
.faq-summary:hover .faq-plus { color: #7A1F1F; }
.dark .faq-summary:hover .faq-plus { color: #D9635B; }
details[open] .faq-plus { transform: rotate(135deg); color: #7A1F1F; }  /* + → × */
.dark details[open] .faq-plus { color: #D9635B; }
details[open].faq-item { box-shadow: 0 0 0 1px #D4CDBE; }
.dark details[open].faq-item { box-shadow: 0 0 0 1px #4A4238; }
.faq-body { animation: faq-open .3s cubic-bezier(.22,.61,.36,1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Yardım · üst bölüm çizimi (05.10.2026 · kullanıcı isteği) ---------------------------------------------
   Üst bölümün sağındaki boşlukta "soru kartı" çizimi (yardim.php · .yardim-cizim). Hata sayfalarındaki çizgi
   çizimlerle aynı dil: mürekkep çizgi, bordo ve altın vurgu, kâğıt dolgu. Kütüphane yok — satır içi SVG + CSS.
   YALNIZ SÜS: 1280 px altında hiç çizilmez (telefon, tablet), dokunmaya kapalıdır, kâğıda basılmaz.
   Renkler değişkenle: koyu temada kendiliğinden döner. Hareket: satırlar bir kez "yazılır", büyüteç kartın üstünde
   ağır ağır gezinir, soru damgası hafifçe sallanır, yol akar. "Hareketi azalt" tercihi açıksa hepsi durur. */
.yardim-cizim { display: none; }
@media (min-width: 1280px) {
  .yardim-cizim { display: block; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
                  pointer-events: none; user-select: none;
                  --yc-m: #1A1A1A; --yc-s: #8A8478; --yc-b: #7A1F1F; --yc-a: #A17E2E; --yc-k: #FFFFFF; --yc-k2: #F2EEE6; }
  .dark .yardim-cizim { --yc-m: #F5F1E8; --yc-s: #8F887B; --yc-b: #D9635B; --yc-a: #E8C77E; --yc-k: #1F1B16; --yc-k2: #2A241D; }
  /* yüksek kontrast: sitenin o moddaki bordo / altın tonları (layout_head.php ile aynı), dolgu düz beyaz / siyah */
  .yuksek-kontrast .yardim-cizim { --yc-m: #000000; --yc-s: #3D3D3D; --yc-b: #5C1414; --yc-a: #5A4613; --yc-k: #FFFFFF; --yc-k2: #FFFFFF; }
  .yuksek-kontrast.dark .yardim-cizim { --yc-m: #FFFFFF; --yc-s: #D6D6D6; --yc-b: #FFB4AC; --yc-a: #F5DC9A; --yc-k: #000000; --yc-k2: #000000; }
  .yardim-cizim svg { display: block; width: min(32vw, 460px); height: auto; overflow: visible; }
  .yardim-cizim .yc-m { stroke: var(--yc-m); }
  .yardim-cizim .yc-s { stroke: var(--yc-s); }
  .yardim-cizim .yc-b { stroke: var(--yc-b); }
  .yardim-cizim .yc-a { stroke: var(--yc-a); }
  .yardim-cizim .yc-kagit  { fill: var(--yc-k); }
  .yardim-cizim .yc-kagit2 { fill: var(--yc-k2); }
  .yardim-cizim .yc-damga-zemin { fill: var(--yc-b); fill-opacity: .06; }
  .yardim-cizim .yc-db { fill: var(--yc-b); }
  .yardim-cizim .yc-da { fill: var(--yc-a); }
  .yardim-cizim .yc-ym { fill: var(--yc-m); }
  .yardim-cizim .yc-ys { fill: var(--yc-s); }
  .yardim-cizim .yc-yb { fill: var(--yc-b); }
  .yardim-cizim .yc-ya { fill: var(--yc-a); }

  /* satırlar bir kez yazılır (pathLength="1": çizgi boyu 1 sayılır) */
  .yardim-cizim .yc-ciz { stroke-dasharray: 1; stroke-dashoffset: 1; animation: yc-yaz .9s cubic-bezier(.22,.61,.36,1) forwards; }
  .yardim-cizim .yc-g1 { animation-delay: .45s; }
  .yardim-cizim .yc-g2 { animation-delay: .75s; }
  .yardim-cizim .yc-g3 { animation-delay: 1.25s; }
  .yardim-cizim .yc-g4 { animation-delay: 1.5s; }
  .yardim-cizim .yc-g5 { animation-delay: 1.75s; }
  .yardim-cizim .yc-g6 { animation-delay: 2s; }
  .yardim-cizim .yc-buyutec { animation: yc-gez 9s ease-in-out infinite; }
  .yardim-cizim .yc-damga { transform-origin: 356px 98px; animation: yc-sallan 7s ease-in-out infinite; }
  .yardim-cizim .yc-yol { animation: yc-ak 1.8s linear infinite; }
  .yardim-cizim .yc-cevap { transform-origin: 388px 326px; animation: yc-nabiz 4.5s ease-in-out infinite; }
  .yardim-cizim .yc-art { animation: yc-goz 3.6s ease-in-out infinite; }
  .yardim-cizim .yc-a2 { animation-delay: 1.2s; }
  .yardim-cizim .yc-a3 { animation-delay: 2.4s; }
}
@keyframes yc-yaz    { to { stroke-dashoffset: 0; } }
@keyframes yc-gez    { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(34px, -22px); } 70% { transform: translate(86px, -6px); } }
@keyframes yc-sallan { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes yc-ak     { to { stroke-dashoffset: -20; } }
@keyframes yc-nabiz  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes yc-goz    { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .yardim-cizim * { animation: none !important; }
  .yardim-cizim .yc-ciz { stroke-dashoffset: 0; }
}
@media print { .yardim-cizim { display: none !important; } }

/* ---- Pano · rozet simgeleri (06.10.2026 · kullanıcı isteği) -------------------------------------------------
   Kullanıcı panosundaki dört rozetin çizgi simgesi (includes/rozet_simge.php · panom.php). Eskiden profil
   şeridinde emoji, "Profil rozetleri" kartında iki harfli renkli daire vardı. Yardım çizimiyle aynı dil ve
   yöntem: çift halka + ince çizgi, satır içi SVG + CSS; kütüphane yok.
   Renk rozetin kendi rengi (kartın altındaki ilerleme çubuğuyla aynı aile). Altın, beyaz zeminde ince çizgi
   okunsun diye koyulaştırıldı; koyu temada ve yüksek kontrastta sitenin o moddaki tonları kullanılır.
   Kazanılmış: dolu halka, renkli çizim; sayfa açılınca çizgiler BİR KEZ çizilir. Kazanılmamış: gri kesik halka,
   gri çizim; çevredeki renkli yay ilerlemeyi gösterir. Çizgiler varsayılan olarak ÇİZİLİ durur: hareket
   çalışmazsa, kâğıtta ya da "hareketi azalt" açıkken simge eksik kalmaz. */
.rz { display: block; margin: 0 auto; --rz-gri: #8A8478; }
.rz-bagisci      { --rz-renk: #8A6A1F; }
.rz-tarihci      { --rz-renk: #7A1F1F; }
.rz-tanik        { --rz-renk: #2C3E47; }
.rz-koleksiyoncu { --rz-renk: #2D6A4F; }
.dark .rz { --rz-gri: #8F887B; }
.dark .rz-bagisci      { --rz-renk: #E8C77E; }
.dark .rz-tarihci      { --rz-renk: #D9635B; }
.dark .rz-tanik        { --rz-renk: #6FA5BD; }
.dark .rz-koleksiyoncu { --rz-renk: #5BA77F; }
/* yüksek kontrast: sitenin o moddaki tonları (layout_head.php ile aynı); zemin dolgusu yok */
.yuksek-kontrast .rz { --rz-gri: #3D3D3D; }
.yuksek-kontrast .rz-bagisci      { --rz-renk: #5A4613; }
.yuksek-kontrast .rz-tarihci      { --rz-renk: #5C1414; }
.yuksek-kontrast .rz-tanik        { --rz-renk: #22333C; }
.yuksek-kontrast .rz-koleksiyoncu { --rz-renk: #1E4D38; }
.yuksek-kontrast.dark .rz { --rz-gri: #D6D6D6; }
.yuksek-kontrast.dark .rz-bagisci      { --rz-renk: #F5DC9A; }
.yuksek-kontrast.dark .rz-tarihci      { --rz-renk: #FFB4AC; }
.yuksek-kontrast.dark .rz-tanik        { --rz-renk: #B5DDEE; }
.yuksek-kontrast.dark .rz-koleksiyoncu { --rz-renk: #9BE0B8; }
.rz-zemin { fill: var(--rz-renk); fill-opacity: .10; }
.rz-yok .rz-zemin, .yuksek-kontrast .rz-zemin { fill-opacity: 0; }
.rz-halka { stroke: var(--rz-renk); stroke-width: 1.6; }
.rz-yok .rz-halka { stroke: var(--rz-gri); stroke-width: 1.1; stroke-dasharray: 2 3.6; }
.rz-nokta { stroke: var(--rz-renk); stroke-width: .8; stroke-dasharray: 1 3.4; opacity: .75; }
.rz-ilerleme { stroke: var(--rz-renk); stroke-width: 2.4; }
.rz-cizim path { stroke: var(--rz-renk); stroke-width: 1.7; }
.rz-yok .rz-cizim path { stroke: var(--rz-gri); }
/* bir kez çizilme: yalnız kazanılmış rozette, çizgiler sırayla (pathLength="1": çizgi boyu 1 sayılır) */
.rz-var .rz-cizim path { animation: rz-ciz .8s cubic-bezier(.22,.61,.36,1) .15s backwards; }
.rz-var .rz-cizim path:nth-child(2) { animation-delay: .27s; }
.rz-var .rz-cizim path:nth-child(3) { animation-delay: .39s; }
.rz-var .rz-cizim path:nth-child(4) { animation-delay: .51s; }
.rz-var .rz-cizim path:nth-child(5) { animation-delay: .63s; }
.rz-var .rz-cizim path:nth-child(6) { animation-delay: .75s; }
.rz-var .rz-cizim path:nth-child(7) { animation-delay: .87s; }
@keyframes rz-ciz { from { stroke-dasharray: 1 2; stroke-dashoffset: 1; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rz-cizim path { animation: none !important; } }
@media print { .rz-cizim path { animation: none !important; } }
/* profil şeridindeki etiketin başındaki küçük simge: yazının rengini alır, yazı boyutuyla birlikte büyür */
.rz-kucuk { flex: none; width: 1.25em; height: 1.25em; }

/* ---- Hakkımızda · panel satırları ve "sitede yerini gör" (06.10.2026 · kullanıcı isteği) -------------------
   Hakkımızda sayfasının dört bölümü panelden düzenlenir (includes/hakkimizda_icerik.php).
   1) Panel: ekip kartı ve künye satırlarının yerleşimi. Derlenmiş stilde 12'li ızgaranın geniş ekran
      sınıfları olmadığı için burada; dar ekranda alanlar alt alta dizilir.
   2) Panel: bölüm başlığındaki küçük sayfa şemasında o bölümün yeri boyalı (.hk-sema-yer).
   3) Site: panelde "Sitede yerini gör" ile gelindiğinde (adres #hk-… ile biter) o bölüm birkaç saniye
      çerçevelenir (.hk-yer:target). Çerçeve "outline" ile çizilir: kutuların kendi ince kenarlığı
      (box-shadow) bozulmaz, yer kaplamaz, sayfa kaymaz. Bağlantısız gelen ziyaretçi için hiçbir şey değişmez. */
.hk-satir { display: grid; gap: .5rem; grid-template-columns: 1fr; flex: 1 1 0%; min-width: 0; }
.hk-kunye { display: grid; gap: .25rem .75rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) {
  .hk-satir { grid-template-columns: 1.1fr 2.2fr 1.1fr; }
  .hk-kunye { grid-template-columns: 9rem 1fr; }
}
.hk-sema-yer { fill: #7A1F1F; }
.dark .hk-sema-yer { fill: #D9635B; }
.yuksek-kontrast .hk-sema-yer { fill: #5C1414; }
.yuksek-kontrast.dark .hk-sema-yer { fill: #FFB4AC; }
.hk-yer { scroll-margin-top: 7rem; }
.hk-yer:target { outline: 4px solid transparent; outline-offset: 6px; animation: hk-yer 4s ease-out; }
.dark .hk-yer:target { animation-name: hk-yer-koyu; }
@keyframes hk-yer      { 0%, 75% { outline-color: #7A1F1F; } 100% { outline-color: rgba(122,31,31,0); } }
@keyframes hk-yer-koyu { 0%, 75% { outline-color: #D9635B; } 100% { outline-color: rgba(217,99,91,0); } }
@media (prefers-reduced-motion: reduce) {
  .hk-yer:target { animation: none; outline-color: #7A1F1F; }
  .dark .hk-yer:target { outline-color: #D9635B; }
}
@media print { .hk-yer:target { animation: none !important; outline: 0 !important; } }

/* ---- Panel veri tabloları (includes/tablo.php bileşeni) --------------------
   Uzun listelerde satır takibini kolaylaştıran zebra deseni + imleç vurgusu.
   Renkler kağıt paletiyle uyumlu; koyu temada aynı etki düşük opaklıkla. */
.dt { border-collapse: collapse; }
.dt tbody tr             { transition: background-color .12s ease; }
.dt tbody tr:nth-child(even) { background: rgba(26,26,26,.028); }
.dt tbody tr:hover       { background: rgba(201,169,97,.13); }
.dark .dt tbody tr:nth-child(even) { background: rgba(245,241,232,.035); }
.dark .dt tbody tr:hover { background: rgba(232,199,126,.09); }

/* Sıralanabilir başlıklar: ok her zaman yer kaplar ki sıralama değişince
   sütun genişliği zıplamasın. Etkin olmayanın oku soluk durur. */
.dt thead th a           { text-decoration: none; }
.dt thead th a:hover     { text-decoration: underline; }
.dt-ok                   { display: inline-block; width: .85em; text-align: center; }

/* ---- Arama sonuçlarında eşleşen kelime ------------------------------------
   Tarayıcının sarı <mark> varsayılanı kağıt paletinin içinde çığlık atıyor;
   altın tonuna çekiliyor. Metin rengi miras alınır → koyu temada da okunur. */
mark {
  background: rgba(201,169,97,.34);
  color: inherit;
  padding: 0 .12em;
  border-radius: 2px;
}
.dark mark { background: rgba(232,199,126,.24); }

/* ---- Mobil menü (includes/topbar.php) -------------------------------------
   <details> tabanlı: JS gerektirmez. Tarayıcının varsayılan üçgen işareti
   kaldırılıp yerine hamburger/çarpı ikonları konuyor (Safari ayrı kural ister). */
.mobil-menu > summary { list-style: none; }
.mobil-menu > summary::-webkit-details-marker { display: none; }
.mobil-menu > summary .mm-ka { display: none; }   /* çarpı: yalnızca açıkken */
.mobil-menu[open] > summary .mm-ac { display: none; }
.mobil-menu[open] > summary .mm-ka { display: block; }

/* Arama sayfası mobil filtre paneli: panel açıkken ok işareti dönsün.
   Tailwind'in peer-checked: varyantı KARDEŞ seçicidir; ok işareti label'ın
   içinde olduğu için ona ulaşamıyor — kural bu yüzden burada. */
.filtre-ok { transition: transform .2s ease; }
#filtre-ac:checked ~ label .filtre-ok { transform: rotate(180deg); }

/* ---- Görsel büyüteci (dokuman.php) ----------------------------------------
   Tam ekran görüntüleyici. touch-action:none olmadan mobilde sürükleyerek
   kaydırma sayfayı kaydırır, görseli değil. */
.bz-alan { touch-action: none; cursor: grab; overscroll-behavior: contain; }
.bz-alan.bz-tut { cursor: grabbing; }
.bz-alan img { will-change: transform; -webkit-user-drag: none; user-select: none; }
.bz-dugme {
  display: inline-grid; place-items: center; height: 34px; min-width: 34px;
  padding: 0 .6rem; border-radius: 6px; font-size: calc(13px * var(--yazi-olcek, 1)); line-height: 1;
  color: #F5F1E8; background: rgba(245,241,232,.10);
  border: 1px solid rgba(245,241,232,.20);
  transition: background-color .15s ease;
}
.bz-dugme:hover { background: rgba(245,241,232,.22); }
/* Büyüteç telefonda (05.10.2026 · kurum hata listesi). Üst şerit tek satıra sığmıyordu: çok sayfalı kayıtta 390 px'te
   ✕ (Kapat), 360 px'te "Tam boyut" da ekranın DIŞINDA kalıyordu. 640 px altında iki satır: üstte başlık + Tam boyut + ✕,
   altta sayfa ve yakınlaştırma düğmeleri; sığmayan düğme alt satıra iner, ekran dışına taşmaz.
   640 px ve üstü (yatay telefon, tablet, masaüstü) eskisi gibi tek satır. */
.bz-kir { display: none; }
@media (max-width: 639.98px) {
  .bz-ust { height: auto; min-height: 3.5rem; flex-wrap: wrap; justify-content: center; gap: .375rem; padding-top: .5rem; padding-bottom: .5rem; }
  .bz-ust > * { order: 5; }
  .bz-ust > .bz-baslik { order: 1; }
  .bz-ust > [data-bz-tamboy] { order: 2; }
  .bz-ust > .bz-kapat { order: 3; }
  .bz-ust > .bz-kir { order: 4; display: block; flex: 0 0 100%; height: 0; }
  .bz-ust > .bz-sayfa { min-width: 3.5rem; }
  .bz-ust > .bz-oran { width: 2.75rem; }
}
/* İpucu satırı: dokunmatik ekranda fare / klavye yolları (tekerlek, çift tık, Esc) yerine dokunmatik karşılıkları. */
.bz-ipucu-dokun { display: none; }
@media (hover: none) and (pointer: coarse) {
  .bz-ipucu-fare { display: none; }
  .bz-ipucu-dokun { display: inline; }
}
/* Tam ekran modal kabuğu. Eskiden yalnız dialog#buyutec'e bağlıydı; editördeki
   kapak önizlemesi de aynı görünümü kullanınca sınıfa genelleştirildi.
   ID seçicisi BIRAKILDI: dokuman.php'nin işaretlemesi hiç değişmesin. */
dialog#buyutec, dialog.bz-tam {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
}
/* PANEL MENÜSÜ (yonetici.php · aside.panel-ray, 20.10.2026): menü yapışkan (lg:sticky lg:top-32), ama
   ekrandan uzun olunca alt sekmeleri ancak sayfa en sona kaydırılınca görünüyordu. Geniş ekranda
   yüksekliği ekranla sınırlı, gerisi kendi içinde kayar. 2 px iç boşluk + 2 px eksi dış boşluk:
   kutuların 1 px'lik dış çizgisi (.hairline gölgesi) kaydırma kutusunda kesilmesin, yerleşim kaymasın. */
@media (min-width: 1024px) {
  .panel-ray { max-height: calc(100vh - 9rem); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; margin: -2px; }
}

/* Koleksiyon sayfası başlığı (05.11.2026, kurum: "üst kısım berbat bir çizgide gözüküyor"): koleksiyonun
   tonu kalır, çapraz çizgiler kalkar. Yalnız koleksiyon.php başlığındaki .zemin-duz; kartlardaki desen ayrı.
   Yüksek kontrastta layout_head kuralı (.placeholder… düz siyah/beyaz) yine geçerli. */
.zemin-duz.placeholder   { background: linear-gradient(180deg,#F7F2E8,#EFE8D9); }
.zemin-duz.placeholder-2 { background: linear-gradient(180deg,#EAEEF0,#DDE3E6); }
.zemin-duz.placeholder-3 { background: linear-gradient(180deg,#F4EAD0,#E8DAB6); }
.zemin-duz.placeholder-4 { background: linear-gradient(180deg,#EFF2EA,#E1E7DC); }
.zemin-duz.placeholder-5 { background: linear-gradient(180deg,#F4EFE6,#E9E0D2); }
.dark .zemin-duz.placeholder   { background: linear-gradient(180deg,#221C16,#1A1612); }
.dark .zemin-duz.placeholder-2 { background: linear-gradient(180deg,#1B2226,#15191C); }
.dark .zemin-duz.placeholder-3 { background: linear-gradient(180deg,#221C16,#1A1612); }
.dark .zemin-duz.placeholder-4 { background: linear-gradient(180deg,#1B211B,#151915); }
.dark .zemin-duz.placeholder-5 { background: linear-gradient(180deg,#211B15,#1A1511); }
/* Yüksek kontrastta da düz: layout_head'deki kural görselsiz kutulara bilerek ince çizgi basıyor (!important);
   bu seçici ondan özgül olduğu için başlıkta düz beyaz / siyah kalır. Yazı rengi o kuraldan gelir. */
.yuksek-kontrast .zemin-duz:is(.placeholder, .placeholder-2, .placeholder-3, .placeholder-4, .placeholder-5):not([style*="background-image"]) { background: #fff !important; }
.yuksek-kontrast.dark .zemin-duz:is(.placeholder, .placeholder-2, .placeholder-3, .placeholder-4, .placeholder-5):not([style*="background-image"]) { background: #000 !important; }

/* Panel · yükleme göstergesi (05.11.2026) — yonetici.php form[data-yukleme-ilerleme]: düğmenin altında çubuk + "Yükleniyor: 3,1 / 8,4 MB · %37". */
.yukleme-durum { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.45; }
.yukleme-durum[hidden], .yukleme-durum progress[hidden] { display: none; }
.yukleme-durum progress { width: 100%; height: 8px; accent-color: #7A1F1F; }
.dark .yukleme-durum progress { accent-color: #E8C77E; }
.yukleme-durum.hata span { color: #9B2C2C; font-weight: 500; }
.dark .yukleme-durum.hata span { color: #F0A3A3; }