*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--accent:#6da7ff;--accent2:#9a7bff;--cyan:#5fe1ff;--pink:#c27bff;--ok:#66e3a4;--warn:#ffd76a;--bad:#ff7b89;--paper:#f5f8ff;--glass-border:rgba(255,255,255,0.13)}
html{color-scheme:dark}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;color:var(--paper);min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 50% -20%,rgba(52,83,150,0.5),transparent 40%),linear-gradient(155deg,#070912,#090d1a 48%,#070a13)}
::selection{background:rgba(109,167,255,0.8);color:#fff}
a{color:inherit;text-decoration:none}

.ambient{position:fixed;z-index:0;border-radius:50%;pointer-events:none;filter:blur(90px);opacity:0.2}
.ambient-one{width:34rem;height:34rem;top:-13rem;left:-10rem;background:#2979ff}
.ambient-two{width:34rem;height:34rem;top:18rem;right:-16rem;background:#8c52ff}
.ambient-three{width:34rem;height:34rem;bottom:-22rem;left:28%;background:#15b8d6;opacity:0.12}

.glass-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;height:3.5rem;padding:0 1rem;margin:0.75rem 1rem 0;border-radius:22px;border:1px solid var(--glass-border);background:linear-gradient(135deg,rgba(26,35,58,0.8),rgba(11,17,31,0.62));-webkit-backdrop-filter:blur(28px) saturate(175%);backdrop-filter:blur(28px) saturate(175%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 12px 38px rgba(0,0,0,0.25)}
.glass-panel{border:1px solid var(--glass-border);border-radius:28px;background:radial-gradient(circle at 10% 0%,rgba(255,255,255,0.11),transparent 34%),linear-gradient(145deg,rgba(25,34,55,0.72),rgba(10,15,28,0.58));-webkit-backdrop-filter:blur(28px) saturate(175%);backdrop-filter:blur(28px) saturate(175%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 22px 70px rgba(0,0,0,0.28)}
.glass-subtle{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;margin:0 1rem;border-radius:22px;border:1px solid var(--glass-border);background:rgba(16,23,40,0.45);font-size:0.75rem;color:rgba(255,255,255,0.45)}

.logo{display:flex;align-items:center;gap:0.625rem}.logo-text{font-size:1.0625rem;font-weight:700;letter-spacing:-0.03em}
.gradient{background:linear-gradient(100deg,#8dc4ff,#c29cff 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-mark{position:relative;display:grid;place-items:center;overflow:hidden;width:2rem;height:2rem;flex-shrink:0;border:1px solid rgba(255,255,255,0.2);border-radius:10px;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,0.22),rgba(255,255,255,0.05));box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 6px 18px rgba(35,104,255,0.22)}
.brand-mark.small{width:1.5rem;height:1.5rem;border-radius:8px}
.brand-orb{position:absolute;width:1.35rem;height:1.35rem;border-radius:50%;filter:blur(7px)}.brand-mark.small .brand-orb{width:1rem;height:1rem}
.orb-a{top:-.3rem;left:-.2rem;background:#4ba4ff}.orb-b{right:-.3rem;bottom:-.25rem;background:#a36cff}
.brand-mark svg{position:relative;z-index:1}
.nav-right{display:flex;align-items:center;gap:0.75rem}
.pill-badge{padding:0.25rem 0.75rem;border-radius:999px;font-size:0.5625rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.06)}

.credits-badge{display:flex;align-items:center;gap:0.375rem;padding:0.3rem 0.7rem;border-radius:999px;font-size:0.75rem;font-weight:700;color:var(--ok);border:1px solid rgba(102,227,164,0.3);background:rgba(102,227,164,0.08)}.credits-badge.low{color:var(--warn);border-color:rgba(255,215,106,0.3);background:rgba(255,215,106,0.08)}.credits-badge.empty{color:var(--bad);border-color:rgba(255,123,137,0.3);background:rgba(255,123,137,0.08)}
.credits-icon{font-size:0.875rem}

main{position:relative;z-index:1;max-width:72rem;margin:0 auto;padding:0 1rem 4rem}
footer{position:relative;z-index:1;padding:1.25rem 0}

.hero{text-align:center;padding:2.5rem 0 2rem;max-width:48rem;margin:0 auto}
.hero-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 1rem;border-radius:999px;font-size:0.625rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.65);border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04)}
.hero-tag::before{content:"";width:0.375rem;height:0.375rem;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(109,167,255,0.9)}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.07;letter-spacing:-0.05em;margin:1.25rem 0}
.hero p{color:rgba(255,255,255,0.5);font-size:0.9375rem;line-height:1.6}

.studio{display:grid;gap:1rem;grid-template-columns:340px 1fr;align-items:start;margin-top:1.5rem}
@media(max-width:960px){.studio{grid-template-columns:1fr}}
.panel{padding:1.25rem}.panel h2{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;font-weight:700;margin-bottom:0.75rem}
.icon-box{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:0.5rem;font-size:0.75rem}
.icon-box.blue{background:rgba(109,167,255,0.15);color:var(--accent)}.icon-box.cyan{background:rgba(95,225,255,0.15);color:var(--cyan)}.icon-box.pink{background:rgba(194,123,255,0.15);color:var(--pink)}

.upload-zone{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:2rem 1rem;text-align:center;cursor:pointer;border:2px dashed rgba(255,255,255,0.1);border-radius:1rem;background:rgba(0,0,0,0.15);transition:all 0.3s}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:rgba(109,167,255,0.1)}
.upload-icon{font-size:1.75rem;color:rgba(255,255,255,0.35)}.upload-zone.dragover .upload-icon{color:var(--accent)}
.upload-title{font-size:0.875rem;font-weight:700}.upload-hint{font-size:0.75rem;color:rgba(255,255,255,0.35)}

.file-preview{border:1px solid rgba(255,255,255,0.1);border-radius:1rem;overflow:hidden;animation:fadeSlide 0.4s ease both}
.preview-thumb{height:10rem;position:relative;overflow:hidden;background:rgba(0,0,0,0.2)}
.preview-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0.75rem}
.file-info{display:flex;justify-content:space-between;align-items:center;padding:0.625rem 0.75rem;border-top:1px solid rgba(255,255,255,0.1)}
.file-name{font-size:0.875rem;font-weight:600;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-detail{font-size:0.6875rem;color:rgba(255,255,255,0.35)}
.file-error{margin-top:0.5rem;padding:0.5rem 0.75rem;border:1px solid rgba(255,123,137,0.3);border-radius:0.75rem;background:rgba(255,123,137,0.1);color:var(--bad);font-size:0.75rem;font-weight:600}

.setting-group{margin-bottom:1rem}.setting-label{display:block;margin-bottom:0.375rem;font-size:0.625rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.4)}
.seg-control{display:flex;border:1px solid rgba(255,255,255,0.1);border-radius:0.75rem;padding:0.25rem;background:rgba(0,0,0,0.2)}
.seg-btn{flex:1;padding:0.5rem;border:none;border-radius:0.5rem;font-size:0.75rem;font-weight:700;cursor:pointer;color:rgba(255,255,255,0.4);background:transparent;transition:all 0.3s}
.seg-btn.active{color:#fff;background:rgba(255,255,255,0.14);box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 4px 14px rgba(0,0,0,0.16)}
.seg-btn:hover:not(.active){color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.05)}

.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.color-card{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:0.75rem;border-radius:1rem;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.15);font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.55);transition:all 0.3s}
.color-card.active{border-color:var(--accent);background:rgba(109,167,255,0.1);box-shadow:0 6px 18px rgba(109,167,255,0.18);color:#fff}
.color-card:hover:not(.active){border-color:rgba(255,255,255,0.25)}
.color-swatch{display:block;width:2rem;height:2rem;border-radius:50%;border:2px solid rgba(255,255,255,0.25);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}

.checkbox-btn{display:flex;align-items:flex-start;gap:0.75rem;width:100%;padding:0.875rem;margin-bottom:1rem;border:1px solid rgba(255,255,255,0.1);border-radius:1rem;background:rgba(0,0,0,0.15);cursor:pointer;text-align:left;color:inherit;transition:all 0.3s}
.checkbox-btn.active{border-color:var(--accent);background:rgba(109,167,255,0.1)}
.checkbox-btn:hover{border-color:rgba(255,255,255,0.25)}
.checkbox{display:grid;place-items:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:0.125rem;border-radius:0.375rem;border:2px solid rgba(255,255,255,0.25);font-size:0.75rem;color:transparent;transition:all 0.3s}
.checkbox-btn.active .checkbox{border-color:var(--accent);background:var(--accent);color:#111}
.checkbox::after{content:"✓"}.checkbox-title{display:block;font-size:0.875rem;font-weight:700}.checkbox-hint{display:block;margin-top:0.125rem;font-size:0.6875rem;color:rgba(255,255,255,0.4)}

.prompt-preview{padding:0.875rem;margin-bottom:1.25rem;border:1px solid rgba(255,255,255,0.1);border-radius:1rem;background:rgba(0,0,0,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.prompt-header{display:flex;align-items:center;gap:0.5rem;font-size:0.625rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:0.5rem}
.prompt-dot{width:0.625rem;height:0.625rem;border-radius:50%;border:2px solid rgba(255,255,255,0.25);transition:background 0.3s}
.prompt-text{font-size:0.75rem;font-weight:600;line-height:1.5;color:rgba(255,255,255,0.7);word-break:break-word}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.875rem 1rem;border:1px solid rgba(255,255,255,0.24);border-radius:14px;background:linear-gradient(135deg,#79b6ff,#6d8eff 48%,#9b79ff);box-shadow:inset 0 1px 0 rgba(255,255,255,0.42),0 12px 30px rgba(74,115,255,0.27);color:#111;font-size:0.875rem;font-weight:800;cursor:pointer;transition:all 0.2s;text-decoration:none}
.btn-primary:hover{filter:brightness(1.08) saturate(1.08);transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;filter:none}
.btn-ghost{padding:0.5rem 1rem;border:1px solid rgba(255,255,255,0.1);border-radius:0.625rem;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);font-size:0.8125rem;font-weight:700;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-flex;align-items:center;gap:0.375rem}
.btn-ghost:hover{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);color:#fff}
.btn-sm{padding:0.375rem 0.75rem;font-size:0.75rem}
.btn-danger:hover{border-color:rgba(255,123,137,0.4);color:var(--bad)}
.safety-note{margin-top:0.75rem;font-size:0.6875rem;line-height:1.5;color:rgba(255,255,255,0.35)}

.empty-state,.ready-state,.processing-state,.done-state,.error-state{min-height:28rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;text-align:center;padding:1.5rem}
.empty-icon,.error-icon{font-size:2.5rem;color:rgba(255,255,255,0.2)}
.empty-title{font-size:0.875rem;font-weight:700;color:rgba(255,255,255,0.6)}
.empty-state p{font-size:0.75rem;color:rgba(255,255,255,0.35);max-width:24rem}
.empty-panel{padding:3rem 2rem;text-align:center;max-width:32rem;margin:3rem auto}

.ready-state{align-items:stretch}
.ready-thumb{position:relative;height:28rem;overflow:hidden;border:1px solid rgba(255,255,255,0.1);border-radius:1rem;background:rgba(0,0,0,0.2);margin-bottom:0.625rem}
.ready-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1rem}
.ready-label{position:absolute;left:0.75rem;top:0.75rem;padding:0.25rem 0.625rem;border-radius:999px;font-size:0.5625rem;font-weight:700;letter-spacing:0.14em;color:var(--warn);border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

.steps{display:flex;flex-direction:column;gap:1rem;width:100%;margin-bottom:1.25rem}
.step{display:flex;align-items:center;gap:0.75rem;font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.35)}.step.done{color:var(--ok)}.step.active{color:#fff}
.step-dot{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,0.1);font-size:0.75rem}
.step.done .step-dot{border-color:rgba(102,227,164,0.6);background:rgba(102,227,164,0.15);color:var(--ok)}
.step.active .step-dot{border-color:rgba(109,167,255,0.7);background:rgba(109,167,255,0.15);color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.process-info{width:100%;padding:0.875rem;border-radius:0.75rem;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04)}
.stripe-bar{height:0.5rem;border-radius:999px;overflow:hidden;background:rgba(255,255,255,0.08);margin-bottom:0.625rem}
.stripe-fill{height:100%;width:0%;background-image:repeating-linear-gradient(45deg,rgba(109,167,255,0.98) 0 7px,rgba(154,123,255,0.48) 7px 14px);background-size:28px 100%;animation:stripeMove 0.55s linear infinite;transition:width 0.5s}
@keyframes stripeMove{to{background-position:28px 0}}
#processLabel{font-size:0.6875rem;color:rgba(255,255,255,0.35)}

.done-state{align-items:stretch;gap:0.75rem;animation:fadeSlide 0.4s ease both}
.done-badge{align-self:center;padding:0.25rem 0.625rem;border-radius:999px;font-size:0.625rem;font-weight:700;border:1px solid rgba(102,227,164,0.35);background:rgba(102,227,164,0.1);color:var(--ok)}
.compare-container{position:relative;height:28rem;overflow:hidden;border:1px solid rgba(255,255,255,0.1);border-radius:1rem;background:rgba(0,0,0,0.3)}
.compare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.compare-label{position:absolute;top:0.5rem;z-index:5;padding:0.25rem 0.625rem;border-radius:999px;font-size:0.5625rem;font-weight:700;letter-spacing:0.16em;border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.6)}
.compare-label.left{left:0.5rem;color:rgba(255,255,255,0.55)}.compare-label.right{right:0.5rem;color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem}
@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{padding:0.625rem;border-radius:0.75rem;border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.15)}
.stat-key{font-size:0.5625rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:rgba(255,255,255,0.3)}.stat-val{margin-top:0.25rem;font-size:0.875rem;font-weight:700}
.done-actions{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.done-actions .btn-primary{width:auto}

.error-state{border:1px solid rgba(255,123,137,0.3);border-radius:1rem;background:rgba(255,123,137,0.06)}
.error-title{font-size:1.125rem;font-weight:700}.error-msg{font-size:0.875rem;color:rgba(255,255,255,0.5);max-width:28rem;line-height:1.5;margin:0.25rem 0 0.5rem}
.error-actions{display:flex;gap:0.5rem}

.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.25rem;margin-top:1.5rem}
@media(max-width:768px){.info-cards{grid-template-columns:1fr}}
.info-card{display:flex;gap:0.75rem}.info-icon{display:grid;place-items:center;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:0.875rem;font-size:1rem;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.07)}
.info-icon.blue{color:var(--accent)}.info-icon.cyan{color:var(--cyan)}.info-icon.pink{color:var(--pink)}
.info-card h3{font-size:0.875rem;font-weight:700;margin-bottom:0.25rem}.info-card p{font-size:0.75rem;color:rgba(255,255,255,0.42);line-height:1.4}

.history-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:1.5rem}
.history-card{overflow:hidden}.history-thumb{position:relative;height:11rem;background:rgba(0,0,0,0.2)}
.history-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0.75rem}
.thumb-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;color:rgba(255,255,255,0.15)}
.history-info{padding:0.875rem;border-top:1px solid rgba(255,255,255,0.08)}
.history-head{display:flex;justify-content:space-between;align-items:start;gap:0.5rem;margin-bottom:0.5rem}
.history-name{font-size:0.875rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{padding:0.2rem 0.5rem;border-radius:999px;font-size:0.5625rem;font-weight:700;flex-shrink:0;border:1px solid}
.tag-ok{border-color:rgba(102,227,164,0.35);background:rgba(102,227,164,0.1);color:var(--ok)}
.tag-warn{border-color:rgba(255,215,106,0.35);background:rgba(255,215,106,0.1);color:var(--warn)}
.tag-bad{border-color:rgba(255,123,137,0.35);background:rgba(255,123,137,0.1);color:var(--bad)}
.tag-muted{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.4)}
.history-chips{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.375rem}
.chip{padding:0.15rem 0.45rem;border-radius:0.25rem;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);font-size:0.5625rem;font-weight:700;color:rgba(255,255,255,0.45)}
.history-date{font-size:0.6875rem;color:rgba(255,255,255,0.25);margin-bottom:0.5rem}
.history-actions{display:flex;align-items:center;gap:0.5rem}

.hidden{display:none!important}
@keyframes fadeSlide{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.nb-fade{animation:fadeSlide 0.4s ease both}
button,a{-webkit-tap-highlight-color:transparent}

/* ══════════ ARKA PLAN KALDIRMA ══════════ */
.bg-section{margin-top:1rem}
.icon-box.green{background:rgba(102,227,164,0.15);color:var(--ok)}
.beta-tag{padding:0.15rem 0.5rem;border-radius:999px;font-size:0.5625rem;font-weight:800;
  letter-spacing:0.1em;color:var(--ok);border:1px solid rgba(102,227,164,0.35);
  background:rgba(102,227,164,0.1);margin-left:0.375rem}
.bg-intro{font-size:0.8125rem;color:rgba(255,255,255,0.42);line-height:1.5;margin-bottom:1rem}
.bg-locked{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:2.5rem 1.5rem;
  text-align:center;border:2px dashed rgba(255,255,255,0.08);border-radius:1rem;background:rgba(0,0,0,0.15)}
.lock-icon{font-size:1.75rem;opacity:0.35}
.bg-locked p{font-size:0.8125rem;color:rgba(255,255,255,0.35);max-width:26rem}

.bg-grid{display:grid;grid-template-columns:1fr 300px;gap:1rem;align-items:start}
@media(max-width:860px){.bg-grid{grid-template-columns:1fr}}
.bg-preview{position:relative;height:24rem;overflow:hidden;border-radius:1rem;
  border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.25)}
.bg-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1rem}
.checker{background-image:
  linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%),
  linear-gradient(-45deg,rgba(255,255,255,.07) 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,rgba(255,255,255,.07) 75%),
  linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.07) 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.bg-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0.875rem;background:rgba(7,10,19,0.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bg-overlay p{font-size:0.8125rem;font-weight:600;color:rgba(255,255,255,0.7)}
.bg-spinner{width:2.25rem;height:2.25rem;border-radius:50%;
  border:3px solid rgba(255,255,255,0.12);border-top-color:var(--accent);
  animation:spin 0.8s linear infinite}
.bg-progress{width:60%;max-width:16rem;height:0.375rem;border-radius:999px;
  overflow:hidden;background:rgba(255,255,255,0.1)}
.bg-progress-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#79b6ff,#9b79ff);transition:width .3s}
.bg-progress-fill.indeterminate{width:40%!important;
  animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
.bg-toggle-row{display:flex;gap:0.5rem;margin-top:0.625rem}
.chip-btn{padding:0.4rem 0.9rem;border-radius:999px;cursor:pointer;font-size:0.75rem;font-weight:700;
  color:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.2);transition:all .3s}
.chip-btn.active{color:#fff;border-color:var(--accent);background:rgba(109,167,255,0.14)}
.bg-controls{display:flex;flex-direction:column}
.bg-note{margin-top:0.625rem;font-size:0.6875rem;line-height:1.5;color:rgba(255,255,255,0.35)}
.export-block{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,0.08)}
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.format-card{display:flex;flex-direction:column;align-items:center;gap:0.2rem;padding:0.75rem 0.5rem;
  border-radius:0.875rem;cursor:pointer;border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.15);color:rgba(255,255,255,0.5);transition:all .3s}
.format-card.active{border-color:var(--accent);background:rgba(109,167,255,0.1);color:#fff;
  box-shadow:0 6px 18px rgba(109,167,255,0.16)}
.format-card:hover:not(.active){border-color:rgba(255,255,255,0.25)}
.fmt-icon{font-size:1.25rem}
.fmt-name{font-size:0.8125rem;font-weight:800}
.fmt-desc{font-size:0.5625rem;opacity:0.6;text-align:center;line-height:1.2}

/* ══════════ GİRİŞ / KİMLİK EKRANLARI ══════════ */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.auth-wrap{position:relative;z-index:1;width:100%;padding:1.5rem;display:grid;place-items:center}

.auth-shell{display:grid;grid-template-columns:1.05fr 1fr;width:100%;max-width:56rem;
  border:1px solid var(--glass-border);border-radius:30px;overflow:hidden;
  background:linear-gradient(145deg,rgba(25,34,55,0.78),rgba(10,15,28,0.66));
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 34px 90px rgba(0,0,0,0.42)}
@media(max-width:820px){.auth-shell{grid-template-columns:1fr;max-width:26rem}
  .auth-aside{display:none}}

/* ── Sol tanıtım ── */
.auth-aside{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:2.25rem 2rem;overflow:hidden;
  background:radial-gradient(circle at 15% 0%,rgba(109,167,255,0.16),transparent 55%),
             linear-gradient(160deg,rgba(60,90,190,0.14),rgba(140,82,255,0.10));
  border-right:1px solid rgba(255,255,255,0.07)}
.auth-glow{position:absolute;width:20rem;height:20rem;border-radius:50%;
  bottom:-9rem;left:-5rem;background:#6d8eff;filter:blur(80px);opacity:0.20;pointer-events:none}
.auth-aside-top{display:flex;align-items:center;gap:0.625rem;position:relative;z-index:1}
.auth-mark{width:2.5rem;height:2.5rem;border-radius:13px}
.auth-mark .brand-orb{width:1.6rem;height:1.6rem;filter:blur(8px)}
.auth-brand-name{font-size:1.0625rem;font-weight:800;letter-spacing:-0.03em}
.auth-aside-mid{position:relative;z-index:1;margin:2rem 0}
.auth-headline{font-size:1.5rem;font-weight:800;line-height:1.25;letter-spacing:-0.035em;margin-bottom:1.5rem}
.auth-features{list-style:none;display:flex;flex-direction:column;gap:0.875rem}
.auth-features li{display:flex;align-items:flex-start;gap:0.75rem}
.af-ico{display:grid;place-items:center;flex-shrink:0;width:1.85rem;height:1.85rem;border-radius:9px;
  font-size:0.8125rem;color:var(--accent);
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14)}
.auth-features b{display:block;font-size:0.8125rem;font-weight:700}
.auth-features small{display:block;margin-top:0.1rem;font-size:0.6875rem;color:rgba(255,255,255,0.4);line-height:1.35}
.auth-aside-foot{position:relative;z-index:1;font-size:0.625rem;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(255,255,255,0.3)}

/* ── Sağ form ── */
.auth-main{display:flex;align-items:center;justify-content:center;padding:2.5rem 2rem}
.auth-form-box{width:100%;max-width:20rem}
.auth-badge{display:inline-flex;align-items:center;gap:0.375rem;padding:0.3rem 0.75rem;
  border-radius:999px;font-size:0.625rem;font-weight:700;letter-spacing:0.1em;
  color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05)}
.auth-title{font-size:1.625rem;font-weight:800;letter-spacing:-0.04em;margin:0.875rem 0 0.375rem}
.auth-sub{font-size:0.8125rem;line-height:1.5;color:rgba(255,255,255,0.45);margin-bottom:1.5rem}
.auth-label{display:block;margin-bottom:0.4rem;font-size:0.625rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.42)}
.auth-field{position:relative;margin-bottom:0.875rem}
.auth-field-ico{position:absolute;left:0.875rem;top:50%;transform:translateY(-50%);
  font-size:0.875rem;opacity:0.45;pointer-events:none}
.auth-input{width:100%;padding:0.8125rem 1rem 0.8125rem 2.5rem;border-radius:13px;
  border:1px solid rgba(255,255,255,0.13);background:rgba(0,0,0,0.28);
  color:#fff;font-size:0.875rem;font-weight:600;letter-spacing:0.03em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;transition:all .25s}
.auth-input::placeholder{color:rgba(255,255,255,0.2);letter-spacing:0.05em}
.auth-input:focus{border-color:var(--accent);background:rgba(109,167,255,0.09);
  box-shadow:0 0 0 4px rgba(109,167,255,0.13)}
.auth-submit{width:100%;margin-top:0.25rem}
.auth-arrow{transition:transform .25s}
.auth-submit:hover .auth-arrow{transform:translateX(3px)}
.auth-error{display:flex;align-items:center;gap:0.5rem;padding:0.625rem 0.875rem;margin-bottom:1rem;
  border-radius:12px;border:1px solid rgba(255,123,137,0.3);background:rgba(255,123,137,0.1);
  color:var(--bad);font-size:0.75rem;font-weight:600;animation:fadeSlide .3s ease both}
.auth-divider{display:flex;align-items:center;gap:0.75rem;margin:1.25rem 0 0.875rem;
  font-size:0.625rem;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:0.14em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.09)}
.auth-alt-link{display:block;text-align:center;padding:0.6rem;border-radius:11px;
  font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);transition:all .3s}
.auth-alt-link:hover{color:#fff;border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.07)}
.auth-foot-note{margin-top:1rem;text-align:center;font-size:0.625rem;color:rgba(255,255,255,0.25);line-height:1.5}

/* ══════════ YÖNETİCİ PANELİ ══════════ */
.admin-gate{width:100%;max-width:23rem;padding:2.25rem 2rem;text-align:center}
.admin-gate .auth-field,.admin-gate .auth-label{text-align:left}
.admin-notice{display:flex;align-items:center;gap:0.5rem;max-width:72rem;margin:0 auto 1rem;
  padding:0.75rem 1rem;border-radius:14px;font-size:0.8125rem;font-weight:600;animation:fadeSlide .3s ease both}
.admin-notice.ok{border:1px solid rgba(102,227,164,0.3);background:rgba(102,227,164,0.1);color:var(--ok)}
.admin-notice.bad{border:1px solid rgba(255,123,137,0.3);background:rgba(255,123,137,0.1);color:var(--bad)}

.new-token-card{padding:1.125rem;margin-bottom:1rem}
.ntc-head{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.875rem}
.ntc-ico{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:11px;font-size:1rem;
  border:1px solid rgba(102,227,164,0.3);background:rgba(102,227,164,0.12)}
.ntc-head b{display:block;font-size:0.875rem}
.ntc-head small{display:block;font-size:0.6875rem;color:rgba(255,255,255,0.4);margin-top:0.1rem}
.ntc-value{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;padding:0.75rem 0.875rem;
  border-radius:12px;border:1px dashed rgba(102,227,164,0.35);background:rgba(102,227,164,0.07)}
.ntc-value code{flex:1;min-width:12rem;font-size:0.9375rem;font-weight:800;letter-spacing:0.06em;color:var(--ok);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}

.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1rem}
@media(max-width:700px){.admin-stats{grid-template-columns:repeat(2,1fr)}}
.astat{padding:0.875rem 1rem;border-radius:18px}
.astat-key{display:block;font-size:0.5625rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:rgba(255,255,255,0.32)}
.astat-val{display:block;margin-top:0.3rem;font-size:1.5rem;font-weight:800;letter-spacing:-0.03em}
.astat-val.ok{color:var(--ok)}

.admin-grid{display:grid;grid-template-columns:320px 1fr;gap:1rem;align-items:start}
@media(max-width:900px){.admin-grid{grid-template-columns:1fr}}

.token-list{display:flex;flex-direction:column;gap:0.625rem;max-height:34rem;overflow-y:auto;padding-right:0.25rem}
.token-list::-webkit-scrollbar{width:6px}
.token-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:99px}
.token-row{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;padding:0.875rem;
  border-radius:15px;border:1px solid rgba(255,255,255,0.09);background:rgba(0,0,0,0.18);transition:all .25s}
.token-row:hover{border-color:rgba(255,255,255,0.18);background:rgba(0,0,0,0.26)}
.token-row.inactive{opacity:0.5}
.tr-main{flex:1;min-width:13rem}
.tr-top{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.3rem}
.tr-token{font-size:0.8125rem;font-weight:800;letter-spacing:0.04em;color:var(--accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.tr-label{font-size:0.75rem;font-weight:600;color:rgba(255,255,255,0.62);margin-bottom:0.375rem}
.tr-meta{display:flex;flex-wrap:wrap;gap:0.3rem}
.tr-actions{display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap}
.btn-ghost.copied{border-color:rgba(102,227,164,0.5);color:var(--ok);background:rgba(102,227,164,0.12)}