/* ═══════════════════════════════════════════════════════════════
   RACOUN AGENCY PANEL — Tasarım Sistemi v4.2
   Tipografi: Manrope (tek font ailesi, tüm panelde)
   Simgeler:  Noto Emoji (tek renk) — panelde hiçbir simge rengarenk
              değildir; hepsi bulunduğu yerin metin rengini alır.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 0. TEK RENK SİMGE FONTU ───
   Emoji karakterleri işletim sisteminin rengarenk fontuyla değil,
   bu tek renkli fontla çizilir. Yalnızca panelde kullanılan 97
   simgeyi içerir (25 KB) ve kendi sunucumuzdan gelir — dışarıya
   bağımlılık yoktur. Simgeler `currentColor` ile boyanır; böylece
   açık/koyu temada ve renkli düğmelerin üzerinde kendiliğinden
   doğru renge döner. */
@font-face{
  font-family:'Racoun Emoji';
  src:url('../fonts/racoun-emoji.woff2') format('woff2'),
      url('../fonts/racoun-emoji.woff')  format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ─── 1. TOKENLER ─── */
:root{
  /* Marka */
  --brand-ink:#0E1116;
  /* Marka vurgusu artık tek renk: logodaki lime. Eski turuncu kaldırıldı,
     ama token adları korundu ki tüm dosyadaki kullanımlar bozulmasın. */
  --brand-accent:#C1ED00;
  --brand-accent-soft:#F2FBCC;
  --brand-accent-dark:#8FB300;
  /* Marka vurgusu — logo siyah-beyaz, canlı vurgu bu limedir */
  --lime:#C1ED00;
  --lime-ink:#0E1116;      /* lime üzerine yazılan metin — daima siyah */
  --lime-dark:#A5CC00;
  --lime-soft:#F2FBCC;
  --lime-deep:#8FB300;     /* odak halkası ve kenarlıklar için koyu lime */
  /* Vurgu gradyanı — açık limeden koyuya, 135°. Aktif menü, birincil düğme
     ve öne çıkan istatistik kartı bunu kullanır. */
  --grad-lime:linear-gradient(135deg,#DCF95C 0%,#C1ED00 52%,#A9D400 100%);
  --grad-lime-hover:linear-gradient(135deg,#E4FB7C 0%,#CBF41A 52%,#B5E000 100%);
  --sh-lime:0 6px 18px -6px rgba(150,190,0,.55);

  /* Yüzeyler — açık tema */
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --surface-3:#F1F4F7;
  --overlay:rgba(14,17,22,.55);

  /* Metin */
  --text:#0E1116;
  --text-2:#5A6472;
  --text-3:#6B7686;
  --text-inv:#FFFFFF;

  /* Çizgi */
  --line:#E4E8ED;
  --line-2:#D3D9E0;

  /* Durum */
  --ok:#16A34A;      --ok-bg:#ECFDF3;   --ok-br:#BBF7D0;
  --warn:#D97706;    --warn-bg:#FFFBEB; --warn-br:#FDE68A;
  --err:#DC2626;     --err-bg:#FEF2F2;  --err-br:#FECACA;
  --info:#2563EB;    --info-bg:#EFF6FF; --info-br:#BFDBFE;

  /* Görev durumları */
  --st-bekliyor:#64748B;   --st-bekliyor-bg:#F1F5F9;
  --st-yapiliyor:#2563EB;  --st-yapiliyor-bg:#EFF6FF;
  --st-revizyon:#D97706;   --st-revizyon-bg:#FFFBEB;
  --st-tamamlandi:#7C3AED; --st-tamamlandi-bg:#F5F3FF;
  --st-onaylandi:#16A34A;  --st-onaylandi-bg:#ECFDF3;
  --st-iptal:#94A3B8;      --st-iptal-bg:#F8FAFC;

  /* Grafik paleti — renk körlüğü testinden geçmiş sabit sıra.
     Sıra ASLA değiştirilmez, renkler döngüye sokulmaz.
     Doğrulama: ΔE(CVD) 9.1 / ΔE(normal) 19.6 — açık yüzey #FFFFFF */
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100;
  --c5:#e87ba4; --c6:#008300; --c7:#4a3aa7; --c8:#e34948;
  --chart-surface:#FFFFFF;
  --chart-grid:#E4E8ED;
  --chart-axis:#8B95A3;
  /* Tek hueli sıralı ramp (yoğunluk/ısı haritası) */
  --seq-1:#EAF2FC; --seq-2:#C3DBF5; --seq-3:#8FBDEC; --seq-4:#559BE0; --seq-5:#2a78d6; --seq-6:#1B579F;

  /* Ölçü */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* Gölge */
  --sh-1:0 1px 2px rgba(14,17,22,.05);
  --sh-2:0 1px 3px rgba(14,17,22,.06), 0 8px 20px -12px rgba(14,17,22,.16);
  --sh-3:0 2px 6px rgba(14,17,22,.07), 0 22px 44px -20px rgba(14,17,22,.24);
  --sh-pop:0 10px 40px -12px rgba(14,17,22,.30);

  --header-h:64px;
  --sb-w:236px;          /* sol menü genişliği */
  --sb-w-min:66px;       /* daraltılmış hâli */
  /* Simge fontu METİN fontundan ÖNCE gelir; emoji kod noktaları
     her zaman tek renkli sürümle çizilir, harfler Manrope ile. */
  --font:'Racoun Emoji', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --bg:#0B0D11;
  --surface:#14171D;
  --surface-2:#191D24;
  --surface-3:#20252D;
  --overlay:rgba(0,0,0,.66);
  --text:#EEF1F5;
  --text-2:#9AA5B4;
  --text-3:#6C7787;
  --line:#252A33;
  --line-2:#333A45;
  --brand-accent-soft:#232B00;
  --ok-bg:#0D2118; --warn-bg:#241B0B; --err-bg:#2A1313; --info-bg:#111C2E;
  --ok-br:#1B4332; --warn-br:#4A3410; --err-br:#4C1D1D; --info-br:#1E3A5F;
  --st-bekliyor-bg:#1B1F26; --st-yapiliyor-bg:#111C2E; --st-revizyon-bg:#241B0B;
  --st-tamamlandi-bg:#1E1630; --st-onaylandi-bg:#0D2118; --st-iptal-bg:#181B21;
  /* Koyu yüzey için ayrı seçilmiş adımlar — açık paletin çevrimi değil.
     Doğrulama: ΔE(CVD) 8.4 / kontrast ≥3:1 — koyu yüzey #14171D */
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500;
  --c5:#d55181; --c6:#008300; --c7:#9085e9; --c8:#e66767;
  --chart-surface:#14171D;
  --chart-grid:#252A33;
  --chart-axis:#6C7787;
  --seq-1:#12233A; --seq-2:#17395F; --seq-3:#1C5089; --seq-4:#2A6BB3; --seq-5:#3987e5; --seq-6:#6FA8EE;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.45);
  --sh-3:0 8px 32px rgba(0,0,0,.55);
  --sh-pop:0 12px 48px rgba(0,0,0,.6);
}

/* ─── 2. TEMEL ─── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Form ögeleri tarayıcı varsayılanına kaçmasın — her yerde Manrope */
input,select,textarea,button{font-family:var(--font)}
body{
  font-family:var(--font);
  /* Bazı tarayıcılar VS-16 gördüğünde rengarenk sistem fontuna kaçar */
  font-variant-emoji:text;
  font-size:14.5px;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,h4{line-height:1.22;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(24px,3vw,34px)}
h2{font-size:20px}
h3{font-size:16.5px}
h4{font-size:14.5px;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
[hidden]{display:none!important}
::selection{background:var(--lime);color:var(--lime-ink)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

:focus-visible{outline:2px solid var(--lime-deep);outline-offset:2px;border-radius:4px}

/* ═══════════════════════════════════════════════
   2b. LOGO
   SVG maske olarak kullanılır; böylece logo bulunduğu yerin
   metin rengini alır ve açık/koyu temada kendiliğinden döner.
   ═══════════════════════════════════════════════ */
.brandmark{
  display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
}
.brandmark--lockup{
  width:126px;height:33px;
  -webkit-mask-image:url('../img/logo-yatay.svg');
  mask-image:url('../img/logo-yatay.svg');
}
.brandmark--icon{
  width:34px;height:31px;
  -webkit-mask-image:url('../img/logo-mark.svg');
  mask-image:url('../img/logo-mark.svg');
}
.brandmark--stack{
  width:150px;height:183px;
  -webkit-mask-image:url('../img/logo-dikey.svg');
  mask-image:url('../img/logo-dikey.svg');
}

/* ═══════════════════════════════════════════════
   3. GİRİŞ EKRANI — tek giriş, rol seçimi yok
   Sol: koyu kreatif taraf (dev logo filigranı, akan şerit,
   maskot). Sağ: sade form. 960px altında yalnızca form kalır.
   ═══════════════════════════════════════════════ */
.login{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  min-height:100vh;min-height:100dvh;
  background:var(--surface);
}

/* ─── Sol: kreatif taraf ─── */
.login__art{
  position:relative;overflow:hidden;
  background:
    radial-gradient(115% 90% at 82% 88%, rgba(193,237,0,.16) 0%, rgba(193,237,0,0) 56%),
    radial-gradient(90% 70% at 14% 4%, rgba(255,255,255,.07) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(168deg,#14171D 0%,#0B0D11 60%,#07080B 100%);
  color:#fff;
  display:flex;flex-direction:column;
  padding:38px 44px 0;
}
/* İnce ızgara dokusu */
.login__art::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(82% 66% at 40% 22%, #000 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(82% 66% at 40% 22%, #000 0%, transparent 100%);
}
.login__art > *{position:relative;z-index:2}

/* Dev logo işareti — fon filigranı */
.login__watermark{
  position:absolute;left:-8%;top:50%;transform:translateY(-50%);
  width:min(86%,700px);aspect-ratio:1058/975;
  background-color:#fff;opacity:.05;z-index:0;pointer-events:none;
  -webkit-mask:url('../img/logo-mark.svg') no-repeat center/contain;
  mask:url('../img/logo-mark.svg') no-repeat center/contain;
}

.login__artTop{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.login__brand{color:#fff;display:block}
.login__brand .brandmark{width:150px;height:39px}
.login__brandSm{display:none;color:var(--text);margin-bottom:34px}

.login__status{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);
  padding:7px 14px;border-radius:var(--r-full);
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  backdrop-filter:blur(8px);white-space:nowrap;
}
.login__status i{
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(193,237,0,.7);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(193,237,0,.55)}
  70%{box-shadow:0 0 0 9px rgba(193,237,0,0)}
  100%{box-shadow:0 0 0 0 rgba(193,237,0,0)}
}

.login__artMid{margin:auto 0;padding:26px 0}
.login__headline{
  font-size:clamp(34px,3.9vw,56px);font-weight:800;letter-spacing:-.04em;
  line-height:1.02;margin-bottom:18px;
}
.login__headline em{
  font-style:normal;color:var(--lime);
  /* Vurgu kelimenin altına ince bir çizgi */
  box-shadow:inset 0 -.14em 0 rgba(193,237,0,.24);
}
.login__desc{
  font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.70);
  max-width:392px;font-weight:500;
}
.login__clock{
  margin-top:30px;display:inline-flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:15px 20px;backdrop-filter:blur(10px);
}
.login__clock b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.login__clock small{display:block;font-size:13.5px;font-weight:700;color:rgba(255,255,255,.9)}
.login__clock span{
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* Alt akan şerit */
.marquee{
  position:relative;z-index:2;margin:0 -44px;
  border-top:1px solid rgba(255,255,255,.09);
  overflow:hidden;padding:15px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:20px;width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee__track span{
  font-size:12px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.58);white-space:nowrap;
}
.marquee__track i{color:var(--lime);font-size:8px;font-style:normal;opacity:.85}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.login__glow{
  position:absolute;right:2%;bottom:-14%;width:min(48vw,520px);height:min(48vw,520px);
  background:radial-gradient(circle, rgba(193,237,0,.28) 0%, rgba(193,237,0,0) 66%);
  z-index:0;pointer-events:none;
}

/* ─── Sağ: form ─── */
.login__form{
  display:flex;align-items:center;justify-content:center;
  padding:48px 32px;position:relative;
}
.login__inner{width:100%;max-width:392px}
.login__eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:14px;
}
.login__chip{
  background:var(--lime);color:var(--lime-ink);
  font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:var(--r-full);
  letter-spacing:.04em;
}
.login__title{font-size:33px;font-weight:800;letter-spacing:-.035em;margin-bottom:30px;line-height:1.1}
.login__sub{color:var(--text-2);font-size:14.5px;font-weight:500;margin-bottom:30px;line-height:1.55}
.login__foot{
  margin-top:26px;text-align:center;font-size:13px;font-weight:700;
}
.login__foot a{color:var(--text-2)}
.login__foot a:hover{color:var(--text)}
.login__sep{color:var(--text-3);margin:0 9px}
.login__legal{
  margin-top:10px;text-align:center;font-size:11.5px;color:var(--text-3);font-weight:600;
}

@media(max-width:960px){
  .login{grid-template-columns:1fr}
  .login__art{display:none}
  .login__form{min-height:100vh;min-height:100dvh;align-items:flex-start;padding-top:12vh}
  .login__brandSm{display:block}
}

/* ─── 4. FORM ─── */
.field{margin-bottom:16px}
.field > label{
  display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;color:var(--text-2);
}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap > svg{
  position:absolute;left:14px;width:17px;height:17px;color:var(--text-3);pointer-events:none;
}
.input-wrap > svg ~ input{padding-left:42px}
.input-wrap .toggle{
  position:absolute;right:8px;padding:7px;border-radius:8px;color:var(--text-3);
  display:flex;align-items:center;transition:background .15s, color .15s;
}
.input-wrap .toggle:hover{background:var(--surface-3);color:var(--text)}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=datetime-local],input[type=search],input[type=url],
input[type=tel],select,textarea{
  width:100%;padding:11.5px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--surface);font-size:14.5px;font-weight:500;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
textarea{resize:vertical;min-height:88px;line-height:1.55}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-ink);box-shadow:0 0 0 3.5px rgba(14,17,22,.07);
}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{
  border-color:var(--brand-accent);box-shadow:0 0 0 3.5px rgba(255,138,61,.14);
}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);color:var(--text-3);cursor:not-allowed}
input.is-error,select.is-error,textarea.is-error{border-color:var(--err);box-shadow:0 0 0 3.5px rgba(220,38,38,.10)}
select{
  appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95A3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.field__hint{font-size:12px;color:var(--text-3);margin-top:6px;font-weight:500}
.field__err{font-size:12.5px;color:var(--err);margin-top:6px;font-weight:700}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-weight:600;user-select:none}
.check input{width:17px;height:17px;accent-color:var(--brand-ink);cursor:pointer;flex:none}

/* ─── 5. BUTONLAR ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11.5px 20px;border-radius:var(--r);font-size:14px;font-weight:700;
  background:var(--surface-3);color:var(--text);border:1.5px solid transparent;
  transition:transform .12s var(--ease), background .16s, box-shadow .16s, opacity .16s;
  white-space:nowrap;
}
.btn:hover{background:var(--line);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn--primary{background:var(--grad-lime);color:var(--lime-ink);font-weight:800;box-shadow:var(--sh-lime)}
.btn--primary:hover{background:var(--grad-lime-hover);box-shadow:0 8px 22px -6px rgba(150,190,0,.62)}
.btn--primary:active{background:linear-gradient(135deg,#C1ED00,#A5CC00)}
.btn--lime{background:var(--grad-lime);color:var(--lime-ink);font-weight:800;box-shadow:var(--sh-lime)}
.btn--lime:hover{background:var(--grad-lime-hover)}
.btn--lime:active{background:linear-gradient(135deg,#C1ED00,#A5CC00)}
[data-theme="dark"] .btn--primary,[data-theme="dark"] .btn--lime{color:#0E1116}
.btn--dark{background:var(--brand-ink);color:#fff;box-shadow:var(--sh-2)}
.btn--dark:hover{background:#1D222A;box-shadow:var(--sh-3)}
.btn--accent{background:var(--grad-lime);color:var(--lime-ink);font-weight:800}
.btn--accent:hover{background:var(--grad-lime-hover)}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-3);border-color:var(--line-2)}
.btn--danger{background:var(--err-bg);color:var(--err);border-color:var(--err-br)}
.btn--danger:hover{background:var(--err);color:#fff}
.btn--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.btn--ok:hover{background:var(--ok);color:#fff}
.btn--block{width:100%}
.btn--lg{padding:14.5px 26px;font-size:15px;border-radius:13px}
.btn--sm{padding:7px 12px;font-size:12.5px;border-radius:9px;gap:5px}
.btn--icon{padding:9px;border-radius:50%}
.btn--icon.btn--sq{border-radius:10px}
.btn.is-loading{color:transparent!important;position:relative;pointer-events:none}
.btn.is-loading::after{
  content:'';position:absolute;width:17px;height:17px;border-radius:50%;
  border:2.2px solid rgba(255,255,255,.32);border-top-color:#fff;animation:spin .7s linear infinite;
}
.btn--ghost.is-loading::after,.btn:not(.btn--primary):not(.btn--accent).is-loading::after{
  border-color:rgba(14,17,22,.2);border-top-color:var(--text);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── 6. UYGULAMA İSKELETİ ─── */
.app{display:none;min-height:100vh;flex-direction:column}
.app.is-on{display:flex}

.topbar{
  height:var(--header-h);display:flex;align-items:center;gap:10px;
  padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
}
/* Üst çubuktaki bilgi yongaları — durum, saat gibi küçük yuvarlak kartlar */
.chipcard{
  display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);
  font-size:12.5px;font-weight:700;color:var(--text-2);white-space:nowrap;
}
.chipcard__ico{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  background:var(--surface-3);color:var(--text-2);
}
.chipcard b{display:block;font-size:13px;color:var(--text);line-height:1.25;font-weight:800}
.chipcard small{display:block;font-size:10.5px;color:var(--text-3);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase}
.chipcard--ok .chipcard__ico{background:var(--ok-bg);color:var(--ok)}
.chipcard--lime{border-color:var(--lime-dark);background:var(--lime-soft)}
.chipcard--lime .chipcard__ico{background:var(--lime);color:var(--lime-ink)}
.chipcard--lime small{text-transform:none;letter-spacing:0;font-weight:700}
/* Koyu temada açık lime zemin üzerine açık yazı okunmuyordu:
   yonga zemini koyulaşır, yazı lime olur. */
[data-theme="dark"] .chipcard--lime{background:#1F2600;border-color:#3E4D00}
[data-theme="dark"] .chipcard--lime b{color:var(--lime)}
[data-theme="dark"] .chipcard--lime small{color:#9BB300}
[data-theme="dark"] .chipcard--ok .chipcard__ico{background:#0F2A17}
@media(max-width:1180px){.chipcard{display:none}}
.topbar__logo{display:flex;align-items:center;gap:10px;color:var(--text)}
.topbar__logo:hover{opacity:.72}
.topbar__spacer{flex:1}
.topbar__role{
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--lime-soft);color:#5E7600;border:1px solid #DCEE8A;
  padding:5px 11px;border-radius:var(--r-full);
}
[data-theme="dark"] .topbar__role{
  background:#1F2600;color:var(--lime);border-color:#3E4D00;
}
.topbar__user{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;margin-left:4px;
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface)}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--brand-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex:none;
}
.avatar--sm{width:26px;height:26px;font-size:10.5px}
.topbar__name{font-size:13.5px;font-weight:700;line-height:1.25}
.topbar__name small{display:block;font-size:11.5px;color:var(--text-3);font-weight:600}
@media(max-width:720px){.topbar__name,.topbar__role{display:none}}

/* ─── SOL MENÜ ─── */
.shell{display:flex;flex:1;min-height:0;align-items:stretch;gap:14px;padding:14px 14px 14px 0}

/* Sol menü, kenara yapışık bir sütun değil; sayfanın üzerinde duran
   yuvarlak beyaz bir karttır. Zemin gri kaldığı için kart yüzüyor gibi görünür. */
.sidebar{
  width:var(--sb-w);flex:none;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-2);
  position:sticky;top:calc(var(--header-h) + 14px);align-self:flex-start;
  height:calc(100vh - var(--header-h) - 28px);z-index:55;
  margin-left:14px;overflow:hidden;
  transition:width .18s var(--ease);
}
.sidenav{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:4px 10px 6px;scrollbar-width:thin;
}

/* Menüde arama — 18 sekme arasında yazarak süzmek en hızlı yol. */
.sidesearch{flex:none;padding:11px 11px 5px;position:relative}
.sidesearch input{
  width:100%;padding:10px 12px 10px 34px;border-radius:12px;
  background:var(--surface-3);border:1.5px solid transparent;
  font-size:13px;font-weight:600;color:var(--text);font-family:inherit;
  transition:background .15s,border-color .15s;
}
.sidesearch input::placeholder{color:var(--text-3);font-weight:600}
.sidesearch input:focus{background:var(--surface);border-color:var(--line-2);outline:none}
.sidesearch svg{position:absolute;left:23px;top:50%;transform:translateY(-4px);
  color:var(--text-3);pointer-events:none}
.sidenav__empty{padding:18px 12px;font-size:12.5px;font-weight:600;color:var(--text-3);text-align:center}
.app.is-narrow .sidesearch{display:none}
.sidenav::-webkit-scrollbar{width:8px}
.sidenav::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid var(--surface)}
.sidenav::-webkit-scrollbar-track{background:transparent}

.sidenav__title{
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);padding:10px 11px 3px;user-select:none;
}
.sidenav__group:first-child .sidenav__title{padding-top:2px}

.tab{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:6px 11px;border-radius:10px;margin-bottom:1px;
  font-size:13.5px;font-weight:700;color:var(--text-2);
  white-space:nowrap;text-align:left;
  transition:background .15s, color .15s;
}
.tab:hover{background:var(--surface-3);color:var(--text)}
/* Aktif sekme referans tasarımdaki gibi gradyanlı ve siyah yazılı */
.tab.is-on{background:var(--grad-lime);color:var(--lime-ink);font-weight:800;box-shadow:var(--sh-lime)}
.tab.is-on:hover{background:var(--grad-lime-hover)}
[data-theme="dark"] .tab.is-on{color:#0E1116}
.tab__icon{flex:none;width:20px;text-align:center;font-size:15px;line-height:1}
.tab__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tab__badge{
  flex:none;background:var(--err);color:#fff;font-size:10.5px;font-weight:800;
  padding:1px 6px;border-radius:var(--r-full);min-width:18px;text-align:center;
}
.tab.is-on .tab__badge{background:rgba(14,17,22,.82);color:#fff}

/* Menü kaydırılabiliyorsa alt kenarda yumuşak bir geçiş belirir —
   listenin devamı olduğu böylece görünür. */
.sidenav{position:relative}
.sidebar::after{
  content:"";position:absolute;left:1px;right:1px;bottom:41px;height:26px;
  background:linear-gradient(to bottom,transparent,var(--surface));
  pointer-events:none;opacity:.92;
}
.app.is-narrow .sidebar::after{bottom:39px}
@media(max-width:980px){.sidebar::after{bottom:0}}

.sidebar__toggle{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--text-3);
  transition:color .15s, background .15s;
}
.sidebar__toggle:hover{color:var(--text);background:var(--surface-3)}
.sidebar__toggle svg{flex:none;transition:transform .18s var(--ease)}

/* ── daraltılmış hâl ── */
.app.is-narrow{--sb-w:var(--sb-w-min)}
.app.is-narrow .sidenav{padding-left:8px;padding-right:8px}
.app.is-narrow .tab{justify-content:center;padding:10px 0;gap:0}
.app.is-narrow .tab__label{display:none}
.app.is-narrow .tab__badge{
  position:absolute;margin-left:26px;margin-top:-16px;
  padding:0 4px;min-width:15px;font-size:9.5px;line-height:15px;
}
.app.is-narrow .tab{position:relative}
.app.is-narrow .sidenav__title{
  font-size:0;padding:9px 8px;margin:0;
}
.app.is-narrow .sidenav__title::after{
  content:"";display:block;height:1px;background:var(--line);
}
.app.is-narrow .sidenav__group:first-child .sidenav__title{display:none}
.app.is-narrow .sidebar__toggle{justify-content:center;padding:11px 0}
.app.is-narrow .sidebar__toggle span{display:none}
.app.is-narrow .sidebar__toggle svg{transform:rotate(180deg)}

/* ── dar ekran: yandan açılan çekmece ── */
.sidebar__veil{display:none}
.topbar__burger{display:none}

@media(max-width:980px){
  .topbar__burger{display:inline-flex}
  .shell{padding:10px;gap:0}
  .main{padding:4px 0 20px}
  .sidebar{
    position:fixed;left:10px;top:calc(var(--header-h) + 10px);
    height:calc(100vh - var(--header-h) - 20px);
    width:var(--sb-w);transform:translateX(calc(-100% - 14px));margin-left:0;
    transition:transform .2s var(--ease);box-shadow:var(--sh-3);
  }
  .app.is-narrow .sidebar{width:236px}      /* çekmecede daraltma uygulanmaz */
  .app.is-narrow .sidebar .tab{justify-content:flex-start;padding:7.5px 11px;gap:10px}
  .app.is-narrow .sidebar .tab__label{display:block}
  .app.is-narrow .sidebar .tab__badge{position:static;margin:0;padding:1px 6px;min-width:18px;font-size:10.5px;line-height:normal}
  .app.is-narrow .sidebar .sidenav__title{font-size:10px;padding:11px 11px 4px}
  .app.is-narrow .sidebar .sidenav__title::after{display:none}
  .app.is-narrow .sidebar .sidenav__group:first-child .sidenav__title{display:block}
  .sidebar.is-open{transform:none}
  .sidebar__toggle{display:none}
  .sidebar__veil{
    display:block;position:fixed;inset:var(--header-h) 0 0;
    background:rgba(14,17,22,.42);z-index:54;
  }
  .sidebar__veil[hidden]{display:none}
}

.main{flex:1;min-width:0;padding:8px 8px 26px;max-width:1560px;width:100%;margin:0 auto}
@media(max-width:640px){.main{padding:14px}}

/* ─── 7. KARTLAR ─── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:22px;box-shadow:var(--sh-1);
}
.card--pad0{padding:0;overflow:hidden}
.card__head{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.card__head h3{flex:1;min-width:0}
.card__sub{font-size:12.5px;color:var(--text-3);font-weight:600;margin-top:2px}

/* Kırıntı yolu — hangi bölümün neresindeyiz */
.crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--text-3);margin-bottom:10px;flex-wrap:wrap}
.crumbs i{font-style:normal;color:var(--line-2)}
.crumbs b{color:var(--text);font-weight:800}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:24px}
.page-head p{color:var(--text-2);font-size:13.5px;font-weight:500;margin-top:3px}
.page-head__actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ─── 8. İSTATİSTİK KUTULARI ─── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:13px;margin-bottom:20px}
@media(max-width:560px){
  .stats{grid-template-columns:1fr 1fr;gap:9px}
  .stat{padding:13px 14px}
  .stat__value{font-size:22px}
  .stat__value--sm{font-size:17px}
  .stat__label{font-size:10.5px;letter-spacing:.03em}
  .stat__spark{display:none}
  .page-head h1{font-size:20px}
  .modal{padding:0}
  .modal__box{max-height:100vh;height:100%;border-radius:0}
  .modal__foot{border-radius:0}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 19px;position:relative;overflow:hidden;transition:transform .16s var(--ease), box-shadow .16s;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
/* Referanstaki gibi tek bir kart gradyanla öne çıkar. Yazılar siyah kalır —
   lime üzerinde beyaz okunmaz. */
.stat--hi{background:var(--grad-lime);border-color:transparent;box-shadow:var(--sh-lime)}
.stat--hi .stat__label{color:rgba(14,17,22,.68)}
.stat--hi .stat__value,.stat--hi .stat__sub{color:var(--lime-ink)}
.stat--hi .stat__delta.up{color:#2C5200} .stat--hi .stat__delta.down{color:#7A1B1B}
.stat--hi:hover{box-shadow:0 10px 26px -8px rgba(150,190,0,.7)}
[data-theme="dark"] .stat--hi .stat__value,[data-theme="dark"] .stat--hi .stat__sub{color:#0E1116}
.stat__label{
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  display:flex;align-items:center;gap:6px;
}
.stat__value{font-size:27px;font-weight:800;letter-spacing:-.035em;margin:7px 0 3px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat__value--sm{font-size:21px}
.stat--wide{grid-column:span 2}
.stat__delta{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:4px}
.stat__delta.up{color:var(--ok)} .stat__delta.down{color:var(--err)} .stat__delta.flat{color:var(--text-3)}
/* Mini grafik kutunun alt kenarına, yazıların ARKASINA serilir.
   Böylece dar kutularda alt satır ne grafiğe girer ne de alt alta kayar. */
.stat__spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:34px;
  opacity:.30;pointer-events:none;z-index:0}
.stat > *:not(.stat__spark){position:relative;z-index:1}

/* ─── 9. ROZETLER ─── */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3.5px 10px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap;
}
.badge--bekliyor{background:var(--st-bekliyor-bg);color:var(--st-bekliyor)}
.badge--yapiliyor{background:var(--st-yapiliyor-bg);color:var(--st-yapiliyor)}
.badge--revizyon{background:var(--st-revizyon-bg);color:var(--st-revizyon)}
.badge--tamamlandi{background:var(--st-tamamlandi-bg);color:var(--st-tamamlandi)}
.badge--onaylandi{background:var(--st-onaylandi-bg);color:var(--st-onaylandi)}
.badge--iptal{background:var(--st-iptal-bg);color:var(--st-iptal)}
.badge--ok{background:var(--ok-bg);color:var(--ok)}
.badge--warn{background:var(--warn-bg);color:var(--warn)}
.badge--err{background:var(--err-bg);color:var(--err)}
.badge--info{background:var(--info-bg);color:var(--info)}
.badge--neutral{background:var(--surface-3);color:var(--text-2)}

.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-full);
  background:var(--surface-3);font-size:12px;font-weight:700;color:var(--text-2);
}

/* ─── 10. TABLO ─── */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  text-align:left;padding:11px 14px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);background:var(--surface-2);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;
}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.act{text-align:right;white-space:nowrap}

/* ─── 11. LİSTE / GÖREV KARTI ─── */
.list{display:flex;flex-direction:column;gap:9px}
.item{
  display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s, box-shadow .15s, transform .15s var(--ease);
}
.item:hover{border-color:var(--line-2);box-shadow:var(--sh-1);transform:translateX(2px)}
.item__bar{width:3.5px;align-self:stretch;border-radius:99px;background:var(--line-2);flex:none}
.item__main{flex:1;min-width:0}
.item__title{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__meta{font-size:12.5px;color:var(--text-3);font-weight:600;margin-top:2px;display:flex;gap:9px;flex-wrap:wrap}
.item__actions{display:flex;gap:5px;flex:none}

/* ─── 12. MODAL ─── */
.modal{
  position:fixed;inset:0;background:var(--overlay);z-index:200;
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(3px);
}
.modal.is-on{display:flex;animation:fadeIn .18s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal__box{
  background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:560px;
  max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh-pop);
  animation:popIn .22s var(--ease);
}
.modal__box--lg{max-width:900px}
.modal__box--xl{max-width:1180px}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal__head{
  display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line);
}
.modal__head h3{flex:1;min-width:0}
.modal__body{padding:22px;overflow-y:auto;flex:1}
.modal__foot{
  padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;
  background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);
}
.modal__x{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--text-3);transition:background .15s,color .15s;flex:none;
}
.modal__x:hover{background:var(--surface-3);color:var(--text)}

/* ─── 13. BİLDİRİM (TOAST) ─── */
.toasts{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:11px;padding:13px 17px;border-radius:var(--r);
  background:var(--brand-ink);color:#fff;font-size:13.5px;font-weight:700;
  box-shadow:var(--sh-pop);pointer-events:auto;max-width:400px;
  animation:toastIn .26s var(--ease);
}
.toast img{height:34px;width:auto;margin:-6px 0}
.toast--ok{background:#0F5132}
.toast--err{background:#7F1D1D}
.toast--warn{background:#78350F}
@keyframes toastIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.toast.is-out{animation:toastOut .22s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(28px)}}
@media(max-width:560px){.toasts{left:14px;right:14px;bottom:14px}.toast{max-width:none}}

/* ─── 14. BOŞ DURUM ─── */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:46px 24px;text-align:center;
}
.empty img{height:158px;width:auto;margin-bottom:16px;opacity:.94}
.empty h3{font-size:16.5px;margin-bottom:6px}
.empty p{color:var(--text-2);font-size:13.5px;font-weight:500;max-width:390px;margin-bottom:18px}

/* ─── 15. YÜKLENİYOR ─── */
.loader{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 20px}
.loader img{height:118px;width:auto;animation:bob 2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.loader p{font-size:13.5px;color:var(--text-2);font-weight:700}
.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--line) 50%,var(--surface-3) 75%);
      background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ─── 16. GRAFİK ─── */
.chart{width:100%;overflow:visible}
.chart text{font-family:var(--font);font-size:11px;font-weight:600;fill:var(--text-3)}
.chart .grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;font-weight:700}
.chart-legend span{display:flex;align-items:center;gap:6px;color:var(--text-2)}
.chart-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.chart-tip{
  position:fixed;background:var(--brand-ink);color:#fff;padding:9px 12px;border-radius:9px;
  font-size:12.5px;font-weight:700;pointer-events:none;z-index:400;box-shadow:var(--sh-3);
  white-space:nowrap;opacity:0;transition:opacity .12s;
}
.chart-tip.is-on{opacity:1}
.chart-tip small{display:block;color:rgba(255,255,255,.72);font-size:11.5px;font-weight:600;margin-top:3px;line-height:1.7}
.chart-tip b{color:#fff}

/* ─── 17. İLERLEME ─── */
.bar{height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--brand-accent);transition:width .5s var(--ease)}
.bar--ok > i{background:var(--ok)} .bar--warn > i{background:var(--warn)} .bar--err > i{background:var(--err)}

/* ─── 18. SEKME İÇİ FİLTRE ─── */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters select,.filters input{width:auto;min-width:132px;padding:8.5px 12px;font-size:13px;border-radius:10px}
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-full);padding:3px;gap:2px}
.seg button{padding:7px 15px;border-radius:var(--r-full);font-size:12.5px;font-weight:700;color:var(--text-2);
  transition:background .15s,color .15s}
.seg button:hover{color:var(--text)}
.seg button.is-on{background:var(--grad-lime);color:var(--lime-ink);font-weight:800;box-shadow:var(--sh-1)}
[data-theme="dark"] .seg button.is-on{color:#0E1116}

/* ─── 19. YARDIMCI ─── */
.row{display:flex;align-items:center;gap:10px}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:24px}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.small{font-size:12.5px}
.tiny{font-size:11.5px}
.bold{font-weight:700}
.b800{font-weight:800}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flex1{flex:1;min-width:0}
.hr{height:1px;background:var(--line);margin:18px 0;border:none}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── 20. ALERT ─── */
.alert{
  display:flex;gap:11px;padding:13px 16px;border-radius:var(--r);font-size:13.5px;font-weight:600;
  border:1px solid transparent;line-height:1.5;
}
.alert b{font-weight:800}
.alert--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.alert--warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-br)}
.alert--err{background:var(--err-bg);color:var(--err);border-color:var(--err-br)}
.alert--info{background:var(--info-bg);color:var(--info);border-color:var(--info-br)}

/* ─── 21. GALERİ ─── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.gal{
  position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--surface-3);
  cursor:pointer;border:1px solid var(--line);
}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.gal:hover img{transform:scale(1.05)}
.gal__ov{
  position:absolute;inset:auto 0 0 0;padding:22px 10px 9px;
  background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;
  font-size:11.5px;font-weight:700;
}
.gal__tag{position:absolute;top:8px;left:8px}

/* ─── 22. YAZDIRMA ─── */
@media print{
  .topbar,.sidebar,.sidebar__veil,.page-head__actions,.btn,.toasts{display:none!important}
  body{background:#fff}
  .card,.stat{break-inside:avoid;box-shadow:none;border-color:#ddd}
  .main{padding:0;max-width:none}
}

/* ─── 23. HAREKET AZALTMA ─── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ─── 24. İÇERİK PLANI (gün gün yapılacaklar) ───
   Ay / hafta ızgarası, kota paneli ve gün yorumları.
   Dar ekranda ızgara tek sütuna iner ve okunur bir listeye dönüşür;
   yatay kaydırma yoktur. */

.plan-nav{display:flex;align-items:center;gap:6px}
.plan-nav__label{font-size:13px;font-weight:800;min-width:150px;text-align:center}

/* Kota paneli */
.plan-warns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.plan-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:800;border:1px solid transparent;
}
.plan-chip--eksik{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-br)}
.plan-chip--asim{background:var(--err-bg);color:var(--err);border-color:var(--err-br)}
.plan-chip--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}

.plan-quota__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.plan-q{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.plan-q__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.plan-q__label{font-size:12.5px;font-weight:800;color:var(--text-2)}
.plan-q__num{font-size:18px;font-weight:800;white-space:nowrap}
.plan-q__num i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--text-3)}
.plan-q__bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.plan-q__bar > i{display:block;height:100%;border-radius:99px;background:var(--line-2);
  transition:width .45s var(--ease)}
.plan-q__bar--tam > i{background:var(--ok)}
.plan-q__bar--eksik > i{background:var(--warn)}
.plan-q__bar--asim > i{background:var(--err)}
.plan-q__note{margin-top:7px;font-size:11.5px;font-weight:700;color:var(--text-3)}

/* Ay / hafta ızgarası */
.plan-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:stretch}
.plan-wd{
  font-size:11px;font-weight:800;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.5px;padding:0 4px 4px;
}
.plan-day{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:8px;min-height:118px;display:flex;flex-direction:column;gap:6px;
}
.plan-grid--week .plan-day{min-height:320px}
.plan-day--pad{background:transparent;border-color:transparent;min-height:0}
.plan-day--out{background:var(--surface-2);opacity:.7}
.plan-day--today{border-color:var(--lime-deep);background:var(--brand-accent-soft)}
.plan-day--over{border-color:var(--lime-deep);background:var(--brand-accent-soft);
  box-shadow:0 0 0 2px var(--lime-deep) inset}
.plan-day__head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.plan-day__num{
  display:inline-flex;align-items:baseline;gap:5px;font-size:13.5px;font-weight:800;
  padding:2px 7px;border-radius:8px;
}
.plan-day__num:hover{background:var(--surface-3)}
.plan-day--today .plan-day__num{color:var(--text)}
.plan-day__wd{display:none;font-size:11px;font-weight:700;color:var(--text-3)}
.plan-day__acts{display:flex;align-items:center;gap:5px}
.plan-count{
  font-size:10.5px;font-weight:800;color:var(--text-3);background:var(--surface-3);
  border-radius:var(--r-full);padding:2px 7px;
}
.plan-day__add{
  width:23px;height:23px;flex:none;border-radius:8px;background:var(--surface-3);
  color:var(--text-2);font-size:15px;font-weight:800;line-height:1;
}
.plan-day__add:hover{background:var(--grad-lime);color:var(--lime-ink)}
.plan-day__add--cmt{font-size:11px}
.plan-day__empty{
  font-size:11.5px;font-weight:700;color:var(--text-3);text-align:left;
  padding:6px 8px;border-radius:9px;border:1px dashed var(--line-2);
}
.plan-day__empty:hover{border-color:var(--lime-deep);color:var(--text-2);background:var(--surface-2)}
.plan-day__empty--ro{border-style:solid;border-color:transparent;cursor:default}

/* Gün içi kalem listesi */
.plan-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.plan-items--modal{gap:8px}
.plan-item{
  display:flex;align-items:stretch;background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--st-bekliyor);
  border-radius:10px;overflow:hidden;
}
.plan-item[draggable="true"]{cursor:grab}
.plan-item[draggable="true"]:active{cursor:grabbing}
.plan-item:hover{border-color:var(--line-2);background:var(--surface-3)}
.plan-item--hazirlaniyor{border-left-color:var(--st-yapiliyor)}
.plan-item--tamam{border-left-color:var(--ok)}
.plan-item--iptal{border-left-color:var(--st-iptal);opacity:.6}
.plan-item--iptal .plan-item__title{text-decoration:line-through}
.plan-item--drag{opacity:.35}
.plan-item__btn{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  text-align:left;padding:6px 9px;color:var(--text);
}
.plan-item__type{
  font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);
}
.plan-item__title{
  font-size:12.5px;font-weight:700;line-height:1.35;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.plan-item__meta{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:10.5px;font-weight:700;color:var(--text-3)}
.plan-item__note{
  font-size:11.5px;font-weight:500;color:var(--text-2);white-space:pre-wrap;
  overflow-wrap:anywhere;margin-top:2px;
}
.plan-link{font-weight:700;color:var(--text);text-align:left;overflow-wrap:anywhere}
.plan-link:hover{color:var(--lime-deep);text-decoration:underline}

/* Açıklama şeridi */
.plan-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;
  font-size:11.5px;font-weight:700;color:var(--text-3);
}
.plan-legend__i{display:inline-flex;align-items:center;gap:6px}
.plan-legend__hint{font-weight:600;max-width:640px;line-height:1.55}
.plan-dot{width:9px;height:9px;border-radius:3px;background:var(--st-bekliyor);flex:none}
.plan-dot--hazirlaniyor{background:var(--st-yapiliyor)}
.plan-dot--tamam{background:var(--ok)}
.plan-dot--iptal{background:var(--st-iptal)}

/* Yorumlar */
.plan-cmts{display:flex;flex-direction:column;gap:10px}
.plan-cmt{display:flex;gap:10px;align-items:flex-start}
.plan-cmt__av{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--text-2);
}
.plan-cmt__head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-cmt__head b{font-size:13px;font-weight:800}
.plan-cmt__text{
  font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;margin-top:4px;
}
.plan-cbox{display:flex;gap:9px;align-items:flex-end}
.plan-cbox textarea{flex:1;min-width:0;resize:vertical}
.plan-cbox .btn{flex:none}

/* Dar ekran: ızgara tek sütuna iner, gün adı hücrenin içine taşınır */
@media(max-width:860px){
  .plan-grid,.plan-grid--week{grid-template-columns:1fr}
  .plan-wd{display:none}
  .plan-day--pad{display:none}
  .plan-day,.plan-grid--week .plan-day{min-height:0}
  .plan-day__wd{display:inline}
  .plan-nav{flex:1}
  .plan-nav__label{flex:1;min-width:0}
  .plan-cbox{flex-direction:column;align-items:stretch}
}

/* ─── KAYDEDİLMEMİŞ FORM KORUMASI ───
   Formun dışına tıklamak veya Esc'ye basmak yazdıklarını siliyordu.
   Artık önce bu şerit çıkıyor; kapatılsa bile içerik taslakta kalıyor
   ve form yeniden açıldığında geri geliyor. */
.modal__unsaved{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 20px;border-top:1px solid var(--warn-br);
  background:var(--warn-bg);color:var(--warn-ink,#7A4A00);
  font-size:13px;font-weight:700;line-height:1.5;
}
.modal__unsaved span{flex:1;min-width:200px}
.modal__unsaved.is-flash{animation:unsavedFlash .5s var(--ease)}
@keyframes unsavedFlash{
  0%{transform:translateY(-4px);opacity:0}
  40%{transform:translateY(0);opacity:1}
  60%{background:var(--warn);color:#fff}
  100%{background:var(--warn-bg)}
}
.modal__draft{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;padding:9px 13px;border-radius:10px;
  background:var(--lime-soft);border:1px solid #DCEE8A;
  font-size:12.5px;font-weight:700;color:#4E6300;
}
.modal__draft span{flex:1;min-width:160px}
.modal__draft-x{
  font-size:12px;font-weight:800;color:#4E6300;text-decoration:underline;
  background:none;padding:0;
}
[data-theme="dark"] .modal__draft{background:#1F2600;border-color:#3E4D00;color:var(--lime)}
[data-theme="dark"] .modal__draft-x{color:var(--lime)}

/* ─── FİRMA LOGOSU / MARKA ROZETİ ─── */
.firmlogo{
  flex:none;border-radius:16px;object-fit:contain;background:#fff;
  border:1px solid var(--line);padding:6px;display:block;box-shadow:var(--sh-1);
}
[data-theme="dark"] .firmlogo{background:#fff;border-color:var(--line-2)}
.firmlogo--tx{
  display:flex;align-items:center;justify-content:center;padding:0;border:none;
  color:#fff;font-weight:800;letter-spacing:-.02em;
}
.firmlogo--round{border-radius:50%}
.firmlogo--plain{border:none;background:transparent;padding:0}

/* Firma panosunda karşılama kartının sağ ucundaki marka logosu */
.fdash__logo{flex:none;padding-left:16px;border-left:1px solid var(--line)}
@media(max-width:720px){
  .fdash__logo{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid var(--line);width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   KİŞİSEL KANBAN PANOSU  (assets/js/modules/kanban.js)

   Eski .kb* kuralları dört rolün ORTAK gördüğü görev panosunundu;
   o pano kaldırıldı, kurallar bu kişisel pano için baştan yazıldı.

   Sütunlar SABİT genişliktedir ve YATAY KAYDIRILIR. Eski hâlinde beş
   sütun bir ızgaraya sıkıştırılıyordu: kullanıcı sütun ekleyebildiği
   için sayı artık sabit değil, ızgara da her sütunu okunmaz hâle
   getirirdi. Kaydırma .kb'nin İÇİNDEDİR (overflow-x:auto) — sayfanın
   kendisi hiçbir genişlikte yatay kaymaz.
   ═══════════════════════════════════════════════════════════════ */
.kb{
  display:flex;align-items:flex-start;gap:12px;
  overflow-x:auto;overflow-y:visible;
  padding:2px 2px 10px;max-width:100%;
  scrollbar-width:thin;
}
.kb__col{
  flex:0 0 288px;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
/* Sütun rengi satır içinde --kb-col ile verilir; renksiz sütunda
   nokta çizgi rengine düşer, ayrı bir kural gerekmez. */
.kb__col--tinted{box-shadow:inset 0 3px 0 0 var(--kb-col,transparent)}
.kb__col--done{background:var(--surface-2)}
.kb__col.is-target{box-shadow:0 0 0 2px var(--lime)}
.kb__col.is-drag{opacity:.45}

.kb__head{
  display:flex;align-items:center;gap:8px;
  padding:12px 10px 12px 14px;border-bottom:1px solid var(--line);
  cursor:grab;user-select:none;
}
.kb__head:active{cursor:grabbing}
.kb__dot{
  flex:none;width:9px;height:9px;border-radius:var(--r-full);
  background:var(--kb-col,var(--line-2));
}
.kb__title{
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;
}
.kb__menu{padding:4px 7px;font-size:15px;line-height:1;color:var(--text-3)}

.kb__drop{
  display:flex;flex-direction:column;gap:8px;
  padding:11px;min-height:90px;
  transition:background .15s;
}
.kb__drop.is-over{background:var(--lime-soft);box-shadow:inset 0 0 0 2px var(--lime)}
[data-theme="dark"] .kb__drop.is-over{background:#1F2600;box-shadow:inset 0 0 0 2px var(--lime-dark)}
.kb__hint{
  font-size:12px;color:var(--text-3);text-align:center;
  padding:18px 6px;margin:0;border:1px dashed var(--line-2);border-radius:var(--r);
}
/* Sütunun altındaki "+ Kart ekle": her sütunun kendi ekleme noktası
   olsun ki kullanıcı önce kartı yaratıp sonra taşımak zorunda kalmasın. */
.kb__new{
  border:none;border-top:1px solid var(--line);background:transparent;
  color:var(--text-3);font:inherit;font-size:12.5px;font-weight:700;
  padding:10px;cursor:pointer;text-align:center;transition:background .14s,color .14s;
}
.kb__new:hover{background:var(--surface-3);color:var(--text)}

/* Panonun sonundaki "+ Sütun ekle" — kolonlarla aynı hizada durur. */
.kb__add{flex:0 0 168px;padding-top:2px}
.kb__add .btn{width:100%;border:1px dashed var(--line-2)}

.kb__card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 11px;cursor:grab;
  transition:box-shadow .15s,transform .12s var(--ease),opacity .15s;
}
.kb__card:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.kb__card:active{cursor:grabbing}
.kb__card:focus-visible{outline:2px solid var(--lime-deep);outline-offset:2px}
.kb__card.is-drag{opacity:.42}
.kb__card--tinted{border-left:3px solid var(--kb-card,var(--line-2))}
/* Bitiş sütunundaki kart soluk ve üstü çizili — "bitti" tek bakışta belli. */
.kb__card--done{opacity:.72}
.kb__card--done .kb__cardtitle{text-decoration:line-through}
[data-theme="dark"] .kb__card{background:var(--surface-2)}

.kb__cardtop{display:flex;align-items:flex-start;gap:6px}
.kb__cardtitle{
  flex:1;font-size:13px;font-weight:700;line-height:1.4;
  word-break:break-word;
}
.kb__note{
  margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-3);
  word-break:break-word;
}
.kb__meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.kb__due,.kb__sub,.kb__tag{
  font-size:11px;font-weight:700;line-height:1;
  padding:4px 7px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--text-3);
  white-space:nowrap;
}
/* Geçmiş termin: rozet değil UYARI — bu yüzden hata rengiyle dolu. */
.kb__due.is-late{background:var(--err-bg);color:var(--err);border:1px solid var(--err-br)}
.kb__tag{background:var(--lime-soft);color:var(--brand-ink)}
[data-theme="dark"] .kb__tag{background:#25300A;color:var(--lime)}
[data-theme="dark"] .kb__due,[data-theme="dark"] .kb__sub{background:var(--surface-3)}

/* Sayfa başlığındaki "Bitenleri gizle" anahtarı */
.kb__switch{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--text-2);background:var(--surface-3);
  padding:8px 12px;border-radius:var(--r-full);cursor:pointer;
}

/* ─── Kart penceresindeki alt görev düzenleyicisi ─── */
.kb__subs{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.kb__subslabel{
  display:block;font-size:12px;font-weight:800;color:var(--text-2);
  margin-bottom:8px;letter-spacing:.01em;
}
.kb__sub-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.kb__sub-row input[type="text"]{flex:1;margin:0}
.kb__sub-row .check{flex:none}

/* ─── Telefon: sütun ekranın büyük kısmını kaplar, yatay kaydırılır ─── */
@media(max-width:640px){
  .kb{gap:10px;padding-bottom:14px}
  .kb__col{flex-basis:82vw}
  .kb__add{flex-basis:82vw}
  .kb__title{max-width:56vw}
}

/* ─── INSTAGRAM AKIŞ ÖNİZLEMESİ (firma galerisi) ─── */
/* Gerçek profil genişliği ~935px; daha genişte kareler devasa görünüyor
   ve "önizleme" hissi kayboluyor. Kart ortalanır. */
.ig{max-width:720px;margin-left:auto;margin-right:auto}
.ig__head{display:flex;align-items:center;gap:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.ig__meta{flex:1;min-width:0}
.ig__user{font-size:17px;font-weight:800;letter-spacing:-.02em}
.ig__nums{display:flex;gap:22px;margin:9px 0 7px;font-size:13.5px;color:var(--text-2);flex-wrap:wrap}
.ig__nums b{color:var(--text);font-weight:800}
.ig__name{font-size:13.5px;font-weight:800}
.ig__bio{font-size:13px;color:var(--text-2);margin-top:2px}
.ig__tabs{display:flex;justify-content:center;padding:11px 0;margin-bottom:2px}
.ig__tabs span{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);padding-bottom:9px;border-bottom:2px solid transparent}
.ig__tabs span.is-on{color:var(--text);border-bottom-color:var(--text)}

/* Gerçek Instagram ızgarası: 3 sütun, kare, 2px aralık */
/* Instagram profil ızgarası artık 4:5 (dikey) gösteriyor; içerikler de
   4:5 tasarlandığı için 1:1 kırpma tasarımın üstünü ve altını kesiyordu.
   İki oran arasında geçiş yapılabilir. */
.ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ig__cell{
  position:relative;overflow:hidden;background:var(--surface-3);
  padding:0;border:none;cursor:pointer;display:block;
}
.ig__grid--4-5 .ig__cell{aspect-ratio:4/5}
.ig__grid--1-1 .ig__cell{aspect-ratio:1}

.ig__tabs{position:relative}
.ig__ratio{position:absolute;right:0;top:6px;display:inline-flex;gap:2px;
  background:var(--surface-3);border-radius:var(--r-full);padding:2px}
.ig__ratio button{
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:var(--r-full);
  color:var(--text-3);transition:background .15s,color .15s;
}
.ig__ratio button.is-on{background:var(--grad-lime);color:var(--lime-ink)}
@media(max-width:560px){.ig__ratio{position:static;margin-left:auto}
  .ig__tabs{justify-content:space-between;padding-left:4px;padding-right:4px}}
.ig__cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s var(--ease)}
.ig__cell:hover img{transform:scale(1.04)}
.ig__cell--soft img{opacity:.9}
.ig__cell--soft::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(14,17,22,.14),transparent 42%);pointer-events:none}
.ig__vid{display:flex;align-items:center;justify-content:center;height:100%;font-size:30px;color:var(--text-3)}
.ig__badge{
  position:absolute;top:7px;right:8px;font-size:12px;line-height:1;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.65);pointer-events:none;
}
.ig__badge--story{top:auto;bottom:7px;right:8px}
/* "Hazırlanıyor" işareti tasarımın ÜSTÜNE yazı basmaz: sosyal medya
   görsellerinde hem üst hem alt şerit dolu oluyor, köşeye konan her etiket
   bir şeyi kapatıyordu. Onun yerine kutunun alt kenarında ince bir lime
   çizgi durur; yazı yalnızca fare üzerine gelince çıkar. */
.ig__cell--soft{box-shadow:inset 0 -4px 0 var(--lime)}
.ig__soon{
  position:absolute;left:6px;bottom:10px;font-size:9px;font-weight:800;letter-spacing:.04em;
  background:rgba(14,17,22,.86);color:var(--lime);padding:3px 7px;border-radius:var(--r-full);
  opacity:0;transition:opacity .18s;pointer-events:none;
}
.ig__cell--soft:hover .ig__soon,.ig__cell--soft:focus-visible .ig__soon{opacity:1}
.ig__ov{
  position:absolute;left:0;right:0;bottom:0;padding:16px 8px 11px;
  font-size:11px;font-weight:700;color:#fff;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .18s;
}
.ig__cell:hover .ig__ov,.ig__cell:focus-visible .ig__ov{opacity:1}
@media(max-width:560px){
  .ig__head{gap:14px}
  .ig__nums{gap:14px;font-size:12.5px}
  .ig__grid{gap:2px}
}