/* ================================================================
   DOC-FIX · Tasarım Sistemi  (editoryal / İsviçre tarzı)
   Sıcak kağıt + milimetrik grid, sıcak siyah mürekkep, keskin köşeler,
   camsı header, büyük yumuşak gölgeler. Aydınlık + karanlık.
   ================================================================ */

:root {
    --ff: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
    --fd: "Inter", var(--ff);

    /* Aydınlık — sıcak kağıt */
    --paper: #f4f3ee;
    --bg: var(--paper);
    --surface: #fbfaf6;
    --surface-2: #eeece4;
    --ink: #11110f;
    --ink-2: #3b3a33;
    --muted: #8b897d;
    --line: rgba(17,17,15,.11);
    --line-2: rgba(17,17,15,.20);
    --grid: rgba(17,17,15,.035);

    /* Monokrom aksiyon + ölçülü, topraksı fonksiyonel renkler */
    --accent: #11110f;
    --accent-ink: #f4f3ee;
    --accent-soft: rgba(17,17,15,.06);
    --accent-soft-ink: #11110f;

    --sage: #4f6b52;   --sage-soft: #e5ece2;
    --clay: #a6552e;   --clay-soft: #f3e6dd;
    --slate: #3f5670;  --slate-soft: #e2e8ef;
    --ochre: #97781f;  --ochre-soft: #f2ebd6;
    --plum: #6b4a63;   --plum-soft: #ece1ea;

    --ok: #3d6b4a;     --ok-soft: #e5ece3;
    --danger: #9e3b2f; --danger-soft: #f4e2df;
    --warn: #8a6d1a;   --warn-soft: #f2ead4;
    --info: #3f5670;   --info-soft: #e2e8ef;

    --sh-sm: 0 1px 2px rgba(17,17,15,.05);
    --sh-md: 0 8px 30px -10px rgba(17,17,15,.16), 0 2px 8px -3px rgba(17,17,15,.08);
    --sh-lg: 0 30px 70px -20px rgba(17,17,15,.28);

    --r: 4px; --r-sm: 3px; --r-lg: 6px;
    --sidebar-w: 264px;
    --t: .16s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
    --paper: #100f0c;
    --bg: var(--paper);
    --surface: #1a1915;
    --surface-2: #22201b;
    --ink: #f3f1e9;
    --ink-2: #c9c6ba;
    --muted: #8b897d;
    --line: rgba(243,241,233,.11);
    --line-2: rgba(243,241,233,.20);
    --grid: rgba(243,241,233,.035);

    --accent: #f3f1e9;
    --accent-ink: #11110f;
    --accent-soft: rgba(243,241,233,.08);
    --accent-soft-ink: #f3f1e9;

    /* Koyu temada okunur (acik) fonksiyonel renkler — eksikti, kontrast bozuluyordu */
    --sage: #8fbf96;   --sage-soft: #1a241b;
    --clay: #e0a184;   --clay-soft: #2a1a12;
    --slate: #9db4d0;  --slate-soft: #172029;
    --ochre: #d8bd6a;  --ochre-soft: #26200f;
    --plum: #c9a3c0;   --plum-soft: #241a22;
    --ok: #7fae86;   --ok-soft: #1a241b;
    --danger: #d98a7e; --danger-soft: #2a1712;
    --warn: #cbab52; --warn-soft: #26200f;
    --info: #8fa6c0;  --info-soft: #172029;

    --sh-sm: 0 1px 2px rgba(0,0,0,.5);
    --sh-md: 0 10px 34px -12px rgba(0,0,0,.6);
    --sh-lg: 0 32px 72px -20px rgba(0,0,0,.7);
}

/* Ucuncu tema: Gece Mavisi (Ocean) — lacivert/mavi tonlu */
[data-theme="ocean"] {
    --paper: #0d1420;
    --bg: var(--paper);
    --surface: #16202e;
    --surface-2: #1f2c3d;
    --ink: #e8eef6;
    --ink-2: #b6c4d6;
    --muted: #7e8ea3;
    --line: rgba(232,238,246,.10);
    --line-2: rgba(232,238,246,.20);
    --grid: rgba(232,238,246,.04);

    --accent: #e8eef6;
    --accent-ink: #0d1420;
    --accent-soft: rgba(90,150,220,.16);
    --accent-soft-ink: #cfe0f5;

    --sage: #5bb39a;  --sage-soft: #10241f;
    --clay: #e0977a;  --clay-soft: #2c1c16;
    --slate: #6ea8e0; --slate-soft: #14273a;
    --ochre: #d9b45a; --ochre-soft: #2a2414;
    --plum: #a98ad9;  --plum-soft: #221a33;
    --ok: #5bb39a;    --ok-soft: #10241f;
    --danger: #e88a7e; --danger-soft: #2e1714;
    --warn: #d9b45a;  --warn-soft: #2a2414;
    --info: #6ea8e0;  --info-soft: #14273a;

    --sh-sm: 0 1px 2px rgba(0,0,0,.55);
    --sh-md: 0 10px 34px -12px rgba(0,0,0,.65);
    --sh-lg: 0 32px 72px -20px rgba(0,0,0,.75);
}
[data-theme="ocean"] .df-sidebar { background: #0a111c; border-right-color: rgba(232,238,246,.12); }
[data-theme="ocean"] .df-btn { background: var(--ink); color: #0d1420; border-color: var(--ink); }
[data-theme="ocean"] .df-btn:hover { background: #fff; }
[data-theme="ocean"] .df-fchip.on { color: #0d1420; }
[data-theme="ocean"] .df-swal { background: var(--surface) !important; color: var(--ink) !important; }
[data-theme="ocean"] .df-swal .swal2-title, [data-theme="ocean"] .df-swal .swal2-html-container { color: var(--ink) !important; }
[data-theme="ocean"] .flatpickr-calendar { background: var(--surface-2); border-color: var(--line); box-shadow: var(--sh-lg); }
[data-theme="ocean"] .flatpickr-calendar * { color: var(--ink-2); fill: var(--ink-2); }
[data-theme="ocean"] .flatpickr-day.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------------- Taban ---------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; font-family: var(--ff); font-size: 14.5px; line-height: 1.55;
    color: var(--ink); background-color: var(--bg);
    /* Milimetrik grid dokusu (referans site gibi) */
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 30px 30px; background-attachment: fixed;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    transition: background-color var(--t), color var(--t);
}
h1,h2,h3,h4,h5 { font-family: var(--fd); color: var(--ink); letter-spacing: -.021em; font-weight: 650; }
a { text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------------- İskelet ---------------- */
.df-shell { display: flex; min-height: 100vh; }
.df-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---------------- Sidebar ---------------- */
.df-sidebar {
    width: var(--sidebar-w); flex: none; position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; padding: 22px 16px;
    background: #11110f; color: #cbc9bf;
    border-right: 1px solid rgba(243,241,233,.07); z-index: 40;
}
[data-theme="dark"] .df-sidebar { background: #1a1915; border-right-color: rgba(243,241,233,.14); box-shadow: 1px 0 0 rgba(243,241,233,.04); }
.df-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
/* Logo: sidebar TUM temalarda koyu oldugu icin zemin SABIT acik tutulur.
   (--paper kullanilirsa dark/ocean'da koyu-uzerine-koyu olup logo kayboluyordu.) */
.df-brand-mark {
    width: 38px; height: 38px; border-radius: 5px; flex: none;
    background: #f4f3ee; color: #11110f;
    display: grid; place-items: center;
}
[data-theme="ocean"] .df-brand-mark { background: #e8eef6; color: #0d1420; }
.df-brand-mark svg { width: 20px; height: 20px; }
.df-brand-name {
    font-family: var(--fd); font-weight: 700; font-size: 19px;
    color: #f4f3ee; letter-spacing: -.01em;
}
.df-brand-name em { font-style: normal; color: #8b897d; }

.df-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.df-nav-label {
    font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #6f6d63; padding: 18px 10px 8px;
}
.df-nav-item {
    display: flex; align-items: center; gap: 12px;
    color: #a9a79c; padding: 10px 12px; border-radius: var(--r-sm);
    font-weight: 500; font-size: 14px; position: relative;
    transition: background var(--t), color var(--t);
}
.df-nav-item i { font-size: 18px; opacity: .85; width: 20px; text-align: center; }
.df-nav-item:hover { background: rgba(243,241,233,.06); color: #fff; }
/* Aktif menu ogesi: TUM temalarda okunur (dark/ocean'da --paper koyu oldugu icin
   dogrudan --paper kullanilamaz; sabit acik zemin + koyu yazi). */
.df-nav-item.on { background: #f4f3ee; color: #11110f; font-weight: 600; }
.df-nav-item.on i { color: #11110f; opacity: 1; }
[data-theme="ocean"] .df-nav-item.on { background: #e8eef6; color: #0d1420; }
[data-theme="ocean"] .df-nav-item.on i { color: #0d1420; }
.df-nav-item.df-soon { cursor: default; opacity: .5; }
.df-nav-item.df-soon em {
    font-style: normal; margin-left: auto; font-size: 9.5px; font-weight: 700;
    letter-spacing: .04em; background: rgba(243,241,233,.09); color: #b7b5a9;
    padding: 2px 7px; border-radius: 3px;
}

.df-sidebar-foot { border-top: 1px solid rgba(243,241,233,.08); padding-top: 14px; }
.df-user { display: flex; align-items: center; gap: 11px; padding: 6px 8px; }
.df-user-avatar {
    width: 36px; height: 36px; border-radius: 5px; flex: none;
    background: rgba(243,241,233,.08); color: #d7d5ca;
    display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
}
.df-user-meta strong { display: block; color: #eceadf; font-size: 13px; font-weight: 600; }
.df-user-meta small { color: #6f6d63; font-size: 11.5px; }

.df-scrim { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(8,8,6,.5); }

/* ---------------- Topbar (camsı) ---------------- */
.df-topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 38px 18px; position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid var(--line);
}
.df-topbar-title { flex: 1; min-width: 0; }
.df-topbar-title h1 { font-size: 22px; font-weight: 680; margin: 0; letter-spacing: -.025em; }
.df-topbar-title p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.df-topbar-actions { display: flex; align-items: center; gap: 10px; }

.df-iconbtn {
    width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink-2); cursor: pointer;
    display: grid; place-items: center; font-size: 18px; transition: all var(--t);
}
.df-iconbtn:hover { border-color: var(--ink); color: var(--ink); }
.df-burger { display: none; }
.df-ico-moon, .df-ico-ocean { display: none; }
[data-theme="dark"] .df-ico-sun { display: none; }
[data-theme="dark"] .df-ico-moon { display: block; }
[data-theme="dark"] .df-ico-ocean { display: none; }
[data-theme="ocean"] .df-ico-sun { display: none; }
[data-theme="ocean"] .df-ico-moon { display: none; }
[data-theme="ocean"] .df-ico-ocean { display: block; }

/* ---------------- İçerik ---------------- */
.df-content { padding: 28px 38px 44px; max-width: none; width: 100%; }
.df-content > * { animation: dfRise .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes dfRise { from { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { .df-content > * { animation: none; } }
.df-footer { margin-top: auto; text-align: center; padding: 24px; color: var(--muted); font-size: 12px; letter-spacing: .01em; }

/* ---------------- Kartlar ---------------- */
.df-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh-sm);
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
    margin-bottom: 22px;
}
.df-card-pad { padding: 26px; }
.df-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 26px; border-bottom: 1px solid var(--line);
}
.df-card-head h2 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.df-card-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 26px; border-top: 1px solid var(--line);
    background: var(--surface-2); border-radius: 0 0 var(--r) var(--r);
}

/* İstatistik */
.df-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.df-stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 22px; box-shadow: var(--sh-sm); display: flex; gap: 16px; align-items: center;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.df-stat:hover { border-color: var(--line-2); box-shadow: var(--sh-md); }
.df-stat-ico {
    width: 46px; height: 46px; border-radius: var(--r-sm); flex: none;
    display: grid; place-items: center; font-size: 21px;
    background: var(--accent-soft); color: var(--ink);
}
.df-stat-num { font-family: var(--fd); font-size: 27px; font-weight: 680; line-height: 1; letter-spacing: -.03em; }
.df-stat-lbl { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
/* Stat ikon renk varyantları */
.df-stat-ico.info { background: var(--slate-soft); color: var(--slate); }
.df-stat-ico.ok   { background: var(--sage-soft); color: var(--sage); }
.df-stat-ico.plum { background: var(--plum-soft); color: var(--plum); }
.df-stat-ico.clay { background: var(--clay-soft); color: var(--clay); }
.df-stat-ico.warn { background: var(--ochre-soft); color: var(--ochre); }
.df-stats-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.df-stat-trend { display: inline-block; font-size: 10.5px; font-weight: 700; margin-left: 6px;
    padding: 1px 6px; border-radius: 3px; background: var(--sage-soft); color: var(--sage); }
.df-stat-trend.up::before { content: "▲ "; font-size: 8px; }

/* ---------------- Butonlar ---------------- */
.df-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid var(--ink);
    font-family: var(--ff); font-size: 13.5px; font-weight: 600; cursor: pointer;
    background: var(--ink); color: var(--paper); transition: all var(--t); white-space: nowrap;
}
.df-btn i { font-size: 16px; }
.df-btn:hover { color: var(--paper); background: #000; transform: translateY(-1px); box-shadow: var(--sh-md); }
[data-theme="dark"] .df-btn { background: var(--ink); color: #11110f; border-color: var(--ink); }
[data-theme="dark"] .df-btn:hover { background: #fff; }
.df-btn:active { transform: none; box-shadow: none; }
.df-btn.ghost {
    background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-sm);
}
.df-btn.ghost:hover { background: var(--surface-2); border-color: var(--ink); }
.df-btn.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, var(--line-2)); }
.df-btn.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); box-shadow: none; }
.df-btn.sm { padding: 0 13px; height: 32px; font-size: 12.5px; }
.df-btn.sm.df-sq { width: 32px; padding: 0; }   /* yalnizca ikon iceren kare buton */
.df-btn.lg { padding: 13px 26px; font-size: 14.5px; }
.df-btn.block { width: 100%; }

/* ---------------- Form ---------------- */
.df-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .01em; }
.df-label .req { color: var(--danger); }
.df-input, .df-select, textarea.df-input {
    width: 100%; padding: 10.5px 13px; font-family: var(--ff); font-size: 14px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    transition: border var(--t), box-shadow var(--t); appearance: none;
}
.df-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b897d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.df-input:focus, .df-select:focus, textarea.df-input:focus {
    outline: none; border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.df-input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.df-hint { color: var(--muted); font-size: 12px; margin-top: 5px; }
.df-field { margin-bottom: 16px; }

/* Arama */
.df-search { position: relative; }
.df-search > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; pointer-events: none; }
.df-search .df-input { padding-left: 38px; }
.df-search kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--ff); font-size: 11px; color: var(--muted);
    border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 6px; background: var(--surface-2);
}

/* ---------------- Kart ızgara (şablon/müvekkil) ---------------- */
.df-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.df-tpl {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 22px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 13px;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    position: relative; overflow: hidden;
}
.df-tpl:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.df-tpl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.df-tpl-ico {
    width: 42px; height: 42px; border-radius: var(--r-sm); flex: none;
    background: var(--accent-soft); color: var(--ink); display: grid; place-items: center; font-size: 20px;
}
.df-tpl h3 { font-size: 15px; font-weight: 650; margin: 6px 0 2px; letter-spacing: -.01em; }
.df-tpl .file { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; word-break: break-all; }
.df-tpl-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.df-tpl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.df-tpl-actions > * { min-width: 0; }
.df-tpl-actions .df-act-primary { flex: 1 1 100%; }
.df-tpl-actions .df-act-icon { flex: 1 1 0; }
.df-tpl-actions form { display: flex; flex: 1 1 0; }
.df-tpl-actions form .df-btn { width: 100%; }

/* ---------------- Sayfalama ---------------- */
.df-pager {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 14px 20px 18px; border-top: 1px solid var(--line);
}
.df-pager-info { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.df-btn.disabled { opacity: .45; pointer-events: none; }

/* ---------------- AI sağlayıcı kartları ---------------- */
.df-aigrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
    margin-top: 14px;
}
.df-aicard {
    border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 18px;
    background: var(--surface); display: flex; flex-direction: column;
}
.df-aicard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.df-aicard-head h3 { font-size: 14.5px; font-weight: 700; margin: 0; }
.df-aicard-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.df-aicard-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.df-aicard-links a, .df-aicard-links button {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
    color: var(--ink); background: none; border: none; padding: 0; cursor: pointer;
    text-decoration: none; border-bottom: 1px dashed var(--line-2);
}
.df-aicard-links a:hover, .df-aicard-links button:hover { color: var(--clay); border-bottom-color: var(--clay); }
.df-aiinfo { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.df-aiinfo-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.df-mini-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.df-aiinfo p { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* ---------------- Disk kullanım çubuğu (yedekleme kartı) ---------------- */
.df-diskbar { margin-bottom: 4px; }
.df-diskbar-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.df-diskbar-top i { margin-right: 5px; opacity: .8; }
.df-diskbar-top strong { color: var(--ink); font-weight: 700; }

/* ---------------- Belge detay üst çubuğu ---------------- */
.df-doc-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; padding: 18px 24px;
}
.df-doc-hero-left { display: flex; align-items: center; gap: 14px; }
.df-doc-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.df-success-ring.sm { width: 44px; height: 44px; font-size: 22px; flex: none; margin: 0; }
@media (max-width: 640px) {
    .df-doc-hero { flex-direction: column; align-items: stretch; }
    .df-doc-hero-actions { justify-content: stretch; }
    .df-doc-hero-actions .df-btn { flex: 1 1 auto; }
}

/* ---------------- Panel: hızlı işlemler ---------------- */
.df-quickbar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.df-quick {
    display: flex; align-items: center; gap: 13px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.df-quick:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.df-quick-ico {
    width: 42px; height: 42px; border-radius: var(--r-sm); flex: none; font-size: 20px;
    display: grid; place-items: center; background: var(--accent-soft); color: var(--ink);
}
.df-quick-ico.info { background: var(--slate-soft); color: var(--slate); }
.df-quick-ico.ok   { background: var(--sage-soft); color: var(--sage); }
.df-quick-ico.warn { background: var(--ochre-soft); color: var(--ochre); }
.df-quick span { display: flex; flex-direction: column; min-width: 0; }
.df-quick b { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.df-quick em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ---------------- Panel: en çok kullanılan (rank bar) ---------------- */
.df-rank { margin-bottom: 14px; }
.df-rank:last-child { margin-bottom: 0; }
.df-rank-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.df-rank-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-rank-count { font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.df-rank-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.df-rank-bar span { display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--slate), var(--plum)); transition: width .5s cubic-bezier(.4,0,.2,1); }

/* ---------------- Panel: aktivite akışı ---------------- */
.df-feed { display: flex; flex-direction: column; }
.df-feed-item { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.df-feed-item:last-child { border-bottom: none; }
.df-feed-item > div { min-width: 0; flex: 1; }   /* uzun metnin taşıp düzeni bozmasını engeller */
.df-feed-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--slate); }
.df-feed-dot.ok { background: var(--sage); }
.df-feed-dot.bad { background: var(--danger); }
.df-feed-ev { font-size: 13px; font-weight: 600; color: var(--ink); }
.df-feed-detail { font-size: 12px; color: var(--ink-2); margin-top: 1px;
    overflow-wrap: anywhere; word-break: break-word; }
.df-feed-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------------- Sunucu anlık durumu (canlı) ---------------- */
.df-sysbar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.df-sys {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 16px 18px; box-shadow: var(--sh-sm);
}
.df-sys-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.df-sys-ico {
    width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; font-size: 17px;
    display: grid; place-items: center; background: var(--accent-soft); color: var(--ink);
}
.df-sys-ico.info { background: var(--slate-soft); color: var(--slate); }
.df-sys-ico.ok   { background: var(--sage-soft); color: var(--sage); }
.df-sys-ico.warn { background: var(--ochre-soft); color: var(--ochre); }
.df-sys-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.df-sys-val { margin-left: auto; font-family: var(--fd); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.df-sys-bar { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.df-sys-bar span { display: block; height: 100%; border-radius: 5px; background: var(--sage);
    transition: width .5s cubic-bezier(.4,0,.2,1), background .3s; }
.df-sys-sub { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.df-sys-live { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--sage);
    display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: .06em; }
.df-sys-live i { animation: dfPulse 1.6s ease-in-out infinite; }
@keyframes dfPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.df-sys-net { display: flex; gap: 18px; font-size: 15px; }
.df-sys-net b { font-family: var(--fd); font-weight: 700; letter-spacing: -.02em; }

/* ---------------- Panel: şablon kısayolu ---------------- */
.df-tpl-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding: 18px 24px; }

/* ---------------- Şablonlar sayfası: araç çubuğu + filtre çipleri ---------------- */
.df-tpl-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; }
.df-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.df-fchip {
    font-family: var(--ff); font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 6px 13px; border-radius: 20px; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink-2); transition: all var(--t);
    display: inline-flex; align-items: center; gap: 6px;
}
.df-fchip:hover { border-color: var(--ink); color: var(--ink); }
.df-fchip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-theme="dark"] .df-fchip.on { color: #11110f; }
.df-fchip em { font-style: normal; font-size: 10.5px; opacity: .7; }
.df-stats-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------------- Şablonlar: gelişmiş kartlar ---------------- */
.df-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.df-tplx {
    position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-sm); display: flex; flex-direction: column; overflow: hidden;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    --acc: var(--ink); --acc-soft: var(--accent-soft);
}
.df-tplx.c-indigo { --acc: var(--slate); --acc-soft: var(--slate-soft); }
.df-tplx.c-teal   { --acc: var(--sage);  --acc-soft: var(--sage-soft); }
.df-tplx.c-amber  { --acc: var(--ochre); --acc-soft: var(--ochre-soft); }
.df-tplx.c-rose   { --acc: var(--clay);  --acc-soft: var(--clay-soft); }
.df-tplx.c-sky    { --acc: var(--plum);  --acc-soft: var(--plum-soft); }
.df-tplx:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--acc); }
.df-tplx-body { padding: 24px 24px 8px; flex: 1; }
.df-tplx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.df-tplx-ico {
    width: 44px; height: 44px; border-radius: var(--r-sm); flex: none; font-size: 20px;
    display: grid; place-items: center; background: var(--acc-soft); color: var(--acc);
}
.df-tplx-cat {
    font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--acc); padding-top: 5px; text-align: right;
}
.df-tplx-title {
    font-family: var(--fd); font-size: 16.5px; font-weight: 600; margin: 0 0 6px;
    letter-spacing: -.015em; line-height: 1.3; color: var(--ink);
}
.df-tplx-file {
    color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; word-break: break-all;
    display: flex; align-items: center; gap: 6px; margin-bottom: 20px;
}
.df-tplx-file i { font-size: 13px; flex: none; opacity: .8; }
.df-tplx-meta {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    border-top: 1px solid var(--line); padding-top: 16px;
}
.df-tplx-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.df-tplx-meta i { font-size: 14px; color: var(--muted); }
.df-tplx-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px 20px; }
.df-tplx-actions > * { min-width: 0; }
.df-tplx-actions .df-act-primary { flex: 1 1 100%; }
.df-tplx-actions .df-act-icon { flex: 1 1 0; }
.df-tplx-actions form { display: flex; flex: 1 1 0; }
.df-tplx-actions form .df-btn { width: 100%; }

/* Yeni şablon ekleme kartı */
.df-tplx-add {
    align-items: center; justify-content: center; text-align: center; text-decoration: none;
    border: 1.5px dashed var(--line-2); background: transparent; box-shadow: none;
    padding: 30px 20px; min-height: 230px;
}
.df-tplx-add::before { display: none; }
.df-tplx-add:hover { border-color: var(--ink); background: var(--surface); transform: translateY(-3px); }
.df-tplx-add-ico {
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 27px;
    background: var(--accent-soft); color: var(--ink); margin-bottom: 12px;
}
.df-tplx-add-txt { font-size: 15px; font-weight: 650; color: var(--ink); }
.df-tplx-add-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Çipler */
.df-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3.5px 10px; border-radius: 3px; }
.df-chip.c-indigo { background: var(--slate-soft); color: var(--slate); }
.df-chip.c-teal   { background: var(--sage-soft); color: var(--sage); }
.df-chip.c-amber  { background: var(--ochre-soft); color: var(--ochre); }
.df-chip.c-rose   { background: var(--clay-soft); color: var(--clay); }
.df-chip.c-sky    { background: var(--plum-soft); color: var(--plum); }
.df-chip.ghost { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.df-var {
    font-family: ui-monospace, "Cascadia Code", monospace; font-size: 12px;
    background: var(--accent-soft); color: var(--ink); padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}

/* ---------------- Tablo ---------------- */
.df-table-wrap { overflow-x: auto; }
.df-table { width: 100%; border-collapse: collapse; }
.df-table thead th {
    text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    padding: 13px 24px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.df-table tbody td { padding: 14px 24px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.df-table tbody tr { transition: background var(--t); }
.df-table tbody tr:hover { background: var(--surface-2); }
.df-table tbody tr:last-child td { border-bottom: none; }
.df-table .strong { font-weight: 600; }
.df-table .dim { color: var(--muted); font-size: 12.5px; }
.df-table .df-input, .df-table .df-select { padding: 8px 11px; font-size: 13px; }

/* ---------------- Adım göstergesi ---------------- */
.df-steps { display: flex; align-items: center; gap: 0; margin-bottom: 24px; flex-wrap: wrap; }
.df-step { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; font-weight: 600; }
.df-step .dot {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 700; border: 1.5px solid var(--line-2);
    background: var(--surface); color: var(--muted); transition: all var(--t);
}
.df-step.done .dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.df-step.now { color: var(--ink); }
.df-step.now .dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.df-step-line { width: 40px; height: 1.5px; background: var(--line-2); margin: 0 12px; }

/* ---------------- Uyarılar ---------------- */
.df-alert { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 18px; font-size: 13.5px; border: 1px solid transparent; }
.df-alert i { font-size: 17px; margin-top: 1px; flex: none; }
.df-alert.ok    { background: var(--ok-soft); color: var(--ok); }
.df-alert.error { background: var(--danger-soft); color: var(--danger); }
.df-alert.info  { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.df-alert.warn  { background: var(--warn-soft); color: var(--warn); }

/* ---------------- Boş durum ---------------- */
.df-empty { text-align: center; padding: 62px 24px; }
.df-empty-ico {
    width: 72px; height: 72px; margin: 0 auto 18px; border-radius: var(--r);
    background: var(--accent-soft); color: var(--ink); display: grid; place-items: center; font-size: 32px;
}
.df-empty h3 { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
.df-empty p { color: var(--muted); margin: 0 auto; max-width: 380px; }

/* ---------------- Başarı ---------------- */
.df-success-ring {
    width: 84px; height: 84px; border-radius: 50%; margin: 6px auto 20px;
    display: grid; place-items: center; font-size: 40px;
    background: var(--ok-soft); color: var(--ok); position: relative;
    animation: dfPop .5s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes dfPop { from { transform: scale(.6); opacity: 0; } }

/* ---------------- FilePond (sürükle-bırak) ---------------- */
.filepond--root { font-family: var(--ff); margin-bottom: 0; }
.filepond--panel-root { background: var(--surface-2); border: 1.5px dashed var(--line-2); border-radius: var(--r); transition: border var(--t), background var(--t); }
.filepond--root:hover .filepond--panel-root { border-color: var(--ink); }
.filepond--drop-label { color: var(--muted); font-size: 13.5px; }
.filepond--label-action { color: var(--ink); text-decoration-color: var(--ink); font-weight: 600; }
.filepond--item-panel { background: var(--ink); border-radius: var(--r-sm); }

/* ---------------- SweetAlert / flatpickr tema uyumu ---------------- */
.df-swal { border-radius: var(--r) !important; font-family: var(--ff) !important; }
[data-theme="dark"] .df-swal { background: var(--surface) !important; color: var(--ink) !important; }
[data-theme="dark"] .df-swal .swal2-title, [data-theme="dark"] .df-swal .swal2-html-container { color: var(--ink) !important; }
[data-theme="dark"] .flatpickr-calendar { background: var(--surface-2); border-color: var(--line); box-shadow: var(--sh-lg); }
[data-theme="dark"] .flatpickr-calendar * { color: var(--ink-2); fill: var(--ink-2); }
[data-theme="dark"] .flatpickr-day.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------------- PDF önizleme ---------------- */
.df-pdf-frame { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }

/* ---------------- Hızlı şablonlaştırma sihirbazı ---------------- */
.df-wizard { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.df-doc-view {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 34px 40px; box-shadow: var(--sh-md); line-height: 1.75; font-size: 14px;
    color: #1a1a1a; max-height: 74vh; overflow-y: auto; user-select: text;
}
[data-theme="dark"] .df-doc-view, [data-theme="ocean"] .df-doc-view { background: #f7f6f2; color: #1a1a1a; }
.df-doc-view p { margin: 0 0 9px; }
.df-doc-view p.dw-empty { margin: 0 0 9px; min-height: 6px; }
.df-doc-view .dw-tbl {
    border-collapse: collapse; width: 100%; margin: 6px 0 14px; font-size: 13.5px;
}
.df-doc-view .dw-tbl td {
    border: 1px solid #cfccc4; padding: 6px 10px; vertical-align: top; color: #1a1a1a;
}
.df-doc-view mark { background: #fde68a; color: #92400e; padding: 1px 4px; border-radius: 3px; cursor: pointer; font-family: ui-monospace, monospace; font-size: .88em; font-weight: 600; white-space: nowrap; }
.df-wizard-side { position: sticky; top: 90px; align-self: start; }
@media (max-width: 900px) { .df-wizard { grid-template-columns: 1fr; } }

/* ---------------- Yardımcılar ---------------- */
.df-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.df-between { justify-content: space-between; }
.df-center { justify-content: center; }
.df-mono { font-family: ui-monospace, monospace; }
.df-muted { color: var(--muted); }
.df-mt { margin-top: 18px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
    .df-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-102%); transition: transform .22s cubic-bezier(.4,0,.2,1); box-shadow: var(--sh-lg); }
    .df-sidebar.open { transform: none; }
    .df-scrim.show { display: block; }
    .df-burger { display: grid; }
    .df-topbar { padding: 16px 18px 14px; }
    .df-content { padding: 20px 18px 36px; }
}


/* ================= ARŞİV (klasör ağacı + önizleme) ================= */
.df-arch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; }
.df-arch-toolbar code { font-family: ui-monospace, monospace; background: var(--surface-2); padding: 2px 7px; border-radius: 4px; font-size: 12px; }

.df-arch { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .df-arch { grid-template-columns: 1fr; } }

/* Ağaç */
.df-arch-tree { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden; max-height: 78vh; display: flex; flex-direction: column; }
.df-arch-tree-head { padding: 13px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; letter-spacing: .02em; }
.df-arch-tree-head i { color: var(--muted); }
.df-arch-tree-body { overflow-y: auto; padding: 6px; }

.df-tnode-row { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--ink-2); transition: background var(--t); white-space: nowrap; }
.df-tnode-row:hover { background: var(--surface-2); color: var(--ink); }
.df-tnode-row.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.df-tnode-caret { width: 16px; flex: none; display: inline-flex; justify-content: center; color: var(--muted); transition: transform var(--t); }
.df-tnode-caret.open { transform: rotate(90deg); }
.df-tnode-fico { color: var(--ochre); font-size: 16px; flex: none; }
.df-tnode-name { overflow: hidden; text-overflow: ellipsis; }
.df-tnode-children { padding-left: 16px; }

/* İçerik paneli */
.df-arch-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); min-height: 320px; }
.df-arch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.df-arch-actions { display: flex; gap: 8px; flex: none; }
.df-arch-crumb { font-size: 13px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.df-crumb-link { cursor: pointer; color: var(--ink-2); font-weight: 500; }
.df-crumb-link:hover { color: var(--ink); text-decoration: underline; }
.df-crumb-cur { color: var(--ink); font-weight: 650; }
.df-crumb-sep { color: var(--line-2); }
.df-arch-content { padding: 16px 20px 22px; }
.df-arch-sec { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 12px; }
.df-arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.df-arch-item { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 12px 14px; text-align: center; cursor: pointer; transition: all var(--t); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.df-arch-item:hover { border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-2px); }
.df-arch-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--muted); display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; padding: 0; }
.df-arch-item:hover .df-arch-del { display: inline-flex; }
.df-arch-del:hover { background: var(--danger-soft); color: var(--danger); }
.df-arch-ico { width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 24px; margin-bottom: 6px; background: var(--accent-soft); color: var(--ink); }
.df-arch-ico.c-rose { background: var(--clay-soft); color: var(--clay); }
.df-arch-ico.c-indigo { background: var(--slate-soft); color: var(--slate); }
.df-arch-ico.c-teal { background: var(--sage-soft); color: var(--sage); }
.df-arch-ico.c-amber { background: var(--ochre-soft); color: var(--ochre); }
.df-arch-ico.c-sky { background: var(--plum-soft); color: var(--plum); }
.df-arch-item-name { font-size: 12.5px; font-weight: 550; color: var(--ink); word-break: break-word; line-height: 1.35; }
.df-arch-item-sub { font-size: 10.5px; color: var(--muted); }


/* ================= TAM GENİŞLİK ================= */
.df-content.wide { max-width: none; }

/* ================= ARŞİV — Dosya Yöneticisi ================= */
.df-fm { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden; min-height: 70vh; display: flex; flex-direction: column; }
.df-fm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.df-fm-crumb { font-size: 14px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 3px; min-width: 0; font-weight: 500; }
.df-fm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.df-fm-search { width: 260px; max-width: 100%; }
.df-fm-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.df-fm-sub .df-muted { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }

.df-fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; padding: 18px 22px 24px; }
.df-fm-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 18px 12px 15px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.df-fm-item:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.df-fm-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 27px; margin-bottom: 4px; background: var(--accent-soft); color: var(--ink); }
.df-fm-ico.folder { background: var(--ochre-soft); color: var(--ochre); }
.df-fm-ico.c-rose { background: var(--clay-soft); color: var(--clay); }
.df-fm-ico.c-indigo { background: var(--slate-soft); color: var(--slate); }
.df-fm-ico.c-teal { background: var(--sage-soft); color: var(--sage); }
.df-fm-ico.c-amber { background: var(--ochre-soft); color: var(--ochre); }
.df-fm-ico.c-sky { background: var(--plum-soft); color: var(--plum); }
.df-fm-name { font-size: 12.5px; font-weight: 550; color: var(--ink); line-height: 1.35; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.df-fm-meta { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.df-fm-del { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 7px; border: none;
    background: var(--surface-2); color: var(--muted); display: none; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; padding: 0; transition: background var(--t), color var(--t); }
.df-fm-item:hover .df-fm-del { display: inline-flex; }
.df-fm-del:hover { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 560px) { .df-fm-del { display: inline-flex; } }


/* ================= ÇÖP KUTUSU ================= */
.df-trash-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 22px; }
.df-trash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.df-trash-item { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 18px 18px 16px; transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.df-trash-item:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--sh-md); }

.df-trash-head { display: flex; align-items: center; gap: 13px; }
.df-trash-ico { width: 46px; height: 46px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); color: var(--ink); }
.df-trash-ico.c-rose { background: var(--clay-soft); color: var(--clay); }
.df-trash-ico.c-indigo { background: var(--slate-soft); color: var(--slate); }
.df-trash-ico.c-teal { background: var(--sage-soft); color: var(--sage); }
.df-trash-ico.c-amber { background: var(--ochre-soft); color: var(--ochre); }
.df-trash-ico.c-sky { background: var(--plum-soft); color: var(--plum); }
.df-trash-htext { min-width: 0; flex: 1; }
.df-trash-title { font-size: 14.5px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.df-trash-type { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.df-trash-mid { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.df-trash-mid .df-chip i { margin-right: 3px; }
.df-trash-date { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.df-trash-actions { display: flex; align-items: center; gap: 8px; }
.df-trash-restore { flex: 1; }


/* ===== Yükleme ilerleme çubuğu (SweetAlert içinde) ===== */
.df-up-wrap { width: 100%; height: 12px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.df-up-bar { width: 0%; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--sage), var(--slate)); transition: width .2s linear; }


/* ===== Configure: belge metni referans paneli ===== */
.df-doctext { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--line); padding: 12px 24px 18px; background: var(--surface-2); }
.df-doctext p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0 0 6px; padding: 7px 11px; border-radius: 6px; cursor: pointer; transition: background var(--t); }
.df-doctext p:hover { background: var(--surface); box-shadow: var(--sh-sm); }

/* ================================================================
   GENISLETME: Arama sonuclari, Dava Dosyalari, AI panel, Bildirimler
   ================================================================ */

/* ---------------- Arama sonuclari (search.html) ---------------- */
.sx-list { display: flex; flex-direction: column; }
.sx-item {
    display: flex; align-items: center; gap: 14px; padding: 13px 18px;
    border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
    transition: background var(--t);
}
.sx-item:first-child { border-top: none; }
.sx-item:hover { background: var(--surface-2); }
.sx-ico {
    width: 38px; height: 38px; flex: none; border-radius: var(--r);
    background: var(--accent-soft); color: var(--ink); display: grid; place-items: center; font-size: 18px;
}
.sx-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sx-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.sx-snip { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- Filtre cubugu ---------------- */
.df-filterbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.df-filterbar .df-input { height: 40px; }

/* ---------------- Dava dosyalari liste ---------------- */
.df-matters td { vertical-align: middle; }
.df-mt-title { font-weight: 600; color: var(--ink); }
.df-matters tbody tr:hover { background: var(--surface-2); }

/* Durum rozetleri */
.df-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px;
    border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.df-status.lg { font-size: 13.5px; padding: 6px 15px; }
.df-status.s-open { background: var(--sage-soft); color: var(--sage); }
.df-status.s-pending { background: var(--ochre-soft); color: var(--ochre); }
.df-status.s-closed { background: var(--accent-soft); color: var(--muted); }
.df-status.s-archived { background: var(--slate-soft); color: var(--slate); }

/* Dava dosyasi detay hero */
.df-mt-hero { display: flex; flex-direction: column; gap: 16px; }
.df-mt-hero-main { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.df-mt-meta {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px 22px; flex: 1;
}
.df-mt-meta > div { display: flex; flex-direction: column; gap: 2px; }
.df-mt-meta .df-muted { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.df-mt-meta b { font-size: 14px; color: var(--ink); font-weight: 600; }
.df-mt-desc {
    padding: 14px 16px; background: var(--surface-2); border-radius: var(--r);
    font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.6;
}

/* ---------------- Sekmeler ---------------- */
.df-tabs { display: flex; gap: 4px; margin: 18px 0 14px; border-bottom: 1px solid var(--line); }
.df-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--muted); font-weight: 600; font-size: 13.5px; cursor: pointer;
    font-family: var(--ff); transition: color var(--t), border-color var(--t);
}
.df-tab:hover { color: var(--ink); }
.df-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.df-tabpane { display: none; }
.df-tabpane.on { display: block; }

/* Baglama / not cubuklari */
.df-linkbar, .df-notebar { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.df-notebar textarea { flex: 1; min-width: 240px; resize: vertical; }
.df-linklist { display: flex; flex-direction: column; margin-top: 14px; }
.df-linkitem {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-top: 1px solid var(--line);
}
.df-linkitem:first-child { border-top: none; }
.df-linkico {
    width: 34px; height: 34px; flex: none; border-radius: var(--r);
    background: var(--accent-soft); color: var(--ink); display: grid; place-items: center; font-size: 16px;
}
.df-linktxt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); word-break: break-word; }

/* Notlar */
.df-notelist { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.df-note { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r); border: 1px solid var(--line); }
.df-note-body { font-size: 13.5px; color: var(--ink); white-space: pre-wrap; line-height: 1.55; }
.df-note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.df-note-foot time { font-size: 12px; color: var(--muted); }

/* ---------------- AI panel ---------------- */
.df-ai-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.df-ai-ask { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.df-ai-ask .df-input { flex: 1; }
.df-ai-out { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.df-ai-out-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}
.df-ai-text {
    margin: 0; padding: 16px; font-family: var(--ff); font-size: 13.5px; line-height: 1.65;
    color: var(--ink); white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto;
}
.df-spin { display: inline-block; animation: dfspin 1s linear infinite; }
@keyframes dfspin { to { transform: rotate(360deg); } }

/* ---------------- Bildirim merkezi ---------------- */
.df-notif { position: relative; }
.df-notif-badge {
    position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
}
.df-notif-menu {
    position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 88vw;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all var(--t); z-index: 60; overflow: hidden;
}
.df-notif.open .df-notif-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.df-notif-head {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--ink);
}
.df-notif-head button {
    background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; font-family: var(--ff);
}
.df-notif-head button:hover { color: var(--ink); }
.df-notif-list { max-height: 60vh; overflow: auto; }
.df-notif-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.df-notif-item {
    display: flex; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--line);
    text-decoration: none; color: var(--ink); transition: background var(--t);
}
.df-notif-item:hover { background: var(--surface-2); }
.df-notif-item.unread { background: var(--accent-soft); }
.df-notif-ico {
    width: 32px; height: 32px; flex: none; border-radius: var(--r);
    background: var(--surface-2); color: var(--ink); display: grid; place-items: center; font-size: 16px;
}
.df-notif-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.df-notif-txt b { font-size: 13px; font-weight: 600; }
.df-notif-txt span { font-size: 12px; color: var(--ink-2); }
.df-notif-txt time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------------- Kurtarma kodlari ---------------- */
.df-recovery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px; margin-top: 12px;
}
.df-recovery-code {
    font-family: ui-monospace, monospace; font-size: 14px; text-align: center;
    padding: 8px 6px; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r); color: var(--ink); letter-spacing: .05em;
}

/* ---------------- Arsiv genel istatistik seridi ----------------
   Not: Selektorler .df-fm-stats altina kapsandi; dashboard'daki .df-stat
   kartlarinin stilini EZMEMESI icin (mukerrer tanim cakismasi giderildi). */
.df-fm-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; margin: 4px 0 14px;
}
.df-fm-stats .df-stat {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.df-fm-stats .df-stat-ico {
    width: 40px; height: 40px; flex: none; border-radius: var(--r);
    display: grid; place-items: center; font-size: 20px;
}
.df-fm-stats .df-stat.s-pdf .df-stat-ico { background: var(--clay-soft); color: var(--clay); }
.df-fm-stats .df-stat.s-docx .df-stat-ico { background: var(--slate-soft); color: var(--slate); }
.df-fm-stats .df-stat.s-img .df-stat-ico { background: var(--ochre-soft); color: var(--ochre); }
.df-fm-stats .df-stat.s-other .df-stat-ico { background: var(--accent-soft); color: var(--ink); }
.df-fm-stats .df-stat.s-total .df-stat-ico { background: var(--sage-soft); color: var(--sage); }
.df-fm-stats .df-stat-txt { display: flex; flex-direction: column; min-width: 0; }
.df-fm-stats .df-stat-txt b { font-size: 22px; font-weight: 750; line-height: 1.1; color: var(--ink); letter-spacing: -.5px; }
.df-fm-stats .df-stat-txt small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- Arama arka plan indeksleme ilerlemesi ---------------- */
.df-reprog {
    margin-top: 14px; padding: 14px 16px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-lg);
}
.df-reprog-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}

/* ---------------- PIN onay modalı (çöp kalıcı silme) ---------------- */
.df-pin-swal { border-radius: var(--r-lg) !important; padding: 8px 6px 18px !important; max-width: 420px; }
.pin-modal { display: flex; flex-direction: column; align-items: center; padding: 8px 6px 0; }
.pin-ico {
    width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
    background: var(--danger-soft); color: var(--danger); font-size: 32px; margin-bottom: 14px;
}
.pin-title { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.pin-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0 4px 20px; text-align: center; }
.pin-boxes { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.pin-box {
    width: 56px; height: 66px; text-align: center; font-size: 30px; font-weight: 700;
    color: var(--ink); background: var(--surface-2); border: 2px solid var(--line);
    border-radius: var(--r-lg); outline: none; transition: border-color var(--t), box-shadow var(--t), background var(--t);
    font-family: var(--ff); caret-color: var(--danger);
}
.pin-box:focus {
    border-color: var(--danger); background: var(--surface);
    box-shadow: 0 0 0 4px var(--danger-soft);
}
.pin-hint {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
    color: var(--danger); margin: 0; font-weight: 600;
}
.df-pin-actions { gap: 10px !important; margin-top: 6px !important; }
.df-pin-swal .df-btn { min-width: 130px; justify-content: center; }

/* ---------------- Hızlı şablonlaştırma sihirbazı v2 (tam ekran, gerçek PDF) ---------------- */
.df-wizard2 {
    display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-top: 16px;
    align-items: start;
}
.df-wizard2-doc {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-sm); padding: 14px 16px;
}
.df-wizard2-doc-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px; font-weight: 650; font-size: 14px; color: var(--ink);
}
.df-wizard2-frame {
    width: 100%; height: calc(100vh - 260px); min-height: 520px;
    border: 1px solid var(--line); border-radius: var(--r); background: #f7f6f2;
}
.df-wizard2-side { position: sticky; top: 90px; align-self: start; }
@media (max-width: 1000px) {
    .df-wizard2 { grid-template-columns: 1fr; }
    .df-wizard2-side { position: static; }
    .df-wizard2-frame { height: 70vh; }
}

/* ---------------- Sihirbaz toplu işaretleme tablosu ---------------- */
.df-bulk td { vertical-align: middle; }
.df-bulk-txt { font-size: 13px; color: var(--ink); word-break: break-word; }
.df-bulk .bulk-sel { max-width: 340px; }
.df-bulk tbody tr:hover { background: var(--surface-2); }

/* ================= AI SOHBET ================= */
.df-chat {
    display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px;
    height: calc(100vh - 190px); min-height: 460px; min-width: 0;
}
.df-chat-main, .df-chat-msgs, .df-chat-composer { min-width: 0; }
.df-chat-inputrow textarea { min-width: 0; }
.df-chat-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.df-chat-convs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.df-chat-conv {
    display: flex; align-items: center; border-radius: var(--r);
    transition: background var(--t);
}
.df-chat-conv:hover { background: var(--surface-2); }
.df-chat-conv.on { background: var(--accent-soft); }
.df-chat-conv-link {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px; flex: 1; min-width: 0;
    text-decoration: none; color: var(--ink); font-size: 13px;
}
.df-chat-conv-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-chat-del {
    background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px 9px;
    opacity: 0; transition: opacity var(--t), color var(--t);
}
.df-chat-conv:hover .df-chat-del { opacity: 1; }
.df-chat-del:hover { color: var(--danger); }

.df-chat-main {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-sm); overflow: hidden;
}
.df-chat-msgs { flex: 1; overflow-y: auto; padding: 22px 22px 8px; display: flex; flex-direction: column; gap: 18px; }
.df-chat-welcome { text-align: center; margin: auto; padding: 30px; }
.df-chat-welcome h3 { margin: 6px 0 4px; font-size: 18px; }

.df-msg { display: flex; gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; }
.df-msg-av {
    width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font-size: 17px; background: var(--surface-2); color: var(--ink);
}
.df-msg.user .df-msg-av { background: var(--accent); color: var(--accent-ink); }
.df-msg.assistant .df-msg-av { background: var(--sage-soft); color: var(--sage); }
.df-msg-body {
    flex: 1; min-width: 0; font-size: 14px; line-height: 1.7; color: var(--ink);
    word-wrap: break-word; padding-top: 5px;
}
.df-msg-model {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--sage);
    margin-bottom: 3px; text-transform: uppercase;
}
.df-msg-text { white-space: pre-wrap; word-wrap: break-word; }
.df-msg.err .df-msg-text { color: var(--danger); }

.df-chat-composer { border-top: 1px solid var(--line); padding: 12px 16px 14px; background: var(--surface); max-width: 100%; overflow: hidden; }
.df-chat-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.df-chat-tools .df-select { flex: 1 1 130px; width: auto; min-width: 0; max-width: 210px; height: 34px; font-size: 12.5px; }
.df-chat-inputrow { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.df-chat-attach {
    width: 42px; height: 42px; flex: none; border: 1px solid var(--line); border-radius: var(--r);
    display: grid; place-items: center; cursor: pointer; color: var(--ink-2); font-size: 19px;
    background: var(--surface-2);
}
.df-chat-attach:hover { color: var(--ink); border-color: var(--line-2); }
.df-chat-inputrow textarea {
    flex: 1; resize: none; max-height: 180px; line-height: 1.5; padding: 11px 14px;
}
.df-chat-send { width: 44px; height: 44px; flex: none; padding: 0; justify-content: center; font-size: 18px; }

@media (max-width: 900px) {
    .df-chat { grid-template-columns: 1fr; height: auto; }
    .df-chat-side { max-height: 200px; }
    .df-chat-main { height: 70vh; }
}

/* ===== AI Sohbet — tam ekran düzen + sürükle-bırak + ek önizleme ===== */
.df-content.chatpage { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 14px; display: flex; flex-direction: column; }
.df-content.chatpage + .df-footer { display: none; }
.df-content.chatpage .df-chat { flex: 1 1 auto; height: auto; min-height: 0; }

.df-chat-main { position: relative; overflow: hidden; }
.df-chat-drop {
    position: absolute; inset: 8px; z-index: 20; border: 2px dashed var(--accent);
    border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 82%, transparent);
    display: none; place-items: center; text-align: center; color: var(--ink); font-weight: 650; font-size: 15px;
}
.df-chat-drop.on { display: grid; }
.df-chat-drop i { font-size: 34px; }

.df-chat-attachbox { margin-bottom: 8px; }
.df-attach-chip {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); max-width: 100%;
}
.df-attach-chip img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.df-attach-ico { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); background: var(--clay-soft); color: var(--clay); display: grid; place-items: center; font-size: 17px; }
.df-attach-name { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.df-attach-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; font-size: 15px; }
.df-attach-x:hover { color: var(--danger); }

/* ---------------- Ayarlar: özel AI rolleri satırı ---------------- */
.df-persona-row {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
    border-top: 1px solid var(--line); flex-wrap: wrap;
}
.df-persona-row textarea { flex: 1 1 320px; min-width: 0; resize: vertical; }

/* ---------------- Arşiv: dosya oluşturma tarihi etiketi ---------------- */
.df-fm-date {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: 10.5px; color: var(--muted); white-space: nowrap;
}
.df-fm-date i { font-size: 11px; }
/* Meta veriden okunan tarih vurgulanır (dosya tarihi soluk kalır) */
.df-fm-date.meta { color: var(--slate); font-weight: 600; }

/* ================================================================
   === Kronoloji (kr-) ===
   Modül: Kronoloji & Evrak Planı · /kronoloji
   Kendi kendine yeten sınıflar: df-* kurallarına BAĞIMLI DEĞİLDİR,
   yalnızca :root tema değişkenlerini kullanır (--surface, --ink,
   --line, --muted, --danger, --warn, --info, --ok, --ochre, --slate,
   --accent, --r, --sh-*, --t). Sabit renk kullanılmaz; böylece
   aydınlık / karanlık / gece mavisi temalarında kontrast korunur.
   ================================================================ */

/* ---------------- Sayfa iskeleti ---------------- */
.kr-page { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.kr-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden;
}
.kr-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.kr-head h2 { font-family: var(--fd); font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.kr-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.kr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Taslak ibaresi (Req 8.7) — her sayfada görünür, kapatılamaz */
.kr-draft {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.45;
    background: var(--warn-soft); color: var(--warn);
    border: 1px solid var(--line); border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
}
.kr-draft i { font-size: 16px; flex: none; }

/* ---------------- Form ---------------- */
.kr-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.kr-field { display: flex; flex-direction: column; min-width: 0; }
.kr-label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .01em; }
.kr-label .kr-req { color: var(--danger); margin-left: 2px; }
.kr-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

.kr-textarea,
.kr-date-input {
    font-family: var(--ff); background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    transition: border-color var(--t), box-shadow var(--t);
}
.kr-textarea { width: 100%; min-height: 220px; padding: 12px 14px; font-size: 14px; line-height: 1.6; resize: vertical; }
.kr-textarea::placeholder { color: var(--muted); }
.kr-textarea:focus,
.kr-date-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.kr-textarea:focus-visible,
.kr-date-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Dosya bırakma alanı */
.kr-drop {
    display: grid; place-items: center; gap: 6px; text-align: center;
    padding: 26px 18px; cursor: pointer;
    background: var(--surface-2); color: var(--ink-2);
    border: 2px dashed var(--line-2); border-radius: var(--r);
    transition: border-color var(--t), background var(--t), color var(--t);
}
.kr-drop i { font-size: 28px; color: var(--muted); }
.kr-drop small { color: var(--muted); font-size: 11.5px; }
.kr-drop:hover { border-color: var(--ink); color: var(--ink); }
.kr-drop.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.kr-drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Anahtar (web teyidi vb.) — varsayılan kapalı */
.kr-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ink); }
.kr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kr-switch > span:first-of-type {
    width: 38px; height: 21px; flex: none; position: relative;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px;
    transition: background var(--t), border-color var(--t);
}
.kr-switch > span:first-of-type::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--muted); transition: transform var(--t), background var(--t);
}
.kr-switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.kr-switch input:checked + span::after { transform: translateX(17px); background: var(--accent-ink); }
.kr-switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------- Uyarı şeridi ---------------- */
.kr-warn-list { display: flex; flex-direction: column; gap: 8px; }
.kr-warn {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; font-size: 13px; line-height: 1.5;
    border: 1px solid var(--line); border-left: 3px solid var(--muted);
    border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2);
}
.kr-warn i { font-size: 16px; flex: none; margin-top: 1px; }
.kr-warn--hata  { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }
.kr-warn--uyari { background: var(--warn-soft);   color: var(--warn);   border-left-color: var(--warn); }
.kr-warn--bilgi { background: var(--surface-2);   color: var(--ink-2);  border-left-color: var(--muted); }
.kr-warn-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    padding: 2px 7px; border-radius: 3px; flex: none;
    background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
}

/* ---------------- Sekmeler ---------------- */
.kr-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 0 22px; }
.kr-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 15px; margin-bottom: -1px; cursor: pointer;
    font-family: var(--ff); font-size: 13.5px; font-weight: 600; color: var(--muted);
    background: none; border: none; border-bottom: 2px solid transparent;
    transition: color var(--t), border-color var(--t);
}
.kr-tab:hover { color: var(--ink); }
.kr-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.kr-tab--active { color: var(--ink); border-bottom-color: var(--accent); }
/* Sekme gövdeleri: TEK mekanizma → `hidden` niteliği + `aria-hidden`.
   Varsayılan GÖRÜNÜR olmalı; aksi hâlde JS çalışmazsa hiçbir panel açılmaz
   (sunucudan gelen HTML'de ilk panel zaten açıktır). */
.kr-panel { display: block; padding: 18px 22px; }
.kr-panel[aria-hidden="false"], .kr-panel.kr-panel--active { display: block; }
.kr-panel[hidden], .kr-panel[aria-hidden="true"] { display: none; }

/* ---------------- Tablolar ---------------- */
.kr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kr-table caption { caption-side: top; text-align: left; padding: 0 0 10px; font-size: 12px; color: var(--muted); }
.kr-th {
    text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
    padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.kr-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); }
.kr-td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.kr-table tbody tr:last-child .kr-td { border-bottom: none; }
.kr-table tbody tr:hover { background: var(--surface-2); }

/* Tarihsiz satır: soluk değil, işaretli (erişilebilirlik için renk tek işaret değildir;
   şablon ayrıca metin/ikon verir) */
.kr-row--dateless { box-shadow: inset 3px 0 0 var(--ochre); }
.kr-row--dateless .kr-td:first-child { font-style: italic; }
/* Sabitlenmiş satır: motor tarafından değiştirilmez */
.kr-row--pinned { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }

.kr-date-input { width: 122px; padding: 6px 9px; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Güven noktası: kesin / tahmini / aralık */
.kr-conf {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.kr-conf::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.kr-conf--kesin::before   { background: var(--ok); }
.kr-conf--tahmini::before { background: var(--ochre); }
.kr-conf--aralik::before  { background: var(--slate); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--slate); }
.kr-conf--kesin   { color: var(--ok); }
.kr-conf--tahmini { color: var(--ochre); }
.kr-conf--aralik  { color: var(--slate); }

/* Sabitle kilidi */
.kr-pin {
    display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
    cursor: pointer; font-size: 15px; line-height: 1;
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    transition: color var(--t), background var(--t), border-color var(--t);
}
.kr-pin:hover { color: var(--ink); border-color: var(--line-2); }
.kr-pin:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kr-pin[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Genişleyen kural izi (<details>) */
.kr-trace { font-size: 12px; color: var(--ink-2); }
.kr-trace > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.kr-trace > summary::-webkit-details-marker { display: none; }
.kr-trace > summary::after { content: "▾"; font-size: 10px; transition: transform var(--t); }
.kr-trace[open] > summary::after { transform: rotate(180deg); }
.kr-trace > summary:hover { color: var(--ink); }
.kr-trace > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.kr-trace p, .kr-trace div {
    margin: 7px 0 0; padding: 9px 11px; white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* Anlatımdan alıntı (dayanak) */
.kr-quote {
    margin: 6px 0 0; padding: 6px 0 6px 11px;
    font-size: 12.5px; font-style: italic; line-height: 1.5; color: var(--muted);
    border-left: 2px solid var(--line-2);
}

/* ---------------- Zaman çizelgesi (saf CSS, JS kütüphanesi yok) ---------------- */
.kr-timeline { position: relative; margin: 0; padding: 4px 0 4px 26px; list-style: none; }
.kr-timeline::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 7px;
    width: 1px; background: var(--line-2);
}
.kr-tl-item { position: relative; padding: 0 0 20px 4px; }
.kr-tl-item:last-child { padding-bottom: 2px; }
.kr-tl-dot {
    position: absolute; left: -23px; top: 5px;
    width: 11px; height: 11px; border-radius: 50%; flex: none;
    background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2);
}
.kr-tl-date {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--muted); font-variant-numeric: tabular-nums;
}
.kr-tl-body { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin-top: 2px; }
.kr-tl-body strong { font-weight: 650; }

/* ---------------- SSE ilerleme göstergesi ---------------- */
.kr-progress { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; }
.kr-stage {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--muted);
    padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2);
}
.kr-stage i { font-size: 15px; flex: none; }
.kr-stage--done { color: var(--ok); border-color: var(--line); background: var(--ok-soft); }
.kr-stage--active { color: var(--ink); border-color: var(--line-2); background: var(--surface); font-weight: 600; }
.kr-stage--active i { animation: kr-spin 1.1s linear infinite; }
@keyframes kr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .kr-stage--active i { animation: none; }
}

/* ---------------- Küçük ekran ---------------- */
@media (max-width: 900px) {
    .kr-form, .kr-panel, .kr-progress { padding: 16px 14px; }
    .kr-tabs { padding: 0 14px; }
    .kr-head { padding: 14px; }
    .kr-th, .kr-td { padding: 9px 10px; }
    .kr-date-input { width: 108px; }
}
.kr-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.kr-panel { padding: 18px 22px 22px; }
.kr-pad { padding: 16px 22px 20px; }
.kr-subhead { font-family: var(--fd); font-size: 13px; font-weight: 650; margin: 20px 0 8px; }

/* ---------------- Butonlar ---------------- */
.kr-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: var(--ff); font-size: 13px; font-weight: 600; line-height: 1;
    padding: 10px 15px; white-space: nowrap;
    background: var(--accent); color: var(--accent-ink);
    border: 1px solid var(--accent); border-radius: var(--r-sm);
    transition: opacity var(--t), background var(--t), color var(--t), border-color var(--t);
}
.kr-btn:hover { opacity: .88; }
.kr-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kr-btn[disabled] { opacity: .5; cursor: not-allowed; }
.kr-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.kr-btn.ghost:hover { background: var(--surface-2); opacity: 1; }
.kr-btn.sm { padding: 7px 11px; font-size: 12px; }

.kr-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 30px; height: 30px; flex: none; font-size: 15px;
    background: var(--surface); color: var(--ink-2);
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    transition: background var(--t), color var(--t), border-color var(--t);
}
.kr-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.kr-iconbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kr-iconbtn[disabled] { opacity: .45; cursor: not-allowed; }
.kr-iconbtn.on { background: var(--accent-soft); color: var(--ink); border-color: var(--ink); }
.kr-iconbtn.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

.kr-inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* ---------------- Yerleşim yardımcıları ---------------- */
.kr-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kr-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.kr-prov-note { display: inline-flex; align-items: center; gap: 6px; }
.kr-prov-note b { color: var(--ink); }
.kr-sm { padding: 6px 8px !important; font-size: 12.5px !important; }
.kr-xs { padding: 6px 6px !important; font-size: 12.5px !important; width: 62px; }
.kr-wide { width: 100%; padding: 7px 9px !important; font-size: 13px !important; }

/* ---------------- Dosya çipleri ---------------- */
.kr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.kr-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 8px; font-size: 12px; max-width: 100%;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line); border-radius: var(--r-sm);
}
.kr-chip button {
    background: none; border: none; cursor: pointer; padding: 0; line-height: 1;
    color: var(--muted); font-size: 14px;
}
.kr-chip button:hover { color: var(--danger); }
.kr-chip button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------------- Aşama göstergesi (SSE) ---------------- */
.kr-stages { margin-top: 6px; }
.kr-bar { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.kr-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.kr-stage-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.kr-stage {
    position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.kr-stage::before {
    content: ""; position: absolute; left: 5px; top: 6px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
}
.kr-stage.now { color: var(--ink); font-weight: 600; }
.kr-stage.now::before { background: var(--accent); }
.kr-stage.done { color: var(--ok); }
.kr-stage.done::before { background: var(--ok); }
.kr-stage.warn { color: var(--warn); }
.kr-stage.warn::before { background: var(--warn); }
.kr-stage.err { color: var(--danger); font-weight: 600; }
.kr-stage.err::before { background: var(--danger); }
.kr-stage.info { color: var(--info); }
.kr-stage.info::before { background: var(--info); }

.kr-spin { display: inline-block; animation: kr-spin 1s linear infinite; }
@keyframes kr-spin { to { transform: rotate(360deg); } }

/* ---------------- Tablolar ---------------- */
.kr-table-wrap { overflow-x: auto; }
.kr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kr-table thead th {
    text-align: left; white-space: nowrap; vertical-align: bottom;
    padding: 11px 12px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted);
    background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.kr-table tbody th,
.kr-table tbody td {
    padding: 11px 12px; vertical-align: top; text-align: left;
    border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.kr-table tbody th { font-weight: 600; color: var(--ink); }
.kr-table tbody tr:hover td,
.kr-table tbody tr:hover th { background: var(--accent-soft); }
.kr-table-edit tbody th,
.kr-table-edit tbody td { padding: 9px 10px; }
.kr-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-cell-center { text-align: center !important; }
.kr-cell-right { text-align: right !important; white-space: nowrap; }
.kr-cell-right > * { vertical-align: middle; }
.kr-cell-date { white-space: nowrap; }
.kr-cell-main { min-width: 260px; }
.kr-cell-basis { max-width: 260px; }
.kr-row-title a { color: var(--ink); text-decoration: none; font-weight: 650; }
.kr-row-title a:hover { text-decoration: underline; }
.kr-sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.kr-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.kr-lock-ico, .kr-pin-ico, .kr-edited { color: var(--muted); font-size: 13px; }

/* Satır, kendisine bağlı uyarıların en yüksek şiddetiyle işaretlenir (Req 6.3) */
.kr-row--hata  > *:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.kr-row--uyari > *:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.kr-row--bilgi > *:first-child { box-shadow: inset 3px 0 0 var(--muted); }
.kr-row--hata  > th, .kr-row--hata  > td { background: var(--danger-soft); }

/* ---------------- Durum etiketleri ---------------- */
.kr-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; font-size: 11.5px; font-weight: 650; white-space: nowrap;
    border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink-2);
}
.kr-badge.s-draft    { background: var(--surface-2);  color: var(--ink-2); }
.kr-badge.s-resolved { background: var(--info-soft);  color: var(--info);  border-color: var(--info); }
.kr-badge.s-approved { background: var(--ok-soft);    color: var(--ok);    border-color: var(--ok); }
.kr-badge.s-error,
.kr-badge.s-hata     { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.kr-badge.s-warn     { background: var(--warn-soft);  color: var(--warn);  border-color: var(--warn); }

/* ---------------- Uyarı satır içi + kaynak ---------------- */
.kr-warn-row { margin-top: 7px; padding: 8px 10px; font-size: 12px; }
.kr-warn-src { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------------- Kural izi / alıntı / etiket ---------------- */
.kr-trace { margin-top: 7px; }
.kr-trace > summary {
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--muted); list-style: none;
}
.kr-trace > summary::-webkit-details-marker { display: none; }
.kr-trace > summary:hover { color: var(--ink); }
.kr-trace > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kr-trace[open] > summary { color: var(--ink); }
.kr-trace pre {
    margin: 7px 0 0; padding: 9px 11px; white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.kr-quote {
    margin: 0; padding: 6px 0 6px 10px; font-size: 12px; line-height: 1.5;
    color: var(--ink-2); font-style: italic; border-left: 2px solid var(--line-2);
}
.kr-tag {
    display: inline-flex; align-items: center; gap: 4px; margin: 5px 5px 0 0;
    padding: 2px 7px; font-size: 11px; font-weight: 600;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line); border-radius: var(--r-sm);
}
.kr-tag.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

/* ---------------- Güven göstergesi ---------------- */
.kr-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.kr-conf .kr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.kr-conf--kesin .kr-dot { background: var(--ok); }
.kr-conf--tahmini .kr-dot { background: var(--warn); }
.kr-conf--aralik .kr-dot { background: var(--info); }

/* ---------------- Meta listesi ---------------- */
.kr-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px; margin: 0; padding: 16px 22px 20px;
}
.kr-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kr-meta dd { margin: 4px 0 0; font-size: 13px; color: var(--ink); }

/* ---------------- Ekleme çubuğu ---------------- */
.kr-addbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 16px 22px 4px; margin-top: 14px; border-top: 1px solid var(--line);
}
.kr-addbar .kr-field { flex: 1 1 170px; }
.kr-addbar .kr-date-input { padding: 8px 10px; font-size: 13px; }

/* ---------------- Dışa aktarma menüsü ---------------- */
.kr-menu { position: relative; display: inline-flex; }
.kr-menu-list {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 160px;
    display: none; flex-direction: column; padding: 5px;
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r-sm); box-shadow: var(--sh-md);
}
.kr-menu.open .kr-menu-list { display: flex; }
.kr-menu-list a {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    font-size: 13px; color: var(--ink-2); text-decoration: none; border-radius: var(--r-sm);
}
.kr-menu-list a:hover { background: var(--surface-2); color: var(--ink); }
.kr-menu-list a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---------------- Zaman çizelgesi (saf CSS, kütüphane yok) ---------------- */
.kr-rail { list-style: none; margin: 14px 0 0; padding: 0 0 0 4px; }
.kr-rail-item {
    position: relative; display: grid; grid-template-columns: 108px 18px 1fr;
    align-items: start; gap: 10px; padding: 0 0 16px;
}
.kr-rail-item::before {
    content: ""; position: absolute; left: 125px; top: 14px; bottom: -2px;
    width: 1px; background: var(--line-2);
}
.kr-rail-item:last-child::before { display: none; }
.kr-rail-date {
    font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 650;
    color: var(--ink-2); text-align: right; white-space: nowrap; padding-top: 1px;
}
.kr-rail-dot {
    width: 11px; height: 11px; margin: 3px 0 0 3px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--muted); position: relative; z-index: 1;
}
.kr-rail--olay .kr-rail-dot { border-color: var(--ink); }
.kr-rail--evrak .kr-rail-dot { border-color: var(--info); background: var(--info-soft); }
.kr-rail-body { min-width: 0; font-size: 13px; color: var(--ink); }
.kr-rail-kind {
    display: inline-block; margin-right: 7px; padding: 1px 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-sm);
}
.kr-rail--evrak .kr-rail-kind { color: var(--info); border-color: var(--info); background: var(--info-soft); }
.kr-flatlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kr-flatlist li { font-size: 13px; color: var(--ink-2); }

/* ---------------- Boş durum ---------------- */
.kr-empty { display: grid; place-items: center; gap: 6px; text-align: center; padding: 48px 20px; }
.kr-empty i { font-size: 30px; color: var(--muted); }
.kr-empty h3 { font-family: var(--fd); font-size: 14.5px; font-weight: 650; margin: 4px 0 0; }
.kr-empty p { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 420px; }

@media (max-width: 720px) {
    .kr-head, .kr-form, .kr-panel, .kr-pad, .kr-meta, .kr-addbar { padding-left: 16px; padding-right: 16px; }
    .kr-tabs { padding: 0 16px; }
    .kr-rail-item { grid-template-columns: 84px 18px 1fr; }
    .kr-rail-item::before { left: 101px; }
}

/* ================================================================
   === Kronoloji (kr-) · ortak sözleşme sınıfları ===
   Görev 13.5 · Requirement 8.7
   Yukarıdaki kr- bölümünü BOZMADAN tamamlar: 13.3/13.4 şablonlarının
   kullanabileceği kanonik adları tanımlar. Tümü kendi kendine yeter
   (df-* kurallarına bağımlı değildir) ve yalnızca tema değişkenlerini
   kullanır; aydınlık / karanlık / gece mavisi temalarında okunur.
   ================================================================ */

/* ---------------- Araç çubuğu (panel başlığındaki eylemler) ---------------- */
.kr-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 8px; min-width: 0;
}
.kr-toolbar > .kr-spacer { margin-right: auto; }

/* ---------------- Sekme gövdesi ---------------- */
/* .kr-panel gizlenebilir kap; .kr-panel-body içindeki içerik sarmalayıcısıdır */
.kr-panel-body { display: block; min-width: 0; }
.kr-panel-body > :first-child { margin-top: 0; }
.kr-panel-body > :last-child { margin-bottom: 0; }

/* ---------------- Satır işaretleri ---------------- */
/* Tarihsiz satır (kr-row--dateless ile aynı davranış, kanonik ad) */
.kr-row--undated > *:first-child { box-shadow: inset 3px 0 0 var(--ochre); }
.kr-row--undated > td:first-of-type,
.kr-row--undated > th:first-of-type { font-style: italic; }
/* Kanuni süre ihlali (limit_violation) */
.kr-row--violation > *:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.kr-row--violation > th,
.kr-row--violation > td { background: var(--danger-soft); }

/* ---------------- Güven noktası (bağımsız kullanım) ---------------- */
.kr-dot {
    display: inline-block; width: 8px; height: 8px; flex: none;
    border-radius: 50%; background: var(--muted);
}
.kr-dot--kesin { background: var(--ok); }
.kr-dot--tahmini { background: var(--warn); }
/* Aralık: halka biçimi — renk tek ayırt edici işaret olmasın */
.kr-dot--aralik {
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--info);
}

/* ---------------- Sabitle kilidi (açık durum) ---------------- */
.kr-pin--on {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.kr-pin--on:hover { color: var(--accent-ink); }

/* ---------------- Genişleyen iz metni tetikleyicisi ---------------- */
.kr-trace-toggle {
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    list-style: none; background: none; border: none; padding: 0;
    font-family: var(--ff); font-size: 11.5px; font-weight: 600; color: var(--muted);
    transition: color var(--t);
}
.kr-trace-toggle::-webkit-details-marker { display: none; }
.kr-trace-toggle::after { content: "\25BE"; font-size: 10px; transition: transform var(--t); }
.kr-trace-toggle:hover { color: var(--ink); }
.kr-trace-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.kr-trace[open] > .kr-trace-toggle { color: var(--ink); }
.kr-trace[open] > .kr-trace-toggle::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .kr-trace-toggle::after { transition: none; }
}

/* ---------------- Zaman çizelgesi (saf CSS, JS kütüphanesi yok) ---------------- */
.kr-timeline-item { position: relative; padding: 0 0 20px 4px; }
.kr-timeline-item:last-child { padding-bottom: 2px; }
.kr-timeline-dot {
    position: absolute; left: -23px; top: 5px; z-index: 1;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line-2);
}
.kr-timeline-item--evrak > .kr-timeline-dot { background: var(--info); }
.kr-timeline-item--undated > .kr-timeline-dot { background: var(--surface); box-shadow: 0 0 0 1px var(--ochre); }
/* Açık çizgi öğesi: .kr-timeline::before rayıyla birebir hizalıdır
   (üst üste bindiğinde görsel fark oluşmaz), yalnız son öğede kesilir */
.kr-timeline-line {
    position: absolute; left: -19px; top: 5px; bottom: 0;
    width: 1px; background: var(--line-2);
}
.kr-timeline-item:last-child > .kr-timeline-line { display: none; }

/* ---------------- Form girdileri ---------------- */
/* .kr-textarea yukarıdaki bölümde tanımlıdır; burada yalnızca devre dışı
   durumu tamamlanır — mevcut kuralları ezmemek için gruba alınmadı */
.kr-input,
.kr-select {
    width: 100%; font-family: var(--ff); font-size: 13.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r-sm); appearance: none;
    transition: border-color var(--t), box-shadow var(--t);
}
.kr-input, .kr-select { padding: 9px 11px; }
.kr-input::placeholder { color: var(--muted); }
.kr-select {
    padding-right: 32px; background-repeat: no-repeat; background-position: right 10px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b897d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.kr-input:focus, .kr-select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.kr-input:focus-visible, .kr-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.kr-input[disabled], .kr-select[disabled], .kr-textarea[disabled] {
    opacity: .6; cursor: not-allowed; background: var(--surface-2);
}
.kr-input[aria-invalid="true"], .kr-select[aria-invalid="true"] { border-color: var(--danger); }

/* ---------------- Durum etiketleri (kanonik değiştirici adlar) ---------------- */
.kr-badge--draft    { background: var(--surface-2);   color: var(--ink-2);  border-color: var(--line); }
.kr-badge--resolved { background: var(--info-soft);   color: var(--info);   border-color: var(--info); }
.kr-badge--approved { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok); }
.kr-badge--error    { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* ---------------- Sidebar kaydırma çubuğu (yalnızca .df-nav) ----------------
   Sidebar TUM temalarda koyu zemin (#11110f / #1a1915 / #0a111c) oldugu icin
   tema degiskeni yerine yarı saydam BEYAZ kullanildi: --paper dark/ocean'da
   koyu oldugundan degisken kullanilsa cubuk zeminde kaybolurdu.
   Kalinlik 6px, kose yarıcapı 3px; thumb rgba(255,255,255,.18), hover .30.
   Kapsam bilinçli olarak .df-nav ile sinirli — sayfa/panel kaydirma
   cubuklari tarayici varsayilaninda kalir. */
.df-nav {
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: rgba(255,255,255,.18) transparent; /* thumb / track */
}
.df-nav::-webkit-scrollbar { width: 6px; }
.df-nav::-webkit-scrollbar-track { background: transparent; }
.df-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.df-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }
.df-nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.df-nav::-webkit-scrollbar-corner { background: transparent; }

/* ======================================================================
   UYAP Erişim Damgası (/uyap-damga) — `uy-` öneki
   Mevcut df-* ve kr-* sınıfları yeniden kullanılır; burada yalnızca
   bu sayfaya özgü yerleşim/işaret kuralları tanımlıdır.
   ====================================================================== */
.uy-page { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Yükleme alanı (sürükle-bırak) */
.uy-drop {
    display: flex; align-items: center; gap: 16px; padding: 22px; cursor: pointer;
    border: 2px dashed var(--line-2); border-radius: var(--r-lg);
    background: var(--surface-2); transition: border-color var(--t), background var(--t);
}
.uy-drop:hover, .uy-drop.is-over { border-color: var(--ink); background: var(--surface); }
.uy-drop > i { font-size: 34px; color: var(--muted); flex: none; }
.uy-drop small { display: block; font-size: 12px; color: var(--muted); }
.uy-drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.uy-file { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Sayaç kutuları */
.uy-stats {
    display: grid; gap: 10px; padding: 16px 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.uy-stat {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2); padding: 11px 13px;
}
.uy-stat b { display: block; font-family: var(--fd); font-size: 19px; font-weight: 700; color: var(--ink); }
.uy-stat span { font-size: 11.5px; color: var(--muted); letter-spacing: .01em; }

/* Havuz tablosu */
.uy-table-wrap { max-height: 52vh; overflow: auto; }
.uy-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; word-break: break-all;
}
.uy-row--next > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.uy-row--next { background: var(--accent-soft); }
.uy-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.uy-cell-input { width: 100%; min-width: 140px; }

/* Uyarı listesi */
.uy-msg-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 12.5px; }
.uy-msg { border-left: 3px solid var(--line-2); padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.uy-msg--warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.uy-msg--err { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.uy-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.uy-paste { min-height: 170px; }
.uy-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uy-status { font-size: 12.5px; color: var(--muted); }
.uy-hidden { display: none; }

/* Yan yana kutular: 1 bağlantı + 4 kod grubu + ekle düğmesi */
.uy-boxrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.uy-box { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Bağlantı kutusu satırı yutmasın: büyümesi kapalı, sabit ölçüde durur */
.uy-box--url { flex: 0 1 250px; min-width: 170px; max-width: 100%; }
.uy-box--code { flex: 0 0 auto; }
.uy-box--action { flex: 0 0 auto; padding-bottom: 1px; }
.uy-box-label {
    font-size: 11.5px; font-weight: 600; color: var(--muted);
    letter-spacing: .02em; white-space: nowrap;
}
.uy-url-input { width: 100%; min-width: 0; }
/* 7 karakterlik grup + .04em harf aralığı + 13px yatay dolgu kesilmeden sığar */
.uy-code-input {
    width: 16ch; min-width: 16ch; text-align: center; letter-spacing: .04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
}
.uy-url-input:focus-visible, .uy-code-input:focus-visible {
    outline: 2px solid var(--ink); outline-offset: 1px;
}

/* Toplu yapıştırma (ikincil, varsayılan kapalı) */
.uy-bulk { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.uy-bulk > summary {
    cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted);
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.uy-bulk > summary::before { content: "▸"; font-size: 11px; }
.uy-bulk[open] > summary::before { content: "▾"; }
.uy-bulk > summary::-webkit-details-marker { display: none; }
.uy-bulk > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.uy-bulk > *:not(summary) { margin-top: 10px; }

/* Düzenleme penceresindeki kutu satırı */
.uy-swal-wide { max-width: 680px; }
.uy-boxrow--swal { text-align: left; justify-content: flex-start; }
/* Pencerede bağlantı üst satırda tek başına, 4 kod kutusu alt satırda ferah durur */
.uy-boxrow--swal .uy-box--url { flex: 1 1 100%; max-width: 100%; }

/* Klasörlerden içe aktarma (ZIP) — onay tablosu */
.uy-drop--sm { padding: 14px 16px; gap: 12px; }
.uy-drop--sm > i { font-size: 26px; }

.uy-imp-res { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.uy-imp-sum {
    display: grid; gap: 10px; margin-bottom: 12px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.uy-imp-actions { margin-bottom: 10px; }
.uy-imp-wrap { max-height: 58vh; overflow: auto; }
.uy-imp-table td { vertical-align: top; }
.uy-imp-table .uy-msg { margin-top: 6px; }
.uy-imp-code { display: flex; gap: 5px; flex-wrap: wrap; }
.uy-code-input--sm { width: 11ch; min-width: 11ch; font-size: 12.5px; padding: 5px 7px; }
.uy-imp-fix { margin-top: 7px; max-width: 100%; }
.uy-imp-prev {
    display: block; margin-top: 8px; max-width: 100%; width: 420px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
.uy-imp-chk { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.uy-imp-row--supheli > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.uy-imp-row--hatali > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.uy-imp-row--saglam > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.uy-badge {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 11.5px; font-weight: 600; padding: 3.5px 9px; border-radius: 3px;
}
.uy-badge--ok { background: var(--ok-soft); color: var(--ok); }
.uy-badge--warn { background: var(--warn-soft); color: var(--warn); }
.uy-badge--err { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 720px) {
    .uy-box--url { flex: 1 1 100%; }
    .uy-box--code { flex: 1 1 calc(50% - 5px); }
    .uy-code-input { width: 100%; min-width: 0; }
    .uy-box--action { flex: 1 1 100%; }
    .uy-code-input--sm { flex: 1 1 calc(50% - 3px); width: auto; min-width: 0; }
}

/* ======================================================================
   PDF Meta Veri hazır ayarları (/metadata) — `mp-` öneki
   Mevcut df-* sınıfları yeniden kullanılır; burada yalnızca hazır ayar
   satırının yerleşimi ve önizleme etiketleri tanımlıdır.
   ====================================================================== */
.mp-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mp-bar .df-select { flex: 1 1 240px; width: auto; min-width: 0; max-width: 340px; }
.mp-hint { font-size: 12.5px; margin: 0 0 12px; }
.mp-sep { width: 1px; align-self: stretch; background: var(--line-2); margin: 2px 3px; }
.mp-hidden { display: none; }

/* Önizleme: profil hangi alanı dolduruyor, hangisini boş bırakıyor */
.mp-preview { margin-top: 13px; font-size: 12.5px; color: var(--ink-2); }
.mp-preview:empty { display: none; }
.mp-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.mp-tag {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 3px 9px; border-radius: var(--r-sm); font-size: 12px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.mp-tag b { font-weight: 650; color: var(--ink); }
.mp-tag span { color: var(--muted); word-break: break-word; }
.mp-tag--empty { border-style: dashed; color: var(--muted); }
.mp-tag--empty b { color: var(--muted); }
.mp-sub { display: block; margin-top: 9px; font-size: 12px; color: var(--muted); }