:root{
  /* AERON FPV — buz mavisi kurumsal palet */
  --bg:#f6f7f9;
  --bg-2:#eef3f7;
  --panel:#ffffff;
  --panel-soft:rgba(var(--surface-rgb),.78);
  --surface-1:rgba(var(--surface-rgb),.84);
  --surface-2:rgba(var(--surface-rgb),.7);
  --surface-3:#fbfcfd;
  --surface-solid:#ffffff;
  --border-soft:#e6ebf0;
  --border:#d7e1e8;
  --text:#16202b;
  --text-2:#334b60;
  --muted:#7d8894;
  --muted-2:#9aa5af;
  --line:#dfe5eb;
  --shadow:0 30px 90px rgba(74,91,112,.11);
  --shadow-soft:0 10px 26px rgba(64,100,132,.09);
  --shadow-lift:0 16px 32px rgba(78,167,255,.19);
  --surface-rgb:255,255,255;
  --primary:#4ea7ff;
  --primary-rgb:78,167,255;
  --primary-2:#8bcaff;
  --primary-ink:#2f6c9a;
  --accent:#8bcaff;
  --ice:#eaf5ff;
  --silver:#cfd7df;
  --ink-rgb:22,32,43;
  --success:#5ab489;
  --success-bg:rgba(90,180,137,.12);
  --warning:#d99b3f;
  --warning-bg:rgba(217,155,63,.13);
  --danger:#dd6b64;
  --danger-bg:rgba(221,107,100,.12);
  --code-bg:#16202b;
  --code-text:#dbe7f2;
  --radius:22px;
  --radius-sm:14px;
  --grad-brand:linear-gradient(90deg,#4f9ed9,#6ab7ed);
  --grad-hero-glow:radial-gradient(circle,rgba(78,167,255,.12),transparent 70%);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0e16;
    --bg-2:#0e1220;
    --panel:#121728;
    --panel-soft:rgba(22,27,44,.72);
    --surface-1:rgba(28,34,54,.86);
    --surface-2:rgba(22,27,44,.72);
    --surface-3:#161c30;
    --surface-solid:#151b2d;
    --border-soft:rgba(var(--ink-rgb),.09);
    --border:rgba(var(--ink-rgb),.14);
    --text:#f2f4fa;
    --text-2:#c4cbe0;
    --muted:#8b93ad;
    --muted-2:#707890;
    --line:rgba(var(--ink-rgb),.1);
    --shadow:0 24px 64px -12px rgba(0,0,0,.55),0 4px 18px rgba(0,0,0,.3);
    --shadow-soft:0 10px 30px -8px rgba(0,0,0,.4);
    --shadow-lift:0 18px 40px -14px rgba(46,107,255,.4);
    --surface-rgb:26,32,52;
    --primary:#5b8fff;
    --primary-rgb:91,143,255;
    --primary-2:#7bc8ff;
    --primary-ink:#bcd2ff;
    --accent:#a58bff;
    --ink-rgb:255,255,255;
    --success:#3ecf8e;
    --success-bg:rgba(62,207,142,.14);
    --warning:#f0ab3d;
    --warning-bg:rgba(240,171,61,.14);
    --danger:#f0637e;
    --danger-bg:rgba(240,99,126,.14);
    --code-bg:#080b14;
    --code-text:#cfe0ff;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0e16;
  --bg-2:#0e1220;
  --panel:#121728;
  --panel-soft:rgba(22,27,44,.72);
  --surface-1:rgba(28,34,54,.86);
  --surface-2:rgba(22,27,44,.72);
  --surface-3:#161c30;
  --surface-solid:#151b2d;
  --border-soft:rgba(var(--ink-rgb),.09);
  --border:rgba(var(--ink-rgb),.14);
  --text:#f2f4fa;
  --text-2:#c4cbe0;
  --muted:#8b93ad;
  --muted-2:#707890;
  --line:rgba(var(--ink-rgb),.1);
  --shadow:0 24px 64px -12px rgba(0,0,0,.55),0 4px 18px rgba(0,0,0,.3);
  --shadow-soft:0 10px 30px -8px rgba(0,0,0,.4);
  --shadow-lift:0 18px 40px -14px rgba(46,107,255,.4);
  --surface-rgb:26,32,52;
  --primary:#5b8fff;
  --primary-rgb:91,143,255;
  --primary-2:#7bc8ff;
  --primary-ink:#bcd2ff;
  --accent:#a58bff;
  --ink-rgb:255,255,255;
  --success:#3ecf8e;
  --success-bg:rgba(62,207,142,.14);
  --warning:#f0ab3d;
  --warning-bg:rgba(240,171,61,.14);
  --danger:#f0637e;
  --danger-bg:rgba(240,99,126,.14);
  --code-bg:#080b14;
  --code-text:#cfe0ff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);transition:background-color .25s ease,color .25s ease}
:root:not([data-theme="dark"]) body{background:radial-gradient(circle at top left,#fff,transparent 30%),linear-gradient(180deg,#f9fafc 0%,#eff2f6 100%)}
:root[data-theme="dark"] body{background:radial-gradient(circle at top left,rgba(60,90,190,.16),transparent 34%),linear-gradient(180deg,#0b0e16 0%,#0a0d14 100%)}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) body{background:radial-gradient(circle at top left,rgba(60,90,190,.16),transparent 34%),linear-gradient(180deg,#0b0e16 0%,#0a0d14 100%)}
}
body{min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:none}
a{text-decoration:none;color:inherit}
pre,code,textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.page-shell{display:flex;min-height:100vh;gap:22px;padding:18px}
.sidebar{width:290px;flex:0 0 290px;padding:24px;border-radius:32px;display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:18px;height:calc(100vh - 36px)}
.content-shell{flex:1;min-width:0}
.glass{background:rgba(var(--surface-rgb),.65);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(var(--surface-rgb),.72);box-shadow:var(--shadow)}
.glass-soft,.panel,.upload-zone{background:rgba(var(--surface-rgb),.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(var(--surface-rgb),.84);box-shadow:var(--shadow-soft)}
.brand-block{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.brand-block h1{margin:0;font-size:26px;letter-spacing:-.04em}
.brand-orb{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2) 55%,#fff 100%);box-shadow:inset 0 2px 18px rgba(var(--surface-rgb),.7),0 12px 28px rgba(var(--primary-rgb),.28)}
.eyebrow{margin:0 0 6px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.nav-stack{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.nav-btn,.tab-btn{background:transparent;color:var(--text-2);border:1px solid transparent;padding:14px 16px;border-radius:18px;text-align:left;font-weight:600;transition:.22s ease;display:flex;align-items:center;gap:10px}
.nav-icon{width:18px;height:18px;flex:0 0 18px;opacity:.85}
.nav-btn.active .nav-icon{opacity:1}
.nav-btn:hover,.tab-btn:hover{background:rgba(var(--surface-rgb),.76);border-color:var(--line);transform:translateY(-1px)}
.nav-btn.active,.tab-btn.active{background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(var(--primary-rgb),.06));color:var(--primary-ink);border-color:rgba(var(--primary-rgb),.22);box-shadow:0 10px 24px rgba(var(--primary-rgb),.12)}
.side-footer{padding:14px;border-radius:24px}
.status-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.status-pill,.inline-chip,.tag{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(var(--surface-rgb),.85);border:1px solid rgba(var(--ink-rgb),.08);font-size:13px;color:var(--muted);font-weight:600}
.status-pill i{width:9px;height:9px;border-radius:50%;background:var(--border);display:inline-block}
.status-pill.connected i{background:var(--success);box-shadow:0 0 0 6px var(--success-bg)}
.status-pill.info{background:rgba(var(--primary-rgb),.08);border-color:rgba(var(--primary-rgb),.14);color:var(--primary-ink)}
.topbar{position:sticky;top:18px;z-index:30;padding:16px 18px;border-radius:28px;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:14px}
.topbar h2{margin:0;font-size:28px;letter-spacing:-.04em}
.icon-btn{width:46px;height:46px;border-radius:16px;background:rgba(var(--surface-rgb),.88);box-shadow:var(--shadow-soft);font-size:20px;display:grid;place-items:center;color:var(--text-2);transition:.2s ease}
.icon-btn:hover{color:var(--primary-ink);transform:translateY(-1px)}
.theme-toggle{position:relative}
.theme-icon{width:20px;height:20px;grid-area:1/1}
.theme-icon-sun{display:none}
:root[data-theme="dark"] .theme-icon-sun{display:block}
:root[data-theme="dark"] .theme-icon-moon{display:none}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .theme-icon-sun{display:block}
  html:not([data-theme="light"]) .theme-icon-moon{display:none}
}
.main-content{padding-bottom:36px}
.view{display:none}
.view.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gap-lg{gap:24px}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-24{margin-bottom:24px}.ml-auto{margin-left:auto}
.metric-card,.feature-card{padding:22px;border-radius:28px}
.metric-card strong{display:block;font-size:34px;letter-spacing:-.05em;margin:8px 0 6px}
.metric-card p,.feature-card p{margin:0;color:var(--muted);line-height:1.6}
.feature-card .card-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(var(--primary-rgb),.16));font-size:22px;margin-bottom:14px;color:var(--primary-ink)}
.panel,.upload-zone{padding:22px;border-radius:30px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.panel-head h3,.section-title h2{margin:2px 0 0;font-size:26px;letter-spacing:-.04em}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.section-title .analysis-badge,.browser-note{color:var(--primary-ink);background:rgba(var(--primary-rgb),.08);border:1px solid rgba(var(--primary-rgb),.14);border-radius:999px;padding:10px 14px;font-size:13px;font-weight:600}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid label,.checks label,.safety-checks label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
/* Onay kutulu etiketlerde kutu metnin YANINDA durmalı; sütun yönü kutuyu metinden koparıyordu. */
.form-grid label:has(>input[type="checkbox"]),.checks label:has(>input[type="checkbox"]),.safety-checks label:has(>input[type="checkbox"]),.live-checks label:has(>input[type="checkbox"]){flex-direction:row;align-items:flex-start;gap:10px;line-height:1.45}
.form-grid label:has(>input[type="checkbox"])>input,.checks label:has(>input[type="checkbox"])>input,.safety-checks label:has(>input[type="checkbox"])>input,.live-checks label:has(>input[type="checkbox"])>input{width:auto;flex:0 0 auto;margin-top:2px}
.compact-form{grid-template-columns:repeat(2,minmax(0,1fr))}
input,select,textarea{width:100%;background:var(--surface-3);border:1px solid var(--border);border-radius:18px;padding:14px 15px;color:var(--text);outline:none;transition:.2s ease}
input:focus,select:focus,textarea:focus{border-color:rgba(var(--primary-rgb),.42);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.08)}
.checks{display:flex;flex-wrap:wrap;gap:18px;margin:16px 0 8px}
.checks.vertical{flex-direction:column;align-items:flex-start}
.checks input,.safety-checks input{width:auto}
.btn-row,.btn-col{display:flex;gap:12px;flex-wrap:wrap}
.btn-col{flex-direction:column}.btn-col.stretch>*{width:100%}
.primary,.secondary,.danger-soft{padding:13px 18px;border-radius:18px;font-weight:700;transition:.22s ease}
.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 14px 26px rgba(var(--primary-rgb),.22)}
.primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.secondary{background:rgba(var(--surface-rgb),.92);color:var(--text-2);border:1px solid rgba(var(--ink-rgb),.08)}
.secondary:hover,.danger-soft:hover{transform:translateY(-1px)}
.danger-soft{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-bg)}
.small{padding:10px 14px;font-size:13px}.wide{width:100%}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.empty-state{display:grid;place-items:center;text-align:center;min-height:240px;color:var(--muted)}
.empty-state span{font-size:34px;margin-bottom:8px}
.tune-score{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.score-ring{width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) 0 var(--score),rgba(var(--ink-rgb),.12) 0 100%);position:relative}
.score-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--surface-solid)}
.score-ring b{position:relative;z-index:1;font-size:26px;letter-spacing:-.04em}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.result-tile{padding:14px;border-radius:20px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06)}
.result-tile small{display:block;color:var(--muted-2);margin-bottom:6px}
.result-tile b{font-size:22px;letter-spacing:-.04em}
.reason-list{margin:16px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
.cli-box,.terminal,.output-box{background:var(--code-bg);color:var(--code-text);border-radius:22px;padding:18px;overflow:auto;max-height:420px;border:1px solid rgba(var(--surface-rgb),.08);line-height:1.6}
.cli-editor{min-height:360px;border-radius:24px;background:var(--surface-3)}
.upload-zone{text-align:center;border:1px dashed rgba(var(--primary-rgb),.25)}
.flight-goal-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.flight-goal-bar label{display:flex;flex-direction:column;gap:6px;min-width:200px}
.flight-goal-bar label small{color:var(--muted);font-weight:800;letter-spacing:.08em;font-size:10px}
.flight-goal-bar select{width:auto;min-width:200px}
.flight-goal-bar p{flex:1;min-width:220px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:760px){.flight-goal-bar{flex-direction:column;align-items:stretch}.flight-goal-bar select{width:100%}}
.upload-zone.drag{border-color:var(--primary);background:rgba(var(--primary-rgb),.06)}
.upload-icon{font-size:34px;color:var(--primary);margin-bottom:8px}
.upload-zone p{max-width:700px;margin:10px auto;color:var(--muted);line-height:1.65}
.rec-card{padding:16px;border-radius:20px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06);margin-bottom:12px}
.rec-card h4{margin:0 0 8px;font-size:17px}.rec-card p{margin:0;color:var(--muted);line-height:1.6}
.tag.ok{background:var(--success-bg);color:var(--success)}.tag.warn{background:var(--warning-bg);color:var(--warning)}.tag.danger{background:var(--danger-bg);color:var(--danger)}
.connect-card{text-align:center;display:flex;flex-direction:column;justify-content:center}.big-usb{font-size:42px;color:var(--primary-ink);margin-bottom:8px}.serial-meta{margin-top:14px;color:var(--muted)}
.terminal{min-height:340px}.terminal-input{display:flex;gap:12px;margin-top:14px}.terminal-input input{flex:1}
.validation p{margin:0 0 10px;color:var(--muted);line-height:1.55}.validation .ok{color:var(--success)}.validation .warn{color:var(--warning)}
.safety-checks{display:grid;gap:14px;margin-top:18px}
.profile-list,.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.profile-card,.preset-card,.user-card{padding:20px;border-radius:26px;background:rgba(var(--surface-rgb),.84);border:1px solid rgba(var(--ink-rgb),.06);box-shadow:var(--shadow-soft)}
.profile-card h3,.preset-card h3,.user-card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.03em}
.profile-card p,.preset-card p,.user-card p,.log-list p{margin:0;color:var(--muted);line-height:1.6}
.profile-meta,.preset-meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.profile-meta span,.preset-meta span{padding:8px 10px;background:var(--surface-3);border-radius:999px;border:1px solid rgba(var(--ink-rgb),.06);font-size:12px;font-weight:600;color:var(--muted)}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.step-list{display:grid;gap:14px}.step-list>div{display:flex;gap:14px;padding:16px;border-radius:22px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06)}
.step-list b{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(var(--primary-rgb),.16));color:var(--primary-ink)}
.clean-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.8}
.warning-panel{background:linear-gradient(180deg,rgba(var(--surface-rgb),.88),var(--warning-bg))}
.hidden{display:none!important}
.admin-login-box{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.admin-form-inline{display:flex;gap:12px;flex-wrap:wrap;align-items:center;flex:1;justify-content:flex-end}
.admin-form-inline input{max-width:220px}
.admin-toolbar{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:24px;margin-bottom:20px;flex-wrap:wrap}
.admin-tab{display:none}.admin-tab.active{display:block}
.log-list{display:grid;gap:10px}.log-item{padding:12px 14px;border-radius:18px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06)}
.admin-note{padding:14px;border-radius:18px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06)}
.toast{position:fixed;right:24px;bottom:calc(24px + var(--vv-bottom-gap,0px));background:var(--code-bg);color:#fff;padding:14px 18px;border-radius:18px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(10px);transition:.22s ease;z-index:60}
.toast.show{opacity:1;transform:none}
canvas{width:100%;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06);border-radius:22px}
.osd-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:18px}
.osd-preview-frame{overflow:auto;border-radius:18px;background:#000;padding:18px;display:flex;justify-content:center}
.osd-grid{position:relative;background:#000;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;border:1px solid rgba(255,255,255,.15);border-radius:4px;flex-shrink:0}
.osd-elem{position:absolute;font-family:'Consolas','Courier New',monospace;font-size:inherit;color:#e8fff0;text-shadow:0 0 2px #000,0 0 1px #000;white-space:nowrap;cursor:grab;user-select:none;touch-action:none;border-radius:2px;overflow:hidden;letter-spacing:0;text-align:left}
.osd-elem:hover{background:rgba(255,255,255,.12)}
.osd-elem.dragging{cursor:grabbing;background:rgba(120,220,150,.25);z-index:5}
.osd-elem.selected{outline:2px solid #ffd400;background:rgba(255,212,0,.18);z-index:4}
/* FC Bağlantı alt sekmeleri: aktif sekmede olmayan panelleri gizler (kendi .hidden mantığını ezmez) */
.fc-tab-hidden{display:none !important}
/* Güvenli alan (safe area): analog OSD'lerde ekranın en dış satır/sütunları çoğu gözlükte kırpılır */
.osd-safe-area{position:absolute;border:1px dashed rgba(255,212,0,.55);pointer-events:none;z-index:1}
.osd-safe-area::after{content:'GÜVENLİ ALAN';position:absolute;top:-16px;left:0;font-size:9px;color:rgba(255,212,0,.8);font-family:'Consolas',monospace;letter-spacing:.5px}
.osd-list-panel #osdEditorList{max-height:520px;overflow:auto}
.msp-horizon{width:150px;height:150px;border-radius:50%;overflow:hidden;position:relative;border:3px solid rgba(var(--ink-rgb),.25);background:#000;flex-shrink:0}
.msp-horizon-inner{position:absolute;left:-50%;top:-50%;width:200%;height:200%;background:linear-gradient(to bottom,#3a8ee8 0%,#3a8ee8 50%,#8a5a2b 50%,#8a5a2b 100%);transition:transform .12s linear}
.rc-chan-row{display:grid;grid-template-columns:56px minmax(0,1fr) 52px;gap:10px;align-items:center;padding:4px 0}
.rc-chan-bar{position:relative;height:14px;border-radius:8px;background:rgba(var(--ink-rgb),.08);overflow:hidden}
.rc-chan-bar-fill{position:absolute;top:0;bottom:0;left:0;background:var(--accent,#3a8ee8);border-radius:8px;transition:width .1s linear}
.rc-chan-bar-mid{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(var(--ink-rgb),.25)}
.motor-test-btn{touch-action:none;-webkit-user-select:none}
.motor-test-btn.active{background:var(--danger,#d63a3a);color:#fff;border-color:var(--danger,#d63a3a)}
@media (max-width:1100px){.osd-layout{grid-template-columns:minmax(0,1fr)}.osd-preview-frame{overflow-x:auto}}
@media (max-width:1280px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.page-shell{padding:12px;gap:12px}.topbar h2{font-size:22px}.grid-3,.grid-2,.grid-4,.form-grid,.compact-form{grid-template-columns:minmax(0,1fr)}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-form-inline{justify-content:stretch}.admin-form-inline input{max-width:none;width:100%}}
@media (max-width:640px){.page-shell{padding:10px}.topbar{padding:14px}.panel,.upload-zone{padding:18px;border-radius:24px}.profile-list,.preset-grid{grid-template-columns:minmax(0,1fr)}.result-grid{grid-template-columns:minmax(0,1fr)}.terminal-input,.btn-row{flex-direction:column}.score-ring{width:86px;height:86px}}
.auth-gate.hidden{display:none!important}.auth-brand{margin-bottom:14px}.auth-copy{color:var(--muted);line-height:1.65;margin:0 0 18px}.auth-form{display:grid;gap:14px}.auth-form label,.compact-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}.install-link{display:block;text-align:center;margin-top:16px;color:var(--primary-ink);font-weight:700;font-size:13px}.auth-error{margin-top:14px;padding:12px;border-radius:16px;background:var(--danger-bg);color:var(--danger)}.auth-gate .brand-orb{width:48px;height:48px}

/* Public/member split + multilingual */
.auth-gate{position:fixed;inset:0;z-index:100;background:rgba(var(--ink-rgb),.28);backdrop-filter:blur(18px);display:grid;place-items:center;padding:20px}
.auth-card{width:min(560px,100%);padding:26px;border-radius:30px;position:relative}
.auth-close{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;background:rgba(var(--surface-rgb),.9);font-size:26px;color:var(--muted)}
.auth-tabs{display:flex;gap:8px;margin:18px 0}.auth-pane{display:none}.auth-pane.active{display:grid;gap:14px}.auth-form label{display:grid;gap:7px;font-size:13px;color:var(--muted);font-weight:700}.auth-copy{color:var(--muted);line-height:1.65;margin:16px 0 0}.auth-error{margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--danger-bg);color:var(--danger)}
.language-select select{min-width:110px;padding:10px 12px;border-radius:999px;background:rgba(var(--surface-rgb),.88)}
.public-tuner-block{scroll-margin-top:110px;padding:6px 0 2px}.public-badge{display:flex;justify-content:center;margin-bottom:12px}.public-badge span{padding:9px 13px;border-radius:999px;background:var(--success-bg);border:1px solid var(--success-bg);color:var(--success);font-size:12px;font-weight:800;letter-spacing:.07em}
.nav-btn.locked{opacity:.72}.nav-btn.locked:after{content:' ';float:right}
.assistant-fab{position:fixed;right:22px;bottom:22px;z-index:55;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:24px;box-shadow:0 18px 34px rgba(var(--primary-rgb),.35)}
.assistant-context{display:grid;gap:12px}.assistant-messages{min-height:340px;max-height:500px;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:4px}.assistant-bubble{max-width:88%;padding:14px 16px;border-radius:20px;line-height:1.65}.assistant-bubble.system{background:var(--surface-3);color:var(--text-2);align-self:flex-start}.assistant-bubble.user{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;align-self:flex-end}.assistant-input{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:14px}.assistant-input textarea{resize:vertical}
.cli-unified-search{margin-bottom:10px}.cli-unified-search input{border-radius:16px;padding:14px 16px;font-size:14px}
.cli-quick-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.cli-quick-chips small{color:var(--muted);font-weight:700;margin-right:2px}
.chip-btn{padding:7px 12px;border-radius:999px;background:rgba(var(--primary-rgb),.08);color:var(--primary-ink);font-weight:700;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;transition:.16s ease}
.chip-btn:hover{background:rgba(var(--primary-rgb),.16);transform:translateY(-1px)}
.count-chip{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:rgba(var(--ink-rgb),.08);color:var(--muted);font-size:10.5px;font-weight:800;margin-left:4px}
.tab-btn.active .count-chip{background:rgba(var(--primary-rgb),.16);color:var(--primary-ink)}
.cli-help-toolbar-single{max-width:280px;margin-bottom:14px}
.cli-setting-groups{display:grid;gap:10px}
.setting-group{border-radius:20px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06);overflow:hidden}
.setting-group summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--text-2)}
.setting-group summary::-webkit-details-marker{display:none}
.setting-group summary:after{content:'+';margin-left:auto;padding-left:12px;font-size:18px;color:var(--muted);font-weight:400}
.setting-group[open] summary:after{content:'–'}
.setting-group[open] summary{border-bottom:1px solid rgba(var(--ink-rgb),.06)}
.setting-group .cli-setting-grid{padding:14px}
.setting-group .cli-help-note{padding:0 18px 14px}
.cli-help-toolbar{display:grid;grid-template-columns:1fr 220px;gap:12px;margin-bottom:14px}.cli-help-note{color:var(--muted);line-height:1.6}.cli-command-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.cli-command-card{padding:18px;border-radius:22px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06)}.cli-command-card>div{display:flex;justify-content:space-between;gap:12px;align-items:center}.cli-command-card code{font-size:16px;font-weight:800;color:var(--primary-ink)}.cli-command-card span{font-size:11px;padding:6px 9px;border-radius:999px;background:rgba(var(--primary-rgb),.1);color:var(--primary-ink);font-weight:700}.cli-command-card p{color:var(--muted);line-height:1.55}.cli-command-card pre,.mini-code{white-space:pre-wrap;background:var(--code-bg);color:var(--code-text);padding:10px 12px;border-radius:14px;overflow:auto}
.activity-table{display:grid;gap:10px}.activity-row{display:grid;grid-template-columns:1.1fr 2fr .9fr .8fr;gap:12px;align-items:center;padding:13px 14px;border-radius:18px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06)}.activity-row div{display:grid;gap:3px}.activity-row small,.activity-row time,.activity-row span{font-size:12px;color:var(--muted)}.learning-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
html[dir="rtl"] .sidebar,html[dir="rtl"] .nav-btn{text-align:right}html[dir="rtl"] .auth-close{right:auto;left:18px}html[dir="rtl"] .ml-auto{margin-left:0;margin-right:auto}
@media(max-width:900px){.cli-help-toolbar{grid-template-columns:minmax(0,1fr)}.assistant-input{grid-template-columns:minmax(0,1fr)}.activity-row{grid-template-columns:minmax(0,1fr)}.language-select select{min-width:96px}}

/* v4: international phone + member feedback */
.phone-field{display:grid;grid-template-columns:minmax(170px,.85fr) minmax(160px,1.15fr);gap:10px}.phone-field select{min-width:0}.field-hint{display:block;margin-top:6px;color:var(--muted);font-weight:600}.feedback-list,.feedback-admin-list{display:grid;gap:14px}.feedback-card,.feedback-admin-card{padding:16px;border-radius:22px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.07)}.feedback-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.feedback-card-head>div{display:grid;gap:5px}.feedback-card-head small,.feedback-card>small,.feedback-admin-card>small{color:var(--muted)}.feedback-card p,.feedback-admin-card p{color:var(--muted);line-height:1.65;margin:8px 0 10px}.admin-reply{margin-top:12px;padding:12px 14px;border-radius:16px;background:rgba(var(--primary-rgb),.07);border:1px solid rgba(var(--primary-rgb),.12);color:var(--primary-ink);line-height:1.55}.feedback-admin-tools{display:flex;gap:10px;align-items:center}.feedback-admin-tools select{padding:10px 12px;border-radius:14px}.feedback-admin-edit{display:grid;grid-template-columns:170px 1fr auto auto;gap:10px;align-items:center;margin-top:14px}.feedback-admin-edit textarea{min-height:54px;resize:vertical}.count-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;margin-left:6px}.empty-state.compact{min-height:180px}.tag.danger{background:var(--danger-bg);color:var(--danger)}.tag.warn{background:var(--warning-bg);color:var(--warning)}.tag.ok{background:var(--success-bg);color:var(--success)}
@media(max-width:900px){.phone-field{grid-template-columns:minmax(0,1fr)}.feedback-admin-edit{grid-template-columns:minmax(0,1fr)}.feedback-admin-tools{width:100%;flex-wrap:wrap}.feedback-admin-tools select{flex:1}}

/* v5: simplified FPVTune-inspired homepage structure; existing color system preserved */
.home-section{padding:36px 0}
.home-section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:22px}
.home-section-head h2{margin:0;font-size:34px;letter-spacing:-.045em}
.home-section-head>p{margin:0;max-width:530px;color:var(--muted);line-height:1.65}
.home-pid-section{padding:42px 0;border-top:1px solid rgba(var(--ink-rgb),.06);border-bottom:1px solid rgba(var(--ink-rgb),.06)}
.home-pid-head{align-items:center}.home-pid-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:start}
.home-pid-grid .panel{box-shadow:var(--shadow-soft)}
.home-pid-head-actions{display:flex;align-items:center;gap:10px}

/* v5: member training */
.education-hero{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:24px 0 30px;border-bottom:1px solid rgba(var(--ink-rgb),.07);margin-bottom:22px}
.education-hero h2{font-size:44px;letter-spacing:-.055em;margin:0 0 10px}.education-hero p{max-width:780px;color:var(--muted);line-height:1.7;margin:0}
.education-progress{min-width:150px;text-align:right}.education-progress small{display:block;color:var(--primary-ink);font-weight:800;letter-spacing:.08em;font-size:10px}.education-progress strong{font-size:54px;letter-spacing:-.06em;display:inline-block;margin:8px 6px 0 0}.education-progress span{color:var(--muted);font-weight:600}
.education-toolbar{display:grid;grid-template-columns:1fr 220px;gap:12px;padding:14px;margin-bottom:20px}.education-toolbar input,.education-toolbar select{background:var(--surface-3)}
.education-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.education-card{appearance:none;text-align:left;padding:24px;border-radius:28px;background:rgba(var(--surface-rgb),.84);border:1px solid rgba(var(--ink-rgb),.06);box-shadow:var(--shadow-soft);color:var(--text);transition:.22s ease;min-height:240px;display:flex;flex-direction:column}
.education-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.education-card-top{display:flex;justify-content:space-between;align-items:center}.education-card-top span{color:var(--primary-ink);font-size:12px;font-weight:800}.education-card-top small{color:var(--muted-2);font-weight:700}
.education-card h3{font-size:24px;letter-spacing:-.04em;margin:40px 0 9px}.education-card p{color:var(--muted);line-height:1.6;margin:0 0 20px}.education-card b{margin-top:auto;color:var(--primary-ink);font-size:13px}
.education-reader{padding:30px}.education-reader-head{max-width:820px;margin:22px auto 34px}.education-reader-head h2{font-size:42px;letter-spacing:-.055em;margin:4px 0 12px}.education-reader-head>p:last-child{font-size:17px;color:var(--muted);line-height:1.7}
.education-article{max-width:880px;margin:0 auto}.education-article section{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:26px 0;border-top:1px solid rgba(var(--ink-rgb),.07)}.education-article section>span{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(var(--primary-rgb),.08);color:var(--primary-ink);font-weight:800}.education-article h3{margin:0 0 8px;font-size:23px;letter-spacing:-.035em}.education-article p{margin:0;color:var(--muted);line-height:1.75}
.education-safety{max-width:880px;margin:26px auto 0;padding:18px 20px;border-radius:20px;background:var(--warning-bg);border:1px solid var(--warning-bg)}.education-safety strong{display:block;margin-bottom:6px}.education-safety p{margin:0;color:var(--warning);line-height:1.6}
html[dir="rtl"] .education-card{text-align:right}html[dir="rtl"] .education-progress{text-align:left}
@media(max-width:1100px){.home-pid-grid{grid-template-columns:minmax(0,1fr)}.education-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.home-section-head{align-items:flex-start;flex-direction:column;gap:10px}.home-section-head h2{font-size:29px}.education-hero{grid-template-columns:minmax(0,1fr)}.education-progress{text-align:left}.education-toolbar{grid-template-columns:minmax(0,1fr)}.education-reader{padding:20px}.education-reader-head h2{font-size:32px}.education-article section{grid-template-columns:minmax(0,1fr)}}

/* Betaflight Configurator tarzi yerlesim: sol sabit dikey sekme sutunu, sagda icerik.
   Onceki hali sekmeleri ustte yatay bir seride siralıyordu; 12+ sekme orada sigmiyor,
   yatay kaydirma gerekiyordu. Dikey sutun her sekmeyi ayni anda gorunur tutar. */
.page-shell{display:grid;grid-template-columns:var(--yan-genislik,232px) minmax(0,1fr);min-height:100vh;padding:0;gap:0}
.content-shell{width:auto;max-width:none;margin:0;padding:0 26px 26px;min-width:0}
.sidebar{position:sticky;top:0;left:0;inset:auto;width:var(--yan-genislik,232px);height:100vh;
  padding:16px 12px 12px;border-radius:0;z-index:70;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;gap:10px;
  border-right:1px solid var(--line);overflow:hidden}
.site-brand-block{margin:0 0 6px;gap:10px;padding:2px 6px 12px;display:flex;align-items:center;
  border-bottom:1px solid var(--line)}
.site-brand-block .brand-copy{display:grid;gap:0;min-width:0}
.site-brand-block .eyebrow{font-size:8px;margin:0;letter-spacing:.12em}
.site-brand-block h1{font-size:14.5px;line-height:1.2;white-space:normal;overflow:visible;
  text-overflow:clip;word-break:normal;overflow-wrap:anywhere}
.brand-logo{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px}
.brand-logo .brand-orb,.logo-preview-box .brand-orb{width:34px;height:34px}
.site-logo{width:36px;height:36px;object-fit:contain;border-radius:10px;display:block}
.nav-stack{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;
  gap:2px;margin:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:2px 0}
.nav-stack::-webkit-scrollbar{width:6px}
.nav-stack::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.18);border-radius:6px}
.nav-btn{padding:9px 11px;border-radius:10px;font-size:13px;white-space:nowrap;text-align:left;
  flex:0 0 auto;gap:10px;width:100%;overflow:hidden;text-overflow:ellipsis}
/* Betaflight'taki gibi: aktif sekme sol kenarindan renkli bir seritle isaretlenir. */
.nav-btn.active{position:relative}
.nav-btn.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--primary,#3b82f6)}
.nav-icon{width:17px;height:17px;flex:0 0 17px}
.side-footer{display:flex;flex-direction:column;gap:8px;padding:10px 6px 2px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.mobile-nav-close{display:none}
.topbar{position:relative;top:auto;z-index:20;margin:0 0 12px;padding:10px 4px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar h2{font-size:22px}.topbar .eyebrow{display:none}
#menuBtn{display:none}
.main-content{padding:0 0 18px}
.section-title{margin:6px 0 14px}.section-title.compact-title{align-items:center}
.section-title h2{font-size:28px}.panel,.upload-zone{padding:18px;border-radius:24px}
.home-pid-section{padding:28px 0;border-top:1px solid rgba(var(--ink-rgb),.06);border-bottom:0}
.home-pid-head{margin-bottom:14px}.home-pid-grid{gap:16px}.home-section-head h2{font-size:28px}
.empty-state{min-height:170px}.cli-box{max-height:320px}.metric-card{padding:17px}.metric-card strong{font-size:28px}
.metric-card.na strong{color:var(--muted-2);font-size:20px}.metric-card.na p{color:var(--muted)}
.gate-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:6px}
.gate-banner h2{margin:4px 0 0;font-size:22px}.gate-banner.ok h2{color:var(--ok,#1a9e5c)}.gate-banner.danger h2{color:var(--danger,#d63a3a)}
.gate-scores{display:flex;gap:22px;flex-wrap:wrap}.gate-scores div{text-align:center}.gate-scores b{display:block;font-size:24px}.gate-scores small{color:var(--muted);font-size:11px}
.axis-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:10px 2px;font-size:13px}.axis-row b{min-width:44px}
.na-inline{color:var(--muted-2);font-weight:700}
.prov-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em;margin-left:6px;vertical-align:middle}
.prov-tag.prov-ok{background:rgba(26,158,92,.12);color:#1a9e5c}.prov-tag.prov-warn{background:rgba(214,150,10,.14);color:#a56a00}
.param-card{display:grid;gap:6px}
.hint-text{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:6px}
.cli-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.chip-btn.active{background:var(--primary-ink);color:#fff}
.assistant-fab{right:18px;bottom:18px}

/* Account center */
.account-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:16px 4px 20px;border-bottom:1px solid rgba(var(--ink-rgb),.07)}
.account-head h2{margin:0;font-size:34px;letter-spacing:-.045em}.account-head p:last-child{margin:7px 0 0;color:var(--muted)}
.account-portals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:18px 0}
.portal-button{appearance:none;text-align:left;padding:17px;border-radius:22px;background:rgba(var(--surface-rgb),.82);border:1px solid rgba(var(--ink-rgb),.06);box-shadow:var(--shadow-soft);color:var(--text);min-height:128px;transition:.2s ease}
.portal-button:hover{transform:translateY(-2px);border-color:rgba(var(--primary-rgb),.22)}
.portal-button>span{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--primary-rgb),.09);color:var(--primary-ink);font-weight:800;margin-bottom:18px}
.portal-button>span svg{width:19px;height:19px}
.portal-button strong{display:block;font-size:16px;margin-bottom:4px}.portal-button small{color:var(--muted)}
.feedback-portal{background:linear-gradient(180deg,rgba(var(--surface-rgb),.92),rgba(var(--primary-rgb),.08))}
.account-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.account-panel{min-height:100%}

/* CLI source reference */
.source-actions,.cli-ref-tabs{display:flex;gap:8px;flex-wrap:wrap}.cli-ref-tabs{margin:0 0 12px}
.cli-source-summary{padding:12px 14px;border-radius:18px;background:rgba(var(--primary-rgb),.06);border:1px solid rgba(var(--primary-rgb),.10);color:var(--muted);font-size:13px;margin-bottom:12px}
.cli-ref-pane{display:none}.cli-ref-pane.active{display:block}
.cli-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cli-setting-card{padding:14px;border-radius:18px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.06);min-width:0}
.cli-setting-card code{font-size:13px;font-weight:800;color:var(--primary-ink);word-break:break-word}.cli-setting-card .setting-meta{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}.cli-setting-card .setting-meta span{font-size:10px;padding:5px 7px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-weight:700}.cli-setting-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.cli-guide-content{max-width:980px}.cli-guide-content h2{margin:28px 0 10px;font-size:25px;letter-spacing:-.035em}.cli-guide-content h3{margin:22px 0 8px;font-size:19px}.cli-guide-content p,.cli-guide-content li{color:var(--muted);line-height:1.7}.cli-guide-content table{width:100%;border-collapse:collapse;margin:12px 0 22px;font-size:13px}.cli-guide-content th,.cli-guide-content td{padding:10px;border-bottom:1px solid rgba(var(--ink-rgb),.07);text-align:left}.cli-guide-content pre{background:var(--code-bg);color:var(--code-text);border-radius:16px;padding:14px;overflow:auto}.cli-guide-content blockquote{margin:14px 0;padding:12px 14px;border-left:3px solid var(--primary);background:var(--surface-3);border-radius:12px;color:var(--muted)}.source-note{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0 16px;border-bottom:1px solid rgba(var(--ink-rgb),.07);margin-bottom:12px}.source-note span{color:var(--muted);font-size:13px}

/* Admin branding */
.admin-logo-editor{display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center}.logo-preview-box{width:74px;height:74px;border-radius:20px;background:var(--surface-3);border:1px solid rgba(var(--ink-rgb),.07);display:grid;place-items:center;overflow:hidden}.logo-preview-box img{max-width:64px;max-height:64px;object-fit:contain}.admin-logo-editor input{padding:10px}

/* Site footer / ownership */
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid rgba(var(--ink-rgb),.07);padding:18px 4px 26px;color:var(--muted);font-size:12px;flex-wrap:wrap}.site-footer>div:first-child{display:flex;gap:8px;flex-wrap:wrap}.site-footer strong{color:var(--text-2)}.footer-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.link-button{background:none;padding:0;color:var(--primary-ink);font-weight:700;font-size:12px}
.coffee-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--warning-bg);color:var(--warning);transition:.18s ease;flex:0 0 auto}
.coffee-icon-btn svg{width:19px;height:19px}
.coffee-icon-btn:hover{transform:translateY(-1px) scale(1.05);filter:brightness(1.08)}
.account-head-actions{display:flex;align-items:center;gap:10px}
.coffee-modal{position:fixed;inset:0;z-index:110;background:rgba(var(--ink-rgb),.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;padding:20px}
.coffee-modal.hidden{display:none!important}
.coffee-modal-card{width:min(420px,100%);padding:28px;border-radius:30px;position:relative}
.coffee-orb{display:grid;place-items:center;width:56px;height:56px}
.coffee-orb svg{width:26px;height:26px}
.coffee-modal-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.coffee-modal-section small{display:block;color:var(--muted);font-weight:800;letter-spacing:.08em;font-size:10px;margin-bottom:8px}
.coffee-iban-row{display:flex;align-items:center;gap:10px}
.coffee-iban-row code{flex:1;padding:10px 12px;border-radius:12px;background:var(--surface-3);font-size:14px;font-weight:700;word-break:break-all}
.coffee-iban-name{margin-top:6px;color:var(--muted);font-weight:600!important;letter-spacing:0!important;font-size:12px!important;text-transform:none!important}
.coffee-modal-section img{width:100%;max-width:220px;display:block;margin:0 auto;border-radius:18px;border:1px solid var(--line)}
.coffee-modal-section .primary{display:block;text-align:center}

/* Reduce visual clutter across modules */
.clean-list{line-height:1.65}.panel-head{margin-bottom:12px}.section-title .analysis-badge,.browser-note{padding:8px 11px;font-size:11px}.education-hero{padding:12px 0 20px;margin-bottom:14px}.education-hero h2{font-size:36px}.education-card{min-height:205px;padding:19px}.education-card h3{margin:26px 0 8px}.upload-zone p{margin:7px auto}.profile-card,.preset-card,.user-card{padding:16px;border-radius:22px}

html[dir="rtl"] .nav-btn{text-align:center}

@media(max-width:1180px){
  .account-portals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cli-setting-grid{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:980px){
  .content-shell{width:calc(100% - 20px);padding-top:10px}
  .sidebar{position:fixed;top:0;left:0;bottom:var(--vv-bottom-gap,0px);width:min(300px,84vw);height:auto;padding:18px 16px;border-radius:0 24px 24px 0;display:flex;flex-direction:column;align-items:stretch;gap:12px;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
  .sidebar.open{transform:translateX(0)}.site-brand-block{padding:0;margin:0}.mobile-nav-close{display:grid;place-items:center;margin-left:auto;width:36px;height:36px;border-radius:12px;background:var(--surface-3);font-size:22px}
  .nav-stack{display:flex;flex-direction:column;align-items:stretch;overflow:visible;width:100%;gap:6px}.nav-btn{width:100%;text-align:left;padding:12px 14px;font-size:13px;gap:12px}
  .nav-icon{width:19px;height:19px;flex:0 0 19px}
  .side-footer{display:block}.side-footer #loginMain,.side-footer #logoutMain{margin-top:8px}
  .topbar{position:sticky;top:8px;z-index:40;background:rgba(var(--surface-rgb),.82);border:1px solid rgba(var(--surface-rgb),.86);box-shadow:var(--shadow-soft);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:10px 12px;border-radius:20px}
  #menuBtn{display:block;width:42px;height:42px}.topbar-right{display:flex}.topbar h2{font-size:19px}
  .brand-copy{display:block}
  .account-portals{grid-template-columns:repeat(2,minmax(0,1fr))}.account-settings-grid{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:680px){
  .topbar-right{gap:6px}.topbar-right .admin-only{display:none!important}.language-select select{min-width:92px;padding:10px}.topbar-right .secondary,.topbar-right .primary{padding:10px 11px;font-size:11px}
  .home-pid-grid{grid-template-columns:minmax(0,1fr)}.account-head{align-items:flex-start;flex-direction:column}.account-portals{grid-template-columns:1fr 1fr}.portal-button{min-height:112px;padding:14px}.portal-button>span{margin-bottom:12px}
  .admin-logo-editor{grid-template-columns:64px 1fr}.admin-logo-editor button{grid-column:1/-1}.logo-preview-box{width:64px;height:64px}
  .site-footer{padding-bottom:78px}.source-note{align-items:flex-start;flex-direction:column}
}

.footer-owner{display:grid!important;gap:3px}.footer-owner small{color:var(--muted-2);font-size:11px}.site-footer>div:first-child.footer-owner{display:grid;gap:3px}

/* v6.1: mobile-first navigation overhaul — dimmed backdrop, bottom tab bar, sheet-style auth */
.nav-backdrop{position:fixed;inset:0;z-index:65;background:rgba(var(--ink-rgb),.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s ease}
.nav-backdrop.show{opacity:1;pointer-events:auto}
.mobile-tabbar{display:none}
body.nav-locked{overflow:hidden}
:root{--vv-bottom-gap:0px}

@media(max-width:980px){
  .mobile-tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
    position:fixed;left:0;right:0;bottom:var(--vv-bottom-gap,0px);
    padding:6px 8px;border-radius:20px 20px 0 0;z-index:75;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;padding:6px 4px;border-radius:16px;background:transparent;color:var(--muted);font-weight:700;transition:.18s ease}
  .tabbar-btn .tabbar-icon{font-size:19px;line-height:1;display:grid;place-items:center}
  .tabbar-btn .tabbar-icon svg{width:21px;height:21px}
  .tabbar-btn small{font-size:10px;letter-spacing:.01em}
  .tabbar-btn.active{color:var(--primary-ink);background:rgba(var(--primary-rgb),.12)}
  .tabbar-btn:active{transform:scale(.93)}
  .main-content{padding-bottom:calc(112px + env(safe-area-inset-bottom) + var(--vv-bottom-gap,0px))}
  .site-footer{padding-bottom:calc(120px + env(safe-area-inset-bottom) + var(--vv-bottom-gap,0px))}
  .assistant-fab{bottom:calc(88px + env(safe-area-inset-bottom) + var(--vv-bottom-gap,0px));right:18px}
  .nav-btn{min-height:48px;display:flex;align-items:center}
  .account-portals{gap:8px}
  .portal-button{min-height:118px}
}

@media(max-width:640px){
  .auth-gate{align-items:flex-end;padding:0;bottom:var(--vv-bottom-gap,0px)}
  .auth-card{width:100%;max-width:none;border-radius:26px 26px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:sheetUp .26s ease;max-height:88vh;overflow:auto}
  .auth-close{top:12px;right:12px}
  .account-portals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-button,.nav-btn,.tab-btn{min-height:46px}
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.5}to{transform:translateY(0);opacity:1}}
html[dir="rtl"] .auth-close{left:12px;right:auto}

/* ==== Live Auto Tune (v7 modülü, v6 tema token'larına uyarlandı) ==== */
.live-header-status{display:flex;gap:8px;flex-wrap:wrap}
.live-safety-banner{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(var(--primary-rgb),.08),var(--surface-1));border:1px solid rgba(var(--primary-rgb),.16);color:var(--text-2);line-height:1.55}
.live-safety-banner strong{color:var(--primary-ink);white-space:nowrap}
.live-connection-info{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--muted);line-height:1.55}
.live-mode-grid{display:grid;gap:10px}
.live-mode-card{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;padding:13px 14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border-soft);cursor:pointer}
.live-mode-card input{width:auto;margin-top:3px;grid-row:1/3}
.live-mode-card strong{font-size:14px;color:var(--text)}
.live-mode-card small{color:var(--muted);line-height:1.4}
.live-mode-card:has(input:checked){border-color:rgba(var(--primary-rgb),.35);background:rgba(var(--primary-rgb),.07);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.06)}
.live-policy-summary{margin-top:14px;padding:12px;border-radius:16px;background:var(--surface-2);color:var(--muted);font-size:12px;line-height:1.55}
.live-checks{gap:10px}
.live-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.live-pid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.live-pid-item{padding:12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border-soft)}
.live-pid-item small{display:block;color:var(--muted-2);margin-bottom:5px}
.live-pid-item strong{font-size:20px;color:var(--text)}
.live-pid-item em{font-style:normal;color:var(--primary-ink);font-size:11px}
.live-source-note{display:block;color:var(--muted-2);line-height:1.55;margin-top:12px}
.live-proposal{padding:15px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border-soft);min-height:116px;color:var(--text-2);line-height:1.6}
.live-proposal p{margin:0}
.live-proposal-change{display:flex;justify-content:space-between;gap:12px;margin:7px 0;padding:8px 10px;background:var(--surface-solid);border-radius:12px}
.live-proposal-change strong{color:var(--text)}
.live-timeline{display:grid;gap:9px;max-height:390px;overflow:auto}
.live-event{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border-soft)}
.live-event time{font-size:11px;color:var(--muted-2)}
.live-event strong{display:block;margin-bottom:3px;color:var(--text)}
.live-event p{margin:0;color:var(--muted);line-height:1.45}
.live-event.danger{background:var(--danger-bg);border-color:rgba(230,73,102,.2)}
.live-event.success{background:var(--success-bg);border-color:rgba(24,164,99,.2)}
.live-admin-sessions{display:grid;gap:10px;max-height:560px;overflow:auto}
.live-admin-session{padding:13px;border-radius:17px;background:var(--surface-2);border:1px solid var(--border-soft)}
.live-admin-session strong{display:block;color:var(--text)}
.live-admin-session small{display:block;color:var(--muted-2);margin-top:4px}
.live-admin-session p{margin:8px 0 0;color:var(--muted);line-height:1.5}
#liveChart{width:100%;background:var(--surface-2);border-radius:20px;border:1px solid var(--border-soft)}
@media(max-width:1050px){.live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.live-header-status{width:100%}.live-safety-banner{flex-direction:column}.live-metrics{grid-template-columns:1fr}.live-pid-grid{grid-template-columns:1fr}.live-event{grid-template-columns:1fr}}
/* Live Auto Tune — ölçüm bandı rozetleri, FC kimliği ve tavsiye gerekçesi */
.live-band{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;background:var(--surface-2);color:var(--muted-2);vertical-align:middle}
.live-band.ok{background:var(--success-bg);color:var(--success)}
.live-band.warn{background:var(--warning-bg);color:var(--warning)}
.live-band.danger{background:var(--danger-bg);color:var(--danger)}
.live-fc-info{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--muted);font-size:12px;line-height:1.5}
.live-fc-info:empty{display:none}
.live-advice-why{margin:2px 0 12px;color:var(--muted);font-size:12px;line-height:1.5}
.live-pid-item.changed{border-color:rgba(var(--primary-rgb),.3);background:rgba(var(--primary-rgb),.06)}
.live-arrow{margin-left:6px;font-weight:800}
.live-arrow.up{color:var(--success)}
.live-arrow.down{color:var(--danger)}
/* OSD önizlemesi — dar ekranlarda çerçeve iç dolgusu küçültülür; 18px dolgu, 30 sütunluk
   tuvalin en küçük zoom seviyesinde bile sığmamasına ve gereksiz yatay kaydırmaya yol açıyordu. */
@media (max-width:640px){
  .osd-preview-frame{padding:8px;border-radius:14px}
}
/* OSD öğesi: gerçek OSD'de her karakter tam bir hücre kaplar. Karakterler ayrı kutulara
   konur ve hücre genişliğinde ortalanır; tek parça metin ızgaradan kayıyordu. */
.osd-elem{display:flex;align-items:stretch}
.osd-elem>span{display:inline-block;text-align:center;flex:0 0 auto;pointer-events:none}
/* OSD düzeni: Betaflight Configurator'daki gibi ayarlar + öğe listesi SOLDA, canlı önizleme SAĞDA. */
.osd-side{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start;min-width:0}
/* Grid izleri icerik genisligine gore buyuyup dar ekranda 1-2px tasma birakiyordu. */
.osd-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.osd-side{order:1}
.osd-preview-panel{order:2;position:sticky;top:16px}
.osd-config-panel h4{margin:0;font-size:13px;letter-spacing:.02em;color:var(--muted)}
#osdElementSearch{margin-bottom:6px}
@media (max-width:1100px){
  .osd-layout{grid-template-columns:minmax(0,1fr)}
  /* Dar ekranda önce ekranı görmek daha yararlı: önizleme başa alınır. */
  .osd-preview-panel{order:1;position:static}
  .osd-side{order:2}
}
/* Live Auto Tune — simplified tuning ana anahtarlarının durumu.
   Bu anahtarlar FC'de kapalıyken yazılan çarpanlar kabul edilir ama uçuşu etkilemez. */
.live-switch-state:empty{display:none}
.live-switch-state{margin-top:10px;padding:12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border-soft)}
.live-switch-grid{display:grid;gap:6px}
.live-switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.live-switch-row code{font-size:11px;color:var(--muted)}
.live-switch-warn{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--danger-bg);color:var(--danger);font-size:12px;line-height:1.5}
.live-switch-warn strong{color:var(--danger)}
.live-switch-ok{margin:10px 0 0;color:var(--success);font-size:12px;line-height:1.5}
.live-start-note:empty{display:none}
.live-start-note{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--warning-bg);color:var(--warning);font-size:12px;line-height:1.5}
/* OSD öğe listesi — sadeleştirilmiş satır.
   Önceki hâlde her öğe checkbox + X kutusu + Y kutusu + parametre + rozetler olarak 5 parçaya
   yayılıyor ve 80 öğelik liste iç içe geçmiş görünüyordu. Konum artık yalnız önizlemeden
   sürükleyerek verilir; satırda görünürlük ve kimlik kalır. */
.osd-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px;border-radius:12px;border:1px solid transparent}
.osd-item-row:nth-child(even){background:var(--surface-2)}
.osd-item-row.on{border-color:rgba(var(--primary-rgb),.28);background:rgba(var(--primary-rgb),.06)}
.osd-item-main{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer;
  font-size:13px;color:var(--text);font-weight:500}
.osd-item-main input{width:auto;flex:0 0 auto;margin:0}
.osd-item-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.osd-item-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.osd-item-meta code{font-size:10px;opacity:.55;color:var(--muted)}
.osd-list-panel h4{position:sticky;top:0;z-index:1;margin:14px 0 6px;padding:6px 0;
  background:var(--panel);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
#osdEditorList{max-height:640px;overflow:auto;padding-right:4px}
/* Ayar paneli öğe listesinin ALTINA alınır (kullanıcı isteği): önce hangi öğelerin
   görüneceği seçilir, ayarlar ikincil adımdır. */
.osd-list-panel{order:1}
.osd-config-panel{order:2}
@media (max-width:640px){
  .osd-item-meta code{display:none}          /* dar ekranda parametre adı gizlenir, title'da kalır */
  #osdEditorList{max-height:420px}
}

/* Live Auto Tune — kalici kayit uyarisi.
   Canli yazmalar FC belleginde tutulur; EEPROM kaydi yapilmadan FC yeniden baslatilirsa
   (Web Serial portu kapaninca DTR/RTS ile olur) eski degerler geri gelir. */
.live-pending-save:empty{display:none}
.live-pending-save{margin-top:12px;padding:12px 14px;border-radius:14px;
  background:var(--danger-bg);border:1px solid rgba(230,73,102,.28);color:var(--danger);
  font-size:12px;line-height:1.55}
.live-pending-save strong{display:block;margin-bottom:4px;color:var(--danger)}
.live-pending-save p{margin:0;color:var(--text-2)}
.live-autosave{display:flex;align-items:flex-start;gap:9px;margin-top:12px;
  font-size:12px;color:var(--muted);line-height:1.45;cursor:pointer}
.live-autosave input{width:auto;flex:0 0 auto;margin-top:2px}

/* Live Auto Tune — MSP tanilama ciktisi ve simulator uyarisi. */
.live-diag:empty{display:none}
.live-diag{margin-top:12px;display:grid;gap:6px}
.live-diag-row{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border-soft);font-size:12px;line-height:1.45}
.live-diag-row strong{display:block;color:var(--text);font-size:12px}
.live-diag-row p{margin:2px 0 0;color:var(--muted);word-break:break-word}
.live-diag-mark{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;margin-top:1px}
.live-diag-row.ok .live-diag-mark{background:var(--success)}
.live-diag-row.uyari .live-diag-mark{background:var(--warning)}
.live-diag-row.hata .live-diag-mark{background:var(--danger)}
.live-diag-row.hata{border-color:rgba(230,73,102,.25);background:var(--danger-bg)}
.live-sim-warn:empty{display:none}
.live-sim-warn{margin-top:10px;padding:11px 13px;border-radius:14px;background:var(--warning-bg);
  border:1px solid rgba(224,138,31,.3);color:var(--warning);font-size:12px;line-height:1.5}
.live-sim-warn strong{display:block;margin-bottom:3px}
.live-sim-warn p{margin:0;color:var(--text-2)}

/* Live Auto Tune — canli yazilamayan (filtre) onerileri icin CLI satir listesi. */
.live-cli-queue:empty{display:none}
.live-cli-queue{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--border-soft);font-size:12px;line-height:1.5}
.live-cli-queue strong{display:block;margin-bottom:6px;color:var(--text)}
.live-cli-queue pre{margin:0;padding:10px;border-radius:10px;background:var(--code-bg);color:var(--code-text);
  overflow-x:auto;font-size:11px;line-height:1.6}

/* ---- Üyelik kilidi: süresi dolan hesap için tam ekran engel ---- */
.membership-lock{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,11,18,.94);backdrop-filter:blur(6px);}
.membership-lock.hidden{display:none;}
.membership-lock-card{width:min(460px,100%);text-align:center;padding:32px 26px;border-radius:18px;
  background:var(--panel,#141a24);border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 60px rgba(0,0,0,.5);}
.membership-lock-icon{width:52px;height:52px;color:#f0a132;margin-bottom:14px;}
.membership-lock-card h2{margin:0 0 10px;font-size:1.35rem;color:var(--text,#e9eef7);}
.membership-lock-card p{margin:0 0 18px;color:var(--muted,#9aa7bd);line-height:1.55;font-size:.95rem;}
.membership-lock-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:14px 20px;border-radius:12px;background:#25d366;color:#06210f;font-weight:700;font-size:1rem;
  text-decoration:none;transition:filter .15s ease;}
.membership-lock-wa:hover{filter:brightness(1.08);}
.membership-lock-wa svg{width:22px;height:22px;flex:0 0 auto;}
.membership-lock-num{margin:14px 0 18px !important;font-size:1.1rem;letter-spacing:.5px;color:var(--text,#e9eef7);font-weight:600;}
.membership-lock-card .ghost{background:none;border:1px solid rgba(255,255,255,.16);color:var(--muted,#9aa7bd);
  padding:9px 18px;border-radius:9px;cursor:pointer;font-size:.88rem;}
.membership-lock-card .ghost:hover{color:var(--text,#e9eef7);border-color:rgba(255,255,255,.3);}
@media (max-width:520px){.membership-lock-card{padding:26px 18px;}}

/* Üyelik uyarı şeridi (süre dolmadan önce) */
.membership-warn{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:11px 16px;border-radius:11px;font-size:.9rem;
  background:rgba(240,161,50,.12);border:1px solid rgba(240,161,50,.34);color:#f0a132;}
.membership-warn.hidden{display:none;}
.membership-warn a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px;
  background:#25d366;color:#06210f;font-weight:700;text-decoration:none;font-size:.85rem;}

/* ---- Ücretli/ücretsiz ana anahtarı ---- */
.billing-master{margin-bottom:20px;}
.billing-master-state{margin:6px 0 12px;padding:14px 18px;border-radius:12px;text-align:center;
  font-size:1.15rem;font-weight:800;letter-spacing:.6px;}
.billing-master-state.off{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.38);color:#1c9c4d;}
.billing-master-state.on{background:rgba(240,161,50,.13);border:1px solid rgba(240,161,50,.4);color:#c97f14;}
@media (prefers-color-scheme:dark){
  .billing-master-state.off{color:#4ade80;}
  .billing-master-state.on{color:#f0a132;}
}

/* ---- WhatsApp yardım düğmesi (sağ alt) ---- */
.support-fab{position:fixed;right:20px;bottom:88px;z-index:900;display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px;border-radius:999px;background:#25d366;color:#06210f;font-weight:700;font-size:.92rem;
  text-decoration:none;box-shadow:0 10px 26px rgba(37,211,102,.36);transition:transform .15s ease,filter .15s ease;}
.support-fab:hover{transform:translateY(-2px);filter:brightness(1.06);}
.support-fab.hidden{display:none;}
.support-fab svg{width:22px;height:22px;flex:0 0 auto;}
@media (max-width:640px){
  .support-fab{right:14px;bottom:80px;padding:12px;}
  .support-fab span{display:none;}   /* dar ekranda yalnız simge */
}

/* Ayırıcı ve üyelik zorunluluğu modunda kilitli menü görünümü */
.soft-divider{border:0;border-top:1px solid rgba(128,140,160,.22);margin:22px 0 4px;}
.nav-btn.locked{opacity:.55;}

/* Ana sayfadaki PID bölümü üyelere özel — misafire gösterilen üyelik çağrısı */
.tuner-gate{margin:18px 0 4px;padding:34px 26px;border-radius:16px;text-align:center;
  background:rgba(59,130,246,.07);border:1px dashed rgba(59,130,246,.34);}
.tuner-gate h3{margin:0 0 8px;font-size:1.15rem;}
.tuner-gate p{margin:0 auto 18px;max-width:520px;color:var(--muted,#7a869c);line-height:1.6;}

/* ---- Mobil: sol sütun çekmeceye dönüşür ---- */
@media(max-width:900px){
  .page-shell{grid-template-columns:minmax(0,1fr)}
  /* Mobil cekmece kurallari @media(max-width:980px) blogunda; buradaki eski kopya
     onu ezip menuyu kapali biraktigi icin kaldirildi. */
  .mobile-nav-close{display:grid;place-items:center;margin-left:auto;width:32px;height:32px;
    border:0;background:transparent;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
  .content-shell{padding:0 14px 18px}
  #menuBtn{display:inline-grid}
}



/* ---- Akıllı PID formu: ekrana sığan yoğun yerleşim ---- */
/* Önceki hali 2 sütun + geniş boşluktu; 20+ alan alt alta uzayıp kaydırma gerektiriyordu. */
#public-tuner .form-grid{gap:2px 22px}
#public-tuner .form-grid label{gap:5px;font-size:12px}
#public-tuner .form-grid input,#public-tuner .form-grid select{padding:9px 11px;font-size:13px}
#public-tuner .panel{padding:16px}
#public-tuner .home-pid-grid{gap:16px}
/* Uzun yardım metinleri alan yüksekliğini bozuyordu; küçültülüp sınırlandırıldı. */
#public-tuner .form-grid label small,#public-tuner .field-hint{font-size:10.5px;line-height:1.35;color:var(--muted-2)}
/* Form tam genişlik + çok sütun; sonuç panelleri altta. Yan yana dizilim formu
   dar bir şeride sıkıştırıp yanında büyük bir boşluk bırakıyordu. */
#public-tuner .home-pid-grid{grid-template-columns:minmax(0,1fr)}
#public-tuner .form-grid{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
@media(min-width:1000px){
  /* Sonuç kartları altta yan yana */
  #public-tuner .home-pid-grid > *:not(.form-panel){display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-content:start}
}
#public-tuner .empty-state{min-height:120px}


/* Onay kutuları tek satır kalır, yükseklik zorlamasından muaf. */
#public-tuner .form-grid > label:has(> input[type="checkbox"]){min-height:0;align-items:center}

/* =====================================================================
   SİTE GENELİ KOMPAKT DÜZEN
   Alanlar serbest akışta dizilince etiket uzunluğu kutuların yerini
   kaydırıyor, paneller gereğinden geniş boşluk bırakıyordu. Tüm formlar
   artık aynı ızgaraya oturur: [esneyen etiket | sabit kutu].
   ===================================================================== */
.form-grid{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px 22px}
.form-grid > label{
  /* Etiket kolonu minmax(0,1fr): satira sigmazsa metin SARAR, asla kirpilmaz.
     Kutu kolonunun alt siniri, kolon minimumundan (268px) sonra etikete en az
     ~130px birakacak sekilde secildi: 268 - 12 - 118 = 138px etiket payi. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(118px,180px);align-items:center;
  gap:12px;min-height:38px;padding:4px 0;font-size:12.5px;font-weight:500;
  color:var(--text-2);line-height:1.28;
  white-space:normal;overflow-wrap:break-word;word-break:normal}
.form-grid > label > input,
.form-grid > label > select,
.form-grid > label > textarea{
  width:100%;min-width:0;max-width:100%;height:32px;padding:5px 10px;border-radius:9px;margin:0;
  font-size:13px;font-weight:600;color:var(--text);line-height:1.15;
  background:var(--surface-solid);border:1px solid var(--border)}
/* Seçim kutuları ok simgesine yer bırakır ve metni kırpmaz. */
.form-grid > label > select{height:34px;padding-right:28px;width:100%;min-width:0;max-width:100%}
.form-grid > label > input{height:34px}
.form-grid > label > input:focus,
.form-grid > label > select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14)}
.form-grid > label > input::placeholder{color:var(--muted-2);font-weight:500;opacity:1}
.form-grid > label > textarea{height:auto;min-height:60px}
.form-grid > label > input[type="number"],
.form-grid > label > input[type="text"]{text-align:right}
/* Açıklamalar ızgarayı bozmasın; metinleri alanın tooltip'inde durur. */
.form-grid > label > .hint-text{display:none}
/* Onay kutuları tek satır: ızgara dışında kalır. */
.form-grid > label:has(> input[type="checkbox"]){
  display:flex;flex-direction:row;align-items:center;gap:8px;min-height:0;padding:5px 0}
.form-grid > label:has(> input[type="checkbox"]) > input{margin:0;order:-1;width:auto;height:auto}

/* ---- Panel ve bölüm boşlukları ---- */
.panel,.upload-zone{padding:15px}
.panel-head{margin-bottom:10px}
.panel-head h3{font-size:19px;margin:2px 0 0}
.panel-head small{font-size:9.5px;letter-spacing:.1em}
.section-title{margin:4px 0 12px}
.section-title h2{font-size:25px}
.grid{gap:14px}
.grid-2,.grid-3,.grid-4{gap:14px}
.mt-16{margin-top:11px}
.hint-text{font-size:11px;line-height:1.45}
.metric-card{padding:13px}
.metric-card strong{font-size:24px}
.tag{font-size:10.5px;padding:3px 9px}
.topbar{padding:8px 4px}
.topbar h2{font-size:20px}
button,.btn{font-size:13px}
.primary,button.primary{padding:10px 18px}
.secondary,button.secondary,.danger-soft{padding:8px 15px;font-size:12.5px}
.tab-btn{padding:8px 13px;font-size:12.5px}
.axis-row{padding:7px 0;font-size:12.5px}
.empty-state{min-height:130px}
.cli-box{max-height:280px;font-size:12px}

/* ---- Kutu içi metin kırpılmasına karşı genel koruma ---- */
/* Dar bir kapsayıcıda select/input sıfıra kadar ezilebiliyor (esnek öğelerin
   varsayılan min-width:auto davranışı kapsayıcı daraldığında çöküyor).
   Alt sınır vererek içeriğin görünür kalması garanti edilir. */
select,input[type="text"],input[type="number"],input[type="search"]{min-width:88px}
.form-grid > label > select{min-width:0}          /* ızgara sütunu zaten sabit */
/* Etiketler kesilmek yerine alt satıra sarar; anlam kaybolmaz. */
.form-grid > label{overflow:visible}
.form-grid > label > span,.form-grid > label{word-break:normal;overflow-wrap:anywhere}
/* Serbest yerleşimdeki (ızgara dışı) seçiciler içeriğine göre genişler. */
.filter-row select,.toolbar select,.panel-head select{width:auto;min-width:132px}

/* CLI sözdizimi blokları uzun parametre listeleri içeriyor; kesilmek yerine
   sarar, sarmıyorsa kendi içinde yatay kaydırılır. */
.cli-help-card pre,.view pre{overflow-x:auto;overflow-wrap:anywhere;word-break:break-word;max-width:100%}

/* =====================================================================
   KOMPAKT ÖLÇEK — tüm sekmeler
   Başlıklar ve gövde metni ekranı gereğinden çok dolduruyordu; ölçek
   küçültülüp boşluklar sıkıştırıldı. Amaç: ayarların ekrana sığması.
   ===================================================================== */
html,body{font-size:13.5px}

/* --- Başlık hiyerarşisi --- */
.topbar h2{font-size:18px;letter-spacing:-.02em}
.section-title h2,.home-section-head h2{font-size:20px;letter-spacing:-.02em;margin:0}
.panel-head h3,.panel h3{font-size:15px;letter-spacing:-.01em;margin:1px 0 0}
.panel-head small,.eyebrow{font-size:8.5px;letter-spacing:.11em}
h4{font-size:13px;margin:8px 0 4px}

/* --- Gövde ve yardımcı metin --- */
p,li,label,td,th{font-size:12.5px;line-height:1.45}
.hint-text,small{font-size:10.5px;line-height:1.4}
.axis-row,.axis-row span{font-size:12px}
.metric-card strong{font-size:20px}
.metric-card p,.metric-card small{font-size:10.5px}
.tag{font-size:10px;padding:2px 8px}
.count-badge{font-size:9.5px}

/* --- Boşluklar --- */
.panel,.upload-zone{padding:12px}
.panel-head{margin-bottom:7px;padding-bottom:0}
.section-title{margin:2px 0 9px}
.grid,.grid-2,.grid-3,.grid-4{gap:11px}
.mt-16{margin-top:8px}
.metric-card{padding:11px}
.content-shell{padding:0 18px 18px}
.topbar{padding:6px 2px;margin-bottom:6px}
.view > .panel + .panel{margin-top:11px}
.empty-state{min-height:104px}
.empty-state h3{font-size:14px}

/* --- Düğmeler --- */
button,.btn,.primary,.secondary,.danger-soft,.tab-btn{font-size:12px}
.primary,button.primary{padding:9px 16px}
.secondary,button.secondary,.danger-soft{padding:7px 13px}
.tab-btn{padding:6px 11px}
button.small,.small{font-size:11px;padding:5px 10px}

/* --- Sol sütun --- */
.nav-btn{padding:7px 10px;font-size:12.5px}
.nav-icon{width:16px;height:16px;flex:0 0 16px}
.side-footer{font-size:10px}

/* --- Admin paneli --- */
#view-admin .panel{padding:12px}
#view-admin .tab-btn{padding:6px 10px;font-size:11.5px}
#view-admin .metric-card strong{font-size:19px}
#view-admin table{font-size:11.5px}
#view-admin .user-card{padding:10px}
#view-admin .user-card h3{font-size:13px}
.billing-master-state{font-size:14px;padding:9px 14px;letter-spacing:.3px;margin:4px 0 8px}

/* --- Uzun içerik listeleri --- */
.cli-box{max-height:240px;font-size:11.5px}
.cli-help-card{padding:10px}
.cli-help-card h4{font-size:12.5px}
.education-card h3{font-size:17px;margin:14px 0 6px}

/* =====================================================================
   CLI KOMUT KARTLARI
   Komut siyah kod şeridinde, sağında kopyala düğmesi, altında ne işe
   yaradığı. Önceki hâli düz metin listesiydi; komutu ayırt etmek ve
   kopyalamak zordu.
   ===================================================================== */
.cli-command-grid,.cli-setting-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}
.cli-card{
  display:flex;flex-direction:column;border-radius:12px;overflow:hidden;
  background:var(--surface-solid);border:1px solid var(--line);
  transition:border-color .18s ease,box-shadow .18s ease}
.cli-card:hover{border-color:rgba(var(--primary-rgb),.35);box-shadow:0 6px 18px -8px rgba(var(--primary-rgb),.35)}

/* Kod şeridi — siyah zemin, açık monospace */
.cli-card-code{
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 11px;
  background:var(--code-bg);min-height:38px}
.cli-card-code code{
  flex:1 1 auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;font-weight:600;color:#e8ecff;background:none;padding:0;
  overflow-wrap:anywhere;line-height:1.35}
.cli-card-code .cli-arg{color:#8ea2ff;font-weight:500}

/* Kopyala düğmesi */
.cli-copy{
  flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;padding:0;
  border-radius:7px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  color:#cfd8ff;cursor:pointer;transition:.16s ease}
.cli-copy svg{width:14px;height:14px}
.cli-copy:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.cli-copy.kopyalandi{background:var(--success);border-color:var(--success);color:#04220f}
.cli-copy.kopyalandi svg{display:none}
.cli-copy.kopyalandi::after{content:'✓';font-size:14px;font-weight:700}

/* Açıklama gövdesi */
.cli-card-body{padding:8px 11px 9px;display:flex;flex-direction:column;gap:5px}
.cli-card-body p{margin:0;font-size:11.5px;line-height:1.45;color:var(--text-2)}
.cli-nodesc{color:var(--muted-2);font-style:italic}
.cli-cat{
  align-self:flex-start;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:rgba(var(--ink-rgb),.05);border-radius:5px;padding:2px 7px}

/* Kategori grupları */
.setting-group{border:1px solid var(--line);border-radius:12px;margin-bottom:9px;background:var(--surface-1)}
.setting-group > summary{
  cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.setting-group[open] > summary{border-bottom:1px solid var(--line)}
.setting-group .cli-setting-grid{padding:10px}
.count-chip{font-size:10px;color:var(--muted);background:rgba(var(--ink-rgb),.06);border-radius:6px;padding:1px 7px}

/* =====================================================================
   AERON FPV — zemin, başlık tipografisi ve yüzeyler
   ===================================================================== */
body{
  background:
    radial-gradient(circle at 82% 14%,rgba(78,167,255,.12),transparent 26%),
    radial-gradient(circle at 14% 92%,rgba(139,202,255,.08),transparent 27%),
    linear-gradient(135deg,#ffffff 0%,#f8f9fb 52%,#eef3f7 100%);
  background-attachment:fixed;
}
/* İnce teknik ızgara — referanstaki gibi, üst/alt kenarlarda sönümlenir. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(70,90,110,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,90,110,.026) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
}
.page-shell{position:relative;z-index:1}

/* Başlıklar Sora, gövde Manrope */
h1,h2,h3,.topbar h2,.section-title h2,.panel-head h3,.home-section-head h2{
  font-family:Sora,Manrope,system-ui,sans-serif;letter-spacing:-.03em}

/* Sol sütun: kağıt beyazı, ince kenar */
.sidebar{background:rgba(255,255,255,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--line)}
.nav-btn.active{background:var(--ice);color:var(--primary-ink);border-color:#d7eaf9}
.nav-btn.active::before{background:var(--primary)}

/* Paneller: hafif cam + üstte beyaz iç çizgi (referanstaki .access kartı) */
.panel,.upload-zone,.metric-card{
  background:rgba(255,255,255,.84);border:1px solid rgba(213,224,233,.92);
  box-shadow:var(--shadow-soft),inset 0 1px 0 #fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* Alanlar */
input,select,textarea{background:var(--surface-3);border:1px solid var(--border);color:#273746}
input:focus,select:focus,textarea:focus{
  border-color:#79b9e7;background:#fff;box-shadow:0 0 0 3px rgba(78,167,255,.08)}

/* Birincil düğme: referanstaki mavi degrade + yumuşak gölge */
.primary,button.primary{
  background:var(--grad-brand);border:0;color:#fff;font-weight:700;letter-spacing:.02em;
  box-shadow:0 12px 26px rgba(78,167,255,.19)}
.primary:hover,button.primary:hover{
  transform:translateY(-1px);box-shadow:0 16px 32px rgba(78,167,255,.25);filter:none}

/* Rozetler: buz mavisi */
.tag{background:var(--ice);border:1px solid #d7eaf9;color:#4b8bbb}
.tag.ok{background:var(--success-bg);border-color:rgba(90,180,137,.28);color:#3f8e68}
.tag.warn{background:var(--warning-bg);border-color:rgba(217,155,63,.3);color:#a9762b}
.tag.danger{background:var(--danger-bg);border-color:rgba(221,107,100,.3);color:#b8524c}

/* ---- Yazı tipi yüklenmese bile kırpılmama garantisi ---- */
/* Manrope internetten gelir; engellenirse yedek yazı tipi daha geniş olabilir.
   Etiket sarar, seçili değer kesilirse üç nokta gösterilir — yarım harf kalmaz. */
.form-grid > label{white-space:normal;overflow-wrap:break-word}
.form-grid > label > select{text-overflow:ellipsis}
.form-grid > label > input{text-overflow:ellipsis}

/* ---- Kırmızı eylem düğmesi (dikkat isteyen işlemler) ---- */
.danger-solid{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:10px;
  background:linear-gradient(90deg,#d9534f,#e2706b);color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;box-shadow:0 10px 22px rgba(217,83,79,.22);transition:.18s ease;white-space:nowrap}
.danger-solid:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(217,83,79,.3)}
.danger-solid svg{width:15px;height:15px;flex:0 0 15px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---- Kaynak atama penceresi ---- */
.res-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(var(--ink-rgb),.34);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.res-modal.hidden{display:none!important}
.res-modal-card{width:min(620px,100%);max-height:88vh;overflow:auto;padding:22px;border-radius:22px;
  position:relative;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.res-modal-head{margin:0 0 14px;padding-right:34px}
.res-modal-head h2{margin:2px 0 0;font-size:20px}
.res-modal .form-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.res-modal .auth-close{position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;
  background:transparent;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px}
.res-modal .auth-close:hover{background:rgba(var(--ink-rgb),.06);color:var(--text)}
body.res-modal-open{overflow:hidden}

/* ---- Blackbox Explorer ---- */
.bb-fields{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.bb-field{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface-3);color:var(--muted);
  font-size:11px;font-weight:600;cursor:pointer;transition:.15s ease}
.bb-field i{width:8px;height:8px;border-radius:2px;background:var(--bb-renk);opacity:.35}
.bb-field.on{color:var(--text);border-color:var(--bb-renk);background:#fff}
.bb-field.on i{opacity:1}
.bb-field:hover{border-color:var(--bb-renk)}
.bb-chart-wrap{position:relative;background:var(--surface-3);border:1px solid var(--line);
  border-radius:10px;padding:4px}
#bbChart{width:100%;display:block}
.bb-readout{position:absolute;left:48px;top:6px;font-size:10.5px;font-weight:600;
  background:rgba(255,255,255,.9);border-radius:6px;padding:2px 7px;pointer-events:none;
  white-space:nowrap;overflow:hidden;max-width:calc(100% - 60px)}
.bb-controls{display:flex;align-items:center;gap:14px;margin-top:9px;flex-wrap:wrap}
.bb-controls label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);
  font-weight:600;flex:1 1 200px}
.bb-controls input[type=range]{flex:1;min-width:120px;accent-color:var(--primary);height:auto;padding:0}
.bb-issues{margin-top:12px}
.bb-issues h4{margin:0 0 7px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.bb-issue{border-radius:9px;padding:8px 11px;margin-bottom:6px;border-left:3px solid var(--line);
  background:var(--surface-3)}
.bb-issue strong{display:block;font-size:12.5px;margin-bottom:2px}
.bb-issue p{margin:0;font-size:11.5px;line-height:1.45;color:var(--text-2)}
.bb-issue.danger{border-left-color:var(--danger);background:var(--danger-bg)}
.bb-issue.warn{border-left-color:var(--warning);background:var(--warning-bg)}
.bb-issue.ok{border-left-color:var(--success);background:var(--success-bg)}

/* ---- VTX frekans tablosu ---- */
.vtx-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.vtx-table{width:100%;border-collapse:collapse;font-size:11.5px}
.vtx-table th,.vtx-table td{padding:6px 7px;text-align:center;border-bottom:1px solid var(--line);
  white-space:nowrap}
.vtx-table thead th{background:var(--surface-3);font-size:10.5px;color:var(--muted);font-weight:700}
.vtx-table tbody th{text-align:left;font-weight:600;color:var(--text-2);background:var(--surface-3)}
.vtx-table td{cursor:pointer;color:var(--text-2);transition:.12s ease}
.vtx-table td:hover{background:var(--ice);color:var(--primary-ink)}
.vtx-table tr.aktif tbody th,.vtx-table tr.aktif th{color:var(--primary-ink)}
.vtx-table td.secili{background:var(--grad-brand);color:#fff;font-weight:700}

/* ---- VTX model kütüphanesi ---- */
.vtx-lib{display:grid;gap:6px}
.vtx-lib-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-3)}
.vtx-lib-item strong{display:block;font-size:12.5px}
.vtx-lib-item span{display:block;font-size:11px;color:var(--muted)}
.vtx-lib-item em{display:block;font-size:10.5px;color:var(--muted-2);font-style:normal;margin-top:1px}
.vtx-lib-form{margin-top:11px;padding:12px;border:1px dashed var(--border);border-radius:10px;
  background:var(--surface-3)}
.vtx-lib-form.hidden{display:none}

/* ===== FPV Araclari (hesaplayicilar) ===== */
.tool-result{margin-top:12px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-2,#fff)}
.tool-result:empty{display:none}
.tool-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:8px 12px;font-size:12.5px;border-bottom:1px solid var(--border)}
.tool-row:last-child{border-bottom:0}
.tool-row > span{color:var(--muted);flex:1 1 auto}
.tool-row > strong{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);text-align:right;white-space:nowrap}
.tool-row.vurgu{background:color-mix(in srgb,var(--primary) 9%,transparent)}
.tool-row.vurgu > strong{color:var(--primary)}
.tool-uyari{padding:10px 12px;border-top:1px solid var(--border);font-size:12.5px}
.tool-uyari strong{display:block;margin-bottom:2px;font-size:12px;letter-spacing:.02em}
.tool-uyari p{margin:0;color:var(--muted);line-height:1.5}
.tool-uyari.ok{background:color-mix(in srgb,var(--success) 10%,transparent)}
.tool-uyari.ok strong{color:var(--success)}
.tool-uyari.warn{background:color-mix(in srgb,var(--warning) 12%,transparent)}
.tool-uyari.warn strong{color:var(--warning)}
.tool-uyari.danger{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.tool-uyari.danger strong{color:var(--danger)}
.tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
.tool-chip{display:inline-flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--bg);font-size:11.5px;line-height:1.35;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tool-chip b{font-size:10.5px;letter-spacing:.04em;color:var(--primary);text-transform:uppercase}
/* Araclar sekmesi: etiketler uzun, degerler kisa -> etikete daha cok yer */
#view-tools .form-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:2px 20px;padding-right:2px}
#view-tools .form-grid > label{grid-template-columns:minmax(0,1fr) minmax(110px,150px)}
#view-tools .form-grid > label > input,
#view-tools .form-grid > label > select{max-width:100%}
/* Araclar: metin alani, rozet */
#view-tools .mono-area{width:100%;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px;line-height:1.5;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--bg);color:var(--text);resize:vertical;min-height:150px}
#view-tools .mono-area:focus{outline:2px solid var(--primary);outline-offset:-1px}
#view-tools .badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);white-space:nowrap}
/* Onay kutulari: iki kolonlu izgarada sola yaslanir */
#view-tools .form-grid > label:has(> input[type=checkbox]){grid-template-columns:minmax(0,1fr) auto}
#view-tools .form-grid > label > input[type=checkbox]{width:16px;height:16px;justify-self:start;margin:0}
#view-tools .cli-box:empty{display:none}
#view-tools code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
  padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--primary) 10%,transparent)}
/* CLI terminali */
.cli-quick{display:flex;flex-wrap:wrap;gap:6px}
.cli-quick-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2,#fff);cursor:pointer;text-align:left}
.cli-quick-btn:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}
.cli-quick-btn code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;
  color:var(--primary);background:none;padding:0}
.cli-quick-btn span{font-size:10.5px;color:var(--muted);line-height:1.3}
.cli-term{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.45;
  min-height:230px;max-height:420px;overflow:auto;padding:12px 14px;border-radius:10px;
  background:#0f1418;color:#d7e2ea;white-space:pre-wrap;word-break:break-word;
  border:1px solid rgba(255,255,255,.08)}
.cli-input-row{display:flex;align-items:center;gap:8px}
.cli-prompt{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;color:var(--primary);font-size:15px}
#ctCmd{flex:1 1 auto;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:9px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--bg);color:var(--text)}
#ctCmd:focus{outline:2px solid var(--primary);outline-offset:-1px}
#fwStringsOut{max-height:340px;overflow:auto}
#fwStringsOut:empty{display:none}

/* ===== Form olculeri: son soz =====
   Bu blok, ustteki eski kurallarin birakabilecegi kirpilmalari kapatir.
   Kural: etiket metni hicbir kosulda kesilmez; sigmazsa alt satira gecer. */
.form-grid > label{min-width:0}
.form-grid > label > input,
.form-grid > label > select,
.form-grid > label > textarea{min-width:0}
/* Etiket, label'in dogrudan metin dugumu oldugu icin ayri bir kap yok;
   tasma gorunur kalsin ama metin kesilmesin diye ellipsis YALNIZ kutulara verilir. */
.form-grid > label{text-overflow:clip;overflow:visible}
/* Cok dar ekranda tek kolona in ve etiketi kutunun ustune al. */
@media (max-width:600px){
  .form-grid > label{grid-template-columns:minmax(0,1fr);gap:4px;align-items:start;min-height:0}
  .form-grid > label > input,
  .form-grid > label > select,
  .form-grid > label > textarea{width:100%;max-width:none}
  #view-tools .form-grid > label{grid-template-columns:minmax(0,1fr)}
  .form-grid > label:has(> input[type="checkbox"]){grid-template-columns:auto 1fr;align-items:center}
}

/* ===== Kutu ici dikey kirpilma duzeltmesi =====
   Sorun: sabit height:34px ile padding 9+9=18px birlestiginde ic yukseklik 14px'e
   duser; 13px yazi tipi alt uzantilariyla (g, y, c, s) ~17px ister ve harflerin alti
   kesilir. Turkce ve Arapca'da bu her satirda gorunur.
   Cozum: yuksekligi sabit degil ALT SINIR yap, satir yuksekligini alt uzantiya yer
   birakacak kadar ac, dikey dolguyu kucult. Kutu yine 34px gorunur ama icerik sigar. */
.form-grid > label > input,
.form-grid > label > select,
.form-grid > label > textarea{
  height:auto;min-height:34px;line-height:1.4;padding-top:6px;padding-bottom:6px}
.form-grid > label > textarea{min-height:60px}
#public-tuner .form-grid input,
#public-tuner .form-grid select{padding:6px 11px;line-height:1.4}
/* Secim kutusunun ok alani korunur */
.form-grid > label > select{padding-right:28px}
#public-tuner .form-grid select{padding-right:28px}

/* ===== FPV Araclari: aranabilir sol liste + sag icerik ===== */
.tool-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start;margin-top:14px}
.tool-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--border);border-radius:14px;background:var(--surface-solid);padding:10px;
  max-height:calc(100vh - 90px)}
.tool-search{position:relative;flex:0 0 auto}
.tool-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--muted-2);pointer-events:none}
#toolSearch{width:100%;height:34px;padding:0 10px 0 31px;border:1px solid var(--border);
  border-radius:9px;background:var(--bg);color:var(--text);font-size:12.5px}
#toolSearch:focus{outline:2px solid var(--primary);outline-offset:-1px}
#toolSearch::-webkit-search-cancel-button{cursor:pointer}
.tool-nav-list{overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px}
.tool-nav-group{display:flex;flex-direction:column;gap:3px}
.tool-nav-label{font-size:9.5px;font-weight:800;letter-spacing:.11em;color:var(--muted-2);
  padding:0 6px 2px}
.tool-nav-btn{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
  padding:7px 10px;border:1px solid transparent;border-radius:9px;background:transparent;
  cursor:pointer;line-height:1.25;transition:background .12s,border-color .12s}
.tool-nav-btn b{font-size:12.5px;font-weight:650;color:var(--text)}
.tool-nav-btn small{font-size:10.5px;color:var(--muted-2)}
.tool-nav-btn:hover{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.tool-nav-btn.active{background:color-mix(in srgb,var(--primary) 13%,transparent);
  border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.tool-nav-btn.active b{color:var(--primary);font-weight:750}
.tool-nav-btn.active small{color:color-mix(in srgb,var(--primary) 75%,var(--muted))}
.tool-nav-bos{font-size:12px;color:var(--muted-2);padding:10px 8px;margin:0;text-align:center}
.tool-content > .tool-panel:first-child{margin-top:0}
/* Dar ekran: liste uste gecer, yatay kaydirilabilir olur */
@media (max-width:900px){
  .tool-layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .tool-nav{position:static;max-height:none;padding:8px}
  .tool-nav-list{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}
  .tool-nav-group{flex-direction:row;align-items:center;gap:6px;flex:0 0 auto}
  .tool-nav-label{padding:0 4px 0 0;white-space:nowrap}
  .tool-nav-btn{flex:0 0 auto;white-space:nowrap;padding:6px 10px}
  .tool-nav-btn small{display:none}
}

/* ===== Ana sayfa arac butonu (STL -> STEP) ===== */
.home-tool-row{margin:0 0 14px;display:flex;justify-content:flex-start}
.home-tool-btn{display:flex;align-items:center;gap:14px;width:auto;max-width:420px;padding:13px 16px;
  border:1px solid var(--border);border-radius:14px;background:var(--surface-solid);
  cursor:pointer;text-align:left;transition:border-color .14s,background .14s,box-shadow .14s}
.home-tool-btn:hover{border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 5%,var(--surface-solid));
  box-shadow:0 2px 10px rgba(0,0,0,.05)}
.home-tool-btn.acik{border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 9%,var(--surface-solid))}
.home-tool-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:11px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.home-tool-icon svg{width:20px;height:20px}
.home-tool-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.home-tool-text b{font-size:13.5px;font-weight:700;color:var(--text)}
.home-tool-text small{font-size:11.5px;color:var(--muted);line-height:1.35}
.home-tool-arrow{font-size:22px;line-height:1;color:var(--muted-2);flex:0 0 auto;
  transition:transform .18s,color .14s}
.home-tool-btn.acik .home-tool-arrow{transform:rotate(90deg);color:var(--primary)}
@media (max-width:600px){
  .home-tool-btn{padding:11px 13px;gap:11px}
  .home-tool-text small{display:none}
}

/* Dar ekran duzeltmeleri: liste butonlari width:100% yuzunden sisiyordu, ve
   topbar sagdaki dugmeler tasma yaratiyordu. */
@media (max-width:900px){
  .tool-nav-btn{width:auto;max-width:none}
  .tool-nav-list{scrollbar-width:thin}
}
@media (max-width:640px){
  .topbar-right{flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}
  .topbar-right > *{flex:0 0 auto}
  .topbar{flex-wrap:wrap;gap:8px}
  .topbar h2,#pageTitle{min-width:0;overflow-wrap:anywhere}
}
/* Sayfa govdesi hicbir kosulda yatay kaymamali */
body{overflow-x:hidden}
.page-shell{max-width:100%;overflow-x:clip}
/* Dar ekranda buton yine tam genislige yayilir */
@media (max-width:600px){ .home-tool-btn{width:100%;max-width:none} }

/* Ders diyagramlari: viewBox ile olceklenir, width verilmezse 0 yuksekliginde
   cizilir. currentColor kullanildigi icin acik/koyu temada da okunur kalir. */
.edu-fig{display:block;width:100%;max-width:520px;height:auto;margin:14px 0 4px;color:var(--muted)}
.edu-source{margin:10px 0 0}
.edu-source a{color:var(--primary-ink);text-decoration:underline;font-weight:600}

/* Yerel test modu bandi: giris/uyelik kapaliyken kullanicinin bunu FARK ETMESI
   gerekir, bu yuzden sayfanin en ustunde ve yuksek kontrastta durur. */
#testModeBanner{position:sticky;top:0;z-index:9999;background:#b45309;color:#fff;
  padding:9px 16px;font-size:13px;font-weight:700;text-align:center;letter-spacing:.01em}

/* Egitim makalesi: uzun metin icin gezinme ve gorsel buyutme */
.edu-toc{margin:0 0 18px;padding:16px 18px}
.edu-toc b{display:block;margin-bottom:10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.edu-toc nav{display:grid;gap:4px;max-height:320px;overflow:auto}
.edu-toc a{color:var(--ink);text-decoration:none;font-size:14px;padding:4px 6px;border-radius:8px}
.edu-toc a:hover{background:rgba(var(--ink-rgb),.06)}
.edu-toc-h2{font-weight:800;margin-top:8px}
.edu-toc-h3{padding-left:16px!important;color:var(--muted)!important;font-size:13px!important}
#eduArticle img{max-width:100%;height:auto;border-radius:10px}
#eduArticle .imgbtn{border:0;background:none;padding:0;cursor:zoom-in;display:block;width:100%}
.edu-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.edu-lightbox img{max-width:96vw;max-height:92vh;border-radius:12px}

/* --- Egitim alani kullanilabilirlik --- */
/* Okuma ilerlemesi: uzun makalede ne kadar kaldigini gosterir */
.edu-progress{position:sticky;top:0;z-index:50;height:3px;background:rgba(var(--ink-rgb),.08);
  border-radius:99px;overflow:hidden;margin:0 0 12px}
.edu-progress>span{display:block;height:100%;width:0;background:var(--primary-ink);transition:width .1s linear}

/* Katlanir icindekiler basligi */
.edu-toc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;padding:0 0 10px;cursor:pointer;color:inherit;text-align:left}
.edu-toc-head b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.edu-toc-head span{font-size:12px;color:var(--muted-2)}
.edu-toc-head[aria-expanded="false"] b::after{content:' ▾'}
.edu-toc-head[aria-expanded="true"] b::after{content:' ▴'}

/* Okunan bolum icindekilerde isaretlenir */
.edu-toc a.aktif{background:rgba(var(--primary-rgb),.12);color:var(--primary-ink);font-weight:700}
.edu-toc a.sonuc-disi{opacity:.32}

/* Arama vurgusu */
#eduArticle mark.edu-hit{background:#ffe08a;color:#3a2b00;border-radius:3px;padding:0 2px}

/* Basa don */
.edu-to-top{position:fixed;right:18px;bottom:88px;z-index:60;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper,#fff);color:var(--ink);font-size:18px;cursor:pointer;
  box-shadow:0 10px 30px rgba(15,23,42,.16)}
.edu-to-top:hover{background:rgba(var(--primary-rgb),.08)}

@media(max-width:760px){
  .edu-toc nav{max-height:240px}
  .edu-to-top{right:12px;bottom:76px}
}

/* --- Eğitim: iki kolon (metin + sağda içindekiler) --- */
.edu-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.edu-side{position:sticky;top:14px;display:grid;gap:14px;align-content:start}
.edu-side-box{padding:14px;display:grid;gap:8px}
.edu-side-box input{width:100%}
.edu-toc{padding:14px}
.edu-toc nav{max-height:calc(100vh - 260px);overflow:auto}
@media(max-width:1000px){
  .edu-layout{grid-template-columns:minmax(0,1fr)}
  .edu-side{position:static;order:-1}
  .edu-toc nav{max-height:240px}
}

/* ==========================================================================
   PASTEL TEMA  —  açık, ferah, buzlu cam
   Koyu doygun tema yerine: neredeyse beyaz bir zemin, üzerinde çok yumuşak
   pastel geçişler (lila → gök mavisi → nane → şeftali → pembe) ve buzlu cam
   yüzeyler. Metin koyu olduğu için kontrast doğal olarak yüksek çıkar —
   koyu temada uğraştığımız okunabilirlik sorunları burada oluşmaz.
   ========================================================================== */
/* Pastel palet: YALNIZ acik tema. Karanlik tema listeye dahil edilirse :root[data-theme="dark"]
   blogu (bkz. ust taraf) ezilir ve koyu mod hic calismaz. */
:root,:root[data-theme="light"]{
  --bg:#fbfbfd;
  --bg-2:#f4f5f9;
  --panel:rgba(255,255,255,.72);
  --panel-soft:rgba(255,255,255,.6);
  --surface-rgb:255,255,255;
  --surface-1:rgba(255,255,255,.78);
  --surface-2:rgba(255,255,255,.62);
  --surface-3:rgba(255,255,255,.55);
  --surface-solid:#ffffff;
  --border-soft:rgba(0,0,0,.07);
  --border:rgba(0,0,0,.11);
  --line:rgba(0,0,0,.08);
  --text:#1d1d1f;
  --text-2:#3a3a3e;
  --muted:#6e6e73;
  --muted-2:#8e8e93;
  --ink-rgb:29,29,31;
  --primary:#5b8def;
  --primary-rgb:91,141,239;
  --primary-2:#8fb4f5;
  --primary-ink:#3f6fd0;
  --accent:#b9a7f0;
  --ice:#eef3fd;
  --silver:#d8dce4;
  --code-bg:#f3f4f8;
  --code-text:#2b2f36;
  --shadow:0 18px 50px rgba(70,80,110,.10);
  --shadow-soft:0 8px 24px rgba(70,80,110,.08);
  --shadow-lift:0 12px 28px rgba(91,141,239,.18);
  --success:#4fb783;
  --success-bg:rgba(79,183,131,.12);
  --warning:#e0a44a;
  --warning-bg:rgba(224,164,74,.14);
  --danger:#e2726a;
  --danger-bg:rgba(226,114,106,.12);
  --grad-brand:linear-gradient(90deg,#5b8def,#b9a7f0);
  color-scheme:light;
}

/* Pastel gökyüzü: renkler çok düşük doygunlukta, birbirine yumuşak geçer */
html{
  background:
    radial-gradient(1100px 700px at 12% 8%, rgba(178,196,255,.38), transparent 62%),
    radial-gradient(1000px 640px at 88% 18%, rgba(255,197,222,.34), transparent 60%),
    radial-gradient(1000px 700px at 78% 88%, rgba(178,235,222,.32), transparent 62%),
    radial-gradient(900px 620px at 18% 82%, rgba(255,219,190,.30), transparent 60%),
    linear-gradient(180deg,#fdfdff 0%,#f7f8fc 45%,#f4f6fb 100%);
  background-attachment:fixed;
  min-height:100%;
}
body{background:transparent !important;color:var(--text)}

/* KOYU TEMA ARKA PLANI.
   Ustteki pastel gradyan html elementine uygulanir ve body seffaf birakilir. Bu yuzden
   ":root[data-theme='dark'] body" kurali hicbir sey degistirmiyordu: arka plan body'de
   degil html'de. Koyu tema da ayni yerden, ayni ozgullukten ezmek zorunda. */
html[data-theme="dark"]{
  background:
    radial-gradient(1100px 700px at 12% 8%, rgba(64,96,196,.22), transparent 62%),
    radial-gradient(1000px 640px at 88% 18%, rgba(126,72,168,.18), transparent 60%),
    radial-gradient(1000px 700px at 78% 88%, rgba(38,124,122,.18), transparent 62%),
    radial-gradient(900px 620px at 18% 82%, rgba(150,96,60,.14), transparent 60%),
    linear-gradient(180deg,#0b0e16 0%,#0a0d14 55%,#080b12 100%);
  background-attachment:fixed;
  min-height:100%;
  color-scheme:dark;
}
/* Sistem koyu temada ve kullanici acik temayi SECMEDIYSE ayni arka plan gecerli olmali. */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    background:
      radial-gradient(1100px 700px at 12% 8%, rgba(64,96,196,.22), transparent 62%),
      radial-gradient(1000px 640px at 88% 18%, rgba(126,72,168,.18), transparent 60%),
      radial-gradient(1000px 700px at 78% 88%, rgba(38,124,122,.18), transparent 62%),
      radial-gradient(900px 620px at 18% 82%, rgba(150,96,60,.14), transparent 60%),
      linear-gradient(180deg,#0b0e16 0%,#0a0d14 55%,#080b12 100%);
    background-attachment:fixed;
    color-scheme:dark;
  }
}

/* Buzlu cam yüzeyler */
.panel,.card,.education-reader,.education-toolbar,.edu-toc,.edu-side-box,
.tool-card,.home-card,.stat-card,.modal-card,.auth-card,
.sidebar,.sidebar.glass,.glass,.glass-soft,.side-footer,.side-footer.glass-soft{
  background:var(--panel);
  border:1px solid var(--border-soft);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:var(--shadow-soft);
}
.status-pill,.icon-btn,.icon-btn.theme-toggle,select,#languageSelect,
input,textarea,button.secondary,.secondary{
  background:rgba(255,255,255,.75);
  border:1px solid var(--border-soft);
  color:var(--text);
}
select option,#languageSelect option{background:#fff;color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
button.secondary:hover,.secondary:hover,.icon-btn:hover{background:#fff}

/* Menü: seçili olan pastel vurguyla ayrılır */
.nav-btn{color:var(--text-2);font-weight:600}
.nav-btn:hover{background:rgba(var(--primary-rgb),.09);color:var(--primary-ink)}
.nav-btn.active{background:rgba(var(--primary-rgb),.14);color:var(--primary-ink)}

/* Arka planda süzülen pastel noktalar — açık zeminde göze batmasın diye
   soft ve düşük opaklıkta */
body::before,body::after{
  content:'';position:fixed;left:0;right:0;top:-10%;height:120%;
  z-index:-1;pointer-events:none;background-repeat:repeat;
}
body::before{
  background-image:
    radial-gradient(2.6px 2.6px at 14% 20%, rgba(150,180,255,.55), transparent),
    radial-gradient(2.2px 2.2px at 36% 56%, rgba(196,168,244,.5), transparent),
    radial-gradient(2.4px 2.4px at 62% 26%, rgba(255,178,210,.5), transparent),
    radial-gradient(2.2px 2.2px at 84% 44%, rgba(255,206,160,.45), transparent),
    radial-gradient(2.4px 2.4px at 26% 78%, rgba(150,226,208,.45), transparent);
  background-size:820px 820px;
  animation:pastel-kay 120s linear infinite, pastel-parilti 8s ease-in-out infinite alternate;
}
body::after{
  background-image:
    radial-gradient(1.8px 1.8px at 8% 34%, rgba(160,190,255,.4), transparent),
    radial-gradient(1.8px 1.8px at 48% 16%, rgba(255,190,220,.38), transparent),
    radial-gradient(1.8px 1.8px at 74% 62%, rgba(170,230,215,.36), transparent);
  background-size:560px 560px;
  animation:pastel-kay 80s linear infinite reverse, pastel-parilti 6s ease-in-out infinite alternate-reverse;
}
@keyframes pastel-kay{from{transform:translate3d(0,0,0)}to{transform:translate3d(-36px,-52px,0)}}
@keyframes pastel-parilti{from{opacity:.45}to{opacity:.85}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}

/* Tipografi: Apple’ın sistem yazı tipi varsa öne alınır, yoksa siteninki */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Manrope,system-ui,sans-serif;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:650;letter-spacing:-.015em;color:var(--text);text-shadow:none}
p,li,td{color:var(--text-2)}
.hint-text,small,.muted{color:var(--muted) !important}

/* Soluk gri tonlar bir kademe koyulaştırıldı: ölçülen ikincil metin kontrastı
   3.23 idi (WCAG AA eşiği 4.5). Pastel görünüm korunur, okunabilirlik geçer. */
:root,:root[data-theme="light"]{   /* okunurluk ayari: yalniz acik tema */
  --muted:#5c5c63;
  --muted-2:#74747c;
  --text-2:#33333a;
}

/* ==========================================================================
   KOMUT / KOD ALANLARI — koyu terminal
   Pastel tema açık olduğu için kopyalanabilir komut kutuları da açık kalıyordu
   ve "buradan kopyalanacak metin" ayrımı kayboluyordu. Bu alanlar bilinçli
   olarak KOYU: hem terminal geleneğine uyar hem de sayfadaki diğer içerikten
   bakışta ayrılır.
   ========================================================================== */
:root,:root[data-theme="light"],:root[data-theme="dark"]{
  --code-bg:#14161b;
  --code-text:#e9ecf3;
}

.cli-box,.cli-term,.cli-editor,.mono-area,.terminal,
pre,pre code,.code-box,.codebox,#compiledCli,#cnvOut,#diffOut,#ulOut,#ctTerm{
  background:#14161b !important;
  color:#e9ecf3 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px;
  line-height:1.65;
  -webkit-font-smoothing:auto;
}
.cli-box,.cli-term,pre,.code-box{padding:14px 16px;overflow:auto}
.cli-editor,.mono-area{padding:12px 14px}

/* Girdi alanlarındaki yer tutucu ve imleç koyu zemine göre */
.cli-editor::placeholder,.mono-area::placeholder{color:#8b93a7 !important}
.cli-editor,.mono-area{caret-color:#7fd7a1}

/* Terminal satırı: komut istemi yeşil, giriş alanı koyu */
.terminal-panel{background:var(--panel)}
.terminal-panel .terminal,.terminal-actions+.terminal{background:#14161b !important}
.cli-prompt{color:#7fd7a1 !important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cli-input-row input,.terminal-input{
  background:#14161b !important;color:#e9ecf3 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.cli-input-row input::placeholder,.terminal-input::placeholder{color:#8b93a7 !important}

/* Kopyala/temizle düğmeleri koyu kutunun üstünde okunur kalsın */
.cli-box+.btn-row button,.terminal-actions button{color:var(--text)}

/* Satır içi kod: koyu ama daha yumuşak, metin akışını bölmesin */
code:not(pre code){
  background:rgba(20,22,27,.92);color:#e9ecf3;
  padding:1px 6px;border-radius:6px;font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Eğitim makalesindeki kod blokları da aynı görünümde */
#eduArticle pre,#eduArticle pre code{background:#14161b !important;color:#e9ecf3 !important;border:1px solid rgba(255,255,255,.14) !important}
#eduArticle code:not(pre code){background:rgba(20,22,27,.92) !important;color:#e9ecf3 !important}

/* Admin SEO düzenleyici: üç dil yan yana */
.seo-lang-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.seo-lang{padding:14px;display:grid;gap:10px;align-content:start}
.seo-lang b{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.seo-lang textarea{resize:vertical;min-height:70px}
.mb-16{margin-bottom:16px}
@media(max-width:1000px){.seo-lang-grid{grid-template-columns:minmax(0,1fr)}}

/* Ceviri eksigi bildirimi: sessizce baska dilde icerik gostermek yaniltir */
.edu-lang-note{
  background:rgba(224,164,74,.14);
  border:1px solid rgba(224,164,74,.35);
  color:var(--text);
  padding:10px 14px;border-radius:12px;margin:0 0 16px;font-size:14px;font-weight:500;
}

/* --- OSD onizleme zemini (INAV Configurator tarzi) ---
   OSD ogelerinin GERCEK goruntu uzerinde okunup okunmadigi ancak zemin
   degistirilerek anlasilir: beyaz yazi gokyuzunde kaybolur, koyu zeminde
   rahat okunur. Gradyanlar gercek video karesini taklit eder. */
.osd-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.osd-bg-pick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.osd-bg-pick select{min-width:150px}
.osd-preview-frame[data-bg="sky"]{background:linear-gradient(180deg,#2f6fb5 0%,#5fa3d8 55%,#a9cbe3 100%)}
.osd-preview-frame[data-bg="grass"]{background:linear-gradient(180deg,#7fb2d9 0%,#8fbf88 46%,#3f6b3a 100%)}
.osd-preview-frame[data-bg="sunset"]{background:linear-gradient(180deg,#26406b 0%,#8a5a7a 45%,#e0915e 78%,#f2c48a 100%)}
.osd-preview-frame[data-bg="gray"]{
  background-color:#8a8a8a;
  background-image:linear-gradient(45deg,rgba(255,255,255,.16) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.16) 75%),
                   linear-gradient(45deg,rgba(255,255,255,.16) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.16) 75%);
  background-size:26px 26px;background-position:0 0,13px 13px;
}

/* --- OSD: Uyarilar / Post-Flight Statistics (Betaflight Configurator birebir) --- */
.osd-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;max-height:280px;overflow:auto;margin-top:10px}
.osd-toggle{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 2px;cursor:pointer}
.osd-toggle input{margin:0}
@media(max-width:640px){.osd-toggle-grid{grid-template-columns:minmax(0,1fr)}}

/* OSD uyari / istatistik secenekleri: cok sutunlu checkbox izgarasi */
.osd-toggle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px}
.osd-toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:5px 8px;border-radius:9px;cursor:pointer}
.osd-toggle:hover{background:rgba(var(--primary-rgb),.08)}
.osd-toggle input{flex:0 0 auto;margin:0}
.osd-toggle span{color:var(--text-2)}

/* BUZLU CAM YEDEGI.
   Yuzeyler yari saydam (--panel ~%72) ve okunurlugu backdrop-filter'in arkayi
   bulaniklastirmasina guveniyor. Ozellikle eski mobil tarayicilarda bu ozellik
   desteklenmez; o zaman arkadaki icerik metnin arasindan gorunur ve menu okunmaz
   hale gelir. Destek yoksa yuzeyler opak yapilir. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .panel,.card,.sidebar,.sidebar.glass,.glass,.glass-soft,.side-footer,
  .mobile-tabbar,.modal-card,.auth-card,.home-card,.tool-card,.stat-card{
    background:var(--surface-solid);
  }
  :root[data-theme="dark"] .panel,:root[data-theme="dark"] .card,
  :root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .glass,
  :root[data-theme="dark"] .glass-soft,:root[data-theme="dark"] .mobile-tabbar{
    background:var(--surface-solid);
  }
}

/* iOS SAFARI — ACILIR MENU DUZELTMESI (mobil).
   Sorun: .sidebar mobilde hem transform:translateX() ile kayiyor hem de
   backdrop-filter:blur(20px) tasiyordu. WebKit'te bir eleman transform ile
   tasindiginda backdrop ornegi yanlis konumdan alinir; sonuc olarak elemanin
   KENDI icerigi bulanik cizilir ve dokunma hedeflemesi sasar. Gercek iPhone'da
   menu metinleri okunamiyor ve satirlar secilemiyordu; masaustunde sidebar
   position:sticky oldugu (transform almadigi) icin sorun gorunmuyordu.

   Cozum: acilir menude buzlu cam yerine OPAK yuzey. Katmanlanma da acikca
   sabitleniyor (karartma katmani z-index:65). */
@media(max-width:980px){
  .sidebar,.sidebar.glass{
    z-index:70;
    background:var(--surface-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  :root[data-theme="dark"] .sidebar,
  :root[data-theme="dark"] .sidebar.glass{
    background:var(--surface-solid);
  }
  /* Ust uste iki backdrop-filter katmani iOS'ta ayni hataya yol acar; karartma
     katmani duz saydam renkle de ayni isi gorur. */
  .nav-backdrop{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(var(--ink-rgb),.5);
  }
}

/* ACILIR MENU KATMAN DUZELTMESI (mobil).
   .page-shell hem position:relative hem z-index:1 tasidigi icin KENDI katman baglamini
   olusturuyordu. Bunun sonucu: icindeki .sidebar'in z-index:70 degeri yalniz o baglamin
   ICINDE gecerli; sayfa genelinde sidebar, page-shell'in katmani olan 1 ile siralaniyor.
   Karartma katmani (.nav-backdrop, z-index:65) body'nin dogrudan cocugu oldugu icin
   menunun USTUNDE kaliyor: menu bulanik gorunuyor ve dokunmalar menuye ulasmiyordu.

   Cozum: mobilde page-shell'in katman baglamini kaldir. Boylece sidebar (70) karartmanin
   (65) ustune, karartma da topbar'in (40) ustune duser -- istenen sira. */
@media(max-width:980px){
  .page-shell{z-index:auto}
}

/* ACILIR MENUDE ALT BILGI KUTUSU LISTEYI EZIYORDU (mobil).
   .sidebar masaustunde justify-content:space-between kullaniyor; mobil blok bunu
   sifirlamadigi icin ayni kural cekmecede de geciyordu. Menu listesi ekrana sigmayinca
   space-between ogeleri birbirinin uzerine bindiriyor ve .side-footer, listenin son
   maddelerini (Egitim, Sanal Asistan, CLI Komutlari, Hesabim) ortuyordu; o maddelere
   dokunulamiyordu. Cekmecede ogeler yukaridan asagi akmali, liste kaydirilabilir olmali. */
@media(max-width:980px){
  .sidebar{justify-content:flex-start}
  .sidebar .nav-stack{flex:0 0 auto}
  .sidebar .side-footer{flex:0 0 auto;margin-top:12px}
}

/* ACILIR MENUNUN SON MADDELERI ALT CUBUGUN ALTINDA KALIYORDU (mobil).
   .mobile-tabbar sabit, 68px yuksekliginde ve z-index:75 ile menuden (70) ustte.
   .sidebar ise ekranin en altina kadar uzaniyordu; listenin son maddeleri (or. CLI
   Komutlari, Hesabim) cubugun altinda kaliyor ve dokunulamiyordu.
   Cozum: cekmecenin alt bosluguna cubuk yuksekligi kadar pay birak; liste kaydirilarak
   sonuna kadar erisilebilir olsun. */
@media(max-width:980px){
  .sidebar{padding-bottom:calc(var(--vv-bottom-gap,0px) + 86px)}
}