/* Aniflover oynatıcı arayüzü. */

:root { --af-gecen: #e50914; }

.af {
  position: absolute; inset: 0;
  background: #000; border-radius: 12px; overflow: hidden;
  outline: none; user-select: none; font-size: 13px;
}
.af:focus-visible { box-shadow: 0 0 0 2px var(--vurgu); }
.af-video {
  width: 100%; height: 100%; display: block; background: #000;
  object-fit: contain;
}

/* Fare durunca kontroller kaybolsun; duraklatınca her zaman görünür. */
.af-uyku .af-kontrol, .af-uyku .af-filigran { opacity: 0; pointer-events: none; }
.af-uyku { cursor: none; }

/* -------------------------------- kapak -------------------------------- */

/* Bölüm açıldığında ekran bomboş siyah kalmasın: markalı bir karşılama ekranı.
 * İlk oynatmadan sonra bir daha çıkmaz; duraklatınca yalnızca oynat düğmesi
 * görünür, tam ekran kapak her duraklamada fazla ağır kalıyordu. */
.af-kapak {
  position: absolute; inset: 0; z-index: 4; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; cursor: pointer; text-align: center; padding: 24px;
}
.af-hazir .af-kapak, .af-duruyor .af-kapak { display: flex; }
.af-duruyor:not(.af-hazir) .af-kapak {
  background: transparent;
}

/* Poster dikey ve kart boyutunda; 16:9 alana gerdirilince blok blok görünüyor.
 * Güçlü bulanıklık onu okunur bir renk dokusuna çevirip metni öne alıyor. */
.af-kapak-arka {
  position: absolute; inset: -8%; background-size: cover; background-position: center;
  filter: blur(26px) brightness(.5) saturate(1.15); transform: scale(1.1);
}
.af-kapak-perde {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(6, 6, 10, .35), rgba(4, 4, 7, .88)),
    linear-gradient(180deg, rgba(4, 4, 7, .5), rgba(4, 4, 7, .2) 45%, rgba(4, 4, 7, .8));
}
.af-duruyor:not(.af-hazir) .af-kapak-arka,
.af-duruyor:not(.af-hazir) .af-kapak-perde { display: none; }

.af-kapak-yazi {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 9px; pointer-events: none;
  max-width: 640px;
}
.af-duruyor:not(.af-hazir) .af-kapak-yazi { display: none; }
.af-kapak-marka { display: flex; align-items: center; gap: 8px; opacity: .96; }
.af-kapak-marka img { display: block; }
.af-kapak-marka i {
  font-style: normal; font-size: 13px; font-weight: 800; letter-spacing: .18em;
  color: #fff;
}
.af-kapak-marka b { color: var(--vurgu); font-weight: 800; }
.af-kapak-baslik {
  color: #fff; font-size: 27px; font-weight: 750; line-height: 1.2;
  letter-spacing: -.01em; text-shadow: 0 3px 18px #000c;
}
.af-kapak-alt {
  color: #cfcfdd; font-size: 13.5px; letter-spacing: .01em;
  text-shadow: 0 2px 10px #000a;
}
.af-kapak-devam {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(216, 31, 38, .14); border: 1px solid rgba(216, 31, 38, .38);
  color: #ffd9da; font-size: 12.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.af-kapak-devam[hidden] { display: none; }
.af-kapak-devam svg { width: 14px; height: 14px; fill: var(--vurgu); }

.af-filigran {
  position: absolute; right: 14px; bottom: 58px; z-index: 3;
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  color: #ffffffb0; text-shadow: 0 1px 6px #000b;
  pointer-events: none; transition: opacity .25s;
}
.af-filigran b { color: var(--vurgu); font-weight: 700; }

/* --------------------------- orta oynat düğmesi ------------------------ */

.af-buyuk-oynat {
  position: relative; z-index: 1;
  width: 74px; height: 74px; border-radius: 50%; cursor: pointer;
  border: 1px solid #ffffff2b; background: #0000009e; backdrop-filter: blur(6px);
  display: grid; place-items: center;
  box-shadow: 0 10px 34px #0009;
  transition: transform .15s, background .15s, border-color .15s;
}
.af-buyuk-oynat:hover {
  transform: scale(1.06); background: var(--vurgu); border-color: var(--vurgu);
}
.af-buyuk-oynat svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }

/* Yükleme ekranı iki farklı anı karşılıyor.

   Kaynak ilk kez bağlanırken arkada gösterilecek bir görüntü yok; katman düz
   siyah olmalı, yarı saydam olursa poster ve kontroller sızıp bekleme anı
   dağınık görünüyor.

   Oynarken tamponlama olduğunda ya da çubukta ileri sarıldığında ise video
   karesi zaten ekranda duruyor. Orada düz siyaha geçmek görüntüyü boş yere
   yok ediyordu; `hafif` katman sahneyi görünür bırakıp yalnız hafifçe
   karartıyor. */
.af-yukleniyor {
  position: absolute; inset: 0; z-index: 8; display: none;
  place-content: center; justify-items: center; gap: 16px;
  background: #000;
  transition: background .18s ease;
}
.af-yukleniyor.acik { display: grid; }
.af-yukleniyor.hafif {
  background: radial-gradient(42% 52% at 50% 46%,
              rgba(0, 0, 0, .62), rgba(0, 0, 0, .26) 72%, rgba(0, 0, 0, .12));
}
/* Karartma azalınca yazı ve halka aydınlık sahnede kaybolmasın. */
.af-yukleniyor.hafif .af-yukleniyor-yazi { display: none; }
.af-yukleniyor.hafif .af-donen { border-color: #ffffff2e; border-top-color: var(--vurgu); }
/* Marka simgesi dönen halkanın tam ortasında durur. */
.af-yukleniyor-im {
  grid-area: 1 / 1; align-self: center; justify-self: center;
  filter: drop-shadow(0 4px 16px rgba(216, 31, 38, .45));
}
.af-donen {
  grid-area: 1 / 1; width: 78px; height: 78px; border-radius: 50%;
  border: 2px solid #ffffff14; border-top-color: var(--vurgu);
  animation: don .9s linear infinite;
}
.af-yukleniyor-yazi {
  grid-area: 2 / 1;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #8b8b95;
}

/* ------------------------------ kontroller ----------------------------- */

/* Kontrol zemini yalnız okunurluk için var. Eskiden yüksekliğin yarısına kadar
   uzanan koyu bir geçişti; duraklatınca kontroller kalıcı olduğu için ekranın
   altında geniş bir siyah bant gibi duruyordu. */
.af-kontrol {
  position: absolute; inset: auto 0 0 0; z-index: 12; padding: 0 14px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72) 78%);
  transition: opacity .25s;
}

.af-cubuk {
  position: relative; height: 16px; cursor: pointer;
  display: flex; align-items: center;
}
.af-cubuk::before {
  content: ""; position: absolute; left: 0; right: 0; height: 4px;
  background: #ffffff2e; border-radius: 3px; transition: height .12s;
}
.af-cubuk:hover::before { height: 6px; }
.af-tampon, .af-gecen {
  position: absolute; left: 0; height: 4px; border-radius: 3px;
  transition: height .12s;
}
.af-cubuk:hover .af-tampon, .af-cubuk:hover .af-gecen { height: 6px; }
.af-tampon { background: #ffffff40; width: 0; }
.af-gecen { background: var(--af-gecen); width: 0; }
.af-tutamac {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%) scale(0);
  width: 12px; height: 12px; border-radius: 50%; background: var(--af-gecen);
  transition: transform .12s;
}
/* Sürükleme sırasında tutamaç sabit kalsın; kullanıcı bıraktığı yeri görsün. */
.af-cubuk.af-suruklu .af-tutamac { transform: translateY(-50%) scale(1.15); }
.af-cubuk:hover .af-tutamac { transform: translateY(-50%) scale(1); }
/* --------------------------- sahne önizlemesi --------------------------- */

/* Balon çubuğun belirgin biçimde üstünde durur: imleçle aynı hizada olunca
 * hem farenin altında kalıyor hem de hangi ana baktığı okunmuyordu. */
.af-onizleme {
  position: absolute; bottom: 76px; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; z-index: 6;
}
.af-onizleme.acik { display: flex; }
.af-onizleme-tuval {
  width: 176px; height: 99px; border-radius: 10px; background: #05050a;
  border: 1px solid #ffffff2b; box-shadow: 0 12px 30px #000b;
  display: none;
}
.af-onizleme.af-kareli .af-onizleme-tuval { display: block; }
.af-onizleme-zaman {
  background: #08080ee6; color: #fff; padding: 5px 10px; border-radius: 7px;
  border: 1px solid #ffffff1f; box-shadow: 0 6px 18px #0009;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.af-satir { display: flex; align-items: center; gap: 4px; padding-top: 2px; }
.af-bosluk { flex: 1; }

.af-dugme {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
  appearance: none; -webkit-appearance: none;
  color: #fff; transition: background .15s;
}
.af-dugme:hover { background: #ffffff1f; }
.af-dugme svg { width: 21px; height: 21px; fill: #fff; }
.af-dugme[hidden] { display: none !important; }
.af-cc.kapali { opacity: .45; }
.af-dugme.af-cc svg,
.af-dugme.af-cc-boy svg { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.player-kutu.mini .af-cc,
.player-kutu.mini .af-cc-boy-kutu { display: none; }

.af .JASSUB {
  position: absolute !important; inset: 0 !important;
  pointer-events: none; z-index: 3 !important;
}
.af .JASSUB canvas { display: block; pointer-events: none; }

.af-altyazi {
  position: absolute; left: 8%; right: 8%; bottom: 78px; z-index: 3;
  text-align: center; color: #fff;
  font-size: clamp(14px, calc(2.35vw * var(--af-altyazi-boy, 100) / 100), 42px);
  font-weight: 700; line-height: 1.35;
  white-space: pre-wrap; pointer-events: none;
  text-shadow:
    0 0 4px #000, 0 1px 2px #000, 1px 0 2px #000, -1px 0 2px #000,
    0 -1px 2px #000;
}
.af-uyku .af-altyazi { bottom: 28px; }
.af-metin { width: auto; padding: 0 11px; font-size: 12.5px; font-weight: 600; }

.af-ses-kutu { display: flex; align-items: center; }
.af-ses {
  width: 0; opacity: 0; transition: width .18s, opacity .18s;
  accent-color: var(--vurgu); cursor: pointer;
}
.af-ses-kutu:hover .af-ses, .af-ses:focus { width: 78px; opacity: 1; margin: 0 6px; }

.af-zaman {
  color: #dcdce8; font-variant-numeric: tabular-nums;
  font-size: 12.5px; margin-left: 8px; white-space: nowrap;
}

/* -------------------------------- menüler ------------------------------ */

.af-menu-kutu { position: relative; }
.af-menu {
  position: absolute; bottom: 44px; right: 0; z-index: 13; display: none;
  min-width: 132px; padding: 6px; border-radius: 10px;
  background: #12121a; border: 1px solid var(--kenar);
}
.af-menu.acik { display: block; }
.af-menu button {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; font-size: 12.5px;
  background: transparent; color: #d2d2de;
}
.af-menu button:hover { background: #ffffff14; }
.af-menu button.aktif { background: var(--vurgu); color: #fff; }
.af-menu small { opacity: .7; }

/* ------------------------------ ayar menüsü ----------------------------- */

.af-cc-boy-menu { min-width: 220px; }
.af-ayar-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: #d2d2de;
  cursor: pointer;
}
.af-ayar-satir:hover { background: #ffffff10; }
.af-ayar-satir input[type="checkbox"] { accent-color: var(--vurgu); cursor: pointer; }
.af-ayar-kaydirak input { width: 104px; accent-color: var(--vurgu); cursor: pointer; }
.af-ayar-sifirla {
  margin-top: 4px; border-top: 1px solid var(--kenar); border-radius: 0 0 7px 7px;
}

/* ------------------------------ bilgi balonu ---------------------------- */

.af-bilgi {
  position: absolute; left: 16px; top: 16px; z-index: 6;
  padding: 8px 13px; border-radius: 9px; font-size: 12.5px; color: #eaeaf2;
  background: #0b0b12d9; border: 1px solid var(--kenar); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.af-bilgi.acik { opacity: 1; transform: none; }

/* ------------------------------ embed kutusu ---------------------------- */

.af-embed { position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 12px; overflow: hidden; }
.af-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.af-embed-not {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 10px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
  background: var(--panel); border: 1px solid var(--kenar); color: var(--soluk);
}
.af-embed-not b { color: #c9c9d6; font-weight: 600; }
.af-embed-dis {
  flex: none; padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  background: #ffffff10; border: 1px solid var(--kenar);
  color: #d6d6e2; text-decoration: none; font-weight: 600;
}
.af-embed-dis:hover { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }

@media (max-width: 620px) {
  .af-ses-kutu, .af-hiz-kutu { display: none; }
  .af-zaman { font-size: 11.5px; margin-left: 4px; }
  /* Dokunma hedefleri parmakla ıskalanmayacak kadar büyük olmalı. */
  .af-dugme { width: 40px; height: 40px; }
  .af-satir { gap: 0; }
  .af-kontrol { padding: 0 6px 8px; }
  .af-cubuk { height: 22px; }
  .af-kapak-baslik { font-size: 20px; }
  .af-kapak-alt { font-size: 12px; }
  .af-buyuk-oynat { width: 62px; height: 62px; }
  .af-menu { min-width: 120px; bottom: 48px; }
  .af-ayar-menu { min-width: 190px; }
  .af-filigran { bottom: 62px; right: 10px; font-size: 11px; }
  /* Önizleme balonu dar ekranda kutudan taşıyordu. */
  .af-onizleme { transform: scale(.78); transform-origin: bottom center; }
}

/* Dokunmatikte kontroller fareyle "uyandırılamıyor"; ekrana dokununca
   görünür kalsınlar diye uyku modu devre dışı. */
@media (hover: none) {
  .af-uyku .af-kontrol { opacity: 1; pointer-events: auto; }
  .af-uyku { cursor: default; }
  .af-ses-kutu:focus-within .af-ses { width: 78px; opacity: 1; margin: 0 6px; }
  .player-kutu.mini .af-kontrol,
  .player-kutu.mini .mini-serit { opacity: 1; pointer-events: auto; }
}

/* Mini pencerede kontroller yalnız üzerine gelince. Video oynamaya devam eder. */
.player-kutu.mini:not(:hover):not(:focus-within) .af-kontrol,
.player-kutu.mini:not(:hover):not(:focus-within) .af-filigran {
  opacity: 0; pointer-events: none;
}
.player-kutu.mini:hover .af-uyku,
.player-kutu.mini:focus-within .af-uyku { cursor: pointer; }
.player-kutu.mini:hover .af-uyku .af-kontrol,
.player-kutu.mini:focus-within .af-uyku .af-kontrol {
  opacity: 1; pointer-events: auto;
}
.player-kutu.mini .af-onizleme { display: none; }
.player-kutu.mini .af-hiz-kutu,
.player-kutu.mini .af-kalite-kutu,
.player-kutu.mini .af-ayar-kutu { display: none; }
.player-kutu.mini .af-kontrol { padding: 0 8px 8px; }
.player-kutu.mini .af-zaman { font-size: 11px; }