/* ============ TOKENS — KOYU TEMA VARSAYILAN ============ */ :root{ --bg:#070B14; --bg-grid:#0C1526; --panel:#0D1728; --panel-2:#111E36; --panel-3:#152641; --line:#1B2A47; --line-soft:#14203a; --brand:#002C7E; --accent:#4C82F7; --accent-soft:#12244a; --accent-line:#26437e; --txt:#E7EDF9; --txt-2:#98A8C4; --txt-3:#5F718F; --ok:#1FB57A; --ok-soft:#0d2b22; --warn:#E8A33D; --warn-soft:#2d2213; --crit:#F0555A; --crit-soft:#2e1418; --neut:#5F718F; --neut-soft:#161f31; --shadow:0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.5); --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","JetBrains Mono",Consolas,monospace; } /* ---- AYDINLIK TEMA (ayrı tasarlandı, koyu temanın tersi değil) ---- */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#F4F7FC; --bg-grid:#E7EDF7; --panel:#FFFFFF; --panel-2:#F5F8FD; --panel-3:#E9F0FA; --line:#D2DCEC; --line-soft:#E6ECF6; --brand:#002C7E; --accent:#0B47C4; --accent-soft:#E7EEFC; --accent-line:#B7CCF2; --txt:#0A1526; --txt-2:#48597A; --txt-3:#77879F; --ok:#0E8A57; --ok-soft:#E2F5EC; --warn:#9C6203; --warn-soft:#FBEFD9; --crit:#C42B31; --crit-soft:#FBE5E6; --neut:#77879F; --neut-soft:#EEF2F8; --shadow:0 1px 2px rgba(10,21,38,.05), 0 8px 22px rgba(10,21,38,.07); } } :root[data-theme="light"]{ --bg:#F4F7FC; --bg-grid:#E7EDF7; --panel:#FFFFFF; --panel-2:#F5F8FD; --panel-3:#E9F0FA; --line:#D2DCEC; --line-soft:#E6ECF6; --brand:#002C7E; --accent:#0B47C4; --accent-soft:#E7EEFC; --accent-line:#B7CCF2; --txt:#0A1526; --txt-2:#48597A; --txt-3:#77879F; --ok:#0E8A57; --ok-soft:#E2F5EC; --warn:#9C6203; --warn-soft:#FBEFD9; --crit:#C42B31; --crit-soft:#FBE5E6; --neut:#77879F; --neut-soft:#EEF2F8; --shadow:0 1px 2px rgba(10,21,38,.05), 0 8px 22px rgba(10,21,38,.07); } /* ============ TEMEL ============ */ *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--txt); font-family:var(--font-ui); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .lbl{ font-family:var(--font-mono);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--txt-3); } /* ============ KABUK ============ */ .app{display:grid;grid-template-columns:212px 1fr;min-height:100vh} @media (max-width:860px){ .app{grid-template-columns:1fr} } .rail{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 0} @media (max-width:860px){ .rail{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:8px 10px;gap:4px} } .brand{display:flex;align-items:center;gap:9px;padding:2px 16px 18px} @media (max-width:860px){ .brand{display:none} } .brand-mark{ width:26px;height:26px;flex:none;background:var(--brand); border:1px solid var(--accent-line);border-radius:5px;display:grid;place-items:center; } .brand-txt{line-height:1.15} .brand-txt b{display:block;font-size:13px;letter-spacing:.03em} .brand-txt span{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--txt-3)} .nav{display:flex;flex-direction:column;gap:1px;padding:0 8px} @media (max-width:860px){ .nav{flex-direction:row;padding:0} } .nav a,.nav button{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px; font-size:13px;color:var(--txt-2);border-left:2px solid transparent;white-space:nowrap;width:100%; } .nav a:hover,.nav button:hover{background:var(--panel-2);color:var(--txt)} .nav a[aria-current="page"],.nav button[aria-current="true"]{background:var(--accent-soft);color:var(--txt);border-left-color:var(--accent);font-weight:600} @media (max-width:860px){ .nav a,.nav button{width:auto} .nav a[aria-current="page"],.nav button[aria-current="true"]{border-left-color:transparent;box-shadow:inset 0 -2px 0 var(--accent)} } .nav svg{flex:none;opacity:.85} .nav .badge{margin-left:auto;font-family:var(--font-mono);font-size:10px;background:var(--panel-3);color:var(--txt-2);padding:1px 5px;border-radius:3px} .rail-foot{margin-top:auto;padding:14px 16px 0;border-top:1px solid var(--line-soft)} @media (max-width:860px){ .rail-foot{display:none} } .who{display:flex;align-items:center;gap:9px} .avatar{ width:28px;height:28px;flex:none;border-radius:4px;background:var(--brand);color:#fff; display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:700; } .who b{display:block;font-size:12px;font-weight:600} /* ============ ÜST ÇUBUK ============ */ .main{display:flex;flex-direction:column;min-width:0} .topbar{ display:flex;align-items:center;gap:10px;padding:11px 18px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 1px 1px, var(--bg-grid) 1px, transparent 0) 0 0/16px 16px, var(--panel); } .crumb{font-size:13px;color:var(--txt-2);min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .crumb b{color:var(--txt);font-weight:600} .crumb button{color:var(--accent);font-size:13px} .crumb button:hover{text-decoration:underline} .omni{ margin-left:auto;display:flex;align-items:center;gap:8px; border:1px solid var(--line);background:var(--bg);border-radius:4px;padding:6px 9px; min-width:190px;color:var(--txt-3);font-size:12px; } .omni:hover{border-color:var(--accent-line)} .omni kbd{margin-left:auto;font-family:var(--font-mono);font-size:10px;border:1px solid var(--line);border-radius:3px;padding:1px 4px;color:var(--txt-3)} @media (max-width:700px){ .omni{min-width:0} .omni span{display:none} } .icon-btn{ border:1px solid var(--line);background:var(--panel);border-radius:4px; width:32px;height:32px;display:grid;place-items:center;color:var(--txt-2);flex:none; } .icon-btn:hover{border-color:var(--accent-line);color:var(--txt)} .btn-primary{ background:var(--accent);color:#fff;padding:7px 13px;border-radius:4px; font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap; } .btn-primary:hover{filter:brightness(1.08)} @media (max-width:700px){ .btn-primary .t{display:none} } .view{padding:20px 18px 44px;display:none} .view[data-active="true"]{display:block} .view-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px} .view-head h1{margin:0;font-size:20px;font-weight:650;letter-spacing:-.01em;text-wrap:balance} .view-head p{margin:0;font-size:13px;color:var(--txt-2)} /* ============ PANO KARTLARI ============ */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:22px} .tile{ background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:13px 14px; display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden; } .tile::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--stripe,var(--neut))} .tile-n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:28px;line-height:1;font-weight:600;letter-spacing:-.02em} .tile-d{font-size:11px;color:var(--txt-3)} .tile-d em{font-style:normal;font-family:var(--font-mono);color:var(--txt-2)} .grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start} @media (max-width:980px){ .grid2{grid-template-columns:1fr} } .card{background:var(--panel);border:1px solid var(--line);border-radius:5px;overflow:hidden} .card-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)} .card-head h2{margin:0;font-size:13px;font-weight:650} .card-head .lbl{margin-left:auto} .card-body{padding:14px} /* ============ ROZETLER ============ */ .pill{ display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:3px; font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent; } .pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .pill.plain::before{display:none} .p-ok{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent)} .p-warn{color:var(--warn);background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)} .p-crit{color:var(--crit);background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 30%,transparent)} .p-info{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)} .p-neut{color:var(--neut);background:var(--neut-soft);border-color:var(--line)} /* ============ SLA ============ */ .sla{min-width:96px} .sla-t{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600} .sla-bar{height:2px;background:var(--line);margin-top:5px;border-radius:1px;overflow:hidden} .sla-fill{height:100%;background:var(--ok);transition:width .6s linear,background .3s;display:block} .sla.is-warn .sla-t{color:var(--warn)} .sla.is-warn .sla-fill{background:var(--warn)} .sla.is-crit .sla-t{color:var(--crit)} .sla.is-crit .sla-fill{background:var(--crit)} .sla.is-stop .sla-t{color:var(--txt-3)} .sla.is-stop .sla-fill{background:var(--neut)} /* ============ FİLTRELER ============ */ .filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .chip{ border:1px solid var(--line);background:var(--panel);padding:5px 10px;border-radius:4px; font-size:12px;color:var(--txt-2);display:inline-flex;align-items:center;gap:6px; } .chip:hover{border-color:var(--accent-line);color:var(--txt)} .chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--txt);font-weight:600} .chip .n{font-family:var(--font-mono);font-size:10px;color:var(--txt-3)} .filters .sep{width:1px;height:20px;background:var(--line);margin:0 3px} /* ============ KAYIT LİSTESİ (issue tarzı) ============ */ .issue-head{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line); } .issue-head .tab{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--txt-2);font-weight:550} .issue-head .tab[aria-pressed="true"]{color:var(--txt);font-weight:700} .issue-head .sorts{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap} .issue-head .sorts button{font-size:12.5px;color:var(--txt-2);display:inline-flex;align-items:center;gap:5px} .issue-head .sorts button:hover{color:var(--txt)} .issues{display:flex;flex-direction:column} .issue{ display:flex;gap:12px;align-items:flex-start;width:100%; padding:12px 14px;border-bottom:1px solid var(--line-soft); border-left:3px solid var(--stripe,transparent); transition:background .12s; } .issue:last-child{border-bottom:none} .issue:hover{background:var(--panel-2)} .issue-ico{flex:none;margin-top:2px;color:var(--stripe,var(--neut))} .issue-main{min-width:0;flex:1} .issue-title{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:14.5px;font-weight:650;letter-spacing:-.005em;line-height:1.35; } .issue-title .t:hover{color:var(--accent);text-decoration:underline} .issue-meta{margin-top:4px;font-size:12px;color:var(--txt-3);display:flex;gap:6px;flex-wrap:wrap;align-items:center} .issue-meta .no{font-family:var(--font-mono);font-weight:600;color:var(--txt-2)} .issue-meta .dotsep{opacity:.5} .issue-side{flex:none;display:flex;align-items:center;gap:14px;padding-top:2px} @media (max-width:720px){ .issue-side{width:100%;justify-content:space-between;padding-top:8px} .issue{flex-wrap:wrap} } .issue-side .who-mini{ width:24px;height:24px;border-radius:4px;background:var(--panel-3);color:var(--txt-2); display:grid;place-items:center;font-family:var(--font-mono);font-size:9.5px;font-weight:700; border:1px solid var(--line); } .tag{ display:inline-flex;align-items:center;padding:1px 7px;border-radius:10px; font-size:11px;font-weight:600;border:1px solid var(--line);color:var(--txt-2);background:var(--panel-3); } .tag.cat{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)} /* ============ KAYIT DETAYI ============ */ .detail-top{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px} .detail-title-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap} .detail-title{margin:0;font-size:23px;font-weight:650;letter-spacing:-.015em;line-height:1.25;text-wrap:balance;min-width:0;flex:1} .detail-title .no{color:var(--txt-3);font-family:var(--font-mono);font-weight:500} .detail-actions{display:flex;gap:7px;flex:none} .btn-sm{ border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:5px 10px; font-size:12.5px;color:var(--txt-2);display:inline-flex;align-items:center;gap:6px; } .btn-sm:hover{border-color:var(--accent-line);color:var(--txt)} .detail-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:var(--txt-2)} .detail{display:grid;grid-template-columns:1fr 292px;gap:18px;align-items:start} @media (max-width:980px){ .detail{grid-template-columns:1fr} } /* --- zaman çizelgesi --- */ .timeline{position:relative;padding-left:34px} .timeline::before{content:"";position:absolute;left:13px;top:8px;bottom:26px;width:2px;background:var(--line)} .tl-item{position:relative;margin-bottom:14px} .tl-ava{ position:absolute;left:-34px;top:0;width:28px;height:28px;border-radius:4px; background:var(--panel-3);color:var(--txt-2);border:1px solid var(--line); display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;font-weight:700; } .tl-ava.me{background:var(--brand);color:#fff;border-color:var(--accent-line)} .bubble{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--panel);position:relative} .bubble::before{ content:"";position:absolute;left:-6px;top:9px;width:10px;height:10px; background:var(--panel-2);border-left:1px solid var(--line);border-bottom:1px solid var(--line); transform:rotate(45deg); } .bubble-head{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:8px 12px;background:var(--panel-2);border-bottom:1px solid var(--line-soft); } .bubble-head b{font-size:12.5px;font-weight:650} .bubble-head time{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--txt-3)} .bubble-head .edit{opacity:0;transition:opacity .12s;font-size:11px;color:var(--txt-3);padding:2px 6px;border:1px solid var(--line);border-radius:3px} .tl-item:hover .bubble-head .edit{opacity:1} .bubble-head .edit:hover{color:var(--accent);border-color:var(--accent-line)} .bubble-body{padding:12px;font-size:13.5px;color:var(--txt-2);line-height:1.62} .bubble-body p{margin:0 0 9px} .bubble-body p:last-child{margin-bottom:0} .bubble-body code{ font-family:var(--font-mono);font-size:12px;background:var(--panel-3); border:1px solid var(--line);padding:1px 5px;border-radius:3px;color:var(--txt); } .bubble-body pre{ font-family:var(--font-mono);font-size:11.5px;line-height:1.6;background:var(--bg); border:1px solid var(--line);border-left:2px solid var(--accent);padding:10px 12px; border-radius:4px;margin:9px 0 0;overflow-x:auto;color:var(--txt-2); } .bubble.internal{border-color:color-mix(in srgb,var(--warn) 42%,var(--line))} .bubble.internal .bubble-head{background:var(--warn-soft)} .bubble.internal::before{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 42%,var(--line))} .attach{ display:inline-flex;align-items:center;gap:7px;margin-top:10px;border:1px solid var(--line); background:var(--panel-2);padding:6px 10px;border-radius:4px;font-size:12px;color:var(--txt-2); } .attach:hover{border-color:var(--accent-line);color:var(--txt)} .attach .sz{font-family:var(--font-mono);font-size:10px;color:var(--txt-3)} /* olay satırı (yorum değil, sistem hareketi) */ .tl-event{position:relative;margin:0 0 14px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt-3);min-height:22px} .tl-event .tl-dot{ position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%; background:var(--panel-3);border:2px solid var(--bg);display:grid;place-items:center;color:var(--txt-3); } .tl-event b{color:var(--txt-2);font-weight:600} .tl-event time{font-family:var(--font-mono);font-size:10px} /* --- yazma alanı --- */ .composer{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--panel);position:relative} .composer::before{ content:"";position:absolute;left:-6px;top:12px;width:10px;height:10px;background:var(--panel-2); border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg); } .composer-tabs{display:flex;gap:2px;padding:6px 8px 0;background:var(--panel-2);border-bottom:1px solid var(--line)} .composer-tabs button{font-size:12.5px;padding:6px 12px;border-radius:4px 4px 0 0;color:var(--txt-3);border-bottom:2px solid transparent;margin-bottom:-1px} .composer-tabs button[aria-current="true"]{color:var(--txt);font-weight:650;border-bottom-color:var(--accent);background:var(--panel)} .composer-inner{padding:11px 12px} .editor-tools{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap} .tool{border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-family:var(--font-mono);font-size:10.5px;color:var(--txt-3);letter-spacing:.04em} .tool:hover{border-color:var(--accent-line);color:var(--txt)} .editor{ width:100%;border:1px solid var(--line);background:var(--bg);border-radius:4px; padding:10px 12px;font-family:var(--font-ui);font-size:13.5px;color:var(--txt); min-height:88px;resize:vertical;line-height:1.6; } .editor::placeholder{color:var(--txt-3)} .editor:focus{outline:none;border-color:var(--accent)} .composer-foot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap} .hint{font-size:11px;color:var(--txt-3)} .note-warn{ display:none;align-items:center;gap:7px;margin-top:9px;padding:7px 10px;border-radius:4px; background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); color:var(--warn);font-size:12px;font-weight:600; } .composer[data-mode="icnot"] .note-warn{display:flex} .composer[data-mode="icnot"] .editor{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))} .time-row{display:none;gap:9px;align-items:center;margin-top:9px;flex-wrap:wrap} .composer[data-mode="sure"] .time-row{display:flex} .composer[data-mode="sure"] .editor{min-height:52px} /* --- yan panel --- */ .props{display:flex;flex-direction:column} .prop{display:flex;align-items:flex-start;gap:10px;padding:9px 13px;border-bottom:1px solid var(--line-soft);width:100%} .prop:last-child{border-bottom:none} .prop:hover{background:var(--panel-2)} .prop .lbl{flex:none;width:78px;padding-top:2px} .prop .v{font-size:12.5px;font-weight:550;min-width:0;flex:1} .prop .v small{display:block;font-weight:400;font-size:11px;color:var(--txt-3);margin-top:1px} .prop .pen{flex:none;opacity:0;color:var(--txt-3);transition:opacity .12s;margin-top:2px} .prop:hover .pen{opacity:1} /* ============ FORM ============ */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:720px){ .form-grid{grid-template-columns:1fr} } .field{display:flex;flex-direction:column;gap:5px} .field.wide{grid-column:1/-1} .field label{font-size:12px;font-weight:600;display:flex;align-items:center;gap:5px} .field label .req{color:var(--crit);font-size:13px} .inp{ border:1px solid var(--line);background:var(--bg);border-radius:4px;padding:8px 10px; font-size:13px;color:var(--txt-3);display:flex;align-items:center;gap:8px;min-height:36px;width:100%; } .inp:hover{border-color:var(--accent-line)} .inp.filled{color:var(--txt)} .inp .caret{margin-left:auto;color:var(--txt-3);flex:none} .inp.tall{min-height:104px;align-items:flex-start} .seg{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden} .seg button{flex:1;padding:7px 4px;font-size:12px;color:var(--txt-2);border-right:1px solid var(--line);text-align:center} .seg button:last-child{border-right:none} .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--txt);font-weight:650;box-shadow:inset 0 -2px 0 var(--accent)} .form-foot{display:flex;gap:9px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);flex-wrap:wrap} .btn-ghost{border:1px solid var(--line);padding:7px 13px;border-radius:4px;font-size:13px;color:var(--txt-2)} .btn-ghost:hover{border-color:var(--accent-line);color:var(--txt)} /* ============ FİRMA ============ */ .firm-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px} .firm-mark{ width:46px;height:46px;flex:none;border-radius:5px;background:var(--panel-3); border:1px solid var(--line);display:grid;place-items:center; font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--accent); } .firm-meta h1{margin:0 0 3px;font-size:19px;font-weight:650;letter-spacing:-.01em} .firm-meta .row{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--txt-2);align-items:center} .firm-stats{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap} .fstat{display:flex;flex-direction:column;gap:2px} .fstat b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;line-height:1} /* ============ TABLO (varlıklar) ============ */ .tbl-wrap{overflow-x:auto} table{border-collapse:collapse;width:100%;min-width:640px} thead th{ text-align:left;padding:8px 12px;font-family:var(--font-mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:500; border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap; } tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle} tbody tr:hover td{background:var(--panel-2)} tbody tr:last-child td{border-bottom:none} td.stripe{padding-left:15px;position:relative} td.stripe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stripe,var(--neut))} .tsub{display:block;font-size:11px;color:var(--txt-3);margin-top:1px} .co{white-space:nowrap;font-size:13px} .tno{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:600} /* ============ AKIŞ (pano sağ) ============ */ .feed{display:flex;flex-direction:column} .feed-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft)} .feed-item:last-child{border-bottom:none} .dot{width:6px;height:6px;border-radius:50%;background:var(--stripe,var(--neut));margin-top:6px;flex:none} .feed-item p{margin:0;font-size:12.5px;line-height:1.45} .feed-item time{font-family:var(--font-mono);font-size:10px;color:var(--txt-3);margin-left:auto;white-space:nowrap;padding-left:8px} /* ============ KOMUT PALETİ ============ */ .palette-scrim{position:fixed;inset:0;background:rgba(3,7,15,.68);display:none;padding-top:12vh;justify-content:center;z-index:50} .palette-scrim[data-open="true"]{display:flex} .palette{width:min(560px,92vw);height:max-content;background:var(--panel);border:1px solid var(--accent-line);border-radius:7px;box-shadow:var(--shadow);overflow:hidden} .palette-inp{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);font-size:14px;color:var(--txt-3)} .palette-inp .cursor{width:1px;height:16px;background:var(--accent);animation:blink 1.1s steps(2,start) infinite} @keyframes blink{to{visibility:hidden}} .palette-list{padding:6px} .palette-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;font-size:13px;color:var(--txt-2);width:100%} .palette-row:hover,.palette-row:first-child{background:var(--accent-soft);color:var(--txt)} .palette-row .k{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--txt-3)} .palette-foot{padding:8px 15px;border-top:1px solid var(--line);display:flex;gap:14px} .palette-foot span{font-family:var(--font-mono);font-size:10px;color:var(--txt-3)} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} } /* ============ KABUK TAMAMLAMALARI ============ */ /* Tasarimda kayit satiri bir