/* 🎬 Koçi Sinema — film listesi, film sayfası, oynatıcı, cümle/kelime akışı, test. Yalnız .fk-* sınıfları; mevcut Reels (.vd-*) stilleri yeniden kullanılır. */
.fk-liste, .fk-sayfa, .fk-test { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.fk-giris { margin: 0 2px; }
.fk-film { display: flex; gap: 12px; text-align: left; width: 100%; padding: 10px; border: 1px solid var(--line, #e6dfd2); border-radius: 16px; background: var(--card, #fff); color: var(--ink, #23201b); font: inherit; cursor: pointer; }
.fk-film:active { transform: scale(.985); }
.fk-kapak { flex: none; width: 92px; aspect-ratio: 9 / 16; border-radius: 12px; background: #1c2833 center / cover no-repeat; display: grid; place-items: center; color: #fff; }
.fk-kapak.kucuk { width: 64px; margin: 0 auto 8px; }
.fk-sayfa > .fk-kapak { width: 100%; aspect-ratio: 16 / 9; }
.fk-kapak-yok { background: linear-gradient(160deg, #22313f, #3b2a47 60%, #5a2f3a); }
.fk-kapak-yok b { font: 900 34px/1 system-ui, sans-serif; opacity: .85; letter-spacing: .04em; }
.fk-film-ic { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fk-film-ust { display: flex; align-items: center; gap: 8px; }
.fk-no { font: 900 13px/1 system-ui, sans-serif; color: var(--primary, #e0682f); letter-spacing: .05em; }
.fk-film h3, .fk-baslik h2 { margin: 0; font-size: 17px; line-height: 1.25; }
.fk-film p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted, #6b6558); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fk-film-alt { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.fk-etiket { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(120,110,90,.13); font: 700 11px/1.5 system-ui, sans-serif; color: var(--ink, #23201b); }
.fk-baslik { display: flex; flex-direction: column; gap: 6px; }
.fk-tanitim { margin: 0; line-height: 1.5; }
.fk-merak { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(224,104,47,.10); font-weight: 600; line-height: 1.45; }
.fk-not { margin: 0; font-size: 13px; color: var(--muted, #6b6558); }
.fk-dort { display: flex; flex-direction: column; gap: 10px; }
.fk-buyuk { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line, #e6dfd2); background: var(--card, #fff); color: var(--ink, #23201b); font: inherit; min-height: 64px; }
.fk-buyuk span { grid-row: 1 / 3; font-size: 28px; text-align: center; }
.fk-buyuk b { font-size: 16px; } .fk-buyuk small { color: var(--muted, #6b6558); font-size: 12.5px; }
.fk-buyuk.birinci { background: var(--primary, #e0682f); border-color: transparent; color: var(--koci-on-primary, #fff); } .fk-buyuk.birinci small { color: rgba(255,255,255,.85); }
.fk-buyuk.fk-kilitli { opacity: .55; }   /* NOT: ".kilit" adı style.css'te tam ekran kilit görünümü, kullanma */

/* oynatıcı */
.fk-oyna { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; }
.fk-cerceve { position: relative; flex: 1 1 auto; min-height: 0; max-height: 100%; border-radius: 18px; overflow: hidden; background: #0b151c; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.fk-cerceve { overflow-y: auto; }
.fk-cerceve > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b151c; }
.fk-alt { position: absolute; left: 0; right: 0; bottom: 56px; padding: 10px 16px; background: linear-gradient(transparent, rgba(0,0,0,.72)); text-align: center; }
.fk-konusan { margin: 0 0 4px; font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.fk-en { margin: 0; font: 800 19px/1.35 system-ui, sans-serif; } .fk-tr { margin: 4px 0 0; font: 600 15px/1.35 system-ui, sans-serif; opacity: .9; color: #ffd9a8; }
.fk-kontrol { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 8px; background: rgba(0,0,0,.55); }
.fk-kontrol button, .fk-ust-ayar button { min-width: 48px; min-height: 40px; padding: 0 12px; border: 2px solid rgba(255,255,255,.4); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font: 800 13px system-ui, sans-serif; }
.fk-kontrol button[aria-pressed="true"], .fk-ust-ayar button[aria-pressed="true"] { background: var(--primary, #e0682f); border-color: var(--primary, #e0682f); }
.fk-oynat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; }
.fk-giris-kart, .fk-anlatim, .fk-karar, .fk-secildi, .fk-son, .fk-senkart, .fk-hazir { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 22px 18px; text-align: center; }
.fk-giris-kart h2, .fk-son h2 { margin: 0; } .fk-giris-kart p, .fk-anlatim p, .fk-son p { margin: 0; line-height: 1.5; }
.fk-anlatim p { font-size: 18px; line-height: 1.55; font-weight: 600; }
.fk-karar h3 { margin: 0; font-size: 21px; line-height: 1.3; }
.fk-karar-etiket { margin: 0; font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.fk-secenekler { display: flex; flex-direction: column; gap: 10px; }
.fk-sec { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; text-align: left; font: inherit; min-height: 60px; }
.fk-sec b { font-size: 17px; } .fk-sec small { opacity: .8; font-size: 13px; }
.fk-en-buyuk { margin: 0; font: 800 22px/1.35 system-ui, sans-serif; } .fk-tr-buyuk { margin: 0; font: 600 16px/1.4 system-ui, sans-serif; color: #ffd9a8; }
.fk-hazir-ikon { font-size: 40px; }
.fk-hazir h3 { margin: 0; }
.fk-cerceve .btn.ghost, .fk-akis .btn.ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.fk-soyle-sonuc .fk-ovgu { margin: 0; font: 800 18px system-ui, sans-serif; }

/* cümle/kelime akışı */
.fk-serit { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.fk-kaynak { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--line, #e6dfd2); }
.fk-kaynak button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--ink, #23201b); font: 700 13px system-ui, sans-serif; }
.fk-kaynak button[aria-pressed="true"] { background: var(--primary, #e0682f); color: var(--koci-on-primary, #fff); }
.fk-chipler { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fk-chipler::-webkit-scrollbar { display: none; }
.fk-chipler button { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--line, #e6dfd2); border-radius: 999px; background: var(--card, #fff); color: var(--ink, #23201b); font: 700 12px system-ui, sans-serif; white-space: nowrap; }
.fk-chipler button[aria-pressed="true"] { background: var(--ink, #23201b); color: var(--card, #fff); border-color: transparent; }
.fk-akis .fk-kart { display: block; }
.fk-filmetiket { position: absolute; top: 12px; right: 12px; z-index: 3; max-width: 62%; padding: 4px 9px; border-radius: 9px; background: rgba(0,0,0,.6); color: #fff; font: 800 12px/1.3 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-ust-ayar { position: absolute; top: 48px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.fk-ust-ayar .hatali-soru { width: 48px; min-width: 48px; max-width: 48px; padding: 7px 3px; margin: 0; font-size: 11px; line-height: 1.25; text-decoration: none; background: rgba(0,0,0,.65); overflow-wrap: anywhere; }
.fk-ust-ayar .hatali-soru:disabled { color: #a7f3d0; }
.fk-altyazi { position: absolute; left: 12px; right: 64px; top: 46px; z-index: 2; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.42); text-align: left; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.85); pointer-events: none; }
.fk-ses { position: absolute; left: 50%; bottom: 46%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font: 700 13px system-ui, sans-serif; }
.fk-sik { display: flex; flex-direction: column; gap: 8px; }
.fk-sik button { border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 12px; padding: 12px 10px; font: 700 15px/1.3 system-ui, sans-serif; min-height: 48px; text-align: center; }
.fk-sec-etiket { display: block; margin-bottom: 3px; font: 600 11px/1.3 system-ui, sans-serif; }
.fk-sik button.dogru { background: #2e9e6a; border-color: #2e9e6a; } .fk-sik button.yanlis { background: #c83c32; border-color: #c83c32; } .fk-sik button:disabled { opacity: .92; }
.fk-bosluk { margin: 0 0 8px; text-align: center; font: 800 18px/1.4 system-ui, sans-serif; }
.fk-sonuc { margin-top: 6px; text-align: center; } .fk-dogru { margin-bottom: 2px; }
.fk-dogru { margin: 0 0 4px; font: 800 17px system-ui, sans-serif; } .fk-dogru.ok { color: #6fe2a9; } .fk-dogru.no { color: #ff9a92; }
.fk-acik { margin: 3px 0; font-size: 14px; line-height: 1.4; opacity: .95; } .fk-kelime { margin: 4px 0; font-size: 20px; }
.fk-eylem { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center; margin-top: 8px; } .fk-eylem .btn { flex: 1 1 0; min-width: 0; width: auto; margin: 0; padding: 9px 6px; font-size: 14px; white-space: nowrap; }
.fk-bos { display: grid; place-items: center; color: #fff; }
.fk-sinav { max-height: 62%; overflow-y: auto; }
.fk-test { padding: 4px 2px; } .fk-test .fk-sik button { background: var(--card, #fff); color: var(--ink, #23201b); border-color: var(--line, #e6dfd2); }
.fk-test .fk-sik button.dogru { background: #2e9e6a; color: #fff; } .fk-test .fk-sik button.yanlis { background: #c83c32; color: #fff; }
.fk-test-video { width: 100%; max-height: 26vh; border-radius: 12px; background: #0b151c; }
.fk-test h3 { margin: 0; } .fk-test .fk-acik { color: var(--ink, #23201b); }
.fk-skor { font: 900 44px/1 system-ui, sans-serif; margin: 6px 0; }
.fk-tekrar { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line, #e6dfd2); border-radius: 12px; background: var(--card, #fff); }
.fk-tekrar span { color: var(--muted, #6b6558); } .fk-tekrar small { opacity: .7; }

.fk-altyazi:not(:has(.fk-en:not([hidden]), .fk-tr:not([hidden]))) { display: none; }
.fk-altyazi .fk-tr-ac { pointer-events: auto; cursor: pointer; } .fk-tr-ipucu { margin: 3px 0 0; font: 600 11px/1.3 system-ui, sans-serif; opacity: .75; } .fk-en[hidden] ~ .fk-tr-ipucu { display: none; }
.fk-altyazi .fk-en { font-size: 16px; } .fk-altyazi .fk-tr { font-size: 14px; }

/* 🎬 Interactive Movies v2 (film2.js) */
.f2-kapak { background: linear-gradient(160deg, #1b2a24, #3a1d24 60%, #5a2f3a); }
.f2-kapak b { font-size: 46px; }
.f2-lobi, .f2-oda { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.f2-baslik { margin: 6px 2px 0; font: 800 13px/1.3 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6b6558); }
.f2-sec { display: flex; flex-direction: column; gap: 8px; } .f2-sec.ikili { flex-direction: row; } .f2-sec.ikili button { flex: 1; }
.f2-sec button { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line, #e6dfd2); background: var(--card, #fff); color: var(--ink, #23201b); font: inherit; }
.f2-sec button b { font-size: 16px; } .f2-sec button small { color: var(--muted, #6b6558); }
.f2-sec button[aria-pressed="true"] { border-color: var(--primary, #e0682f); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #e0682f) 25%, transparent); }
.f2-katil { display: flex; gap: 8px; } .f2-katil input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }
.f2-katil .btn { width: auto; margin: 0; }
.f2-kod { font: 900 44px/1.1 ui-monospace, Menlo, monospace; letter-spacing: .18em; text-align: center; margin: 6px 0 12px; }
.f2-oynatici { min-height: calc(100dvh - 200px); }
.f2-sayac { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .f2-sayac .btn { width: auto; margin: 0; flex-shrink: 0; white-space: nowrap; }
.f2-niyet { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.fk-sec.f2-secili { border-color: var(--primary, #e0682f); background: rgba(224,104,47,.2); }
.f2-telefon { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.f2-balon { max-width: 82%; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 2px; }
.f2-balon.ben { align-self: flex-end; background: rgba(224,104,47,.35); } .f2-balon small { opacity: .75; }
.f2-son h2 { font-size: 26px; }
/* Açık temada da okunur: oyun ekranları her temada koyu sinema zemini (beyaz yazı + seçenek düğmeleri koyu zemine göre) */
.f2-oda .fk-karar, .f2-oda .fk-hazir, .f2-oda .fk-son, .f2-oda .fk-senkart { background: #0b151c; color: #fff; border-radius: 18px; }
.f2-oda .fk-karar .muted, .f2-oda .fk-son .muted, .f2-oda .fk-hazir .muted { color: rgba(255,255,255,.72); }
.f2-oda .btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); }

/* İnteraktif film: replik geçişinde siyah olmasın — oynatıcının arkasında klibin ilk karesi, video oynayınca görünür */
video.fk-kapakli { transition:opacity .12s; }
video.fk-kapakli:not(.oynuyor) { opacity:0; }
.fk-cerceve { background-position:center; background-size:contain; background-repeat:no-repeat; }

/* 🎤 Sıra sende (film içinde oyuncunun repliği) */
.fk-sira-onceki { margin:0; font-size:13px; opacity:.8; text-align:left; background:rgba(255,255,255,.06); padding:8px 10px; border-radius:10px; }
.fk-sira-seviye { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.fk-sira-seviye button { border:1px solid rgba(255,255,255,.25); background:transparent; color:inherit; border-radius:999px; padding:5px 10px; font:700 12px system-ui,sans-serif; cursor:pointer; }
.fk-sira-seviye button[aria-pressed="true"] { background:#fff; color:#111; }
.fk-sira-hedef { letter-spacing:.02em; }
.fk-sira-gizli { font-size:15px; opacity:.85; }
.fk-sira-dugmeler { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.fk-sira-dugmeler .btn { width:auto; margin:0; }
.fk-sira-yaz { display:flex; gap:8px; }
.fk-sira-yaz input { flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:inherit; font-size:16px; }
.fk-sira-yaz .btn { width:auto; margin:0; }
.fk-sira-ovgu { margin:0; font-weight:800; font-size:17px; }
.fk-sira-ovgu.harika { color:#7ee2a8; } .fk-sira-ovgu.iyi { color:#ffd166; } .fk-sira-ovgu.tekrar { color:#ff9f8f; }
.fk-sira-kelimeler { margin:4px 0 0; } .fk-sira-kelimeler .ok { color:#7ee2a8; } .fk-sira-kelimeler .zayif { color:#ffd166; } .fk-sira-kelimeler .eksik { color:#ff9f8f; text-decoration:line-through; }
.fk-sira-not { margin:4px 0 0; font-size:13px; opacity:.8; } .fk-sira-uyari { margin:0; color:#ffd166; font-size:14px; }
/* Küçük iPhone: uzun Sıra sende kartı üstten kesilmesin (ortalanmış flex taşması) */
.fk-cerceve:has(.fk-sira) { justify-content:flex-start; }
.fk-sira { margin-block:auto; }
/* 🎬 Film XP (28 Eyl) */
.fk-son .fk-xp { align-self: center; background: #ffd23f; color: #3a2a00; font-weight: 800; border-radius: 999px; padding: 6px 14px; }
.fk-xp-rozet { margin-left: 6px; font-weight: 800; color: #b37a00; white-space: nowrap; }