/* ===== Zihnelo AI design system v5 (2026-10) — shared by every page =====
   Loaded AFTER each page's own stylesheet (style.css / pages.css / chatapp.css). Adds: deep-space palette, animated aurora +
   grid + film grain backdrop, cursor spotlight + ring, scroll progress bar, glass cards with gradient borders, split-text
   heading reveals, upgraded buttons, cross-page view transitions. Everything respects prefers-reduced-motion. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  --bg:#07040a;--ink:#07040a;--glass:rgba(22,15,29,.55);--glass2:rgba(29,21,39,.72);
  --violet:#ff7bbd;--cyan:#2effce;--magenta:#ff8052;--lime:#b6ff6b;
  --grad:linear-gradient(95deg,#2effce 0%,#ff7bbd 48%,#ff8052 100%);
  --btn:linear-gradient(100deg,#ff4ba5 0%,#f46937 55%,#ff7c4d 100%);
  --edge:conic-gradient(from var(--ang),rgba(46,255,206,.55),rgba(255,123,189,.12) 25%,rgba(255,128,82,.55) 50%,rgba(255,123,189,.12) 75%,rgba(46,255,206,.55));
  --edge-soft:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 40%,rgba(255,123,189,.18));
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html{background:var(--ink)}
body{background:transparent!important}
/* ---------- backdrop: aurora + perspective grid (fixed, behind everything) ---------- */
body::before{content:"";position:fixed;inset:-25vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 22% 18%,rgba(255,75,165,.28),transparent 70%),
    radial-gradient(34vmax 28vmax at 82% 12%,rgba(46,255,206,.16),transparent 70%),
    radial-gradient(40vmax 30vmax at 70% 78%,rgba(255,128,82,.18),transparent 70%),
    radial-gradient(30vmax 26vmax at 18% 82%,rgba(46,255,206,.10),transparent 70%);
  animation:ds-aurora 34s ease-in-out infinite alternate;will-change:transform}
@keyframes ds-aurora{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(3vmax,-2vmax,0) rotate(8deg) scale(1.06)}100%{transform:translate3d(-3vmax,2vmax,0) rotate(-6deg) scale(1.02)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,150,203,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,150,203,.045) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask:radial-gradient(80% 60% at 50% 0%,#000 10%,transparent 70%);mask:radial-gradient(80% 60% at 50% 0%,#000 10%,transparent 70%)}
.ds-grain{position:fixed;inset:-50%;z-index:9990;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ds-grain 1.2s steps(6) infinite}
@keyframes ds-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* ---------- scroll progress + cursor ---------- */
.ds-prog{position:fixed;top:0;inset-inline:0;height:2px;z-index:9995;pointer-events:none;background:var(--grad);transform:scaleX(var(--sp,0));transform-origin:0 50%;box-shadow:0 0 12px rgba(255,123,189,.8)}
[dir=rtl] .ds-prog{transform-origin:100% 50%}
.ds-glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,123,189,.13),rgba(46,255,206,.05) 45%,transparent 72%);opacity:0;transition:opacity .6s;will-change:transform}
.ds-ring{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;z-index:9996;pointer-events:none;border-radius:50%;
  border:1.5px solid rgba(255,195,225,.55);opacity:0;transition:opacity .3s,width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .35s,border-color .35s;will-change:transform}
.ds-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;z-index:9997;pointer-events:none;border-radius:50%;background:#fff;opacity:0;transition:opacity .3s;will-change:transform}
.ds-cursor .ds-glow,.ds-cursor .ds-ring,.ds-cursor .ds-dot{opacity:1}
.ds-ring.hov{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,123,189,.12);border-color:rgba(46,255,206,.7)}
.ds-ring.down{width:26px;height:26px;margin:-13px 0 0 -13px}
/* ---------- glass cards with gradient borders (padding-box/border-box trick, no pseudo elements needed) ---------- */
.ds-glass,.pg .lcard,.pg .lesson,.pg .sign,.pg .official,.pg .ck-wrap,.pg .term,.pg .upd,.pg .news-item a{
  background:linear-gradient(165deg,rgba(31,23,41,.78),rgba(14,10,18,.72)) padding-box,var(--edge-soft) border-box!important;
  border:1px solid transparent!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.ds-glass:hover,.pg .lcard:hover,.pg .lesson:hover,.pg .sign:hover,.pg .term:hover,.pg .upd:hover,.pg .news-item a:hover{
  background:linear-gradient(165deg,rgba(36,25,49,.85),rgba(17,12,22,.8)) padding-box,var(--edge) border-box!important;animation:ds-spin 4s linear infinite}
@keyframes ds-spin{to{--ang:360deg}}
.ds-tilt{transform-style:preserve-3d;will-change:transform}
.ds-spot{position:relative;isolation:isolate}
.ds-spot>.ds-sl{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,123,189,.2),rgba(46,255,206,.06) 40%,transparent 62%)}
.ds-spot:hover>.ds-sl{opacity:1}
/* ---------- buttons ---------- */
.pill-grad{background:var(--btn)!important;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 14px 44px -12px rgba(244,105,55,.85),0 0 30px -6px rgba(46,255,206,.35)!important;transition:transform .45s var(--ease-out),box-shadow .45s,filter .3s!important}
.pill-grad:not(.disabled):hover{box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 18px 54px -10px rgba(244,105,55,1),0 0 44px -4px rgba(46,255,206,.55)!important;filter:saturate(1.15)}
.pill-line:not(.disabled){background:rgba(255,255,255,.035) padding-box,var(--edge-soft) border-box;border:1px solid transparent!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pill-line:not(.disabled):hover{background:rgba(255,123,189,.1) padding-box,var(--edge) border-box;animation:ds-spin 3s linear infinite}
/* ---------- split-text heading reveal ---------- */
.ds-w{display:inline-block;overflow:clip;overflow-clip-margin:.18em;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.ds-wi{display:inline-block;transform:translate3d(0,108%,0) rotate(4deg);transform-origin:0 100%;opacity:0;filter:blur(6px);
  transition:transform 1.1s var(--ease-out),opacity .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:calc(var(--i,0) * 45ms)}
.split-in .ds-wi{transform:none;opacity:1;filter:none}
[dir=rtl] .ds-wi{transform-origin:100% 100%}
/* gradient kicker with animated line */
.kicker{background:linear-gradient(90deg,#9fffe9,#ffb9dc 60%,#ff8052);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* headings: subtle depth */
h1,.sec-h{text-shadow:none}
/* ---------- cross-page transitions (View Transitions API, same-origin, no JS) ---------- */
@view-transition{navigation:auto}
/* v6: the old page sinks back + blurs, the new page wipes up from the bottom like a curtain */
::view-transition-group(root){animation-duration:.75s}
::view-transition-old(root){animation:ds-vt-out .55s cubic-bezier(.7,0,.84,0) both}
::view-transition-new(root){animation:ds-vt-in .75s cubic-bezier(.16,1,.3,1) both}
@keyframes ds-vt-out{to{opacity:.0;transform:scale(.93) translateY(-3%);filter:blur(10px) brightness(.6)}}
@keyframes ds-vt-in{from{clip-path:inset(100% 0 0 0 round 48px 48px 0 0);transform:translateY(10%)}to{clip-path:inset(0 0 0 0 round 0)}}
/* ---------- selection / scrollbar ---------- */
::selection{background:rgba(255,123,189,.45);color:#fff}
html{scrollbar-color:rgba(255,123,189,.45) transparent}
/* ---------- content pages (pages.css) refresh ---------- */
.pg .top{background:rgba(10,6,14,.55)!important;border-bottom-color:rgba(255,255,255,.06)!important}
.pg .hero h1{font-size:clamp(2.6rem,6.4vw,5.2rem)!important;letter-spacing:-.045em;background:linear-gradient(180deg,#fff 35%,#ffb6db);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
:lang(ar) .pg .hero h1,:lang(zh-Hans) .pg .hero h1{letter-spacing:0}
.pg .hero h1 .ds-wi{background:inherit;-webkit-background-clip:text;background-clip:text}
.pg .hero .lead{font-size:clamp(1.1rem,1.6vw,1.35rem)}
.js-rv .rv:not(.in){opacity:0;transform:translate3d(0,40px,0) scale(.985)!important;filter:blur(4px)}
.pg .rv{transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out)!important}
.pg .tab[aria-selected=true],.pg .chip[aria-pressed=true]{background:var(--btn);border-color:transparent;color:#fff}
/* ---------- reduced motion: static, calm ---------- */
  html.mo-off body::before,html.mo-off .ds-grain{animation:none!important}
  html.mo-off .ds-glow,html.mo-off .ds-ring,html.mo-off .ds-dot{display:none!important}
  html.mo-off .ds-wi{transform:none!important;opacity:1!important;filter:none!important}
  html.mo-off::view-transition-old(root),html.mo-off::view-transition-new(root){animation:none!important}
@media (pointer:coarse){.ds-glow,.ds-ring,.ds-dot{display:none}}
@media (max-width:760px){body::before{animation-duration:50s}.ds-grain{display:none}}
@media print{body::before,body::after,.ds-grain,.ds-prog,.ds-glow,.ds-ring,.ds-dot{display:none!important}}
@media (max-width:760px){.ds-glass,.pg .lcard,.pg .lesson,.pg .sign,.pg .official,.pg .ck-wrap,.pg .term,.pg .upd,.pg .news-item a,.pill-line:not(.disabled){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ===== v6 additions ===== */
/* letter scramble / decode: the real letter keeps its box (no layout shift); a random glyph is drawn over it until it resolves */
.scw{white-space:nowrap}
.sc{position:relative}
.sc.u{visibility:hidden}
.sc.u::after{content:attr(data-g);visibility:visible;position:absolute;inset-inline-start:0;top:0;color:#8fffe5;text-shadow:0 0 12px rgba(46,255,206,.7);-webkit-text-fill-color:#8fffe5}
.scr-el:not(.scr-go) .sc.u::after{content:""}
/* page-transition curtain (browsers without cross-document View Transitions) */
.ds-curtain{position:fixed;inset:0;z-index:10001;pointer-events:none;background:radial-gradient(60% 50% at 50% 100%,rgba(255,123,189,.35),transparent 70%),#07040a;
  clip-path:inset(100% 0 0 0);transition:clip-path .42s cubic-bezier(.7,0,.3,1)}
.ds-curtain.on{clip-path:inset(0 0 0 0)}
.ds-curtain i{position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);box-shadow:0 0 24px 4px rgba(255,123,189,.8)}
/* shader-noise nebula canvas (desktop homepage; created by assets/nebula.js) */
.ds-nebula{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 2.4s ease;mix-blend-mode:screen}
.ds-nebula.on{opacity:.9}html.mo-off .sc.u{visibility:visible}html.mo-off .sc.u::after{content:none}html.mo-off .ds-curtain,html.mo-off .ds-nebula{display:none}

/* ===== animfix (2026-10): motion modes set by assets/motion.js on <html>: mo-full / mo-calm (OS "reduce motion") / mo-off (footer toggle) ===== */
/* calm = gentle only: fades, glows, colour shifts stay; large / fast / spatial movement goes */
html.mo-calm{scroll-behavior:auto}
html.mo-calm .ds-wi{transform:none!important;filter:none!important;transition:opacity 1.2s ease!important;transition-delay:calc(var(--i,0) * 40ms)!important}
html.mo-calm.js-rv .rv:not(.in){transform:none!important;filter:none!important}
html.mo-calm .ds-grain,html.mo-calm .ds-curtain{display:none}
html.mo-calm body::before{animation-duration:90s}
html.mo-calm::view-transition-old(root),html.mo-calm::view-transition-new(root){animation:none!important}
html.mo-calm .ds-tilt{transform:none!important}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
/* safety net (motion.js adds .mo-safe when a page script failed): nothing may stay invisible */
html.mo-safe .rv,html.mo-safe .ds-wi,html.mo-safe main>.sec>.wrap{opacity:1!important;transform:none!important;filter:none!important}
html.mo-safe .sc.u{visibility:visible}html.mo-safe .sc.u::after{content:none}
/* no-JS / motion.js missing: still honour the OS setting */
@media (prefers-reduced-motion:reduce){html:not(.mo-full):not(.mo-calm):not(.mo-off) *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* footer toggle "Animasyonlar: Açık / Kapalı" */
.mo-tg-wrap{margin:14px 0 0}
.mo-tg{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px 8px 10px;border-radius:999px;cursor:pointer;font:inherit;font-size:.86rem;color:#ffe4f2;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,195,225,.28);transition:background .3s,border-color .3s}
.mo-tg:hover{background:rgba(255,123,189,.14);border-color:rgba(255,195,225,.55)}
.mo-tg:focus-visible{outline:2px solid #8fffe5;outline-offset:3px}
.mo-sw{position:relative;flex:none;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.16);transition:background .3s}
.mo-sw:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .3s}
.mo-tg[aria-pressed=true] .mo-sw{background:linear-gradient(100deg,#ff4ba5,#ff7c4d)}
.mo-tg[aria-pressed=true] .mo-sw:after{transform:translateX(14px)}
[dir=rtl] .mo-tg[aria-pressed=true] .mo-sw:after{transform:translateX(-14px)}

/* ===== Zihnelo identity (2026-10-04) — palette, display font, vivid gradients, micro-interactions =====
   Palette: mint #22f2c4 · hot pink #ff4fa3 · coral #ff8a4c on deep plum-ink #07050d.
   Buttons use the bright gradient with DARK ink text (contrast ≥ 7:1 on every stop). Fonts: see assets/type.css (Inter + Noto Sans Arabic, self-hosted, OFL 1.1). */
:root{
  --z-mint:#22f2c4;--z-pink:#ff4fa3;--z-coral:#ff8a4c;--z-ink:#0b0712;
  --bg:#07050d;--ink:#07050d;
  --cyan:#22f2c4;--violet:#ff4fa3;--magenta:#ff8a4c;
  --grad:linear-gradient(100deg,#22f2c4 0%,#ff4fa3 52%,#ff8a4c 100%);
  --grad-flow:linear-gradient(100deg,#22f2c4 0%,#ff4fa3 25%,#ff8a4c 50%,#ff4fa3 75%,#22f2c4 100%);
  --btn:linear-gradient(100deg,#22f2c4 0%,#7ff0d6 18%,#ff7cbc 58%,#ff9a5c 100%);
  --btn-ink:#0b0712;
  --fd:var(--f);
}
:lang(ru),:lang(ar),:lang(zh-Hans){--fd:var(--f)}
::selection{background:rgba(255,79,163,.42);color:#fff}
:focus-visible{outline:2px solid var(--z-mint);outline-offset:3px}
/* display font on headings + wordmark */
.hero-h,.sec-h,.sub-h,.quote-h,.fx-n,.vn,.fd-name,.brand .word,.brand span,main h1,.pg h1,.fp h1,.app-h,.empty h2{font-family:var(--fd)}
.brand .word,.brand span{font-weight:650;letter-spacing:-.03em}
/* bright gradient buttons get dark ink text */
.pill-grad,.pill-grad *,.pg .tab[aria-selected=true],.pg .chip[aria-pressed=true],.msg.user,.ad-m.me,.eyebrow .new,.ios-steps li:before,
.send,.load-btn,.bn,.card:hover .plus,.chat-send{color:var(--btn-ink)!important}
.send svg,.chat-send svg,.card:hover .plus svg,.pill-grad svg{stroke:currentColor}
.pill-grad{background-size:180% 100%!important;background-position:0 0!important;transition:background-position .7s var(--ease-out,ease),transform .45s var(--ease-out,ease),box-shadow .45s!important}
.pill-grad:hover{background-position:100% 0!important}
.ck input:checked+.box::after{border-color:var(--btn-ink)!important}
/* hero headline: white → mint → pink → coral, flowing */
.hero-h{background:linear-gradient(100deg,#fff 0%,#fff 34%,#9dffe6 44%,#ff9cce 54%,#ffb48a 62%,#fff 74%,#fff 100%)!important;background-size:260% 100%!important;-webkit-background-clip:text!important;background-clip:text!important}
/* flowing gradient text (headings that already use --grad) */
.grad-t,.quote-h,.fd-name,.fx-wide .fx-n,.mq-track li:nth-child(3n+1){background-image:var(--grad-flow)!important;background-size:300% 100%!important;animation:zh-flow 14s linear infinite}
@keyframes zh-flow{to{background-position:300% 0}}
/* vivid hero glow that breathes (opacity/transform only) */
.hero-pin::before{content:"";position:absolute;inset:-10% -10% auto auto;width:70vmax;height:70vmax;pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,79,163,.20),rgba(255,138,76,.08) 45%,transparent 70%);transform:translate3d(18%,-22%,0);animation:zh-breathe 12s ease-in-out infinite}
.hero-pin::after{content:"";position:absolute;inset:auto auto -20% -15%;width:60vmax;height:60vmax;pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(34,242,196,.16),transparent 70%);animation:zh-breathe 15s ease-in-out -5s infinite reverse}
@keyframes zh-breathe{0%,100%{opacity:.75;transform:translate3d(18%,-22%,0) scale(1)}50%{opacity:1;transform:translate3d(12%,-16%,0) scale(1.08)}}
/* cards: gradient hairline on hover */
.card,.bento>*,.fd-card,.lesson,.tcard{transition:box-shadow .5s var(--ease-out,ease),transform .5s var(--ease-out,ease)}
.card:hover,.bento>*:hover{box-shadow:0 0 0 1px rgba(255,79,163,.28),0 24px 60px -28px rgba(255,79,163,.45),0 0 40px -18px rgba(34,242,196,.35)}
/* calm / off modes */
html.mo-calm .grad-t,html.mo-calm .quote-h,html.mo-calm .fd-name,html.mo-calm .fx-wide .fx-n,html.mo-calm .mq-track li:nth-child(3n+1){animation-duration:40s}
html.mo-calm .hero-pin::before,html.mo-calm .hero-pin::after{animation-duration:30s}
html.mo-off .grad-t,html.mo-off .quote-h,html.mo-off .fd-name,html.mo-off .fx-wide .fx-n,html.mo-off .mq-track li:nth-child(3n+1),
html.mo-off .hero-pin::before,html.mo-off .hero-pin::after{animation:none!important}
html.mo-off .pill-grad{transition:none!important}