/* ═══════════════════════════════════════════════════════════════════════
   SCLER Panel — UI VERSION 3 · "MERIDIAN" (Editorial Luxe)
   Aydınlık kağıt zemin · mürekkep siyahı · derin zümrüt + antik altın.
   Fraunces (serif display) + Instrument Sans (gövde). Hem panel hem login.
   style.css + enhance.css ÜSTÜNE yüklenir; koyu tema varsayımlarını ezer.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  /* Kağıt & mürekkep */
  --bg:        #ece6d8;
  --bg2:       #f4efe4;
  --surface:   #fffdf6;
  --surface2:  #f1ebdd;
  --surface3:  #e6dfce;
  --border:    rgba(38,30,16,.12);
  --border2:   rgba(38,30,16,.22);
  --txt:       #211c14;
  --txt2:      #5c5346;
  --txt3:      #8c8371;
  /* Zümrüt + altın */
  --accent:    #0e5c41;
  --accent2:   #14795a;
  --accent-a:  rgba(14,92,65,.10);
  --green:     #0e5c41;
  --green-a:   rgba(14,92,65,.10);
  --red:       #a1331d;
  --red-a:     rgba(161,51,29,.10);
  --orange:    #9c6b16;
  --orange-a:  rgba(156,107,22,.12);
  --blue:      #2a5c8a;
  --blue-a:    rgba(42,92,138,.10);
  --yellow:    #9c6b16;
  --gold:      #a67c25;
  --radius:    5px;
  --radius-s:  4px;
  --radius-l:  7px;
  /* enhance token'larini ez */
  --grad-accent: linear-gradient(135deg, #0e5c41 0%, #14795a 100%);
  --grad-gold:   linear-gradient(135deg, #d4a94e 0%, #a67c25 100%);
  --shadow-sm:   0 1px 2px rgba(50,38,15,.07);
  --shadow-md:   0 14px 34px rgba(50,38,15,.11);
  --shadow-glow: 0 0 0 1px rgba(14,92,65,.30), 0 14px 34px rgba(14,92,65,.14);
  --font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  /* Karanlık Kömür & Obsidian */
  --bg:        #0c0c0e;
  --bg2:       #141416;
  --surface:   #1a1a1e;
  --surface2:  #222226;
  --surface3:  #2c2c32;
  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.12);
  --txt:       #f4f4f5;
  --txt2:      #a1a1aa;
  --txt3:      #71717a;
  /* Altın + Klasik Koyu Tonlar */
  --accent:    #d4a94e;
  --accent2:   #e8c06e;
  --accent-a:  rgba(212,169,78,0.1);
  --green:     #10b981;
  --green-a:   rgba(16,185,129,0.1);
  --red:       #ef4444;
  --red-a:     rgba(239,68,68,0.1);
  --blue:      #3b82f6;
  --blue-a:    rgba(59,130,246,0.1);
  --orange:    #f97316;
  --orange-a:  rgba(249,115,22,0.1);
  --yellow:    #eab308;
  --gold:      #d4a94e;
  --radius:    5px;
  --radius-s:  4px;
  --radius-l:  7px;
  --grad-accent: linear-gradient(135deg, #d4a94e 0%, #a67c25 100%);
  --grad-gold:   linear-gradient(135deg, #f5d082 0%, #d4a94e 100%);
  --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
  --shadow-md:   0 14px 34px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px rgba(212,169,78,.30), 0 14px 34px rgba(212,169,78,.14);
  --font-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

/* ── Zemin: kağıt + grain + köşe wash ─────────────────────────────────── */
body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--txt);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(60% 45% at 100% 0%, rgba(14,92,65,.07), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(166,124,37,.07), transparent 60%);
}
/* Koyu temaya ait yildiz tuvalini kaldir */
#stars-canvas { display: none !important; }

/* ── Tipografi ────────────────────────────────────────────────────────── */
.page-head h1, .lb-head h1, .profile-hero .who h1,
.hero h1, .hero-title, .dash-hero-title,
.stat-val, .lb-place .amt, .lb-place .nm, .lb-myrank .big,
.rank-widget .rw-amt, .card-head h3 .serif {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  font-optical-sizing: auto;
}
.page-head h1, .lb-head h1, .profile-hero .who h1, .dash-hero-title {
  font-weight: 600; letter-spacing: -.02em;
}
/* enhance'in gradient-text stat-val'ini duz mürekkebe cevir */
.stat-val {
  background: none !important;
  -webkit-text-fill-color: var(--txt) !important;
  color: var(--txt) !important;
  font-weight: 600;
}
.sb-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.sb-group, .stat-label, .form-label {
  letter-spacing: .14em !important; text-transform: uppercase;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border);
  backdrop-filter: none;
}
.sb-brand { border-bottom: 1px solid var(--border); }
.sb-item { border-radius: var(--radius-s); }
.sb-item:hover { background: rgba(14,92,65,.06); color: var(--txt); transform: none; }
.sb-item.active {
  background: var(--accent-a) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.sb-item.active::before {
  background: var(--accent) !important;
  box-shadow: none !important;
  width: 3px !important; height: 18px !important;
}
.sb-badge { background: var(--red); }

/* ── Topbar & kullanıcı ───────────────────────────────────────────────── */
.topbar { background: var(--bg2) !important; border-bottom: 1px solid var(--border); backdrop-filter: none; }
.topbar-page { font-family: var(--font-display); font-weight: 600; }
.user-pill { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); }
.theme-btn { background: var(--surface); border: 1px solid var(--border); color: var(--txt2); }
.user-drop { background: var(--surface); border: 1px solid var(--border2); box-shadow: var(--shadow-md); }

/* ── Kartlar & stat ───────────────────────────────────────────────────── */
.card, .stat, .hero {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}
.card:hover, .stat:hover { box-shadow: var(--shadow-md); border-color: var(--border2) !important; transform: translateY(-2px); }
.card-head { border-bottom: 1px solid var(--border); }
.stat { border-top: 2px solid var(--accent) !important; }
.stat::after { display: none !important; }
.stat-icon { border: 1px solid var(--border); }

/* ── Butonlar ─────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(14,92,65,.28) !important;
  border: 1px solid var(--accent) !important;
}
.btn-primary:hover { background: var(--accent2) !important; box-shadow: 0 4px 16px rgba(14,92,65,.4) !important; }
.btn-secondary { background: var(--surface2); color: var(--txt); border: 1px solid var(--border2); }
.btn-secondary:hover { background: var(--surface3); color: var(--txt); }

/* ── Sıralama ─────────────────────────────────────────────────────────── */
.lb-place { background: var(--surface) !important; border: 1px solid var(--border) !important; }
.lb-place.p1 { border-color: rgba(166,124,37,.5) !important; background: linear-gradient(180deg, rgba(166,124,37,.10), var(--surface)) !important; }
.lb-place.p1 .amt { color: var(--gold); }
.rank-widget {
  background: linear-gradient(120deg, rgba(14,92,65,.12), rgba(166,124,37,.06) 60%, transparent) !important;
  border: 1px solid rgba(14,92,65,.28) !important;
}
.rank-widget .rw-badge { background: var(--accent) !important; color: #fff; box-shadow: 0 4px 14px rgba(14,92,65,.3) !important; }
.rank-widget .rw-amt, .lb-myrank .big { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; background: none !important; }
.lb-myrank {
  background: linear-gradient(135deg, rgba(14,92,65,.12), rgba(166,124,37,.05)) !important;
  border: 1px solid rgba(14,92,65,.3) !important;
  box-shadow: var(--shadow-sm) !important;
}
.lb-row.me {
  background: linear-gradient(90deg, rgba(14,92,65,.10), transparent) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
.lb-row.me .info .n::after { color: var(--accent) !important; }
.lb-row .money .m { color: var(--accent); }
.lb-bar { background: var(--surface3); }

/* ── Profil ───────────────────────────────────────────────────────────── */
.profile-hero {
  background: linear-gradient(120deg, rgba(14,92,65,.08), transparent 55%), var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
.avatar, .avatar-lg, .avatar-xl { box-shadow: 0 3px 12px rgba(14,92,65,.22); }
.avatar-pick { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(14,92,65,.4); }

/* ── Formlar ──────────────────────────────────────────────────────────── */
.form-control { background: var(--surface) !important; border: 1px solid var(--border2) !important; color: var(--txt) !important; }
.form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-a) !important; }

/* ── Genel metin/ikon uyumu ───────────────────────────────────────────── */
.badge-blue { background: var(--blue-a); color: var(--blue); }
.badge-gray { background: var(--surface3); color: var(--txt2); }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN / REGISTER SAYFASI (body.uiv-v3 ile kapsanır)
   ═══════════════════════════════════════════════════════════════════════ */
body.uiv-v3 {
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: var(--font-body) !important;
}
body.uiv-v3 .login-left { padding-right: 40px; }
body.uiv-v3 .brand-title { color: var(--txt) !important; font-family: var(--font-display); }
body.uiv-v3 .welcome-title {
  font-family: var(--font-display) !important;
  color: var(--txt) !important;
  font-weight: 600 !important;
  font-size: 58px !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
}
body.uiv-v3 .welcome-subtitle { color: var(--accent) !important; font-family: var(--font-display); font-weight: 500 !important; }
body.uiv-v3 .welcome-desc { color: var(--txt2) !important; }
body.uiv-v3 .welcome-list li { color: var(--txt2) !important; }
body.uiv-v3 .welcome-list li span { color: var(--accent) !important; }

body.uiv-v3 .login-card-v2 {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: var(--radius-l) !important;
  box-shadow: 0 24px 60px rgba(50,38,15,.14) !important;
}
body.uiv-v3 .card-brand { color: var(--txt) !important; font-family: var(--font-display); }
body.uiv-v3 .card-title-v2 { color: var(--txt) !important; font-family: var(--font-display) !important; font-weight: 600 !important; }
body.uiv-v3 .card-sub-v2 { color: var(--txt3) !important; }
body.uiv-v3 .form-label-v2 { color: var(--txt2) !important; letter-spacing: .12em; text-transform: uppercase; font-size: 11px !important; }
body.uiv-v3 .form-input-v2 {
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  color: var(--txt) !important;
}
body.uiv-v3 .form-input-v2:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-a) !important; }
body.uiv-v3 .input-icon-left, body.uiv-v3 .input-icon-right { color: var(--txt3) !important; }
body.uiv-v3 .captcha-refresh-btn { background: #fff !important; border: 1px solid var(--border2) !important; color: var(--txt2) !important; }
body.uiv-v3 .btn-signin {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-body);
  letter-spacing: .02em;
  box-shadow: 0 3px 12px rgba(14,92,65,.3);
}
body.uiv-v3 .btn-signin:hover { background: var(--accent2) !important; }
body.uiv-v3 .card-footer-v2 { color: var(--txt3) !important; }
body.uiv-v3 .card-footer-v2 a { color: var(--accent) !important; font-weight: 600; }
body.uiv-v3 .login-error-v2 {
  background: var(--red-a) !important;
  border: 1px solid rgba(161,51,29,.3) !important;
  color: var(--red) !important;
}

/* ── Dark Mode Overrides for V3 ── */
[data-theme="dark"] body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    radial-gradient(60% 45% at 100% 0%, rgba(31,184,138,.07), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(212,169,78,.05), transparent 60%) !important;
}
[data-theme="dark"] body.uiv-v3 .form-input-v2 {
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
  color: var(--txt) !important;
}
[data-theme="dark"] body.uiv-v3 .captcha-refresh-btn {
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
  color: var(--txt2) !important;
}
[data-theme="dark"] body.uiv-v3 .login-card-v2 {
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
}