/*
 * Ucuncu surum (?v=3): kaydirilmayan tek ekran; sagda iPhone 18 Pro benzeri telefon, solda aciklama.
 * Telefon ekrani 402x874 pt cizilir ve butun olarak olceklenir. `ap-` = uygulama kopyasi, `sc-` = sayfa.
 */
html[data-variant=showcase],html[data-variant=showcase] body{height:100%;overflow:hidden;overscroll-behavior:none}
html[data-variant=showcase] body{background:var(--paper)}

/* ---------- sayfa ---------- */
.sc-page{--phone-scale:1;--ui-zoom:1;--vw:calc(1vw / var(--ui-zoom));--vh:calc(1svh / var(--ui-zoom));zoom:var(--ui-zoom);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);align-items:center;gap:clamp(48px,6*var(--vw),88px);height:calc(100svh / var(--ui-zoom));padding:clamp(18px,3*var(--vh),36px) clamp(20px,5*var(--vw),88px);overflow:hidden;color:var(--ink)}
.sc-page::before{content:'';position:absolute;inset:-20% -10% -20% 40%;background:radial-gradient(ellipse at 60% 50%,color-mix(in srgb,var(--ambient) 25%,transparent),transparent 62%);z-index:-1;pointer-events:none}
.sc-left{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-width:0;min-height:0;max-width:600px}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sc-top-actions{display:flex;align-items:center;gap:8px}
.sc-copy{align-self:start;display:grid;align-content:start;gap:clamp(12px,2*var(--vh),22px);min-height:0;margin-top:clamp(12px,7*var(--vh) - 16px,64px)}
/* Bolum menusu: bes ana baslik; kayan zemin 240 ms, her bolum icin bir cizgi (gecerli olan sahneyle dolar). */
.sc-menu{--groups:5;--group:0;position:relative;display:grid;grid-template-columns:repeat(var(--groups),minmax(0,1fr));padding:4px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface) 35%,transparent)}
.sc-menu-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--groups));border-radius:16px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:var(--surface);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent),0 6px 18px -10px color-mix(in srgb,var(--ink) 30%,transparent);transform:translateX(calc(var(--group) * 100%));transition:transform .24s cubic-bezier(.22,1,.36,1);pointer-events:none}
.sc-menu-group{position:relative;display:grid;justify-items:center;padding-bottom:6px}
.sc-menu-head{width:100%;min-height:40px;padding:0 6px;border:0;border-radius:14px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:500;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .12s}
.sc-menu-head:hover,.sc-menu-group[data-active=true] .sc-menu-head{color:var(--ink)}
.sc-menu-group[data-active=true] .sc-menu-head{font-weight:600}
.sc-menu-ticks{display:flex;justify-content:center}
.sc-menu-ticks button{position:relative;display:grid;place-items:center;width:24px;height:20px;padding:0;border:0;background:transparent;cursor:pointer}
.sc-menu-ticks i{position:relative;display:block;width:12px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;transition:width .24s cubic-bezier(.22,1,.36,1),background .24s}
.sc-menu-ticks button[data-state=previous] i{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.sc-menu-ticks button[data-state=current] i{width:20px;background:color-mix(in srgb,var(--accent) 28%,var(--line))}
.sc-menu-ticks i>.sc-fill{position:absolute;inset:0}
.sc-menu-ticks button:hover i{background:color-mix(in srgb,var(--accent) 60%,var(--line))}
.sc-menu-ticks button::after{content:attr(data-label);position:absolute;z-index:5;top:calc(100% + 4px);left:50%;padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:500;letter-spacing:0;white-space:nowrap;opacity:0;transform:translate(-50%,-3px);transition:opacity .12s,transform .12s;pointer-events:none}
.sc-menu-ticks button:hover::after,.sc-menu-ticks button:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.sc-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:1100px){.sc-menu-ticks button{width:19px}.sc-menu-head{font-size:12.5px}}
.sc-eyebrow{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.sc-title{margin:0;font-size:clamp(40px,4.1*var(--vw),60px);line-height:1.08;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.sc-body{margin:0;font-size:clamp(16px,1.35*var(--vw),19px);line-height:1.5;color:var(--muted);max-width:46ch}
.sc-bullets{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.sc-bullets li{display:flex;align-items:center;gap:10px;font-size:14px;color:color-mix(in srgb,var(--ink) 80%,var(--paper))}
.sc-bullets li::before{content:'';width:10px;height:1.5px;background:var(--accent)}
.sc-steps{display:grid;gap:2px;margin:4px 0 0;padding:0;list-style:none;max-width:440px}
.sc-steps li{position:relative}
.sc-steps button{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:color .3s,background .3s}
.sc-steps button:hover{color:var(--ink)}
.sc-steps button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-steps li[data-state=active] button{color:var(--ink);background:color-mix(in srgb,var(--surface) 80%,transparent)}
.sc-steps li[data-state=done] button{color:color-mix(in srgb,var(--ink) 65%,var(--paper))}
.sc-steps button>i{position:relative;flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);transition:border-color .3s,background .3s}
.sc-steps li[data-state=active] button>i{border-color:var(--accent)}
.sc-steps li[data-state=done] button>i{background:var(--accent);border-color:var(--accent)}
.sc-steps li>b{position:absolute;left:38px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;pointer-events:none}
@keyframes sc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sc-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sc-controls{display:flex;align-items:center;gap:8px}
.sc-controls button,.sc-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.sc-controls button:focus-visible,.sc-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-controls .sc-play{background:var(--button);border-color:var(--button);color:var(--on-button)}
.sc-controls svg{width:16px;height:16px}
.sc-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;background:var(--button);color:var(--on-button);font-weight:500;text-decoration:none}

.sc-text{display:grid;gap:0}
.sc-text>.sc-title+.sc-body{margin-top:clamp(14px,2.4*var(--vh),24px)}.sc-text>.sc-body+.sc-bullets{margin-top:clamp(12px,2*var(--vh),20px)}
.sc-text>[data-anim]{animation:sc-copy-in .5s cubic-bezier(.2,.8,.2,1) both}
.sc-text>[data-anim="2"]{animation-delay:.05s}.sc-text>[data-anim="3"]{animation-delay:.1s}.sc-text>[data-anim="4"]{animation-delay:.15s}
.sc-up{transform:rotate(180deg)}
.sc-controls button:disabled{opacity:.35;cursor:default}
.sc-counter{min-width:64px;padding:0 6px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-versions{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.sc-versions a,.sc-versions span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);color:inherit;text-decoration:none}
.sc-versions span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes sc-copy-in{from{opacity:0;transform:translateY(14px)}}

/* ---------- telefon ---------- */
/* 2026-10-15: Dynamic Island uygulama ekran goruntulerindeki olcude (94 x 35 pt, tepeden 12). */
.sc-stage{position:relative;justify-self:center;display:grid;place-items:center;width:var(--device-width);height:var(--device-height)}
.sc-phone{position:absolute;left:50%;top:50%;width:430px;height:902px;transform:translate(-50%,-50%) scale(var(--phone-scale));transform-origin:center}
.sc-frame{position:absolute;inset:0;border-radius:70px;background:linear-gradient(140deg,#5d6066 0%,#2b2d31 18%,#1b1c1f 50%,#34363b 82%,#6a6d73 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),inset 0 0 0 4px #0c0c0d,0 28px 60px -24px rgb(20 25 20 / .24),0 8px 18px -10px rgb(20 25 20 / .18)}
.sc-frame::before{content:'';position:absolute;inset:9px;border-radius:61px;background:#050506}
.sc-button{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#3b3e43,#7a7d83 60%,#3b3e43)}
.sc-button.l1{left:-3px;top:150px;height:34px}.sc-button.l2{left:-3px;top:210px;height:62px}.sc-button.l3{left:-3px;top:286px;height:62px}
.sc-button.r1{right:-3px;top:236px;height:96px}.sc-button.r2{right:-2px;top:520px;height:56px;width:3px;opacity:.8}
.sc-screen{position:absolute;left:14px;top:14px;width:402px;height:874px;border-radius:56px;overflow:hidden;isolation:isolate;transform:translateZ(0)}
.sc-island{position:absolute;z-index:40;left:50%;top:12px;width:94px;height:35px;margin-left:-47px;border-radius:18px;background:#000;overflow:hidden;color:#fff;font:600 13px/1 -apple-system,"SF Pro Text",system-ui,sans-serif;transition:width .42s cubic-bezier(.32,.72,0,1),height .42s cubic-bezier(.32,.72,0,1),margin .42s cubic-bezier(.32,.72,0,1),border-radius .42s cubic-bezier(.32,.72,0,1),top .42s cubic-bezier(.32,.72,0,1)}
.sc-island[data-mode=compact]{width:162px;margin-left:-81px}
.sc-island[data-mode=expanded]{top:9px;width:372px;height:78px;margin-left:-186px;border-radius:38px}
.sc-island-compact,.sc-island-expanded{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transition:opacity .14s}
.sc-island-compact{justify-content:space-between;padding:0 12px 0 8px}
.sc-island[data-mode=compact] .sc-island-compact{opacity:1;transition-delay:.2s}
.sc-island-compact b{font-variant-numeric:tabular-nums;color:#9ee493;font-weight:600}
.sc-island-icon{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#2c5a2a;color:#9ee493}
.sc-island-expanded{gap:12px;padding:0 22px 0 16px}
.sc-island[data-mode=expanded] .sc-island-expanded{opacity:1;transition-delay:.22s}
.sc-island-expanded .sc-island-icon{width:40px;height:40px}
.sc-island-expanded>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}
.sc-island-expanded b{font-size:15px}
.sc-island-expanded small{font-size:13px;font-weight:500;color:#a8a8ad}
.sc-island-expanded em{font-family:inherit;font-weight:600;font-style:normal;font-variant-numeric:tabular-nums;color:#9ee493;font-size:17px}
.sc-status{position:absolute;z-index:35;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 0 0;color:var(--ap-text-primary);font:600 17px/1 -apple-system,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.2px;pointer-events:none;transition:color .5s}
.sc-status-icons{display:flex;align-items:center;justify-content:center;gap:6px;width:150px}
.sc-status>span:first-child{width:162px;text-align:center;font-size:17.5px}
.sc-home{position:absolute;z-index:45;left:50%;bottom:8px;width:138px;height:5px;margin-left:-69px;border-radius:3px;background:var(--ap-text-primary);opacity:.9;transition:background-color .5s}

/* ekran gecisleri */
.sc-layer{position:absolute;inset:0}
.sc-layer[data-phase=enter][data-enter=push]{animation:sc-push-in .4s cubic-bezier(.32,.72,0,1) both}
.sc-layer[data-phase=exit][data-enter=push]{animation:sc-push-out .4s cubic-bezier(.32,.72,0,1) both}
.sc-layer[data-phase=enter][data-enter=back]{animation:sc-back-in .4s cubic-bezier(.32,.72,0,1) both}
.sc-layer[data-phase=exit][data-enter=back]{animation:sc-back-out .4s cubic-bezier(.32,.72,0,1) both}
.sc-layer[data-phase=enter][data-enter=fade]{animation:sc-fade-in .22s ease both}
.sc-layer[data-phase=exit][data-enter=fade]{animation:sc-fade-out .22s ease both}
.sc-layer[data-phase=enter][data-enter=rise]{animation:sc-rise-in .4s cubic-bezier(.2,.9,.25,1) both}
.sc-layer[data-phase=exit][data-enter=rise]{animation:sc-fade-out .22s ease both}
@keyframes sc-push-in{from{transform:translateX(100%)}}
@keyframes sc-push-out{to{transform:translateX(-28%);filter:brightness(.92)}}
@keyframes sc-back-in{from{transform:translateX(-28%)}}
@keyframes sc-back-out{to{transform:translateX(100%)}}
@keyframes sc-fade-in{from{opacity:0}}
@keyframes sc-fade-out{to{opacity:0}}
@keyframes sc-rise-in{from{opacity:0;transform:translateY(24px) scale(.985)}}
.sc-layer[data-phase=exit]{z-index:1}.sc-layer[data-phase=enter],.sc-layer[data-phase=idle]{z-index:2}
.sc-layer[data-phase=exit][data-enter=push]{z-index:1}.sc-layer[data-phase=enter][data-enter=back]{z-index:1}.sc-layer[data-phase=exit][data-enter=back]{z-index:2}

/* ---------- uygulama kopyasi (2026-10-15: iOS 26 Liquid Glass temasi) ---------- */
.ap-root{position:absolute;inset:0;background:var(--ap-bg);color:var(--ap-text-primary);font-family:-apple-system,"SF Pro Text",system-ui,"Segoe UI",sans-serif;font-size:15px;line-height:21px;-webkit-font-smoothing:antialiased;text-align:left;letter-spacing:0;transition:none}
/* Renkler tek karede degisir; hareket gecisleri yalniz ilgili bilesenlerde tanimlidir. */
.ap-root h1,.ap-root h2,.ap-root h3,.ap-root p{margin:0}
.ap-icon{flex:none;display:block}
.ap-num{font-variant-numeric:tabular-nums}
/* Ekran: icerik ekranin tepesinden baslar (durum cubugunun altindan kayar). Sekmede ilk satir 62+12, yiginda 62+56+12. */
.ap-screen{--ap-content-top:74px;--ap-band-min:64px;position:absolute;inset:0;overflow:hidden;background:var(--ap-bg);color:var(--ap-text-primary)}
.ap-screen[data-kind=stack]{--ap-content-top:130px;--ap-band-min:68px}
.ap-viewport{position:absolute;inset:0;overflow:hidden}
.ap-scroll{position:relative;z-index:0;display:flex;flex-direction:column;gap:16px;padding:var(--ap-content-top) 20px 32px;transition:none!important}
.ap-screen[data-tabbar=true] .ap-scroll{padding-bottom:112px}
/* Baslik fotografi: 233 x 206 pt, sag ust; iki gecis fotografin kendi maskesinde (soldan saga, asagi dogru). */
.ap-photo{position:absolute;z-index:-1;top:0;right:0;width:233px;height:206px;background:right center/cover no-repeat;opacity:var(--ap-photo-opacity,1);pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 0,rgb(0 0 0/.14) 30%,rgb(0 0 0/.7) 62%,#000 100%),linear-gradient(to bottom,#000 55%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,rgb(0 0 0/.14) 30%,rgb(0 0 0/.7) 62%,#000 100%),linear-gradient(to bottom,#000 55%,transparent 100%);mask-composite:intersect}
/* Durum cubugu korumasi: zemin %90 -> %54 (guvenli alan sonu) -> seffaf (+16 pt). */
.ap-status-guard{position:absolute;z-index:3;top:0;left:0;right:0;height:78px;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--ap-bg) 90%,transparent) 0,color-mix(in srgb,var(--ap-bg) 54%,transparent) 79%,color-mix(in srgb,var(--ap-bg) 0%,transparent) 100%)}
.ap-stack-slot{position:absolute;z-index:6;top:0;left:0;right:0;padding-top:62px;pointer-events:none}
.ap-stack{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:6px 20px}

/* Cam: yari saydam dolgu + arka plani bulaniklastirma, ince parlak kenar, yumusak golge; desteklenmezse opak yuzey. */
.ap-glass{position:relative;isolation:isolate;background:var(--ap-glass-fill);-webkit-backdrop-filter:blur(10px) saturate(1.2) brightness(1.03);backdrop-filter:blur(10px) saturate(1.2) brightness(1.03);box-shadow:inset 0 0 0 1px var(--ap-glass-edge),inset 0 1px .5px var(--ap-glass-rim),inset 0 -1px .5px var(--ap-glass-rim),0 6px 14px -8px var(--ap-glass-shade),0 1px 2px -1px var(--ap-glass-shade)}
.ap-glass::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(130% 90% at 28% 0%,var(--ap-glass-shine),transparent 60%);pointer-events:none}
.ap-glass[data-tone=accent]{background:var(--ap-accent);color:var(--ap-on-accent);box-shadow:inset 0 0 0 .5px rgb(0 0 0/.08),inset 0 1px .5px rgb(255 255 255/.25),0 1px 4px rgb(0 0 0/.08)}
.ap-glass[data-tone=accent]::before{opacity:.35}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ap-glass{background:var(--ap-glass-solid)}.ap-glass[data-tone=accent]{background:var(--ap-accent)}}
.ap-glass-hit{flex:none}
.ap-glass-circle{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ap-accent-ink)}
.ap-glass-capsule{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:20px;color:var(--ap-accent-ink);font-size:15px;line-height:21px;font-weight:600;white-space:nowrap}
.ap-glass-capsule[data-ink=secondary]{color:var(--ap-text-secondary)}
.ap-glass-capsule[data-disabled=true]{color:var(--ap-text-muted)}
.ap-appbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:44px}
.ap-appbar-side{display:flex;gap:8px}
.ap-appbar-trailing{display:flex;justify-content:flex-end;gap:8px}
.ap-appbar-word{font-size:16px;line-height:21px;font-weight:600;letter-spacing:.2px;color:var(--ap-accent-ink);white-space:nowrap}

/* Basliklar (typography.ts: display 32/38/700, headline 17/22/600, footnote 13/18). */
/* Tek uzun kelime (RU) izgarayi genisletmez; basliktaki kelime gerekirse hecelenir. */
.ap-large-title{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ap-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ap-screen[data-kind=stack] .ap-title-row{opacity:clamp(0,calc(1 - (var(--ap-offset,0) - 8) / 30),1);transition:opacity .2s}
/* Uygulama gibi butun kelimeyle sarar; yalniz banda sigmayan uzun kelime (12+ harf, RU "направляешься?") tirelenir.
 * Sinirsiz hyphens:auto "Денеж-ный", "поку-пок" gibi sigan kelimeleri de boluyordu. */
.ap-title-row h1,.ap-large-title h1{flex:1;min-width:0;font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.4px;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 6 6}
.ap-title-mark{display:grid;place-items:center;flex:none;width:44px;height:38px;color:var(--ap-text-muted)}
.ap-title-eyebrow{margin-bottom:2px!important;font-size:15px;line-height:21px;color:var(--ap-text-secondary)}
/* Giris ve dipnotlar tek kelimelik son satir birakmaz (uygulamada iOS lineBreakStrategy push-out). */
.ap-title-intro{font-size:15px;line-height:21px;color:var(--ap-text-secondary);text-wrap:pretty}
.ap-root p,.ap-row-detail,.ap-banner-text small{text-wrap:pretty}
/* Fotografli ekranda baslik bandin icinde (en fazla 362 - 233/2 = 245 pt), en az tuvalin alt sinirina kadar. */
.ap-screen[data-photo=true] .ap-title-band{max-width:245px;min-height:var(--ap-band-min)}
.ap-eyebrow{font-size:13px;line-height:18px;font-weight:600;color:var(--ap-text-secondary)}
.ap-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px}
.ap-section-title h2{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.2px}

/* Yuzeyler: opak (cam degil). Kart 20 kose, kil payi kenar, 18 dolgu. */
.ap-card{display:flex;flex-direction:column;gap:8px;padding:18px;border:.5px solid var(--ap-border-subtle);border-radius:20px;background:var(--ap-surface);transition:box-shadow .4s,border-color .4s,background-color .6s,transform .4s}
.ap-card-alt{background:var(--ap-surface-alt)}
.ap-card-highlight{border-color:var(--ap-accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ap-accent) 20%,transparent)}
.ap-row-group{padding:0 16px;border:.5px solid var(--ap-border-subtle);border-radius:20px;background:var(--ap-surface)}
.ap-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0}
.ap-row+.ap-row{border-top:.5px solid var(--ap-border-subtle)}
.ap-plate{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--ap-surface-alt);color:var(--ap-accent-ink)}
.ap-plate[data-tone=fill],.ap-row-emphasis .ap-plate{background:var(--ap-accent-subtle);color:var(--ap-on-accent-subtle)}
.ap-plate[data-tone=accent]{background:var(--ap-accent);color:var(--ap-on-accent)}
.ap-row-emphasis .ap-row-label{font-weight:600}
.ap-row-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.ap-row-detail{font-size:13px;line-height:18px;color:var(--ap-text-secondary)}
.ap-row-value{flex:none;color:var(--ap-text-secondary);font-weight:500;font-variant-numeric:tabular-nums}
.ap-chevron{flex:none;color:var(--ap-text-muted)}
.ap-check{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1.5px solid var(--ap-border-strong);border-radius:50%;color:transparent}
.ap-check[data-checked=true]{background:var(--ap-accent);border-color:var(--ap-accent);color:var(--ap-on-accent);animation:ap-pop .35s cubic-bezier(.2,.9,.25,1.4)}
@keyframes ap-pop{from{transform:scale(.6)}}

/* Dugmeler (core.tsx): 52 pt kapsul. Birincil koyu vurgu; ikincil tonal (zeminine gore); devre disi notr opak + kil payi. */
.ap-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 16px;border:.5px solid transparent;border-radius:26px;font-size:15px;line-height:21px;font-weight:600;text-align:center}
.ap-button[data-compact=true]{min-height:44px;padding:8px 16px;border-radius:22px;gap:6px}
.ap-button-primary{background:var(--ap-accent);color:var(--ap-on-accent)}
.ap-button-secondary{background:var(--ap-tonal-bg);color:var(--ap-accent-ink)}
:is(.ap-card,.ap-row-group,.ap-sheet,.ap-banner) .ap-button-secondary{background:var(--ap-tonal-surface)}
.ap-card-alt .ap-button-secondary{background:var(--ap-tonal-alt)}
.ap-button[data-disabled=true]{background:var(--ap-disabled-bg);border-color:var(--ap-border-subtle);color:var(--ap-text-muted)}
:is(.ap-card,.ap-row-group,.ap-sheet,.ap-banner) .ap-button[data-disabled=true]{background:var(--ap-disabled-surface)}
/* Uyari kutusu: soluk uyari dolgusu, kil payi kenar, kucuk ucgen; metin koyu murekkep. */
.ap-callout{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:.5px solid var(--ap-caution-line);border-radius:16px;background:var(--ap-caution-fill)}
.ap-callout-icon{margin-top:1px;color:var(--ap-caution)}
.ap-callout>div{display:grid;justify-items:start;gap:4px;flex:1;min-width:0}
.ap-callout p{font-size:13px;line-height:18px;color:var(--ap-text-primary)}
.ap-callout[data-body=true] p{font-size:15px;line-height:21px}
.ap-callout-link{display:inline-flex;align-items:center;gap:2px;min-height:24px;font-size:13px;line-height:18px;font-weight:600;color:var(--ap-accent-ink)}
.ap-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--ap-surface-alt);color:var(--ap-text-secondary);font-size:13px;line-height:18px;font-weight:500}
.ap-chip[data-active=true]{background:var(--ap-accent-subtle);color:var(--ap-on-accent-subtle)}
.ap-badge{display:inline-flex;align-items:center;flex:none;padding:4px 8px;border-radius:12px;background:var(--ap-surface-alt);color:var(--ap-text-secondary);font-size:11px;line-height:14px;font-weight:500;white-space:nowrap}
.ap-badge[data-tone=accent]{background:var(--ap-accent-subtle);color:var(--ap-on-accent-subtle)}
.ap-badge[data-tone=caution]{background:var(--ap-caution-fill);color:var(--ap-text-primary)}
/* Bolumlu secim: ikincil kabuk, 38 pt bolum, vurgu murekkebi ince cizgili kayan mercek (Plan'da cam). */
.ap-segmented{position:relative;display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));gap:3px;padding:3px;border-radius:22px;background:var(--ap-surface-alt)}
.ap-segment-lens{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px - (var(--count) - 1) * 3px) / var(--count));border-radius:19px;background:var(--ap-segment-lens);box-shadow:inset 0 0 0 1px var(--ap-accent-ink);transform:translateX(calc(var(--index) * (100% + 3px)));transition:transform .35s cubic-bezier(.2,.9,.25,1)!important}
.ap-segment-lens.ap-glass{background:var(--ap-glass-fill);box-shadow:inset 0 0 0 1px var(--ap-accent-ink),inset 0 1.5px .5px var(--ap-glass-rim),0 3px 8px -4px var(--ap-glass-shade)}
/* Etiket kontrol metnidir: footnote 13/18, 600; secili 700 birincil murekkep (core.tsx SegmentedControl). Uzun etiket
 * (RU "Еженедельный подъём") uygulamadaki gibi iki satira iner, kapsulden tasmaz. */
.ap-segmented span{position:relative;display:grid;place-items:center;min-width:0;min-height:38px;padding:4px 10px;font-size:13px;line-height:18px;font-weight:600;color:var(--ap-text-secondary);text-align:center;white-space:normal;text-wrap:balance}
.ap-segmented span[data-active=true]{color:var(--ap-segment-ink);font-weight:700}
.ap-segmented[data-glass=true] span[data-active=true]{color:var(--ap-text-primary)}
/* Cam arama kapsulu: 48 pt, kenarlikli; odakta vurgu kenari. */
/* Arama kapsulu gezinme dairelerinden daha az yukselir (icerikte durur): golge yumusak, kenar ayni. */
.ap-search{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:999px;color:var(--ap-text-secondary);box-shadow:inset 0 0 0 1px var(--ap-glass-edge),inset 0 1px .5px var(--ap-glass-rim),inset 0 -1px .5px var(--ap-glass-rim),0 3px 8px -5px var(--ap-glass-shade)}
.ap-search[data-focused=true]{box-shadow:inset 0 0 0 1.5px var(--ap-accent-ink),0 8px 18px -8px var(--ap-glass-shade)}
.ap-search-placeholder{display:flex;align-items:center;min-width:0;color:var(--ap-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-search-value{display:flex;align-items:center;color:var(--ap-text-primary)}
.ap-caret{display:inline-block;flex:none;width:1.5px;height:20px;margin:0 1px;background:var(--ap-accent-ink);animation:ap-caret 1.1s steps(1) infinite}
@keyframes ap-caret{50%{opacity:0}}
.ap-toggle{position:relative;display:inline-block;flex:none;width:51px;height:31px;border-radius:16px;background:var(--ap-border-subtle)}
.ap-toggle i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.18);transition:transform .3s cubic-bezier(.2,.9,.25,1)!important}
.ap-toggle[data-on=true]{background:var(--ap-accent)}
.ap-toggle[data-on=true] i{transform:translateX(20px)}
.ap-progress{display:block;height:6px;overflow:hidden;border-radius:3px;background:var(--ap-surface-alt)}
.ap-progress i{display:block;height:100%;border-radius:3px;background:var(--ap-accent);transition:width .8s cubic-bezier(.2,.8,.2,1)!important}
.ap-ring{position:relative;display:inline-grid;place-items:center;flex:none}
.ap-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ap-ring circle{fill:none;stroke:var(--ap-surface-alt);stroke-width:4}
.ap-ring .ap-ring-value{stroke:var(--ap-accent);stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)!important}
.ap-ring b{position:relative;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ap-tap{position:relative}
.ap-tap[data-on=true]>:first-child{animation:ap-press .5s ease}
.ap-tap-ring{position:absolute;z-index:5;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:color-mix(in srgb,var(--ap-text-primary) 16%,transparent);pointer-events:none;animation:ap-ring .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes ap-press{30%{transform:scale(.97);filter:brightness(.96)}}
@keyframes ap-ring{from{transform:scale(.3);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* iOS 26 yuzen yaprak (sheet.tsx): 8 pt iceride, dort kose 34, `sheet` tonunda cam; perde #14120F %32. */
.ap-sheet-layer{--ap-sheet:0;position:absolute;inset:0;z-index:30;pointer-events:none;visibility:hidden}
.ap-sheet-layer[data-open=true]{visibility:visible}
.ap-sheet-backdrop{position:absolute;inset:0;background:#14120F;opacity:calc(.32 * var(--ap-sheet));transition:none!important}
.ap-sheet{position:absolute;left:8px;right:8px;bottom:8px;display:flex;flex-direction:column;max-height:88%;color:var(--ap-text-primary);border:.5px solid var(--ap-border-subtle);border-radius:34px;background:color-mix(in srgb,var(--ap-surface-raised) 86%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.1);backdrop-filter:blur(24px) saturate(1.1);box-shadow:inset 0 1px 0 var(--ap-glass-shine),0 12px 36px rgb(0 0 0/.12);transform:translateY(calc((1 - var(--ap-sheet)) * 112%));transition:none!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ap-sheet{background:var(--ap-surface-raised)}}
.ap-sheet-head{display:grid;gap:4px;padding:20px 20px 12px}
.ap-sheet-head b{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.2px}
.ap-sheet-head small{font-size:13px;line-height:18px;color:var(--ap-text-secondary)}
.ap-sheet-body{display:flex;flex-direction:column;gap:16px;padding:0 20px 20px}
/* Yigin katmani: kendi zemini; ondeki katmanin sol kenarinda golge, arkadakinin ustunde kardes perde. */
.ap-layer{position:absolute;z-index:1;inset:0;overflow:hidden;background:var(--ap-bg);transition:none!important}
.ap-layer[data-front=true]{z-index:3;box-shadow:-12px 0 28px rgb(0 0 0/.09)}
.ap-layer-dim{position:absolute;inset:0;z-index:40;background:rgb(0 0 0/.12);pointer-events:none;transition:none!important}
/* Acilir bolum (core.tsx Disclosure): 44 pt, baslik + deger + donen chevron. */
.ap-disclosure{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0}
.ap-disclosure-title{flex:1;min-width:0;font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.2px}
.ap-disclosure[data-role=body] .ap-disclosure-title,.ap-disclosure[data-role=callout] .ap-disclosure-title{font-size:15px;line-height:21px;font-weight:400;letter-spacing:0}
.ap-disclosure[data-role=bodyEmphasis] .ap-disclosure-title{font-size:15px;line-height:21px;font-weight:600;letter-spacing:0}
.ap-disclosure[data-secondary=true] .ap-disclosure-title{color:var(--ap-text-secondary)}
.ap-disclosure>small{flex-shrink:1;max-width:50%;font-size:13px;line-height:18px;font-weight:500;color:var(--ap-text-secondary);text-align:right;font-variant-numeric:tabular-nums}
.ap-disclosure-chevron{display:grid;place-items:center;flex:none;color:var(--ap-text-muted);transition:transform .14s ease!important}
.ap-disclosure-chevron[data-open=true]{transform:rotate(180deg)}
/* Form alani (field.ts): zeminden gomulu dolgu, 1 pt guclu sinir, 14 kose, 50 pt; odakta 1 pt ek vurgu halkasi. */
.ap-field{--ap-field-fill:var(--ap-field-surface);display:grid;gap:8px;min-width:0}
.ap-card-alt .ap-field{--ap-field-fill:var(--ap-field-alt)}
.ap-sheet .ap-field{--ap-field-fill:var(--ap-field-raised)}
.ap-field-label{font-size:13px;line-height:18px;color:var(--ap-text-secondary)}
.ap-field-box{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 14px;border:1px solid var(--ap-border-strong);border-radius:14px;background:var(--ap-field-fill);color:var(--ap-text-primary);font-size:15px;line-height:21px}
.ap-field-box[data-focused=true]{border-color:var(--ap-accent);outline:1px solid var(--ap-accent)}
.ap-field-box[data-big=true]{min-height:60px;padding:0 16px;font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ap-field-value{display:flex;align-items:center;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.ap-field-value[data-placeholder=true]{color:var(--ap-text-muted)}
.ap-field-icon{color:var(--ap-text-muted)}
.ap-field .ap-caret{width:2px;height:1.1em;margin:0 1px;border-radius:1px;background:var(--ap-accent)}
/* Geri sayim yuzu (figures.tsx): 9 pt yay, 44 pt deger (numericDisplay agirligi). */
.ap-countdown{position:relative;display:grid;flex:none;align-self:center;place-content:center;justify-items:center;margin:0 auto}
.ap-countdown svg{position:absolute;inset:0}
.ap-countdown path{fill:none;stroke-width:9;stroke-linecap:round}
.ap-countdown-track{stroke:var(--ap-surface-alt)}
.ap-countdown-value{stroke:var(--ap-accent);transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1)!important}
.ap-countdown>b{position:relative;font-size:44px;line-height:50px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ap-countdown .ap-rolling,.ap-countdown .ap-roll-static,.ap-countdown .ap-roll-col,.ap-countdown .ap-roll-track>span{height:50px;line-height:50px}
.ap-countdown>span{position:relative;max-width:150px;font-size:13px;line-height:18px;color:var(--ap-text-muted);text-align:center;text-wrap:balance}
/* Modal yaprak (hizli kayit): ustte cam Vazgec / Kaydet kapsulleri; opak keten zemin; alttaki ekran geri cekilir. */
.ap-modal-layer{--ap-modal:0;position:absolute;inset:0;z-index:30;pointer-events:none}
.ap-modal-backdrop{position:absolute;inset:0;background:rgb(10 12 10/.24);opacity:0;transition:opacity .4s!important}
.ap-modal{position:absolute;left:0;right:0;top:62px;bottom:0;color:var(--ap-text-primary);display:flex;flex-direction:column;border-radius:36px 36px 0 0;background:var(--ap-bg);box-shadow:inset 0 .5px 0 var(--ap-glass-rim),0 -8px 30px rgba(0,0,0,.14);transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.25,1)!important}
.ap-modal-layer[data-open=true] .ap-modal-backdrop{opacity:1}
.ap-modal-layer[data-open=true] .ap-modal{transform:none}
.ap-modal-layer[data-driven=true] .ap-modal-backdrop{opacity:var(--ap-modal);transition:none!important}
.ap-modal-layer[data-driven=true] .ap-modal{transform:translateY(calc((1 - var(--ap-modal)) * 105%));transition:none!important}
.ap-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0}
/* Opak yaprak ustunde arka plan bulanikligi bir sey katmaz: dolgu, kenar ve parlaklik yeter (daha az bulanik katman). */
.ap-modal-head .ap-glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ap-glass-flat)}
.ap-modal-head .ap-glass[data-tone=accent]{background:var(--ap-accent)}
.ap-modal-body{display:flex;flex-direction:column;gap:16px;padding:19px 20px 32px;min-height:0}
/* Hizli kayit (capture.tsx): kahraman yazi alani yapragin keten zemininden gomulu, odakta vurgu halkasi, kalem
 * ilk satirin ortasinda, iki satirlik yer (2 x 21 + 2 x 16 dolgu = 76 pt). Alanin icinde yer tutucu yok. */
.ap-capture .ap-large-title{padding-bottom:4px}
.ap-capture-field{display:flex;align-items:flex-start;gap:12px;min-height:76px;padding:16px;border:1px solid var(--ap-border-strong);border-radius:14px;background:var(--ap-field-bg)}
.ap-capture-field[data-focused=true]{border-color:var(--ap-accent);outline:1px solid var(--ap-accent)}
.ap-capture-pencil{flex:none;margin:1px 0;color:var(--ap-text-muted)}
.ap-capture-text{flex:1;min-width:0;font-size:15px;line-height:21px;color:var(--ap-text-primary);white-space:pre-wrap}
.ap-capture-text .ap-caret{height:19px;vertical-align:-4px}
.ap-capture-example{font-size:13px;line-height:18px;color:var(--ap-text-muted)}
.ap-capture-card b{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.2px}
.ap-capture-destination{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:21px;color:var(--ap-text-secondary)}
.ap-capture-destination .ap-icon{margin-top:2px}
/* Yasam bant karti (life.tsx CornerBanner): fotograf sagdan %62; yazi sutunu %52'de biter, zemin orada fotografin
 * %22'si boyunca kalkar (once %55 ortu). En az 116 pt. */
.ap-banner{border:.5px solid var(--ap-border-subtle);border-radius:20px;background:var(--ap-surface);overflow:hidden}
.ap-banner-tap{display:block}
.ap-banner-head{position:relative;display:flex;align-items:center;gap:14px;min-height:116px;padding:14px 18px}
/* Genislik ve yumusak maske (kartin %40'indan %80'ine smootherstep) BannerPhoto'nun satir ici stilinde, uygulamayla ortak src/design-system/soft-fade.ts orneklerinden. Ilk yuklemede yarim saniyede belirir. */
.ap-banner-photo{position:absolute;top:0;right:0;bottom:0;width:62%;background:right center/cover no-repeat;opacity:var(--ap-photo-opacity,1);transition:opacity .5s cubic-bezier(.25,.1,.25,1)}
.ap-banner-photo[data-ready=false]{opacity:0}
@media(prefers-reduced-motion:reduce){.ap-banner-photo{transition:none}}
.ap-banner-chevron{position:relative;color:var(--ap-text-secondary)}
.ap-banner-text{position:relative;display:grid;gap:4px;max-width:138px}
.ap-banner-text b{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.2px}
.ap-banner-text small{font-size:13px;line-height:18px;color:var(--ap-text-secondary)}
/* Acik bandin modul satirlari: ayiraci yok (uygulamada satirlar arasi yalniz bosluk). */
.ap-banner-body{padding:2px 16px 8px}
.ap-banner-body .ap-row+.ap-row{border-top:0}
/* Alt cubuk (OTA 9): kenarlardan 20 pt iceride yuzen cam kapsul (62 pt, alttan 21 pt), bes oge, ortada Ekle.
 * Uygulama ekran goruntusunden olculdu: yan dolgu 8 pt, hucre (genislik - 16) / 5; mercek kapsulun ic kenarindan
 * 4 pt iceride, hucreden 4'er pt tasar (bes hucrede ~77 pt). Mercek yalniz secili sekmede, Ekle'de hic yok. */
.ap-tabbar{position:absolute;z-index:25;left:20px;right:20px;bottom:21px;display:grid;grid-template-columns:repeat(var(--count,5),minmax(0,1fr));height:62px;padding:0 8px;border-radius:31px;-webkit-backdrop-filter:blur(12px) saturate(1.7);backdrop-filter:blur(12px) saturate(1.7)}
.ap-tab-lens{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 16px) / var(--count,5) + 8px);border-radius:26px;background:var(--ap-glass-lens);box-shadow:inset 0 .5px 0 var(--ap-glass-shine);transform:translateX(calc(var(--index) * (100% - 8px)));transition:transform .4s cubic-bezier(.3,1.2,.4,1)!important}
.ap-tab-hit{position:relative;z-index:1;display:flex}
.ap-tab{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--ap-tab-ink)}
.ap-tab[data-active=true]{color:var(--ap-accent-ink)}
.ap-tab svg{display:block}
.ap-tab small{font-size:10px;line-height:12px;font-weight:600;letter-spacing:.1px;white-space:nowrap}

/* ---------- dar ekran: telefon ustte, aciklama altta, yine kaydirma yok ---------- */
.sc-caption{display:none;margin:0;font-size:13px;color:var(--accent);font-weight:500;min-height:18px}
@media(max-width:860px){
  .sc-page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;padding:12px 16px calc(18px + env(safe-area-inset-bottom))}
  .sc-page::before{inset:10% -30% 20%}
  .sc-left{display:contents}
  .sc-top{grid-row:1}
  .sc-stage{grid-row:2;justify-self:center;align-self:center}
  .sc-copy{grid-row:3;gap:8px}
  .sc-menu,.sc-bullets,.sc-steps{display:none}
  .sc-title{font-size:26px;letter-spacing:-.03em}
  .sc-body{font-size:14px;line-height:1.5}
  .sc-eyebrow{font-size:11px}
  .sc-bottom{grid-row:4}
  .sc-caption{display:block}
}

@media(prefers-reduced-motion:reduce){
  .sc-layer,.sc-text>[data-anim],.ap-check,.ap-tap-ring,.ap-tap>:first-child{animation:none!important}
  .ap-root *,.sc-island,.ap-scroll,.ap-progress i,.ap-ring .ap-ring-value,.ap-toggle i{transition:none!important}
}
/* Ekran cercevenin icinde (ap-root'un inset:0'ini ezer); dil secici sayfanin ust cubugundaki gibi. */
.sc-screen.ap-root{left:14px;top:14px;right:auto;bottom:auto}
.sc-top-actions .icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.sc-top-actions .icon-button .icon{width:18px;height:18px}

.sc-top-actions .sc-versions{margin-right:6px}
@media(max-width:860px){.sc-top-actions .sc-versions{display:none}}

.sc-top-actions .sc-versions{color:var(--muted)}

/* ---------- kit primitifleri (2026-10-12 animasyon turu) ---------- */
/* Parmak ucu: hedefin ustunde 22 px yari saydam iz; denetim .98'e basilir (90 ms) ve birakilir (160 ms). */
.ap-tap-ring{width:22px!important;height:22px!important;margin:-11px 0 0 -11px!important;background:color-mix(in srgb,var(--ap-text-primary) 26%,transparent)!important;box-shadow:0 0 0 6px color-mix(in srgb,var(--ap-text-primary) 8%,transparent);animation:ap-finger .42s cubic-bezier(.22,1,.36,1) both!important}
@keyframes ap-finger{0%{transform:scale(.6);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}
.ap-tap[data-on=true]>:first-child{animation:ap-press .25s cubic-bezier(.22,1,.36,1)!important}
@keyframes ap-press{36%{transform:scale(.98)}}
.ap-rolling{display:inline-flex;align-items:flex-start;height:1.15em;line-height:1.15em;overflow:hidden;font-variant-numeric:tabular-nums}
.ap-roll-static{display:block;height:1.15em;line-height:1.15em;white-space:pre}
.ap-roll-col{display:block;height:1.15em;overflow:hidden;line-height:1.15em}
.ap-roll-track{display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.22,1,.36,1)!important}
.ap-roll-track>span{display:block;height:1.15em;line-height:1.15em}
.ap-checkmark{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:50%;border:1.5px solid var(--ap-border-strong);transition:background-color .12s,border-color .12s!important}
.ap-checkmark svg{fill:none;stroke:var(--ap-on-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ap-checkmark path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .22s ease-out .12s!important}
.ap-checkmark[data-on=true]{background:var(--ap-accent);border-color:var(--ap-accent)}
.ap-checkmark[data-on=true] path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.ap-tap-ring{display:none!important}.ap-roll-track,.ap-checkmark,.ap-checkmark path{transition:none!important}}

/* ---------- ikinci tur animasyonlar ---------- */
@property --scene-tint{syntax:'<color>';inherits:true;initial-value:#CDD6C4}
.sc-page{transition:--scene-tint .16s ease-out}
.sc-page::before{background:radial-gradient(ellipse at 62% 50%,color-mix(in srgb,var(--scene-tint) 42%,transparent),transparent 62%)!important}
.sc-tour-progress{position:absolute;z-index:5;left:0;right:0;top:0;height:2px;background:color-mix(in srgb,var(--line) 60%,transparent)}
/* Dolgular (tur, bolum cizgisi, adim): CSS animasyonu; saat durunca durur (showcase.tsx Fill). */
@keyframes sc-fill{from{transform:scaleX(var(--from,0))}to{transform:scaleX(var(--to,1))}}
.sc-fill{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--to,1));will-change:transform}
.sc-fill[data-run=true]{animation-name:sc-fill;animation-timing-function:linear;animation-fill-mode:both}
.sc-page[data-running=false] .sc-fill{animation-play-state:paused}
/* Telefon: ic sarmalayicida egim (en fazla 1.5 derece) ve 7 sn'lik 2 px suzulme; duraklatmada durur. */
.sc-phone-motion{position:absolute;inset:0;transform:perspective(1600px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .14s ease-out;animation:sc-float 7s ease-in-out infinite}
.sc-phone-motion[data-paused=true]{animation-play-state:paused}
@keyframes sc-float{50%{translate:0 -2px}}
/* iOS 26 yaprak sunumu: alttaki ekran KUCULMEZ (uygulama ekran goruntusu capture-a), yalnizca yapragin kendi
 * perdesiyle kararir. Ekrana filtre/olcek verilmez: cam dairelerin atasinda filtre backdrop kokune donusurdu. */
.sc-layer{background:#000}
/* CSS gecisli (saate bagli olmayan) modal acikken alt cubuk solar. Saatle cizilen yaprak (hizli kayit) cubugun
 * ustunden kayarak onu kendisi orter ve inerken yeniden acar; orada cubuk solmaz. */
.sc-layer :has(> .ap-modal-layer[data-open=true]:not([data-driven=true])) > .ap-tabbar{opacity:0;transition:opacity .25s}
/* Itme: gelen ekran sagdan, kenarinda hafif golge; giden -28% kayar ve kararir. */
.sc-layer[data-phase=enter][data-enter=push]{box-shadow:-18px 0 32px rgba(0,0,0,.16)}
@keyframes sc-push-out{to{transform:translateX(-28%);filter:brightness(.88)}}
/* Palet gecisinde yeni katman hazir renkleriyle kisa surede belirir. */
.sc-layer[data-wiping=true] *{transition:none!important}
/* Baslik: kelimeler maskeden yukari kayar ve netlesir. */
.sc-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.sc-word>span{display:inline-block;animation:sc-word-in .45s cubic-bezier(.22,1,.36,1) both}
@keyframes sc-word-in{from{transform:translateY(100%);filter:blur(3px);opacity:.2}}
.sc-text>.sc-title{animation:none!important}
.sc-caption{animation:sc-caption-in .18s ease both}
@keyframes sc-caption-in{from{opacity:0;transform:translateY(4px)}}
/* Kilit ekrani ve palet gecisi icin yer tutucu: masaustunde adim cubugu saat ile ilerler. */
@media(max-width:860px){
  .sc-steps{display:flex!important;gap:6px;justify-content:flex-start;max-width:none}
  .sc-steps li{flex:0 0 auto}
  .sc-steps button{min-height:28px;width:28px;padding:0;justify-content:center;border-radius:50%}
  .sc-steps button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sc-steps li>b{display:none}
  .sc-text>.sc-title+.sc-body{margin-top:8px}
  .sc-copy{gap:6px}
}
[data-tiny=true] .sc-bullets,[data-tiny=true] .sc-menu-ticks{display:none}[data-tiny=true] .sc-menu-group{padding-bottom:0}[data-tiny=true] .sc-title{font-size:clamp(28px,3.4*var(--vw),44px)}[data-tiny=true] .sc-steps button{min-height:34px}
@media(prefers-reduced-motion:reduce){.sc-menu-pill,.sc-menu-ticks i{transition:none}.sc-phone-motion{animation:none;transform:none}.sc-word>span,.sc-caption{animation:none}.sc-layer .ap-screen{transition:none!important}.sc-page{transition:none}}

.sc-chapter-picker{display:none;position:relative;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}
.sc-chapter-picker b{font-weight:600}
.sc-chapter-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px}
.sc-chapter-picker:focus-within{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:860px){.sc-counter{display:none}.sc-chapter-picker{display:inline-flex}}
/* Dar ekranda alt denetimler tek satirda kalir: oynat etiketi sarmaz, bolum secicide yalniz grup adi kisalir
 * ("Tercihler · 12/12" -> "Terc… · 12/12"); RU/LT tur sonu etiketi iki satira inip seciciyi itiyordu. */
.sc-controls{min-width:0;max-width:100%}
.sc-controls .sc-play{flex:none;white-space:nowrap}
.sc-chapter-picker{min-width:0}
.sc-chapter-picker>span{display:flex;align-items:baseline;gap:.3em;min-width:0;white-space:nowrap}
.sc-chapter-picker b{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){.ap-caret{animation:none}}

/* ---------- sayfa kromu: uygulamanin iOS 26 cam diliyle (2026-10-15 yeni tema) ---------- */
/* Bolum menusu, oynatma denetimleri, dil/tema/surum dugmeleri telefonun cam dairesi ve kapsulu gibi: yari saydam
 * yuzey + hafif bulaniklik, ince parlak ust kenar, kil payi kenar ve yumusak golge. Yalniz ?v=3 sayfasinda
 * (`.sc-page`); v1/v2 ayni sinif adlarini paylasmaz. Okunurluk icin dolgu yeterince opak. */
.sc-page{--sc-glass:color-mix(in srgb,var(--surface) 62%,transparent);--sc-glass-lens:color-mix(in srgb,var(--surface) 94%,#fff);--sc-glass-edge:color-mix(in srgb,var(--ink) 11%,transparent);--sc-glass-rim:rgb(255 255 255/.85);--sc-glass-shade:color-mix(in srgb,var(--ink) 16%,transparent)}
:root[data-theme=dark] .sc-page{--sc-glass:color-mix(in srgb,var(--surface) 70%,transparent);--sc-glass-lens:color-mix(in srgb,var(--surface) 92%,#fff);--sc-glass-edge:rgb(255 255 255/.09);--sc-glass-rim:rgb(255 255 255/.14);--sc-glass-shade:rgb(0 0 0/.5)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .sc-page{--sc-glass:color-mix(in srgb,var(--surface) 70%,transparent);--sc-glass-lens:color-mix(in srgb,var(--surface) 92%,#fff);--sc-glass-edge:rgb(255 255 255/.09);--sc-glass-rim:rgb(255 255 255/.14);--sc-glass-shade:rgb(0 0 0/.5)}}
.sc-menu,.sc-controls button:not(.sc-play),.sc-chapter-picker,.sc-top-actions .icon-button,.sc-versions a{border:0;background:var(--sc-glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px var(--sc-glass-edge),inset 0 1px .5px var(--sc-glass-rim),0 2px 6px -2px var(--sc-glass-shade)}
.sc-menu{border-radius:24px}
/* Secili bolumun arkasindaki mercek: uygulamadaki bolumlu secim gibi acik kapsul + ince vurgu cizgisi. */
.sc-menu-pill{border:0;border-radius:20px;background:var(--sc-glass-lens);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 1px .5px var(--sc-glass-rim),0 2px 6px -2px var(--sc-glass-shade)}
.sc-menu-head{border-radius:18px}
/* Oynat: vurgu dolgulu cam kapsul (uygulamada etkin Kaydet). */
.sc-controls .sc-play{border:0;box-shadow:inset 0 0 0 .5px rgb(0 0 0/.08),inset 0 1px .5px rgb(255 255 255/.28),0 8px 18px -10px color-mix(in srgb,var(--button) 70%,transparent)}
.sc-controls button{transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.sc-controls button:not(:disabled):active{transform:scale(.96)}
.sc-controls button:disabled{opacity:.4}
/* Etkin adim satiri: sayfada cam mercek. */
.sc-steps li[data-state=active] button{border-radius:14px;background:var(--sc-glass);box-shadow:inset 0 0 0 1px var(--sc-glass-edge),inset 0 1px .5px var(--sc-glass-rim)}
.sc-versions{gap:6px}
.sc-versions a,.sc-versions span{width:30px;height:30px}
.sc-versions span{box-shadow:inset 0 1px .5px rgb(255 255 255/.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sc-menu,.sc-controls button:not(.sc-play),.sc-chapter-picker,.sc-top-actions .icon-button,.sc-versions a{background:var(--surface)}}
@media(prefers-reduced-motion:reduce){.sc-controls button{transition:none}}

/* ---------- 2026-10-15: denetimler menunun altinda, sabit menu, acilis ---------- */
/* Ust bilgi satiri: solda bolum etiketi, sagda onceki / oynat / sonraki ve sayac. Yuksekligi sabit (44 px). */
.sc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.sc-toolbar>.sc-eyebrow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:sc-copy-in .5s cubic-bezier(.2,.8,.2,1) both}
.sc-controls-top{flex:none;gap:6px}
.sc-controls-top button:not(.sc-play){width:44px;padding:0}
.sc-controls-top .sc-play{min-width:120px}
.sc-controls-top .sc-counter{min-width:0;padding:0 2px 0 6px}
.sc-bottom{display:none}
@media(max-width:860px){
  .sc-bottom{display:flex}
  .sc-toolbar{min-height:0}
  .sc-toolbar .sc-controls{display:none}
}
/* Acilis: adacayi zemininde soluk P, rota cizgisi P'yi doldurur, ortu kalkar (yalniz ilk yukleme). */
.sc-splash{position:fixed;z-index:100;inset:0;display:grid;place-items:center;transition:opacity .55s ease,visibility 0s linear .55s;contain:layout paint}
.sc-splash[data-leaving=true]{opacity:0;visibility:hidden;pointer-events:none}
.sc-splash-composition{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4.5*var(--vh),38px);padding:24px;transform:translateY(-12px);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.sc-splash[data-leaving=true] .sc-splash-composition{transform:translateY(-20px)}
.sc-splash svg{overflow:visible;flex:none;width:clamp(70px,15*var(--vh),116px);height:auto}
.sc-splash-main,.sc-splash-branch{stroke-dasharray:1 1;stroke-dashoffset:1}
.sc-splash-main{animation:sc-splash-draw 2.05s cubic-bezier(.4,.15,.6,.85) .15s both}
.sc-splash-branch{animation:sc-splash-draw .3s ease-out 1.22s both}
.sc-splash-slogan{display:grid;gap:6px;margin:0;color:var(--splash-ink);font-size:clamp(21px,4.9*var(--vw),34px);line-height:1.35;letter-spacing:-.035em;text-align:center;font-weight:400}
.sc-splash-line{display:block;white-space:nowrap}
.sc-splash-slogan strong{font-weight:700;display:inline-block}
.sc-splash-slogan em{font:inherit;color:var(--splash-accent)}
.sc-splash-period{font-weight:400}
.sc-splash-phrase,.sc-splash-purpose,.sc-splash-route{display:inline-block;animation:sc-splash-words .8s cubic-bezier(.22,1,.36,1) both;will-change:transform,opacity}
.sc-splash-line:first-child .sc-splash-phrase{animation-delay:.32s}
.sc-splash-purpose{animation-delay:.55s}
.sc-splash-line:last-child .sc-splash-phrase{animation-delay:1s}
.sc-splash-route{animation-delay:1.23s}
.sc-splash[data-ready=false] *{animation-play-state:paused}
@keyframes sc-splash-draw{to{stroke-dashoffset:0}}
@keyframes sc-splash-words{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.sc-splash{display:none}.sc-splash *{animation:none!important;transition:none!important}}

/* Alcak dizustu ekranlar (13" MacBook Air tarayici alani ~780-830 px): once bosluklar, sonra baslik kuculur;
 * adim satirlari 44 px hedefini korur, metin kesilmez. */
/* Yukseklik esikleri medya sorgusu degil: buyuk ekran olceginde (--ui-zoom) etkin alana gore JS isaretler. */
.sc-page[data-short=true] .sc-copy{gap:clamp(10px,1.7*var(--vh),18px);margin-top:clamp(8px,5*var(--vh) - 16px,48px)}
.sc-page[data-short=true] .sc-title{font-size:min(clamp(40px,4.1*var(--vw),60px),6*var(--vh))}
.sc-page[data-short=true] .sc-body{font-size:clamp(15px,1.25*var(--vw),18px)}
.sc-page[data-short=true] .sc-steps{gap:0}

/* Bolum menusu: sahne cizgileri yerine baslik basina tek ilerleme cubugu (2026-10-15). */
.sc-menu-ticks{display:none}
.sc-menu-bar{position:relative;display:block;width:min(56%,64px);height:3px;margin:2px auto 0;border-radius:2px;background:var(--line);overflow:hidden}
.sc-menu-bar[data-state=previous]{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.sc-menu-bar[data-state=current]{background:color-mix(in srgb,var(--accent) 22%,var(--line))}
.sc-menu-bar>.sc-fill{position:absolute;inset:0}
[data-tiny=true] .sc-menu-bar{display:none}

/*
 * SEKME GECISI (2026-10-15, urun sahibi: "Bugun, Plan, Finans arasindaki gecis cok ani; guzel gecis animasyonlariyla
 * yumusatalim"): eskiden iki katman ayni anda soluyor, aradaki siyah zemin bir an gorunuyordu. Simdi giden ekran altta
 * yerinde kalir (hafifce geri cekilir), gelen ekran ustte belirir ve icerigi yumusakca yukari oturur; alt cubugun
 * mercegi onceki sekmeden kayar.
 */
.sc-layer[data-phase=enter][data-enter=fade]{animation:sc-fade-in .42s cubic-bezier(.25,.8,.3,1) .08s both}
/* Giden ekranin icerigi hizla soner (zemini kalir): iki ekranin yazilari ust uste binmez. */
.sc-layer[data-phase=exit][data-enter=fade] .ap-viewport{animation:sc-fade-out .22s ease-out both}
.sc-layer[data-phase=enter][data-enter=fade] .ap-viewport{animation:sc-tab-rise .52s cubic-bezier(.22,1,.36,1) both}
.sc-layer[data-phase=exit][data-enter=fade]{animation:sc-tab-recede .48s cubic-bezier(.4,0,.2,1) both}
@keyframes sc-tab-rise{from{transform:translateY(16px) scale(.985)}}
@keyframes sc-tab-recede{to{filter:brightness(.94)}}
.ap-tab-lens[data-slide=true]{animation:ap-lens-from .5s cubic-bezier(.3,1.15,.4,1) both}
@keyframes ap-lens-from{from{transform:translateX(calc(var(--from) * (100% - 8px)))}}
@media(prefers-reduced-motion:reduce){.sc-layer .ap-viewport,.ap-tab-lens{animation:none!important}}

/*
 * UST SATIR: App Store dugmesi + dil menusu (2026-10-15). Ikisi de diger ust dugmelerle ayni cam kapsul.
 * Dil menusu sistem acilir listesinin yerine cam dilinde kucuk bir kart.
 */
.sc-top{position:relative;z-index:40;container-type:inline-size}
.sc-store{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 15px;border-radius:22px;background:var(--sc-glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px var(--sc-glass-edge),inset 0 1px .5px var(--sc-glass-rim),0 2px 6px -2px var(--sc-glass-shade);color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;transition:transform .16s cubic-bezier(.3,0,.2,1),box-shadow .16s}
.sc-store svg{width:17px;height:17px;margin-top:-2px;fill:currentColor}
.sc-store-short{display:none}
/* Masaustunde de sol sutun daralabilir; dugme etiketi gercek baslik alanina gore kisalir. */
@container (max-width:540px){.sc-store-long{display:none}.sc-store-short{display:inline}}
@media(min-width:861px){@container (max-width:390px){.sc-top .brand-name{display:none}}}
.sc-store:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--sc-glass-edge),inset 0 1px .5px var(--sc-glass-rim),0 6px 16px -6px var(--sc-glass-shade)}
.sc-store:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sc-store,.sc-lang-button{background:var(--surface)}}
.sc-lang{position:relative}
.sc-lang-button{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;border:0;border-radius:22px;background:var(--sc-glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px var(--sc-glass-edge),inset 0 1px .5px var(--sc-glass-rim),0 2px 6px -2px var(--sc-glass-shade);color:var(--ink);font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.sc-lang-button .icon{width:14px;height:14px;transition:transform .2s cubic-bezier(.3,0,.2,1)}
.sc-lang[data-open=true] .sc-lang-button .icon{transform:rotate(180deg)}
.sc-lang-button:focus-visible,.sc-lang-menu button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sc-lang-menu{position:absolute;top:calc(100% + 8px);right:0;display:grid;gap:2px;min-width:208px;padding:6px;border-radius:18px;background:var(--sc-glass-lens);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 1px var(--sc-glass-edge),inset 0 1px .5px var(--sc-glass-rim),0 18px 40px -12px var(--sc-glass-shade),0 4px 12px -4px var(--sc-glass-shade);transform-origin:top right;animation:sc-lang-in .18s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes sc-lang-in{from{opacity:0;transform:translateY(-4px) scale(.96)}}
.sc-lang-menu button{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px 0 8px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:background .12s}
.sc-lang-menu button b{display:grid;place-items:center;height:24px;border-radius:7px;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.05em}
.sc-lang-menu button .icon{width:16px;height:16px;color:var(--accent)}
.sc-lang-menu button:hover,.sc-lang-menu button:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.sc-lang-menu button[aria-checked=true]{font-weight:600}
.sc-lang-menu button[aria-checked=true] b{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
@media(max-width:860px){.sc-lang-menu{min-width:188px}}
/* Telefonda ust satir tek satira sigar: tema dugmesi sistem temasina birakilir, en darda yalniz P isareti kalir. */
@media(max-width:480px){.sc-top{gap:10px}.sc-top-actions{gap:6px}.sc-top-actions .icon-button{display:none}.sc-store{padding:0 14px 0 12px}.sc-store-long{display:none}.sc-store-short{display:inline}.sc-lang-button{padding:0 10px;gap:4px}}
@media(max-width:360px){.sc-top .brand-name{display:none}}
@media(prefers-reduced-motion:reduce){.sc-lang-menu{animation:none}.sc-store,.sc-lang-button .icon{transition:none}}


/* Tema degisiminde toplu renk/golge gecisleri boyama kuyrugu olusturmasin.
 * Sahne, sayac ve gezinme animasyonlari durdurulmaz; yalniz bu iki karede CSS gecisi baslatilmaz. */
html[data-variant=showcase][data-theme-switching] body,
html[data-variant=showcase][data-theme-switching] .sc-page,
html[data-variant=showcase][data-theme-switching] .sc-page *,
html[data-variant=showcase][data-theme-switching] .sc-page::before,
html[data-variant=showcase][data-theme-switching] .sc-page *::before,
html[data-variant=showcase][data-theme-switching] .sc-page *::after{transition:none!important}

@media(min-width:600px) and (max-width:860px) and (max-height:500px){
  .sc-page{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto;gap:12px 20px}
  .sc-top{grid-column:1/-1;grid-row:1}.sc-stage{grid-column:2;grid-row:2/4}.sc-copy{grid-column:1;grid-row:2;margin-top:0;align-self:center}.sc-bottom{grid-column:1;grid-row:3}
  .sc-title{font-size:24px}.sc-body{font-size:13px}.sc-caption{font-size:12px}
}

/* Cihazlar ard arda gelir. Saat telefon sahnelerinde DOM'a bile girmez. */
.sc-device-layer{position:absolute;inset:0;pointer-events:none}
.sc-device-layer[data-phase=exit]{animation:sc-device-away .42s cubic-bezier(.4,0,1,1) both}
.sc-device-layer[data-phase=enter]{animation:sc-device-arrive .9s cubic-bezier(.16,1,.3,1) both}
@keyframes sc-device-away{to{opacity:0;transform:translateY(-55px) scale(.82) rotate(-7deg)}}
@keyframes sc-device-arrive{0%,18%{opacity:0;transform:translateY(85px) scale(.78) rotate(9deg)}100%{opacity:1;transform:none}}
.sc-watch{position:absolute;left:50%;top:50%;width:calc(224px * var(--watch-scale));height:calc(350px * var(--watch-scale));transform:translate(-50%,-50%)}
.sc-watch-device{position:absolute;inset:0;width:224px;height:350px;transform:scale(var(--watch-scale));transform-origin:top left;color:#fff;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.sc-watch-band{position:absolute;inset:0 43px;border-radius:26px;background:linear-gradient(90deg,#687360,#89957d 9%,#9ca88e 48%,#89957d 91%,#626e59);box-shadow:inset 0 0 0 1px #5e6a55,0 12px 28px -14px #1a231840}
.sc-watch-band::before,.sc-watch-band::after{content:'';position:absolute;left:7px;right:7px;height:47px;border-left:1px solid #b2bca244;border-right:1px solid #b2bca244}.sc-watch-band::before{top:8px}.sc-watch-band::after{bottom:8px}
.sc-watch-case{position:absolute;inset:44px 0;border-radius:53px;background:linear-gradient(135deg,#b0b1ac,#555853 25%,#252724 50%,#777b72 80%,#b9bcb3);box-shadow:inset 0 0 0 1px #cacfc282,inset 0 0 0 3px #33362f,0 18px 30px -10px #10160d40;padding:7px}
.sc-watch-crown{position:absolute;right:-7px;top:99px;width:12px;height:37px;border-radius:5px;background:repeating-linear-gradient(0deg,#555951 0 2px,#999e92 2px 3px);box-shadow:inset -2px 0 1px #32362e}.sc-watch-side{position:absolute;right:-3px;top:161px;width:5px;height:49px;border-radius:3px;background:#74796b}
.sc-watch-screen{position:relative;height:100%;border-radius:46px;background:#000;overflow:hidden;box-shadow:inset 0 0 0 1px #131711;--ww-accent:#abbfa0;--ww-secondary:#999}
.ww-status{position:absolute;z-index:2;left:19px;right:16px;top:8px;display:flex;align-items:center;justify-content:space-between;height:22px;font-size:14px;font-weight:500;background:#000}.ww-status>span{font-size:29px;color:var(--ww-accent);line-height:20px}.ww-status time{font-variant-numeric:tabular-nums}
.ww-viewport{position:absolute;top:33px;left:9px;right:9px;bottom:6px;overflow:hidden;mask-image:linear-gradient(#000 96%,transparent)}
.ww-content{font-size:16px;line-height:1.18;will-change:transform}.ww-content h2{margin:0 4px 9px;font-size:24px;font-weight:700;letter-spacing:-.5px}.ww-content p{margin:0}.ww-content small{font-size:12px;line-height:1.2;color:var(--ww-secondary)}
.ww-row{display:flex;align-items:center;gap:9px;min-height:45px;border-radius:17px;background:#242424;padding:9px 11px;margin-bottom:4px;line-height:1.18}.ww-row>svg{flex:none}.ww-row>span{min-width:0}.ww-sync{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 4px;font-size:11px;line-height:1.2;text-align:center;color:var(--ww-secondary)}.ww-sync svg{flex:none}
.ww-date{color:var(--ww-secondary);font-size:12px;padding:0 7px 7px}.ww-plan{display:grid;gap:5px;padding:10px 9px;border-radius:17px;background:#242424;margin-bottom:4px}.ww-plan>strong{font-size:16px}.ww-plan>small{font-size:12px}.ww-done{display:flex;align-items:center;gap:5px;font-size:13px}
.ww-button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:7px 8px;border-radius:22px;background:#292929;font-size:15px;line-height:1.12;text-align:center;overflow-wrap:anywhere}.ww-primary{background:var(--ww-accent);color:#12200e;font-size:16px;font-weight:600;min-height:44px}.ww-plan .ww-button{background:#3b3b3b}.ww-plan .ww-primary{background:#3e4937;color:#c4d9ba}.ww-button[data-pressed=true]{filter:brightness(1.4);transform:scale(.96)}
.ww-input{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:9px 10px;border-radius:17px;background:#242424;min-height:44px;margin-bottom:4px;color:var(--ww-secondary);font-size:14px}.ww-input b{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;background:var(--ww-accent);color:#172014;font-size:22px;font-weight:400}.ww-input b[data-pressed=true]{transform:scale(.85)}.ww-circle{width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none}.ww-row[data-pending=true]{color:var(--ww-secondary)}.ww-row[data-pending=true] .ww-circle{border:0}
.ww-stack{display:flex;flex-direction:column;gap:6px;padding:0 2px;text-align:center}.ww-stack>small{display:block}.ww-exercise{display:grid;gap:2px}.ww-exercise>strong{font-size:16px;font-weight:600}.ww-exercise>div{display:flex;justify-content:space-between;align-items:baseline;gap:4px}.ww-exercise>div>span{color:var(--ww-accent);font-size:14px}.ww-exercise>div>small{font-size:12px}.ww-exercise>p{font-size:13px;color:var(--ww-secondary)}
.ww-pair{display:flex;gap:6px}.ww-pair>*{flex:1;min-width:0}.ww-value{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border-radius:18px;background:#242424;padding:7px 2px}.ww-value strong{font-size:18px;font-weight:600;letter-spacing:-.6px;white-space:nowrap;font-variant-numeric:tabular-nums}.ww-value small{font-size:12px}.ww-editor{display:flex;align-items:center;gap:4px;min-height:48px}.ww-editor>span{display:grid;place-items:center;flex:none;width:29px;height:36px;border-radius:18px;background:#292929;font-size:22px}.ww-editor strong{flex:1;min-width:0;font-size:29px;letter-spacing:-1px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ww-rest{gap:4px}.ww-rest>small:first-child{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px}.ww-timer{font-size:46px;font-weight:600;line-height:1.06;font-variant-numeric:tabular-nums;letter-spacing:-1px}.ww-progress{height:4px;background:#333b2f;border-radius:3px;margin:4px 0;overflow:hidden}.ww-progress i{display:block;width:100%;height:100%;background:var(--ww-accent);transform-origin:left}.ww-rest>p{font-size:13px}.ww-rest .ww-button{font-size:13px}
.ww-exercise-row>div{display:grid;gap:2px;flex:1}.ww-exercise-row small{font-size:12px}.ww-exercise-row>svg{color:var(--ww-accent)}.ww-destructive{color:#ff6961}.ww-paused{gap:8px;padding-top:20px}.ww-paused>p{font-size:22px;color:var(--ww-secondary);font-variant-numeric:tabular-nums}.ww-dialog{padding-top:20px;gap:8px}.ww-dialog>p{font-size:14px;color:var(--ww-secondary)}.ww-summary>div>p{line-height:1.3;font-variant-numeric:tabular-nums}.ww-pages{position:absolute;right:3px;top:50%;display:grid;gap:4px}.ww-pages i{width:3px;height:3px;border-radius:50%;background:#454545}.ww-pages i[data-active=true]{background:#fff}
@media(prefers-reduced-motion:reduce){.sc-device-layer[data-phase]{animation:none}}

.ww-symbol{object-fit:contain;flex:none}.ww-sync .ww-symbol{opacity:.6}.ww-primary .ww-symbol{filter:brightness(0)}.ww-value strong,.ww-editor strong,.ww-timer{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,sans-serif}

.ww-content{animation:ww-page-in .32s cubic-bezier(.22,1,.36,1)}
.ww-content[data-screen=editor]{animation-name:ww-editor-in}
@keyframes ww-page-in{from{opacity:0;translate:36px 0}}
@keyframes ww-editor-in{from{opacity:0;translate:0 60px}}
@media(prefers-reduced-motion:reduce){.ww-content{animation:none}}


/* 2026-10-16: a fixed mobile copy slot keeps the larger phone independent of scene text. */
@media(max-width:860px){
  .sc-page{--mobile-copy-height:208px;grid-template-rows:44px minmax(0,1fr) var(--mobile-copy-height) 44px;gap:6px;padding:10px 16px max(10px,env(safe-area-inset-bottom))}
  .sc-copy{height:100%;margin-top:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
@media(max-width:860px) and (max-height:700px){
  .sc-page{--mobile-copy-height:190px}
  .sc-title{font-size:24px}.sc-body{font-size:13px}.sc-caption{font-size:12px}
}
@media(min-width:600px) and (max-width:860px) and (max-height:500px){
  .sc-page{grid-template-rows:44px minmax(0,1fr) 44px;gap:12px 20px}
  .sc-copy{height:100%;margin-top:0}
}