/* =========================================================
   PubliJournal — demo paneli stil dosyası
   TR ve EN demo sayfaları aynı dosyayı kullanır.
   ========================================================= */

/* ---------------------------------------------------------------
   PubliJournal — gezilebilir demo paneli
   Menü ağacı ve durum adları gerçek sistemle aynı.
   Veriler örnektir; hiçbir işlem gerçekleşmez.
----------------------------------------------------------------*/

:root{
  /* ====================================================================
     DEĞERLER GERÇEK PANELDEN ALINDI.

     Demo bir tasarım denemesi değil, ürünün vitrini: burada gördüğü ekranı
     kuracak olan dergi, aynı ekranı satın alıyor. Önce demo kendi dilini
     konuşuyordu — Plus Jakarta Sans, mono etiketler, ikonsuz menü, düz
     kartlar — ve panelle yan yana konduğunda iki ayrı ürün gibi duruyordu.

     Artık kaynak panel: renkler assets/css/panel.css ile panel/index.php'nin
     gömülü stillerinden, menü değerleri panel/layout/sidebar.php'den birebir
     alındı. Panelde bir renk değişirse burası da elle güncellenmeli — iki
     kod tabanı ayrı olduğu için otomatik bağ yok.
     ==================================================================== */

  /* Vurgu: panel.css'te #0d6efd (Bootstrap birincil), panonun kendi
     bağlantılarında #3498db. İkisi de korunuyor. */
  --brand:#0d6efd; --brand-600:#0b5ed7; --brand-700:#0a58ca;
  --brand-50:#e7f1ff; --brand-100:#dbe5fe;

  --paper:#f4f6f9;      /* panel.css body */
  --surface:#ffffff;
  --surface-2:#fbfcfd;  /* pano tablo başlığı zemini */
  --ink:#2c3e50;        /* pano başlıkları, makale adları */
  --ink-2:#5b6672;      /* gövde metni */
  --ink-3:#98a2ae;      /* soluk etiket */
  --rule:#edf0f3;       /* pano kutusu kenarlığı */
  --rule-2:#dee2e6;     /* form kenarlığı */
  --accent:#0d6efd; --accent-2:#3498db;
  --on-accent:#FFFFFF; --seal:#111827; --on-seal:#FFFFFF;

  /* Durum renkleri: panonun sayaç kutularındaki gerçek hex'ler. */
  --st-yeni:#3498db; --st-bekle:#f39c12; --st-hakem:#9b59b6;
  --st-karar:#e67e22; --st-kabul:#27ae60; --st-red:#e74c3c;

  /* Menü: sidebar.php'deki değerler. */
  --nav-bg:#111827; --nav-bg-2:rgba(255,255,255,.07); --nav-ink:#9ca3af;
  --nav-ink-2:#6b7280; --nav-rule:rgba(255,255,255,.08); --nav-title:#f3f4f6;
  --nav-vurgu:#60a5fa;

  /* Panel tek bir yazı tipi kullanıyor ve hiçbir yerde monospace yok.
     --f-mono kaldırılmadı, aynı yığına bağlandı: demo dosyalarında yirmi
     küsur yerde geçiyor ve hepsini ayıklamak yerine yüzü değiştirmek
     yeterli. Küçük büyük harfli etiketler kalıyor — panelde de öyleler. */
  --f-display:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-sans:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;

  color-scheme:light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  /* panel.css: 0.92rem */
  font-family: var(--f-sans); font-size: .92rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 2px; }

/* --- Demo bandı ------------------------------------------------ */
.demobar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--seal); color: var(--on-seal); padding: 8px 18px;
  font-size: .82rem; position: sticky; top: 0; z-index: 60;
}
.demobar strong { font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; background: rgba(59,130,246,.2); border: 1px solid rgba(59,130,246,.42); color: #A8C7FF; padding: 3px 11px; border-radius: 999px; }
.demobar a { color: inherit; text-decoration: underline; margin-left: auto; font-weight: 500; }

/* --- Kabuk ----------------------------------------------------- */
/* 252px: sidebar.php .offcanvas-md genişliği. */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: calc(100vh - 37px); }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }

/* --- Yan menü -------------------------------------------------- */
.nav { background: var(--nav-bg); color: var(--nav-ink); padding: 18px 0 28px; border-right: 0; }
@media (max-width: 900px) { .nav { padding-bottom: 12px; } }

/* MARKA: panelin .pj-marka'sı — ikon solda, iki satırlık yazı sağda. */
.nav-brand { display: flex; align-items: center; gap: 14px; padding: 0 18px 16px; border-bottom: 1px solid var(--nav-rule); }
.nav-brand .marka-ikon { font-size: 2em; color: var(--nav-vurgu); flex-shrink: 0; }
.nav-brand .marka-yazi { min-width: 0; }
.nav-brand b { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #fff; }
.nav-brand span { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.5); }

/* panel: .pj-rol-dugme — dolgu değil, ince kenarlık. */
.nav-role { margin: 14px 12px; padding: 10px 12px; background: none;
  border: 1px solid var(--nav-rule); border-radius: 8px; }
.nav-role small { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nav-ink-2); }
.nav-role b { font-size: 14px; font-weight: 600; color: var(--nav-title); }

.nav-group { padding: 10px 12px 2px; }
/* GRUP BAŞLIĞI PANELDE BİR SATIR.
   Demoda küçük, soluk, büyük harfli bir etiketti. Panelde ise normal bir
   menü satırı: ikonu var, aynı puntoda, biraz daha koyu yazı — gezinmenin
   ana basamağı o, alt satırlar detay. */
.nav-group h5 {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 2px; padding: 8px 12px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: #d1d5db;
}
/* Alt satırlar girintili ve kılavuz çizgisiyle başlığa bağlı. */
.nav-group h5 + a.item, .nav-group h5 ~ a.item {
  margin-left: 27px; border-left: 1px solid rgba(255,255,255,.07);
  border-radius: 0 8px 8px 0; padding-left: 12px;
}
/* Panelin .pj-nav'ı: 13.5px, 500 ağırlık, sol kenar çizgisi YOK — etkin
   satır yalnızca hafif bir dolguyla ve ikonun renklenmesiyle belli oluyor. */
.nav a.item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; margin: 1px 6px; border-radius: 8px;
  color: var(--nav-ink); text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.nav a.item:hover { background: var(--nav-bg-2); }
.nav a.item[aria-current="page"] { background: var(--nav-bg-2); color: var(--nav-title); }
.nav a.item[aria-current="page"] .ikon { color: var(--nav-vurgu); }
/* sidebar.php .unread-badge */
.nav a.item .badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  background: #ef4444; color: #fff; border-radius: 6px; padding: 1px 6px;
}
.nav a.item .lock { margin-left: auto; font-size: .72rem; color: var(--nav-ink-2); }

/* İKON KUTUCUĞU (.pj-kutu).
   Panelde her menü satırının başında sabit genişlikte bir ikon kutusu var;
   ikonların doğal genişlikleri farklı olduğu için etiketler onsuz tırtıklı
   hizalanıyor. Demoda da aynı kutu. */
.nav a.item .ikon, .nav-group h5 .ikon {
  width: 20px; flex-shrink: 0; text-align: center;
  font-size: 14px; color: var(--nav-ink-2);
}
.nav a.item.locked { color: var(--nav-ink-2); }

/* --- İçerik ---------------------------------------------------- */
.main { padding: 0; min-width: 0; }
/* ÜST ÇUBUK KALDIRILDI (.topbar/.crumbs/.topbar-right/.chip/.theme-btn)
   Panelde yol çizgisi ve bağlam çipi yok: içerik doğrudan sayfa başlığıyla
   başlıyor. Demo onları taşıdığı sürece iki ürün gibi görünüyordu. Ekranın
   adını .view-head h1 zaten söylüyor. demo.js'teki güncelleme kodu
   `if (crumbs)` ile korunuyor, öge olmayınca sessizce atlanıyor. */

/* panel: .container-fluid.p-4 */
.view { padding: 24px 24px 60px; }
.view[hidden] { display: none !important; }
.view-head { margin-bottom: 22px; }
.view-head h1 { font-family: var(--f-display); font-size: 1.65rem; font-weight: 800; margin: 0; letter-spacing: -.03em; }
.view-head p { margin: 6px 0 0; color: var(--ink-3); font-size: .9rem; }

/* --- Ortak parçalar -------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
/* PANELİN .stat-card'I.
   Ortalanmış, gölgeli, üstünde 4px renkli şerit ve üzerine gelince hafif
   kalkma. Demodaki sola dayalı düz kutu panelde hiç yok. */
.card {
  /* SIRA MARKUP'TA DEĞİL CSS'TE ÇEVRİLİYOR.
     Demo markup'ı etiket → sayı → alt satır sırasında; panelde sayı üstte.
     İki HTML dosyasında yüzlerce kutuyu elle çevirmek yerine flex sırası:
     .num order:1, .lbl order:2, .sub order:3. */
  display: flex; flex-direction: column; justify-content: center;
  background: var(--surface); border: 1px solid #f0f0f0; border-radius: 12px;
  padding: 20px; text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,.03);
  border-top: 4px solid var(--st-karar);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,.06); }
.card .lbl { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: #7f8c8d; line-height: 1.3; order: 2; display: block; }
/* Panelde sayı ÜSTTE, etiket altında. */
.card .num { order: 1; display: block; font-size: 28px; font-weight: 700; margin-bottom: 5px; line-height: 1; color: var(--st-karar); }
/* panel: .stat-alt */
.card .sub { order: 3; display: block; margin-top: 8px; font-size: 11px; line-height: 1.45; font-weight: 500; color: #9aa5b1; }
.card.alert { border-top-color: var(--st-bekle); }
.card.alert .num { color: var(--st-bekle); }
.card.alert .sub { color: #e67e22; font-weight: 600; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,.03); margin-bottom: 20px; overflow: hidden; }
/* Panelde başlık bandı renkli değil, beyaz; altında ince bir çizgi var. */
.panel-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid #f4f6f8; background: var(--surface); }
.panel-h h2 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.panel-h .side { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.panel-b { padding: 16px; }
.panel-b.flush { padding: 0; }

.tbl-scroll { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 620px; }
table.t th, table.t td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f6f7f9; vertical-align: middle; }
table.t thead th { background: var(--surface-2); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: #9aa5b1; font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid #f0f2f5; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr.click { cursor: pointer; }
table.t tbody tr.click:hover { background: var(--surface-2); }
.num-cell { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-3); }
.title-cell { font-weight: 600; font-size: 13px; color: var(--ink); }
.title-cell small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }

/* PANELİN .pano-rozet'İ: hap biçiminde, sol çubuk yok, yazı da renkli.
   Demodaki üç piksellik sol çubuk panelde hiçbir yerde kullanılmıyor. */
.st {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: color-mix(in srgb, var(--tone, var(--ink-3)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--tone, var(--ink-3)) 28%, #fff);
  color: var(--tone, var(--ink-2));
}
.t-yeni { --tone: var(--st-yeni); }
.t-bekle { --tone: var(--st-bekle); }
.t-hakem { --tone: var(--st-hakem); }
.t-karar { --tone: var(--st-karar); }
.t-kabul { --tone: var(--st-kabul); }
.t-red { --tone: var(--st-red); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: var(--f-sans); font-size: .85rem; font-weight: 500;
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--rule-2);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--ink-3); }
.btn-p { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tablo içi küçük eylem düğmesi. Satır yüksekliğini büyütmemesi için
   normal düğmeden daha ince. */
.btn-s { padding: 4px 10px; font-size: .78rem; border-radius: 6px; }

/* ---------- DİZGİ ÇALIŞMA ŞERİDİ ----------
   Sayı, şablon ve üretim tek satırda. Şablon bir ayar: bir kez seçilip
   aylarca dokunulmuyor, dolayısıyla galeri sürekli açık durmuyor —
   ekranın üstünü kaplayıp asıl iş listesini aşağı itiyordu. */
.dz-serit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 22px;
}
.dz-sec {
  flex: 1 1 260px; min-width: 200px;
  font-family: var(--f-sans); font-size: .85rem;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink);
}
.dz-sablon-dugme {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.dz-sablon-dugme:hover { border-color: var(--accent); }
.dz-etiket { font-family: var(--f-sans); font-size: .62rem; font-weight: 700;
             letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dz-deger  { font-family: var(--f-sans); font-size: .82rem; font-weight: 600; color: var(--ink); }
.dz-ok     { color: var(--ink-3); font-size: .7rem; }
.dz-not    { font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.dz-eylem  { display: flex; gap: 8px; margin-left: auto; }

/* Matris */
.matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); min-width: 640px; }
.mcol { background: var(--surface); padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.mcol-h { display: flex; align-items: baseline; gap: 7px; }
.mcol-n { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-3); }
.mcol-t { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.pill { display: flex; justify-content: space-between; gap: 8px; font-size: .77rem; padding: 5px 9px; border-radius: 8px;
  border-left: 3px solid var(--tone, var(--rule-2)); background: color-mix(in srgb, var(--tone, var(--ink-3)) 9%, transparent); }
.pill b { font-family: var(--f-mono); font-weight: 500; font-size: .75rem; color: var(--tone); font-variant-numeric: tabular-nums; }

/* Zaman çizelgesi */
.tl { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 2px solid var(--rule); }
.tl li { position: relative; padding: 0 0 18px 20px; }
.tl li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--rule-2); }
.tl li.on::before { border-color: var(--st-kabul); background: var(--st-kabul); }
.tl .when { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.tl .what { font-size: .9rem; font-weight: 500; margin-top: 1px; }
.tl .who { font-size: .82rem; color: var(--ink-3); }
.tl li:last-child { padding-bottom: 0; }

/* İki sütun */
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: .88rem; }
.kv dt { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.kv dd { margin: 0; }

.progress { height: 6px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--st-hakem); }

.hint-box { background: var(--surface-2); border: 1px dashed var(--rule-2); border-radius: 12px; padding: 16px; font-size: .87rem; color: var(--ink-2); }
.hint-box b { color: var(--ink); }

.empty { padding: 48px 20px; text-align: center; color: var(--ink-3); }
.empty h2 { font-family: var(--f-display); font-size: 1.2rem; color: var(--ink-2); margin: 0 0 6px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tabs button {
  font-family: var(--f-sans); font-size: .85rem; background: transparent; border: 0;
  border-bottom: 2px solid transparent; color: var(--ink-3); padding: 9px 14px; cursor: pointer; white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-2); font-weight: 500; }


/* --- Ek demo parçaları ----------------------------------------- */
.src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; }
.src { border: 1px solid var(--rule); border-radius: 12px; padding: 14px; background: var(--surface); display: grid; gap: 6px; }
.src.sec { border-color: var(--accent); box-shadow: 0 10px 26px -18px rgba(29,78,216,.8); }
.src b { font-size: .9rem; }
.src span { font-size: .8rem; color: var(--ink-3); }
.sw { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--rule-2); vertical-align: -5px; margin-right: 8px; }
.tgl { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-2); }
.tgl i { width: 32px; height: 18px; border-radius: 999px; background: var(--rule-2); position: relative; display: inline-block; }
.tgl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.tgl.on i { background: var(--st-kabul); }
.tgl.on i::after { left: auto; right: 2px; }
.ayar-sek { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.ayar-sek span { font-size: .82rem; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--ink-2); background: var(--surface); }
.ayar-sek span.aktif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.mini-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; }
.mini-form label { display: grid; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.mini-form .kutu { border: 1px solid var(--rule-2); border-radius: 10px; padding: 9px 12px; font-size: .88rem; background: var(--surface); color: var(--ink); }
.mini-form .kutu.gri { color: var(--ink-3); }
.blok { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.blok + .blok { margin-top: 8px; }
.blok .tut { color: var(--ink-3); cursor: grab; font-size: 1rem; }
.blok b { font-size: .89rem; font-weight: 600; }
.blok small { display: block; color: var(--ink-3); font-size: .78rem; }
.blok .sag { margin-left: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===============================================================
   EYLÜL 2026 GÜNCELLEMESİ — yeni demo parçaları.
   Ürünün 13.09 sonrası ekranlarının maketleri: rol değiştirici,
   makale aşama göstergesi, yayın hazırlığı kontrol listesi, yapışkan
   eylem çubuğu, uyarı şeritleri, sürüm farkı, maket pencere, sınır
   sayacı. Sınıf adları bu dosyada daha önce kullanılmamış adlar.
================================================================*/

/* Rol değiştirici: .nav-role kutusunun içinde iki düğme. Menü
   grupları data-rol taşır; seçili olmayan rolün grupları gizlenir. */
.rol-sec { display: flex; gap: 4px; margin-top: 6px; }
.rol-sec button { flex: 1; font: inherit; font-size: .78rem; padding: 5px 6px; border-radius: 6px;
  border: 1px solid var(--nav-rule); background: transparent; color: var(--nav-ink); cursor: pointer; }
.rol-sec button[aria-pressed="true"] { background: var(--nav-bg-2); color: #fff; border-color: rgba(96,165,250,.5); }
body[data-rol="editor"] .nav [data-rol="yazar"],
body[data-rol="yazar"] .nav [data-rol="editor"] { display: none; }

/* Aşama göstergesi (makale detayı üstü). */
.asama { display: flex; gap: 0; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.asama span { flex: 1; padding: 10px 12px; font-size: .8rem; color: var(--ink-3); border-right: 1px solid var(--rule); position: relative; }
.asama span:last-child { border-right: 0; }
.asama span b { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.asama span.bitti { color: var(--st-kabul); }
.asama span.simdi { color: var(--ink); background: var(--brand-50); font-weight: 600; }
@media (max-width: 700px) { .asama { flex-wrap: wrap; } .asama span { flex: 1 1 50%; border-bottom: 1px solid var(--rule); } }

/* Sekme bölmeleri: .tabs'ın altında içerik boşluğu. */
.tabs + .sekme-alt { margin-top: 16px; }
.tabs.kart-ust { margin-bottom: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0 8px; }

/* Kontrol listesi (Yayın hazırlığı). */
.kl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kl li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; }
.kl li i { flex-shrink: 0; width: 18px; text-align: center; margin-top: 3px; }
.kl li.tamam i { color: var(--st-kabul); }
.kl li.eksik i { color: var(--st-bekle); }
.kl li.bekle i { color: var(--ink-3); }
.kl li small { display: block; color: var(--ink-3); font-size: .78rem; }

/* Katlanır özet satırı. */
details.ozet-sat { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 16px; }
details.ozet-sat > summary { cursor: pointer; padding: 12px 16px; font-size: .88rem; list-style: none; display: flex; gap: 10px; align-items: center; }
details.ozet-sat > summary::-webkit-details-marker { display: none; }
details.ozet-sat > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); }
details.ozet-sat[open] > summary::after { content: "▴"; }
details.ozet-sat > div { padding: 4px 16px 16px; }

/* Yapışkan eylem çubuğu. Ataların hiçbirinde overflow:hidden yok —
   üründe sticky'yi sessizce iptal eden tuzak (AGENTS §5.14). */
.yapiskan { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: rgba(255,255,255,.96); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 -8px 24px -18px rgba(17,24,39,.5); margin-top: 16px; }
.yapiskan .not { font-size: .8rem; color: var(--ink-3); margin-right: auto; }

/* Uyarı şeritleri: bilgi, dikkat, engel. */
.serit { border-radius: 10px; padding: 11px 14px; font-size: .86rem; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.serit i { margin-top: 3px; }
.serit.bilgi { background: var(--brand-50); color: #0a4aa8; }
.serit.dikkat { background: #fff6e5; color: #8a5300; }
.serit.engel { background: #fdecea; color: #a4281b; }
.serit b { font-weight: 700; }

/* Alan + düğme yan yana (DOI alanı). */
.alan-dugme { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.alan-dugme .kutu { flex: 1; min-width: 180px; }

/* Sürüm farkı. */
.fark { font-size: .88rem; line-height: 1.6; }
.fark del { background: #fdecea; color: #a4281b; text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.fark ins { background: #e8f6ee; color: #1d7a45; text-decoration: none; padding: 0 2px; border-radius: 3px; }
.surum { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: .86rem; }
.surum:last-child { border-bottom: 0; }
.surum .ne { margin-left: auto; color: var(--ink-3); font-size: .8rem; }

/* Sınır sayacı (öz / anahtar kelime). */
.sayac-s { font-size: .78rem; font-weight: 600; margin-top: 4px; }
.sayac-s.iyi { color: var(--st-kabul); }
.sayac-s.az { color: var(--st-bekle); }
.sayac-s.cok { color: var(--st-red); }

/* Sihirbaz adımları (gönderim, revizyon). */
.sihirbaz { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; counter-reset: sh; }
.sihirbaz span { counter-increment: sh; font-size: .8rem; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--ink-3); background: var(--surface); }
.sihirbaz span::before { content: counter(sh); display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rule); color: var(--ink-2); font-size: .7rem; font-weight: 700; margin-right: 6px; }
.sihirbaz span.bitti { color: var(--st-kabul); border-color: #bfe5cf; }
.sihirbaz span.bitti::before { background: var(--st-kabul); color: #fff; }
.sihirbaz span.simdi { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.sihirbaz span.simdi::before { background: var(--accent); color: #fff; }

/* Seçenek kutuları (evet/hayır, değişiklik yok). */
.secenek { display: flex; gap: 8px; flex-wrap: wrap; }
.secenek span { font-size: .84rem; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); }
.secenek span.sec { border-color: var(--accent); background: var(--brand-50); color: var(--ink); font-weight: 600; }

/* Biçimli not düzenleyici maketi. */
.not-ed { border: 1px solid var(--rule-2); border-radius: 10px; background: var(--surface); }
.not-ed .arac { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: .82rem; }
.not-ed .arac span { padding: 2px 7px; border-radius: 5px; }
.not-ed .govde { padding: 10px 12px; font-size: .88rem; min-height: 64px; }

/* Maket pencere. */
.maket-pen { position: fixed; inset: 0; z-index: 80; background: rgba(17,24,39,.45); display: grid; place-items: center; padding: 16px; }
.maket-pen[hidden] { display: none; }
.maket-pen .ic { background: var(--surface); border-radius: 14px; max-width: 520px; width: 100%; box-shadow: 0 30px 60px -20px rgba(17,24,39,.5); overflow: auto; max-height: 90vh; }
.maket-pen .ic h3 { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.maket-pen .ic .gov { padding: 16px 18px; font-size: .88rem; color: var(--ink-2); }
.maket-pen .ic .gov ul { margin: 8px 0 12px; padding-left: 18px; }
.maket-pen .ic .alt { padding: 12px 18px; border-top: 1px solid var(--rule); display: flex; gap: 8px; justify-content: flex-end; }
.kod-kutu { display: flex; gap: 6px; justify-content: center; margin: 12px 0; }
.kod-kutu span { width: 38px; height: 46px; border: 1px solid var(--rule-2); border-radius: 8px; display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; color: var(--ink); }

/* Yazı tipi ızgarası. */
.yt-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 8px; }
.yt-izgara span { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; font-size: .82rem; background: var(--surface); }
.yt-izgara span small { display: block; color: var(--ink-3); font-size: .72rem; }
.yt-izgara span.sec { border-color: var(--accent); background: var(--brand-50); font-weight: 600; }

/* Yeni rozet: demoda yeni gösterilen ekran ögeleri. */
.yeni-roz { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: #e8f6ee; color: #1d7a45; border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }

/* ===============================================================
   EKİM 2026 GÜNCELLEMESİ — menüye gelen yeni ekranlar.
   İtiraz ve Şikâyetler, Toplu Atama ve Devir, Kurullar, Yetki Matrisi,
   Menü Yönetimi, Formlar, Zamanlanmış Görev, Veri Dışa Aktarımı,
   Güvenlik Günlüğü, KVKK Talepleri, Hesap Birleştirme, Hesabım;
   Raporlar › Site İstatistikleri, Anasayfa İçerikleri › İstatistik
   Alanları. Önek "yd-" bu dosyada ve iki demo sayfasında başka yerde
   kullanılmıyor (24.10'da tarandı).
================================================================*/

/* Başlık + sağda düğme/süzgeç. */
.yd-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.yd-bas .view-head { margin-bottom: 0; flex: 1 1 320px; min-width: 0; }
.yd-secim { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface); color: var(--ink); }
.yd-secim i { font-size: .7rem; color: var(--ink-3); }

/* Kayıt kartının üst satırı (itiraz, birleştirme talebi). */
.yd-satir { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.yd-satir > div:first-child { flex: 1 1 260px; min-width: 0; }
.yd-konu { font-size: .92rem; margin-left: 4px; }
.yd-alt-bilgi { display: block; font-size: .78rem; color: var(--ink-3); margin-top: 4px; line-height: 1.6; overflow-wrap: anywhere; }
.yd-sag-bilgi { font-size: .78rem; color: var(--ink-3); text-align: right; line-height: 1.9; }
.yd-metin { margin: 12px 0; padding-left: 10px; border-left: 3px solid var(--rule-2); font-size: .88rem; color: var(--ink-2); }
.yd-not { font-size: .8rem; color: var(--ink-3); line-height: 1.6; margin: 10px 0 0; }
.yd-not code, .hint-box code { font-size: .78rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere; }

/* Formda geniş alan. */
.mini-form .yd-genis { grid-column: span 2; }
@media (max-width: 700px) { .mini-form .yd-genis { grid-column: auto; } }
.mini-form .yd-alan { min-height: 58px; }
.yd-form { margin-top: 4px; }
.yd-suzgec { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Tek başına duran giriş kutusu (mini-form dışında). */
.yd-girdi { display: inline-block; border: 1px solid var(--rule-2); border-radius: 8px; padding: 6px 10px; font-size: .84rem; background: var(--surface); color: var(--ink); min-width: 120px; }
.yd-girdi.gri { color: var(--ink-3); }

/* İşaret kutusu ve seçim düğmesi maketi. */
.yd-isaret, .yd-radyo { display: inline-block; flex-shrink: 0; width: 15px; height: 15px; border: 1.5px solid var(--rule-2); background: var(--surface); vertical-align: -3px; position: relative; }
.yd-isaret { border-radius: 4px; }
.yd-radyo { border-radius: 50%; }
.yd-isaret.on { background: var(--accent); border-color: var(--accent); }
.yd-isaret.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.yd-radyo.on { border-color: var(--accent); }
.yd-radyo.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.yd-onay { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--ink-2); }
.yd-onay .tgl { flex-shrink: 0; margin-top: 2px; }
.yd-dugmeler { display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* Seçilebilir satır (sayfa listesi, paket). */
.yd-sec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; font-size: .85rem; background: var(--surface); }
.yd-sec + .yd-sec { margin-top: 6px; }
.yd-sec > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.yd-sec small { color: var(--ink-3); font-size: .76rem; }
.yd-sec.yd-var { background: var(--surface-2); }
.yd-sec.yd-var .yd-isaret { opacity: .4; }
.yd-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.yd-grup { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 8px; }
.yd-grup:first-child { margin-top: 0; }

/* Menü ağacı: alt öğe girintili; kendiliğinden gelen sabit satırlar. */
.yd-cocuk { margin-left: 26px; }
.blok.yd-cocuk { margin-top: 6px; }
.yd-sabit { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px dashed var(--rule-2); border-radius: 10px; font-size: .82rem; color: var(--ink-3); margin-bottom: 8px; }
.yd-soluk { opacity: .6; }
.blok b .st { margin-left: 4px; vertical-align: 1px; }
.blok > div { min-width: 0; }

/* Tablolar: biten görev soluk; eylem sütunu sağda; yetki matrisi ortalı. */
table.t tr.yd-bitti td { color: var(--ink-3); }
table.t td.yd-eylem { text-align: right; white-space: nowrap; }
table.t.yd-matris td, table.t.yd-matris th { text-align: center; }
table.t.yd-matris td:first-child, table.t.yd-matris th:first-child { text-align: left; font-weight: 600; color: var(--ink); }
table.t.yd-dar { min-width: 0; }
table.t td small.yd-alt-bilgi { margin-top: 2px; }

/* Eşit iki sütun (site istatistikleri). */
.split.yd-esit { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .split.yd-esit { grid-template-columns: 1fr; } }

/* Komut satırı kutusu (zamanlanmış görev). */
.yd-kod { display: block; margin: 0; background: #1f2933; color: #e4e7eb; border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.6; white-space: pre; overflow-x: auto; max-width: 100%; }

.yd-liste { margin: 0 0 14px; padding-left: 18px; font-size: .86rem; color: var(--ink-2); }
.yd-liste li + li { margin-top: 4px; }
.btn.yd-tehlike { color: var(--st-red); border-color: color-mix(in srgb, var(--st-red) 40%, #fff); }
.btn.yd-tehlike:hover { border-color: var(--st-red); }