/* Zihnelo typography + gradient-text layer (2026-10-05). Loaded LAST on every page (after style/pages/chatapp/ds/home.css).
   Fonts (all self-hosted, SIL OFL 1.1, font-display:swap, no third-party font CDN):
   - Inter 4.1 variable (wght 100–900 + opsz 14–32 = automatic "Display" cut on big headings), split into
     core (Latin + Latin-1 + Turkish ı İ ğ Ğ ş Ş + punctuation), ext (other Latin-ext), cyr (Cyrillic) subsets.
   - Noto Sans Arabic variable (Arabic pages / Arabic glyphs only, via unicode-range).
   - Chinese: system CJK fonts (PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC). */
@font-face{font-family:"Zihnelo Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-core-v4.1.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0130-0131,U+011E-011F,U+015E-015F,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0308,U+0327,U+0329,U+2000-206F,U+20AC,U+20BA,U+2122,U+2190-2199,U+21A9,U+2212,U+2215,U+2713,U+2715,U+FEFF,U+FFFD}
@font-face{font-family:"Zihnelo Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-ext-v4.1.woff2) format("woff2");
  unicode-range:U+0100-010F,U+0110-011D,U+0120-012F,U+0132-0151,U+0154-015D,U+0160-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20B9,U+20BB-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Zihnelo Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-cyr-v4.1.woff2) format("woff2");
  unicode-range:U+0400-052F,U+1C80-1C88,U+2116,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Zihnelo Arabic";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/noto-sans-arabic-v2.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------- font stacks (override every older --f / --fd definition) ---------- */
:root,:root:lang(tr),:root:lang(en),:root:lang(ru){
  --f:"Zihnelo Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fd:var(--f);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
  /* type scale (1.25 minor third on mobile → ~1.333 on desktop) */
  --t-xs:.8125rem;--t-sm:.9375rem;--t-base:1.0625rem;--t-lg:1.1875rem;--t-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --t-h3:clamp(1.15rem,1.05rem + .45vw,1.375rem);--t-h2:clamp(1.9rem,1.35rem + 2.4vw,3.4rem);
  --lh-body:1.62;--lh-tight:1.08;--ls-body:-.011em;--ls-h:-.028em;--ls-hero:-.034em;
}
:lang(ar){--f:"Zihnelo Arabic","Zihnelo Sans","Noto Sans Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;--fd:var(--f);--lh-body:1.8;--ls-body:0;--ls-h:0;--ls-hero:0}
:lang(zh-Hans),:lang(zh){--f:"Zihnelo Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;--fd:var(--f);--lh-body:1.8;--ls-body:.01em;--ls-h:.01em;--ls-hero:0}

body :lang(ar),body :lang(zh),body :lang(zh-Hans){font-family:var(--f)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--f)!important;font-size:var(--t-base);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  font-optical-sizing:auto;font-kerning:normal;font-feature-settings:"kern","liga","calt";font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media (max-width:760px){body{font-size:1rem}}
/* every control inherits the site font (browsers default buttons/inputs to system-ui) */
button,input,select,textarea,optgroup,.pill,.btn,summary{font-family:inherit;letter-spacing:inherit}
code,kbd,pre,samp,.ca-v,.mr-s,.code pre{font-family:var(--mono)!important;letter-spacing:0;font-feature-settings:normal}
p,li,dd,blockquote,.lead,figcaption{text-wrap:pretty}

/* ---------- headings: one family (Inter Display via opsz), consistent weights/tracking/leading ---------- */
h1,h2,h3,h4,h5,h6,.hero-h,.sec-h,.sub-h,.quote-h,.fx-n,.vn,.fd-name,.app-h,.empty h2,.sheet-head h2,.brand .word,.brand span{
  font-family:var(--fd)!important;font-optical-sizing:auto;text-wrap:balance;font-synthesis:none}
:root h1,:root .hero-h,:root .quote-h,:root .pg .hero h1,:root .hello h1{font-weight:720;letter-spacing:var(--ls-hero)!important;line-height:1.06}
:root h2,:root .sec-h,:root .sheet-head h2,:root .sub-h{font-weight:680;letter-spacing:var(--ls-h)!important;line-height:1.12}
:root h3,:root .card h3,:root .lc h3,:root .feat h3,:root .phase h3,:root .val h3,:root .tier h4,:root .lcard h2,:root .fd-vt h4{font-weight:620;letter-spacing:-.016em!important;line-height:1.28}
:root h4,:root h5,:root h6{font-weight:620;letter-spacing:-.01em!important;line-height:1.3}
:root .lead{font-size:var(--t-lg);line-height:1.58;font-weight:400;letter-spacing:-.012em}
@media (max-width:760px){:root .lead{font-size:1.0625rem}}
:root .st-text,:root .sstep p.big,:root .sstep p.em{letter-spacing:-.022em!important;line-height:1.22}
:root .fx-n,:root .jr-n,:root .art-donut b,:root .m-cell b,:root .d-num{font-feature-settings:"tnum","kern";letter-spacing:-.03em!important}
:root .giant{letter-spacing:-.045em!important;line-height:.92}
:root .brand .word,:root .brand span,:root .brand{letter-spacing:-.02em!important;font-weight:680}
/* small caps-style labels: wider tracking, Turkish-safe uppercase (html[lang=tr] → i→İ) */
:root .kicker,:root .ph-n{font-weight:640;letter-spacing:.11em!important;font-size:var(--t-xs);line-height:1.4}
:root:lang(ar) .kicker,:root:lang(zh-Hans) .kicker{letter-spacing:.02em!important;font-size:.9rem}
/* buttons + pills + nav: crisp medium weight */
:root .pill,:root .btn,:root button,:root .links a,:root .tab,:root .chip{font-weight:580;letter-spacing:-.006em}
:root .pill{font-size:var(--t-sm)}
/* cards + body copy */
:root .card p,:root .lc p,:root .feat p,:root .phase p,:root .lesson p,:root .tcard p,:root .faq p,:root .faq .a,:root .jr-card p,:root .fd-card p{line-height:1.62;letter-spacing:-.008em}
:root .faq summary{font-weight:600;letter-spacing:-.014em!important}
/* chat */
:root .md,:root .msg,:root .msg-t,:root .bubble{line-height:1.66;letter-spacing:-.006em}
:root .md h3,:root .md h4,:root .md h5{letter-spacing:-.012em!important}
:root .composer textarea,:root #input{font-size:1rem;line-height:1.55}
/* Arabic / Chinese: no negative tracking anywhere, taller leading */
:root:lang(ar) :is(h1,h2,h3,h4,.hero-h,.sec-h,.sub-h,.quote-h,.st-text,.giant,.fx-n,.sheet-head h2,.card h3,.pg .hero h1,.hello h1),
:root:lang(zh-Hans) :is(h1,h2,h3,h4,.hero-h,.sec-h,.sub-h,.quote-h,.st-text,.giant,.fx-n,.sheet-head h2,.card h3,.pg .hero h1,.hello h1){letter-spacing:0!important;line-height:1.32}
:root:lang(ar) body,:root:lang(zh-Hans) body{letter-spacing:var(--ls-body)}
:root:lang(ar) :is(p,li,.lead){line-height:1.85}

/* =====================================================================================
   Gradient text contract (fixes the "pink→teal rectangle behind the headline" bug).
   Rule: a text gradient is ONLY ever painted on an INLINE element together with background-clip:text + transparent colour,
   never on the block heading itself. Blocks get background:none. Split / scramble animations put the gradient on each
   animated word (transformed children are not included in an ancestor's text clip in Chrome/Safari).
   ===================================================================================== */
:root .hero-h,:root .quote-h,:root .pg .hero h1,:root .hello h1,:root main h1,:root .sec-h.shine,:root .sstep p.em,:root .ai .sec-h{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#fff;-webkit-text-fill-color:currentColor}
.gt,:root .quote-h .w.on:nth-last-child(-n+2),:root .fd-name,:root .fp-id b,:root .grad-t,:root .fx-n,:root .jr-n,:root .giant,:root .kicker,:root .mq-track li:nth-child(3n+1),:root .st-text .w.hl{
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-block:.06em .14em;margin-block:-.06em -.14em}
.gt{display:inline;background-image:var(--gt-img,var(--grad));background-repeat:no-repeat;background-size:100% 100%}
/* gradient flavours */
.gt-hero{--gt-img:linear-gradient(100deg,#fff 0%,#fff 36%,#aeffec 47%,#ffbcde 56%,#ff9a62 63%,#fff 75%,#fff 100%);background-size:260% 100%!important;background-position:100% 0;animation:gt-shine 9s ease-in-out 1.6s infinite}
@keyframes gt-shine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.gt-soft{--gt-img:linear-gradient(180deg,#fff 30%,#ffc6e2 100%)}
.gt-flow{--gt-img:var(--grad-flow,var(--grad));background-size:300% 100%!important;animation:gt-flow 14s linear infinite}
@keyframes gt-flow{to{background-position:300% 0}}
:root .shine.gt{--gt-img:linear-gradient(100deg,#fff 0%,#fff 30%,#9fffe9 42%,#ffa9d4 50%,#ff8052 58%,#fff 70%,#fff 100%);background-size:250% 100%!important}
/* quote: dim words light up, the last two words ("bir ağ.") become the gradient */
:root .quote-h .w{display:inline;background:none}
:root .quote-h .w.on:nth-last-child(-n+2){background-image:var(--grad-flow,var(--grad))!important;background-size:300% 100%!important;text-shadow:none!important;animation:gt-flow 14s linear infinite;filter:none!important}
/* split headings (.ds-w > .ds-wi words): gradient on each animated word, the wrapper .gt paints nothing */
.gt.gt-s{background:none!important}
:root .gt .ds-wi,:root .pg .hero h1 .gt .ds-wi{background:var(--gt-img,var(--grad))!important;background-size:100% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent;-webkit-text-fill-color:transparent;
  padding-block:.04em .16em;margin-block:-.04em -.16em}
.gt.gt-hero .ds-wi,.gt.gt-flow .ds-wi{background-size:100% 100%!important;animation:none}
:root .ds-w{padding-bottom:.18em;margin-bottom:-.18em;overflow-clip-margin:.24em}
/* scramble/decode: solid colour while letters are random glyphs, gradient again once the real text is restored */
:root .kicker{background-image:linear-gradient(90deg,#9fffe9,#ffb9dc 60%,#ff8052)!important;width:fit-content;max-width:100%}
:root .kicker.scr-el:not(.scr-done){background:none!important;color:#ffc2e0!important;-webkit-text-fill-color:#ffc2e0}
:root .sc.u::after{-webkit-text-fill-color:#8fffe5;color:#8fffe5}
/* inline-block number/word gradients keep a tight box so the gradient never shows as a rectangle */
:root .fx-n,:root .jr-n,:root .giant,:root .fd-name,:root .fp-id b{width:fit-content;max-width:100%}
:root .fx-n:not(.grad-t){background-image:linear-gradient(180deg,#fff 20%,#ffa1d0)!important}
:root .fx-wide .fx-n{background-image:var(--grad-flow,var(--grad))!important}
:root .fx-wide{text-align:start}
:root .giant{margin-inline:auto}
/* no background-clip:text support → solid colours, never a filled box */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gt,.gt .ds-wi,:root .quote-h .w.on:nth-last-child(-n+2),:root .fd-name,:root .fp-id b,:root .grad-t,:root .fx-n,:root .jr-n,:root .giant,:root .kicker,:root .mq-track li:nth-child(3n+1),:root .st-text .w.hl{
    background:none!important;color:#ff8fc6!important;-webkit-text-fill-color:currentColor!important}
  .gt-hero,.gt-soft,.gt-hero .ds-wi,.gt-soft .ds-wi{color:#fff!important}
}
/* forced colours (Windows high contrast): plain system text */
@media (forced-colors:active){.gt,.gt *,:root .kicker,:root .fx-n,:root .fd-name{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}
html.mo-off .gt-hero,html.mo-off .gt-flow,html.mo-off .quote-h .w.on{animation:none!important}
html.mo-calm .gt-flow,html.mo-calm .quote-h .w.on{animation-duration:40s!important}
/* story step 3: gradient only while the step is active */
:root .sstep p.em .gt{background:none!important;color:inherit;-webkit-text-fill-color:currentColor}
:root .sstep.on p.em .gt{background-image:var(--grad-flow,var(--grad))!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent;-webkit-text-fill-color:transparent;animation:gt-flow 14s linear infinite}