/* Duyum Haberler — tasarım sistemi (2026-08-26, dördüncü tur: Claude
   Design referansından — tasarim-referans/Duyum Haberler.html).

   KAYNAK: bu, kullanıcının "DOĞRULADIĞIM DEĞERLER" olarak onayladığı
   gerçek Claude Design çıktısı. Dosya bir "bundler" paketiydi (JS ile
   runtime'da açılan self-extracting HTML) — statik olarak okunamadı,
   __bundler/template script'i JSON-parse edilerek gerçek HTML/CSS'e
   çözüldü (bkz. sohbet notları). OKUNUP REFERANS ALINDI, kopyala-
   yapıştır YAPILMADI — referanstaki inline-accordion kart etkileşimi
   (tıklayınca kart YERİNDE genişliyor, ayrı sayfaya gitmiyor) BİLİNÇLİ
   OLARAK ALINMADI: /haberler'in SEO amacı her habere KENDİ, taranabilir
   URL'sini vermek — inline expand bunu kırardı. Görsel dil (renk/
   köşe/boşluk/tipografi) alındı, gezinme mimarisi (SSR, sayfa başına
   URL) korundu.

   GÜNCELLEME (renk): önceki tur "ana site" (duyum-tanitim-sitesi)
   token'larını birebir kopyalamıştı (turuncu=bilgi/bağlantı). BU
   referans dosyası farklı: a{color:#4AADD1} (MAVİ, ana sitedeki gibi
   turuncu DEĞİL) — kullanıcı bu turda mavi+turkuazı AÇIKÇA "doğru"
   olarak onayladı, turuncu bu turda YOK. /haberler kendi üç-renk
   sistemini kullanıyor (kırmızı=aksiyon, mavi=bilgi/bağlantı,
   turkuaz=ikincil/kategori tonu) — mobil uygulamanın SADECE kırmızı/
   mavi/turkuaz üçlüsüyle birebir, ana sitenin turuncusuz. */

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/haberler/static/fonts/ptserif-700-latin.woff2?v=1") 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: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/haberler/static/fonts/ptserif-700-latin-ext.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+2113;
}

:root {
  /* --- Zemin ve yüzeyler --- */
  --bg: #0a0a0b;
  --card: #131316;
  --card-bottom: #0f0f11;
  --image-bg: #141416;
  --surface: rgba(255, 255, 255, 0.025);
  --surface-input: rgba(255, 255, 255, 0.045);

  /* --- Marka renkleri (referans dosyada doğrulandı): kırmızı=aksiyon/
     uyarı, mavi=bilgi/bağlantı, turkuaz=ikincil/kategori tonu. Menekşe
     VE turuncu KULLANILMIYOR (bilinçli, bu turda değişti). --- */
  --red: #d62828;
  --red-hover: #e93636;
  --red-text: #ff6b6b;
  --red-fill: rgba(214, 40, 40, 0.1);
  --red-border: rgba(214, 40, 40, 0.26);

  --blue: #4aadd1;
  --blue-border: rgba(74, 173, 209, 0.2);

  --teal: #4ecdc4;

  /* --- Metin merdiveni --- */
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.6);
  --text-3: rgba(255, 255, 255, 0.52);
  --text-4: rgba(255, 255, 255, 0.44);

  /* --- Kenarlık --- */
  --border-calm: rgba(255, 255, 255, 0.07);
  --border-card: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* --- Katmanlı gölge — sadece "yükseltilmiş" öğelerde (yerel/CTA
     panelleri), liste kartlarında YOK (referans: kartlar düz/sakin,
     sadece kenarlıkla ayrılıyor — "koyu temada gölge zor görünür,
     çerçeveye yaslan" ilkesiyle tutarlı). --- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.6), 0 24px 54px -28px rgba(0, 0, 0, 0.9);

  /* --- Köşe ölçeği: SADECE bu dört değer --- */
  --radius-chip: 8px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-full: 100px;

  /* --- Boşluk ritmi (4'ün katları) --- */
  --sp-xs: 6px;
  --sp-sm: 10px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-xxl: 24px;
  --sp-xxxl: 32px;

  /* --- Üç ses --- */
  --font-heading: "PT Serif", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.7;
  overflow-x: hidden; /* 360-390px önlemi */
}

.kaynak-listesi a, .haber-karti__baslik, h1, h2 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Referans: a{color:#4AADD1}a:hover{color:#D62828} — mavi=bilgi/
   bağlantı varsayılan, kırmızı=hover/aksiyon vurgusu. */
a { color: var(--blue); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--red); text-decoration: underline; }

@keyframes duyumPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Sticky uygulama şeridi: KAPATILAMAZ. Kırmızı — gerçek bir
   aksiyon çağrısı, dekoratif değil. --- */
.uygulama-seridi {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--red);
  color: #FFFFFF;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.uygulama-seridi a { color: #FFFFFF; text-decoration: underline; }

/* --- Başlık / gezinme --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 19;
  background: rgba(10, 10, 11, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-calm);
  padding: var(--sp-md) var(--sp-lg);
}
.site-header__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
/* Geri dönüş: ana siteye — referanstaki "Duyum'a dön" kutusuyla BİREBİR
   (rgba(255,255,255,.05) zemin, ince kenarlık, 10px radius), ok ikonu +
   metin. Kullanıcı kararı: "← duyum.app" metni, kutu içinde. */
.geri-linki {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
}
.geri-linki:hover { border-color: var(--blue-border); color: #FFFFFF; text-decoration: none; }
.geri-linki svg { display: block; flex: none; }
.site-header .logo {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--text-1);
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  font-size: 14px;
}
.site-header nav a { color: var(--text-3); }
.site-header nav a:hover { color: var(--blue); }

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) 60px;
}

/* Başlıklar: PT Serif, sıkı harf/satır aralığı. */
h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 var(--sp-lg);
  color: var(--text-1);
}
h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: var(--sp-xxxl) 0 var(--sp-sm);
  color: var(--text-1);
}

/* --- Beta uyarısı --- */
.beta-uyarisi {
  background: var(--surface);
  border: 1px solid var(--border-calm);
  border-radius: var(--radius-control);
  padding: var(--sp-md) 14px;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: var(--sp-lg);
}

/* --- Üç sekme + Filtrele — AYNI satırda. Referans: 3-sütun grid,
   pasif buton kendi kenarlığıyla, aktif buton BEYAZ zemin/koyu metin
   (kırmızı DEĞİL — referansta doğrulandı, önceki turdaki kırmızı-aktif
   yanlıştı). Kategoriler burada değil, /haberler/filtre'de. --- */
.sekme-satiri {
  display: flex;
  align-items: stretch;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.sekme-cubugu {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sekme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 12px 10px;
  border-radius: var(--radius-control);
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.sekme:hover { color: var(--text-1); text-decoration: none; }
.sekme--aktif, .sekme--aktif:hover {
  background: #FFFFFF;
  color: var(--bg);
  border-color: #FFFFFF;
  font-weight: 600;
}
.sekme__nokta {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--red);
  animation: duyumPulse 2.4s ease-in-out infinite;
}
/* Filtrele — referanstaki pill filtre tetikleyicisiyle aynı. */
.filtrele-butonu {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--sp-lg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface-input);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}
.filtrele-butonu:hover { color: var(--text-1); border-color: var(--blue-border); text-decoration: none; }
@media (max-width: 480px) {
  .filtrele-butonu { padding: 0 var(--sp-sm); font-size: 12px; }
}
.sekme-notu {
  font-size: 13px;
  color: var(--text-4);
  margin: 0 0 var(--sp-lg);
}

/* --- Yerel sekmesi: uygulamaya yönlendirme. Referans: koyu diyagonal
   gradyan + mavi-tonlu kenarlık, iki ayrı mağaza butonu (gerçek
   mağaza linki YOK — "yakında" dürüstlüğüyle tutarlı, ikisi de
   #indir'e gidiyor). --- */
.yerel-yonlendirme {
  margin: var(--sp-lg) 0;
  padding: var(--sp-xxxl) var(--sp-xl);
  background: linear-gradient(150deg, #15161a, #0d0d0f 60%);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-xl);
  align-items: center;
}
.yerel-yonlendirme h1 { font-size: clamp(21px, 2.4vw, 26px); margin-bottom: var(--sp-sm); }
.yerel-yonlendirme p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 38em;
}
.yerel-yonlendirme__butonlar { display: flex; gap: 10px; flex-wrap: wrap; }
.magaza-butonu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
}
.magaza-butonu__ikon { width: 17px; height: 17px; border-radius: 4px; flex: none; }
.magaza-butonu__ust { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.magaza-butonu__alt { display: block; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.magaza-butonu--dolu {
  background: #FFFFFF; color: var(--bg);
}
.magaza-butonu--dolu:hover { color: var(--bg); text-decoration: none; }
.magaza-butonu--dolu .magaza-butonu__ikon { border: 1.5px solid rgba(10, 10, 11, .3); }
.magaza-butonu--cizgili {
  background: var(--surface-input); border: 1px solid var(--border-strong); color: #FFFFFF;
}
.magaza-butonu--cizgili:hover { border-color: var(--blue-border); color: #FFFFFF; text-decoration: none; }
.magaza-butonu--cizgili .magaza-butonu__ikon { border: 1.5px solid rgba(255, 255, 255, .3); }

/* --- Filtreleme ekranı --- */
.filtre-formu, .filtre-temizle-formu { max-width: 560px; }
.filtre-hint {
  font-size: 12px;
  color: var(--text-4);
  margin: 0 0 var(--sp-sm);
  line-height: 1.5;
}
.filtre-hint-inline { font-weight: 400; color: var(--text-4); font-size: 13px; }

.filtre-chip-grup { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-lg); }
.filtre-chip {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.filtre-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filtre-chip:has(input:checked) { background: var(--red); border-color: var(--red); color: #FFFFFF; font-weight: 600; }

.filtre-checkbox-grup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-xs) var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.filtre-checkbox { display: flex; align-items: center; gap: var(--sp-xs); font-size: 14px; color: var(--text-2); cursor: pointer; }
.filtre-checkbox input { width: 16px; height: 16px; accent-color: var(--red); }
.filtre-checkbox--engel span { color: var(--text-3); }

.filtre-select {
  width: 100%;
  padding: 10px var(--sp-md);
  border: 1px solid var(--border-card);
  background: var(--surface-input);
  color: var(--text-1);
  border-radius: var(--radius-control);
  font-size: 14px;
  font-family: var(--font-body);
  margin-bottom: var(--sp-lg);
}
.filtre-select--coklu { padding: 0; }
.filtre-select--coklu option { padding: 6px 10px; }

.filtre-toggle-satiri { margin-top: var(--sp-sm); }

.filtre-footer { margin-top: var(--sp-xl); }
.filtre-buton {
  padding: 10px var(--sp-xl);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-control);
  background: var(--surface-input);
  color: var(--text-1);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
}
.filtre-buton--birincil { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.filtre-buton--birincil:hover { background: var(--red-hover); }
.filtre-temizle-formu { margin-top: var(--sp-md); }

/* --- Haber kartı ızgarası: mobil (390px) DAHİL her zaman EN AZ 2
   sütun (referansın kendi ≤560px tek-sütun düşüşü kullanıcının AÇIKÇA
   "mobilde 2 sütun" isteğiyle çelişiyordu — burada UYGULANMADI,
   kullanıcının tekrarlanan/açık talimatı önceliklendirildi).
   ≥640px 3, ≥980px 4 sütun. --- */
.haber-listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}
@media (min-width: 640px) {
  .haber-listesi { grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
}
@media (min-width: 980px) {
  .haber-listesi { grid-template-columns: repeat(4, 1fr); }
}

/* Kart — referans: DÜZ/sakin liste durumu (gradyan+gölge SADECE
   referansın "açık/genişletilmiş" durumunda vardı — burada kart hiç
   genişlemiyor, her zaman ayrı bir sayfaya link veriyor, bu yüzden
   "kapalı" durumun sade stili kullanılıyor). */
.haber-karti {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-calm);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.haber-karti:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.04); }

.haber-karti__gorsel {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--image-bg);
  position: relative;
}
.haber-karti__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.haber-karti__icerik {
  padding: clamp(12px, 1.8vw, var(--sp-xl));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.haber-karti__baslik {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.7vw, 17px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.24;
  color: var(--text-1);
}
a.haber-karti__baslik { color: var(--text-1); }
a.haber-karti__baslik:hover { color: var(--blue); }
.haber-karti__ozet {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.haber-karti__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Boş durum --- */
.bos-durum {
  margin-top: var(--sp-lg);
  padding: clamp(28px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--border-calm);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--text-2);
  grid-column: 1 / -1;
}

/* --- Akış altı dürüstlük notu + "Uygulamada aç" (referans) --- */
.akis-alti {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--border-calm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  flex-wrap: wrap;
}
.akis-alti p { font-size: 13px; color: var(--text-3); margin: 0; max-width: 46em; }
.akis-alti a {
  flex: none;
  font-weight: 600;
  font-size: 13px;
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  padding: 10px var(--sp-lg);
  border-radius: var(--radius-control);
}
.akis-alti a:hover { border-color: var(--blue-border); color: var(--text-1); text-decoration: none; }

/* --- Alt CTA paneli: "Akışı kendinize göre kurun" (referans) --- */
.alt-cta {
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: clamp(24px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #15161a, #0d0d0f 60%);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-xxl);
  align-items: center;
}
.alt-cta h2 { margin: 0 0 var(--sp-sm); font-size: clamp(22px, 3vw, 30px); max-width: 20ch; }
.alt-cta p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-2); max-width: 32em; }
.alt-cta .yerel-yonlendirme__butonlar { justify-content: flex-end; }

/* --- Detay sayfası --- */
.haber-detay__gorsel {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--image-bg);
  margin-bottom: var(--sp-lg);
  border: 1px solid var(--border-card);
}
.haber-detay__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.haber-detay__ozet {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-1);
  margin-bottom: var(--sp-sm);
}
.haber-detay__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--sp-xl);
}

.kaynak-listesi { list-style: none; margin: 0; padding: 0; }
.kaynak-listesi li {
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border-calm);
  font-size: 14px;
  color: var(--text-2);
}
.kaynak-listesi a { color: var(--blue); font-weight: 600; }
.kaynak-listesi a:hover { color: var(--red); }

/* --- Arama --- */
.arama-formu { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-xl); }
.arama-formu input {
  flex: 1;
  padding: 10px var(--sp-md);
  border: 1px solid var(--border-card);
  background: var(--surface-input);
  color: var(--text-1);
  border-radius: var(--radius-control);
  font-size: 15px;
  font-family: var(--font-body);
}
.arama-formu input::placeholder { color: var(--text-4); }
.arama-formu button {
  padding: 10px var(--sp-lg);
  border: none;
  border-radius: var(--radius-control);
  background: var(--red);
  color: #FFFFFF;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}
.arama-formu button:hover { background: var(--red-hover); }

.site-footer {
  border-top: 1px solid var(--border-calm);
  padding: var(--sp-xxl) var(--sp-lg);
}
.site-footer__ust {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  flex-wrap: wrap;
}
.site-footer__marka { display: flex; align-items: center; gap: var(--sp-sm); }
.site-footer__ad { font-family: var(--font-heading); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--text-1); }
.site-footer__etiket { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); }
.site-footer__aciklama { max-width: 44em; font-size: 12px; line-height: 1.6; color: var(--text-4); margin: var(--sp-md) auto 0; text-align: center; }
.site-footer__telif { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); text-align: center; margin-top: var(--sp-md); }