/* OkTAX — ana səhifə («modern» dizayn). Tokenlər sayt.css-dədir (--yer, --s1…, --vurgu…).
   CSP: inline stil yoxdur; ardıcıllıq gecikmələri :nth-child / :nth-of-type ilə verilir. */

/* ---- Yalnız ana səhifəyə aid rəng fərqləri (açıq / tünd) ---- */
:root{
  --a-sahne:var(--vurgu); --a-sahne-pad:clamp(28px,5vw,72px) clamp(14px,4vw,64px) 22px;
  --a-cap:#dbe8ff; --a-cap-b:#ffffff; --a-cerceve:rgba(255,255,255,.35);
  --a-fr:#ffffff; --a-kafel:#1f66c9;
  --bosluq:clamp(120px,13vw,220px); --en:1320px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --a-sahne:transparent; --a-sahne-pad:0;
  --a-cap:var(--zeif2); --a-cap-b:var(--ag); --a-cerceve:rgba(255,255,255,.12);
  --a-fr:#f3f5f9; --a-kafel:#5a9dff}}
:root[data-theme="dark"]{
  --a-sahne:transparent; --a-sahne-pad:0;
  --a-cap:var(--zeif2); --a-cap-b:var(--ag); --a-cerceve:rgba(255,255,255,.12);
  --a-fr:#f3f5f9; --a-kafel:#5a9dff}

/* ---- Əsas (Bootstrap reboot-u bu səhifə üçün yumşaldılır) ---- */
.ana{font:400 18px/1.55 var(--ok-f-metn);color:var(--ag);background:var(--yer)}
/* :where() — sıfır spesifiklik: bölmə qaydaları (margin-top və s.) bunları rahat üstələyir */
:where(.ana) img,:where(.ana) video{display:block;max-width:100%;height:auto}
:where(.ana) :is(h1,h2,h3,h4){margin:0;font-family:var(--ok-f-bas);font-weight:620;text-wrap:balance;color:inherit}
:where(.ana) :is(p,figure){margin:0}
:where(.ana) :is(ol,ul){margin:0;padding:0}
:where(.ana) a{color:inherit}
:where(.ana) button{font:inherit;color:inherit}
.ana .ic{width:min(100%,calc(var(--en) + 2*var(--k)));margin-inline:auto;padding-inline:var(--k)}
.ana .reqem{font-variant-numeric:tabular-nums}
.ana-mesaj{padding-top:24px}

/* Üç başlıq pilləsi + bir lead */
.ana .d1{font-size:clamp(42px,8.6vw,150px);line-height:.9;letter-spacing:-.055em;font-weight:640}
.ana .d2{font-size:clamp(40px,5.4vw,92px);line-height:.95;letter-spacing:-.045em}
.ana .d3{font-size:clamp(22px,1.8vw,28px);line-height:1.15;letter-spacing:-.02em}
.ana .lead{font-size:clamp(19px,1.5vw,22px);font-weight:400;line-height:1.5;color:var(--zeif);margin:0}
.ana .lead b{color:var(--ag);font-weight:500}
.ana .lead a,.kadr-yazi a{color:var(--ag);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ana .lead a:hover,.kadr-yazi a:hover{color:var(--vurgu)}

/* ===== Hero: mərkəzdə bir an, altında əyilmiş proqram ekranı düzəlir ===== */
.hero{padding-top:clamp(64px,9vw,140px);text-align:center}
.hero h1 .s{display:inline-block}
.hero .lead{margin:32px auto 0;max-width:44ch}
.hero .duymeler{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.hero .qeyd{margin-top:22px;font-size:15px;color:var(--zeif2)}
.sehne{perspective:1800px;margin-top:clamp(64px,7vw,104px);padding-bottom:var(--bosluq)}
.sahne-fon{background:var(--a-sahne);border-radius:32px;padding:var(--a-sahne-pad);perspective:1800px}
.sehne .app{transform:rotateX(calc(var(--p,0) * 1deg)) scale(calc(1 - var(--p,0) * .004));transform-origin:50% 0;will-change:transform}
.sehne figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:20px;font-size:15px;color:var(--a-cap);text-align:left}
.sehne figcaption b{color:var(--a-cap-b);font-weight:550}

/* ===== Proqram fraqmenti (data-ui: proqramın öz açıq görünüşü, hər iki rejimdə eyni) ===== */
.app{--a-yan:#071b38;--a-fon:#f3f5f9;--a-kart:#fff;--a-xett:#dfe5ee;--a-metn:#0f1e33;--a-zeif:#5b6a80;
  display:grid;grid-template-columns:200px minmax(0,1fr);height:clamp(520px,46vw,690px);overflow:hidden;border-radius:16px;background:var(--a-fon);color:var(--a-metn);font:400 13px/1.35 var(--ok-f-metn);text-align:left;
  outline:1px solid var(--a-cerceve);outline-offset:6px} /* taste-skill-ignore: data-ui çərçivə */
.app-yan{background:var(--a-yan);color:#dce6f5;padding:18px 10px;display:flex;flex-direction:column;gap:2px}
.app-yan .l{display:flex;align-items:center;gap:8px;padding:0 8px 18px;font:650 19px/1 var(--ok-f-bas);color:#fff;letter-spacing:-.02em}
.app-yan .l svg{width:30px;height:20px}
.app-yan .b{font-size:10.5px;color:#7f97bb;padding:14px 8px 6px}
.app-yan .k{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;color:#dce6f5}
.app-yan .k svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.app-yan .k.aktiv{background:#16325c;color:#fff;font-weight:600}
.app-yan .k .nisan{margin-left:auto;background:#7cc0ff;color:#071b38;border-radius:999px;font-size:10.5px;font-weight:600;padding:1px 7px}
.app-yan .alt{margin-top:auto;font-size:10.5px;color:#7f97bb;padding:8px}
.app-esas{display:grid;grid-template-rows:auto 1fr;min-width:0}
.app-ust{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--a-xett);white-space:nowrap;overflow:hidden} /* taste-skill-ignore: data-ui */
.app-ust .s{border:1px solid #b9c4d4;border-radius:5px;padding:5px 9px;font-weight:600;font-size:12px} /* taste-skill-ignore: data-ui */
.app-ust .c{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600}
.app-ust .c.y{background:#e3f4e8;color:#166534}
.app-ust .c.d{background:#fdf0dc;color:#9a4b07}
.app-ust .bos{flex:1}
.app-ust .d{border:1px solid #c7d0dd;border-radius:5px;padding:5px 9px;font-weight:600;font-size:12px;background:#fff} /* taste-skill-ignore: data-ui */
.app-ust .d.m{background:#0754BD;border-color:#0754BD;color:#fff}
.app-ic{padding:16px 18px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-content:start}
.app-bas{grid-column:1/-1}
.app-bas small{color:var(--a-zeif);font-weight:600;font-size:11.5px}
.app-bas .say{font:650 26px/1.15 var(--ok-f-bas);letter-spacing:-.02em;margin:4px 0 6px}
.app-bas p{color:var(--a-zeif);font-size:13px;max-width:72ch}
.app .kart{background:var(--a-kart);border:1px solid var(--a-xett);border-radius:8px;min-width:0} /* taste-skill-ignore: data-ui */
.kart-bas{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--a-xett);font-weight:600;font-size:14px} /* taste-skill-ignore: data-ui */
.kart-bas .t{display:flex;gap:6px}
.kart-bas .t>span{border:1px solid #c7d0dd;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;color:var(--a-zeif)} /* taste-skill-ignore: data-ui */
.kart-bas .t>span.s{border-color:#0754BD;background:#e8f1fd;color:#0754BD}
.cutler{list-style:none}
.cut{display:grid;grid-template-columns:minmax(0,1.05fr) 46px minmax(0,1.3fr) auto;align-items:center;gap:6px 10px;padding:11px 14px;border-bottom:1px solid #edf1f6;transition:background-color .45s var(--yavas)} /* taste-skill-ignore: data-ui */
.cut .od small,.cut .qa small{display:block;color:var(--a-zeif);font-size:11px}
.cut .od b{display:block;font-size:12px;font-weight:700;letter-spacing:.01em}
.cut .od .m{font-size:16px;font-weight:600}
.cut .qa u{font-size:11.5px;font-weight:600}
.cut .qa span{display:block;font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cut svg.x{width:46px;height:30px;overflow:visible}
.cut svg.x path{fill:none;stroke:#0754BD;stroke-width:2;stroke-linecap:round;transition:stroke .4s}
.cut .dl{display:flex;gap:6px}
.cut .dl button{min-height:34px;padding:0 13px;border-radius:5px;font-weight:600;font-size:12.5px;cursor:pointer;border:1px solid #c7d0dd;background:#fff;color:var(--a-metn);transition:transform .14s var(--yavas),background-color .2s} /* taste-skill-ignore: data-ui */
.cut .dl button.b{background:#0754BD;border-color:#0754BD;color:#fff}
.cut .dl button.b:hover{background:#06469c}
.cut .dl button:active{transform:scale(.96)}
.cut .dl button:focus-visible{outline:2px solid #0754BD;outline-offset:2px}
.cut .ok{display:none;align-items:center;gap:6px;color:#15803d;font-weight:600;font-size:12.5px;min-height:34px}
.cut .ok svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}
.cut.bagli{background:#eef8f1}
.cut.bagli svg.x path{stroke:#15803d}
.cut.bagli .dl{display:none}
.cut.bagli .ok{display:flex;animation:gor .35s var(--yavas)}
.cut.diger .dl{opacity:.45}
@keyframes gor{from{opacity:0;transform:translateY(4px);filter:blur(3px)}}
.sag-kartlar{display:grid;gap:14px;align-content:start}
.edv{padding:12px 14px;display:grid;gap:8px}
.edv .s{display:flex;justify-content:space-between;gap:10px;color:var(--a-zeif)}
.edv .s b{color:var(--a-metn);white-space:nowrap}
.edv .s.c{border-top:1px solid var(--a-xett);padding-top:8px;color:var(--a-metn);font-weight:600} /* taste-skill-ignore: data-ui */
.edv small{color:var(--a-zeif);font-size:11.5px}
.edv .lnk{color:#0754BD;font-weight:600;font-size:12px;text-decoration:underline}
.gb{padding:8px 14px 12px;display:grid;gap:6px}
.gb div{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.gb u{color:#0754BD}
.gb b{white-space:nowrap}
.nisan-s{background:#fdf0dc;color:#9a4b07;border-radius:999px;font-size:11px;padding:1px 8px}

/* ===== Bölmə başlığı ===== */
.bb{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(48px,5vw,80px)}
.bb .lead{max-width:38ch}

/* ===== Bento: dörd iş, hər biri öz canlı fraqmenti ilə ===== */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.plit{background:var(--s1);border-radius:22px;padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:20px;min-width:0;overflow:hidden;transition:background-color .3s var(--yavas),transform .3s var(--yavas)}
@media (hover:hover){.plit:hover{background:var(--s2);transform:translateY(-3px)}}
.plit .ust p{margin-top:10px;color:var(--zeif);font-size:16.5px;max-width:42ch}
.plit .fr{margin-top:auto}
.p1{grid-column:span 4;grid-row:span 2}
.p2,.p3{grid-column:span 2}
.p4{grid-column:span 4}
.p5{grid-column:span 2}

/* p1: çıxarış ↔ qaimə bağlantıları çəkilir */
.tut{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);background:var(--a-fr);color:#0f1e33;border-radius:14px;padding:22px;font-size:14px}
.p1 .fr{margin-top:8px}
.tut h4{margin:0 0 10px;height:16px;font:600 12px/16px var(--ok-f-metn);color:#5b6a80;white-space:nowrap;letter-spacing:0}
.tut ol{list-style:none;display:grid;gap:8px}
.tut li{display:flex;justify-content:space-between;gap:10px;align-items:center;height:56px;padding:0 12px;background:#fff;border-radius:8px;transition:background-color .4s}
.tut li b{font-weight:600}
.tut li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tut li.y{background:#e6f5ea}
.tut li.r{background:#fde8e8}
.tut li.a{background:#fdf1e1}
:root:not([data-theme="dark"]) .tut li{box-shadow:inset 0 0 0 1px #e6ebf2} /* taste-skill-ignore: data-ui */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tut li{box-shadow:none}}
.tut svg{width:90px;height:402px;overflow:visible;align-self:start}
.tut svg path{fill:none;stroke:#0754BD;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--yavas)}
.tut svg path:nth-of-type(2){transition-delay:120ms}
.tut svg path:nth-of-type(3){transition-delay:240ms}
.tut svg path:nth-of-type(4){transition-delay:360ms}
.tut svg path:nth-of-type(5){transition-delay:480ms}
.tut svg path.r{stroke:#dc2626}
.tut.cekildi svg path{stroke-dashoffset:0}
html:not(.js) .tut svg path{stroke-dashoffset:0}
.tut-netice{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:15px;color:var(--zeif)}
.tut-netice b{color:var(--ag);font-weight:600}
.tut-netice .tut-qeyd{color:var(--zeif2)}

/* p2: qırmızı alarm kartı (proqramdakı kimi) */
.alarm-k{background:#fff;color:#0f1e33;border-radius:12px;overflow:hidden;font-size:13px}
:root:not([data-theme="dark"]) .alarm-k{box-shadow:0 0 0 1px #e3e8ef} /* taste-skill-ignore: data-ui */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .alarm-k{box-shadow:none}}
.alarm-k .q{background:#c81e1e;color:#fff;padding:10px 14px;font-weight:600;display:flex;gap:8px;align-items:center}
.alarm-k .q svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.alarm-k .g{padding:12px 14px;display:grid;gap:6px}
.alarm-k .g b{font-size:14px}
.alarm-k .g .x{background:#fde8e8;border-radius:6px;padding:8px 10px;color:#7f1d1d}
.alarm-k .d{display:flex;gap:8px;padding:0 14px 14px}
.alarm-k .d span{border-radius:6px;padding:7px 12px;font-weight:600;font-size:12.5px;background:#c81e1e;color:#fff}
.alarm-k .d span+span{background:#eef1f5;color:#0f1e33}

/* p3: ƏDV rəqəmləri */
.edv-p{display:grid;gap:10px}
.edv-p div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--s2);border-radius:12px;padding:14px 16px;font-size:15px;color:var(--zeif)}
.edv-p div b{font:620 clamp(20px,1.6vw,24px)/1 var(--ok-f-bas);letter-spacing:-.02em;color:var(--ag)}
.edv-p div.f{background:var(--vurgu-sahe)}
.edv-p .son-gun{font-size:15px;color:var(--zeif);padding:2px 4px}
.edv-p .son-gun b{color:var(--ag);font-weight:600}

/* p4: gömrük videosu */
.p4 .vid{border-radius:14px;overflow:hidden;aspect-ratio:16/8.4;background:var(--s2)}
.p4 .vid video{width:100%;height:100%;object-fit:cover;object-position:0 0}

/* p5: ixrac */
.ixrac{display:grid;gap:8px}
.ixrac div{display:flex;align-items:center;gap:12px;background:var(--s2);border-radius:12px;padding:14px 16px;font-size:15.5px;font-weight:500}
.ixrac svg{width:20px;height:20px;flex:none;stroke:var(--vurgu);fill:none;stroke-width:1.8}
.borc{width:100%;border-collapse:collapse;color:#0f1e33;font-size:14px}
.borc tbody tr{background:var(--a-fr)}
.borc caption{caption-side:top;text-align:left;font-size:13px;color:var(--zeif);padding:0 2px 8px}
.borc th,.borc td{padding:11px 14px;text-align:left;font-weight:400;border-bottom:1px solid #e3e8ef} /* taste-skill-ignore: data-ui cədvəl */
.borc td{text-align:right;font-weight:600;white-space:nowrap}
.borc tr.c th,.borc tr.c td{font-weight:700;border-bottom:0;background:#e8f0fd}

/* ===== Ay boyu: yapışan hekayə ===== */
.hekaye{padding-top:var(--bosluq)}
.hekaye .yol{position:relative;height:calc(4 * 85vh)}
.hekaye .yapisan{position:sticky;top:var(--bas-h);height:calc(100svh - var(--bas-h));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,72px);align-items:center}
.addimlar{list-style:none;display:grid;gap:6px}
.addimlar li{position:relative;padding:18px 22px;border-radius:16px;transition:background-color .45s var(--yavas),color .45s}
.addimlar h3{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.025em}
.addimlar p{margin-top:8px;color:var(--zeif);max-width:40ch;font-size:16.5px}
.js .hekaye.pin .addimlar li{color:var(--zeif2)}
.js .hekaye.pin .addimlar li p{color:var(--zeif2)}
.js .hekaye.pin .addimlar li.aktiv{background:var(--s1);color:var(--ag)}
.js .hekaye.pin .addimlar li.aktiv p{color:var(--zeif)}
.kadrlar{position:relative;aspect-ratio:1280/820;border-radius:20px;overflow:hidden;background:var(--s1)}
.kadrlar video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;opacity:0;transform:scale(1.03);transition:opacity .6s var(--yavas),transform .9s var(--yavas)}
.kadrlar video.aktiv{opacity:1;transform:none}
.kadr-yazi{margin-top:14px;font-size:15px;color:var(--zeif2)}

/* ===== Bütün imkanlar: beş sütunlu siyahı, kartsız ===== */
.imkanlar{padding-top:var(--bosluq)}
.imkan-sebeke{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(20px,2.4vw,40px)}
.imkan-sebeke h3{font-size:19px;line-height:1.2;letter-spacing:-.015em;margin-bottom:14px;color:var(--vurgu)}
.imkan-sebeke ul{list-style:none;display:grid;gap:10px}
.imkan-sebeke li{font-size:15.5px;line-height:1.45;color:var(--zeif)}

/* ===== Məxfilik: nisbət ===== */
.mexfi{padding-top:var(--bosluq)}
.nisbet{display:grid;grid-template-columns:minmax(0,82fr) minmax(0,18fr);gap:12px}
.nisbet .bizim{background:var(--vurgu);color:var(--vurgu-ink);border-radius:22px;padding:clamp(24px,3vw,44px);display:grid;gap:clamp(32px,5vw,72px)}
.nisbet h3{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.03em}
.nisbet .bizim ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nisbet .bizim li{display:flex;gap:10px;align-items:center;background:var(--a-kafel);border-radius:12px;padding:18px;font-weight:600;font-size:clamp(16px,1.3vw,19px)}
.nisbet .bizim li svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4}
.nisbet .sayt{background:var(--s1);border-radius:22px;padding:clamp(20px,2vw,28px);display:grid;align-content:space-between;gap:16px}
.nisbet .sayt p{font-size:15px;color:var(--zeif)}
.nisbet .sayt b{font-size:17px;font-weight:600}

/* ===== Qiymətlər (bazadan) ===== */
.qiy{padding-top:var(--bosluq)}
.tarifler{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tarif{background:var(--s1);border-radius:22px;padding:28px 26px;display:flex;flex-direction:column;gap:14px;transition:background-color .3s,transform .3s var(--yavas)}
@media (hover:hover){.tarif:hover{background:var(--s2);transform:translateY(-3px)}}
.tarif h3{font-size:22px;letter-spacing:-.02em}
.tarif .pul{font:640 clamp(32px,2.9vw,46px)/1 var(--ok-f-bas);letter-spacing:-.045em;margin-top:8px;white-space:nowrap}
.tarif p{color:var(--zeif);font-size:16px}
.tarif p.il{margin-top:-6px;font-size:14px;color:var(--zeif2)}
.tarif .dym{margin-top:auto;width:100%}
.tarif.secilmis{background:var(--vurgu-sahe)}
.tarif.secilmis p.il{color:var(--zeif)}
@media (hover:hover){.tarif.secilmis:hover{background:var(--vurgu-sahe-ust)}}

/* ===== Suallar ===== */
.sual{padding-top:var(--bosluq);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px clamp(32px,5vw,96px)}
.sual .siyahi{display:grid;gap:8px}
.sual details{background:var(--s1);border-radius:16px;transition:background-color .2s}
.sual details[open]{background:var(--s2)}
.sual summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;min-height:44px;font-weight:550;font-size:18px;border-radius:16px}
.sual summary::-webkit-details-marker{display:none}
.sual summary::after{content:"+";flex:none;font-size:26px;line-height:1;font-weight:300;color:var(--zeif);transition:transform .3s var(--yavas)}
.sual details[open] summary::after{transform:rotate(45deg)}
.sual details p{padding:0 26px 24px;color:var(--zeif);max-width:62ch}

/* ===== Son ===== */
.son{padding-top:var(--bosluq);text-align:center}
.son .lead{margin:28px auto 0;max-width:42ch}
.son .duymeler{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.son .teleb{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px;list-style:none}
.son .teleb li{background:var(--s1);border-radius:999px;padding:10px 18px;font-size:15px;color:var(--zeif)}
.son .teleb li b{color:var(--ag);font-weight:500}

/* ===== Hərəkət: yalnız .js altında gizlədilir (skriptsiz məzmun görünür) ===== */
.js [data-cix]>*{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity .7s var(--yavas),transform .7s var(--yavas),filter .7s var(--yavas)}
.js [data-cix]>:nth-child(2){transition-delay:80ms}
.js [data-cix]>:nth-child(3){transition-delay:160ms}
.js [data-cix]>:nth-child(4){transition-delay:240ms}
.js [data-cix]>:nth-child(5){transition-delay:320ms}
.js [data-cix]>:nth-child(6){transition-delay:400ms}
.js [data-cix]>:nth-child(7){transition-delay:480ms}
.js [data-cix]>:nth-child(n+8){transition-delay:560ms}
.js [data-cix].gorundu>*{opacity:1;transform:none;filter:none}
.js .hero h1 .s{opacity:0;transform:translateY(.3em);filter:blur(10px);animation:qalx 1s var(--yavas) forwards}
.js .hero h1 .s:nth-of-type(2){animation-delay:70ms}
.js .hero h1 .s:nth-of-type(3){animation-delay:140ms}
.js .hero h1 .s:nth-of-type(4){animation-delay:210ms}
.js .hero .lead,.js .hero .duymeler,.js .hero .qeyd{opacity:0;animation:qalx .9s var(--yavas) forwards}
.js .hero .lead{animation-delay:.35s;transform:translateY(12px)}
.js .hero .duymeler{animation-delay:.45s;transform:translateY(12px)}
.js .hero .qeyd{animation-delay:.55s}
.js .sehne{opacity:0;animation:qalx 1.2s var(--yavas) .5s forwards}
@keyframes qalx{to{opacity:1;transform:none;filter:none}}

/* ===== Uyğunlaşma ===== */
@media (max-width:1100px){
  .app{grid-template-columns:64px minmax(0,1fr)}
  .app-yan .l span,.app-yan .k span,.app-yan .b,.app-yan .alt,.app-yan .k .nisan{display:none}
  .app-ic{grid-template-columns:minmax(0,1fr)}
  .sag-kartlar{display:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p1,.p4{grid-column:span 2}
  .p1{grid-row:auto}
  .p2,.p3{grid-column:span 1}
  .p5{grid-column:span 2}
  .tarifler{grid-template-columns:repeat(2,minmax(0,1fr))}
  .imkan-sebeke{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .bb,.sual{grid-template-columns:1fr}
  .hekaye .yol{height:auto}
  .hekaye .yapisan{position:static;height:auto;grid-template-columns:1fr}
  .kadrlar{order:-1}
  .nisbet{grid-template-columns:1fr}
  .nisbet .bizim ul{grid-template-columns:1fr 1fr}
  .imkan-sebeke{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .app{grid-template-columns:minmax(0,1fr);height:auto;max-height:560px}
  .app-yan,.app-ust .c,.app-ust .d:not(.m),.app-bas p{display:none}
  .app-bas .say{font-size:19px}
  .sahne-fon{border-radius:22px}
  .cut{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .cut svg.x{display:none}
  .cut .qa{grid-column:1/-1;grid-row:2}
  .cut .dl,.cut .ok{grid-column:2;grid-row:1}
  .cut .dl button:not(.b){display:none}
  .hero .duymeler .dym,.son .duymeler .dym{width:100%}
  .bento{grid-template-columns:1fr}
  .p1,.p2,.p3,.p4,.p5{grid-column:auto}
  .tut{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);padding:12px;font-size:12px}
  .tut svg{width:36px;height:402px}
  .tut li{padding:0 8px}
  .tut li b{display:none}
  .nisbet .bizim ul,.tarifler,.imkan-sebeke{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js [data-cix]>*{transform:none;filter:none;transition:opacity .2s linear;transition-delay:0s}
  .js .hero h1 .s,.js .hero .lead,.js .hero .duymeler,.js .hero .qeyd,.js .sehne{animation:none;opacity:1;transform:none;filter:none}
  .sehne .app{transform:none}
  .tut svg path{transition:none}
  .kadrlar video{transition:opacity .2s linear;transform:none}
  .plit,.tarif,.cut .dl button,.addimlar li{transition:none}
  .cut.bagli .ok{animation:none}
}
@media print{
  .js [data-cix]>*,.js .hero h1 .s,.js .hero .lead,.js .hero .duymeler,.js .hero .qeyd,.js .sehne{opacity:1;transform:none;filter:none;animation:none}
}

/* ===== OkTAX nədir: qısa, açıq tərif (hero-dan sonra) ===== */
.nedir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:16px clamp(32px,5vw,96px);align-items:baseline;padding-bottom:clamp(72px,8vw,140px)}
.nedir .lead{max-width:64ch}
@media (max-width:900px){.nedir{grid-template-columns:1fr}}