/*! Dijitik demo sistemi — ortak stiller (oyun oynatıcı + web önizleme). © Dijitik · dijitik.com */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(fonts/PlusJakartaSans.woff) format("woff");
  font-weight: 200 800;
  font-display: swap;
}

.dj {
  --dj-bg: #08090a;
  --dj-bg-2: #0b0f0d;
  --dj-s1: #111413;
  --dj-s2: #161a18;
  --dj-s3: #1c211f;
  --dj-bd: rgba(255, 255, 255, .075);
  --dj-bd-2: rgba(255, 255, 255, .13);
  --dj-bd-3: rgba(255, 255, 255, .22);
  --dj-tx: #ecefed;
  --dj-tx-2: #b4bcb8;
  --dj-mu: #7d8782;
  --dj-em: #10b981;
  --dj-em-2: #34d399;
  --dj-tq: #2dd4bf;
  --dj-koyu: #053d2e;
  --dj-on-em: #03130d;
  --dj-em-bg: rgba(16, 185, 129, .1);
  --dj-em-bd: rgba(16, 185, 129, .35);
  --dj-wa: #25d366;
  --dj-hata: #f87171;
  --dj-r: 14px;
  --dj-r-sm: 10px;
  --dj-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dj-gecis: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
  font-family: var(--dj-font);
  color: var(--dj-tx);
  -webkit-font-smoothing: antialiased;
}
.dj *, .dj *::before, .dj *::after { box-sizing: border-box; }
.dj a { color: inherit; text-decoration: none; }
.dj button { font: inherit; color: inherit; }
.dj :focus-visible { outline: 2px solid var(--dj-em-2); outline-offset: 2px; border-radius: 8px; }

/* ---- ikonlar ---- */
.dj-ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.dj-ic-dolu { fill: currentColor; stroke: none; }

/* ---- marka ---- */
.dj-marka { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; letter-spacing: -.045em; color: var(--dj-tx); }
.dj-marka img, .dj-marka svg { width: 24px; height: 24px; display: block; }

/* ---- butonlar ---- */
.dj-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 999px; border: 0;
  font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .15s var(--dj-gecis);
}
.dj-b:active { transform: translateY(1px) scale(.99); }
.dj-b .dj-ic { width: 17px; height: 17px; }
.dj-b-pri { background: var(--dj-em); color: var(--dj-on-em); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(16,185,129,.4), 0 10px 30px -12px rgba(16,185,129,.7); }
.dj-b-pri:hover { background: #22c58d; }
.dj-b-wa { background: var(--dj-wa); color: #052e16; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px -12px rgba(37,211,102,.6); }
.dj-b-wa:hover { background: #3be07a; }
.dj-b-hay { background: rgba(255,255,255,.06); color: var(--dj-tx); box-shadow: inset 0 0 0 1px var(--dj-bd-2); }
.dj-b-hay:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px var(--dj-bd-3); }
.dj-b-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.dj-b-ikon { width: 38px; padding: 0; }

/* ---- yardımcılar ---- */
.dj-gizli-metin { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dj-cip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--dj-tx-2); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--dj-bd);
  white-space: nowrap;
}
.dj-cip .dj-ic { width: 14px; height: 14px; }
.dj-cip-em { color: var(--dj-em-2); background: var(--dj-em-bg); box-shadow: inset 0 0 0 1px var(--dj-em-bd); }

@media (prefers-reduced-motion: reduce) {
  .dj *, .dj *::before, .dj *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}