/* =====================================================================
   enhancements.css — 2026-06 Tasarım İyileştirmeleri
   ---------------------------------------------------------------------
   Bu dosya en SON yüklenir (dark.css'ten sonra). Tüm kurallar EKLEMELİDİR;
   mevcut style.css/dark.css kurallarını silmez, yalnızca üstüne ince cila
   ve erişilebilirlik/okunabilirlik iyileştirmeleri ekler.
   Standart breakpoint ölçeği (referans): 480 / 768 / 1024 / 1280
   ===================================================================== */

/* ============ 1) GENİŞLETİLMİŞ TASARIM TOKEN'LARI ============ */
:root{
  --surface:var(--card);
  --surface-2:#f8fafc; --surface-3:#f1f5f9; --surface-muted:#f9fafb;
  --border-soft:#eef2f7; --border-strong:#cbd5e1;
  --text-strong:#0f172a; --text-soft:#475569;
  --success-bg:#dcfce7; --success-text:#166534;
  --danger-bg:#fee2e2;  --danger-text:#b91c1c;
  --warning-bg:#fef3c7; --warning-text:#92400e;
  --info-bg:#dbeafe;    --info-text:#1d4ed8;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 18px 48px rgba(15,23,42,.14);
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  --lh-tight:1.3; --lh:1.6; --lh-relaxed:1.9;
  --transition:.18s ease;
}
html.dark, body.dark{
  --surface-2:#0f172a; --surface-3:#16213a; --surface-muted:#111a2e;
  --border-soft:#1e293b; --border-strong:#334155;
  --text-strong:#f1f5f9; --text-soft:#cbd5e1;
  --success-bg:#0f2e1d; --success-text:#86efac;
  --danger-bg:#3f121b;  --danger-text:#fecdd3;
  --warning-bg:#3b2a10; --warning-text:#fde68a;
  --info-bg:#11233f;    --info-text:#bfdbfe;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
}

/* ============ 2) ERİŞİLEBİLİRLİK (a11y) ============ */
/* İçeriğe atla bağlantısı — yalnızca klavye ile odaklanınca görünür */
.skip-to-content{
  position:fixed; top:-60px; left:12px; z-index:99999;
  background:var(--primary); color:#fff; padding:10px 16px;
  border-radius:0 0 var(--radius) var(--radius); font-weight:700; font-size:14px;
  text-decoration:none; box-shadow:var(--shadow-lg); transition:top var(--transition);
}
.skip-to-content:focus{ top:0; color:#fff; outline:2px solid #fff; outline-offset:-4px; }

/* Klavye odak halkası — yalnızca klavye (focus-visible) ile görünür, fareyle değil */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
summary:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}
html.dark a:focus-visible, html.dark button:focus-visible, html.dark input:focus-visible,
html.dark select:focus-visible, html.dark textarea:focus-visible,
body.dark a:focus-visible, body.dark button:focus-visible, body.dark input:focus-visible{
  outline-color:var(--primary);
}

/* ============ 3) ÖNYÜZ MİKRO-ETKİLEŞİM CİLASI ============ */
.btn{ transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition); }
.btn:active{ transform:translateY(1px); }

/* Entry / kart hover yükselmesi (mevcut gölgeyi ezmeden ince katman) */
.feed-entry-card{ transition:box-shadow var(--transition), transform var(--transition); }
.feed-entry-card:hover{ box-shadow:var(--shadow); }

/* Oy / favori / etkileşim butonlarına hafif geri bildirim */
.entry-action, .feed-entry-actions button, .vote-btn, .fav-btn, .entry-action-btn{
  transition:transform var(--transition), color var(--transition), background var(--transition);
}
.entry-action:active, .feed-entry-actions button:active,
.vote-btn:active, .fav-btn:active, .entry-action-btn:active{ transform:scale(.92); }

/* --- Kullanıcının KENDİ oyu/favorisi: açık mod aktif göstergesi ---
   Daha önce yalnızca dark.css'te aktif stil vardı; açık modda (varsayılan)
   kullanıcı kendi beğeni/beğenmeme/favorisini göremiyordu. İkon halkası +
   renkli sayı çipi ile net belirti verilir. (Dark mod dark.css'te zaten var.) */
html:not(.dark) .entry-reaction-pill.liked .entry-reaction-icon{ box-shadow:0 0 0 2px #16a34a, 0 4px 12px rgba(22,163,74,.22); }
html:not(.dark) .entry-reaction-pill.liked .entry-reaction-count{ color:#15803d; border-color:#86efac; background:#f0fdf4; font-weight:800; }
html:not(.dark) .entry-reaction-pill.disliked .entry-reaction-icon{ box-shadow:0 0 0 2px #dc2626, 0 4px 12px rgba(220,38,38,.22); }
html:not(.dark) .entry-reaction-pill.disliked .entry-reaction-count{ color:#b91c1c; border-color:#fca5a5; background:#fef2f2; font-weight:800; }
html:not(.dark) .entry-reaction-pill.favorited .entry-reaction-icon{ box-shadow:0 0 0 2px #e11d48, 0 4px 12px rgba(225,29,72,.22); }
html:not(.dark) .entry-reaction-pill.favorited .entry-reaction-count{ color:#be123c; border-color:#fda4af; background:#fff1f2; font-weight:800; }
/* Aktif pilde kucuk bir "onay" rozeti - tum modlarda net isaret */
.entry-reaction-pill.liked .entry-reaction-icon,
.entry-reaction-pill.disliked .entry-reaction-icon,
.entry-reaction-pill.favorited .entry-reaction-icon{ position:relative; }
.entry-reaction-pill.liked .entry-reaction-icon::after,
.entry-reaction-pill.favorited .entry-reaction-icon::after{
  content:"✓"; position:absolute; right:-2px; bottom:-2px;
  width:16px; height:16px; border-radius:50%;
  background:#16a34a; color:#fff; font-size:10px; font-weight:900;
  display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.entry-reaction-pill.favorited .entry-reaction-icon::after{ content:"★"; background:#e11d48; }
.entry-reaction-pill.disliked .entry-reaction-icon::after{
  content:"✓"; position:absolute; right:-2px; bottom:-2px;
  width:16px; height:16px; border-radius:50%;
  background:#dc2626; color:#fff; font-size:10px; font-weight:900;
  display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* Spoiler açılış geçişi yumuşatma (renkler dark.css'te düzeltildi) */
.spoiler-content, .inline-spoiler-content{ transition:filter .25s ease, opacity .25s ease; }
.spoiler-box.spoiler-open .spoiler-content{ animation:spoilerReveal .3s ease; }
@keyframes spoilerReveal{ from{opacity:.35} to{opacity:1} }

/* ============ 4) OKUNABİLİRLİK / TİPOGRAFİ ============ */
/* Uzun entry gövdelerinde satır uzunluğunu sınırlayıp okumayı kolaylaştır */
.feed-entry-content, .entry-content-text, .entry-text{
  max-width:74ch;
}
/* Çok geniş ekranlarda dahi rahat okuma */
@media(min-width:1280px){
  .feed-entry-content, .entry-content-text, .entry-text{ max-width:78ch; }
}

/* ============ 5) ADMIN PANELİ İNCE CİLA (body.admin-body) ============ */
/* Stat kartlarına hover yükselmesi ve odak halkası */
body.admin-body a.admin-stat-card{ transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
body.admin-body a.admin-stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); }

/* Tablolarda yapışkan başlık + zebra + satır hover (büyük admin listeleri için) */
body.admin-body .table-wrap table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-2);
  box-shadow:inset 0 -1px 0 var(--border);
}
body.admin-body .table-wrap tbody tr{ transition:background var(--transition); }
body.admin-body .table-wrap tbody tr:nth-child(even) > td{ background:color-mix(in srgb, var(--surface-2) 55%, transparent); }
body.admin-body .table-wrap tbody tr:hover > td{ background:var(--primary-light); }

/* "Kayıt yok" boş durum satırlarını ortala ve yumuşat */
body.admin-body .table-wrap td[colspan]{
  text-align:center; color:var(--muted); padding:26px 12px; font-style:italic;
}

/* Tehlikeli işlem bölgesi yardımcı sınıfı (kullanılabilir; mevcut görünümü bozmaz) */
.danger-zone{
  border:1px solid var(--danger);
  background:var(--danger-bg);
  border-radius:var(--radius);
  padding:16px;
}
.danger-zone h2, .danger-zone h3{ color:var(--danger-text); }

/* Yoğunluk: admin tablolarında satır içi boşlukları biraz sıkılaştır (okunaklılığı korur) */
@media(min-width:1025px){
  body.admin-body.density-compact .table-wrap table td,
  body.admin-body.density-compact .table-wrap table th{ padding-top:7px; padding-bottom:7px; }
}

/* color-mix desteklemeyen eski tarayıcılar için zebra fallback */
@supports not (background:color-mix(in srgb, red, blue)){
  body.admin-body .table-wrap tbody tr:nth-child(even) > td{ background:var(--surface-2); }
}

/* ============ 6b) SAYFA İÇERİK MODALI (sözleşme/kurallar pop-up) ============ */
.page-modal-overlay{
  position:fixed; inset:0; z-index:99998;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,23,42,.55); backdrop-filter:blur(3px);
}
.page-modal-overlay[hidden]{ display:none; }
.page-modal{
  background:var(--card,#fff); color:var(--text,#111827);
  width:min(720px,100%); max-height:86vh; display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--radius-lg,16px);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.page-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px; border-bottom:1px solid var(--border); flex:0 0 auto;
}
.page-modal-head h2{ margin:0; font-size:18px; }
.page-modal-close{
  border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer;
  color:var(--muted); width:36px; height:36px; border-radius:50%; flex:0 0 auto;
}
.page-modal-close:hover{ background:var(--surface-2); color:var(--text); }
.page-modal-body{ padding:18px 20px; overflow:auto; -webkit-overflow-scrolling:touch; }
.page-modal-body .legal-hero{ padding:0 0 6px; margin:0 0 10px; border:0; background:none; box-shadow:none; }
.page-modal-body .legal-section-list{ margin:0; }
.page-modal-loading, .page-modal-error{ color:var(--muted); text-align:center; padding:26px 12px; }
body.page-modal-open{ overflow:hidden; }
/* Modal içindeki temiz sözleşme/kural metni */
.legal-modal-content{ font-size:14px; line-height:1.65; color:var(--text); }
.legal-modal-lead{ margin:0 0 14px; color:var(--text-soft,#475569); font-size:14px; }
.legal-modal-section{ margin:0 0 16px; }
.legal-modal-section h3{ margin:0 0 7px; font-size:15px; font-weight:800; color:var(--text-strong,#0f172a); }
.legal-modal-section ul{ margin:0; padding-left:18px; }
.legal-modal-section li{ margin:0 0 5px; }
.legal-modal-section p{ margin:0; }
.legal-modal-updated{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }

/* Kayıt: sözleşme/kurallar onay kutusu */
.auth-terms-check{ align-items:flex-start; gap:9px; font-size:13px; line-height:1.5; }
.auth-terms-check input[type="checkbox"]{ margin-top:2px; flex:0 0 auto; }
.auth-terms-check a{ color:var(--primary); font-weight:700; text-decoration:underline; cursor:pointer; }

/* ============ 6c) KAYIT SAYFASI (modern split layout) ============ */
.auth-page-register{ max-width:900px; }
.auth-shell{
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow-lg);
}
.auth-shell .auth-card{ border:0; box-shadow:none; border-radius:0; margin:0; max-width:none; padding:30px 32px; }
.auth-brand{ background:linear-gradient(150deg,#7c3aed,#db2777); color:#fff; padding:34px 30px; display:flex; align-items:center; }
.auth-brand .auth-brand-inner{ width:100%; }
.auth-brand .auth-logo{ color:#fff; justify-content:flex-start; margin-bottom:16px; }
.auth-brand .auth-logo .logo-dot{ background:#fff; }
.auth-brand-title{ font-size:24px; line-height:1.2; margin:0 0 10px; font-weight:900; color:#fff; }
.auth-brand-lead{ color:#f6e9ff !important; text-align:left !important; font-size:14px; line-height:1.55; margin:0 0 22px !important; }
.auth-feature-list{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.auth-feature-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:600; color:#fdf4ff; line-height:1.45; }
.auth-feature-ic{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:14px; }
.auth-card-head{ margin-bottom:18px; }
.auth-card-head h1{ margin:0 0 4px; }
.auth-card-sub{ text-align:left !important; margin:0 !important; color:var(--muted); font-size:13px; }
.auth-card .auth-field{ margin-bottom:6px; }
.field-hint{ display:block; color:var(--muted); font-size:11.5px; margin:-2px 0 12px; }
.field-error{ display:block; color:var(--danger); font-size:12px; font-weight:700; margin:-4px 0 10px; }
.field-status{ display:block; font-size:12px; font-weight:700; margin:-8px 0 12px; min-height:14px; }
.field-status.checking{ color:var(--muted); }
.field-status.ok{ color:var(--success); }
.field-status.bad{ color:var(--danger); }
.auth-field.has-error input{ border-color:var(--danger) !important; box-shadow:0 0 0 2px rgba(220,38,38,.12); }
.auth-input-wrap{ position:relative; display:block; }
.auth-input-wrap input{ width:100%; padding-right:76px; }
.pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--primary); font-size:12px; font-weight:800; cursor:pointer; padding:6px 9px; border-radius:8px; line-height:1; }
.pw-toggle:hover{ background:var(--surface-2); }
.pw-strength{ display:flex; align-items:center; gap:10px; margin:-4px 0 12px; }
.pw-strength-bar{ flex:1 1 auto; height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.pw-strength-bar i{ display:block; height:100%; width:0; border-radius:999px; transition:width .2s ease, background .2s ease; }
.pw-strength-text{ flex:0 0 auto; font-size:12px; font-weight:800; min-width:64px; text-align:right; }
.pw-match{ font-size:12px; font-weight:700; margin:-4px 0 12px; }
.pw-match.ok{ color:var(--success); }
.pw-match.bad{ color:var(--danger); }
.auth-terms-check.has-error{ outline:1px dashed var(--danger); outline-offset:4px; border-radius:8px; }
.auth-submit{ margin-top:8px; }
.auth-verify-note{ text-align:center; margin-top:10px; }
@media(max-width:768px){
  .auth-page-register{ max-width:460px; }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .auth-shell .auth-card{ padding:24px 20px; }
}

/* ============ 6d) DAR/TABLET ARAMA ÖNERİ KUTUSU TAŞMASI ============ */
/* ≤900px'de öneri kutusu daralıp başlıkları satıra bölüyor ve yatay kaydırma
   oluşturuyordu. Tek satır + ellipsis + makul min-width ile düzeltilir. */
@media(max-width:900px){
  .search-suggest{ overflow-x:hidden !important; }
  .header-search-advanced .search-suggest,
  #searchSuggest{ min-width:280px; max-width:calc(100vw - 24px); }
  .suggest-item{ overflow:hidden; min-width:0; }
  .suggest-item b,
  .suggest-item small{
    display:block; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}

/* ============ 6e) HEADER ARAMA: AKTİFKEN GÜVENİLİR GENİŞLEME (OVERLAY) ============
   Girişli/dolu header'da flex, arama kutusunun genişlemesine yer bırakmıyordu;
   kullanıcı yazdığını göremiyordu. Aktifken kutuyu kendi konumundan sağa doğru
   açılan bir OVERLAY yapıyoruz: diğer header öğelerinin üstüne biner (onları
   itmez/silmez), kapanınca tekrar pill'e döner. (--hsa-left JS ile ayarlanır.) */
@media(min-width:769px){
  body:not(.admin-body) .header-main{ position:relative; }
  body:not(.admin-body) .header-search-advanced.is-expanded,
  body:not(.admin-body) .header-search-advanced:focus-within,
  body:not(.admin-body) .header-search-advanced.has-search-value{
    position:absolute !important;
    left:var(--hsa-left, 180px) !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:min(520px, calc(100% - var(--hsa-left, 180px) - 12px)) !important;
    max-width:none !important;
    flex-basis:auto !important;
    z-index:13000 !important;
  }
}

/* ============ 6f) SEO: tek H1 — mobil akış başlığı artık <p> ============
   Çoklu H1 sinyalini önlemek için header'daki mobil-akış "Gündem" başlıkları
   h1'den p'ye çevrildi; eski .mobile-flow-head h1 stilini koru. */
.mobile-flow-head .mobile-flow-title{
  font-size:18px; margin:0; color:var(--text); font-weight:900; line-height:1.2;
}

/* ============ 6g) GEO: görünür Özet bloğu ============ */
.topic-summary{ margin:0 0 6px; }
.topic-summary .topic-summary-label{ font-weight:800; color:var(--text); }

/* ============ 6) HAREKET AZALTMA TERCİHİ ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}