/* ===== KOKPİT · Tüm renkler burada ===== */
:root { --bg: #05080f; --bg2: #0a1120; --glow1: rgba(56, 225, 255, .11); --glow2: rgba(124, 92, 255, .12); --glow3: rgba(47, 227, 154, .06); --grid: rgba(120, 170, 255, .045); --scan: rgba(56, 225, 255, .07); --glass: rgba(255, 255, 255, .042); --glass2: rgba(255, 255, 255, .07); --glass3: rgba(255, 255, 255, .1); --line: rgba(255, 255, 255, .085); --line2: rgba(255, 255, 255, .15); --hi: rgba(255, 255, 255, .12); --shadow: rgba(0, 0, 0, .55); --overlay: rgba(2, 5, 10, .72); --text: #e7eef8; --muted: #8b98ad; --dim: #586377; --accent: #38e1ff; --accent2: #7c5cff; --accent-soft: rgba(56, 225, 255, .12); --accent-line: rgba(56, 225, 255, .45); --on-accent: #031018; --ok: #2fe39a; --ok-soft: rgba(47, 227, 154, .13); --warn: #ffc04d; --warn-soft: rgba(255, 192, 77, .13); --err: #ff4d6a; --err-soft: rgba(255, 77, 106, .15); --err-glow: rgba(255, 77, 106, .35); --info: #7aa2ff; --info-soft: rgba(122, 162, 255, .14); --none: #3c4657; --radius: 16px; --radius-sm: 10px; --blur: 18px; --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; }

/* ===== Açık mod: renkler ===== */
:root[data-theme="light"] { --bg: #e9eef5; --bg2: #f6f8fb; --glow1: rgba(10, 159, 214, .16); --glow2: rgba(106, 76, 240, .12); --glow3: rgba(15, 159, 104, .08); --grid: rgba(20, 50, 100, .06); --scan: rgba(10, 159, 214, .05); --glass: rgba(255, 255, 255, .62); --glass2: rgba(255, 255, 255, .85); --glass3: rgba(15, 30, 60, .07); --line: rgba(15, 30, 60, .1); --line2: rgba(15, 30, 60, .18); --hi: rgba(255, 255, 255, .95); --shadow: rgba(20, 40, 80, .18); --overlay: rgba(20, 30, 50, .4); --text: #0f1a2b; --muted: #55627a; --dim: #8994a7; --accent: #0a9fd6; --accent2: #6a4cf0; --accent-soft: rgba(10, 159, 214, .12); --accent-line: rgba(10, 159, 214, .5); --on-accent: #ffffff; --ok: #0e9a64; --ok-soft: rgba(14, 154, 100, .12); --warn: #c27700; --warn-soft: rgba(194, 119, 0, .13); --err: #df2848; --err-soft: rgba(223, 40, 72, .1); --err-glow: rgba(223, 40, 72, .28); --info: #3a63d8; --info-soft: rgba(58, 99, 216, .12); --none: #c4cbd7; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
::selection { background: var(--accent-soft); }

/* ===== Arka plan ===== */
.bgx { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 600px at 12% 8%, var(--glow1), transparent 60%), radial-gradient(800px 700px at 92% 88%, var(--glow2), transparent 60%), radial-gradient(600px 500px at 70% 10%, var(--glow3), transparent 60%), linear-gradient(180deg, var(--bg2), var(--bg)); }
.bgx-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); }
.bgx-scan { position: absolute; left: 0; right: 0; height: 160px; background: linear-gradient(180deg, transparent, var(--scan), transparent); animation: scan 9s linear infinite; }
@keyframes scan { 0% { top: -160px; } 100% { top: 100%; } }

/* ===== Cam panel ===== */
.gl { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); box-shadow: inset 0 1px 0 var(--hi), 0 24px 60px -28px var(--shadow); }
.hud::before, .hud::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent-line); pointer-events: none; }
.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }
.hud.err-hud::before, .hud.err-hud::after { border-color: var(--err); }

/* ===== Giriş ekranı ===== */
.lg { min-height: 100vh; overflow-x: hidden; }
.lg-wrap { position: relative; z-index: 1; min-height: 100vh; width: 100%; display: grid; grid-template-columns: 1.25fr minmax(360px, 440px); align-items: center; gap: 6vw; padding: 6vh 7vw; }
.lg-hero { position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: center; }
.lg-radar { position: absolute; left: -6%; top: 50%; width: min(620px, 52vw); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; opacity: .9; }
.lg-radar span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); }
.lg-radar span:nth-child(2) { inset: 17%; }
.lg-radar span:nth-child(3) { inset: 34%; border-color: var(--line2); }
.lg-radar b { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent-soft), transparent 22%); animation: spin 6s linear infinite; mask-image: radial-gradient(circle, #000 60%, transparent 71%); -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 71%); }
.lg-radar i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 14px var(--ok); animation: blink 3s ease-in-out infinite; }
.lg-radar .r1 { top: 28%; left: 62%; }
.lg-radar .r2 { top: 66%; left: 30%; animation-delay: 1s; }
.lg-radar .r3 { top: 44%; left: 80%; background: var(--warn); box-shadow: 0 0 14px var(--warn); animation-delay: 2s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.lg-brand { position: relative; }
.lg-brand small { font-family: var(--mono); font-size: 12px; letter-spacing: .35em; color: var(--accent); }
.lg-brand h1 { font-size: clamp(56px, 9vw, 128px); line-height: .95; font-weight: 800; letter-spacing: .04em; margin: 14px 0 18px; background: linear-gradient(180deg, var(--text), var(--muted)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-brand p { max-width: 460px; font-size: 16px; color: var(--muted); }
.lg-feats { position: relative; list-style: none; display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.lg-feats li { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 120px; }
.lg-feats b { display: block; font-family: var(--mono); font-size: 20px; color: var(--text); }
.lg-feats span { font-size: 12px; color: var(--muted); }
.lg-card { padding: 34px 34px 26px; }
.lg-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 30px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ok); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 2s infinite; }
.lg-card h2 { font-size: 28px; font-weight: 800; }
.lg-sub { color: var(--muted); margin: 4px 0 24px; }
.lg-f { display: block; margin-bottom: 18px; }
.lg-f span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lg-f input { width: 100%; padding: 14px 16px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: 600 15px var(--font); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.lg-f input:focus { border-color: var(--accent-line); background: var(--glass2); box-shadow: 0 0 0 4px var(--accent-soft); }
.lg-chk { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; cursor: pointer; margin: 4px 0 24px; user-select: none; }
.lg-chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.lg-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; border: 0; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); font: 800 15px var(--font); cursor: pointer; transition: transform .15s, box-shadow .2s; box-shadow: 0 14px 34px -14px var(--accent); }
.lg-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -12px var(--accent); }
.lg-btn em { font-style: normal; transition: transform .2s; }
.lg-btn:hover em { transform: translateX(4px); }
.lg-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--dim); text-align: center; letter-spacing: .2em; }

/* ===== Panel iskeleti ===== */
.pn { min-height: 100vh; }
.pn-side { position: fixed; z-index: 50; top: 14px; left: 14px; bottom: 14px; width: 236px; display: flex; flex-direction: column; padding: 18px 12px; transition: transform .25s; }
.pn-logo { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pn-logo-i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on-accent); font-weight: 800; font-size: 18px; box-shadow: 0 10px 24px -10px var(--accent); }
.pn-logo b { display: block; font-size: 16px; letter-spacing: .12em; }
.pn-logo small { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .14em; }
.pn-nav { flex: 1; overflow-y: auto; }
.pn-nav-t { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--dim); padding: 14px 10px 6px; }
.pn-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 600; border: 1px solid transparent; transition: background .15s, color .15s; }
.pn-nav a:hover { background: var(--glass2); color: var(--text); text-decoration: none; }
.pn-nav a.on { background: var(--accent-soft); color: var(--text); border-color: var(--accent-line); }
.pn-nav a svg { width: 18px; height: 18px; flex: none; }
.pn-nav a em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--err); color: var(--on-accent); font-weight: 700; }
.pn-worker { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; }
.pn-worker b { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; }
.pn-worker.ok b { color: var(--ok); }
.pn-worker.err b { color: var(--err); }
.pn-worker span { display: block; color: var(--muted); margin-top: 4px; }
.pn-worker i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: blink 2s infinite; }
.pn-main { position: relative; z-index: 1; margin-left: 264px; padding: 14px 18px 40px 0; min-height: 100vh; min-width: 0; }
.pn-top { position: relative; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 18px; }
.pn-top h1 { font-size: 18px; font-weight: 800; }
.pn-top h1 small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--muted); font-weight: 400; }
.pn-top-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pn-clock { font-family: var(--mono); font-size: 13px; color: var(--muted); padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; }
.pn-user { display: flex; align-items: center; gap: 10px; }
.pn-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--glass3); border: 1px solid var(--line2); font-weight: 800; font-size: 13px; }
.pn-user { position: relative; }
.pn-user-b { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.pn-user-b:hover, .pn-user.on .pn-user-b { background: var(--glass2); }
.pn-user-o { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; }
.pn-user.on .pn-user-o { transform: rotate(180deg); }
.pn-user b { display: block; font-size: 13px; }
.pn-user small { display: block; font-size: 11px; color: var(--muted); }
.pn-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px; padding: 6px; background: var(--bg2); }
.pn-user.on .pn-menu { display: block; }
.pn-menu-h { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pn-menu-h b { display: block; font-family: var(--mono); font-size: 13px; }
.pn-menu-h small { color: var(--muted); font-size: 12px; }
.pn-menu button, .pn-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 13px var(--font); cursor: pointer; text-decoration: none; }
.pn-menu button:hover, .pn-menu a:hover { background: var(--glass3); text-decoration: none; }
.pn-menu a.d { color: var(--err); }
.pn-menu svg { width: 16px; height: 16px; }
.pn-tema svg { width: 16px; height: 16px; }
:root[data-theme="light"] .t-gun, :root:not([data-theme="light"]) .t-ay { display: none; }
.pn-dar { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); cursor: pointer; flex: none; }
.pn-dar:hover { color: var(--text); background: var(--glass3); }
.pn-dar svg { width: 14px; height: 14px; transition: transform .2s; }
.side-dar .pn-side { width: 72px; padding: 18px 10px; }
.side-dar .pn-main { margin-left: 100px; }
.side-dar .pn-logo { flex-direction: column; padding: 4px 0 14px; gap: 10px; }
.side-dar .pn-logo-t, .side-dar .pn-nav-t, .side-dar .pn-nav a span, .side-dar .pn-worker span, .side-dar .pn-worker b span { display: none; }
.side-dar .pn-dar { margin: 0; }
.side-dar .pn-dar svg { transform: rotate(180deg); }
.side-dar .pn-nav a { justify-content: center; padding: 11px 0; position: relative; }
.side-dar .pn-nav a em { position: absolute; top: 3px; right: 3px; padding: 0 5px; font-size: 10px; }
.side-dar .pn-nav-t + a, .side-dar .pn-nav a:first-child { margin-top: 8px; }
.side-dar .pn-worker { padding: 10px 0; display: grid; place-items: center; }
.pn-ham { display: none; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--glass); color: var(--text); font-size: 18px; cursor: pointer; }
.pn-shade { display: none; position: fixed; inset: 0; z-index: 40; background: var(--overlay); }
.pn-shade.on { display: block; }

/* ===== Genel bileşenler ===== */
.sec { padding: 20px 22px; margin-bottom: 18px; }
.sec-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sec-h h2 { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.sec-h h2 small { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.sec-h-r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.g2 > .sec { margin-bottom: 0; }
.g-mb { margin-bottom: 18px; }
.em { padding: 34px 10px; text-align: center; color: var(--dim); }
.em b { display: block; font-size: 28px; margin-bottom: 6px; color: var(--ok); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line2); background: var(--glass2); color: var(--text); font: 700 13px var(--font); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--glass3); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-p { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: var(--on-accent); }
.btn-p:hover { background: linear-gradient(135deg, var(--accent), var(--accent2)); transform: translateY(-1px); }
.btn-d { background: var(--err-soft); border-color: var(--err-soft); color: var(--err); }
.btn-d:hover { background: var(--err-soft); border-color: var(--err); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.ib { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); cursor: pointer; font-size: 14px; transition: all .15s; text-decoration: none; }
.ib:hover { color: var(--text); background: var(--glass3); text-decoration: none; }
.ib.d:hover { color: var(--err); border-color: var(--err); }
.acts { display: flex; gap: 6px; justify-content: flex-end; }

.bd { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; white-space: nowrap; border: 1px solid transparent; }
.bd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bd.ok { color: var(--ok); background: var(--ok-soft); }
.bd.warn { color: var(--warn); background: var(--warn-soft); }
.bd.err { color: var(--err); background: var(--err-soft); }
.bd.none { color: var(--muted); background: var(--glass2); }
.bd.info { color: var(--info); background: var(--info-soft); }
.bd.plain::before { display: none; }

.bn { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 600; border: 1px solid; display: flex; align-items: center; gap: 10px; }
.bn.err { background: var(--err-soft); border-color: var(--err-soft); color: var(--err); }
.bn.warn { background: var(--warn-soft); border-color: var(--warn-soft); color: var(--warn); }
.bn.info { background: var(--info-soft); border-color: var(--info-soft); color: var(--info); }

/* ===== Form ===== */
.fg { margin-bottom: 14px; }
.fl { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.fi, .fs, .ft { width: 100%; padding: 10px 12px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: 500 14px var(--font); outline: none; transition: border-color .2s, box-shadow .2s; }
.fi:focus, .fs:focus, .ft:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.fs option { background: var(--bg2); color: var(--text); }
.ft { min-height: 130px; resize: vertical; line-height: 1.6; }
.fh { font-size: 12px; color: var(--dim); margin-top: 5px; }
.fe { display: none; margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--err-soft); color: var(--err); font-weight: 700; font-size: 13px; }
.fe.on { display: block; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.fck { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font-size: 13px; user-select: none; }
.fck input { width: 16px; height: 16px; accent-color: var(--accent); }
.f-sep { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--accent); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.sr { position: relative; }
.sr input { width: 240px; padding: 8px 12px 8px 32px; background: var(--glass); border: 1px solid var(--line); border-radius: 99px; color: var(--text); font: 500 13px var(--font); outline: none; }
.sr input:focus { border-color: var(--accent-line); }
.sr svg { position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--muted); }
.sel-sm { padding: 7px 10px; background: var(--glass); border: 1px solid var(--line); border-radius: 99px; color: var(--text); font: 600 13px var(--font); outline: none; }
.sel-sm option { background: var(--bg2); }

.chs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 99px; background: var(--glass); }
.ch { padding: 5px 12px; border-radius: 99px; border: 0; background: none; color: var(--muted); font: 700 12px var(--font); cursor: pointer; text-decoration: none; }
.ch:hover { color: var(--text); text-decoration: none; }
.ch.on { background: var(--glass3); color: var(--text); }
.ch em { font-style: normal; font-family: var(--mono); margin-left: 4px; opacity: .7; }

/* ===== Tablo ===== */
.tw { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.tb { width: 100%; border-collapse: collapse; }
.tb th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 400; padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tb td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tb tr:last-child td { border-bottom: 0; }
.tb tbody tr:hover td { background: var(--glass); }
.tb tr.hidden { display: none; }
.tb .r { text-align: right; }
.tb .nw { white-space: nowrap; }
.tb .url { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.t-site b { display: block; }
.t-site small { color: var(--muted); font-size: 12px; }

.pg { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pg-i { color: var(--muted); font-size: 13px; }
.pg-b { display: flex; gap: 6px; }
.pg-b a { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 13px; }
.pg-b a:hover { background: var(--glass2); color: var(--text); text-decoration: none; }
.pg-b a.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }

/* ===== Kokpit ===== */
.st { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; }
.st-i { padding: 16px 18px; overflow: hidden; }
.st-i b { display: block; font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1.1; margin-top: 6px; }
.st-i small { font-size: 12px; color: var(--muted); }
.st-i.ok b { color: var(--ok); }
.st-i.warn b { color: var(--warn); }
.st-i.err b { color: var(--err); }
.st-i.err.on { border-color: var(--err); box-shadow: inset 0 1px 0 var(--hi), 0 0 40px -12px var(--err-glow); }
.st-i::after { content: ""; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; border-radius: 50%; background: currentColor; opacity: .05; }

.inc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--err-soft); background: var(--err-soft); border-radius: var(--radius-sm); margin-bottom: 8px; }
.inc-p { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 0 var(--err-glow); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--err-glow); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.inc-m { flex: 1; min-width: 0; }
.inc-m b { display: block; }
.inc-m b a { color: var(--text); }
.inc-m span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-t { text-align: right; flex: none; }
.inc-t b { display: block; font-family: var(--mono); font-size: 16px; color: var(--err); }
.inc-t small { font-size: 11px; color: var(--muted); }

.tl-list { max-height: 420px; overflow-y: auto; }
.tl-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tl-row:last-child { border-bottom: 0; }
.tl-row time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tl-row div { min-width: 0; }
.tl-row div b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row div span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grp { margin-bottom: 18px; }
.grp-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.grp-h b { font-size: 13px; }
.grp-h span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.grp-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tls { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.tl { display: block; padding: 12px 14px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--glass); color: var(--text); transition: border-color .15s, background .15s, transform .15s; position: relative; overflow: hidden; }
.tl:hover { background: var(--glass2); text-decoration: none; transform: translateY(-1px); }
.tl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--none); }
.tl.ok::before { background: var(--ok); }
.tl.warn::before { background: var(--warn); }
.tl.err { border-color: var(--err-soft); background: var(--err-soft); }
.tl.err::before { background: var(--err); }
.tl.hidden { display: none; }
.tl-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tl-h b { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-h span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dts { display: flex; gap: 5px; margin-bottom: 9px; }
.dt { flex: 1; height: 6px; border-radius: 3px; background: var(--none); }
.dt.ok { background: var(--ok); }
.dt.warn { background: var(--warn); }
.dt.err { background: var(--err); animation: blink 1.4s infinite; }
.dt.x { background: transparent; border: 1px dashed var(--line2); }
.b24 { position: relative; height: 4px; border-radius: 2px; background: var(--ok-soft); overflow: hidden; }
.b24 i { position: absolute; top: 0; bottom: 0; background: var(--err); min-width: 2px; }
.b24-lg { height: 14px; border-radius: 4px; }
.b24-ax { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 6px; }
.b24-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; margin-bottom: 10px; }
.b24-row span { font-size: 12px; color: var(--muted); }
.b24-row .b24 { height: 14px; border-radius: 4px; }

/* ===== Site detayı ===== */
.sd-h { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.sd-h h2 { font-size: 24px; font-weight: 800; line-height: 1.2; }
.sd-h h2 a { color: var(--text); }
.sd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); font-size: 12px; color: var(--muted); }
.chip b { color: var(--text); font-weight: 700; }
.chip.err { color: var(--err); border-color: var(--err-soft); background: var(--err-soft); }
.chip.warn { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); }
.upt { display: flex; gap: 10px; margin-left: auto; }
.upt div { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: center; min-width: 92px; }
.upt b { display: block; font-family: var(--mono); font-size: 18px; }
.upt small { font-size: 11px; color: var(--muted); }
.spk { width: 100%; height: 90px; display: block; }
.spk-line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spk-area { fill: var(--accent-soft); }
.spk-err { fill: var(--err); }

/* ===== Plan notları ===== */
.nts { display: grid; gap: 12px; }
.nt { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); }
.nt-h { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.nt-h h3 { font-size: 15px; font-weight: 800; flex: 1; min-width: 180px; }
.nt-h h3 small { display: block; font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 2px; }
.nt-m { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--dim); margin-top: 6px; }
.nt-b { margin-top: 12px; color: var(--text); font-size: 14px; line-height: 1.7; }
.nt-gz { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--warn); }
.phs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ph { position: relative; width: 92px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; background: var(--glass2); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 6px; border: 0; background: var(--overlay); color: var(--err); cursor: pointer; font-size: 13px; line-height: 1; }
.drop { border: 1px dashed var(--line2); border-radius: var(--radius-sm); padding: 16px; text-align: center; color: var(--muted); cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s; }
.drop:hover, .drop.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.drop-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.drop-list span { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--glass2); color: var(--muted); }

/* ===== Kullanıcı site seçimi ===== */
.pick { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; }
.pick label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.pick label:hover { background: var(--glass2); }
.pick label.hidden { display: none; }
.pick input { accent-color: var(--accent); }

/* ===== Modal ===== */
.md { display: none; position: fixed; inset: 0; z-index: 900; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: flex-start; justify-content: center; overflow-y: auto; padding: 6vh 16px; }
.md.on { display: flex; }
.md-box { width: 100%; max-width: 560px; background: var(--bg2); }
.md-box.wide { max-width: 760px; }
.md-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.md-h h3 { font-size: 16px; font-weight: 800; }
.md-b { padding: 20px 22px; }
.md-f { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }

/* ===== Lightbox / Toast ===== */
.lb { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lb.on { display: flex; }
.lb img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); box-shadow: 0 30px 80px var(--shadow); }
.ts { position: fixed; z-index: 1100; top: 18px; right: 18px; display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 420px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg2); border: 1px solid var(--line2); font-weight: 700; transform: translateX(130%); transition: transform .3s; box-shadow: 0 20px 50px -20px var(--shadow); }
.ts.on { transform: translateX(0); }
.ts.ok { border-color: var(--ok); color: var(--ok); }
.ts.err { border-color: var(--err); color: var(--err); }
.ts button { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }

/* ===== Kelime fikirleri ===== */
.kw-form { display: flex; gap: 10px; }
.kw-in { flex: 1; font-size: 17px; padding: 14px 16px; font-weight: 600; }
.kw-opt { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 4px; }
.kw-yol { font-size: 13px; color: var(--muted); }
.kw-yol b { color: var(--text); }
.kw-prog { height: 3px; border-radius: 2px; background: var(--glass2); overflow: hidden; margin: 12px 0 8px; opacity: 0; transition: opacity .3s; }
.kw-prog.on { opacity: 1; }
.kw-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
.kw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.kw-grp { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); margin-bottom: 14px; overflow: hidden; }
.kw-grp-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--glass2); }
.kw-grp-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.kw-soru .kw-grp-h i { background: var(--accent); }
.kw-bolge .kw-grp-h i { background: var(--ok); }
.kw-fiyat .kw-grp-h i { background: var(--warn); }
.kw-ticari .kw-grp-h i { background: var(--err); }
.kw-kars .kw-grp-h i { background: var(--accent2); }
.kw-grp-h span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.kw-grp-h .btn { margin-left: auto; }
.kw-rows { max-height: 440px; overflow-y: auto; }
.kw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--muted); font: 500 13.5px var(--font); text-align: left; cursor: pointer; }
.kw-row:last-child { border-bottom: 0; }
.kw-row:hover { background: var(--accent-soft); }
.kw-row b { color: var(--text); font-weight: 700; }
.kw-row em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }
#kwSol .kw-rows { max-height: none; }
.kw-bos { padding: 12px 14px; color: var(--dim); font-size: 13px; }

/* ===== Mobil ===== */
@media (max-width: 1280px) { .st { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .pn-side { transform: translateX(-120%); } .pn-side.on { transform: translateX(0); } .pn-main { margin-left: 0; padding: 12px 12px 40px; } .pn-ham { display: grid; place-items: center; } .g2 { grid-template-columns: minmax(0, 1fr); } .pn-user-n, .pn-user-o { display: none; } .pn-dar { display: none; } .side-dar .pn-side { width: 236px; padding: 18px 12px; } .side-dar .pn-main { margin-left: 0; } .side-dar .pn-logo-t, .side-dar .pn-nav-t, .side-dar .pn-nav a span, .side-dar .pn-worker span { display: block; } .side-dar .pn-nav a { justify-content: flex-start; padding: 10px 12px; } .side-dar .pn-logo { flex-direction: row; } .side-dar .pn-worker { display: block; padding: 12px; } .upt { margin-left: 0; } }
@media (max-width: 900px) { .lg-wrap { grid-template-columns: 1fr; gap: 28px; padding: 32px 16px; } .lg-hero { min-height: 0; } .lg-radar { width: 340px; left: auto; right: -80px; top: 40%; opacity: .5; } .lg-feats { display: none; } .lg-brand h1 { font-size: 56px; } .lg-card { padding: 26px 20px 20px; } }
@media (max-width: 640px) { .st { grid-template-columns: repeat(2, 1fr); } .st-i b { font-size: 24px; } .pn-clock { display: none; } .sec { padding: 16px 14px; } .tw { margin: 0 -14px; padding: 0 14px; } .fr, .fr3 { grid-template-columns: 1fr; } .sr input { width: 100%; } .kw-form { flex-direction: column; } .kw-cols { grid-template-columns: minmax(0, 1fr); } .sr, .sec-h-r { width: 100%; } .b24-row { grid-template-columns: 1fr; gap: 4px; } .tl-row { grid-template-columns: 52px minmax(0, 1fr); } .tl-row > :last-child { grid-column: 2; justify-self: start; } .inc { flex-wrap: wrap; } .inc-t { width: 100%; text-align: left; padding-left: 24px; } .inc-t b, .inc-t small { display: inline; margin-right: 8px; } .pn-top h1 { font-size: 16px; } }