@charset "UTF-8";
/* ==========================================================================
   Soğuk Hava Takip — Arayüz Sistemi
   Tasarım dili: sade, nötr gri ölçek + tek vurgu rengi. Gölge yerine saç teli
   çizgiler, süs yerine boşluk. Renk yalnızca anlam taşıdığı yerde kullanılır.
   ========================================================================== */

/* ---------- Tokenlar ---------- */
:root{
  /* nötr ölçek — hafif soğuk, mavi tonu yok */
  --ink-950:#0B0C0D; --ink-900:#141617; --ink-850:#1B1D1F; --ink-800:#232628;
  --ink-700:#2F3234; --ink-600:#454A4D; --ink-500:#5C6265; --ink-400:#767C80;
  --ink-300:#949A9E; --ink-200:#BCC1C4; --ink-150:#D5D9DB; --ink-100:#E5E8E9;
  --ink-50:#F2F4F4;

  /* tek vurgu — yeşil; yalnızca birincil eylem, aktif satır, pozitif değer */
  --brand-800:#0A4A35; --brand-700:#0C5F44; --brand-600:#0F7A57; --brand-500:#16795A;
  --brand-400:#3E9E7C; --brand-100:#CDE6DC; --brand-50:#EDF5F2;

  /* anlamsal ikinciller — bilinçli olarak soluk */
  --gold-600:#8E6B2E; --gold-500:#A98240; --gold-50:#F7F2E8;
  --red-600:#9C3F35;  --red-500:#B24A3F;  --red-50:#F8EFEE;
  --blue-600:#3B6899; --blue-50:#EDF1F6;

  /* semantik — açık tema */
  --bg:#F7F8F8;
  --card:#FFFFFF;
  --card-alt:#FAFBFB;
  --line:#E6E9EA;
  --line-strong:#D4D8DA;
  --text:#141617;
  --text-2:#5C6265;
  --text-3:#8B9196;
  --accent:var(--brand-600);
  --accent-soft:var(--brand-50);

  /* gölge yalnızca yüzen katmanlarda */
  --shadow-sm:none;
  --shadow:0 1px 2px rgba(11,12,13,.04);
  --shadow-lg:0 16px 48px -18px rgba(11,12,13,.28), 0 1px 3px rgba(11,12,13,.06);

  /* kaydırma alanları — kayan bölge kendi rengiyle ayrılsın */
  --kay-zemin:#EDF1F1;      /* kaydırma çubuğunun yatağı */
  --kay-tutamac:#A8B4B1;    /* çubuğun tutamacı           */
  --kay-golge:rgba(11,12,13,.13);

  --side:252px;
  --topbar:60px;
  --r-sm:6px; --r:8px; --r-lg:10px;

  --font:"Inter","Inter var","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

html[data-tema="koyu"]{
  --bg:#0B0C0D;
  --card:#141617;
  --card-alt:#191B1D;
  --line:#242729;
  --line-strong:#313537;
  --text:#E8EAEA;
  --text-2:#9AA0A3;
  --text-3:#6D7376;
  --accent:var(--brand-400);
  --accent-soft:rgba(62,158,124,.11);
  --brand-50:rgba(62,158,124,.11);
  --brand-100:rgba(62,158,124,.2);
  --gold-50:rgba(169,130,64,.13);
  --red-50:rgba(178,74,63,.13);
  --blue-50:rgba(59,104,153,.14);
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 20px 56px -20px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.5);
  --kay-zemin:#202426;
  --kay-tutamac:#4A5254;
  --kay-golge:rgba(0,0,0,.45);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--brand-100);color:var(--brand-800)}
html[data-tema="koyu"] ::selection{background:rgba(62,158,124,.3);color:#E8EAEA}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg.ico{flex:none;display:block}
.num,.mono-d{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--text-3)}
.small{font-size:12px}
.ta-r{text-align:right}
.pos{color:var(--brand-600)} .neg{color:var(--red-500)} .zero{color:var(--text-3)}
html[data-tema="koyu"] .pos{color:var(--brand-400)}

/* kaydırma çubuğu */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--ink-150);border-radius:8px;border:3px solid transparent;
  background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-200);background-clip:content-box}
html[data-tema="koyu"] *::-webkit-scrollbar-thumb{background:var(--line-strong);background-clip:content-box}

/* ==========================================================================
   KAYDIRMA ALANLARI
   Yatay kayan bir liste, kaydığı belli olmadığında yarısı hiç görülmez.
   Kayan her alan bu yüzden dört şey yapar:
     1. Kaydığı sürece renkli, her zaman görünen bir çubuk taşır.
     2. Devamı olan kenarında gölge + ok belirir.
     3. Fare tekerleği yatay kaydırır (Shift'e gerek yok).
     4. Sabit ilk sütun, kaydırınca kendini gölgeyle ayırır.
   Sınıflar app.js tarafından konur: .kaydirilir (kayabiliyor),
   .kay-sol / .kay-sag (o yönde devamı var).
   ========================================================================== */
.kaydirilir{
  scrollbar-width:thin;
  scrollbar-color:var(--kay-tutamac) var(--kay-zemin);
  position:relative;
}
/* scroll-behavior:smooth burada YOK — olsaydı şerit tutamacını sürüklerken
   her hareket animasyona girer, sürükleme lastik gibi hissettirirdi.
   Yumuşak kaydırma yalnızca ok düğmelerinde (scrollBy behavior:'smooth'). */
.kaydirilir::-webkit-scrollbar{height:11px;width:11px}
.kaydirilir::-webkit-scrollbar-track{background:var(--kay-zemin);border-radius:0}
.kaydirilir::-webkit-scrollbar-thumb{
  background:var(--kay-tutamac);border-radius:8px;
  border:2px solid var(--kay-zemin);background-clip:content-box}
.kaydirilir::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}
.kaydirilir::-webkit-scrollbar-corner{background:var(--kay-zemin)}

/* --- Kayan alanın çevresine app.js bir sarmalayıcı koyar; gölge ve oklar
       oraya oturur. Kayan kutunun içine konsaydı içerikle birlikte kayar,
       uzun tablolarda ekrandan çıkardı. --- */
.kay-kap{position:relative}

/* "Devamı var" gölgesi — tablonun tepesinden dibine kadar */
.kay-kap > .kay-golge{
  position:absolute;top:0;bottom:11px;width:30px;z-index:4;
  pointer-events:none;opacity:0;transition:opacity .15s}
.kay-kap > .kay-golge.sol{left:0;background:linear-gradient(90deg,var(--kay-golge),transparent)}
.kay-kap > .kay-golge.sag{right:0;background:linear-gradient(270deg,var(--kay-golge),transparent)}
.kay-kap.kay-sol > .kay-golge.sol,
.kay-kap.kay-sag > .kay-golge.sag{opacity:1}

/* Ok düğmeleri: sayfa aşağı kaydıkça tablonun yanında asılı kalır */
.kay-oklar{position:sticky;top:calc(var(--topbar) + 52px);height:0;z-index:9;pointer-events:none}
.kay-ok{
  position:absolute;top:14px;
  width:34px;height:34px;display:none;
  align-items:center;justify-content:center;pointer-events:auto;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--card);color:var(--text-2);cursor:pointer;padding:0;
  box-shadow:var(--shadow-lg);
  /* Renk geçişi YOK: düğme başlangıçta display:none olduğu için Chrome,
     geçişli background/color değerlerini ilk temadan donduruyor ve tema
     değişince güncellemiyordu. Yalnızca transform animasyonlu. */
  transition:transform .12s}
.kay-ok:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.06)}
.kay-ok:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kay-ok.sol{left:6px}
.kay-ok.sag{right:6px}
.kay-kap.kay-sol .kay-ok.sol,.kay-kap.kay-sag .kay-ok.sag{display:flex}
@media (hover:none){ .kay-ok{width:40px;height:40px} }

/* --- Kaydırma şeridi ---
   Uzun bir tabloda tarayıcının kendi çubuğu tablonun dibinde kalır, ekranda
   görünmez. Bu şerit ekranın altına yapışır: tablo görünürken hep elinizin
   altındadır, rengiyle "burası kayıyor" der ve tutamacından sürüklenir. */
.kay-serit{
  position:sticky;bottom:0;z-index:8;height:15px;display:none;
  background:var(--kay-zemin);border-top:1px solid var(--line);
  cursor:pointer;touch-action:none}
.kay-kap.kay-sol .kay-serit,.kay-kap.kay-sag .kay-serit{display:block}
.kay-serit-tutamac{
  position:absolute;top:3px;height:9px;min-width:26px;border-radius:6px;
  background:var(--accent);opacity:.5;transition:opacity .12s}
.kay-serit:hover .kay-serit-tutamac{opacity:.8}
.kay-serit-tutamac.tutuluyor{opacity:1}

/* Kendi şeridimiz varken tarayıcının yatay çubuğu ikinci kez görünmesin */
.kay-kap > .kaydirilir{scrollbar-width:none}
.kay-kap > .kaydirilir::-webkit-scrollbar{height:0}

/* --- Sabit ilk sütun kaydırınca kendini ayırsın --- */
.kay-kap.kay-sol table.tbl.yapisik thead th:first-child,
.kay-kap.kay-sol table.tbl.yapisik tbody td:first-child,
.kay-kap.kay-sol table.tbl.yapisik tfoot td:first-child,
.kay-kap.kay-sol table.yev thead th.ad-col,
.kay-kap.kay-sol table.yev tbody th.ad-col,
.kay-kap.kay-sol table.yev tfoot th.ad-col{
  box-shadow:9px 0 12px -9px var(--kay-golge)}

/* --- Şerit menülerde (tarih aralığı, sekmeler) çubuk gizli değil, ince --- */
.subbar.kaydirilir,.seg.kaydirilir,.tabs.kaydirilir,.launch-items.kaydirilir{
  scrollbar-width:thin}
.subbar.kaydirilir::-webkit-scrollbar,.seg.kaydirilir::-webkit-scrollbar,
.tabs.kaydirilir::-webkit-scrollbar,.launch-items.kaydirilir::-webkit-scrollbar{
  display:block;height:6px}
.seg.kaydirilir::-webkit-scrollbar-thumb,.tabs.kaydirilir::-webkit-scrollbar-thumb,
.subbar.kaydirilir::-webkit-scrollbar-thumb,.launch-items.kaydirilir::-webkit-scrollbar-thumb{
  border-width:1px}

/* ==========================================================================
   KABUK
   ========================================================================== */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}

/* ---------- Kenar çubuğu ---------- */
.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--card);border-right:1px solid var(--line);
  color:var(--text-2);z-index:40;
}
.side-brand{display:flex;align-items:center;gap:10px;padding:0 16px;height:var(--topbar);flex:none;
  border-bottom:1px solid var(--line)}
.mark{width:26px;height:26px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--ink-900);color:#fff}
html[data-tema="koyu"] .mark{background:var(--brand-600)}
.brand-txt{min-width:0}
.brand-txt b{display:block;font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.brand-txt span{display:block;font-size:10.5px;color:var(--text-3);margin-top:0;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.side-search{padding:12px 12px 4px}
.side-search button{
  width:100%;display:flex;align-items:center;gap:8px;padding:0 9px;height:32px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--text-3);font-size:12.5px;transition:border-color .14s,color .14s}
.side-search button:hover{border-color:var(--line-strong);color:var(--text-2)}
.side-search button .ico{color:var(--ink-300)}
.side-search kbd{margin-left:auto;font:inherit;font-size:10px;letter-spacing:.02em;
  color:var(--ink-300)}

.nav{flex:1;overflow-y:auto;padding:6px 10px 16px;scrollbar-width:thin}
.nav-grup{margin-top:18px;padding:0 8px 5px;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-300)}
.nav-grup:first-child{margin-top:4px}
.nav a{
  position:relative;display:flex;align-items:center;gap:9px;padding:0 9px;height:31px;margin:1px 0;
  border-radius:var(--r-sm);font-size:13px;color:var(--text-2);transition:background .12s,color .12s}
.nav a:hover{background:var(--bg);color:var(--text)}
.nav a .ico{color:var(--ink-300);transition:color .12s}
.nav a:hover .ico{color:var(--text-3)}
.nav a.on{background:var(--bg);color:var(--text);font-weight:550}
.nav a.on .ico{color:var(--accent)}
.nav a.on::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:0 2px 2px 0;background:var(--accent)}
.nav a .say{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-300)}
.nav a.on .say{color:var(--text-3)}

.side-foot{border-top:1px solid var(--line);padding:8px 10px}
/* Yazılımı yapan firma — künye satırı. Marka değil, bu yüzden en altta,
   en sessiz tonda ve yazdırmada yok. */
.side-kunye{padding:8px 8px 2px;font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-300);text-align:center}
.usr{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);width:100%;
  background:transparent;border:0;cursor:pointer;text-align:left;transition:background .12s}
.usr:hover{background:var(--bg)}
.usr-t{min-width:0;flex:1}
.usr-t b{display:block;font-size:12px;font-weight:550;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usr-t span{display:block;font-size:10.5px;color:var(--text-3)}
.usr .ico{color:var(--ink-300)}

/* ---------- Ana alan ---------- */
.main{min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:30;height:var(--topbar);display:flex;align-items:center;gap:12px;
  padding:0 22px;background:var(--bg);border-bottom:1px solid var(--line)}
.tb-title{min-width:0}
.tb-title h1{margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title p{margin:0;font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.35}
.tb-sag{margin-left:auto;display:flex;align-items:center;gap:4px}
.tb-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.topbar .hamburger{display:none}
.topbar .chip{background:transparent;color:var(--text-3);padding:0 4px}

/* ---------- Hızlı kayıt şeridi ---------- */
.subbar{position:sticky;top:var(--topbar);z-index:29;display:flex;align-items:center;gap:2px;
  padding:0 18px;height:42px;background:var(--card);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subbar::-webkit-scrollbar{display:none}
.qb-lbl{flex:none;padding:0 10px 0 4px;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-300);white-space:nowrap}
.qb{display:inline-flex;align-items:center;gap:5px;flex:none;height:27px;padding:0 9px;
  border-radius:var(--r-sm);border:1px solid transparent;background:transparent;
  font-size:12.5px;font-weight:480;color:var(--text-2);white-space:nowrap;cursor:pointer;
  transition:background .12s,color .12s}
.qb:hover{color:var(--text);background:var(--bg)}
.qb .ico{color:var(--ink-300)}
.qb:hover .ico{color:var(--accent)}

.content{padding:22px;flex:1;max-width:1500px;width:100%}
.page-head{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;min-height:32px}
.page-head .chip{height:24px;padding:0 8px;font-size:11.5px}
.page-head .chip b{font-weight:620}
.page-head h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.018em}
.page-head p{margin:3px 0 0;font-size:12.5px;color:var(--text-3)}
.page-head .sag{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ==========================================================================
   DÜĞMELER & KONTROLLER
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--card);color:var(--text);
  font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--bg);border-color:var(--ink-200)}
html[data-tema="koyu"] .btn:hover{background:var(--card-alt);border-color:var(--ink-600)}
.btn .ico{color:var(--text-3)}
.btn:hover .ico{color:var(--text-2)}
.btn-primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff;font-weight:520}
.btn-primary .ico,.btn-primary:hover .ico{color:#fff}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
html[data-tema="koyu"] .btn-primary:hover{background:var(--brand-500);border-color:var(--brand-500)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--bg);border-color:transparent;color:var(--text)}
html[data-tema="koyu"] .btn-ghost:hover{background:var(--card-alt)}
.btn-danger{color:var(--red-500);border-color:var(--line-strong)}
.btn-danger .ico{color:var(--red-500)}
.btn-danger:hover{background:var(--red-50);border-color:color-mix(in srgb,var(--red-500) 40%,transparent)}
.btn-sm{height:28px;padding:0 9px;font-size:12px}
.btn-ico{width:32px;padding:0}
.btn-ico.btn-sm{width:28px}
.btn:disabled{opacity:.45;pointer-events:none}
:where(.btn,input,select,textarea):focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

.chip{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 7px;border-radius:4px;
  font-size:11.5px;font-weight:500;background:var(--ink-50);color:var(--text-2);
  border:0;white-space:nowrap}
html[data-tema="koyu"] .chip{background:rgba(255,255,255,.05)}
.chip .ico{color:var(--ink-300)}
.chip-sm{height:19px;font-size:10.5px;padding:0 6px}
.chip-ok{background:var(--brand-50);color:var(--brand-600)}
.chip-warn{background:var(--gold-50);color:var(--gold-600)}
.chip-bad{background:var(--red-50);color:var(--red-500)}
.chip-info{background:var(--ink-50);color:var(--text-2)}
.chip-ok .ico{color:currentColor;opacity:.8}
.chip-warn .ico,.chip-bad .ico{color:currentColor;opacity:.8}
html[data-tema="koyu"] .chip-ok{color:var(--brand-400)}
html[data-tema="koyu"] .chip-warn{color:#C79E5C}
html[data-tema="koyu"] .chip-info{background:rgba(255,255,255,.05);color:var(--text-2)}
.chip-neutral{background:var(--ink-50);color:var(--text-2)}
html[data-tema="koyu"] .chip-neutral{background:rgba(255,255,255,.05)}

/* avatar — renk yalnızca ayırt etmek için, doygunluğu düşük */
.av{display:inline-grid;place-items:center;flex:none;border-radius:5px;font-weight:600;
  background:hsl(var(--h,200) 20% 93%);color:hsl(var(--h,200) 24% 34%);
  font-size:11px;width:26px;height:26px;letter-spacing:.01em}
html[data-tema="koyu"] .av{background:hsl(var(--h,200) 14% 21%);color:hsl(var(--h,200) 26% 70%)}
.av-xs{width:21px;height:21px;font-size:9px;border-radius:4px}
.av-lg{width:46px;height:46px;font-size:17px;border-radius:9px}

.cari-cell{display:flex;align-items:center;gap:8px;min-width:0}
.cari-cell .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.cari-cell:hover .cn{color:var(--text);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--ink-200)}

/* ==========================================================================
   KARTLAR
   ========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-hd{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-hd h3{margin:0;font-size:13px;font-weight:600;letter-spacing:-.004em}
.card-hd p{margin:1px 0 0;font-size:11.5px;color:var(--text-3)}
.card-hd .sag{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-bd{padding:16px}
.card-bd.tight{padding:0}

.grid{display:grid;gap:14px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-23{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-32{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

/* KPI — düz, çerçevesiz vurgu; renkli şerit yok */
.kpi{position:relative;overflow:hidden;padding:15px 16px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.kpi .lbl{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.085em;
  text-transform:uppercase;color:var(--text-3)}
.kpi .lbl .ico{color:var(--ink-300)}
.kpi .val{margin-top:10px;font-size:24px;font-weight:600;letter-spacing:-.028em;line-height:1.05;
  font-variant-numeric:tabular-nums;color:var(--text)}
.kpi .val small{font-size:13px;font-weight:500;color:var(--text-3);margin-left:3px;letter-spacing:0}
.kpi .alt{margin-top:8px;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-3)}
.delta{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;font-weight:600;
  padding:0;background:none!important}
.delta.up{color:var(--brand-600)}
.delta.down{color:var(--red-500)}
html[data-tema="koyu"] .delta.up{color:var(--brand-400)}
.kpi .spark{position:absolute;right:14px;bottom:13px;color:var(--ink-200);opacity:1}
html[data-tema="koyu"] .kpi .spark{color:var(--line-strong)}

/* ==========================================================================
   TABLOLAR
   ========================================================================== */
.tbl-wrap{overflow-x:auto;overscroll-behavior-x:contain}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.tbl thead th{
  position:sticky;top:0;z-index:2;background:var(--card);
  padding:0 12px;height:34px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.085em;
  text-transform:uppercase;color:var(--ink-300);white-space:nowrap;
  border-bottom:1px solid var(--line)}
table.tbl thead th:first-child{padding-left:16px}
table.tbl thead th:last-child{padding-right:16px}
table.tbl th.r,table.tbl td.r{text-align:right}
table.tbl tbody td{padding:0 12px;height:40px;border-bottom:1px solid var(--line);
  color:var(--text-2);vertical-align:middle;white-space:nowrap}
table.tbl tbody td.sar{white-space:normal}
table.tbl tbody td:first-child{padding-left:16px}
table.tbl tbody td:last-child{padding-right:16px}
table.tbl tbody tr{transition:background .1s}
table.tbl tbody tr:hover{background:var(--bg)}
html[data-tema="koyu"] table.tbl tbody tr:hover{background:var(--card-alt)}
table.tbl tbody td.strong{color:var(--text);font-weight:520}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tfoot td{padding:0 12px;height:40px;background:var(--card);font-weight:620;color:var(--text);
  border-top:1px solid var(--ink-200);font-variant-numeric:tabular-nums;white-space:nowrap}
html[data-tema="koyu"] table.tbl tfoot td{border-top-color:var(--line-strong)}
table.tbl tfoot td:first-child{padding-left:16px;font-size:10px;letter-spacing:.085em;
  text-transform:uppercase;color:var(--text-3);font-weight:600}
table.tbl tfoot td:last-child{padding-right:16px}
.mono-d{color:var(--text-3);white-space:nowrap;font-size:12px}
.row-actions{display:flex;gap:1px;justify-content:flex-end;opacity:0;transition:opacity .12s}
tr:hover .row-actions,.row-actions:focus-within{opacity:1}
/* dokunmatik cihazda "üzerine gelme" yok — eylemler hep görünsün */
@media screen and (hover:none){ .row-actions{opacity:1} }
.tbl-compact tbody td{height:34px;font-size:12px}

/* ---- Hücrede doğrudan düzenleme (Excel gibi) ---- */
table.tbl td.duz{cursor:text;position:relative}
table.tbl td.duz::after{content:"";position:absolute;right:3px;bottom:3px;width:0;height:0;
  border-style:solid;border-width:0 0 5px 5px;border-color:transparent transparent var(--ink-200) transparent;
  opacity:0;transition:opacity .12s}
table.tbl tbody tr:hover td.duz::after{opacity:1}
table.tbl td.duz:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:3px}
table.tbl td.duz-acik{padding:0!important;box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:3px}
table.tbl td.duz-acik::after{display:none}
.duz-inp{width:100%;height:38px;padding:0 10px;border:0;outline:none;background:var(--card);
  font:inherit;font-size:12.5px;color:var(--text);border-radius:3px}
table.tbl td.r .duz-inp{text-align:right}
.duz-inp.sayi{font-variant-numeric:tabular-nums}
select.duz-inp{cursor:pointer;appearance:none;padding-right:24px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23949A9E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5l6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center}
table.tbl td.duz-bekle{opacity:.5}
table.tbl td.duz-ok{animation:duzOk .9s ease-out}
@keyframes duzOk{
  0%{background:color-mix(in srgb,var(--brand-500) 26%,transparent)}
  100%{background:transparent}
}
[data-tk].tk-yanip{animation:duzOk .7s ease-out}
.duz-ipucu{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-3)}
.duz-ipucu kbd{font:inherit;font-size:10px;padding:1px 5px;border-radius:3px;
  background:var(--ink-50);border:1px solid var(--line);color:var(--text-2)}
html[data-tema="koyu"] .duz-ipucu kbd{background:rgba(255,255,255,.06)}

/* ---- Aranabilir açılır liste ---- */
.al-sarmal{position:relative;display:block;width:100%}
.al-inp{width:100%}
/* Liste, mutlak konumluyken kaydırılabilir bir atanın (kayıt penceresinin
   gövdesi, tablo sarmalı) içinde kalıp KIRPILIYORDU: uzun formlarda açılır
   liste pencerenin alt kenarında kesiliyordu. Bu yüzden liste gövdeye
   taşınır ve ekrana göre (fixed) konumlanır — konumu app.js hesaplar.
   z-index kayıt penceresinin (90) ve üst şeridin üstünde olmalı. */
.al-liste{position:fixed;z-index:200;overflow-y:auto;padding:4px;
  max-height:264px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r);
  box-shadow:var(--shadow-lg)}
.al-oge{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;
  background:transparent;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  font:inherit;font-size:12.5px;color:var(--text-2);white-space:normal}
.al-oge:hover{background:var(--bg)}
html[data-tema="koyu"] .al-oge:hover{background:var(--card-alt)}
.al-oge.on{background:var(--accent-soft);color:var(--text)}
.al-oge .al-ad{flex:1;min-width:0}
.al-bos .al-ad{color:var(--ink-300);font-style:italic}
.al-rozet{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;background:var(--brand-600);color:#fff}
.al-r-oneri{background:var(--gold-500)}
.al-ekle .al-ad{color:var(--accent);font-weight:550}
.al-oneri .al-ad{color:var(--gold-600);font-weight:550}
html[data-tema="koyu"] .al-oneri .al-ad{color:#D9A961}
.al-yok{padding:12px 10px;font-size:12.5px;color:var(--text-3);text-align:center}
/* Grup başlığı — müşterinin çizimindeki kutulamanın listedeki karşılığı.
   Tıklanmaz; yalnızca altındaki seçeneklerin hangi kümeye ait olduğunu söyler. */
.al-grup{padding:7px 9px 3px;font-size:10px;font-weight:640;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-300);pointer-events:none}
.al-grup:not(:first-child){margin-top:3px;border-top:1px solid var(--line);padding-top:8px}
/* Liste artık gövdede duruyor; en az genişliği app.js veriyor (bkz. konumla). */

/* form içindeki aranabilir liste */
.al-alan{position:relative;width:100%}
.al-gizli{position:absolute!important;opacity:0;pointer-events:none;width:1px;height:1px}
.al-secim{width:100%;height:34px;padding:0 30px 0 10px;text-align:left;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);
  font:inherit;font-size:13px;color:var(--text);
  display:flex;align-items:center;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23949A9E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5l6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.al-secim:hover{border-color:var(--ink-200)}
.al-secim span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-bos-yazi{color:var(--ink-300)}
.al-alan .al-sarmal .al-inp{height:34px;border:1px solid var(--accent);border-radius:var(--r-sm);
  padding:0 10px;background:var(--card)}

/* ---- Satır seçimi ---- */
table.tbl th.sec-th,table.tbl td.sec-td{width:34px;padding:0 0 0 14px}
.satir-sec{display:inline-flex;cursor:pointer;position:relative}
.satir-sec input{position:absolute;opacity:0;width:0;height:0}
.satir-sec span{width:15px;height:15px;border-radius:3px;border:1px solid var(--line-strong);
  display:block;transition:.12s;position:relative}
.satir-sec:hover span{border-color:var(--accent)}
.satir-sec input:checked+span{background:var(--brand-600);border-color:var(--brand-600)}
.satir-sec input:checked+span::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.satir-sec input:focus-visible+span{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
table.tbl tbody tr.secili{background:var(--accent-soft)}
table.tbl td.sec-td .ico{color:var(--ink-300)}

/* ---- Rapor: dönem karşılaştırma çubuğu ---- */
.kiyas-cubuk{display:flex;flex-direction:column;gap:3px;width:100%;min-width:120px}
.kiyas-cubuk i{display:block;height:6px;border-radius:2px;min-width:2px}
.kiyas-cubuk i.yeni{background:var(--accent)}
.kiyas-cubuk i.eski{background:var(--ink-200)}
html[data-tema="koyu"] .kiyas-cubuk i.eski{background:var(--line-strong)}
.rapor-not{display:flex;align-items:flex-start;gap:9px;margin:14px 2px 0;
  font-size:12.5px;color:var(--text-3);max-width:78ch;line-height:1.55}
.rapor-not .ico{flex:none;margin-top:2px;color:var(--ink-300)}

/* ---- Toplu işlem şeridi ---- */
.toplu-serit{display:flex;align-items:center;gap:12px;padding:10px 16px;
  border-top:1px solid var(--line);background:var(--accent-soft)}
/* Şerit hicbir satir secili degilken gizlidir; JS onu `hidden` ile
   kapatiyor ama `display:flex` tarayicinin [hidden] kuralini yeniyordu
   ve serit HER defterde surekli duruyordu ("0 satır seçildi" ve altında
   bir "Seçilenleri sil" düğmesi). Aynı eşleşme dosyadaki diğer
   gizlenebilir şeritlerde de var. */
.toplu-serit[hidden]{display:none}
.toplu-serit .ts-sayi{font-size:12.5px;color:var(--text-2)}
.toplu-serit .ts-sayi b{color:var(--text);font-variant-numeric:tabular-nums}
.toplu-serit .sag{margin-left:auto;display:flex;gap:6px}

/* ---- En alttaki boş giriş satırı ---- */
tr.yeni-satir td{background:var(--card-alt);border-top:1px dashed var(--line-strong);
  border-bottom:0;height:40px}
html[data-tema="koyu"] tr.yeni-satir td{background:var(--card-alt)}
tr.yeni-satir td.duz{cursor:text}
tr.yeni-satir:hover td{background:var(--bg)}
html[data-tema="koyu"] tr.yeni-satir:hover td{background:var(--surface,var(--card-alt))}
.ys-ipucu{font-size:12px;color:var(--ink-300);font-style:italic;white-space:nowrap}
tr.yeni-satir.duz-bekle{opacity:.5}

.bos-not{display:flex;align-items:center;gap:9px;padding:12px 16px;font-size:13px;
  color:var(--text-3);border-bottom:1px solid var(--line);background:var(--card-alt)}
.bos-not .ico{color:var(--ink-300);flex:none}
.bos-not b{color:var(--text-2);font-weight:560}

/* sıralanabilir başlıklar */
.th-sir{display:inline-flex;align-items:center;gap:4px;color:inherit;white-space:nowrap;
  letter-spacing:inherit;text-transform:inherit;font:inherit}
th.r .th-sir{flex-direction:row-reverse}
.th-sir:hover{color:var(--text-2)}
.th-sir .sir-bos{opacity:0;transition:opacity .12s}
table.tbl thead th:hover .th-sir .sir-bos{opacity:.4}
table.tbl thead th.sir-on{color:var(--text-2)}
.th-sir .sir-ok{color:var(--accent)}

/* Dar ekranda sütun GİZLENMEZ.
   Eskiden 721–1180px arasında "ikincil" sütunlar sessizce kaldırılıyordu;
   kullanıcı Brüt Kg veya Dara'yı ekranda göremediği hâlde bunu anlamıyordu.
   Artık tablo yana kayar ve kaydığı bellidir (bkz. KAYDIRMA ALANLARI):
   renkli şerit, kenar gölgesi ve ok düğmesi. Veri saklamak yerine gösteriyoruz. */

/* geniş defterlerde ilk sütun yatay kaydırmada sabit kalsın */
@media screen and (min-width:721px){
  table.tbl.yapisik thead th:first-child{position:sticky;left:0;z-index:4;background:var(--card)}
  table.tbl.yapisik tbody td:first-child,
  table.tbl.yapisik tfoot td:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
  table.tbl.yapisik tbody tr:hover td:first-child{background:var(--bg)}
  html[data-tema="koyu"] table.tbl.yapisik tbody tr:hover td:first-child{background:var(--card-alt)}
}

.empty{padding:52px 24px;text-align:center;color:var(--text-3)}
.empty .ico{margin:0 auto 12px;color:var(--ink-200);width:30px;height:30px}
html[data-tema="koyu"] .empty .ico{color:var(--line-strong)}
.empty b{display:block;color:var(--text-2);font-weight:550;font-size:13.5px;margin-bottom:3px}

/* ---- ilk adımlar kartı (boş ekranların yönlendirmesi) --------------
   Sıradaki adım tek başına vurgulanır; tamamlananlar tikli ve soluk,
   sonrakiler numaralı ve sönük durur. Numaraları birbirine bağlayan
   dikey çizgi listenin bir SIRA olduğunu söyler — kullanıcı hangi
   adımda olduğunu tek bakışta görsün. */
.ilk-kart{max-width:680px;margin:0 auto}
.ilk-yalin{padding:24px 20px}      /* kartın içine konduğunda kendi kabuğu yok */
.ilk-bas{display:flex;gap:13px;align-items:flex-start;padding-bottom:16px;
  margin-bottom:4px;border-bottom:1px solid var(--line)}
.ilk-ik{flex:none;width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand-500)}
.ilk-yz{min-width:0}
.ilk-yz b{display:block;font-size:15px;font-weight:640;letter-spacing:-.015em;color:var(--text)}
.ilk-yz p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-2)}

.adimlar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.adim{display:flex;gap:12px;padding:14px 0 14px 2px;position:relative}
/* adımları birbirine bağlayan çizgi — sonuncuda yok */
.adim::before{content:"";position:absolute;left:13px;top:34px;bottom:-4px;width:1px;background:var(--line)}
.adim:last-child::before{display:none}
.adim-no{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:640;font-variant-numeric:tabular-nums;position:relative;z-index:1;
  border:1px solid var(--line-strong);background:var(--card);color:var(--text-3)}
.adim-gv{min-width:0;padding-top:2px}
.adim-ad{display:block;font-size:13.5px;font-weight:580;color:var(--text-2);letter-spacing:-.01em}
.adim-ac{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.adim-dg{margin-top:11px}

.adim.tamam .adim-no{background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.adim.tamam .adim-ad{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--ink-200)}
.adim.simdi .adim-no{background:var(--brand-50);border-color:var(--brand-400);color:var(--brand-500)}
.adim.simdi .adim-ad{color:var(--text);font-weight:640}
.adim.sonra{opacity:.62}
.ilk-not{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.55;color:var(--text-3)}

@media (max-width:520px){
  .ilk-kart{max-width:none}
  .adim-dg{width:100%;justify-content:center}
}
@media print{ .ilk-kart{display:none} }

/* araç çubuğu */
.toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar .sag{margin-left:auto;display:flex;gap:8px;align-items:center}
.search-inp{position:relative;display:flex;align-items:center}
.search-inp .ico{position:absolute;left:9px;color:var(--ink-300);pointer-events:none}
.search-inp input{height:30px;padding:0 11px 0 30px;min-width:220px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--card);font-size:12.5px}
.search-inp input::placeholder{color:var(--ink-300)}

/* ==========================================================================
   FİLTRELER
   Eskiden çıplak <select> idi: ok işareti bile yoktu, seçili olup olmadığı
   anlaşılmıyordu. Artık her filtre kendi durumunu gösterir, seçiliyken
   vurgu rengine döner ve altta kaldırılabilir birer rozet olarak listelenir.
   ========================================================================== */
.filtre{position:relative;display:inline-flex;align-items:center}
.filtre select{
  height:30px;padding:0 27px 0 10px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--card);color:var(--text-2);
  font-size:12.5px;appearance:none;-webkit-appearance:none;cursor:pointer;
  max-width:190px;text-overflow:ellipsis}
.filtre select:hover{border-color:var(--ink-200);color:var(--text)}
.filtre select:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.filtre .ico{position:absolute;right:8px;color:var(--ink-300);pointer-events:none}
/* Seçili filtre gözden kaçmasın */
.filtre.dolu select{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent);font-weight:560}
.filtre.dolu .ico{color:var(--accent)}

/* --- Uygulanan filtrelerin özeti: tek tek kaldırılabilir --- */
.filtre-ozet{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:9px 16px;border-bottom:1px solid var(--line);background:var(--card-alt)}
.filtre-ozet .fo-et{font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);margin-right:2px}
.fo-rozet{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 10px;
  border-radius:99px;border:1px solid var(--brand-100);background:var(--accent-soft);
  color:var(--accent);font-size:12px;font-weight:520;max-width:100%}
.fo-rozet b{font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-rozet a{display:grid;place-items:center;width:18px;height:18px;flex:none;
  border-radius:50%;color:var(--accent);opacity:.65}
.fo-rozet a:hover{background:var(--accent);color:#fff;opacity:1}
.fo-temizle{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--text-3);padding:0 4px}
.fo-temizle:hover{color:var(--red-500)}

/* --- Dar ekranda filtreler katlanır --- */
.filtre-ac{display:none}
@media screen and (max-width:900px){
  .filtre-ac{display:inline-flex}
  .filtre-kutu{display:none;width:100%;flex-wrap:wrap;gap:8px}
  .filtre-kutu.acik{display:flex}
  .filtre-kutu .filtre{flex:1 1 150px}
  .filtre-kutu .filtre select{width:100%;max-width:none}
  .filtre-ozet{padding:8px 12px}
  .fo-temizle{margin-left:0}
}
/* araç çubuğunda tüm genişliği kaplaması istenen arama kutusu */
.search-inp.f1{flex:1}
.search-inp.f1 input{width:100%;min-width:0}

.seg{display:inline-flex;padding:0;background:transparent;border-radius:var(--r-sm);gap:0;
  border:1px solid var(--line-strong);overflow:hidden;
  max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.seg::-webkit-scrollbar{display:none}
.seg a,.seg button{flex:none}
.seg a,.seg button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:0;
  border-right:1px solid var(--line);background:var(--card);border-radius:0;
  font-size:12px;font-weight:480;color:var(--text-3);cursor:pointer;transition:background .12s,color .12s}
.seg a:last-child,.seg button:last-child{border-right:0}
.seg a:hover,.seg button:hover{color:var(--text);background:var(--bg)}
.seg a.on,.seg button.on{background:var(--ink-900);color:#fff;font-weight:520}
.seg a.on:hover,.seg button.on:hover{background:var(--ink-900);color:#fff}
html[data-tema="koyu"] .seg a.on,html[data-tema="koyu"] .seg button.on{background:var(--brand-600)}
html[data-tema="koyu"] .seg a.on:hover,html[data-tema="koyu"] .seg button.on:hover{background:var(--brand-600)}

/* sayfalama */
.pager{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager .bilgi{font-size:12px;color:var(--text-3)}
.pager .sag{margin-left:auto;display:flex;gap:3px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pg{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.pg:hover{background:var(--bg);color:var(--text)}
.pg.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff;font-weight:600}
html[data-tema="koyu"] .pg.on{background:var(--brand-600);border-color:var(--brand-600)}
.pg.dis{opacity:.35;pointer-events:none}

/* ==========================================================================
   FORMLAR / ÇEKMECE
   ========================================================================== */
.ort{position:fixed;inset:0;background:rgba(11,12,13,.34);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .22s}
.ort.acik{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);z-index:90;display:flex;flex-direction:column;
  background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
.drawer.acik{transform:none}

/* Panelin içeriği bir <form> içinde durur; başlık, gövde ve alt şerit
   onun çocuklarıdır. Form flex kabı yapılmazsa .drawer-bd'nin flex:1'i
   hiçbir işe yaramaz: form içeriği kadar uzar, panel taşar ve KÜÇÜK
   EKRANDA "Kaydet" şeridi ekranın altında kalır — 525 px yükseklikte
   müşteri formunun alt sırası ve kaydet düğmesi hiç görünmüyordu.
   min-height:0 şart: flex çocuğunun varsayılan min-height:auto değeri
   küçülmesini engeller ve kaydırma yine devreye girmez. */
.drawer > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.drawer-hd{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);flex:none}
.drawer-hd h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.drawer-hd p{margin:1px 0 0;font-size:11.5px;color:var(--text-3)}
.drawer-bd{padding:20px;overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
/* ==========================================================================
   DİKKAT İSTEYEN DURUMLAR (panel)
   Riskin kendiliğinden görünmesi için; kullanıcı arayıp bulmak zorunda kalmasın.
   ========================================================================== */
.uyari-liste{display:flex;flex-direction:column;gap:7px}
.uyari-satir{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--r);
  background:var(--card);transition:border-color .12s,background .12s}
.uyari-satir.hata{border-left-color:var(--red-500);background:var(--red-50)}
.uyari-satir.uyari{border-left-color:var(--gold-500);background:var(--gold-50)}
.uyari-satir:hover{border-color:var(--line-strong)}
.uyari-satir .us-ikon{flex:none;display:flex}
.uyari-satir.hata .us-ikon{color:var(--red-600)}
.uyari-satir.uyari .us-ikon{color:var(--gold-600)}
.us-yazi{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.us-yazi b{font-size:13.5px;font-weight:600;color:var(--text)}
.us-yazi span{font-size:12.3px;color:var(--text-3)}
.us-ok{flex:none;color:var(--ink-300)}
.uyari-satir:hover .us-ok{color:var(--text-2)}

/* Riskli / uyarılı tablo satırları */
table.tbl tbody tr.satir-riskli td{background:var(--red-50)}
table.tbl tbody tr.satir-uyari td{background:var(--gold-50)}
.uyari-yazi{color:var(--gold-600)}

/* ==========================================================================
   YAYINA ALMA — canlı denetim listesi
   ========================================================================== */
.yayin-skor{display:flex;align-items:center;gap:24px}
.yayin-skor-yazi{min-width:0}
.yayin-skor-yazi h3{margin:0 0 5px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.yayin-skor-yazi p{margin:0;font-size:13px;line-height:1.65;color:var(--text-2);max-width:62ch}
.yayin-skor-yazi b{color:var(--text);font-weight:600}

/* Halka: conic-gradient ile tek elemanda; --oran 0-100 */
.yayin-halka{position:relative;flex:none;width:82px;height:82px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--halka) calc(var(--oran) * 1%),var(--line) 0)}
.yayin-halka::before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:var(--card)}
.yayin-halka span{position:relative;display:flex;align-items:baseline;gap:1px;
  font-variant-numeric:tabular-nums;color:var(--halka)}
.yayin-halka b{font-size:23px;font-weight:640;letter-spacing:-.02em}
.yayin-halka small{font-size:11px;font-weight:600}

.yayin-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.yayin-madde{display:flex;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.yayin-madde:first-child{border-top:0}
.yayin-ikon{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--ink-50);color:var(--text-3)}
.yayin-madde.y-kritik .yayin-ikon{background:var(--red-50);color:var(--red-600)}
.yayin-madde.y-uyari  .yayin-ikon{background:var(--gold-50);color:var(--gold-600)}
.yayin-madde.y-tamam  .yayin-ikon{background:var(--brand-50);color:var(--brand-600)}
.yayin-madde.y-kritik{background:linear-gradient(90deg,var(--red-50),transparent 62%)}
/* Koyu temada --ink-50 açık kalıyor; nötr rozet ve soluk metinler yeniden kurulur */
html[data-tema="koyu"] .yayin-ikon{background:rgba(255,255,255,.05)}
html[data-tema="koyu"] .yayin-madde.y-kritik .yayin-ikon{color:#C97B70}
html[data-tema="koyu"] .yayin-madde.y-uyari  .yayin-ikon{color:#C79E5C}
html[data-tema="koyu"] .yayin-madde.y-tamam  .yayin-ikon{color:var(--brand-400)}
.yayin-govde{min-width:0;flex:1}
.yayin-basi{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.yayin-basi b{font-size:13.5px;font-weight:600;color:var(--text)}
.yayin-deger{font-size:12.3px;color:var(--text-2);font-variant-numeric:tabular-nums}
.yayin-acik{margin:0;font-size:12.6px;line-height:1.6;color:var(--text-2);max-width:76ch}
.yayin-cozum{margin:7px 0 0;font-size:12.4px;line-height:1.6;color:var(--text);max-width:76ch;
  padding:8px 11px;border-radius:var(--r-sm);background:var(--card-alt);border:1px solid var(--line)}
.yayin-cozum span{display:block;font-size:10.5px;font-weight:640;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.yayin-madde.y-tamam .yayin-acik{color:var(--text-3)}

.yayin-sira{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:9px;
  font-size:13px;line-height:1.65;color:var(--text-2)}
.yayin-sira li::marker{color:var(--text-3);font-variant-numeric:tabular-nums}
.yayin-sira b{color:var(--text);font-weight:600}

/* Geçiş raporu — işlemden sonra dönen adım listesi */
.yayin-rapor.r-ok{border-color:color-mix(in srgb,var(--brand-500) 45%,var(--line))}
.yayin-rapor.r-bad{border-color:color-mix(in srgb,var(--red-500) 45%,var(--line))}

/* "Gerçek Kullanıma Geç" — yıkıcı işlem; kasten ayrı ve sakin durur */
.yayin-gecis{border-color:color-mix(in srgb,var(--gold-500) 42%,var(--line))}
.yayin-gecis-ozet{margin:0 0 14px;font-size:13px;line-height:1.65;color:var(--text-2);max-width:76ch}
.yayin-gecis-ozet b{color:var(--text);font-weight:600}

.yayin-gecis-kalem{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:7px}
.yayin-gecis-kalem li{display:flex;align-items:flex-start;gap:9px;font-size:12.8px;
  line-height:1.55;color:var(--text-2)}
.yayin-gecis-kalem li .ico{flex:none;margin-top:1px;color:var(--gold-600)}
.yayin-gecis-kalem li.pas{color:var(--text-3)}
.yayin-gecis-kalem li.pas .ico{color:var(--brand-600)}
.yayin-gecis-kalem b{color:var(--text);font-weight:600}
.yayin-gecis-kalem li.pas b{color:var(--text-2);font-weight:500}

/* details/summary: form kazayla açılmasın diye kapalı başlar */
.yayin-gecis-ac{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.yayin-gecis-ac>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  height:32px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--card-alt);font-size:12.8px;font-weight:600;color:var(--red-500);
  list-style:none;user-select:none}
.yayin-gecis-ac>summary::-webkit-details-marker{display:none}
.yayin-gecis-ac>summary .ico{color:var(--red-500)}
.yayin-gecis-ac>summary:hover{background:var(--red-50);
  border-color:color-mix(in srgb,var(--red-500) 40%,var(--line-strong))}
.yayin-gecis-ac[open]>summary{margin-bottom:14px}

.yayin-gecis-onay{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;
  padding:11px 13px;border-radius:var(--r-sm);background:var(--card-alt);
  border:1px solid var(--line);font-size:12.7px;line-height:1.55;color:var(--text-2);
  cursor:pointer;max-width:76ch}
.yayin-gecis-onay input{flex:none;margin-top:2px}
.yayin-gecis-onay b{color:var(--text);font-weight:600}

.yayin-gecis-form .field small{display:block;margin-top:5px;font-size:11.6px;
  line-height:1.5;color:var(--text-3)}
.yayin-gecis-form .field small b{color:var(--text-2);font-weight:600}
.yayin-gecis-dip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.yayin-gecis-not{font-size:12px;line-height:1.5;color:var(--text-3)}
.yayin-gecis-not b{color:var(--text-2);font-weight:600}

@media screen and (max-width:640px){
  .yayin-skor{gap:16px}
  .yayin-halka{width:66px;height:66px}
  .yayin-halka::before{width:50px;height:50px}
  .yayin-halka b{font-size:19px}
  .yayin-madde{padding:12px 14px}
}

/* Çek durumu açılır kutusu */
.cek-durum{height:26px;max-width:150px;padding:0 24px 0 8px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--card);font-size:12px;
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-300) 50%),
                   linear-gradient(135deg,var(--ink-300) 50%,transparent 50%);
  background-position:calc(100% - 12px) 11px, calc(100% - 8px) 11px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.cek-durum:focus-visible{outline:none;border-color:var(--accent)}

/* ==========================================================================
   MAKBUZ / FİŞ — A5 tek sayfa
   ========================================================================== */
.makbuz-kart{max-width:620px}
.makbuz-tutar{padding:16px 18px;margin-bottom:16px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--accent-soft)}
.mt-lbl{display:block;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3)}
.mt-val{display:block;font-size:28px;font-weight:700;letter-spacing:-.025em;
  color:var(--accent);margin-top:3px;font-variant-numeric:tabular-nums}
.mt-yazi{display:block;font-size:12.5px;color:var(--text-2);margin-top:4px;font-style:italic}
.makbuz-tbl th{width:180px;text-align:left;font-weight:500;color:var(--text-3);
  padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:12.5px}
.makbuz-tbl td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--text);font-weight:500}
.makbuz-not{margin:16px 0 0;font-size:12.5px;color:var(--text-3);line-height:1.5}

/* Yarım kalmış kayıt şeridi — form açılınca üstte belirir */
.taslak-serit{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 20px;background:var(--gold-50);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--gold-600)}
.taslak-serit[hidden]{display:none}
.taslak-serit .ico{flex:none}
.taslak-serit .ts-yazi{flex:1;min-width:150px;line-height:1.45}

/* Alt şerit her zaman görünür kalır: küçülmez, kaydırma gövdede olur */
.drawer-ft{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--card);flex:none}
.drawer-ft .sag{margin-left:auto;display:flex;gap:8px}

.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}
.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-12{grid-column:span 12}
.field label{font-size:11.5px;font-weight:520;color:var(--text-2);display:flex;gap:3px}
.field label i{color:var(--red-500);font-style:normal}
.fw{position:relative;display:flex}
.field input,.field select,.field textarea{
  width:100%;height:34px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--card);font-size:13px;transition:border-color .14s,box-shadow .14s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-300)}
.field textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.5}
.field input[readonly]{background:var(--bg);color:var(--text);font-weight:600;border-style:dashed}
.field select{appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23949A9E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.5l6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.fw.has-suffix input{padding-right:46px}
.suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;
  color:var(--ink-300);pointer-events:none;font-weight:500}
.fh{font-size:10.5px;color:var(--text-3)}
.field input[inputmode]{font-variant-numeric:tabular-nums}

.form-sec{grid-column:span 12;margin-top:4px;display:flex;align-items:center;gap:10px}
.form-sec span{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-300)}
.form-sec::after{content:"";flex:1;height:1px;background:var(--line)}

.formul-kutu{grid-column:span 12;display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:12px;color:var(--text-2)}
.formul-kutu .ico{color:var(--ink-300);flex:none}
.formul-kutu code{font-family:ui-monospace,"Cascadia Mono","Consolas",monospace;font-size:11.5px;
  background:var(--card);padding:2px 6px;border-radius:4px;border:1px solid var(--line);color:var(--text)}

/* Tablo altındaki sabit formül şeridi (müşterinin çizimindeki gibi) */
.formul-serit{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--line);background:var(--card-alt)}
.fs-bas{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-300);flex:none}
.fs-satir{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.fs-satir i{font-style:normal;color:var(--ink-300);font-size:12.5px}
.fs-satir .fk{padding:1px 7px;border-radius:4px;background:var(--card);border:1px solid var(--line);
  font-size:11.5px;white-space:nowrap}
html[data-tema="koyu"] .fs-satir .fk{background:var(--card)}
.fs-satir b{font-weight:620;color:var(--text);padding:1px 7px;border-radius:4px;
  background:var(--accent-soft);font-size:11.5px}
html[data-tema="koyu"] .fs-satir b{color:var(--brand-400)}
@media screen and (max-width:720px){
  .formul-serit{flex-direction:column;align-items:flex-start;gap:9px;padding:12px}
}

/* ==========================================================================
   AÇILIR MENÜ / BİLDİRİM
   ========================================================================== */
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 5px);right:0;min-width:210px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:4px;opacity:0;transform:translateY(-4px) scale(.985);pointer-events:none;
  transition:opacity .14s,transform .14s;transform-origin:top right}
.dd.acik .dd-menu{opacity:1;transform:none;pointer-events:auto}
.dd-menu.sol{right:auto;left:0;transform-origin:top left}
/* Kaydırılabilir bir kabın kırptığı menü, ekrana göre konumlanıp kabın
   dışına çıkarılır; koordinatları app.js hesaplar (bkz. menuKonumla).
   position !important: sayfaya özel kurallar (ör. .p-grup .dd-menu)
   aynı ağırlıkta ama daha sonra geldiği için bu kaçışı eziyordu —
   menü sınıfı alıyor ama mutlak konumlu kalıp ekran dışına düşüyordu. */
.dd-menu.dd-ucan{position:fixed!important;z-index:150;overflow-y:auto}
.dd-menu a,.dd-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border:0;
  background:transparent;border-radius:var(--r-sm);font-size:12.5px;color:var(--text-2);cursor:pointer;text-align:left}
.dd-menu a .ico,.dd-menu button .ico{color:var(--ink-300)}
.dd-menu a:hover,.dd-menu button:hover{background:var(--bg);color:var(--text)}
html[data-tema="koyu"] .dd-menu a:hover,html[data-tema="koyu"] .dd-menu button:hover{background:var(--card-alt)}
.dd-menu .ayrac{height:1px;background:var(--line);margin:4px 2px}
.dd-menu .bas{padding:7px 9px 5px;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-300)}
/* Tıklanmayan menü satırı (yalnız okunacak kayıt) — bağlantıyla aynı hizada
   durur ama imleç değişmez, üstüne gelince vurgulanmaz. */
.dd-menu .oge{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;
  border-radius:var(--r-sm);font-size:12.5px;color:var(--text-2)}
.dd-menu .oge .ico{color:var(--ink-300)}
.dd-menu .bos{display:block;padding:8px 9px 10px;font-size:12px;color:var(--text-3)}
.dd-menu .tehlike{color:var(--red-500)}
.dd-menu .tehlike .ico{color:var(--red-500)}
.dd-menu .tehlike:hover{background:var(--red-50);color:var(--red-600)}

/* Oturum eskidi uyarısı — üstte sabit şerit */
.oturum-uyari{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:11px;max-width:min(620px,94vw);
  padding:11px 14px;border-radius:var(--r);
  background:var(--gold-500);color:#fff;font-size:13px;
  box-shadow:0 14px 40px -12px rgba(11,12,13,.5)}
.oturum-uyari b{font-weight:640}
.oturum-uyari svg{flex:none}
.oturum-uyari button{flex:none;height:28px;padding:0 12px;border:0;border-radius:var(--r-sm);
  background:rgba(255,255,255,.95);color:var(--ink-900);font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer}
.oturum-uyari button:hover{background:#fff}

.toast-yuva{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:11px 14px;min-width:270px;max-width:390px;
  background:var(--ink-900);border:0;color:#F2F4F4;
  border-radius:var(--r);box-shadow:var(--shadow-lg);font-size:12.5px;
  animation:toastIn .3s cubic-bezier(.32,.72,0,1)}
html[data-tema="koyu"] .toast{background:var(--card);border:1px solid var(--line-strong);color:var(--text)}
.toast .ico{color:var(--brand-400)}
.toast.hata .ico{color:#E08078}
.toast.uyari .ico{color:#D2A860}
.toast button{margin-left:auto;background:0;border:0;color:rgba(255,255,255,.45);cursor:pointer;padding:2px}
.toast button:hover{color:#fff}
html[data-tema="koyu"] .toast button{color:var(--text-3)}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ==========================================================================
   GRAFİKLER
   ========================================================================== */
.chart-wrap{position:relative}
.chart{width:100%;height:180px;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-x{position:relative;height:16px;margin-top:6px}
.chart-x span{position:absolute;transform:translateX(-50%);font-size:10px;color:var(--ink-300);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chart-x span:first-child{transform:none}
.chart-empty{height:180px;display:grid;place-items:center;color:var(--text-3);font-size:12.5px}
.spark{overflow:visible}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{flex:none}
.legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:140px}
.legend-i{display:flex;align-items:center;gap:8px;font-size:12px}
.legend-i .dot{width:8px;height:8px;border-radius:2px;flex:none}
.legend-i b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.legend-i span{color:var(--text-2)}

/* yatay bar listesi */
.bars{display:flex;flex-direction:column;gap:1px}
.bar-i{position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);
  font-size:12.5px;overflow:hidden}
.bar-i:hover{background:var(--bg)}
html[data-tema="koyu"] .bar-i:hover{background:var(--card-alt)}
.bar-i .fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink-50);border-radius:var(--r-sm);z-index:0}
html[data-tema="koyu"] .bar-i .fill{background:rgba(255,255,255,.045)}
.bar-i>*{position:relative;z-index:1}
.bar-i .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.bar-i:hover .nm{color:var(--text)}
.bar-i .vl{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}

/* ==========================================================================
   BİRLEŞİK RAPOR — defter seçim kutuları
   ========================================================================== */
.secim-kutulari{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px}
.secim-kutu{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);
  transition:border-color .12s,background .12s}
.secim-kutu:hover{border-color:var(--ink-300)}
.secim-kutu input{position:absolute;opacity:0;pointer-events:none}
.secim-kutu .sk-ico{width:30px;height:30px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--bg);color:var(--text-3)}
html[data-tema="koyu"] .secim-kutu .sk-ico{background:var(--card-alt)}
.secim-kutu .sk-ad{min-width:0;flex:1}
.secim-kutu .sk-ad b{display:block;font-size:12.5px;font-weight:560;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secim-kutu .sk-ad span{display:block;font-size:10.5px;color:var(--text-3);margin-top:1px}
.secim-kutu .sk-tik{width:18px;height:18px;flex:none;border-radius:4px;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:transparent;transition:.12s}
.secim-kutu.on{border-color:var(--accent);background:var(--accent-soft)}
.secim-kutu.on .sk-ico{background:var(--card);color:var(--accent)}
.secim-kutu.on .sk-tik{background:var(--brand-600);border-color:var(--brand-600);color:#fff}

/* ==========================================================================
   CARİ SEÇİM EKRANI (defterlerin ilk adımı)
   ========================================================================== */
.sec-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:0}
.sec-kart{display:flex;align-items:center;gap:13px;padding:13px 16px;min-width:0;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  transition:background .12s}
.sec-kart:hover{background:var(--bg)}
html[data-tema="koyu"] .sec-kart:hover{background:var(--card-alt)}
.sec-bilgi{flex:1;min-width:0}
.sec-bilgi b{font-size:13.5px;font-weight:560;letter-spacing:-.008em;color:var(--text);
  line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sec-kart:hover .sec-bilgi b{color:var(--accent)}
.sec-meta{display:flex;gap:10px;margin-top:3px;flex-wrap:wrap}
.sec-meta i{font-style:normal;display:inline-flex;align-items:center;gap:3px;
  font-size:11px;color:var(--text-3)}
.sec-meta .ico{color:var(--ink-300)}
.sec-sayi{flex:none;text-align:right;min-width:104px}
.sec-sayi b{display:block;font-size:13px;font-weight:620;color:var(--text);letter-spacing:-.015em}
.sec-sayi span{display:block;font-size:10.5px;color:var(--text-3);margin-top:2px;white-space:nowrap}
.sec-cubuk{display:block;height:2px;border-radius:2px;background:var(--ink-100);margin-top:6px;overflow:hidden}
html[data-tema="koyu"] .sec-cubuk{background:var(--line)}
.sec-cubuk i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* tablo hücresi içinde oran çubuğu — sayının altında, sayıyı bastırmadan */
.satir-cubuk{display:block;height:2px;border-radius:2px;background:var(--ink-100);
  margin-top:5px;overflow:hidden}
html[data-tema="koyu"] .satir-cubuk{background:var(--line)}
.satir-cubuk i{display:block;height:100%;background:var(--brand-400);border-radius:2px}
@media print{ .satir-cubuk{display:none} }
.sec-ok{color:var(--ink-200);flex:none}
.sec-kart:hover .sec-ok{color:var(--accent)}
.sec-sonuk .sec-kart{opacity:.62}
.sec-sonuk .sec-kart:hover{opacity:1}
.sec-bolum{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--card-alt)}
.sec-bolum span{font-size:10.5px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--text-3)}
.sec-bolum i{font-style:normal;font-size:11px;color:var(--ink-300);font-variant-numeric:tabular-nums}

/* seçili cari şeridi (defterin üstünde) */
.secili-serit{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding:9px 14px 9px 8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);flex-wrap:wrap}
.secili-serit .sc-ayrac{width:1px;height:22px;background:var(--line);flex:none}
.secili-serit .sc-ad{min-width:0;flex:1}
.secili-serit .sc-ad b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secili-serit .sc-ad span{display:block;font-size:11px;color:var(--text-3);margin-top:1px}
.secili-serit .sag{margin-left:auto;display:flex;gap:6px;align-items:center}

/* ==========================================================================
   DEFTER PANOSU (daireli başlangıç ekranı)
   ========================================================================== */
.launch-row{display:flex;gap:20px;padding:14px 16px;border-bottom:1px solid var(--line)}
.launch-row:last-child{border-bottom:0}
.launch-lbl{width:182px;flex:none;padding-top:6px}
.launch-lbl .lb-ico{width:24px;height:24px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line);color:var(--text-3)}
html[data-tema="koyu"] .launch-lbl .lb-ico{background:var(--card-alt)}
.launch-lbl b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.launch-lbl>.row>span>span{display:block;font-size:11px;color:var(--text-3);margin-top:1px;line-height:1.3}
.launch-lbl>a{display:inline-flex;align-items:center;gap:1px;margin-top:8px;font-size:11.5px;
  font-weight:500;color:var(--text-3)}
.launch-lbl>a .ico{color:var(--ink-300)}
.launch-lbl>a:hover{color:var(--accent)}
.launch-lbl>a:hover .ico{color:var(--accent)}

.launch-items{flex:1;min-width:0;display:flex;gap:1px;overflow-x:auto;padding:0 2px 8px;
  scrollbar-width:thin;scroll-snap-type:x proximity}
.launch-items::-webkit-scrollbar{height:5px}
.launch-i{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:8px 4px;border-radius:var(--r);text-align:center;scroll-snap-align:start;
  transition:background .12s}
.launch-i:hover{background:var(--bg)}
html[data-tema="koyu"] .launch-i:hover{background:var(--card-alt)}
.launch-i .daire{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  background:hsl(var(--h,200) 20% 94%);color:hsl(var(--h,200) 24% 36%);
  border:1px solid hsl(var(--h,200) 18% 88%);transition:border-color .14s,color .14s}
html[data-tema="koyu"] .launch-i .daire{background:hsl(var(--h,200) 14% 20%);color:hsl(var(--h,200) 26% 72%);
  border-color:hsl(var(--h,200) 12% 26%)}
.launch-i:hover .daire{border-color:var(--ink-300)}
.launch-i .nm{font-size:11px;font-weight:500;color:var(--text-2);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.launch-i:hover .nm{color:var(--text)}
.launch-i .mt{font-size:10px;color:var(--ink-300);font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.launch-i.ekle .daire{background:transparent;color:var(--text-3);
  border:1px dashed var(--line-strong)}
.launch-i.ekle:hover .daire{color:var(--accent);border-color:var(--accent)}
.launch-i.ekle .nm{color:var(--text-3);font-weight:500}

/* zaman çizelgesi */
.tline{display:flex;flex-direction:column}
.tline-i{position:relative;display:flex;gap:11px;padding:0 0 15px 0;align-items:flex-start}
.tline-i:last-child{padding-bottom:0}
.tline-i .pt{position:relative;flex:none;width:24px;display:flex;justify-content:center}
.tline-i .pt::after{content:"";position:absolute;top:20px;bottom:-15px;width:1px;background:var(--line)}
.tline-i:last-child .pt::after{display:none}
.tline-i .pt i{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-300);z-index:1}
html[data-tema="koyu"] .tline-i .pt i{background:var(--card-alt)}
.tline-i .bd{flex:1;min-width:0;padding-top:2px}
.tline-i .bd b{display:block;font-size:12.5px;font-weight:520;color:var(--text)}
.tline-i .bd span{font-size:11.5px;color:var(--text-3)}

/* ==========================================================================
   MÜŞTERİ PROFİLİ
   ========================================================================== */
.profil-hd{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);flex-wrap:wrap}
.profil-hd .bilgi{min-width:0;flex:1}
.profil-hd h2{margin:0 0 3px;font-size:18px;font-weight:600;letter-spacing:-.018em}
.profil-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-3);margin-top:7px}
.profil-meta i{display:inline-flex;align-items:center;gap:5px;font-style:normal}
.profil-meta .ico{color:var(--ink-300)}
.profil-hd .bakiye{text-align:right;padding-left:20px;border-left:1px solid var(--line)}
.profil-hd .bakiye .lb{font-size:10px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--text-3)}
.profil-hd .bakiye .vl{font-size:24px;font-weight:620;letter-spacing:-.028em;font-variant-numeric:tabular-nums;margin-top:3px}

.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:18px 0 0;overflow-x:auto}
.tabs a{padding:8px 13px;font-size:12.5px;font-weight:500;color:var(--text-3);border-bottom:1.5px solid transparent;
  margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text);border-bottom-color:var(--text);font-weight:600}

.mini-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.mini-kpi>div{padding:13px 16px;border-right:1px solid var(--line)}
.mini-kpi>div:last-child{border-right:0}
.mini-kpi .lb{font-size:10px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--text-3)}
.mini-kpi .vl{margin-top:5px;font-size:17px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ==========================================================================
   CARİ MERKEZİ — "hangi defter?" kutuları
   ========================================================================== */
.hub-bas{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow)}
.hub-bilgi{flex:1;min-width:0}
.hub-bilgi h2{margin:0 0 7px;font-size:19px;font-weight:640;letter-spacing:-.02em;color:var(--text)}
.hub-bakiye{flex:none;text-align:right;padding-left:18px;border-left:1px solid var(--line)}
.hub-bakiye .lb{font-size:10px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:4px}
.hub-bakiye .vl{font-size:22px;font-weight:660;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.hub-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.hub-kutu{display:flex;flex-direction:column;padding:16px 17px 14px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);transition:border-color .12s ease,transform .12s ease}
.hub-kutu:hover{border-color:var(--accent);transform:translateY(-2px)}
.hub-kutu:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.hk-ust{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.hk-ik{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent)}
.hub-kutu:hover .hk-ik{background:var(--accent);color:#fff}
.hk-ok{color:var(--ink-300);flex:none;margin-top:3px}
.hub-kutu:hover .hk-ok{color:var(--accent)}
.hk-ad{font-size:14px;font-weight:640;letter-spacing:-.01em;color:var(--text);line-height:1.3}
.hk-alt{font-size:11.5px;color:var(--text-3);margin-top:3px;line-height:1.4}
.hk-sayi{display:flex;align-items:baseline;gap:4px;margin-top:12px}
.hk-sayi b{font-size:19px;font-weight:660;letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums}
.hk-sayi i{font-style:normal;font-size:11.5px;color:var(--text-3)}
.hk-meta{font-size:11px;color:var(--text-3);margin-top:3px}

@media screen and (max-width:720px){
  .hub-bas{flex-wrap:wrap;gap:12px}
  .hub-bakiye{padding-left:0;border-left:0;text-align:left;width:100%}
  .hub-izgara{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
}

/* ==========================================================================
   PANEL — kalan / ödenecek kartları ve açıklama balonu
   ========================================================================== */
.kpi.kpi-buyuk{position:relative;padding:16px 18px}
.kpi.kpi-buyuk .lbl{display:flex;align-items:center;gap:6px}
.kpi.kpi-buyuk .val{font-size:26px}
.kpi-kirilim{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;
  font-size:11.5px;color:var(--text-3)}
.kpi-kirilim b{font-weight:620;color:var(--text-2);font-variant-numeric:tabular-nums}

/* sağ üstteki soru işareti */
.ipucu-dug{margin-left:auto;width:18px;height:18px;flex:none;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--card);cursor:pointer;
  font:inherit;font-size:10.5px;font-weight:700;line-height:1;color:var(--text-3);
  display:grid;place-items:center;padding:0}
.ipucu-dug:hover,.ipucu-dug[aria-expanded="true"]{border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft)}
.ipucu-kutu{position:absolute;top:38px;right:14px;z-index:30;width:min(320px,calc(100vw - 48px));
  padding:13px 15px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--card);box-shadow:var(--shadow-lg);text-align:left}
.ipucu-kutu[hidden]{display:none}
.ipucu-kutu b{display:block;font-size:12.5px;font-weight:640;color:var(--text);margin-bottom:5px}
.ipucu-kutu p{margin:0 0 9px;font-size:12px;line-height:1.55;color:var(--text-2)}
.ipucu-kutu code{display:block;padding:7px 9px;border-radius:6px;background:var(--bg);
  border:1px solid var(--line);font-size:11.5px;color:var(--text);margin-bottom:7px}
html[data-tema="koyu"] .ipucu-kutu code{background:var(--card-alt)}

/* panel tarih seçicileri */
.tarih-inp{height:34px;border-radius:7px;border:1px solid var(--line-strong);
  background:var(--card);padding:0 10px;font:inherit;font-size:12.5px;color:var(--text)}
.tarih-inp:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.seg.seg-sm a{font-size:11.5px;padding:0 10px;height:28px;line-height:28px}

/* ==========================================================================
   YEVMİYE MATRİSİ
   ========================================================================== */
.yev-wrap{overflow:auto;max-height:calc(100vh - 320px)}
table.yev{border-collapse:separate;border-spacing:0;font-size:12px;width:100%}
table.yev th,table.yev td{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
table.yev thead th{position:sticky;top:0;z-index:3;background:var(--card);padding:7px 6px;
  font-size:10px;font-weight:600;color:var(--text-3);text-align:center;min-width:48px;
  border-top:0}
/* Sol sabit sütun artık TARİH */
table.yev thead th.ad-col{z-index:6;left:0;text-align:left;min-width:96px;width:96px;padding-left:14px;
  font-size:10px;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-300)}
table.yev tbody th.ad-col{position:sticky;left:0;z-index:2;background:var(--card);text-align:left;
  padding:0;font-weight:500;height:38px;white-space:nowrap;color:var(--text-2);
  min-width:96px;width:96px}
table.yev tbody tr:hover th.ad-col,table.yev tbody tr:hover td{background:var(--bg)}
html[data-tema="koyu"] table.yev tbody tr:hover th.ad-col,
html[data-tema="koyu"] table.yev tbody tr:hover td{background:var(--card-alt)}
table.yev tbody td{height:38px;text-align:center;padding:0;background:var(--card)}
/* Sağdaki iki sabit sütun: Gün Toplamı · Günün Tutarı */
table.yev td.tp,table.yev th.tp{position:sticky;z-index:2;background:var(--card);font-weight:620;
  padding:0 12px;text-align:right;font-variant-numeric:tabular-nums;min-width:104px;color:var(--text)}
table.yev td.tp:nth-last-child(2),table.yev th.tp:nth-last-child(2){right:104px;border-left:1px solid var(--line)}
table.yev td.tp:last-child,table.yev th.tp:last-child{right:0}
table.yev thead th.tp{z-index:6;font-size:10px;line-height:1.35;text-align:right}
table.yev td.tp.od{font-weight:560;color:var(--text-2)}
table.yev tfoot td,table.yev tfoot th{position:sticky;bottom:0;z-index:4;background:var(--card);
  font-weight:620;height:34px;text-align:right;padding:0 10px;
  font-variant-numeric:tabular-nums;color:var(--text)}
table.yev tfoot tr.ft-hakedis td,table.yev tfoot tr.ft-hakedis th{bottom:68px;border-top:1px solid var(--ink-200)}
table.yev tfoot tr.ft-odenen td,table.yev tfoot tr.ft-odenen th{bottom:34px}
table.yev tfoot tr.ft-kalan td,table.yev tfoot tr.ft-kalan th{bottom:0}
html[data-tema="koyu"] table.yev tfoot tr.ft-hakedis td,
html[data-tema="koyu"] table.yev tfoot tr.ft-hakedis th{border-top-color:var(--line-strong)}
table.yev tfoot th.ad-col{left:0;z-index:6;text-align:left;padding-left:14px;font-size:10px;
  text-transform:uppercase;letter-spacing:.085em;color:var(--text-3)}
table.yev tfoot td.tp{z-index:5}
/* Pazar satırı ve bugünün satırı */
table.yev tr.pazar-satir th.ad-col,table.yev tr.pazar-satir td{background:var(--bg)}
html[data-tema="koyu"] table.yev tr.pazar-satir th.ad-col,
html[data-tema="koyu"] table.yev tr.pazar-satir td{background:var(--card-alt)}
table.yev tr.bugun-satir th.ad-col,table.yev tr.bugun-satir td{
  box-shadow:inset 0 1px 0 var(--accent),inset 0 -1px 0 var(--accent)}
table.yev tr.bugun-satir th.ad-col .gun-no{color:var(--accent);font-weight:700}

/* ---- Sol sütundaki gün düğmesi ---- */
.gun-h .gun-dug{display:flex;align-items:baseline;gap:6px;width:100%;height:38px;
  padding:0 10px 0 14px;border:0;background:transparent;cursor:pointer;font:inherit;text-align:left}
.gun-h .gun-dug:hover{background:var(--accent-soft)}
.gun-h .gun-no{font-size:13px;font-weight:620;color:var(--text);font-variant-numeric:tabular-nums;min-width:18px}
.gun-h .gun-ad{font-size:10.5px;color:var(--text-3)}

/* ---- Üst başlık: gruplar (1. satır) ve kişiler (2. satır) ----
   Grup satırı sabit yükseklikte; kişi satırı tam altına yapışır. */
table.yev thead tr.grup-satir th{height:54px}
table.yev thead th.grup-h{text-align:left;background:var(--bg);vertical-align:middle;
  padding:6px 10px;border-bottom:1px solid var(--line-strong);z-index:5}
html[data-tema="koyu"] table.yev thead th.grup-h{background:var(--card-alt)}
table.yev thead th.grup-h .grup-tp{margin-left:auto;font-size:11.5px;font-weight:620;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
table.yev thead th.kisi-h{top:54px;z-index:4;vertical-align:top;padding:6px 5px 5px;
  min-width:112px;max-width:112px;height:52px}
.kisi-bas{display:flex;align-items:flex-start;gap:4px;min-width:0}
.kisi-bas .av{margin-top:1px}
.kisi-bas .p-ad{flex:1;min-width:0;font-size:11px;font-weight:560;text-align:left;
  line-height:1.25;color:var(--text);white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kisi-h .p-grup-dug{margin-top:-1px}
.kisi-h .p-ucret{margin-top:4px;justify-content:flex-start;gap:3px}
.kisi-h .pu-inp{width:58px;height:18px;font-size:9.5px;padding:0 11px 0 4px}
.kisi-h .pu-sonek{left:49px;font-size:9px}
.kisi-h .pu-rozet{font-size:8.5px;padding:0 3px}
/* ---- Gün hücresi: üstte tik, altında o günün tutarı ---- */
table.yev td.hc{min-width:58px;padding:0;vertical-align:top}
.yev-tik{display:block;width:100%;height:26px;padding:0;border:0;background:transparent;
  font:inherit;font-size:13px;font-weight:600;line-height:26px;text-align:center;
  font-variant-numeric:tabular-nums;color:var(--text);cursor:pointer;
  transition:background .1s ease}
.yev-tik:hover{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.yev-tik:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.yev-tik.dolu{background:var(--brand-50);color:var(--brand-600)}
html[data-tema="koyu"] .yev-tik.dolu{color:var(--brand-400)}
.yev-tik.farkli{background:var(--gold-50);color:var(--gold-600)}
html[data-tema="koyu"] .yev-tik.farkli{color:#D9A961}

/* tikin altındaki tutar — küçük, silik; tıklanınca düzenlenir */
.yev-ucret{display:block;width:100%;height:17px;padding:0 2px;margin:0 0 2px;border:0;
  background:transparent;font:inherit;font-size:9.5px;font-weight:560;line-height:17px;
  text-align:center;font-variant-numeric:tabular-nums;color:var(--text-3);
  cursor:pointer;border-radius:3px}
.yev-ucret:hover{background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-2)}
.yev-ucret:focus{outline:none;background:var(--card);color:var(--text);cursor:text;
  box-shadow:inset 0 0 0 2px var(--accent)}
.yev-ucret.bos{visibility:hidden}
.yev-ucret.bos:focus{visibility:visible}

/* Kişinin henüz işe başlamadığı günler: ücreti tanımsız, tik atılamaz.
   Çapraz tarama "burası kapalı" der; boş hücreyle karışmasın.
   Seçici table.yev td ile başlar: hücrelere `background` KISAYOLU uygulayan
   kurallar daha özgül ve tek başına .hc-yok yazınca taramayı siliyorlardı. */
table.yev td.hc.hc-yok{
  background-image:repeating-linear-gradient(135deg,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 4px,
    var(--line-strong) 4px, var(--line-strong) 5px)}
html[data-tema="koyu"] table.yev td.hc.hc-yok{opacity:.5}
table.yev td.hc.hc-yok .yev-tik{cursor:not-allowed;color:var(--text-3)}
table.yev td.hc.hc-yok .yev-tik:hover{background:var(--red-50);
  box-shadow:inset 0 0 0 1px var(--red-500)}

/* Otomatik kayıt durumu — kaydet düğmesinin solundaki kısa bilgi.
   Tik atılınca kayıt kendiliğinden düştüğü için kullanıcının "kaydoldu mu"
   sorusunu bakışta yanıtlaması gerekiyor. */
.oto-bilgi{font-size:11.5px;color:var(--text-3);white-space:nowrap;align-self:center}
.oto-bilgi[hidden]{display:none}
.oto-bilgi.hata{color:var(--red-600);white-space:normal;max-width:280px;line-height:1.35}
/* "Kayıtlı" hâli: düğme sönük ve pasif — basılacak bir şey yok */
#yev-kaydet.oto-kayitli{background:var(--brand-50);border:1px solid var(--brand-100);
  color:var(--brand-600);box-shadow:none;opacity:1;cursor:default}
#yev-kaydet.oto-kayitli::before{content:"✓";margin-right:6px;font-weight:700}

.ga-ayrac{display:inline-block;width:1px;height:18px;background:var(--line-strong);
  margin:0 10px;vertical-align:middle}

/* İşaretleme türü seçici */
.tik-mod{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line)}
html[data-tema="koyu"] .tik-mod{background:var(--card-alt)}
.tik-mod .tm-et{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);padding:0 7px 0 5px}
.tik-mod button{height:26px;padding:0 10px;border:0;border-radius:6px;background:transparent;
  font:inherit;font-size:11.5px;font-weight:560;color:var(--text-2);cursor:pointer;white-space:nowrap}
.tik-mod button:hover{color:var(--text);background:var(--card)}
.tik-mod button.on{background:var(--card);color:var(--accent);font-weight:640;box-shadow:var(--shadow)}

/* Satırdaki kişisel ücret kutusu */
.pu-inp{width:74px;height:20px;padding:0 14px 0 5px;text-align:right;
  border:1px solid transparent;border-radius:4px;background:transparent;
  font:inherit;font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.pu-inp:hover{border-color:var(--line);background:var(--card);color:var(--text-2)}
.pu-inp:focus{outline:none;border-color:var(--accent);background:var(--card);color:var(--text);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.pu-sonek{position:absolute;left:62px;font-size:9.5px;color:var(--ink-300);pointer-events:none}

/* Personel adı artık karta giden bağlantı */
a.p-ad{color:var(--text);text-decoration:none}
a.p-ad:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}


/* --- Personel kartı: ücret değişikliği şeridi --- */
.ucret-ekle-serit{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
html[data-tema="koyu"] .ucret-ekle-serit{background:var(--card-alt)}
.ucret-ekle-serit[hidden]{display:none}
.ue-et{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.ue-inp{height:32px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--card);font:inherit;font-size:12.5px;color:var(--text)}
.ue-inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ue-genis{flex:1;min-width:180px}
/* Ücret dönemleri şeridi — genişlik = süre, yükseklik = ücret */
.uc-serit-bd{padding-bottom:6px}
.uc-serit{display:flex;align-items:flex-end;gap:3px;height:132px}
.uc-dilim{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-width:0;height:100%;position:relative}
.uc-tutar{font-size:11.5px;font-weight:640;color:var(--text-2);font-variant-numeric:tabular-nums;
  margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.uc-cubuk{display:block;width:100%;border-radius:5px 5px 0 0;background:var(--brand-100);
  border:1px solid color-mix(in srgb,var(--brand-500) 30%,transparent);border-bottom:0;min-height:20px}
html[data-tema="koyu"] .uc-cubuk{background:color-mix(in srgb,var(--brand-500) 20%,transparent);
  border-color:color-mix(in srgb,var(--brand-500) 34%,transparent)}
.uc-dilim.son .uc-cubuk{background:var(--brand-500);border-color:var(--brand-600)}
.uc-dilim.son .uc-tutar{color:var(--brand-600)}
html[data-tema="koyu"] .uc-dilim.son .uc-tutar{color:var(--brand-400)}
.uc-tarih{font-size:10px;color:var(--text-3);margin-top:5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
tr.ug-suan td{background:var(--brand-50)}
html[data-tema="koyu"] tr.ug-suan td{background:color-mix(in srgb,var(--brand-500) 10%,transparent)}
.satir-sil{display:inline}

/* ---- Grup başlığı (üstte, sütunları kapsar) ---- */
.grup-bas{display:flex;align-items:center;gap:6px}
.grup-ad{display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  font-size:12.5px;font-weight:620;
  letter-spacing:-.008em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grup-ad .ico{color:var(--accent);flex:none}
.grup-kisi{flex:none;font-size:10.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* ad satırının altı: kişi sayısı + açıklama */
.grup-alt{display:flex;align-items:baseline;gap:7px;min-width:0;margin-top:1px}
.grup-alt .grup-not::before{content:"·";margin-right:6px;color:var(--ink-300)}
.grup-alt .grup-not.gizli::before{content:none}
/* grup satırındaki ⋯ menüsü */
.g-menu{flex:none;margin-left:2px}
.g-menu .p-grup-dug{opacity:.65}
.g-menu .p-grup-dug:hover{opacity:1}
.dd-menu button.tehlike{color:var(--red-600)}
.dd-menu button.tehlike .ico{color:var(--red-500)}
.dd-menu button.tehlike:hover{background:var(--red-50)}
/* grup açıklaması — ad satırının altında ince yazı */
.grup-not{display:block;font-size:10.5px;color:var(--text-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grup-not.gizli{display:none}
.ge-not{max-width:220px}
.ga-etiket{font-size:10.5px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--text-3);margin-right:9px}
.ga-ucret{position:relative;display:inline-flex;align-items:center;margin-right:8px}
.ga-inp{width:112px;height:28px;padding:0 42px 0 9px;text-align:right;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);
  font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text)}
.ga-inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ga-sonek{position:absolute;right:9px;font-size:10.5px;color:var(--ink-300);pointer-events:none}
/* menü içindeki ücret satırı */
.dd-menu .dd-satir{display:flex;align-items:center;gap:6px;padding:4px 10px 8px}
.dd-menu .dd-satir .ga-inp{width:104px;height:26px}


/* Günü işaretle penceresindeki seçenekler */
.gun-secim{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gun-secim button{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:13px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--card);cursor:pointer;font:inherit;color:var(--text-2)}
.gun-secim button:hover{border-color:var(--accent);color:var(--text)}
.gun-secim button b{font-size:19px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.gun-secim button span{font-size:11px;color:var(--text-3)}
.gun-secim button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.gun-secim button.on span{color:var(--accent)}

/* ---- Personel satırında ücret ---- */
.p-ad{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.p-ucret{position:relative;display:inline-flex;align-items:center;gap:5px;margin-top:2px}
.pu-rozet{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 5px;border-radius:3px;background:var(--gold-50);color:var(--gold-600)}
html[data-tema="koyu"] .pu-rozet{color:#C79E5C}
.pu-rozet.gizli{display:none}

/* ---- Takvimi yatay kaydırma ---- */
.yev-wrap{position:relative}
.yev-wrap::-webkit-scrollbar{height:11px}
.yev-wrap::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:8px;
  border:3px solid var(--card);background-clip:content-box}
html[data-tema="koyu"] .yev-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);background-clip:content-box}
/* kenarlarda daha fazla sütun olduğunu gösteren gölge */
.yev-wrap.kaydir-sag::after,.yev-wrap.kaydir-sol::before{
  content:"";position:sticky;top:0;display:block;width:22px;height:0;z-index:6;pointer-events:none}
.yev-wrap.kaydir-sag::after{float:right;height:100%;margin-left:-22px;
  background:linear-gradient(270deg,rgba(11,12,13,.10),transparent)}
.yev-wrap.kaydir-sol::before{float:left;height:100%;margin-right:-22px;
  background:linear-gradient(90deg,rgba(11,12,13,.10),transparent)}
.kaydir-grup{display:inline-flex;gap:2px}

/* bugünün sütunu */

/* ---- Yeni grup şeridi ---- */
.grup-ekle-serit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--accent-soft)}
/* hidden özniteliği sınıfın display'ini ezebilsin */
.grup-ekle-serit[hidden]{display:none}
.ge-etiket{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.075em;text-transform:uppercase;color:var(--accent)}
.ge-ad{height:30px;padding:0 10px;min-width:200px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--card);font:inherit;font-size:12.5px;color:var(--text)}
.ge-ad:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* Sınırı aşan ücret kutusu — kaydetmeye kadar beklemeden görünsün.
   Sunucu ve veritabanı da aynı sınırı uygular; bu yalnızca erken uyarı. */
.yev-ucret.hatali,.pu-inp.hatali,.ga-inp.hatali{
  border-color:var(--red-500)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red-500) 20%,transparent)!important;
  color:var(--red-600)}
/* Yeni kişi şeridi: grup seçimi, günlük ücret ve işe başlama */
.ge-sec,.ge-tarih{height:30px;padding:0 8px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--card);font:inherit;font-size:12.5px;color:var(--text)}
.ge-sec{min-width:132px}
.ge-tarih{min-width:136px}
.ge-sec:focus,.ge-tarih:focus,.ge-ucret:focus-within{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ge-ucret{display:inline-flex;align-items:center;height:30px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--card);overflow:hidden}
.ge-sayi{width:86px;height:28px;padding:0 8px;border:0;background:transparent;
  font:inherit;font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums}
.ge-sayi:focus{outline:none}
.ge-sonek{padding:0 8px 0 2px;font-size:11px;color:var(--text-3);white-space:nowrap}

/* ---- Düzenlenebilir grup adı ---- */
.grup-ad-inp{min-width:0;flex:1;width:100%;height:24px;padding:0 6px;
  border:1px solid transparent;border-radius:4px;background:transparent;
  font:inherit;font-size:12.5px;font-weight:620;letter-spacing:-.008em;color:var(--text)}
.grup-ad-inp:hover{border-color:var(--line-strong);background:var(--card)}
.grup-ad-inp:focus{outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---- Gün başlığı: güne özel katsayı ---- */
.gun-dug{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:2px 0;
  border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;border-radius:4px}
.gun-dug:hover{background:var(--accent-soft)}
.gun-no{font-size:12px;font-weight:640;line-height:1.15}
.gun-ad{font-size:9.5px;font-weight:500;opacity:.7;line-height:1.15}
.gun-kat{display:block;margin-top:1px;font-size:9px;font-weight:700;letter-spacing:.02em;
  padding:0 3px;border-radius:3px;background:var(--gold-500);color:#fff;line-height:1.4}
table.yev thead th.gun-mesai{background:var(--gold-50)}
html[data-tema="koyu"] table.yev thead th.gun-mesai{background:rgba(169,130,64,.16)}
/* ---- Toplu giriş paneli ----
   Aynı pencere gün / kişi / grup / herkes için kullanılır; bölümlerin
   sırası hep aynı: hangi günler → ne yazılsın → yevmiye. */
/* align-self olmazsa kutu .kp-ort'un yüksekliğine yayılır ve altta boşluk kalır */
.tp-kutu{width:min(520px,95vw);max-height:86vh;align-self:flex-start}
.tp-govde{padding:15px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.tp-bolum{display:flex;flex-direction:column;gap:8px}
.tp-bolum[hidden]{display:none}
.tp-et{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;
  letter-spacing:.085em;text-transform:uppercase;color:var(--text-3)}
.tp-et .ico{color:var(--ink-300)}

.tp-secim{display:flex;flex-wrap:wrap;gap:6px}
.tp-secim button{padding:6px 11px;border:1px solid var(--line-strong);border-radius:99px;
  background:var(--card);cursor:pointer;font:inherit;font-size:12.5px;color:var(--text-2)}
.tp-secim button:hover{border-color:var(--accent);color:var(--text)}
.tp-secim button.on{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent);font-weight:560}

.tp-aralik{display:flex;align-items:center;gap:8px;padding-top:2px}
.tp-aralik[hidden]{display:none}
.tp-aralik input{width:72px;height:30px;padding:0 9px;text-align:center;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--text)}
.tp-aralik input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* Değer düğmeleri beş tane; 2 sütun yerine sığdıkça yan yana */
#tp-deger{grid-template-columns:repeat(5,1fr);gap:6px}
#tp-deger button{padding:10px 4px;gap:2px}
#tp-deger button b{font-size:16px}
#tp-deger button span{font-size:10px}

.tp-ucret{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tp-ucret .ga-inp{width:130px;height:32px;font-size:13.5px}
.tp-ucret .ga-inp::placeholder{font-size:12px;color:var(--ink-300)}
#tp-ucret-vars[hidden]{display:none}

.tp-kalici{display:flex;align-items:flex-start;gap:8px;margin-top:9px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);
  cursor:pointer;font-size:12.5px;color:var(--text-2);line-height:1.45}
.tp-kalici[hidden]{display:none}
.tp-kalici:hover{border-color:var(--accent)}
.tp-kalici input{width:15px;height:15px;margin:2px 0 0;accent-color:var(--brand-600);flex:none}
.tp-kalici em{font-style:normal;color:var(--text-3)}
html[data-tema="koyu"] .tp-kalici{background:var(--card-alt)}

.tp-ft{align-items:center;background:var(--card-alt)}
.tp-onizleme{font-size:12.5px;font-weight:560;color:var(--accent);
  font-variant-numeric:tabular-nums;padding:0 4px}
.tp-onizleme.bos{color:var(--text-3);font-weight:450}

@media screen and (max-width:560px){
  #tp-deger{grid-template-columns:repeat(3,1fr)}
  .tp-onizleme{width:100%;order:3;padding-top:4px}
}

/* ---- Personel satırında grup taşıma ---- */
.p-grup{flex:none;position:relative}
.p-grup-dug{width:22px;height:22px;display:grid;place-items:center;border:0;cursor:pointer;
  background:transparent;color:var(--ink-300);border-radius:4px;opacity:0;transition:opacity .12s}
table.yev tbody tr:hover .p-grup-dug,.p-grup.acik .p-grup-dug{opacity:1}
.p-grup-dug:hover{background:var(--bg);color:var(--text-2)}
html[data-tema="koyu"] .p-grup-dug:hover{background:var(--card-alt)}
.p-grup .dd-menu{position:absolute;right:0;top:calc(100% + 4px);text-align:left;white-space:normal}
.p-grup .dd-menu button:disabled{opacity:.5;cursor:default}
.p-grup .dd-menu button:disabled .ico{color:var(--accent)}
@media screen and (hover:none){ .p-grup-dug{opacity:1} }

@media screen and (max-width:720px){
  .ga-inp{width:96px}
}


/* ==========================================================================
   GİRİŞ EKRANI — ortalanmış, sade
   ========================================================================== */
.giris{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.giris-ust{display:flex;align-items:center;gap:10px;padding:22px 26px;flex:none}
.giris-ust .mark{width:26px;height:26px}
.giris-ust b{display:block;font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.005em;line-height:1.3}
.giris-ust span{display:block;font-size:10.5px;color:var(--text-3);line-height:1.3}
.giris-ust .sag{margin-left:auto}

.giris-form{flex:1;display:grid;place-items:center;padding:12px 24px 40px}
.giris-kutu{width:100%;max-width:352px}
.giris-kutu h1{margin:0 0 5px;font-size:21px;font-weight:600;letter-spacing:-.026em}
.giris-kutu>p{margin:0 0 24px;font-size:13px;color:var(--text-3)}
.giris-kutu .field{margin-bottom:14px}
.giris-kutu .field input{height:38px;font-size:13.5px}
.giris-kutu .btn{width:100%;height:38px;font-size:13px;font-weight:520}
.pw-wrap{position:relative}
.pw-wrap .goz{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:0;border:0;
  color:var(--ink-300);cursor:pointer;padding:7px;border-radius:var(--r-sm);display:flex}
.pw-wrap .goz:hover{color:var(--text-2)}
.giris-satir{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px;font-size:12px}
.cb{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--text-2)}
.cb input{width:14px;height:14px;accent-color:var(--brand-600);margin:0}

.uyari-kutu{display:flex;gap:9px;padding:10px 12px;border-radius:var(--r-sm);font-size:12.2px;
  margin-bottom:16px;line-height:1.45}
.uyari-kutu.hata{background:var(--red-50);color:var(--red-600)}
.uyari-kutu.uyari{background:var(--gold-50);color:var(--gold-600)}
.uyari-kutu.bilgi{background:var(--ink-50);color:var(--text-2)}
html[data-tema="koyu"] .uyari-kutu.bilgi{background:rgba(255,255,255,.05)}
.uyari-kutu .ico{flex:none;margin-top:1px;opacity:.85}

.giris-ozet{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:26px;padding-top:18px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--text-3)}
.giris-ozet i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
.giris-ozet .ico{color:var(--ink-300)}

.demo-kutu{margin-top:16px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-size:11.8px;color:var(--text-3);line-height:1.75}
.demo-kutu b{color:var(--text-2);font-weight:600;letter-spacing:.02em}
.demo-kutu code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11.2px;
  color:var(--text);background:var(--bg);padding:1px 5px;border-radius:3px}
html[data-tema="koyu"] .demo-kutu code{background:var(--card-alt)}
.giris-alt{flex:none;padding:0 26px 22px;font-size:11px;color:var(--ink-300);
  display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.giris-alt b{font-weight:600;color:var(--text-3);letter-spacing:.01em}
.giris-alt-ayrac{width:3px;height:3px;border-radius:50%;background:var(--ink-200);flex:none}
.giris-ft{margin-top:20px;font-size:11px;color:var(--ink-300);display:flex;align-items:center;gap:6px;justify-content:center}

/* ==========================================================================
   KOMUT PALETİ
   ========================================================================== */
.kp-ort{position:fixed;inset:0;background:rgba(11,12,13,.3);z-index:130;
  display:none;padding-top:13vh;justify-content:center}
.kp-ort.acik{display:flex}
.kp{width:min(580px,92vw);max-height:62vh;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  animation:kpIn .2s cubic-bezier(.32,.72,0,1)}
@keyframes kpIn{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.kp-inp{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.kp-inp input{flex:1;border:0;background:0;font-size:14px;outline:none}
.kp-inp input::placeholder{color:var(--ink-300)}
.kp-inp .ico{color:var(--ink-300)}
.kp-liste{overflow-y:auto;padding:5px}
.kp-liste a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;color:var(--text-2)}
.kp-liste a .ico{color:var(--ink-300)}
.kp-liste a.on,.kp-liste a:hover{background:var(--bg);color:var(--text)}
html[data-tema="koyu"] .kp-liste a.on,html[data-tema="koyu"] .kp-liste a:hover{background:var(--card-alt)}
.kp-liste a.on .ico,.kp-liste a:hover .ico{color:var(--accent)}
.kp-liste a small{margin-left:auto;font-size:10.5px;color:var(--ink-300)}
.kp-bas{padding:8px 10px 4px;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-300)}

/* ==========================================================================
   KOYU TEMA DÜZELTMELERİ
   Açık temada "bir ton koyulaşan" yüzeyler koyu temada bir ton açılmalı.
   ========================================================================== */
html[data-tema="koyu"] .nav a:hover,
html[data-tema="koyu"] .nav a.on,
html[data-tema="koyu"] .usr:hover,
html[data-tema="koyu"] .side-search button,
html[data-tema="koyu"] .qb:hover,
html[data-tema="koyu"] .pg:hover,
html[data-tema="koyu"] .seg a:hover,
html[data-tema="koyu"] .seg button:hover,
html[data-tema="koyu"] .formul-kutu,
html[data-tema="koyu"] .field input[readonly],
html[data-tema="koyu"] .launch-lbl .lb-ico,
html[data-tema="koyu"] .tline-i .pt i{background:var(--card-alt)}
html[data-tema="koyu"] .side-search button{border-color:var(--line)}
html[data-tema="koyu"] .formul-kutu code{background:var(--card)}

/* ==========================================================================
   DUYARLI
   ========================================================================== */
@media screen and (max-width:1280px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-23,.g-32{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:1024px){
  :root{--side:0px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;width:260px;transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow-lg)}
  .side.acik{transform:none}
  .topbar .hamburger{display:inline-flex}
  .mini-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-kpi>div:nth-child(2n){border-right:0}
  .mini-kpi>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media screen and (max-width:720px){
  /* --- Kısa şeritler dar ekranda KAYMAZ, alt satıra iner ---
     Yatay kaydırma telefonda hem zor hem fark edilmiyor; oysa bu şeritler
     birkaç düğmeden ibaret, sarınca hepsi göz önünde kalıyor. */
  .subbar{height:auto;flex-wrap:wrap;overflow-x:visible;padding:7px 12px;row-gap:4px}
  .subbar .qb-lbl{width:100%;padding:0 0 2px}
  .seg{flex-wrap:wrap;overflow-x:visible;height:auto;row-gap:3px}
  .tabs{flex-wrap:wrap;overflow-x:visible}
  .launch-items{flex-wrap:wrap;overflow-x:visible}

  .content{padding:14px 12px 40px}
  .topbar{padding:0 10px;gap:6px}
  .topbar > .tb-sag > .chip,.topbar .tb-sep,.tb-title p{display:none}
  .tb-title h1{font-size:14.5px}
  .topbar .btn-ico{width:30px;height:30px}
  .kpi .spark{display:none}
  .kpi .val{font-size:22px}
  .page-head{gap:8px}
  .page-head .sag{width:100%}
  .page-head .sag .btn{flex:1}
  .card-hd{padding:12px 13px}
  .tik-mod .tm-et{display:none}
  .yev-wrap{max-height:none}
  .ga-ayrac{display:none}
  .subbar{padding:0 12px}
  .qb-lbl{display:none}
  .launch-row{flex-direction:column;gap:9px;padding:13px}
  .launch-lbl{width:100%;padding-top:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .launch-lbl>a{margin-top:0}
  .launch-items{padding-bottom:4px}
  .card-hd .sag{width:100%;margin-left:0}
  .card-bd{padding:13px}
  .profil-hd{padding:15px}
  .drawer{width:100vw}
  .g-4,.g-3,.g-2{grid-template-columns:minmax(0,1fr)}
  .form-grid>[class*="col-"]{grid-column:span 12}
  .profil-hd .bakiye{border-left:0;padding-left:0;text-align:left;width:100%;
    border-top:1px solid var(--line);padding-top:13px;margin-top:2px}
  .toolbar{padding:9px 12px}
  .search-inp input{min-width:0;width:100%}
  .search-inp{flex:1}
  .toast-yuva{right:10px;left:10px;bottom:10px}
  .toast{min-width:0}
  .giris-ust{padding:18px}
  .giris-form{padding:8px 18px 32px}

  /* --- Tablolar telefonda karta dönüşür: yatay kaydırma yok --- */
  .tbl-wrap{overflow-x:visible}
  table.tbl{display:block;font-size:13px}
  table.tbl thead{display:none}
  table.tbl tbody{display:block;padding:8px}
  table.tbl tbody tr{display:block;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);margin-bottom:8px;padding:2px 0}
  table.tbl tbody tr:hover{background:var(--card)}
  table.tbl tbody tr:last-child{margin-bottom:0}
  table.tbl tbody td,table.tbl tbody tr:last-child td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:right;
    height:auto;min-height:32px;padding:5px 12px;border-bottom:0;white-space:normal;
    color:var(--text)}
  table.tbl tbody td::before{
    content:attr(data-l);flex:none;text-align:left;font-size:10px;font-weight:600;
    letter-spacing:.07em;text-transform:uppercase;color:var(--ink-300)}
  table.tbl tbody td.eylem{justify-content:flex-end;border-top:1px solid var(--line);
    margin-top:3px;padding:7px 10px 4px}
  table.tbl tbody td.eylem::before{content:none}
  /* kart düzeninde "üzerine gelme" diye bir şey yok — eylemler hep görünür */
  table.tbl tbody td.eylem .row-actions{opacity:1;gap:4px}
  table.tbl tbody td.eylem .btn-sm{height:32px;min-width:32px}
  table.tbl tbody td .cari-cell{justify-content:flex-end}

  table.tbl tfoot{display:block;padding:0 8px 8px}
  table.tbl tfoot tr{display:block;background:var(--bg);border:1px solid var(--line-strong);
    border-radius:var(--r);padding:2px 0}
  table.tbl tfoot td,table.tbl tfoot td:first-child{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    height:auto;min-height:30px;padding:4px 12px;border:0;text-transform:none;
    letter-spacing:0;font-size:13px;color:var(--text)}
  table.tbl tfoot td::before{content:attr(data-l);flex:none;text-align:left;font-size:10px;
    font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
  table.tbl tfoot td:first-child::before{content:none}
  table.tbl tfoot td:first-child{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-3);border-bottom:1px solid var(--line-strong);margin-bottom:3px;padding-bottom:6px}
  table.tbl tfoot td.bos{display:none}
}

/* ==========================================================================
   YAZDIRMA
   Kağıt düzeninin tamamı assets/css/yazdir.css içindedir. Burada yalnızca
   ekranda gizli kalması gereken belge parçaları var.
   ========================================================================== */
.print-only{display:none}
.yaz-belge{display:none}
.yaz-son{display:none}

/* yardımcı */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-16{margin-bottom:16px}
.wrap{flex-wrap:wrap}
.f1{flex:1;min-width:0}