/*
* UI PREVIEW — tasdiqlanmagan dizayn o'zgarishlari.
*
* Faqat APP_UI_PREVIEW=true (v2 klonida) va brauzerda ?preview=1 bilan
* yuklanadi; ?preview=0 o'chiradi. Oddiy tashrifchiga bu fayl umuman kelmaydi.
* Tasdiqlangan qoidalar app.css ga ko'chiriladi va shu yerdan o'chiriladi.
*
* Qatlamsiz (unlayered) CSS — Tailwind utility'laridan (@layer) ustun turadi,
* shuning uchun !important kerak emas.
*/
/* ---------------------------------------------------------------------------
* PREVIEW 1 — brend accent va mayda UX tuzatishlari
* ------------------------------------------------------------------------- */
:root {
/* Logo'dagi "net" belgisidan olingan yashil — faqat FON sifatida (tugma, belgi); ustidagi matn --brand-foreground.
Oq fonda chiziq/nuqta/fokus uchun juda och (1.6:1) — ular uchun --fk-focus / --fk-active-ic. */
--brand: #88e000;
/* yorug' temada hover to'qroq (lime-500), qorong'ida ochroq — pastdagi .dark */
--brand-hover: #84cc16;
/* Yashil ustidagi matn: kontrast ~11:1 (hover'da ~9:1) */
--brand-foreground: #0e1600;
}
.dark {
--brand-hover: #9bf01a;
}
/* 1. Asosiy harakat — "Tomosha qilish", "Qismlar", "Qidirish".
Loyihada bg-primary faqat shu tugmalarda ishlatiladi. */
.bg-primary {
background-color: var(--brand);
color: var(--brand-foreground);
}
.bg-primary:hover {
background-color: var(--brand-hover);
}
.text-primary-foreground.bg-primary {
color: var(--brand-foreground);
}
/* Qidiruv — ikkinchi darajali harakat, avvalgidek neytral qoladi: yashil faqat
"tomosha" harakatiga ajratilgan, aks holda birinchi ekranda ikkita yashil
tugma bir-biri bilan raqobatlashadi. */
form[data-ac-form] .bg-primary,
form[data-ac-form] .bg-primary:hover {
background-color: var(--primary);
color: var(--primary-foreground);
}
/* Faol qism — boshqa yashil (green-600) o'rniga brend rangi */
.active-episode {
border-color: color-mix(in oklch, var(--brand) 55%, transparent);
background-color: color-mix(in oklch, var(--brand) 10%, transparent);
}
.active-episode .bg-green-600 {
background-color: var(--brand);
color: var(--brand-foreground);
}
/* Klaviatura fokusi aniq ko'rinsin */
:focus-visible {
outline: 2px solid var(--fk-focus);
outline-offset: 2px;
}
/* 2. Touch qurilmada karusel o'qlari posterlar ustida turardi — u yerda
barmoq bilan surish tabiiy, o'qlar faqat kontentni yopadi. */
@media (hover: none) and (pointer: coarse) {
.banner-prev, .banner-next,
.movie-prev, .movie-next,
.serial-prev, .serial-next,
.hind-prev, .hind-next,
.coming-prev, .coming-next,
.actor-prev, .actor-next {
display: none;
}
}
/* 3. Tavsif bloki (film / serial / qism): mobilda 12px kulrang zich matn edi */
.movie-description .desc-content p {
font-size: 0.875rem;
line-height: 1.7;
color: color-mix(in oklch, var(--foreground) 80%, transparent);
max-width: 72ch;
}
/* 4. Xira meta matn (Top-5 ro'yxati va h.k.) — kontrast 3.9 → AA */
.text-muted-foreground\/70 {
color: var(--muted-foreground);
}
/* ---------------------------------------------------------------------------
* PREVIEW 2 — B+D header: qidiruv markazda + katalog menyusi
* Markup: resources/views/frontend/inc/header-bd.blade.php
* Qoida: border va glass (blur) yo'q — ajratish fon toni va bo'shliq orqali.
* ------------------------------------------------------------------------- */
/* Yorug' tema palitrasi (2026-09-17): standart neytral shkala (Tailwind zinc) + brend uchun lime shkalasi,
hamma matn juftligi WCAG AA (≥4.5:1), ikonka/chiziq/fokus ≥3:1. Avvalgi yashilga moyil kulranglar
(#eff0ee, #e5e7e4) va #f6f6f7 sahifa foni ustida plitkalar deyarli ko'rinmasdi (1.06:1).
sahifa / header / panel #ffffff
plitka (fill) #f4f4f5 zinc-100 hover (fill-2) #e4e4e7 zinc-200
matn (ink) #18181b zinc-900 17.7:1
ikkinchi matn (soft) #3f3f46 zinc-700 10.4:1
xira matn (muted) #52525b zinc-600 7.7:1 oqda, 7.0:1 plitkada, 6.1:1 hover'da
faol fon / matn / ikonka #ecfccb lime-100 / #3f6212 lime-800 (6.5:1) / #4d7c0f lime-700 (4.6:1)
fokus halqasi #4d7c0f lime-700 5.0:1 oqda (brend #88e000 oqda 1.6:1 — ko'rinmasdi)
footer #fafafa zinc-50 + yuqorida zinc-200 chiziq
Qorong'i tema o'zgarmagan. */
:root {
--fk-bar: #ffffff;
--fk-fill: #f4f4f5;
--fk-fill-2: #e4e4e7;
--fk-ink: #18181b;
--fk-muted: #52525b;
--fk-soft: #3f3f46;
--fk-active-bg: #ecfccb;
--fk-active-ink: #3f6212;
--fk-active-ic: #4d7c0f;
--fk-focus: #4d7c0f;
--fk-panel: #ffffff;
--fk-foot: #fafafa;
--fk-foot-line: #e4e4e7;
--fk-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
--fk-bar-shadow: 0 1px 0 #e4e4e7;
}
.dark {
--fk-bar: #0f1110;
--fk-fill: #1c1f1d;
--fk-fill-2: #252826;
--fk-ink: #eaebed;
--fk-muted: #a1a1aa;
--fk-soft: #d4d4d8;
--fk-active-bg: rgba(136, 224, 0, 0.12);
--fk-active-ink: #c6f57a;
--fk-active-ic: #88e000;
--fk-focus: #88e000;
--fk-panel: #1b1e1c;
--fk-foot: #0f1110;
--fk-foot-line: transparent;
--fk-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
--fk-bar-shadow: none;
}
/* Ikonkalar — CSS mask: rang currentColor dan (faol bo‘limda yashil). Nav ikonkalari
app.css dagi fi-home/fi-film/fi-serial/fi-multfilm bilan AYNAN bir xil URL. HTML’ga
har sahifada yozilmaydi — CSS bir marta yuklanib keshlanadi. */
.fki {
display: inline-block;
width: 20px;
height: 20px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--fki) center / contain no-repeat;
mask: var(--fki) center / contain no-repeat;
}
.fki.hidden { display: none; }
.fki-home { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22lucide lucide-house w-5 h-5%22 aria-hidden=%22true%22%3E%3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22%3E%3C/path%3E%3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22%3E%3C/path%3E%3C/svg%3E"); }
.fki-film { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22lucide lucide-clapperboard w-4 h-4 transition-colors text-blue-500 group-hover:text-current%22 aria-hidden=%22true%22%3E%3Cpath d=%22M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z%22%3E%3C/path%3E%3Cpath d=%22m6.2 5.3 3.1 3.9%22%3E%3C/path%3E%3Cpath d=%22m12.4 3.4 3.1 4%22%3E%3C/path%3E%3Cpath d=%22M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z%22%3E%3C/path%3E%3C/svg%3E"); }
.fki-serial { --fki: url("data:image/svg+xml,%3Csvg fill=%22none%22 height=%2264%22 viewBox=%220 0 28 28%22 width=%2264%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath clip-rule=%22evenodd%22 d=%22M20.33 8.2c.1.54.62.9 1.17.8a1 1 0 0 0 .82-1.15c-.31-1.73-.55-2.97-1.25-3.9a5.07 5.07 0 0 0-2.57-1.77c-.65-.2-1.3-.21-2.05-.14-.71.06-1.59.22-2.67.4l-5.28.92c-1.08.2-1.95.34-2.65.53-.72.18-1.33.42-1.87.82a5.01 5.01 0 0 0-1.8 2.53 5 5 0 0 0-.15 1.96c.06.7.2 1.53.4 2.55.09.55.62.91 1.17.82s.92-.62.82-1.16c-.19-1.06-.32-1.8-.37-2.38-.05-.58-.02-.92.07-1.2A3 3 0 0 1 5.2 6.31c.24-.18.57-.33 1.16-.49.61-.15 1.4-.3 2.54-.49l5.2-.9a35.6 35.6 0 0 1 2.54-.4c.62-.05.98-.02 1.27.06.61.19 1.15.56 1.54 1.07.35.46.54 1.16.88 3.04zm5.17 11.37.05-.28c.2-1.07.35-1.93.41-2.64.07-.73.06-1.38-.14-2.02a5.01 5.01 0 0 0-1.8-2.54 5.23 5.23 0 0 0-1.87-.82c-.7-.18-1.57-.33-2.65-.52l-5.28-.92a36.44 36.44 0 0 0-2.67-.4 5.26 5.26 0 0 0-2.05.13c-1.02.31-1.92.93-2.57 1.78a5.1 5.1 0 0 0-.83 1.85c-.18.69-.34 1.55-.53 2.62l-.05.28c-.19 1.07-.34 1.94-.4 2.64-.08.73-.06 1.39.13 2.03.32 1 .95 1.9 1.8 2.53.54.4 1.16.64 1.87.82.7.18 1.57.34 2.66.53l5.28.92c1.08.18 1.95.34 2.67.4.74.07 1.4.06 2.04-.14a5.07 5.07 0 0 0 2.57-1.77c.4-.54.64-1.15.83-1.85.19-.7.34-1.56.53-2.63zm-1.62-4.35c.09.28.12.64.06 1.24-.06.62-.2 1.4-.4 2.53l-.03.2c-.2 1.12-.34 1.9-.5 2.5-.16.59-.3.91-.49 1.15-.39.5-.93.88-1.54 1.07-.29.08-.65.11-1.26.06a35.6 35.6 0 0 1-2.55-.4l-5.2-.9c-1.13-.2-1.92-.34-2.53-.5-.6-.15-.93-.3-1.17-.48a3 3 0 0 1-1.08-1.52 3.16 3.16 0 0 1-.06-1.25c.06-.62.2-1.4.4-2.52l.03-.2c.2-1.12.34-1.9.5-2.5.16-.6.31-.92.5-1.15.38-.51.92-.88 1.53-1.07.29-.09.65-.12 1.27-.06s1.41.2 2.55.4l5.2.9c1.13.2 1.92.33 2.53.49.6.15.92.3 1.16.48a3 3 0 0 1 1.08 1.53zm-9.02-.65a.5.5 0 0 0-.83.28l-.87 5.1a.5.5 0 0 0 .68.55l4.43-1.79a.5.5 0 0 0 .16-.83z%22 fill=%22currentColor%22 fill-rule=%22evenodd%22%3E%3C/path%3E%3C/svg%3E"); }
.fki-play { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22 aria-hidden=%22true%22 data-slot=%22icon%22 class=%22size-6%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z%22 clip-rule=%22evenodd%22%3E%3C/path%3E%3C/svg%3E"); }
.fki-tg { --fki: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22utf-8%22%3F%3E%3C%21-- Uploaded to: SVG Repo%2C www.svgrepo.com%2C Generator: SVG Repo Mixer Tools --%3E%3Csvg width=%22800px%22 height=%22800px%22 viewBox=%220 0 48 48%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M41.4193 7.30899C41.4193 7.30899 45.3046 5.79399 44.9808 9.47328C44.8729 10.9883 43.9016 16.2908 43.1461 22.0262L40.5559 39.0159C40.5559 39.0159 40.3401 41.5048 38.3974 41.9377C36.4547 42.3705 33.5408 40.4227 33.0011 39.9898C32.5694 39.6652 24.9068 34.7955 22.2086 32.4148C21.4531 31.7655 20.5897 30.4669 22.3165 28.9519L33.6487 18.1305C34.9438 16.8319 36.2389 13.8019 30.8426 17.4812L15.7331 27.7616C15.7331 27.7616 14.0063 28.8437 10.7686 27.8698L3.75342 25.7055C3.75342 25.7055 1.16321 24.0823 5.58815 22.459C16.3807 17.3729 29.6555 12.1786 41.4193 7.30899Z%22 fill=%22%234d91cf%22/%3E%3C/svg%3E"); }
.fki-time { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22lucide lucide-clock h-6 w-6 lg:h-8 lg:w-8 text-foreground flex-shrink-0%22 aria-hidden=%22true%22%3E%3Cpath d=%22M12 6v6l4 2%22%3E%3C/path%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22%3E%3C/circle%3E%3C/svg%3E"); }
.fki-calendar { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22lucide lucide-calendar h-6 w-6 lg:h-8 lg:w-8 text-foreground flex-shrink-0%22 aria-hidden=%22true%22%3E%3Cpath d=%22M8 2v4%22%3E%3C/path%3E%3Cpath d=%22M16 2v4%22%3E%3C/path%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22%3E%3C/rect%3E%3Cpath d=%22M3 10h18%22%3E%3C/path%3E%3C/svg%3E"); }
.fki-multfilm { --fki: url("data:image/svg+xml,%3Csvg fill=%22none%22 height=%2264%22 viewBox=%220 0 28 28%22 width=%2264%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath clip-rule=%22evenodd%22 d=%22M7.52 14.41A3 3 0 0 1 10.46 12h2.94c.56 0 .84 0 1.05-.1a1 1 0 0 0 .44-.45c.11-.21.11-.49.11-1.05v-.9a5.5 5.5 0 0 1 9.7-3.55c.54.64.3.99-.7 1.05v4.25c0 .41-.34.75-.75.75h-.13c-.34 0-.57 0-.97-.36L22 11.5l-1.43-1.2a7.64 7.64 0 0 1-.07-.04c-.13-.1-.18-.14-.3-.1-.13.06-.2.53-.2.76a.53.53 0 0 0 0 .08l1.63 9c.05.28.07.42.15.51.08.11.21.19.35.2.12.01.24-.04.49-.13l.01-.01a1 1 0 0 1 1.3.57 1 1 0 0 1-.57 1.3h-.01a19.47 19.47 0 0 1-3.14.94l-.89.18c-1.65.3-3.42.44-5.32.44a30.05 30.05 0 0 1-6.79-.76 21.2 21.2 0 0 1-2.56-.8h-.01a1 1 0 1 1 .74-1.86c.27.1.4.15.54.14a.51.51 0 0 0 .3-.17c.1-.1.12-.25.18-.55zm-2.86 4.1.9-4.5a5 5 0 0 1 4.9-4.01H13v-.5a7.5 7.5 0 0 1 13.22-4.84c.22.25.5.63.65 1.12A2.35 2.35 0 0 1 26 8.42v2.83A2.75 2.75 0 0 1 23.25 14h-.17c-.1 0-.28 0-.5-.03l.81 4.56a3 3 0 0 1 .7 5.76C21.13 25.45 17.75 26 14 26s-7.13-.55-10.1-1.7a3 3 0 0 1 .76-5.78zM9 21.3c0 .1 0 .15.03.2l.09.1.2.05c1.44.24 3 .36 4.67.36 1.78 0 3.44-.14 4.97-.41L19 21a5 5 0 1 0-10 .3zm7.77-1.42a3 3 0 0 0-5.56 0 28.63 28.63 0 0 0 5.56 0z%22 fill=%22currentColor%22 fill-rule=%22evenodd%22%3E%3C/path%3E%3C/svg%3E"); }
.fki-collection { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10%22/%3E%3C/svg%3E"); }
.fki-search { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 21l-4.35-4.35m1.15-5.4a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z%22/%3E%3C/svg%3E"); }
.fki-bell { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9%22/%3E%3C/svg%3E"); }
.fki-sun { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 4V2m0 20v-2m8-8h2M2 12h2m15.364-7.364l1.414-1.414M4.222 19.778l1.414-1.414m0-12.728L4.222 4.222M19.778 19.778l-1.414-1.414M12 8a4 4 0 100 8 4 4 0 000-8z%22/%3E%3C/svg%3E"); }
.fki-moon { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12.79A9 9 0 1111.21 3a7 7 0 0010.08 9.79z%22/%3E%3C/svg%3E"); }
.fki-menu { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6h16M4 12h16M4 18h16%22/%3E%3C/svg%3E"); }
.fki-close { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 18L18 6M6 6l12 12%22/%3E%3C/svg%3E"); }
.fki-down { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E"); }
.fki-right { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 6 6 6-6 6%22/%3E%3C/svg%3E"); }
.fki-back { --fki: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 6l-6 6 6 6%22/%3E%3C/svg%3E"); }
/* --- header karkasi --- */
.fkh {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 70;
background: var(--fk-bar);
color: var(--fk-ink);
box-shadow: var(--fk-bar-shadow);
}
.fkh__top {
max-width: 1280px;
height: 64px;
margin-inline: auto;
padding-inline: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.fkh__logo { display: flex; align-items: center; flex-shrink: 0; }
.fkh__logo img { width: 132px; height: 38px; object-fit: contain; object-position: left center; }
/* Yorug' tema: logoning yorug' varianti (asl logo: oq qismlari #18181b; yashil #8ce000 → #529400 — oq fonda asl
lime 1.6:1 bo'lib "ee" ko'rinmasdi, endi 3.75:1). "net" va ▶ kesigi asl logodagidek shaffof — sahifa foni
ko'rinadi, ya'ni yashil ustida oq "net" (v2 da to'q matn yashilga yaxshi tushmasdi — foydalanuvchi). Avval
filter bilan butunlay qora qilinardi. Fayl nomi versiyali: rasmlar 1 yil immutable keshlanadi. Asl ![]()
joyida qoladi (o'lcham, alt):
uning rasmi quti tashqarisiga suriladi (kesiladi), o'rniga fon. Logo nisbati 519:100 — hamma o'lchamda
kenglikni to'ldiradi, shuning uchun center = left center. logo-light-v3.webp (6 KB) faqat yorug' temada
yuklanadi; qorong'i tema (standart, Googlebot ham) hech narsa yuklamaydi. Footer logosi ham shu qoida. */
html:not(.dark) .fkh__logo img,
html:not(.dark) .fkfoot__logo img { object-position: -99999px 0; background: url("/frontend/images/logo-light-v3.webp") center / contain no-repeat; }
.fkh__grow { flex: 1; min-width: 0; }
/* qidiruv — chegara yo'q, fon bilan ajraladi */
.fkh__search {
position: relative;
flex: 1;
min-width: 0;
height: 44px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 5px 0 14px;
border-radius: 12px;
background: var(--fk-fill);
color: var(--fk-muted);
transition: background-color 0.15s, box-shadow 0.15s;
}
.fkh__search:focus-within {
background: var(--fk-fill-2);
box-shadow: 0 0 0 2px rgba(136, 224, 0, 0.55);
}
/* yorug' temada och yashil halqa oq fonda ko'rinmasdi — fokus rangi (lime-700) */
html:not(.dark) .fkh__search:focus-within { box-shadow: 0 0 0 2px var(--fk-focus); }
.fkh__search input {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--fk-ink);
font: inherit;
font-size: 14px;
}
.fkh__search input::placeholder { color: var(--fk-muted); opacity: 1; }
.fkh__search input:focus-visible { outline: 0; }
.fkh__submit {
flex-shrink: 0;
height: 34px;
padding: 0 16px;
border: 0;
border-radius: 9px;
background: var(--fk-fill-2);
color: var(--fk-ink);
font: 600 13px/1 var(--font-sans);
cursor: pointer;
}
.fkh__submit:hover { filter: brightness(1.15); }
.fkh__actions { display: flex; align-items: center; gap: 4px; }
.fkh__icon {
position: relative;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--fk-muted);
cursor: pointer;
flex-shrink: 0;
}
.fkh__icon:hover { background: var(--fk-fill); color: var(--fk-ink); }
/* --- desktop: chapda logo + bo'limlar, o'ngda qidiruv + ikonkalar; o'rtada bo'sh joy --- */
.fkh--d .fkh__top { height: 60px; gap: 8px; }
.fkh--d .fkh__logo { margin-right: 20px; }
.fkh--d .fkh__logo img { width: 124px; height: 36px; }
.fkh--d .fkh__nav { margin-right: auto; }
.fkh--d .fkh__search {
flex: 0 1 360px;
min-width: 200px;
height: 40px;
padding: 0 8px 0 12px;
gap: 8px;
border-radius: 10px;
}
.fkh--d .fkh__search-ic { width: 16px; height: 16px; }
/* Enter yuboradi; ko'rinadigan tugma ortiqcha — screen reader uchun qoladi */
.fkh--d .fkh__submit {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.fkh__kbd {
flex-shrink: 0;
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: var(--fk-fill-2);
color: var(--fk-muted);
font: 500 11px/1 var(--font-sans);
}
.fkh__search:focus-within .fkh__kbd,
.fkh__search input:not(:placeholder-shown) ~ .fkh__kbd { display: none; }
.fkh--d .fkh__actions { gap: 2px; margin-left: 6px; }
.fkh--d .fkh__icon { width: 38px; height: 38px; }
.fkh--d .fkh__icon .fki { width: 18px; height: 18px; }
/* Telegram header'da (mobil va desktop): neytral ikonka, hover'da Telegram ko'ki; suzuvchi tugma preview'da
yashirin — kanal havolasi header'da doim ko'rinadi, telefonda footer matnini to'sardi (foydalanuvchi so'rovi) */
.fkh--d .fkh__tg:hover { color: #2aabee; }
html.fk-preview .tg-float { display: none; }
/* desktop: header va banner orasi qisqaroq (foydalanuvchi so'rovi) — 100px → 76px, oraliq ~49 → ~25px.
Faqat desktop UA (brending reklamasi faqat telefon/planshetda, uning bo'shlig'iga tegmaydi)
va banner bor sahifada, ro'yxat sahifalarida ham (listing/preview). */
@media (min-width: 1024px) {
html.fk-preview:has(.fkh--d):has(.fkhero) body > div.container,
html.fk-preview:has(.fkh--d):has(.fklist) body > div.container { margin-top: 76px; }
}
@media (min-width: 1024px) {
.fkh--d .fkh__burger { display: none; }
}
/* 1024–1180: menyu va qidiruv orasida bo'sh joy qolsin */
@media (min-width: 1024px) and (max-width: 1180px) {
.fkh--d .fkh__search { flex-basis: 280px; }
}
@media (max-width: 1023px) {
.fkh--d .fkh__nav { display: none; }
.fkh--d .fkh__logo { margin-right: 4px; }
.fkh--d .fkh__search { flex: 1 1 auto; max-width: 480px; margin-left: auto; }
}
/* bo'limlar: bir xil o'lcham, ikonka tepada, matn pastda; sokin faol holat */
.fkh__tabs { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fkh__tabs > li { position: relative; display: flex; }
.fkh__tab {
width: 64px;
height: 44px;
padding: 0 4px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 10px;
color: var(--fk-muted);
font-size: 11px;
letter-spacing: 0.01em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s, color 0.15s;
}
.fkh__tab .fki { width: 17px; height: 17px; }
/* serial/multfilm ikonkalari to'ldirilgan (fill) — chiziqli uy/film yonida og'ir ko'rinmasin */
.fkh__tab .fki-serial,
.fkh__tab .fki-multfilm { width: 16px; height: 16px; opacity: 0.92; }
.fkh__tab:hover,
.fkh__has-mega.is-open .fkh__tab { background: var(--fk-fill); color: var(--fk-ink); }
.fkh__tab.is-active { background: var(--fk-fill); color: var(--fk-ink); font-weight: 600; }
/* rang faqat bitta joyda: faol bo'lim ikonkasi */
.fkh__tab.is-active .fki { color: var(--fk-active-ic); }
/* katalog tugmasi — ko'rinmas, faqat klaviatura fokusida chiqadi (sichqonchada hover, touch'da 1-bosish) */
.fkh__chev {
position: absolute;
top: -4px;
right: -6px;
width: 22px;
height: 22px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: var(--fk-fill-2);
color: var(--fk-ink);
cursor: pointer;
opacity: 0;
pointer-events: none;
}
.fkh__chev:focus-visible { opacity: 1; pointer-events: auto; }
.fkh__chev .fki { width: 12px; height: 12px; }
.fkh__chev[aria-expanded="true"] .fki { transform: rotate(180deg); }
/* --- katalog paneli --- */
.fkh__megas { position: relative; max-width: 1280px; height: 0; margin-inline: auto; }
.fkh__mega {
position: absolute;
top: 6px;
left: 12px;
right: 12px;
padding: 24px 28px;
border-radius: 16px;
background: var(--fk-panel);
box-shadow: var(--fk-shadow);
display: grid;
grid-template-columns: 1.5fr 1.15fr 0.9fr 1fr;
gap: 36px;
}
.fkh__mega[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.fkh__mega:not([hidden]) { animation: fkh-in 0.16s ease-out; }
}
@keyframes fkh-in {
from { opacity: 0; transform: translateY(-4px); }
}
.fkh__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fkh__heading { padding-left: 10px; font-size: 13px; font-weight: 600; color: var(--fk-muted); }
.fkh__genres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.fkh__genres a,
.fkh__countries a {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding: 0 10px;
border-radius: 9px;
color: var(--fk-soft);
font-size: 14px;
text-decoration: none;
white-space: nowrap;
}
.fkh__genres a:hover,
.fkh__countries a:hover { background: var(--fk-fill); color: var(--fk-ink); }
.fkh__genres .freek-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.fkh__countries { display: flex; flex-direction: column; gap: 2px; }
.fkh__countries .flag { width: 22px; height: 16px; border-radius: 3px; }
.fkh__count { font-size: 12px; color: var(--fk-muted); font-variant-numeric: tabular-nums; }
.fkh__years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fkh__years a {
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: var(--fk-fill);
color: var(--fk-soft);
font-size: 14px;
font-variant-numeric: tabular-nums;
text-decoration: none;
}
.fkh__years a:hover { background: var(--fk-fill-2); color: var(--fk-ink); }
.fkh__quick { display: flex; flex-direction: column; gap: 6px; }
.fkh__quick a {
height: 46px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
border-radius: 10px;
background: var(--fk-fill);
color: var(--fk-ink);
font-size: 14px;
text-decoration: none;
}
.fkh__quick a .fki { width: 16px; height: 16px; color: var(--fk-muted); }
.fkh__quick a:hover { background: var(--fk-fill-2); }
.fkh__quick a.is-main { background: var(--fk-active-bg); color: var(--fk-active-ink); font-weight: 600; }
.fkh__quick a.is-main .fki { color: var(--fk-active-ic); }
/* --- mobil tepa bar ---
telefon: menyu | logo (aniq markazda) | qidiruv, Telegram
planshet (768+): menyu, logo | keng qidiruv maydoni | Telegram */
html.menu-open { overflow: hidden; }
.fkh--m .fkh__top {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
padding: 0 6px;
}
.fkh--m .fkh__menu-m { justify-self: start; }
.fkh--m .fkh__logo { justify-self: center; }
.fkh--m .fkh__logo img { width: 112px; height: 34px; object-position: center; }
.fkh__end { justify-self: end; display: flex; align-items: center; }
.fkh--m .fkh__icon { width: 44px; height: 44px; color: var(--fk-ink); }
.fkh--m .fkh__icon .fki { width: 22px; height: 22px; }
.fkh--m .fkh__tg .fki { width: 20px; height: 20px; }
/* qidiruv tugmasi: telefonda ikonka, planshetda maydon ko'rinishi */
.fkh__sbtn {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--fk-ink);
font: inherit;
cursor: pointer;
}
.fkh__sbtn .fki { width: 22px; height: 22px; }
.fkh__sbtn-text {
display: none;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.fkh__sbtn.is-query .fkh__sbtn-text { color: var(--fk-ink); }
@media (min-width: 768px) {
.fkh--m .fkh__top { display: flex; gap: 8px; padding: 0 6px 0 16px; }
/* o'ng guruh yoyiladi: qidiruv markazga, Telegram menyu yoniga */
.fkh__end { display: contents; }
.fkh--m .fkh__logo img { object-position: left center; }
.fkh--m .fkh__menu-m { order: -1; margin-right: 2px; }
.fkh__sbtn { order: 1; }
.fkh--m .fkh__tg { order: 2; }
.fkh__sbtn {
flex: 1;
width: auto;
max-width: 520px;
height: 42px;
margin-inline: auto;
padding: 0 14px;
justify-content: flex-start;
border-radius: 12px;
background: var(--fk-fill);
color: var(--fk-muted);
}
.fkh__sbtn .fki { width: 18px; height: 18px; }
.fkh__sbtn .fkh__sbtn-text { display: block; }
}
/* qidiruv natijalari sahifasi (telefon): so'rov qatori — bosilsa qidiruv oynasi */
.fk-vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.fksq {
width: 100%;
height: 48px;
margin: 4px 0 12px;
padding: 0 16px 0 14px;
display: flex;
align-items: center;
gap: 10px;
border: 0;
border-radius: 12px;
background: var(--fk-fill);
color: var(--fk-ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.fksq .fki { width: 18px; height: 18px; color: var(--fk-muted); flex-shrink: 0; }
.fksq__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.fksq__count { flex-shrink: 0; font-size: 13px; color: var(--fk-muted); }
@media (min-width: 768px) {
.fksq { display: none; }
}
/* mobil header doim ko'rinib turadi (scroll'da yashirish olib tashlandi — foydalanuvchi so'rovi) */
/* --- qidiruv oynasi (to'liq ekran) --- */
dialog.fks {
position: fixed;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--fk-bar);
color: var(--fk-ink);
overflow: hidden;
}
dialog.fks[open] { display: flex; flex-direction: column; }
dialog.fks::backdrop { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
dialog.fks[open] { animation: fks-in 0.18s ease-out; }
}
@keyframes fks-in {
from { opacity: 0; transform: translateY(8px); }
}
.fks__bar {
flex-shrink: 0;
height: 64px;
padding: 0 12px 0 4px;
display: flex;
align-items: center;
gap: 4px;
}
.fks__bar .fkh__icon { width: 44px; height: 44px; color: var(--fk-ink); }
.fks__bar .fkh__icon .fki { width: 22px; height: 22px; }
.fks__field {
--fks-x: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 18L18 6M6 6l12 12%22/%3E%3C/svg%3E");
flex: 1;
min-width: 0;
height: 44px;
padding: 0 12px;
display: flex;
align-items: center;
gap: 10px;
border-radius: 12px;
background: var(--fk-fill);
color: var(--fk-muted);
}
.fks__field:focus-within { background: var(--fk-fill-2); }
.fks__field .fki { width: 18px; height: 18px; }
.fks__field input {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--fk-ink);
font: inherit;
/* iOS Safari 16px dan kichik maydonda fokusda sahifani kattalashtiradi */
font-size: 16px;
}
.fks__field input::placeholder { color: var(--fk-muted); opacity: 1; }
.fks__field input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
margin-left: 8px;
background-color: var(--fk-muted);
-webkit-mask: var(--fks-x) center / contain no-repeat;
mask: var(--fks-x) center / contain no-repeat;
cursor: pointer;
}
.fks__body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 16px 40px;
}
.fks__block { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.fks__block-head { display: flex; align-items: center; justify-content: space-between; }
.fks__h { margin: 0; font-size: 13px; font-weight: 600; color: var(--fk-muted); }
.fks__clear {
padding: 6px 0;
border: 0;
background: transparent;
color: var(--fk-muted);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.fks__chips,
.fkm__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fks__chip,
.fkm__chip {
height: 38px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 19px;
background: var(--fk-fill);
color: var(--fk-soft);
font-size: 14px;
text-decoration: none;
white-space: nowrap;
}
.fks__chip:hover,
.fkm__chip:hover { background: var(--fk-fill-2); color: var(--fk-ink); }
.fks__chip .freek-icon,
.fkm__chip .freek-icon { width: 15px; height: 15px; }
.fks__chip .flag,
.fkm__chip .flag { width: 20px; height: 14px; border-radius: 2px; }
.fks__links { display: flex; flex-direction: column; gap: 6px; }
.fks__link {
height: 52px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 12px;
background: var(--fk-fill);
color: var(--fk-ink);
font-size: 15px;
text-decoration: none;
}
.fks__link .fki { width: 18px; height: 18px; color: var(--fk-muted); }
/* yozilganda: natijalar chiqadi, tavsiyalar yashirinadi */
.fks__results:has(> .ac-inline:not(.hidden)) ~ .fks__suggest { display: none; }
.fks__all {
display: none;
width: 100%;
height: 50px;
margin-top: 8px;
padding: 0 14px;
align-items: center;
justify-content: space-between;
border: 0;
border-radius: 12px;
background: var(--fk-active-bg);
color: var(--fk-active-ink);
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.fks__all .fki { width: 18px; height: 18px; }
.fks:has(.fks__field input:not(:placeholder-shown)) .fks__all { display: flex; }
/* inline autocomplete (site.js ro'yxatni #fks-results ga ko'chiradi) */
.ac-inline {
position: static;
min-width: 0;
width: auto;
margin-top: 6px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.ac-inline > div { max-height: none; overflow: visible; }
.ac-inline [data-ac-item] {
gap: 14px;
margin: 0 -8px;
padding: 8px;
border-radius: 12px;
color: var(--fk-ink);
}
.ac-inline [data-ac-item]:hover { background: var(--fk-fill); }
/* Qidiruv takliflari (preview, site.js .fkac shabloni): chegarasiz panel, lenta qatori tilida —
poster, nom (yozilgan qism yashil), Kino/Serial · yil · janr, o'ngda reyting yoki "Tez kunda";
klaviaturada tanlangan qator fon toni bilan; pastda "barcha natijalar". Mobil qidiruv oynasida
(inline) panel foni yo'q, "barcha natijalar" oynaning o'z tugmasida. */
.fkac { padding: 6px; border: 0; border-radius: 16px; background: var(--fk-panel); box-shadow: var(--fk-shadow); }
.fkac > [role="listbox"] { max-height: min(440px, 64vh); }
.fkac__item { padding: 8px; display: flex; align-items: center; gap: 12px; border-radius: 10px; color: var(--fk-ink); text-decoration: none; transition: background-color 0.12s; }
.fkac__item:hover,
.fkac__item.is-active { background: var(--fk-fill); }
.fkac__art { width: 40px; height: 60px; flex: none; overflow: hidden; border-radius: 7px; background: var(--fk-fill-2); }
.fkac__art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fkac__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fkac__title { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.fkac__hl { background: none; color: var(--fk-active-ink); }
.fkac__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--fk-muted); font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.fkac__meta i { font-style: normal; opacity: 0.6; }
.fkac__kind { font-weight: 600; }
.fkac__kind.is-serial { color: var(--fk-active-ink); font-weight: 700; }
.fkac__rate { flex: none; display: inline-flex; align-items: baseline; gap: 3px; }
.fkac__rate b { color: var(--fk-ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fkac__rate i { color: var(--fk-muted); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fkac__soon { height: 20px; padding: 0 7px; flex: none; display: inline-flex; align-items: center; border-radius: 6px; background: var(--fk-fill-2); color: var(--fk-ink); font-size: 10.5px; font-weight: 700; }
.fkac__empty { margin: 0; padding: 12px 10px 6px; color: var(--fk-muted); font-size: 13px; }
.fkac__foot { margin-top: 4px; padding: 11px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; color: var(--fk-muted); font-size: 13px; font-weight: 600; text-decoration: none;
background-image: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fk-ink) 8%, transparent) 18%, color-mix(in oklab, var(--fk-ink) 8%, transparent) 82%, transparent); background-position: top; background-size: 100% 1px; background-repeat: no-repeat; transition: color 0.12s, background-color 0.12s; }
.fkac__foot svg { width: 16px; height: 16px; flex: none; }
.fkac__foot:hover { background-color: var(--fk-fill); color: var(--fk-ink); }
.fkac__foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fkac.ac-inline { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.fkac.ac-inline > [role="listbox"] { max-height: none; }
.ac-inline .fkac__foot { display: none; }
.ac-inline .fkac__art { width: 44px; height: 66px; border-radius: 8px; }
.ac-inline .fkac__title { font-size: 15px; }
/* --- menyu oynasi (chapdan) --- */
dialog.fkm {
position: fixed;
inset: 0 auto 0 0;
width: min(88vw, 340px);
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--fk-bar);
color: var(--fk-ink);
box-shadow: 16px 0 48px rgba(0, 0, 0, 0.35);
}
dialog.fkm::backdrop { background: rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: no-preference) {
dialog.fkm[open] { animation: fkm-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
dialog.fkm[open]::backdrop { animation: fkm-fade 0.24s ease-out; }
}
@keyframes fkm-in {
from { transform: translateX(-100%); }
}
@keyframes fkm-fade {
from { opacity: 0; }
}
.fkm__panel {
height: 100%;
padding: 8px 12px 32px;
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
}
.fkm__head {
height: 56px;
padding-left: 8px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.fkm__head .fkh__logo img { width: 112px; height: 34px; }
.fkm__head .fkh__icon { width: 44px; height: 44px; color: var(--fk-ink); }
.fkm__head .fkh__icon .fki { width: 22px; height: 22px; }
.fkm__nav { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.fkm__row {
min-height: 52px;
padding: 0 8px;
display: flex;
align-items: center;
gap: 14px;
border-radius: 12px;
color: var(--fk-ink);
font-size: 15px;
text-decoration: none;
}
.fkm__row:hover { background: var(--fk-fill); }
.fkm__ic {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 10px;
background: var(--fk-fill);
color: var(--fk-muted);
}
.fkm__ic .fki { width: 19px; height: 19px; }
.fkm__row.is-active { background: var(--fk-fill); font-weight: 600; }
.fkm__row.is-active .fkm__ic { background: var(--fk-active-bg); color: var(--fk-active-ic); }
.fkm__section { display: flex; flex-direction: column; gap: 12px; padding: 26px 8px 0; }
.fkm__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fkm__h { margin: 0; font-size: 13px; font-weight: 600; color: var(--fk-muted); }
.fkm__seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--fk-fill); }
.fkm__seg-btn {
height: 30px;
padding: 0 14px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--fk-muted);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.fkm__seg-btn[aria-pressed="true"] { background: var(--fk-fill-2); color: var(--fk-ink); font-weight: 600; }
.fkm__cat { display: flex; flex-direction: column; gap: 10px; }
.fkm__cat[hidden],
.fks__block[hidden] { display: none; }
.fkm__label { margin-top: 4px; font-size: 12px; color: var(--fk-muted); }
/* katalog: har xil kenglikdagi pill'lar o'rniga bir xil kenglikdagi plitkalar panjarasi — ko'z bitta
chiziq bo'ylab o'qiydi (foydalanuvchi: turli kenglikdagi pill'larda ma'lumot topish qiyin) */
.fkm__chips.fkm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fkm__chips.fkm__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fkm__grid .fkm__chip { min-width: 0; height: 42px; padding: 0 12px; display: flex; justify-content: flex-start; gap: 10px; border-radius: 10px; color: var(--fk-ink); font-size: 14px; }
.fkm__grid .fkm__chip > :not(i):not(.flag) { overflow: hidden; text-overflow: ellipsis; }
.fkm__grid .fkm__chip .freek-icon { width: 16px; height: 16px; flex: none; opacity: 0.7; }
.fkm__grid .fkm__chip .flag { width: 20px; height: 14px; flex: none; }
.fkm__grid--3 .fkm__chip { justify-content: center; font-variant-numeric: tabular-nums; }
/* Kino / Serial — saytdagi matnli tablar (.fktabs) kabi, sarlavha yonida */
.fkm__section-head:has(> .fkm__seg.fktabs) { justify-content: flex-start; gap: 18px; }
.fkm__seg.fktabs { padding: 0 0 0 18px; border-radius: 0; background: none; }
.fkm__seg.fktabs > .fkm__seg-btn { height: auto; border-radius: 3px; background: none; }
.fkm__all {
height: 48px;
margin-top: 8px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 12px;
background: var(--fk-fill);
color: var(--fk-ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.fkm__all:hover { background: var(--fk-fill-2); }
.fkm__all .fki { width: 18px; height: 18px; color: var(--fk-muted); }
.fkm__settings { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.fkm__setting {
width: 100%;
min-height: 56px;
padding: 0 8px;
display: flex;
align-items: center;
gap: 14px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--fk-ink);
font: inherit;
font-size: 15px;
text-align: left;
cursor: pointer;
}
.fkm__setting:hover { background: var(--fk-fill); }
.fkm__switch {
position: relative;
width: 42px;
height: 24px;
flex-shrink: 0;
border-radius: 12px;
background: var(--fk-fill-2);
transition: background-color 0.2s;
}
.fkm__switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #d4d4d8;
transition: transform 0.2s;
}
.dark .fkm__switch { background: #88e000; }
.dark .fkm__switch::after { transform: translateX(18px); background: #0e1600; }
.fkm__pill {
height: 30px;
padding: 0 12px;
display: inline-flex;
align-items: center;
flex-shrink: 0;
border-radius: 15px;
background: var(--fk-fill-2);
color: var(--fk-ink);
font-size: 13px;
font-weight: 600;
}
/* =========================================================
PREVIEW 3: bosh sahifa hero'si — inc/hero-preview.blade.php
Kinomo tamoyili: rasm ustida faqat poster, matn yonidagi panelda.
Panel — ochroq qora va blur (foydalanuvchi so'rovi bilan; boshqa joylarda glass yo'q).
========================================================= */
.fkhero { position: relative; margin: 4px 0 14px; }
.fkhero__track {
position: relative;
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.fkhero__track::-webkit-scrollbar { display: none; }
.fkhero__track:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 3px; border-radius: 16px; }
.fkhero__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) {
.fkhero__slide { flex-basis: calc((100% - 10px) / 2); }
}
.fkhero__link {
--pw: clamp(50px, 15cqw, 100px);
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 16px;
background: #121412;
color: #fff;
text-decoration: none;
container-type: inline-size;
isolation: isolate;
}
.fkhero__art,
.fkhero__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fkhero__art img { object-fit: cover; transition: transform 0.6s ease; }
.fkhero__art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%);
}
@media (hover: hover) {
.fkhero__link:hover .fkhero__art img { transform: scale(1.03); }
}
.fkhero__poster {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
width: var(--pw);
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 8px;
background: #1a1c1a;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.fkhero__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* panel va chap tepadagi belgilar: ochroq qora + blur. Oq rasm ustida ham oq matn kontrasti ≥ 4.5 */
.fkhero__info,
.fkhero__imdb,
.fkhero__tag {
background: rgba(36, 38, 36, 0.64);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
}
.fkhero__info {
position: absolute;
z-index: 2;
left: calc(var(--pw) + 22px);
right: 12px;
bottom: 12px;
--cta-h: 32px;
--cta-gap: 8px;
height: calc(var(--cta-h) + 2 * var(--cta-gap));
padding: 0 var(--cta-gap) 0 14px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 12px;
}
@media (max-width: 767px) {
.fkhero__info { --cta-h: 30px; }
}
.fkhero__link:not(:has(.fkhero__poster)) .fkhero__info { left: 12px; }
.fkhero__title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: clamp(13.5px, 2.8cqw, 16px);
font-weight: 600;
line-height: 1.25;
}
/* tugma balandligi panelnikidan 2 × oraliq kam — tepa, past va o'ngdagi oraliq bir xil */
.fkhero__cta {
flex-shrink: 0;
height: var(--cta-h);
padding: 0 12px 0 10px;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 8px;
background: #fff;
color: #111311;
font-size: 13px;
font-weight: 700;
transition: background-color 0.15s, color 0.15s;
}
.fkhero__cta .fki { width: 11px; height: 11px; }
/* faqat tugmaning o'ziga hover bo'lganda — butun kartochkaga emas */
@media (hover: hover) {
.fkhero__cta:hover { background: var(--brand); color: var(--brand-foreground); }
}
/* chap tepa: IMDb + yil · janr; o'ng tepa: yosh chegarasi */
.fkhero__tags { position: absolute; z-index: 2; top: 12px; left: 12px; right: 64px; display: flex; gap: 6px; }
.fkhero__imdb,
.fkhero__tag,
.fkhero__age {
flex-shrink: 0;
height: 26px;
display: inline-flex;
align-items: center;
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
}
.fkhero__imdb { padding: 0 9px 0 5px; gap: 6px; }
.fkhero__tag {
flex-shrink: 1;
min-width: 0;
padding: 0 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.fkhero__age { padding: 0 8px; background: #dc2626; }
.fkhero__imdb b { padding: 2px 4px; border-radius: 4px; background: #f5c518; color: #000; font-size: 9.5px; font-weight: 900; line-height: 1; }
/* telefon: o'ng tepada ixcham nuqtalar (har slaydda o'z o'rni) */
.fkhero__pips { display: none; }
@media (max-width: 767px) {
.fkhero__pips {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
height: 20px;
padding: 0 7px;
display: flex;
align-items: center;
gap: 4px;
border-radius: 10px;
background: rgba(36, 38, 36, 0.64);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
}
.fkhero__pips i { width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); }
.fkhero__pips i.is-on { width: 14px; background: #fff; }
/* hero ostidagi nuqtalar qatori kerak emas (pastdagi umumiy qoidadan kuchliroq) */
.fkhero .fkhero__controls { display: none; }
/* chetdan-chetga: konteynerning 8px (px-2) chetlarini qoplaydi, burchaklar to'g'ri */
.fkhero { margin-inline: -8px; }
.fkhero__link { border-radius: 0; }
.fkhero__track:focus-visible { border-radius: 0; outline-offset: -2px; }
}
/* spine va kartochka ichidagi progress — faqat deck rejimida (pastda) */
.fkhero__spine,
.fkhero__progress { display: none; }
/* 1024px'dan: deck — doramalar.net'dagi karusel g'oyasi. Beshala slayd bir qatorda,
faoli kengayadi (flex-grow), qolganlari tor spine: raqam va vertikal nom. */
@media (min-width: 1024px) {
.fkhero .fkhero__track {
height: clamp(280px, 25vw, 330px);
overflow: visible;
scroll-snap-type: none;
}
.fkhero .fkhero__slide {
flex: 1 1 0;
transition: flex-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fkhero .fkhero__slide.is-active { flex-grow: 6; }
.fkhero .fkhero__link { height: 100%; aspect-ratio: auto; }
/* yopiq slaydda kartochka qatlamlari ko'rinmaydi (ekran o'quvchi uchun qoladi) */
.fkhero .fkhero__slide:not(.is-active) :is(.fkhero__poster, .fkhero__info, .fkhero__tags, .fkhero__age) {
opacity: 0;
pointer-events: none;
}
.fkhero .fkhero__slide.is-active :is(.fkhero__poster, .fkhero__info, .fkhero__tags, .fkhero__age) {
transition: opacity 0.35s ease 0.3s;
}
.fkhero .fkhero__slide:not(.is-active) .fkhero__art img { transform: none; }
.fkhero .fkhero__slide:not(.is-active) .fkhero__link:hover .fkhero__art img { filter: brightness(1.12); }
.fkhero .fkhero__spine {
display: block;
position: absolute;
inset: 0;
z-index: 3;
/* nom olib tashlandi (foydalanuvchi so'rovi) — faqat tepadagi raqam uchun yengil soya, rasm ochiqroq */
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 28%);
pointer-events: none;
transition: opacity 0.25s;
}
.fkhero .fkhero__slide.is-active .fkhero__spine { opacity: 0; }
.fkhero__spine span {
position: absolute;
top: 14px;
left: 0;
right: 0;
text-align: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.5);
}
.fkhero__spine b { display: none; }
/* yopiq kartochkalarga juda yengil rangli gradient (foydalanuvchi so'rovi): har biri o'z rangida,
pastdan tepaga so'nadi, soft-light — rasm ranglari bilan aralashib zo'rg'a seziladi */
.fkhero .fkhero__spine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--fk-spine, #8b5cf6) 0%, transparent 62%); opacity: 0.32; mix-blend-mode: soft-light; }
.fkhero .fkhero__slide:nth-child(5n + 2) { --fk-spine: #8b5cf6; }
.fkhero .fkhero__slide:nth-child(5n + 3) { --fk-spine: #f43f5e; }
.fkhero .fkhero__slide:nth-child(5n + 4) { --fk-spine: #06b6d4; }
.fkhero .fkhero__slide:nth-child(5n + 5) { --fk-spine: #f59e0b; }
.fkhero .fkhero__slide:nth-child(5n + 1) { --fk-spine: #84cc16; }
/* spine ustiga kelinganda raqam yorishadi — bosish mumkinligi seziladi */
.fkhero__link:hover .fkhero__spine span { color: rgba(255, 255, 255, 0.9); }
/* faol kartochka pastida — keyingisigacha qolgan vaqt */
.fkhero .fkhero__progress {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
height: 3px;
background: rgba(255, 255, 255, 0.18);
opacity: 0;
}
.fkhero .fkhero__slide.is-active .fkhero__progress { opacity: 1; }
.fkhero__progress::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.85);
transform: scaleX(0);
transform-origin: left center;
}
.fkhero.is-ticking .fkhero__slide.is-active .fkhero__progress::after { animation: fkhero-grow 6s linear forwards; }
.fkhero .fkhero__controls { display: none; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
.fkhero .fkhero__slide { transition: none; }
}
/* ko'rsatkich va o'qlar — hero ostida, kontentni yopmaydi */
.fkhero__controls { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 28px; }
.fkhero__dots { display: flex; gap: 2px; margin-right: auto; }
.fkhero__dot { width: 32px; height: 24px; padding: 10px 3px; border: 0; background: transparent; cursor: pointer; }
.fkhero__dot span { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--fk-fill-2); }
.fkhero__dot.is-active span::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--fk-ink);
transform-origin: left center;
}
.fkhero.is-ticking .fkhero__dot.is-active span::after { animation: fkhero-fill 6s linear; }
@keyframes fkhero-fill {
from { transform: scaleX(0); }
}
@keyframes fkhero-grow {
to { transform: scaleX(1); }
}
/* ikkita kartochka ko'rinsa, oxirgisi oldingisi bilan birga turadi — alohida nuqta kerak emas */
@media (min-width: 768px) {
.fkhero__dot:last-child:not(:first-child) { display: none; }
}
.fkhero__nav {
width: 36px;
height: 36px;
display: none;
align-items: center;
justify-content: center;
border: 0;
border-radius: 10px;
background: var(--fk-fill);
color: var(--fk-ink);
cursor: pointer;
}
.fkhero__nav:hover { background: var(--fk-fill-2); }
.fkhero__nav .fki { width: 15px; height: 15px; }
.fkhero__flip { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
.fkhero__nav { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
.fkhero__art img { transition: none; }
}
/* =========================================================
PREVIEW 4: janrlar qatori (inc/genres.blade.php) — border'siz, yumaloq
burchakli to'rtburchak chiplar (foydalanuvchi tanlovi), fon toni bilan ajraladi.
========================================================= */
#genreScroll { gap: 8px; padding: 4px; }
#genreScroll > a {
height: 36px;
padding: 0 15px 0 12px;
gap: 8px;
border: 0;
border-radius: 10px;
background: var(--fk-fill);
color: var(--fk-soft);
transition: background-color 0.15s, color 0.15s;
}
#genreScroll > a:hover { background: var(--fk-fill-2); color: var(--fk-ink); }
#genreScroll > a .freek-icon { width: 15px; height: 15px; opacity: 0.7; transition: opacity 0.15s; }
#genreScroll > a:hover .freek-icon { opacity: 1; }
#genreScroll > a > span { font-size: 14px; font-weight: 500; line-height: 1; }
/* surish o'qlari: soyasiz, border'siz, tonal; hover'da kattalashmaydi */
#scrollLeft,
#scrollRight {
width: 32px;
height: 32px;
border: 0;
box-shadow: none;
background: var(--fk-fill-2);
color: var(--fk-ink);
}
#scrollLeft:hover,
#scrollRight:hover { scale: none; background: color-mix(in oklab, var(--fk-fill-2), var(--fk-ink) 14%); }
/* telefon: hero kabi chetdan-chetga suriladi (konteynerning 8px chetini qoplaydi) */
@media (max-width: 767px) {
div:has(> #genreScroll) { width: auto; margin-inline: -8px; }
#genreScroll { padding-inline: 8px; }
#genreScroll > a { height: 34px; padding: 0 13px 0 11px; }
#genreScroll > a > span { font-size: 13.5px; }
}
/* =========================================================
PREVIEW 5: bosh sahifa lentasi (A varianti) — ro'yxat qatori
components/list-row.blade.php — kinomo.net qatori asosida, freekino uslubida:
qatorlar orasida chiziq yo'q (fon toni), "Tomosha" tonal pill.
Qator o'z konteyneriga moslashadi (@container fklist): 460px'dan tor — ixcham.
========================================================= */
.fkrow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 14px; color: var(--fk-ink); text-decoration: none; transition: background-color 0.15s; }
@media (hover: hover) {
.fkrow:hover { background: var(--fk-fill); }
.fkrow:hover .fkrow__title { color: var(--fk-active-ink); }
}
.fkrow:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* qatorlar orasida bilinar-bilinmas chiziq (foydalanuvchi so'rovi; 4% — sarlavha chiziqlaridan (8%)
ancha xira, ikki uchi lenta/sidebar chizig'i kabi so'nadi — foydalanuvchi so'rovi): poster chetidan boshlanadi,
hover/fokusdagi qator atrofida yashirinadi — tonal fon toza ko'rinadi */
.fkrow::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2.5px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fk-ink) 4%, transparent) 18%, color-mix(in oklab, var(--fk-ink) 4%, transparent) 82%, transparent); pointer-events: none; transition: opacity 0.15s; }
.fkrow:last-child::after,
.fkrow:has(+ :not(.fkrow))::after { display: none; }
.fkrow:focus-visible::after,
.fkrow:has(+ .fkrow:focus-visible)::after { opacity: 0; }
@media (hover: hover) {
.fkrow:hover::after,
.fkrow:has(+ .fkrow:hover)::after { opacity: 0; }
}
.fkrow__art { position: relative; width: 84px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 8px; background: var(--fk-fill-2); }
.fkrow__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fkrow__body { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.fkrow__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; transition: color 0.15s; }
.fkrow__adult { margin-left: 6px; padding: 0 4px; border-radius: 4px; background: #dc2626; color: #fff; font-size: 9px; font-weight: 800; vertical-align: 0.15em; }
.fkrow__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--fk-muted); font-size: 12.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.fkrow__facts i { font-style: normal; opacity: 0.6; }
.fkrow__pair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fkrow__flag { width: auto; height: 11px; flex: none; border-radius: 2px; }
.fkrow__fact { display: inline-flex; align-items: center; gap: 4px; }
.fkrow__fact svg { width: 13px; height: 13px; flex: none; opacity: 0.8; }
.fkrow__kind { display: none; font-weight: 700; color: var(--fk-active-ink); }
.fkrow__kind.is-dorama { color: #f472b6; }
html:not(.dark) .fkrow__kind.is-dorama { color: #be185d; }
.fkrow__rule { display: none; width: 1px; height: 14px; background: currentColor; opacity: 0.3; }
.fkrow__score { display: inline-flex; align-items: baseline; gap: 4px; }
.fkrow__score b { font-weight: 800; color: var(--fk-ink); }
.fkrow__score span { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fkrow__tags { margin-top: 1px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fkrow__new,
.fkrow__qual { height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 6px; font-size: 10.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* serialdagi yangi qism tegi — neytral (foydalanuvchi: yashil bo'lmasin), matni sifat tegidan to'qroq */
.fkrow__new { background: var(--fk-fill-2); color: var(--fk-ink); }
.fkrow__qual { background: var(--fk-fill-2); color: var(--fk-muted); }
.fkrow__qual i { margin: 0 4px; font-style: normal; opacity: 0.5; }
.fkrow__views,
.fkrow__sviews { display: inline-flex; align-items: center; gap: 4px; color: var(--fk-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fkrow__views svg,
.fkrow__sviews svg { width: 13px; height: 13px; flex: none; }
/* Rotten Tomatoes (lenta qatori, x-list-row): ikonka CSS'da bir marta — sahifadagi 20 qatorda HTML takrorlanmaydi.
60%+ — pomidor, undan past — "rotten" (kino sahifasidagi .fkd-rt bilan bir xil ikonkalar, Wikimedia Commons).
Tor qatorda teglar qatorida (.fkrow__rt), keng qatorda o'ng ustunda IMDb yonida (.fkrow__srt). */
.fkrt { display: inline-flex; align-items: center; gap: 4px; color: var(--fk-ink); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fkrt::before { content: ""; width: 13px; height: 13px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 138.75 141.25'%3E%3Cpath fill='%23f93208' d='m20.154 40.829c-28.149 27.622-13.657 61.011-5.734 71.931 35.254 41.954 92.792 25.339 111.89-5.9071 4.7608-8.2027 22.554-53.467-23.976-78.009z'/%3E%3Cpath fill='%23f93208' d='m39.613 39.265 4.7778-8.8607 28.406-5.0384 11.119 9.2082z'/%3E%3Cpath fill='%2302902e' d='m39.436 8.5696 8.9682-5.2826 6.7569 15.479c3.7925-6.3226 13.79-16.316 24.939-4.6684-4.7281 1.2636-7.5161 3.8553-7.7397 8.4768 15.145-4.1697 31.343 3.2127 33.539 9.0911-10.951-4.314-27.695 10.377-41.771 2.334 0.009 15.045-12.617 16.636-19.902 17.076 2.077-4.996 5.591-9.994 1.474-14.987-7.618 8.171-13.874 10.668-33.17 4.668 4.876-1.679 14.843-11.39 24.448-11.425-6.775-2.467-12.29-2.087-17.814-1.475 2.917-3.961 12.149-15.197 28.625-8.476z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fkrt.is-rotten::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145 140'%3E%3Cpath fill='%230fc755' d='M47.4 35.342c-13.607-7.935-12.32-25.203 2.097-31.88 26.124-6.531 29.117 13.78 22.652 30.412-6.542 24.11 18.095 23.662 19.925 10.067 3.605-18.412 19.394-26.695 31.67-16.359 12.598 12.135 7.074 36.581-17.827 34.187-16.03-1.545-19.552 19.585.839 21.183 32.228 1.915 42.49 22.167 31.04 35.865-15.993 15.15-37.691-4.439-45.512-19.505-6.8-9.307-17.321.11-13.423 6.502 12.983 19.465 2.923 31.229-10.906 30.62-13.37-.85-20.96-9.06-13.214-29.15 3.897-12.481-8.595-15.386-16.57-5.45-11.707 19.61-28.865 13.68-33.976 4.19-3.243-7.621-2.921-25.846 24.119-23.696 16.688 4.137 11.776-12.561-.63-13.633-9.245-.443-30.501-7.304-22.86-24.54 7.34-11.056 24.958-11.768 33.348 6.293 3.037 4.232 8.361 11.042 18.037 5.033 3.51-5.197 1.21-13.9-8.809-20.135z'/%3E%3C/svg%3E"); }
.fkrow__desc,
.fkrow__side { display: none; }
/* tor lentada davomiylik va F·Q yashiriladi: faktlar bir qatorda qoladi (serialda yangi qism tegi bor) */
@container fklist (max-width: 459.98px) {
.fkrow__len { display: none; }
}
@container fklist (min-width: 460px) {
.fkrow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; padding: 14px; }
.fkrow::after { left: 14px; right: 14px; }
.fkrow__art { width: 132px; border-radius: 10px; }
.fkrow__body { gap: 6px; min-height: 92px; }
.fkrow__title { font-size: 17px; }
.fkrow__facts { font-size: 13px; }
.fkrow__kind,
.fkrow__rule { display: inline-flex; }
.fkrow__score,
.fkrow__sep-score,
.fkrow__views,
.fkrow__rt { display: none; }
.fkrow__desc { margin-top: 2px; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fk-muted); font-size: 13.5px; line-height: 1.6; }
.fkrow__side { padding-left: 8px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; text-align: right; }
.fkrow__rate { min-height: 26px; display: flex; align-items: flex-end; gap: 5px; }
.fkrow__rate b { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fk-ink); }
.fkrow__rate em { font-size: 18px; font-style: normal; color: var(--fk-muted); }
/* RT — ajratkich chiziqning vertikal o'rtasida (foydalanuvchi: pastda turardi) */
.fkrow__srt { margin-right: 9px; padding-right: 10px; align-self: stretch; align-items: center; border-right: 1px solid color-mix(in oklab, var(--fk-ink) 12%, transparent); font-size: 13px; font-weight: 800; }
.fkrow__srt::before { width: 15px; height: 15px; }
.fkrow__scale { padding-bottom: 2px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fkrow__scale u,
.fkrow__scale i { font-size: 9.5px; font-style: normal; line-height: 1; text-decoration: none; color: var(--fk-muted); font-variant-numeric: tabular-nums; }
.fkrow__scale u { font-weight: 700; }
.fkrow__scale i { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.fkrow__watch { height: 32px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--fk-active-bg); color: var(--fk-active-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.fkrow__watch svg { width: 11px; height: 11px; }
.fkrow:hover .fkrow__watch { background: var(--brand); color: var(--brand-foreground); }
}
/* sidebar bloklari — fonsiz (foydalanuvchi: har bo'limda bg yoqmadi). Bo'limlarni bo'shliq va
sarlavha ostidagi bilinar-bilinmas chiziq ajratadi (lenta qatorlaridagi chiziq bilan bir xil).
Plitka/hover toni --fk-tile sahifa foni ustida (--fk-fill). */
.fkside { display: flex; flex-direction: column; gap: 34px; }
.fkside__block { --fk-tile: var(--fk-fill); --fk-tile-hover: var(--fk-fill-2); --fk-hair: color-mix(in oklab, var(--fk-ink) 8%, transparent); container: fkside / inline-size; }
.fkside__head { min-height: 34px; margin-bottom: 14px; padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fk-hair); }
.fkside__h { margin: 0; font-size: 16px; font-weight: 700; }
.fkside__more { color: var(--fk-muted); font-size: 13px; text-decoration: none; }
.fkside__more:hover { color: var(--fk-ink); }
.fktop .fkside__head { justify-content: flex-start; gap: 18px; }
/* Matnli tablar (lenta: Hammasi/Kinolar/Seriallar, Top 5: Kinolar/Seriallar) — fonsiz, sarlavha
yonida ingichka ajratkich bilan; faol — to'q qalin matn va ostida yashil nuqta (faol holat
uchun tagiga chiziq emas). Janr chiplari bilan aralashmasligi uchun (foydalanuvchi tanlovi). */
/* faol tab — ostida matn rangidagi ingichka chiziq (avval yashil nuqta, keyin neytral fon — ikkalasi ham yoqmadi, foydalanuvchi) */
.fktabs { position: relative; padding-left: 18px; display: inline-flex; align-items: center; gap: 18px; }
.fktabs::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 16px; background: color-mix(in oklab, var(--fk-ink) 18%, transparent); transform: translateY(-50%); }
.fktabs > a,
.fktabs > button { position: relative; margin: 0; padding: 2px 0; border: 0; border-radius: 3px; background: none; color: var(--fk-muted); font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.15s; }
.fkside__seg.fktabs > button { font-size: 13.5px; }
.fktabs > a:hover,
.fktabs > button:hover { color: var(--fk-ink); }
.fktabs > a:focus-visible,
.fktabs > button:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 3px; }
.fktabs > [aria-current="page"],
.fktabs > [aria-pressed="true"] { color: var(--fk-ink); font-weight: 650; }
.fktabs > [aria-current="page"]::after,
.fktabs > [aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 56%; height: 3px; border-radius: 99px; background: currentColor; transform: translateX(-50%); }
/* telefonda sarlavha va tablar ikki qatorga bo'linadi — tablar oldidagi ajratkich qator boshida
osilib qolmasin (bosh sahifa lentasi, ro'yxat, qidiruv sarlavhalari) */
@media (max-width: 767px) {
.fkfeed__head .fktabs { padding-left: 0; }
.fkfeed__head .fktabs::before { display: none; }
.fkfeed__head { row-gap: 10px; }
}
/* Yangi qismlar — kinomo plitkasi: katta raqam | nom, fasl · vaqt | play doirasi.
Keng joyda (planshetda lenta ichida) ikki ustun. */
.fkne { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@container fkside (min-width: 560px) {
.fkne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fkne__card { padding: 8px 10px; display: flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--fk-tile); color: var(--fk-ink); text-decoration: none; transition: background-color 0.15s; }
.fkne__card:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* /yangi-qismlar sahifasi: plitkalar to'liq kenglikda (sidebar yo'q) — 2/3 ustun, qism kadri (16:9) */
.fkne--page { --fk-tile: var(--fk-fill); --fk-tile-hover: var(--fk-fill-2); margin-top: 4px; gap: 8px; }
@media (min-width: 768px) {
.fkne--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.fkne--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fkne__still { width: 104px; height: auto; aspect-ratio: 16 / 9; flex: none; display: block; object-fit: cover; border-radius: 7px; background: var(--fk-fill-2); }
@media (max-width: 767px) {
.fkne__still { width: 92px; }
}
.fkne__num { min-width: 30px; padding-right: 10px; flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; border-right: 1px solid color-mix(in oklab, var(--fk-ink) 14%, transparent); }
.fkne__num b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fkne__num i { margin-top: 2px; color: var(--fk-muted); font-size: 8.5px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fkne__text { min-width: 0; flex: 1; }
.fkne__name { display: block; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.fkne__sub { margin-top: 2px; display: block; overflow: hidden; color: var(--fk-muted); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.fkne__sub i { margin: 0 5px; font-style: normal; opacity: 0.5; }
.fkne__when.is-fresh { color: var(--fk-active-ink); font-weight: 600; }
.fkne__go { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--fk-ink) 9%, transparent); color: var(--fk-muted); transition: background-color 0.15s, color 0.15s; }
.fkne__go svg { width: 12px; height: 12px; margin-left: 1px; }
@media (hover: hover) {
.fkne__card:hover { background-color: var(--fk-tile-hover); }
.fkne__card:hover .fkne__name { color: var(--fk-active-ink); }
.fkne__card:hover .fkne__go { background: var(--brand); color: var(--brand-foreground); }
}
/* Top 5 — umumiy */
.fktop__note { margin: -4px 0 14px; color: var(--fk-muted); font-size: 12px; }
.fktop__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fktop__list[hidden] { display: none; }
.fktop a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* c — plitka + poster; o'rin — poster burchagidagi kichik doira belgi: 1 — yashil, 2–5 —
neytral (qorong'ida och, yorug'da to'q). Belgi atrofida plitka rangidagi halqa posterdan
ajratadi. O'rinni ekran o'quvchiga aytadi, belgi aria-hidden. */
.fktop--c .fktop__list { gap: 8px; }
.fktop .fktop-c { padding: 8px 12px 8px 10px; gap: 12px; }
.fktop-c__art { position: relative; flex: none; }
.fktop-c__p { width: 40px; height: 60px; display: block; object-fit: cover; border-radius: 6px; background: var(--fk-fill-2); }
.fktop-c__rk { position: absolute; top: -5px; left: -5px; min-width: 19px; height: 19px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in oklab, var(--fk-ink) 88%, transparent); color: var(--fk-panel); font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--fk-tile); transition: box-shadow 0.15s; }
.fktop__it:first-child .fktop-c__rk { background: var(--brand); color: var(--brand-foreground); }
.fktop-c .fkne__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13.5px; white-space: normal; }
.fktop-c .fkne__sub { margin-top: 4px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fktop-c__likes { display: inline-flex; align-items: center; gap: 3px; vertical-align: -1px; }
.fktop-c__likes svg { width: 12px; height: 12px; }
@media (hover: hover) {
.fktop-c:hover .fktop-c__rk { box-shadow: 0 0 0 2px var(--fk-tile-hover); }
}
/* Tez kunda — lenta qatori (x-list-row soon), sidebar'da kichraytirilgan: 56px poster, 13.5px nom;
poster bo'lim sarlavhasi chizig'iga tekislanadi. "Tez kunda" tegi neytral. */
/* chapdan -10px: poster sarlavha chetiga tekis; o'ngdan chiqmaydi (1024px'da sahifani kengaytirardi) */
.fksoon { container: fklist / inline-size; margin: -4px 0 0 -10px; display: flex; flex-direction: column; gap: 4px; }
.fksoon .fkrow { padding: 8px 10px; gap: 12px; border-radius: 12px; }
.fksoon .fkrow::after { display: none; }
.fksoon .fkrow__art { width: 56px; border-radius: 7px; }
.fksoon .fkrow__body { gap: 4px; }
.fksoon .fkrow__title { font-size: 13.5px; -webkit-line-clamp: 2; }
.fksoon .fkrow__facts { gap: 5px; font-size: 11.5px; }
.fksoon .fkrow__flag { height: 10px; }
.fksoon .fkrow__qual { height: 19px; padding: 0 6px; font-size: 10px; }
@media (hover: hover) {
.fksoon .fkrow:hover { background: var(--fk-tile); }
}
.fkrow__soon { color: var(--fk-ink); }
.fkrow__soon svg { width: 11px; height: 11px; margin-right: 4px; flex: none; }
/* lenta: chapda ro'yxat, o'ngda 340px sidebar; 1024px'dan tor — bitta ustun, bloklar lenta orasida */
/* lenta va sidebar orasida bilinar-bilinmas vertikal chiziq (foydalanuvchi so'rovi, 3%, uchlari
so'nadi): grid'ga
psevdo-element qo'yilsa u grid elementiga aylanadi, shuning uchun fon qatlami — oraliqning
o'rtasida, lentaning butun balandligi bo'ylab */
.fkfeed-wrap { margin: 26px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 40px;
background: linear-gradient(transparent, color-mix(in oklab, var(--fk-ink) 3%, transparent) 160px, color-mix(in oklab, var(--fk-ink) 3%, transparent) calc(100% - 240px), transparent) calc(100% - 360px) 0 / 1px 100% no-repeat; }
.fkfeed__head { min-height: 34px; margin-bottom: 8px; padding: 0 14px 12px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
/* sarlavha 16px/700 (sidebar kabi), desktop'da biroz kattaroq — 18px (foydalanuvchi so'rovi); qatori 24px —
sidebar'dagi birinchi sarlavha bilan chiziqlar bir balandlikda */
.fkfeed__h { margin: 0; font-size: 16px; font-weight: 700; line-height: 24px; }
@media (min-width: 1024px) {
.fkfeed__h { font-size: 18px; }
}
/* ro'yxat sahifalari (listing/preview): h1 ichidagi xira qo'shimcha so'z, lead qatori, saralash yo'nalishi */
.fkfeed__hsub { color: var(--fk-muted); font-weight: 600; }
.fklist__cross { margin-left: auto; color: var(--fk-muted); font-size: 13px; text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.fklist__cross:hover { color: var(--fk-ink); }
.fklist__cross:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 3px; border-radius: 3px; }
/* telefonda sarlavha qatoriga sig'maydi — ro'yxat oxirida (sahifa raqamlari ostida); desktop'da sarlavhada */
.fklist__cross--end { display: none; }
@media (max-width: 767px) {
.fkfeed__head > .fklist__cross { display: none; }
.fklist__cross--end { margin: 4px 0 0; display: inline-block; }
}
.fklist__empty { margin: 24px 14px; color: var(--fk-muted); }
.fktabs__dir { margin-left: 3px; font-size: 12px; }
/* "Janr" ochiluvchi ro'yxati (listing/preview) — /movie, /serial va janr sahifalarida saralash yonida;
— JS'siz ochiladi, havolalar oddiy (SEO uchun ichki havolalar saqlanadi) */
.fklist .fkfeed__head { position: relative; }
.fkgenre { position: relative; }
.fkgenre__sum { padding: 2px 0; display: inline-flex; align-items: center; gap: 4px; color: var(--fk-muted); font-size: 14px; font-weight: 500; line-height: 20px; list-style: none; cursor: pointer; transition: color 0.15s; }
.fkgenre__sum::-webkit-details-marker { display: none; }
.fkgenre__sum:hover,
.fkgenre[open] .fkgenre__sum { color: var(--fk-ink); }
.fkgenre__sum:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 3px; border-radius: 3px; }
.fkgenre__sum svg { width: 14px; height: 14px; transition: transform 0.15s; }
.fkgenre[open] .fkgenre__sum svg { transform: rotate(180deg); }
.fkgenre__panel { position: absolute; top: calc(100% + 12px); left: -10px; z-index: 40; width: 340px; padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-radius: 14px; background: var(--fk-panel); box-shadow: var(--fk-shadow); }
.fkgenre__panel a { padding: 9px 10px; border-radius: 9px; color: var(--fk-ink); font-size: 13.5px; text-decoration: none; transition: background-color 0.12s; }
.fkgenre__panel a:hover { background: var(--fk-fill); }
.fkgenre__panel a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: -2px; }
.fkgenre__panel a[aria-current] { background: var(--fk-active-bg); color: var(--fk-active-ink); font-weight: 700; }
@media (max-width: 767px) {
.fkgenre { position: static; }
.fkgenre__panel { top: calc(100% - 4px); left: 12px; right: 12px; width: auto; }
}
.fktabs__n { margin-left: 3px; color: var(--fk-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fksearch__panel[hidden] { display: none; }
/* ikki ustunli ro'yxat (Tez kunda, to'plam): har kartochka o'z kengligiga moslashadi — .fkcell eng yaqin
fklist konteyneri (tor ustunda ixcham ko'rinish); ustunlarda qatorlar orasidagi chiziq yo'q, bo'shliq ajratadi */
.fkcell { container: fklist / inline-size; min-width: 0; }
@media (min-width: 768px) {
.fkfeed__list.fkfeed__list--cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
}
/* sidebar'siz sahifa (to'plam): bitta keng ustun, lenta/sidebar chizig'i yo'q */
.fkfeed-wrap.fklist--full { grid-template-columns: minmax(0, 1fr); background: none; }
/* to'plam kompozitsiyasi (x-poster-fan): 3 tagacha poster yelpig'ich — o'rtadagi oldinda, yon ikkitasi
burilgan va xiraroq; hover'da biroz ochiladi (harakatni kamaytirish so'ralsa — yo'q) */
.fkfan { position: relative; display: block; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 50% 100%, color-mix(in oklab, var(--fk-ink) 8%, var(--fk-fill)), var(--fk-fill)); transition: background-color 0.2s; }
.fkfan--card { width: 100%; aspect-ratio: 4 / 3; }
.fkfan--head { width: 150px; height: 112px; flex: none; border-radius: 16px; }
.fkfan__p { position: absolute; top: 54%; left: 50%; width: 34%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 7px; background: var(--fk-fill-2); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); transition: transform 0.25s ease, filter 0.25s ease; }
.fkfan__p1 { z-index: 3; transform: translate(-50%, -50%); }
.fkfan__p2 { z-index: 2; transform: translate(-50%, -50%) translateX(-62%) rotate(-9deg) scale(0.88); filter: brightness(0.75); }
.fkfan__p3 { z-index: 1; transform: translate(-50%, -50%) translateX(62%) rotate(9deg) scale(0.88); filter: brightness(0.75); }
.fkfan__solo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
a:hover .fkfan__p1 { transform: translate(-50%, -52%) scale(1.03); }
a:hover .fkfan__p2 { transform: translate(-50%, -50%) translateX(-74%) rotate(-13deg) scale(0.9); filter: brightness(0.85); }
a:hover .fkfan__p3 { transform: translate(-50%, -50%) translateX(74%) rotate(13deg) scale(0.9); filter: brightness(0.85); }
}
/* sidebar: To'plamlar — ixcham qator (kichik kompozitsiya + nom) */
.fkcols { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fkcolrow { margin: 0 -6px; padding: 6px; display: flex; align-items: center; gap: 12px; border-radius: 12px; color: var(--fk-ink); text-decoration: none; transition: background-color 0.15s; }
.fkcolrow:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
.fkfan--mini { width: 76px; height: 57px; flex: none; border-radius: 10px; }
.fkfan--mini .fkfan__p { border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
.fkcolrow__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fkcolrow__t { overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.fkcolrow__m { color: var(--fk-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.fkcolrow__m i { margin: 0 5px; font-style: normal; opacity: 0.6; }
@media (hover: hover) {
.fkcolrow:hover { background: var(--fk-tile); }
.fkcolrow:hover .fkcolrow__t { color: var(--fk-active-ink); }
}
/* /collections: kartochkalar panjarasi */
.fkcolgrid { margin: 6px 14px 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 768px) { .fkcolgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fkcolgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .fkcolgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fkcolcard { display: flex; flex-direction: column; gap: 8px; color: var(--fk-ink); text-decoration: none; border-radius: 14px; }
.fkcolcard:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 3px; }
.fkcolcard__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; transition: color 0.15s; }
.fkcolcard__m { color: var(--fk-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.fkcolcard__m i { margin: 0 5px; font-style: normal; opacity: 0.6; }
@media (hover: hover) {
.fkcolcard:hover .fkcolcard__t { color: var(--fk-active-ink); }
}
@media (max-width: 767px) {
.fkcolgrid { margin: 4px 12px 0; }
.fkfan--head { width: 112px; height: 84px; border-radius: 12px; }
}
/* to'plam sahifasi: ixcham sarlavha — kvadrat poster, kicker, h1, tavsif (ko'k belgi yo'q) */
.fkcol { margin: 0 14px 18px; display: flex; align-items: center; gap: 18px; }
.fkcol__art { width: 112px; height: 112px; flex: none; object-fit: cover; border-radius: 16px; background: var(--fk-fill-2); }
.fkcol__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fkcol__kicker { margin: 0; color: var(--fk-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fkcol__kicker i { margin: 0 6px; font-style: normal; opacity: 0.6; }
.fkcol__h { margin: 0; color: var(--fk-ink); font-size: 22px; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.fkcol__desc { margin: 0; max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--fk-muted); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 767px) {
.fkcol { margin: 0 12px 14px; align-items: flex-start; gap: 14px; }
.fkcol__art { width: 84px; height: 84px; border-radius: 12px; }
.fkcol__h { font-size: 18px; }
}
.fksearch__empty { margin: 18px 14px 8px; max-width: 60ch; color: var(--fk-muted); font-size: 14px; line-height: 1.6; }
.fksearch__empty p { margin: 0 0 6px; }
.fksearch__empty b { color: var(--fk-ink); }
.fksearch__empty a { color: var(--fk-active-ink); font-weight: 600; }
.fkfeed__list { container: fklist / inline-size; display: flex; flex-direction: column; gap: 4px; }
.fkfeed__list[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s; }
.fkfeed__more { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fkfeed__btn { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--fk-fill); color: var(--fk-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.fkfeed__btn:hover { background: var(--fk-fill-2); }
.fkfeed__btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.fkpager { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.fkpager a,
.fkpager span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--fk-muted); font-size: 13px; text-decoration: none; }
.fkpager a:hover { background: var(--fk-fill); color: var(--fk-ink); }
.fkpager [aria-current="page"] { background: var(--fk-fill-2); color: var(--fk-ink); font-weight: 700; }
/* 1024px'dan tor: bitta ustun, sidebar bloklari lenta ostida (ora-orada emas — foydalanuvchi so'rovi);
planshetda bloklar ikki ustunda, Tez kunda to'liq kenglikda (qatorlari ikki ustunda) */
@media (max-width: 1023px) {
.fkfeed-wrap { margin-top: 18px; grid-template-columns: minmax(0, 1fr); gap: 40px; background: none; }
.fkfeed-wrap > .fkside { padding-inline: 12px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.fkfeed-wrap > .fkside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; }
.fkfeed-wrap > .fkside > .fkside__coming { grid-column: 1 / -1; }
.fkfeed-wrap > .fkside .fksoon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
}
@media (max-width: 767px) {
.fkfeed__head { padding: 0 12px 12px; flex-wrap: wrap; row-gap: 8px; }
}
/* =========================================================
PREVIEW 6: bosh sahifaning pastki qismi — SEO matn, footer (davlatlar footer ichida)
Chegara va glass yo'q: bo'limlarni sarlavha ostidagi nozik chiziq (8%) va bo'shliq ajratadi,
footer — header'dagi to'q fon (--fk-bar). Markup: home/index (seotext), inc/country,
inc/footer-preview.
========================================================= */
.fksec__head { min-height: 34px; margin-bottom: 14px; padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
.fksec__h { margin: 0; color: var(--fk-ink); font-size: 16px; font-weight: 700; line-height: 24px; }
@media (min-width: 1024px) {
.fksec__h { font-size: 18px; }
}
/* SEO matn: o'qishga qulay kenglik (72ch); telefonda 5 qator + "Davomini o'qish" */
.fkseo { margin: 8px 0 0; }
.fkseo__body { max-width: 72ch; color: var(--fk-muted); font-size: 13.5px; line-height: 1.7; }
.fkseo__body p { margin: 0; }
.fkseo__body p + p { margin-top: 8px; }
.fkseo__lead { color: var(--fk-ink); font-weight: 600; }
.fkseo__more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--fk-active-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fkseo__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.fkseo__more:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 767px) {
.fkseo:not(.is-open) .fkseo__body { max-height: calc(1.7em * 5); overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
}
/* Footer: to'q fon, chegarasiz; pastki qator ustida uchlari so'nadigan nozik chiziq */
.fkfoot { margin-top: 48px; padding-bottom: 100px; background: var(--fk-foot); border-top: 1px solid var(--fk-foot-line); color: var(--fk-ink); }
.fkfoot__in { padding-top: 44px; padding-bottom: 28px; }
.fkfoot__top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr); gap: 40px; }
.fkfoot__logo { display: inline-block; }
.fkfoot__logo img { width: 150px; height: auto; display: block; }
.fkfoot__about { margin: 14px 0 0; max-width: 42ch; color: var(--fk-muted); font-size: 13px; line-height: 1.65; }
.fkfoot__social { margin-top: 18px; display: flex; gap: 8px; }
.fkfoot__social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--fk-fill); color: var(--fk-muted); transition: background-color 0.15s, color 0.15s; }
.fkfoot__social a:hover { background: var(--fk-fill-2); color: var(--fk-ink); }
.fkfoot__social svg,
.fkfoot__social .freek-icon { width: 18px; height: 18px; display: block; }
.fkfoot__h { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.fkfoot__links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; }
.fkfoot__links a,
.fkfoot__legal a { color: var(--fk-muted); text-decoration: none; transition: color 0.15s; }
.fkfoot__links a { font-size: 13.5px; }
.fkfoot__links a:hover,
.fkfoot__legal a:hover { color: var(--fk-ink); }
.fkfoot__years { max-width: 210px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fkfoot__years a { height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--fk-fill); color: var(--fk-muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.fkfoot__years a:hover { background: var(--fk-fill-2); color: var(--fk-ink); }
.fkfoot a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* davlatlar — footer ichida ixcham qator: guruh nomi + bayroqli kichik tugmalar (yillar kabi) */
.fkfoot__cn { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.fkfoot__cngroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fkfoot__cnlabel { margin-right: 6px; color: var(--fk-ink); font-size: 13px; font-weight: 700; }
.fkfoot__cngroup a { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; background: var(--fk-fill); color: var(--fk-muted); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.fkfoot__cngroup a:hover { background: var(--fk-fill-2); color: var(--fk-ink); }
.fkfoot__cngroup .flag { width: 16px; height: 12px; flex: none; border-radius: 2px; }
@media (max-width: 767px) {
.fkfoot__cn { margin-top: 28px; flex-direction: column; }
.fkfoot__cnlabel { width: 100%; margin: 0 0 2px; }
}
.fkfoot__bottom { margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--fk-muted); font-size: 12px;
background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fk-ink) 8%, transparent) 18%, color-mix(in oklab, var(--fk-ink) 8%, transparent) 82%, transparent) top / 100% 1px no-repeat; }
.fkfoot__bottom p { margin: 0; }
.fkfoot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
@media (max-width: 1023px) {
.fkfoot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.fkfoot__brand,
.fkfoot__col--wide { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.fkfoot { margin-top: 36px; }
.fkfoot__in { padding-top: 32px; }
.fkfoot__top { gap: 28px 16px; }
.fkfoot__bottom { flex-direction: column; align-items: flex-start; }
}
/* =========================================================
Shrift (preview): Plus Jakarta Sans — foydalanuvchi tanlovi (Poppins, Manrope,
Onest bilan solishtirilgach). Variable woff2 400–800, lotin + kengaytirilgan
lotin; lotin fayli gate skriptida preload qilinadi. Preview o'chiq — Poppins.
========================================================= */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/preview/jakarta-cyrillic-ext.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/preview/jakarta-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/preview/jakarta-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jakarta'da oddiy kirill yo'q — shu harflar uchungina Manrope'ning kirill qismi
(uslubi yaqin). Faqat sahifada kirill harfi bo'lsa yuklanadi. */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/preview/manrope-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
html.fk-preview {
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Tailwind preflight html'ga "Poppins" nomini to'g'ridan-to'g'ri yozadi (@theme inline) — preview'da ham almashsin */
font-family: var(--font-sans);
}
/* =====================================================================
PREVIEW 10 — kino sahifasi (movie/show.blade.php; faqat uiPreview()).
Uch variant (?dv=): 1 sal-pal — hozirgi ko'rinish, faqat nuqsonlar tuzatilgan (asl markup);
2 erkin — ma'lumot birinchi, zich; 3 gibrid — freekino + kinomo tuzilishi.
Standart: 1. Tanlangandan keyin qolgan variantlar olib tashlanadi.
===================================================================== */
.fkd { --fkd-tint: color-mix(in oklab, var(--fk-ink) 6%, transparent); --fkd-tint-2: color-mix(in oklab, var(--fk-ink) 11%, transparent);
--fkd-hair: color-mix(in oklab, var(--fk-ink) 9%, transparent); }
/* ---------- hamma variantda: nuqson tuzatishlari (ko'rinish o'zgarmaydi) ---------- */
/* yorug' temada joriy breadcrumb elementi text-white — oq fonda ko'rinmas edi */
html:not(.dark) .fkd-bc__cur { color: var(--fk-ink); }
/* "Tomosha qilish" pleerga sakraganda tepasi header ostida qolmasin */
.fkd-player { scroll-margin-top: 84px; }
@media (max-width: 1023px) {
/* faktlar sig'masa ikki qatorga bo'linmaydi — suriladi (foydalanuvchi so'rovi) */
.fkd-facts { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-right: 18px;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.fkd-facts::-webkit-scrollbar { display: none; }
.fkd-facts > * { flex: none; }
.fkd-facts > :first-child { margin-left: auto; }
.fkd-facts > :last-child { margin-right: auto; }
/* pleer ekran chetigacha (konteyner px-2 = 8px) */
.fkd-player { width: auto; margin-inline: -8px; border-left: 0; border-right: 0; border-radius: 0; }
}
/* ---------- 2 va 3 uchun umumiy: birlashtirilgan tepa blok (CSS grid) ---------- */
.fkd--v2 .fkd-head { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px;
grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "poster" "watch" "info" "plot"; justify-items: center;
padding: 2px 0 0; border: 0; }
.fkd--v2 .fkd-head > .absolute { display: none; }
.fkd--v2 .fkd-head__title { grid-area: title; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; text-align: center; }
.fkd--v2 .fkd-head__title h1 { margin: 0; text-wrap: balance; }
.fkd--v2 .fkd-head__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
.fkd--v2 .fkd-rating { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
.fkd--v2 .fkd-head__poster { grid-area: poster; }
.fkd--v2 .fkd-head__poster > div { border-radius: 12px; box-shadow: none; }
.fkd--v2 .fkd-head__info { grid-area: info; min-width: 0; gap: 14px; }
/* "Tomosha qilish": qorong'i mavzuda oqqa yaqin, yorug' mavzuda aksincha to'q (oq fonda oq tugma ko'rinmaydi).
Play ikonkasi rangini o'zi to'g'rilaydi (invert dark:invert-0). */
.fkd--v2 .fkd-watch { grid-area: watch; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
height: 42px; padding: 0 20px; border-radius: 9px; background: #ededea; color: #121412; font-weight: 600;
transition: background-color 0.15s; }
.fkd--v2 .fkd-watch:hover { background: #ffffff; }
html:not(.dark) .fkd--v2 .fkd-watch { background: #18181b; color: #fafafa; }
html:not(.dark) .fkd--v2 .fkd-watch:hover { background: #3f3f46; }
.fkd--v2 .fkd-watch:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
.fkd--v2 .fkd-plot { grid-area: plot; justify-self: stretch; text-align: left; }
.fkd--v2 .fkd-plot__p { margin: 0; font-size: 13.5px; line-height: 1.7; }
/* ---------- 2. Erkin: faktlar qatori o'z holicha (freekino belgisi) + janrlar shu qatorda,
to'plam kinomo uslubidagi kartochka, aktyorlar tugmalar ostida ---------- */
.fkd--v2 .fkd-head__poster { width: 200px; }
.fkd--v2 .fkd-head__title h1 { font-size: 22px; font-weight: 750; letter-spacing: -0.015em; }
.fkd--v2 .fkd-rating { order: -1; } /* IMDb matndan oldin */
/* Rotten Tomatoes (Tomatometer) — IMDb'dan keyin, xuddi shu o'lchamda; pomidor/dog' ikonkasi */
.fkd--v2 .fkd-rt { order: -1; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; line-height: 1; color: var(--fk-ink); cursor: default; }
.fkd--v2 .fkd-rt svg { width: 16px; height: 16px; flex: none; }
/* MyDramaList bahosi (mdl:backfill) — IMDb belgisi bilan bir o'lchamda, MDL ko'k rangida */
.fkd-mdl__b { padding: 0 4px; border-radius: 4px; background: #1675b6; color: #fff; font-size: 9px; font-weight: 900; line-height: 15px; }
.fkd-mdl__v { color: #6cb4ee; font-size: 14px; font-weight: 800; line-height: 20px; }
html:not(.dark) .fkd-mdl__v { color: #1675b6; }
@media (min-width: 640px) { .fkd-mdl__b { font-size: 10px; } }
/* reyting va boshqa nom orasida tik chiziqcha (bezak, matn emas) */
.fkd--v2 .fkd-alt { position: relative; padding-left: 11px; }
.fkd--v2 .fkd-alt::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 13px; margin-top: -6.5px;
background: color-mix(in oklab, var(--fk-ink) 24%, transparent); }
.fkd--v2 .fkd-plot__p { max-width: 74ch; }
/* "Uzbek tilida • HD • Online tomosha" — doim syujet ostida, xira */
.fkd--v2 .fkd-sub2 { margin-top: 8px; font-size: 11.5px; opacity: 0.6; }
/* yorug' temada opacity 0.6 bilan 2.9:1 edi — xira, lekin AA: zinc-500 (4.8:1) */
html:not(.dark) .fkd--v2 .fkd-sub2 { opacity: 1; color: #71717a; }
.fkd--v2 .fkd-plot__more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--fk-active-ic);
font-size: 13px; font-weight: 600; cursor: pointer; }
.fkd--v2 .fkd-plot__more:hover { text-decoration: underline; }
/* faktlar qatori tepasida chiziq, ostida bo'sh joy (pleerga yopishib qolmasin) */
.fkd--v2 .fkd-head__info { width: 100%; gap: 12px; padding: 12px 0 4px; border-top: 1px solid color-mix(in oklab, var(--fk-ink) 10%, transparent); }
.fkd--v2 .fkd-head { padding-bottom: 14px; }
/* faktlar ixcham: ikonka 25px va yorliq matni tonida; yorliq ko'zga ko'rinmaydi — ma'noni ikonka beradi,
matn esa HTML'da qoladi (ekran o'quvchi dasturlar uchun) */
.fkd--v2 .fkd-facts { gap: 14px; }
.fkd--v2 .fkd-facts > div { gap: 8px; align-items: center; }
.fkd--v2 .fkd-facts i.freek-icon { width: 25px; height: 25px; opacity: 0.7; }
.fkd--v2 .fkd-facts > div > div > span:first-child { position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.fkd--v2 .fkd-facts > div > div > :last-child,
.fkd--v2 .fkd-facts > div > div > :last-child a { line-height: 1.3; }
.fkd--v2 .fkd-facts__sep { height: 22px; }
/* janrlar fakt ustuni ko'rinishida: nuqta oldingi janrning oxirida turadi —
ikkinchi qatorga o'tganda qator nuqtadan boshlanmaydi */
.fkd--v2 .fkd-genres { flex-wrap: wrap; column-gap: 5px; row-gap: 2px; }
.fkd--v2 .fkd-genres a:not(:last-child)::after { content: "·"; content: "·" / ""; margin-left: 5px; opacity: 0.45; } /* ekran o'quvchi nuqtani o'qimaydi */
/* pleer ostidagi tugmalar: chegarasiz, tonal fon */
.fkd--v2 .fkd-acts { gap: 8px; }
.fkd--v2 .fkd-acts button, .fkd--v2 .fkd-acts a { border: 0; background: var(--fkd-tint); color: var(--fk-ink); }
.fkd--v2 .fkd-acts button:hover, .fkd--v2 .fkd-acts a:hover { background: var(--fkd-tint-2); }
/* desktop: treyler / ishlamayaptimi / yuklab olish — like/dislike kabi bitta yaxlit guruh, orasida qisqa tik chiziq
(foydalanuvchi). Hover'da faqat shu bo'lak fon oladi, uning yonidagi chiziqlar yashirinadi. Telefonda plitkalar o'zgarmaydi. */
@media (min-width: 1024px) {
.fkd--v2 .fkd-acts > div:last-child > * { position: relative; border-radius: 0; background: transparent; }
.fkd--v2 .fkd-acts > div:last-child > *:hover { background: var(--fkd-tint-2); }
.fkd--v2 .fkd-acts > div:last-child > * + *::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 20px;
margin-top: -10px; background: color-mix(in oklab, var(--fk-ink) 16%, transparent); transition: opacity 0.15s; }
.fkd--v2 .fkd-acts > div:last-child > *:hover::before,
.fkd--v2 .fkd-acts > div:last-child > *:hover + *::before { opacity: 0; }
.fkd--v2 .fkd-acts > div:last-child > *:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: -2px; }
}
/* like va dislike — bitta yaxlit tugma, o'rtasida tik chiziq */
.fkd--v2 .fkd-acts > #reactionBox { display: flex; gap: 0; overflow: hidden; border-radius: 10px; background: var(--fkd-tint); }
.fkd--v2 .fkd-acts #likeBtn, .fkd--v2 .fkd-acts #dislikeBtn { border-radius: 0; background: transparent; }
/* ajratuvchi chiziq — to'liq balandlikda emas, o'rtada qisqa */
.fkd--v2 .fkd-acts #dislikeBtn { position: relative; box-shadow: none; }
.fkd--v2 .fkd-acts #dislikeBtn::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 20px;
margin-top: -10px; background: color-mix(in oklab, var(--fk-ink) 16%, transparent); }
/* bosilgan holat yengil: pill foni bir xil qoladi, faqat ikonka va son rangi o'zgaradi
(like — saytning faol yashili, dislike — yumshoq gulrang) */
.fkd--v2 .fkd-acts #likeBtn.text-green-600 { background: transparent; color: var(--fk-active-ic); }
.fkd--v2 .fkd-acts #likeCount.text-green-600 { background: color-mix(in oklab, var(--fk-active-ic) 18%, transparent); color: var(--fk-active-ink); }
.fkd--v2 .fkd-acts #dislikeBtn.text-red-600 { background: transparent; color: #fb7185; }
.fkd--v2 .fkd-acts #dislikeCount.text-red-600 { background: color-mix(in oklab, #f43f5e 18%, transparent); color: #fb7185; }
html:not(.dark) .fkd--v2 .fkd-acts #dislikeBtn.text-red-600,
html:not(.dark) .fkd--v2 .fkd-acts #dislikeCount.text-red-600 { color: #be123c; }
.fkd--v2 .fkd-acts #likeBtn:hover { color: var(--fk-active-ic); }
.fkd--v2 .fkd-acts #dislikeBtn:hover { color: #fb7185; }
html:not(.dark) .fkd--v2 .fkd-acts #dislikeBtn:hover { color: #be123c; }
/* telefonda: like/dislike bitta to'liq qator (2 ustun), ostida treyler/yuklab olish —
ikonka tepada, yozuv pastda. Uchinchi tugma qo'shilsa, ustunlar o'zi 3 ga bo'linadi. */
@media (max-width: 1023px) {
.fkd--v2 .fkd-acts { display: grid; grid-template-columns: minmax(0, 1fr); }
.fkd--v2 .fkd-acts > #reactionBox { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.fkd--v2 .fkd-acts #likeBtn, .fkd--v2 .fkd-acts #dislikeBtn { width: 100%; height: 40px; justify-content: center; gap: 10px; padding: 0 12px; }
.fkd--v2 .fkd-acts > div:last-child { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.fkd--v2 .fkd-acts > div:last-child > * { flex-direction: column; align-items: center; justify-content: center; gap: 5px;
width: auto; height: auto; min-height: 54px; padding: 7px 6px; border-radius: 10px; }
.fkd--v2 .fkd-acts > div:last-child > * > span { display: inline; font-size: 11.5px; line-height: 1.2; }
.fkd--v2 .fkd-acts > div:last-child i.freek-icon, .fkd--v2 .fkd-acts > div:last-child svg { width: 19px; height: 19px; }
}
/* ---------- breadcrumb: fon qutisisiz ixcham qator ---------- */
.fkd--v2 .fkd-bc { margin: 0 0 14px; padding: 0 2px; gap: 8px; background: none; border-radius: 0; font-size: 12.5px; color: var(--fk-muted); }
.fkd--v2 .fkd-bc a:hover { color: var(--fk-ink); }
.fkd--v2 .fkd-bc__sep { color: color-mix(in oklab, var(--fk-ink) 22%, transparent); }
.fkd--v2 .fkd-bc__cur { color: var(--fk-ink); font-weight: 600; }
/* desktop, kino sahifasi (sinov, foydalanuvchi): breadcrumb ostida nozik chiziq — o'ngdagi "Tavsiyalar" sarlavhasi
chizig'i bilan bir balandlikda va bir xil tonda (8%), matni "Tavsiyalar" bilan bir tayanch chiziqda */
@media (min-width: 1024px) {
.fkd--v2:not(.fkd--serial):not(.fkd--serie) .fkd-bc { padding: 5px 2px 14px; margin-bottom: 14px;
border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
}
/* ---------- tavsiyalar: bosh sahifadagi qator (poster 84px, 4% chiziq) ---------- */
.fkd--v2 .fkd-side__head { min-height: 34px; margin-bottom: 6px; padding-bottom: 12px; font-size: 16px; font-weight: 700; line-height: 24px;
border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
.fkd--v2 .fkd-side__head i { display: none; }
@media (max-width: 1023px) { .fkd--v2 .fkd-side { margin-top: 26px; } }
/* kino sahifasi tavsiyalari — bosh sahifa lentasidagi kontent kartochkasi (x-list-row, tavsifsiz);
ustun tor bo'lgani uchun desktop sidebar'da ham telefondagi ixcham ko'rinish */
.fkd--v2 .fkd-recs { container: fklist / inline-size; display: flex; flex-direction: column; gap: 4px; }
/* desktop: kartochka telefondagi o'lchamda qoladi (84px poster), joyni ustun kengligi beradi; ichki chekka kichikroq */
@media (min-width: 1024px) {
.fkd--v2 .fkd-recs .fkrow { padding: 10px 8px; }
.fkd--v2 .fkd-recs .fkrow::after { left: 8px; right: 8px; }
}
/* asosiy qism va sidebar orasida bosh sahifadagi 3% vertikal chiziq (uchlari so'nadi) */
@media (min-width: 1024px) {
.fkd--v2:not(.fkd--serial) { gap: 0; background: linear-gradient(transparent, color-mix(in oklab, var(--fk-ink) 3%, transparent) 120px,
color-mix(in oklab, var(--fk-ink) 3%, transparent) calc(100% - 220px), transparent) 75% 0 / 1px 100% no-repeat; }
}
/* ---------- aktyorlar lentasi: ixcham to'rtburchak kartochkalar, tugmalar bilan bir xil ton ---------- */
.fkd--v2 .fkd-cast { gap: 8px; margin: 14px 0 0; padding-bottom: 2px; }
.fkd--v2 .fkd-cast__item { gap: 9px; height: 48px; padding: 4px 14px 4px 4px; border-radius: 10px; background: var(--fkd-tint); transition: background-color 0.15s; }
.fkd--v2 .fkd-cast__item:hover { background: var(--fkd-tint-2); }
.fkd--v2 .fkd-cast__item > div:first-child { width: 40px; height: 40px; }
.fkd--v2 .fkd-cast__item > div:first-child > * { border-radius: 7px; }
.fkd--v2 .fkd-cast__item p:first-child { font-size: 13px; font-weight: 600; color: var(--fk-ink); }
.fkd--v2 .fkd-cast__item p + p { font-size: 11.5px; color: var(--fk-muted); }
/* ---------- pleer ramkasi desktopda ham chegarasiz ---------- */
.fkd--v2 .fkd-player { border: 0; }
/* ---------- desktopda header va breadcrumb orasi bosh sahifadagidek qisqa ---------- */
@media (min-width: 1024px) {
html.fk-preview:has(.fkh--d):has(.fkd--v2) body > div.container { margin-top: 76px; }
}
/* telefonda "Uzbek tilida • HD" qatori va pleer orasida nafas */
@media (max-width: 1023px) {
.fkd--v2:not(.fkd--serial):not(.fkd--serie) .fkd-head { padding-bottom: 18px; }
}
/* ---------- like/dislike ikonkalari (SVG): kontur, bosilganda to'liq bo'yaladi ---------- */
.fkd--v2 .fkd-thumb { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round; transition: fill 0.15s; }
.fkd--v2 #likeBtn.text-green-600 .fkd-thumb, .fkd--v2 #dislikeBtn.text-red-600 .fkd-thumb { fill: currentColor; }
.fkd--v2 #likeBtn.text-green-600 .fkd-thumb path:first-child, .fkd--v2 #dislikeBtn.text-red-600 .fkd-thumb path:first-child { stroke: var(--background); }
/* ---------- "Ishlamayaptimi?" oynasi (body'ga qo'shiladi — .fkd tokenlariga bog'lanmagan) ---------- */
html.fk-preview .fkd-report { margin: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 16px;
background: var(--fk-panel); color: var(--fk-ink); box-shadow: var(--fk-shadow); }
html.fk-preview .fkd-report::backdrop { background: rgba(6, 8, 7, 0.72); }
html.fk-preview .fkd-report__box { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px; }
html.fk-preview .fkd-report__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.fk-preview .fkd-report__title { margin: 0; font-size: 17px; font-weight: 700; }
html.fk-preview .fkd-report__x { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px;
background: color-mix(in oklab, var(--fk-ink) 7%, transparent); color: var(--fk-ink); cursor: pointer; }
html.fk-preview .fkd-report__x:hover { background: color-mix(in oklab, var(--fk-ink) 12%, transparent); }
html.fk-preview .fkd-report__sub { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--fk-muted); }
html.fk-preview .fkd-report__opts { display: flex; flex-direction: column; gap: 6px; }
html.fk-preview .fkd-report__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
background: color-mix(in oklab, var(--fk-ink) 6%, transparent); font-size: 14px; transition: background-color 0.15s, color 0.15s; }
html.fk-preview .fkd-report__opt:hover { background: color-mix(in oklab, var(--fk-ink) 10%, transparent); }
html.fk-preview .fkd-report__opt:has(input:checked) { background: var(--fk-active-bg); color: var(--fk-active-ink); }
html.fk-preview .fkd-report__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--fk-active-ic); }
html.fk-preview .fkd-report__note { width: 100%; min-height: 76px; padding: 10px 12px; border: 0; border-radius: 10px; resize: vertical;
background: color-mix(in oklab, var(--fk-ink) 6%, transparent); color: var(--fk-ink); font: inherit; font-size: 14px; }
html.fk-preview .fkd-report__note::placeholder { color: var(--fk-muted); }
html.fk-preview .fkd-report__note:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 0; }
html.fk-preview .fkd-report__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
html.fk-preview .fkd-report__msg { margin: 0; font-size: 13px; color: var(--fk-active-ink); }
html.fk-preview .fkd-report__msg.is-error { color: #fb7185; }
html:not(.dark).fk-preview .fkd-report__msg.is-error { color: #be123c; }
html.fk-preview .fkd-report__actions { display: flex; justify-content: flex-end; gap: 8px; }
html.fk-preview .fkd-report__btn { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
html.fk-preview .fkd-report__btn--ghost { background: color-mix(in oklab, var(--fk-ink) 7%, transparent); color: var(--fk-ink); }
html.fk-preview .fkd-report__btn--primary { background: var(--brand); color: var(--brand-foreground); }
html.fk-preview .fkd-report__btn--primary:hover { background: var(--brand-hover); }
html.fk-preview .fkd-report__btn:disabled { opacity: 0.6; cursor: default; }
html.fk-preview .fkd-report__btn:focus-visible, html.fk-preview .fkd-report__x:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* juda uzun nom (70+ belgi, admin nomga ro'yxat yozgan holatlar): sarlavha kichikroq */
.fkd--v2 .fkd-head__title h1.fkd-h1--long { font-size: 16px; line-height: 1.35; }
/* kino sahifasi: tavsiyalar ustuni kengroq (foydalanuvchi) — 30%, lekin 340px'dan tor emas (1024px'da ham
kartochka telefondagi o'lchamda sig'adi); ustunlar orasidagi chekka 24 → 20px. Serial va qism sahifalari o'zgarmaydi. */
@media (min-width: 1024px) {
.fkd--v2:not(.fkd--serial):not(.fkd--serie) { background-position: calc(100% - max(30%, 340px)) 0; }
.fkd--v2:not(.fkd--serial):not(.fkd--serie) > .fkd__main { width: auto; flex: 1 1 0; min-width: 0; padding-right: 20px; }
.fkd--v2:not(.fkd--serial):not(.fkd--serie) > .fkd-side { width: max(30%, 340px); flex: none; padding-left: 20px; }
}
/* yorug' temada IMDb raqami (text-yellow-400) oq fonda xira edi — to'qroq sariq */
html:not(.dark) .fkd--v2 .fkd-rating span:last-child { color: #a16207; }
/* janr havolalari barmoq bilan bosishga yetarli (Lighthouse target-size: kamida 24px) */
@media (max-width: 1023px) {
.fkd--v2 .fkd-genres a { display: inline-block; padding-block: 4px; }
.fkd--v2 .fkd-genres { row-gap: 0; }
}
/* telefon va planshet: faktlar ustuni sayqali
- davlatlar janrlardagidek "·" bilan (HTML'dagi "•" yashirin), bosish maydoni janrlar bilan bir xil (26px);
- har bir davlat/janr nomi butun qoladi — tor ekranda (320px) nom o'rtasidan bo'linmaydi, keyingi qatorga o'tadi;
- "Tomosha qilish" tagi poster tagi bilan aynan bir chiziqda, matni faktlar bilan muvozanatda (15px) */
@media (max-width: 1023px) {
.fkd--v2 .fkd-countries { flex-wrap: wrap; column-gap: 5px; row-gap: 0; }
.fkd--v2 .fkd-countries > span { display: none; }
.fkd--v2 .fkd-countries a:not(:last-of-type)::after { content: "·"; content: "·" / ""; margin-left: 5px; opacity: 0.45; }
.fkd--v2 .fkd-countries a { display: inline-block; padding-block: 4px; }
.fkd--v2 .fkd-head .fkd-watch { margin-bottom: 0; gap: 6px; padding: 0 10px; font-size: 15px; white-space: nowrap; } /* .fkd-head — pastdagi 2px qoidadan kuchli; 320px'da ham bir qatorda */
.fkd--v2 .fkd-head .fkd-watch i { width: 18px; height: 18px; flex-shrink: 0; }
/* ikonka siqilmaydi; davlatlar ikki-uch qatorga o'ralsa ikonka janrlardagidek birinchi qatorda turadi */
.fkd--v2 .fkd-facts i.freek-icon { flex-shrink: 0; }
}
/* ---------- treyler oynasi ---------- */
html.fk-preview:has(.fkd--v2) #trailerModal { z-index: 90; background: rgba(6, 8, 7, 0.9); backdrop-filter: none; } /* header (z 70) ustida */
html.fk-preview:has(.fkd--v2) #trailerModal > div > div { border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); }
html.fk-preview:has(.fkd--v2) #closeTrailer { top: -52px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #fff; transition: background-color 0.15s; }
html.fk-preview:has(.fkd--v2) #closeTrailer:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
html.fk-preview:has(.fkd--v2) #closeTrailer:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
html.fk-preview:has(.fkd--v2) #closeTrailer svg { width: 20px; height: 20px; }
/* 2-variant, telefon va planshet (portret): poster chapda, o'ng tomonda faktlar va tugma.
Telefonda faktlar o'z uslubida — ikonka kichik, matn ixcham (tor ustunga mos). */
@media (max-width: 1023px) {
.fkd--v2 .fkd-head { grid-template-columns: 136px minmax(0, 1fr);
grid-template-areas: "title title" "poster info" "poster watch" "plot plot";
justify-items: start; column-gap: 14px; row-gap: 10px; padding-bottom: 10px; }
.fkd--v2 .fkd-head__title { align-items: flex-start; text-align: left; gap: 6px; }
.fkd--v2 .fkd-head__meta { justify-content: flex-start; }
.fkd--v2 .fkd-head__poster { width: 136px; }
.fkd--v2 .fkd-head__info { align-self: start; gap: 0; padding: 0; border-top: 0; }
/* tugma — o'ng ustunda, poster pastiga tekislangan (to'liq en emas) */
.fkd--v2 .fkd-watch { width: 100%; height: 38px; align-self: end; margin-bottom: 2px; }
/* faktlar: ustun, ixcham */
.fkd--v2 .fkd-facts { flex-direction: column; flex-wrap: nowrap; gap: 7px; overflow: visible; padding-right: 0;
-webkit-mask-image: none; mask-image: none; }
.fkd--v2 .fkd-facts > .w-px { display: none; }
.fkd--v2 .fkd-facts > div { width: 100%; margin: 0; gap: 7px; }
/* faktlar ustuni: qatorlar orasida bilinar-bilinmas chiziq (uchlari so'nadi), qiymat aniqroq */
.fkd--v2 .fkd-facts { gap: 0; }
.fkd--v2 .fkd-facts i.freek-icon { width: 21px; height: 21px; opacity: 0.55; }
.fkd--v2 .fkd-facts > div { position: relative; min-height: 38px; padding: 4px 0; }
.fkd--v2 .fkd-facts > div + div::before { content: ""; position: absolute; left: 0; right: 4px; top: 0; height: 1px;
background: linear-gradient(90deg, color-mix(in oklab, var(--fk-ink) 7%, transparent), color-mix(in oklab, var(--fk-ink) 7%, transparent) 70%, transparent); }
.fkd--v2 .fkd-facts > div > div > :last-child,
.fkd--v2 .fkd-facts > div > div > :last-child a { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
/* ikki qatorli janrlarda ikonka birinchi qator bilan tekislanadi */
.fkd--v2 .fkd-facts > div:last-child { align-items: flex-start; padding-top: 8px; }
.fkd--v2 .fkd-facts > div:last-child i.freek-icon { margin-top: 1px; }
.fkd--v2 .fkd-facts > div:last-child > div { gap: 1px; }
.fkd--v2 .fkd-facts > div > div > :last-child,
.fkd--v2 .fkd-facts > div > div > :last-child a { font-size: 13px; white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (min-width: 560px) and (max-width: 1023px) {
.fkd--v2 .fkd-head { grid-template-columns: 170px minmax(0, 1fr); column-gap: 18px; }
.fkd--v2 .fkd-head__poster { width: 170px; }
.fkd--v2 .fkd-watch { width: auto; min-width: 220px; }
}
/* kino sahifasi, telefon va planshet (sinov, foydalanuvchi): eski saytdagidek markazlashgan tepa blok —
sarlavha va reyting markazda, poster markazda, ostida poster enidagi "Tomosha qilish", keyin faktlar markazda
(yil, davomiylik, davlat bir qatorda; janrlar alohida qatorda). Faktlar orasida tik chiziq emas, bo'shliq:
markazlashgan qator o'ralganda chiziq qator boshida osilib qolmaydi. Syujet ustida nozik chiziq.
Serial sahifasi o'zgarmaydi (.fkd-head--side faqat kino sahifasida). */
@media (max-width: 1023px) {
.fkd--v2 .fkd-head--side { --fkd-pw: min(200px, 56vw); grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
grid-template-areas: "title" "poster" "watch" "info" "plot"; justify-items: center; row-gap: 12px; }
.fkd--v2 .fkd-head--side .fkd-head__title { align-items: center; text-align: center; gap: 6px; }
.fkd--v2 .fkd-head--side .fkd-head__meta { justify-content: center; }
.fkd--v2 .fkd-head--side .fkd-head__poster { width: var(--fkd-pw); margin-top: 2px; }
.fkd--v2 .fkd-head--side .fkd-watch { width: var(--fkd-pw); min-width: 0; height: 42px; align-self: auto; justify-self: center; }
.fkd--v2 .fkd-head--side .fkd-head__info { width: 100%; align-self: auto; padding: 2px 0 0; }
.fkd--v2 .fkd-head--side .fkd-facts { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 18px; row-gap: 2px; }
.fkd--v2 .fkd-head--side .fkd-facts > div { flex: 0 1 auto; width: auto; max-width: 100%; min-width: 0; min-height: 30px; padding: 0; margin: 0; gap: 6px; align-items: center; } /* toraya oladi — uzun davlatlar ro'yxati o'raladi */
.fkd--v2 .fkd-head--side .fkd-facts > div::before { display: none; }
.fkd--v2 .fkd-head--side .fkd-facts > div i.freek-icon { margin-top: 0; }
.fkd--v2 .fkd-head--side .fkd-facts > div > div > :last-child,
.fkd--v2 .fkd-head--side .fkd-facts > div > div > :last-child a { font-size: 14px; font-weight: 600; line-height: 1.35; }
.fkd--v2 .fkd-head--side .fkd-genres,
.fkd--v2 .fkd-head--side .fkd-countries { justify-content: center; }
.fkd--v2 .fkd-head--side .fkd-plot { margin-top: 6px; }
/* faktlar qatori: ustida va ostida nozik chiziq, bitta qatorda — sig'masa yon tomonga suriladi (foydalanuvchi);
sig'sa markazda turadi (margin auto — justify-content: center suriladigan qatorda chap tomonni kesib qo'yardi) */
.fkd--v2 .fkd-head--side .fkd-facts { flex-wrap: nowrap; justify-content: flex-start; column-gap: 20px; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; padding: 10px 0; border-block: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
.fkd--v2 .fkd-head--side .fkd-facts::-webkit-scrollbar { display: none; }
.fkd--v2 .fkd-head--side .fkd-facts > div { flex: none; max-width: none; }
.fkd--v2 .fkd-head--side .fkd-facts > div:first-child { margin-left: auto; }
.fkd--v2 .fkd-head--side .fkd-facts > div:last-child { margin-right: auto; }
.fkd--v2 .fkd-head--side .fkd-facts i.freek-icon { opacity: 0.6; }
.fkd--v2 .fkd-head--side .fkd-countries { flex-wrap: nowrap; }
/* faktlar orasida desktopdagidek qisqa tik chiziq (foydalanuvchi) — qator o'ralmaydi, chiziq osilib qolmaydi */
.fkd--v2 .fkd-head--side .fkd-facts > div:not(.w-px) ~ div:not(.w-px)::before { content: ""; display: block; position: absolute;
left: -10.5px; right: auto; top: 50%; width: 1px; height: 26px; margin-top: -13px; background: color-mix(in oklab, var(--fk-ink) 12%, transparent); }
/* janr va to'plam chip'lari markazda, o'raladi */
.fkd--v2 .fkd-head--side .fkd-chips { width: 100%; margin-top: 12px; }
.fkd--v2 .fkd-head--side .fkd-genres { justify-content: center; flex-wrap: wrap; column-gap: 6px; row-gap: 6px; }
.fkd--v2 .fkd-head--side .fkd-genres a::after { content: none; }
.fkd--v2 .fkd-head--side .fkd-chips .fkd-genres a { padding: 5px 11px; border-radius: 8px; background: var(--fkd-tint);
font-size: 13px; font-weight: 500; line-height: 1.35; }
}
@media (min-width: 560px) and (max-width: 1023px) {
.fkd--v2 .fkd-head--side { --fkd-pw: 220px; }
}
/* kino sahifasi (telefon va desktop):
- janr va to'plam chip'larining har birida teg ikonkasi (to'plamlar janrlar bilan bitta qatorda, xuddi janrdek);
- yil, davomiylik va davlat yorliqlari yana ko'rinadi (foydalanuvchi: "oldingidek"). Janrlar qatorida yorliq
yashirin qoladi — chip'larning o'z ikonkasi bor. */
.fkd--v2 .fkd-head--side .fkd-chips .fkd-genres a { display: inline-flex; align-items: center; gap: 5px; }
.fkd--v2 .fkd-head--side .fkd-genres a::before, .fkd--v2 .fkd-epabout__genres a::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; opacity: 0.55;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.fkd--v2 .fkd-head--side .fkd-facts > div > div > span:first-child { position: static; width: auto; height: auto; margin: 0;
overflow: visible; clip-path: none; white-space: nowrap; font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--fk-muted); }
.fkd--v2 .fkd-head--side .fkd-facts > div > div { gap: 1px; }
@media (max-width: 1023px) {
.fkd--v2 .fkd-head--side .fkd-facts > div i.freek-icon { width: 28px; height: 28px; } /* telefonda kattaroq (foydalanuvchi) */
.fkd--v2 .fkd-head--side .fkd-facts > div { gap: 7px; }
/* davlat havolasining bosish maydoni (padding 4px) saqlanadi, lekin joylashuvga ta'sir qilmaydi —
"Mamlakat:" yorlig'i "Yil:" va "Davomiyligi:" bilan bir chiziqda */
.fkd--v2 .fkd-head--side .fkd-countries a { margin-block: -4px; }
.fkd--v2 .fkd-head--side .fkd-countries { row-gap: 4px; }
}
/* Telefon/planshet faktlar qatori — sayqal (2026-09-17, foydalanuvchi: oraliqlar va ikonka balandligi).
O'lchovlar Plus Jakarta Sans bo'yicha (Playwright, 360–412px):
- yorliq 12px/14.4px + 1px + qiymat 14px/18.9px: ko'rinadigan matn "Yil:" bosh harfi tepasidan qiymat asosiy
chizig'igacha (baseline) 28.14px, matn qutisi tepasidan 2.72px pastda boshlanadi;
- ikonkalar 24×24 viewBox, chizilgan qismi stroke bilan y=1…23 (22/24) → quti 28.14×24/22 = 30.7px, glyph ichki
chekkasi 1.28px; tepadan 2.72−1.28 = 1.44px → ikonkaning ko'rinadigan qismi aynan matn tepasi…tagiga teng;
- tik ajratkich ham shu 28.14px oraliqda; optik markazda (matn oxiri → chiziq = chiziq → glyph, 10.6px);
- chiziq → matn tepasi = matn tagi → chiziq = 13px; tugma → chiziq = chiziq → janr chiplari = 14px;
- qator sig'masa suriladi (avvalgidek); qaysi tomonda davomi bo'lsa o'sha chet so'nadi — scroll-driven animatsiya,
JS'siz; qo'llamaydigan brauzerda (Firefox) avvalgidek. Sig'sa timeline faol emas → niqob yo'q. */
@property --fkd-fl { syntax: ""; inherits: false; initial-value: 0px; }
@property --fkd-fr { syntax: ""; inherits: false; initial-value: 0px; }
@keyframes fkd-facts-edge {
0% { --fkd-fl: 0px; --fkd-fr: 28px; }
12% { --fkd-fl: 28px; }
88% { --fkd-fr: 28px; }
100% { --fkd-fl: 28px; --fkd-fr: 0px; }
}
@media (max-width: 1023px) {
.fkd--v2 .fkd-head--side .fkd-facts { column-gap: 22px; padding: 10.28px 0 9.56px; }
.fkd--v2 .fkd-head--side .fkd-facts > div { gap: 8px; align-items: flex-start; }
.fkd--v2 .fkd-head--side .fkd-facts > div i.freek-icon { width: 30.7px; height: 30.7px; margin-top: 1.44px; }
.fkd--v2 .fkd-head--side .fkd-facts > div:not(.w-px) ~ div:not(.w-px)::before { left: -10.36px; top: 2.72px; height: 28.14px; margin-top: 0; }
.fkd--v2 .fkd-head--side .fkd-chips { margin-top: 14px; }
/* serialdagi "Qismlar": fi-rectangles — heroicons solid (glyph y=3…21, to'ldirilgan), qolganlari lucide kontur
(y=1…23) — balandligi matnga teng bo'lmasdi va og'ir ko'rinardi. Shu qatorda lucide gallery-vertical-end
(xuddi shu ustma-ust to'rtburchaklar g'oyasi); boshqa joylardagi fi-rectangles o'zgarmaydi. */
.fkd--v2 .fkd-head--side .fkd-facts .fi-rectangles { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 2h10%22/%3E%3Cpath d=%22M5 6h14%22/%3E%3Crect width=%2218%22 height=%2212%22 x=%223%22 y=%2210%22 rx=%222%22/%3E%3C/svg%3E"); }
@supports (animation-timeline: scroll()) {
.fkd--v2 .fkd-head--side .fkd-facts {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fkd-fl), #000 calc(100% - var(--fkd-fr)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--fkd-fl), #000 calc(100% - var(--fkd-fr)), transparent);
animation: fkd-facts-edge linear both; animation-timeline: scroll(self inline); }
}
}
/* kinomo: pleer ostidagi panel — reaksiya bitta bo'lingan pill, tugmalar teng plitkalar */
@media (min-width: 1024px) {
/* 2 — Erkin: chapda poster, o'ngda sarlavha/tugma/syujet; faktlar va janrlar pastda to'liq enida */
.fkd--v2 .fkd-head { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "poster title" "poster watch" "poster plot" "info info";
justify-items: start; column-gap: 24px; row-gap: 14px; }
.fkd--v2 .fkd-head__info { justify-self: stretch; margin-top: 4px; }
/* 3 — Gibrid: hammasi poster yonida (kinomodagi kabi) */
.fkd--v2 .fkd-head__title { align-items: flex-start; gap: 5px; text-align: left; }
.fkd--v2 .fkd-head__meta { justify-content: flex-start; }
.fkd--v2 .fkd-head__info { align-self: start; }
.fkd--v2 .fkd-watch { width: auto; }
.fkd--v2 .fkd-head__title h1 { font-size: 26px; }
.fkd--v2 .fkd-watch { height: 38px; padding: 0 16px; font-size: 14px; } /* desktopda ixchamroq */
}
/* kino sahifasi: poster va "Tomosha qilish" bitta ustunda. Telefon/planshetda o'ram yo'qdek — joylashuv o'zgarmaydi */
.fkd--v2 .fkd-head__side { display: contents; }
@media (min-width: 1024px) {
/* syujet qatori (1fr) balandligini poster ustuni beradi: syujet undan pastga tushmaydi */
.fkd--v2 .fkd-head__side { grid-area: side; display: flex; flex-direction: column; gap: 12px; width: 200px; align-self: start; }
.fkd--v2 .fkd-head--side .fkd-plot { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* yopiq holatda blok o'z matnidan balandlik olmaydi (contain) — sahifa JS'dan oldin ham, keyin ham sakramaydi */
.fkd--v2 .fkd-head--side .fkd-plot:not(.is-open) { contain: size; overflow: hidden; }
.fkd--v2 .fkd-head--side .fkd-plot:not(.is-open) .fkd-plot__p { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.fkd--v2 .fkd-head--side .fkd-plot.is-cut:not(.is-open) .fkd-plot__p { display: -webkit-box; -webkit-box-orient: vertical; }
.fkd--v2 .fkd-head--side .fkd-plot__more { flex-shrink: 0; }
/* "Uzbek tilida • HD • Online tomosha" blok tagida — matn tagi "Tomosha qilish" tugmasi tagi bilan bir chiziqda */
.fkd--v2 .fkd-head--side .fkd-plot:not(.is-open) .fkd-sub2 { flex-shrink: 0; margin-top: auto; padding-top: 8px;
position: relative; top: 0.3em; } /* qator oralig'ining pastki qismi — matn tagi aynan tugma tagiga tushadi */
/* faktlar qatori (desktop):
- chiziq→qator va qator→pleer oraliqlari teng (ko'rinadigan ikonka/matn bo'yicha ~17px);
- tik ajratgich har guruhning chap tomonida chiziladi, qator boshidagisi kesiladi — qator ikkiga bo'linganda
birinchi qator oxirida ajratgich osilib qolmaydi; rangi mavzu tokenidan (yorug' mavzuda ham ko'rinadi);
- davlatlar orasida janrlardagidek "·" (HTML'dagi "•" yashiriladi), ro'yxat kerak bo'lsa o'raladi, nomlar kesilmaydi;
- havola: hover'da ma'lumot blokidagidek rang + tag chizig'i, klaviatura fokusi ko'rinadi */
.fkd--v2 .fkd-head--side .fkd-head__info { padding: 13px 0 0; overflow-x: clip; }
.fkd--v2 .fkd-head--side .fkd-facts > div { position: relative; padding-left: 29px; }
.fkd--v2 .fkd-head--side .fkd-facts > div::before { content: ""; position: absolute; left: 14px; top: 50%; width: 1px; height: 22px;
margin-top: -11px; background: color-mix(in oklab, var(--fk-ink) 12%, transparent); }
.fkd--v2 .fkd-head--side .fkd-countries { flex-wrap: wrap; column-gap: 5px; row-gap: 2px; }
.fkd--v2 .fkd-head--side .fkd-countries > span { display: none; }
.fkd--v2 .fkd-head--side .fkd-countries a:not(:last-of-type)::after { content: "·"; content: "·" / ""; margin-left: 5px; opacity: 0.45; }
.fkd--v2 .fkd-head--side .fkd-facts a { overflow: visible; text-overflow: clip; text-underline-offset: 3px; border-radius: 3px; }
.fkd--v2 .fkd-head--side .fkd-facts a:hover { color: var(--fk-active-ink); }
.fkd--v2 .fkd-head--side .fkd-facts a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
.fkd--v2 .fkd-head--side .fkd-head__poster { align-self: start; }
/* "Tomosha qilish" desktopda oq emas, chip rangida (foydalanuvchi); play ikonkasi matn rangida */
.fkd--v2 .fkd-head--side .fkd-watch:hover { background: var(--fkd-tint-2); }
html:not(.dark) .fkd--v2 .fkd-head--side .fkd-watch,
html:not(.dark) .fkd--v2 .fkd-head--side .fkd-watch:hover { color: var(--fk-ink); }
html:not(.dark) .fkd--v2 .fkd-head--side .fkd-watch:hover { background: var(--fkd-tint-2); }
.fkd--v2 .fkd-head--side .fkd-head__info { margin-top: 0; padding: 2px 0 0; border-top: 0; }
/* qisqartirilganda paragraflar bitta matn (telefondagidek) — oxirgi ko'rinadigan qator bo'sh qator + "…" bo'lib qolmaydi */
.fkd--v2 .fkd-head--side .fkd-plot.is-cut:not(.is-open) .fkd-plot__p br { display: none; }
/* janrlar telefondagidek fonli chip'lar (foydalanuvchi): ikonka va nuqtalarsiz, hover'da fon to'qroq */
.fkd--v2 .fkd-head--side .fkd-genres { column-gap: 6px; row-gap: 6px; }
.fkd--v2 .fkd-head--side .fkd-genres a::after { content: none; }
.fkd--v2 .fkd-head--side .fkd-chips .fkd-genres a { padding: 5px 11px; border-radius: 8px; background: var(--fkd-tint);
color: var(--fk-ink); font-size: 13px; font-weight: 500; line-height: 1.35; text-decoration: none; transition: background-color 0.15s; }
.fkd--v2 .fkd-head--side .fkd-chips .fkd-genres a:hover { background: var(--fkd-tint-2); color: var(--fk-ink); }
.fkd--v2 .fkd-head--side .fkd-chips .fkd-genres a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* aktyorlar qatori to'liq enida: teng bo'linadi, lekin hech bir kartochka ismidan tor bo'lmaydi
(sig'masa oldingidek yon tomonga suriladi) */
.fkd--v2:not(.fkd--serial):not(.fkd--serie) .fkd-cast__item { flex: 1 0 0; min-width: max-content; }
}
/* =====================================================================
PREVIEW 10 — kino sahifasi, desktop "K" varianti (?dv=k, sinov): kinomo tamoyillari asosida —
chapda poster (tugmasiz), o'ngda sarlavha, uning ostida janr va to'plamlar oddiy matnda, keyin
ixcham jadval (ikonka + yorliq chapda, qiymat o'ngda, qatorlar orasida chiziq), keyin syujet.
Pleer ostida like/dislike to'liq enida, tugmalar teng plitkalarda (ikonka tepada). Faqat CSS.
===================================================================== */
@media (min-width: 1024px) {
.fkd--v2.fkd--k .fkd-head--side { grid-template-columns: 220px minmax(0, 1fr); column-gap: 28px; row-gap: 12px;
grid-template-rows: auto auto 1fr auto; grid-template-areas: "side title" "side facts" "side plot" "chips chips"; }
/* chap ustun: faqat poster, o'zi tugma (foydalanuvchi bilan kelishilgan): oddiy holatda toza; sichqoncha borganda poster
biroz qorayadi va pastda markazda play ikonkali "Tomosha qilish" paydo bo'ladi. Butun poster bosiladi (tugmaning ::after
qatlami poster o'lchamida). Hover bo'lmagan qurilmada tugma doim ko'rinadi; klaviatura fokusida ham ko'rinadi. */
.fkd--v2.fkd--k .fkd-head--side .fkd-head__side { grid-area: side; position: relative; display: flex; flex-direction: column; width: 220px; align-self: start; }
.fkd--v2.fkd--k .fkd-head--side .fkd-head__poster { width: 220px; }
.fkd--v2.fkd--k .fkd-head--side .fkd-head__poster > div::after { content: ""; position: absolute; inset: 0; background: rgba(8, 9, 8, 0.38);
opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
html .fkd--v2.fkd--k .fkd-head--side .fkd-watch { position: absolute; left: 14px; right: 14px; top: auto; bottom: 14px; z-index: 2; transform: none;
width: auto; justify-self: stretch; height: 40px; padding: 0 16px; /* pastdan va ikki yondan bir xil 14px (foydalanuvchi); stretch — abspos'da start kenglikni qisqartirardi */ gap: 8px; border-radius: 10px; background: rgba(14, 15, 14, 0.62); color: #fff;
font-size: 14.5px; font-weight: 600; white-space: nowrap; text-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s; }
html .fkd--v2.fkd--k .fkd-head--side .fkd-watch::after { content: ""; position: absolute; left: -14px; top: auto; bottom: -14px; width: 220px; height: 330px;
transform: none; border-radius: 12px; } /* butun poster bosiladi */
html .fkd--v2.fkd--k .fkd-head--side .fkd-watch:hover { background: rgba(14, 15, 14, 0.8); color: #fff; }
html .fkd--v2.fkd--k .fkd-head--side .fkd-watch i { display: block; width: 18px; height: 18px; flex-shrink: 0; filter: invert(1); }
@media (hover: hover) {
html .fkd--v2.fkd--k .fkd-head--side .fkd-watch { opacity: 0; transform: translateY(8px); }
html .fkd--v2.fkd--k .fkd-head--side .fkd-head__side:hover .fkd-watch,
html .fkd--v2.fkd--k .fkd-head--side .fkd-head__side:has(.fkd-watch:focus-visible) .fkd-watch { opacity: 1; transform: none; } /* faqat klaviatura fokusi — sichqoncha bilan bosilgach qolib ketmaydi */
.fkd--v2.fkd--k .fkd-head--side .fkd-head__side:hover .fkd-head__poster > div::after,
.fkd--v2.fkd--k .fkd-head--side .fkd-head__side:has(.fkd-watch:focus-visible) .fkd-head__poster > div::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
html .fkd--v2.fkd--k .fkd-head--side .fkd-watch { transition: none; }
}
/* yosh belgisi tugma bilan to'qnashmasin — chap tepada */
.fkd--v2.fkd--k .fkd-head--side .fkd-head__poster .bottom-2.left-2 { top: 8px; bottom: auto; }
.fkd--v2.fkd--k .fkd-head--side .fkd-head__title h1 { font-size: 24px; }
.fkd--v2.fkd--k .fkd-head--side .fkd-head__info { display: contents; }
/* janr va to'plam chip'lari — tepa blok ostida, pleerdan tepada, butun enida (foydalanuvchi) */
.fkd--v2.fkd--k .fkd-head--side .fkd-chips { grid-area: chips; margin: 6px 0 0; }
/* faktlar — ixcham jadval */
.fkd--v2.fkd--k .fkd-head--side .fkd-facts { grid-area: facts; width: min(440px, 100%); margin: 0; padding: 0;
flex-direction: column; flex-wrap: nowrap; gap: 0; overflow: visible; }
.fkd--v2.fkd--k .fkd-head--side .fkd-facts > .w-px { display: none; }
.fkd--v2.fkd--k .fkd-head--side .fkd-facts > div:not(.w-px) { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center;
column-gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
.fkd--v2.fkd--k .fkd-head--side .fkd-facts > div:not(.w-px)::before { display: none; }
.fkd--v2.fkd--k .fkd-head--side .fkd-facts i.freek-icon { width: 20px; height: 20px; opacity: 0.55; }
.fkd--v2.fkd--k .fkd-head--side .fkd-facts > div > div { display: contents; }
.fkd--v2.fkd--k .fkd-head--side .fkd-facts > div > div > span:first-child { font-size: 13px; color: var(--fk-muted); }
.fkd--v2.fkd--k .fkd-head--side .fkd-facts > div > div > :last-child,
.fkd--v2.fkd--k .fkd-head--side .fkd-facts > div > div > :last-child a { justify-self: end; text-align: right; font-size: 14px; font-weight: 600; }
.fkd--v2.fkd--k .fkd-head--side .fkd-countries { justify-content: flex-end; }
/* syujet qolgan joyni oladi (poster tagigacha), kamida ~2 qator; "Uzbek tilida" matni tagi poster tagi bilan bir chiziqda */
.fkd--v2.fkd--k .fkd-head--side .fkd-plot { min-height: 100px; padding-top: 4px; border-top: 0; }
/* "Uzbek tilida…" va "Batafsil" syujet ostidagi bitta qatorda: matn chapda, "Batafsil" o'ngda; ikkalasining tagi
"Tomosha qilish" tagi bilan bir chiziqda (qator bitta, tor ekranda "…" bilan) */
.fkd--v2.fkd--k .fkd-head--side .fkd-plot .fkd-sub2 { position: relative; top: 8px; display: block; box-sizing: border-box; height: 26px;
padding: 0; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Batafsil" alohida qator egallamaydi: pastki qatorning o'ng chetida, kichik va xira (foydalanuvchi) —
bo'shagan joyga syujetning yana bir qatori sig'adi (JS absolyut tugmani hisobga olmaydi) */
.fkd--v2.fkd--k .fkd-head--side .fkd-plot { position: relative; }
.fkd--v2.fkd--k .fkd-head--side .fkd-plot__more { position: absolute; right: 0; bottom: -7px; z-index: 1; display: block; height: 26px; margin: 0; padding: 0;
line-height: 26px; color: var(--fk-muted); font-size: 12.5px; font-weight: 500; } /* "Uzbek tilida" qatori bilan bir xil geometriya */
.fkd--v2.fkd--k .fkd-head--side .fkd-plot__more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: 3px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.8; }
.fkd--v2.fkd--k .fkd-head--side .fkd-plot.is-open .fkd-plot__more::after { vertical-align: 0; transform: rotate(-135deg); }
.fkd--v2.fkd--k .fkd-head--side .fkd-plot__more:hover { color: var(--fk-ink); text-decoration: none; }
.fkd--v2.fkd--k .fkd-head--side .fkd-plot__more:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; border-radius: 4px; }
.fkd--v2.fkd--k .fkd-head--side .fkd-plot .fkd-sub2 { align-self: stretch; padding-right: 84px; } /* ustun enida: uzun dublyaj nomi "…" bilan qisqaradi; "Batafsil" z-index bilan ustida */
/* pleer ostida: like/dislike to'liq enida, tugmalar teng plitkalarda */
.fkd--v2.fkd--k .fkd-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fkd--v2.fkd--k .fkd-acts > #reactionBox { display: grid; grid-template-columns: 1fr 1fr; }
.fkd--v2.fkd--k .fkd-acts #likeBtn, .fkd--v2.fkd--k .fkd-acts #dislikeBtn { width: 100%; height: 40px; justify-content: center; gap: 10px; }
.fkd--v2.fkd--k .fkd-acts > div:last-child { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px;
overflow: visible; border-radius: 0; background: none; }
.fkd--v2.fkd--k .fkd-acts > div:last-child > * { flex-direction: column; align-items: center; justify-content: center; gap: 6px;
width: auto; height: auto; min-height: 58px; padding: 8px; border-radius: 10px; background: var(--fkd-tint); }
.fkd--v2.fkd--k .fkd-acts > div:last-child > *:hover { background: var(--fkd-tint-2); }
.fkd--v2.fkd--k .fkd-acts > div:last-child > * + *::before { display: none; }
.fkd--v2.fkd--k .fkd-acts > div:last-child i.freek-icon, .fkd--v2.fkd--k .fkd-acts > div:last-child svg { width: 20px; height: 20px; }
}
/* =====================================================================
PREVIEW 10 — serial sahifasi (2-variant). Tepa blok kino sahifasidagi qoidalarni oladi;
bu yerda faqat serialga xos joylar: qismlar bloki, fasl tablari, tavsiyalar.
===================================================================== */
/* qismlar bloki: karta foni yo'q, sarlavha ostida 8% chiziq */
.fkd--v2 .fkd-eps { margin-top: 22px; padding: 0; border-radius: 0; background: none; }
.fkd--v2 .fkd-eps > h2 { margin-bottom: 12px; padding-bottom: 12px; font-size: 16px; font-weight: 700;
border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
.fkd--v2 .fkd-eps > h2 i.freek-icon { width: 17px; height: 17px; opacity: 0.6; }
.fkd--v2 .fkd-eps > h2 span span { padding: 2px 8px; border: 0; border-radius: 6px;
background: var(--fkd-tint); color: var(--fk-muted); font-size: 12px; font-weight: 700; }
.fkd--v2 .fkd-eps #sortToggleBtn { height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--fkd-tint); color: var(--fk-muted); }
.fkd--v2 .fkd-eps #sortToggleBtn:hover { background: var(--fkd-tint-2); color: var(--fk-ink); }
/* fasl tablari: matn tab (bosh sahifadagi kabi), faol tagida yashil chiziq */
.fkd--v2 #seasonTabs { gap: 4px; padding-bottom: 10px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none;
border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
.fkd--v2 #seasonTabs::-webkit-scrollbar { display: none; }
.fkd--v2 .fkd-season { position: relative; flex: none; padding: 7px 12px; border: 0; border-radius: 8px; background: transparent;
color: var(--fk-muted); font-size: 13.5px; font-weight: 600; }
.fkd--v2 .fkd-season:hover { background: var(--fkd-tint); color: var(--fk-ink); }
.fkd--v2 .fkd-season.bg-primary\/10 { background: var(--fkd-tint); color: var(--fk-ink); }
/* qism plitalari: chegarasiz, tonal, bir xil o'lcham */
.fkd--v2 .season-block { gap: 8px; }
.fkd--v2 .fkd-ep { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 6px; border: 0;
border-radius: 10px; background: var(--fkd-tint); transition: background-color 0.15s, color 0.15s; }
.fkd--v2 .fkd-ep:hover { background: var(--fkd-tint-2); }
.fkd--v2 .fkd-ep > div { gap: 5px; }
.fkd--v2 .fkd-ep > div > div { min-width: 0; height: auto; padding: 0; background: none; color: var(--fk-ink); font-size: 14px; font-weight: 700; }
.fkd--v2 .fkd-ep p { font-size: 12.5px; color: var(--fk-muted); font-weight: 500; }
/* tavsiyalar (pastda, 3 ustun): bosh sahifadagi qator ko'rinishi */
.fkd--v2.fkd--serial .fkd-rec, .fkd--v2.fkd--serial .group.relative.flex.items-center { gap: 12px; padding: 10px; border: 0; border-radius: 12px; background: transparent; }
.fkd--v2.fkd--serial .group.relative.flex.items-center:hover { background: var(--fk-fill); border: 0; box-shadow: none; }
.fkd--v2.fkd--serial .group.relative.flex.items-center > div:first-child { width: 72px; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; box-shadow: none; }
.fkd--v2.fkd--serial .group.relative.flex.items-center h4 { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--fk-ink); }
/* =====================================================================
PREVIEW 10 — qism sahifasi (2-variant): pleer birinchi bo'lib qoladi, atrofi sayqallanadi.
===================================================================== */
.fkd--serie .fkd-bc { margin: 0 0 12px; padding: 0 2px; gap: 8px; background: none; border-radius: 0; font-size: 12.5px; color: var(--fk-muted); }
.fkd--serie .fkd-bc a:hover { color: var(--fk-ink); }
/* pleer telefonda chetgacha */
@media (max-width: 1023px) {
.fkd--v2.fkd--serie #pleer { width: auto; margin-inline: -8px; border: 0; border-radius: 0; }
}
/* sarlavha yonidagi tugmalar: chegarasiz, bir xil balandlik */
.fkd--v2 .fkd-acts--inline button, .fkd--v2 .fkd-acts--inline a { height: 38px; padding: 0 14px; gap: 8px; border: 0; border-radius: 10px;
background: var(--fkd-tint); color: var(--fk-ink); font-size: 13px; }
.fkd--v2 .fkd-acts--inline button:hover, .fkd--v2 .fkd-acts--inline a:hover { background: var(--fkd-tint-2); }
.fkd--v2 .fkd-acts--inline #likeCount, .fkd--v2 .fkd-acts--inline #dislikeCount { min-width: 26px; height: 20px; padding: 0 7px;
border-radius: 6px; background: color-mix(in oklab, var(--fk-ink) 9%, transparent); color: inherit; font-size: 12.5px; }
.fkd--v2 .fkd-acts--inline i.freek-icon { width: 17px; height: 17px; }
.fkd--v2 .fkd-acts--inline #likeBtn.text-green-600 { background: var(--fkd-tint); color: var(--fk-active-ic); }
.fkd--v2 .fkd-acts--inline #likeCount.text-green-600 { background: color-mix(in oklab, var(--fk-active-ic) 18%, transparent); color: var(--fk-active-ink); }
.fkd--v2 .fkd-acts--inline #dislikeBtn.text-red-600 { background: var(--fkd-tint); color: #fb7185; }
.fkd--v2 .fkd-acts--inline #dislikeCount.text-red-600 { background: color-mix(in oklab, #f43f5e 18%, transparent); color: #fb7185; }
/* faktlar: kino sahifasidagidek — yorliq yashirin, ikonka 25px */
.fkd--v2.fkd--serie .fkd-facts { gap: 14px; }
.fkd--v2.fkd--serie .fkd-facts > div { gap: 8px; align-items: center; }
.fkd--v2.fkd--serie .fkd-facts i.freek-icon { width: 25px; height: 25px; opacity: 0.7; }
/* =====================================================================
PREVIEW 10 — kino sahifasi: "…filmi haqida ma'lumot" bloki olib tashlandi (foydalanuvchi, 2026-09-16).
Aktyorlar tugmalardan keyin bitta bo'limda: 5 tasi rasmli kartochka, qolganlari faqat ism (2–3 qator bilan
yig'iq, sarlavha yonida "Yana N ta"). Dublyaj va sifat "Uzbek tilida • …" qatoriga ko'chdi, boblar alohida bo'lim.
===================================================================== */
.fkd--v2 .fkd-crew, .fkd--v2 .fkd-chapters { margin-top: 28px; }
.fkd--v2 .fkd-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fkd--v2 .fkd-sec__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--fk-ink); }
.fkd--v2 .fkd-sec__more { flex-shrink: 0; padding: 0; border: 0; background: none; color: var(--fk-muted); font-size: 13px; font-weight: 500;
white-space: nowrap; cursor: pointer; transition: color 0.15s; }
.fkd--v2 .fkd-sec__more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; vertical-align: 3px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.8; }
.fkd--v2 .fkd-sec__more[aria-expanded="true"]::after { vertical-align: 0; transform: rotate(-135deg); }
.fkd--v2 .fkd-sec__more:hover { color: var(--fk-ink); }
.fkd--v2 .fkd-sec__more:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; border-radius: 4px; }
.fkd--v2 .fkd-crew .fkd-cast { margin: 0; }
.fkd--v2 .fkd-cast__initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
background: var(--fkd-tint-2); color: var(--fk-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
/* ism chiplari: yig'iq holatda telefonda 3, desktopda 2 qator (30px chip + 6px oraliq) */
.fkd--v2 .fkd-cast__names { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.fkd--v2 .fkd-cast__names:not(.is-open) { max-height: 102px; overflow: hidden; }
.fkd--v2 .fkd-cast__names li { min-width: 0; max-width: 100%; }
.fkd--v2 .fkd-cast__names a { display: block; height: 30px; padding: 0 11px; overflow: hidden; border-radius: 8px; background: var(--fkd-tint);
color: var(--fk-ink); font-size: 13px; font-weight: 500; line-height: 30px; white-space: nowrap; text-overflow: ellipsis;
text-decoration: none; transition: background-color 0.15s; }
.fkd--v2 .fkd-cast__names a:hover { background: var(--fkd-tint-2); color: var(--fk-ink); }
.fkd--v2 .fkd-cast__names a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: -2px; }
@media (min-width: 1024px) {
.fkd--v2 .fkd-cast__names:not(.is-open) { max-height: 66px; }
/* rasmli kartochka eni ism bo'yicha; rol matni kengligiga ta'sir qilmaydi va joy yetmasa "…" bilan qisqaradi
(oldin uzun rol kartochkani qator chetidan chiqarib yuborardi) */
.fkd--v2 .fkd-crew .fkd-cast__item > div + div { flex: 1 1 auto; }
.fkd--v2 .fkd-crew .fkd-cast__item p + p { width: 0; min-width: 100%; }
}
/* boblar: vaqt belgisi + nom, desktopda ikki ustun (tartib ustun bo'ylab pastga) */
.fkd--v2 .fkd-chapters__list { margin: 0; padding: 0; list-style: none; columns: 280px 2; column-gap: 12px; }
.fkd--v2 .fkd-chapters__list li { break-inside: avoid; }
.fkd--v2 .fkd-chapters__list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 4px 8px 4px 4px;
border: 0; border-radius: 10px; background: none; color: var(--fk-soft); font-size: 14px; line-height: 1.4; text-align: left;
cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.fkd--v2 .fkd-chapters__list button:hover { background: var(--fkd-tint); color: var(--fk-ink); }
.fkd--v2 .fkd-chapters__list button:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: -2px; }
.fkd--v2 .fkd-chapters__time { flex-shrink: 0; min-width: 70px; padding: 4px 8px; border-radius: 7px; background: var(--fkd-tint);
color: var(--fk-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.fkd--v2 .fkd-chapters__list button:hover .fkd-chapters__time { background: var(--fkd-tint-2); }
/* ---------- admin ogohlantirishi ("Treyler", "Rus tilida (Tez kunda uzbek tilida)"): sariq ramka o'rniga
ramkasiz yumshoq sariq fon, matn oddiy rangda, ikonka sariq (foydalanuvchi, 2026-09-16) ---------- */
.fkd--v2 .fkd-alert { align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 0; border-radius: 10px;
background: color-mix(in oklab, #f59e0b 11%, transparent); color: var(--fk-ink); font-size: 14px; }
.fkd--v2 .fkd-alert > span { font-weight: 500; line-height: 1.45; }
.fkd--v2 .fkd-alert > i.freek-icon { display: none; }
.fkd--v2 .fkd-alert::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; background: #f5a524;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
html:not(.dark) .fkd--v2 .fkd-alert { background: color-mix(in oklab, #f59e0b 16%, transparent); }
html:not(.dark) .fkd--v2 .fkd-alert::before { background: #b45309; }
/* ---------- telefon va planshet: syujet 5 qator, qolgani "Batafsil" ortida (foydalanuvchi, 2026-09-16 —
oldin faqat 900+ belgili tavsif qisqarardi, pleer ikki ekran pastga tushib ketardi). Tugma desktopdagidek
xira, strelkali. Faqat kino sahifasi (.fkd-head--side). ---------- */
@media (max-width: 1023px) {
.fkd--v2 .fkd-head--side .fkd-plot:not(.is-open):not(.is-fit) .fkd-plot__p { display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.fkd--v2 .fkd-head--side .fkd-plot:not(.is-open):not(.is-fit) .fkd-plot__p br { display: none; }
.fkd--v2 .fkd-head--side .fkd-plot__more { display: inline-flex; align-items: center; margin-top: 6px; padding: 4px 0;
color: var(--fk-muted); font-size: 13px; font-weight: 500; }
.fkd--v2 .fkd-head--side .fkd-plot__more::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.8; }
.fkd--v2 .fkd-head--side .fkd-plot.is-open .fkd-plot__more::after { margin-top: 3px; transform: rotate(-135deg); }
.fkd--v2 .fkd-head--side .fkd-plot__more:hover { color: var(--fk-ink); text-decoration: none; }
.fkd--v2 .fkd-head--side .fkd-plot__more:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; border-radius: 4px; }
}
/* ---------- tavsiyalar kartochkasi .fkcell ichida: bitta ustunda qatorlar orasidagi 4% chiziq saqlanadi
(.fkrow:last-child qoidasi har katakda ishlab ketmasin), hover'dagi qator atrofida chiziq yo'qoladi ---------- */
.fkd--v2 .fkd-recs > .fkcell:not(:last-child) .fkrow::after { display: block; }
.fkd--v2 .fkd-recs > .fkcell:has(+ .fkcell .fkrow:focus-visible) .fkrow::after { opacity: 0; }
@media (hover: hover) {
.fkd--v2 .fkd-recs > .fkcell:has(+ .fkcell .fkrow:hover) .fkrow::after { opacity: 0; }
}
/* ---------- planshet (768–1023px): tavsiyalar ikki ustunda (ro'yxat sahifalaridagidek, chiziqsiz), syujet
markazda 640px ustunda — qator uzunligi o'qishga qulay (oldin ~105 belgi edi) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
.fkd--v2:not(.fkd--serial):not(.fkd--serie) .fkd-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.fkd--v2 .fkd-recs > .fkcell:not(:last-child) .fkrow::after { display: none; } /* bitta ustundagi chiziq qoidasidan kuchli bo'lsin */
.fkd--v2 .fkd-head--side .fkd-plot { justify-self: center; width: 100%; max-width: 640px; }
.fkd--v2 .fkd-head--side .fkd-plot__p { max-width: none; font-size: 14.5px; line-height: 1.7; }
}
/* =====================================================================
PREVIEW 10 — yuklab olish sahifasi (/download/movie/…, movie/download.blade.php). Ramkasiz: poster bilan
sarlavha, variantlar tonal kartochkalarda (ikonka · sifat va hajm · amal), fayl bo'lmasa tushuntirish,
pastda o'xshash filmlar (kontent kartochkasi). Faqat uiPreview().
===================================================================== */
.fkdl { max-width: 760px; margin: 0 auto; padding: 4px 0 28px; }
.fkdl__crumbs { display: flex; align-items: center; min-width: 0; margin-bottom: 18px; font-size: 13px; color: var(--fk-muted); white-space: nowrap; }
.fkdl__crumbs > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%;
background: currentColor; opacity: 0.5; vertical-align: middle; }
.fkdl__crumbs a { color: var(--fk-muted); text-decoration: none; transition: color 0.15s; }
.fkdl__crumbs a:hover { color: var(--fk-ink); }
.fkdl__crumbs a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; border-radius: 3px; }
.fkdl__crumbs .fkdl__crumb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fkdl__crumbs [aria-current] { flex-shrink: 0; color: var(--fk-ink); font-weight: 500; }
.fkdl__head { display: flex; align-items: center; gap: 16px; }
.fkdl__poster { flex: none; width: 84px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 10px; background: var(--fk-fill); }
.fkdl__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fkdl__head-text { min-width: 0; }
.fkdl__title { margin: 0; color: var(--fk-ink); font-size: 19px; font-weight: 700; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.fkdl__meta { margin: 6px 0 0; color: var(--fk-soft); font-size: 13.5px; }
.fkdl__note { margin: 3px 0 0; color: var(--fk-muted); font-size: 13px; }
@media (min-width: 768px) {
.fkdl__head { gap: 20px; }
.fkdl__poster { width: 112px; border-radius: 12px; }
.fkdl__title { font-size: 24px; }
.fkdl__meta { margin-top: 8px; font-size: 14px; }
}
.fkdl__geo { margin-top: 20px; overflow: hidden; border-radius: 12px; }
.fkdl__list { display: grid; gap: 8px; margin-top: 22px; }
.fkdl__opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 16px 10px 10px; border: 0;
border-radius: 12px; background: var(--fk-fill); color: var(--fk-ink); font: inherit; text-align: left; text-decoration: none;
cursor: pointer; transition: background-color 0.15s; }
.fkdl__opt:hover { background: var(--fk-fill-2); color: var(--fk-ink); }
.fkdl__opt:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
.fkdl__ic { display: flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px;
background: var(--fk-active-bg); color: var(--fk-active-ic); }
.fkdl__ic svg { width: 22px; height: 22px; }
.fkdl__opt--tg .fkdl__ic { background: color-mix(in oklab, #2aabee 15%, transparent); color: #2aabee; }
html:not(.dark) .fkdl__opt--tg .fkdl__ic { color: #1f8fcc; }
.fkdl__opt--watch .fkdl__ic { background: color-mix(in oklab, var(--fk-ink) 8%, transparent); color: var(--fk-ink); }
.fkdl__opt--watch .fkdl__ic svg { width: 19px; height: 19px; margin-left: 2px; }
.fkdl__opt--watch.is-primary .fkdl__ic { background: var(--fk-active-bg); color: var(--fk-active-ic); }
.fkdl__txt { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.fkdl__txt strong { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.fkdl__txt > span { color: var(--fk-muted); font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.fkdl__tag { padding: 2px 6px; border-radius: 5px; background: color-mix(in oklab, var(--fk-ink) 9%, transparent); color: var(--fk-soft);
font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.03em; }
.fkdl__go { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--fk-muted); font-size: 13px; font-weight: 600; transition: color 0.15s; }
.fkdl__go::after { content: ""; width: 7px; height: 7px; margin-left: -2px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor;
transform: rotate(45deg); opacity: 0.8; }
.fkdl__opt:hover .fkdl__go { color: var(--fk-ink); }
.fkdl__opt.is-loading { cursor: progress; }
.fkdl__opt.is-loading .fkdl__go::after { width: 12px; height: 12px; margin-left: 0; border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%; transform: none; animation: fkdl-spin 0.8s linear infinite; }
@keyframes fkdl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fkdl__opt.is-loading .fkdl__go::after { animation-duration: 2.4s; } }
@media (max-width: 419px) {
.fkdl__opt:not(.is-loading) .fkdl__go { font-size: 0; gap: 0; } /* tor ekranda faqat strelka */
.fkdl__opt:not(.is-loading) .fkdl__go::after { margin-left: 0; }
}
.fkdl__empty { margin: 0; padding: 13px 16px; border-radius: 12px; background: color-mix(in oklab, #f59e0b 11%, transparent);
color: var(--fk-ink); font-size: 14px; line-height: 1.5; }
html:not(.dark) .fkdl__empty { background: color-mix(in oklab, #f59e0b 16%, transparent); }
.fkdl__recs { margin-top: 36px; }
.fkdl__recs h2 { margin: 0 0 10px; color: var(--fk-ink); font-size: 16px; font-weight: 700; }
.fkdl__grid { display: grid; gap: 4px; }
@media (min-width: 640px) {
.fkdl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
}
/* =====================================================================
PREVIEW 11 — serial sahifasi (serial/show-preview.blade.php). Tepa blok, aktyorlar, tavsiyalar kino sahifasi
uslublarini oladi (.fkd--k, .fkd-head--side). Bu yerda faqat serialga xos: qismlar bo'limi va treyler qatori.
===================================================================== */
.fkd--tv .fkd-eps2 { margin-top: 24px; padding: 16px 0 18px; border-block: 1px solid color-mix(in oklab, var(--fk-ink) 9%, transparent); scroll-margin-top: 76px; } /* #fasl-N bilan ochilganda header ostida qolmasin */
.fkd--tv .fkd-eps2 .fkd-sec__head { align-items: center; }
.fkd-eps2__count { margin-left: 4px; color: var(--fk-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.fkd-eps2__tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fkd-eps2__sort { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0;
border-radius: 9px; background: var(--fkd-tint); color: var(--fk-soft); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.fkd-eps2__sort svg { width: 18px; height: 18px; transition: transform 0.2s; }
.fkd-eps2__sort[aria-pressed="true"] svg { transform: scaleY(-1); }
.fkd-eps2__sort:hover { background: var(--fkd-tint-2); color: var(--fk-ink); }
.fkd-eps2__sort:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* "Davom ettirish: 5-qism · 23 daq qoldi" — pleer eslab qolgan oxirgi chala qism (JS) */
.fkd-eps2__resume { display: inline-flex; align-items: center; gap: 7px; min-width: 0; height: 34px; padding: 0 12px 0 10px; border-radius: 9px;
background: var(--fk-active-bg); color: var(--fk-active-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.fkd-eps2__resume[hidden] { display: none; }
.fkd-eps2__resume::before { content: ""; flex: none; width: 9px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.fkd-eps2__resume span { overflow: hidden; font-weight: 500; opacity: 0.75; text-overflow: ellipsis; }
.fkd-eps2__resume span::before { content: "· "; }
.fkd-eps2__resume:hover { background: color-mix(in oklab, var(--fk-active-ic) 22%, transparent); color: var(--fk-active-ink); }
.fkd-eps2__resume:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
@media (max-width: 419px) { .fkd-eps2__resume span { display: none; } }
/* fasllar: bitta segmentli panel, tanlangani teskari rangda — qaysi fasl ochiqligi uzoqdan ko'rinadi */
.fkd-eps2__tabs { display: flex; width: max-content; max-width: 100%; gap: 2px; margin: 0 0 14px; padding: 4px; overflow-x: auto; border-radius: 12px;
background: var(--fkd-tint); scrollbar-width: none; }
.fkd-eps2__tabs::-webkit-scrollbar { display: none; }
.fkd-eps2__tabs [role="tab"] { flex: none; height: 34px; padding: 0 15px; border: 0; border-radius: 9px; background: none; color: var(--fk-soft);
font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.fkd-eps2__tabs [role="tab"]:hover { background: var(--fkd-tint); color: var(--fk-ink); }
.fkd-eps2__tabs [role="tab"][aria-selected="true"] { background: var(--fk-ink); color: var(--fk-bar); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.fkd-eps2__tabs [role="tab"]:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: -2px; }
/* ochiq fasl izohi: "3-fasl · 24 qism · 2010" */
.fkd-eps2__cap { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 10px; color: var(--fk-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.fkd-eps2__cap b { color: var(--fk-ink); font-size: 15px; font-weight: 700; }
.fkd-eps2__cap span::before { content: "·"; margin: 0 7px; opacity: 0.6; }
/* oraliqlar (1–50, 51–100 …) */
.fkd-eps2__ranges { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.fkd-eps2__ranges::-webkit-scrollbar { display: none; }
.fkd-eps2__ranges button { flex: none; height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--fk-muted);
font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.fkd-eps2__ranges button:hover { color: var(--fk-ink); }
.fkd-eps2__ranges button[aria-pressed="true"] { background: var(--fkd-tint-2); color: var(--fk-ink); }
.fkd-eps2__ranges button:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: -2px; }
@media (min-width: 768px) { .fkd-eps2__ranges { flex-wrap: wrap; overflow: visible; } }
/* qism kartochkasi: ikki yonida yumaloq o'yiq (foydalanuvchi). Ikki ko'rinish, fasl bo'yicha:
- nomli (faslning yarmidan ko'p qismida o'zbekcha nom bor): chapda katta raqam va "qism", tik chiziq, o'ngda nom va davomiylik;
- ixcham (nomsiz, masalan turk seriallari): markazda "5-qism" va davomiylik.
Holatlar: ochilgan (brauzer tarixi) — xira; chala ko'rilgan — pastda progress; davom ettiriladigani — yashil fon; yangi — yashil nuqta */
.fkd-eps2 .fkd-eps2__grid[hidden] { display: none; }
.fkd-eps2__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.fkd-ep2 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; height: 48px;
padding: 0 12px; overflow: hidden; border-radius: 10px; background-color: var(--fkd-tint); color: var(--fk-ink); text-align: center;
text-decoration: none; font-variant-numeric: tabular-nums;
-webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
radial-gradient(circle 6px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
mask: radial-gradient(circle 6px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
radial-gradient(circle 6px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
transition: background-color 0.15s, color 0.15s, transform 0.15s; }
.fkd-ep2 b { font-weight: 800; letter-spacing: -0.01em; }
.fkd-ep2__q { display: flex; align-items: baseline; justify-content: center; gap: 5px; max-width: 100%; overflow: hidden; color: var(--fk-muted);
font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.fkd-ep2__q b { color: var(--fk-ink); font-size: 17px; }
.fkd-ep2__dot { position: relative; top: -7px; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; font-size: 0; opacity: 0.6; } /* "•" belgisi HTML'da (havola matni), ko'rinishda — raqam va matn o'rtasidagi nuqta */
.fkd-ep2:visited .fkd-ep2__q b { color: var(--fk-muted); }
.fkd-ep2.is-last .fkd-ep2__q, .fkd-ep2.is-last .fkd-ep2__q b { color: var(--fk-active-ink); }
.fkd-ep2__m { max-width: 100%; overflow: hidden; color: var(--fk-muted); font-size: 11px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.fkd-ep2:visited { background-color: color-mix(in oklab, var(--fk-ink) 3%, transparent); color: var(--fk-muted); }
.fkd-ep2:hover { background-color: var(--fkd-tint-2); color: var(--fk-ink); transform: translateY(-2px); }
.fkd-ep2:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fk-focus); }
.fkd-ep2.is-part { color: var(--fk-ink); }
/* chala ko'rilgan: burchakda kichik aylana halqa (✓ "ko'rilgan" belgisi o'rnida) — yoy ko'rilgan qismni ko'rsatadi (--p) */
.fkd-ep2.is-part::after { content: ""; position: absolute; top: 6px; right: 7px; width: 17px; height: 17px; border-radius: 50%;
background: conic-gradient(var(--fk-active-ic) var(--p, 50%), color-mix(in oklab, var(--fk-ink) 22%, transparent) 0);
-webkit-mask: radial-gradient(circle, transparent 4.8px, #000 5.3px); mask: radial-gradient(circle, transparent 4.8px, #000 5.3px); }
.fkd-eps2__grid--titled .fkd-ep2.is-part::after { top: 8px; right: 9px; }
.fkd-eps2__grid:not(.fkd-eps2__grid--titled) .fkd-ep2.is-part::after { top: 4px; right: 4px; transform: scale(0.9); transform-origin: top right; }
.fkd-eps2__grid--titled .fkd-ep2.is-part .fkd-ep2__body { padding-right: 28px; }
.fkd-ep2.is-part.is-new::before, .fkd-ep2.is-part .fkd-ep2__seen { display: none; } /* bir burchakda bitta belgi: halqa ustun */
.fkd-ep2.is-last { background-color: var(--fk-active-bg); color: var(--fk-active-ink); }
.fkd-ep2.is-last .fkd-ep2__m { color: color-mix(in oklab, var(--fk-active-ink) 70%, transparent); }
.fkd-ep2.is-new::before { content: ""; position: absolute; top: 7px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--fk-active-ic); }
@media (min-width: 640px) { .fkd-eps2__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
/* nomli — chipta: chapda boshqa tondagi raqamli qirqim, nuqtali yirtish chizig'i va uning tepa/pastida o'yiq,
yon o'yiqlar yo'q, yirtish chizig'i xira (foydalanuvchi) */
.fkd-eps2__grid--titled { grid-template-columns: minmax(0, 1fr); }
.fkd-eps2__grid--titled .fkd-ep2 { --stub: 54px; --stub-bg: color-mix(in oklab, var(--fk-ink) 5%, transparent);
--perf: color-mix(in oklab, var(--fk-ink) 17%, transparent);
display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); align-items: center; height: 54px; padding: 0 14px 0 0; text-align: left;
background-image: linear-gradient(90deg, var(--stub-bg) var(--stub), transparent 0), radial-gradient(circle, var(--perf) 0.9px, transparent 1.4px);
background-size: 100% 100%, 3px 6px; background-position: 0 0, calc(var(--stub) - 1.5px) 3px; background-repeat: no-repeat, repeat-y;
-webkit-mask: radial-gradient(circle 5px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 5px at var(--stub) 100%, #0000 97%, #000);
-webkit-mask-composite: source-in;
mask: radial-gradient(circle 5px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 5px at var(--stub) 100%, #0000 97%, #000);
mask-composite: intersect; }
.fkd-ep2__num { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; padding-left: 2px;
color: var(--fk-muted); font-size: 10.5px; font-weight: 500; line-height: 1.2; }
.fkd-ep2__num b { color: var(--fk-ink); font-size: 18px; line-height: 1.05; }
.fkd-ep2__h { display: none; }
.fkd-ep2__body { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding-left: 12px; }
.fkd-ep2__name { overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.fkd-eps2__grid--titled .fkd-ep2__m { font-size: 11.5px; }
.fkd-eps2__grid--titled .fkd-ep2:visited .fkd-ep2__num b { color: var(--fk-muted); }
.fkd-eps2__grid--titled .fkd-ep2.is-last { --stub-bg: color-mix(in oklab, var(--fk-active-ic) 16%, transparent); --perf: color-mix(in oklab, var(--fk-active-ink) 28%, transparent); }
.fkd-eps2__grid--titled .fkd-ep2.is-last .fkd-ep2__num { color: color-mix(in oklab, var(--fk-active-ink) 70%, transparent); }
.fkd-eps2__grid--titled .fkd-ep2.is-last .fkd-ep2__num b { color: var(--fk-active-ink); }
.fkd-eps2__grid--titled .fkd-ep2.is-new::before { top: 8px; right: 10px; }
@media (min-width: 640px) { .fkd-eps2__grid--titled { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } }
@media (min-width: 1024px) { .fkd-eps2__grid--titled { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* fasl yoki oraliq almashganda: izoh va chiptalar ketma-ket paydo bo'ladi */
@keyframes fkd-ticket-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fkd-cap-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.fkd-eps2__panel.is-enter .fkd-ep2 { animation: fkd-ticket-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 14ms); }
.fkd-eps2__panel.is-enter .fkd-eps2__cap { animation: fkd-cap-in 0.3s ease-out both; }
@media (prefers-reduced-motion: reduce) {
.fkd-ep2:hover { transform: none; }
.fkd-eps2__panel.is-enter .fkd-ep2, .fkd-eps2__panel.is-enter .fkd-eps2__cap { animation: none; }
}
.fkd-eps2__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; color: var(--fk-muted); font-size: 12px; }
.fkd-eps2__legend[hidden], .fkd-eps2__legend [hidden] { display: none; }
.fkd-eps2__legend .is-part::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; border-radius: 50%; vertical-align: -2px;
background: conic-gradient(var(--fk-active-ic) 60%, color-mix(in oklab, var(--fk-ink) 22%, transparent) 0);
-webkit-mask: radial-gradient(circle, transparent 3.4px, #000 3.9px); mask: radial-gradient(circle, transparent 3.4px, #000 3.9px); }
/* ko'rilgan qism (fkp:watched): burchakda yashil belgi, raqam va matn xiraroq — ko'rilmaganlari ajralib turadi */
.fkd-ep2__seen { position: absolute; top: 6px; right: 7px; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in oklab, var(--fk-ink) 16%, transparent); }
.fkd-ep2__seen::after { content: ""; position: absolute; top: 3.6px; left: 6.2px; width: 4.2px; height: 7.8px; border: solid var(--fk-soft); border-width: 0 1.9px 1.9px 0; transform: rotate(45deg); }
.fkd-ep2.is-current .fkd-ep2__seen { background: color-mix(in oklab, var(--fk-active-ink) 22%, transparent); }
.fkd-ep2.is-current .fkd-ep2__seen::after { border-color: var(--fk-active-ink); }
.fkd-eps2__grid--titled .fkd-ep2__seen { top: 8px; right: 9px; }
.fkd-eps2__grid:not(.fkd-eps2__grid--titled) .fkd-ep2__seen { top: 4px; right: 4px; transform: scale(0.9); transform-origin: top right; } /* raqamli kichik kartada matnga tegmasin */
.fkd-eps2__grid--titled .fkd-ep2.is-seen .fkd-ep2__body { padding-right: 28px; }
.fkd-ep2.is-seen.is-new::before { display: none; }
.fkd-ep2.is-seen:not(.is-current):not(.is-last) { color: var(--fk-muted); }
.fkd-ep2.is-seen:not(.is-current):not(.is-last) .fkd-ep2__q b, .fkd-ep2.is-seen:not(.is-current):not(.is-last) .fkd-ep2__num b,
.fkd-ep2.is-seen:not(.is-current):not(.is-last) .fkd-ep2__name { color: var(--fk-soft); }
.fkd-eps2__legend .fkd-ep2__seen { position: relative; top: auto; right: auto; display: inline-block; margin-right: 6px; vertical-align: -3px; }
.fkd-eps2__legend .is-new::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--fk-active-ic); vertical-align: middle; }
/* treyler/saundtrek qatori qismlardan keyin: kino sahifasidagi plitkalar, like/dislike'siz */
.fkd--tv .fkd-acts--tv { margin-top: 16px; }
/* ---------- "Yangi qismlar" plitkasi (bosh sahifa sidebar'i, ro'yxat sahifalari sidebar'i, /yangi-qismlar) —
serial sahifasidagi qism chiptasi uslubida (foydalanuvchi, 2026-09-16): chapda boshqa tondagi raqam va "qism",
xira nuqtali yirtish chizig'i, uning tepa va pastida o'yiq. /yangi-qismlar'da qism kadri qoladi. Play doirasi yo'q.
Faqat .fkne ro'yxati (Top 5 ham .fkne__card ishlatadi — unga tegilmaydi). ---------- */
.fkne .fkne__card { --stub: 50px; --stub-bg: color-mix(in oklab, var(--fk-ink) 5%, transparent);
--perf: color-mix(in oklab, var(--fk-ink) 17%, transparent);
gap: 12px; padding: 8px 12px 8px 0; border-radius: 10px;
background-image: linear-gradient(90deg, var(--stub-bg) var(--stub), transparent 0), radial-gradient(circle, var(--perf) 0.9px, transparent 1.4px);
background-size: 100% 100%, 3px 6px; background-position: 0 0, calc(var(--stub) - 1.5px) 3px; background-repeat: no-repeat, repeat-y;
-webkit-mask: radial-gradient(circle 5px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 5px at var(--stub) 100%, #0000 97%, #000);
-webkit-mask-composite: source-in;
mask: radial-gradient(circle 5px at var(--stub) 0, #0000 97%, #000), radial-gradient(circle 5px at var(--stub) 100%, #0000 97%, #000);
mask-composite: intersect; }
.fkne .fkne__card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fk-focus); }
.fkne .fkne__num { width: var(--stub); min-width: var(--stub); padding: 0; border-right: 0; }
.fkne .fkne__num b { font-size: 17px; }
.fkne .fkne__num i { margin-top: 1px; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.fkne .fkne__go { display: none; }
.fkne--page .fkne__card { --stub: 56px; padding-right: 14px; }
.fkne--page .fkne__num b { font-size: 19px; }
/* qismi hali yo'q serial (tez kunda) */
.fkd-eps2__empty { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--fkd-tint); color: var(--fk-soft); font-size: 14px; line-height: 1.55; }
.fkd-eps2__empty a { color: var(--fk-active-ink); font-weight: 600; }
/* =====================================================================
PREVIEW 12 — qism sahifasi (serie/show-preview.blade.php). Kino va serial sahifalari uslublari qayta ishlatiladi
(.fkd--k tugmalar, .fkd--tv qismlar paneli, aktyorlar); bu yerda faqat qismga xos joylar. Telefonda ikki ustun
bitta oqimga qo'shiladi (display: contents) va tartib: sarlavha, qism paneli, pleer, tugmalar, qismlar,
qism haqida, aktyorlar.
===================================================================== */
.fkd-ep__head { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.fkd-ep__poster { flex: none; display: block; width: 64px; border-radius: 9px; overflow: hidden; background: var(--fk-fill-2);
box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.55); transition: opacity 0.15s; }
.fkd-ep__poster img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.fkd-ep__poster:hover { opacity: 0.85; }
.fkd-ep__poster:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
.fkd-ep__titles { min-width: 0; }
/* 1-qator: serial nomi (h1 boshi); 2-qator: "N-fasl M-qism" (h1 oxiri) · qism nomi (h2) — ikkalasi inline, bir qatorga oqadi */
.fkd-ep__t { margin: 0; color: var(--fk-soft); font-size: 15px; line-height: 1.45; }
.fkd-ep__h1 { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
.fkd-ep__sn { display: block; margin-bottom: 4px; color: var(--fk-ink); font-size: 22px; font-weight: 650; line-height: 1.25; letter-spacing: -0.012em; text-wrap: balance; }
/* "N-fasl M-qism" — yashil matn (yon paneldagi joriy qism bilan bir til), fonsiz; qism nomi nuqta bilan */
.fkd-ep__no { color: var(--fk-ink); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fkd-ep__name { display: inline; margin: 0; font-size: inherit; font-weight: 500; }
.fkd-ep__name::before { content: "·"; margin: 0 8px 0 4px; color: var(--fk-muted); font-weight: 400; }
.fkd-ep__meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; margin: 7px 0 0; color: var(--fk-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.fkd-ep__meta > * { display: inline-flex; align-items: center; }
.fkd-ep__meta > * + *::before { content: "·"; margin: 0 8px; opacity: 0.6; }
.fkd-ep__meta a { display: inline-flex; align-items: center; gap: 6px; color: var(--fk-soft); text-decoration: none; transition: color 0.15s; }
.fkd-ep__flag { flex: none; width: auto; height: 11px; border-radius: 2px; }
/* reyting: brend belgisi (IMDb sariq, TMDB havorang) + qiymat */
.fkd-ep__rate { gap: 6px; color: var(--fk-ink); font-weight: 700; }
.fkd-ep__rate b { padding: 2px 4px; border-radius: 4px; background: #f5c518; color: #000; font-size: 9.5px; font-weight: 900; line-height: 1; letter-spacing: 0.01em; }
.fkd-ep__rate--tmdb b { background: #01b4e4; color: #0d253f; }
.fkd-ep__rate--mdl b { background: #1675b6; color: #fff; }
.fkd-ep__meta > .fkd-ep__rate + .fkd-ep__rate { margin-left: 12px; } /* ikki reyting bir guruh — orasida nuqta yo'q */
.fkd-ep__meta > .fkd-ep__rate + .fkd-ep__rate::before { content: none; }
.fkd-ep__meta > .fkd-ep__br { display: none; }
.fkd-ep__meta a:hover { color: var(--fk-active-ink); }
.fkd-ep__meta a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; border-radius: 3px; }
.fkd--ep .fkd-acts { margin-top: 14px; }
/* qism paneli: oldingi | joriy | avto-keyingi | keyingi — bitta ixcham qator, pleer tepasida */
.fkd-epbar { container-type: inline-size; display: flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: var(--fkd-tint); }
.fkd-epbar__btn { position: relative; display: inline-flex; flex: none; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 9px;
background: var(--fkd-tint); color: var(--fk-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color 0.15s; }
.fkd-epbar__btn::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.7; }
.fkd-epbar__btn--prev::before { margin-left: 2px; }
.fkd-epbar__l { display: flex; flex-direction: column; line-height: 1.2; }
.fkd-epbar__l small { font-size: 11px; font-weight: 500; opacity: 0.75; }
.fkd-epbar__btn--next .fkd-epbar__l { align-items: flex-end; }
.fkd-epbar__btn--next { flex-direction: row-reverse; background: var(--fkd-tint-2); color: var(--fk-ink); }
.fkd-epbar__btn--next::before { margin-right: 2px; transform: rotate(-135deg); }
.fkd-epbar__btn:hover { background: var(--fkd-tint-2); color: var(--fk-ink); }
.fkd-epbar__btn--next:hover { background: color-mix(in oklab, var(--fk-ink) 16%, transparent); color: var(--fk-ink); }
.fkd-epbar__btn:focus-visible, .fkd-epbar__auto:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
.fkd-epbar__cur { display: flex; flex-direction: column; min-width: 0; padding: 0 10px; line-height: 1.25; white-space: nowrap; }
.fkd-epbar__cur b { overflow: hidden; color: var(--fk-ink); font-size: 14px; font-weight: 700; text-overflow: ellipsis; }
.fkd-epbar__cur span { overflow: hidden; color: var(--fk-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.fkd-epbar__auto { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; padding: 0 10px; border: 0; border-radius: 9px;
background: none; color: var(--fk-soft); font: inherit; font-size: 13px; cursor: pointer; }
.fkd-epbar__auto:hover { color: var(--fk-ink); }
.fkd-epbar__sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: color-mix(in oklab, var(--fk-ink) 22%, transparent); transition: background-color 0.2s; }
.fkd-epbar__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.2s; }
.fkd-epbar__auto[aria-checked="true"] .fkd-epbar__sw { background: var(--fk-ink); }
.fkd-epbar__auto[aria-checked="true"] .fkd-epbar__sw::after { background: var(--fk-bar); }
.fkd-epbar__auto[aria-checked="true"] .fkd-epbar__sw::after { transform: translateX(12px); }
@media (prefers-reduced-motion: reduce) { .fkd-epbar__sw, .fkd-epbar__sw::after { transition: none; } }
/* tor panel (telefon): yozuv "Avto" gacha qisqaradi, juda torda faqat switch qoladi — to'liq nom ekran o'quvchida saqlanadi */
@container (max-width: 440px) {
.fkd-epbar__btn { padding: 0 11px; font-size: 13px; }
.fkd-epbar__cur { padding: 0 6px; }
.fkd-epbar__auto { gap: 6px; padding: 0 8px; }
.fkd-epbar__autox { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 350px) {
.fkd-epbar__auto { gap: 0; }
.fkd-epbar__autol { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 310px) {
.fkd-epbar__btn { gap: 6px; padding: 0 8px; }
.fkd-epbar__cur { padding: 0 4px; }
}
/* qism haqida */
.fkd-epabout { margin-top: 26px; }
.fkd-epabout__text { max-width: 74ch; margin: 0 0 10px; color: var(--fk-soft); font-size: 14.5px; line-height: 1.7; }
.fkd-epabout__std { max-width: 74ch; margin: 0; color: var(--fk-muted); font-size: 13.5px; line-height: 1.7; }
.fkd-epabout__text + .fkd-epabout__std { font-size: 12.5px; }
.fkd-epabout__genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fkd-epabout__genres a { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 8px; background: var(--fkd-tint);
color: var(--fk-ink); font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color 0.15s; }
.fkd-epabout__genres a:hover { background: var(--fkd-tint-2); color: var(--fk-ink); }
.fkd-epabout__genres a:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; }
/* o'ng ustun: qismlar paneli */
.fkd--tv .fkd-eps2--side { margin-top: 14px; padding: 14px 0 0; border-bottom: 0; }
/* desktop: tepa chiziq yo'q — "Qismlar" sarlavhasi ostidagi chiziq breadcrumb chizig'i bilan bir balandlikda (kino sahifasidagi
"Tavsiyalar" kabi): breadcrumb 5px + matn + 14px; sarlavha qatori ham shu balandlikda, asboblar 30px */
@media (min-width: 1024px) {
.fkd--ep .fkd-bc { height: 37px; } /* matn balandligi drobli — ikkala chiziq aynan bir pikselda tursin */
.fkd--tv .fkd-eps2--side { margin-top: 0; padding-top: 0; border-top: 0; }
.fkd-eps2--side > .fkd-sec__head { height: 37px; margin-bottom: 14px; padding-bottom: 9px;
border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 8%, transparent); }
.fkd-eps2--side .fkd-eps2__sort { width: 30px; height: 30px; }
.fkd-eps2--side .fkd-eps2__resume { height: 30px; }
}
.fkd-eps2--side .fkd-eps2__tabs [role="tab"] { padding: 0 12px; }
/* fasllar va oraliqlar bitta qatorda, gorizontal skroll (foydalanuvchi): tanlangani ko'rinishga suriladi, sichqon g'ildiragi
yonga suradi, davomi bor tomonda chet xiralashadi (JS: is-l / is-r) */
.fkd-eps2--side .fkd-eps2__ranges { flex-wrap: nowrap; overflow-x: auto; }
.fkd-eps2__tabs.is-r, .fkd-eps2__ranges.is-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.fkd-eps2__tabs.is-l, .fkd-eps2__ranges.is-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.fkd-eps2__tabs.is-l.is-r, .fkd-eps2__ranges.is-l.is-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.fkd-eps2__scroll { position: relative; max-height: 440px; margin-right: -6px; padding: 2px 6px 2px 0; overflow-y: auto; scrollbar-width: thin;
scrollbar-color: color-mix(in oklab, var(--fk-ink) 18%, transparent) transparent; }
.fkd-eps2--side .fkd-eps2__grid--titled { grid-template-columns: minmax(0, 1fr); }
.fkd-eps2--side .fkd-ep2:hover { transform: none; }
.fkd-eps2--side .fkd-sec__title { white-space: nowrap; }
.fkd-eps2--side .fkd-eps2__resume span { display: none; }
/* qism sahifasida yashil faqat joriy qismda; davom ettiriladigan qismda — progress chizig'ining o'zi */
.fkd-eps2--side .fkd-ep2.is-last:not(.is-current) { background-color: var(--fkd-tint); color: var(--fk-ink); }
.fkd-eps2--side .fkd-ep2.is-last:not(.is-current) .fkd-ep2__q, .fkd-eps2--side .fkd-ep2.is-last:not(.is-current) .fkd-ep2__q b,
.fkd-eps2--side .fkd-ep2.is-last:not(.is-current) .fkd-ep2__num b { color: var(--fk-ink); }
.fkd-eps2--side .fkd-ep2.is-last:not(.is-current) .fkd-ep2__m, .fkd-eps2--side .fkd-ep2.is-last:not(.is-current) .fkd-ep2__num { color: var(--fk-muted); }
.fkd-eps2--side .fkd-eps2__grid--titled .fkd-ep2.is-last:not(.is-current) { --stub-bg: color-mix(in oklab, var(--fk-ink) 5%, transparent); --perf: color-mix(in oklab, var(--fk-ink) 17%, transparent); }
.fkd-ep2.is-current { background-color: var(--fk-active-bg); color: var(--fk-active-ink); }
.fkd-ep2.is-current .fkd-ep2__q, .fkd-ep2.is-current .fkd-ep2__q b, .fkd-ep2.is-current .fkd-ep2__num b { color: var(--fk-active-ink); }
.fkd-ep2.is-current .fkd-ep2__m, .fkd-ep2.is-current .fkd-ep2__num { color: color-mix(in oklab, var(--fk-active-ink) 70%, transparent); }
.fkd-eps2__grid--titled .fkd-ep2.is-current { --stub-bg: color-mix(in oklab, var(--fk-active-ic) 16%, transparent); --perf: color-mix(in oklab, var(--fk-active-ink) 28%, transparent); }
@media (max-width: 1023px) {
.fkd--ep > .fkd__main, .fkd--ep > .fkd-epside { display: contents; }
.fkd--ep .fkd-ep__head { order: 1; gap: 13px; margin: 2px 0 14px; }
.fkd--ep .fkd-ep__poster { width: 56px; border-radius: 8px; }
.fkd-ep__t { font-size: 14px; line-height: 1.4; }
.fkd-ep__sn { margin-bottom: 3px; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.fkd-ep__name::before { margin: 0 6px 0 3px; }
.fkd-ep__meta { margin-top: 6px; font-size: 12.5px; }
.fkd-ep__meta > .fkd-ep__br { display: block; flex-basis: 100%; height: 5px; }
.fkd-ep__meta > .fkd-ep__br::before, .fkd-ep__meta > .fkd-ep__br + *::before { content: none; }
.fkd-ep__meta > * + *::before { margin: 0 6px; }
.fkd--ep .fkd-epbar { order: 2; margin-bottom: 10px; }
.fkd--ep #pleer { order: 3; }
.fkd--ep .fkd-acts { order: 4; margin-top: 10px; }
.fkd--ep .fkd-eps2--side { order: 5; margin-top: 16px; padding: 16px 0 18px; border-bottom: 1px solid color-mix(in oklab, var(--fk-ink) 9%, transparent); }
.fkd--ep .fkd-epabout { order: 6; margin-top: 16px; }
.fkd--ep .fkd-crew { order: 7; }
.fkd--ep .fkd-chapters { order: 8; }
.fkd-eps2__scroll { max-height: 360px; }
}
/* =====================================================================
Pleer (preview): "Avto-keyingi" switch "Keyingi qism" kartochkasida (player-autonext). Switch o'chiq bo'lsa sanoq qatori
yashiriladi, tugma "Ko'rish". Kartochka va boshqa oynalarning uslubi pleerning o'zida (freekino-player.js STYLES).
===================================================================== */
html.fk-preview .fkp-next-ep.fkd-next--manual .fkp-next-ep-countdown { display: none; }
.fkd-next-auto { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 0; border: 0; background: none; color: #a1a1aa; font: inherit;
font-size: 12px; line-height: 16px; cursor: pointer; }
.fkd-next-auto:hover { color: #fff; }
.fkd-next-auto:focus-visible { outline: 2px solid #9ad85a; outline-offset: 2px; border-radius: 4px; }
.fkd-next-auto__sw { position: relative; flex: none; width: 24px; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.24); transition: background-color 0.2s; }
.fkd-next-auto__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.fkd-next-auto[aria-checked="true"] .fkd-next-auto__sw { background: #fff; }
.fkd-next-auto[aria-checked="true"] .fkd-next-auto__sw::after { background: #111; }
.fkd-next-auto[aria-checked="true"] .fkd-next-auto__sw::after { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .fkd-next-auto__sw, .fkd-next-auto__sw::after { transition: none; } }
/* Qism sahifasi: pleer skripti kelguncha muqova — pleerning .fkp-poster-bg / .fkp-poster qoidalari bilan aynan bir xil */
.fkd-cover, .fkd-cover__bg, .fkd-cover__fg { position: absolute; inset: 0; pointer-events: none; }
.fkd-cover { overflow: hidden; background: #000; }
.fkd-cover__bg { background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(24px) brightness(.55); transform: scale(1.15); }
.fkd-cover__fg { background-size: contain; background-position: center; background-repeat: no-repeat; }
/* =====================================================================
Pleer (preview, player-enhance): kichik pleer va kinoteatr rejimi.
Kichik pleer — #myplayer faqat position: fixed bo'ladi (DOM'da ko'chirilmaydi), joyida "kichik oynada" belgisi.
Telefonda header ostida yuqorida (pastdagi yopishqoq reklama bilan ustma-ust tushmasin).
===================================================================== */
.fkd-mini-bar { display: none; }
.fkd-player.is-mini > div:first-child::after { content: "Kichik oynada ijro etilmoqda"; position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; color: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 500; }
.fkd-player.is-mini #myplayer { position: fixed; top: auto; right: auto; bottom: auto; left: auto; width: 400px; height: 225px; min-height: 0; z-index: 70;
border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); animation: fkd-mini-in 0.2s ease-out; }
.fkd-player.is-mini .fkd-mini-bar { position: fixed; z-index: 71; display: flex; gap: 6px; }
/* burchak (JS: data-corner) — tugmalar qatori pleerning ichki tomonida: pastki burchakda tepada, yuqorida pastda */
.fkd-player.is-mini[data-corner="br"] #myplayer { right: 16px; bottom: 16px; }
.fkd-player.is-mini[data-corner="bl"] #myplayer { left: 16px; bottom: 16px; }
.fkd-player.is-mini[data-corner="tr"] #myplayer { right: 16px; top: 72px; }
.fkd-player.is-mini[data-corner="tl"] #myplayer { left: 16px; top: 72px; }
.fkd-player.is-mini[data-corner="br"] .fkd-mini-bar { right: 16px; bottom: 249px; }
.fkd-player.is-mini[data-corner="bl"] .fkd-mini-bar { left: 16px; bottom: 249px; }
.fkd-player.is-mini[data-corner="tr"] .fkd-mini-bar { right: 16px; top: 303px; }
.fkd-player.is-mini[data-corner="tl"] .fkd-mini-bar { left: 16px; top: 303px; }
.fkd-mini-bar button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
background: rgba(22, 23, 26, 0.94); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.fkd-mini-bar button:hover { background: rgba(40, 41, 45, 0.96); }
.fkd-mini-bar button:focus-visible { outline: 2px solid #9ad85a; outline-offset: 2px; }
.fkd-mini-bar svg { width: 17px; height: 17px; }
.fkd-mini-bar button[hidden] { display: none; }
html.fkd-mini-on .tg-float { display: none; }
/* kichik oynada pleer boshqaruvi ixcham: ro'yxat, vaqt, sozlamalar va qo'shimcha tugmalar yashiriladi */
.fkd-player.is-mini .fkp-plist-bar, .fkd-player.is-mini .fkp-time, .fkd-player.is-mini .fkp-settings-btn, .fkd-player.is-mini .fkp-pip-btn,
.fkd-player.is-mini .fkp-theater-btn, .fkd-player.is-mini .fkp-next-btn, .fkd-player.is-mini .fkp-chapter-title { display: none !important; }
@keyframes fkd-mini-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
.fkd-player.is-mini #myplayer { width: 66vw; height: calc(66vw * 9 / 16); border-radius: 10px; }
.fkd-player.is-mini[data-corner="br"] #myplayer, .fkd-player.is-mini[data-corner="tr"] #myplayer { right: 8px; }
.fkd-player.is-mini[data-corner="bl"] #myplayer, .fkd-player.is-mini[data-corner="tl"] #myplayer { left: 8px; }
.fkd-player.is-mini[data-corner="br"] #myplayer, .fkd-player.is-mini[data-corner="bl"] #myplayer { bottom: 8px; }
.fkd-player.is-mini[data-corner="br"] .fkd-mini-bar { right: 8px; bottom: calc(8px + 66vw * 9 / 16 + 6px); }
.fkd-player.is-mini[data-corner="bl"] .fkd-mini-bar { left: 8px; bottom: calc(8px + 66vw * 9 / 16 + 6px); }
.fkd-player.is-mini[data-corner="tr"] .fkd-mini-bar { right: 8px; top: calc(72px + 66vw * 9 / 16 + 6px); }
.fkd-player.is-mini[data-corner="tl"] .fkd-mini-bar { left: 8px; top: calc(72px + 66vw * 9 / 16 + 6px); }
}
@media (prefers-reduced-motion: reduce) { .fkd-player.is-mini #myplayer { animation: none; } }
/* kinoteatr rejimi (qism sahifasi, desktop): ustunlar bitta oqimga, pleer sahifa eniga (ekran balandligiga sig'adi) */
@media (max-width: 1023px) { .fkp-theater-btn { display: none !important; } }
@media (min-width: 1024px) {
.fkd.fkd--ep.is-theater { flex-direction: column; background-image: none; } /* ustunlar orasidagi chiziq (o'ram foni) kerak emas */
.fkd.fkd--ep.is-theater > .fkd__main { display: contents; }
.fkd.fkd--ep.is-theater > .fkd-side { width: 100%; padding-left: 0; }
.fkd--ep.is-theater .fkd-ep__head { order: 1; }
.fkd--ep.is-theater .fkd-epbar { order: 2; }
.fkd--ep.is-theater #pleer { order: 3; width: 100%; max-width: calc((100vh - 110px) * 16 / 9); margin-inline: auto; }
.fkd--ep.is-theater .fkd-acts { order: 4; }
.fkd--ep.is-theater .fkd-epside { order: 5; margin-top: 20px; }
.fkd--ep.is-theater .fkd-epabout { order: 6; }
.fkd--ep.is-theater .fkd-crew { order: 7; }
.fkd--ep.is-theater .fkd-chapters { order: 8; }
.fkd--ep.is-theater .fkd-eps2--side .fkd-eps2__grid--titled { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fkd--ep.is-theater .fkd-eps2__scroll { max-height: 330px; }
.fkd--ep.is-theater .fkd-epside .fkd-sec__head { height: auto; padding-bottom: 12px; }
.fkd--ep.is-theater .fkp-theater-btn { color: #9ad85a; }
}
/* =====================================================================
Yashil rang tartibi (foydalanuvchi, 2026-09-16: "yashil ko'payib ketmadimi"): qism sahifasida birinchi ekranda 11+ yashil
element bor edi. Yashil faqat ikki ma'noda: hozirgi holat (joriy qism, pleer progressi) va bitta asosiy harakat.
Qism sahifasida asosiy harakat pleerning o'zida — yon paneldagi "Davom ettirish" neytral (serial sahifasida yashil qoladi).
===================================================================== */
.fkd-eps2--side .fkd-eps2__resume { background: var(--fkd-tint); color: var(--fk-ink); }
.fkd-eps2--side .fkd-eps2__resume:hover { background: var(--fkd-tint-2); color: var(--fk-ink); }
/* qism sahifasi, desktop: yon paneldagi qismlar ro'yxati ekran balandligiga moslashadi (foydalanuvchi: "qismlar ko'proq
ko'rinsin") va panel sahifa aylantirilganda header ostida yopishib turadi. Kinoteatr rejimida — oddiy oqimda. */
@media (min-width: 1024px) {
.fkd--ep .fkd-epside .fkd-eps2--side { position: sticky; top: 76px; }
.fkd--ep .fkd-eps2--side .fkd-eps2__scroll { max-height: max(440px, calc(100vh - 250px)); }
.fkd--ep.is-theater .fkd-epside .fkd-eps2--side { position: static; }
}
/* =====================================================================
Aktyor sahifasi (actor/show-preview): to'plam sahifasi uslubida sarlavha va ro'yxat qatorlari.
===================================================================== */
.fka .fka__main { min-width: 0; }
.fka-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 14px 18px; color: var(--fk-muted); font-size: 12.5px; }
.fka-bc a { color: var(--fk-muted); text-decoration: none; transition: color 0.15s; }
.fka-bc a:hover { color: var(--fk-ink); }
.fka-bc i { font-style: normal; color: color-mix(in oklab, var(--fk-ink) 22%, transparent); }
.fka-bc [aria-current] { color: var(--fk-ink); font-weight: 600; }
.fka-head { display: flex; align-items: flex-start; gap: 24px; margin: 0 14px 30px; }
.fka-photo { flex: none; width: 184px; aspect-ratio: 2 / 3; height: auto; border-radius: 14px; object-fit: cover; background: var(--fk-fill-2); }
.fka-photo--empty { display: flex; align-items: center; justify-content: center; color: var(--fk-muted); font-size: 40px; font-weight: 700; }
.fka-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.fka-name { margin: 0; color: var(--fk-ink); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.fka-orig { margin: -2px 0 0; color: var(--fk-muted); font-size: 14px; }
.fka-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0 0; }
.fka-facts div { min-width: 0; }
.fka-facts dt { color: var(--fk-muted); font-size: 12px; }
.fka-facts dd { margin: 2px 0 0; color: var(--fk-ink); font-size: 14px; font-weight: 500; }
.fka-age { margin-left: 8px; color: var(--fk-muted); font-weight: 400; }
.fka-age::before { content: "· "; }
.fka-bio { margin-top: 14px; max-width: 76ch; }
.fka-bio__text p { margin: 0 0 10px; color: var(--fk-soft); font-size: 14.5px; line-height: 1.7; }
.fka-bio__text p:last-child { margin-bottom: 0; }
.fka-bio.is-cut .fka-bio__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fka-bio.is-cut .fka-bio__text p { display: inline; }
.fka-bio.is-cut .fka-bio__text p + p::before { content: " "; }
.fka-bio__more { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--fk-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fka-bio__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.fka-bio__more:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 2px; border-radius: 4px; }
.fka-sec { margin-top: 10px; }
.fka-sec + .fka-sec { margin-top: 30px; }
.fka-sec__title { margin: 0 14px 10px; color: var(--fk-ink); font-size: 18px; font-weight: 700; }
.fka-sec__title span { margin-left: 4px; color: var(--fk-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.fkrow__role { display: block; max-width: 100%; overflow: hidden; color: var(--fk-muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 767px) {
.fka-bc { display: none; }
.fka-head { gap: 14px; margin: 4px 12px 22px; }
.fka-photo { width: 104px; border-radius: 10px; }
.fka-photo--empty { font-size: 26px; }
.fka-body { padding-top: 0; gap: 4px; }
.fka-name { font-size: 21px; }
.fka-facts { gap: 6px 18px; margin-top: 6px; }
.fka-facts dd { font-size: 13px; }
.fka-bio { position: relative; margin: 14px 0 0 calc(-104px - 14px); } /* telefonda biografiya foto ostida, to'liq enida */
.fka-bio__text p { font-size: 14px; }
.fka-sec__title { margin: 0 12px 8px; font-size: 16px; }
}
/* aktyorlar ro'yxati (actor/index-preview): chegarasiz foto kartochkalar */
.fkpeople { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 16px; margin: 4px 14px 0; }
.fkperson { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--fk-ink); text-decoration: none; }
.fkperson__art { position: relative; display: block; aspect-ratio: 2 / 3; margin-bottom: 7px; overflow: hidden; border-radius: 12px; background: var(--fk-fill-2); }
.fkperson__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.fkperson:hover .fkperson__art img { transform: scale(1.04); }
.fkperson__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fk-muted); font-size: 30px; font-weight: 700; }
.fkperson__name { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.fkperson:hover .fkperson__name { color: var(--fk-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fkperson__meta { overflow: hidden; color: var(--fk-muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.fkperson:focus-visible { outline: 2px solid var(--fk-focus); outline-offset: 4px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .fkperson__art img { transition: none; } }
@media (max-width: 1279px) { .fkpeople { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .fkpeople { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .fkpeople { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; margin: 0 12px; } .fkperson__name { font-size: 13px; } .fkperson__meta { font-size: 11.5px; } }
/* telefon/planshet (mobil header): bosh sahifa banneri header'ga tegib turadi — orada bo'sh joy yo'q (foydalanuvchi) */
@media (max-width: 1023px) {
body:has(.fkh--m) > div.container:has(> .fkhero:first-child) { margin-top: 64px; padding-top: 0; }
body:has(.fkh--m) > div.container > .fkhero:first-child { margin-top: 0; }
}
/* bosh sahifa lentasi tablari (5 ta): telefonda qatorga sig'masa yonga suriladi; chiziq ko'rinsin — pastki padding */
@media (max-width: 767px) {
.fkfeed__head .fkfeed__filter { max-width: 100%; overflow-x: auto; padding-bottom: 10px; margin-bottom: -10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.fkfeed__head .fkfeed__filter::-webkit-scrollbar { display: none; }
.fkfeed__head .fkfeed__filter > a { flex: none; white-space: nowrap; }
.fkfeed__head .fkfeed__filter.is-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.fkfeed__head .fkfeed__filter.is-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.fkfeed__head .fkfeed__filter.is-l.is-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}