:root {
  color-scheme: light;

  /* ===================== Tasarım tokenları (2026-08-11) =====================
     Duyum mobil uygulamasının tasarım sistemiyle (gsp-medya/mobile/src/
     theme/colors.ts) hizalandı: siyah/beyaz/gri nötr temel + TEK vurgu
     rengi (kırmızı #D62828 — mobilin `primary`/`accent`/`danger`si AYNI
     değer, kasıtlı olarak). Panelde daha önce hiçbir yerde karşılığı
     olmayan, markaya ait olmayan bir mavi (#2b5fd9) "birincil" renk olarak
     kullanılıyordu — o TAMAMEN kaldırıldı, yerine bu kırmızı geçti.
     Fonksiyonel durum renkleri (yeşil=onay/başarı, amber=uyarı/askıda,
     mor=nadir/ikincil aksiyonlar: Kümeyi Ayır + Arıza Lambası notu)
     KASITLI olarak korundu — bunlar marka rengi değil, editörün hızlıca
     tarayabileceği anlamsal sinyaller (ör. "Onayla" yeşil dururken "Sil"
     de kırmızı olursa ayrım kaybolur). Bkz. panel README.md. */
  --color-bg: #F2F2F3;
  --color-card: #FFFFFF;
  --color-card-border: #D6D6DA;
  --color-border: #E2E2E5;
  --color-text: #0F0F10;
  --color-text-muted: #63636B;
  --color-placeholder: #E3E3E6;

  --color-primary: #D62828;
  --color-primary-dark: #B71F1F;
  --color-primary-tint: #FBEAEA;

  --color-success: #21A366;
  --color-success-dark: #1B8A55;
  --color-success-tint: #D9F4E6;

  --color-warning: #F0B429;
  --color-warning-text: #92610A;
  --color-warning-tint: #FDECC8;

  --color-neutral-tint: #ECECEE;

  --font-heading: 'PT Serif', Georgia, 'Times New Roman', serif;
  --shadow-card: 0 2px 8px rgba(15,15,16,.08);
  --shadow-card-hover: 0 4px 14px rgba(15,15,16,.12);
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
}
.hidden, [hidden] { display: none !important; }

/* ===================== Giriş ekranı ===================== */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-card);
}
.login-card h1 { font-family: var(--font-heading); font-size: 21px; margin: 0 0 4px; }
.login-card p.sub { color: var(--color-text-muted); margin: 0 0 24px; font-size: 13.5px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #444; }
.login-card input {
  width: 100%; padding: 10px 12px; border-radius: 7px; border: 1px solid #ccc;
  font-size: 14px; margin-bottom: 16px;
}
.login-card input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary); }
.login-card button {
  width: 100%; padding: 11px; border: none; border-radius: 7px;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
.login-card button:hover { background: var(--color-primary-dark); }
.login-card button:disabled { opacity: .6; cursor: not-allowed; }
.field-error { color: var(--color-primary); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: -6px; margin-bottom: 10px; }

/* ===================== Üst bar ===================== */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--color-card); border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
}
.topbar h1 { font-family: var(--font-heading); font-size: 17px; margin: 0; white-space: nowrap; }
.search-bar { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.search-bar input {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; width: 220px; max-width: 100%;
}
.search-bar button {
  padding: 8px 14px; border-radius: 6px; border: none;
  background: var(--color-primary); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.search-bar button:hover { background: var(--color-primary-dark); }
.search-error { color: var(--color-primary); font-size: 12.5px; font-weight: 600; }
/* ===================== Otomatik Yayın anahtarı (her sayfada sabit üst
   bar içinde — .topbar zaten position:sticky) — ışık anahtarı görünümlü,
   büyük/göz alıcı, publish_mode ayarını (GET/PUT /api/editor/settings/
   publish-mode) kontrol eder. Backend'de YENİ bir şey gerekmiyordu, bu
   ayar ve uç zaten vardı (bkz. pages/ayarlar.js) — burada sadece HER
   sayfadan erişilebilir, göze çarpan bir kopyası eklendi. */
.publish-switch { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12.5px; }
.publish-switch-label { font-weight: 700; color: #444; }
.switch-track {
  position: relative; width: 46px; height: 25px; border-radius: 999px;
  border: none; background: var(--color-primary); cursor: pointer; padding: 0;
  transition: background .18s ease; flex-shrink: 0;
}
.switch-track.is-on { background: var(--color-success); }
.switch-track:disabled { cursor: wait; opacity: .7; }
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.switch-track.is-on .switch-knob { transform: translateX(21px); }
.publish-switch-state { font-weight: 800; letter-spacing: .02em; }
.publish-switch-state.state-on { color: var(--color-success-dark); }
.publish-switch-state.state-off { color: var(--color-primary); }

.editor-info { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; }
.editor-info .role-pill {
  background: var(--color-neutral-tint); color: var(--color-text); font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
/* Karar (2026-08-14 — Madde 2): panel sahibinin hesabı (hardcoded editör
   ID'si — bkz. app.js: FOUNDER_EDITOR_ID) diğer editörlerden görsel olarak
   ayrışsın diye. Marka kırmızısı/yeşil/amber gibi anlamsal renklerle
   KARIŞMAYAN, bilinçli olarak altın/amber bir "özel" rengi (rol pilleri
   gri, aksiyonlar kırmızı/yeşil — bu üçüncü, nadir görülen bir kategori). */
#editor-name.founder-name { color: #B8860B; font-weight: 800; }
.founder-badge {
  display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #FFD700, #E8A317);
  color: #3a2a00; font-weight: 800; font-size: 11px; padding: 2px 9px; border-radius: 999px;
}
#logout-btn {
  border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 7px 12px;
  font-size: 12.5px; cursor: pointer; font-weight: 600; color: #555;
}
#logout-btn:hover { background: #f0f0f2; }

#search-result { padding: 12px 20px 0; }
#search-result .cluster-card { border: 2px solid var(--color-primary); }
#search-result .close-search {
  background: #eee; color: #333; border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; font-weight: 600; margin-bottom: 8px;
}

/* ===================== Hata bannerı ===================== */
#error-banner {
  background: var(--color-primary); color: #fff; padding: 10px 20px;
}
#error-banner .banner-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 100%; }
#error-banner .banner-title { font-weight: 700; font-size: 13.5px; }
#error-banner ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; max-height: 120px; overflow-y: auto; }
#error-banner button.ack {
  background: #fff; color: var(--color-primary); border: none; border-radius: 6px;
  padding: 6px 14px; font-weight: 700; font-size: 12px; cursor: pointer; flex-shrink: 0;
}
#error-banner button.ack:hover { background: #ffe9e9; }

/* ===================== Kabuk: sidebar + içerik ===================== */
.shell { display: flex; min-height: calc(100vh - 53px); }
.sidebar {
  width: 190px; flex-shrink: 0; background: var(--color-card); border-right: 1px solid var(--color-border);
  padding: 16px 10px;
}
.nav-btn {
  display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 4px;
  border: none; background: none; border-radius: 7px; font-size: 14px; color: #444; cursor: pointer;
}
.nav-btn:hover { background: #f0f0f2; }
.nav-btn.active { background: var(--color-text); color: #fff; font-weight: 600; }
.content { flex: 1; min-width: 0; padding: 20px 24px; }
.page-placeholder { color: var(--color-text-muted); padding: 60px 20px; text-align: center; font-size: 14px; }

/* ===================== Alt sekmeler (Haberler içi) ===================== */
.subtabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.subtab-btn {
  padding: 8px 16px; border: 1px solid #ccc; background: #fff;
  border-radius: 8px 8px 0 0; cursor: pointer; font-size: 13.5px; border-bottom: none; color: #555;
}
.subtab-btn.active { background: var(--color-text); color: #fff; font-weight: 600; }
.subtab-btn .tab-count {
  display: inline-block; margin-left: 6px; background: var(--color-primary); color: #fff;
  border-radius: 999px; font-size: 10px; padding: 1px 6px; font-weight: 700;
}

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
select, button.btn-refresh {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; background: #fff; font-size: 14px; cursor: pointer;
}
.count-badge { background: var(--color-neutral-tint); border-radius: 999px; padding: 4px 10px; font-size: 13px; color: #444; }
/* Karar (2026-08-11): araç çubuğundaki serbest arama kutuları (ör.
   Kullanıcılar sekmesi) daha önce her seferinde aynı stili inline
   tekrarlıyordu — tek, paylaşılan bir sınıfa toplandı. */
.toolbar-search-input {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; width: 260px; max-width: 100%;
}

/* ===================== Küme kartları ===================== */
.cluster-card {
  position: relative; background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease;
}
.cluster-card:hover { box-shadow: var(--shadow-card-hover); }
.cluster-card.suspicious { border-color: var(--color-warning); background: #fffbea; }
.cluster-card.reported { border-color: var(--color-primary); background: #fff5f5; }
.cluster-title { font-family: var(--font-heading); font-size: 16.5px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; padding-right: 60px; }
.cluster-meta { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 12px; }
.sub { color: var(--color-text-muted); font-size: 13.5px; }

.ref-code {
  position: absolute; top: 14px; right: 16px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: #999; opacity: .55; user-select: all;
}

.report-badge {
  display: inline-block; background: var(--color-primary); color: #fff; font-weight: 700;
  font-size: 11px; padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}

/* Karar (2026-08-13 — panel yeniden tasarımı, Madde 1+2): "İncelenecekler"
   TEK kuyruk oldu (eskiden ayrı "Çelişkili Veri" sekmesiydi) — bu yüzden
   "neden inceleniyor" bilgisi de (kullanıcı şikayeti + çelişkili veri +
   otomatik şüpheli/spam sınıflandırması) TEK, tutarlı bir rozette
   toplandı. Kasıtlı olarak view-grid'in kart-içi gizleme listesinde YOK —
   ızgara varsayılan görünüm olduğu için bu bilginin her zaman görünür
   kalması gerekiyor (editörün tek bakışta karar vermesi gereken asıl bilgi
   bu). Amber/uyarı tonunda (kırmızı/yeşil aksiyon renkleriyle karışmasın). */
.review-reason-badge {
  margin: 4px 0 10px; padding: 8px 12px; background: var(--color-warning-tint);
  border: 1px solid #f0e0a8; border-radius: 8px; font-size: 12.5px; color: var(--color-warning-text);
}
.review-reason-title { font-weight: 700; margin-bottom: 3px; }
.review-reason-list { margin: 0; padding-left: 18px; }
.review-reason-list li { margin-bottom: 2px; }
/* Karar (2026-08-13, backend tamamlaması): yalnızca "data_conflict"ten
   dolayı kuyruktaysa (gerçek user_report YOKSA) nötr/bilgi tonu — o kümeler
   zaten otomatik yayınlanmış, amber "uyarı/aksiyon gerekiyor" izlenimi
   yanlış olurdu. */
.review-reason-badge.info-only {
  background: var(--color-neutral-tint); border-color: var(--color-border); color: var(--color-text-muted);
}
.review-reason-list li:last-child { margin-bottom: 0; }

.badges-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.badge-breaking {
  display: inline-block; background: var(--color-primary); color: #fff; font-weight: 800;
  font-size: 11px; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em;
}
.badge-conflict {
  display: inline-block; background: var(--color-warning-tint); color: var(--color-warning-text); font-weight: 700;
  font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: help;
}
/* Karar (2026-08-11): kategori rozetleri artık Duyum mobil uygulamasıyla
   (categoryColors.js) AYNI slug->renk haritasını kullanıyor — arkaplan
   rengi JS'te satır içi olarak (per-kategori) verilir, burada yalnızca
   metin/boyut/şekil sabit kalır. */
.badge-category {
  display: inline-block; color: #fff; font-weight: 700;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
}

/* Karar (2026-08-15 — Madde 2, manuel/sponsorlu haber): mobil uygulamadaki
   (NewsGridCard.tsx) AYNI "küçük, göze batmayan" ilke — flashy bir renk
   DEĞİL, ince kenarlıklı/nötr bir etiket, diğer rozetlerle (SON DAKİKA,
   kategori) karışmasın diye bilinçli olarak sade tutuldu. Token-tabanlı
   olduğu için #page-haberler'in koyu temasında otomatik doğru renk alır. */
.badge-sponsored {
  display: inline-block; margin: 2px 0 6px; color: var(--color-text-muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 5px;
}

.timeline-box { margin-top: 12px; padding: 10px 12px; background: var(--color-neutral-tint); border: 1px solid var(--color-border); border-radius: 8px; }
.timeline-title { font-size: 12px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.timeline-list { list-style: none; margin: 0; padding: 0; }
.timeline-list li { font-size: 13px; padding: 5px 0; border-top: 1px solid #e2e2e5; display: flex; align-items: baseline; gap: 8px; overflow-wrap: anywhere; }
.timeline-list li:first-child { border-top: none; }
.timeline-time { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; white-space: nowrap; }
.timeline-delete { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 13px; opacity: .6; flex-shrink: 0; }
.timeline-delete:hover { opacity: 1; }
.timeline-delete:disabled { opacity: .3; cursor: not-allowed; }

.article-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid #f0f0f2; }
.article-row:first-of-type { border-top: none; }
.article-row img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--color-placeholder); flex-shrink: 0; }
.article-info { flex: 1; min-width: 0; }
.article-source { display: inline-block; font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.article-title { font-size: 14px; color: #222; text-decoration: none; display: block; overflow-wrap: anywhere; }
.article-title:hover { text-decoration: underline; }

.badge-suspicious { display: inline-block; margin-top: 4px; font-size: 11px; background: var(--color-warning-tint); color: var(--color-warning-text); border-radius: 5px; padding: 2px 6px; font-weight: 600; }
.badge-spam { display: inline-block; margin-top: 4px; font-size: 11px; background: var(--color-text); color: #fff; border-radius: 5px; padding: 2px 6px; font-weight: 600; }

.actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-approve, .btn-restore { background: var(--color-success); color: #fff; }
.btn-approve:hover, .btn-restore:hover { background: var(--color-success-dark); }
.btn-reject, .btn-archive { background: var(--color-primary); color: #fff; }
.btn-reject:hover, .btn-archive:hover { background: var(--color-primary-dark); }
.actions button:disabled { opacity: .5; cursor: not-allowed; }

.empty { color: var(--color-text-muted); padding: 40px; text-align: center; font-size: 14px; }
.empty.error { color: var(--color-primary); font-weight: 600; }

/* ===================== Kümeyi Ayır — kasıtlı olarak AYRI bir renk (mor):
   marka kırmızısından/onay yeşilinden/danger'dan bilinçli olarak farklı,
   çünkü "bu nadir görülen, geri dönüşü olan bir düzenleme aksiyonu" —
   Onayla/Reddet/Sil ile aynı satırda karışmasın diye. ===================== */
.split-checkbox { display: flex; align-items: center; padding-top: 4px; flex-shrink: 0; }
.split-checkbox input { width: 16px; height: 16px; cursor: pointer; }
.split-box {
  margin-top: 14px; padding: 12px 14px; background: #f6f4ff; border: 1px dashed #b9a9f5;
  border-radius: 8px;
}
.split-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.split-title { font-size: 12.5px; font-weight: 700; color: #5b3fc9; }
.split-hint { font-size: 12px; color: #6b6b7a; }
.btn-split {
  border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: #5b3fc9; color: #fff;
}
.btn-split:hover:not(:disabled) { background: #492fb0; }
.btn-split:disabled { opacity: .45; cursor: not-allowed; }

/* ===================== "Alt Grupları Gör" (2026-08-14) — suggest-splits.
   "Kümeyi Ayır"ın ÜZERİNE inşa edildiği için kasıtlı olarak AYNI mor aile
   (bkz. .split-box notu) — ayrı bir renk icat edilmedi, editör bu ikisinin
   akraba özellikler olduğunu görsel olarak da hissetsin diye. ===================== */
.suggest-box { margin-top: 14px; }
.btn-suggest {
  border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: #5b3fc9; color: #fff;
}
.btn-suggest:hover:not(:disabled) { background: #492fb0; }
.suggest-results { margin-top: 10px; }
.suggest-intro { font-size: 12.5px; font-weight: 700; color: #5b3fc9; margin-bottom: 8px; }
.suggest-candidates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.suggest-candidate-card {
  background: #f6f4ff; border: 1px solid #b9a9f5; border-radius: 8px; padding: 10px 12px;
}
.suggest-candidate-title { font-family: var(--font-heading); font-size: 13.5px; font-weight: 700; margin-bottom: 4px; overflow-wrap: anywhere; }
.suggest-candidate-summary { font-size: 12px; color: #555; margin-bottom: 6px; overflow-wrap: anywhere; }
.suggest-candidate-meta { font-size: 11.5px; color: #6b6b7a; }

/* ===================== Tablolar (Havuz / Hatalar) ===================== */
.table-scroll { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; background: var(--color-card); border-radius: 8px; overflow: hidden; }
table.data-table th, table.data-table td { text-align: left; padding: 8px 10px; font-size: 13px; border-bottom: 1px solid #eee; }
table.data-table th { background: var(--color-neutral-tint); font-size: 11px; text-transform: uppercase; color: var(--color-text-muted); }
table.data-table td.title-cell, table.data-table td.msg-cell { max-width: 420px; }
table.data-table a { color: #222; text-decoration: none; }
table.data-table a:hover { text-decoration: underline; }
.muted { color: #999; opacity: .7; font-weight: 600; }

/* Karar (2026-08-11): "yeni/bekliyor" nötr griye çekildi — daha önce
   markasız bir maviydi, gerçek bir anlamsal renk taşımıyordu (onay=yeşil,
   uyarı=amber, tehlike=kırmızı'nın aksine "yeni" nötr bir durumdur). */
.status-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.status-new, .status-pending { background: var(--color-neutral-tint); color: var(--color-text); }
.status-reviewing { background: #eee; color: #555; }
.status-suspicious { background: var(--color-warning-tint); color: var(--color-warning-text); }
.status-approved, .status-published, .status-active { background: var(--color-success-tint); color: var(--color-success-dark); }
.status-rejected, .status-removed, .status-inactive { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.status-archived { background: #eee; color: #999; }
.ack-yes { color: #999; }
.ack-no { color: var(--color-primary); font-weight: 700; }

/* ===================== Kullanıcılar / Duyurular / Ayarlar - genel ===================== */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-header h2 { font-family: var(--font-heading); font-size: 17px; margin: 0; }

.role-hint {
  background: #fff8e6; border: 1px solid #f0d896; color: #8a6a1a;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
}

.pagination { display: flex; align-items: center; gap: 10px; margin-top: 16px; justify-content: center; }
.pagination button {
  border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 7px 14px;
  font-size: 13px; cursor: pointer; font-weight: 600; color: #444;
}
.pagination button:hover:not(:disabled) { background: #f0f0f2; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination .page-info { font-size: 12.5px; color: #777; }

/* Genel form elemanları (Duyurular / Ayarlar formları) */
.field-group { margin-bottom: 14px; }
.field-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #444; }
.field-group input, .field-group textarea, .field-group select {
  width: 100%; padding: 9px 12px; border-radius: 7px; border: 1px solid #ccc;
  font-size: 14px; font-family: inherit; background: #fff;
}
.field-group input:focus, .field-group textarea:focus, .field-group select:focus {
  outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary);
}
.field-group textarea { resize: vertical; min-height: 80px; }
.field-row { display: flex; gap: 12px; }
.field-row .field-group { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: #444; }
.checkbox-row input { width: 16px; height: 16px; }

/* Ayarlar sekmesindeki kategori/editör tablolarının satır-içi
   input/select'leri — daha önce her satırda tekrarlanan inline style'lar
   tek bir paylaşılan sınıfa toplandı (2026-08-11). */
.table-inline-input {
  padding: 5px 8px; border-radius: 5px; border: 1px solid #ccc; font-size: 13px; font-family: inherit;
}
.table-inline-input.w-narrow { width: 60px; }
.table-inline-input.w-medium { width: 130px; }
.table-inline-input.w-wide { width: 140px; }

.btn-primary {
  border: none; border-radius: 7px; padding: 10px 18px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; background: var(--color-primary); color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary {
  border: 1px solid #ccc; border-radius: 7px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: #fff; color: #444;
}
.btn-secondary:hover:not(:disabled) { background: #f0f0f2; }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
.btn-danger-outline {
  border: 1px solid var(--color-primary); border-radius: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; background: #fff; color: var(--color-primary);
}
.btn-danger-outline:hover:not(:disabled) { background: #fff5f5; }
.btn-danger-outline:disabled { opacity: .5; cursor: not-allowed; }

.form-card {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.form-card h3 { font-size: 13.5px; margin: 0 0 14px; color: #333; }

.settings-section { margin-bottom: 28px; }
.settings-section h2 { font-family: var(--font-heading); font-size: 17px; margin: 0 0 4px; }
.settings-section .sub { margin: 0 0 14px; }

/* Kullanıcı detay paneli (satır altına açılır) — kasıtlı olarak gölgesiz/
   düz: çevresindeki satırın İÇİNE gömülü/"basılmış" hissi versin diye,
   kartlardaki "somut ve yerleşik" gölge burada YOK. */
.detail-panel {
  background: #f8f9fb; border: 1px solid var(--color-border); border-radius: 8px;
  padding: 14px 16px; margin: -4px 0 10px; font-size: 13px;
}
.detail-panel .stat-row { display: flex; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
.detail-panel .stat { display: flex; flex-direction: column; }
.detail-panel .stat-value { font-size: 20px; font-weight: 700; color: var(--color-text); }
.detail-panel .stat-label { font-size: 11.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; }

.ban-grant-form {
  margin-top: 12px; padding: 12px 14px; background: #fff;
  border: 1px solid #f3c9cb; border-radius: 8px;
}

/* Karar (2026-08-11 — Madde 2): kullanıcı detayındaki IP bilgisi + çoklu
   hesap uyarısı. */
.ip-info-row { display: flex; gap: 24px; margin-bottom: 10px; flex-wrap: wrap; }
.ip-info { display: flex; flex-direction: column; }
.ip-info-label { font-size: 11.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; }
.ip-info-value { font-size: 13.5px; font-weight: 600; color: var(--color-text); font-family: monospace; overflow-wrap: anywhere; }
.ip-warning {
  margin-bottom: 12px; padding: 8px 12px; background: var(--color-warning-tint); color: var(--color-warning-text);
  border-radius: 6px; font-size: 13px; font-weight: 600;
}

/* Yorum moderasyonu */
.comment-row {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.comment-row.removed { background: #fff5f5; border-color: #f3c9cb; }
.comment-meta { font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.comment-content { font-size: 13.5px; color: #222; margin-bottom: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.badge-removed {
  display: inline-block; background: var(--color-primary); color: #fff; font-weight: 700;
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
}
/* Karar (2026-08-11 — Madde 1): Yorum Moderasyonu satırında yazan
   kullanıcının U-kodu NET görünsün diye ayrı, vurgulu bir rozet. */
.badge-user-code {
  display: inline-block; background: var(--color-text); color: #fff; font-weight: 700;
  font-size: 11px; padding: 2px 8px; border-radius: 5px; letter-spacing: .02em;
}
.comment-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.comment-ban-form {
  margin-top: 10px; padding: 12px 14px; background: #fff5f5;
  border: 1px solid #f3c9cb; border-radius: 8px;
}

/* ===================== Haberler: yeni aksiyon renkleri ===================== */
.btn-suspend { background: var(--color-warning); color: var(--color-text); }
.btn-suspend:hover:not(:disabled) { background: #d99a1f; }
.btn-delete { background: #7a1620; color: #fff; }
.btn-delete:hover:not(:disabled) { background: #5c0f18; }

/* ===================== Haberler: üst sayaç çubuğu + görünüm seçici ===================== */
.counts-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.count-pill {
  border: 1px solid var(--color-border); background: var(--color-card); border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; color: #444; cursor: pointer; white-space: nowrap;
}
.count-pill:hover { background: #f0f0f2; }
.count-pill span { font-weight: 800; color: var(--color-text); }

/* Karar (2026-08-14 — Haberler yeniden tasarımı): Liste/Izgara seçici VE
   liste görünümü tamamen kaldırıldı — artık HER YERDE ızgara/kare kart
   düzeni (bkz. .news-grid, aşağıda "Haberler: TAMAMEN SİYAH tema" bloğu).
   Eski `.view-toggle`/`.view-btn`/`#page-haberler.view-grid ...` kuralları
   (2026-08-10/13) bu yüzden silindi — karşılık geldikleri #h-list/
   #h-reportedList/#h-developmentsList container'ları da haberler.js'te
   artık yok. Kartların özet/tam boy ayrımı yok: detay artık AYRI bir
   overlay ekranında (.news-detail-overlay) açılıyor, kart içinde
   gizlenen/kırpılan bir alt bölüm yok.*/

/* ===================== Haberler: düzenleme kutusu ===================== */
.edit-box {
  margin-top: 14px; padding: 12px 14px; background: var(--color-neutral-tint); border: 1px solid var(--color-border);
  border-radius: 8px;
}
.edit-box .field-group { margin-bottom: 10px; }
.edit-box .field-group:last-of-type { margin-bottom: 0; }

/* ===========================================================================
   MOBİL RESPONSIVE
   Yayına hazırlık turu (2026-08-10): sidebar hamburger'a döner, tablolar
   dar ekranda kart görünümüne (data-label ile) geçer, dokunma hedefleri
   büyütülür, formlar tek sütuna düşer. Kırılma noktası 768px (hamburger)
   ve 640px (yoğun içerik: tablolar/form satırları/hücre içi metin).

   Görsel tasarım turu (2026-08-11) — SON KONTROL: bu ortamda gerçek bir
   headless tarayıcı (Chrome/Edge, hem klasik hem "=new" headless modu)
   denendi (`--window-size=390,844` ile), AMA bu Windows kurulumunda
   --window-size 520px altındaki değerler için layout viewport'unu
   GERÇEKTEN küçültmüyor — yalnızca çıktı PNG'sini istenen boyuta kırpıyor,
   içeriği daha GENİŞ (muhtemelen ~510-520px) sabit bir viewport'ta
   render'lıyor (izole bir test dosyasıyla doğrulandı: 200px VE 390px
   istekleri AYNI iç genişlikte render etti, yalnızca 520px+ istekler
   doğru çalıştı). Bu yüzden 390px'te çekilen ekran görüntüleri güvenilir
   DEĞİL (yanlış pozitif "taşma" gösterebilir) — araç bu makinede gerçek
   doğrulama için kullanılamadı. Onun yerine talimat gereği CSS satır
   satır elden geçirildi; bulunan gerçek taşma riski: tablo hücrelerindeki
   UZUN, BOŞLUKSUZ metin (e-posta, URL) `overflow-wrap` olmadan dar
   ekranda kart görünümünün dışına taşabilirdi — aşağıda düzeltildi
   (`overflow-wrap: anywhere`). Login kartındaki flex+max-width deseni
   izole bir test dosyasıyla (800px'te doğru render ettiği görülerek)
   ayrıca doğrulandı, sorun yok.
   =========================================================================== */

.hamburger-btn {
  display: none; background: none; border: 1px solid #ccc; border-radius: 6px;
  padding: 8px 11px; font-size: 16px; cursor: pointer; line-height: 1; flex-shrink: 0;
}
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; }

  .shell { position: relative; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 210; width: 230px;
    transform: translateX(-100%); transition: transform .18s ease-out;
    box-shadow: 2px 0 16px rgba(0,0,0,.2); overflow-y: auto;
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 205;
  }
  .content { padding: 14px 12px; }
}

@media (max-width: 640px) {
  /* --- Üst bar: dar ekranda kaydırmadan sığması için sarıyor --- */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .topbar h1 { font-size: 14px; }
  .search-bar { order: 3; flex-basis: 100%; width: 100%; }
  .search-bar input { flex: 1; width: auto; min-width: 0; }
  .editor-info { margin-left: auto; }
  .editor-info #editor-name { display: none; } /* yer darlığında rol rozeti + çıkış yeterli */
  .publish-switch-label { display: none; } /* "Otomatik Yayın" etiketi gizlenir, anahtar+durum yeterince açıklayıcı */

  .page-header { flex-direction: column; align-items: stretch; }
  .counts-bar { justify-content: flex-start; }

  /* --- Dokunma hedefleri: parmakla rahat tıklanabilir minimum boyut ---
     Genel `button` seçicisi tercih edildi (tek tek her class'ı avlamak
     yerine) — panelde onlarca farklı yerde (tablo hücresi, detay paneli,
     form) buton var, biri unutulup 44px altında kalmasın diye. Yalnızca
     gerçekten küçük/yoğun kalması gereken ikon butonları (🗑 zaman
     çizelgesi satırı, ✕ arama kapatma) hariç tutuldu — parmak ucu
     kadar alanları var ve satır içi metinle birlikte büyürlerse okunaksız
     olur. */
  button:not(.timeline-delete), .count-pill, .hamburger-btn, select {
    min-height: 44px;
  }
  .actions { gap: 10px; }

  /* --- Formlar: yan yana alanlar tek sütuna düşer, taşma olmaz --- */
  .field-row { flex-direction: column; gap: 0; }
  .field-row .field-group { max-width: none !important; width: 100%; }
  /* iOS Safari, <16px input font-size'ında input'a odaklanınca sayfayı
     otomatik yakınlaştırır (zoom) — bu da formu ekrandan taşırır gibi
     hissettirir. 16px'e çıkarmak bunu önler. */
  .field-group input, .field-group textarea, .field-group select,
  .login-card input, .search-bar input {
    font-size: 16px;
  }

  /* --- Haberler ızgarası: dar ekranda tek sütuna düşer (auto-fill zaten
     minmax altına inemeyeceği için grid-template-columns'u küçültüyoruz) --- */
  #page-haberler .news-grid { grid-template-columns: 1fr; }
  #page-haberler .news-detail-overlay { padding: 0; }
  #page-haberler .news-detail-panel { border-radius: 0; min-height: 100vh; padding: 20px 16px 32px; }
  #page-haberler .news-detail-header { padding-right: 46px; }

  /* --- Tablolar: yatay kaydırma yerine dikey "kart" görünümü.
     Her <td> data-label attribute'undan başlığını gösterir (JS tarafında
     eklendi: Havuz/Hatalar/Aktivite/Kullanıcılar/Ayarlar tabloları). --- */
  .table-scroll { overflow-x: visible; }
  table.data-table thead { display: none; }
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td {
    display: block; width: 100%;
  }
  table.data-table tr {
    margin-bottom: 10px; border: 1px solid var(--color-border); border-radius: 8px;
    padding: 6px 10px; background: var(--color-card);
  }
  table.data-table td {
    border-bottom: 1px solid #f2f2f4; padding: 8px 2px; display: flex;
    justify-content: space-between; align-items: center; gap: 10px; text-align: right;
    min-width: 0;
  }
  /* Karar (2026-08-11 — mobil denetim, gerçek bulgu): boşluksuz uzun metin
     (e-posta, URL) flex hücrenin dışına taşabiliyordu — data-table içindeki
     TÜM hücre içeriği (metin, <a>, <button>) artık gerektiğinde kelime
     ORTASINDAN da kırılabiliyor, satır/kart sınırını asla aşmaz. */
  table.data-table td, table.data-table td a, table.data-table td button {
    overflow-wrap: anywhere;
  }
  table.data-table td:last-child { border-bottom: none; }
  table.data-table td[data-label]::before {
    content: attr(data-label); font-weight: 700; color: #888; font-size: 11px;
    text-transform: uppercase; letter-spacing: .02em; text-align: left; flex-shrink: 0;
  }
  table.data-table td[data-label=""]::before, table.data-table td:not([data-label])::before { content: none; }
  table.data-table td.title-cell, table.data-table td.msg-cell { max-width: none; text-align: right; }
}

/* ===================== Sol menü rozeti (🔔 İletişim Merkezi) ===================== */
.nav-btn { position: relative; }
.nav-badge {
  display: inline-block; margin-left: 6px; background: var(--color-primary); color: #fff;
  border-radius: 999px; font-size: 10px; padding: 1px 7px; font-weight: 700; vertical-align: middle;
}

/* ===================== Gece Kontrolü kartı (2026-08-16) =====================
   Her iki backend'in gece 03:30 sağlık/güvenlik turunun sonucu — mevcut
   .health-card'ın İÇİNDEKİ (aynı .health-col yapısı) kartla TUTARLI
   görünüm için health-card sınıfını yeniden kullanıyor (bkz. haberler.js:
   loadNightCheck — iç div'e box-shadow/border/padding sıfırlanarak
   iç-içe kart görünümü önleniyor), ama kendi dış çerçevesi (bu kart) var
   ki "başarısız/eski" durumunda TEK BAŞINA göze çarpsın. */
.night-check-card {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow-card);
}
.night-check-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.night-check-steps { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--color-text-muted); }
.night-check-steps li { margin-bottom: 3px; overflow-wrap: anywhere; }

/* ===================== Push Durumu aracı (Madde 3, 2026-08-14) =====================
   Sistem Sağlığı kartının hemen yanında/altında — küçük, kendi başına bir
   arama widget'ı, health-card'ın kendi dinamik yeniden-çizim akışına
   (loadSystemHealth) hiç dokunmuyor (bilinçli tercih — health-card zaten
   karmaşık, buraya üçüncü bir sütun eklemek yerine ayrı, basit bir kart). */
.push-status-card {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow-card);
}
.push-status-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.push-status-form { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.push-status-form input { max-width: 220px; }

/* ===================== Sistem Sağlığı kartı ===================== */
.health-card {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 18px; position: relative; box-shadow: var(--shadow-card);
}
.health-col { flex: 1; min-width: 200px; }
.health-col-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.health-row { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 4px; }
.health-row.error { color: var(--color-primary); font-weight: 600; }
.health-refresh { position: absolute; top: 10px; right: 10px; padding: 6px 10px; min-height: 0; }
/* Karar (2026-08-11 — madde 4/5, öz-izleme+yedekleme): kanarya testi/
   hacim anomalisi/log özeti satırları + "Şimdi Yedek Al" küçük butonu. */
.health-detail-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.health-detail-toggle {
  border: none; background: none; color: var(--color-text-muted); text-decoration: underline;
  font-size: 11.5px; cursor: pointer; padding: 0;
}
.health-detail-toggle:hover { color: var(--color-text); }
.health-detail-body {
  margin: 2px 0 8px; padding: 8px 10px; background: var(--color-neutral-tint);
  border-radius: 6px; font-size: 12px; color: var(--color-text); overflow-wrap: anywhere;
}
.health-mini-btn { padding: 6px 12px; font-size: 12px; min-height: 0; margin-top: 6px; }

/* ===================== 📊 İstatistikler sekmesi (2026-08-19 tasarım, 2026-08-20 gerçek veriye bağlandı) =====================
   haberler.js: loadStats() artık GET /api/editor/stats/daily-opens ve
   GET /api/editor/stats/hourly-active'ten gerçek veri çekiyor (bkz. o
   dosyadaki karar notu). Renk paleti BİLEREK yeni hex eklemedi: dataviz iskeletinin
   "Emphasis form"u (tek vurgu rengi + geri kalanı gri) mevcut proje
   tokenlarıyla kuruldu — var(--color-primary) (vurgu) ve
   var(--color-text-muted) (de-emphasis gri), ikisi de #page-haberler'in
   koyu tema override bloğunda zaten tanımlı, bu yüzden aşağıda AYRI bir
   dark-mode override BLOĞU yok — tokenlar zaten doğru temada geliyor.
   node scripts/validate_palette.js ile doğrulandı: "Contrast vs surface"
   kontrolü light (#FFFFFF üstünde) ve dark (#1C1C1F üstünde) her ikisinde
   de PASS (≥3:1); Lightness-band/Chroma-floor FAIL'leri beklenen/geçersiz
   (bkz. aracın kendi notu: bu kontroller yalnızca çok-renkli kategorik
   paletler için, tek vurgu+gri ikilisi için METİN KONTRASTI esas alınır). */
.stats-filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.stats-date-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.stats-preset-btn {
  border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text-muted);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-weight: 600;
}
.stats-preset-btn:hover { background: var(--color-neutral-tint); }
.stats-preset-btn.active { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.stats-custom-range {
  display: flex; align-items: center; gap: 8px; padding-left: 12px; margin-left: 4px;
  border-left: 1px solid var(--color-border); flex-wrap: wrap;
}
.stats-date-input {
  border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text);
  border-radius: 6px; padding: 6px 8px; font-size: 12.5px;
}
.stats-range-sep { color: var(--color-text-muted); }

.stats-kpi-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.stat-tile {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px;
  padding: 14px 18px; box-shadow: var(--shadow-card); min-width: 190px; flex: 1;
}
.stat-tile-label { font-size: 11.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; }
.stat-tile-value { font-size: 26px; font-weight: 700; color: var(--color-text); }

.stats-chart-card {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow-card);
}
.stats-chart-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.stats-chart-title { font-size: 13.5px; font-weight: 700; margin: 0; }
.stats-chart-subtitle { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }
.stats-table-toggle {
  border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text-muted);
  border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-weight: 600;
}
.stats-table-toggle:hover { background: var(--color-neutral-tint); }
.stats-table-toggle.active { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* Bar grafik — dataviz iskeleti mark spec'i: bar ≤24px, 4px yuvarlak uç,
   barlar arası 2px yüzey rengi boşluk, hairline taban çizgisi. */
.stats-bar-chart {
  display: flex; align-items: flex-end; gap: 2px; height: 170px; padding-top: 30px;
  border-bottom: 1px solid var(--color-border); position: relative;
}
.stats-bar-col {
  flex: 1; min-width: 4px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; position: relative; cursor: pointer; outline: none;
}
.stats-bar-fill {
  width: 100%; max-width: 24px; background: var(--color-text-muted); opacity: .45;
  border-radius: 4px 4px 0 0; transition: opacity .12s;
}
.stats-bar-fill.accent { background: var(--color-primary); opacity: 1; }
.stats-bar-col:hover .stats-bar-fill, .stats-bar-col:focus .stats-bar-fill,
.stats-bar-col:focus-visible .stats-bar-fill { opacity: .75; }
.stats-bar-col:hover .stats-bar-fill.accent, .stats-bar-col:focus .stats-bar-fill.accent { opacity: .85; }
.stats-bar-axis-label {
  font-size: 10px; color: var(--color-text-muted); margin-top: 6px; white-space: nowrap;
}
.stats-bar-direct-label {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 22px;
  font-size: 11px; font-weight: 700; color: var(--color-text); white-space: nowrap;
}
.stats-bar-tooltip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px;
  background: var(--color-text); color: var(--color-card); font-size: 11px; padding: 5px 9px;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 5;
}
.stats-bar-col:hover .stats-bar-tooltip, .stats-bar-col:focus .stats-bar-tooltip,
.stats-bar-col:focus-visible .stats-bar-tooltip { opacity: 1; }
/* Vurgulanan barlarda değer zaten kalıcı doğrudan etikette görünüyor —
   hover tooltip'i orada göstermek üst üste binip okunmaz hâle gelirdi
   (bkz. marks-and-anatomy.md: "label selectively"), o yüzden yalnızca
   etiketsiz (muted) barlarda tooltip devrede. */
.stats-bar-col:has(.stats-bar-direct-label) .stats-bar-tooltip { display: none; }
.stats-bar-chart-hourly .stats-bar-col { min-width: 8px; }
.stats-table-view { margin-top: 4px; }

/* ===================== "Arıza lambası" — Duyum kullanıcı bildirimi notu
   Kasıtlı olarak mor (Kümeyi Ayır'la aynı aile): marka kırmızısından/
   danger'dan ayrı tutulmalı çünkü bu bir "hata" değil, "editörün göz
   atması gereken bir not" — kırmızı olsaydı gerçek hata/danger uyarılarıyla
   karışırdı. ===================== */
.report-note { margin: 4px 0 10px; }
.report-note-toggle {
  border: 1px solid #d9c2f0; background: #f6effd; color: #6b3fa0; border-radius: 6px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.report-note-toggle:hover { background: #eeddfa; }
.report-note-body {
  margin-top: 8px; padding: 10px 12px; background: #f6effd; border: 1px solid #d9c2f0;
  border-radius: 8px; font-size: 13px;
}
.report-note-item { padding: 4px 0; border-top: 1px solid #e8d9f5; overflow-wrap: anywhere; }
.report-note-item:first-child { border-top: none; }
.report-note-hint { margin-top: 8px; font-size: 11.5px; color: #8a6bb0; }

/* ===================== İletişim Merkezi ===================== */
.contact-row {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-card);
}
.contact-row.resolved { background: #f8f9fb; }
.resolution-box {
  margin: 10px 0; padding: 10px 12px; background: var(--color-success-tint); border: 1px solid #cdebd8;
  border-radius: 8px; font-size: 13px; overflow-wrap: anywhere;
}
.resolution-label { font-size: 11.5px; font-weight: 700; color: var(--color-success-dark); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; }
.resolve-form {
  margin-top: 12px; padding: 12px 14px; background: #f8f9fb; border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* ===========================================================================
   Haberler: TAMAMEN SİYAH tema (2026-08-14 yeniden tasarım)
   Duyum mobil uygulamasının KENDİ karanlık temasından (gsp-medya/mobile/
   src/theme/colors.ts: darkColors) ödünç alınan token'lar — SADECE arka
   plan istek gereği ("TAMAMEN SİYAH, göz yormasın") mobildeki #0A0A0B
   yerine saf #000000, geri kalan her şey (kart/border/metin/vurgu)
   mobille birebir aynı.

   Kapsam: CSS custom property'ler İÇ İÇE (cascading) olduğu için, bu
   token'lar yalnızca #page-haberler İÇİNDE override edilir — style.css'in
   geri kalanındaki .cluster-card, .btn-xxx, .status-pill, .field-group gibi
   TÜM var(--color-xxx) kullanan kurallar bu sayede OTOMATİK olarak koyu
   değerleri alır, tek tek yeniden yazmaya gerek kalmadı. #search-result
   (Kod ile Ara sonucu) index.html'de #page-haberler'in KARDEŞİ (dışında)
   olduğu için bu temadan ETKİLENMEZ — kasıtlı: arama her sekmeden
   erişilebilir, nötr/açık temalı bir araç olarak kalmalı.

   Negatif margin + eşit padding hilesi: .content'in kendi padding'ini
   (20px 24px masaüstü / 14px 12px ≤768px) iptal edip siyah alanı kenarlara
   kadar götürür — geri kalan sayfalarda (Kullanıcılar/Duyurular/…) .content
   padding'i DOKUNULMADAN kalır. */
#page-haberler {
  background: #000000;
  color: #F2F2F0;
  margin: -20px -24px;
  padding: 20px 24px;
  min-height: calc(100vh - 53px);

  --color-bg: #000000;
  --color-card: #1C1C1F;
  --color-card-border: #38383D;
  --color-border: #2A2A2E;
  --color-text: #F2F2F0;
  --color-text-muted: #9CA3AF;
  --color-placeholder: #2A2A2E;
  --color-neutral-tint: #2A2A2E;
  --shadow-card: 0 2px 10px rgba(0,0,0,.55);
  --shadow-card-hover: 0 4px 18px rgba(0,0,0,.7);
}
@media (max-width: 768px) {
  #page-haberler { margin: -14px -12px; padding: 14px 12px; }
}

/* --- Token'a bağlı OLMAYAN (hardcoded) renkler: yukarıdaki token override'ı
   bunları otomatik düzeltmez, tek tek elden geçirilmesi gerekiyor. --- */
#page-haberler .cluster-card.suspicious { background: #241f0a; border-color: var(--color-warning); }
#page-haberler .cluster-card.reported { background: #271414; }
#page-haberler .split-box { background: #1c1730; border: 1px dashed #4a3a7a; }
#page-haberler .split-title { color: #b79cf0; }
#page-haberler .split-hint { color: #9a94ad; }
#page-haberler .suggest-intro { color: #b79cf0; }
#page-haberler .suggest-candidate-card { background: #1c1730; border-color: #4a3a7a; }
#page-haberler .suggest-candidate-summary { color: var(--color-text-muted); }
#page-haberler .suggest-candidate-meta { color: #9a94ad; }
#page-haberler .article-row { border-top-color: var(--color-border); }
#page-haberler .article-title { color: var(--color-text); }
/* .badge-spam ışık temasında var(--color-text) (neredeyse siyah) arka plan +
   beyaz metindi — bu kapsamda var(--color-text) AÇIK renge dönüyor, bu da
   badge'i siyah sayfada görünmez kılardı. Kasıtlı olarak ters çevrildi: açık
   arka plan + koyu metin, siyah üstünde net bir "damga" gibi durur. */
#page-haberler .badge-spam { background: #F2F2F0; color: #0F0F10; }
#page-haberler .status-archived { background: #2a2a2e; color: #9CA3AF; }
#page-haberler .status-reviewing { background: #2a2a2e; color: #c8c8ce; }
#page-haberler .muted { color: #8a8a90; }
#page-haberler table.data-table th, #page-haberler table.data-table td { border-bottom-color: var(--color-border); }
#page-haberler table.data-table a { color: var(--color-text); }
#page-haberler .ack-yes { color: #8a8a90; }
#page-haberler .pagination button { border-color: var(--color-border); background: var(--color-card); color: var(--color-text); }
#page-haberler .pagination button:hover:not(:disabled) { background: var(--color-neutral-tint); }
#page-haberler .btn-secondary { border-color: var(--color-border); background: var(--color-card); color: var(--color-text); }
#page-haberler .btn-secondary:hover:not(:disabled) { background: var(--color-neutral-tint); }
#page-haberler .count-pill { color: var(--color-text); }
#page-haberler .count-pill:hover { background: var(--color-neutral-tint); }
#page-haberler .count-badge { color: var(--color-text); }
#page-haberler .subtab-btn { border-color: var(--color-border); background: var(--color-card); color: var(--color-text-muted); }
#page-haberler .subtab-btn:hover:not(.active) { background: var(--color-neutral-tint); }
#page-haberler select, #page-haberler button.btn-refresh { border-color: var(--color-border); background: var(--color-card); color: var(--color-text); }
#page-haberler .field-group label { color: var(--color-text-muted); }
#page-haberler .checkbox-row { color: var(--color-text); }
#page-haberler .field-group input, #page-haberler .field-group textarea, #page-haberler .field-group select {
  border-color: var(--color-border); background: var(--color-neutral-tint); color: var(--color-text);
}
#page-haberler .toolbar-search-input { border-color: var(--color-border); background: var(--color-neutral-tint); color: var(--color-text); }
#page-haberler .timeline-list li { border-top-color: var(--color-border); }
#page-haberler .comment-content { color: var(--color-text); }
#page-haberler .report-note-toggle { background: #241a30; border-color: #4a3a6a; color: #c9aaf5; }
#page-haberler .report-note-toggle:hover { background: #2e2140; }
#page-haberler .report-note-body { background: #241a30; border-color: #4a3a6a; }
#page-haberler .report-note-item { border-top-color: #3a2a52; }
#page-haberler .report-note-hint { color: #a68fc9; }
/* U-kodu artık (Yorumlar bölümünde) TIKLANABİLİR bir düğme — ışık
   temasındaki nötr siyah/beyaz rozetten farklı olarak kırmızı vurgu rengi
   kullanıyor, "bu tıklanabilir bir bağlantı" izlenimi versin diye. */
#page-haberler .badge-user-code { background: var(--color-primary); color: #fff; border: none; cursor: pointer; }
#page-haberler .badge-user-code:hover { background: var(--color-primary-dark); }

/* --- Izgara: Yayında/Şüpheli/Arşivlenenler'in ÜÇÜ de AYNI grid container
   sınıfını kullanıyor (haberler.js: class="news-grid") — .cluster-card
   (Şüpheli) ve .news-card (Yayında/Arşivlenenler) farklı iç yapıya sahip
   olsa da aynı ızgarada yan yana dizilebiliyorlar. */
#page-haberler .news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

/* --- Haber kartı (Yayında / Arşivlenenler) --- */
.news-card {
  background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.news-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.news-card-media { width: 100%; aspect-ratio: 16 / 9; background: var(--color-placeholder); position: relative; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-media.no-image::after, .news-card-media:empty::after {
  content: '🗞'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; opacity: .25;
}
.news-card-body { padding: 12px 14px 4px; flex: 1; }
.news-card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.news-card-top .ref-code { position: static; opacity: .6; }
.news-card .cluster-title { font-size: 15px; padding-right: 0; margin-bottom: 6px; }
.news-card .cluster-meta { margin-bottom: 0; }
.news-card-quick-actions { padding: 10px 14px 14px; margin-top: 8px; }
.news-card-quick-actions button { width: 100%; }

/* --- Haber detay overlay --- */
.news-detail-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.news-detail-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); }
.news-detail-panel {
  position: relative; z-index: 1; background: var(--color-card); border: 1px solid var(--color-card-border);
  border-radius: 14px; max-width: 720px; width: 100%; padding: 28px 26px; box-shadow: var(--shadow-card-hover);
}
.news-detail-close {
  position: absolute; top: 14px; right: 14px; border: 1px solid var(--color-border); background: transparent;
  color: var(--color-text); border-radius: 6px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
.news-detail-close:hover { background: var(--color-neutral-tint); }
.news-detail-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding-right: 90px; }
.news-detail-header .ref-code { position: static; opacity: .6; }
.news-detail-section-title { font-family: var(--font-heading); font-size: 14px; margin: 24px 0 10px; }
.source-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--color-border); font-size: 13px; }
.source-row:first-of-type { border-top: none; }
.source-row a { color: var(--color-text); overflow-wrap: anywhere; }

/* --- Kategori seçici (çoklu seçim, pill/chip görünümü) --- */
.category-chip-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.category-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--color-text-muted); user-select: none;
}
.category-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.category-chip.active { border-color: var(--color-primary); color: var(--color-primary); background: rgba(214,40,40,.14); }

/* --- Yorum satırı (haber detayında, U-kodu tıklanabilir) --- */
.comment-row-dark { background: var(--color-neutral-tint); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.comment-row-dark.removed { opacity: .65; border-color: var(--color-primary); }
.comment-row-dark .comment-meta { margin-bottom: 6px; }

/* ===========================================================================
   Kişi Sayfası (2026-08-14) — js/userProfile.js. `document.body`'ye enjekte
   edildiği için (news-detail-overlay #page-haberler İÇİNDE yaşarken, bu
   HER İKİ sekmede/temada da açılabilmeli) bilinçli olarak #page-haberler
   kapsamına GİRMİYOR — #search-result'la AYNI mantık: her zaman AÇIK/nötr
   tema kullanır, o an hangi sayfanın (koyu Haberler mi, açık Kullanıcılar
   mı) üzerinde açıldığından etkilenmez. z-index news-detail-overlay'den
   (300) yüksek (350) — bir haber detayının İÇİNDEN (yorum yazarına
   tıklanınca) açılırsa ikisinin ÜSTÜNDE dursun diye.
   =========================================================================== */
.user-profile-overlay { position: fixed; inset: 0; z-index: 350; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.user-profile-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); }
.user-profile-panel {
  position: relative; z-index: 1; background: var(--color-card); border: 1px solid var(--color-card-border);
  border-radius: 14px; max-width: 760px; width: 100%; padding: 28px 26px; box-shadow: var(--shadow-card-hover);
}
.user-profile-close {
  position: absolute; top: 14px; right: 14px; border: 1px solid var(--color-border); background: transparent;
  color: var(--color-text); border-radius: 6px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
.user-profile-close:hover { background: var(--color-neutral-tint); }
.user-profile-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; padding-right: 90px; }
.user-profile-header .ref-code { position: static; opacity: .6; }
.user-profile-name { font-family: var(--font-heading); font-size: 19px; margin: 0; }

/* Panelin her yerinde tıklanabilir U-kodu/isim için TEK, paylaşılan sınıf
   (bkz. userProfile.js: userTriggerHtml). Ağır bir buton yerine bilinçli
   olarak İNCE bir "bu bir bağlantı" ipucu — yoğun listelerde (Kullanıcılar
   tablosu, Yorum Moderasyonu) her satırda büyük bir pil/buton görsel
   gürültü yaratırdı. */
.user-name-link {
  border: none; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--color-text); text-decoration: none; border-bottom: 1px dotted var(--color-text-muted);
}
.user-name-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }