/* TM paketi — kaynak sirasi korunur. Uretici: scripts/build_assets.py */

/* ===== css/xml-shell.css ===== */
/* =============================================================================
   XML SHELL — Trendmetrik XML kurulum akışı ortak tasarım dili
   -----------------------------------------------------------------------------
   Tek kaynak: 3 XML sayfasını (Kaynak Ekleme, Field Mapping, Kategori
   Eşleştirme) marka mavisi + dashboard diliyle hizalar. Hiçbir jenerik AI
   estetiği yok — tüm renkler theme-variables.css `--tm-*` / `--color-*`
   token'larından gelir; dark mode otomatik (token'lar html.dark-mode altında
   yeniden tanımlanır).

   Kullanım:
     • base.html `{% block head %}` içinde link'lenir (PR-A: additive, hiçbir
       sayfayı değiştirmez).
     • Sayfa kök sarmalına `.xmlsh-scope` eklenir (PR-B/C/D).
     • Mevcut sayfa class'ları (`.fm-hero`, `.progress-steps` vb.) CSS alias ile
       bu kabuğa köprülenir — HTML/JS hook'larına dokunulmaz.

   Kurallar:
     • `!important` minimum (yalnız Bootstrap/eski !important kurallarını
       yenmek gerektiğinde).
     • Yeni token tanımı YOK — yalnız mevcut kanonik token'lar referanslanır.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) SCOPE / CONTAINER
   2026-06-12 (CEO global-padding directive): .xmlsh-scope ARTIK kendi
   container/padding'ini SÜRMÜYOR. Yatay gutter + genişlik tek kaynaktan gelir:
   global shell sözleşmesi `main#mainContent.tmv2-page` (tm-shell-v2.css:184,
   padding 10/76/20/16 → token'lı --tmv2-layout-gutter ailesi) + .tmv2-page-inner
   max-width. Önceden buradaki max-width:1520px + margin-inline:auto +
   padding-inline:18px global gutter ile ÇAKIŞIYOR → tutarsız kenar boşluğu
   (CEO "kenar boşlukları tutarsız" şikâyeti). Bu blok artık YALNIZ token tanımı
   + tipografi; layout global'e bırakılır.
   --------------------------------------------------------------------------- */
.xmlsh-scope {
  --xmlsh-gap: var(--tmv2-section-gap, 16px);
  --xmlsh-radius: 14px;
  --xmlsh-radius-sm: 10px;
  --xmlsh-radius-pill: 999px;

  /* Tipografi — system stack (JetBrains Mono YALNIZ <code>/.xml-preview-box) */
  --xmlsh-font: var(--tmv2-ff-sans, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --xmlsh-font-mono: var(--tmv2-ff-mono, "JetBrains Mono", ui-monospace, Menlo,
    monospace);

  /* Genişlik global shell'in (.tmv2-page-inner) sorumluluğunda; scope yalnız
     tam sütunu doldurur. Yatay padding YOK — global gutter tek kaynak. */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  font-family: var(--xmlsh-font);
  color: var(--tm-text-primary);
}

.xmlsh-scope code,
.xmlsh-scope .xml-preview-box,
.xmlsh-scope .xmlsh-mono {
  font-family: var(--xmlsh-font-mono);
}

/* -----------------------------------------------------------------------------
   2) KART SİSTEMİ
   Tek kart yüzeyi. Mevcut class'lar (.fm-hero, .modern-card, .form-section,
   .form-card ...) alias ile aynı yüzeye köprülenir.
   --------------------------------------------------------------------------- */
.xmlsh-card {
  background: var(--tm-bg-card);
  border: 1px solid var(--tm-border-color);
  border-radius: var(--xmlsh-radius);
  box-shadow: var(--tm-shadow-sm);
}

.xmlsh-card--pad {
  padding: var(--xmlsh-pad);
}

/* -----------------------------------------------------------------------------
   3) BUTON HİYERARŞİSİ
   primary (marka mavisi) · ghost (nötr) · success (yeşil). Gökkuşağı buton seti
   (kategori #28a745/#0d6efd/#ffc107) bu üçlüye indirgenir.
   --------------------------------------------------------------------------- */
.xmlsh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--xmlsh-radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

.xmlsh-btn:focus-visible {
  outline: none;
  box-shadow: var(--tmv2-focus-ring, 0 0 0 3px rgba(var(--color-primary-rgb), 0.35));
}

.xmlsh-btn--primary {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: var(--tm-fg-on-brand);
}
.xmlsh-btn--primary:hover {
  background: var(--tm-primary-hover);
  border-color: var(--tm-primary-hover);
  color: var(--tm-fg-on-brand);
}

.xmlsh-btn--ghost {
  background: var(--tm-bg-card);
  border-color: var(--tm-border-color);
  color: var(--tm-text-primary);
}
.xmlsh-btn--ghost:hover {
  background: var(--tm-bg-hover);
  border-color: var(--tm-border-input);
  color: var(--tm-text-primary);
}

.xmlsh-btn--success {
  background: var(--tm-success);
  border-color: var(--tm-success);
  color: var(--tm-fg-on-brand);
}
.xmlsh-btn--success:hover {
  filter: brightness(0.95);
  color: var(--tm-fg-on-brand);
}

.xmlsh-btn:disabled,
.xmlsh-btn[disabled],
.xmlsh-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   4) PAGE HEADER (partial _xml_page_header.html ile birlikte)
   Nötr kart + sol marka accent şeridi — mor banner'ların yerine.
   --------------------------------------------------------------------------- */
.xmlsh-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--xmlsh-gap);
  flex-wrap: wrap;
  padding: 14px 18px 14px 20px;
  margin: 0 0 var(--xmlsh-gap);
  background: var(--tm-bg-card);
  border: 1px solid var(--tm-border-color);
  border-radius: var(--xmlsh-radius);
  box-shadow: var(--tm-shadow-sm);
  overflow: hidden;
}

/* Sol marka accent şeridi (mavi) — mor gradient banner'ın nötr karşılığı */
.xmlsh-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--tm-primary) 0%, var(--color-secondary, var(--tm-primary)) 100%);
}

.xmlsh-header__mark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--xmlsh-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-fg-on-brand);
  font-size: 1rem;
  background: var(--tm-primary);
}

.xmlsh-header__titles {
  flex: 1 1 240px;
  min-width: 0;
}

.xmlsh-header__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--tm-text-primary);
  letter-spacing: -0.01em;
}

.xmlsh-header__sub {
  font-size: 0.75rem;
  color: var(--tm-text-secondary);
  margin: 0.15rem 0 0;
  line-height: 1.4;
}

.xmlsh-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Geri / nötr pill — dashboard diliyle uyumlu */
.xmlsh-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tm-text-secondary);
  background: var(--tm-bg-secondary);
  border: 1px solid var(--tm-border-color);
  border-radius: var(--xmlsh-radius-pill);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.xmlsh-header__back:hover {
  color: var(--tm-primary);
  border-color: var(--tm-primary);
  background: var(--tm-primary-soft);
}

@media (max-width: 560px) {
  .xmlsh-header {
    padding: 12px 14px 12px 16px;
  }
  .xmlsh-header__actions {
    width: 100%;
    margin-left: 0;
  }
  .xmlsh-header__back span {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   5) HERO ALIAS — field-mapping `.fm-hero` mor gradient'ini nötr karta köprüle
   (PR-C bunu aktive eder; burada additive olarak hazır durur — scope altında.)
   --------------------------------------------------------------------------- */
.xmlsh-scope .fm-hero,
.xmlsh-scope div.fm-hero {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border: 1px solid var(--tm-border-color) !important;
  box-shadow: var(--tm-shadow-sm) !important;
  position: relative;
  overflow: hidden;
}
.xmlsh-scope .fm-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--tm-primary) 0%, var(--color-secondary, var(--tm-primary)) 100%);
}
.xmlsh-scope .fm-hero h1,
.xmlsh-scope .fm-hero .fm-hero-text h1 {
  color: var(--tm-text-primary) !important;
}
.xmlsh-scope .fm-hero p,
.xmlsh-scope .fm-hero .fm-hero-text p {
  color: var(--tm-text-secondary) !important;
  opacity: 1 !important;
}
.xmlsh-scope .fm-hero-stat {
  background: var(--tm-bg-secondary) !important;
  border: 1px solid var(--tm-border-color) !important;
  backdrop-filter: none !important;
}
.xmlsh-scope .fm-hero-stat small {
  color: var(--tm-text-secondary) !important;
}
.xmlsh-scope .fm-hero-stat b {
  color: var(--tm-text-primary) !important;
}

/* -----------------------------------------------------------------------------
   6) BUTON ALIAS — kategori gökkuşağı / field-mapping mavileri → hiyerarşi
   (PR-C/D scope eklendiğinde aktive; additive, scope dışı sayfayı etkilemez.)
   --------------------------------------------------------------------------- */
.xmlsh-scope .btn-primary-custom,
.xmlsh-scope .bg-primary-gradient {
  background: var(--tm-primary) !important;
  background-image: none !important;
  border-color: var(--tm-primary) !important;
  color: var(--tm-fg-on-brand) !important;
  box-shadow: none !important;
}
.xmlsh-scope .btn-primary-custom:hover,
.xmlsh-scope .bg-primary-gradient:hover {
  background: var(--tm-primary-hover) !important;
  border-color: var(--tm-primary-hover) !important;
}

/* -----------------------------------------------------------------------------
   7) DARK MODE — tamamı token'dan; ekstra override gerekmez. Yalnız mor banner
   kaynaklı hardcoded gradient'leri scope altında kesinle.
   --------------------------------------------------------------------------- */
html.dark-mode .xmlsh-scope .fm-hero,
html.dark-mode .xmlsh-scope div.fm-hero {
  background: var(--tm-bg-card) !important;
  background-image: none !important;
  border-color: var(--tm-border-color) !important;
}

/* =============================================================================
   8) LAYOUT FIX — GLOBAL PADDING + İÇ-SCROLL KALDIRMA (2026-06-12)
   CEO bağlayıcı gereksinim:
     (1) İÇ SCROLL YOK  → içerik doğal yükseklikte aksın, container'a otursun.
     (2) GLOBAL PADDING → sayfa-içi .container-fluid/.container kendi 1rem yatay
         padding'ini SÜRMESİN; global shell gutter (tm-shell-v2.css:184) tek
         kaynak.
     (3) HARDCODED YOK  → token'lı değerler (--tmv2-sp-*, --tm-*).
   Bu blok .xmlsh-scope ile 2-class özgüllükte; sayfa-içi inline <style>'ın
   tek-class `!important` kurallarını (xml_field_mapping.html / xml_category_
   mapping.html) kaynak-sırasından bağımsız olarak yener. HTML/JS hook'larına,
   id/class sözleşmelerine DOKUNULMAZ — yalnız layout CSS'i normalize edilir.
   ============================================================================= */

/* -- 8.1 GLOBAL GUTTER DEVRI — sayfa-içi container'lar global gutter'a teslim --
   3 sayfanın kök wrapper'ı altındaki .container-fluid/.container kendi yatay
   padding'ini (xml_field_mapping.html:17-25 padding-left/right:1rem) sıfırlar;
   yatay boşluk artık global shell'den gelir. Dikey ritim section-gap token'ı. */
.xmlsh-scope > .container-fluid,
.xmlsh-scope > .container,
.xmlsh-scope .container-fluid,
.xmlsh-scope .container {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* -- 8.2 İÇ-SCROLL KALDIRMA — field mapping --------------------------------
   xml_field_mapping.html inline <style> 8 konteynerde max-height min(Npx,NNvh)
   + overflow:auto sürüyordu → sayfa kısılıp her panel iç-scroll üretiyordu
   ("her şey scroll ediliyor"). Burada cap kaldırılır, içerik doğal akar.
   İSTİSNA: ham XML metni (.xml-preview-code-scroller / .xml-tree-root) gerçekten
   uzun olabildiği için KONTROLLÜ bir tavanla bırakılır (sayfa geneli scroll'suz
   kalsın diye yalnız bu iki ham-metin kutusu). */
.xmlsh-scope .xml-preview-box,
.xmlsh-scope .xml-preview-tab-pane-inner,
.xmlsh-scope .xml-preview-scroll-body,
.xmlsh-scope #previewFieldsBody.xml-preview-scroll-body,
.xmlsh-scope .xml-fields-table-wrap {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Ham XML metin kutuları: kontrollü tavan (token yok — viewport-relative ölçü
   amaca özel; sayfa-geneli scroll'u önlemek için bilinçli istisna). Yatay taşma
   engellenir, dikey yalnız aşırı uzun ham metinde. */
.xmlsh-scope .xml-preview-code-scroller,
.xmlsh-scope .xml-tree-root {
  max-height: min(480px, 60vh) !important;
  overflow: auto !important;
}

/* Sekme kabuğu sabit yüksekliği bıraktıysa doğal aksın (overflow:hidden iç
   içeriği kırpıyordu). */
.xmlsh-scope .xml-preview-tab-shell {
  overflow: visible !important;
}

/* -- 8.3 İÇ-SCROLL KALDIRMA — kategori eşleştirme --------------------------
   #categoryTableWrapper inline style="overflow-y:auto" + max-height min(58vh,
   560px) → tablo iç-scroll. Tablo zaten SAYFALI (kendi pagination'ı var), bu
   yüzden cap'i kaldırıp doğal akıtmak güvenli; satır sayısını pagination tutar.
   attribute-coverage-values 260px cap'i de doğal akışa çevrilir. */
.xmlsh-scope #categoryTableWrapper,
.xmlsh-scope .attribute-coverage-values {
  max-height: none !important;
  overflow: visible !important;
}

/* -- 8.4 ALT AKSİYON BARI — Kaydet/Sıfırla taşma/kayma engeli --------------
   Aksiyon butonları sayfa akışında; iç-scroll kalkınca doğal yerine oturur.
   Buton satırı container'ı taşmasın + sağ gutter'a yapışmasın diye box-sizing
   ve tam-genişlik garanti. (Konum global desene bırakılır; sabit/fixed YOK.) */
.xmlsh-scope .xml-fields-actions,
.xmlsh-scope .field-mapping-actions,
.xmlsh-scope .category-mapping-actions,
.xmlsh-scope .xmlsh-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xmlsh-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* ===== css/announcements.css ===== */
/* ============================================
   ANNOUNCEMENTS / WHAT'S NEW - CSS
   Duyuru sistemi stilleri
============================================ */

/* ============================================
   WHAT'S NEW MODAL
============================================ */

.whats-new-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10001;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  animation: wnFadeIn 0.2s ease;
}

.whats-new-modal-overlay.active {
  display: flex;
}

@keyframes wnFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wnSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.whats-new-modal {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
  animation: wnSlideUp 0.3s ease;
  overflow: hidden;
}

/* Header */
.whats-new-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.whats-new-header-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.whats-new-header-left h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.whats-new-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.whats-new-mark-all {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
}

.whats-new-mark-all:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.whats-new-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f8fafc;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: all 0.2s;
}

.whats-new-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Tabs */
.whats-new-tabs {
  display: flex;
  gap: 2px;
  padding: 0.75rem 1.5rem 0;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
  overflow-x: auto;
}

.whats-new-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.whats-new-tab:hover {
  color: #0f172a;
}

.whats-new-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.whats-new-tab-badge {
  background: var(--color-primary);
  color: white;
  font-size: 0.625rem;
  padding: 1px 6px;
  border-radius: 12px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* Content Area */
.whats-new-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem 1.5rem;
}

.whats-new-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: #94a3b8;
  font-size: 0.875rem;
}

.whats-new-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.whats-new-empty p {
  margin-top: 0.75rem;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* Announcement Item */
.whats-new-item {
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  margin-bottom: 0.875rem;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.whats-new-item:hover {
  border-color: #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.whats-new-item.unread {
  border-left: 3px solid var(--color-primary);
  background: #fffbf5;
}

.whats-new-item.unread:hover {
  background: #fff7ed;
}

.whats-new-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.whats-new-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.whats-new-date {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
}

.whats-new-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.whats-new-item-content {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
  word-break: break-word;
}

.whats-new-item-content p {
  margin-bottom: 0.5rem;
}

.whats-new-item-content p:last-child {
  margin-bottom: 0;
}

.whats-new-item-image {
  width: 100%;
  border-radius: 12px;
  margin-top: 0.75rem;
  max-height: 200px;
  object-fit: cover;
  border: 1px solid #f1f5f9;
}

/* 🔴 DUYURU VİDEOSU (2026-10-11, kullanıcı: "duyuru panelinde video
   yüklenmiyor"). Kusur bir yükleme hatası değildi — modelde video alanı,
   formda dosya yükleme ve burada çizim YOKTU; özellik hiç yoktu.
   Görselle AYNI ölçüler: duyuru kartının düzeni bozulmasın.
   `object-fit: contain` çünkü motion graphics videoda kenarları kırpmak
   yazıyı keser; görselde `cover` doğru, videoda değil.
   🔴 max-height 200 → 360 (2026-10-11, ölçüldü): modal `max-width: 600px`,
   kart `padding: 1.25rem` → video kutusu ≈520 px geniş. 16:9 bir videoda
   `contain` + 200 px tavan, görüntüyü **356×200**'e düşürüyordu — 1080p
   kaynakta 5,4× küçülme, 72 px'lik başlık ekranda 13 px. Tanıtım videosu
   bu boyutta okunmuyor. 360 px tavanla kutu ≈520×293 olur (1080p'den 3,7×),
   mobilde (390 px ekran) video zaten ~310×174 kalır, tavana değmez. */
.whats-new-item-video {
  width: 100%;
  border-radius: 12px;
  margin-top: 0.75rem;
  max-height: 360px;
  object-fit: contain;
  background: #0f172a;
  border: 1px solid #f1f5f9;
  display: block;
}

/* 🔴 "Hareketi azalt" tercihi BURADA ÇÖZÜLMEZ — şablonda çözülür.
   Eski hâlde burada `@media (prefers-reduced-motion: reduce){ .whats-new-item-video
   { animation: none; } }` vardı ve yorumu "görünür kontrol veriyoruz" diyordu;
   ikisi de yanlıştı: `animation: none` bir `<video>`'ya hiçbir şey yapmaz
   (üzerinde CSS animasyonu yok), `autoplay`'i iptal edemez, `controls` ekleyemez.
   Kural inert'ti (QA yakaladı, 2026-10-11).
   Gerçek çözüm: `templates/includes/announcements_modal.html` →
   `wnAzHareketTercihi()`; tercih açıkken `autoplay muted loop` yerine `controls`
   basılır. Buraya CSS kuralı geri eklenirse aynı yanılgı geri gelir. */

.whats-new-item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

.whats-new-item-link:hover {
  color: #e85500;
}

.whats-new-pinned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  color: var(--color-primary);
  font-weight: 600;
}


/* ============================================
   DASHBOARD ANNOUNCEMENTS CARD
============================================ */

.dashboard-announcements-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dashboard-announcement-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.2s;
  border-radius: 0;
}

.dashboard-announcement-item:last-child {
  border-bottom: none;
}

.dashboard-announcement-item:hover {
  background: #fafbfc;
}

.dashboard-announcement-item.unread {
  background: #fffbf5;
  border-left: 3px solid var(--color-primary);
}

.dashboard-announcement-item.unread:hover {
  background: #fff7ed;
}

.dashboard-announcement-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}

.dashboard-announcement-type {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-announcement-info {
  flex: 1;
  min-width: 0;
}

.dashboard-announcement-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.dashboard-announcement-desc {
  font-size: 0.8125rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-announcement-date {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 1rem;
  flex-shrink: 0;
}


/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 768px) {
  .whats-new-modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }

  .whats-new-header {
    padding: 1rem;
  }

  .whats-new-tabs {
    padding: 0.5rem 1rem 0;
  }

  .whats-new-content {
    padding: 0.75rem 1rem 1rem;
  }

  .whats-new-item {
    padding: 1rem;
  }

  .whats-new-mark-all span {
    display: none;
  }

  .dashboard-announcement-desc {
    display: none;
  }
}

@media (max-width: 480px) {
  .whats-new-tab {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}


/* ============================================
   DARK MODE
============================================ */

.dark-mode .whats-new-modal {
  background: #1e293b;
}

.dark-mode .whats-new-header {
  border-color: #334155;
}

.dark-mode .whats-new-header-left h3 {
  color: #f8fafc !important;
}

.dark-mode .whats-new-mark-all {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0 !important;
}

.dark-mode .whats-new-mark-all:hover {
  background: #475569;
  color: #f8fafc !important;
}

.dark-mode .whats-new-close {
  background: #334155;
  color: #cbd5e1 !important;
}

.dark-mode .whats-new-close:hover {
  background: #475569;
  color: #f8fafc !important;
}

.dark-mode .whats-new-tabs {
  border-color: #334155;
}

.dark-mode .whats-new-tab {
  color: #cbd5e1 !important;
}

.dark-mode .whats-new-tab:hover {
  color: #e2e8f0 !important;
}

.dark-mode .whats-new-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.dark-mode .whats-new-item {
  border-color: #334155;
  background: #1e293b;
}

.dark-mode .whats-new-item:hover {
  border-color: #475569;
  background: #243044;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .whats-new-item.unread {
  background: #2a2015;
  border-left-color: var(--color-primary);
}

.dark-mode .whats-new-item.unread:hover {
  background: #332818;
}

.dark-mode .whats-new-item-title {
  color: #f1f5f9;
}

.dark-mode .whats-new-item-content {
  color: #94a3b8;
}

.dark-mode .whats-new-date {
  color: #64748b;
}

.dark-mode .whats-new-item-image {
  border-color: #334155;
}

/* Dashboard Dark Mode */
.dark-mode .dashboard-announcement-item {
  border-color: #334155;
}

.dark-mode .dashboard-announcement-item:hover {
  background: #243044;
}

.dark-mode .dashboard-announcement-item.unread {
  background: #2a2015;
  border-left-color: var(--color-primary);
}

.dark-mode .dashboard-announcement-item.unread:hover {
  background: #332818;
}

.dark-mode .dashboard-announcement-title {
  color: #f1f5f9;
}

.dark-mode .dashboard-announcement-desc {
  color: #64748b;
}

.dark-mode .dashboard-announcement-date {
  color: #64748b;
}


/* ============================================
   SCROLLBAR STYLING
============================================ */

.whats-new-content::-webkit-scrollbar {
  width: 6px;
}

.whats-new-content::-webkit-scrollbar-track {
  background: transparent;
}

.whats-new-content::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

.whats-new-content::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

.dark-mode .whats-new-content::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark-mode .whats-new-content::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Mobil drawer zemin — düz renk, harici shorthand üstüne (yüklenme sırası: bu dosya sonra) */
@media (max-width: 1024px) {
  html.dark-mode body aside#sidebar.sidebar.mobile-open,
  html.dark-mode html body aside#sidebar.sidebar.mobile-open {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
    opacity: 1 !important;
  }

  html:not(.dark-mode) body aside#sidebar.sidebar.mobile-open,
  html:not(.dark-mode) html body aside#sidebar.sidebar.mobile-open {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
  }
}