/* ================================================================
   TikTokCams  — Ortak Tema  tk-theme.css  2026-10
   Her sayfada <link rel="stylesheet" href="../assets/tk-theme.css">
   ile kullanılır. nav.js otomatik gezinme çubuğu ekler.
   ================================================================ */

/* ── Renkler & tokenlar ── */
:root {
  --primary:       #818cf8;   /* indigo-400  */
  --primary-d:     #6366f1;   /* indigo-500  */
  --accent:        #a78bfa;   /* violet-400  */
  --pink:          #f472b6;
  --success:       #34d399;
  --danger:        #f87171;
  --warn:          #fbbf24;
  --info:          #38bdf8;

  --bg:            #0f0c29;
  --bg2:           #1a1040;
  --bg3:           #261b50;
  --surface:       rgba(255,255,255,.06);
  --surface-h:     rgba(255,255,255,.11);
  --border:        rgba(255,255,255,.12);
  --border-h:      rgba(255,255,255,.22);

  --text:          #f1f5f9;
  --text-muted:    #94a3b8;
  --text-faint:    #64748b;
  --glass:         rgba(15,10,60,.72);

  --radius:        14px;
  --radius-sm:     9px;
  --radius-lg:     20px;
  --shadow:        0 8px 32px rgba(0,0,0,.45);
  --shadow-sm:     0 2px 12px rgba(0,0,0,.3);
  --glow:          0 0 24px rgba(129,140,248,.25);
}

/* ── Reset & base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Sarmalayıcı ── */
.wrap { width:100%; max-width:1080px; margin:0 auto; padding:0 clamp(14px,4vw,32px); }

/* ── Cam-cam kartlar (glassmorphism) ── */
.glass {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.glass-dark {
  background: rgba(10,6,40,.75);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Gradient başlıklar ── */
.grad-text {
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Butonlar ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-sm); border:none;
  font:700 14px/1 inherit; cursor:pointer; text-decoration:none;
  transition: all .2s ease; white-space:nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary-d), var(--accent));
  color:#fff;
  box-shadow: 0 4px 18px rgba(99,102,241,.4);
}
.btn-primary:hover { filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 8px 26px rgba(99,102,241,.55); }
.btn-outline {
  background: var(--surface); border:1px solid var(--border);
  color:var(--text);
}
.btn-outline:hover { background:var(--surface-h); border-color:var(--border-h); }
.btn-danger {
  background: linear-gradient(135deg,#dc2626,#ef4444);
  color:#fff;
}
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.btn .spin {
  display:inline-block; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Form ── */
.fld { display:flex; flex-direction:column; gap:6px; }
.fld label { font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:.3px; }
.fld label .req { color:var(--danger); margin-left:2px; }
.fld input, .fld select, .fld textarea {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size:14.5px;
  padding: 12px 14px;
  outline: none;
  transition: all .18s ease;
  width:100%;
}
.fld input::placeholder, .fld textarea::placeholder { color:var(--text-faint); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--primary);
  background: rgba(129,140,248,.08);
  box-shadow: 0 0 0 3px rgba(129,140,248,.18);
}
.fld input.bad, .fld select.bad { border-color:var(--danger); background:rgba(248,113,113,.07); }
.fld .hint  { font-size:11.5px; color:var(--text-faint); }
.fld .emsg  { font-size:11.5px; color:var(--danger); display:none; }
.fld.err .emsg { display:block; }
.fld.err input, .fld.err select { border-color:var(--danger); }
.fld textarea { resize:vertical; min-height:80px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.fld.full { grid-column:1/-1; }

/* ── Mesajlar ── */
.msg { display:none; border-radius:var(--radius-sm); padding:12px 15px; font-size:13.5px; font-weight:600; }
.msg.err { display:block; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); border-left:4px solid var(--danger); color:#fca5a5; }
.msg.ok  { display:block; background:rgba(52,211,153,.1);  border:1px solid rgba(52,211,153,.3);  border-left:4px solid var(--success); color:#6ee7b7; }
.msg.wn  { display:block; background:rgba(251,191,36,.1);  border:1px solid rgba(251,191,36,.3);  border-left:4px solid var(--warn);    color:#fde68a; }
.msg ul  { margin:8px 0 0 20px; font-weight:500; }

/* ── Sayfa giriş animasyonu ── */
.fade-up {
  animation: fadeUp .5s ease both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Yasal sayfa içeriği ── */
.legal-body { max-width:780px; margin:0 auto; }
.legal-body h1 { font-size:clamp(22px,5vw,32px); font-weight:800; margin-bottom:8px; }
.legal-body h2 { font-size:clamp(16px,3.5vw,20px); font-weight:700; margin:28px 0 10px; color:var(--primary); }
.legal-body p  { color:var(--text-muted); margin-bottom:12px; line-height:1.75; }
.legal-body ul { color:var(--text-muted); margin:0 0 14px 22px; line-height:1.75; }
.legal-body li { margin-bottom:5px; }
.legal-body a  { color:var(--primary); }

/* ── Checkbox ── */
.ck {
  display:flex; gap:10px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px;
  font-size:13px; color:var(--text-muted); cursor:pointer;
  transition: border-color .18s;
}
.ck:hover { border-color:var(--border-h); }
.ck.bad   { border-color:var(--danger); background:rgba(248,113,113,.07); }
.ck input { width:17px; height:17px; flex:0 0 auto; accent-color:var(--primary); cursor:pointer; margin-top:1px; }
.ck b  { color:var(--text); }
.ck a  { color:var(--primary); }

/* ── Kod kutusu ── */
.codebox {
  display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; margin-top:6px;
}
.codebox code {
  flex:1 1 220px; background:#0a0620; color:#e2e8f0;
  padding:12px 14px; border-radius:8px;
  font:13px/1.5 Consolas,'Courier New',monospace;
  word-break:break-all; user-select:all; border:1px solid rgba(255,255,255,.08);
}
.copybtn {
  padding:0 18px; background:var(--surface); border:1px solid var(--border);
  color:var(--primary); border-radius:8px; font:700 13px inherit;
  cursor:pointer; min-height:40px; white-space:nowrap; transition:all .18s;
}
.copybtn:hover { background:var(--primary-d); border-color:var(--primary-d); color:#fff; }
.copybtn.ok    { background:#16a34a; border-color:#16a34a; color:#fff; }

/* ── Mobilden büyüklere ── */
@media (max-width:480px) {
  .fld input, .fld select, .fld textarea { font-size:16px !important; }
}
@media (prefers-reduced-motion:reduce) {
  *, .fade-up { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}