/*
 * shared.css — barut.app Platform Ortak Stiller
 *
 * Bu dosya tüm platform sayfalarında ortak kullanılan CSS variables,
 * base reset ve yeniden kullanılabilir component sınıflarını içerir.
 *
 * Kullanım:  <link rel="stylesheet" href="/platform/shared.css">
 *            Sayfanın kendi <style> bloğunu bu dosyadan ÖNCE yerleştirin,
 *            ya da override etmek için SONRA yerleştirin.
 */

/* ─── Reset & Box Model ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── CSS Custom Properties ─────────────────────────────── */
:root {
  /* Renk paleti — tüm sayfalarda standart */
  --navy-950: #050b18;
  --navy-900: #0a1628;
  --navy-800: #0f2040;
  --navy-700: #14325c;
  --navy-600: #1a4278;
  --navy-500: #1e52a0;

  --accent:  #3b82f6;
  --accent2: #60a5fa;
  --gold:    #f59e0b;
  --gold2:   #fbbf24;
  --silver:  #94a3b8;

  --success: #22c55e;
  --error:   #ef4444;
  --warn:    #f97316;

  --text:    #e2e8f0;
  --muted:   #94a3b8;
  --card:    rgba(15, 32, 64, 0.85);
  --border:  rgba(59, 130, 246, 0.18);

  --radius:  14px;
  --shadow:  0 8px 40px rgba(0, 0, 0, .55);
  --tab-h:   68px;

  /* Tipografi */
  --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Code", "Fira Code", monospace;
}

/* ─── Base Styles ────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background:   var(--navy-950);
  color:        var(--text);
  font-family:  var(--font-sans);
  min-height:   100vh;
  overflow-x:   hidden;
  padding-bottom: var(--tab-h);
}

/* ─── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--navy-600); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-500); }
* { scrollbar-width: thin; scrollbar-color: var(--navy-600) transparent; }

/* ─── Button reset ───────────────────────────────────────── */
button { font-family: inherit; cursor: pointer; }

/* ─── Utilities ──────────────────────────────────────────── */
.text-muted    { color: var(--muted); }
.text-accent   { color: var(--accent2); }
.text-success  { color: var(--success); }
.text-error    { color: var(--error); }
.text-warn     { color: var(--warn); }
.text-center   { text-align: center; }
.text-sm       { font-size: .85rem; }
.text-xs       { font-size: .75rem; }
.fw-700        { font-weight: 700; }
.fw-800        { font-weight: 800; }
.hidden        { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ─── Card ───────────────────────────────────────────────── */
.card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.25rem 1rem;
  backdrop-filter: blur(8px);
}

/* ─── Btn: primary ───────────────────────────────────────── */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .4rem;
  padding:         .6rem 1.2rem;
  background:      linear-gradient(135deg, var(--accent), #1d4ed8);
  border:          none;
  border-radius:   10px;
  color:           #fff;
  font-size:       .88rem;
  font-weight:     700;
  transition:      opacity .2s, transform .15s;
}
.btn-primary:hover   { opacity: .88; }
.btn-primary:active  { transform: scale(.97); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* ─── Btn: ghost ─────────────────────────────────────────── */
.btn-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             .3rem;
  padding:         .55rem 1.1rem;
  background:      transparent;
  border:          1px solid var(--border);
  border-radius:   10px;
  color:           var(--muted);
  font-size:       .85rem;
  transition:      border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

/* ─── Form: Input ────────────────────────────────────────── */
.input {
  width:         100%;
  background:    var(--navy-800);
  border:        1px solid var(--border);
  border-radius: 10px;
  color:         var(--text);
  font-family:   inherit;
  font-size:     .9rem;
  padding:       .6rem .85rem;
  transition:    border-color .2s, box-shadow .2s;
  outline:       none;
}
.input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(59,130,246,.15);
}
.input::placeholder { color: var(--muted); }

/* ─── Toast Notification ─────────────────────────────────── */
.brt-toast {
  position:       fixed;
  bottom:         calc(var(--tab-h) + 14px);
  left:           50%;
  transform:      translateX(-50%) translateY(20px);
  background:     rgba(10, 22, 40, .94);
  border:         1px solid var(--border);
  border-radius:  10px;
  padding:        .6rem 1.2rem;
  color:          var(--text);
  font-size:      .88rem;
  font-weight:    600;
  z-index:        9999;
  opacity:        0;
  transition:     opacity .25s, transform .25s;
  text-align:     center;
  pointer-events: none;
  max-width:      min(400px, 92vw);
  backdrop-filter: blur(12px);
}
.brt-toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}
.brt-toast.toast-success { border-color: rgba(34,197,94,.35); color: #4ade80; }
.brt-toast.toast-error   { border-color: rgba(239,68,68,.35); color: #f87171; }
.brt-toast.toast-warn    { border-color: rgba(249,115,22,.35); color: #fb923c; }

/* ─── Loading spinner ────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display:       inline-block;
  width:         20px;
  height:        20px;
  border:        2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation:     spin .7s linear infinite;
  flex-shrink:   0;
}

/* ─── Badge ──────────────────────────────────────────────── */
.badge {
  display:       inline-block;
  font-size:     .68rem;
  font-weight:   700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:       2px 7px;
  border-radius: 20px;
}
.badge-blue    { background: rgba(59,130,246,.18); color: var(--accent2); border: 1px solid rgba(59,130,246,.25); }
.badge-green   { background: rgba(34,197,94,.15);  color: var(--success); border: 1px solid rgba(34,197,94,.25); }
.badge-red     { background: rgba(239,68,68,.15);  color: var(--error);   border: 1px solid rgba(239,68,68,.25); }
.badge-gold    { background: rgba(245,158,11,.15); color: var(--gold2);   border: 1px solid rgba(245,158,11,.25); }
.badge-muted   { background: rgba(148,163,184,.1); color: var(--muted);   border: 1px solid rgba(148,163,184,.15); }

/* ─── Metallic text effect ───────────────────────────────── */
.metallic-text {
  background: linear-gradient(135deg,
    #c8d6e5 0%, #e8f0f8 20%, #7a9bbf 35%,
    #b8cfe0 50%, #d4e4f0 65%, #8aaccc 80%,
    #c0d4e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Rank chip ──────────────────────────────────────────── */
.rank-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing: .05em;
  padding:       3px 9px;
  border-radius: 20px;
  background:    rgba(59,130,246,.12);
  border:        1px solid rgba(59,130,246,.2);
  color:         var(--accent2);
}

/* ─── Skeleton loader ────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  border-radius: 8px;
  background:    linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.08) 37%,
    rgba(255,255,255,.04) 63%);
  background-size: 400px 100%;
  animation:     shimmer 1.4s ease infinite;
}

/* ─── Divider ────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}

/* ─── Truncate ───────────────────────────────────────────── */
.truncate {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}