/* Montserrat — KART FONTU (2026-09-22, kullanıcı kararı; IBM Plex Sans
   beğenilmedi). Yerel barındırılıyor, CDN yok. OFL 1.1.
   ⚠️ DEĞİŞKEN FONT: Google Fonts 500/700/800 için AYNI dosyayı veriyor
   (MD5 karşılaştırmasıyla doğrulandı) — alt küme başına TEK dosya yeter ve
   `font-weight: 100 900` ile tüm ağırlıklar bu dosyadan gelir. Plex'in 8
   dosyası yerine 2 dosya (109 KB).
   ⚠️ Türkçe karakterler ikiye bölünüyor: ı/İ "latin", ğ/ş/Ğ/Ş "latin-ext" —
   ikisi de yüklenmezse satır genişlikleri kayar.
   Kartta kullanılan ağırlıklar: 500 (özet) · 700 (vurgu) · 800 (başlık). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans — ESKİ kart fontu, yedek zincirde duruyor. Yerel
   barındırılıyor (assets/fonts/, bkz. IBMPlexSans-LICENSE.txt — SIL Open
   Font License 1.1, Copyright 2019 IBM Corp.), CDN KULLANILMIYOR
   (çevrimdışı çalışmalı, dış servise bağlı kalmasın).
   ⚠️ Türkçe karakterler ikiye bölünüyor: ı/İ "latin" alt kümesinde,
   ğ/ş/Ğ/Ş "latin-ext"te — ikisi de yüklenmezse harfler yedek fonttan gelir
   ve satır genişlikleri kayar. Dört ağırlık: 300/400/600/700.
   ⚠️ Canvas çizimi fontlar YÜKLENMEDEN başlamamalı (bkz.
   js/uygulama.js#FONT_HAZIR — document.fonts.load ile bekleniyor). */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-Light-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-Light-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-Regular-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-SemiBold-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-SemiBold-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-Bold-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexSans-Bold-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — ARAYÜZ fontu olarak duruyor (kart artık IBM Plex Sans).
   Aynı lisans (OFL 1.1), aynı yerel barındırma ilkesi. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/Inter-Light-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/Inter-Light-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-Regular-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-Bold-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-Bold-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0A0A0B;
  --panel: #131316;
  --kenar: #262a32;
  --metin: #f2f2f2;
  --metinSoluk: #9a9fa8;
  --vurgu: #D2000A;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Bazı öğelerin display:flex/grid kuralları [hidden] ile eşit özgüllükte
   olduğu için sonradan yüklenen bu stylesheet CSS sırası yüzünden kazanabilir
   — [hidden] her zaman kazansın diye tek, genel bir kural: */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--metin);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 🔴 GÜNCELLEME ŞERİDİ (v58.16) — otomatik yenileme tıkandığında son çare.
   Her şeyin ÜSTÜNDE: giriş ekranında da, editörde de, dialog açıkken de
   görünmeli (dialog ::backdrop'un üstüne çıkması için yüksek z-index).
   ⚠️ `100vw` KULLANILMIYOR — dar ekranda dikey kaydırma çubuğu kadar
   taşıp yatay kaydırma doğuruyor. left/right:0 bunu yapmaz. */
.guncellemeSeridi {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  /* iPhone çentiği/durum çubuğu altında kalmasın (ana ekran PWA'sında
     tam ekran çalışıyor) — tam da takılan cihazın biçimi. */
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--panel);
  border-bottom: 2px solid var(--vurgu);
  color: var(--metin);
  font-size: 14px;
  line-height: 1.3;
}

.guncellemeSeridi button {
  flex: none;
  padding: 6px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--vurgu);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  /* Dokunma hedefi: iOS'ta 44px önerilir; metin 14px olduğu için
     min-height ile garantiliyoruz. */
  min-height: 36px;
}

.ekran {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.kart {
  background: var(--panel);
  border: 1px solid var(--kenar);
  border-radius: 16px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
}

.kart h1, .kart h2 { margin: 0; }

.markaBaslik { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.markaIkon { width: 32px; height: 32px; border-radius: 22%; background: var(--bg); flex-shrink: 0; }
.markaIkonBuyuk { width: 44px; height: 44px; }
.markaIkonKucuk { width: 24px; height: 24px; }
.ustBar .markaBaslik { margin-bottom: 0; }
.aciklama { color: var(--metinSoluk); margin: 0 0 20px; font-size: 14px; }
.istatistikOzet {
  color: var(--metinSoluk);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line; /* istatistikMetneCevir() satır satır \n ile döndürüyor */
  background: var(--panel);
  border: 1px solid var(--kenar);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}

label { display: block; font-size: 13px; color: var(--metinSoluk); margin: 14px 0 6px; }

/* 🔴 input[type="url"] EKLENDİ (2026-09-25). Link kutusunun girişi `url`
   tipinde ve bu seçicide YOKTU — yani ne genişlik, ne zemin, ne kenarlık,
   ne dolgu alıyordu. Ölçüldü: 390px ekranda giriş alanı 8 px genişliğinde
   çiziliyordu ("boşluğa tıklanmıyor" şikâyetinin yarısı buydu).
   Yeni bir input tipi eklerken BU SATIRA da ekle. */
input[type="text"], input[type="url"], textarea, select {
  width: 100%;
  background: #0f1115;
  border: 1px solid var(--kenar);
  border-radius: 8px;
  color: var(--metin);
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
}

button { font: inherit; cursor: pointer; }

.birincil {
  background: var(--vurgu);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 18px;
  font-weight: 600;
  margin-top: 18px;
  width: 100%;
  min-height: 48px;
}
.birincil:disabled { opacity: 0.4; cursor: not-allowed; }

.ikincil {
  background: transparent;
  color: var(--metin);
  border: 1px solid var(--kenar);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 18px;
  width: 100%;
  min-height: 48px;
}

.tehlikeBtn {
  background: transparent;
  color: #ff8a8a;
  border: 1px solid rgba(210,0,10,0.4);
  border-radius: 8px;
  padding: 12px 18px;
  margin-top: 18px;
  width: 100%;
  min-height: 48px;
}
.tamGenislik { width: 100%; }

.metinBtn {
  background: none;
  border: none;
  color: var(--metinSoluk);
  font-size: 20px;
  padding: 8px;
  min-width: 48px;
  min-height: 48px;
}

.surumBilgisi { color: var(--metinSoluk); font-size: 12px; text-align: center; margin: 16px 0 0; }

#editor { display: block; padding: 0; }
.ustBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--kenar);
}

.kuruluBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--kenar);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--metinSoluk);
}
.kuruluButonlar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kuruluEkleBtn {
  background: var(--vurgu); color: #fff; border: none; border-radius: 6px;
  padding: 8px 12px; font-size: 13px; font-weight: 600;
  min-height: 48px;
}
.kuruluKapatBtn {
  background: none; border: none; color: var(--metinSoluk);
  font-size: 16px;
  min-width: 48px; min-height: 48px;
}

.govde {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 860px) {
  .govde { grid-template-columns: 360px 1fr; align-items: start; }
}

/* Madde 3: klavye açıkken (dar ekranda) önizleme forma yer açmak için gizlenir. */
@media (max-width: 859px) {
  body.klavyeAcik .onizlemeAlani { display: none; }
}

/* Madde 2: tek elle kullanım — başparmak ekranın ALT yarısına rahat ulaşır,
   bu yüzden en önemli aksiyon (İndir/Paylaş) dar ekranda ekranın en altına
   SABİTLENİYOR. Medya seçimi zaten üstte (tek seferlik dokunuş), form
   alanları ortada — mevcut sıra zaten bu ilkeye uygun, sadece aksiyon
   çubuğunu sabitliyoruz. Masaüstünde (≥860px, yan yana iki kolon) normal
   akışta kalır — "tek elle" orada zaten anlamlı değil. */
@media (max-width: 859px) {
  .govde { padding-bottom: 104px; }
  .aksiyonlar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    background: var(--bg);
    border-top: 1px solid var(--kenar);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
  }
  .aksiyonlar .birincil, .aksiyonlar .ikincilKucuk { margin-top: 0; }
  /* GERÇEK HATA (2026-09-17): İptal butonu sabit çubuğun ALTINDA kalıyor,
     dokunuş İndir'e düşüyordu — iptal hiç çalışmıyordu (canlıda da vardı).
     Export başlarken alan görünüme kaydırılıyor (js/uygulama.js#videoUret);
     bu pay kaydırmanın alanı çubuğun üstünde bırakmasını sağlıyor. */
  .ilerlemeAlani { scroll-margin-bottom: 116px; }
}

.panel { display: flex; flex-direction: column; min-width: 0; }
.alanEtiket { margin-top: 18px; }
.alanEtiket:first-child { margin-top: 0; }

.alanBasi { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; }
.alanBasi .alanEtiket { margin: 0; }
.sayac { font-size: 11px; color: var(--metinSoluk); transition: color 0.15s; }
.alanBasiSag { display: flex; align-items: center; gap: 10px; }
/* Paylaşım açıklaması: metin gizli, başlık satırında iki düğme (2026-09-21) */
.aciklamaBasi { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.aciklamaBasi .alanEtiket { margin: 0; }
.aciklamaButonlar { display: flex; gap: 8px; margin-top: 8px; }
.aciklamaButonlar .ikincilKucuk { margin-top: 0; flex: 1; }
#aciklamaAlanlar .alanEtiket { margin-top: 12px; display: block; }
#aciklamaAlanlar textarea { margin-top: 6px; }
/* Küçük metin düğmesi (Kopyala) — satır yüksekliğini büyütmesin diye
   dokunma alanı görünür kutudan taşırılıyor (48px hedefi korunur). */
.metinKucukBtn {
  background: none; border: 1px solid var(--kenar); border-radius: 6px;
  color: var(--metinSoluk); font-size: 12px; padding: 6px 10px; min-height: 32px;
  position: relative;
}
.metinKucukBtn::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.metinKucukBtn:hover { color: var(--metin); }
/* Medya satırındaki ikon düğmesi (şablonsuz indir) */
.medyaKucukBtn {
  margin-left: auto; flex-shrink: 0;
  background: transparent; border: 1px solid var(--kenar); border-radius: 6px;
  color: var(--metin); font-size: 18px; min-height: 48px; min-width: 48px;
}
.medyaKucukBtn:hover { background: rgba(255,255,255,0.06); }
/* Değiştir düğmesi artık kendi margin-left:auto'suna gerek duymuyor
   (şablonsuz düğmesi varken ikisi yan yana durmalı) */
.medyaOnizlemeSarici .medyaKucukBtn + .medyaKucukBtn,
.medyaOnizlemeSarici .medyaKucukBtn + .medyaDegistirBtn { margin-left: 8px; }
.medyaOnizlemeSarici .medyaKucukBtn + .medyaKucukBtn { margin-left: 8px; }
.medyaKucukBtn.secili { border-color: var(--vurgu); background: rgba(210,0,10,0.15); }
/* Opaklık kaydırıcısı — düğmeye basılınca açılır */
.opaklikAlani { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--metinSoluk); }
.opaklikAlani label { display: flex; gap: 6px; white-space: nowrap; }
#opaklikGir { flex: 1; min-height: 40px; accent-color: var(--vurgu); }
#opaklikDeger { color: var(--metin); font-variant-numeric: tabular-nums; }
/* Uzunluk uyarısı (2026-09-17) — eşikler js/uygulama.js#ozetSayaciGuncelle */
.sayac[data-seviye="yesil"] { color: #4ECDC4; }
.sayac[data-seviye="sari"] { color: #E8B84A; font-weight: 600; }
.sayac[data-seviye="kirmizi"] { color: #ff8a8a; font-weight: 700; }

.taslakBilgi {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 8px 0 0; padding: 6px 6px 6px 12px;
  border: 1px solid var(--kenar); border-radius: 8px;
  font-size: 13px; color: var(--metinSoluk);
}
.taslakTemizleBtn {
  flex: none; min-height: 48px; padding: 0 12px;
  background: transparent; border: none; color: var(--metin); font-size: 13px; text-decoration: underline;
}

.cipSatiri {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  min-width: 0;   /* flex item'lar varsayılan min-width:auto ile taşarak
                     .panel'i genişletiyordu — bu, kendi overflow-x'ini
                     kullanmasını sağlıyor (regresyon: iptalBtn görünüm
                     dışına itiliyordu, bkz. commit). */
  margin-top: 8px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.cip {
  flex-shrink: 0;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 22px;
  border: 1px solid var(--kenar);
  background: #0f1115;
  color: var(--metinSoluk);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.cip.secili { border-color: var(--vurgu); color: var(--metin); background: rgba(210,0,10,0.15); }

.sonKullanilanlarSecici { margin-top: 14px; min-height: 48px; color: var(--metinSoluk); }

.medyaOnizlemeSarici { display: flex; align-items: center; gap: 12px; width: 100%; }
.medyaOnizlemeSarici img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.medyaYokGostergesi {
  width: 64px; height: 64px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0f1115; border: 1px dashed var(--kenar); font-size: 22px;
}
.medyaDegistirBtn {
  margin-left: auto; background: transparent; color: var(--metin); border: 1px solid var(--kenar);
  border-radius: 6px; padding: 8px 12px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 48px; flex-shrink: 0;
}

.medyaSecButonlari { display: flex; flex-direction: column; gap: 10px; }
.medyaSecSatiri { display: flex; gap: 10px; }
.medyaSecBtn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-height: 88px;
  border: 1px dashed var(--kenar);
  border-radius: 10px;
  color: var(--metinSoluk);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}
.fotografsizBtn {
  background: transparent;
  border: 1px dashed var(--kenar);
  border-radius: 10px;
  color: var(--metinSoluk);
  font-size: 13px;
  min-height: 48px;
  width: 100%;
}

.formatSecim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.formatBtn {
  background: #0f1115;
  border: 2px solid var(--kenar);
  border-radius: 8px;
  color: var(--metinSoluk);
  padding: 12px 10px;
  text-align: center;
  line-height: 1.6;
  min-height: 56px;
}
.formatBtn.secili { border-color: var(--vurgu); color: var(--metin); }
/* Son Dakika anahtarı (2026-09-18) — kapalıyken diğer seçimler gibi sakin,
   açıkken marka kırmızısı (#D62828, kartla aynı). */
.sonDakikaAlani { margin-top: 8px; }
.sonDakikaBtn {
  width: 100%; min-height: 48px; padding: 8px 14px;
  display: flex; align-items: center; gap: 10px;
  background: #0f1115; border: 2px solid var(--kenar); border-radius: 8px;
  color: var(--metinSoluk); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-align: left;
  scroll-margin-bottom: 116px;
}
.sonDakikaBtn small { margin-left: auto; font-weight: 400; letter-spacing: 0; opacity: 0.8; }
.sonDakikaNokta { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.sonDakikaBtn.secili { border-color: #D62828; color: var(--metin); background: rgba(214,40,40,0.12); }
.sonDakikaBtn.secili .sonDakikaNokta { background: #D62828; border-color: #D62828; }

/* Dar ekranda sabit İndir/Paylaş çubuğu akıştaki öğelerin üstünü örtüyor
   (bkz. #ilerlemeAlani'ndaki aynı düzeltme) — kaydırma payı, bu düğme
   görünüme getirildiğinde çubuğun ÜSTÜNDE kalmasını sağlıyor. */
.ikiliIndirBtn { width: 100%; margin-top: 8px; scroll-margin-bottom: 116px; }
.ikinciKartBtn { width: 100%; margin-top: 10px; scroll-margin-bottom: 116px; }
.formatBtn small { color: var(--metinSoluk); }

/* Küçük bilgi satırı — hata değil, ipucu (ör. görsel çözünürlüğü uyarısı).
   Kırmızı `.uyari`dan bilerek ayrı: editörü durdurmuyor, yalnız bilgilendiriyor. */
.ipucuSatiri {
  margin: -6px 0 12px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--kenar);
  color: var(--metinSoluk);
  font-size: 12.5px;
  line-height: 1.35;
}

.uyari {
  background: rgba(210,0,10,0.12);
  border: 1px solid var(--vurgu);
  color: #ff8a8a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 16px;
}

.ilerlemeAlani {
  margin-top: 16px;
  background: #0f1115;
  border: 1px solid var(--kenar);
  border-radius: 10px;
  padding: 14px;
}
.ilerlemeUst { display: flex; align-items: center; gap: 10px; }
.ilerlemeYuzde { flex: 1; font-size: 22px; font-weight: 700; color: var(--metin); }
.ilerlemeAlani #iptalBtn { margin: 0; width: auto; padding: 8px 16px; min-height: 48px; }

.ilerlemeCubukDis {
  margin-top: 12px;
  height: 8px;
  border-radius: 4px;
  background: var(--kenar);
  overflow: hidden;
}
.ilerlemeCubukIc {
  height: 100%;
  width: 0%;
  background: var(--vurgu);
  border-radius: 4px;
  transition: width 0.2s linear;
}
.ilerlemeDetay { margin: 10px 0 0; font-size: 13px; color: var(--metinSoluk); }
.ekranUyarisi {
  margin: 6px 0 0; font-size: 13px; color: #ffcf8a;
  background: rgba(255, 180, 60, 0.1);
  border-radius: 6px; padding: 6px 10px;
}

.spinner {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--kenar);
  border-top-color: var(--vurgu);
  border-radius: 50%;
  animation: donDur 0.8s linear infinite;
}
@keyframes donDur { to { transform: rotate(360deg); } }

.aksiyonlar { display: flex; gap: 10px; }
.aksiyonlar > button { margin-top: 18px; }
.aksiyonlar .birincil { flex: 1; }

/* Paylaş birincil olduğunda İndir küçük/ikincil rolüne düşer — hâlâ ≥48px dokunma alanı */
.ikincilKucuk {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 48px;
  padding: 14px 16px;
  background: transparent;
  color: var(--metin);
  border: 1px solid var(--kenar);
  border-radius: 8px;
  font-weight: 600;
  margin-top: 18px;
}
.ikincilKucuk:disabled { opacity: 0.4; cursor: not-allowed; }

.onizlemeAlani {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--kenar);
}

.onizlemeSarmalayici { position: relative; width: 100%; }

/* ── Manuel kart sekmeleri (v58.4) ──────────────────────────────────── */
.kartSekmeleri { display: flex; gap: 6px; align-items: center; margin: 8px 0 6px; overflow-x: auto; }
.kartSekmeleri:empty { display: none; }
.kartSekme {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; margin: 0;
  border: 1px solid var(--kenar); border-radius: 999px;
  background: var(--bg); color: var(--metinSoluk);
  font-size: 13px; font-family: inherit; white-space: nowrap; cursor: pointer;
}
.kartSekme.secili { border-color: var(--vurgu); background: rgba(210, 0, 10, 0.16); color: var(--metin); font-weight: 600; }
.kartSekmeSil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); font-size: 12px; line-height: 1;
}
.kartEkleBtn {
  min-height: 44px; padding: 0 14px; margin: 0;
  border: 1px dashed var(--kenar); border-radius: 999px;
  background: none; color: var(--metinSoluk);
  font-size: 13px; font-family: inherit; white-space: nowrap; cursor: pointer;
}
.kartEkleBtn:disabled { opacity: 0.4; cursor: default; }

/* ── CAROUSEL çubuğu (v57) ───────────────────────────────────────────── */
.carouselCubugu {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0;
  padding: 6px 8px; border: 1px solid var(--kenar); border-radius: 10px;
  background: var(--panel);
}
.carouselCubugu[hidden] { display: none; }
.carouselOkBtn {
  width: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--kenar); border-radius: 8px;
  background: var(--bg); color: var(--metin); font-size: 18px; cursor: pointer;
}
.carouselOkBtn:disabled { opacity: 0.4; cursor: default; }
.carouselEtiket { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.carouselIpucu { margin-left: auto; font-size: 11px; color: var(--metinSoluk); }

/* ✨ Fotoğrafı iyileştir — önizlemenin SAĞ ÜSTÜNDE bindirme (v56.1).
   ⚠️ SAĞ üst: kartın SOL üstünde marka bloğu var, orada çakışırdı.
   ⚠️ Dokunma alanı 44 px (mobil şartı). */
.iyilestirKatmani {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; gap: 6px; align-items: center;
}
.iyilestirKatmani[hidden] { display: none; }
.iyilestirBtn {
  min-height: 44px; padding: 0 12px; margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  background: rgba(10, 10, 11, 0.62); color: #f2f2f2;
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  white-space: nowrap; touch-action: manipulation; user-select: none;
}
.iyilestirBtn[aria-pressed="true"] {
  border-color: var(--vurgu); background: rgba(210, 0, 10, 0.72); color: #fff;
}
.iyilestirGeriBtn {
  width: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  background: rgba(10, 10, 11, 0.62); color: #f2f2f2;
  font-size: 16px; font-family: inherit; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.iyilestirGeriBtn[hidden] { display: none; }

#onizleme {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  touch-action: none; /* sürükle/pinch jestlerini TARAYICI değil biz yönetiyoruz (madde 2) */
  cursor: grab;
}

/* madde 2: kırpma/konumlandırma — küçük, önizlemenin üstünde sabit "Sıfırla" */
/* 🔴 ÖRTÜLME DÜZELTİLDİ (2026-10-08). Bu düğme de `.iyilestirKatmani` de
   `top:8px; right:8px` idi; katmanın `z-index:3`ü olduğu için "Sıfırla"
   TAMAMEN ÖRTÜLÜYORDU. Üstelik ikisi aynı anda görünür: Sıfırla fotoğraf
   seçiliyken çıkıyor, İyileştir katmanı da tam o zaman. Yani kullanıcı
   "Sıfırla"ya her bastığında "✨ İyileştir" tetikleniyordu.
   Testle ölçüldü: elementFromPoint düğmenin merkezinde `iyilestirBtn`
   döndürüyordu. Artık İyileştir satırının ALTINDA (44 px + 8 px pay). */
.kirpmaSifirlaBtn {
  position: absolute;
  top: 60px; right: 8px; z-index: 3;
  min-width: 48px; min-height: 48px;
  padding: 6px 12px;
  background: rgba(10,10,11,0.75);
  color: var(--metin);
  border: 1px solid var(--kenar);
  border-radius: 8px;
  font-size: 13px;
  backdrop-filter: blur(2px);
}
.onizlemeIpucu {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--metinSoluk);
  text-align: center;
}

dialog {
  background: transparent;
  border: none;
  padding: 0;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
.dialogButonlar { display: flex; gap: 8px; }
.dialogButonlar > button { flex: 1; }
.dialogButonlar > input { flex: 2; margin: 0; }

/* Haber Seç (2026-09-13 — Design'ın gönderdiği tasarıma bağlandı,
   duyum-kart-haber-secici-DESIGN.html). Renkler PROJENİN KENDİ token'larından
   besleniyor (--bg/--panel/--kenar/--metin/--metinSoluk/--vurgu) — tasarımın
   kendi ayrı renk seti (--tx, --tx2, --red vb.) KOPYALANMADI, tek kaynaktan
   beslenme kuralı (bkz. KATEGORILER[x].vurguRenk) burada da geçerli. */
.haberAraBtn { margin-top: 0; margin-bottom: 0; width: 100%; }

/* Editör üstü eylem satırı (2026-09-22): [📰 Haber] [🗑 Temizle].
   ⚠️ Dokunma hedefi 48px — "Temizle" yıkıcı bir eylem, yanlışlıkla
   basılmasın diye Haber'den daha dar ve ayrı duruyor (onay da soruyor). */
.editorEylemler { display: flex; gap: 8px; margin: 0 0 18px; }
.editorEylemler > .haberAraBtn { flex: 1; }
.kartiTemizleBtn {
  flex: none; margin: 0; width: auto; min-height: 48px; padding: 0 14px;
  white-space: nowrap; color: var(--metinSoluk);
}
.kartiTemizleBtn:hover { color: var(--metin); border-color: rgba(255,255,255,0.3); }

/* Ana sekmeler (2026-09-21): [Kart] [Haberler]. Modal kaldırıldı — haberler
   artık editörün İÇİNDE bir sayfa; sekme geçişi editör durumunu koruyor.
   ⚠️ Dar ekranda `100vw` KULLANILMIYOR (kaydırma çubuğunu sayıyor, eski
   modalda ~19px taşmaya ve dokunulamayan sağ kenara yol açmıştı). */
.anaSekmeler { display: flex; gap: 0; padding: 0 16px; border-bottom: 1px solid var(--kenar); }
.anaSekmeBtn {
  position: relative;
  background: none; border: none; border-radius: 0;
  padding: 12px 2px; margin-right: 24px;
  font-size: 15px; color: var(--metinSoluk); min-height: 48px;
}
.anaSekmeBtn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--vurgu); transform: scaleX(0); transition: transform 0.2s;
}
.anaSekmeBtn.secili { color: var(--metin); font-weight: 600; }
.anaSekmeBtn.secili::after { transform: scaleX(1); }

.haberlerSayfasi { max-width: 1000px; margin: 0 auto; }
/* Detay açıkken liste kontrolleri gizleniyor — haberin kendisine yer açılsın
   (390px'te bunlar ekranın yarısını yiyordu, ölçüldü 2026-09-21). */
.haberlerSayfasi.detayAcik .haberUst,
.haberlerSayfasi.detayAcik .haberSekmeler,
.haberlerSayfasi.detayAcik #haberAramaCubugu,
.haberlerSayfasi.detayAcik #haberFiltreCubugu,
.haberlerSayfasi.detayAcik #haberFiltreAlani,
/* (Link kutusu 2026-09-25'te Haberler sekmesinden editöre taşındı; buradaki
   `detayAcik` gizleme kuralına artık gerek yok.) */

/* ── PANEL DÜZENLEME PENCERESİ (2026-09-26, kullanıcı kararı (b)) ─────
   TAM EKRAN DEĞİL: kartın ALT BANDINI örtüyor. Küçük ekranda üstteki
   fotoğraf görünür kalıyor — editör düzenlediği şeyi görmeden ayar
   yapmak zorunda kalmasın. */
.onizlemeSarmalayici { position: relative; }
/* Dar ekranda düğme metni kartı boğmasın — etiket kısalıyor. */
@media (max-width: 400px) {
  .iyilestirBtn { font-size: 11px; padding: 0 10px; }
}
.panelDuzenle {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(11, 13, 16, .93);
  border-top: 1px solid var(--kenar);
  border-radius: 0 0 10px 10px;
  padding: 10px 12px 12px;
  backdrop-filter: blur(6px);
}
.panelDuzenleUst { display: flex; align-items: center; justify-content: space-between; }
.panelDuzenleBaslik { font-size: 13px; font-weight: 600; color: var(--metin); }
.panelDuzenleEtiket { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--metinSoluk); }
.panelDuzenle input[type="range"] { width: 100%; margin: 0; }
.panelDuzenleButonlar { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.panelKucukBtn {
  background: var(--panel); border: 1px solid var(--kenar); border-radius: 8px;
  color: var(--metin); font-size: 13px; padding: 8px 10px; margin: 0;
  min-width: 44px; min-height: 40px;   /* dokunma hedefi */
}
.panelKucukBtn.panelSil { margin-left: auto; }
.panelKucukBtn:disabled { opacity: .35; }

/* ── ÇOKLU FOTOĞRAF ŞERİDİ (2026-09-26) ───────────────────────────────── */
.fotoSerit { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.fotoSeritOge, .fotoSeritEkle {
  position: relative; min-width: 48px; min-height: 40px; /* dokunma hedefi */
  background: var(--panel); border: 1px solid var(--kenar); border-radius: 8px;
  color: var(--metin); font-size: 13px; padding: 8px 12px; margin: 0;
}
.fotoSeritOge.aktif { border-color: var(--vurgu); background: var(--vurgu); color: #0b0d10; font-weight: 600; }
/* ✕ dokunma hedefi ayrı ve YETERİNCE BÜYÜK: 12 px'lik bir çarpı
   parmakla ıskalanır ve kullanıcı yanlışlıkla paneli seçer. */
.fotoSil {
  display: inline-block; margin-left: 8px; padding: 2px 6px;
  border-radius: 6px; background: rgba(0,0,0,.35); font-size: 12px;
}
.fotoSeritEkle { border-style: dashed; }

/* ── SÜRE KIRPMA (2026-09-26) ─────────────────────────────────────────── */
.kirpmaEtiket { font-size: 22px; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }
/* İki seridi ÜST ÜSTE bindiriyoruz: tek bir çizelge gibi görünsün.
   ⚠️ `pointer-events` yalnız TUTAMAKLARDA açık — kapalı olmasa üstteki
   serit alttakinin tutamağını tamamen örterdi ve alt tutamak hiç
   tutulamazdı (dokunma hedefi ölçümüyle aynı ders). */
.kirpmaSeritler { position: absolute; inset: 0; }
.kirpSerit {
  position: absolute; left: 0; right: 0; top: 50%; width: 100%; margin: -10px 0 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.kirpSerit::-webkit-slider-runnable-track { height: 0; background: none; }
.kirpSerit::-moz-range-track { height: 0; background: none; }
/* Tutamak: GÖRÜNEN kırmızı çubuk 16 px, DOKUNMA alanı 44 px (mobil şartı).
   İkisi tek elemanda: geniş şeffaf thumb + içine çizilen dar çubuk. */
.kirpSerit::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 44px; height: 76px; margin-top: -28px; border-radius: 8px;
  background:
    linear-gradient(#0b0d10, #0b0d10) center / 3px 22px no-repeat,
    linear-gradient(var(--vurgu), var(--vurgu)) center / 16px 76px no-repeat;
  border: 0; cursor: ew-resize;
}
.kirpSerit::-moz-range-thumb {
  pointer-events: auto; width: 44px; height: 76px; border-radius: 8px;
  background:
    linear-gradient(#0b0d10, #0b0d10) center / 3px 22px no-repeat,
    linear-gradient(var(--vurgu), var(--vurgu)) center / 16px 76px no-repeat;
  border: 0; cursor: ew-resize;
}
.kirpmaButonlar { display: flex; gap: 8px; margin-top: 12px; }
.kirpmaButonlar button { margin: 0; min-height: 44px; flex: 1 1 auto; }

/* ══ TAM EKRAN DÜZENLEYİCİ (v56) ═══════════════════════════════════════
   ⚠️ 100vw KULLANILMIYOR (dar ekranda dikey kaydırma çubuğunu saymıyor ve
   yatay taşma üretiyor — bu projede daha önce yaşandı). */
.duzenleBtn {
  display: block; width: 100%; min-height: 48px; margin: 12px 0 4px;
  border: 0; border-radius: 10px; background: var(--vurgu); color: #fff;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.duzenleyici {
  position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--metin);
  display: flex; flex-direction: column; overscroll-behavior: contain;
}
.duzenleyici[hidden] { display: none; }
.duzUst {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; border-bottom: 1px solid var(--kenar);
}
.duzBaslik { font-size: 14px; font-weight: 700; }
.duzMetinBtn {
  min-width: 88px; min-height: 48px; padding: 0 12px; margin: 0;
  border: 0; background: none; color: var(--metinSoluk);
  font-size: 15px; font-family: inherit; cursor: pointer; text-align: left;
}
.duzMetinBtn.duzBitti { color: #ff5a62; font-weight: 700; text-align: right; }
.duzSekmeler {
  flex: 0 0 auto; display: flex; gap: 0; margin: 10px 16px 0; padding: 3px;
  background: var(--panel); border: 1px solid var(--kenar); border-radius: 10px;
}
.duzSekme {
  flex: 1 1 0; min-height: 44px; margin: 0; border: 0; border-radius: 8px;
  background: none; color: var(--metinSoluk); font-size: 14px; font-family: inherit; cursor: pointer;
}
.duzSekme.etkin { background: #2c2c33; color: var(--metin); font-weight: 700; }
.duzSahne {
  flex: 1 1 auto; position: relative; overflow: hidden; background: #08080a;
  touch-action: none; min-height: 160px;
}
.duzTuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.duzKarartmalar { position: absolute; inset: 0; pointer-events: none; }
.duzKarart { position: absolute; background: rgba(0, 0, 0, 0.58); }
.duzCerceve { position: absolute; border: 1px solid rgba(255, 255, 255, 0.9); pointer-events: none; }
.duzKilavuz { position: absolute; background: rgba(255, 255, 255, 0.32); }
.duzKilavuzDikey1 { left: 33.33%; top: 0; bottom: 0; width: 1px; }
.duzKilavuzDikey2 { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.duzKilavuzYatay1 { top: 33.33%; left: 0; right: 0; height: 1px; }
.duzKilavuzYatay2 { top: 66.66%; left: 0; right: 0; height: 1px; }
/* Tutamak: 44 px dokunma kutusu, içinde 26 px'lik köşe işareti. */
.duzTutamak {
  position: absolute; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; background: none; pointer-events: auto; cursor: pointer;
}
.duzTutamak span { position: absolute; background: #fff; border-radius: 2px; }
.duzTutamak span:first-child { width: 26px; height: 4px; }
.duzTutamak span:last-child { width: 4px; height: 26px; }
.duzTutamakSU { left: -22px; top: -22px; cursor: nwse-resize; }
.duzTutamakSU span { left: 19px; top: 19px; }
.duzTutamakSaU { right: -22px; top: -22px; cursor: nesw-resize; }
.duzTutamakSaU span { right: 19px; top: 19px; }
.duzTutamakSA { left: -22px; bottom: -22px; cursor: nesw-resize; }
.duzTutamakSA span { left: 19px; bottom: 19px; }
.duzTutamakSaA { right: -22px; bottom: -22px; cursor: nwse-resize; }
.duzTutamakSaA span { right: 19px; bottom: 19px; }
.duzOlcuEtiket {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6);
  font-size: 11px; letter-spacing: 0.03em; pointer-events: none;
}
.duzIpucu {
  position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center;
  font-size: 11px; color: rgba(255, 255, 255, 0.75); pointer-events: none;
}
.duzAltPanel {
  flex: 0 0 auto; border-top: 1px solid var(--kenar); background: var(--panel);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}
.duzAltPanel[hidden] { display: none; }
.duzOranUyari { margin: 0 0 10px; font-size: 11px; color: #ffb27a; }
.duzCipler { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.duzCip {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid var(--kenar); border-radius: 999px; background: var(--bg);
  color: var(--metinSoluk); font-size: 13px; font-family: inherit;
  white-space: nowrap; cursor: pointer;
}
.duzCip.etkin { border-color: var(--vurgu); background: rgba(210, 0, 10, 0.16); color: var(--metin); font-weight: 600; }
.duzAracSatiri { display: flex; gap: 8px; margin-top: 12px; }
.duzArac {
  flex: 1 1 0; min-height: 52px; margin: 0; border: 1px solid var(--kenar);
  border-radius: 10px; background: var(--bg); color: var(--metin);
  font-size: 18px; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.duzArac span { font-size: 11px; }
/* Konva sahnesi — düzenleyici sahnesini tam kaplar, kendi tuvalini kurar.
   ⚠️ `touch-action: none`: Konva'nın sürükleme/pinch'i tarayıcı kaydırmasıyla
   yarışmasın (mobilde en sık görülen kusur). */
.duzYerlesimSahne { position: absolute; inset: 0; touch-action: none; }
.duzYerlesimSahne[hidden] { display: none; }
.duzSureUst { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding-bottom: 12px; }
.duzSerit { position: relative; height: 76px; border-radius: 8px; overflow: hidden; touch-action: none; }
.duzSeritTuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #1b1d22; }
.duzSeritKarart { position: absolute; top: 0; bottom: 0; background: rgba(10, 10, 11, 0.72); pointer-events: none; }
.duzSeritSecim {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  border-top: 3px solid var(--vurgu); border-bottom: 3px solid var(--vurgu);
}
.duzPlayhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
.duzPlayhead span { position: absolute; left: -6px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.duzSureAltYazi { display: flex; justify-content: space-between; padding-top: 6px; font-size: 10px; color: var(--metinSoluk); }
.duzIpucuKucuk { margin: 8px 0 0; font-size: 11px; color: var(--metinSoluk); text-align: center; }

/* ── ÖNEMLİ sekmesi: eşik çipleri (2026-09-26) ─────────────────────────── */
.haberlerSayfasi.detayAcik #onemliCubugu { display: none; }
.onemliCubugu { margin: 10px 16px 0; }
.onemliCipler { display: flex; gap: 8px; flex-wrap: wrap; }
.onemliCip {
  background: var(--panel); border: 1px solid var(--kenar); border-radius: 999px;
  color: var(--metin); padding: 9px 14px; font-size: 13px;
  min-height: 40px;              /* dokunma hedefi */
}
.onemliCip.secili { background: var(--vurgu); border-color: var(--vurgu); color: #0b0d10; font-weight: 600; }
.onemliKapsam { margin: 8px 0 0; font-size: 12px; color: var(--metinSoluk); line-height: 1.4; }

/* ── LİNKTEN KART (v50; 2026-09-25'te editörün ana ekranına taşındı) ───── */
.linkKutusu { margin: 14px 0 4px; padding: 14px; border: 1px solid var(--kenar); border-radius: 12px; background: var(--panel); }
.linkKutusu .alanEtiket { display: block; margin-bottom: 2px; }
.linkKutusu .ipucuSatiri { margin: 0 0 10px; }
.linkSatiri { display: flex; gap: 8px; align-items: stretch; }
/* min-width:0 ŞART: flex öğesi varsayılan min-width:auto ile içeriğine göre
   taşıyor, dar ekranda düğmeyi dışarı itiyordu. */
.linkSatiri input { flex: 1; min-width: 0; margin: 0; min-height: 48px; }
/* 🔴 `width: auto` ŞART. "Getir" düğmesi `.birincil` sınıfındaydı ve o sınıf
   `width: 100%` taşıyor; flex-basis:auto bu genişliği okuyunca düğme SATIRIN
   TAMAMINI (328 px) kaplıyordu ve giriş alanına 8 px kalıyordu (ölçüldü).
   "Getir" artık satırın altında, tam genişlikte; satırda yalnız yapıştır
   düğmesi var — ama kural burada DURUYOR: satıra yeniden bir `.birincil`
   düğme konursa aynı tuzağa düşülmesin. */
.linkSatiri button { flex: 0 0 auto; margin: 0; width: auto; }
/* Yapıştır: dokunma hedefi en az 48×48 (parmak ölçüsü). */
.linkYapistirBtn {
  background: var(--panel2, #1a1d24);
  border: 1px solid var(--kenar);
  border-radius: 8px;
  color: var(--metin);
  font-size: 20px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
}
.linkYapistirBtn:active { background: var(--kenar); }
.linkKutusu .birincil { margin-top: 10px; }
.linkSonuc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kenar); }
.linkSonucGorsel { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--bg); }
.linkSonucMetin { flex: 1; min-width: 0; }
.linkSonucBaslik { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.linkSonucOzet { margin: 0 0 6px; font-size: 13px; color: var(--metinSoluk); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.linkSonucMeta { margin: 0; font-size: 12px; color: var(--metinSoluk); }
.linkSonucButonlar { display: flex; gap: 8px; width: 100%; }
.linkSonucButonlar button { margin: 0; }
.linkSonucButonlar .birincil { flex: 1; }

.haberUst { display: flex; align-items: center; gap: 12px; padding: 10px 16px 2px; }
.haberUst .markaBaslik { margin-bottom: 0; flex: 1; min-width: 0; }
.haberAltBaslik { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metinSoluk); }

/* Sekmeler: iki-kutulu ızgaradan tasarımdaki alt-çizgi biçemine geçti. */
.haberSekmeler { display: flex; gap: 0; padding: 0 16px; border-bottom: 1px solid var(--kenar); flex: none; }
.haberSekmeBtn {
  position: relative;
  background: none; border: none; border-radius: 0;
  padding: 10px 2px 9px; margin-right: 22px;
  font-size: 14px; color: var(--metinSoluk); min-height: 44px;
}
.haberSekmeBtn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--vurgu); transform: scaleX(0); transition: transform 0.2s;
}
.haberSekmeBtn.secili { color: var(--metin); font-weight: 600; }
.haberSekmeBtn.secili::after { transform: scaleX(1); }

.haberAramaCubugu { position: relative; padding: 10px 16px; border-bottom: 1px solid var(--kenar); flex: none; }
#haberAraGir { width: 100%; height: 48px; background: #0f1115; border: 1px solid var(--kenar); border-radius: 8px; color: var(--metin); padding: 0 40px 0 14px; font: inherit; }
#haberAraGir::-webkit-search-cancel-button { display: none; }
.haberAraTemizleBtn { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: none; border: none; color: var(--metinSoluk); font-size: 13px; }
.haberAraTemizleBtn:hover { color: var(--metin); }

/* Filtre çubuğu (2026-09-21): çipler kapalı başlar, hangi filtrenin açık
   olduğu burada yazar — liste alanı 4 satırdan ~9 satıra çıkıyor. */
.haberFiltreCubugu {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px; border-bottom: 1px solid var(--kenar); flex: none;
}
.haberFiltreAcBtn {
  background: none; border: 1px solid var(--kenar); border-radius: 999px;
  color: var(--metinSoluk); font-size: 13px; padding: 0 14px; min-height: 40px;
}
.haberFiltreAcBtn:hover { color: var(--metin); }
.haberFiltreOzeti { font-size: 12px; color: var(--metinSoluk); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.haberFiltreOzeti.etkin { color: var(--metin); }
/* Yeni haber şeridi — listeyi kaydırmadan haber verir */
.haberYeniSerit {
  width: 100%; min-height: 44px; flex: none;
  background: rgba(74,173,209,0.12); border: none; border-bottom: 1px solid var(--kenar);
  color: #8fd0e8; font-size: 13px; font-weight: 600;
}
.haberYeniSerit:hover { background: rgba(74,173,209,0.2); }

/* Zaman filtresi (2026-09-17) — kategori çiplerinin üstünde ayrı satır,
   kilitli hesaplarda da görünür. Ayırt edilsin diye zeminsiz/ince. */
.haberZamanFiltreler { border-bottom: 1px solid var(--kenar); }
.haberTarihAlani {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--kenar); flex: none;
  font-size: 13px; color: var(--metinSoluk);
}
#haberTarihGir {
  height: 44px; background: #0f1115; border: 1px solid var(--kenar);
  border-radius: 8px; color: var(--metin); padding: 0 12px; font: inherit;
}

/* Kategori çipleri — SADECE anaHesap görür (bkz. js/uygulama.js). */
/* Kategori çipleri SARMALI (2026-09-22, kullanıcı kararı). Eskiden tek
   satır yatay kaydırmaydı ve ÖLÇÜLDÜ: 390px'te 30 çipin yalnız 4'ü
   görünüyordu, "ASAYİŞ" 10. sıradaydı ve 577 px sağda kalıyordu — satırın
   tamamı 3463 px (≈9 ekran). Kullanıcı "asayiş yok" diye bildirdi; kategori
   vardı, ULAŞILAMIYORDU. Sarmalı düzende 12 satır / 781 px: 844 px'lik
   ekrana tek bakışta sığıyor. Filtre paneli zaten kapalı başlıyor, bu
   yükseklik yalnız panel açıkken ödeniyor.
   ⚠️ Çok uzun listede panel ekranı taşmasın diye sınırlı yükseklik +
   DİKEY kaydırma (yatay değil — yatay kaydırma gizlenen çip üretiyordu). */
.haberFiltreler {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--kenar); flex: none;
  /* ⚠️ overflow-x AÇIKÇA hidden: yalnız overflow-y yazmak yetmiyor,
     tarayıcı diğer ekseni de `auto` hesaplıyor ve yatay kaydırma geri
     geliyordu (test yakaladı — gizlenen çip sorunu tam da buydu). */
  max-height: 46vh; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: none;
}
.haberFiltreler::-webkit-scrollbar { display: none; }
/* Zaman çipleri AZ sayıda (5) — onlar tek satırda kalsın, sarmasın. */
.haberZamanFiltreler { flex-wrap: nowrap; overflow-x: auto; max-height: none; }
.haberCip {
  flex: none; height: 36px; padding: 0 14px;
  border: 1px solid var(--kenar); border-radius: 999px;
  background: none; color: var(--metinSoluk); font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.haberCip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--metinSoluk)); display: block; flex: none; }
.haberCip:hover { color: var(--metin); }
.haberCip[aria-pressed="true"] { color: var(--metin); border-color: var(--c, var(--kenar)); background: rgba(255,255,255,0.06); }

/* KART IZGARASI (2026-09-21): yan yana 2 kart. Grup başlığı (BUGÜN/DÜN/…),
   "Daha fazla", liste sonu ve boş durum satırın TAMAMINI kaplıyor. */
.haberIzgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; padding: 12px 16px 24px; align-content: start;
}
.haberIzgara > .haberGrup,
.haberIzgara > .haberDahaFazla,
.haberIzgara > .haberListeSonu,
.haberIzgara > .haberBos,
.haberIzgara > .haberIpucuBos { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .haberIzgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.haberGrup {
  padding: 10px 2px 2px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--metinSoluk);
}

/* Bakılan haber soluk — "kartı yapıldı" rozetinden ayrı, sadece "bakıldı". */
.haberKart.goruldu .haberKartBaslik,
.haberKart.goruldu .haberKartGorsel { opacity: 0.5; }
.haberKart.goruldu .haberKartMeta { opacity: 0.7; }

.haberKart {
  display: flex; flex-direction: column; gap: 0;
  width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--kenar); border-radius: 10px;
  background: var(--panel);
  color: var(--metin); text-align: left; cursor: pointer;
}
.haberKart:hover { border-color: rgba(255,255,255,0.28); }
.haberKartGorsel {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: #0f1115; color: var(--metinSoluk); font-size: 20px;
}
.haberKartGorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* İmza rengi şeridi — kartın alacağı kategori/il imzası (bkz. haberImzaSlugu). */
.haberKartGorsel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c, var(--metinSoluk)); opacity: 0.85; }
.haberKartIcerik { display: block; min-width: 0; padding: 10px 12px 12px; }
.haberKartKategori {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.06em; color: var(--metinSoluk);
}
.haberKartKategori i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--metinSoluk)); flex: none; }
/* Başlık 3 satırda kırpılıyor — kartların yüksekliği eşit kalsın diye değil
   (ızgara zaten esnetir), uzun başlık kartı ezmesin diye. Tamamı detayda. */
.haberKartBaslik { font-size: 14px; line-height: 1.4; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.haberKartMeta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--metinSoluk); }
.haberKartMeta .ayrac { color: rgba(255,255,255,0.25); }
.haberKartMeta .haberKartCokKaynak { color: var(--metin); font-weight: 700; }
/* "Kart oldu" (2026-09-17): görselin üstünde köşe rozeti — ızgarada metin
   satırı yer kaplamasın, göz bir bakışta yakalasın. */
.haberKartOldu {
  position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 8px;
  border: 1px solid rgba(78,205,196,0.55); border-radius: 999px;
  background: rgba(10,12,16,0.78);
  color: #4ECDC4; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
mark { background: rgba(210,0,10,0.32); color: var(--metin); padding: 0 1px; border-radius: 2px; }

/* Yükleniyor iskeleti — ızgaradaki kartın ölçüsünde (görsel + 2 satır). */
.haberIskelet { border: 1px solid var(--kenar); border-radius: 10px; overflow: hidden; }
.haberIskeletGorsel {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  background-size: 200% 100%; animation: haberSh 1.3s linear infinite;
}
.haberIskeletSatirlar { padding: 12px; min-width: 0; }
.haberIskeletSatirlar span {
  display: block; height: 11px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  background-size: 200% 100%; animation: haberSh 1.3s linear infinite;
}
.haberIskeletSatirlar span + span { margin-top: 9px; }
.haberIskeletSatirlar .g1 { width: 90%; }
.haberIskeletSatirlar .g2 { width: 60%; }
@keyframes haberSh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .haberIskeletGorsel, .haberIskeletSatirlar span { animation-duration: 0.001ms !important; }
}

/* "Daha fazla" / liste sonu — sayfa altındaki listenin İÇİNDE (design'daki
   gibi), ayrı sabit bir buton değil. */
.haberDahaFazla { padding: 18px 8px 10px; }
.haberDahaFazla button { width: 100%; min-height: 48px; border: 1px solid var(--kenar); background: #0f1115; color: var(--metin); border-radius: 8px; font-size: 13px; }
.haberDahaFazla button:disabled { opacity: 0.6; cursor: default; }
.haberListeSonu { padding: 18px 8px 10px; text-align: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metinSoluk); }

/* Boş durum (kategori dar VEYA arama sonuçsuz — iki farklı metin, bkz. js/uygulama.js). */
.haberBos { padding: 40px 16px 44px; text-align: center; }
.haberBosIkon { width: 40px; height: 40px; margin: 0 auto 16px; border: 1px solid var(--kenar); border-radius: 50%; display: grid; place-items: center; color: var(--metinSoluk); font-size: 18px; }
.haberBos h3 { font-size: 15px; margin: 0 0 8px; color: var(--metin); }
.haberBos p { margin: 0 auto; max-width: 34ch; font-size: 13px; line-height: 1.6; color: var(--metinSoluk); }
.haberBos button { margin-top: 18px; min-height: 44px; padding: 0 16px; border: 1px solid var(--kenar); border-radius: 8px; background: none; color: var(--metin); font-size: 13px; }
.haberBos button:hover { border-color: rgba(255,255,255,0.3); }

/* "Ara" sekmesi, sorgu boşken (henüz arama yapılmadı). */
.haberIpucuBos { padding: 40px 28px; text-align: center; color: var(--metinSoluk); font-size: 13px; line-height: 1.7; }
.haberIpucuBos b { display: block; color: var(--metin); font-weight: 600; margin-bottom: 6px; }


/* HABER DETAYI (2026-09-21): ızgaranın YERİNE geçiyor (aynı sekmede) —
   görsel, başlık, özetin TAMAMI, kaynak sayısı, ↗ Habere Git ve Kart Üret. */
.haberDetay { padding: 12px 16px 28px; max-width: 720px; margin: 0 auto; }
.haberDetayGeriBtn {
  background: none; border: 1px solid var(--kenar); border-radius: 8px;
  color: var(--metinSoluk); font-size: 13px; padding: 0 14px; min-height: 44px;
}
.haberDetayGeriBtn:hover { color: var(--metin); }
.haberDetayGorsel { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-top: 14px; background: #0f1115; }
.haberDetayBaslik { font-size: 20px; line-height: 1.35; margin: 16px 0 0; }
.haberDetayMeta {
  margin: 10px 0 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--metinSoluk);
}
.haberDetayOzet { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--metin); white-space: pre-line; }
.haberDetayButonlar { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.haberDetayGit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 16px; margin: 0; width: auto;
  border: 1px solid var(--kenar); border-radius: 8px;
  color: var(--metin); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.haberDetayGit:hover { border-color: rgba(255,255,255,0.3); }
.haberDetayButonlar .birincil { flex: 1; margin-top: 0; min-height: 48px; }

/* Editördeki kaynak haber (2026-09-21): kart üretildikten sonra da habere
   bakılabilsin — sekme değişince detay kapanıyor, bu satır kalıyor. */
.kaynakHaberBilgi {
  display: flex; align-items: center; gap: 10px;
  margin: -8px 0 18px; padding: 8px 10px;
  border: 1px solid var(--kenar); border-radius: 8px;
  font-size: 13px; color: var(--metinSoluk);
}
.kaynakHaberBaslik { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaynakHaberGit { flex: none; color: var(--metin); text-decoration: none; white-space: nowrap; padding: 6px 4px; }
/* ✕ — yalnız haber bağlantısını kaldırır (2026-09-22). Dokunma hedefi
   44px; satırın yüksekliğini büyütmemesi için negatif dikey margin. */
.kaynakHaberKaldir {
  flex: none; margin: -8px -6px -8px 0; width: 44px; min-height: 44px; padding: 0;
  background: none; border: none; border-radius: 8px;
  color: var(--metinSoluk); font-size: 15px; line-height: 1; cursor: pointer;
}
.kaynakHaberKaldir:hover { color: var(--metin); background: rgba(255,255,255,0.06); }
.kaynakHaberGit:hover { text-decoration: underline; }

/* Mobil dokunma hedefleri — brief: min 56px. */
@media (max-width: 680px) {
  .anaSekmeBtn, .haberSekmeBtn, .haberCip, #haberAraGir, .haberBos button,
  .haberDahaFazla button, .haberDetayGeriBtn, .haberDetayGit, .haberDetayButonlar .birincil { min-height: 56px; }
  .haberCip { height: 56px; padding: 0 16px; }
  #haberAraGir { height: 56px; }
}