/* Home page only. Shared tokens and the Oswald faces live in style.css. Every animation is off under Reduce Motion. */
:root {
  --night: #1B1A17;
  --night-2: #26231E;
  --on-night: #F3EEE4;
  --on-night-soft: #B9B0A1;
  --surface: color-mix(in srgb, var(--paper) 78%, transparent);
  --border: color-mix(in srgb, var(--ink) 10%, transparent);
  --r-lg: 28px;
  --r-md: 20px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --leaf-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 24px 48px -12px rgb(28 26 24 / .28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --night: #0C0B09;
    --night-2: #1A1814;
    --leaf-shadow: 0 1px 0 rgb(255 255 255 / .04), 0 24px 48px -12px rgb(0 0 0 / .7);
  }
}

html { scroll-padding-top: 96px; }
body.home { overflow-x: clip; }
.home h1, .home h2, .home h3 { letter-spacing: -.01em; }

/* Reading progress */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--band); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Floating header pill */
.site-header { position: fixed; top: 10px; left: 0; right: 0; z-index: 50; padding: 0 12px; pointer-events: none; }
.header-pill {
  pointer-events: auto; max-width: 1120px; margin: 0 auto; height: 60px;
  display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--wall) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid transparent;
  transition: box-shadow .4s var(--out), border-color .4s var(--out), max-width .5s var(--out), transform .5s var(--out);
}
.site-header.scrolled .header-pill {
  max-width: 980px; border-color: var(--border); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .25);
}
.site-header.hidden .header-pill { transform: translateY(-120%); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav { display: none; gap: 2px; }
.nav a {
  position: relative; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 0 12px; border-radius: 12px; min-height: 44px; display: inline-flex; align-items: center;
  transition: background-color .25s var(--out);
}
.nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav a.current::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--band);
}
@media (min-width: 900px) { .nav { display: flex; } }

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: var(--band); color: var(--on-band); font-weight: 700; font-size: 16px; text-decoration: none;
  border: 0; cursor: pointer;
  transition: transform .35s var(--spring), box-shadow .3s var(--out);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--band) 80%, transparent);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--out);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.96); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.btn-ghost:hover svg { animation: nudge .9s var(--out) infinite; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 14px; }
.btn-large { min-height: 58px; padding: 0 30px; font-size: 17px; }
.btn-light[aria-disabled="true"] { background: var(--on-night); color: var(--night); cursor: default; box-shadow: none; }
@keyframes nudge { 50% { transform: translateY(3px); } }

/* Sections */
.section { padding: 96px 0; position: relative; }
@media (max-width: 600px) { .section { padding: 72px 0; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--band-text); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.title { font-size: clamp(38px, 6.4vw, 72px); line-height: 1.02; margin-bottom: 22px; max-width: 14em; }
.section-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); max-width: 38em; margin-bottom: 40px; }
.section-more { margin-top: 32px; font-weight: 600; }
.section-more a { color: inherit; }
.note { color: var(--ink-soft); max-width: 46em; margin: 8px 0 40px; }
.fine-print { margin-top: 24px; font-size: 14px; color: var(--ink-soft); max-width: 52em; }

.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 7px;
  background: var(--band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffdf7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.phone {
  margin: 0; border-radius: 44px; padding: 8px; background: #141310; width: min(100%, 300px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .06) inset, 0 40px 80px -30px rgb(0 0 0 / .45);
}
.phone img, .phone video { border-radius: 36px; width: 100%; height: auto; aspect-ratio: 600 / 1304; object-fit: cover; background: var(--chip); }

/* Reveal: visible without JavaScript; site.js adds .js to <html> and animates elements in. */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .9s var(--out), transform .9s var(--out), filter .9s var(--out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
.js .split[data-reveal] { opacity: 1; transform: none; filter: none; }
/* The mask must clear Turkish accents above (İ, Ğ, Ü) and descenders below (ç, ş, ğ, y): Safari draws them past a tight box. */
.split .word { display: inline-block; overflow: hidden; vertical-align: top; padding: .26em .08em .34em; margin: -.26em -.08em -.34em; }
.split .word > span {
  display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1s var(--out); transition-delay: calc(var(--w) * 60ms);
}
.split.in .word > span { transform: none; }

/* Hero */
.hero { padding: 120px 0 72px; position: relative; overflow: hidden; min-height: min(100svh, 980px); display: flex; align-items: center; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-glow span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: drift 18s ease-in-out infinite alternate;
}
.hero-glow span:nth-child(1) { width: 520px; height: 520px; background: color-mix(in srgb, var(--band) 45%, transparent); top: -160px; right: -120px; }
.hero-glow span:nth-child(2) { width: 420px; height: 420px; background: color-mix(in srgb, #E9A23B 40%, transparent); bottom: -180px; left: -140px; animation-duration: 22s; }
.hero-glow span:nth-child(3) { width: 300px; height: 300px; background: color-mix(in srgb, var(--paper) 90%, transparent); top: 30%; left: 40%; animation-duration: 26s; }
@keyframes drift { to { transform: translate3d(60px, 40px, 0) scale(1.15); } }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 56px; align-items: center; width: 100%; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: 14px; font-weight: 600; margin-bottom: 24px;
}
.pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--band); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--band); animation: ping 1.8s var(--out) infinite; }
@keyframes ping { 80%, 100% { transform: scale(2.6); opacity: 0; } }
.hero h1 { font-size: clamp(48px, 8.4vw, 96px); line-height: .98; margin-bottom: 24px; }
.hero h1 em { font-style: normal; color: var(--band); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); max-width: 32em; margin-bottom: 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--band); }

.hero-stage { position: relative; min-height: 520px; display: grid; place-items: center; }
.hero-phone { position: absolute; right: 0; top: 0; width: min(54%, 270px); transform: translate3d(0, var(--py, 0), 0) rotate(6deg); }
.hero-phone img { aspect-ratio: 600 / 1304; }
@media (max-width: 899px) { .hero-phone { display: none; } }

/* Tear-off calendar */
.tear-cal { position: relative; width: min(84vw, 320px); z-index: 2; transform: translate3d(0, var(--py, 0), 0); }
.rings { display: flex; justify-content: center; gap: 120px; height: 16px; position: relative; z-index: 5; margin-bottom: -8px; }
.rings span { width: 16px; height: 16px; border-radius: 8px; background: var(--ink-soft); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .25); }
.tear-leaves { position: relative; aspect-ratio: 4 / 4.4; cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; border-radius: 8px 8px 3px 3px; outline-offset: 6px; }
.tear-leaves:active { cursor: grabbing; }
.tear-stack {
  height: 16px; margin: 0 4px; border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(var(--paper) 0 2px, var(--stack) 2px 3px);
  box-shadow: var(--leaf-shadow);
}
.leaf {
  background: var(--paper); color: var(--ink); border-top: 12px solid var(--band); border-radius: 8px 8px 3px 3px;
  padding: 22px 24px 18px; display: flex; flex-direction: column;
}
.tear-leaves .leaf { position: absolute; inset: 0; box-shadow: var(--leaf-shadow); transform-origin: 8% 0; will-change: transform; }
.tear-leaves .leaf:not(:last-child) { box-shadow: none; }
.leaf-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--band-text); }
.leaf-lead { font-size: 18px; font-weight: 600; margin-top: 10px; }
.leaf-value { font: 700 clamp(96px, 22vw, 150px)/.92 "Oswald", "Arial Narrow", sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: auto; }
.leaf-unit { font: 600 20px/1.5 "Oswald", sans-serif; letter-spacing: .1em; }
.leaf-note { font-size: 14px; color: var(--ink-soft); margin-top: 6px; min-height: 1.6em; }
.leaf.torn { animation: tear 1.05s cubic-bezier(.55, 0, .75, .2) forwards; pointer-events: none; }
@keyframes tear {
  0% { transform: var(--from, none); }
  18% { transform: rotate(-9deg) translate(-4px, 6px); }
  100% { transform: rotate(-38deg) translate(-60px, 130%); opacity: 0; }
}
.leaf.enter .leaf-value { animation: pop .6s var(--spring); }
@keyframes pop { from { transform: scale(.85); opacity: .2; } }
.tear-hint {
  position: relative; z-index: 2; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px; background: var(--surface);
}
.tear-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.4s var(--out) infinite; }
.hero-stage { grid-template-rows: auto auto; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .hero-stage { min-height: 620px; }
  .tear-cal { margin-right: 120px; }
  .tear-hint { margin-right: 120px; }
}

/* Marquee */
.marquee { overflow: hidden; padding: 22px 0; border-block: 1px solid var(--border); background: var(--paper); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span {
  font: 600 clamp(22px, 3vw, 34px)/1 "Oswald", sans-serif; letter-spacing: .02em; text-transform: uppercase;
  padding: 0 28px; display: inline-flex; align-items: center; gap: 56px; white-space: nowrap;
}
.marquee span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--band); margin-left: 28px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Units */
.units-grid { display: grid; gap: 56px; align-items: center; }
.unit-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.unit-tabs button, .style-switch button {
  font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color .3s var(--out), color .3s var(--out), transform .3s var(--spring);
}
.unit-tabs button:hover { transform: translateY(-2px); }
.unit-tabs button[aria-selected="true"] { background: var(--ink); color: var(--wall); box-shadow: none; }
.unit-leaf-wrap { width: min(100%, 420px); justify-self: center; }
.big-leaf { min-height: 360px; box-shadow: var(--leaf-shadow); }
.big-leaf .leaf-value { font-size: clamp(80px, 16vw, 140px); }
.leaf-stack {
  height: 14px; margin: 0 4px; border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(var(--paper) 0 2px, var(--stack) 2px 3px);
}
.odometer { display: flex; align-items: flex-end; white-space: nowrap; }
.odometer .digit { display: inline-block; height: .92em; overflow: hidden; position: relative; }
.odometer .digit > span { display: flex; flex-direction: column; transition: transform 1.1s var(--out); }
.odometer .digit > span > span { height: .92em; line-height: .92; }
.odometer .sep { display: inline-block; }
.odometer .small { font-size: .38em; line-height: 1; padding: 0 .18em .2em; letter-spacing: 0; }
@media (min-width: 900px) { .units-grid { grid-template-columns: 1fr 1fr; } }

/* Story */
.story-section { background: var(--night); color: var(--on-night); border-radius: 40px; margin: 0 8px; }
.story-section .eyebrow { color: color-mix(in srgb, var(--band) 60%, #fff); }
.story-section .section-lead { color: var(--on-night-soft); }
.story { display: grid; gap: 24px; }
.story-media { display: grid; justify-items: center; gap: 18px; }
.story-phone { position: relative; width: min(64vw, 300px); aspect-ratio: 300 / 633; background: #000; }
.story-phone video {
  position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 36px; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .6s var(--out), transform .8s var(--out);
}
.story-phone video.active, html:not(.js) .story-phone video:first-child { opacity: 1; transform: none; }
.story-phone::before {
  content: ""; position: absolute; z-index: 2; top: 18px; left: 50%; width: 30%; height: 26px; margin-left: -15%;
  background: #000; border-radius: 20px;
}
.play-toggle {
  position: absolute; z-index: 3; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 22px;
  border: 0; background: rgb(20 19 16 / .7); color: #fffdf7; cursor: pointer; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.play-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.story-dots { display: flex; gap: 8px; }
.story-dots span { width: 8px; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .25); transition: width .5s var(--out), background-color .5s var(--out); }
.story-dots span.on { width: 28px; background: var(--band); }
.story-steps { list-style: none; margin: 0; padding: 4px 16px 12px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; }
.story-steps::-webkit-scrollbar { display: none; }
.story-step {
  flex: 0 0 82%; scroll-snap-align: center; padding: 24px; border-radius: var(--r-md);
  background: var(--night-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06);
  transition: opacity .5s var(--out), transform .5s var(--out);
}
.story-step h3 { font-size: clamp(26px, 3.4vw, 44px); margin: 6px 0 10px; }
.story-step p { color: var(--on-night-soft); font-size: 17px; }
.step-num { font: 700 15px/1 "Oswald", sans-serif; letter-spacing: .1em; color: color-mix(in srgb, var(--band) 40%, #fff); }
@media (min-width: 900px) {
  .story-section { margin: 0 16px; }
  .story { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .story-media { position: sticky; top: calc(50vh - 340px); order: 2; padding-top: 20px; }
  .story-steps { display: block; overflow: visible; padding: 0; margin: 0; }
  .story-step {
    min-height: 72vh; display: flex; flex-direction: column; justify-content: center;
    background: none; box-shadow: none; padding: 0; opacity: .72; transform: translateX(-12px);
  }
  .story-step.active { opacity: 1; transform: none; }
  .story-step p { font-size: 20px; max-width: 24em; }
}

/* Bento */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
.tile {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 28px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--border);
  transition: transform .5s var(--out), box-shadow .5s var(--out);
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s var(--out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--band) 14%, transparent), transparent 60%);
}
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 10px; }
.tile p { color: var(--ink-soft); }
.tile-foot { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.tile-dark { background: var(--night); color: var(--on-night); }
.tile-dark p { color: var(--on-night-soft); }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile-wide { grid-column: span 2; } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .tile { grid-column: span 2; }
  .tile-wide { grid-column: span 4; }
}

.tile-calendar { display: grid; gap: 24px; }
@media (min-width: 1040px) { .tile-calendar { grid-template-columns: 1fr 1fr; align-items: center; } }
.chip-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-cloud li {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--border);
  opacity: 0; transform: translateY(14px) scale(.9);
  transition: opacity .6s var(--out), transform .6s var(--spring); transition-delay: calc(var(--i) * 55ms + 200ms);
}
.chip-cloud li.waiting { background: none; box-shadow: inset 0 0 0 1.5px var(--band); color: var(--band-text); }
.chip-cloud li.waiting::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--band); margin-right: 8px; vertical-align: 1px; animation: blink 1.4s steps(2) infinite; }
.in .chip-cloud li, html:not(.js) .chip-cloud li { opacity: 1; transform: none; }
@keyframes blink { 50% { opacity: .2; } }

.bridge { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin-top: 22px; }
.bridge span {
  aspect-ratio: 1 / 1.25; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--chip); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--border);
  animation: cell 4.5s var(--out) infinite; animation-delay: calc(var(--i) * 120ms);
}
.bridge .we { --c: var(--stack); --ct: var(--ink); }
.bridge .lv { --c: #E9A23B; --ct: #1B1A17; }
.bridge .hf { --c: color-mix(in srgb, var(--band) 30%, var(--paper)); --ct: var(--ink); }
.bridge .bd { --c: var(--band); --ct: var(--on-band); }
@keyframes cell {
  0%, 8% { background: var(--chip); color: var(--ink-soft); transform: none; }
  18%, 80% { background: var(--c); color: var(--ct); transform: translateY(-3px); }
  100% { background: var(--chip); color: var(--ink-soft); transform: none; }
}

.island {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px;
  background: #000; color: #fff; margin-bottom: 22px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1);
  animation: island 5s var(--out) infinite;
}
.island-dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--band) var(--a, 70%), rgb(255 255 255 / .15) 0); }
.island-time { font: 700 18px/1 "Oswald", sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
@keyframes island { 0%, 100% { padding-right: 16px; } 50% { padding-right: 34px; } }

.bell { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--chip); margin-bottom: 20px; }
.bell svg { width: 32px; height: 32px; fill: none; stroke: var(--band); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; animation: ring 3s ease-in-out infinite; }
@keyframes ring { 0%, 60%, 100% { transform: none; } 64% { transform: rotate(16deg); } 68% { transform: rotate(-14deg); } 72% { transform: rotate(10deg); } 76% { transform: rotate(-6deg); } 80% { transform: rotate(2deg); } }

.share-card {
  position: relative; height: 150px; aspect-ratio: 9 / 16; margin-bottom: 44px; border-radius: 12px;
  background: var(--wall); box-shadow: inset 0 0 0 1px var(--border), 0 14px 24px -14px rgb(0 0 0 / .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: aspect-ratio .8s var(--spring);
}
.share-card[data-r="post"] { aspect-ratio: 4 / 5; }
.share-band { position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--band); border-radius: 12px 12px 0 0; }
.share-card b { font: 700 46px/1 "Oswald", sans-serif; }
.share-card i { font: 600 11px/1 "Oswald", sans-serif; letter-spacing: .14em; font-style: normal; }
.share-card em { position: absolute; bottom: -26px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-soft); }

.watch {
  position: relative; width: 120px; height: 140px; border-radius: 36px; background: #000; margin-bottom: 20px;
  display: grid; place-items: center; box-shadow: 0 0 0 4px #2B2925, 0 20px 30px -16px rgb(0 0 0 / .5);
}
.watch svg { position: absolute; width: 96px; height: 96px; transform: rotate(-90deg); }
.watch .track, .w-ring .track { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 8; }
.watch .arc, .w-ring .arc {
  fill: none; stroke: var(--band); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2s var(--out);
}
.in .watch .arc, .in .w-ring .arc { stroke-dashoffset: calc(100 - var(--progress, 0)); }
.watch span { color: #fff; font: 700 30px/1 "Oswald", sans-serif; }

.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 28px; }
.mini-list li { color: var(--ink-soft); padding-left: 18px; position: relative; }
.mini-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--band); }
.mini-list b { color: var(--ink); }
@media (min-width: 700px) { .mini-list { grid-template-columns: 1fr 1fr; } }

/* Themes */
.themes-grid { display: grid; gap: 56px; align-items: center; }
.theme-stage { --tw: #ECE6DA; --tp: #FFFDF7; --ti: #1B1A17; --tb: #C8201A; }
.theme-wall {
  position: relative; border-radius: 36px; padding: 56px clamp(24px, 7vw, 72px) 64px; background: var(--tw);
  transition: background-color .8s var(--out); box-shadow: inset 0 0 0 1px var(--border);
}
.theme-rings { display: flex; justify-content: center; gap: 110px; height: 16px; position: relative; z-index: 2; margin-bottom: -8px; }
.theme-rings span { width: 16px; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--ti) 70%, transparent); transition: background-color .8s var(--out); }
.theme-leaf {
  background: var(--tp); color: var(--ti); border-top-color: var(--tb); min-height: 320px; box-shadow: var(--leaf-shadow);
  transition: background-color .8s var(--out), color .8s var(--out), border-color .8s var(--out);
}
.theme-leaf .leaf-eyebrow { color: var(--tb); transition: color .8s var(--out); }
.theme-wall .leaf-stack { background: repeating-linear-gradient(var(--tp) 0 2px, color-mix(in srgb, var(--ti) 25%, var(--tp)) 2px 3px); }
.theme-name {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font: 600 14px/1 "Oswald", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ti);
  opacity: .7; transition: color .8s var(--out);
}
.theme-leaf.flip { animation: flip .8s var(--out); }
@keyframes flip { 0% { transform: rotateX(0); } 40% { transform: perspective(800px) rotateX(-14deg) translateY(-6px); } 100% { transform: none; } }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches button {
  font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px 0 8px; border-radius: 999px; border: 0; cursor: pointer; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  transition: transform .3s var(--spring), box-shadow .3s var(--out);
}
.swatches button span {
  width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--p) 50%, var(--w) 50%);
  box-shadow: inset 0 0 0 3px var(--b);
}
.swatches button:hover { transform: translateY(-2px); }
.swatches button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.theme-stage { order: 2; }
@media (min-width: 900px) { .themes-grid { grid-template-columns: 1fr 1fr; } .theme-stage { order: 0; } }

/* Widgets */
.style-switch {
  position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 40px;
}
.style-switch button { position: relative; z-index: 1; background: none; box-shadow: none; min-width: 96px; }
.style-switch button[aria-checked="true"] { color: var(--wall); }
.style-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px;
  background: var(--ink); transform: translateX(calc(var(--s, 0) * 100%)); transition: transform .5s var(--spring);
}
.widget-rail { overflow-x: auto; scrollbar-width: none; padding: 20px 0 48px; scroll-snap-type: x mandatory; }
.widget-rail::-webkit-scrollbar { display: none; }
.widget-track { display: flex; gap: 20px; width: max-content; padding: 0 max(16px, calc((100vw - 1120px) / 2 + 16px)); transform: translate3d(var(--x, 0), 0, 0); }
.w {
  --wb: var(--paper); --wi: var(--ink); --ws: var(--ink-soft); --wa: var(--band); --we: var(--band-text); --wt: var(--on-band); --wd: var(--stack);
  scroll-snap-align: center; flex: none; height: 170px; border-radius: 26px; padding: 16px 18px; background: var(--wb); color: var(--wi);
  box-shadow: inset 0 0 0 1px var(--border), 0 30px 50px -28px rgb(0 0 0 / .4);
  display: flex; flex-direction: column;
  transition: background-color .6s var(--out), color .6s var(--out);
}
.widget-rail[data-style="filled"] .w { --wb: var(--band); --wi: var(--on-band); --ws: color-mix(in srgb, var(--on-band) 80%, transparent); --wa: var(--on-band); --we: var(--on-band); --wt: var(--band); --wd: color-mix(in srgb, var(--on-band) 30%, transparent); }
.widget-rail[data-style="night"] .w { --wb: #15130F; --wi: #F1ECE3; --ws: #B3AB9E; --wa: #E5483F; --we: #F07A72; --wt: #15130F; --wd: #3A352E; }
.w-s { width: 170px; }
.w-m { width: 360px; }
.w-l { width: 360px; height: 380px; }
.w-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--we); }
.w-big { font: 700 64px/1 "Oswald", sans-serif; margin-top: auto; letter-spacing: -.01em; }
.w-small { font-size: 13px; font-weight: 600; color: var(--ws); }
.w-leaf { border-top: 10px solid var(--wa); }
.dots { display: grid; grid-template-columns: repeat(37, 5px); gap: 3px; margin: 12px 0 auto; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: var(--wd); transition: background-color .4s var(--out), transform .4s var(--spring); }
.dots i.on { background: var(--wi); }
.dots i.today { background: var(--wa); transform: scale(1.5); }
.w-ring { align-items: center; justify-content: center; position: relative; text-align: center; }
.w-ring svg { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); transform: rotate(-90deg); }
.w-ring .track { stroke: var(--wd); stroke-width: 7; }
.w-ring .arc { stroke: var(--wa); stroke-width: 7; }
.w-ring .w-big { font-size: 44px; }
.w-list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.w-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--wd); font-weight: 600; font-size: 15px; }
.w-list li:last-child { border-bottom: 0; }
.w-list li::before { content: ""; width: 4px; align-self: stretch; border-radius: 2px; background: var(--c, var(--wa)); }
.w-list li b { margin-left: auto; font: 700 24px/1 "Oswald", sans-serif; }
.w-list li small { font-size: 12px; color: var(--ws); font-weight: 600; }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; }
.month i { font-style: normal; font-size: 10px; font-weight: 600; text-align: center; line-height: 17px; border-radius: 5px; color: var(--ws); }
.month i.past { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.month i.today { background: var(--wa); color: var(--wt); opacity: 1; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .widget-rail.linked { overflow: visible; scroll-snap-type: none; }
}

.facts { margin: 0 0 8px; display: grid; gap: 16px; }
.facts div { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--border); }
.facts dt { font: 700 64px/1 "Oswald", sans-serif; color: var(--band); }
.facts dd { margin: 0; color: var(--ink-soft); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 32px; } .facts div { grid-template-columns: 1fr; } }
.shots { display: grid; gap: 24px; align-items: start; }
.shot { margin: 0; }
.shot > img { border-radius: 28px; width: 100%; height: auto; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .45); }
.shot .phone { margin: 0 auto; }
.shot figcaption { margin-top: 14px; text-align: center; font-size: 15px; color: var(--ink-soft); }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(3, 1fr); } }

.widgets, .gallery { overflow-x: clip; }

/* Gallery */
.gallery-rail { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 12px 0 24px; }
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-track { display: flex; gap: 28px; width: max-content; padding: 0 max(16px, calc((100vw - 1120px) / 2 + 16px)); transform: translate3d(var(--x, 0), 0, 0); }
.gallery-track figure { margin: 0; scroll-snap-align: center; text-align: center; }
.gallery-track .phone { width: min(62vw, 260px); }
.gallery-track figure:nth-child(even) { transform: translateY(40px); }
.gallery-track figcaption { margin-top: 16px; font-weight: 600; color: var(--ink-soft); }
.gallery { padding-bottom: 136px; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .gallery-rail.linked { overflow: visible; scroll-snap-type: none; }
}

/* Pricing */
.plans { display: grid; gap: 20px; margin-bottom: 24px; }
.plan { position: relative; border-radius: var(--r-lg); padding: 32px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); }
.plan h3 { font-size: 28px; }
/* Side by side, the plan without a badge drops its title to the same line as the badged one. */
@media (min-width: 900px) { .plan:not(:has(.plan-badge)) h3 { margin-top: 40px; } }
.plan-price { font: 700 clamp(48px, 6vw, 64px)/1.05 "Oswald", sans-serif; margin-top: 10px; font-variant-numeric: tabular-nums; }
.plan-note { color: var(--ink-soft); font-size: 15px; }
/* Sits above the title, not on it: an absolute badge covered "Destek" on narrow phones. */
.plan-badge {
  display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: var(--band); color: var(--on-band);
}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.plan-destek { box-shadow: none; }
.plan-destek::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--angle), var(--band), #E9A23B, var(--band) 40%, transparent 60%, var(--band));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { --angle: 360deg; } }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }

.compare-box { border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); }
.compare-box summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 24px; min-height: 64px; font: 700 20px/1.2 "Oswald", sans-serif;
}
.compare-box summary::-webkit-details-marker { display: none; }
.compare-box summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--out); }
.compare-box[open] summary svg { transform: rotate(180deg); }
.table-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
.compare th, .compare td { padding: 14px 24px; text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
.compare thead th { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.compare tbody th { font-weight: 600; }
.compare td.yes { font-weight: 600; }
.compare td.yes::before { content: "✓ "; color: var(--band); }
.compare td.no { color: var(--ink-soft); }
.compare-box[open] tbody tr { animation: row .5s var(--out) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes row { from { opacity: 0; transform: translateY(8px); } }

/* Privacy */
.privacy { background: var(--night); color: var(--on-night); border-radius: 40px; margin: 0 8px; }
.privacy .eyebrow { color: color-mix(in srgb, var(--band) 60%, #fff); }
.privacy a { color: var(--on-night); }
.privacy-head { display: grid; gap: 24px; align-items: end; margin-bottom: 40px; }
.zero { display: flex; align-items: baseline; gap: 14px; }
.zero-num { font: 700 clamp(120px, 20vw, 220px)/.85 "Oswald", sans-serif; color: var(--band); font-variant-numeric: tabular-nums; }
.zero-label { font: 600 18px/1.2 "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-soft); max-width: 6em; }
.cards { display: grid; gap: 16px; }
.card { border-radius: var(--r-md); padding: 28px; background: var(--night-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); transition: transform .5s var(--out); }
.card:hover { transform: translateY(-4px); }
.card svg { width: 36px; height: 36px; fill: none; stroke: color-mix(in srgb, var(--band) 70%, #fff); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.card h3 { font-size: 24px; margin-bottom: 8px; }
.card p { color: var(--on-night-soft); }
.card.in svg path, .card.in svg rect, .card.in svg circle { stroke-dasharray: 80; animation: draw 1.6s var(--out) both; }
@keyframes draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } .privacy-head { grid-template-columns: 1fr auto; } }
@media (min-width: 900px) { .privacy { margin: 0 16px; } }

/* Requirements */
.specs { margin: 0; display: grid; gap: 12px; }
.specs div { padding: 22px 24px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); }
.specs dt { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.specs dd { margin: 0; font: 600 20px/1.3 "Oswald", sans-serif; }
@media (min-width: 700px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .specs { grid-template-columns: repeat(4, 1fr); } }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; font-weight: 600; font-size: 17px; position: relative; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--ink); transition: transform .4s var(--out);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq-body { overflow: hidden; }
.faq-body p { padding: 0 24px 22px; color: var(--ink-soft); }

/* Download */
.download { position: relative; overflow: hidden; margin: 0 8px 8px; border-radius: 40px; padding: 120px 0; color: #FFFDF7;
  background: radial-gradient(120% 120% at 50% 0%, #D9342C 0%, #A31A15 55%, #5E0E0B 100%); }
.falling { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.download-inner { position: relative; display: grid; justify-items: center; text-align: center; gap: 16px; }
.download-inner img { border-radius: 22px; box-shadow: 0 20px 40px -10px rgb(0 0 0 / .5); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-3deg); } }
.download-count { font: 600 16px/1 "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
/* Falling leaves pass behind the text; a soft shadow keeps the light text readable over them. */
.download-inner > :not(img):not(.btn) { text-shadow: 0 1px 14px rgb(60 0 0 / .45); }
.download h2 { font-size: clamp(36px, 6vw, 64px); }
.download p { color: rgb(255 253 247 / .85); }
.download .btn-light[aria-disabled="true"] { background: #FFFDF7; color: #A31A15; }
@media (min-width: 900px) { .download { margin: 0 16px 16px; } }

/* Footer */
.site-footer { padding: 40px 0 56px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-soft); }
.footer-links a { color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 24px; }

/* Reduce Motion: everything is shown in its final state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .split .word > span, .chip-cloud li { transform: none; opacity: 1; }
  .tile { transform: none; }
  .bridge span { background: var(--c); color: var(--ct); }
}