/* LungType site · Pano layout, visual language A ("tile and dot", tasarim/gorsel-dil, w04)
   Black and white. The one accent the visitor picks belongs to the voice dot only: drawings, the
   recording dot, "you" in meetings. Tiles: 22 px corners, no shadow, no border.
   Motion: springs from tasarim/pano/SPEC.md §1.4. Without JS, and with reduced motion, every
   scene shows its last frame. html.hareket (set by js/boot.js) means motion is allowed. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-VF.ttf") format("truetype");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/FunnelSans-VF.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap;
}

/* ---------- Tokens (tasarim/pano/SPEC.md §1.1) ---------- */
@property --vurgu { syntax: "<color>"; inherits: true; initial-value: #2B45FF; }
@property --vurgu-ustu { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }
@property --vurgu-ustu-ikincil { syntax: "<color>"; inherits: true; initial-value: #E0E4FF; }
@property --vurgu-ters { syntax: "<color>"; inherits: true; initial-value: #111111; }

:root {
  color-scheme: light;
  --zemin: #EDEDED;
  --yuzey: #FFFFFF;
  --kart: #F3F3F3;
  --kart-ustu: #EAEAEA;
  --ayrac: #E6E6E6;
  --murekkep: #111111;
  --ikincil: #4D4D4D;
  --ucuncul: #666666;
  --ters: #111111;
  --ters-ustu: #FFFFFF;
  --ters-ustu-ikincil: #B3B3B3;
  --tus-golge: #D1D1D1;
  --isik: #D4D4D4;
  --cubuk: #111111;

  --vurgu: #2B45FF;
  --vurgu-ustu: #FFFFFF;
  --vurgu-ustu-ikincil: #E0E4FF;
  --vurgu-ters: #111111;

  --kose: 22px;
  --kose-ic: 14px;
  --bosluk: 12px;
  --kenar: 16px;
  --en: 1240px;
  --ust-h: 64px;

  /* Type rhythm (w03): display line-height 1.0-1.05, medium headings 1.1-1.15, body 1.5, small labels 1.35.
     Display tracking never tighter than -0.02em. Heading -> text gap is 16 px (12 px on phones); other gaps sit on the 8 pt grid. */
  --lh-dis: 1.04;
  --lh-orta: 1.15;
  --lh-kucuk: 1.35;
  --ls-dis: -0.02em;
  --bas-alt: 16px;

  --f-bric: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-funnel: "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Springs (Pano Hareket token'ları, response / damping) as easings. Fallback cubic-bezier first. */
  --e-basma: cubic-bezier(.3, .7, .3, 1);      --d-basma: .19s;   /* 0,18 / 0,90 */
  --e-birak: cubic-bezier(.25, 1.4, .4, 1);    --d-birak: .58s;   /* 0,36 / 0,58 */
  --e-giris: cubic-bezier(.2, .9, .25, 1.03);  --d-giris: .6s;    /* 0,46 / 0,78 */
  --e-hap: cubic-bezier(.2, .9, .25, 1.05);    --d-hap: .46s;     /* 0,36 / 0,74 */
  --e-sayi: cubic-bezier(.25, .8, .3, 1);      --d-sayi: .48s;    /* 0,50 / 0,90 */

  transition: --vurgu .6s ease, --vurgu-ustu .6s ease, --vurgu-ustu-ikincil .6s ease, --vurgu-ters .6s ease;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --e-basma: linear(0, 0.024, 0.085, 0.166, 0.256, 0.349, 0.44, 0.524, 0.601, 0.669, 0.729, 0.78, 0.824, 0.86, 0.89, 0.915, 0.935, 0.951, 0.963, 0.973, 0.981, 0.987, 0.991, 0.995, 0.997, 0.999, 1, 1.001, 1);
    --e-birak: linear(0, 0.056, 0.193, 0.368, 0.55, 0.717, 0.857, 0.964, 1.038, 1.083, 1.103, 1.106, 1.097, 1.08, 1.061, 1.042, 1.025, 1.011, 1.001, 0.994, 0.99, 0.989, 0.989, 0.99, 0.992, 0.994, 0.996, 0.998, 1);
    --e-giris: linear(0, 0.037, 0.126, 0.242, 0.367, 0.49, 0.602, 0.701, 0.783, 0.851, 0.903, 0.944, 0.973, 0.993, 1.006, 1.014, 1.019, 1.02, 1.019, 1.018, 1.015, 1.013, 1.011, 1.008, 1.006, 1.005, 1.003, 1.002, 1);
    --e-hap: linear(0, 0.036, 0.123, 0.239, 0.365, 0.49, 0.605, 0.707, 0.793, 0.864, 0.918, 0.96, 0.99, 1.01, 1.022, 1.029, 1.031, 1.031, 1.029, 1.025, 1.021, 1.017, 1.013, 1.01, 1.007, 1.005, 1.003, 1.002, 1);
    --e-sayi: linear(0, 0.02, 0.072, 0.142, 0.223, 0.307, 0.391, 0.472, 0.546, 0.614, 0.675, 0.729, 0.776, 0.816, 0.851, 0.88, 0.904, 0.925, 0.941, 0.955, 0.966, 0.974, 0.981, 0.987, 0.991, 0.994, 0.996, 0.998, 1);
  }
}
/* A view transition draws the new color; the variable transition would race it. */
:root.renk-vt { transition: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --zemin: #0E0E0F; --yuzey: #1C1C1E; --kart: #262629; --kart-ustu: #2F2F33; --ayrac: #2E2E31;
    --murekkep: #F2F2F2; --ikincil: #B5B5B5; --ucuncul: #9A9A9A;
    --ters: #F2F2F2; --ters-ustu: #111111; --ters-ustu-ikincil: #4D4D4D;
    --tus-golge: #000000; --isik: #3A3A3E; --cubuk: #000000;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --zemin: #0E0E0F; --yuzey: #1C1C1E; --kart: #262629; --kart-ustu: #2F2F33; --ayrac: #2E2E31;
  --murekkep: #F2F2F2; --ikincil: #B5B5B5; --ucuncul: #9A9A9A;
  --ters: #F2F2F2; --ters-ustu: #111111; --ters-ustu-ikincil: #4D4D4D;
  --tus-golge: #000000; --isik: #3A3A3E; --cubuk: #000000;
}

/* Eight preset accents (YAYIN-KARARLARI §1). Text on the fill is whichever of white / ink passes 4.5:1. */
:root[data-accent="kobalt"]    { --vurgu: #2B45FF; --vurgu-ustu: #FFFFFF; --vurgu-ustu-ikincil: #E0E4FF; --vurgu-ters: #111111; }
:root[data-accent="murekkep"]  { --vurgu: #111111; --vurgu-ustu: #FFFFFF; --vurgu-ustu-ikincil: #C8C8C8; --vurgu-ters: #111111; }
:root[data-accent="cimen"]     { --vurgu: #1F9D55; --vurgu-ustu: #111111; --vurgu-ustu-ikincil: #111111; --vurgu-ters: #FFFFFF; }
:root[data-accent="mandalina"] { --vurgu: #FF6B1A; --vurgu-ustu: #111111; --vurgu-ustu-ikincil: #3A1503; --vurgu-ters: #FFFFFF; }
:root[data-accent="gul"]       { --vurgu: #E5397A; --vurgu-ustu: #111111; --vurgu-ustu-ikincil: #111111; --vurgu-ters: #FFFFFF; }
:root[data-accent="mor"]       { --vurgu: #7B4DFF; --vurgu-ustu: #FFFFFF; --vurgu-ustu-ikincil: #FFFFFF; --vurgu-ters: #111111; }
:root[data-accent="turkuaz"]   { --vurgu: #0FA3B1; --vurgu-ustu: #111111; --vurgu-ustu-ikincil: #032B2F; --vurgu-ters: #FFFFFF; }
:root[data-accent="hardal"]    { --vurgu: #D9A400; --vurgu-ustu: #111111; --vurgu-ustu-ikincil: #2E2300; --vurgu-ters: #FFFFFF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="kobalt"] { --vurgu: #3D57FF; --vurgu-ustu-ikincil: #FFFFFF; }
  :root:not([data-theme="light"])[data-accent="murekkep"] { --vurgu: #F2F2F2; --vurgu-ustu: #111111; --vurgu-ustu-ikincil: #3A3A3A; --vurgu-ters: #FFFFFF; }
}
:root[data-theme="dark"][data-accent="kobalt"] { --vurgu: #3D57FF; --vurgu-ustu-ikincil: #FFFFFF; }
:root[data-theme="dark"][data-accent="murekkep"] { --vurgu: #F2F2F2; --vurgu-ustu: #111111; --vurgu-ustu-ikincil: #3A3A3A; --vurgu-ters: #FFFFFF; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-h) + 12px); }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--f-funnel);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-bric); font-weight: 800; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--murekkep) 18%, transparent); }

:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 3px; border-radius: 8px; }
.karo.vurgu :focus-visible { outline-color: var(--vurgu-ustu); }
.karo.ters :focus-visible { outline-color: var(--ters-ustu); }

.atla {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--murekkep); color: var(--zemin);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none;
}
.atla:focus { top: 12px; }

.gorunmez {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kap { max-width: var(--en); margin: 0 auto; padding: 0 var(--kenar); }
@media (min-width: 720px) { :root { --kenar: 24px; } }

/* ---------- Type ---------- */
.dar { font-family: var(--f-bric); font-stretch: 75%; font-weight: 800; font-variant-numeric: tabular-nums; }
.etiket { font-family: var(--f-funnel); font-size: 13px; line-height: var(--lh-kucuk); font-weight: 500; color: var(--ucuncul); }
.karo.vurgu .etiket { color: var(--vurgu-ustu-ikincil); }
.karo.ters .etiket { color: var(--ters-ustu-ikincil); }
.ikincil { color: var(--ikincil); }
.karo.vurgu .ikincil { color: var(--vurgu-ustu-ikincil); }
.karo.ters .ikincil { color: var(--ters-ustu-ikincil); }

.bolum-baslik {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: var(--lh-dis);
  letter-spacing: var(--ls-dis);
  font-stretch: 88%;
  text-wrap: balance;
}
.bolum-alt { color: var(--ikincil); max-width: 34em; margin-top: 16px; font-size: 18px; line-height: 1.5; }
.bolum-not { color: var(--ucuncul); max-width: 40em; margin-top: 16px; font-size: 15px; }
.karo-baslik { font-size: 22px; line-height: var(--lh-orta); letter-spacing: -0.02em; font-weight: 700; }
.dipnot { font-size: 13.5px; line-height: 1.5; color: var(--ucuncul); }

/* ---------- Header (sticky, solid) ---------- */
.ust-serit { position: sticky; top: 0; z-index: 30; background: var(--zemin); transition: box-shadow .2s; }
.ust-serit.kaydi { box-shadow: 0 1px 0 var(--ayrac); }
.ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--ust-h); }
.logo { display: inline-flex; align-items: center; color: var(--murekkep); text-decoration: none; border-radius: 8px; }
.logo svg { height: 24px; width: auto; display: block; }
.ust-nav { display: none; align-items: center; gap: 4px; }
.ust-nav a {
  text-decoration: none; color: var(--ikincil); font-weight: 500; font-size: 15px;
  height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 19px;
  transition: background-color .2s, color .2s;
}
.ust-nav a:hover { background: var(--yuzey); color: var(--murekkep); }
.ust-nav a[aria-current="page"] { background: var(--yuzey); color: var(--murekkep); font-weight: 600; }
.ust-sag { display: flex; align-items: center; gap: 8px; }
.dil-link {
  text-decoration: none; font-weight: 600; font-size: 14px; height: 36px; min-width: 36px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 10px;
  border-radius: 18px; color: var(--ikincil);
}
.dil-link:hover { color: var(--murekkep); background: var(--yuzey); }
.ikon-dugme {
  width: 36px; height: 36px; border-radius: 18px; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ikincil);
}
.ikon-dugme:hover { background: var(--yuzey); color: var(--murekkep); }
.ikon-dugme svg { width: 18px; height: 18px; }
.tema-ay { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-gunes { display: none; }
  :root:not([data-theme="light"]) .tema-ay { display: block; }
}
:root[data-theme="dark"] .tema-gunes { display: none; }
:root[data-theme="dark"] .tema-ay { display: block; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: 44px; z-index: 40;
  background: var(--yuzey); border-radius: 18px; padding: 8px; min-width: 200px;
  display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--ayrac);
}
.menu-panel a { text-decoration: none; padding: 10px 14px; border-radius: 12px; font-weight: 500; }
.menu-panel a:hover { background: var(--kart); }
.menu-panel a[aria-current="page"] { font-weight: 700; background: var(--kart); }
.ust-indir {
  display: none; align-items: center; height: 38px; padding: 0 14px; border-radius: 19px;
  font-weight: 600; font-size: 15px; color: var(--murekkep); text-decoration: none; transition: background-color .2s;
}
.ust-indir:hover, .ust-indir[aria-current="page"] { background: var(--yuzey); }
@media (min-width: 900px) {
  .ust-nav { display: flex; }
  .menu { display: none; }
  .ust .ust-indir { display: inline-flex; }
}

.dil-onerisi { background: var(--murekkep); color: var(--zemin); }
.dil-onerisi[hidden] { display: none; }
.dil-onerisi .kap { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.dil-onerisi a { color: inherit; font-weight: 600; }
.dil-onerisi button { margin-left: auto; background: transparent; border: 0; color: inherit; cursor: pointer; font-weight: 600; padding: 6px 10px; border-radius: 12px; }
.dil-onerisi :focus-visible { outline-color: var(--zemin); }

/* ---------- Buttons ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 22px; border: 0;
  font-family: var(--f-funnel); font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--kart); color: var(--murekkep);
  transition: transform var(--d-birak) var(--e-birak), background-color .2s;
}
.dugme:hover { background: var(--kart-ustu); }
.dugme:active { transform: scale(.96); transition: transform var(--d-basma) var(--e-basma); }
.dugme.birincil { background: var(--murekkep); color: var(--zemin); }
.dugme.birincil:hover { background: color-mix(in srgb, var(--murekkep) 86%, var(--zemin)); }
.dugme.kucuk { height: 36px; padding: 0 16px; font-size: 14px; }
.dugme svg { width: 16px; height: 16px; flex: none; }
.karo.vurgu .dugme { background: var(--vurgu-ustu); color: var(--vurgu-ters); }
.karo.ters .dugme { background: var(--ters-ustu); color: var(--ters); }
.dugme[aria-disabled="true"] { cursor: not-allowed; opacity: .72; }
.dugme[aria-disabled="true"]:active { transform: none; }
.metin-dugme { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; text-decoration: none; height: 44px; padding: 0 4px; }
.metin-dugme svg { width: 16px; height: 16px; }

.segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: 22px; background: var(--yuzey); }
.segment button {
  height: 36px; padding: 0 15px; border-radius: 18px; border: 0; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--ikincil); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .25s, color .25s;
}
.segment button:hover { color: var(--murekkep); }
.segment button[aria-pressed="true"] { background: var(--murekkep); color: var(--zemin); }
.segment .rozet { height: 20px; font-size: 11.5px; padding: 0 8px; background: var(--kart); color: var(--murekkep); }
.segment button[aria-pressed="true"] .rozet { background: color-mix(in srgb, var(--zemin) 22%, transparent); color: var(--zemin); }

.rozet {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px;
  background: var(--kart); color: var(--ikincil); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.karo.vurgu .rozet { background: color-mix(in srgb, var(--vurgu-ustu) 18%, transparent); color: var(--vurgu-ustu); }

/* Key cap (SPEC §1.3 tus) */
.tus {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 28px; padding: 0 8px; border-radius: 8px; border: 0;
  background: var(--kart); color: var(--murekkep);
  box-shadow: 0 2px 0 var(--tus-golge), inset 0 0 0 1px var(--ayrac);
  font-family: var(--f-bric); font-weight: 700; font-size: 14px; line-height: 1;
  vertical-align: baseline; white-space: nowrap;
  transition: transform var(--d-birak) var(--e-birak), box-shadow var(--d-birak) var(--e-birak), background-color .2s;
}
.tus.buyuk { min-width: 64px; height: 58px; border-radius: 14px; font-size: 28px; padding: 0 14px; box-shadow: 0 3px 0 var(--tus-golge), inset 0 0 0 1px var(--ayrac); }
.tus.basili { transform: translateY(2px); box-shadow: 0 1px 0 var(--tus-golge), inset 0 0 0 1px var(--ayrac); background: var(--kart-ustu);
  transition: transform var(--d-basma) var(--e-basma), box-shadow var(--d-basma) var(--e-basma), background-color .1s; }
.tus.buyuk.basili { transform: translateY(3px); box-shadow: 0 0 0 var(--tus-golge), inset 0 0 0 1px var(--ayrac); }
.karo.vurgu .tus { background: color-mix(in srgb, var(--vurgu-ustu) 16%, var(--vurgu)); color: var(--vurgu-ustu); box-shadow: 0 2px 0 color-mix(in srgb, var(--vurgu-ters) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--vurgu-ustu) 25%, transparent); }

/* Scene control: pause / play / replay */
.demo-kontrol {
  width: 36px; height: 36px; border-radius: 18px; border: 0; cursor: pointer; flex: none;
  background: var(--kart); color: var(--murekkep);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--d-birak) var(--e-birak), background-color .2s;
}
.demo-kontrol[hidden] { display: none; }
.demo-kontrol:hover { background: var(--kart-ustu); }
.demo-kontrol:active { transform: scale(.94); }
.demo-kontrol svg { width: 14px; height: 14px; }
.demo-kontrol > span { display: none; }
.demo-kontrol[data-durum="oynuyor"] .k-durdur,
.demo-kontrol[data-durum="durdu"] .k-oynat,
.demo-kontrol[data-durum="bitti"] .k-yeniden { display: inline-flex; }
.demo-kontrol.kose { position: absolute; right: 26px; bottom: 26px; z-index: 2; background: var(--yuzey); box-shadow: 0 0 0 1px var(--ayrac); }
.demo-kontrol.kose.ust { top: 17px; bottom: auto; right: 21px; width: 30px; height: 30px; background: transparent; box-shadow: none; }
.demo-kontrol.kose.ust:hover { background: var(--kart-ustu); }
@media (max-width: 719px) { .demo-kontrol.kose.ust { top: 15px; right: 18px; } }

/* ---------- Tiles ---------- */
.bento { display: grid; gap: var(--bosluk); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bento > * { grid-column: span 12; }
.karo {
  background: var(--yuzey); border-radius: var(--kose); padding: 20px;
  display: flex; flex-direction: column; min-width: 0; position: relative;
}
@media (min-width: 720px) { .karo { padding: 28px; } }
.karo.vurgu { background: var(--vurgu); color: var(--vurgu-ustu); }
.karo.ters { background: var(--ters); color: var(--ters-ustu); }
.karo-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sahne-karo { padding: 12px; }
@media (min-width: 720px) { .sahne-karo { padding: 14px; } }

.bolum { padding: 80px 0 0; }
.bolum-bas { margin-bottom: 24px; padding: 0 4px; }
@media (min-width: 720px) { .bolum { padding-top: 128px; } .bolum-bas { margin-bottom: 36px; } }

@media (min-width: 720px) {
  .s6, .s12-6 { grid-column: span 6 !important; }
}
@media (min-width: 960px) {
  .s3 { grid-column: span 3 !important; } .s4 { grid-column: span 4 !important; }
  .s5 { grid-column: span 5 !important; } .s7 { grid-column: span 7 !important; }
  .s8 { grid-column: span 8 !important; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .s3, .s4 { grid-column: span 6 !important; }
}

/* Small shared parts of the drawn app UI */
.isiklar { display: inline-flex; gap: 6px; flex: none; }
.isiklar i { width: 10px; height: 10px; border-radius: 50%; background: var(--isik); }
.pencere-ust {
  height: 36px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  border-bottom: 1px solid var(--ayrac); font-size: 12.5px; font-weight: 600; color: var(--ikincil);
}
.pencere-ad { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kart); color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--ayrac);
  font: 700 13px/1 var(--f-funnel);
}
.avatar.sen { background: var(--vurgu); color: var(--vurgu-ustu); box-shadow: none; }
.isaret { display: block; fill: currentColor; }
.k { display: inline-block; margin-right: .27em; vertical-align: top; white-space: nowrap; position: relative; }

/* Recording pill (SPEC §5.1): dark in both themes */
.hap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 44px; border-radius: 16px; overflow: hidden;
  background: var(--cubuk); color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  font: 600 13px/16px var(--f-funnel);
  transition: width var(--d-hap) var(--e-hap);
}
.hap > .hap-dinlenme, .hap > .hap-dinliyor, .hap > .hap-yaziyor {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transition: opacity .18s ease;
}
.hap[data-hal="dinlenme"] .hap-dinlenme, .hap[data-hal="dinliyor"] .hap-dinliyor, .hap[data-hal="yaziyor"] .hap-yaziyor { opacity: 1; }
.hap[data-hal="dinliyor"], .hap[data-hal="yaziyor"] { width: 112px; }
.hap .isaret { width: 14px; height: 14px; }
.hap-nokta {
  width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--vurgu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 35%, transparent);
}
.hap-dalga { display: inline-flex; align-items: center; gap: 2.25px; height: 16px; }
.hap-dalga i { display: block; width: 2.5px; height: 16px; border-radius: 2px; background: #FFFFFF; transform: scaleY(.5); }
.hap-dalga i:nth-child(3n) { transform: scaleY(.85); }
.hap-dalga i:nth-child(4n) { transform: scaleY(.3); }
.hap-dalga i:nth-child(5n+1) { transform: scaleY(.7); }
.hap-donen { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #FFFFFF; }
.hareket .hap .hap-donen { animation: don .9s linear infinite; }
.hareket .hap.canli .hap-dalga i { animation: dalga .8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
.hareket .hap.canli .hap-dalga i:nth-child(2n) { animation-duration: .62s; }
.hareket .hap.canli .hap-dalga i:nth-child(3n) { animation-duration: 1.05s; }
.hareket .hap.canli .hap-nokta { animation: nefes 1.2s ease-in-out infinite alternate; }
@keyframes dalga { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
@keyframes don { to { transform: rotate(1turn); } }
@keyframes nefes { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 35%, transparent); } to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 12%, transparent); } }

/* ---------- Visual language A: tile and dot (site/_uret/cizimler.py) ---------- */
.a-svg { display: block; width: 100%; height: auto; overflow: visible; }
.a-m { fill: var(--murekkep); }
.a-v { fill: var(--vurgu); }
.a-bos { fill: var(--kart); }
.a-cerceve { fill: var(--kart); }
.a-cizgi { fill: color-mix(in srgb, var(--murekkep) 14%, var(--kart)); }
.a-ters { fill: var(--yuzey); }
.a-balon { fill: var(--yuzey); stroke: var(--murekkep); stroke-width: 3; }
.a-istek { fill: none; stroke: color-mix(in srgb, var(--murekkep) 26%, var(--yuzey)); stroke-width: 2; stroke-dasharray: 5 6; }
.a-sayi { font: 800 84px/1 var(--f-bric); font-stretch: 75%; fill: var(--murekkep); }
.a-etiket { font: 500 24px/1 var(--f-funnel); fill: var(--ucuncul); }
/* light grey (0) to ink (10), mixed into the tile surface so it works in both themes */
.a-g0 { fill: color-mix(in srgb, var(--murekkep) 18%, var(--yuzey)); }
.a-g1 { fill: color-mix(in srgb, var(--murekkep) 26%, var(--yuzey)); }
.a-g2 { fill: color-mix(in srgb, var(--murekkep) 34%, var(--yuzey)); }
.a-g3 { fill: color-mix(in srgb, var(--murekkep) 43%, var(--yuzey)); }
.a-g4 { fill: color-mix(in srgb, var(--murekkep) 51%, var(--yuzey)); }
.a-g5 { fill: color-mix(in srgb, var(--murekkep) 59%, var(--yuzey)); }
.a-g6 { fill: color-mix(in srgb, var(--murekkep) 67%, var(--yuzey)); }
.a-g7 { fill: color-mix(in srgb, var(--murekkep) 75%, var(--yuzey)); }
.a-g8 { fill: color-mix(in srgb, var(--murekkep) 84%, var(--yuzey)); }
.a-g9 { fill: color-mix(in srgb, var(--murekkep) 92%, var(--yuzey)); }
.a-g10 { fill: var(--murekkep); }
.a-halka { opacity: 0; }
.a-an, .a-halka { transform-box: fill-box; transform-origin: center; }
/* js/site.js: data-cizim "" (still) -> "bekle" (hidden, waiting for the viewport) -> "oyna" -> "bitti".
   The hero starts as "ilk" so it does not flash its last frame before the script runs. */
.hareket [data-cizim="ilk"] .a-an, .hareket [data-cizim="bekle"] .a-an { opacity: 0; }
.hareket [data-cizim="oyna"] .a-an { animation: a-pop var(--d-giris) var(--e-giris) var(--g, 0ms) both; }
.hareket [data-cizim="oyna"] .a-blop { animation-name: a-blop; animation-duration: var(--d-birak); animation-timing-function: var(--e-birak); }
.hareket [data-cizim="oyna"] .a-dus { animation-name: a-dus; animation-duration: var(--d-birak); animation-timing-function: var(--e-birak); }
.hareket [data-cizim="oyna"] .a-sol { animation-name: a-sol; }
.hareket [data-cizim="oyna"] .a-halka { animation: a-halka 1.1s cubic-bezier(.2, .6, .3, 1) 80ms 2; }
@keyframes a-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes a-blop { from { opacity: 0; transform: scale(.45); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes a-dus { from { opacity: 0; transform: translateY(-36px) scale(.8); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes a-sol { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes a-halka { from { opacity: .35; transform: scale(1); } to { opacity: 0; transform: scale(2.3); } }

/* ---------- Hero: a welcome, the demo is one scroll below ---------- */
.hero { padding-top: 4px; }
.hero-karo { padding: 24px; gap: 24px; overflow: hidden; }
.hero-ust { display: grid; gap: 18px; }
.hero-etiket { font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ikincil); }
.hero h1 {
  margin-top: 14px;
  font-weight: 700; font-stretch: 85%; letter-spacing: 0;
  font-size: clamp(52px, 7.8vw, 112px); line-height: 1.08;
}
.hero h1 span { display: block; }
.hero .giris { font-size: 17px; line-height: 1.55; color: var(--ikincil); max-width: 24em; }
.hero-eylem { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
.hero-meta { font-size: 13px; line-height: 1.5; color: var(--ucuncul); text-align: center; }
.dugme.buyuk { height: 52px; padding: 0 24px 0 20px; border-radius: 26px; font-size: 17px; gap: 10px; }
.dugme.buyuk svg { width: 18px; height: 18px; }
.hero-cizim { margin-top: 8px; }
.hero-cizim .genis { display: none; }
.asagi-ipucu {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0; width: max-content;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ucuncul); text-decoration: none; border-radius: 10px; padding: 2px 6px;
}
.asagi-ipucu:hover { color: var(--murekkep); }
.asagi-ipucu svg { width: 16px; height: 16px; }
.hareket .asagi-ipucu svg { animation: ipucu 1.6s var(--e-giris) 1.2s 2 both; }
@keyframes ipucu { 0%, 100% { transform: none; } 45% { transform: translateY(4px); } }
@media (min-width: 600px) {
  .hero-cizim .genis { display: block; }
  .hero-cizim .dar-cizim { display: none; }
  .hero-eylem { align-items: flex-start; }
  .hero-meta { text-align: left; }
}
@media (min-width: 720px) {
  .hero-karo { padding: 48px; }
  .hero h1 { line-height: 1.04; }
  .hero .giris { font-size: 19px; line-height: 1.5; }
}
@media (min-width: 960px) {
  .hero-karo { padding: 56px 64px 64px; justify-content: space-between; min-height: clamp(640px, calc(100svh - var(--ust-h) - 66px), 860px); }
  .hero-ust { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 56px; align-items: start; }
  .hero-yan { padding-top: 54px; }
  .hero .giris { font-size: 21px; }
  .hero-cizim { margin-top: 32px; }
}

/* ---------- Section intro tile (board GA3): heading, one sentence, More, drawing ---------- */
.a-bolum { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 24px 20px 28px; }
@media (min-width: 720px) { .a-bolum { padding: 40px; } }
@media (min-width: 960px) { .a-bolum { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 56px; align-items: center; } }
.a-baslik {
  font-weight: 700; font-stretch: 85%; letter-spacing: 0;
  font-size: clamp(36px, 3.9vw, 56px); line-height: 1.1; text-wrap: balance;
}
@media (min-width: 720px) { .a-baslik { line-height: 1.06; } }
.demo-baslik { font-size: clamp(40px, 4.45vw, 64px); }
.a-alt { margin-top: var(--bas-alt); font-size: 17px; line-height: 1.5; color: var(--ikincil); max-width: 30em; }
@media (min-width: 720px) { .a-alt { font-size: 19px; } }
.a-cizim { min-width: 0; }
.a-bolum .a-cizim { max-width: 640px; justify-self: center; width: 100%; }
.sahne-bento { margin-top: var(--bosluk); }

/* More: native <details>, closed until the visitor asks */
.daha { margin-top: 24px; }
.daha > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px 0 18px; border-radius: 20px; background: var(--kart);
  box-shadow: inset 0 0 0 1px var(--ayrac); font-weight: 600; font-size: 15px; color: var(--murekkep);
  transition: background-color .2s, transform var(--d-birak) var(--e-birak);
}
.daha > summary::-webkit-details-marker { display: none; }
.daha > summary:hover { background: var(--kart-ustu); }
.daha > summary:active { transform: scale(.97); transition: transform var(--d-basma) var(--e-basma); }
.daha > summary svg { width: 16px; height: 16px; transition: transform var(--d-giris) var(--e-giris); }
.daha[open] > summary svg { transform: rotate(180deg); }
.daha-liste { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 34em; }
.daha-liste li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ikincil); }
.daha-liste li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--murekkep); }
.hareket .daha[open] .daha-liste { animation: daha-ac var(--d-giris) var(--e-giris) both; }
@keyframes daha-ac { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.eylemler { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Dictation demo */
.dikte-karo { gap: 12px; }
.demo-yan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 960px) {
  .dikte-karo { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 14px; }
  .demo-yan { justify-content: center; gap: 28px; padding: 4px; }
  .demo-yan .demo-sekme { flex-direction: column; align-self: stretch; border-radius: 22px; padding: 4px; gap: 2px; }
  .demo-yan .demo-sekme button { height: 46px; justify-content: flex-start; padding: 0 18px; font-size: 15px; border-radius: 18px; }
  .demo-yan .demo-alt { flex-wrap: wrap; row-gap: 10px; }
}
.masaustu {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--zemin); border-radius: 16px; padding: 16px 16px 14px; overflow: hidden;
}
.pencereler { position: relative; height: 288px; }
.pencere {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--yuzey); border-radius: 12px; box-shadow: 0 0 0 1px var(--ayrac);
  visibility: hidden; opacity: 0;
}
.pencere[data-aktif] { visibility: visible; opacity: 1; }
.ton { height: 22px; padding: 0 9px; border-radius: 11px; background: var(--kart); color: var(--ikincil); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; }
.pencere-govde { flex: 1; min-height: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.alan { font-size: 15px; line-height: 1.5; color: var(--murekkep); position: relative; }
.alan .yer { display: none; color: var(--ucuncul); }
.alan.bos .yer { display: inline; }
.alan.bos .yapisan { display: none; }
.imlec { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--murekkep); border-radius: 1px; }
.hareket .alan .imlec { animation: imlec 1.06s steps(1) infinite; }
@keyframes imlec { 50% { opacity: 0; } }
.kisi { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kisi .avatar { width: 24px; height: 24px; font-size: 11px; }
.balon { align-self: flex-start; max-width: 82%; background: var(--kart); border-radius: 16px 16px 16px 6px; padding: 9px 13px; font-size: 14.5px; }
.mesaj-alan { margin-top: auto; border-radius: 19px; box-shadow: inset 0 0 0 1px var(--ayrac); padding: 8px 14px; min-height: 38px; }
.eposta-satir { display: flex; gap: 10px; font-size: 13.5px; padding-bottom: 8px; border-bottom: 1px solid var(--ayrac); }
.eposta-satir span { color: var(--ucuncul); min-width: 3.6em; }
.eposta-satir b { font-weight: 600; }
.eposta-alan { padding-top: 4px; }
.not-baslik { font: 700 21px/1.1 var(--f-bric); letter-spacing: -.01em; }
.kod-sekme { align-self: flex-start; font: 600 12px/1 var(--f-mono); padding: 6px 10px; border-radius: 8px; background: var(--kart); color: var(--ikincil); }
.kod { margin: 0; font: 12.5px/1.65 var(--f-mono); color: var(--ikincil); overflow: hidden; white-space: pre; }
.kod-satir { display: block; }
.kod .no { display: inline-block; width: 1.6em; color: var(--ucuncul); }
.kod .kw { color: var(--murekkep); font-weight: 600; }
.kod b { color: var(--murekkep); }
.kod .yorum { color: var(--ucuncul); }
.kod-alan { margin-top: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ayrac); padding: 10px 12px; font-size: 14px; min-height: 42px; }

.sozler { position: relative; min-height: 78px; }
.soyleyis {
  position: absolute; inset: 0 0 auto 0; visibility: hidden; opacity: 0;
  font-size: 17px; line-height: 26px; font-weight: 500; color: var(--ikincil); padding: 0 2px;
}
.soyleyis[data-aktif] { visibility: visible; opacity: 1; }
.soyleyis .k::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; border-radius: 1px;
  background: var(--murekkep); transform: scaleX(var(--cizgi, 0)); transform-origin: left center;
}
.soyleyis .dolgu, .soyleyis .yanlis { --cizgi: 1; color: var(--ucuncul); }
.soyleyis .dogru { color: var(--murekkep); font-weight: 600; text-decoration: underline 2px var(--murekkep); text-underline-offset: 4px; }
.demo-hap { display: flex; justify-content: center; }
.demo-alt { display: flex; align-items: center; gap: 14px; padding: 2px 2px 0; }
.demo-tus { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.demo-ipucu { flex: 1; font-size: 13.5px; color: var(--ucuncul); font-weight: 500; }
.demo-sekme { align-self: flex-start; background: var(--kart); max-width: 100%; }
.demo-sekme button { height: 32px; padding: 0 13px; font-size: 13.5px; }
.hareket [data-sahne="dikte"]:not([data-hazir]) .sozler,
.hareket [data-sahne="dikte"]:not([data-hazir]) .yapisan { visibility: hidden; }

/* ---------- Privacy scene (scroll-linked; drawn in A: voice dots, dot waves, request tiles) ---------- */
.gizli-karo { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 24px; }
@media (min-width: 960px) {
  .gizli-karo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 44px; padding: 40px; align-items: center; }
  .hareket .gizli-karo { min-height: min(640px, calc(100vh - var(--ust-h) - 32px)); }
}
.sayac { display: flex; align-items: flex-end; gap: 16px; }
.sayac-sayi { font-size: clamp(96px, 9vw, 136px); line-height: .76; }
.sayac-etiket { font: 600 15px/var(--lh-kucuk) var(--f-funnel); max-width: 11em; padding-bottom: 4px; }
.adim-izi { list-style: none; margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.adim-izi li { position: relative; padding-left: 20px; color: var(--ikincil); font-weight: 500; transition: color .3s; }
.adim-izi li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2.3px; background: var(--ayrac); transition: background-color .3s, transform var(--d-birak) var(--e-birak); }
.hareket [data-adim] .adim-izi li { color: var(--ucuncul); }
.hareket [data-adim="0"] .adim-izi li[data-adim="0"], .hareket [data-adim="1"] .adim-izi li[data-adim="1"], .hareket [data-adim="2"] .adim-izi li[data-adim="2"] { color: var(--murekkep); }
.hareket [data-adim="0"] .adim-izi li[data-adim="0"]::before, .hareket [data-adim="1"] .adim-izi li[data-adim="1"]::before, .hareket [data-adim="2"] .adim-izi li[data-adim="2"]::before { background: var(--murekkep); transform: scale(1.25); }

.gizli-sahne {
  position: relative; display: grid; align-items: stretch; min-height: 440px;
  grid-template-columns: minmax(0, 1fr) 56px 118px; grid-template-rows: 52px minmax(0, 1fr) minmax(0, 1fr);
}
.cihaz-kutu { grid-area: 1 / 1 / 4 / 2; border-radius: 28px; background: var(--zemin); }
.cihaz-ust { grid-area: 1 / 1 / 2 / 2; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 13px; font-weight: 600; color: var(--ikincil); }
.wifi { display: inline-flex; align-items: center; gap: 6px; }
.wifi-ikon { width: 18px; height: 18px; }
.wifi-cizgi { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--e-giris); }
.wifi-kapali { display: none; }
[data-wifi="kapali"] .wifi-cizgi { stroke-dashoffset: 0; }
[data-wifi="kapali"] .wifi-acik { display: none; }
[data-wifi="kapali"] .wifi-kapali { display: inline; color: var(--murekkep); }
.serit { position: relative; z-index: 1; padding: 8px 20px 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.serit-bulut { grid-area: 2 / 1 / 3 / 2; }
.serit-yerel { grid-area: 3 / 1 / 4 / 2; }
.serit-yerel::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: color-mix(in srgb, var(--murekkep) 9%, transparent); }

.serit-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.serit-ad { display: inline-flex; align-items: center; gap: 7px; }
.serit-ad .isaret { width: 13px; height: 13px; }
.serit-durum { color: var(--ucuncul); font-weight: 500; }
.durum-bekle { display: none; }
[data-bulut="durdu"] .durum-gonder { display: none; }
[data-bulut="durdu"] .durum-bekle { display: inline; color: var(--murekkep); font-weight: 600; }
.cip { height: 22px; padding: 0 9px; border-radius: 11px; background: var(--yuzey); color: var(--ikincil); font-size: 11.5px; display: inline-flex; align-items: center; }
.serit-akis { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ses dalga" "metin metin"; gap: 10px 14px; align-items: center; }
.serit-akis .ses-n { grid-area: ses; }
.serit-akis .serit-dalga { grid-area: dalga; }
.serit-akis .serit-metin { grid-area: metin; }
/* the voice dot: accent for you in LungType, grey in the cloud app */
.ses-n { width: 22px; height: 22px; border-radius: 50%; background: var(--vurgu); flex: none; margin-left: 5px; }
.ses-n.gri { background: color-mix(in srgb, var(--murekkep) 45%, var(--zemin)); }
.serit-dalga { display: inline-flex; align-items: center; gap: 7px; height: 32px; }
.serit-dalga i { display: block; width: var(--b); height: var(--b); border-radius: 50%; flex: none; }
.hareket .gizli-karo.akiyor .serit-yerel .serit-dalga i,
.hareket .gizli-karo.akiyor:not([data-bulut="durdu"]) .serit-bulut .serit-dalga i { animation: nokta-dalga .7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes nokta-dalga { from { transform: scale(.55); } to { transform: scale(1.15); } }
[data-bulut="durdu"] .serit-bulut .serit-dalga i { transform: scale(.4); opacity: .5; }
.serit-metin { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; min-height: calc(3em * 1.5 + 28px); background: var(--yuzey); border-radius: 14px; padding: 14px 16px; }
.serit-bulut .serit-metin { color: var(--ikincil); }
.bekleme { display: none; gap: 3px; vertical-align: middle; }
.bekleme i { width: 4px; height: 4px; border-radius: 50%; background: var(--ucuncul); }
[data-bulut="durdu"] .bekleme { display: inline-flex; }
.hareket [data-bulut="durdu"] .bekleme i { animation: nokta 1.2s ease-in-out infinite; }
.hareket [data-bulut="durdu"] .bekleme i:nth-child(2) { animation-delay: .2s; }
.hareket [data-bulut="durdu"] .bekleme i:nth-child(3) { animation-delay: .4s; }
@keyframes nokta { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.baglanti { grid-area: 2 / 2 / 3 / 3; align-self: center; position: relative; height: 2px; margin: 0 6px;
  background-image: repeating-linear-gradient(90deg, var(--ucuncul) 0 5px, transparent 5px 10px); }
.paket { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 2.3px; background: var(--murekkep); opacity: 0; }
.hareket [data-bulut="gonderiyor"] .paket { animation: paket 1.1s linear infinite; }
.hareket [data-bulut="gonderiyor"] .paket + .paket { animation-delay: .55s; }
@keyframes paket { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(36px); opacity: 0; } }
.kopuk { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); background: var(--yuzey); padding: 0 4px; font: 700 18px/1 var(--f-funnel); color: var(--murekkep); }
[data-bulut="durdu"] .kopuk { display: block; }
[data-bulut="durdu"] .baglanti { background-image: repeating-linear-gradient(90deg, var(--ayrac) 0 5px, transparent 5px 10px); }
.sunucu {
  grid-area: 2 / 3 / 3 / 4; align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px;
  border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--ayrac); font-size: 12.5px; font-weight: 600; color: var(--ikincil); text-align: center;
}
/* requests that left the device: dashed tiles, filled one by one as the cloud app uploads */
.istekler { display: flex; gap: 5px; }
.istekler i { width: 18px; height: 18px; border-radius: 5.1px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--murekkep) 30%, var(--yuzey)); transition: background-color .2s; }
.sunucu[data-n="1"] .istekler i:nth-child(-n+1), .sunucu[data-n="2"] .istekler i:nth-child(-n+2), .sunucu[data-n="3"] .istekler i { background: var(--murekkep); box-shadow: none; }
.sunucu-sayac { font: 800 28px/1 var(--f-bric); font-stretch: 75%; color: var(--murekkep); font-variant-numeric: tabular-nums; }
[data-bulut="durdu"] .sunucu { opacity: .55; }

.hareket .gizli-iz { height: 300vh; }
.hareket .gizli-yapis { position: sticky; top: var(--ust-h); padding: 12px 0; }
.gizli-yapis { padding-top: var(--bosluk); }
.gizli-yapis > .kap { width: 100%; }
@media (max-height: 640px), (max-width: 959px) {
  .hareket .gizli-iz { height: auto; }
  .hareket .gizli-yapis { position: static; min-height: 0; padding: var(--bosluk) 0 0; }
}

/* ---------- AI memory ---------- */
.sohbet-karo { grid-column: span 12; }
.istemci-karo { justify-content: space-between; gap: 24px; }
@media (min-width: 960px) { .sohbet-karo { grid-column: span 8; } .istemci-karo { grid-column: span 4; padding: 32px; } }
.sohbet { background: var(--zemin); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-height: 470px; }
.sohbet .pencere-ust { border-bottom-color: color-mix(in srgb, var(--ayrac) 70%, transparent); }
.sohbet-akis { flex: 1; padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.balon-sag { align-self: flex-end; max-width: 82%; background: var(--yuzey); border-radius: 18px 18px 6px 18px; padding: 10px 15px; font-size: 15px; line-height: 1.5; }
.arac {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 13px 0 6px;
  border-radius: 16px; background: var(--yuzey); font-size: 12.5px; max-width: 100%;
}
.arac code { font: 600 12.5px/1 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.arac-not { color: var(--ucuncul); white-space: nowrap; }
.arac-durum { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--murekkep); color: var(--zemin); }
.arac-durum svg { width: 11px; height: 11px; }
.arac.calisiyor .arac-durum { background: transparent; border: 2px solid var(--ayrac); border-top-color: var(--murekkep); animation: don .8s linear infinite; }
.arac.calisiyor .arac-durum svg, .arac.calisiyor .arac-not { visibility: hidden; }
.cevap { font-size: 15px; line-height: 1.55; max-width: 36em; }
.cevap ol { padding-left: 22px; margin: 6px 0 12px; }
.cevap li { padding-left: 2px; }
.alinti { margin: 0; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--yuzey); }
.alinti-kim { font-size: 13px; }
.alinti-kim span { color: var(--ucuncul); font-variant-numeric: tabular-nums; }
.sohbet-giris { margin: 0 14px 14px; height: 46px; border-radius: 23px; background: var(--yuzey); display: flex; align-items: center; justify-content: space-between; padding: 0 7px 0 18px; color: var(--ucuncul); font-size: 14.5px; }
.gonder { width: 32px; height: 32px; border-radius: 50%; background: var(--murekkep); color: var(--zemin); display: inline-flex; align-items: center; justify-content: center; transform: rotate(-90deg); }
.gonder svg { width: 15px; height: 15px; }
.istemciler { list-style: none; font-size: clamp(44px, 4.6vw, 64px); line-height: var(--lh-dis); letter-spacing: -0.01em; margin-top: 16px; }
.istemciler li + li { margin-top: 8px; }
.istemci-karo .ikincil { font-size: 15px; }

/* ---------- Meetings ---------- */
.t-pencere { background: var(--zemin); border-radius: 16px; overflow: hidden; }
.t-pencere > .pencere-ust { border-bottom: 0; }
.t-govde { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; padding: 0 12px 12px; }
.t-liste { background: var(--yuzey); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.t-satir { padding: 11px 13px; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.t-satir b { font-weight: 500; }
.t-satir span { font-size: 12.5px; color: var(--ucuncul); display: inline-flex; align-items: center; gap: 6px; }
.t-satir.secili { background: var(--kart); }
.t-satir.secili b { font-weight: 600; }
.kayit-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--vurgu); flex: none; display: inline-block; }
.hareket .toplanti-karo.oynuyor .kayit-nokta { animation: yanip 1.2s ease-in-out infinite alternate; }
@keyframes yanip { to { opacity: .35; } }
.t-detay { background: var(--yuzey); border-radius: 16px; padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.t-baslik { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.t-ad { font: 700 28px/var(--lh-orta) var(--f-bric); letter-spacing: var(--ls-dis); margin-bottom: 8px; }
.kayit-hap { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--cubuk); color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.kayit-hap time { font: 800 15px/1 var(--f-bric); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.t-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.cip-kisi { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; border-radius: 15px; background: var(--kart); font-size: 13px; font-weight: 600; }
.cip-kisi .avatar { width: 22px; height: 22px; font-size: 10.5px; background: var(--yuzey); }
.cip-kisi .avatar.sen { background: var(--vurgu); }
.t-transkript { position: relative; overflow: hidden; height: 312px; }
.t-akis { display: flex; flex-direction: column; gap: 16px; }
.blok { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.blok-ust { font-size: 14px; line-height: 30px; }
.blok-ust span { color: var(--ucuncul); font-size: 12.5px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.blok-metin { font-size: 15px; line-height: 23px; }
.t-metreler { border-top: 1px solid var(--ayrac); padding-top: 14px; display: grid; gap: 8px; }
.metre { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; font-size: 12.5px; font-weight: 600; }
.parcalar { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 3px; }
.parcalar i { height: 10px; border-radius: 3px; background: var(--kart); transition: background-color .08s; }
.m-sen .parcalar i:nth-child(-n+9), .m-karsi .parcalar i:nth-child(-n+13) { background: var(--murekkep); }
.m-sen .parcalar i:nth-child(-n+9) { background: var(--vurgu); }
.hareket .toplanti-karo[data-hazir] .parcalar i { background: var(--kart); }
.hareket .toplanti-karo[data-hazir] .parcalar i.dolu { background: var(--murekkep); }
.hareket .toplanti-karo[data-hazir] .m-sen .parcalar i.dolu { background: var(--vurgu); }

/* ---------- Time saved: the number and a pile of tiles ---------- */
.zaman-karo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 24px; }
@media (min-width: 720px) { .zaman-karo { padding: 40px 44px; } }
@media (min-width: 960px) { .zaman-karo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 40px; padding: 48px 56px; } }
.zaman-metin { display: flex; flex-direction: column; min-width: 0; }
.zaman-satir { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; }
.zaman-on { font: 700 clamp(30px, 3.8vw, 56px)/var(--lh-dis) var(--f-bric); font-stretch: 75%; }
.zaman-sayi { font-size: clamp(120px, 16vw, 232px); line-height: .78; letter-spacing: -.02em; }
.zaman-birim { font-size: clamp(36px, 4.4vw, 64px); line-height: var(--lh-dis); font-weight: 700; }
.zaman-cumle { margin-top: 28px; font-size: 19px; font-weight: 600; }
.zaman-cizim { max-width: 460px; width: 100%; justify-self: center; }

/* ---------- Color ---------- */
.renk-secim { grid-column: span 12; justify-content: space-between; gap: 40px; }
.renk-onizleme { grid-column: span 12; }
@media (min-width: 960px) { .renk-secim { grid-column: span 5; padding: 36px; } .renk-onizleme { grid-column: span 7; } }
.renk-metin { max-width: 26em; }
.renk-adi { font-size: clamp(64px, 7.2vw, 104px); line-height: var(--lh-dis); letter-spacing: var(--ls-dis); margin-bottom: 24px; display: flex; align-items: center; gap: .14em; overflow-wrap: anywhere; }
.renk-adi::before { content: ""; flex: none; width: .44em; height: .44em; border-radius: 50%; background: var(--vurgu); }
.renkler { display: flex; flex-wrap: wrap; gap: 10px; padding: 5px; margin: -5px; }
.renk {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: var(--r); position: relative; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--murekkep) 12%, transparent);
  transition: transform var(--d-birak) var(--e-birak);
}
.renk:hover { transform: scale(1.08); }
.renk:active { transform: scale(.92); transition: transform var(--d-basma) var(--e-basma); }
.renk[aria-checked="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--murekkep); }
.renk:focus-visible { outline-offset: 8px; border-radius: 50%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .renk[data-accent-set="murekkep"] { --r: #F2F2F2 !important; } }
:root[data-theme="dark"] .renk[data-accent-set="murekkep"] { --r: #F2F2F2 !important; }

.mini { position: relative; display: grid; grid-template-columns: 158px minmax(0, 1fr); background: var(--zemin); border-radius: 16px; overflow: hidden; min-height: 500px; }
.mini-kenar { padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.mini-kenar .isiklar { margin: 2px 4px 18px; }
.mini-logo { display: flex; align-items: center; gap: 7px; margin: 0 8px 14px; font-size: 13.5px; }
.mini-logo .isaret { width: 15px; height: 15px; }
.m-nav { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: 16px; font-size: 12.5px; font-weight: 500; color: var(--ikincil); }
.m-nav svg { width: 15px; height: 15px; flex: none; }
.m-nav.secili { background: var(--yuzey); color: var(--murekkep); font-weight: 600; }
.mini-izgara { padding: 12px 12px 58px 2px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.m-karo { background: var(--yuzey); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-etiket { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--ucuncul); }
.m-metin { font-size: 16px; line-height: 1.5; }
.m-dugme { align-self: flex-start; margin-top: auto; height: 30px; padding: 0 13px; border-radius: 15px; background: var(--murekkep); color: var(--zemin); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.m-kazanc { background: var(--vurgu); color: var(--vurgu-ustu); }
.m-kazanc .m-etiket, .m-kazanc .m-ipucu { color: var(--vurgu-ustu-ikincil); }
.m-sayi { display: flex; align-items: baseline; gap: 4px; margin-top: auto; }
.m-sayi b { font-size: 84px; line-height: .8; }
.m-sayi span { font-size: 34px; font-weight: 700; line-height: .8; }
.m-sayi.kucuk b { font-size: 48px; }
.m-sayi.kucuk span { font: 600 13px/1 var(--f-funnel); margin-left: 4px; }
.m-alt { font-size: 13.5px; font-weight: 600; }
.m-ipucu { font-size: 11px; line-height: 1.35; }
.m-hafta { grid-column: span 2; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; }
.m-hafta > div:first-child { display: flex; flex-direction: column; gap: 10px; }
.m-gunler { display: flex; gap: 8px; align-items: flex-end; }
.m-gun { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.m-gun i { display: block; width: 15px; height: calc(var(--h) * 1px); border-radius: 4px; background: var(--murekkep); }
.m-gun.bugun i { background: var(--vurgu); }
.m-gun.bos i { height: 5px; background: var(--kart); }
.m-gun.sifir i { height: 5px; background: var(--ayrac); }
.m-gun b { font-size: 10.5px; font-weight: 500; color: var(--ucuncul); }
.m-gun.bugun b { color: var(--murekkep); font-weight: 700; }
.mini-hap { position: absolute; left: calc(50% + 79px); bottom: 13px; transform: translateX(-50%); z-index: 2; }
.mini .m-karo, .mini .hap-nokta, .mini .m-gun i, .mini .avatar { transition: background-color .5s ease, color .5s ease; }

/* ---------- Features ---------- */
.ozellik { gap: 0; overflow: hidden; }
.ozellik .karo-baslik { margin-top: 24px; }
.ozellik > .ikincil { font-size: 15px; line-height: 1.5; max-width: 34em; margin: var(--bas-alt) 0 24px; }
.sahne-ic { margin-top: auto; background: var(--zemin); border-radius: 16px; padding: 16px; min-height: 150px; }
.ozellik .sahne-ic { margin-top: 24px; }
.ozellik > .sahne-ic:last-of-type { margin-top: auto; }
.ozellik { justify-content: flex-start; }
.ozellik .karo-ust + .karo-baslik { margin-top: 24px; }
.sozluk-liste { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sozluk-liste li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--yuzey); font-size: 14.5px; }
.sozluk-liste .yanlis { color: var(--ucuncul); text-decoration: line-through 2px var(--murekkep); }
.sozluk-liste .ok { display: inline-flex; color: var(--ucuncul); }
.sozluk-liste .ok svg { width: 14px; height: 14px; }
.sozluk-liste .dogru { font-weight: 600; }
.sozluk-liste .kez { margin-left: auto; font-size: 12px; color: var(--ucuncul); font-variant-numeric: tabular-nums; white-space: nowrap; }
.komut-sahne { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.komut-metin { font-size: 16px; line-height: 1.55; min-height: 3.1em; }
.secim { background: color-mix(in srgb, var(--murekkep) 12%, transparent); border-radius: 4px; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .3s; }
.komut-once { display: none; }
.komut-alt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.komut-soz { font-size: 14px; font-weight: 600; color: var(--ikincil); }
.kisayol-sahne { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kisayol-tetik { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 15px; background: var(--cubuk); color: #FFFFFF; font-size: 13px; font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.kisayol-metin { align-self: stretch; font-size: 15px; line-height: 1.5; background: var(--yuzey); border-radius: 12px; padding: 12px 14px; }
.kisayol-metin .satir { display: inline-block; }
.dil-sahne { display: grid; gap: 10px; align-content: center; }
.dil-satir { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.dil-etiket { flex: none; height: 26px; min-width: 34px; padding: 0 7px; border-radius: 8px; background: var(--murekkep); color: var(--zemin); font: 800 14px/26px var(--f-bric); font-stretch: 75%; text-align: center; }
.hareket .dil-sahne[data-hazir] .dil-satir { grid-area: 1 / 1; }
.eller-sahne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.eller-tuslar { display: inline-flex; gap: 6px; }
.e-tus { min-width: 44px; height: 40px; font-size: 18px; border-radius: 10px; }
.hap[data-hal="eller"] { width: 156px; justify-content: flex-start; gap: 8px; padding: 0 5px 0 12px; }
.hap[data-hal="eller"] > .hap-dinliyor { position: static; opacity: 1; inset: auto; justify-content: flex-start; }
.hap-sure { margin-left: auto; font-size: 17px; line-height: 1; }
.hap-bitir { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hap-bitir::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #111111; }

/* ---------- Pricing summary (home) ---------- */
.fiyat-ozet { padding: 28px 24px; gap: 32px; }
@media (min-width: 720px) { .fiyat-ozet { padding: 40px 44px; } }
.fo-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.fo-izgara { display: grid; grid-template-columns: minmax(0, 1fr); }
.fo-plan { padding: 24px 0; border-top: 1px solid var(--ayrac); display: flex; flex-direction: column; gap: var(--bas-alt); }
.fo-plan:first-child { border-top: 0; padding-top: 0; }
.fo-vergi { margin-top: 24px; font-size: 14px; }
.vergi-not { font-size: 13px; }
.tablo .tablo-vergi { text-align: left; font-size: 13px; padding-top: 16px; }
@media (min-width: 720px) {
  .fo-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fo-plan { border-top: 0; border-left: 1px solid var(--ayrac); padding: 0 28px; }
  .fo-plan:first-child { border-left: 0; padding-left: 0; }
}
.fo-ad { font-size: 20px; line-height: var(--lh-orta); font-weight: 700; letter-spacing: -.01em; }
.fo-fiyat { display: flex; align-items: baseline; gap: 4px; }
.fo-fiyat .dar { font-size: 76px; line-height: .82; white-space: nowrap; }
.fo-birim { font: 700 24px/1 var(--f-bric); font-stretch: 75%; }
.fo-plan .ikincil { font-size: 15px; max-width: 22em; }

/* ---------- FAQ ---------- */
.sss { padding: 8px 28px; }
@media (max-width: 719px) { .sss { padding: 4px 20px; } }
.sss details { border-bottom: 1px solid var(--ayrac); }
.sss details:last-child { border-bottom: 0; }
.sss summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-family: var(--f-bric); font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--d-giris) var(--e-giris);
}
.sss details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.sss details > div { padding: 0 0 22px; color: var(--ikincil); max-width: 52em; }
.sss details > div p + p { margin-top: 16px; }
@media (min-width: 960px) {
  .sss-bas { grid-column: span 4 !important; padding: 0 4px; }
  .sss { grid-column: span 8 !important; }
}

/* ---------- CTA band ---------- */
.son-cagri { gap: 24px; }
@media (min-width: 900px) { .son-cagri { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 48px 56px; } }

/* ---------- Footer ---------- */
.alt { padding: 104px 0 40px; }
.alt-izgara { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .alt-izgara { grid-template-columns: 1.4fr 1fr 1fr; } }
.alt h2 { font-family: var(--f-funnel); font-size: 13px; font-weight: 600; color: var(--ucuncul); margin-bottom: var(--bas-alt); }
.alt ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.alt ul a { text-decoration: none; color: var(--ikincil); display: inline-block; padding: 4px 0; }
.alt ul a:hover { color: var(--murekkep); text-decoration: underline; }
.alt .logo svg { height: 22px; }
.alt-not { margin-top: 16px; color: var(--ucuncul); font-size: 14px; max-width: 30em; }
.alt-telif { margin-top: 40px; color: var(--ucuncul); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* ---------- Inner page header ---------- */
.sayfa-bas { padding: 28px 4px 32px; }
.sayfa-bas h1 { font-size: clamp(48px, 6.8vw, 96px); line-height: var(--lh-dis); letter-spacing: var(--ls-dis); font-stretch: 82%; }
.sayfa-bas p { margin-top: 16px; color: var(--ikincil); font-size: 18px; max-width: 38em; }
.donem-secici { margin-top: 24px; }

/* ---------- Pricing page ---------- */
.plan { gap: 16px; min-height: 540px; }
.plan h2 { font-size: 30px; line-height: var(--lh-orta); letter-spacing: -0.02em; font-weight: 800; }
.fiyat { display: flex; align-items: flex-end; }
.fiyat .dar { font-size: 100px; line-height: .8; }
.fiyat .para { font-size: 100px; line-height: .8; white-space: pre; }
.fiyat .para:empty { display: none; }
.fiyat .birim { font-family: var(--f-bric); font-stretch: 75%; font-weight: 700; font-size: 28px; line-height: 1; margin: 0 0 4px 6px; }
.odo { display: inline-flex; font-family: var(--f-bric); font-stretch: 75%; font-weight: 800; font-size: 100px; line-height: .8; font-variant-numeric: tabular-nums; }
.hane { display: inline-block; height: .8em; overflow: hidden; }
.odo-serit { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -.8em)); transition: transform var(--d-birak) var(--e-birak); }
.odo-serit > span { display: block; height: .8em; line-height: .8; }
.odo-serit > span:empty { width: 0; }
.fiyat-not { font-size: 14px; min-height: 21px; margin-top: 16px; }
.plan-ozet { font-size: 15px; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.plan li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.plan li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.plan .dugme { margin-top: auto; align-self: flex-start; }
.plan.one-cikan { box-shadow: inset 0 0 0 2px var(--murekkep); }
[data-donem="yillik"] .aylik-goster { display: none; }
[data-donem="aylik"] .yillik-goster { display: none; }
@media (min-width: 900px) { .plan { grid-column: span 4 !important; } }

.tablo-karo { padding: 8px 20px 12px; overflow-x: auto; }
@media (min-width: 720px) { .tablo-karo { padding: 12px 28px 16px; } }
.tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablo caption { text-align: left; padding: 16px 0 8px; font-family: var(--f-bric); font-weight: 700; font-size: 22px; line-height: var(--lh-orta); letter-spacing: -0.02em; }
.tablo th, .tablo td { text-align: left; padding: 14px 8px; border-bottom: 1px solid var(--ayrac); vertical-align: top; }
.tablo tr:last-child th, .tablo tr:last-child td { border-bottom: 0; }
.tablo thead th { font-family: var(--f-bric); font-weight: 700; font-size: 17px; }
.tablo tbody th { font-weight: 500; color: var(--ikincil); }
.tablo td { font-weight: 600; }
.tablo .yok { color: var(--ucuncul); font-weight: 500; }
.tablo svg { width: 16px; height: 16px; vertical-align: -2px; }
@media (max-width: 599px) {
  .tablo { font-size: 13px; }
  .tablo th, .tablo td { padding: 12px 4px; }
  .tablo thead th { font-size: 14px; }
  .tablo tbody th { width: 40%; }
}
.notlar-karo { padding-top: 24px; padding-bottom: 24px; }
.notlar { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.notlar li { display: flex; gap: 12px; color: var(--ikincil); font-size: 15px; }
.notlar li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ucuncul); margin-top: 9px; }

/* ---------- Download page ---------- */
.indir-karo { gap: 24px; }
.indir-karo .eylemler { margin-top: auto; }
.gereksinim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 599px) { .gereksinim { grid-template-columns: 1fr; } }
.gereksinim > div { background: var(--kart); border-radius: var(--kose-ic); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.gereksinim .dar { font-size: 40px; line-height: var(--lh-dis); }
.gereksinim .ikincil { font-size: 14px; }
.neden-karo { gap: var(--bas-alt); }
.yol { font-weight: 600; color: var(--murekkep); }

.kur-karo { padding: 12px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .kur-karo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 14px; } }
@media (max-width: 959px) { .kur-sahne-kap { order: -1; } }
.kur-adimlar { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.kur-adim {
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; color: inherit;
  border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px;
  transition: background-color .25s;
}
.kur-adim:hover { background: color-mix(in srgb, var(--kart) 60%, transparent); }
.kur-adim[aria-pressed="true"] { background: var(--kart); }
.kur-no { font-size: 44px; line-height: .8; color: var(--ucuncul); transition: color .25s; }
.kur-adim[aria-pressed="true"] .kur-no { color: var(--murekkep); }
.kur-ad { display: block; font: 700 18px/1.2 var(--f-bric); letter-spacing: -.01em; }
.kur-metin { display: block; color: var(--ikincil); font-size: 15px; margin-top: var(--bas-alt); }
.kur-cubuk { grid-column: 2; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--ayrac); overflow: hidden; display: none; }
.hareket .kur-adim[aria-pressed="true"] .kur-cubuk { display: block; }
.kur-cubuk i { display: block; height: 100%; background: var(--murekkep); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.kur-sahne-kap { position: relative; background: var(--zemin); border-radius: 16px; min-height: 400px; overflow: hidden; }
.kur-sahne { position: absolute; inset: 0; }
.kur-ekran { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px 28px 72px; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s; }
.kur-sahne[data-adim="0"] [data-ekran="0"], .kur-sahne[data-adim="1"] [data-ekran="1"],
.kur-sahne[data-adim="2"] [data-ekran="2"], .kur-sahne[data-adim="3"] [data-ekran="3"] { visibility: visible; opacity: 1; }

.dmg-dosya { display: flex; align-items: center; gap: 18px; background: var(--yuzey); border-radius: 18px; padding: 22px 24px; width: min(100%, 440px); }
.dmg-ikon { position: relative; width: 48px; flex: none; color: var(--murekkep); }
.dmg-ikon svg { width: 48px; height: 58px; display: block; }
.dmg-ikon b { position: absolute; left: 0; right: 4px; bottom: 9px; text-align: center; font: 800 10px/1 var(--f-bric); }
.dmg-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dmg-ad { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kur-ind { display: none; }
.ilerleme { display: block; height: 6px; border-radius: 3px; background: var(--kart); overflow: hidden; }
.ilerleme i { display: block; height: 100%; background: var(--murekkep); transform-origin: left center; }

.finder, .ayarlar { width: min(100%, 480px); background: var(--yuzey); border-radius: 14px; box-shadow: 0 0 0 1px var(--ayrac); overflow: hidden; }
.finder-govde { display: flex; align-items: center; justify-content: space-around; gap: 12px; padding: 32px 20px 36px; }
.finder-uyg, .finder-klasor { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; }
.finder-uyg img { width: 84px; height: 84px; }
.finder-klasor svg { width: 84px; height: 70px; color: color-mix(in srgb, var(--murekkep) 20%, var(--yuzey)); }
.finder-ok { color: var(--ucuncul); }
.finder-ok svg { width: 28px; height: 28px; }
.ayar-govde { padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ayar-engel { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.ayar-engel svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ayar-dugme { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 9px; background: var(--kart); box-shadow: inset 0 0 0 1px var(--ayrac); font-size: 13.5px; font-weight: 600; align-self: flex-end; transition: transform var(--d-birak) var(--e-birak), background-color .2s, color .2s; }
.izinler { width: min(100%, 440px); background: var(--yuzey); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.izinler ul { list-style: none; display: flex; flex-direction: column; }
.izinler li { display: flex; justify-content: space-between; align-items: center; height: 44px; border-bottom: 1px solid var(--ayrac); font-size: 14.5px; font-weight: 500; }
.anahtar { width: 38px; height: 22px; border-radius: 11px; background: var(--murekkep); position: relative; transition: background-color .25s; }
.anahtar i { position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: var(--yuzey); transition: transform var(--d-birak) var(--e-birak); }
.model { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; color: var(--ikincil); margin-top: 6px; }

/* Download walkthrough in motion (js/site.js sets data-oynat on the active screen) */
.hareket .kur-sahne:not([data-oynat]) .ilerleme i { transform: scaleX(0); }
.hareket .kur-sahne[data-oynat] [data-ekran="0"] .ilerleme i { animation: doldur 1.9s cubic-bezier(.3, .1, .3, 1) both; }
.hareket .kur-sahne[data-oynat] [data-ekran="0"] .kur-bitti { animation: belir .2s 1.9s both; }
.hareket .kur-sahne[data-oynat] [data-ekran="0"] .kur-ind { display: inline; animation: kaybol .1s 1.9s both; }
.hareket .kur-sahne[data-oynat] [data-ekran="0"] .kur-bitti { position: absolute; }
.hareket .kur-sahne[data-oynat] [data-ekran="1"] .finder-uyg img { animation: surukle 2.2s .4s both; }
.hareket .kur-sahne[data-oynat] [data-ekran="1"] .finder-klasor svg { animation: kabul .7s 1.9s both; }
.hareket .kur-sahne[data-oynat] [data-ekran="2"] .ayar-dugme { animation: tikla .5s 1.2s both; }
.hareket .kur-sahne[data-oynat] [data-ekran="3"] .anahtar { animation: anahtar-zemin .01s both; }
.hareket .kur-sahne[data-oynat] [data-ekran="3"] .anahtar i { animation: anahtar-topuz var(--d-birak) var(--e-birak) both; }
.hareket .kur-sahne[data-oynat] [data-ekran="3"] [data-izin="0"] .anahtar, .hareket .kur-sahne[data-oynat] [data-ekran="3"] [data-izin="0"] .anahtar i { animation-delay: .5s; }
.hareket .kur-sahne[data-oynat] [data-ekran="3"] [data-izin="1"] .anahtar, .hareket .kur-sahne[data-oynat] [data-ekran="3"] [data-izin="1"] .anahtar i { animation-delay: 1.1s; }
.hareket .kur-sahne[data-oynat] [data-ekran="3"] [data-izin="2"] .anahtar, .hareket .kur-sahne[data-oynat] [data-ekran="3"] [data-izin="2"] .anahtar i { animation-delay: 1.7s; }
.hareket .kur-sahne[data-oynat] [data-ekran="3"] .model .ilerleme i { animation: doldur 2.4s 2.2s cubic-bezier(.3, .1, .3, 1) both; }
@keyframes doldur { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes kaybol { to { opacity: 0; visibility: hidden; } }
@keyframes surukle {
  0% { transform: translate(0, 0) scale(1); }
  12% { transform: translate(0, -4px) scale(1.06); }
  70% { transform: translate(var(--surukle, 190px), -10px) scale(.9); opacity: 1; }
  80% { transform: translate(var(--surukle, 190px), 6px) scale(.4); opacity: 0; }
  81% { transform: translate(0, 0) scale(1); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes kabul { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes tikla { 0% { transform: scale(1); } 40% { transform: scale(.94); background: var(--murekkep); color: var(--zemin); } 100% { transform: scale(1); background: var(--murekkep); color: var(--zemin); } }
@keyframes anahtar-zemin { from { background: var(--ayrac); } to { background: var(--murekkep); } }
@keyframes anahtar-topuz { from { transform: translateX(-16px); } to { transform: translateX(0); } }

/* ---------- Prose (legal, changelog, licenses) ---------- */
.metin-karo { padding: 28px 20px; }
@media (min-width: 720px) { .metin-karo { padding: 44px 48px; } }
.metin { max-width: 46em; }
.metin h2 { font-size: 26px; line-height: var(--lh-orta); letter-spacing: -0.02em; margin: 40px 0 var(--bas-alt); font-weight: 800; }
.metin h2:first-child { margin-top: 0; }
.metin h3 { font-size: 19px; line-height: var(--lh-orta); margin: 32px 0 var(--bas-alt); font-weight: 700; }
.metin p, .metin li { color: var(--ikincil); }
.metin p + p, .metin ul + p { margin-top: 16px; }
.metin ul { padding-left: 20px; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.metin strong { color: var(--murekkep); }
.taslak {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--ters); color: var(--ters-ustu); border-radius: var(--kose); padding: 18px 22px; margin-bottom: var(--bosluk);
  font-weight: 600;
}
.taslak svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.lisans-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lisans-tablo th, .lisans-tablo td { text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--ayrac); vertical-align: top; }
.lisans-tablo thead th { color: var(--ucuncul); font-weight: 600; font-size: 13px; }
.lisans-tablo td:first-child { font-weight: 600; color: var(--murekkep); }
.lisans-tablo td { color: var(--ikincil); overflow-wrap: anywhere; }
.surum { display: grid; gap: 8px 32px; }
@media (min-width: 900px) { .surum { grid-template-columns: 220px 1fr; } }
.surum .dar { font-size: 72px; line-height: .85; }
.surum .etiket { margin-top: var(--bas-alt); }
.yok-karo { min-height: 60vh; justify-content: center; align-items: flex-start; gap: 24px; }
.yok-karo .karo-baslik { font-size: 34px; }
.yok-karo .dar { font-size: clamp(120px, 22vw, 260px); line-height: .8; }

/* Color spread (View Transitions): new colors grow out of the picked swatch */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: renk-yay .7s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes renk-yay { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); } }

/* ---------- Phone ---------- */
@media (max-width: 719px) {
  :root { --bas-alt: 12px; }
  .masaustu { padding: 12px; gap: 12px; }
  .pencereler { height: 252px; }
  .pencere-govde { padding: 12px 13px 13px; }
  .soyleyis { font-size: 16px; line-height: 24px; }
  .sozler { min-height: 96px; }
  .demo-alt { gap: 12px; }
  .demo-sekme { align-self: stretch; }
  .demo-sekme button { flex: 1; padding: 0 6px; font-size: 13px; }
  .kod { font-size: 11.5px; }
  .gizli-karo { gap: 24px; padding: 20px; }
  .sayac-sayi { font-size: 84px; }
  .adim-izi { margin-top: 16px; }
  .gizli-sahne { grid-template-columns: minmax(0, 1fr) 22px 62px; grid-template-rows: 44px auto auto; min-height: 0; }
  .cihaz-kutu { border-radius: 22px; }
  .cihaz-ust { padding: 0 14px; font-size: 12px; }
  .serit { padding: 4px 14px 14px; gap: 8px; }
  .ses-n { width: 18px; height: 18px; margin-left: 2px; }
  .serit-dalga { height: 26px; gap: 5px; }
  .serit-dalga i { width: calc(var(--b) * .8); height: calc(var(--b) * .8); }
  .serit-metin { font-size: 15px; padding: 12px 13px; }
  .serit-ust { font-size: 12px; }
  .cip { display: none; }
  .baglanti { margin: 0 2px; }
  .sunucu { padding: 10px 2px; font-size: 10.5px; border-radius: 12px; gap: 6px; }
  .istekler { gap: 3px; }
  .istekler i { width: 12px; height: 12px; border-radius: 3.4px; }
  .sunucu-sayac { font-size: 17px; }
  .sohbet { min-height: 0; }
  .sohbet-akis { padding: 16px 14px 10px; }
  .t-govde { grid-template-columns: minmax(0, 1fr); padding: 0 8px 8px; }
  .t-liste { display: none; }
  .t-detay { padding: 16px; }
  .t-baslik { flex-direction: column; }
  .t-ad { font-size: 23px; }
  .t-transkript { height: 360px; }
  .metre { grid-template-columns: 78px minmax(0, 1fr); }
  .zaman-karo { min-height: 0; }
  .renk-secim { gap: 32px; }
  .mini { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mini-kenar { display: none; }
  .mini-izgara { padding: 10px 10px 60px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .m-hafta { grid-column: auto; }
  .m-sayi b { font-size: 72px; }
  .mini-hap { left: 50%; }
  .bolum-baslik { padding: 0; }
  .son-cagri .dugme { align-self: flex-start; }
  .plan { min-height: 0; }
  .kur-sahne-kap { min-height: 340px; }
  .kur-ekran { padding: 20px 16px 64px; }
  .finder-govde { padding: 24px 12px 28px; }
  .finder-uyg img { width: 56px; height: 56px; }
  .finder-klasor svg { width: 56px; height: 47px; }
}

/* ---------- Reduced motion: everything still, last frame visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .dugme:active, .renk:hover, .renk:active, .demo-kontrol:active { transform: none; }
  ::view-transition-new(root) { animation: none; }
}

/* ---- sign-in (hesap-tasarimi.md §2) ---- */
.giris-kap { padding-top: 24px; }
.giris-karo { display: grid; gap: 28px; min-height: 60vh; align-content: center; }
@media (min-width: 860px) { .giris-karo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; } }
.giris-metin { display: flex; flex-direction: column; gap: 16px; max-width: 34rem; }
.giris-metin .karo-baslik { font-size: clamp(28px, 4vw, 40px); }
.giris-metin [data-durum] { display: flex; flex-direction: column; gap: 14px; }
.giris-metin [data-durum][hidden], .giris-metin [hidden] { display: none; }
.giris-google { align-self: flex-start; }
.giris-eposta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.giris-veya { width: 100%; font-size: 13px; }
.giris-girdi { flex: 1 1 14rem; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ayrac);
  background: transparent; color: var(--murekkep); font: inherit; font-size: 15px; }
.giris-girdi:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.giris-kosul { font-size: 13px; }
.giris-alt-baslik { font-size: 16px; font-weight: 700; margin-top: 12px; }
.giris-kod { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.giris-kod code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--ayrac); word-break: break-all; max-width: 100%; }
.giris-cizim .a-svg { width: 100%; max-width: 420px; height: auto; }