/* ============================================================ WP Assistant — Design System Light theme · Indigo primary · Inter · Lucide icons ============================================================ */ :root{ /* Brand */ --primary:#4F46E5; --primary-600:#4338CA; --primary-700:#3730A3; --primary-50:#EEF2FF; --primary-100:#E0E7FF; --primary-200:#C7D2FE; /* Neutrals (slate 9-step) */ --n-0:#FFFFFF; --n-50:#F8FAFC; --n-100:#F1F5F9; --n-200:#E2E8F0; --n-300:#CBD5E1; --n-400:#94A3B8; --n-500:#64748B; --n-600:#475569; --n-700:#334155; --n-800:#1E293B; --n-900:#0F172A; /* Status */ --success:#16A34A; --success-bg:#F0FDF4; --success-bd:#BBF7D0; --warning:#D97706; --warning-bg:#FFFBEB; --warning-bd:#FDE68A; --danger:#DC2626; --danger-bg:#FEF2F2; --danger-bd:#FECACA; --info:#0891B2; --info-bg:#ECFEFF; --info-bd:#A5F3FC; --purple:#7C3AED; --purple-bg:#F5F3FF; --purple-bd:#DDD6FE; /* Surfaces */ --page:#F6F7FB; --card:#FFFFFF; --border:#E7EAF0; --border-strong:#D9DEE8; /* Shadow */ --sh-sm:0 1px 2px rgba(15,23,42,.05); --sh-md:0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05); --sh-lg:0 8px 28px rgba(15,23,42,.10); --sh-xl:0 18px 50px rgba(15,23,42,.18); /* Radii */ --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px; --sidebar-w:248px; --side-bg:#0F172A; --side-text-strong:#F1F5F9; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:'Inter',system-ui,sans-serif; background:var(--page); color:var(--n-900); -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"; font-size:14px; line-height:1.5; } button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit} a{text-decoration:none;color:inherit} .icon{width:18px;height:18px;stroke-width:2} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:999px;border:3px solid var(--page)} ::-webkit-scrollbar-thumb:hover{background:var(--n-400)} .tnum{font-variant-numeric:tabular-nums} /* ===================== LAYOUT ===================== */ .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .22s ease} .app.collapsed{--sidebar-w:72px} /* ===================== SIDEBAR ===================== */ .sidebar{background:var(--side-bg);color:var(--n-300);display:flex;flex-direction:column;overflow:hidden;position:relative} .brand{display:flex;align-items:center;gap:11px;padding:0 20px;height:64px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06)} .brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#7C73FF);display:grid;place-items:center;flex-shrink:0;box-shadow:0 3px 10px rgba(79,70,229,.45)} .brand-mark svg{width:19px;height:19px;color:#fff;stroke-width:2.4} .brand-name{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap} .brand-name b{color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em} .brand-name span{font-size:11px;color:var(--n-500);font-weight:500} .app.collapsed .brand-name{display:none} .nav{flex:1;overflow-y:auto;padding:14px 12px 20px} .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-color:transparent} .nav-group{margin-bottom:6px} .nav-label{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--n-600);padding:14px 12px 6px} .app.collapsed .nav-label{opacity:0;height:14px;padding:7px 0} .nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--n-400);font-weight:500;font-size:13.5px;white-space:nowrap;position:relative;transition:background .13s,color .13s;margin-bottom:1px;cursor:pointer} .nav-item:hover{background:rgba(255,255,255,.05);color:var(--side-text-strong)} .nav-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.4)} .nav-item.active:hover{background:var(--primary)} .nav-item .icon{flex-shrink:0} .nav-item .badge{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;min-width:20px;text-align:center} .nav-item.active .badge{background:rgba(255,255,255,.25)} .app.collapsed .nav-text,.app.collapsed .nav-item .badge{display:none} .app.collapsed .nav-item{justify-content:center;padding:10px} /* ===================== TOPBAR ===================== */ .main{display:flex;flex-direction:column;overflow:hidden} .topbar{height:64px;flex-shrink:0;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 24px;position:relative;z-index:20} .hamb{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--n-600);transition:background .13s} .hamb:hover{background:var(--n-100)} .search{flex:1;max-width:440px;position:relative} .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--n-400)} .search input{width:100%;height:40px;border:1px solid var(--border-strong);border-radius:10px;background:var(--n-50);padding:0 14px 0 40px;font-size:13.5px;color:var(--n-900);transition:border .13s,background .13s,box-shadow .13s} .search input::placeholder{color:var(--n-400)} .search input:focus{outline:none;border-color:var(--primary);background:var(--card);box-shadow:0 0 0 3.5px var(--primary-100)} .search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:inherit;font-size:11px;color:var(--n-500);background:var(--card);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px;padding:2px 6px;font-weight:600} .top-actions{display:flex;align-items:center;gap:7px;margin-left:auto} .icon-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--n-600);position:relative;transition:background .13s,color .13s} .icon-btn:hover{background:var(--n-100);color:var(--n-900)} .icon-btn .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;background:var(--danger);border:2px solid #fff;border-radius:50%} .btn-quick{display:flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:10px;background:var(--primary);color:#fff;font-weight:600;font-size:13.5px;box-shadow:0 4px 12px rgba(79,70,229,.32);transition:background .13s,transform .08s,box-shadow .13s} .btn-quick:hover{background:var(--primary-600);box-shadow:0 6px 16px rgba(79,70,229,.42)} .btn-quick:active{transform:translateY(1px)} .seg{display:flex;background:var(--n-100);border-radius:9px;padding:3px;gap:2px} .seg button{padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--n-500);transition:all .13s} .seg button.on{background:#fff;color:var(--n-900);box-shadow:var(--sh-sm)} .divider-v{width:1px;height:26px;background:var(--border);margin:0 3px} .profile{display:flex;align-items:center;gap:9px;padding:5px 7px 5px 5px;border-radius:10px;transition:background .13s} .profile:hover{background:var(--n-100)} .avatar{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#6366F1,#A855F7);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0} .profile .who{line-height:1.2;text-align:left} .profile .who b{font-size:13px;font-weight:600;color:var(--n-900);display:block} .profile .who span{font-size:11.5px;color:var(--n-500)} /* ===================== CONTENT / PAGE HEAD ===================== */ .content{flex:1;overflow-y:auto;padding:26px 32px 56px} .content.narrow{max-width:1100px} .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px} .crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--n-500);font-weight:500;margin-bottom:7px} .crumb svg{width:14px;height:14px;color:var(--n-300)} .crumb a:hover{color:var(--n-700)} .crumb .cur{color:var(--n-700);font-weight:600} .page-head h1{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--n-900)} .page-head .sub{font-size:13.5px;color:var(--n-500);margin-top:3px;max-width:62ch} .head-actions{display:flex;gap:9px;flex-shrink:0;align-items:center} /* ===================== BUTTONS ===================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border-radius:10px;font-weight:600;font-size:13.5px;transition:all .13s;white-space:nowrap} .btn svg{width:16px;height:16px} .btn-sm{height:34px;padding:0 12px;font-size:13px;border-radius:9px} .btn-pri{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.32)} .btn-pri:hover{background:var(--primary-600)} .btn-pri:active{transform:translateY(1px)} .btn-ghost{background:var(--card);color:var(--n-700);border:1px solid var(--border-strong);box-shadow:var(--sh-sm)} .btn-ghost:hover{background:var(--n-50);border-color:var(--n-300)} .btn-soft{background:var(--primary-50);color:var(--primary)} .btn-soft:hover{background:var(--primary-100)} .btn-danger{background:var(--card);color:var(--danger);border:1px solid var(--danger-bd)} .btn-danger:hover{background:var(--danger-bg)} .btn-danger-solid{background:var(--danger);color:#fff;box-shadow:0 4px 12px rgba(220,38,38,.28)} .btn-danger-solid:hover{background:#B91C1C} .btn[disabled]{opacity:.55;pointer-events:none} .btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .link-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--primary);padding:6px 9px;border-radius:8px;transition:background .12s} .link-btn:hover{background:var(--primary-50)} .link-btn svg{width:14px;height:14px} /* ===================== CARD ===================== */ .card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md)} .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;border-bottom:1px solid var(--border)} .card-h h3{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--n-900)} .card-h .ch-sub{font-size:12.5px;color:var(--n-500);margin-top:2px} .card-tools{display:flex;align-items:center;gap:8px} .card-b{padding:20px} .card-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-top:1px solid var(--border);background:var(--n-50);border-radius:0 0 var(--r-lg) var(--r-lg)} /* ===================== GRID ===================== */ .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px} .col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5} .col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-12{grid-column:span 12} .stack{display:flex;flex-direction:column;gap:20px} /* ===================== PILLS / BADGES ===================== */ .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.4} .pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .pill.danger{color:var(--danger);background:var(--danger-bg);box-shadow:inset 0 0 0 1px var(--danger-bd)} .pill.warning{color:var(--warning);background:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-bd)} .pill.success{color:var(--success);background:var(--success-bg);box-shadow:inset 0 0 0 1px var(--success-bd)} .pill.info{color:var(--info);background:var(--info-bg);box-shadow:inset 0 0 0 1px var(--info-bd)} .pill.purple{color:var(--purple);background:var(--purple-bg);box-shadow:inset 0 0 0 1px var(--purple-bd)} .pill.primary{color:var(--primary);background:var(--primary-50);box-shadow:inset 0 0 0 1px var(--primary-200)} .pill.neutral{color:var(--n-600);background:var(--n-100);box-shadow:inset 0 0 0 1px var(--border-strong)} /* Uyarı/bilgi kutusu (admin + portal). Tema-duyarlı; varsayılan = hata (danger). */ .alert{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:12px;background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);font-size:13px;font-weight:500;line-height:1.5;overflow-wrap:anywhere} .alert>svg{width:17px;height:17px;flex-shrink:0;margin-top:1px} .alert.ok{background:var(--success-bg);border-color:var(--success-bd);color:var(--success)} .alert.warn{background:var(--warning-bg);border-color:var(--warning-bd);color:var(--warning)} .alert.info{background:var(--info-bg);border-color:var(--info-bd);color:var(--info)} .alert b{font-weight:700} .alert a{color:inherit;text-decoration:underline} .day-badge{font-size:12px;font-weight:700;padding:4px 9px;border-radius:8px;white-space:nowrap;font-variant-numeric:tabular-nums} .day-badge.safe{color:var(--success);background:var(--success-bg)} .day-badge.soon{color:var(--warning);background:var(--warning-bg)} .day-badge.over{color:var(--danger);background:var(--danger-bg)} /* ===================== TABLE ===================== */ .tbl-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse} thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--n-500);padding:11px 20px;background:var(--n-50);border-bottom:1px solid var(--border);white-space:nowrap} thead th.num{text-align:right} thead th.wpa-sortable{cursor:pointer;user-select:none} thead th.wpa-sortable:hover{color:var(--n-700)} .wpa-sort-ind{font-weight:400;letter-spacing:0} /* RTL (Arapça) — temel hizalama düzeltmeleri (html[dir=rtl]) */ [dir="rtl"]{text-align:right} [dir="rtl"] thead th{text-align:right} [dir="rtl"] thead th.num,[dir="rtl"] td.num,[dir="rtl"] .num{text-align:left} [dir="rtl"] .tb-menu{left:auto;right:0} [dir="rtl"] .tb-menu-r{right:auto;left:0} [dir="rtl"] .wpa-sort-ind{margin-left:0;margin-right:5px} tbody td{padding:13px 20px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--n-700);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr{transition:background .1s} tbody tr.clickable{cursor:pointer} tbody tr:hover{background:var(--n-50)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} td.num{font-weight:600;color:var(--n-900)} .cust{display:flex;align-items:center;gap:11px} .cust .ca{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0} .cust .cn{font-weight:600;color:var(--n-900);font-size:13.5px} .cust .cm{font-size:11.5px;color:var(--n-500)} .row-act{display:flex;justify-content:flex-end;gap:4px} .mini{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--n-400);transition:all .12s} .mini:hover{background:var(--n-100);color:var(--primary)} .mini.pay:hover{background:var(--success-bg);color:var(--success)} .mini.del:hover{background:var(--danger-bg);color:var(--danger)} .mini svg{width:15px;height:15px} .favicon{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0} /* ===================== TOOLBAR / FILTER BAR ===================== */ .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} .toolbar .search-inline{position:relative;flex:1;min-width:220px;max-width:360px} .toolbar .search-inline svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--n-400)} .toolbar .search-inline input{width:100%;height:40px;border:1px solid var(--border-strong);border-radius:10px;background:var(--card);padding:0 12px 0 38px;font-size:13.5px} .toolbar .search-inline input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-100)} .chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:10px;background:var(--card);border:1px solid var(--border-strong);font-size:13px;font-weight:600;color:var(--n-600);box-shadow:var(--sh-sm);transition:all .12s;cursor:pointer} .chip:hover{background:var(--n-50);border-color:var(--n-300)} .chip.active{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary)} .chip svg{width:15px;height:15px;color:var(--n-400)} .chip.active svg{color:var(--primary)} /* ===================== FORM ===================== */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px} .field:last-child{margin-bottom:0} .lbl{font-size:13px;font-weight:600;color:var(--n-800);display:flex;align-items:center;gap:5px} .lbl .req{color:var(--danger)} .lbl .opt{color:var(--n-400);font-weight:500;font-size:11.5px} .inp,.sel,textarea.inp{width:100%;height:42px;border:1px solid var(--border-strong);border-radius:10px;background:var(--card);padding:0 13px;font-size:13.5px;color:var(--n-900);transition:border .13s,box-shadow .13s} textarea.inp{height:auto;padding:11px 13px;resize:vertical;min-height:92px;line-height:1.55} .inp::placeholder{color:var(--n-400)} .inp:focus,.sel:focus,textarea.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-100)} .inp.err{border-color:var(--danger);box-shadow:0 0 0 3.5px rgba(220,38,38,.12)} .sel{appearance:none;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='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;cursor:pointer} .hint{font-size:12px;color:var(--n-500)} .field .errmsg{font-size:12px;color:var(--danger);font-weight:500;display:flex;align-items:center;gap:5px} .field .errmsg svg{width:13px;height:13px} .inp-group{position:relative} .inp-group .inp{padding-right:42px} .inp-group .suffix{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--n-400);cursor:pointer} .inp-group .suffix:hover{background:var(--n-100);color:var(--n-700)} .inp-group .prefix{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--n-500);font-weight:600;pointer-events:none} .inp-group.has-prefix .inp{padding-left:30px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px} .form-grid .span2{grid-column:span 2} .form-section{padding:22px 24px;border-bottom:1px solid var(--border)} .form-section:last-child{border-bottom:none} .form-section .fs-head{margin-bottom:18px} .form-section .fs-head h4{font-size:14.5px;font-weight:650;color:var(--n-900)} .form-section .fs-head p{font-size:12.5px;color:var(--n-500);margin-top:2px} /* switch */ .switch{position:relative;display:inline-flex;align-items:center;width:42px;height:24px;flex-shrink:0} .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1} .switch .track{position:absolute;inset:0;background:var(--n-300);border-radius:999px;transition:background .18s} .switch .thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s} .switch input:checked ~ .track{background:var(--primary)} .switch input:checked ~ .thumb{transform:translateX(18px)} .switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)} .switch-row:last-child{border-bottom:none} .switch-row .sr-main b{font-size:13.5px;font-weight:600;color:var(--n-900);display:block} .switch-row .sr-main span{font-size:12px;color:var(--n-500)} /* checkbox */ .check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--n-700)} .check input{appearance:none;width:19px;height:19px;border:1.5px solid var(--n-300);border-radius:6px;background:var(--card);display:grid;place-items:center;cursor:pointer;transition:all .13s;flex-shrink:0} .check input:checked{background:var(--primary);border-color:var(--primary)} .check input:checked::after{content:"";width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(43deg) translateY(-1px)} /* tag input */ .tag-input{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:42px;border:1px solid var(--border-strong);border-radius:10px;padding:6px 10px;background:var(--card)} .tag-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-100)} .tag{display:inline-flex;align-items:center;gap:6px;background:var(--primary-50);color:var(--primary);font-size:12.5px;font-weight:600;padding:4px 6px 4px 10px;border-radius:7px} .tag button{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;color:var(--primary)} .tag button:hover{background:var(--primary-200)} .tag svg{width:12px;height:12px} .tag-input input{border:none;outline:none;flex:1;min-width:80px;height:30px;font-size:13.5px} /* ===================== TABS ===================== */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding:0 4px} .tab{padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--n-500);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .13s,border-color .13s;display:inline-flex;align-items:center;gap:7px;cursor:pointer} .tab:hover{color:var(--n-800)} .tab.active{color:var(--primary);border-bottom-color:var(--primary)} .tab .cnt{font-size:11px;font-weight:700;background:var(--n-100);color:var(--n-500);padding:1px 7px;border-radius:999px} .tab.active .cnt{background:var(--primary-50);color:var(--primary)} /* ===================== KPI ===================== */ .kpi{padding:18px 20px 16px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:128px} .kpi-top{display:flex;align-items:center;gap:11px;margin-bottom:13px} .kpi-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0} .kpi-ic svg{width:19px;height:19px} .kpi-ttl{font-size:12.5px;font-weight:600;color:var(--n-500)} .kpi-val{font-size:29px;font-weight:750;letter-spacing:-.03em;color:var(--n-900);line-height:1;font-variant-numeric:tabular-nums} .kpi-val .cur{font-size:18px;font-weight:650;color:var(--n-500);margin-right:1px} .kpi-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:13px} .delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;padding:2px 7px 2px 5px;border-radius:999px} .delta svg{width:13px;height:13px} .delta.up{color:var(--success);background:var(--success-bg)} .delta.down{color:var(--danger);background:var(--danger-bg)} .kpi-note{font-size:12px;color:var(--n-500)} .kpi-spark{position:absolute;right:0;bottom:0;width:118px;height:50px;opacity:.9} /* ===================== EMPTY / SKELETON ===================== */ .empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:54px 24px;gap:6px} .empty .ill{width:84px;height:84px;border-radius:20px;background:var(--primary-50);display:grid;place-items:center;margin-bottom:12px} .empty .ill svg{width:36px;height:36px;color:var(--primary);stroke-width:1.7} .empty h4{font-size:16px;font-weight:650;color:var(--n-900)} .empty p{font-size:13.5px;color:var(--n-500);max-width:42ch;margin-bottom:10px} .skel{background:linear-gradient(90deg,var(--n-100) 25%,var(--n-200) 50%,var(--n-100) 75%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:6px} @keyframes shimmer{to{background-position:-200% 0}} /* ===================== TIMELINE ===================== */ .tl{padding:18px 22px 10px;position:relative} .tl-item{display:flex;gap:14px;padding-bottom:18px;position:relative} .tl-item:last-child{padding-bottom:4px} .tl-line{position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--border)} .tl-item:last-child .tl-line{display:none} .tl-dot{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;z-index:1} .tl-dot svg{width:14px;height:14px} .tl-body{flex:1;padding-top:2px} .tl-body .tt{font-size:13px;color:var(--n-700);line-height:1.45} .tl-body .tt b{color:var(--n-900);font-weight:650} .tl-body .tm{font-size:11.5px;color:var(--n-400);margin-top:3px;font-weight:500} /* ===================== MODAL / DRAWER ===================== */ .scrim{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;display:grid;place-items:center;padding:24px} .scrim.show{opacity:1;pointer-events:auto} .modal{background:var(--card);border-radius:16px;box-shadow:var(--sh-xl);width:100%;max-width:460px;transform:scale(.96) translateY(8px);transition:transform .22s cubic-bezier(.22,1,.36,1);max-height:90vh;overflow:auto} .scrim.show .modal{transform:none} .modal-h{display:flex;align-items:flex-start;gap:13px;padding:22px 24px 0} .modal-h .mh-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0} .modal-h h3{font-size:17px;font-weight:700;color:var(--n-900)} .modal-h p{font-size:13px;color:var(--n-500);margin-top:3px} .modal-h .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--n-400)} .modal-h .x:hover{background:var(--n-100);color:var(--n-700)} .modal-b{padding:20px 24px} .modal-f{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border);background:var(--n-50);border-radius:0 0 16px 16px} /* ===================== TOAST ===================== */ .toast-wrap{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center} .toast{background:var(--n-900);color:#fff;padding:13px 18px;border-radius:12px;display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;box-shadow:var(--sh-lg);transform:translateY(120px);opacity:0;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s} .toast.show{transform:none;opacity:1} .toast svg{width:18px;height:18px} .toast.ok svg{color:#4ADE80} .toast.warn svg{color:#FBBF24} /* ===================== CHART HELPERS ===================== */ .legend{display:flex;gap:16px;flex-wrap:wrap} .legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--n-600)} .legend i{width:11px;height:11px;border-radius:3px;display:inline-block} .bars{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;height:200px;margin-top:18px;padding:0 4px} .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end} .bar-pair{display:flex;align-items:flex-end;gap:5px;height:100%;width:100%;justify-content:center} .bar{width:15px;border-radius:5px 5px 0 0;transition:height .6s cubic-bezier(.22,1,.36,1);position:relative} .bar.exp{background:var(--primary-100)} .bar.col{background:var(--primary)} .bar-x{font-size:11.5px;font-weight:600;color:var(--n-500)} .bar-col:hover .bar-x{color:var(--n-800)} /* ===================== DARK THEME ===================== */ [data-theme="dark"]{ --primary:#6366F1; --primary-600:#4F46E5; --primary-700:#4338CA; --primary-50:rgba(99,102,241,.16); --primary-100:rgba(99,102,241,.30); --primary-200:rgba(99,102,241,.46); --n-0:#0B1120; --n-50:#10182A; --n-100:#1B2336; --n-200:#283047; --n-300:#3C4763; --n-400:#6E7A96; --n-500:#94A0B8; --n-600:#B0BAD0; --n-700:#C9D1E1; --n-800:#DFE5F0; --n-900:#F2F5FB; --success:#4ADE80; --success-bg:rgba(34,197,94,.15); --success-bd:rgba(34,197,94,.32); --warning:#FBBF24; --warning-bg:rgba(217,119,6,.17); --warning-bd:rgba(217,119,6,.36); --danger:#F87171; --danger-bg:rgba(220,38,38,.17); --danger-bd:rgba(220,38,38,.36); --info:#22D3EE; --info-bg:rgba(8,145,178,.17); --info-bd:rgba(8,145,178,.36); --purple:#A78BFA; --purple-bg:rgba(124,58,237,.18); --purple-bd:rgba(124,58,237,.4); --page:#0A0F1C; --card:#131B2C; --border:#222C42; --border-strong:#2E3A54; --side-bg:#070B16; --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 1px 3px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3); --sh-lg:0 10px 30px rgba(0,0,0,.55); --sh-xl:0 18px 50px rgba(0,0,0,.65); } [data-theme="dark"] .seg button.on{background:var(--n-300);color:var(--n-900)} [data-theme="dark"] .toast{background:var(--n-200);color:var(--n-900)} [data-theme="dark"] .nav-label{color:#4A5670} [data-theme="dark"] .icon-btn .dot{border-color:var(--card)} [data-theme="dark"] .switch .track{background:var(--n-300)} [data-theme="dark"] .sel{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='%236E7A96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")} @media (max-width:1180px){.kpi-spark{display:none}} /* ============================================================ Aranabilir açılır menü (native