/* ==========================================================================
   K2 DESIGN TOKENS — merkezi tasarim degiskenleri (tek kaynak)
   2026-07-03. Degerler mevcut paletle BIREBIR uyumludur; bu dosya SADECE
   degisken ve opt-in yardimci sinif TANIMLAR, mevcut CSS'i degistirmez.
   Refactor edilen kurallar var(--k2-*) kullanabilir; gorsel sonuc ayni kalir.
   ========================================================================== */

:root {
  /* --- Renk: yuzeyler (koyu tema) --- */
  --k2-bg:            #0d1017;
  --k2-bg-elev:      #10141d;
  --k2-surface:      #141a24;
  --k2-surface-2:    #1a2230;
  --k2-surface-3:    #212b3b;
  --k2-overlay:      rgba(6, 10, 18, .72);

  /* --- Renk: kenarliklar / ayraclar --- */
  --k2-border:       rgba(255, 255, 255, .08);
  --k2-border-strong: rgba(255, 255, 255, .16);
  --k2-border-gold:  rgba(255, 215, 106, .55);

  /* --- Renk: marka aksanlari (Knight Online altin + destek) --- */
  --k2-gold:         #ffd76a;
  --k2-gold-2:       #ffc928;
  --k2-gold-strong:  #d4af37;
  --k2-gold-deep:    #dc9300;
  --k2-cyan:         #22cfe0;
  --k2-cyan-soft:    #7ff7f0;
  --k2-green:        #5fe088;
  --k2-green-soft:   #8bffab;
  --k2-purple:       #af11da;
  --k2-danger:       #e5484d;
  --k2-warning:      #ffb020;

  /* --- Renk: metin --- */
  --k2-text:         #e5ebf5;
  --k2-text-soft:    rgba(229, 235, 245, .85);
  --k2-text-muted:   rgba(229, 235, 245, .62);
  --k2-text-faint:   rgba(229, 235, 245, .42);
  --k2-text-ondark:  #2d1700;

  /* --- Gradyanlar --- */
  --k2-grad-gold:    linear-gradient(180deg, #ffe889 0%, #ffc928 46%, #dc9300 100%);
  --k2-grad-cyan:    linear-gradient(180deg, #7ff7f0 0%, #22cfe0 44%, #0a8fc4 100%);
  --k2-grad-surface: linear-gradient(135deg, rgba(26, 34, 48, .92), rgba(16, 20, 29, .96));

  /* --- Kose yaricapi (radius) --- */
  --k2-radius-xs:    6px;
  --k2-radius-sm:    10px;
  --k2-radius-btn:   12px;
  --k2-radius-md:    14px;
  --k2-radius-card:  18px;
  --k2-radius-lg:    20px;
  --k2-radius-pill:  999px;
  --k2-radius-round: 50%;

  /* --- Golgeler (yumusak) --- */
  --k2-shadow-sm:    0 2px 8px rgba(0, 0, 0, .28);
  --k2-shadow-md:    0 10px 24px rgba(0, 0, 0, .34);
  --k2-shadow-lg:    0 18px 40px rgba(0, 0, 0, .46);
  --k2-shadow-gold:  0 12px 26px rgba(220, 147, 0, .30);
  --k2-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* --- Bosluk olcegi (spacing scale) --- */
  --k2-space-1:      4px;
  --k2-space-2:      8px;
  --k2-space-3:      12px;
  --k2-space-4:      16px;
  --k2-space-5:      20px;
  --k2-space-6:      24px;
  --k2-space-8:      32px;
  --k2-space-10:     40px;

  /* --- Tipografi --- */
  --k2-font-sans:    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --k2-font-display: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --k2-fs-xs:        11px;
  --k2-fs-sm:        13px;
  --k2-fs-base:      14px;
  --k2-fs-md:        16px;
  --k2-fs-lg:        20px;
  --k2-fs-xl:        26px;
  --k2-fw-regular:   400;
  --k2-fw-medium:    600;
  --k2-fw-bold:      700;
  --k2-fw-heavy:     800;
  --k2-lh-tight:     1.2;
  --k2-lh-base:      1.55;

  /* --- Gecisler (transitions) --- */
  --k2-t-fast:       150ms;
  --k2-t-base:       200ms;
  --k2-t-slow:       250ms;
  --k2-ease:         cubic-bezier(.4, 0, .2, 1);

  /* --- Odak halkasi (accessibility) --- */
  --k2-focus-ring:   0 0 0 3px rgba(255, 215, 106, .45);
  --k2-z-modal:      1050;
}

/* ==========================================================================
   OPT-IN YARDIMCI BILESEN KATMANI
   Yeni/refactor edilen arayuzler bu siniflari kullanabilir. Mevcut sayfalar
   etkilenmez (bu siniflari kullanmayan hicbir sey degismez).
   ========================================================================== */

.k2-card {
  background: var(--k2-grad-surface);
  border: 1px solid var(--k2-border);
  border-radius: var(--k2-radius-card);
  box-shadow: var(--k2-shadow-md), var(--k2-shadow-inset);
  padding: var(--k2-space-5);
  color: var(--k2-text);
  transition: transform var(--k2-t-base) var(--k2-ease),
              box-shadow var(--k2-t-base) var(--k2-ease),
              border-color var(--k2-t-base) var(--k2-ease);
}
.k2-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--k2-shadow-lg), var(--k2-shadow-inset);
  border-color: var(--k2-border-strong);
}
.k2-card--glass {
  background: rgba(20, 26, 36, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.k2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k2-space-2);
  min-height: 42px;
  padding: 0 var(--k2-space-5);
  border: 1px solid var(--k2-border-strong);
  border-radius: var(--k2-radius-btn);
  background: var(--k2-surface-2);
  color: var(--k2-text);
  font-family: var(--k2-font-sans);
  font-size: var(--k2-fs-base);
  font-weight: var(--k2-fw-heavy);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--k2-t-fast) var(--k2-ease),
              box-shadow var(--k2-t-fast) var(--k2-ease),
              background-color var(--k2-t-fast) var(--k2-ease),
              border-color var(--k2-t-fast) var(--k2-ease);
}
.k2-btn:hover,
.k2-btn:focus { transform: translateY(-1px); box-shadow: var(--k2-shadow-md); color: var(--k2-text); }
.k2-btn:active { transform: translateY(0); }

.k2-btn--gold {
  background: var(--k2-grad-gold);
  border-color: rgba(73, 42, 0, .95);
  color: var(--k2-text-ondark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  box-shadow: var(--k2-shadow-gold), var(--k2-shadow-inset);
}
.k2-btn--gold:hover,
.k2-btn--gold:focus { color: var(--k2-text-ondark); }

.k2-btn--cyan {
  background: var(--k2-grad-cyan);
  border-color: rgba(4, 54, 74, .92);
  color: #03313f;
}
.k2-btn--cyan:hover,
.k2-btn--cyan:focus { color: #03313f; }

.k2-btn--ghost { background: transparent; border-color: var(--k2-border-gold); color: var(--k2-gold); }
.k2-btn--pill  { border-radius: var(--k2-radius-pill); }

.k2-avatar {
  border-radius: var(--k2-radius-round);
  object-fit: cover;
  border: 2px solid var(--k2-border-gold);
  background: var(--k2-surface);
}

.k2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--k2-radius-pill);
  font-size: var(--k2-fs-xs);
  font-weight: var(--k2-fw-heavy);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255, 215, 106, .12);
  color: var(--k2-gold);
  border: 1px solid var(--k2-border-gold);
}
.k2-badge--green { background: rgba(95, 224, 136, .12); color: var(--k2-green); border-color: rgba(95, 224, 136, .42); }
.k2-badge--danger { background: rgba(229, 72, 77, .12); color: var(--k2-danger); border-color: rgba(229, 72, 77, .42); }

.k2-input {
  width: 100%;
  min-height: 42px;
  padding: 0 var(--k2-space-4);
  background: var(--k2-surface);
  border: 1px solid var(--k2-border-strong);
  border-radius: var(--k2-radius-sm);
  color: var(--k2-text);
  font-size: var(--k2-fs-base);
  transition: border-color var(--k2-t-fast) var(--k2-ease), box-shadow var(--k2-t-fast) var(--k2-ease);
}
.k2-input::placeholder { color: var(--k2-text-faint); }
.k2-input:focus { outline: none; border-color: var(--k2-border-gold); box-shadow: var(--k2-focus-ring); }

/* --- Erisilebilirlik: klavye odak halkasi (fare tiki hariç) --- */
.k2-focusable:focus-visible,
.k2-btn:focus-visible,
.k2-input:focus-visible,
a.k2-link:focus-visible { outline: none; box-shadow: var(--k2-focus-ring); border-radius: var(--k2-radius-xs); }

/* --- Yumusak gorunum: animasyon azaltma tercihi --- */
@media (prefers-reduced-motion: reduce) {
  .k2-card, .k2-btn, .k2-input { transition: none; }
  .k2-card:hover, .k2-btn:hover { transform: none; }
}