/* /static/ui/css/fontlar.css */
/* Yerel fontlar — Google Fonts yerine sunucudan (2026-10-03).
Sebep: fonts.googleapis.com ilk cizimi BEKLETEN dis bir CSS'ti ve her
ziyaret ucuncu tarafa istek demekti. Yalnizca latin + latin-ext (Turkce
ş ğ İ ı latin-ext'te). Inter degisken font: tum agirliklar ayni dosya.
Uretim: python3 scripts/fontlari_indir.py */
/* Inter 400 latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/ui/fonts/inter-latin-ext-521e24d1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Inter 400 latin */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/ui/fonts/inter-latin-1dc044f4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Inter 500 latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/static/ui/fonts/inter-latin-ext-521e24d1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Inter 500 latin */
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/static/ui/fonts/inter-latin-1dc044f4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Inter 600 latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/ui/fonts/inter-latin-ext-521e24d1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Inter 600 latin */
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/ui/fonts/inter-latin-1dc044f4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Inter 700 latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/ui/fonts/inter-latin-ext-521e24d1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Inter 700 latin */
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/ui/fonts/inter-latin-1dc044f4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Poppins 600 latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/static/ui/fonts/poppins-latin-ext-b2accf62.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Poppins 600 latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/static/ui/fonts/poppins-latin-fffe793f.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Poppins 700 latin-ext */
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/static/ui/fonts/poppins-latin-ext-a83d28cf.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Poppins 700 latin */
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/static/ui/fonts/poppins-latin-6af69d30.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* /static/ui/css/odo-arayuz.css */
/* ============================================================
odoerp — uygulama arayüzü tasarım sistemi
Belgeler : design/UYGULAMA_ARAYUZU.md
Marka : design/odo/DESIGN_REFERENCE.md (renkler oradan)
Kullanım :
============================================================ */
/* ============================================================
odoerp — uygulama arayüzü tasarım sistemi
Belgeler : design/UYGULAMA_ARAYUZU.md
Marka : design/odo/DESIGN_REFERENCE.md (renkler oradan, değiştirilmez)
TEMA: bütün nötrler ve durum zeminleri token üzerinden gelir. Koyu tema
yalnızca [data-tema="koyu"] altında token'ları yeniden tanımlar; hiçbir
bileşen kuralı temaya göre yazılmaz. Tek kaynak :root'tur.
============================================================ */
:root{
/* --- marka: HER İKİ TEMADA AYNI --- */
--brand-primary:#c03060; --brand-primary-dark:#8a2350; --brand-primary-light:#d65a82;
--brand-purple:#603078; --brand-purple-dark:#4a2560;
--brand-gradient:linear-gradient(135deg,#603078 0%,#c03060 100%);
--brand-accent:#f0a830;
--dark-bg:#160d1f; --dark-surface:#211530;
/* --- nötrler: mor alt tonlu --- */
--ink-900:#1b1220; --ink-700:#4a3d57; --ink-600:#6b5c78;
--ink-500:#8b7d97; --ink-400:#b6aabf; --ink-300:#ded5e4; --ink-200:#ece5f0;
--surface-50:#faf8fb; --surface-100:#f3eff6;
--yuzey:#fff; /* kart zemini — koyu temada koyulaşır */
--white:#fff; /* gerçek beyaz: rozet/düğme metni */
/* --- durum --- */
--ok:#1a7f5a; --ok-bg:#e6f6ee; --ok-kenar:#c3e8d6;
--warn:#a8620a; --warn-bg:#fdf2e2; --warn-kenar:#f6dcb4;
--danger:#b3243c; --danger-bg:#fdeaee; --danger-kenar:#f6c9d2;
--info-bg:#f0ebf4;
--font-heading:"Poppins","Inter",system-ui,sans-serif;
--font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-full:9999px;
--shadow-xs:0 1px 2px rgba(27,18,32,.05);
--shadow-sm:0 1px 3px rgba(27,18,32,.06),0 1px 2px rgba(27,18,32,.04);
--shadow-md:0 4px 14px -3px rgba(96,48,120,.12),0 2px 6px -2px rgba(27,18,32,.06);
--shadow-lg:0 18px 44px -18px rgba(96,48,120,.32),0 6px 16px -8px rgba(27,18,32,.10);
--shadow-brand:0 8px 22px -8px rgba(192,48,96,.45);
--container:1340px;
--transition:200ms cubic-bezier(.4,0,.2,1);
--sidebar-w:236px;
--sidebar-dar:68px;
/* --- yazı ölçeği: bileşenler font-size'ı YALNIZ buradan alır (serbest rem/px yazılmaz).
Kök 16px; gövde 15px (--fs-govde). Ara değer gerekirse önce en yakın adıma bakın. --- */
--fs-2xs:.65rem; /* rozet sayacı, rol, grafik ekseni */
--fs-xs:.72rem; /* zaman, yardımcı not, filtre başlığı */
--fs-sm:.78rem; /* ikincil metin, alt satır, küçük etiket */
--fs-md:.83rem; /* form etiketi, menü, küçük düğme, tablo hücresi */
--fs-base:.88rem; /* girdi, düğme, liste öğesi */
--fs-govde:.9375rem; /* gövde metni (15px), okuma alanı */
--fs-lg:1.05rem; /* kart / pencere başlığı */
--fs-xl:1.25rem; /* bölüm başlığı, marka */
--fs-2xl:1.5rem; /* sayfa başlığı, kılavuz h2 */
--fs-3xl:1.8rem; /* KPI sayısı, giriş markası */
--fs-4xl:clamp(1.9rem,3vw,2.6rem); /* tanıtım başlığı, TV kipi sayı */
--fs-5xl:clamp(2.2rem,5vw,3.6rem); /* sunum kapağı, sunum sayısı */
--fs-6xl:clamp(3rem,7vw,6rem); /* tek büyük sayı: hata kodu, bugün */
--fs-goreli:.88em; /* satır içi kod / kbd — çevresindeki metne göre */
--fs-baski:11pt; --fs-baski-sm:9.5pt; --fs-baski-xs:8.5pt; --fs-baski-lg:16pt; /* yazdırma */
/* --- sabit koyu yüzeyler (kenar çubuğu, ipucu, kod kutusu, giriş tanıtımı): HER İKİ TEMADA AYNI --- */
--koyu-zemin-2:#241634; --koyu-zemin-3:#301545;
--koyu-metin:#c5b3d1; --koyu-metin-guclu:#e9dff0; --koyu-metin-acik:#f2ecf5;
--koyu-metin-soluk:#b3a1c0; --koyu-metin-pasif:#8f7d9c; --koyu-dugme-metin:#cdbdd8;
--koyu-tehlike:#f0748c; --koyu-tehlike-metin:#2d1119; --koyu-tehlike-a14:rgba(240,116,140,.14);
--uyari-koyu:#a8620a;
/* --- saydam katmanlar (koyu zeminde çizgi/hover, perde, odak halkası, vurgu) --- */
--beyaz-a05:rgba(255,255,255,.05); --beyaz-a07:rgba(255,255,255,.07); --beyaz-a09:rgba(255,255,255,.09);
--beyaz-a12:rgba(255,255,255,.12); --beyaz-a16:rgba(255,255,255,.16); --beyaz-a18:rgba(255,255,255,.18);
--beyaz-a30:rgba(255,255,255,.3); --beyaz-a35:rgba(255,255,255,.35); --beyaz-a45:rgba(255,255,255,.45);
--beyaz-a80:rgba(255,255,255,.8); --beyaz-a95:rgba(255,255,255,.95);
--siyah-a25:rgba(0,0,0,.25); --siyah-a30:rgba(0,0,0,.3); --siyah-a60:rgba(0,0,0,.6);
--golge-yan:rgba(27,18,32,.22); --perde:rgba(27,18,32,.5);
--odak-halka:rgba(214,90,130,.16); --odak-halka-guclu:rgba(214,90,130,.22);
--marka-a42:rgba(192,48,96,.42); --mor-a62:rgba(96,48,120,.62); --mor-a75:rgba(96,48,120,.75);
--vurgu-a07:rgba(240,168,48,.07); --vurgu-a26:rgba(240,168,48,.26); --vurgu-a32:rgba(240,168,48,.32);
/* --- temadan bağımsız griler: yazdırma, beyaz harita penceresi, dosya rozeti --- */
--sabit-gri:#999; --sabit-gri-koyu:#555; --sabit-gri-acik:#eee; --sabit-gri-mor:#6b5c78;
}
/* ============ KOYU TEMA ============
Nötrler ters çevrilir ama ton korunur: gri değil, mor alt tonlu koyu.
Durum zeminleri koyulaştırılır, metin renkleri açılır ki okunur kalsın. */
[data-tema="koyu"]{
--ink-900:#f2ecf5; --ink-700:#cbbdd6; --ink-600:#a89ab5;
--ink-500:#8b7d97; --ink-400:#6b5c78; --ink-300:#3f3350; --ink-200:#2e2438;
--surface-50:#130c1a; --surface-100:#1d1428;
--yuzey:#1a1222;
--ok:#4ecfa0; --ok-bg:#0f2a20; --ok-kenar:#1c4a38;
--warn:#e8a54a; --warn-bg:#2e1f0c; --warn-kenar:#4d3512;
--danger:#f0748c; --danger-bg:#2d1119; --danger-kenar:#4d1d29;
--info-bg:#221a2c;
--shadow-xs:0 1px 2px rgba(0,0,0,.30);
--shadow-sm:0 1px 3px rgba(0,0,0,.36),0 1px 2px rgba(0,0,0,.28);
--shadow-md:0 4px 14px -3px rgba(0,0,0,.46),0 2px 6px -2px rgba(0,0,0,.32);
--shadow-lg:0 18px 44px -18px rgba(0,0,0,.66),0 6px 16px -8px rgba(0,0,0,.40);
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-family:var(--font-body);color:var(--ink-900);
background:var(--surface-50);font-size:var(--fs-govde);line-height:1.6;
display:flex;min-height:100vh;
transition:background var(--transition),color var(--transition)}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;letter-spacing:-.02em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-goreli)}
a{color:var(--brand-purple)}
[data-tema="koyu"] a{color:var(--brand-primary-light)}
/* Koyu temadaki `a` kurali (0,1,1) .btn-* (0,1,0) kurallarindan ozgul:
pembe zemin ustunde pembe yazi oluyordu
(2026-09-25, once odoseo'da bulundu; odowp ve odoflask'a tasindi).
Dugme gorunumlu baglantilar dugme rengini korur. */
[data-tema="koyu"] a.btn-primary{color:#fff}
[data-tema="koyu"] a.btn-ghost{color:var(--ink-700)}
[data-tema="koyu"] a.btn-ghost:hover{color:var(--ink-900)}
.muted{color:var(--ink-600)} .small{font-size:var(--fs-sm)}
.break{overflow-wrap:anywhere}
/* ============ KENAR ÇUBUĞU ============ */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:60;
display:flex;flex-direction:column;color:#fff;
background:linear-gradient(165deg,var(--dark-bg) 0%,var(--koyu-zemin-2) 55%,var(--koyu-zemin-3) 100%);
border-right:1px solid var(--beyaz-a07);
box-shadow:1px 0 24px var(--golge-yan);
transition:width var(--transition),transform var(--transition)}
.shell{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;
flex-direction:column;transition:margin-left var(--transition)}
/* logo SABİT — nav kayarken üstte kalır */
.side-ust{flex:0 0 auto;padding:1.1rem .85rem .9rem;display:flex;
align-items:center;justify-content:space-between;gap:.5rem;
border-bottom:1px solid var(--beyaz-a07)}
.brand{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-xl);color:#fff;
text-decoration:none;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}
.brand span{background:linear-gradient(90deg,var(--brand-primary-light),var(--brand-accent));
-webkit-background-clip:text;background-clip:text;color:transparent}
.side-btn{background:var(--beyaz-a09);border:1px solid var(--beyaz-a16);
color:var(--koyu-dugme-metin);width:30px;height:30px;border-radius:8px;cursor:pointer;
display:grid;place-items:center;flex:0 0 auto;transition:var(--transition)}
.side-btn:hover{background:var(--beyaz-a16);color:#fff}
/* yalnız NAV kayar */
.nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
display:flex;flex-direction:column;gap:.18rem;padding:.7rem .85rem;
scrollbar-width:thin;scrollbar-color:var(--beyaz-a18) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--beyaz-a18);border-radius:3px}
.nav a,.nav .nav-ust{display:flex;align-items:center;gap:.7rem;color:var(--koyu-metin);
text-decoration:none;font-weight:500;font-size:var(--fs-base);padding:.6rem .7rem;
border-radius:10px;transition:var(--transition);position:relative;
background:none;border:0;width:100%;font-family:inherit;cursor:pointer;
text-align:left}
.nav a:hover,.nav .nav-ust:hover{color:#fff;background:var(--beyaz-a07)}
.nav a.active{color:#fff;
background:linear-gradient(100deg,var(--mor-a75),var(--marka-a42))}
.nav a.active::before{content:"";position:absolute;left:-.85rem;top:50%;
transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;
background:var(--brand-primary-light)}
.ic{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav-etiket{flex:1;white-space:nowrap;overflow:hidden}
/* --- alt menü --- */
.nav-grup{display:flex;flex-direction:column}
.nav-ok{width:13px;height:13px;flex:0 0 13px;opacity:.7;
transition:transform var(--transition)}
.nav-grup[data-acik="1"] .nav-ok{transform:rotate(90deg)}
.nav-alt{display:none;flex-direction:column;gap:.1rem;margin:.15rem 0 .3rem 1.15rem;
padding-left:1.55rem;border-left:1px solid var(--beyaz-a12)}
.nav-grup[data-acik="1"] .nav-alt{display:flex}
.nav-alt a{font-size:var(--fs-md);padding:.42rem .6rem;color:var(--koyu-metin-soluk)}
.nav-alt a.active{background:var(--odak-halka-guclu);color:#fff}
.nav-alt a.active::before{display:none}
.nav-rozet{margin-left:auto;background:var(--brand-primary);color:#fff;
font-size:var(--fs-2xs);font-weight:700;padding:.1rem .42rem;
border-radius:var(--radius-full)}
/* kullanıcı SABİT — altta kalır */
.side-user{flex:0 0 auto;border-top:1px solid var(--beyaz-a09);
padding:.7rem .85rem .9rem}
.su-link{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;
border-radius:10px;text-decoration:none;color:var(--koyu-metin);font-size:var(--fs-md);
transition:var(--transition)}
.su-link:hover{background:var(--beyaz-a09);color:#fff}
.avatar{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
background:var(--brand-gradient);display:grid;place-items:center;
font-size:var(--fs-xs);font-weight:700;color:#fff;font-family:var(--font-heading)}
.su-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role{padding:.12rem .45rem;border-radius:var(--radius-full);font-size:var(--fs-2xs);
text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff;
background:var(--brand-gradient);box-shadow:var(--shadow-brand)}
.su-cikis{display:flex;align-items:center;gap:.7rem;width:100%;background:transparent;
border:0;color:var(--koyu-metin-pasif);font:inherit;font-size:var(--fs-md);padding:.5rem .7rem;
border-radius:10px;cursor:pointer;transition:var(--transition);text-align:left}
.su-cikis:hover{background:var(--koyu-tehlike-a14);color:var(--koyu-tehlike)}
/* --- daraltılmış kenar çubuğu --- */
body.dar{--sidebar-w:var(--sidebar-dar)}
body.dar .nav-etiket,body.dar .su-ad,body.dar .role,
body.dar .su-cikis span,body.dar .nav-ok,body.dar .nav-rozet{display:none}
body.dar .nav-alt{display:none!important}
body.dar .side-ust{justify-content:center;padding:1.1rem .5rem .9rem}
body.dar .brand-uzun{display:none}
body.dar .nav,body.dar .side-user{padding-left:.5rem;padding-right:.5rem}
body.dar .nav a,body.dar .nav .nav-ust,body.dar .su-link,body.dar .su-cikis{
justify-content:center;padding-left:.5rem;padding-right:.5rem}
body.dar .nav a.active::before{left:-.5rem}
/* ============ YERLEŞİM ============ */
.ust-cubuk{position:sticky;top:0;z-index:40;display:flex;align-items:center;
gap:1rem;padding:.7rem 2rem;background:var(--yuzey);
border-bottom:1px solid var(--ink-200);backdrop-filter:blur(8px)}
.mobil-btn{display:none;background:var(--surface-100);border:1px solid var(--ink-300);
color:var(--ink-700);width:34px;height:34px;border-radius:9px;cursor:pointer;
place-items:center;flex:0 0 auto}
.kirinti{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-md);
color:var(--ink-600);flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.kirinti a{text-decoration:none;color:var(--ink-600)}
.kirinti a:hover{color:var(--brand-primary)}
.kirinti .ayrac{opacity:.5}
.kirinti b{color:var(--ink-900);font-weight:600}
.ust-sag{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
/* min-width:0 — .wrap .shell'in (flex) öğesi, .card çoğu zaman ızgara öğesi: ikisi de varsayılan min-width:auto ile
içeriğe göre genişler ve geniş tablo/kırılmayan metin SAYFAYI taşırır (canlı veri, odochat/odowiki 2026-11-11). */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:2.25rem 2rem 4rem;min-width:0}
.sec{font-size:var(--fs-lg);margin:2rem 0 .9rem;font-weight:600}
.sec:first-child{margin-top:0}
.head-row{display:flex;justify-content:space-between;align-items:center;
gap:1rem;flex-wrap:wrap}
.row-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.two>*,.cols>*,.grid>*,.stats>*{min-width:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;align-items:start}
@media(max-width:900px){.two,.cols{grid-template-columns:1fr}}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
max-width:var(--container);margin:auto auto 0;width:100%;padding:1.6rem 2rem;
color:var(--ink-500);font-size:var(--fs-sm);border-top:1px solid var(--ink-200)}
/* ============ KART / İSTATİSTİK ============ */
.card{min-width:0;background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-sm)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem}
.grid .card{transition:var(--transition)}
.grid .card:hover{box-shadow:var(--shadow-md);border-color:var(--ink-300);
transform:translateY(-1px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:1rem;margin-bottom:1.75rem}
.stat{position:relative;background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-md);padding:1rem 1.15rem;box-shadow:var(--shadow-sm);
overflow:hidden;transition:var(--transition)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--brand-gradient)}
.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat b{display:block;font-family:var(--font-heading);font-size:var(--fs-3xl);
line-height:1.1;letter-spacing:-.03em}
.stat span{color:var(--ink-500);font-size:var(--fs-sm)}
.stat-warn::before{background:linear-gradient(180deg,var(--brand-accent),var(--uyari-koyu))}
.egilim{font-size:var(--fs-xs);font-weight:600;display:inline-flex;align-items:center;gap:.15rem}
.egilim.artis{color:var(--ok)} .egilim.azalis{color:var(--danger)}
/* ============ ROZET / ÇİP ============ */
.badges{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.badge{background:var(--surface-100);color:var(--ink-700);padding:.2rem .58rem;
border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:500;
border:1px solid var(--ink-200);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-kenar)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-kenar)}
.badge.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-kenar)}
.badge.all{background:var(--brand-purple);color:#fff;border-color:var(--brand-purple)}
.crud{font-family:ui-monospace,monospace;letter-spacing:.16em;font-weight:700;
background:var(--brand-gradient);color:#fff;padding:.22rem .65rem;
border-radius:var(--radius-full);font-size:var(--fs-xs);box-shadow:var(--shadow-brand)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.chip{background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-full);padding:.28rem .8rem;font-size:var(--fs-sm);
box-shadow:var(--shadow-xs);text-decoration:none;color:var(--ink-700);
transition:var(--transition)}
a.chip:hover{border-color:var(--brand-primary-light);color:var(--brand-primary)}
a.chip.aktif{background:var(--brand-gradient);color:#fff;border-color:transparent;
box-shadow:var(--shadow-brand);font-weight:600}
/* ============ SEKMELİ PANEL ============ */
.sekmeler{display:flex;gap:.15rem;border-bottom:1px solid var(--ink-200);
overflow-x:auto;scrollbar-width:none}
.sekmeler::-webkit-scrollbar{display:none}
.sekme{background:none;border:0;border-bottom:2px solid transparent;
padding:.65rem 1rem;font:inherit;font-size:var(--fs-base);font-weight:500;
color:var(--ink-600);cursor:pointer;white-space:nowrap;
transition:var(--transition);margin-bottom:-1px}
.sekme:hover{color:var(--ink-900)}
.sekme[aria-selected="true"]{color:var(--brand-primary);
border-bottom-color:var(--brand-primary);font-weight:600}
.sekme-govde{padding-top:1.2rem}
.sekme-govde[hidden]{display:none}
/* ============ ADIM GÖSTERGESİ ============ */
/* Bağlantı çizgisi DAİRE MERKEZLERİ arasında gider ve metin dairenin
ALTINDA durur. Önceki sürümde çizgi dairenin sağından öğenin sağ kenarına
uzanıyordu; metin de orada başladığı için üstüne biniyordu. */
.adimlar{display:flex;align-items:flex-start;gap:0;margin:1.2rem 0 1.6rem;
overflow-x:auto;scrollbar-width:none}
.adimlar::-webkit-scrollbar{display:none}
.adim{flex:1 1 0;min-width:110px;position:relative;padding:0 .35rem;
display:flex;flex-direction:column;align-items:center;text-align:center}
.adim:not(:last-child)::after{content:"";position:absolute;top:13px;
left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;
background:var(--ink-200);z-index:0}
.adim.tamam:not(:last-child)::after{background:var(--ok)}
.adim-no{width:28px;height:28px;flex:0 0 28px;border-radius:50%;
display:grid;place-items:center;font-size:var(--fs-sm);font-weight:700;
background:var(--surface-100);color:var(--ink-500);
border:2px solid var(--ink-300);position:relative;z-index:1;
font-family:var(--font-heading);transition:var(--transition);
margin-bottom:.45rem}
.adim.tamam .adim-no{background:var(--ok);border-color:var(--ok);color:#fff}
.adim.simdi .adim-no{background:var(--brand-gradient);border-color:transparent;
color:#fff;box-shadow:var(--shadow-brand)}
.adim-metin{min-width:0;width:100%}
/* Başlık ve alt metin olduğu için varsayılan olarak YAN YANA akar
("Tanımla Kaynak eklendi"). display:block ile alt alta gelirler. */
.adim-baslik{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.3}
.adim.bekliyor .adim-baslik{color:var(--ink-500);font-weight:500}
.adim-alt{display:block;font-size:var(--fs-xs);color:var(--ink-500);
line-height:1.35;margin-top:.1rem}
/* ============ TABLO ============ */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--yuzey);
border:1px solid var(--ink-200);border-radius:var(--radius-md);overflow:hidden;
font-size:var(--fs-md);box-shadow:var(--shadow-sm)}
.tbl th{background:var(--surface-100);text-align:left;padding:.65rem .85rem;
font-weight:600;color:var(--ink-700);font-size:var(--fs-sm);
border-bottom:1px solid var(--ink-200);white-space:nowrap}
.tbl td{padding:.62rem .85rem;border-top:1px solid var(--ink-200);vertical-align:top}
.tbl tbody tr:first-child td{border-top:0}
.tbl tbody tr{transition:background var(--transition)}
.tbl tbody tr:hover{background:var(--surface-50)}
.res{font-weight:600}
.res-ok .res{color:var(--ok)}
.res-denied .res{color:var(--warn)}
.res-error .res{color:var(--danger)}
.scroll-x{overflow-x:auto;max-width:100%;border-radius:var(--radius-md)}
/* ============ SAYFALAMA ============ */
.sayfalama{display:flex;align-items:center;justify-content:space-between;
gap:1rem;margin-top:1.1rem;flex-wrap:wrap}
.sayfa-bilgi{font-size:var(--fs-sm);color:var(--ink-600)}
.sayfa-btnler{display:flex;gap:.25rem;align-items:center}
.sayfa-btn{min-width:34px;height:34px;padding:0 .55rem;border-radius:9px;
border:1px solid var(--ink-200);background:var(--yuzey);color:var(--ink-700);
font:inherit;font-size:var(--fs-md);cursor:pointer;transition:var(--transition);
display:grid;place-items:center}
.sayfa-btn:hover:not(:disabled):not(.aktif){border-color:var(--brand-primary-light);
color:var(--brand-primary)}
.sayfa-btn.aktif{background:var(--brand-gradient);color:#fff;border-color:transparent;
font-weight:600;box-shadow:var(--shadow-brand)}
.sayfa-btn:disabled{opacity:.4;cursor:not-allowed}
.sayfa-uc{color:var(--ink-400);padding:0 .2rem}
/* ============ FORM ============ */
label{display:block;margin-bottom:.95rem;font-size:var(--fs-md);font-weight:500;
color:var(--ink-700)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select,textarea{width:100%;margin-top:.32rem;padding:0 .75rem;height:42px;
line-height:normal;border:1px solid var(--ink-300);border-radius:10px;
font:inherit;font-size:var(--fs-base);background:var(--yuzey);color:var(--ink-900);
transition:var(--transition);-webkit-appearance:none;appearance:none}
select{padding-right:2.1rem;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238b7d97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .8rem center}
input[type=date]{cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.5;
padding:.2rem;border-radius:5px;transition:var(--transition);
filter:invert(28%) sepia(18%) saturate(900%) hue-rotate(240deg)}
[data-tema="koyu"] input[type=date]::-webkit-calendar-picker-indicator{
filter:invert(80%) sepia(20%) saturate(600%) hue-rotate(240deg)}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;
background:var(--surface-100)}
input[type=date]::-webkit-inner-spin-button{display:none}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
textarea{height:auto;min-height:76px;padding:.6rem .75rem;line-height:1.5;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-md)}
input:hover:not(:disabled),select:hover,textarea:hover{border-color:var(--ink-400)}
input:focus,select:focus,textarea:focus{outline:none;
border-color:var(--brand-primary-light);box-shadow:0 0 0 3px var(--odak-halka)}
input:disabled,textarea:disabled{background:var(--surface-100);
color:var(--ink-500);cursor:not-allowed}
label small{display:block;color:var(--ink-500);font-weight:400;font-size:var(--fs-xs);
margin-top:.28rem}
/* Firefox yer tutucuya varsayılan opaklık uygular; opacity:1 ile eşitliyoruz. */
::placeholder{color:var(--ink-400);opacity:1}
label.inline{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
label.inline input{width:auto;height:auto;margin:0;accent-color:var(--brand-primary)}
.filter-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:flex-end;
margin-bottom:1.1rem}
.filter-row label{margin:0;flex:1 1 140px;display:flex;flex-direction:column;
justify-content:flex-end}
.filter-row .btn-primary{padding:0 1.5rem;height:42px;flex:0 0 auto}
.actions{display:flex;gap:.75rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
/* --- anahtar (switch) --- */
.anahtar{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
margin-bottom:.6rem;font-size:var(--fs-md);color:var(--ink-700)}
.anahtar input{position:absolute;opacity:0;width:0;height:0}
.anahtar-kutu{width:38px;height:22px;flex:0 0 38px;border-radius:var(--radius-full);
background:var(--ink-300);position:relative;transition:var(--transition)}
.anahtar-kutu::after{content:"";position:absolute;top:3px;left:3px;width:16px;
height:16px;border-radius:50%;background:#fff;transition:var(--transition);
box-shadow:0 1px 3px var(--siyah-a25)}
.anahtar input:checked + .anahtar-kutu{background:var(--brand-gradient)}
.anahtar input:checked + .anahtar-kutu::after{transform:translateX(16px)}
.anahtar input:focus-visible + .anahtar-kutu{box-shadow:0 0 0 3px var(--odak-halka-guclu)}
/* ============ DÜĞMELER ============ */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
padding:.62rem 1.2rem;border:0;border-radius:var(--radius-full);
background:var(--brand-gradient);color:#fff;font:inherit;font-size:var(--fs-base);
font-weight:600;cursor:pointer;transition:var(--transition);
text-decoration:none;box-shadow:var(--shadow-brand)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-sm{padding:.42rem 1.05rem;font-size:var(--fs-md)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
background:var(--yuzey);border:1px solid var(--ink-300);color:var(--ink-700);
padding:.4rem .95rem;border-radius:var(--radius-full);font:inherit;
font-size:var(--fs-md);font-weight:500;cursor:pointer;transition:var(--transition);
text-decoration:none}
.btn-ghost:hover{background:var(--surface-100);border-color:var(--ink-400);
color:var(--ink-900)}
.btn-danger{padding:.5rem 1.2rem;border:0;border-radius:var(--radius-full);
background:var(--danger);color:#fff;font:inherit;font-size:var(--fs-md);
font-weight:600;cursor:pointer;transition:var(--transition)}
[data-tema="koyu"] .btn-danger{color:var(--koyu-tehlike-metin)}
.btn-danger:hover{filter:brightness(1.08)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;
filter:none!important}
/* ============ AÇILIR MENÜ ============ */
.acilir{position:relative;display:inline-block}
.acilir-govde{position:absolute;right:0;top:calc(100% + .35rem);z-index:50;
min-width:190px;background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.35rem;
display:none}
.acilir[data-acik="1"] .acilir-govde{display:block}
.acilir-govde a,.acilir-govde button{display:flex;align-items:center;gap:.55rem;
width:100%;padding:.5rem .6rem;border-radius:8px;background:none;border:0;
font:inherit;font-size:var(--fs-md);color:var(--ink-700);text-align:left;
cursor:pointer;text-decoration:none;transition:var(--transition)}
.acilir-govde a:hover,.acilir-govde button:hover{background:var(--surface-100);
color:var(--ink-900)}
.acilir-govde .tehlikeli{color:var(--danger)}
.acilir-govde .tehlikeli:hover{background:var(--danger-bg)}
.acilir-ayrac{height:1px;background:var(--ink-200);margin:.3rem 0}
/* ============ MODAL ============ */
.modal-perde{position:fixed;inset:0;z-index:100;background:var(--perde);
backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;
padding:1.5rem;animation:perde-ac 160ms ease-out}
.modal-perde[data-acik="1"]{display:flex}
@keyframes perde-ac{from{opacity:0}to{opacity:1}}
.modal{background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
animation:modal-ac 200ms cubic-bezier(.2,.9,.3,1)}
@keyframes modal-ac{from{opacity:0;transform:translateY(14px) scale(.98)}
to{opacity:1;transform:none}}
.modal-ust{display:flex;align-items:flex-start;justify-content:space-between;
gap:1rem;padding:1.15rem 1.35rem .9rem;border-bottom:1px solid var(--ink-200)}
.modal-ust h3{font-size:var(--fs-lg)}
.modal-kapat{background:none;border:0;color:var(--ink-500);cursor:pointer;
padding:.2rem;border-radius:6px;line-height:0;transition:var(--transition)}
.modal-kapat:hover{background:var(--surface-100);color:var(--ink-900)}
.modal-govde{padding:1.15rem 1.35rem;overflow-y:auto;flex:1}
.modal-alt{display:flex;justify-content:flex-end;gap:.6rem;padding:.9rem 1.35rem 1.15rem;
border-top:1px solid var(--ink-200);flex-wrap:wrap}
.modal.tehlike .modal-ust{border-bottom-color:var(--danger-kenar)}
.modal-simge{width:40px;height:40px;flex:0 0 40px;border-radius:12px;
display:grid;place-items:center;background:var(--danger-bg);color:var(--danger)}
/* ============ BİLDİRİM YIĞINI (toast) ============ */
.bildirimler{position:fixed;right:1.2rem;top:1.2rem;z-index:120;
display:flex;flex-direction:column;gap:.6rem;width:min(360px,calc(100vw - 2.4rem));
pointer-events:none}
.bildirim{background:var(--yuzey);border:1px solid var(--ink-200);
border-left:3px solid var(--ink-400);border-radius:var(--radius-md);
box-shadow:var(--shadow-lg);padding:.75rem .9rem;display:flex;gap:.65rem;
align-items:flex-start;pointer-events:auto;
animation:bildirim-gir 240ms cubic-bezier(.2,.9,.3,1)}
@keyframes bildirim-gir{from{opacity:0;transform:translate(24px,-10px)}
to{opacity:1;transform:none}}
.bildirim.cikis{animation:bildirim-cik 200ms ease-in forwards}
@keyframes bildirim-cik{to{opacity:0;transform:translateX(24px);
margin-top:calc(-1 * var(--y,60px))}}
.bildirim.ok{border-left-color:var(--ok)}
.bildirim.warn{border-left-color:var(--warn)}
.bildirim.danger{border-left-color:var(--danger)}
.bildirim-simge{flex:0 0 18px;margin-top:.1rem}
.bildirim.ok .bildirim-simge{color:var(--ok)}
.bildirim.warn .bildirim-simge{color:var(--warn)}
.bildirim.danger .bildirim-simge{color:var(--danger)}
.bildirim-metin{flex:1;min-width:0;font-size:var(--fs-md);line-height:1.45}
.bildirim-metin b{display:block;font-size:var(--fs-base);margin-bottom:.1rem}
.bildirim-kapat{background:none;border:0;color:var(--ink-400);cursor:pointer;
padding:0;line-height:0;flex:0 0 auto;transition:var(--transition)}
.bildirim-kapat:hover{color:var(--ink-900)}
/* ============ İLERLEME / YÜKLENİYOR ============ */
.ilerleme{height:8px;background:var(--surface-100);border-radius:var(--radius-full);
overflow:hidden}
.ilerleme > div{height:100%;background:var(--brand-gradient);
border-radius:var(--radius-full);transition:width 400ms cubic-bezier(.4,0,.2,1)}
.iskelet{background:linear-gradient(90deg,var(--surface-100) 25%,
var(--ink-200) 37%,var(--surface-100) 63%);
background-size:400% 100%;border-radius:var(--radius-sm);
animation:iskelet 1.4s ease infinite}
@keyframes iskelet{0%{background-position:100% 50%}100%{background-position:0 50%}}
.iskelet-satir{height:12px;margin-bottom:.55rem}
.iskelet-satir:last-child{width:60%;margin-bottom:0}
.donen{width:16px;height:16px;border:2px solid var(--beyaz-a35);
border-top-color:#fff;border-radius:50%;animation:don .7s linear infinite;
display:inline-block}
@keyframes don{to{transform:rotate(360deg)}}
/* ============ İPUCU (tooltip) ============ */
.ipucu{position:relative;display:inline-flex;align-items:center}
.ipucu::after{content:attr(data-ipucu);position:absolute;bottom:calc(100% + 7px);
left:50%;transform:translateX(-50%) translateY(3px);background:var(--dark-bg);
color:var(--koyu-metin-guclu);font-size:var(--fs-xs);font-weight:400;padding:.35rem .6rem;
border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
transition:var(--transition);z-index:70;box-shadow:var(--shadow-md)}
.ipucu:hover::after,.ipucu:focus-visible::after{opacity:1;transform:translateX(-50%)}
/* ============ UYARI / BOŞ DURUM / KOD ============ */
.alert{padding:.7rem 1rem;border-radius:var(--radius-md);margin-bottom:1.1rem;
font-size:var(--fs-base);border:1px solid transparent}
.alert-error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-kenar)}
.alert-success{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-kenar)}
.alert-info{background:var(--info-bg);color:var(--brand-purple);border-color:var(--ink-300)}
[data-tema="koyu"] .alert-info{color:var(--brand-primary-light)}
.empty{background:var(--yuzey);border:1px dashed var(--ink-300);
border-radius:var(--radius-lg);padding:2.75rem 1.5rem;text-align:center;margin:1rem 0}
.empty p{color:var(--ink-600);font-size:var(--fs-base);max-width:540px;margin:0 auto 1.2rem}
.empty-icon{font-size:var(--fs-3xl);line-height:1;margin-bottom:.7rem;
background:var(--brand-gradient);-webkit-background-clip:text;
background-clip:text;color:transparent;opacity:.75}
.copy-box{position:relative;margin:.6rem 0}
.copy-box pre{background:var(--dark-bg);color:var(--koyu-metin-guclu);padding:1rem 3.6rem 1rem 1.1rem;
border-radius:var(--radius-md);overflow-x:auto;font-size:var(--fs-sm);line-height:1.6;
margin:0;border:1px solid var(--beyaz-a07);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.copy-btn{position:absolute;top:.6rem;right:.6rem;background:var(--beyaz-a09);
color:var(--koyu-metin-guclu);border:1px solid var(--beyaz-a18);border-radius:var(--radius-sm);
padding:.3rem .72rem;font:inherit;font-size:var(--fs-xs);cursor:pointer;
transition:var(--transition)}
.copy-btn:hover{background:var(--brand-purple);border-color:var(--brand-purple)}
.copy-btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.3rem;margin:0;font-size:var(--fs-base)}
.kv dt{color:var(--ink-500)} .kv dd{margin:0}
.ornek-not{border-left:3px solid var(--brand-accent);background:var(--warn-bg);
padding:.7rem 1rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
font-size:var(--fs-md);color:var(--ink-700);margin:.8rem 0}
/* ============ KOMUT PALETİ (⌘K) ============ */
.komut-perde{position:fixed;inset:0;z-index:130;background:var(--perde);
backdrop-filter:blur(3px);display:none;align-items:flex-start;
justify-content:center;padding:12vh 1.5rem 1.5rem}
.komut-perde[data-acik="1"]{display:flex}
.komut{width:min(580px,100%);background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
animation:modal-ac 180ms cubic-bezier(.2,.9,.3,1)}
.komut-ust{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;
border-bottom:1px solid var(--ink-200)}
.komut-ust svg{flex:0 0 18px;color:var(--ink-500)}
.komut-giris{flex:1;border:0!important;background:none!important;height:auto!important;
padding:0!important;margin:0!important;font-size:var(--fs-lg) !important;
color:var(--ink-900);box-shadow:none!important}
.komut-giris:focus{outline:none;box-shadow:none!important}
.komut-liste{max-height:44vh;overflow-y:auto;padding:.4rem}
.komut-grup{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.07em;
color:var(--ink-500);padding:.6rem .7rem .3rem;font-weight:600}
.komut-oge{display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .7rem;
border-radius:9px;background:none;border:0;font:inherit;font-size:var(--fs-base);
color:var(--ink-700);text-align:left;cursor:pointer;transition:var(--transition)}
.komut-oge:hover{background:var(--surface-100)}
.komut-oge[aria-selected="true"]{background:var(--brand-gradient);color:#fff}
.komut-oge[aria-selected="true"] .komut-alt,
.komut-oge[aria-selected="true"] .kbd{color:var(--beyaz-a80);
border-color:var(--beyaz-a30)}
.komut-oge .ic{opacity:.7}
.komut-metin{flex:1;min-width:0}
.komut-alt{display:block;font-size:var(--fs-xs);color:var(--ink-500)}
.komut-alt-bos{padding:2rem 1rem;text-align:center;color:var(--ink-500);font-size:var(--fs-base)}
.komut-taban{display:flex;gap:1rem;padding:.55rem 1.1rem;border-top:1px solid var(--ink-200);
font-size:var(--fs-xs);color:var(--ink-500);flex-wrap:wrap}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .35rem;
border:1px solid var(--ink-300);border-bottom-width:2px;border-radius:5px;
background:var(--surface-100);font-family:ui-monospace,monospace;font-size:var(--fs-xs);
color:var(--ink-600)}
/* ============ ÇEKMECE (drawer) ============ */
.cekmece{position:fixed;right:0;top:0;bottom:0;width:min(440px,100%);z-index:95;
background:var(--yuzey);border-left:1px solid var(--ink-200);
box-shadow:var(--shadow-lg);transform:translateX(100%);
transition:transform var(--transition);display:flex;flex-direction:column}
.cekmece[data-acik="1"]{transform:none}
.cekmece-ust{display:flex;align-items:flex-start;justify-content:space-between;
gap:1rem;padding:1.15rem 1.35rem .9rem;border-bottom:1px solid var(--ink-200)}
.cekmece-govde{padding:1.15rem 1.35rem;overflow-y:auto;flex:1}
.cekmece-alt{display:flex;justify-content:flex-end;gap:.6rem;
padding:.9rem 1.35rem 1.15rem;border-top:1px solid var(--ink-200)}
body.cekmece-acik .perde{display:block;z-index:90}
/* ============ TABLO: SIRALAMA, TOPLU SEÇİM, SATIR İÇİ DÜZENLEME ============ */
.tbl th[data-sirala]{cursor:pointer;user-select:none;position:relative;
padding-right:1.5rem}
.tbl th[data-sirala]:hover{color:var(--brand-primary)}
.tbl th[data-sirala]::after{content:"↕";position:absolute;right:.6rem;opacity:.3;
font-size:var(--fs-goreli)}
.tbl th[data-yon="asc"]::after{content:"↑";opacity:1;color:var(--brand-primary)}
.tbl th[data-yon="desc"]::after{content:"↓";opacity:1;color:var(--brand-primary)}
.tbl td.sec-h,.tbl th.sec-h{width:36px;padding-right:0}
.tbl tr.secili{background:var(--info-bg)!important}
.toplu-cubuk{display:none;align-items:center;gap:1rem;flex-wrap:wrap;
background:var(--brand-gradient);color:#fff;padding:.6rem 1rem;
border-radius:var(--radius-md);margin-bottom:.8rem;box-shadow:var(--shadow-brand);
animation:toplu-gir 200ms cubic-bezier(.2,.9,.3,1)}
@keyframes toplu-gir{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.toplu-cubuk[data-acik="1"]{display:flex}
.toplu-sayi{font-weight:600;font-size:var(--fs-base);flex:1}
.toplu-cubuk button{background:var(--beyaz-a16);border:1px solid var(--beyaz-a30);
color:#fff;padding:.35rem .85rem;border-radius:var(--radius-full);font:inherit;
font-size:var(--fs-sm);cursor:pointer;transition:var(--transition)}
.toplu-cubuk button:hover{background:var(--beyaz-a30)}
.toplu-cubuk button.tehlikeli{background:var(--siyah-a25);border-color:var(--siyah-a30)}
/* satır içi düzenleme */
.duz{cursor:text;border-radius:6px;padding:.1rem .3rem;margin:-.1rem -.3rem;
display:inline-block;min-width:40px;transition:var(--transition);position:relative}
.duz:hover{background:var(--surface-100);box-shadow:0 0 0 1px var(--ink-300)}
.duz:hover::after{content:"✎";position:absolute;right:-1.05rem;top:0;
font-size:var(--fs-xs);opacity:.5}
.duz-giris{border:1px solid var(--brand-primary-light)!important;
border-radius:6px!important;height:28px!important;padding:0 .4rem!important;
margin:0!important;font-size:var(--fs-md) !important;width:100%!important;
box-shadow:0 0 0 3px var(--odak-halka)!important}
.duz-kaydedildi{animation:duz-parla 900ms ease-out}
@keyframes duz-parla{0%{background:var(--ok-bg)}100%{background:transparent}}
/* ============ KANBAN ============ */
.kanban{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.6rem;
scrollbar-width:thin}
.kanban-sutun{flex:0 0 280px;background:var(--surface-100);
border:1px solid var(--ink-200);border-radius:var(--radius-md);
display:flex;flex-direction:column;max-height:520px;transition:var(--transition)}
.kanban-sutun.hedef{border-color:var(--brand-primary-light);
box-shadow:0 0 0 3px var(--odak-halka)}
.kanban-ust{display:flex;align-items:center;gap:.5rem;padding:.75rem .85rem;
border-bottom:1px solid var(--ink-200)}
.kanban-nokta{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.kanban-baslik{font-size:var(--fs-md);font-weight:600;flex:1}
.kanban-sayi{background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-full);padding:.05rem .45rem;font-size:var(--fs-xs);
color:var(--ink-600);font-weight:600}
.kanban-govde{padding:.6rem;display:flex;flex-direction:column;gap:.55rem;
overflow-y:auto;flex:1;min-height:60px}
.kanban-kart{background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-sm);padding:.7rem .8rem;box-shadow:var(--shadow-xs);
cursor:grab;transition:var(--transition)}
.kanban-kart:hover{box-shadow:var(--shadow-md);border-color:var(--ink-300);
transform:translateY(-1px)}
.kanban-kart:active{cursor:grabbing}
.kanban-kart.suruklenen{opacity:.35;transform:rotate(1.5deg)}
.kanban-kart h4{font-size:var(--fs-md);margin-bottom:.3rem;line-height:1.35}
.kanban-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
margin-top:.55rem;font-size:var(--fs-xs);color:var(--ink-500)}
.kanban-ekle{background:none;border:1px dashed var(--ink-300);color:var(--ink-500);
border-radius:var(--radius-sm);padding:.45rem;font:inherit;font-size:var(--fs-sm);
cursor:pointer;margin:0 .6rem .6rem;transition:var(--transition)}
.kanban-ekle:hover{border-color:var(--brand-primary-light);color:var(--brand-primary)}
/* ============ ZAMAN ÇİZELGESİ ============ */
.zaman{position:relative;padding-left:1.6rem}
.zaman::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
background:var(--ink-200)}
.zaman-oge{position:relative;padding-bottom:1.1rem}
.zaman-oge:last-child{padding-bottom:0}
.zaman-nokta{position:absolute;left:-1.6rem;top:4px;width:14px;height:14px;
border-radius:50%;background:var(--yuzey);border:2px solid var(--ink-300);
z-index:1}
.zaman-oge.ok .zaman-nokta{border-color:var(--ok);background:var(--ok)}
.zaman-oge.warn .zaman-nokta{border-color:var(--warn);background:var(--warn)}
.zaman-oge.danger .zaman-nokta{border-color:var(--danger);background:var(--danger)}
.zaman-baslik{font-size:var(--fs-md);font-weight:500}
.zaman-alt{font-size:var(--fs-sm);color:var(--ink-500)}
/* ============ FİLTRE ÇEKMECESİ EK ============ */
.filtre-grup{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--ink-200)}
.filtre-grup:last-child{border-bottom:0;margin-bottom:0}
.filtre-baslik{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;
color:var(--ink-500);font-weight:600;margin-bottom:.6rem}
.filtre-sayac{background:var(--brand-primary);color:#fff;border-radius:var(--radius-full);
padding:.05rem .4rem;font-size:var(--fs-2xs);font-weight:700;margin-left:.35rem}
/* ============ MOBİL ============ */
.perde{position:fixed;inset:0;background:var(--perde);z-index:55;display:none}
body.menu-acik .perde{display:block}
@media(max-width:860px){
body{display:block}
.sidebar{transform:translateX(-100%);width:var(--sidebar-w);box-shadow:none}
body.menu-acik .sidebar{transform:none;box-shadow:var(--shadow-lg)}
body.dar .sidebar{width:var(--sidebar-w)} /* mobilde daraltma yok */
body.dar .nav-etiket,body.dar .su-ad,body.dar .role,
body.dar .su-cikis span,body.dar .nav-ok{display:flex}
body.dar .nav a,body.dar .nav .nav-ust,body.dar .su-link,body.dar .su-cikis{
justify-content:flex-start;padding-left:.7rem;padding-right:.7rem}
.shell{margin-left:0}
.mobil-btn{display:grid}
.side-btn{display:none}
.ust-cubuk,.wrap,.foot{padding-left:1rem;padding-right:1rem}
.tbl{display:block;overflow-x:auto;max-width:100%}
.filter-row label{flex:1 1 100%}
.filter-row .btn-primary{width:100%}
.head-row{flex-direction:column;align-items:stretch}
.adim{min-width:130px}
.bildirimler{right:.7rem;left:.7rem;top:.7rem;width:auto}
.modal-alt{flex-direction:column-reverse}
.modal-alt > *{width:100%}
.cekmece{width:100%}
.komut-perde{padding:6vh .8rem .8rem}
.kanban-sutun{flex-basis:250px}
.toplu-cubuk{flex-direction:column;align-items:stretch}
.toplu-sayi{text-align:center}
}
/* ============================================================
EK BİLEŞENLER
============================================================ */
/* ============ GRAFİK ============
Seri renkleri MARKADAN türetilir; varsayılan kütüphane paletleri
(mavi-turuncu) arayüzle çakışır. Eksen ve ızgara nötr token'lardan gelir,
böylece koyu temada kendiliğinden uyar. */
:root{
--seri-1:#c03060; --seri-2:#603078; --seri-3:#f0a830;
--seri-4:#d65a82; --seri-5:#4a2560; --seri-6:#1a7f5a;
--izgara:var(--ink-200); --eksen:var(--ink-500);
}
[data-tema="koyu"]{
--seri-1:#e0567f; --seri-2:#9b6bb8; --seri-3:#f0b45a;
--seri-4:#f08cab; --seri-5:#7a52a0; --seri-6:#4ecfa0;
}
.grafik{width:100%;height:auto;overflow:visible;font-family:var(--font-body)}
.grafik .izgara{stroke:var(--izgara);stroke-width:1}
.grafik .eksen-metin{fill:var(--eksen);font-size:var(--fs-2xs)}
.grafik .cizgi{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.grafik .alan{opacity:.14}
.grafik .cubuk{rx:3}
.grafik .nokta{stroke:var(--yuzey);stroke-width:2}
.sparkline{width:100%;height:32px;display:block}
.sparkline path{fill:none;stroke:var(--brand-primary);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.sparkline .alan{fill:var(--brand-primary);opacity:.12;stroke:none}
.grafik-aciklama{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.8rem;
font-size:var(--fs-sm);color:var(--ink-600)}
.grafik-aciklama span{display:inline-flex;align-items:center;gap:.4rem}
.grafik-aciklama i{width:10px;height:10px;border-radius:3px;display:inline-block}
.halka-metin{fill:var(--ink-900);font-family:var(--font-heading);
font-weight:700;text-anchor:middle}
.halka-alt{fill:var(--ink-500);font-size:var(--fs-2xs);text-anchor:middle}
/* ============ HATA SAYFALARI ============ */
.hata-sayfa{min-height:60vh;display:grid;place-items:center;text-align:center;
padding:2rem 1rem}
.hata-kod{font-family:var(--font-heading);font-size:var(--fs-6xl);line-height:1;
letter-spacing:-.05em;background:var(--brand-gradient);
-webkit-background-clip:text;background-clip:text;color:transparent}
.hata-kod.sessiz{background:none;color:var(--ink-300);-webkit-text-fill-color:currentColor}
.hata-baslik{font-size:var(--fs-xl);margin:.5rem 0 .4rem}
.hata-metin{color:var(--ink-600);font-size:var(--fs-base);max-width:460px;margin:0 auto 1.5rem}
.hata-kimlik{font-family:ui-monospace,monospace;font-size:var(--fs-sm);
background:var(--surface-100);border:1px solid var(--ink-200);
border-radius:var(--radius-sm);padding:.3rem .6rem;display:inline-block;
margin-bottom:1.2rem;color:var(--ink-600)}
/* ============ VERİ YOĞUN TABLO: SABİT BAŞLIK / SÜTUN ============ */
.tbl-sabit{max-height:420px;overflow:auto;border:1px solid var(--ink-200);
border-radius:var(--radius-md);background:var(--yuzey)}
.tbl-sabit .tbl{border:0;border-radius:0;box-shadow:none;margin:0}
.tbl-sabit thead th{position:sticky;top:0;z-index:2;
box-shadow:inset 0 -1px 0 var(--ink-200)}
/* İlk sütunu sabitlemek: z-index sırası önemli — köşe hücresi en üstte */
.tbl-sabit td:first-child,.tbl-sabit th:first-child{position:sticky;left:0;
background:var(--yuzey);z-index:1}
.tbl-sabit thead th:first-child{z-index:3;background:var(--surface-100)}
.tbl-sabit tbody tr:hover td:first-child{background:var(--surface-50)}
.tbl-sabit td:first-child::after{content:"";position:absolute;top:0;bottom:0;
right:0;width:1px;background:var(--ink-200)}
/* ============ BİLDİRİM MERKEZİ ============ */
.zil{position:relative}
.zil-sayac{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;
padding:0 .2rem;border-radius:var(--radius-full);background:var(--danger);
color:#fff;font-size:var(--fs-2xs);font-weight:700;display:grid;place-items:center;
border:2px solid var(--yuzey)}
[data-tema="koyu"] .zil-sayac{color:var(--koyu-tehlike-metin)}
.merkez{width:min(360px,calc(100vw - 2rem));max-height:70vh;padding:0;
display:flex;flex-direction:column}
.merkez-ust{display:flex;align-items:center;justify-content:space-between;
padding:.75rem .9rem;border-bottom:1px solid var(--ink-200)}
.merkez-ust h4{font-size:var(--fs-base)}
.merkez-liste{overflow-y:auto;flex:1;padding:.3rem}
.merkez-oge{display:flex;gap:.65rem;padding:.65rem;border-radius:9px;
transition:var(--transition);cursor:pointer;position:relative}
.merkez-oge:hover{background:var(--surface-100)}
.merkez-oge.okunmamis{background:var(--info-bg)}
.merkez-oge.okunmamis::before{content:"";position:absolute;left:.2rem;top:50%;
transform:translateY(-50%);width:5px;height:5px;border-radius:50%;
background:var(--brand-primary)}
.merkez-nokta{width:30px;height:30px;flex:0 0 30px;border-radius:9px;
display:grid;place-items:center;background:var(--surface-100)}
.merkez-oge.ok .merkez-nokta{background:var(--ok-bg);color:var(--ok)}
.merkez-oge.warn .merkez-nokta{background:var(--warn-bg);color:var(--warn)}
.merkez-oge.danger .merkez-nokta{background:var(--danger-bg);color:var(--danger)}
.merkez-metin{flex:1;min-width:0;font-size:var(--fs-md);line-height:1.45}
.merkez-metin b{display:block;font-size:var(--fs-md)}
.merkez-zaman{display:block;font-size:var(--fs-xs);color:var(--ink-500);
margin-top:.15rem}
.merkez-alt{padding:.55rem .9rem;border-top:1px solid var(--ink-200);text-align:center}
.merkez-alt a{font-size:var(--fs-sm);text-decoration:none}
/* ============ DOSYA BIRAKMA ============ */
.birak{border:2px dashed var(--ink-300);border-radius:var(--radius-md);
padding:2rem 1.2rem;text-align:center;transition:var(--transition);
background:var(--surface-50);cursor:pointer}
.birak:hover{border-color:var(--ink-400)}
.birak.uzerinde{border-color:var(--brand-primary);background:var(--info-bg);
transform:scale(1.008)}
.birak-simge{font-size:var(--fs-3xl);margin-bottom:.4rem;background:var(--brand-gradient);
-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.8}
.birak input[type=file]{display:none}
.dosya-liste{display:flex;flex-direction:column;gap:.45rem;margin-top:.8rem}
.dosya{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;
background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-sm);font-size:var(--fs-md)}
.dosya-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dosya-boyut{color:var(--ink-500);font-size:var(--fs-sm);flex:0 0 auto}
/* ============ ETİKET GİRİŞİ ============ */
.etiket-kutu{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
min-height:42px;padding:.3rem .5rem;margin-top:.32rem;
border:1px solid var(--ink-300);border-radius:10px;background:var(--yuzey);
transition:var(--transition);cursor:text}
.etiket-kutu:focus-within{border-color:var(--brand-primary-light);
box-shadow:0 0 0 3px var(--odak-halka)}
.etiket{display:inline-flex;align-items:center;gap:.3rem;background:var(--info-bg);
color:var(--brand-purple);border:1px solid var(--ink-200);
border-radius:var(--radius-full);padding:.15rem .3rem .15rem .6rem;
font-size:var(--fs-sm);font-weight:500}
[data-tema="koyu"] .etiket{color:var(--brand-primary-light)}
.etiket button{background:none;border:0;color:inherit;cursor:pointer;padding:0;
opacity:.6;line-height:0;border-radius:50%;transition:var(--transition)}
.etiket button:hover{opacity:1}
.etiket-giris{flex:1;min-width:90px;border:0!important;background:none!important;
height:26px!important;padding:0 .2rem!important;margin:0!important;
font-size:var(--fs-md) !important;box-shadow:none!important}
.etiket-giris:focus{outline:none;box-shadow:none!important}
/* ============ ARAMA VURGULAMA ============ */
mark,.vurgu{background:var(--vurgu-a32);color:inherit;border-radius:3px;
padding:0 .1em;font-weight:600}
[data-tema="koyu"] mark,[data-tema="koyu"] .vurgu{background:var(--vurgu-a26)}
/* ============================================================
GİRİŞ EKRANI
Kenar çubuğu ve üst çubuk olmayan tek sayfalık düzen.
============================================================ */
.giris-govde{display:flex;align-items:center;justify-content:center;
min-height:100vh;padding:1.5rem;background:var(--dark-bg);
background-image:
radial-gradient(ellipse at 18% 15%,var(--mor-a62),transparent 58%),
radial-gradient(ellipse at 82% 78%,var(--marka-a42),transparent 55%),
radial-gradient(ellipse at 55% 50%,var(--vurgu-a07),transparent 60%)}
.giris-kart{width:min(420px,100%);background:var(--yuzey);
border-radius:var(--radius-lg);padding:2.2rem;
box-shadow:0 34px 80px -28px var(--siyah-a60),0 0 0 1px var(--beyaz-a07);
animation:kart-gir 320ms cubic-bezier(.2,.9,.3,1)}
@keyframes kart-gir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.giris-marka{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-3xl);
text-align:center;letter-spacing:-.035em;color:var(--ink-900)}
.giris-marka span{background:var(--brand-gradient);-webkit-background-clip:text;
background-clip:text;color:transparent}
.giris-alt{text-align:center;color:var(--ink-500);font-size:var(--fs-md);margin:.25rem 0 1.7rem}
.giris-not{font-size:var(--fs-xs);color:var(--ink-500);text-align:center;
margin:1.3rem 0 0;line-height:1.6}
.giris-ayrac{display:flex;align-items:center;gap:.8rem;margin:1.3rem 0;
color:var(--ink-400);font-size:var(--fs-sm)}
.giris-ayrac::before,.giris-ayrac::after{content:"";flex:1;height:1px;
background:var(--ink-200)}
.giris-satir{display:flex;align-items:center;justify-content:space-between;
gap:1rem;margin:-.35rem 0 1.2rem}
.giris-satir label{margin:0;display:flex;align-items:center;gap:.5rem;font-weight:400}
.giris-satir input[type=checkbox]{width:auto;height:auto;margin:0;
accent-color:var(--brand-primary)}
.giris-satir a{font-size:var(--fs-sm);text-decoration:none}
.giris-satir a:hover{text-decoration:underline}
.giris-kart .btn-primary{width:100%;padding:.7rem 1.2rem;font-size:var(--fs-base)}
/* --- parola göster/gizle ---
Sarmalayıcı BLOK olmalı: varsayılan olarak inline'dır ve inline
kutunun yüksekliği satır kutusuna göre belirlenir, içindeki input'a göre
değil — mutlak konumlanan düğme yanlış referans alır.
Ayrıca sihirli sayı yerine top:50% + translateY kullanılır; input
yüksekliği değişse de düğme ortalı kalır. */
.parola-sar{position:relative;display:block;margin-top:.32rem}
.parola-sar input{margin-top:0!important;padding-right:2.8rem}
.goz{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
width:34px;height:34px;background:none;border:0;color:var(--ink-500);
cursor:pointer;border-radius:8px;display:grid;place-items:center;
transition:var(--transition);padding:0}
.goz:hover{background:var(--surface-100);color:var(--ink-900)}
.goz:focus-visible{outline:none;box-shadow:0 0 0 3px var(--odak-halka-guclu)}
.tema-btn{position:fixed;top:1.1rem;right:1.1rem;background:var(--beyaz-a09);
border:1px solid var(--beyaz-a16);color:var(--koyu-metin-guclu);width:36px;height:36px;
border-radius:10px;cursor:pointer;display:grid;place-items:center;
transition:var(--transition);z-index:10}
.tema-btn:hover{background:var(--beyaz-a18)}
@media(max-width:420px){
.giris-govde{padding:1rem}
.giris-kart{padding:1.6rem}
.giris-marka{font-size:var(--fs-3xl)}
}
/* ============================================================
YAZDIRMA
ERP işinde rapor yazdırılır ve bu neredeyse hep unutulur.
Ekran kromu çıkar, kenarlıklar netleşir, zeminler beyaza döner.
============================================================ */
@media print{
@page{margin:14mm}
:root{--yuzey:#fff;--surface-50:#fff;--surface-100:#fff;
--ink-900:#000;--ink-700:#222;--ink-600:#444;--ink-200:#999;--ink-300:#777}
html[data-tema]{--yuzey:#fff!important;--surface-50:#fff!important}
body{display:block;background:#fff;color:#000;font-size:var(--fs-baski)}
/* ekran kromu yazdırılmaz */
.sidebar,.ust-cubuk,.foot,.perde,.bildirimler,.komut-perde,.cekmece,
.modal-perde,.toplu-cubuk,.sayfalama,.kanban-ekle,.copy-btn,.side-btn,
.mobil-btn,.filter-row,.actions,.row-actions,.chips,.sekmeler,
.tema-btn,.goz{display:none!important}
.shell{margin-left:0!important}
.wrap{max-width:none;padding:0}
/* sekme gövdeleri yazdırmada HEPSİ görünür — kâğıtta sekme olmaz */
.sekme-govde[hidden]{display:block!important}
.sekme-govde{page-break-inside:avoid;border-top:1px solid var(--sabit-gri);
margin-top:.6rem;padding-top:.6rem}
.card,.stat,.tbl{box-shadow:none!important;border:1px solid var(--sabit-gri)!important;
break-inside:avoid}
.stat::before{display:none}
.tbl{font-size:var(--fs-baski-sm)}
.tbl th{background:var(--sabit-gri-acik)!important;-webkit-print-color-adjust:exact;
print-color-adjust:exact}
.tbl thead{display:table-header-group} /* her sayfada başlık tekrarı */
.tbl tr{break-inside:avoid}
.tbl-sabit{max-height:none;overflow:visible}
.tbl-sabit thead th,.tbl-sabit td:first-child{position:static}
/* rozetler renksiz de okunsun */
.badge,.crud{border:1px solid var(--sabit-gri-koyu)!important;background:#fff!important;
color:#000!important;box-shadow:none!important}
h2,h3,h4{break-after:avoid}
.grid,.cols,.two,.stats{display:block}
.grid > *,.cols > *,.stats > *{margin-bottom:.6rem}
/* bağlantı adresleri yanına yazılsın */
a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--fs-baski-xs);color:var(--sabit-gri-koyu)}
a[href^="#"]::after,a[href^="/"]::after{content:""}
.yazdir-not{display:block!important;font-size:var(--fs-baski-xs);color:var(--sabit-gri-koyu);
border-top:1px solid var(--sabit-gri);margin-top:1rem;padding-top:.4rem}
}
.yazdir-not{display:none}
/* ============================================================
GEZİNME BİLEŞENLERİ
============================================================ */
/* --- KAYIT GEZİNME ---
Listeden bir kayda girdikten sonra listeye dönmeden önceki/sonraki
kayda geçmek için. Üst çubukta, kırıntının yanında durur.
Odoo'nun kayıt görünümündeki sayaçla aynı işi görür. */
.kayit-gez{display:inline-flex;align-items:center;gap:.1rem;
background:var(--surface-100);border:1px solid var(--ink-200);
border-radius:var(--radius-full);padding:.15rem;flex:0 0 auto}
.kayit-gez button{width:26px;height:26px;border:0;background:none;
color:var(--ink-600);border-radius:50%;cursor:pointer;display:grid;
place-items:center;transition:var(--transition);padding:0}
.kayit-gez button:hover:not(:disabled){background:var(--yuzey);
color:var(--brand-primary);box-shadow:var(--shadow-xs)}
.kayit-gez button:disabled{opacity:.3;cursor:not-allowed}
.kayit-gez button:focus-visible{outline:none;
box-shadow:0 0 0 3px var(--odak-halka-guclu)}
.kayit-gez-sayi{font-size:var(--fs-sm);color:var(--ink-600);padding:0 .45rem;
font-variant-numeric:tabular-nums;white-space:nowrap;user-select:none}
.kayit-gez-sayi b{color:var(--ink-900);font-weight:600}
/* --- ADIM GEZİNME ---
Sihirbaz, çok adımlı form ve uzun sayfaların altında.
Sağdaki düğme birincil eylemdir; sol taraf geri döner. */
.gez-cubuk{display:flex;align-items:center;justify-content:space-between;
gap:1rem;flex-wrap:wrap;padding-top:1.1rem;margin-top:1.4rem;
border-top:1px solid var(--ink-200)}
.gez-cubuk .gez-orta{font-size:var(--fs-sm);color:var(--ink-500);
font-variant-numeric:tabular-nums}
.gez-sag{display:flex;gap:.6rem;align-items:center;margin-left:auto}
/* --- SAYFA GEZİNME ---
Belge/vitrin sayfaları arasında "önceki bölüm / sonraki bölüm".
Kart gibi görünür; başlığı da gösterir ki kullanıcı nereye gittiğini bilsin. */
.sayfa-gez{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2.5rem}
.sayfa-gez a{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;
background:var(--yuzey);border:1px solid var(--ink-200);
border-radius:var(--radius-md);text-decoration:none;color:var(--ink-700);
transition:var(--transition);box-shadow:var(--shadow-xs);min-width:0}
.sayfa-gez a:hover{border-color:var(--brand-primary-light);
box-shadow:var(--shadow-md);transform:translateY(-1px)}
.sayfa-gez a.sonraki{grid-column:2;flex-direction:row-reverse;text-align:right}
.sayfa-gez a.tek{grid-column:1 / -1}
.sayfa-gez svg{flex:0 0 18px;opacity:.5;transition:var(--transition)}
.sayfa-gez a:hover svg{opacity:1;color:var(--brand-primary)}
.sayfa-gez-metin{min-width:0}
.sayfa-gez-etiket{display:block;font-size:var(--fs-xs);color:var(--ink-500);
text-transform:uppercase;letter-spacing:.06em}
.sayfa-gez-ad{display:block;font-size:var(--fs-base);font-weight:600;color:var(--ink-900);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
.sayfa-gez{grid-template-columns:1fr}
.sayfa-gez a.sonraki{grid-column:1;flex-direction:row;text-align:left}
.kayit-gez-sayi{display:none}
.gez-cubuk{flex-direction:column;align-items:stretch}
.gez-sag{margin-left:0;flex-direction:column-reverse}
.gez-sag > *{width:100%}
}
/* ============================================================
KILAVUZ / BELGE DÜZENİ
Veri ekranlarından FARKLI bir tasarım problemi:
veri ekranı → tarama, karar, sıkı yerleşim
kılavuz → okuma, öğrenme, nefes alan yerleşim
Bu yüzden gövde metni büyür, satır aralığı açılır, ölçü daraltılır.
============================================================ */
.kilavuz-duzen{display:grid;grid-template-columns:1fr 232px;gap:2.5rem;
align-items:start}
.kilavuz-ic{min-width:0;max-width:74ch;font-size:var(--fs-govde);line-height:1.75}
.kilavuz-ic > *:first-child{margin-top:0}
/* --- tipografi: okuma için --- */
.kilavuz-ic h2{font-size:var(--fs-2xl);margin:2.8rem 0 .9rem;scroll-margin-top:5rem;
position:relative}
.kilavuz-ic h3{font-size:var(--fs-lg);margin:2.1rem 0 .7rem;scroll-margin-top:5rem;
position:relative}
.kilavuz-ic h4{font-size:var(--fs-govde);margin:1.5rem 0 .5rem}
.kilavuz-ic p{margin:0 0 1.05rem}
.kilavuz-ic ul,.kilavuz-ic ol{margin:0 0 1.15rem;padding-left:1.35rem}
.kilavuz-ic li{margin-bottom:.42rem}
.kilavuz-ic li > ul,.kilavuz-ic li > ol{margin:.42rem 0 0}
.kilavuz-ic strong,.kilavuz-ic b{font-weight:600}
.kilavuz-ic code{background:var(--surface-100);border:1px solid var(--ink-200);
border-radius:5px;padding:.08em .34em;font-size:var(--fs-goreli)}
.kilavuz-ic .copy-box code{background:none;border:0;padding:0}
.kilavuz-ic hr{border:0;border-top:1px solid var(--ink-200);margin:2.4rem 0}
.kilavuz-ic .tbl{font-size:var(--fs-base);margin-bottom:1.2rem}
.kilavuz-giris{font-size:var(--fs-lg);color:var(--ink-600);line-height:1.7;
margin-bottom:2rem}
/* --- başlık bağlantısı: üzerine gelince # çıkar --- */
.kilavuz-ic h2 > .cengel,.kilavuz-ic h3 > .cengel{position:absolute;
left:-1.25rem;top:50%;transform:translateY(-50%);opacity:0;
color:var(--ink-400);text-decoration:none;font-weight:400;
transition:var(--transition);font-size:var(--fs-goreli)}
.kilavuz-ic h2:hover > .cengel,.kilavuz-ic h3:hover > .cengel,
.cengel:focus-visible{opacity:1}
.cengel:hover{color:var(--brand-primary)}
/* --- içindekiler: yapışkan --- */
.ic-liste{position:sticky;top:5rem;max-height:calc(100vh - 7rem);
overflow-y:auto;font-size:var(--fs-md);padding-left:.9rem;
border-left:1px solid var(--ink-200);scrollbar-width:thin}
.ic-liste-baslik{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
color:var(--ink-500);font-weight:600;margin-bottom:.7rem}
.ic-liste a{display:block;padding:.3rem 0 .3rem .55rem;margin-left:-.95rem;
border-left:2px solid transparent;color:var(--ink-600);text-decoration:none;
transition:var(--transition);line-height:1.4}
.ic-liste a:hover{color:var(--ink-900)}
.ic-liste a.aktif{color:var(--brand-primary);border-left-color:var(--brand-primary);
font-weight:600}
.ic-liste a.alt{padding-left:1.5rem;font-size:var(--fs-sm)}
/* --- okuma ilerlemesi --- */
.okuma-ilerleme{position:fixed;top:0;left:var(--sidebar-w);right:0;height:2px;
z-index:50;background:transparent;transition:left var(--transition)}
.okuma-ilerleme > div{height:100%;width:0;background:var(--brand-gradient);
transition:width 90ms linear}
/* --- vurgu kutuları --- */
.kutu{display:flex;gap:.8rem;padding:.9rem 1.05rem;border-radius:var(--radius-md);
margin:1.3rem 0;font-size:var(--fs-base);line-height:1.65;
border:1px solid var(--ink-200);background:var(--surface-50)}
.kutu > svg{flex:0 0 18px;margin-top:.18rem}
.kutu > div{min-width:0}
.kutu p:last-child{margin-bottom:0}
.kutu-baslik{font-weight:600;display:block;margin-bottom:.15rem}
.kutu.not{background:var(--info-bg);border-color:var(--ink-300);
color:var(--ink-700)}
.kutu.not > svg{color:var(--brand-purple)}
.kutu.ipucu{background:var(--ok-bg);border-color:var(--ok-kenar)}
.kutu.ipucu > svg{color:var(--ok)}
.kutu.uyari{background:var(--warn-bg);border-color:var(--warn-kenar)}
.kutu.uyari > svg{color:var(--warn)}
.kutu.tehlike{background:var(--danger-bg);border-color:var(--danger-kenar)}
.kutu.tehlike > svg{color:var(--danger)}
[data-tema="koyu"] .kutu.not > svg{color:var(--brand-primary-light)}
/* --- yordam adımları --- */
.yordam{counter-reset:yordam;list-style:none;padding:0;margin:1.3rem 0}
.yordam > li{counter-increment:yordam;position:relative;padding:0 0 1.4rem 2.6rem;
margin:0}
.yordam > li::before{content:counter(yordam);position:absolute;left:0;top:-.1rem;
width:26px;height:26px;border-radius:50%;background:var(--brand-gradient);
color:#fff;font-family:var(--font-heading);font-size:var(--fs-sm);font-weight:700;
display:grid;place-items:center;box-shadow:var(--shadow-brand)}
.yordam > li:not(:last-child)::after{content:"";position:absolute;left:13px;
top:1.7rem;bottom:.35rem;width:2px;background:var(--ink-200)}
.yordam > li > b:first-child{display:block;margin-bottom:.2rem}
.yordam > li:last-child{padding-bottom:0}
/* --- şekil / ekran görüntüsü --- */
.sekil{margin:1.5rem 0}
.sekil img,.sekil .yer-tutucu{width:100%;border:1px solid var(--ink-200);
border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:block}
.sekil .yer-tutucu{aspect-ratio:16/9;background:var(--surface-100);
display:grid;place-items:center;color:var(--ink-400);font-size:var(--fs-md)}
.sekil figcaption{font-size:var(--fs-sm);color:var(--ink-500);margin-top:.55rem;
text-align:center}
/* --- kısayol tablosu --- */
.kisayol{width:100%;border-collapse:collapse;font-size:var(--fs-base);margin:1.2rem 0}
.kisayol td{padding:.5rem .2rem;border-bottom:1px solid var(--ink-200)}
.kisayol tr:last-child td{border-bottom:0}
.kisayol td:first-child{width:150px;white-space:nowrap}
/* --- geri bildirim --- */
.geri-bildirim{border:1px solid var(--ink-200);border-radius:var(--radius-md);
padding:1.1rem 1.25rem;margin-top:2.8rem;text-align:center;
background:var(--surface-50)}
.geri-bildirim p{margin:0 0 .7rem;font-size:var(--fs-base);font-weight:500}
.geri-bildirim .row-actions{justify-content:center}
.geri-bildirim.yanitlandi{background:var(--ok-bg);border-color:var(--ok-kenar)}
/* --- kılavuz arama --- */
.kilavuz-ara{position:relative;margin-bottom:1.5rem}
/* Genel input kuralı margin-top:.32rem verir. Simge top:50% ile SARMALAYICIYA
göre ortalandığından o boşluk simgeyi ~2.5px yukarı kaydırır. Boşluğu
sarmalayıcıya taşıyıp input'unkini sıfırlıyoruz — göz ikonundaki ile
aynı hata sınıfı. */
.kilavuz-ara input{margin-top:0;padding-left:2.45rem}
/* Simgenin SOL KENARI, normal input'ların metin girintisiyle (.75rem)
hizalanır — aynı aileden görünsün. */
.kilavuz-ara > svg{position:absolute;left:.75rem;top:50%;
transform:translateY(-50%);color:var(--ink-400);pointer-events:none}
.kilavuz-ara input:focus + svg,
.kilavuz-ara input:not(:placeholder-shown) + svg{color:var(--brand-primary)}
.bolum-gizli{display:none}
.arama-bos{padding:2rem 1rem;text-align:center;color:var(--ink-500);
font-size:var(--fs-base)}
/* --- sürüm rozeti --- */
.kilavuz-ust{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
margin-bottom:.4rem}
.kilavuz-ust h1{font-size:var(--fs-3xl)}
.guncelleme{font-size:var(--fs-sm);color:var(--ink-500)}
@media(max-width:1080px){
.kilavuz-duzen{grid-template-columns:1fr}
.ic-liste{position:static;max-height:none;border-left:0;padding-left:0;
border-bottom:1px solid var(--ink-200);padding-bottom:1rem;
margin-bottom:1.5rem;order:-1}
.ic-liste a{margin-left:0;border-left:0;padding-left:0;display:inline-block;
margin-right:1.1rem}
.ic-liste a.aktif{border-left:0;text-decoration:underline}
.ic-liste a.alt{display:none}
}
@media(max-width:860px){
.okuma-ilerleme{left:0}
.kilavuz-ic{font-size:var(--fs-govde)}
.kilavuz-ic h2{font-size:var(--fs-xl)}
}
@media print{
.ic-liste,.okuma-ilerleme,.geri-bildirim,.kilavuz-ara,.cengel{display:none!important}
.kilavuz-duzen{display:block}
.kilavuz-ic{max-width:none}
.kutu,.yordam > li,.sekil{break-inside:avoid}
}
/* /static/ui/css/uygulama.css */
/* odoflask — uygulama katmani.
*
* odo-arayuz.css TASARIM SISTEMIDIR ve DEGISTIRILMEZ. Burasi yalnizca
* tasarim sisteminde KARSILIGI OLMAYAN, bu uygulamaya ozgu birkac yardimci
* sinif tanimlar.
*
* Sistemde zaten olani burada yeniden tanimlamayin. Ilk yazimda tam tersi
* yapildi: .kart/.rozet/.soluk/.btn-birincil gibi UYDURMA adlar kullanildi,
* sistemdeki karsiliklari (.card/.badge/.muted/.btn-primary) yerine. Sayfalar
* render oluyordu ama hicbir stil uygulanmiyordu. Yeni sinif eklemeden once
* python3 scripts/sinif_denetimi.py
* calistirin — tanimsiz sinif kullanimini yakalar.
*/
/* --- Ust uste istiflenen bloklarin dikey ritmi ---
*
* Tasarim sisteminde .card MARGIN TASIMAZ; bosluklanmasi cagirana birakilmis:
* .grid .card -> .grid'in gap:1rem'i
* .stats -> kendi margin-bottom:1.75rem'i
* Panel sayfalarinda kartlar dogrudan .wrap altina istifleniyor ve arada
* HIC BOSLUK KALMIYORDU (olculdu: 0px) — kartlar birbirine yapisik ciziliyordu.
*
* Deger .stats'in margin-bottom'u ile ayni secildi: baslik -> sayaclar ->
* kart -> kart boyunca TEK ritim olusuyor.
*
* SADECE sistemin bos biraktigi yerlere kural yaziliyor. Sistemde zaten
* margin'i olanlara (.alert 1.1rem, .actions .5rem, .filter-row 1.1rem)
* DOKUNULMUYOR — onlari ezmek tasarim sistemini catallastirir. */
.wrap > .card { margin-bottom: 1.75rem; }
/* Son blogun altinda .wrap'in kendi padding-bottom'u (4rem) zaten var */
.wrap > :last-child { margin-bottom: 0; }
/* Kart basligi ile govdesi arasi — .head-row sistemde margin tasimiyor */
.card > .head-row { margin-bottom: .9rem; }
/* Kart icinde ust uste gelen tablo/form — .tbl de margin tasimiyor */
.card > .tbl:not(:last-child),
.card > form:not(:last-child) { margin-bottom: 1rem; }
/* --- Sol menu basligi ile icerik basligi AYNI HIZADA ---
*
* Iki cubuk birbirinden bagimsiz olculendirilmisti ve alt cizgileri
* tutmuyordu (olculdu: .side-ust alt kenar 66.3px, .ust-cubuk 58.9px
* — 7.3px kayma). Yukseklikleri iceriklerine gore olusuyordu:
* solda .brand'in 1.3rem'i, sagda btn-sm dugmeler.
*
* Cozum: ikisine de AYNI min-height verip dikey padding'i sifirliyoruz.
* Ikisi de zaten display:flex; align-items:center oldugu icin icerik
* kendiliginden ortalaniyor. Yatay padding'e DOKUNULMUYOR
* (padding-block yalnizca dikeyi hedefler).
*
* body.dar .side-ust kisayol `padding` ile ezdigi icin secici listeye
* ACIKCA dahil edildi — yoksa daraltilmis menude hizalama bozulurdu. */
:root {
--ust-yukseklik: 3.9rem;
/* uygulamaya özgü renk token'ları (genel ölçek ve palet odo-arayuz.css :root'ta) — kurallarda serbest renk yazılmaz */
--kod-zemin: #120c17; --kod-zemin-2: #1d1428;
--dosya-pdf: #c0392b; --dosya-doc: #2f62b5; --dosya-xls: #1e8449; --dosya-ppt: #c25a12;
--yikici-a55: rgba(208, 52, 74, .55);
--ql-kirmizi: #c62f3e; --ql-turuncu: #c8611b; --ql-sari: #a77a00; --ql-yesil: #1e8a4c; --ql-mavi: #2563c4; --ql-mor: #7a3c9e;
--ql-bg-kirmizi: #fde2e4; --ql-bg-turuncu: #fde9d7; --ql-bg-sari: #fff2b3; --ql-bg-yesil: #dcf3e4;
--ql-bg-mavi: #dde9fb; --ql-bg-mor: #ece0f5; --ql-bg-pembe: #fbe0ea; --ql-bg-gri: #ece7f0; --ql-bg-metin: #1b1220;
--log-soluk: #9d8fab; --log-info: #7fb3ff; --log-uyari: #ffc861; --log-hata: #ff7a8a;
--log-hata-zemin: rgba(255, 90, 110, .07); --log-sure: #c9a7e8; --log-ad: #8fd3c0;
}
.side-ust,
body.dar .side-ust,
.ust-cubuk {
padding-block: 0;
min-height: var(--ust-yukseklik);
}
/* --- Ust cubuk ikon dugmeleri ---
* Metinsiz dugmeler (ara, onay, bildirim, tam ekran) kare gorunsun;
* btn-sm yatay padding metin icin ayarli.
* Yukseklik esitleniyor: ikon dugmeler 30px, metinli tema dugmesi 36px
* cikiyordu — yan yana durduklari icin 6px fark goze carpiyordu. */
.ust-sag .btn-ghost { min-height: 2.25rem; }
.ust-sag .btn-ghost:not(:has(#tema-metin)) { padding-inline: .5rem; }
/* Sayac rozeti dugmenin kosesine otursun — .zil position:relative verir */
.ust-sag .zil { display: inline-flex; }
/* --- Ust cubuk sayac rozeti ---
*
* NEDEN .zil-sayac DEGIL: tasarim sisteminin bildirim merkezi bileseni
* (odo-arayuz.js -> merkezSay) sayfa acilisinda BELGEDEKI ILK .zil-sayac
* ogesini bulup icerigini `.merkez-oge.okunmamis` sayisina gore YENIDEN
* YAZIYOR. Bizde bildirim merkezi markup'i yok, dolayisiyla sunucudan
* gelen dogru sayac (1) sifira cekiliyor ve gizleniyordu.
*
* Bu yuzden ayri bir ad kullaniliyor. Gorsel olarak .zil-sayac ile ayni
* tanimi tasir — sistemi ezmiyoruz, sahipli bir sinifin yanina kendi
* sinifimizi koyuyoruz. Bildirim merkezi ileride eklenirse bu sinif
* kaldirilip .zil-sayac'a donulebilir. */
.ust-sayac {
position: absolute; top: -3px; right: -3px;
min-width: 16px; height: 16px; padding: 0 .2rem;
border-radius: var(--radius-full); background: var(--danger);
color: #fff; font-size: var(--fs-2xs); font-weight: 700;
display: grid; place-items: center;
border: 2px solid var(--yuzey);
}
/* --- Daraltilmis menude UCAN alt menu ---
*
* Tasarim sistemi daraltilmis kenar cubugunda alt menuyu tamamen
* gizliyor: `body.dar .nav-alt{display:none!important}`. Bu, alt menude
* yalnizca birkac yonetim baglantisi varken makuldu — gezinmenin geri
* kalani ikonlarla ust seviyedeydi.
*
* Artik Panel disindaki TUM sayfalar bu grubun altinda. Kural oldugu gibi
* kalsaydi menu daraltilinca SADECE PANEL'e erisilebilirdi; daralt
* dugmesi gezinmeyi tamamen kilitlerdi.
*
* Cozum: daraltilmis modda alt menu, uzerine gelince (veya klavyeyle
* odaklaninca) kenar cubugunun saginda acilan bir kutu olarak gosteriliyor.
* .nav'in overflow-x:hidden'i kutuyu kirpardi; yalnizca daraltilmis modda
* kaldiriliyor — orada zaten 2 oge var, kaydirma gerekmiyor.
* Mobilde daraltma devre disi (tasarim sistemi), bu yuzden dokunmatikte
* hover sorunu olusmuyor. */
body.dar .nav { overflow: visible; }
body.dar .nav-grup { position: relative; }
body.dar .nav-grup:hover > .nav-alt,
body.dar .nav-grup:focus-within > .nav-alt {
display: flex !important;
/* left:100% — kutu ogeye BITISIK; arada bosluk birakmak fareyle
gecerken hover'i kopariyordu. */
position: absolute; left: 100%; top: 0; z-index: 70;
min-width: 13rem; margin: 0; padding: .4rem;
border: 1px solid var(--beyaz-a12); border-left: 0;
border-radius: var(--radius-md);
background: var(--koyu-zemin-2);
box-shadow: var(--shadow-lg);
}
/* body.dar .nav a icerigi ortalar; ucan kutuda sola hizali olmali */
body.dar .nav-grup > .nav-alt a {
justify-content: flex-start;
padding-left: .7rem; padding-right: .7rem;
}
/* body.dar .nav-rozet gizlenir; ucan kutuda sayac gorunmeli */
body.dar .nav-grup > .nav-alt .nav-rozet { display: inline-block; }
/* --- Satir icinde birden fazla POST formu (tablo satiri eylemleri) --- */
.satir-form { display: inline-block; margin: 0 .25rem 0 0; }
/* --- Tablo hucre yardimcilari --- */
.tbl .dar { white-space: nowrap; width: 1%; }
.tbl .sag { text-align: right; }
.tbl .orta { text-align: center; }
/* Uzun metni tek satirda kirp (kaynak yollari, hata mesajlari) */
.kirp {
max-width: 26rem; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
/* Okunmamis bildirim satiri */
.satir-okunmamis { font-weight: 600; }
/* --- Bildirim seviyesi noktasi ---
.badge kullanmiyoruz: tablo satirinda tek karakterlik gosterge yeterli,
rozet fazla gurultu yapiyor. */
.nokta {
display: inline-block; width: .55rem; height: .55rem;
border-radius: 50%; background: var(--ink-400);
}
.nokta-info { background: var(--info, #3b82f6); }
.nokta-success { background: var(--ok, #16a34a); }
.nokta-warning { background: var(--warn, #d97706); }
.nokta-error { background: var(--danger, #dc2626); }
/* --- Onay kutusu satiri / grubu (form icinde) --- */
.onay-satir { display: flex; align-items: center; gap: .5rem; }
.onay-grup { display: flex; gap: 1.1rem; flex-wrap: wrap; }
/* --- Uzun metin blogu (bildirim govdesi, JSON, cikti) ---
.copy-box koyu zeminlidir ve kopyalama dugmesi bekler; burada yalnizca
okunabilir bir blok gerekiyor. */
.metin-blok {
white-space: pre-wrap; word-break: break-word;
font-size: var(--fs-sm); line-height: 1.55;
padding: .75rem; border-radius: var(--radius-md, 8px);
background: var(--surface-100); border: 1px solid var(--ink-200);
overflow-x: auto;
}
/* --- Sayfalama devre disi oku --- */
.pasif { opacity: .4; pointer-events: none; }
/* --- Ortalanmis tek kart (oturum ici hata sayfasi) --- */
.merkez-kart { max-width: 28rem; margin: 3rem auto; text-align: center; }
/* --- Giris ekrani: alt baslik (.giris-alt) kaldirildi ---
Marka ile form arasindaki boslugu eskiden .giris-alt'in alt marji
(1.7rem) veriyordu; o paragraf gidince form markaya yapisiyordu. */
.giris-marka { margin-bottom: 1.7rem; }
/* --- htmx: istek suren kart ---
Istek boyunca htmx formun uzerine .htmx-request koyar. Kart soluklasir,
tekrar tiklama engellenir (cift gonderim olmasin). Gonderen dugme
ayrica hx-disable ile devre disi kalir (bkz. uygulama.js). */
.card:has(form.htmx-request) { opacity: .6; transition: opacity 150ms ease; }
form.htmx-request { pointer-events: none; }
/* Kart degistiginde kisa bir vurgu — kullanici neyin guncellendigini gorsun */
@keyframes kart-tazelendi {
from { box-shadow: 0 0 0 2px var(--brand-primary-light, #c03060); }
to { box-shadow: 0 0 0 2px transparent; }
}
.kart-tazelendi { animation: kart-tazelendi 900ms ease-out; }
/* --- Gorunumler (liste/blok/kanban) ---
.wrap > .card bosluk kuralinin kanban ve blok izgarasi icin karsiligi. */
.wrap > .kanban, .wrap > .grid { margin-bottom: 1.75rem; }
/* Tasarim sisteminde .sayfa-btn