/* NS Viewport Studio — Components v3.0 */

/* ═══ TOPBAR ═══ */
.bar{position:fixed;top:0;left:0;right:0;z-index:300;height:var(--bar-h);background:rgba(7,11,22,.93);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-bottom:1px solid var(--br-1);display:flex;align-items:center;padding:0 var(--s4);gap:var(--s3)}
.bar-logo{display:flex;align-items:center;gap:11px;font-family:'SF Pro Display','Aptos Display','Inter','Segoe UI Variable',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14.5px;font-weight:900;letter-spacing:-.48px;color:var(--tx-1);flex-shrink:0;transition:opacity var(--ease),transform var(--ease)}
.bar-logo:hover{opacity:.94;transform:translateY(-1px)}
.logo-gem{width:32px;height:32px;border-radius:12px;background:linear-gradient(145deg,#7fb2ff 0%,#4d8df6 44%,#38d9f5 100%);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:950;color:#fff;box-shadow:0 12px 28px -14px rgba(77,141,246,.9),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -9px 18px rgba(3,10,24,.16);flex-shrink:0;letter-spacing:.4px}
.bar-spacer{flex:1}
.bar-right{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
/* URL bar */
.url-bar{flex:1;max-width:520px;display:flex;align-items:center;gap:var(--s2);background:var(--bg-3);border:1px solid var(--br-2);border-radius:var(--r8);padding:0 12px;height:36px;transition:border-color var(--ease),box-shadow var(--ease);position:relative}
.url-bar:focus-within{border-color:var(--blue-a30);box-shadow:0 0 0 3px var(--blue-a10)}
.url-bar input{flex:1;background:none;border:none;color:var(--tx-1);font-size:13px;font-family:var(--font);min-width:0}
.url-bar input::placeholder{color:var(--tx-4)}
.url-reload{color:var(--tx-3);cursor:pointer;display:flex;align-items:center;padding:4px;border-radius:var(--r4);transition:color var(--ease),transform var(--ease);flex-shrink:0}
.url-reload:hover{color:var(--tx-2)}
.url-reload.spin svg{animation:spin .65s linear}
.live-pill{display:flex;align-items:center;gap:5px;background:var(--green-a10);border:1px solid var(--green-a20);border-radius:var(--r-full);padding:3px 10px;font-size:10px;font-weight:700;color:var(--green);flex-shrink:0;letter-spacing:.3px}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulseDot 1.5s ease infinite}
.bar-nav{display:flex;align-items:center;gap:2px}
.bar-nav-a{padding:6px 12px;border-radius:var(--r6);font-size:13px;font-weight:500;color:var(--tx-2);cursor:pointer;transition:var(--motion-standard)}
.bar-nav-a:hover{color:var(--tx-1);background:var(--bg-3)}
.bar-nav-a.on{color:var(--tx-1);font-weight:600}
/* Topbar buttons */
.tbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r6);background:var(--bg-3);border:1px solid var(--br-2);font-size:12px;font-weight:600;color:var(--tx-2);cursor:pointer;transition:var(--motion-standard);white-space:nowrap;font-family:var(--font)}
.tbtn:hover{color:var(--tx-1);border-color:var(--br-3);background:var(--bg-4)}
.tbtn svg{width:13px;height:13px;flex-shrink:0}
.tbtn-p{background:var(--g-blue);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(77,141,246,.4)}
.tbtn-p:hover{opacity:.92;color:#fff;box-shadow:0 4px 18px rgba(77,141,246,.32)}
.tbtn-p:active{opacity:.86}
.bar-sep{width:1px;height:20px;background:var(--br-2);flex-shrink:0;margin:0 4px}
.bar-back{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tx-2);cursor:pointer;transition:color var(--ease)}
.bar-back:hover{color:var(--tx-1)}
.bar-crumb{font-size:12px;font-weight:600;color:var(--tx-3)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--g-blue);border:1.5px solid var(--br-3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer;transition:var(--motion-standard)}
.avatar:hover{box-shadow:var(--sh-blue)}
.lang{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r6);background:var(--bg-3);border:1px solid var(--br-2);font-size:12px;color:var(--tx-2);cursor:pointer;transition:var(--motion-standard)}
.lang:hover{border-color:var(--br-3);color:var(--tx-1)}

/* ═══ SIDEBAR ═══ */
.sidebar{width:var(--side-w);flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--br-1);display:flex;flex-direction:column;align-items:center;padding:var(--s3) 0 var(--s3);gap:2px;overflow-y:auto;overflow-x:hidden}
.si{width:42px;height:42px;border-radius:var(--r8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:var(--motion-standard);color:var(--tx-3);position:relative}
.si:hover{background:var(--bg-3);color:var(--tx-2)}
.si.on{background:var(--blue-a15);color:var(--blue)}
.si.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:55%;background:var(--blue);border-radius:0 2px 2px 0}
.si-icon{font-size:17px;line-height:1}
.si-lbl{font-size:8px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
.si-sep{width:30px;height:1px;background:var(--br-2);flex-shrink:0;margin:4px 0}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--r8);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:var(--motion-standard);white-space:nowrap;border:1px solid transparent;letter-spacing:-.1px}
.btn-p{background:var(--g-blue);color:#fff;border:none;box-shadow:0 2px 14px rgba(77,141,246,.38)}
.btn-p:hover{opacity:.92;box-shadow:0 6px 20px rgba(77,141,246,.32)}
.btn-p:active{opacity:.86}
.btn-g{background:transparent;border-color:var(--br-2);color:var(--tx-2)}
.btn-g:hover{background:var(--bg-3);color:var(--tx-1);border-color:var(--br-3)}
.btn-s{background:var(--bg-4);border-color:var(--br-2);color:var(--tx-1)}
.btn-s:hover{background:var(--bg-5);border-color:var(--br-3)}
.btn-d{background:var(--red-a10);border-color:rgba(240,68,88,.25);color:var(--red)}
.btn-d:hover{background:rgba(240,68,88,.18);border-color:rgba(240,68,88,.4)}
.btn-full{width:100%}
.btn-lg{padding:12px 22px;font-size:14px;font-weight:700}
.btn-sm{padding:5px 11px;font-size:11px;border-radius:var(--r6)}
.btn-xs{padding:3px 8px;font-size:10px;font-weight:600;border-radius:var(--r4)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none !important}
.btn-loading{position:relative;color:transparent !important;pointer-events:none}
.btn-loading::after{content:'';position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;top:50%;left:50%;transform:translate(-50%,-50%)}

/* ═══ FORM ═══ */
.field{margin-bottom:14px}
.field-lbl{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--tx-3);margin-bottom:6px}
.field-inp{width:100%;height:40px;padding:0 13px;background:var(--bg-3);border:1px solid var(--br-2);border-radius:var(--r8);color:var(--tx-1);font-size:13px;font-family:var(--font);transition:border-color var(--ease),box-shadow var(--ease)}
.field-inp::placeholder{color:var(--tx-4)}
.field-inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-a10)}
.field-inp.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-a10)}
.field-hint{font-size:11px;color:var(--tx-4);margin-top:4px}
.field-err{font-size:11px;color:var(--red);margin-top:4px;display:none}
.field-inp.err ~ .field-err{display:block}
.field-pw{position:relative}
.field-pw .field-inp{padding-right:42px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--tx-4);cursor:pointer;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:transparent;border-radius:var(--r4);transition:color var(--ease),background var(--ease)}
.pw-eye:hover,.pw-eye:focus-visible{color:var(--tx-2);background:var(--bg-4);outline:none}
.pw-eye svg{width:15px;height:15px}
.chk-row{display:flex;align-items:center;gap:8px;cursor:pointer}
.chk-row input{width:14px;height:14px;accent-color:var(--blue);cursor:pointer;flex-shrink:0}
.chk-row span{font-size:13px;color:var(--tx-2)}
/* Toggle */
.tog{position:relative;width:38px;height:22px;flex-shrink:0;display:inline-flex}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{position:absolute;inset:0;border-radius:11px;background:var(--bg-5);border:1px solid var(--br-2);cursor:pointer;transition:var(--motion-standard)}
.tog-track::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:var(--tx-4);top:2px;left:2px;transition:transform var(--ease),background var(--ease);box-shadow:var(--sh-xs)}
.tog input:checked+.tog-track{background:var(--blue);border-color:var(--blue)}
.tog input:checked+.tog-track::before{transform:translateX(16px);background:#fff}
/* Range */
.range-row{display:flex;align-items:center;gap:8px}
.range-row input[type=range]{flex:1;accent-color:var(--blue);cursor:pointer;height:4px}
.range-num{font-size:11px;color:var(--tx-2);font-family:var(--mono);min-width:38px;text-align:right}

/* ═══ CARDS ═══ */
.card{background:var(--bg-2);border:1px solid var(--br-1);border-radius:var(--r12);transition:var(--motion-standard)}
.card-i{cursor:pointer}
.card-i:hover{border-color:var(--br-3);background:var(--bg-3);box-shadow:var(--sh-sm)}
.card-on{border-color:var(--blue) !important;background:var(--blue-a10) !important}
/* Feature card */
.fc{background:var(--bg-2);border:1px solid var(--br-1);border-radius:var(--r12);padding:16px 18px;display:flex;align-items:flex-start;gap:13px;transition:var(--motion-standard);position:relative;overflow:hidden}
.fc::before{content:'';position:absolute;inset:0;background:var(--g-glow);opacity:0;transition:opacity var(--ease);pointer-events:none}
.fc:hover{border-color:var(--br-3);background:var(--bg-3);box-shadow:var(--sh-sm)}
.fc:hover::before{opacity:1}
.fc-icon{font-size:22px;flex-shrink:0;margin-top:1px;line-height:1}
.fc-name{font-size:13px;font-weight:600;margin-bottom:4px;color:var(--tx-1)}
.fc-desc{font-size:12px;color:var(--tx-3);line-height:1.55}
/* Stat */
.sc{padding:20px 16px;text-align:center;border-right:1px solid var(--br-1)}
.sc:last-child{border-right:none}
.sc-num{font-size:24px;font-weight:800;letter-spacing:-.8px;background:var(--g-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;font-family:var(--mono)}
.sc-lbl{font-size:11px;color:var(--tx-3);font-weight:500;letter-spacing:.2px}
/* Dev card */
.dc{width:140px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.dc-frame{width:100%;height:104px;background:var(--bg-2);border:1px solid var(--br-1);border-radius:var(--r12);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:var(--motion-standard);position:relative}
.dc-frame::after{content:'';position:absolute;inset:0;background:var(--g-blue);opacity:0;transition:opacity var(--ease)}
.dc:hover .dc-frame{border-color:var(--blue-a30);box-shadow:var(--sh-blue)}
.dc.on .dc-frame{border-color:var(--blue);box-shadow:var(--sh-blue);background:var(--bg-3)}
.dc-lbl{font-size:11px;color:var(--tx-3);text-align:center;font-weight:500;transition:color var(--ease)}
.dc.on .dc-lbl{color:var(--blue)}
/* Pricing */
.prc{background:var(--bg-2);border:1px solid var(--br-1);border-radius:20px;padding:28px 26px;position:relative;overflow:hidden;transition:var(--motion-standard)}
.prc:hover{border-color:var(--br-3);box-shadow:var(--sh-md)}
.prc.hot{border-color:var(--blue-a30);background:linear-gradient(145deg,var(--bg-2),var(--bg-3));box-shadow:var(--sh-blue),var(--sh-lg)}
.prc.hot::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--g-blue)}
.prc-badge{position:absolute;top:18px;right:18px;background:var(--g-blue);color:#fff;font-size:10px;font-weight:700;padding:3px 11px;border-radius:var(--r-full);letter-spacing:.3px}
.prc-name{font-size:16px;font-weight:700;margin-bottom:6px}
.prc-desc{font-size:12px;color:var(--tx-3);margin-bottom:22px;line-height:1.6}
.prc-amount{font-size:38px;font-weight:900;letter-spacing:-1.5px;color:var(--tx-1);font-family:var(--mono)}
.prc-period{font-size:12px;color:var(--tx-3);margin-left:4px}
.prc-feats{display:flex;flex-direction:column;gap:10px;margin:22px 0}
.prc-feat{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--tx-2)}
.prc-feat-y{color:var(--green);font-size:14px;flex-shrink:0;width:18px}
.prc-feat-n{color:var(--tx-4);font-size:14px;flex-shrink:0;width:18px}
/* Project card */
.proj-card{background:var(--bg-2);border:1px solid var(--br-1);border-radius:var(--r12);overflow:hidden;cursor:pointer;transition:var(--motion-standard)}
.proj-card:hover{border-color:var(--blue-a30);box-shadow:var(--sh-sm)}
.proj-thumb{height:128px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--br-1)}
.proj-thumb-glow{position:absolute;width:160px;height:160px;border-radius:50%;filter:blur(40px);opacity:.5}
.proj-body{padding:14px 16px}
.proj-name{font-size:13px;font-weight:600;margin-bottom:4px;color:var(--tx-1)}
.proj-url{font-size:11px;color:var(--tx-3);margin-bottom:10px;font-family:var(--mono)}
.proj-meta{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--tx-4)}
/* New project */
.proj-new{background:transparent;border:1.5px dashed var(--br-2);border-radius:var(--r12);min-height:196px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:var(--motion-standard);color:var(--tx-4)}
.proj-new:hover{border-color:var(--blue-a30);color:var(--blue);background:var(--blue-a10)}

/* ═══ BADGES & CHIPS ═══ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);font-size:10px;font-weight:700;letter-spacing:.3px}
.badge-green{background:var(--green-a10);color:var(--green);border:1px solid var(--green-a20)}
.badge-blue{background:var(--blue-a10);color:var(--blue);border:1px solid var(--blue-a20)}
.badge-amber{background:var(--amber-a15);color:var(--amber);border:1px solid rgba(245,158,11,.2)}
.badge-dot{width:5px;height:5px;border-radius:50%;animation:pulseDot 1.5s infinite}
.badge-dot-g{background:var(--green)}
.badge-dot-b{background:var(--blue)}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg-2);border:1px solid var(--br-2);border-radius:var(--r-full);padding:6px 14px;font-size:13px;color:var(--tx-2);transition:var(--motion-standard);cursor:default}
.chip:hover{border-color:var(--br-3);color:var(--tx-1)}
.chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;animation:pulseDot 2s infinite}
.chip-b{background:var(--blue);box-shadow:0 0 8px rgba(77,141,246,.6)}
.chip-g{background:var(--green);box-shadow:0 0 8px rgba(32,201,151,.6);animation-delay:.5s}
.ftag{padding:5px 13px;border-radius:var(--r-full);font-size:12px;font-weight:600;cursor:pointer;transition:var(--motion-standard);border:1px solid transparent;user-select:none;white-space:nowrap}
.ftag.on{background:var(--blue);color:#fff;box-shadow:0 2px 10px rgba(77,141,246,.35)}
.ftag:not(.on){background:var(--bg-3);border-color:var(--br-2);color:var(--tx-3)}
.ftag:not(.on):hover{border-color:var(--br-3);color:var(--tx-2)}

/* ═══ DIVIDER ═══ */
.div{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--tx-4);margin:16px 0}
.div::before,.div::after{content:'';flex:1;height:1px;background:var(--br-1)}

/* ═══ SOCIAL BUTTONS ═══ */
.soc-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;height:42px;border-radius:var(--r8);background:var(--bg-3);border:1px solid var(--br-2);color:var(--tx-1);font-size:13px;font-weight:600;cursor:pointer;transition:var(--motion-standard);font-family:var(--font)}
.soc-btn:hover{border-color:var(--br-3);background:var(--bg-4)}
.soc-btn svg{width:17px;height:17px;flex-shrink:0}

/* ═══ AUTH ═══ */
.auth-tabs{display:flex;border-bottom:1px solid var(--br-1);flex-shrink:0}
.auth-tab{flex:1;height:48px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--tx-3);cursor:pointer;border:0;border-bottom:2px solid transparent;background:transparent;font-family:var(--font);transition:var(--motion-standard);user-select:none}
.auth-tab:hover,.auth-tab:focus-visible{color:var(--tx-2);outline:none;background:var(--bg-2)}
.auth-tab.on{color:var(--tx-1);border-bottom-color:var(--blue);background:var(--blue-a10)}
.auth-body{flex:0 0 auto;padding:22px 28px 20px;display:flex;flex-direction:column}
.auth-body.off{display:none!important}
.meta-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.forgot{font-size:12px;color:var(--blue);transition:opacity var(--ease)}
.forgot:hover{opacity:.75;text-decoration:underline}

/* ═══ BANNERS ═══ */
.sec-banner{background:linear-gradient(135deg,rgba(77,141,246,.08),rgba(45,212,232,.05));border:1px solid rgba(77,141,246,.18);border-radius:var(--r12);padding:16px 20px;display:flex;align-items:center;gap:14px}
.sec-banner-ico{font-size:28px;flex-shrink:0}
.sec-banner-body{font-size:13px;color:var(--tx-2);line-height:1.55}
.sec-banner-body strong{display:block;font-size:14px;color:var(--tx-1);margin-bottom:3px;font-weight:600}
.warn{background:linear-gradient(135deg,rgba(77,141,246,.07),rgba(45,212,232,.04));border:1px solid rgba(77,141,246,.16);border-radius:var(--r10);padding:13px 16px;display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--tx-2);line-height:1.55}
.info-banner{background:linear-gradient(135deg,rgba(32,201,151,.07),rgba(45,212,232,.05));border:1px solid rgba(32,201,151,.18);border-radius:var(--r12);padding:16px 20px;display:flex;align-items:flex-start;gap:14px}

/* ═══ FILTER BARS ═══ */
.fbar{flex-shrink:0;background:var(--bg-1);border-bottom:1px solid var(--br-1);padding:10px var(--s5);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fsel{display:flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--br-2);border-radius:var(--r6);padding:6px 11px;font-size:12px;color:var(--tx-2);cursor:pointer;user-select:none;white-space:nowrap;transition:var(--motion-standard);position:relative}
.fsel:hover{border-color:var(--br-3);color:var(--tx-1)}
.fsel.open{border-color:var(--blue-a30);color:var(--tx-1);background:var(--bg-4)}
.fsel svg{transition:transform var(--ease);flex-shrink:0;color:var(--tx-4)}
.fsel.open svg{transform:rotate(180deg)}
.vbtns{display:flex;gap:2px}
.vbtn{width:30px;height:30px;border-radius:var(--r6);background:var(--bg-3);border:1px solid var(--br-2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx-3);transition:var(--motion-standard)}
.vbtn:hover,.vbtn.on{background:var(--bg-4);color:var(--tx-1);border-color:var(--br-3)}
.vbtn.on{color:var(--blue)}
.tbar{flex-shrink:0;padding:8px var(--s5);display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--br-1);background:var(--bg-1)}
.cmp-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx-2)}
.zoom-row{display:flex;align-items:center;gap:7px}
.zoom-row input[type=range]{accent-color:var(--blue);width:80px;cursor:pointer}
.zoom-row svg{width:12px;height:12px;color:var(--tx-3);flex-shrink:0}

/* ═══ SECTION HEADERS ═══ */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sh-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx-3)}
.sh-link{font-size:12px;color:var(--blue);cursor:pointer;font-weight:500;transition:opacity var(--ease)}
.sh-link:hover{opacity:.75;text-decoration:underline}

/* ═══ CSS DEVICE MOCKUPS ═══ */
/* Phone */
.mk-phone{position:relative;background:#0e1523;border:2px solid #1e2e45;border-radius:10px;overflow:hidden}
.mk-phone::before{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:16px;height:3px;background:#1a2a3e;border-radius:2px;z-index:2}
.mk-screen{position:absolute;inset:11px 2px 5px;background:linear-gradient(145deg,#1a2a44,#0c1628);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;gap:2.5px;padding:4px 3px}
.mk-line{height:2px;background:#1e2e45;border-radius:1px;flex-shrink:0}
.mk-line.w80{width:80%}.mk-line.w65{width:65%}.mk-line.w90{width:90%}.mk-line.w50{width:50%}.mk-line.w70{width:70%}
.mk-line.accent{background:linear-gradient(90deg,#4d8df6,#2dd4e8);width:45%;opacity:.8}
/* Watch */
.mk-watch{background:#0e1523;border:2px solid #1e2e45;border-radius:8px;position:relative;overflow:hidden}
.mk-watch-s{position:absolute;inset:3px;border-radius:5px;background:linear-gradient(135deg,#1a3050,#0a1828);display:flex;align-items:center;justify-content:center;font-size:7px;color:var(--tx-3);font-family:var(--mono);font-weight:600}
/* Tablet */
.mk-tab{background:#0e1523;border:2px solid #1e2e45;border-radius:6px;position:relative;overflow:hidden}
.mk-tab-s{position:absolute;inset:4px 3px;background:linear-gradient(145deg,#1a2a44,#0c1628);border-radius:3px}
/* Laptop */
.mk-lap{display:flex;flex-direction:column;align-items:center}
.mk-lap-lid{background:#0e1523;border:2px solid #1e2e45;border-radius:5px 5px 0 0;position:relative;overflow:hidden}
.mk-lap-s{position:absolute;inset:3px 3px 0;background:linear-gradient(145deg,#1a2a44,#0c1628);border-radius:3px 3px 0 0}
.mk-lap-base{height:6px;background:#0c1120;border:2px solid #1e2e45;border-top:none;border-radius:0 0 4px 4px}
/* Monitor */
.mk-mon{display:flex;flex-direction:column;align-items:center}
.mk-mon-s{background:#0e1523;border:2px solid #1e2e45;border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mk-mon-si{background:linear-gradient(145deg,#1a2a44,#0c1628);border-radius:3px}
.mk-mon-neck{background:#0c1120;border:2px solid #1e2e45;border-top:none}
.mk-mon-foot{background:#0c1120;border:2px solid #1e2e45;border-top:none;border-radius:0 0 3px 3px}

/* ═══ BIG PHONE PREVIEW ═══ */
.bigphone{width:210px;height:432px;background:linear-gradient(180deg,#0d1828,#0a1220);border:2px solid #1e3048;border-radius:42px;position:relative;overflow:hidden;box-shadow:var(--sh-phone);transition:transform .4s cubic-bezier(.34,1.1,.64,1),box-shadow var(--ease),border-color var(--ease)}
.bigphone:hover{box-shadow:var(--sh-phone),0 0 60px rgba(77,141,246,.15)}
.bigphone-island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:74px;height:9px;background:#000;border-radius:var(--r-full);z-index:10;transition:width var(--ease)}
.bigphone:hover .bigphone-island{width:82px}
.bigphone-vol{position:absolute;left:-3px;top:86px;width:3px;height:32px;background:#1e3048;border-radius:2px 0 0 2px}
.bigphone-vol2{position:absolute;left:-3px;top:126px;width:3px;height:32px;background:#1e3048;border-radius:2px 0 0 2px}
.bigphone-pwr{position:absolute;right:-3px;top:108px;width:3px;height:46px;background:#1e3048;border-radius:0 2px 2px 0}
.bigphone-scr{position:absolute;inset:7px;background:linear-gradient(160deg,#111e3d,#0a1526 55%,#060d1c);border-radius:33px;overflow:hidden}
/* Phone inner UI */
.ph-bar{display:flex;justify-content:space-between;align-items:center;padding:28px 14px 6px;font-size:11px;font-weight:700;font-family:var(--mono);color:var(--tx-1)}
.ph-icons{display:flex;gap:4px;align-items:center}
.ph-batt{width:18px;height:9px;border:1.5px solid var(--tx-2);border-radius:2px;position:relative}
.ph-batt::before{content:'';position:absolute;right:-4px;top:2px;width:2px;height:5px;background:var(--tx-2);border-radius:0 1px 1px 0}
.ph-batt::after{content:'';position:absolute;left:1px;top:1px;bottom:1px;width:72%;background:var(--green);border-radius:1px}
.ph-body{padding:0 14px 16px}
.ph-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ph-brand{font-size:8px;font-weight:900;letter-spacing:1.5px;color:var(--tx-3);text-transform:uppercase}
.ph-burger span{display:block;height:1.5px;background:var(--tx-3);border-radius:1px;margin-bottom:2.5px}
.ph-burger span:last-child{width:65%}
.ph-h1{font-size:16px;font-weight:900;line-height:1.12;margin-bottom:8px;letter-spacing:-.6px}
.ph-h1 .g{background:var(--g-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ph-sub{font-size:8.5px;color:var(--tx-3);line-height:1.55;margin-bottom:12px}
.ph-cta{display:inline-flex;align-items:center;padding:7px 15px;border-radius:var(--r-full);background:var(--g-blue);color:#fff;font-size:9px;font-weight:700;margin-bottom:11px;box-shadow:0 3px 10px rgba(77,141,246,.45);letter-spacing:.2px}
.ph-link{font-size:8px;color:var(--tx-3);display:flex;align-items:center;gap:4px;margin-bottom:11px}
.ph-logos{display:flex;gap:5px;margin-bottom:10px}
.ph-chip{height:13px;background:var(--bg-4);border-radius:3px;border:1px solid var(--br-2)}
.ph-sec{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx-3);margin-bottom:6px}
.ph-card{background:var(--bg-3);border:1px solid var(--br-2);border-radius:7px;padding:7px 9px;display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ph-card-ico{width:24px;height:24px;border-radius:6px;flex-shrink:0}
.ph-card-lines{flex:1;display:flex;flex-direction:column;gap:3px}
.ph-card-line{height:4px;background:var(--br-2);border-radius:2px}
.ph-card-line.w80{width:80%}.ph-card-line.w55{width:55%}
/* Floats */
.floats{position:absolute;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:10}
.float{width:40px;height:40px;border-radius:50%;background:var(--bg-3);border:1px solid var(--br-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--motion-standard);box-shadow:var(--sh-md);color:var(--tx-2);font-size:15px}
.float:hover{background:var(--bg-4);border-color:var(--br-3);color:var(--tx-1);box-shadow:var(--sh-sm)}
.float:active{opacity:.86}
.prev-lbl{position:absolute;left:24px;bottom:24px;z-index:10;font-size:11px;color:var(--tx-4);font-family:var(--mono);background:rgba(7,11,22,.75);padding:4px 10px;border-radius:var(--r6);border:1px solid var(--br-1);backdrop-filter:blur(8px)}

/* ═══ ACCORDION ═══ */
.acc{border-bottom:1px solid var(--br-1)}
.acc-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;user-select:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx-3);transition:color var(--ease)}
.acc-h:hover{color:var(--tx-2)}
.acc-chev{transition:transform var(--ease);flex-shrink:0;color:var(--tx-4)}
.acc-h.op .acc-chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);padding:0 16px}
.acc-body.op{max-height:500px;padding-bottom:14px}
.acc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.acc-row:last-child{margin-bottom:0}
.acc-lbl{font-size:12px;color:var(--tx-2)}
.acc-val{font-size:12px;color:var(--tx-1);font-family:var(--mono);font-weight:600}
.orient{display:flex;gap:4px}
.orient-btn{flex:1;padding:7px 4px;border-radius:var(--r6);text-align:center;font-size:11px;font-weight:600;cursor:pointer;transition:var(--motion-standard);border:1px solid var(--br-2);color:var(--tx-3)}
.orient-btn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.orient-btn:not(.on):hover{border-color:var(--br-3);color:var(--tx-2)}
.cdots{display:flex;gap:7px;align-items:center}
.cdot{width:20px;height:20px;border-radius:50%;cursor:pointer;transition:var(--motion-standard);border:2px solid transparent}
.cdot:hover{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.cdot.on{border-color:rgba(255,255,255,.65);box-shadow:0 0 0 2px var(--blue)}
.exp-fmts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.exp-fmt{padding:8px 4px;border-radius:var(--r6);background:var(--bg-3);border:1px solid var(--br-2);font-size:11px;font-weight:700;color:var(--tx-3);text-align:center;cursor:pointer;transition:var(--motion-standard)}
.exp-fmt:hover{border-color:var(--br-3);color:var(--tx-2)}
.exp-fmt.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 8px rgba(77,141,246,.35)}
.dim-row{display:flex;align-items:center;gap:6px}
.dim-lbl{font-size:11px;color:var(--tx-4);font-weight:600}
.dim-inp{flex:1;padding:7px 8px;height:33px;background:var(--bg-3);border:1px solid var(--br-2);border-radius:var(--r6);color:var(--tx-1);font-size:12px;font-family:var(--mono);text-align:center;transition:border-color var(--ease)}
.dim-inp:focus{border-color:var(--blue)}
.dim-x{font-size:12px;color:var(--tx-3)}

/* ═══ SPEC GRID ═══ */
.spec-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.spec-c{background:var(--bg-3);border:1px solid var(--br-1);border-radius:var(--r8);padding:10px 8px;text-align:center}
.spec-v{font-size:13px;font-weight:700;font-family:var(--mono);color:var(--tx-1);margin-bottom:3px}
.spec-k{font-size:9px;color:var(--tx-4);text-transform:uppercase;letter-spacing:.6px}

/* ═══ PROFILE TABLE ═══ */
.prof-tbl{display:flex;flex-direction:column}
.prof-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--br-1)}
.prof-row:last-child{border-bottom:none}
.prof-k{font-size:12px;color:var(--tx-3)}
.prof-v{font-size:12px;color:var(--tx-1);font-weight:500;font-family:var(--mono)}

/* ═══ REF CARDS ═══ */
.ref-card{background:var(--bg-2);border:1px solid var(--br-1);border-radius:var(--r10);padding:10px 8px;cursor:pointer;transition:var(--motion-standard)}
.ref-card:hover{border-color:var(--blue-a30);background:var(--bg-3)}
.ref-card.on{border-color:var(--blue);background:var(--blue-a10)}
.ref-lbl{font-size:9px;color:var(--tx-4);margin-bottom:5px;font-weight:500}
.ref-thumb{width:100%;height:54px;border-radius:7px;background:var(--bg-3);border:1px solid var(--br-1);display:flex;align-items:center;justify-content:center;margin-bottom:7px;overflow:hidden}
.ref-mini{width:18px;height:32px;background:var(--bg-4);border:1px solid var(--br-2);border-radius:3px;position:relative;overflow:hidden}
.ref-mini-s{position:absolute;inset:2px 1px 1px;background:linear-gradient(135deg,#1a2a44,#0c1628);border-radius:1px}
.ref-specs{display:flex;flex-direction:column;gap:2px}
.ref-sr{display:flex;justify-content:space-between;font-size:9px}
.ref-sk{color:var(--tx-4)}
.ref-sv{color:var(--tx-2);font-family:var(--mono);font-weight:600}

/* ═══ SIZE PILLS ═══ */
.sz-pills{display:flex;flex-wrap:wrap;gap:6px}
.sz-pill{padding:6px 12px;border-radius:var(--r6);font-size:12px;font-weight:500;cursor:pointer;transition:var(--motion-standard);border:1px solid var(--br-2);color:var(--tx-3);text-align:center}
.sz-pill:hover{border-color:var(--br-3);color:var(--tx-2)}
.sz-pill.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.sz-pill small{display:block;font-size:10px;opacity:.8;margin-top:1px}

/* ═══ DROPDOWN ═══ */
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:400;background:var(--bg-4);border:1px solid var(--br-3);border-radius:var(--r10);padding:6px;min-width:200px;box-shadow:var(--sh-lg);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--motion-normal),transform var(--motion-normal);transform-origin:top left}
.dd.open .dd-menu{opacity:1;transform:translateY(0);pointer-events:all}
.dd-item{padding:8px 12px;border-radius:var(--r6);cursor:pointer;font-size:12px;color:var(--tx-2);transition:var(--motion-standard);display:flex;align-items:center;gap:8px}
.dd-item:hover{background:var(--bg-5);color:var(--tx-1)}
.dd-item.on{color:var(--blue);background:var(--blue-a10)}
.dd-item-ico{font-size:14px;width:18px;text-align:center}

/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r10);font-size:13px;font-weight:600;font-family:var(--font);box-shadow:var(--sh-lg);animation:bounceIn .22s ease both;pointer-events:none;max-width:320px}
.toast-ok{background:#091e15;border:1px solid var(--green-a20);color:var(--green)}
.toast-info{background:#091629;border:1px solid var(--blue-a20);color:var(--blue)}
.toast-err{background:#1e0910;border:1px solid rgba(240,68,88,.25);color:var(--red)}

/* ═══ GRID BG ═══ */
.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--br-1) 1px,transparent 1px),linear-gradient(90deg,var(--br-1) 1px,transparent 1px);background-size:28px 28px;opacity:.2}
/* Dots bg */
.dots-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--br-2) 1px,transparent 1px);background-size:24px 24px;opacity:.35}

/* ═══ GLOW BLOBS ═══ */
.blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px)}
.blob-1{width:600px;height:500px;background:var(--g-glow);opacity:.5;top:-120px;left:-80px;animation:floatBlob 36s ease-in-out infinite}
.blob-2{width:400px;height:400px;background:var(--g-glow2);opacity:.4;bottom:80px;right:-40px;animation:floatBlob 42s ease-in-out infinite reverse}

/* ═══ IFRAME PREVIEW ═══ */
.iframe-wrap{position:relative;background:#fff;border-radius:inherit;overflow:hidden;transition:transform var(--ease)}
.iframe-wrap iframe{border:none;display:block;pointer-events:all}
.iframe-overlay{position:absolute;inset:0;z-index:5;pointer-events:none}
.iframe-overlay.blocking{pointer-events:all}
.iframe-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-2);z-index:10;flex-direction:column;gap:12px;font-size:12px;color:var(--tx-3)}
.iframe-spinner{width:28px;height:28px;border:3px solid var(--br-3);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}

/* ═══ PAGE FOOTER ═══ */
.pfooter{margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid var(--br-1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3)}
.pfooter-copy{font-size:11px;color:var(--tx-4)}
.pfooter-links{display:flex;gap:var(--s5)}
.pfooter-links a{font-size:11px;color:var(--tx-4);transition:color var(--ease)}
.pfooter-links a:hover{color:var(--tx-2)}

/* ═══ STUDIO HEADER ═══ */
.studio-hdr{padding:13px 16px;border-bottom:1px solid var(--br-1);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--tx-3);flex-shrink:0}

/* ═══ SEARCH INPUT ═══ */
.search-inp{display:flex;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--br-2);border-radius:var(--r8);padding:0 12px;height:36px;transition:var(--motion-standard)}
.search-inp:focus-within{border-color:var(--blue-a30);box-shadow:0 0 0 3px var(--blue-a10)}
.search-inp input{flex:1;background:none;border:none;color:var(--tx-1);font-size:13px;font-family:var(--font)}
.search-inp input::placeholder{color:var(--tx-4)}
.search-inp svg{color:var(--tx-4);flex-shrink:0}

/* ═══ ACTIVITY ROWS ═══ */
.act-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--br-1)}
.act-row:last-child{border-bottom:none}
.act-ico{width:34px;height:34px;border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.act-title{font-size:13px;font-weight:600;margin-bottom:2px}
.act-time{font-size:11px;color:var(--tx-4)}

/* ═══ PROFILE AVATAR ═══ */
.av-lg{width:80px;height:80px;border-radius:50%;background:var(--g-blue);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;box-shadow:var(--sh-blue);flex-shrink:0}
.pstat{text-align:center;padding:16px 12px;background:var(--bg-3);border:1px solid var(--br-1);border-radius:var(--r10)}
.pstat-n{font-size:22px;font-weight:800;background:var(--g-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;font-family:var(--mono)}
.pstat-l{font-size:11px;color:var(--tx-3)}
.usage-bar{height:6px;background:var(--bg-5);border-radius:3px;overflow:hidden;margin-bottom:4px}
.usage-fill{height:100%;border-radius:3px;background:var(--g-blue)}

/* ═══ DANGER ZONE ═══ */
.danger-z{background:var(--red-a10);border:1px solid rgba(240,68,88,.22);border-radius:var(--r12);padding:20px 24px}

/* ═══ SCROLL ARROWS ═══ */
.scroll-wrap{position:relative}
.sarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:28px;height:28px;border-radius:50%;background:var(--bg-4);border:1px solid var(--br-2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--tx-2);box-shadow:var(--sh-sm);opacity:0;pointer-events:none;transition:var(--motion-standard)}
.scroll-wrap:hover .sarrow:not(.hide){opacity:1;pointer-events:all}
.sarrow:hover{background:var(--bg-5);color:var(--tx-1)}
.sarrow.l{left:-12px}
.sarrow.r{right:-12px}
.sarrow.hide{opacity:0 !important;pointer-events:none !important}

/* ═══ ADV CARDS ═══ */
.adv-card{background:var(--bg-2);border:1px solid var(--br-1);border-radius:var(--r10);padding:13px 10px;text-align:center;cursor:pointer;transition:var(--motion-standard);font:inherit;color:inherit;width:100%;min-height:108px}
.adv-card:hover,.adv-card:focus-visible{border-color:var(--blue-a30);background:var(--bg-3);box-shadow:var(--sh-sm);outline:none}
.adv-icon{font-size:22px;margin-bottom:7px}
.adv-name{font-size:11px;font-weight:600;color:var(--tx-1);margin-bottom:3px}
.adv-desc{font-size:10px;color:var(--tx-3);line-height:1.4}

/* Security-hardening utility */
.toast-icon{flex-shrink:0}
.dd-item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.link-btn{display:inline;color:var(--blue);font-weight:750;font:inherit;padding:0;border:0;background:transparent;vertical-align:baseline}
.link-btn:hover{text-decoration:underline}


/* Professional modal shell */
.modal-backdrop{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,8,16,.72);backdrop-filter:blur(18px)}
.modal-backdrop.open{display:flex;animation:fadeIn .16s ease both}
.modal-card{position:relative;width:min(440px,100%);padding:24px;border:1px solid var(--br-2);border-radius:var(--r16);background:linear-gradient(145deg,var(--bg-2),var(--bg-1));box-shadow:var(--sh-xl)}
.modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:var(--r8);border:1px solid var(--br-2);background:var(--bg-3);color:var(--tx-2);font-size:18px;line-height:1;cursor:pointer}
.modal-close:hover{color:var(--tx-1);border-color:var(--br-3)}
.modal-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--blue);font-weight:800;margin-bottom:8px}
.modal-title{font-size:22px;font-weight:850;letter-spacing:-.5px;color:var(--tx-1);margin-bottom:8px}
.modal-sub{font-size:13px;line-height:1.65;color:var(--tx-3);margin-bottom:18px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ═══════════════════════════════════════════════════
   EKLEME — v1.0.3 Eksik Bileşenler
   Profil, Pricing, Projeler sayfaları için
═══════════════════════════════════════════════════ */

/* ── Pricing ── */
.bill-tog{display:inline-flex;background:var(--bg-3);border:1px solid var(--br-2);border-radius:var(--r-full);padding:4px;gap:2px;margin-bottom:56px}
.bill-opt{padding:7px 20px;border-radius:var(--r-full);font-size:13px;font-weight:600;cursor:pointer;transition:var(--motion-standard);color:var(--tx-3);user-select:none}
.bill-opt.on{background:var(--bg-5);color:var(--tx-1);box-shadow:var(--sh-sm)}
.bill-save{background:var(--green-a10);color:var(--green);border:1px solid var(--green-a20);border-radius:var(--r-full);padding:2px 10px;font-size:10px;font-weight:700;margin-left:4px;letter-spacing:.2px}
.plans-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:0 auto;padding:0 24px 80px}
.prc-price{margin-bottom:22px}
/* FAQ */
.faq-sec{max-width:720px;margin:0 auto;padding:0 24px 80px}
.faq-title{font-size:28px;font-weight:800;letter-spacing:-.8px;text-align:center;margin-bottom:8px}
.faq-sub{font-size:14px;color:var(--tx-3);text-align:center;margin-bottom:40px}
.faq-i{border:1px solid var(--br-2);border-radius:var(--r10);margin-bottom:8px;overflow:hidden;transition:border-color var(--ease)}
.faq-i.open{border-color:var(--br-3)}
.faq-q{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:14px;font-weight:600;color:var(--tx-1);transition:background var(--ease);user-select:none}
.faq-q:hover{background:var(--bg-3)}
.faq-qi{color:var(--tx-3);transition:transform var(--ease);font-size:20px;line-height:1;flex-shrink:0;font-weight:300}
.faq-i.open .faq-qi{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.faq-i.open .faq-a{max-height:240px}
.faq-ai{padding:0 20px 16px;font-size:13px;color:var(--tx-2);line-height:1.65}
/* CTA */
.cta-sec{text-align:center;padding:60px 24px 80px;background:linear-gradient(180deg,transparent,var(--blue-glow));border-top:1px solid var(--br-1)}
.cta-title{font-size:34px;font-weight:800;letter-spacing:-1px;margin-bottom:12px}
.cta-sub{font-size:15px;color:var(--tx-2);margin-bottom:32px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:768px){.plans-g{grid-template-columns:1fr;max-width:400px}}

/* ── Settings / Profil ── */
.set-nav{width:220px;flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--br-1);overflow-y:auto;padding:14px 10px}
.set-nav-sec{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--tx-4);padding:8px 10px 6px;margin-top:6px;user-select:none}
.set-nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r8);cursor:pointer;font-size:13px;font-weight:500;color:var(--tx-2);transition:var(--motion-standard);margin-bottom:2px}
.set-nav-item:hover{background:var(--bg-3);color:var(--tx-1)}
.set-nav-item.on{background:var(--blue-a15);color:var(--blue)}
.set-nav-ico{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.set-nav-item.danger-link{color:var(--red)}
.set-nav-item.danger-link:hover{background:var(--red-a10)}
.set-main{flex:1;overflow-y:auto;padding:32px 36px}
.set-sec{max-width:580px;margin-bottom:44px}
.set-sec-title{font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px}
.set-sec-sub{font-size:13px;color:var(--tx-3);margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--br-1)}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--br-1)}
.set-row:last-of-type{border-bottom:none}
.set-row-lbl{font-size:13px;font-weight:600;color:var(--tx-1);margin-bottom:3px}
.set-row-hint{font-size:11px;color:var(--tx-4);line-height:1.5}
.set-row-ctrl{flex-shrink:0;margin-left:20px}
.plan-strip{background:linear-gradient(135deg,var(--blue-a10),var(--blue-glow));border:1px solid var(--blue-a20);border-radius:var(--r12);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.plan-strip-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.plan-strip-detail{font-size:12px;color:var(--tx-2)}
.usage-label{display:flex;justify-content:space-between;font-size:11px;color:var(--tx-4)}
/* Avatar section */
.av-sec{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--br-1);margin-bottom:8px}

/* ── Projeler extras ── */
.proj-ico{font-size:28px}
.proj-lbl-new{font-size:13px;font-weight:600}
.proj-devices{font-size:10px;color:var(--tx-4)}
.proj-date{font-size:10px;color:var(--tx-4)}
.proj-filter-bar{padding:10px 24px;border-bottom:1px solid var(--br-1);background:var(--bg-1);display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.sort-b{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--r6);background:var(--bg-3);border:1px solid var(--br-2);font-size:12px;color:var(--tx-2);cursor:pointer;transition:var(--motion-standard)}
.sort-b:hover{color:var(--tx-1);border-color:var(--br-3)}
.proj-grid-pad{flex:1;overflow-y:auto;padding:22px 24px}
.proj-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}

/* ── Bilgi: skip-to-content erişilebilirlik ── */
.skip-link{position:absolute;top:-100px;left:16px;background:var(--blue);color:#fff;padding:8px 16px;border-radius:var(--r8);font-size:13px;font-weight:600;z-index:9999;transition:top var(--ease)}
.skip-link:focus{top:60px}


/* ═══════════════════════════════════════════════════
   v1.0.14 Stabilizasyon Katmanı — form, sayfa kabuğu, tema ve sınıf bütünlüğü
   ═══════════════════════════════════════════════════ */
body{min-width:320px}
.auth-brand{text-align:center;margin:4px 0 18px}
.auth-logo{width:46px;height:46px;border-radius:14px;margin:0 auto 12px;background:var(--g-blue);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:900;box-shadow:0 10px 26px rgba(77,141,246,.24)}
.auth-brand h2{font-size:21px;font-weight:850;letter-spacing:-.6px;margin:0 0 4px;color:var(--tx-1)}
.auth-brand p{font-size:13px;color:var(--tx-3);line-height:1.5;margin:0}
.social-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.social-btn{height:40px;border-radius:var(--r8);background:var(--bg-3);border:1px solid var(--br-2);color:var(--tx-2);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:var(--motion-standard)}
.social-btn:hover,.social-btn:focus-visible{border-color:var(--br-3);background:var(--bg-4);color:var(--tx-1)}
.or{display:flex;align-items:center;gap:12px;margin:14px 0 16px;color:var(--tx-4);font-size:12px;white-space:nowrap}
.or::before,.or::after{content:'';height:1px;background:var(--br-1);flex:1}.or span{flex-shrink:0}
.auth-feedback{flex:0 0 auto}.auth-switch-note{text-align:center;font-size:12px;color:var(--tx-4);margin-top:14px}.adv-sec{flex:0 0 auto}.adv-card{min-height:94px}.warn-wrap{flex:0 0 auto}.col-r{min-width:320px}.two-col{align-items:stretch}
.page-shell-fixed{display:flex;height:100vh;padding-top:var(--bar-h);overflow:hidden;background:var(--bg-0)}
.main-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg-0)}
.sbar-item{width:48px;min-height:48px;border-radius:var(--r10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--tx-3);transition:var(--motion-standard);position:relative;margin:2px 0}.sbar-item:hover{background:var(--bg-3);color:var(--tx-2)}.sbar-item.active{background:var(--blue-a15);color:var(--blue)}.sbar-item.active::before{content:'';position:absolute;left:-4px;top:50%;width:3px;height:28px;transform:translateY(-50%);background:var(--blue);border-radius:0 4px 4px 0}.sbar-icon{font-size:16px;line-height:1}.sbar-label{font-size:9px;font-weight:700;line-height:1;color:inherit}.sbar-sep{width:28px;height:1px;background:var(--br-1);margin:7px 0}
.field-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--tx-3);margin-bottom:6px}.field-input{width:100%;height:40px;padding:0 13px;background:var(--bg-3);border:1px solid var(--br-2);border-radius:var(--r8);color:var(--tx-1);font-size:13px;font-family:var(--font);transition:border-color var(--ease),box-shadow var(--ease)}.field-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-a10)}
.btn-primary{background:var(--g-blue);color:#fff;border-color:transparent;box-shadow:0 2px 14px rgba(77,141,246,.38)}.btn-primary:hover{box-shadow:0 4px 18px rgba(77,141,246,.28);color:#fff}.btn-ghost{background:transparent;border-color:var(--br-2);color:var(--tx-2)}.btn-ghost:hover{background:var(--bg-3);border-color:var(--br-3);color:var(--tx-1)}
.badge-dot-green{background:var(--green)}.badge-mini{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r-full);font-size:10px;font-weight:800;color:var(--blue);background:var(--blue-a10);border:1px solid var(--blue-a20)}.u-gradient-text{background:var(--g-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glow-blob{pointer-events:none}
@media(max-width:900px){.bar-nav{display:none}.bar{gap:8px}.bar-right{gap:6px}.two-col{flex-direction:column}.col-r{width:100%;min-width:0;border-left:0;border-top:1px solid var(--br-1);overflow:visible}.col-l{overflow:visible}.auth-body{padding:20px 22px}.adv-sec{padding:18px 22px}.warn-wrap{padding:0 22px 22px}.dev-lib-grid{grid-template-columns:1fr 1fr}.feat-grid{grid-template-columns:1fr}.social-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bar-right .lang,.bar-right .tbtn{display:none}.hero-h1{font-size:31px!important;letter-spacing:-1.2px}.dev-lib-grid,.adv-g{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.live-preview-item{align-items:flex-start;flex-direction:column}.social-row{grid-template-columns:1fr}.page-shell-fixed{height:auto;min-height:100vh;overflow:visible}.sidebar{display:none}.main-pane{min-height:calc(100vh - var(--bar-h))}}

/* ═══ JS DAVRANIŞ KANCALARI (görsel stil değil) ═══
   .detail-shell ve .studio-shell sınıfları animations.js initKeys()
   tarafından studio klavye kısayollarının (zoom/rotate) hangi
   yüzeylerde aktif olacağını belirlemek için kullanılır. */
.detail-shell,.studio-shell{}


/* v1.0.50 — rounded global interaction focus polish */
:where(a,button,[role="button"],input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(a,button,[role="button"]):focus-visible{outline:0;box-shadow:0 0 0 3px rgba(77,141,246,.22),0 0 0 1px rgba(125,178,255,.7) inset;border-radius:inherit}
.logo-gem + span,.bar-logo{font-feature-settings:"ss01" 1,"cv01" 1}