/* ============================================================
   odoerp — uygulama arayüzü tasarım sistemi
   Belgeler : design/UYGULAMA_ARAYUZU.md
   Marka    : design/odo/DESIGN_REFERENCE.md  (renkler oradan)
   Kullanım : <link rel="stylesheet" href="odo-arayuz.css">
   ============================================================ */
/* ============================================================
   odoerp — uygulama arayüzü tasarım sistemi
   Belgeler : design/UYGULAMA_ARAYUZU.md
   Marka    : design/odo/DESIGN_REFERENCE.md  (renkler oradan, değiştirilmez)

   TEMA: bütün nötrler ve durum zeminleri token üzerinden gelir. Koyu tema
   yalnızca [data-tema="koyu"] altında token'ları yeniden tanımlar; hiçbir
   bileşen kuralı temaya göre yazılmaz. Tek kaynak :root'tur.
   ============================================================ */

:root{
  /* --- marka: HER İKİ TEMADA AYNI --- */
  --brand-primary:#c03060; --brand-primary-dark:#8a2350; --brand-primary-light:#d65a82;
  --brand-purple:#603078; --brand-purple-dark:#4a2560;
  --brand-gradient:linear-gradient(135deg,#603078 0%,#c03060 100%);
  --brand-accent:#f0a830;
  --dark-bg:#160d1f; --dark-surface:#211530;

  /* --- nötrler: mor alt tonlu --- */
  --ink-900:#1b1220; --ink-700:#4a3d57; --ink-600:#6b5c78;
  --ink-500:#8b7d97; --ink-400:#b6aabf; --ink-300:#ded5e4; --ink-200:#ece5f0;
  --surface-50:#faf8fb; --surface-100:#f3eff6;
  --yuzey:#fff;              /* kart zemini — koyu temada koyulaşır */
  --white:#fff;              /* gerçek beyaz: rozet/düğme metni */

  /* --- durum --- */
  --ok:#1a7f5a;     --ok-bg:#e6f6ee;     --ok-kenar:#c3e8d6;
  --warn:#a8620a;   --warn-bg:#fdf2e2;   --warn-kenar:#f6dcb4;
  --danger:#b3243c; --danger-bg:#fdeaee; --danger-kenar:#f6c9d2;
  --info-bg:#f0ebf4;

  --font-heading:"Poppins","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-full:9999px;

  --shadow-xs:0 1px 2px rgba(27,18,32,.05);
  --shadow-sm:0 1px 3px rgba(27,18,32,.06),0 1px 2px rgba(27,18,32,.04);
  --shadow-md:0 4px 14px -3px rgba(96,48,120,.12),0 2px 6px -2px rgba(27,18,32,.06);
  --shadow-lg:0 18px 44px -18px rgba(96,48,120,.32),0 6px 16px -8px rgba(27,18,32,.10);
  --shadow-brand:0 8px 22px -8px rgba(192,48,96,.45);

  --container:1340px;
  --transition:200ms cubic-bezier(.4,0,.2,1);
  --sidebar-w:236px;
  --sidebar-dar:68px;
}

/* ============ KOYU TEMA ============
   Nötrler ters çevrilir ama ton korunur: gri değil, mor alt tonlu koyu.
   Durum zeminleri koyulaştırılır, metin renkleri açılır ki okunur kalsın. */
[data-tema="koyu"]{
  --ink-900:#f2ecf5; --ink-700:#cbbdd6; --ink-600:#a89ab5;
  --ink-500:#8b7d97; --ink-400:#6b5c78; --ink-300:#3f3350; --ink-200:#2e2438;
  --surface-50:#130c1a; --surface-100:#1d1428;
  --yuzey:#1a1222;

  --ok:#4ecfa0;     --ok-bg:#0f2a20;     --ok-kenar:#1c4a38;
  --warn:#e8a54a;   --warn-bg:#2e1f0c;   --warn-kenar:#4d3512;
  --danger:#f0748c; --danger-bg:#2d1119; --danger-kenar:#4d1d29;
  --info-bg:#221a2c;

  --shadow-xs:0 1px 2px rgba(0,0,0,.30);
  --shadow-sm:0 1px 3px rgba(0,0,0,.36),0 1px 2px rgba(0,0,0,.28);
  --shadow-md:0 4px 14px -3px rgba(0,0,0,.46),0 2px 6px -2px rgba(0,0,0,.32);
  --shadow-lg:0 18px 44px -18px rgba(0,0,0,.66),0 6px 16px -8px rgba(0,0,0,.40);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-family:var(--font-body);color:var(--ink-900);
  background:var(--surface-50);font-size:15px;line-height:1.6;
  display:flex;min-height:100vh;
  transition:background var(--transition),color var(--transition)}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;letter-spacing:-.02em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}
a{color:var(--brand-purple)}
[data-tema="koyu"] a{color:var(--brand-primary-light)}
.muted{color:var(--ink-600)} .small{font-size:.79rem}
.break{overflow-wrap:anywhere}

/* ============ KENAR ÇUBUĞU ============ */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:60;
  display:flex;flex-direction:column;color:#fff;
  background:linear-gradient(165deg,#160d1f 0%,#241634 55%,#301545 100%);
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:1px 0 24px rgba(27,18,32,.22);
  transition:width var(--transition),transform var(--transition)}
.shell{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;
  flex-direction:column;transition:margin-left var(--transition)}

/* logo SABİT — nav kayarken üstte kalır */
.side-ust{flex:0 0 auto;padding:1.1rem .85rem .9rem;display:flex;
  align-items:center;justify-content:space-between;gap:.5rem;
  border-bottom:1px solid rgba(255,255,255,.07)}
.brand{font-family:var(--font-heading);font-weight:700;font-size:1.3rem;color:#fff;
  text-decoration:none;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}
.brand span{background:linear-gradient(90deg,#d65a82,#f0a830);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.side-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#cdbdd8;width:30px;height:30px;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;flex:0 0 auto;transition:var(--transition)}
.side-btn:hover{background:rgba(255,255,255,.16);color:#fff}

/* yalnız NAV kayar */
.nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:.18rem;padding:.7rem .85rem;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.nav a,.nav .nav-ust{display:flex;align-items:center;gap:.7rem;color:#c5b3d1;
  text-decoration:none;font-weight:500;font-size:.875rem;padding:.6rem .7rem;
  border-radius:10px;transition:var(--transition);position:relative;
  background:none;border:0;width:100%;font-family:inherit;cursor:pointer;
  text-align:left}
.nav a:hover,.nav .nav-ust:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a.active{color:#fff;
  background:linear-gradient(100deg,rgba(96,48,120,.75),rgba(192,48,96,.42))}
.nav a.active::before{content:"";position:absolute;left:-.85rem;top:50%;
  transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;
  background:var(--brand-primary-light)}
.ic{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav-etiket{flex:1;white-space:nowrap;overflow:hidden}

/* --- alt menü --- */
.nav-grup{display:flex;flex-direction:column}
.nav-ok{width:13px;height:13px;flex:0 0 13px;opacity:.7;
  transition:transform var(--transition)}
.nav-grup[data-acik="1"] .nav-ok{transform:rotate(90deg)}
.nav-alt{display:none;flex-direction:column;gap:.1rem;margin:.15rem 0 .3rem 1.15rem;
  padding-left:1.55rem;border-left:1px solid rgba(255,255,255,.12)}
.nav-grup[data-acik="1"] .nav-alt{display:flex}
.nav-alt a{font-size:.82rem;padding:.42rem .6rem;color:#b3a1c0}
.nav-alt a.active{background:rgba(214,90,130,.20);color:#fff}
.nav-alt a.active::before{display:none}
.nav-rozet{margin-left:auto;background:var(--brand-primary);color:#fff;
  font-size:.62rem;font-weight:700;padding:.1rem .42rem;
  border-radius:var(--radius-full)}

/* kullanıcı SABİT — altta kalır */
.side-user{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.09);
  padding:.7rem .85rem .9rem}
.su-link{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;
  border-radius:10px;text-decoration:none;color:#c5b3d1;font-size:.83rem;
  transition:var(--transition)}
.su-link:hover{background:rgba(255,255,255,.08);color:#fff}
.avatar{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--brand-gradient);display:grid;place-items:center;
  font-size:.7rem;font-weight:700;color:#fff;font-family:var(--font-heading)}
.su-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role{padding:.12rem .45rem;border-radius:var(--radius-full);font-size:.58rem;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff;
  background:var(--brand-gradient);box-shadow:var(--shadow-brand)}
.su-cikis{display:flex;align-items:center;gap:.7rem;width:100%;background:transparent;
  border:0;color:#8f7d9c;font:inherit;font-size:.83rem;padding:.5rem .7rem;
  border-radius:10px;cursor:pointer;transition:var(--transition);text-align:left}
.su-cikis:hover{background:rgba(240,116,140,.14);color:#f0748c}

/* --- daraltılmış kenar çubuğu --- */
body.dar{--sidebar-w:var(--sidebar-dar)}
body.dar .nav-etiket,body.dar .su-ad,body.dar .role,
body.dar .su-cikis span,body.dar .nav-ok,body.dar .nav-rozet{display:none}
body.dar .nav-alt{display:none!important}
body.dar .side-ust{justify-content:center;padding:1.1rem .5rem .9rem}
body.dar .brand-uzun{display:none}
body.dar .nav,body.dar .side-user{padding-left:.5rem;padding-right:.5rem}
body.dar .nav a,body.dar .nav .nav-ust,body.dar .su-link,body.dar .su-cikis{
  justify-content:center;padding-left:.5rem;padding-right:.5rem}
body.dar .nav a.active::before{left:-.5rem}

/* ============ YERLEŞİM ============ */
.ust-cubuk{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  gap:1rem;padding:.7rem 2rem;background:var(--yuzey);
  border-bottom:1px solid var(--ink-200);backdrop-filter:blur(8px)}
.mobil-btn{display:none;background:var(--surface-100);border:1px solid var(--ink-300);
  color:var(--ink-700);width:34px;height:34px;border-radius:9px;cursor:pointer;
  place-items:center;flex:0 0 auto}
.kirinti{display:flex;align-items:center;gap:.4rem;font-size:.82rem;
  color:var(--ink-600);flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.kirinti a{text-decoration:none;color:var(--ink-600)}
.kirinti a:hover{color:var(--brand-primary)}
.kirinti .ayrac{opacity:.5}
.kirinti b{color:var(--ink-900);font-weight:600}
.ust-sag{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:2.25rem 2rem 4rem}
.sec{font-size:1.02rem;margin:2rem 0 .9rem;font-weight:600}
.sec:first-child{margin-top:0}
.head-row{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap}
.row-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;align-items:start}
@media(max-width:900px){.two,.cols{grid-template-columns:1fr}}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:var(--container);margin:auto auto 0;width:100%;padding:1.6rem 2rem;
  color:var(--ink-500);font-size:.76rem;border-top:1px solid var(--ink-200)}

/* ============ KART / İSTATİSTİK ============ */
.card{background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-sm)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem}
.grid .card{transition:var(--transition)}
.grid .card:hover{box-shadow:var(--shadow-md);border-color:var(--ink-300);
  transform:translateY(-1px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem;margin-bottom:1.75rem}
.stat{position:relative;background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);padding:1rem 1.15rem;box-shadow:var(--shadow-sm);
  overflow:hidden;transition:var(--transition)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand-gradient)}
.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat b{display:block;font-family:var(--font-heading);font-size:1.75rem;
  line-height:1.1;letter-spacing:-.03em}
.stat span{color:var(--ink-500);font-size:.77rem}
.stat-warn::before{background:linear-gradient(180deg,#f0a830,#a8620a)}
.egilim{font-size:.72rem;font-weight:600;display:inline-flex;align-items:center;gap:.15rem}
.egilim.artis{color:var(--ok)} .egilim.azalis{color:var(--danger)}

/* ============ ROZET / ÇİP ============ */
.badges{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.badge{background:var(--surface-100);color:var(--ink-700);padding:.2rem .58rem;
  border-radius:var(--radius-full);font-size:.71rem;font-weight:500;
  border:1px solid var(--ink-200);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-kenar)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-kenar)}
.badge.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-kenar)}
.badge.all{background:var(--brand-purple);color:#fff;border-color:var(--brand-purple)}
.crud{font-family:ui-monospace,monospace;letter-spacing:.16em;font-weight:700;
  background:var(--brand-gradient);color:#fff;padding:.22rem .65rem;
  border-radius:var(--radius-full);font-size:.72rem;box-shadow:var(--shadow-brand)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.chip{background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-full);padding:.28rem .8rem;font-size:.77rem;
  box-shadow:var(--shadow-xs);text-decoration:none;color:var(--ink-700);
  transition:var(--transition)}
a.chip:hover{border-color:var(--brand-primary-light);color:var(--brand-primary)}
a.chip.aktif{background:var(--brand-gradient);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-brand);font-weight:600}

/* ============ SEKMELİ PANEL ============ */
.sekmeler{display:flex;gap:.15rem;border-bottom:1px solid var(--ink-200);
  overflow-x:auto;scrollbar-width:none}
.sekmeler::-webkit-scrollbar{display:none}
.sekme{background:none;border:0;border-bottom:2px solid transparent;
  padding:.65rem 1rem;font:inherit;font-size:.87rem;font-weight:500;
  color:var(--ink-600);cursor:pointer;white-space:nowrap;
  transition:var(--transition);margin-bottom:-1px}
.sekme:hover{color:var(--ink-900)}
.sekme[aria-selected="true"]{color:var(--brand-primary);
  border-bottom-color:var(--brand-primary);font-weight:600}
.sekme-govde{padding-top:1.2rem}
.sekme-govde[hidden]{display:none}

/* ============ ADIM GÖSTERGESİ ============ */
/* Bağlantı çizgisi DAİRE MERKEZLERİ arasında gider ve metin dairenin
   ALTINDA durur. Önceki sürümde çizgi dairenin sağından öğenin sağ kenarına
   uzanıyordu; metin de orada başladığı için üstüne biniyordu. */
.adimlar{display:flex;align-items:flex-start;gap:0;margin:1.2rem 0 1.6rem;
  overflow-x:auto;scrollbar-width:none}
.adimlar::-webkit-scrollbar{display:none}
.adim{flex:1 1 0;min-width:110px;position:relative;padding:0 .35rem;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.adim:not(:last-child)::after{content:"";position:absolute;top:13px;
  left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;
  background:var(--ink-200);z-index:0}
.adim.tamam:not(:last-child)::after{background:var(--ok)}
.adim-no{width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;font-weight:700;
  background:var(--surface-100);color:var(--ink-500);
  border:2px solid var(--ink-300);position:relative;z-index:1;
  font-family:var(--font-heading);transition:var(--transition);
  margin-bottom:.45rem}
.adim.tamam .adim-no{background:var(--ok);border-color:var(--ok);color:#fff}
.adim.simdi .adim-no{background:var(--brand-gradient);border-color:transparent;
  color:#fff;box-shadow:var(--shadow-brand)}
.adim-metin{min-width:0;width:100%}
/* Başlık ve alt metin <span> olduğu için varsayılan olarak YAN YANA akar
   ("Tanımla Kaynak eklendi"). display:block ile alt alta gelirler. */
.adim-baslik{display:block;font-size:.83rem;font-weight:600;line-height:1.3}
.adim.bekliyor .adim-baslik{color:var(--ink-500);font-weight:500}
.adim-alt{display:block;font-size:.73rem;color:var(--ink-500);
  line-height:1.35;margin-top:.1rem}

/* ============ TABLO ============ */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--yuzey);
  border:1px solid var(--ink-200);border-radius:var(--radius-md);overflow:hidden;
  font-size:.84rem;box-shadow:var(--shadow-sm)}
.tbl th{background:var(--surface-100);text-align:left;padding:.65rem .85rem;
  font-weight:600;color:var(--ink-700);font-size:.78rem;
  border-bottom:1px solid var(--ink-200);white-space:nowrap}
.tbl td{padding:.62rem .85rem;border-top:1px solid var(--ink-200);vertical-align:top}
.tbl tbody tr:first-child td{border-top:0}
.tbl tbody tr{transition:background var(--transition)}
.tbl tbody tr:hover{background:var(--surface-50)}
.res{font-weight:600}
.res-ok .res{color:var(--ok)}
.res-denied .res{color:var(--warn)}
.res-error .res{color:var(--danger)}
.scroll-x{overflow-x:auto;max-width:100%;border-radius:var(--radius-md)}

/* ============ SAYFALAMA ============ */
.sayfalama{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:1.1rem;flex-wrap:wrap}
.sayfa-bilgi{font-size:.8rem;color:var(--ink-600)}
.sayfa-btnler{display:flex;gap:.25rem;align-items:center}
.sayfa-btn{min-width:34px;height:34px;padding:0 .55rem;border-radius:9px;
  border:1px solid var(--ink-200);background:var(--yuzey);color:var(--ink-700);
  font:inherit;font-size:.82rem;cursor:pointer;transition:var(--transition);
  display:grid;place-items:center}
.sayfa-btn:hover:not(:disabled):not(.aktif){border-color:var(--brand-primary-light);
  color:var(--brand-primary)}
.sayfa-btn.aktif{background:var(--brand-gradient);color:#fff;border-color:transparent;
  font-weight:600;box-shadow:var(--shadow-brand)}
.sayfa-btn:disabled{opacity:.4;cursor:not-allowed}
.sayfa-uc{color:var(--ink-400);padding:0 .2rem}

/* ============ FORM ============ */
label{display:block;margin-bottom:.95rem;font-size:.83rem;font-weight:500;
  color:var(--ink-700)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select,textarea{width:100%;margin-top:.32rem;padding:0 .75rem;height:42px;
  line-height:normal;border:1px solid var(--ink-300);border-radius:10px;
  font:inherit;font-size:.88rem;background:var(--yuzey);color:var(--ink-900);
  transition:var(--transition);-webkit-appearance:none;appearance:none}
select{padding-right:2.1rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238b7d97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center}
input[type=date]{cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.5;
  padding:.2rem;border-radius:5px;transition:var(--transition);
  filter:invert(28%) sepia(18%) saturate(900%) hue-rotate(240deg)}
[data-tema="koyu"] input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(80%) sepia(20%) saturate(600%) hue-rotate(240deg)}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;
  background:var(--surface-100)}
input[type=date]::-webkit-inner-spin-button{display:none}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
textarea{height:auto;min-height:76px;padding:.6rem .75rem;line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
input:hover:not(:disabled),select:hover,textarea:hover{border-color:var(--ink-400)}
input:focus,select:focus,textarea:focus{outline:none;
  border-color:var(--brand-primary-light);box-shadow:0 0 0 3px rgba(214,90,130,.16)}
input:disabled,textarea:disabled{background:var(--surface-100);
  color:var(--ink-500);cursor:not-allowed}
label small{display:block;color:var(--ink-500);font-weight:400;font-size:.74rem;
  margin-top:.28rem}
/* Firefox yer tutucuya varsayılan opaklık uygular; opacity:1 ile eşitliyoruz. */
::placeholder{color:var(--ink-400);opacity:1}
label.inline{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
label.inline input{width:auto;height:auto;margin:0;accent-color:var(--brand-primary)}
.filter-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:flex-end;
  margin-bottom:1.1rem}
.filter-row label{margin:0;flex:1 1 140px;display:flex;flex-direction:column;
  justify-content:flex-end}
.filter-row .btn-primary{padding:0 1.5rem;height:42px;flex:0 0 auto}
.actions{display:flex;gap:.75rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}

/* --- anahtar (switch) --- */
.anahtar{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  margin-bottom:.6rem;font-size:.85rem;color:var(--ink-700)}
.anahtar input{position:absolute;opacity:0;width:0;height:0}
.anahtar-kutu{width:38px;height:22px;flex:0 0 38px;border-radius:var(--radius-full);
  background:var(--ink-300);position:relative;transition:var(--transition)}
.anahtar-kutu::after{content:"";position:absolute;top:3px;left:3px;width:16px;
  height:16px;border-radius:50%;background:#fff;transition:var(--transition);
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.anahtar input:checked + .anahtar-kutu{background:var(--brand-gradient)}
.anahtar input:checked + .anahtar-kutu::after{transform:translateX(16px)}
.anahtar input:focus-visible + .anahtar-kutu{box-shadow:0 0 0 3px rgba(214,90,130,.25)}

/* ============ DÜĞMELER ============ */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.62rem 1.2rem;border:0;border-radius:var(--radius-full);
  background:var(--brand-gradient);color:#fff;font:inherit;font-size:.88rem;
  font-weight:600;cursor:pointer;transition:var(--transition);
  text-decoration:none;box-shadow:var(--shadow-brand)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-sm{padding:.42rem 1.05rem;font-size:.82rem}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--yuzey);border:1px solid var(--ink-300);color:var(--ink-700);
  padding:.4rem .95rem;border-radius:var(--radius-full);font:inherit;
  font-size:.81rem;font-weight:500;cursor:pointer;transition:var(--transition);
  text-decoration:none}
.btn-ghost:hover{background:var(--surface-100);border-color:var(--ink-400);
  color:var(--ink-900)}
.btn-danger{padding:.5rem 1.2rem;border:0;border-radius:var(--radius-full);
  background:var(--danger);color:#fff;font:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer;transition:var(--transition)}
[data-tema="koyu"] .btn-danger{color:#2d1119}
.btn-danger:hover{filter:brightness(1.08)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;
  filter:none!important}

/* ============ AÇILIR MENÜ ============ */
.acilir{position:relative;display:inline-block}
.acilir-govde{position:absolute;right:0;top:calc(100% + .35rem);z-index:50;
  min-width:190px;background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.35rem;
  display:none}
.acilir[data-acik="1"] .acilir-govde{display:block}
.acilir-govde a,.acilir-govde button{display:flex;align-items:center;gap:.55rem;
  width:100%;padding:.5rem .6rem;border-radius:8px;background:none;border:0;
  font:inherit;font-size:.83rem;color:var(--ink-700);text-align:left;
  cursor:pointer;text-decoration:none;transition:var(--transition)}
.acilir-govde a:hover,.acilir-govde button:hover{background:var(--surface-100);
  color:var(--ink-900)}
.acilir-govde .tehlikeli{color:var(--danger)}
.acilir-govde .tehlikeli:hover{background:var(--danger-bg)}
.acilir-ayrac{height:1px;background:var(--ink-200);margin:.3rem 0}

/* ============ MODAL ============ */
.modal-perde{position:fixed;inset:0;z-index:100;background:rgba(27,18,32,.55);
  backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;
  padding:1.5rem;animation:perde-ac 160ms ease-out}
.modal-perde[data-acik="1"]{display:flex}
@keyframes perde-ac{from{opacity:0}to{opacity:1}}
.modal{background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  animation:modal-ac 200ms cubic-bezier(.2,.9,.3,1)}
@keyframes modal-ac{from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}}
.modal-ust{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding:1.15rem 1.35rem .9rem;border-bottom:1px solid var(--ink-200)}
.modal-ust h3{font-size:1.02rem}
.modal-kapat{background:none;border:0;color:var(--ink-500);cursor:pointer;
  padding:.2rem;border-radius:6px;line-height:0;transition:var(--transition)}
.modal-kapat:hover{background:var(--surface-100);color:var(--ink-900)}
.modal-govde{padding:1.15rem 1.35rem;overflow-y:auto;flex:1}
.modal-alt{display:flex;justify-content:flex-end;gap:.6rem;padding:.9rem 1.35rem 1.15rem;
  border-top:1px solid var(--ink-200);flex-wrap:wrap}
.modal.tehlike .modal-ust{border-bottom-color:var(--danger-kenar)}
.modal-simge{width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  display:grid;place-items:center;background:var(--danger-bg);color:var(--danger)}

/* ============ BİLDİRİM YIĞINI (toast) ============ */
.bildirimler{position:fixed;right:1.2rem;top:1.2rem;z-index:120;
  display:flex;flex-direction:column;gap:.6rem;width:min(360px,calc(100vw - 2.4rem));
  pointer-events:none}
.bildirim{background:var(--yuzey);border:1px solid var(--ink-200);
  border-left:3px solid var(--ink-400);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:.75rem .9rem;display:flex;gap:.65rem;
  align-items:flex-start;pointer-events:auto;
  animation:bildirim-gir 240ms cubic-bezier(.2,.9,.3,1)}
@keyframes bildirim-gir{from{opacity:0;transform:translate(24px,-10px)}
  to{opacity:1;transform:none}}
.bildirim.cikis{animation:bildirim-cik 200ms ease-in forwards}
@keyframes bildirim-cik{to{opacity:0;transform:translateX(24px);
  margin-top:calc(-1 * var(--y,60px))}}
.bildirim.ok{border-left-color:var(--ok)}
.bildirim.warn{border-left-color:var(--warn)}
.bildirim.danger{border-left-color:var(--danger)}
.bildirim-simge{flex:0 0 18px;margin-top:.1rem}
.bildirim.ok .bildirim-simge{color:var(--ok)}
.bildirim.warn .bildirim-simge{color:var(--warn)}
.bildirim.danger .bildirim-simge{color:var(--danger)}
.bildirim-metin{flex:1;min-width:0;font-size:.84rem;line-height:1.45}
.bildirim-metin b{display:block;font-size:.86rem;margin-bottom:.1rem}
.bildirim-kapat{background:none;border:0;color:var(--ink-400);cursor:pointer;
  padding:0;line-height:0;flex:0 0 auto;transition:var(--transition)}
.bildirim-kapat:hover{color:var(--ink-900)}

/* ============ İLERLEME / YÜKLENİYOR ============ */
.ilerleme{height:8px;background:var(--surface-100);border-radius:var(--radius-full);
  overflow:hidden}
.ilerleme > div{height:100%;background:var(--brand-gradient);
  border-radius:var(--radius-full);transition:width 400ms cubic-bezier(.4,0,.2,1)}
.iskelet{background:linear-gradient(90deg,var(--surface-100) 25%,
  var(--ink-200) 37%,var(--surface-100) 63%);
  background-size:400% 100%;border-radius:var(--radius-sm);
  animation:iskelet 1.4s ease infinite}
@keyframes iskelet{0%{background-position:100% 50%}100%{background-position:0 50%}}
.iskelet-satir{height:12px;margin-bottom:.55rem}
.iskelet-satir:last-child{width:60%;margin-bottom:0}
.donen{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:don .7s linear infinite;
  display:inline-block}
@keyframes don{to{transform:rotate(360deg)}}

/* ============ İPUCU (tooltip) ============ */
.ipucu{position:relative;display:inline-flex;align-items:center}
.ipucu::after{content:attr(data-ipucu);position:absolute;bottom:calc(100% + 7px);
  left:50%;transform:translateX(-50%) translateY(3px);background:var(--dark-bg);
  color:#e9dff0;font-size:.74rem;font-weight:400;padding:.35rem .6rem;
  border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:var(--transition);z-index:70;box-shadow:var(--shadow-md)}
.ipucu:hover::after,.ipucu:focus-visible::after{opacity:1;transform:translateX(-50%)}

/* ============ UYARI / BOŞ DURUM / KOD ============ */
.alert{padding:.7rem 1rem;border-radius:var(--radius-md);margin-bottom:1.1rem;
  font-size:.86rem;border:1px solid transparent}
.alert-error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-kenar)}
.alert-success{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-kenar)}
.alert-info{background:var(--info-bg);color:var(--brand-purple);border-color:var(--ink-300)}
[data-tema="koyu"] .alert-info{color:var(--brand-primary-light)}
.empty{background:var(--yuzey);border:1px dashed var(--ink-300);
  border-radius:var(--radius-lg);padding:2.75rem 1.5rem;text-align:center;margin:1rem 0}
.empty p{color:var(--ink-600);font-size:.87rem;max-width:540px;margin:0 auto 1.2rem}
.empty-icon{font-size:2.1rem;line-height:1;margin-bottom:.7rem;
  background:var(--brand-gradient);-webkit-background-clip:text;
  background-clip:text;color:transparent;opacity:.75}
.copy-box{position:relative;margin:.6rem 0}
.copy-box pre{background:var(--dark-bg);color:#e9dff0;padding:1rem 3.6rem 1rem 1.1rem;
  border-radius:var(--radius-md);overflow-x:auto;font-size:.79rem;line-height:1.6;
  margin:0;border:1px solid rgba(255,255,255,.07);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.copy-btn{position:absolute;top:.6rem;right:.6rem;background:rgba(255,255,255,.1);
  color:#e9dff0;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);
  padding:.3rem .72rem;font:inherit;font-size:.73rem;cursor:pointer;
  transition:var(--transition)}
.copy-btn:hover{background:var(--brand-purple);border-color:var(--brand-purple)}
.copy-btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.3rem;margin:0;font-size:.86rem}
.kv dt{color:var(--ink-500)} .kv dd{margin:0}
.ornek-not{border-left:3px solid var(--brand-accent);background:var(--warn-bg);
  padding:.7rem 1rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.82rem;color:var(--ink-700);margin:.8rem 0}


/* ============ KOMUT PALETİ (⌘K) ============ */
.komut-perde{position:fixed;inset:0;z-index:130;background:rgba(27,18,32,.5);
  backdrop-filter:blur(3px);display:none;align-items:flex-start;
  justify-content:center;padding:12vh 1.5rem 1.5rem}
.komut-perde[data-acik="1"]{display:flex}
.komut{width:min(580px,100%);background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  animation:modal-ac 180ms cubic-bezier(.2,.9,.3,1)}
.komut-ust{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;
  border-bottom:1px solid var(--ink-200)}
.komut-ust svg{flex:0 0 18px;color:var(--ink-500)}
.komut-giris{flex:1;border:0!important;background:none!important;height:auto!important;
  padding:0!important;margin:0!important;font-size:1rem!important;
  color:var(--ink-900);box-shadow:none!important}
.komut-giris:focus{outline:none;box-shadow:none!important}
.komut-liste{max-height:44vh;overflow-y:auto;padding:.4rem}
.komut-grup{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-500);padding:.6rem .7rem .3rem;font-weight:600}
.komut-oge{display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .7rem;
  border-radius:9px;background:none;border:0;font:inherit;font-size:.87rem;
  color:var(--ink-700);text-align:left;cursor:pointer;transition:var(--transition)}
.komut-oge:hover{background:var(--surface-100)}
.komut-oge[aria-selected="true"]{background:var(--brand-gradient);color:#fff}
.komut-oge[aria-selected="true"] .komut-alt,
.komut-oge[aria-selected="true"] .kbd{color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.3)}
.komut-oge .ic{opacity:.7}
.komut-metin{flex:1;min-width:0}
.komut-alt{display:block;font-size:.74rem;color:var(--ink-500)}
.komut-alt-bos{padding:2rem 1rem;text-align:center;color:var(--ink-500);font-size:.86rem}
.komut-taban{display:flex;gap:1rem;padding:.55rem 1.1rem;border-top:1px solid var(--ink-200);
  font-size:.72rem;color:var(--ink-500);flex-wrap:wrap}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .35rem;
  border:1px solid var(--ink-300);border-bottom-width:2px;border-radius:5px;
  background:var(--surface-100);font-family:ui-monospace,monospace;font-size:.7rem;
  color:var(--ink-600)}

/* ============ ÇEKMECE (drawer) ============ */
.cekmece{position:fixed;right:0;top:0;bottom:0;width:min(440px,100%);z-index:95;
  background:var(--yuzey);border-left:1px solid var(--ink-200);
  box-shadow:var(--shadow-lg);transform:translateX(100%);
  transition:transform var(--transition);display:flex;flex-direction:column}
.cekmece[data-acik="1"]{transform:none}
.cekmece-ust{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding:1.15rem 1.35rem .9rem;border-bottom:1px solid var(--ink-200)}
.cekmece-govde{padding:1.15rem 1.35rem;overflow-y:auto;flex:1}
.cekmece-alt{display:flex;justify-content:flex-end;gap:.6rem;
  padding:.9rem 1.35rem 1.15rem;border-top:1px solid var(--ink-200)}
body.cekmece-acik .perde{display:block;z-index:90}

/* ============ TABLO: SIRALAMA, TOPLU SEÇİM, SATIR İÇİ DÜZENLEME ============ */
.tbl th[data-sirala]{cursor:pointer;user-select:none;position:relative;
  padding-right:1.5rem}
.tbl th[data-sirala]:hover{color:var(--brand-primary)}
.tbl th[data-sirala]::after{content:"↕";position:absolute;right:.6rem;opacity:.3;
  font-size:.9em}
.tbl th[data-yon="asc"]::after{content:"↑";opacity:1;color:var(--brand-primary)}
.tbl th[data-yon="desc"]::after{content:"↓";opacity:1;color:var(--brand-primary)}
.tbl td.sec-h,.tbl th.sec-h{width:36px;padding-right:0}
.tbl tr.secili{background:var(--info-bg)!important}

.toplu-cubuk{display:none;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--brand-gradient);color:#fff;padding:.6rem 1rem;
  border-radius:var(--radius-md);margin-bottom:.8rem;box-shadow:var(--shadow-brand);
  animation:toplu-gir 200ms cubic-bezier(.2,.9,.3,1)}
@keyframes toplu-gir{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.toplu-cubuk[data-acik="1"]{display:flex}
.toplu-sayi{font-weight:600;font-size:.87rem;flex:1}
.toplu-cubuk button{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;padding:.35rem .85rem;border-radius:var(--radius-full);font:inherit;
  font-size:.8rem;cursor:pointer;transition:var(--transition)}
.toplu-cubuk button:hover{background:rgba(255,255,255,.28)}
.toplu-cubuk button.tehlikeli{background:rgba(0,0,0,.22);border-color:rgba(0,0,0,.3)}

/* satır içi düzenleme */
.duz{cursor:text;border-radius:6px;padding:.1rem .3rem;margin:-.1rem -.3rem;
  display:inline-block;min-width:40px;transition:var(--transition);position:relative}
.duz:hover{background:var(--surface-100);box-shadow:0 0 0 1px var(--ink-300)}
.duz:hover::after{content:"✎";position:absolute;right:-1.05rem;top:0;
  font-size:.72rem;opacity:.5}
.duz-giris{border:1px solid var(--brand-primary-light)!important;
  border-radius:6px!important;height:28px!important;padding:0 .4rem!important;
  margin:0!important;font-size:.84rem!important;width:100%!important;
  box-shadow:0 0 0 3px rgba(214,90,130,.16)!important}
.duz-kaydedildi{animation:duz-parla 900ms ease-out}
@keyframes duz-parla{0%{background:var(--ok-bg)}100%{background:transparent}}

/* ============ KANBAN ============ */
.kanban{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.6rem;
  scrollbar-width:thin}
.kanban-sutun{flex:0 0 280px;background:var(--surface-100);
  border:1px solid var(--ink-200);border-radius:var(--radius-md);
  display:flex;flex-direction:column;max-height:520px;transition:var(--transition)}
.kanban-sutun.hedef{border-color:var(--brand-primary-light);
  box-shadow:0 0 0 3px rgba(214,90,130,.14)}
.kanban-ust{display:flex;align-items:center;gap:.5rem;padding:.75rem .85rem;
  border-bottom:1px solid var(--ink-200)}
.kanban-nokta{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.kanban-baslik{font-size:.83rem;font-weight:600;flex:1}
.kanban-sayi{background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-full);padding:.05rem .45rem;font-size:.7rem;
  color:var(--ink-600);font-weight:600}
.kanban-govde{padding:.6rem;display:flex;flex-direction:column;gap:.55rem;
  overflow-y:auto;flex:1;min-height:60px}
.kanban-kart{background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);padding:.7rem .8rem;box-shadow:var(--shadow-xs);
  cursor:grab;transition:var(--transition)}
.kanban-kart:hover{box-shadow:var(--shadow-md);border-color:var(--ink-300);
  transform:translateY(-1px)}
.kanban-kart:active{cursor:grabbing}
.kanban-kart.suruklenen{opacity:.35;transform:rotate(1.5deg)}
.kanban-kart h4{font-size:.85rem;margin-bottom:.3rem;line-height:1.35}
.kanban-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin-top:.55rem;font-size:.72rem;color:var(--ink-500)}
.kanban-ekle{background:none;border:1px dashed var(--ink-300);color:var(--ink-500);
  border-radius:var(--radius-sm);padding:.45rem;font:inherit;font-size:.8rem;
  cursor:pointer;margin:0 .6rem .6rem;transition:var(--transition)}
.kanban-ekle:hover{border-color:var(--brand-primary-light);color:var(--brand-primary)}

/* ============ ZAMAN ÇİZELGESİ ============ */
.zaman{position:relative;padding-left:1.6rem}
.zaman::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
  background:var(--ink-200)}
.zaman-oge{position:relative;padding-bottom:1.1rem}
.zaman-oge:last-child{padding-bottom:0}
.zaman-nokta{position:absolute;left:-1.6rem;top:4px;width:14px;height:14px;
  border-radius:50%;background:var(--yuzey);border:2px solid var(--ink-300);
  z-index:1}
.zaman-oge.ok .zaman-nokta{border-color:var(--ok);background:var(--ok)}
.zaman-oge.warn .zaman-nokta{border-color:var(--warn);background:var(--warn)}
.zaman-oge.danger .zaman-nokta{border-color:var(--danger);background:var(--danger)}
.zaman-baslik{font-size:.85rem;font-weight:500}
.zaman-alt{font-size:.75rem;color:var(--ink-500)}

/* ============ FİLTRE ÇEKMECESİ EK ============ */
.filtre-grup{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--ink-200)}
.filtre-grup:last-child{border-bottom:0;margin-bottom:0}
.filtre-baslik{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-500);font-weight:600;margin-bottom:.6rem}
.filtre-sayac{background:var(--brand-primary);color:#fff;border-radius:var(--radius-full);
  padding:.05rem .4rem;font-size:.68rem;font-weight:700;margin-left:.35rem}

/* ============ MOBİL ============ */
.perde{position:fixed;inset:0;background:rgba(27,18,32,.5);z-index:55;display:none}
body.menu-acik .perde{display:block}

@media(max-width:860px){
  body{display:block}
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w);box-shadow:none}
  body.menu-acik .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  body.dar .sidebar{width:var(--sidebar-w)}      /* mobilde daraltma yok */
  body.dar .nav-etiket,body.dar .su-ad,body.dar .role,
  body.dar .su-cikis span,body.dar .nav-ok{display:flex}
  body.dar .nav a,body.dar .nav .nav-ust,body.dar .su-link,body.dar .su-cikis{
    justify-content:flex-start;padding-left:.7rem;padding-right:.7rem}
  .shell{margin-left:0}
  .mobil-btn{display:grid}
  .side-btn{display:none}
  .ust-cubuk,.wrap,.foot{padding-left:1rem;padding-right:1rem}
  .tbl{display:block;overflow-x:auto;max-width:100%}
  .filter-row label{flex:1 1 100%}
  .filter-row .btn-primary{width:100%}
  .head-row{flex-direction:column;align-items:stretch}
  .adim{min-width:130px}
  .bildirimler{right:.7rem;left:.7rem;top:.7rem;width:auto}
  .modal-alt{flex-direction:column-reverse}
  .modal-alt > *{width:100%}
  .cekmece{width:100%}
  .komut-perde{padding:6vh .8rem .8rem}
  .kanban-sutun{flex-basis:250px}
  .toplu-cubuk{flex-direction:column;align-items:stretch}
  .toplu-sayi{text-align:center}
}

/* ============================================================
   EK BİLEŞENLER
   ============================================================ */

/* ============ GRAFİK ============
   Seri renkleri MARKADAN türetilir; varsayılan kütüphane paletleri
   (mavi-turuncu) arayüzle çakışır. Eksen ve ızgara nötr token'lardan gelir,
   böylece koyu temada kendiliğinden uyar. */
:root{
  --seri-1:#c03060; --seri-2:#603078; --seri-3:#f0a830;
  --seri-4:#d65a82; --seri-5:#4a2560; --seri-6:#1a7f5a;
  --izgara:var(--ink-200); --eksen:var(--ink-500);
}
[data-tema="koyu"]{
  --seri-1:#e0567f; --seri-2:#9b6bb8; --seri-3:#f0b45a;
  --seri-4:#f08cab; --seri-5:#7a52a0; --seri-6:#4ecfa0;
}
.grafik{width:100%;height:auto;overflow:visible;font-family:var(--font-body)}
.grafik .izgara{stroke:var(--izgara);stroke-width:1}
.grafik .eksen-metin{fill:var(--eksen);font-size:10px}
.grafik .cizgi{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.grafik .alan{opacity:.14}
.grafik .cubuk{rx:3}
.grafik .nokta{stroke:var(--yuzey);stroke-width:2}
.sparkline{width:100%;height:32px;display:block}
.sparkline path{fill:none;stroke:var(--brand-primary);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sparkline .alan{fill:var(--brand-primary);opacity:.12;stroke:none}
.grafik-aciklama{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.8rem;
  font-size:.78rem;color:var(--ink-600)}
.grafik-aciklama span{display:inline-flex;align-items:center;gap:.4rem}
.grafik-aciklama i{width:10px;height:10px;border-radius:3px;display:inline-block}
.halka-metin{fill:var(--ink-900);font-family:var(--font-heading);
  font-weight:700;text-anchor:middle}
.halka-alt{fill:var(--ink-500);font-size:10px;text-anchor:middle}

/* ============ HATA SAYFALARI ============ */
.hata-sayfa{min-height:60vh;display:grid;place-items:center;text-align:center;
  padding:2rem 1rem}
.hata-kod{font-family:var(--font-heading);font-size:5rem;line-height:1;
  letter-spacing:-.05em;background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hata-kod.sessiz{background:none;color:var(--ink-300);-webkit-text-fill-color:currentColor}
.hata-baslik{font-size:1.25rem;margin:.5rem 0 .4rem}
.hata-metin{color:var(--ink-600);font-size:.9rem;max-width:460px;margin:0 auto 1.5rem}
.hata-kimlik{font-family:ui-monospace,monospace;font-size:.75rem;
  background:var(--surface-100);border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);padding:.3rem .6rem;display:inline-block;
  margin-bottom:1.2rem;color:var(--ink-600)}

/* ============ VERİ YOĞUN TABLO: SABİT BAŞLIK / SÜTUN ============ */
.tbl-sabit{max-height:420px;overflow:auto;border:1px solid var(--ink-200);
  border-radius:var(--radius-md);background:var(--yuzey)}
.tbl-sabit .tbl{border:0;border-radius:0;box-shadow:none;margin:0}
.tbl-sabit thead th{position:sticky;top:0;z-index:2;
  box-shadow:inset 0 -1px 0 var(--ink-200)}
/* İlk sütunu sabitlemek: z-index sırası önemli — köşe hücresi en üstte */
.tbl-sabit td:first-child,.tbl-sabit th:first-child{position:sticky;left:0;
  background:var(--yuzey);z-index:1}
.tbl-sabit thead th:first-child{z-index:3;background:var(--surface-100)}
.tbl-sabit tbody tr:hover td:first-child{background:var(--surface-50)}
.tbl-sabit td:first-child::after{content:"";position:absolute;top:0;bottom:0;
  right:0;width:1px;background:var(--ink-200)}

/* ============ BİLDİRİM MERKEZİ ============ */
.zil{position:relative}
.zil-sayac{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;
  padding:0 .2rem;border-radius:var(--radius-full);background:var(--danger);
  color:#fff;font-size:.62rem;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--yuzey)}
[data-tema="koyu"] .zil-sayac{color:#2d1119}
.merkez{width:min(360px,calc(100vw - 2rem));max-height:70vh;padding:0;
  display:flex;flex-direction:column}
.merkez-ust{display:flex;align-items:center;justify-content:space-between;
  padding:.75rem .9rem;border-bottom:1px solid var(--ink-200)}
.merkez-ust h4{font-size:.9rem}
.merkez-liste{overflow-y:auto;flex:1;padding:.3rem}
.merkez-oge{display:flex;gap:.65rem;padding:.65rem;border-radius:9px;
  transition:var(--transition);cursor:pointer;position:relative}
.merkez-oge:hover{background:var(--surface-100)}
.merkez-oge.okunmamis{background:var(--info-bg)}
.merkez-oge.okunmamis::before{content:"";position:absolute;left:.2rem;top:50%;
  transform:translateY(-50%);width:5px;height:5px;border-radius:50%;
  background:var(--brand-primary)}
.merkez-nokta{width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  display:grid;place-items:center;background:var(--surface-100)}
.merkez-oge.ok .merkez-nokta{background:var(--ok-bg);color:var(--ok)}
.merkez-oge.warn .merkez-nokta{background:var(--warn-bg);color:var(--warn)}
.merkez-oge.danger .merkez-nokta{background:var(--danger-bg);color:var(--danger)}
.merkez-metin{flex:1;min-width:0;font-size:.83rem;line-height:1.45}
.merkez-metin b{display:block;font-size:.84rem}
.merkez-zaman{display:block;font-size:.72rem;color:var(--ink-500);
  margin-top:.15rem}
.merkez-alt{padding:.55rem .9rem;border-top:1px solid var(--ink-200);text-align:center}
.merkez-alt a{font-size:.8rem;text-decoration:none}

/* ============ DOSYA BIRAKMA ============ */
.birak{border:2px dashed var(--ink-300);border-radius:var(--radius-md);
  padding:2rem 1.2rem;text-align:center;transition:var(--transition);
  background:var(--surface-50);cursor:pointer}
.birak:hover{border-color:var(--ink-400)}
.birak.uzerinde{border-color:var(--brand-primary);background:var(--info-bg);
  transform:scale(1.008)}
.birak-simge{font-size:1.8rem;margin-bottom:.4rem;background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.8}
.birak input[type=file]{display:none}
.dosya-liste{display:flex;flex-direction:column;gap:.45rem;margin-top:.8rem}
.dosya{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;
  background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);font-size:.82rem}
.dosya-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dosya-boyut{color:var(--ink-500);font-size:.75rem;flex:0 0 auto}

/* ============ ETİKET GİRİŞİ ============ */
.etiket-kutu{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
  min-height:42px;padding:.3rem .5rem;margin-top:.32rem;
  border:1px solid var(--ink-300);border-radius:10px;background:var(--yuzey);
  transition:var(--transition);cursor:text}
.etiket-kutu:focus-within{border-color:var(--brand-primary-light);
  box-shadow:0 0 0 3px rgba(214,90,130,.16)}
.etiket{display:inline-flex;align-items:center;gap:.3rem;background:var(--info-bg);
  color:var(--brand-purple);border:1px solid var(--ink-200);
  border-radius:var(--radius-full);padding:.15rem .3rem .15rem .6rem;
  font-size:.78rem;font-weight:500}
[data-tema="koyu"] .etiket{color:var(--brand-primary-light)}
.etiket button{background:none;border:0;color:inherit;cursor:pointer;padding:0;
  opacity:.6;line-height:0;border-radius:50%;transition:var(--transition)}
.etiket button:hover{opacity:1}
.etiket-giris{flex:1;min-width:90px;border:0!important;background:none!important;
  height:26px!important;padding:0 .2rem!important;margin:0!important;
  font-size:.84rem!important;box-shadow:none!important}
.etiket-giris:focus{outline:none;box-shadow:none!important}

/* ============ ARAMA VURGULAMA ============ */
mark,.vurgu{background:rgba(240,168,48,.32);color:inherit;border-radius:3px;
  padding:0 .1em;font-weight:600}
[data-tema="koyu"] mark,[data-tema="koyu"] .vurgu{background:rgba(240,168,48,.26)}


/* ============================================================
   GİRİŞ EKRANI
   Kenar çubuğu ve üst çubuk olmayan tek sayfalık düzen.
   ============================================================ */
.giris-govde{display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:1.5rem;background:var(--dark-bg);
  background-image:
    radial-gradient(ellipse at 18% 15%,rgba(96,48,120,.62),transparent 58%),
    radial-gradient(ellipse at 82% 78%,rgba(192,48,96,.42),transparent 55%),
    radial-gradient(ellipse at 55% 50%,rgba(240,168,48,.07),transparent 60%)}
.giris-kart{width:min(420px,100%);background:var(--yuzey);
  border-radius:var(--radius-lg);padding:2.2rem;
  box-shadow:0 34px 80px -28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  animation:kart-gir 320ms cubic-bezier(.2,.9,.3,1)}
@keyframes kart-gir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.giris-marka{font-family:var(--font-heading);font-weight:700;font-size:2rem;
  text-align:center;letter-spacing:-.035em;color:var(--ink-900)}
.giris-marka span{background:var(--brand-gradient);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.giris-alt{text-align:center;color:var(--ink-500);font-size:.83rem;margin:.25rem 0 1.7rem}
.giris-not{font-size:.73rem;color:var(--ink-500);text-align:center;
  margin:1.3rem 0 0;line-height:1.6}
.giris-ayrac{display:flex;align-items:center;gap:.8rem;margin:1.3rem 0;
  color:var(--ink-400);font-size:.75rem}
.giris-ayrac::before,.giris-ayrac::after{content:"";flex:1;height:1px;
  background:var(--ink-200)}
.giris-satir{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin:-.35rem 0 1.2rem}
.giris-satir label{margin:0;display:flex;align-items:center;gap:.5rem;font-weight:400}
.giris-satir input[type=checkbox]{width:auto;height:auto;margin:0;
  accent-color:var(--brand-primary)}
.giris-satir a{font-size:.8rem;text-decoration:none}
.giris-satir a:hover{text-decoration:underline}
.giris-kart .btn-primary{width:100%;padding:.7rem 1.2rem;font-size:.9rem}

/* --- parola göster/gizle ---
   Sarmalayıcı BLOK olmalı: <span> varsayılan olarak inline'dır ve inline
   kutunun yüksekliği satır kutusuna göre belirlenir, içindeki input'a göre
   değil — mutlak konumlanan düğme yanlış referans alır.
   Ayrıca sihirli sayı yerine top:50% + translateY kullanılır; input
   yüksekliği değişse de düğme ortalı kalır. */
.parola-sar{position:relative;display:block;margin-top:.32rem}
.parola-sar input{margin-top:0!important;padding-right:2.8rem}
.goz{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  width:34px;height:34px;background:none;border:0;color:var(--ink-500);
  cursor:pointer;border-radius:8px;display:grid;place-items:center;
  transition:var(--transition);padding:0}
.goz:hover{background:var(--surface-100);color:var(--ink-900)}
.goz:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(214,90,130,.22)}

.tema-btn{position:fixed;top:1.1rem;right:1.1rem;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);color:#e9dff0;width:36px;height:36px;
  border-radius:10px;cursor:pointer;display:grid;place-items:center;
  transition:var(--transition);z-index:10}
.tema-btn:hover{background:rgba(255,255,255,.18)}

@media(max-width:420px){
  .giris-govde{padding:1rem}
  .giris-kart{padding:1.6rem}
  .giris-marka{font-size:1.7rem}
}

/* ============================================================
   YAZDIRMA
   ERP işinde rapor yazdırılır ve bu neredeyse hep unutulur.
   Ekran kromu çıkar, kenarlıklar netleşir, zeminler beyaza döner.
   ============================================================ */
@media print{
  @page{margin:14mm}
  :root{--yuzey:#fff;--surface-50:#fff;--surface-100:#fff;
    --ink-900:#000;--ink-700:#222;--ink-600:#444;--ink-200:#999;--ink-300:#777}
  html[data-tema]{--yuzey:#fff!important;--surface-50:#fff!important}
  body{display:block;background:#fff;color:#000;font-size:11pt}

  /* ekran kromu yazdırılmaz */
  .sidebar,.ust-cubuk,.foot,.perde,.bildirimler,.komut-perde,.cekmece,
  .modal-perde,.toplu-cubuk,.sayfalama,.kanban-ekle,.copy-btn,.side-btn,
  .mobil-btn,.filter-row,.actions,.row-actions,.chips,.sekmeler,
  .tema-btn,.goz{display:none!important}
  .shell{margin-left:0!important}
  .wrap{max-width:none;padding:0}

  /* sekme gövdeleri yazdırmada HEPSİ görünür — kâğıtta sekme olmaz */
  .sekme-govde[hidden]{display:block!important}
  .sekme-govde{page-break-inside:avoid;border-top:1px solid #999;
    margin-top:.6rem;padding-top:.6rem}

  .card,.stat,.tbl{box-shadow:none!important;border:1px solid #999!important;
    break-inside:avoid}
  .stat::before{display:none}
  .tbl{font-size:9.5pt}
  .tbl th{background:#eee!important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  .tbl thead{display:table-header-group}      /* her sayfada başlık tekrarı */
  .tbl tr{break-inside:avoid}
  .tbl-sabit{max-height:none;overflow:visible}
  .tbl-sabit thead th,.tbl-sabit td:first-child{position:static}

  /* rozetler renksiz de okunsun */
  .badge,.crud{border:1px solid #666!important;background:#fff!important;
    color:#000!important;box-shadow:none!important}

  h2,h3,h4{break-after:avoid}
  .grid,.cols,.two,.stats{display:block}
  .grid > *,.cols > *,.stats > *{margin-bottom:.6rem}

  /* bağlantı adresleri yanına yazılsın */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555}
  a[href^="#"]::after,a[href^="/"]::after{content:""}

  .yazdir-not{display:block!important;font-size:9pt;color:#555;
    border-top:1px solid #999;margin-top:1rem;padding-top:.4rem}
}
.yazdir-not{display:none}

/* ============================================================
   GEZİNME BİLEŞENLERİ
   ============================================================ */

/* --- KAYIT GEZİNME ---
   Listeden bir kayda girdikten sonra listeye dönmeden önceki/sonraki
   kayda geçmek için. Üst çubukta, kırıntının yanında durur.
   Odoo'nun kayıt görünümündeki sayaçla aynı işi görür. */
.kayit-gez{display:inline-flex;align-items:center;gap:.1rem;
  background:var(--surface-100);border:1px solid var(--ink-200);
  border-radius:var(--radius-full);padding:.15rem;flex:0 0 auto}
.kayit-gez button{width:26px;height:26px;border:0;background:none;
  color:var(--ink-600);border-radius:50%;cursor:pointer;display:grid;
  place-items:center;transition:var(--transition);padding:0}
.kayit-gez button:hover:not(:disabled){background:var(--yuzey);
  color:var(--brand-primary);box-shadow:var(--shadow-xs)}
.kayit-gez button:disabled{opacity:.3;cursor:not-allowed}
.kayit-gez button:focus-visible{outline:none;
  box-shadow:0 0 0 3px rgba(214,90,130,.22)}
.kayit-gez-sayi{font-size:.77rem;color:var(--ink-600);padding:0 .45rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;user-select:none}
.kayit-gez-sayi b{color:var(--ink-900);font-weight:600}

/* --- ADIM GEZİNME ---
   Sihirbaz, çok adımlı form ve uzun sayfaların altında.
   Sağdaki düğme birincil eylemdir; sol taraf geri döner. */
.gez-cubuk{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding-top:1.1rem;margin-top:1.4rem;
  border-top:1px solid var(--ink-200)}
.gez-cubuk .gez-orta{font-size:.8rem;color:var(--ink-500);
  font-variant-numeric:tabular-nums}
.gez-sag{display:flex;gap:.6rem;align-items:center;margin-left:auto}

/* --- SAYFA GEZİNME ---
   Belge/vitrin sayfaları arasında "önceki bölüm / sonraki bölüm".
   Kart gibi görünür; başlığı da gösterir ki kullanıcı nereye gittiğini bilsin. */
.sayfa-gez{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2.5rem}
.sayfa-gez a{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;
  background:var(--yuzey);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);text-decoration:none;color:var(--ink-700);
  transition:var(--transition);box-shadow:var(--shadow-xs);min-width:0}
.sayfa-gez a:hover{border-color:var(--brand-primary-light);
  box-shadow:var(--shadow-md);transform:translateY(-1px)}
.sayfa-gez a.sonraki{grid-column:2;flex-direction:row-reverse;text-align:right}
.sayfa-gez a.tek{grid-column:1 / -1}
.sayfa-gez svg{flex:0 0 18px;opacity:.5;transition:var(--transition)}
.sayfa-gez a:hover svg{opacity:1;color:var(--brand-primary)}
.sayfa-gez-metin{min-width:0}
.sayfa-gez-etiket{display:block;font-size:.72rem;color:var(--ink-500);
  text-transform:uppercase;letter-spacing:.06em}
.sayfa-gez-ad{display:block;font-size:.88rem;font-weight:600;color:var(--ink-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:640px){
  .sayfa-gez{grid-template-columns:1fr}
  .sayfa-gez a.sonraki{grid-column:1;flex-direction:row;text-align:left}
  .kayit-gez-sayi{display:none}
  .gez-cubuk{flex-direction:column;align-items:stretch}
  .gez-sag{margin-left:0;flex-direction:column-reverse}
  .gez-sag > *{width:100%}
}

/* ============================================================
   KILAVUZ / BELGE DÜZENİ
   Veri ekranlarından FARKLI bir tasarım problemi:
     veri ekranı  → tarama, karar, sıkı yerleşim
     kılavuz      → okuma, öğrenme, nefes alan yerleşim
   Bu yüzden gövde metni büyür, satır aralığı açılır, ölçü daraltılır.
   ============================================================ */

.kilavuz-duzen{display:grid;grid-template-columns:1fr 232px;gap:2.5rem;
  align-items:start}
.kilavuz-ic{min-width:0;max-width:74ch;font-size:.97rem;line-height:1.75}
.kilavuz-ic > *:first-child{margin-top:0}

/* --- tipografi: okuma için --- */
.kilavuz-ic h2{font-size:1.5rem;margin:2.8rem 0 .9rem;scroll-margin-top:5rem;
  position:relative}
.kilavuz-ic h3{font-size:1.12rem;margin:2.1rem 0 .7rem;scroll-margin-top:5rem;
  position:relative}
.kilavuz-ic h4{font-size:.97rem;margin:1.5rem 0 .5rem}
.kilavuz-ic p{margin:0 0 1.05rem}
.kilavuz-ic ul,.kilavuz-ic ol{margin:0 0 1.15rem;padding-left:1.35rem}
.kilavuz-ic li{margin-bottom:.42rem}
.kilavuz-ic li > ul,.kilavuz-ic li > ol{margin:.42rem 0 0}
.kilavuz-ic strong,.kilavuz-ic b{font-weight:600}
.kilavuz-ic code{background:var(--surface-100);border:1px solid var(--ink-200);
  border-radius:5px;padding:.08em .34em;font-size:.86em}
.kilavuz-ic .copy-box code{background:none;border:0;padding:0}
.kilavuz-ic hr{border:0;border-top:1px solid var(--ink-200);margin:2.4rem 0}
.kilavuz-ic .tbl{font-size:.87rem;margin-bottom:1.2rem}
.kilavuz-giris{font-size:1.06rem;color:var(--ink-600);line-height:1.7;
  margin-bottom:2rem}

/* --- başlık bağlantısı: üzerine gelince # çıkar --- */
.kilavuz-ic h2 > .cengel,.kilavuz-ic h3 > .cengel{position:absolute;
  left:-1.25rem;top:50%;transform:translateY(-50%);opacity:0;
  color:var(--ink-400);text-decoration:none;font-weight:400;
  transition:var(--transition);font-size:.85em}
.kilavuz-ic h2:hover > .cengel,.kilavuz-ic h3:hover > .cengel,
.cengel:focus-visible{opacity:1}
.cengel:hover{color:var(--brand-primary)}

/* --- içindekiler: yapışkan --- */
.ic-liste{position:sticky;top:5rem;max-height:calc(100vh - 7rem);
  overflow-y:auto;font-size:.83rem;padding-left:.9rem;
  border-left:1px solid var(--ink-200);scrollbar-width:thin}
.ic-liste-baslik{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-500);font-weight:600;margin-bottom:.7rem}
.ic-liste a{display:block;padding:.3rem 0 .3rem .55rem;margin-left:-.95rem;
  border-left:2px solid transparent;color:var(--ink-600);text-decoration:none;
  transition:var(--transition);line-height:1.4}
.ic-liste a:hover{color:var(--ink-900)}
.ic-liste a.aktif{color:var(--brand-primary);border-left-color:var(--brand-primary);
  font-weight:600}
.ic-liste a.alt{padding-left:1.5rem;font-size:.79rem}

/* --- okuma ilerlemesi --- */
.okuma-ilerleme{position:fixed;top:0;left:var(--sidebar-w);right:0;height:2px;
  z-index:50;background:transparent;transition:left var(--transition)}
.okuma-ilerleme > div{height:100%;width:0;background:var(--brand-gradient);
  transition:width 90ms linear}

/* --- vurgu kutuları --- */
.kutu{display:flex;gap:.8rem;padding:.9rem 1.05rem;border-radius:var(--radius-md);
  margin:1.3rem 0;font-size:.9rem;line-height:1.65;
  border:1px solid var(--ink-200);background:var(--surface-50)}
.kutu > svg{flex:0 0 18px;margin-top:.18rem}
.kutu > div{min-width:0}
.kutu p:last-child{margin-bottom:0}
.kutu-baslik{font-weight:600;display:block;margin-bottom:.15rem}
.kutu.not{background:var(--info-bg);border-color:var(--ink-300);
  color:var(--ink-700)}
.kutu.not > svg{color:var(--brand-purple)}
.kutu.ipucu{background:var(--ok-bg);border-color:var(--ok-kenar)}
.kutu.ipucu > svg{color:var(--ok)}
.kutu.uyari{background:var(--warn-bg);border-color:var(--warn-kenar)}
.kutu.uyari > svg{color:var(--warn)}
.kutu.tehlike{background:var(--danger-bg);border-color:var(--danger-kenar)}
.kutu.tehlike > svg{color:var(--danger)}
[data-tema="koyu"] .kutu.not > svg{color:var(--brand-primary-light)}

/* --- yordam adımları --- */
.yordam{counter-reset:yordam;list-style:none;padding:0;margin:1.3rem 0}
.yordam > li{counter-increment:yordam;position:relative;padding:0 0 1.4rem 2.6rem;
  margin:0}
.yordam > li::before{content:counter(yordam);position:absolute;left:0;top:-.1rem;
  width:26px;height:26px;border-radius:50%;background:var(--brand-gradient);
  color:#fff;font-family:var(--font-heading);font-size:.8rem;font-weight:700;
  display:grid;place-items:center;box-shadow:var(--shadow-brand)}
.yordam > li:not(:last-child)::after{content:"";position:absolute;left:13px;
  top:1.7rem;bottom:.35rem;width:2px;background:var(--ink-200)}
.yordam > li > b:first-child{display:block;margin-bottom:.2rem}
.yordam > li:last-child{padding-bottom:0}

/* --- şekil / ekran görüntüsü --- */
.sekil{margin:1.5rem 0}
.sekil img,.sekil .yer-tutucu{width:100%;border:1px solid var(--ink-200);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:block}
.sekil .yer-tutucu{aspect-ratio:16/9;background:var(--surface-100);
  display:grid;place-items:center;color:var(--ink-400);font-size:.85rem}
.sekil figcaption{font-size:.8rem;color:var(--ink-500);margin-top:.55rem;
  text-align:center}

/* --- kısayol tablosu --- */
.kisayol{width:100%;border-collapse:collapse;font-size:.87rem;margin:1.2rem 0}
.kisayol td{padding:.5rem .2rem;border-bottom:1px solid var(--ink-200)}
.kisayol tr:last-child td{border-bottom:0}
.kisayol td:first-child{width:150px;white-space:nowrap}

/* --- geri bildirim --- */
.geri-bildirim{border:1px solid var(--ink-200);border-radius:var(--radius-md);
  padding:1.1rem 1.25rem;margin-top:2.8rem;text-align:center;
  background:var(--surface-50)}
.geri-bildirim p{margin:0 0 .7rem;font-size:.9rem;font-weight:500}
.geri-bildirim .row-actions{justify-content:center}
.geri-bildirim.yanitlandi{background:var(--ok-bg);border-color:var(--ok-kenar)}

/* --- kılavuz arama --- */
.kilavuz-ara{position:relative;margin-bottom:1.5rem}
/* Genel input kuralı margin-top:.32rem verir. Simge top:50% ile SARMALAYICIYA
   göre ortalandığından o boşluk simgeyi ~2.5px yukarı kaydırır. Boşluğu
   sarmalayıcıya taşıyıp input'unkini sıfırlıyoruz — göz ikonundaki ile
   aynı hata sınıfı. */
.kilavuz-ara input{margin-top:0;padding-left:2.45rem}
/* Simgenin SOL KENARI, normal input'ların metin girintisiyle (.75rem)
   hizalanır — aynı aileden görünsün. */
.kilavuz-ara > svg{position:absolute;left:.75rem;top:50%;
  transform:translateY(-50%);color:var(--ink-400);pointer-events:none}
.kilavuz-ara input:focus + svg,
.kilavuz-ara input:not(:placeholder-shown) + svg{color:var(--brand-primary)}
.bolum-gizli{display:none}
.arama-bos{padding:2rem 1rem;text-align:center;color:var(--ink-500);
  font-size:.88rem}

/* --- sürüm rozeti --- */
.kilavuz-ust{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin-bottom:.4rem}
.kilavuz-ust h1{font-size:1.75rem}
.guncelleme{font-size:.78rem;color:var(--ink-500)}

@media(max-width:1080px){
  .kilavuz-duzen{grid-template-columns:1fr}
  .ic-liste{position:static;max-height:none;border-left:0;padding-left:0;
    border-bottom:1px solid var(--ink-200);padding-bottom:1rem;
    margin-bottom:1.5rem;order:-1}
  .ic-liste a{margin-left:0;border-left:0;padding-left:0;display:inline-block;
    margin-right:1.1rem}
  .ic-liste a.aktif{border-left:0;text-decoration:underline}
  .ic-liste a.alt{display:none}
}
@media(max-width:860px){
  .okuma-ilerleme{left:0}
  .kilavuz-ic{font-size:.94rem}
  .kilavuz-ic h2{font-size:1.32rem}
}
@media print{
  .ic-liste,.okuma-ilerleme,.geri-bildirim,.kilavuz-ara,.cengel{display:none!important}
  .kilavuz-duzen{display:block}
  .kilavuz-ic{max-width:none}
  .kutu,.yordam > li,.sekil{break-inside:avoid}
}