/* ================================================================== LiderHavale — yönetim paneli teması ------------------------------------------------------------------ Yerleşim GüncelHavale/UygunHavale ile aynı ailede: SOL DİKEY MENÜ, üstte ince başlık çubuğu, sağda içerik. Farkı renkte ve dokuda: düz tek renk yerine derinlik — degrade kenar menü, renkli KPI kartları, gölge ve parıltı katmanları. TÜM TEMA aşağıdaki :root bloğundan sürülüyor. ================================================================== */ :root{ /* --- marka: mavi / sarı / kırmızı --- */ --brand-900:#0B1437; --brand-800:#132056; --brand-700:#1B2E78; --brand-600:#2242A6; --brand:#2C5BEF; --brand-400:#5B85FF; --brand-300:#93B2FF; --brand-100:#E4ECFF; --brand-50:#F1F5FF; --gold:#FFB020; --gold-600:#C77700; --gold-100:#FFF3DC; --red:#E5484D; --red-600:#D03438; --red-100:#FFE9E9; --green:#12A150; --green-600:#0E9F6E; --green-100:#E3F8EC; --violet:#7C5CFF; --teal:#0FA3A3; /* --- degradeler: "renkler basit kalmış" denen yer --- */ --grad-sidebar:linear-gradient(175deg,#0B1437 0%,#142260 48%,#1B2E78 100%); --grad-brand:linear-gradient(135deg,#2C5BEF 0%,#5B85FF 100%); --grad-gold:linear-gradient(135deg,#FF9500 0%,#FFC24B 100%); --grad-red:linear-gradient(135deg,#D03438 0%,#FF6B6F 100%); --grad-green:linear-gradient(135deg,#0E9F6E 0%,#3FD18B 100%); --grad-violet:linear-gradient(135deg,#6B46F0 0%,#A78BFF 100%); /* --- yüzeyler --- */ --bg:#F4F6FC; --surface:#FFFFFF; --surface-2:#F7F9FE; --border:#E3E8F5; --border-2:#CBD4EA; --ink:#101443; --ink-2:#4B5480; --ink-3:#8791B5; --radius:14px; --radius-sm:10px; --shadow-sm:0 1px 2px rgba(16,20,67,.05); --shadow:0 2px 6px rgba(16,20,67,.06), 0 10px 30px rgba(16,20,67,.07); --shadow-lg:0 20px 60px rgba(16,20,67,.16); --sidebar-w:246px; --topbar-h:62px; } /* ==================================================== KARANLIK TEMA ile açılır. Değişken adları aynı kalır; yalnız yüzey, çizgi, yazı ve açık tonlu arka planlar koyulaşır. Marka renkleri (mavi/sarı/kırmızı) iki temada da aynıdır. */ :root{color-scheme:light} :root[data-theme="dark"]{ color-scheme:dark; --bg:#0A0F24; --surface:#121A36; --surface-2:#18213F; --border:#243058; --border-2:#34416E; --ink:#E7ECFF; --ink-2:#AEB8DC; --ink-3:#7D88B3; --brand-50:#16214A; --brand-100:#1C2A5C; --brand-300:#4D6FE0; --gold-100:#3A2C0E; --gold-600:#FFC24B; --red-100:#3A171C; --red-600:#FF7A7E; --green-100:#0F3325; --green-600:#3FD18B; --grad-sidebar:linear-gradient(175deg,#060A1C 0%,#0C1438 48%,#12205A 100%); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 2px 6px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); --shadow-lg:0 20px 60px rgba(0,0,0,.55); } :root[data-theme="dark"] .badge.ok{border-color:#1D5A40} :root[data-theme="dark"] .badge.warn{border-color:#6A4E14} :root[data-theme="dark"] .badge.err{border-color:#6B2A30} :root[data-theme="dark"] .badge.info{border-color:#2E4488} :root[data-theme="dark"] .modal{background:rgba(0,0,0,.6)} :root[data-theme="dark"] .ov{background:rgba(0,0,0,.55)} .tb-btn.tema .ay{display:none} :root[data-theme="dark"] .tb-btn.tema .gunes{display:none} :root[data-theme="dark"] .tb-btn.tema .ay{display:inline} *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:14px/1.55 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; } .mono,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} a{color:var(--brand); text-decoration:none} button{font:inherit} /* ==================================================== SOL MENÜ */ .sidebar{ position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w); z-index:40; background:var(--grad-sidebar); color:#fff; display:flex; flex-direction:column; box-shadow:4px 0 28px rgba(11,20,55,.22); } /* Üstte altın ince şerit — üç markası rengini menüye de taşıyor. */ .sidebar::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--brand-400) 0 40%,var(--gold) 40% 74%,var(--red) 74% 100%); } /* Arkaplanda yumuşak parıltı — düz renk hissini kırar. */ .sidebar::after{ content:""; position:absolute; inset:auto -40% -12% -40%; height:340px; pointer-events:none; background:radial-gradient(60% 60% at 50% 100%,rgba(91,133,255,.34),transparent 70%); } .sb-brand{ display:flex; align-items:center; gap:11px; padding:18px 20px 16px; position:relative; z-index:1; } .sb-brand .logo{ width:38px; height:38px; border-radius:11px; background:var(--grad-brand); display:grid; place-items:center; flex:none; box-shadow:0 6px 18px rgba(44,91,239,.5); } .sb-brand .logo span{display:flex; gap:2.5px; align-items:flex-end} .sb-brand .logo i{display:block; width:4px; border-radius:2px; background:#fff} .sb-brand .logo i:nth-child(1){height:8px; opacity:.6} .sb-brand .logo i:nth-child(2){height:13px; background:var(--gold)} .sb-brand .logo i:nth-child(3){height:18px} .sb-brand b{font-size:16px; letter-spacing:-.01em; display:block; line-height:1.2} .sb-brand small{font-size:10.5px; color:rgba(255,255,255,.5); letter-spacing:.09em; text-transform:uppercase} .sb-nav{flex:1; overflow-y:auto; padding:6px 12px 18px; position:relative; z-index:1} .sb-nav::-webkit-scrollbar{width:5px} .sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:99px} .sb-label{ font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.36); padding:16px 12px 7px; font-weight:700; } .sb-item{ width:100%; border:0; background:none; cursor:pointer; text-align:left; display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; margin-bottom:2px; color:rgba(255,255,255,.72); font-size:13.5px; font-weight:500; position:relative; transition:background .12s, color .12s; } .sb-item:hover{background:rgba(255,255,255,.08); color:#fff} .sb-item.on{ background:var(--grad-brand); color:#fff; font-weight:600; box-shadow:0 6px 18px rgba(44,91,239,.42); } /* Aktif öğenin solundaki altın işaret */ .sb-item.on::before{ content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--gold); } .sb-item .ic{ width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center; font-size:13px; background:rgba(255,255,255,.1); } .sb-item.on .ic{background:rgba(255,255,255,.2)} .sb-item .cnt{ margin-left:auto; background:var(--red); color:#fff; border-radius:99px; font:700 10.5px/1 ui-monospace,monospace; padding:4px 7px; box-shadow:0 2px 8px rgba(229,72,77,.5); } /* Menü altındaki durum kutusu */ .sb-foot{padding:14px; position:relative; z-index:1} .sb-status{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:11px 13px; } .sb-status .row{display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.8)} .sb-status .row + .row{margin-top:7px} .sb-status .dot{width:7px; height:7px; border-radius:50%; flex:none; box-shadow:0 0 0 3px rgba(18,161,80,.22)} .sb-status .dot.ok{background:#3FD18B} .sb-status .dot.warn{background:var(--gold); box-shadow:0 0 0 3px rgba(255,176,32,.22)} .sb-status .dot.err{background:var(--red); box-shadow:0 0 0 3px rgba(229,72,77,.25)} .sb-status .dot:not(.ok):not(.warn):not(.err){background:rgba(255,255,255,.35); box-shadow:none} /* ==================================================== ÜST ÇUBUK */ .main{margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column} .topbar{ height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:30; } .topbar .crumb{font-size:12.5px; color:var(--ink-3)} .topbar .crumb b{color:var(--ink)} .topbar .spacer{flex:1} .search{position:relative; width:min(320px,30vw)} .search input{ width:100%; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); padding:0 12px 0 36px; font-size:13.5px; color:var(--ink); } .search input:focus{outline:0; border-color:var(--brand-300); background:var(--surface); box-shadow:0 0 0 4px var(--brand-50)} .search .ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-3)} .tb-btn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; color:var(--ink-2); display:grid; place-items:center; position:relative; } .tb-btn:hover{border-color:var(--brand-300); color:var(--brand); background:var(--surface)} .tb-btn .dot{ position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--red); border:1.5px solid var(--surface); } .me{display:flex; align-items:center; gap:10px; padding-left:6px; border-left:1px solid var(--border)} .me .av{ width:36px; height:36px; border-radius:10px; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; box-shadow:0 4px 12px rgba(44,91,239,.35); } .me .nm{font-size:13px; font-weight:600; line-height:1.25} .me .rl{font-size:11px; color:var(--ink-3)} /* ==================================================== SAYFA */ .page{padding:22px; flex:1} .phead{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap} .phead h1{margin:0; font-size:22px; letter-spacing:-.02em} .phead .sub{color:var(--ink-3); font-size:13px} .phead .spacer{flex:1} /* ==================================================== KPI */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:14px; margin-bottom:18px} .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); } /* Kartın sağ üstünde renkli parıltı — düz beyaz kart hissini kırar. */ .kpi::after{ content:""; position:absolute; top:-46px; right:-46px; width:130px; height:130px; border-radius:50%; opacity:.13; background:var(--grad-brand); pointer-events:none; } .kpi.gold::after{background:var(--grad-gold)} .kpi.red::after{background:var(--grad-red)} .kpi.green::after{background:var(--grad-green)} .kpi.violet::after{background:var(--grad-violet)} .kpi .ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:17px; color:#fff; margin-bottom:12px; background:var(--grad-brand); box-shadow:0 6px 16px rgba(44,91,239,.34); } .kpi.gold .ic{background:var(--grad-gold); box-shadow:0 6px 16px rgba(255,149,0,.34)} .kpi.red .ic{background:var(--grad-red); box-shadow:0 6px 16px rgba(208,52,56,.34)} .kpi.green .ic{background:var(--grad-green); box-shadow:0 6px 16px rgba(14,159,110,.34)} .kpi.violet .ic{background:var(--grad-violet); box-shadow:0 6px 16px rgba(107,70,240,.34)} .kpi .k{font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); font-weight:600} .kpi .v{font-size:27px; font-weight:800; letter-spacing:-.025em; margin:5px 0 3px; font-variant-numeric:tabular-nums} .kpi .d{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px} .trend{font-weight:700; font-size:12px; padding:2px 6px; border-radius:5px} .trend.up{color:var(--green-600); background:var(--green-100)} .trend.down{color:var(--red-600); background:var(--red-100)} /* ==================================================== KART */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:18px; overflow:hidden; box-shadow:var(--shadow-sm); } .card-h{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--border)} .card-h h3{margin:0; font-size:15px; letter-spacing:-.01em} .card-h .sub{font-size:12px; color:var(--ink-3)} .card-h .spacer{flex:1} .card-b{padding:18px} .grid2{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:18px; align-items:start} /* ==================================================== FİLTRE */ .filters{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:11px 14px; margin-bottom:18px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .filters .sep{width:1px; height:24px; background:var(--border)} .filters .spacer{flex:1} .filters .ara{flex:1; min-width:230px} .seg{display:flex; gap:3px; background:var(--surface-2); padding:4px; border-radius:10px; border:1px solid var(--border)} .seg button{ border:0; background:none; cursor:pointer; padding:7px 14px; border-radius:7px; font-size:13px; color:var(--ink-2); font-weight:500; white-space:nowrap; flex:none; } .seg button.on{background:var(--grad-brand); color:#fff; font-weight:600; box-shadow:0 3px 10px rgba(44,91,239,.3)} select,input[type=text],input[type=search],input[type=number],input[type=date],input[type=password],textarea{ border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:9px; padding:8px 11px; font-size:13px; min-height:38px; } select:focus,input:focus,textarea:focus{outline:0; border-color:var(--brand-300); box-shadow:0 0 0 4px var(--brand-50)} .btn{ border:1px solid var(--border-2); background:var(--surface); color:var(--ink); border-radius:9px; padding:0 14px; height:38px; cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; } .btn:hover{border-color:var(--brand); color:var(--brand)} .btn.primary{background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:0 5px 16px rgba(44,91,239,.34)} .btn.primary:hover{filter:brightness(1.06); color:#fff} .btn.gold{background:var(--grad-gold); border-color:transparent; color:#4A2B00; box-shadow:0 5px 16px rgba(255,149,0,.34)} .btn.danger{background:var(--grad-red); border-color:transparent; color:#fff; box-shadow:0 5px 16px rgba(208,52,56,.34)} .btn.danger:hover,.btn.gold:hover{filter:brightness(1.06)} .btn.sm{height:32px; padding:0 11px; font-size:12px} .btn.ghost{background:none} /* ==================================================== TABLO */ .tw{overflow-x:auto} table{width:100%; border-collapse:collapse; font-size:13px} thead th{ text-align:left; background:var(--surface-2); color:var(--ink-3); white-space:nowrap; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; padding:11px 16px; border-bottom:1px solid var(--border); } tbody td{padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr.clickable{cursor:pointer; transition:background .1s} tbody tr.clickable:hover{background:var(--brand-50)} tbody tr.active{background:var(--brand-50); box-shadow:inset 3px 0 0 var(--brand)} td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} td.strong{font-weight:700} .sub2{font-size:11.5px; color:var(--ink-3)} .trunc{max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* Durum rozeti: renk + METİN. Renk tek başına anlam taşımıyor. */ .badge{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font:700 11.5px/1 inherit; padding:6px 10px; border-radius:7px; border:1px solid transparent; } .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none} .badge.ok{background:var(--green-100); color:var(--green-600); border-color:#BFE9D2} .badge.warn{background:var(--gold-100); color:var(--gold-600); border-color:#F6DCAD} .badge.err{background:var(--red-100); color:var(--red-600); border-color:#F7CBCC} .badge.info{background:var(--brand-100); color:var(--brand-600); border-color:#C9D8FF} .badge.mute{background:var(--surface-2); color:var(--ink-3); border-color:var(--border)} .empty{padding:54px 20px; text-align:center; color:var(--ink-3); font-size:13.5px} /* ==================================================== AYAR SATIRI */ .satir-ayar{ display:flex; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid var(--border); } .satir-ayar:last-child{border-bottom:0; padding-bottom:0} .satir-ayar > div:first-child{flex:1; min-width:0} .satir-ayar .ad{font-weight:700} .satir-ayar button.badge{cursor:pointer; flex:none} .satir-ayar button.badge:hover{filter:brightness(.97)} .ikili{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:14px} .ikili label{display:block} .ikili label .sub2{margin-bottom:6px} .ikili input{width:100%} /* ==================================================== GRAFİK */ .chart{width:100%; display:block} .bars{display:flex; flex-direction:column; gap:13px} .bar .t{display:flex; align-items:center; gap:9px; font-size:12.5px; margin-bottom:6px} .bar .t .spacer{flex:1} .bar .t b{font-variant-numeric:tabular-nums; font-size:14px} .track{height:9px; background:var(--surface-2); border-radius:99px; overflow:hidden; border:1px solid var(--border)} .fill{height:100%; border-radius:99px} .tip{ position:fixed; z-index:70; pointer-events:none; background:var(--brand-900); color:#fff; border-radius:10px; padding:9px 13px; font-size:12.5px; line-height:1.5; box-shadow:var(--shadow-lg); transform:translate(-50%,-118%); white-space:nowrap; } .tip b{font-variant-numeric:tabular-nums; font-size:14px} .tip.hidden{display:none} /* ==================================================== ÇEKMECE */ .ov{position:fixed; inset:0; background:rgba(16,20,67,.42); backdrop-filter:blur(2px); z-index:55} .ov.hidden{display:none} .drawer{ position:fixed; top:0; right:0; bottom:0; width:min(640px,96vw); z-index:56; background:var(--bg); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .2s cubic-bezier(.32,.72,0,1); display:flex; flex-direction:column; } .drawer.open{transform:none} .drawer-h{ padding:18px 20px; background:var(--grad-sidebar); color:#fff; display:flex; gap:12px; align-items:flex-start; position:relative; } .drawer-h::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg,var(--brand-400) 0 40%,var(--gold) 40% 74%,var(--red) 74% 100%); } .drawer-h h2{margin:0 0 4px; font-size:19px; letter-spacing:-.01em} .drawer-h .sub{font-size:12.5px; color:rgba(255,255,255,.66)} .drawer-h .x{ border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; border-radius:9px; height:32px; padding:0 12px; cursor:pointer; font-size:12.5px; font-weight:600; } .drawer-h .x:hover{background:rgba(255,255,255,.2)} .drawer-b{flex:1; overflow:auto; padding:18px 20px 34px} .kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:10px; margin-bottom:16px} .kv > div{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px} .kv dt{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; font-weight:600} .kv dd{margin:0; font-size:14px; font-weight:700; word-break:break-word} .stitle{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:20px 0 8px} pre.code{ margin:0; background:var(--brand-900); color:#DCE4FF; border-radius:var(--radius-sm); padding:14px 16px; overflow:auto; font-size:12px; line-height:1.65; border:1px solid rgba(255,255,255,.08); } .tl{list-style:none; margin:0; padding:0} .tl li{position:relative; padding:0 0 18px 28px; border-left:2px solid var(--border); margin-left:7px} .tl li:last-child{border-left-color:transparent; padding-bottom:0} .tl li::before{ content:""; position:absolute; left:-8px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); border:3px solid var(--brand); box-shadow:0 0 0 3px var(--brand-50); } .tl li.ok::before{border-color:var(--green-600); box-shadow:0 0 0 3px var(--green-100)} .tl li.err::before{border-color:var(--red-600); box-shadow:0 0 0 3px var(--red-100)} .tl li.warn::before{border-color:var(--gold-600); box-shadow:0 0 0 3px var(--gold-100)} .tl b{display:block; font-size:13.5px} .tl .t{font-size:11.5px; color:var(--ink-3)} /* ==================================================== GİRİŞ */ .login{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:var(--grad-sidebar); padding:20px; } .login::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(52% 48% at 50% 8%,rgba(91,133,255,.32),transparent 68%); } .login .box{ width:380px; max-width:100%; background:var(--surface); border-radius:18px; padding:30px; box-shadow:var(--shadow-lg); position:relative; z-index:1; } .login .box::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:18px 18px 0 0; background:linear-gradient(90deg,var(--brand) 0 40%,var(--gold) 40% 74%,var(--red) 74% 100%); } .login h1{margin:14px 0 4px; font-size:21px; letter-spacing:-.02em} .login p{margin:0 0 22px; color:var(--ink-3); font-size:13px} .login label{display:block; margin-bottom:13px; font-size:12.5px; color:var(--ink-2); font-weight:600} .login input{width:100%; margin-top:5px} .login .btn{width:100%; justify-content:center; height:42px; margin-top:6px} .login .logo{ width:46px; height:46px; border-radius:13px; background:var(--grad-brand); display:grid; place-items:center; box-shadow:0 8px 22px rgba(44,91,239,.42); } .login .logo span{display:flex; gap:3px; align-items:flex-end} .login .logo i{display:block; width:5px; border-radius:2px; background:#fff} .login .logo i:nth-child(1){height:10px; opacity:.6} .login .logo i:nth-child(2){height:16px; background:var(--gold)} .login .logo i:nth-child(3){height:22px} /* ==================================================== SAYAÇLAR / HAVUZ */ .sayaclar{display:flex; gap:6px; align-items:center} .sayac{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:99px; border:1px solid var(--border); background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap} .sayac b{color:var(--ink)} .sayac.var{border-color:#F6DCAD; background:var(--gold-100); color:var(--gold-600)} .sayac.var b{color:var(--gold-600)} .sayac.havuzda{border-color:#C9D8FF; background:var(--brand-100); color:var(--brand-600)} .sayac.havuzda b{color:var(--brand-600)} :root[data-theme="dark"] .sayac.var{border-color:#6A4E14} :root[data-theme="dark"] .sayac.havuzda{border-color:#2E4488; color:var(--brand-300)} :root[data-theme="dark"] .sayac.havuzda b{color:var(--brand-300)} .sayac .ok{font-size:14px} @media (max-width:900px){ .sayaclar .sayac .ad{display:none} } .card.havuz{border-color:#F6DCAD; box-shadow:0 0 0 3px rgba(255,176,32,.12), var(--shadow-sm)} :root[data-theme="dark"] .card.havuz{border-color:#6A4E14} .card.havuz .card-h h3{display:flex; align-items:center; gap:8px} .islemler{display:flex; gap:6px; flex-wrap:wrap; align-items:center} .islemler .btn{white-space:nowrap} tbody tr.satir-acik td:first-child{box-shadow:inset 3px 0 0 var(--gold)} tbody tr.satir-supheli td:first-child{box-shadow:inset 3px 0 0 var(--red)} .sayfalama{display:flex; gap:12px; align-items:center; justify-content:center; margin:14px 0 4px} .kpi.clickable{cursor:pointer; transition:transform .12s} .kpi.clickable:hover{transform:translateY(-2px)} .modal .coklu{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 12px; max-height:180px; overflow:auto; padding:10px; margin-top:5px; border:1px solid var(--border); border-radius:10px} .modal .coklu label{display:flex; gap:7px; align-items:center; font-weight:500; margin:0} .modal .coklu input{width:auto; margin:0} .kasa-eksi{color:var(--green-600)} .kasa-arti{color:var(--red-600)} /* ==================================================== FORM PENCERESİ */ .modal{position:fixed; inset:0; z-index:70; display:none; place-items:center; grid-template-columns:minmax(0,1fr); background:rgba(11,20,55,.46); padding:20px; overflow:auto} .modal.open{display:grid} .modal .box{ width:480px; max-width:100%; background:var(--surface); border-radius:16px; padding:24px; box-shadow:var(--shadow-lg); position:relative; } .modal .box::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,var(--brand) 0 40%,var(--gold) 40% 74%,var(--red) 74% 100%); } .modal h2{margin:4px 0 16px; font-size:18px; letter-spacing:-.01em} .modal label{display:block; margin-bottom:12px; font-size:12.5px; color:var(--ink-2); font-weight:600} .modal label .ip{display:block; font-weight:400; color:var(--ink-3); font-size:11.5px; margin-top:3px} .modal input,.modal select,.modal textarea{width:100%; margin-top:5px} .modal .iki{display:grid; grid-template-columns:1fr 1fr; gap:0 12px} .modal .onay{display:flex; align-items:center; gap:8px; font-weight:500} .modal .onay input{width:auto; margin:0} .modal .alt{display:flex; gap:8px; justify-content:flex-end; margin-top:8px} .modal .hata{margin-bottom:12px} .modal .sir{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-family:ui-monospace,monospace; font-size:12.5px; word-break:break-all} @media (max-width:560px){ .modal .iki{grid-template-columns:1fr} } /* ==================================================== BİLDİRİM */ .toasts{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:9px; align-items:center} .toast{ background:var(--brand-900); color:#fff; border-radius:11px; padding:12px 18px; font-size:13px; box-shadow:var(--shadow-lg); animation:rise .18s ease; border:1px solid rgba(255,255,255,.1); } .toast.err{background:var(--red-600)} .toast.ok{background:var(--green-600)} @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}} .spin{ display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--brand); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; } @keyframes sp{to{transform:rotate(360deg)}} /* ==================================================== MOBİL */ .burger{display:none} @media (max-width:1180px){ .grid2{grid-template-columns:minmax(0,1fr)} } @media (max-width:900px){ /* Sol menü kalıyor ama gerektiğinde açılıyor — dar ekranda sabit 246px kolonu ayırmak içeriğe yer bırakmıyor. */ .sidebar{transform:translateX(-100%); transition:transform .2s ease} .sidebar.open{transform:none} .main{margin-left:0} .burger{display:grid} .search{display:none} .me .nm,.me .rl{display:none} .page{padding:14px} .topbar{padding:0 14px; gap:10px} /* KPI'lar telefonda tek sütuna inince grafik çok aşağıda kalıyordu. İkişerli dizilir, ilki (bugünkü hacim) iki sütunu kaplar. */ .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px} .kpis .kpi:first-child{grid-column:span 2} .kpi{padding:13px 14px} .kpi .ic{width:32px; height:32px; font-size:14px; margin-bottom:9px} .kpi .v{font-size:22px; margin:4px 0 2px} .kpi .k{font-size:10.5px} .kpi .d{font-size:11px; flex-wrap:wrap} .kpis .kpi:first-child .v{font-size:28px} /* Durum sekmeleri telefonda tek satıra sığmıyor; kırpmak yerine kaydırılır — yoksa son sekme ("Şüpheli") ekran dışında kalıyor. */ .seg{width:100%; overflow-x:auto; scrollbar-width:none} .seg::-webkit-scrollbar{height:0} .filters .ara{min-width:0; width:100%} .filters #siteSuz{flex:1} /* Tablo -> kart */ .tw table,.tw thead,.tw tbody,.tw tr,.tw td{display:block; width:auto} .tw thead{display:none} .tw tbody tr{ background:var(--surface); border:1px solid var(--border); border-radius:12px; margin:0 0 10px; padding:12px 14px; box-shadow:var(--shadow-sm); } .tw tbody tr.active{box-shadow:0 0 0 2px var(--brand)} .tw tbody td{border:0; padding:4px 0; display:flex; gap:10px; align-items:baseline} .tw tbody td::before{ content:attr(data-label); flex:0 0 94px; color:var(--ink-3); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; } .tw tbody td.num{text-align:left} .tw tbody td.bas{font-size:16px; font-weight:800; padding-bottom:6px} .tw tbody td.bas::before{display:none} .trunc{max-width:none; white-space:normal} .drawer{width:100vw} .btn{min-height:40px} /* iOS odakta yakınlaştırmasın: 16px altı yazı odaklanınca sayfayı büyütüyor. Seçici, yukarıdaki `input[type=…]` kuralıyla AYNI özgüllükte yazılmalı — yalnız `input` yazmak (0,0,1) o kuralı (0,1,1) ezemiyor. */ select,textarea, input[type=text],input[type=search],input[type=number],input[type=date],input[type=password]{ min-height:42px; font-size:16px; } }