/*! Dijitik oyun oynatıcı — © Dijitik · dijitik.com. Gerektirir: ortak/demo-ortak.css */

/* =========================================================== sayfa iskeleti */
.dj-sayfa {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background:
    radial-gradient(1200px 520px at 50% -180px, rgba(16, 185, 129, .13), transparent 70%),
    var(--dj-bg);
  font-size: 15px; line-height: 1.6;
}
.dj [data-bos-gizle=""] { display: none !important; }

.dj-ust { border-bottom: 1px solid var(--dj-bd); background: rgba(8, 9, 10, .6); backdrop-filter: saturate(160%) blur(12px); position: relative; z-index: 5; }
.dj-ust-ic { width: min(100% - 32px, 1280px); margin-inline: auto; height: 62px; display: flex; align-items: center; gap: 14px; }
.dj-geri { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 8px; margin-left: -8px; border-radius: 999px; color: var(--dj-tx-2); font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.dj-geri:hover { background: rgba(255,255,255,.06); color: var(--dj-tx); }
.dj-ayrac { width: 1px; height: 20px; background: var(--dj-bd-2); }
.dj-ust-sag { margin-left: auto; display: flex; gap: 8px; }

.dj-ana { width: min(100% - 32px, 1280px); margin-inline: auto; padding: 26px 0 48px; }
.dj-baslik-satiri { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dj-baslik-satiri h1 { margin: 0 6px 0 0; font-size: clamp(21px, 2.3vw, 30px); font-weight: 750; letter-spacing: -.035em; line-height: 1.15; }

/* =========================================================== oynatıcı */
.dj-oyn { --oran: 16 / 9; --oran-n: 1.7778; --ust-bosluk: 236px; position: relative; }
.dj-cerceve {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(100%, calc((100vh - var(--ust-bosluk)) * var(--oran-n)));
  width: min(100%, calc((100svh - var(--ust-bosluk)) * var(--oran-n)));
  min-width: min(100%, 320px);
  aspect-ratio: var(--oran);
  margin-inline: auto;
  border-radius: 18px;
  background: #020806;
  box-shadow: 0 0 0 1px var(--dj-bd-2), 0 40px 90px -36px rgba(0, 0, 0, .9), 0 0 140px -50px rgba(16, 185, 129, .35);
}

/* Kapak: görsel varsa görsel, yoksa marka deseni */
.dj-poster {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(45, 212, 191, .22), transparent 60%),
    radial-gradient(70% 90% at 90% 100%, rgba(16, 185, 129, .28), transparent 60%),
    linear-gradient(160deg, #053d2e, #021510 70%);
  background-size: cover; background-position: center;
  transition: filter .5s var(--dj-gecis), transform .6s var(--dj-gecis), opacity .4s;
}
.dj-poster::after { /* ince ızgara dokusu */
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.dj-oyn[data-poster-var] .dj-poster::after { display: none; }
.dj-cerceve[data-durum="yukleniyor"] .dj-poster,
.dj-cerceve[data-durum="hata"] .dj-poster,
.dj-cerceve[data-durum="webgl"] .dj-poster,
.dj-cerceve[data-durum="bitti"] .dj-poster,
.dj-cerceve[data-durum="uyari"] .dj-poster { filter: blur(18px) brightness(.55) saturate(1.2); transform: scale(1.12); }
.dj-cerceve[data-durum="oynaniyor"] .dj-poster { opacity: 0; }

.dj-ekran { position: absolute; inset: 0; z-index: 1; }
.dj-ekran iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; opacity: 0; transition: opacity .45s ease; }
.dj-cerceve[data-durum="oynaniyor"] .dj-ekran iframe { opacity: 1; }

/* ---- katmanlar ---- */
.dj-katman { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; padding: 24px; overflow: auto; text-align: center; }
.dj-cerceve[data-durum="baslangic"] .dj-k-baslangic,
.dj-cerceve[data-durum="uyari"] .dj-k-uyari,
.dj-cerceve[data-durum="yukleniyor"] .dj-k-yukleme,
.dj-cerceve[data-durum="hata"] .dj-k-hata,
.dj-cerceve[data-durum="webgl"] .dj-k-webgl,
.dj-cerceve[data-durum="bitti"] .dj-k-bitti,
.dj-cerceve.dj-yon-goster .dj-k-yon { display: grid; animation: dj-belir .35s var(--dj-gecis); }
@keyframes dj-belir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* başlangıç */
.dj-k-baslangic {
  background:
    radial-gradient(circle at 50% 50%, rgba(2, 8, 6, .5), rgba(2, 8, 6, 0) 34%),
    linear-gradient(to top, rgba(2, 8, 6, .78), rgba(2, 8, 6, .12) 55%, rgba(2, 8, 6, .25));
  align-content: center; gap: 14px;
}
.dj-oyna { display: grid; justify-items: center; gap: 12px; background: none; border: 0; padding: 8px; cursor: pointer; border-radius: 24px; }
.dj-oyna-daire {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dj-em); color: var(--dj-on-em);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 0 0 10px rgba(16,185,129,.16), 0 24px 50px -12px rgba(16,185,129,.75);
  transition: transform .25s var(--dj-gecis), box-shadow .25s, background .2s;
  animation: dj-nabiz 2.4s ease-out infinite;
}
.dj-oyna-daire .dj-ic { width: 36px; height: 36px; margin-left: 5px; }
.dj-oyna:hover .dj-oyna-daire { transform: scale(1.06); background: #22c58d; }
.dj-oyna-yazi { font-size: 17px; font-weight: 750; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
@keyframes dj-nabiz {
  0% { box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 0 0 0 rgba(16,185,129,.45), 0 24px 50px -12px rgba(16,185,129,.75); }
  70%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 0 0 22px rgba(16,185,129,0), 0 24px 50px -12px rgba(16,185,129,.75); }
}
.dj-k-alt { margin: 0; font-size: 13px; color: rgba(236,239,237,.72); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.dj-meta { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.dj-meta .dj-cip { background: rgba(0,0,0,.38); backdrop-filter: blur(8px); color: rgba(236,239,237,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.dj-meta .dj-cip[hidden] { display: none; }

/* kartlar */
.dj-katman:not(.dj-k-baslangic):not(.dj-k-yukleme):not(.dj-k-yon) { background: rgba(2, 10, 8, .35); }
.dj-kart {
  width: min(100%, 440px); padding: 28px 28px 24px; border-radius: 22px;
  background: rgba(17, 20, 19, .82); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--dj-bd-2), 0 30px 60px -20px rgba(0,0,0,.7);
  display: grid; justify-items: center; gap: 10px;
}
.dj-kart-genis { width: min(100%, 500px); }
.dj-kart h2 { margin: 4px 0 0; font-size: 20px; font-weight: 750; letter-spacing: -.03em; line-height: 1.25; }
.dj-kart p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--dj-tx-2); max-width: 38ch; }
.dj-kart p b { color: var(--dj-tx); font-weight: 700; }
.dj-kart small { font-size: 12.5px; color: var(--dj-mu); }
.dj-kart-ikon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--dj-em-bg); color: var(--dj-em-2); box-shadow: inset 0 0 0 1px var(--dj-em-bd); }
.dj-kart-ikon .dj-ic { width: 24px; height: 24px; }
.dj-kart-ikon-hata { background: rgba(248,113,113,.1); color: var(--dj-hata); box-shadow: inset 0 0 0 1px rgba(248,113,113,.3); }
.dj-kart-butonlar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.dj-hata-ayrinti { display: block; max-width: 100%; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.35); color: var(--dj-mu); font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; text-align: left; max-height: 5.5em; overflow: auto; }
.dj-hata-ayrinti[hidden] { display: none; }

/* yükleniyor */
.dj-k-yukleme { background: radial-gradient(ellipse at center, rgba(2,10,8,.35), rgba(2,10,8,.75)); }
.dj-yukleme { width: min(100%, 320px); display: grid; justify-items: center; gap: 14px; }
.dj-yukleme-logo { width: 46px; height: 46px; border-radius: 13px; filter: drop-shadow(0 10px 24px rgba(16,185,129,.45)); animation: dj-logo 1.8s ease-in-out infinite; }
@keyframes dj-logo { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.04); } }
.dj-yukleme-baslik { font-size: 16px; font-weight: 700; letter-spacing: -.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-ilerleme { position: relative; width: 100%; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.dj-ilerleme i {
  position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, var(--dj-em), var(--dj-tq));
  box-shadow: 0 0 16px rgba(45,212,191,.55);
  transition: width .35s var(--dj-gecis);
}
.dj-ilerleme i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: dj-parilti 1.4s ease-in-out infinite; }
@keyframes dj-parilti { to { transform: translateX(100%); } }
.dj-ilerleme.dj-belirsiz i { width: 36% !important; animation: dj-belirsiz 1.25s ease-in-out infinite; }
@keyframes dj-belirsiz { 0% { left: -36%; } 100% { left: 100%; } }
.dj-yukleme-alt { width: 100%; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--dj-tx-2); font-variant-numeric: tabular-nums; }
.dj-yukleme-alt [data-alan="yuzde"] { color: var(--dj-em-2); font-weight: 700; }

/* yön ipucu */
.dj-k-yon { z-index: 6; background: rgba(2, 10, 8, .94); }
.dj-yon { display: grid; justify-items: center; gap: 8px; }
.dj-yon strong { font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.dj-yon span { font-size: 14px; color: var(--dj-tx-2); margin-bottom: 8px; }
.dj-yon-telefon { width: 64px; height: 64px; fill: none; stroke: var(--dj-em-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: dj-dondur 2.2s var(--dj-gecis) infinite; margin-bottom: 8px; }
@keyframes dj-dondur { 0%, 20% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* filigran */
.dj-filigran {
  position: absolute; z-index: 4; top: 12px; left: 12px; pointer-events: none; user-select: none;
  display: none; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.82);
  background: rgba(0, 0, 0, .32); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  opacity: .78;
}
.dj-filigran svg { width: 15px; height: 15px; border-radius: 4px; }
.dj-cerceve[data-durum="oynaniyor"] .dj-filigran, .dj-cerceve[data-durum="bitti"] .dj-filigran { display: inline-flex; }

/* alt çubuk */
.dj-cubuk { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, calc((100svh - var(--ust-bosluk)) * var(--oran-n))); min-width: min(100%, 320px); margin: 12px auto 0; }
.dj-cubuk-sol, .dj-cubuk-sag { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dj-ipucu { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dj-mu); min-width: 0; }
.dj-ipucu .dj-ic { width: 16px; height: 16px; }
.dj-cubuk-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; min-width: 36px; padding: 0 10px;
  border: 0; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--dj-tx-2);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--dj-bd);
  transition: background .2s, color .2s, box-shadow .2s;
}
.dj-cubuk-b:hover { background: rgba(255,255,255,.09); color: var(--dj-tx); box-shadow: inset 0 0 0 1px var(--dj-bd-2); }
.dj-cubuk-b[aria-pressed="true"] { color: var(--dj-em-2); }
.dj-cubuk-b-yazi { padding: 0 13px 0 11px; }
.dj-cubuk-b[hidden], .dj-yuzen-b[hidden] { display: none; }

.dj-sure-cip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dj-em-2); background: var(--dj-em-bg); box-shadow: inset 0 0 0 1px var(--dj-em-bd); white-space: nowrap; }
.dj-sure-cip .dj-ic { width: 15px; height: 15px; }
.dj-sure-cip.dj-az { color: #fbbf24; background: rgba(251,191,36,.1); box-shadow: inset 0 0 0 1px rgba(251,191,36,.35); }
.dj-sure-cip[hidden] { display: none; }

/* tam ekran (gerçek ya da iOS için sayfa kaplama) */
.dj-yuzen { position: absolute; z-index: 7; top: 12px; right: 12px; display: none; align-items: center; gap: 8px; transition: opacity .35s; }
.dj-yuzen-b { width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.dj-yuzen-b:hover { background: rgba(0,0,0,.65); }
.dj-yuzen .dj-sure-cip { background: rgba(0,0,0,.45); backdrop-filter: blur(8px); height: 32px; }
.dj-oyn.dj-tam .dj-yuzen { display: flex; }
.dj-oyn.dj-tam.dj-bosta .dj-yuzen { opacity: .28; }
.dj-oyn.dj-tam { background: #000; display: flex; flex-direction: column; }
.dj-oyn.dj-tam .dj-cerceve { width: 100%; height: 100%; min-width: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; flex: 1; }
.dj-oyn.dj-tam .dj-cubuk { display: none; }
.dj-oyn.dj-tam-sayfa { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; }
html.dj-kilit, html.dj-kilit body { overflow: hidden; }

/* çağrı alanı */
.dj-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 34px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px var(--dj-bd); }
.dj-cta strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.dj-cta span { font-size: 14px; color: var(--dj-tx-2); }
.dj-cta-butonlar { display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================== küçük ekran */
@media (max-width: 720px) {
  .dj-ust-ic, .dj-ana { width: min(100% - 24px, 1280px); }
  .dj-ust-ic { height: 56px; gap: 10px; }
  .dj-geri span, .dj-yalniz-genis { display: none; }
  .dj-geri { padding: 0 10px; }
  .dj-ust-sag .dj-b-wa { width: 38px; padding: 0; }
  .dj-ana { padding-top: 18px; }
  .dj-baslik-satiri { margin-bottom: 12px; }
  .dj-cerceve, .dj-cubuk { width: 100%; }
  .dj-cerceve { border-radius: 16px; }
  /* Kart gösteren durumlarda çerçeve uzasın ki içerik sığsın */
  .dj-cerceve[data-durum="baslangic"], .dj-cerceve[data-durum="uyari"], .dj-cerceve[data-durum="hata"],
  .dj-cerceve[data-durum="webgl"], .dj-cerceve[data-durum="bitti"] { aspect-ratio: auto; min-height: min(540px, 74svh); }
  .dj-cerceve[data-durum="baslangic"] { min-height: min(420px, 60svh); }
  .dj-katman { padding: 16px; }
  .dj-kart { padding: 24px 18px 20px; border-radius: 18px; }
  .dj-kart h2 { font-size: 18.5px; }
  .dj-kart p { font-size: 14px; }
  .dj-kart-butonlar { flex-direction: column; align-self: stretch; }
  .dj-kart-butonlar .dj-b { width: 100%; }
  .dj-cubuk-b-yazi span { display: none; }
  .dj-cubuk-b-yazi { padding: 0; width: 36px; }
  .dj-ipucu { font-size: 12.5px; }
  .dj-cta { padding: 18px; }
  .dj-cta-butonlar, .dj-cta-butonlar .dj-b { width: 100%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .dj-oyn { --ust-bosluk: 150px; }
  .dj-kart { padding: 16px; gap: 6px; }
  .dj-kart-ikon { display: none; }
}