/* =========================================================================
   namaz.ahnaf.kz — LED-экран, ҚМДБ Ұлытау облысы өкілдігі
   Стиль — ahnaf.kz: көгілдір-жасыл (teal), кремді ақ, алтын белгі,
   KZ Unbounded — тек логотипте; қалғаны жіңішке шрифт (?font=), қазақ ою-өрнегі.
   Сол жақ — намаз уақыттары. Оң жақ — кезектесетін Күн аяты / Күн хадисі, астында QR.
   1rem = экран енінің 1% (16:9 болмаса — биіктігі бойынша).
   ========================================================================= */

@font-face { font-family: 'Oswald'; font-weight: 400; src: url('fonts/oswald-400.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-weight: 500; src: url('fonts/oswald-500.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-weight: 600; src: url('fonts/oswald-600.ttf') format('truetype'); }
@font-face { font-family: 'FiraI'; font-weight: 400; src: url('fonts/fira-400.ttf') format('truetype'); }
@font-face { font-family: 'FiraI'; font-weight: 600; src: url('fonts/fira-c-500.ttf') format('truetype'); }
@font-face { font-family: 'FiraI'; font-weight: 700; src: url('fonts/fira-c-600.ttf') format('truetype'); }
@font-face { font-family: 'FiraC'; font-weight: 400; src: url('fonts/fira-400.ttf') format('truetype'); }
@font-face { font-family: 'FiraC'; font-weight: 600; src: url('fonts/fira-600.ttf') format('truetype'); }
@font-face { font-family: 'FiraX'; font-weight: 400; src: url('fonts/firax-400.ttf') format('truetype'); }
@font-face { font-family: 'FiraX'; font-weight: 600; src: url('fonts/firax-600.ttf') format('truetype'); }
@font-face { font-family: 'RobotoC'; font-weight: 400; src: url('fonts/roboto-400.ttf') format('truetype'); }
@font-face { font-family: 'RobotoC'; font-weight: 600; src: url('fonts/roboto-600.ttf') format('truetype'); }
@font-face { font-family: 'PTN'; font-weight: 400; src: url('fonts/pt-400.ttf') format('truetype'); }
@font-face { font-family: 'PTN'; font-weight: 600; src: url('fonts/pt-700.ttf') format('truetype'); }
@font-face { font-family: 'Cuprum'; font-weight: 400; src: url('fonts/cuprum-400.ttf') format('truetype'); }
@font-face { font-family: 'Cuprum'; font-weight: 600; src: url('fonts/cuprum-600.ttf') format('truetype'); }
@font-face { font-family: 'UbuntuC'; font-weight: 400; src: url('fonts/ubuntu-400.ttf') format('truetype'); }
@font-face { font-family: 'UbuntuC'; font-weight: 600; src: url('fonts/ubuntu-400.ttf') format('truetype'); }
@font-face { font-family: 'KZUnb'; font-weight: 400; src: url('fonts/kz-unbounded.ttf') format('truetype'); }
@font-face { font-family: 'KFGQPC'; src: url('fonts/KFGQPC%20Uthmanic%20Script%20HAFS%20Regular.otf') format('opentype'); }
@font-face { font-family: 'AdwaSalaf'; src: url('fonts/adwa-assalaf%20Regular.ttf') format('truetype'); }

/* Шрифт: ?font= немесе data-font. --dk — цифрлар мен күннің масштабы (бас әріп
   биіктігі бірдей болсын), --cell — ең кең цифрдың ені, сағат «қозғалмасын». */
:root, [data-font="oswald"] { --f: 'Oswald'; --num-w: 400; --cell: .55em; --cell-c: .26em; --dk: 1.12; --tk: 1; }
[data-font="oswald"] { --w-strong: 500; }
[data-font="fira"]   { --f: 'FiraC';   --num-w: 600; --cell: .56em; --cell-c: .25em; --dk: 1.28; --tk: 1.08; }
[data-font="firax"]  { --f: 'FiraX';   --num-w: 600; --cell: .53em; --cell-c: .24em; --dk: 1.34; --tk: 1.2; }
[data-font="roboto"] { --f: 'RobotoC'; --num-w: 600; --cell: .52em; --cell-c: .28em; --dk: 1.28; --tk: 1.04; }
[data-font="pt"]     { --f: 'PTN';     --num-w: 600; --cell: .49em; --cell-c: .26em; --dk: 1.34; --tk: 1.14; }
[data-font="cuprum"] { --f: 'Cuprum';  --num-w: 600; --cell: .54em; --cell-c: .22em; --dk: 1.3;  --tk: 1.12; }
[data-font="ubuntu"] { --f: 'UbuntuC'; --num-w: 400; --cell: .45em; --cell-c: .25em; --dk: 1.36; --tk: 1.16; }
:root { --hn: 3.2rem; --hn-t: 3.2rem; --ha: 3rem; --ha-t: 7.15rem; --f-d: var(--f); --d-w: 600; --w-strong: var(--num-w); --rad: .9rem; --rad2: 1.1rem; --qk: 1; }
/* led.ihsan.kz сияқты: цифрлар мен күн — Oswald 600, атаулар мен мәтін — Fira Sans Condensed */
[data-font="ihsan"] { --f: 'FiraI'; --f-d: 'Oswald'; --num-w: 500; --d-w: 500; --w-strong: 600; --cell: .56em; --cell-c: .26em; --dk: 1.12; --tk: 1; }

/* 1 · Teal — ahnaf.kz-тегі «Намаз уақыты» блогы сияқты: қою teal фон,
   ақ жазу, алтын белгі, қазіргі намаз — кремді карточка. */
:root, [data-theme="teal"] {
  --bg1: #0B6461; --bg2: #063B39; --glow: rgba(189,226,224,.12);
  --line2: rgba(189,226,224,.24); --row: rgba(255,255,255,.07); --row-bd: rgba(189,226,224,.22); --row-sh: none;
  --tx: #FFFFFF; --tx2: rgba(225,245,244,.68); --acc: #E2BE85; --pill-tx: #063B39; --ar: #E2C795;
  --hero1: #FAFAF7; --hero2: #EEEBE3; --hero-tx: #1A2332; --hero-acc: #0B6E6B; --hero-mute: #6B7785; --hero-track: rgba(11,110,107,.14); --hero-ar: #0B6E6B; --hero-bd: #B8935E;
  --pan: rgba(255,255,255,.06); --pan-bd: rgba(189,226,224,.2); --cap: #E2BE85; --pan-ar: #FFFFFF; --pan-kz: rgba(255,255,255,.92);
  --orn: #BDE2E0; --orn-op: .07; --div-dot: #E2BE85; --logo: #FFFFFF;
}
/* 2 · Түнгі — сайттағы AI Ustaz баннері сияқты: teal → түнгі көк */
[data-theme^="tun"] {
  --bg1: #08413F; --bg2: #0E2E42; --glow: rgba(11,110,107,.30);
  --line2: rgba(189,226,224,.18); --row: rgba(255,255,255,.05); --row-bd: rgba(189,226,224,.16); --row-sh: none;
  --tx: #F3F1EC; --tx2: rgba(225,245,244,.6); --acc: #5FC4BE; --pill-tx: #06201F; --ar: #D9BF8E;
  --hero1: #0B6E6B; --hero2: #084F4D; --hero-tx: #FFFFFF; --hero-acc: #F2D7A6; --hero-mute: #BDE2E0; --hero-track: rgba(255,255,255,.16); --hero-ar: #F2D7A6; --hero-bd: #5FC4BE;
  --pan: rgba(255,255,255,.045); --pan-bd: rgba(189,226,224,.14); --cap: #5FC4BE; --pan-ar: #FFFFFF; --pan-kz: rgba(243,241,236,.9);
  --orn: #5FC4BE; --orn-op: .06; --div-dot: #5FC4BE; --logo: #5FC4BE;
}
/* ---- Түнгі-нің нұсқалары: түсі мен фоны сол, ұсақ-түйегі басқа ---- */
/* 2а · Түнгі алтын — акцент алтын, қазіргі намаз teal карточкада */
[data-theme="tunaltyn"] {
  --acc: #E2BE85; --pill-tx: #1A1406; --ar: #E2C795; --cap: #E2BE85; --div-dot: #E2BE85; --logo: #E2BE85; --orn: #E2BE85; --orn-op: .05;
  --hero-acc: #F2D7A6; --hero-ar: #F2D7A6; --hero-bd: #E2BE85; --row-bd: rgba(226,190,133,.16); --pan-bd: rgba(226,190,133,.14);
}
/* 2ә · Түнгі + ақ карточка — қазіргі намаз кремді, басқасы түнгі */
[data-theme="tunaq"] {
  --hero1: #FAFAF7; --hero2: #E9F2F0; --hero-tx: #12302F; --hero-acc: #0B6E6B; --hero-mute: #5E7472; --hero-track: rgba(11,110,107,.14); --hero-ar: #0B6E6B; --hero-bd: transparent;
}
/* 2в · Түнгі көк — фон көкке қарай, акцент аспан түсті */
[data-theme="tunkok"] {
  --bg1: #0B3A47; --bg2: #0C1F38; --glow: rgba(70,150,200,.22);
  --acc: #7CC4E4; --cap: #7CC4E4; --div-dot: #7CC4E4; --logo: #7CC4E4; --orn: #7CC4E4; --ar: #DCC79C;
  --row-bd: rgba(124,196,228,.16); --pan-bd: rgba(124,196,228,.13);
  --hero1: #12607A; --hero2: #0C4560; --hero-acc: #F2D7A6; --hero-mute: #B5DCEB; --hero-bd: #7CC4E4;
}
/* 2г · Түнгі жұмсақ — жақтаусыз, бұрыштары дөңгелегірек */
[data-theme="tunjumsaq"] {
  --row: rgba(255,255,255,.065); --row-bd: transparent; --pan: rgba(255,255,255,.05); --pan-bd: transparent;
  --rad: 1.4rem; --rad2: 1.6rem; --hero-bd: transparent;
}
[data-theme="tunjumsaq"] .pr.is-next .pc-in { border-color: transparent; background: rgba(95,196,190,.16); }

/* 3 · Ақшыл — сайттың өзі сияқты: кремді фон, ақ карточкалар, teal жазу */
[data-theme="aq"] {
  --bg1: #FAFAF7; --bg2: #F0EDE6; --glow: rgba(11,110,107,.06);
  --line2: rgba(26,35,50,.12); --row: #FFFFFF; --row-bd: rgba(26,35,50,.07); --row-sh: 0 0 1.2rem rgba(1,31,30,.07);
  --tx: #1A2332; --tx2: #74808F; --acc: #0B6E6B; --pill-tx: #FFFFFF; --ar: #0B6E6B;
  --hero1: #0B6E6B; --hero2: #084F4D; --hero-tx: #FFFFFF; --hero-acc: #F2D7A6; --hero-mute: #BDE2E0; --hero-track: rgba(255,255,255,.16); --hero-ar: #E1F5F4; --hero-bd: transparent;
  --pan: #FFFFFF; --pan-bd: rgba(26,35,50,.06); --cap: #0B6E6B; --pan-ar: #1A2332; --pan-kz: #2E3A4F;
  --orn: #0B6E6B; --orn-op: .06; --div-dot: #0B6E6B; --logo: #0B6E6B;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: min(1vw, 1.7778vh); width: 100%; height: 100%; overflow: hidden; background: var(--bg2); }
body { width: 100%; height: 100%; overflow: hidden; color: var(--tx);
  font-family: var(--f), Arial, sans-serif; font-weight: 400; font-feature-settings: 'tnum' 1; font-synthesis: none;
  -webkit-font-smoothing: antialiased; }
i { font-style: normal; }
.stage { position: fixed; inset: 0; overflow: hidden; text-transform: uppercase; }   /* барлық мәтін бас әріппен */

/* ------------------------------- фон ------------------------------------ */
.bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(170deg, var(--bg1) 0%, var(--bg2) 100%); }
.au { position: absolute; border-radius: 50%; will-change: transform; }
.au1 { left: -25%; top: -40%; width: 80%; height: 120%; background: radial-gradient(circle, var(--glow) 0%, transparent 65%); animation: drift1 40s ease-in-out infinite alternate; }
.au2 { left: -10%; bottom: -60%; width: 70%; height: 110%; background: radial-gradient(circle, var(--glow) 0%, transparent 65%); opacity: .6; animation: drift2 52s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(12%, 14%) scale(1.1); } }
@keyframes drift2 { to { transform: translate(10%, -12%) scale(.92); } }

/* қазақ ою-өрнегі (дөңгелек розетка): түсі градиентпен, кейбіреуі бұлыңғыр.
   blur — сыртқы қабатта, маска — ішкіде (әйтпесе маска бұлыңғырды кесіп тастайды). */
.orn { position: absolute; opacity: var(--orn-op); }
.orn > i { position: absolute; inset: 0; background: var(--orn);
  -webkit-mask: var(--m-oyu) center / contain no-repeat; mask: var(--m-oyu) center / contain no-repeat;
  animation: ornspin 420s linear infinite; }
.orn-a { left: -42vh; bottom: -62vh; width: 140vh; height: 140vh; }
.orn-b { right: -50vh; top: -50vh; width: 100vh; height: 100vh; }  /* көрінетіні — ширегі */
.orn-b > i { animation-direction: reverse; animation-duration: 340s; }
@keyframes ornspin { to { transform: rotate(360deg); } }

.logo { display: block; background: currentColor;
  -webkit-mask: var(--m-logo) center / contain no-repeat; mask: var(--m-logo) center / contain no-repeat; }
.logo-mark { -webkit-mask-image: var(--m-logo-mark); mask-image: var(--m-logo-mark); }

.ui { position: absolute; inset: 0; transition: opacity 1s ease; }
.ui.ui-hidden { opacity: 0; }

/* ?split= — сол жақ ені (--w) және сол жақтағы жазулардың масштабы (--k) */
:root { --w: 40%; --k: 1; --hh: 9.35rem; }
[data-split="25"] { --w: 25%; --k: .59; }
[data-split="30"] { --w: 30%; --k: .72; }
[data-split="35"] { --w: 35%; --k: .86; }
[data-split="45"] { --w: 45%; --k: 1.03; }
[data-split="50"] { --w: 50%; --k: 1; }

/* ========================= ШАПКА (бекітілген) =========================== */
.hdr { position: absolute; left: 0; right: 0; top: 0; height: var(--hh); }
.hdr:after { content: ''; position: absolute; left: 1.8rem; right: 0; bottom: 0; height: 1px; background: var(--line2); }
.h-l { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); padding: 0 1.8rem; display: flex; align-items: center; }
.ltile { flex: none; display: flex; align-items: center; justify-content: center; margin-right: calc(1.75rem * max(var(--k), .7)); }
.ltile .logo { color: var(--logo); width: calc(10rem * max(var(--k), .75)); height: calc(5.35rem * max(var(--k), .75)); }
.brand { flex: 1 1 auto; min-width: 0; text-transform: uppercase; white-space: nowrap; }
.kick { font-size: 1rem; font-weight: 400; color: var(--tx2); line-height: 1.25; }
.name { font-family: 'KZUnb', sans-serif; font-size: 2rem; font-weight: 400; line-height: 1.1; margin-top: .02em; }

/* жіңішке тік сызық — шапканың ішіндегі екі бөлікті бөледі */
.h-r { position: absolute; left: var(--w); right: 0; top: 0; bottom: 0; padding: 0 2.2rem; display: flex; align-items: center; }
.h-r:before { content: ''; position: absolute; left: -.9rem; top: 24%; bottom: 24%; width: 1px; background: var(--line2); }
.h-r:after { content: ''; position: absolute; left: -1.22rem; top: 50%; width: .64rem; height: .64rem; margin-top: -.32rem; transform: rotate(45deg); background: var(--div-dot); }
.dates { min-width: 0; white-space: nowrap; font-size: 1rem; }
.d1 { font-family: var(--f-d); font-size: calc(2.1em * var(--dk)); font-weight: var(--d-w); line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; }
.d2 { margin-top: .25em; font-size: calc(1.4em * var(--tk)); font-weight: 400; color: var(--tx2); line-height: 1.4; }
.d2 .ar { font-family: 'AdwaSalaf', serif; font-weight: 400; font-size: 1.15em; color: var(--ar); direction: rtl; unicode-bidi: isolate; }
.d2 .dash { display: inline-block; width: 1.4em; height: 2px; margin: 0 .6em; vertical-align: .32em; background: var(--line2); }
.clock { font-family: var(--f-d); margin-left: auto; padding-left: 2rem; font-size: calc(5rem * var(--dk)); font-weight: var(--w-strong); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.clock .s { color: var(--acc); }
/* әр цифр өз ұяшығында — секунд ауысқанда сағат «қозғалмайды» */
.clock b { display: inline-block; width: var(--cell); text-align: center; font-weight: inherit; }
.clock b.c { width: var(--cell-c); }
.pcd-v b { display: inline-block; width: var(--cell); text-align: center; font-weight: inherit; }
.pcd-v b.c { width: var(--cell-c); }

/* ========================= СОЛ ЖАҚ: намаз =============================== */
.lc { position: absolute; left: 0; top: var(--hh); bottom: 0; width: var(--w); padding: 1.4rem 1.8rem 1.8rem; display: flex; flex-direction: column; }
.lp { position: relative; flex: 1 1 auto; min-height: 0; }
.rows { position: absolute; inset: 0; }
.pr { position: relative; display: block; height: 11.9%; margin-bottom: .55rem;
  transition: height .7s cubic-bezier(.2,.8,.2,1); }
.pr-l { margin-bottom: 0; }
.pc-in { position: absolute; inset: 0; overflow: hidden; border-radius: var(--rad);
  background: var(--row); border: 2px solid var(--row-bd, var(--line)); box-shadow: var(--row-sh);
  transition: background-color .7s ease; }
.pn { position: absolute; left: calc(1.35rem * var(--k)); top: 50%; transform: translateY(-50%); font-size: calc(2.3rem * var(--k) * var(--tk)); line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; }
.pa { position: absolute; right: calc(11.4rem * var(--k)); top: 50%; transform: translateY(-50%); font-family: 'AdwaSalaf', serif; font-weight: 400; direction: rtl;
  font-size: calc(3.1rem * var(--k)); line-height: 1.3; color: var(--ar); white-space: nowrap; }
.ptag { position: absolute; left: 46%; top: 50%; transform: translate(-50%, -50%); width: calc(4.5rem * var(--k)); line-height: calc(1.75rem * var(--k)); text-align: center; border-radius: 99px;
  font-size: calc(.62rem * var(--k)); letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--pill-tx); background: var(--acc); opacity: 0; }
.pt { position: absolute; right: calc(1.3rem * var(--k)); top: 50%; transform: translateY(-50%); font-family: var(--f-d); font-size: calc(3rem * var(--k) * var(--dk)); line-height: 1; font-weight: var(--w-strong); letter-spacing: -.02em; white-space: nowrap; }
.pdate, .pcd { display: none; }

.pr.is-next .ptag { opacity: 0; }   /* «Келесі» белгісі алынып тасталды — келесі намазды жақтауының түсі көрсетеді */
/* келесі намаз — жақтауы да акцент түсті, белгі анық көрінсін */
.pr.is-next .pc-in { border-color: var(--acc); }

/* қазіргі намаз — карточка, өз орнында үлкейеді */
.pr.is-now { height: calc(100% - 5 * 11.9% - 5 * .55rem); }   /* баған QR-дың астымен дәл бітеді */
.pr.is-now .pc-in { border-color: var(--hero-bd); background: linear-gradient(to bottom, var(--hero1), var(--hero2));
  box-shadow: 0 .9rem 2.6rem rgba(0,0,0,.22); animation: heroin .8s ease both; }
@keyframes heroin { from { opacity: .4; } }
.pr.is-now .ptag { opacity: 1; left: calc(1.6rem * var(--k)); top: calc(1.35rem * var(--k)); transform: none; width: auto; line-height: 1.2; text-align: left;
  background: none; color: var(--hero-acc); font-size: calc(1.1rem * var(--k)); letter-spacing: .24em; }
.pr.is-now .pn { left: calc(1.6rem * var(--k)); top: calc(var(--hn-t) * var(--k)); transform: none; font-size: calc(var(--hn) * var(--k) * var(--tk)); line-height: 1.15; font-weight: 700; color: var(--hero-tx); }
.pr.is-now .pa { left: calc(1.6rem * var(--k)); right: auto; top: calc(var(--ha-t) * var(--k)); transform: none; font-size: calc(var(--ha) * var(--k)); line-height: 1.2; color: var(--hero-ar); }
.pr.is-now .pdate { display: none; position: absolute; right: calc(1.6rem * var(--k)); top: calc(1.35rem * var(--k)); line-height: 1.2; font-size: calc(.95rem * var(--k)); font-weight: 400; color: var(--hero-mute); white-space: nowrap; }
.pr.is-now .pt { right: calc(1.6rem * var(--k)); top: calc(1.2rem * var(--k)); transform: none; font-size: calc(5.7rem * var(--k) * var(--dk)); color: var(--hero-acc); letter-spacing: -.03em; font-weight: var(--w-strong); }
.pr.is-now .pcd { display: block; position: absolute; left: calc(1.6rem * var(--k)); right: calc(1.6rem * var(--k)); bottom: calc(1.25rem * var(--k)); padding-top: calc(1.1rem * var(--k)); white-space: nowrap; }
.pcd-l { font-size: calc(1.55rem * var(--k) * var(--tk)); font-weight: 600; color: var(--hero-mute); line-height: calc(2.2rem * var(--k)); }
.pcd-v { float: right; font-family: var(--f-d); font-size: calc(2.2rem * var(--k) * var(--dk)); font-weight: var(--num-w); color: var(--hero-tx); line-height: calc(2.2rem * var(--k)); letter-spacing: -.01em; }
.pbar { position: absolute; left: 0; right: 0; top: 0; height: calc(.42rem * var(--k)); border-radius: 99px; overflow: hidden; background: var(--hero-track); }
.pbar-f { position: absolute; inset: 0; border-radius: 99px; background: var(--hero-acc);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s linear; }

/* ================= ОҢ ЖАҚ: Күн аяты / Күн хадисі, QR ==================== */
.rc { position: absolute; left: var(--w); right: 1.8rem; top: calc(var(--hh) + 1.4rem); bottom: 1.8rem; display: flex; flex-direction: column; }
.pan { position: relative; flex: 1 1 auto; min-height: 0; border-radius: var(--rad2); background: var(--pan); border: 2px solid var(--pan-bd); box-shadow: var(--row-sh); overflow: hidden; }
.cap { position: absolute; left: 2rem; top: 1.5rem; font-size: calc(1.2rem * var(--tk)); line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--cap); white-space: nowrap; }
.cap i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cap); margin-right: .75rem; vertical-align: .14rem; }
.src { position: absolute; right: 2rem; top: 1.5rem; font-size: calc(1.15rem * var(--tk)); line-height: 1.6rem; color: var(--tx2); white-space: nowrap; }
.pbody { position: absolute; left: 3rem; right: 3rem; top: 4.2rem; bottom: 1.8rem; overflow: hidden; text-align: center; }
.cap, .src, .pbody { transition: opacity .9s ease; }
.pan.is-swap .cap, .pan.is-swap .src, .pan.is-swap .pbody { opacity: 0; }
.arb { direction: rtl; color: var(--pan-ar); }
.arb { font-family: 'KFGQPC', serif; line-height: 1.75; }
.sep { position: relative; width: 9rem; height: 1px; margin: .9rem auto 1rem; background: var(--line2); }
.sep:after { content: ''; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; margin: -.3rem 0 0 -.3rem; transform: rotate(45deg); border: 1.5px solid var(--cap); background: var(--bg2); }
[data-theme="aq"] .sep:after { background: #FFFFFF; }
.kaz { font-weight: 600; line-height: 1.4; color: var(--pan-kz); }

/* QR — панельдің астында еркін қатар, жақтаусыз. ?qr=0 — жасырылады */
[data-split="40"], [data-split="45"], [data-split="50"] { --hn: 2.8rem; --hn-t: 3rem; --ha: 2.4rem; --ha-t: 6.2rem; }   /* қатар сыйсын */
[data-split="40"] { --qk: .88; }
[data-split="45"] { --qk: .76; }
[data-split="50"] { --qk: .66; }
.qrs { flex: none; display: flex; justify-content: space-between; margin-top: 1.8rem; }
[data-qr="0"] .qrs { display: none; }
.qg { flex: none; display: flex; align-items: center; }
.qg + .qg { margin-left: .8rem; }
.qt { flex: none; width: calc(5.95rem * var(--qk)); height: calc(5.95rem * var(--qk)); border-radius: .3rem; background: #FFFFFF; }
.qt img { display: block; width: 100%; height: 100%; }
.qx { min-width: calc(6.4rem * var(--tk) * var(--qk)); margin-left: calc(1rem * var(--qk)); }   /* «Fajr Media» ені: кодтар бірдей қадаммен тұрады */
.qe { font-size: max(.75rem, calc(1rem * var(--tk) * var(--qk))); line-height: 1.2; font-weight: 400; color: var(--tx2); white-space: nowrap; }
.qn { margin-top: .15em; font-size: max(.8rem, calc(1.4rem * var(--tk) * var(--qk))); line-height: 1.1; font-weight: 600; color: var(--tx); white-space: nowrap; }

/* ============== «… намазының уақыты кірді» (minaret.kz шешімі) ========== */
.ov { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 5; transition: opacity 1s ease; }
.ov.is-on { opacity: 1; }
.ov-clock { position: absolute; left: 0; right: 0; top: 10%; text-align: center; font-family: var(--f-d); font-size: 3.6rem; line-height: 1; font-weight: var(--num-w); color: var(--tx2); }
.ov-msg { position: absolute; left: 2%; right: 2%; top: 30%; text-align: center; white-space: nowrap;
  font-family: var(--f-d); font-size: 3.9rem; line-height: 1.1; font-weight: var(--d-w); letter-spacing: .01em; text-transform: uppercase; color: var(--tx); }
.ov-msg-ar { position: absolute; left: 2%; right: 2%; top: 54%; text-align: center; white-space: nowrap;
  direction: rtl; unicode-bidi: embed; font-family: 'AdwaSalaf', serif; font-weight: 400; font-size: 2.6rem; line-height: 1.3; color: var(--tx); }

/* ------------------------------ ескерту ---------------------------------- */
.notice { position: absolute; left: 0; bottom: 0; width: var(--w); line-height: 1.8rem; text-align: center; font-size: .9rem;
  color: var(--pill-tx); background: var(--acc); display: none; z-index: 6; }
.notice.is-on { display: block; }