/* =====================================================================
   TIME VIP OPERATION — UI v2
   style.css'in ÜSTÜNE yüklenir; sayfaların iç mantığına dokunmaz.
   Dil: obsidyen zemin + altın vurgu, yaylı (spring) geçişler, cam yüzeyler,
   dev rakamlar, kayan seçiciler, ripple butonlar, açılışta sayarak beliren sayılar.
   ===================================================================== */
:root{
  --gold:#c9a227; --gold-hi:#e8c85a; --gold-lo:#8b6914;
  --gold-glow:rgba(201,162,39,.38); --gold-soft2:rgba(201,162,39,.12);
  --r-sm:10px; --r:14px; --r-lg:20px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --spring:cubic-bezier(.34,1.45,.5,1);
  --sidebar-w:292px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.25);
  --shadow-2:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -22px rgba(0,0,0,.65);
  --shadow-3:0 30px 70px -24px rgba(0,0,0,.75);
  --ring:0 0 0 4px rgba(201,162,39,.18);
}
/* ---- koyu (varsayılan) ---- */
html[data-theme="dark"],:root{
  --bg:#08080b;
  --bg-vign:radial-gradient(1000px 520px at 82% -12%,rgba(201,162,39,.12),transparent 62%),radial-gradient(900px 520px at -8% 108%,rgba(128,96,210,.075),transparent 60%);
  --panel:#111117; --panel-2:#0d0d12;
  --card-bg:rgba(21,21,28,.80); --card-border:rgba(255,255,255,.075);
  --input-bg:rgba(255,255,255,.045); --input-border:rgba(255,255,255,.10);
  --table-header-bg:rgba(255,255,255,.035); --table-row-hover:rgba(201,162,39,.06); --table-border:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.08); --line-dark:rgba(255,255,255,.14);
  --ink:#f4f1e9; --ink-light:#fbf8f0; --muted:#9792a3; --muted-light:#a39fae;
  --btn-secondary-bg:rgba(255,255,255,.07); --btn-secondary-text:#ece8de;
  --danger:#ee6a5a; --success:#3fc088;
  --surface-hi:#1a1a23;
}
html[data-theme="light"]{
  --bg:#f3f0e6;
  --bg-vign:radial-gradient(1000px 520px at 82% -12%,rgba(201,162,39,.16),transparent 62%),radial-gradient(900px 520px at -8% 108%,rgba(128,96,210,.06),transparent 60%);
  --panel:#ffffff; --panel-2:#fbf9f3;
  --card-bg:rgba(255,255,255,.92); --card-border:rgba(28,22,8,.085);
  --input-bg:#ffffff; --input-border:rgba(28,22,8,.14);
  --table-header-bg:#f6f2e6; --table-row-hover:rgba(201,162,39,.08); --table-border:rgba(28,22,8,.075);
  --line:rgba(28,22,8,.09); --line-dark:rgba(28,22,8,.16);
  --ink:#1b1810; --ink-light:#14110a; --muted:#7a7566; --muted-light:#6b6657;
  --btn-secondary-bg:rgba(28,22,8,.055); --btn-secondary-text:#2a2516;
  --shadow-2:0 1px 0 rgba(255,255,255,.9) inset, 0 16px 36px -22px rgba(60,44,8,.28);
  --shadow-3:0 28px 60px -24px rgba(60,44,8,.35);
  --surface-hi:#fff;
}

/* ---------- temel ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background-attachment:fixed;font-feature-settings:"cv11","ss01","tnum" 0;text-rendering:optimizeLegibility}
::selection{background:var(--gold-soft2);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 38%,transparent);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--gold) 60%,transparent);background-clip:content-box;border:2px solid transparent}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 38%,transparent) transparent}
.tn,.num,td.num,[data-countup]{font-variant-numeric:tabular-nums}
body.swap *{transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)!important}

/* ---------- üst ilerleme çubuğu (scroll) ---------- */
#ui-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));z-index:120;pointer-events:none;box-shadow:0 0 12px var(--gold-glow);transition:opacity .3s}

/* ---------- YAN MENÜ ---------- */
.sidebar{
  left:12px;top:12px;height:calc(100vh - 24px);width:264px;border-radius:24px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  transition:width .38s var(--spring),transform .3s var(--ease);
}
.sidebar .liquidGlass-tint{
  background:
    radial-gradient(420px 260px at 0% 0%,rgba(201,162,39,.20),transparent 62%),
    radial-gradient(360px 300px at 110% 100%,rgba(128,96,210,.12),transparent 60%),
    linear-gradient(170deg,#17171e 0%,#101016 46%,#0a0a0e 100%);
}
.sidebar .liquidGlass-shine{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.sidebar.collapsed{width:68px}
.main-col{margin-left:var(--sidebar-w);transition:margin-left .38s var(--spring)}
body.sidebar-collapsed .main-col{margin-left:96px}
.sidebar .brand{padding:18px 20px 10px;gap:12px}
.sidebar .brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#fff,#efe8d2);padding:5px;box-shadow:0 10px 24px -8px rgba(201,162,39,.55),0 0 0 1px rgba(255,255,255,.14)}
.sidebar .brand .brand-text{font-size:13.5px;font-weight:800;letter-spacing:.02em;line-height:1.15;color:#fff;max-width:150px}
#sidebar-collapse-btn{top:20px;right:14px;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.08);color:#d9d4c3;border:1px solid rgba(255,255,255,.1);transition:transform .35s var(--spring),background .2s,color .2s}
#sidebar-collapse-btn:hover{background:var(--gold);color:#1c1408;transform:scale(1.1)}
.sidebar.collapsed #sidebar-collapse-btn{right:21px}

/* profil kartı (çalışma alanı kartı gibi) */
.sidebar-profile{flex-direction:row;align-items:center;text-align:left;gap:11px;margin:6px 14px 10px;padding:10px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .25s,transform .25s var(--spring)}
.sidebar-profile:hover{border-color:rgba(201,162,39,.45)}
.sidebar-profile::after{display:none}
.sidebar-profile-avatar{width:40px;height:40px;font-size:16px;margin:0;border-radius:13px;background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));box-shadow:0 8px 18px -6px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.sidebar-profile-name{font-size:13.5px;font-weight:700;text-align:left;max-width:128px}
.sidebar-profile-role{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a9a493;margin:1px 0 0}
.sidebar-profile .sb-who{display:flex;flex-direction:column;min-width:0;flex:1}
.sidebar-profile-logout{position:absolute;top:50%;right:10px;transform:translateY(-50%);margin:0;width:30px;height:30px;border-radius:10px;justify-content:center;color:#cfc9b6;background:rgba(255,255,255,.06);font-size:0;transition:background .2s,color .2s,transform .3s var(--spring)}
.sidebar-profile-logout i{font-size:16px}
.sidebar-profile-logout:hover{background:rgba(238,106,90,.2);color:#ff9d90;transform:translateY(-50%) scale(1.08)}
.sidebar.collapsed .sidebar-profile{margin:6px 10px 10px;padding:6px;justify-content:center}
.sidebar.collapsed .sidebar-profile .sb-who,.sidebar.collapsed .sidebar-profile-logout{display:none}

/* arama / komut paleti tetikleyici */
.sb-search{display:flex;align-items:center;gap:9px;margin:0 14px 8px;padding:9px 12px;border-radius:13px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#a9a493;font-size:13px;cursor:pointer;width:calc(100% - 28px);text-align:left;transition:border-color .2s,background .2s,color .2s}
.sb-search:hover{border-color:rgba(201,162,39,.5);background:rgba(255,255,255,.07);color:#fff}
.sb-search i{font-size:15px}
.sb-search kbd{margin-left:auto;font:700 10.5px var(--sans);padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#cfc9b6}
.sidebar.collapsed .sb-search{justify-content:center;margin:0 10px 8px;width:calc(100% - 20px);padding:9px 0}
.sidebar.collapsed .sb-search span,.sidebar.collapsed .sb-search kbd{display:none}

/* menü */
.sidebar nav{padding:6px 12px 10px;position:relative}
.sidebar .group-label{padding:18px 12px 8px;font-size:10.5px;letter-spacing:.14em;color:#8f8a7d !important;font-weight:800}
.sidebar .group-label:hover{color:#f0ead6 !important}
.nav-group-items{transition:grid-template-rows .34s var(--ease)}
.sidebar a.nav-item{padding:6px 10px 6px 7px;margin:2px 0;border-radius:14px;font-size:13.5px;font-weight:600;color:#bdb8a8 !important;gap:11px;transition:background .22s,color .22s,transform .3s var(--spring)}
.sidebar a.nav-item .nav-icon{width:32px;height:32px;border-radius:10px;font-size:16px;background:rgba(255,255,255,.055);color:#cfc9b6;transition:background .25s,color .25s,transform .35s var(--spring),box-shadow .25s}
.sidebar a.nav-item:hover{background:rgba(255,255,255,.055);color:#fff !important;transform:translateX(3px)}
.sidebar a.nav-item:hover .nav-icon{background:rgba(201,162,39,.18);color:var(--gold-hi);transform:scale(1.08) rotate(-4deg)}
.sidebar a.nav-item.active{background:transparent;box-shadow:none;color:#fff !important;font-weight:700;transform:none}
.sidebar a.nav-item.active .nav-icon{background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));color:#1c1408;box-shadow:0 8px 18px -6px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.4)}
html[data-theme] .sidebar a.nav-item.active{color:#fff !important}
.sidebar nav:not(.has-ind) a.nav-item.active{background:linear-gradient(90deg,rgba(201,162,39,.22),rgba(201,162,39,.06));box-shadow:inset 0 0 0 1px rgba(201,162,39,.35)}
.sidebar nav .nav-ind{position:absolute;left:12px;right:12px;top:0;height:46px;border-radius:14px;pointer-events:none;z-index:0;opacity:0;
  background:linear-gradient(90deg,rgba(201,162,39,.24),rgba(201,162,39,.07));box-shadow:inset 0 0 0 1px rgba(201,162,39,.38),0 10px 26px -14px var(--gold-glow);
  transition:top .5s var(--spring),height .35s var(--ease),opacity .3s}
.sidebar nav.has-ind .nav-ind{opacity:1}
.sidebar nav .nav-ind:before{content:"";position:absolute;left:-12px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--gold-hi),var(--gold-lo))}
.sidebar a.nav-item,.sidebar .nav-group-items,.sidebar .group-label{position:relative;z-index:1}
.sidebar nav .nav-badge{margin-left:auto;min-width:20px;height:20px;border-radius:10px;background:var(--success);color:#04170f;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 6px}

/* alt eylem çubuğu: tema + daralt + çıkış */
.sb-foot{display:flex;align-items:center;gap:8px;margin:0 14px 14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.sb-foot .theme-toggle{margin:0;width:auto;flex:1;padding:3px;gap:2px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);position:relative}
.sb-foot .theme-toggle button{border-radius:11px;padding:7px 6px;font-size:12px;font-weight:700;color:#a9a493;position:relative;z-index:1;transition:color .2s,background .3s var(--spring)}
.sb-foot .theme-toggle button.active{background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));color:#1c1408;box-shadow:0 6px 16px -6px var(--gold-glow)}
.sidebar.collapsed .sb-foot{margin:0 10px 12px}
.sidebar.collapsed .sb-foot .theme-toggle{display:flex;flex-direction:column;padding:3px}
.sidebar.collapsed .sb-foot .theme-toggle button span{display:none}

/* ---------- ÜST ÇUBUK ---------- */
.topbar{height:68px;padding:0 30px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);transition:height .3s var(--ease),box-shadow .3s}
.topbar.compact{height:56px;box-shadow:0 14px 34px -22px rgba(0,0,0,.7)}
.topbar-title{font-size:16px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.topbar-title:before{content:"";width:4px;height:18px;border-radius:3px;background:linear-gradient(var(--gold-hi),var(--gold-lo));box-shadow:0 0 14px var(--gold-glow)}
.topbar-search{border-radius:999px;padding:9px 16px;width:260px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1);transition:width .35s var(--spring),border-color .2s,box-shadow .2s}
.topbar-search:has(input:focus){width:340px;border-color:var(--gold);box-shadow:var(--ring)}
.topbar-icon-btn{width:40px;height:40px;border-radius:999px;background:var(--panel);box-shadow:var(--shadow-1);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .3s var(--spring),background .2s,color .2s}
.topbar-icon-btn:hover{background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));color:#1c1408;transform:translateY(-3px);box-shadow:0 12px 24px -10px var(--gold-glow)}
.topbar-avatar{width:36px;height:36px;border-radius:13px;background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));color:#1c1408;font-weight:800}
.topbar-user{border-left:1px solid var(--line);transition:transform .25s var(--spring)}
.topbar-user:hover{transform:translateY(-1px)}
.topbar-notif-panel{border-radius:18px;box-shadow:var(--shadow-3);transform-origin:top right}
.topbar-notif-panel.open{animation:popIn .26s var(--spring) both}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(-6px)}}

/* ---------- İÇERİK / KARTLAR ---------- */
.content{padding:30px 36px 80px;max-width:1760px}
.content h1{font-size:28px;font-weight:800;letter-spacing:-.035em;margin-bottom:6px}
.content .sub{font-size:14px}
.card,.dash-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-lg);box-shadow:var(--shadow-2);transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{border-color:color-mix(in srgb,var(--gold) 32%,var(--card-border))}
.card h2,.dash-card h2{font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:-.015em;display:flex;align-items:center;gap:9px}
.card h2:before,.dash-card h2:before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(var(--gold-hi),var(--gold-lo));flex:none}
.quick-card{border-radius:var(--r-lg);transition:transform .4s var(--spring),border-color .25s,box-shadow .3s}
.quick-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(0,0,0,.7)}
.hero-banner{border-radius:var(--r-lg)}

/* ---------- BUTONLAR ---------- */
button.btn,a.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 18px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 58%,#b08d1c 100%);color:#1c1408;
  font-weight:800;font-size:13.5px;letter-spacing:-.005em;line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 -1px 0 rgba(0,0,0,.12) inset,0 12px 22px -12px var(--gold-glow);
  transition:transform .28s var(--spring),box-shadow .25s,filter .2s,background .25s,border-color .2s,color .2s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
button.btn:hover,a.btn:hover{opacity:1;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 28px -12px var(--gold-glow)}
button.btn:active,a.btn:active{transform:translateY(0) scale(.97);opacity:1;filter:brightness(.96)}
button.btn.secondary,a.btn.secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:1px solid var(--line);box-shadow:var(--shadow-1);filter:none}
button.btn.secondary:hover,a.btn.secondary:hover{border-color:var(--gold);color:var(--ink);background:var(--gold-soft2);box-shadow:0 12px 24px -14px var(--gold-glow);filter:none}
button.btn.danger,a.btn.danger{background:linear-gradient(180deg,#f2806f,var(--danger));color:#fff;border-color:rgba(255,255,255,.16);box-shadow:0 12px 22px -12px rgba(238,106,90,.6)}
button.btn:disabled,a.btn:disabled,button.btn.is-loading{opacity:.6;cursor:not-allowed;transform:none;filter:grayscale(.2)}
button.btn.is-loading{color:transparent !important;pointer-events:none}
button.btn.is-loading:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(28,20,8,.25);border-top-color:#1c1408;animation:spin .7s linear infinite}
button.btn.secondary.is-loading:after{border-color:rgba(128,128,128,.3);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.24;transform:scale(0);animation:rip .6s var(--ease) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- FORM ALANLARI ---------- */
label{font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--muted-light)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=search],input[type=email],input[type=tel],input[type=url],select,textarea{
  min-height:42px;padding:10px 14px;border-radius:13px;border:1.5px solid var(--input-border);background:var(--input-bg);color:var(--ink);font-size:14px;font-weight:500;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;transition:border-color .2s,box-shadow .25s,background .2s,transform .2s var(--spring)}
textarea{min-height:92px;line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent);font-weight:400}
input:hover:not(:focus):not([type=checkbox]):not([type=radio]),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--line-dark)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:var(--ring);background:color-mix(in srgb,var(--input-bg) 70%,var(--surface-hi))}
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239792a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
input[type=date],input[type=time]{padding:10px 10px}
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.8);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--gold);width:17px;height:17px;min-height:0;cursor:pointer;transition:transform .2s var(--spring)}
input[type=checkbox]:active,input[type=radio]:active{transform:scale(.85)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
.form-row{margin-bottom:16px}

/* ---------- TABLOLAR ---------- */
table.data-table{border-collapse:separate;border-spacing:0;font-size:13.5px;border:1px solid var(--table-border);border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--panel) 60%,transparent)}
table.data-table th{padding:13px 16px;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--muted);background:var(--table-header-bg);border-bottom:1px solid var(--table-border);white-space:nowrap}
table.data-table td{padding:13px 16px;border-bottom:1px solid var(--table-border);transition:background .2s}
table.data-table tr:last-child td{border-bottom:0}
table.data-table tbody tr{transition:transform .2s var(--ease)}
table.data-table tbody tr:hover td{background:var(--table-row-hover)}
table.data-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
table.data-table td:first-child{font-weight:600}

/* ---------- ROZET / UYARI / TOAST / MODAL ---------- */
.badge{padding:4px 11px;border-radius:999px;font-weight:800;letter-spacing:.01em}
.alert{border-radius:14px;padding:13px 16px;font-weight:500;animation:rise .45s var(--ease) both}
.alert.error{border-color:rgba(238,106,90,.35)}.alert.success{border-color:rgba(63,192,136,.35)}
.tm-toast{border-radius:16px;padding:14px 18px;font-weight:600;box-shadow:var(--shadow-3);border:1px solid var(--line-dark);transition:opacity .3s,transform .42s var(--spring)}
.tm-toast-icon{width:24px;height:24px;font-size:13px}
.tm-modal-overlay{-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%)}
.tm-modal-box{border-radius:22px;box-shadow:var(--shadow-3);animation:tmModalBoxIn .42s var(--spring) both}

/* ---------- AÇILIŞ / SCROLL ANİMASYONLARI ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.ui-js .content>*:not(.dr):not(.dr-bg):not([class*=modal]):not([class*=overlay]),html.ui-js .content .dash-content-with-rail>*{animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--rv,0)*55ms)}
html.ui-js .rv-pre{opacity:0;transform:translateY(20px)}
html.ui-js .rv-pre.rv-in{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--rv,0)*60ms)}
#ui-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:999px;border:1px solid var(--line-dark);background:var(--panel);color:var(--ink);display:grid;place-items:center;font-size:18px;cursor:pointer;z-index:50;box-shadow:var(--shadow-3);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s,transform .4s var(--spring),background .2s,color .2s}
#ui-top.on{opacity:1;transform:none;pointer-events:auto}
#ui-top:hover{background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));color:#1c1408;transform:translateY(-3px)}
.skeleton{position:relative;overflow:hidden;background:var(--table-header-bg);border-radius:10px}
.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- KAYAN SEÇİCİ (segmented pill) ---------- */
.seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.seg button{position:relative;z-index:1;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:12.5px;padding:7px 15px;border-radius:999px;cursor:pointer;transition:color .25s;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{color:#1c1408}
.seg .pill{position:absolute;top:4px;bottom:4px;border-radius:999px;background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));box-shadow:0 8px 18px -8px var(--gold-glow);transition:left .45s var(--spring),width .35s var(--ease);z-index:0}

/* ---------- KOMUT PALETİ (Ctrl+K) ---------- */
#cmdk{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding-top:13vh;background:rgba(5,5,8,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#cmdk.on{display:flex;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
#cmdk .box{width:min(640px,92vw);background:var(--panel);border:1px solid var(--line-dark);border-radius:22px;box-shadow:var(--shadow-3);overflow:hidden;animation:popIn .32s var(--spring) both;transform-origin:top center}
#cmdk .q{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
#cmdk .q i{font-size:19px;color:var(--gold)}
#cmdk .q input{flex:1;border:0;background:none;box-shadow:none;min-height:0;padding:0;font-size:16px;font-weight:600;border-radius:0}
#cmdk .q input:focus{box-shadow:none;background:none}
#cmdk .q kbd{font:700 10.5px var(--sans);padding:3px 8px;border-radius:8px;background:var(--btn-secondary-bg);border:1px solid var(--line);color:var(--muted)}
#cmdk .list{max-height:min(52vh,420px);overflow:auto;padding:8px}
#cmdk .grp{padding:10px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#cmdk a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;transition:background .15s,transform .2s var(--spring)}
#cmdk a i{width:32px;height:32px;border-radius:10px;background:var(--btn-secondary-bg);display:grid;place-items:center;font-size:16px;color:var(--muted);transition:background .2s,color .2s}
#cmdk a.act{background:var(--gold-soft2);transform:translateX(3px)}
#cmdk a.act i{background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));color:#1c1408}
#cmdk a small{margin-left:auto;color:var(--muted);font-size:11.5px;font-weight:600}
#cmdk .none{padding:28px;text-align:center;color:var(--muted)}
#cmdk .foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
#cmdk .foot kbd{font:700 10px var(--sans);padding:1px 6px;border-radius:6px;border:1px solid var(--line);margin-right:4px}

@media (max-width:860px){
  .sidebar{left:0;top:0;height:100vh;border-radius:0 24px 24px 0;width:284px !important}
  .main-col,body.sidebar-collapsed .main-col{margin-left:0 !important}
  .topbar{padding-left:64px}
  .content{padding:20px 14px 60px}
  .sb-search kbd{display:none}
}
@media (prefers-reduced-motion:reduce){
  html.ui-js .content>*{animation:none}
  html.ui-js .rv-pre{opacity:1;transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Online Transfer: ağır blur kapalı (kasma), çekmece kapalıyken gölge sızmasın */
.otx,.otx *{-webkit-backdrop-filter:none;backdrop-filter:none}
.dr:not(.open){box-shadow:none;visibility:hidden;transition:transform .28s cubic-bezier(.22,.8,.3,1),visibility 0s .28s}
.dr.open{visibility:visible}
.dr-bg{will-change:opacity}

/* performans: ağır sayfalarda blur yok */
.dv-card,.dv-panel,.cc-k,.cc-box{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}