/* Tam ekran görselleştirme (tam-ekran.js) */
html.te-acik, html.te-acik body { overflow: hidden; }

#tam-ekran {
  position: fixed; inset: 0; z-index: 80;
  background: radial-gradient(120% 90% at 50% 46%, #1E1733 0%, #110C1F 55%, #07050D 100%);
  color: var(--yazi); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: max(16px, env(safe-area-inset-top)) var(--kenar) max(20px, env(safe-area-inset-bottom));
  --te-karart: 0;
}
#tam-ekran[hidden] { display: none; }
#tam-ekran canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* uyku için karartma: görüntünün ve denetimlerin üstünde, dokunuşu engellemez */
.te-karart { position: absolute; inset: 0; background: #000; opacity: var(--te-karart); pointer-events: none; z-index: 2; transition: opacity .6s ease; }

.te-ust, .te-alt { position: relative; z-index: 3; transition: opacity .5s ease, transform .5s ease; }
.te-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; grid-row: 1; }
.te-alt { grid-row: 3; display: grid; justify-items: center; gap: 18px; }

.te-modlar { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(13, 9, 25, .55); border: 1px solid var(--cizgi); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.te-modlar button { border: 0; background: transparent; color: var(--yazi-2); font: 500 var(--t-xs) var(--f-arayuz); padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.te-modlar button:hover { color: var(--yazi); }
.te-modlar button[aria-checked="true"] { background: var(--ay); color: var(--zemin-derin); }

.te-kapat { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cizgi); background: rgba(13, 9, 25, .55); color: var(--yazi); display: grid; place-items: center; cursor: pointer; flex: none; }
.te-kapat svg { width: 20px; height: 20px; }
.te-kapat:hover { border-color: var(--yazi-2); }

.te-bilgi { text-align: center; display: grid; gap: 4px; max-width: min(560px, 100%); }
.te-ad { font: 600 var(--t-l) var(--f-baslik); letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
.te-tarif { font-size: var(--t-xs); color: var(--yazi-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.te-dugmeler { display: flex; align-items: center; gap: clamp(14px, 5vw, 36px); }
.te-cal { --boy: 72px; }
.te-d { display: grid; justify-items: center; gap: 4px; min-width: 76px; border: 0; background: transparent; color: var(--yazi-2); font: 500 var(--t-xs) var(--f-arayuz); cursor: pointer; padding: 6px; border-radius: var(--r-s); }
.te-d svg { width: 22px; height: 22px; }
.te-d:hover, .te-d[aria-pressed="true"] { color: var(--yazi); }
.te-sure, .te-karart-s { color: var(--ay); font-variant-numeric: tabular-nums; min-height: 1em; font-size: .75rem; }

#tam-ekran :focus-visible { outline: 2px solid var(--ay); outline-offset: 3px; }

/* hareketsizken denetimler ve imleç kaybolur */
#tam-ekran.te-sakin { cursor: none; }
#tam-ekran.te-sakin .te-ust { opacity: 0; transform: translateY(-8px); pointer-events: none; }
#tam-ekran.te-sakin .te-alt { opacity: 0; transform: translateY(8px); pointer-events: none; }

@media (max-width: 420px) {
  .te-modlar button { padding: 8px 10px; }
  .te-d { min-width: 64px; }
  .te-cal { --boy: 64px; }
}
@media (prefers-reduced-motion: reduce) { .te-ust, .te-alt, .te-karart { transition: none; } }

/* sayfadaki animasyonun köşesindeki düğme */
.te-kose { position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--cizgi); background: rgba(13, 9, 25, .5); color: var(--yazi-2); font: 500 var(--t-xs) var(--f-arayuz); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.te-kose svg { width: 16px; height: 16px; }
.te-kose:hover { color: var(--yazi); border-color: var(--cizgi-guclu); }
@media (max-width: 600px) { .te-kose span { display: none; } .te-kose { padding: 0; width: 34px; justify-content: center; } }
html.te-acik .iz-tuval { display: none; }