/* Home: hero + router, marquee, directory + Yakında, story teaser, facts, about. Loops carry .amb; home.js adds .is-off. */

/* x-clip: the slot animation can cross the edge for a frame; mobile would then widen the viewport */
.hero {
  container-type: inline-size; overflow-x: clip;
  --kfs: calc(100cqi / 4.93);          /* line 1 fills the grid */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto;
  column-gap: var(--cg); padding: 0 var(--g); position: relative;
}
/* the lockup stays LTR on ar; copy blocks restore RTL */
[dir="rtl"] .hero { direction: ltr; }
[dir="rtl"] .hero__copy, [dir="rtl"] .hero__foot, [dir="rtl"] .vl-wrap { direction: rtl; }

.kin {
  grid-column: 1 / -1; font-family: var(--f-wide); font-size: var(--kfs);
  font-weight: 850; font-stretch: 125%; letter-spacing: -.04em; line-height: .86;
  white-space: nowrap; user-select: none; margin: 0;
}
.kin--1 { grid-row: 1; margin-top: .1em; margin-inline-start: -.045em; position: relative; z-index: 2; }
.kin__word { display: inline-block; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.kin__word .kl { display: inline-block; transform-origin: 50% var(--by, 84%); will-change: transform; }
.kin__probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.motion .kin__word { cursor: pointer; }
.kin--2 { grid-row: 2; grid-column: 6 / -1; justify-self: end; align-self: start; text-align: right; margin-inline-end: .02em; margin-top: .17em; }
.kin__ext { display: inline-flex; align-items: baseline; transform-origin: 0 80%; }   /* squash anchor = the "." (hero is LTR on ar too) */
.kin__ext, .kin__cur, .kin__reel > span { color: var(--c-d); }
.kin__dot { display: inline-block; transition: color 0s linear .34s; }
/* slot: home.js animates its width (WAAPI, so no CSS transition). The .15em clip band fits p/j/g descenders without
   painting over the value line; padding and negative margin cancel, so the layout box is unchanged. */
.kin__slot {
  position: relative; display: inline-grid; overflow: hidden; vertical-align: bottom;
  padding: .04em .1em .15em .06em; margin: -.04em -.1em -.15em -.06em;
  text-align: left;
}
.kin__cur { grid-area: 1 / 1; display: inline-block; white-space: nowrap; }
.kin__cur .kc { display: inline-block; }
.kin__cur.is-measure { position: absolute; visibility: hidden; }
.kin__cur.is-hid { visibility: hidden; }
.kin__reel { position: absolute; left: .06em; top: .04em; display: flex; flex-direction: column; will-change: transform; }
.kin__reel > span { display: block; height: var(--lh); padding-bottom: .3em; box-sizing: content-box; line-height: .86; white-space: nowrap; }

/* the particle word (hero-px.js): a canvas inside .kin--1 draws "Dönüştür" as squares and morphs it into file glyphs;
   the DOM word keeps the layout (and is the fallback), hidden only once the canvas is live (.hero.is-px) */
.kin__px { position: absolute; z-index: 1; pointer-events: none; }
.hero.is-px .kin__word { visibility: hidden; }
.motion .hero.is-px .kin--1 { cursor: pointer; touch-action: pan-y; }
.kin__cursor {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 6px 8px 5px; border-radius: var(--r-1);
  opacity: 0; transform: scale(.6); transition: opacity .25s var(--e-out);
}
.kin__cursor.is-on { opacity: 1; }
.kin__cursor.is-hit { background: var(--signal-strong); color: #fff; }
.kin__cursor.is-hit[data-fam] { background: var(--c); color: var(--on); }   /* "→ .docx" in the target family colour */

/* "vaybe" egg */
.is-vaybe .kl { transition: color .3s var(--e-out); }
.is-vaybe .kl:nth-child(5n+1) { color: var(--pdf); }
.is-vaybe .kl:nth-child(5n+2) { color: var(--doc); }
.is-vaybe .kl:nth-child(5n+3) { color: var(--img-d); }
.is-vaybe .kl:nth-child(5n+4) { color: var(--aud); }
.is-vaybe .kl:nth-child(5n+5) { color: var(--vid); }

/* value line */
.vl-wrap { grid-row: 3; grid-column: 6 / -1; justify-self: end; margin-top: calc(var(--kfs) * .13); position: relative; z-index: 1; }
.vl { display: flex; align-items: center; gap: 16px; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.2; font-weight: 620; letter-spacing: -.012em; white-space: nowrap; }
.vl__track { display: inline-flex; align-items: center; gap: 3px; }
.vl__track i { width: 6px; height: 6px; background: var(--c); box-shadow: inset 0 0 0 1px var(--key, transparent); opacity: .45; transition: width .6s var(--e-snap), opacity .4s; }
.vl__track i.is-on { width: 22px; opacity: 1; }
.vl__txt { display: inline-block; }
.vl__tag {
  display: inline-block; min-width: 3.3em; text-align: center; vertical-align: .08em; margin-inline: .12em;
  font: 600 .72em/1 var(--f-mono); letter-spacing: .05em; padding: .42em .52em .38em;
  background: var(--c); color: var(--on); border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--key, transparent);
}
.vl__tag:first-child { margin-inline-start: 0; }
.vl__tag--p { margin-inline-end: 0; }
[dir="rtl"] .vl__tag--p { margin-inline-end: -.1em; }   /* Noto "،" side bearing */
.vl__note { color: var(--ink-2); font-weight: 520; margin-inline-start: .34em; }
.vl__note:empty { display: none; }
.vl.is-plain .vl__tag, .vl.is-plain .vl__w { display: none; }
.vl.is-plain .vl__note { margin: 0; }
html[lang="ja"] .vl, html[lang="ar"] .vl { letter-spacing: 0; }
/* html.intro: boot.js, removed by home.js. The whole word hides: its .kl spans only exist once home.js has run */
.intro .kin__word, .intro .kin__ext, .intro .vl { opacity: 0; }

.hero__copy { grid-column: 1 / 6; grid-row: 2 / 4; align-self: start; padding-top: clamp(20px, 3.4cqi, 52px); position: relative; z-index: 1; }
.hero__h1 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.04; font-weight: 660; font-stretch: 108%; letter-spacing: -.03em; max-width: 16ch; text-wrap: balance; }
html[lang="ja"] .hero__h1, html[lang="ar"] .hero__h1 { letter-spacing: 0; line-height: 1.3; max-width: 20ch; }
.hero__lead { margin-top: 14px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.hero__all { margin-top: 18px; font-size: 15px; }

.dropper {
  position: relative; margin-top: 22px; max-width: 580px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center;
  padding-block: 14px; padding-inline: 14px 18px; border: 1px solid var(--ink); border-radius: var(--r-1);
  transition: background-color .5s var(--e-out);
}
.dropper__cm { position: absolute; width: 12px; height: 12px; border: 0 solid var(--signal); transition: transform .5s var(--e-out); pointer-events: none; }
.dropper__cm--a { inset-inline-start: -6px; top: -6px; border-inline-start-width: 2px; border-top-width: 2px; }
.dropper__cm--b { inset-inline-end: -6px; bottom: -6px; border-inline-end-width: 2px; border-bottom-width: 2px; }
.dropper:hover .dropper__cm--a, .dropper.is-over .dropper__cm--a { transform: translate(-4px, -4px); }
.dropper:hover .dropper__cm--b, .dropper.is-over .dropper__cm--b { transform: translate(4px, 4px); }
[dir="rtl"] .dropper:hover .dropper__cm--a, [dir="rtl"] .dropper.is-over .dropper__cm--a { transform: translate(4px, -4px); }
[dir="rtl"] .dropper:hover .dropper__cm--b, [dir="rtl"] .dropper.is-over .dropper__cm--b { transform: translate(-4px, 4px); }
.dropper.is-over { background: var(--paper-2); }
.dropper__pick { grid-row: 1 / 3; min-height: 56px; padding: 0 22px; font-size: 16px; }
.dropper__pick .ico { transition: transform .6s var(--e-out); }
.dropper__pick:hover .ico { transform: rotate(90deg); }
.dropper__t { font-size: 16px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.dropper__note { font-size: 13px; line-height: 1.35; color: var(--ink-2); display: flex; flex-wrap: wrap; overflow: hidden; }
/* each unit carries its "·" in a pulled-back 1.2em: at a line start it falls outside the clip, never orphaned */
.dropper__note span { margin-inline-start: -1.2em; padding-inline: 1.2em; text-indent: -1.2em; }   /* a unit that wraps continues inside the clip */
.dropper__note span:last-child { padding-inline-end: 0; }
.dropper__note span::before { content: '·'; display: inline-block; width: 1.2em; text-align: center; text-indent: 0; }
html[lang="ja"] .dropper__note span::before { content: '・'; }

.dropper__res { position: relative; margin-top: 10px; max-width: 580px; background: var(--ink); color: var(--paper); padding: 18px 20px 20px; border-radius: var(--r-1); }
.dropper__file { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--f-mono); color: var(--on-ink-2); letter-spacing: .02em; }
.dropper__file i { width: 8px; height: 8px; background: var(--c); }
.dropper__q { font-size: 22px; line-height: 1.15; font-weight: 680; font-stretch: 110%; letter-spacing: -.02em; margin-block: 8px 14px; margin-inline-end: 44px; }
.dropper__q b { color: var(--c-lt); font-weight: inherit; }
.dropper__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dropper__opts a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 560;
  color: var(--paper); border: 1px solid var(--rule-inv); border-radius: var(--r-1); text-decoration: none; transition: background .3s, color .3s;
}
.dropper__opts a.is-main { background: var(--signal-strong); border-color: var(--signal-strong); color: #fff; }
.dropper__opts a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dropper__opts a:focus-visible { outline: 2px solid var(--signal-lt); outline-offset: 2px; }
.dropper__opts .ico { width: 14px; height: 14px; }
.dropper__x { position: absolute; inset-inline-end: 6px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--paper); }
.dropper__x .ico { width: 16px; height: 16px; }
.dropper__warn { color: var(--signal-lt); margin-top: 12px; font-size: 14px; }
.dropper__soon, .dropper__carry { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--on-ink-2); }

.hero__foot {
  grid-column: 1 / -1; grid-row: 4; align-self: end;
  display: flex; justify-content: space-between; align-items: center; gap: 8px 24px;
  margin-top: 26px; padding: 12px 0 10px; border-top: 1px solid var(--rule);
}
.trust { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: var(--t-meta); color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: 9px; }
.trust li::before { content: ""; width: 6px; height: 6px; background: var(--ink); flex: none; }
.trust li:first-child::before { background: var(--ok); }
.hero__foot .motion-btn { font-size: var(--t-meta); flex: none; }

.dropveil {
  position: fixed; inset: 0; z-index: 80; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; text-align: center;
  clip-path: inset(50% 0 50% 0); visibility: hidden; transition: clip-path .6s var(--e-out), visibility 0s .6s;
}
.dropveil.is-on { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--e-out), visibility 0s; }
.dropveil__big { font-family: var(--f-wide); font-size: clamp(96px, 22vw, 360px); font-weight: 850; font-stretch: 125%; letter-spacing: -.05em; line-height: .8; }
.dropveil__big span { color: var(--signal); }
html:not([lang="tr"]) .dropveil__big { font-size: clamp(64px, 13vw, 240px); letter-spacing: -.03em; }
.dropveil__t { color: var(--on-ink-2); margin-top: 28px; font-size: 16px; padding-inline: var(--g); }
.dropveil::before { content: ""; position: absolute; inset: 24px; border: 1px solid var(--rule-inv); }
/* the particle word on screen: it becomes the dragged file itself, so the veil steps back to a frame + a small tag */
.dropveil.is-px { background: transparent; color: var(--ink); align-items: end; padding-bottom: 6vh; }
.dropveil.is-px::before { inset: 12px; border: 2px dashed var(--ink); }
.dropveil.is-px .dropveil__in { background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 14px 26px 16px; }
.dropveil.is-px .dropveil__big { font-size: clamp(36px, 5vw, 72px); line-height: .9; }
.dropveil.is-px .dropveil__t { color: var(--ink-2); margin-top: 6px; font-size: 14px; padding: 0; }

/* marquee: two identical sets → -50% */
.marq { position: relative; overflow: hidden; border-block: 1px solid var(--ink); padding: 14px 0 12px; background: var(--paper); direction: ltr; }
.marq__track { display: flex; width: max-content; animation: marq 64s linear infinite; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }
[dir="rtl"] .marq__track { animation-direction: reverse; }
.marq.is-off .marq__track, .tier-low .marq__track { animation-play-state: paused; }
.is-still .marq__track, .is-reduced .marq__track { animation: none; }
.marq__set { display: flex; align-items: center; flex: none; }
.mq {
  display: inline-flex; align-items: baseline; gap: .28em; padding: 0 .5em;
  font-size: clamp(30px, 3.4vw, 52px); line-height: 1; font-weight: 780; font-stretch: 118%; letter-spacing: -.035em; white-space: nowrap;
}
.mq b { font-weight: inherit; }
.mq b[data-fam] { color: var(--c-ink); }
.mq b[data-fam="pdf"] { color: var(--signal); }
.mq i { font-style: normal; font-weight: 400; font-stretch: 100%; color: var(--ink-3); transform: translateY(-.04em); }
.mq--soon b { color: transparent !important; -webkit-text-stroke: 1.2px var(--ink); }
.mq--soon b[data-fam] { -webkit-text-stroke-color: var(--c-ink); }
.mq sup { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); align-self: flex-start; margin-inline-start: .2em; transform: translateY(.2em); }
.mq__sep { width: clamp(15px, 1.7vw, 26px); height: clamp(15px, 1.7vw, 26px); flex: none; margin: 0 .3em; }

/* directory */
.dir { padding: var(--s-10) 0 var(--s-9); }
.sec-title__n { unicode-bidi: isolate; font-size: 13px; letter-spacing: .02em; color: var(--ink-3); vertical-align: super; margin-inline-start: .5em; font-stretch: 100%; }
.dir .sec-head { margin-bottom: var(--s-7); }
.dir__grp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
.dir__grp + .dir__grp { margin-top: var(--s-6); }
.dir__lab { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--hh) + 24px); padding-top: 14px; }
.dir__h { font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.dir__c { margin-top: 4px; font-size: var(--t-meta); color: var(--ink-3); }
.dir__art { display: flex; align-items: flex-end; gap: 4px; margin-top: 14px; }
.dir__to { font-style: normal; color: var(--ink-3); font-size: 15px; line-height: 1; margin-inline: 4px; }
.dir__grp > .rows, .dir__grp > .soon-box { grid-column: 4 / 13; }
.row__fx { font-size: clamp(17px, 1.5vw, 22px); }
@media (hover: hover) {
  .dir .row__a:hover .fx > b, .dir .row__a:focus-visible .fx > b { color: var(--c-lt); }
  .dir .row__a:hover .fx__to, .dir .row__a:focus-visible .fx__to { color: var(--paper); }
}
/* the ink wipe carries both family colours at its ends: read from the row's own formula chips (first b = from, last b =
   to), so the markup needs no data-fi / data-fo copies (home HTML budget). No :has() → plain ink wipe (var fallbacks). */
.row:has(.row__fx > b:first-child[data-fam="pdf"]) { --fi: var(--pdf); } .row:has(.row__fx > b:first-child[data-fam="doc"]) { --fi: var(--doc); }
.row:has(.row__fx > b:first-child[data-fam="img"]) { --fi: var(--img); } .row:has(.row__fx > b:first-child[data-fam="cad"]) { --fi: var(--cad); }
.row:has(.row__fx > b:last-child[data-fam="pdf"]) { --fo: var(--pdf); } .row:has(.row__fx > b:last-child[data-fam="doc"]) { --fo: var(--doc); }
.row:has(.row__fx > b:last-child[data-fam="img"]) { --fo: var(--img); } .row:has(.row__fx > b:last-child[data-fam="cad"]) { --fo: var(--cad); }
.dir .row__a::before { background: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--fi, var(--ink)) 24%, var(--ink)), var(--ink) 38%, var(--ink) 62%, color-mix(in srgb, var(--fo, var(--ink)) 24%, var(--ink))); }
[dir="rtl"] .dir .row__a::before { background: linear-gradient(270deg, color-mix(in srgb, var(--fi, var(--ink)) 24%, var(--ink)), var(--ink) 38%, var(--ink) 62%, color-mix(in srgb, var(--fo, var(--ink)) 24%, var(--ink))); }

/* Yakında */
.soon__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding: 14px 0 18px; }
.soon__lead { font-size: var(--t-meta); color: var(--ink-2); }
.soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); } /* Faz 4: Görsel is live; Ses + Video remain (ui.SOON) */
.soon__f { padding-block: 22px 26px; padding-inline: 0 var(--cg); border-bottom: 1px solid var(--rule); position: relative; }
.soon__f + .soon__f { padding-inline-start: var(--cg); border-inline-start: 1px solid var(--rule); }
.soon__f::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 4px; background: var(--c); }
.soon__art { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 120px; }
.soon__art .pxs { --w: clamp(72px, 7vw, 104px); }
.motion .soon__f:not(.is-in) .pxs.is-paint { animation-play-state: paused; }
.soon__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; }
.soon__n { font-family: var(--f-wide); font-size: clamp(34px, 3.4vw, 52px); line-height: .9; font-weight: 800; font-stretch: 122%; letter-spacing: -.045em; color: var(--c-ink); }
html[lang="ja"] .soon__n, html[lang="ar"] .soon__n { letter-spacing: 0; line-height: 1.1; }
.soon__d { margin-top: 12px; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); }
.soon__l { margin-top: 16px; }
.soon__l li { padding: 9px 0; border-top: 1px solid var(--rule-2); font: 500 13px/1.3 var(--f-mono); color: var(--ink); }
.soon__q { margin-top: 14px; font-size: 15px; color: var(--ink); font-weight: 560; }
.soon__viz { flex: none; margin-bottom: 4px; }
.soon__viz--eq { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.soon__viz--eq i { width: 4px; height: 100%; background: var(--c); transform-origin: 50% 100%; animation: eq 1.1s var(--e-io) infinite alternate; }
.soon__viz--eq i:nth-child(2) { animation-delay: -.2s; animation-duration: .9s; }
.soon__viz--eq i:nth-child(3) { animation-delay: -.5s; animation-duration: 1.3s; }
.soon__viz--eq i:nth-child(4) { animation-delay: -.1s; animation-duration: .8s; }
.soon__viz--eq i:nth-child(5) { animation-delay: -.7s; animation-duration: 1.2s; }
.soon__viz--eq i:nth-child(6) { animation-delay: -.3s; animation-duration: 1s; }
.soon__viz--eq i:nth-child(7) { animation-delay: -.6s; animation-duration: .95s; }
@keyframes eq { 0% { transform: scaleY(.18); } 100% { transform: scaleY(1); } }
.soon__viz--tc { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); padding: 6px 8px; border: 1px solid var(--rule); direction: ltr; }
.soon__viz--tc::before { content: ""; width: 8px; height: 8px; background: var(--vid); animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.soon__viz--px { display: grid; grid-template-columns: repeat(3, 10px); gap: 2px; }
.soon__viz--px i { width: 10px; height: 10px; background: var(--c); box-shadow: inset 0 0 0 1px var(--key); animation: px 2.4s steps(1, end) infinite; }
.soon__viz--px i:nth-child(2n) { animation-delay: -.6s; }
.soon__viz--px i:nth-child(3n) { animation-delay: -1.2s; }
.soon__viz--px i:nth-child(5) { animation-delay: -1.8s; }
@keyframes px { 0% { opacity: 1; } 25% { opacity: .25; } 50% { opacity: .65; } 75% { opacity: 1; } }
.soon.is-off .amb, .soon.is-off .amb *, .soon.is-off .amb::before, .tier-low .soon .amb, .tier-low .soon .amb * { animation-play-state: paused; }
.is-still .soon .amb, .is-still .soon .amb *, .is-still .soon .amb::before, .is-reduced .soon .amb, .is-reduced .soon .amb *, .is-reduced .soon .amb::before { animation: none; }
.is-still .soon__viz--eq i:nth-child(odd), .is-reduced .soon__viz--eq i:nth-child(odd) { transform: scaleY(.55); }

/* story teaser */
.story { padding: var(--s-9) 0 var(--s-10); border-top: 1px solid var(--ink); overflow: hidden; }
.story__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); margin-top: var(--s-7); align-items: center; }
.story__copy { grid-column: 4 / 8; }
.story__lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; letter-spacing: -.01em; max-width: 30ch; }
.story__try { margin-top: 30px; padding: 18px 0 16px; border-top: 1px solid var(--ink); }
.story__lbl { display: block; font-size: var(--t-meta); color: var(--ink-2); }
.story__rng { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.story__out { font-family: var(--f-wide); font-size: 44px; line-height: 1; font-weight: 850; font-stretch: 125%; letter-spacing: -.05em; color: var(--signal); min-width: 3.4ch; font-variant-numeric: tabular-nums; }
.story__hook { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.story__hook b { color: var(--ink); font-weight: 650; }
.story .priv { margin-top: 8px; max-width: 420px; }
.story__tip { margin-top: 16px; max-width: 420px; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); padding-inline-start: 12px; border-inline-start: 2px solid var(--signal); }
/* 1.4.10 / 1.4.12: a long label wraps to 2 lines instead of clipping (the roll copy wraps the same way; cf. .ck__act) */
.story__cta { margin-top: 28px; max-width: 100%; white-space: normal; padding-block: 10px; }
.story__cta .btn__t { min-width: 0; }
.story__cta .btn__t::after { white-space: normal; inset-inline: 0; }
.story__rng input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.story__rng input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--ink) 0 var(--p, 81%), var(--paper-3) var(--p, 81%)); }
[dir="rtl"] .story__rng input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--ink) 0 var(--p, 81%), var(--paper-3) var(--p, 81%)); }
.story__rng input[type="range"]::-moz-range-track { height: 4px; background: var(--paper-3); }
.story__rng input[type="range"]::-moz-range-progress { height: 4px; background: var(--ink); }
.story__rng input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; background: var(--signal-strong); border: 2px solid var(--ink); border-radius: 0; transition: transform .3s var(--e-spring); }
.story__rng input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--signal-strong); border: 2px solid var(--ink); border-radius: 0; }
.story__rng input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.story__rng input[type="range"]:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 4px; }

.story__fan { grid-column: 8 / 13; position: relative; height: clamp(420px, 42vw, 600px); direction: ltr; }
.story__c {
  position: absolute; top: 50%; left: 50%; width: clamp(190px, 16.5vw, 260px); aspect-ratio: 9 / 16; overflow: hidden;
  --bg: var(--ink); --fg: var(--paper); --acc: var(--signal-lt);
  background: var(--bg); color: var(--fg); box-shadow: 10px 10px 0 rgba(15, 15, 14, .9); cursor: pointer;
  transition: transform .8s var(--e-out), box-shadow .6s var(--e-out);
}
.story__c canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story__c[data-theme="murekkep"] { transform: translate(-50%, -50%) translate(-62%, 5%) rotate(-9deg); z-index: 1; }
.story__c[data-theme="kagit"] { --bg: var(--paper); --fg: var(--ink); --acc: var(--signal); transform: translate(-50%, -50%) translate(62%, 7%) rotate(8deg); z-index: 2; outline: 1px solid var(--rule); }
.story__c[data-theme="bugun"] { --bg: var(--paper-2); --fg: var(--ink); --acc: var(--signal); transform: translate(-50%, -50%) translate(22%, -4%) rotate(4deg); z-index: 3; outline: 1px solid var(--rule); }
.story__c[data-theme="kirmizi"] { --bg: var(--signal); --fg: var(--ink); --acc: var(--paper); transform: translate(-50%, -50%) translate(-12%, 2%) rotate(-2deg); z-index: 4; }
.story__c.is-front { z-index: 5; }
@media (hover: hover) {
  .story__fan:hover .story__c[data-theme="murekkep"] { transform: translate(-50%, -50%) translate(-74%, 3%) rotate(-13deg); }
  .story__fan:hover .story__c[data-theme="kagit"] { transform: translate(-50%, -50%) translate(74%, 5%) rotate(12deg); }
  .story__fan:hover .story__c[data-theme="bugun"] { transform: translate(-50%, -50%) translate(30%, -6%) rotate(5deg); }
  .story__fan:hover .story__c[data-theme="kirmizi"] { transform: translate(-50%, -50%) translate(-16%, -2%) rotate(-1deg); }
}
/* poster until story.js paints */
.story__fb { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12%; font-family: var(--f-wide); }
.story__fb img { position: absolute; top: 12%; left: 12%; width: 13%; height: auto; }
.story__fb-p { font-size: clamp(52px, 5vw, 76px); line-height: .9; font-weight: 900; font-stretch: 125%; letter-spacing: -.05em; color: var(--acc); }
.story__fb i { font-style: normal; font-size: clamp(16px, 1.5vw, 22px); font-weight: 820; font-stretch: 120%; letter-spacing: -.02em; }
.story__fb u { text-decoration: none; margin-top: 14px; font-size: 14px; font-weight: 700; font-stretch: 110%; line-height: 1.2; }
.story__c.is-drawn .story__fb { visibility: hidden; }

/* facts */
.facts { background: var(--ink); color: var(--paper); padding: var(--s-10) 0 var(--s-9); }
.facts .sec-idx { color: var(--on-ink-2); }
.facts .sec-title em { color: var(--signal-lt); }
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); margin-top: var(--s-9); }
.fact { border-top: 1px solid var(--paper); padding-top: 22px; padding-inline-end: var(--s-4); display: flex; flex-direction: column; }
.fact__k { order: -1; color: var(--on-ink-2); margin-bottom: 10px; }
.fact:not(:nth-child(2)) .fact__big { margin-top: calc(var(--t-mono) * 1.45 + 10px); }
.fact__big { font-family: var(--f-wide); font-size: clamp(52px, 6.2vw, 104px); line-height: .9; font-weight: 820; font-stretch: 122%; letter-spacing: -.045em; white-space: nowrap; }
.fact__cd { font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; letter-spacing: -.06em; font-size: .86em; color: var(--signal-lt); direction: ltr; unicode-bidi: isolate; }
.fact__cd.is-puf { color: var(--paper); font-family: var(--f-sans); font-weight: 820; font-stretch: 122%; letter-spacing: -.045em; font-size: 1em; }
.fact__big--tr { font-stretch: 110%; letter-spacing: -.03em; }
.fact__t { margin-top: 26px; font-size: 15px; line-height: 1.5; color: var(--on-ink-2); max-width: 30ch; }
.fact__t strong { color: var(--paper); font-weight: 620; }

/* about */
.about { padding-block: var(--s-10); }
.about__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); margin-top: var(--s-8); }
.about__lead { grid-column: 4 / 12; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.3; letter-spacing: -.015em; font-weight: 460; text-wrap: pretty; }
.about__cols { grid-column: 4 / 12; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cg); margin-top: var(--s-6); color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.why { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); margin-top: var(--s-8); border-top: 1px solid var(--ink); }
.why li { padding-top: 18px; padding-inline-end: var(--s-4); }
.why__n { color: var(--signal-ink); }
.why p { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.why strong { display: block; margin-bottom: 8px; font-size: 19px; line-height: 1.2; font-weight: 680; letter-spacing: -.015em; color: var(--ink); }

/* no content-visibility on home: skipped subtrees leave the a11y tree (cost measured: layout +10–55 ms) */

@media (max-width: 1023.98px) {
  .hero { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kin--2 { grid-column: 1 / -1; }
  .vl-wrap { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin-top: 10px; }
  .hero__copy { grid-column: 1 / -1; grid-row: 4; padding-top: 20px; }
  .hero__foot { grid-row: 5; }
  .dir__lab { grid-column: 1 / -1; position: static; padding: 0 0 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
  .dir__art { display: none; }
  .dir__grp > .rows, .dir__grp > .soon-box { grid-column: 1 / -1; }
  .story__copy { grid-column: 1 / 7; }
  .story__fan { grid-column: 7 / 13; }
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
  .about__lead, .about__cols { grid-column: 1 / -1; }
  .why { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
}
@media (max-width: 719.98px) {
  .hero__h1 { font-size: 30px; }
  .hero__copy { padding-top: 16px; }
  .dropper { grid-template-columns: 1fr; padding: 12px; row-gap: 8px; max-width: none; }
  .dropper__pick { grid-row: auto; width: 100%; justify-content: space-between; }
  .dropper__t { font-size: 15px; }
  .dropper__res { max-width: none; }
  .hero__foot { flex-wrap: wrap; gap: 0 16px; padding-top: 22px; }
  .vl { gap: 10px; font-size: 16px; }
  .vl__track { display: none; }
  .trust { font-size: 13px; gap: 2px 16px; }
  .soon { grid-template-columns: 1fr; }
  .soon__f + .soon__f { padding-inline-start: 0; border-inline-start: 0; }
  .soon__f { padding-inline-end: 0; }
  .soon__art { min-height: 0; }
  .story__body { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--s-5); }
  .story__fan { order: -1; height: 400px; margin: 0 0 12px; }
  .story__c { width: 190px; }
  .story__c[data-theme="murekkep"] { transform: translate(-50%, -50%) translate(-44%, 4%) rotate(-8deg); }
  .story__c[data-theme="kagit"] { transform: translate(-50%, -50%) translate(44%, 6%) rotate(7deg); }
  .story__c[data-theme="bugun"] { display: none; }
  .story__c[data-theme="kirmizi"] { transform: translate(-50%, -50%) rotate(-1deg); }
  .story__cta { width: 100%; justify-content: space-between; }
  .facts__grid { grid-template-columns: 1fr; }
  .fact:not(:nth-child(2)) .fact__big { margin-top: 0; }
  .about__cols { grid-template-columns: 1fr; row-gap: 14px; }
  .why { grid-template-columns: 1fr; }
  .dir { padding-top: var(--s-8); }
  .dir .sec-head { margin-bottom: var(--s-6); }
  .story, .facts, .about { padding-block: var(--s-8); }
  .facts__grid { margin-top: var(--s-7); }
}