/* ═══════════════════════════════════════════════════════════════
   Teraryum Sepeti — ORTAK TASARIM DİLİ
   Mağaza, editör ve admin aynı jetonları kullanır.
   Tipografi: Rubik — tek aile; başlıkta 400–500 + sıkı aralık,
              gövdede 400. Hiyerarşi ağırlıkla değil ölçekle kurulur.
   Emoji yok; tüm simgeler js/ortak/icons.js'ten gelen SVG.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* zemin — koyu, sıcak-nötr yeşil siyah */
  --bg:#0a0d0b;
  --bg2:#0f1411;
  --panel:#111713;
  --panel2:#161d19;
  --raise:#1c2520;

  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12);

  --txt:#ecefe9;
  --txt2:#b6c2b9;
  --dim:#7e8d84;
  --faint:#5c6a62;

  --accent:#68c79a;
  --accent-d:#3d8a65;
  --gold:#c9a96b;
  --gold-l:#e2cb98;
  --cream:#f1ede2;
  --danger:#d9635c;
  --water:#5aafcf;

  --r:14px;
  --r-sm:10px;
  --r-lg:22px;

  --ui:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);
  --sh-lg:0 2px 6px rgba(0,0,0,.35),0 30px 60px -24px rgba(0,0,0,.85);
  --ease:cubic-bezier(.22,.8,.26,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--ui);font-size:14px;font-weight:400;line-height:1.55;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;font-weight:inherit}
a{color:inherit}
img{max-width:100%;display:block}
kbd{
  background:var(--raise);border:1px solid var(--line2);border-radius:4px;
  padding:1px 5px;font-size:10px;font-family:var(--ui);font-weight:600;
}
::selection{background:rgba(104,199,154,.32);color:#fff}

/* ── SVG ikon ── */
.ico{
  width:1.05em;height:1.05em;flex:none;display:block;
  vertical-align:-.16em;overflow:visible;
}
.ico-btn{gap:7px}
.ico-lbl{font-size:inherit}

/* ── düğmeler ── */
.btn{
  background:var(--raise);border:1px solid var(--line2);color:var(--txt);
  padding:8px 13px;border-radius:var(--r-sm);cursor:pointer;
  font-weight:500;font-size:13px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  transition:background .18s,border-color .18s,transform .12s,filter .18s,color .18s;
}
.btn:hover{background:#26312b;border-color:rgba(255,255,255,.2)}
.btn.solid{
  background:linear-gradient(180deg,var(--accent),var(--accent-d));
  border-color:transparent;color:#06120c;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.btn.solid:hover{filter:brightness(1.08)}
.btn.altin{
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border-color:transparent;color:#1a140a;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.btn.altin:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--raise);border-color:var(--line2)}
.btn.wide{width:100%;margin-top:9px}
.btn.lg{padding:14px 22px;font-size:14px;border-radius:12px}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn .ico{width:15px;height:15px}
.btn.lg .ico{width:17px;height:17px}

/* ── form ── */
.inp{
  width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line2);
  border-radius:var(--r-sm);padding:11px 13px;outline:none;color:var(--txt);
  transition:border-color .16s,background .16s;
}
.inp::placeholder{color:var(--faint)}
.inp:focus{border-color:rgba(104,199,154,.55);background:rgba(0,0,0,.42)}
textarea.inp{resize:vertical;min-height:84px;line-height:1.5}

/* ═══ GİRİŞ KAPISI ═══ */
body.kilitli{overflow:hidden}
body.kilitli #app,body.kilitli #boot,body.kilitli #toast,
body.kilitli .sayfa{display:none!important}

#gate{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(104,199,154,.07),transparent 60%),
    var(--bg);
  transition:opacity .35s ease,transform .35s ease;
}
#gate.cikti{opacity:0;transform:scale(1.02);pointer-events:none}
#gateForm{
  width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.gate-mark{display:none}
#gateForm h1{
  font-family:var(--display);font-size:26px;font-weight:500;margin:0 0 10px;letter-spacing:-.02em;
}
#gateForm h1::after{
  content:"";display:block;width:28px;height:2px;border-radius:2px;background:var(--accent);
  margin:14px auto 0;
}
#gateForm p{margin:0 0 24px;font-size:13px;color:var(--dim);line-height:1.6}
#gateInput{
  width:100%;background:rgba(0,0,0,.34);border:1px solid var(--line2);
  border-radius:var(--r-sm);padding:13px 15px;outline:none;color:var(--txt);
  font-size:16px;font-weight:600;text-align:center;letter-spacing:.35em;
  transition:border-color .16s,background .16s;
}
#gateInput::placeholder{letter-spacing:.01em;font-weight:500;color:var(--faint)}
#gateInput:focus{border-color:rgba(104,199,154,.55);background:rgba(0,0,0,.46)}
#gateForm .btn{margin-top:11px;padding:12px;width:100%}
#gateErr{min-height:18px;margin-top:12px;font-size:11.5px;color:var(--danger);font-weight:600}
@keyframes sarsil{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}
}
#gateForm.sars{animation:sarsil .34s ease}

/* ═══ BİLDİRİM ═══ */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:600;
  background:var(--txt);color:#0a0d0b;padding:11px 20px;border-radius:12px;
  font-weight:500;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;box-shadow:0 10px 30px rgba(0,0,0,.55);
  max-width:calc(100% - 32px);text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--danger);color:#fff}

/* ═══ YÜKLENİYOR ═══ */
.spin{
  width:30px;height:30px;border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--accent);border-radius:50%;animation:sp .75s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}