/* ==========================================================================
   Saya — ortak tasarım temeli (sayayazilim.com ve sayaisletme.com)
   Renkler, yazı tipleri, düzen, tipografi, düğmeler, renk tonları, bölüm
   geçişleri ve hareket. Siteye özgü bileşenler her sitenin kendi site.css'inde.
   ========================================================================== */

/* 1. Değişkenler ---------------------------------------------------------- */
/* Ölçüsü ayarlanmış yedek yazı tipleri (CLS). Fraunces/Figtree gelene kadar sistem yazı tipi asıl yazı tipinin
   genişliğinde ve satır yüksekliğinde çizilir; yazı tipi gelince satırlar yer değiştirmez. Değerler
   asıl woff2 ile yedeğin Türkçe metindeki ortalama harf genişliğinden ve hhea ölçülerinden hesaplandı.
   Yazı tipi değişirse yeniden hesaplanmalı. Sırayla: Windows/Mac/iOS (Georgia, Arial), Android (Noto Serif, Roboto). */
@font-face { font-family: "Fraunces Yedek"; src: local("Georgia");
  size-adjust: 113.82%; ascent-override: 85.93%; descent-override: 22.40%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Yedek A"; src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 108.02%; ascent-override: 90.54%; descent-override: 23.61%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Yedek"; src: local("Arial"), local("ArialMT");
  size-adjust: 94.47%; ascent-override: 100.57%; descent-override: 26.46%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Yedek A"; src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 98.48%; ascent-override: 96.47%; descent-override: 25.39%; line-gap-override: 0%; }

:root {
  /* Marka (logodan) */
  --brand: #6440F8;
  --brand-ink: #4F2FE0;
  --brand-soft: #7A62DC;
  --lavender: #B9AEF0;
  --lavender-2: #C9BEF7;
  --tint: #EFEBFF;
  --tint-2: #F7F5FF;

  /* Zemin ve metin */
  --bg: #FBFAFE;
  --cam: rgba(255, 255, 255, .76);
  --cam-kenar: rgba(36, 29, 79, .13);
  --cam-golge: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -34px rgba(36, 29, 79, .42), 0 2px 6px -3px rgba(36, 29, 79, .1);
  --ust: 70px; /* yapışkan üst bilginin yüksekliği: sahneler bunun altından başlar */
  --surface: #FFFFFF;
  --ink: #241D4F;
  --ink-2: #3D3766;
  --indigo: #352C68;
  --muted: #5A5478;
  --faint: #8A84A8;
  --line: #E4DFF3;
  --line-2: #DCD5F0;
  --grid: #EEEAF8;
  --paper-ink: #2B2A4A;
  --window-bar: #241D4F;
  --window-bar-ink: #C9C1F5;

  /* Durum renkleri */
  --ok: #1D6B3E;      --ok-bg: #E6F4EC;
  --alert: #A1281F;   --alert-bg: #FDECEC;
  --info: #352C68;    --info-bg: #EFEBFF;
  --note-bg: #FFF8D6; --note-line: #EFE3A8;
  --hash: #B45309;

  /* Yazı tipleri */
  --font-serif: "Fraunces", "Fraunces Yedek", "Fraunces Yedek A", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", "Figtree Yedek", "Figtree Yedek A", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-hand: "Caveat", "Segoe Print", cursive;

  /* Ölçüler */
  --wrap: 1240px;
  --gutter: 24px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --section-y: clamp(64px, 9vw, 112px);
  --shadow-window: 0 24px 50px -30px rgba(36, 29, 79, .45);
  --shadow-paper: 0 1px 0 var(--line), 0 18px 40px -28px rgba(36, 29, 79, .35);
}

/* 2. Temel ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  overflow-x: clip; /* anlık büyüyen süslemeler sayfayı yana kaydırmasın; sticky üst bilgiyi bozmaz */
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: #fff; }

/* 3. Düzen ---------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--white { background: var(--surface); border-top: 1px solid var(--line); }
.section--tint { background: var(--tint); }
.section--line { border-top: 1px solid var(--line); }
/* Zemin (2026-10-21, ışık zemini): desen yok; neredeyse beyaz zeminde yumuşak mor ve mavi ışık havuzları.
   Işıklar body'de, sayfa boyunca 1800 px'lik bir karo halinde tekrar eder ve bölüm sınırlarını aşar (bkz. "Işık zemini v2").
   Eski ton sınıfları zemin boyamıyor. Sabit gradyan: kaydırırken maliyeti yok. */
.kalip, .ton-krem, .ton-beyaz, .ton-lavanta, .ton-indigo, .ton-mor { --ton: transparent; background: none; }
.kalip { position: relative; isolation: isolate; }

/* Kesit çizgisi: iki açık bölüm arasında "A—A kesiti" gibi kesikli mor çizgi */
.kesit { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.kesit::before, .kesit::after { content: ""; flex: 1; border-top: 2px dashed var(--brand); }
.kesit__ok { color: var(--brand); font-weight: 500; }

/* Cam yüzeyler */
.cam-bulanik { background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.hafif .cam-bulanik { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > * { flex: 1 1 420px; min-width: 0; }
.split--top { align-items: flex-start; }
.split > .split__narrow { flex: 1 1 320px; }
.split > .split__wide { flex: 1.6 1 560px; }
.split > .split__main { flex: 1 1 520px; }
.split > .split__side { flex: 1 1 440px; }
.h2--narrow { max-width: 760px; }
.others { padding-block: 48px 120px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; }
.card.case-feature { flex-direction: row; flex-wrap: wrap; gap: 32px; align-items: center; padding: 36px; }
.case-feature__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.case-feature__ba { flex: 1 1 360px; }
.card .case-feature__quote { font-size: 28px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 40px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 20px; }

/* 4. Tipografi ------------------------------------------------------------ */
.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.eyebrow--muted { color: var(--muted); }
.display {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.04; letter-spacing: -.028em;
}
.display--md { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; }
.h2 { font-family: var(--font-serif); font-size: clamp(24px, 2.5vw, 33px); line-height: 1.1; letter-spacing: -.025em; }
.h3 { font-family: var(--font-serif); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.15; letter-spacing: -.01em; }
.em { font-style: italic; color: var(--brand); }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); max-width: 620px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.hand { font-family: var(--font-hand); color: var(--paper-ink); }
.small { font-size: 15px; }
.caption { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.stack-sm > * + * { margin-top: 8px; }
.stack > * + * { margin-top: 20px; }
.prose p + p { margin-top: 16px; }

/* Düğmeler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 16px; line-height: 1.2; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-ink); color: #fff; }
.btn--ghost { border-color: var(--indigo); color: var(--indigo); background: transparent; }
.btn--ghost:hover { background: var(--indigo); color: #fff; }
.btn--sm { padding: 11px 20px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { font-weight: 600; color: var(--brand); }
.link-arrow:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 4px; }


/* Ortak kimlik bileşenleri: halka işaretleri, defter, yapışkan not, program penceresi, kartlar, SSS, sayfa sonu çağrıları, formlar, üst/alt bilgi */
/* Logodan gelen halka işaretleri: aynı bilginin defterden ekrana yolculuğu */
.halka {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lavender);
  vertical-align: middle;
}
.halka--sm { width: 18px; height: 18px; font-size: 10px; }

/* Rozetler ve çipler */
.badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--alert { background: var(--alert-bg); color: var(--alert); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--brand { background: var(--brand); color: #fff; }
.badge--sm { font-size: 12px; padding: 2px 9px; }
.chip { display: inline-block; font-family: var(--font-mono); font-size: 14px; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line-2); color: var(--indigo); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* Defter (kâğıt) */
.defter {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, transparent 52px, var(--lavender-2) 52px, var(--lavender-2) 54px, transparent 54px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #E2DCF7 43px, #E2DCF7 44px);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 18px 24px 22px 72px;
  font-family: var(--font-hand); font-size: 27px; line-height: 44px; color: var(--paper-ink);
  box-shadow: var(--shadow-paper);
}
.defter--tilt { transform: rotate(-.6deg); }
.defter__title { font-weight: 700; font-size: 32px; }
.defter .ul { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.defter .circled { border: 2px solid var(--brand); border-radius: 50%; padding: 0 8px; }

/* Yapışkan not (müşterinin sesi) */
.note {
  background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 4px;
  padding: 10px 16px; max-width: 290px;
  font-family: var(--font-hand); font-size: 24px; line-height: 1.2; color: var(--paper-ink);
  transform: rotate(-3deg); box-shadow: 0 12px 24px -14px rgba(36, 29, 79, .4);
}

/* Program penceresi */
.window { background: var(--cam); border: 1px solid var(--cam-kenar); border-radius: var(--radius); overflow: hidden; box-shadow: var(--cam-golge); }
.window__bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--window-bar); color: var(--window-bar-ink);
  font-family: var(--font-mono); font-size: 13px;
}
.window__bar--light { background: var(--tint-2); color: var(--muted); border-bottom: 1px solid var(--grid); }
/* Saya OS: renkli noktalar yerine solda logo, sağda küçült / büyüt / kapat */
.window__dot { display: none; }
.window__bar::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: url("/img/saya-isaret-koyu-zemin.svg") center / contain no-repeat; }
.window__bar::after {
  content: ""; flex: 0 0 auto; width: 86px; height: 20px; margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 20'%3E%3Crect width='26' height='20' rx='4' fill='%23352C68'/%3E%3Crect x='30' width='26' height='20' rx='4' fill='%23352C68'/%3E%3Crect x='60' width='26' height='20' rx='4' fill='%23C2417A'/%3E%3Cpath d='M9 13h8M39 6h8v8h-8zM69 6l8 8M77 6l-8 8' stroke='white' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.window__title { margin-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--grid); font-size: 14px; font-weight: 600; }
.window__tab { padding: 6px 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.window__tab.is-active { border-radius: 6px; background: var(--tint); color: var(--indigo); }
.window__foot { padding: 10px 24px; border-top: 1px solid var(--grid); }

/* Kartlar */
.card { background: var(--cam); border: 1px solid var(--cam-kenar); box-shadow: var(--cam-golge); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.card--white { background: var(--surface); }
a.card { transition: border-color .15s, transform .15s, box-shadow .15s; }
a.card:hover { border-color: var(--lavender); color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(36, 29, 79, .5); }
.card__meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; }
.card__title { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; }
.card__foot { margin-top: auto; color: var(--brand); font-weight: 600; font-size: 15px; }
.before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 14px; }
.before-after__item { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.before-after__item--after { background: var(--tint); border-color: var(--tint); font-weight: 600; }
.before-after__label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 400; }
.before-after__item--after .before-after__label { color: var(--brand); }
.card .hand { font-size: 25px; }

/* SSS */
.faq { border-top: 1.5px solid var(--indigo); }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { font-size: 19px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--brand); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; color: var(--muted); }

/* Sayfa sonu çağrıları: her sayfada bir program penceresi (uyarı, sihirbaz, defter, yeni ikon) */
.cta { padding-block: 88px 96px; }
.cta__title { font-family: var(--font-serif); font-size: clamp(24px, 2.5vw, 34px); line-height: 1.1; letter-spacing: -.025em; }
.cta__text { margin-top: 12px; color: var(--muted); }
.btn--sq { border-radius: var(--radius-sm); padding: 11px 18px; font-size: 15px; }
.btn--off, .btn--off:hover { background: #F2F0F7; border-color: var(--line-2); color: var(--faint); font-weight: 500; cursor: not-allowed; }

/* 1 · Uyarı penceresi */
.cta-dialog { position: relative; max-width: 700px; margin: 0 auto 36px; background: var(--cam); border: 1px solid var(--cam-kenar); border-radius: 10px; box-shadow: var(--cam-golge); }
.cta-dialog .appwin__bar { border-radius: 10px 10px 0 0; }
.cta-dialog__x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; border-radius: 4px; background: #C2417A; color: #fff; font-size: 11px; }
.cta-dialog__body { display: flex; gap: 22px; padding: 30px 32px 26px; }
.cta-dialog__icon { flex: 0 0 auto; }
.cta-dialog__file { margin-top: 14px; padding: 8px 12px; border-radius: 6px; background: var(--tint-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cta-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; background: var(--tint-2); border-top: 1px solid var(--grid); border-radius: 0 0 10px 10px; }
.cta-dialog__actions .btn--off { margin-right: auto; }
.cta-dialog__joke { position: absolute; left: 24px; bottom: -44px; font-size: 23px; transform: rotate(-3deg); }
@media (max-width: 560px) {
  .cta-dialog__body { flex-direction: column; gap: 14px; padding: 22px; }
  .cta-dialog__actions > * { flex: 1 1 100%; }
  .cta-dialog__joke { bottom: -40px; font-size: 21px; }
}

/* 2 · Kurulum sihirbazı */
.cta-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.cta-split__copy { flex: 1 1 340px; min-width: 0; }
.wizard { flex: 1.3 1 560px; min-width: 0; overflow: hidden; background: var(--cam); border: 1px solid var(--cam-kenar); border-radius: 10px; box-shadow: var(--cam-golge); }
.wizard__body { display: flex; flex-wrap: wrap; }
.wizard__steps { flex: 0 0 180px; list-style: none; margin: 0; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--indigo); color: #A79DDB; font-family: var(--font-mono); font-size: 13px; }
.wizard__steps li { display: flex; gap: 10px; align-items: center; }
.wizard__steps .is-active { color: #fff; }
.wizard__steps .halka { box-shadow: 0 0 0 3px var(--indigo), 0 0 0 5px #8C7AE0; }
.wizard__num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid #7A62DC; border-radius: 50%; font-size: 10px; }
.wizard__main { flex: 1 1 300px; min-width: 0; margin: 0; padding: 22px 26px 18px; border: 0; }
.wizard__q { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 18px; }
.wizard__q .caption { display: block; font-weight: 400; }
.wizard__opt { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--grid); border-radius: var(--radius-sm); font-size: 15px; cursor: pointer; }
.wizard__opt:hover { border-color: var(--lavender); }
.wizard__opt:has(:checked) { border-color: var(--brand); background: var(--tint-2); }
.wizard__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.wizard__other { display: none; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.wizard:has(input[value="diger"]:checked) .wizard__other { display: block; }
.wizard__other .input { margin-top: 4px; padding-block: 10px; font-family: var(--font-sans); }
.wizard__progress { height: 8px; margin-top: 18px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.wizard__progress span { display: block; width: 33%; height: 100%; background: var(--brand); }
.wizard__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--tint-2); border-top: 1px solid var(--grid); }
@media (max-width: 560px) {
  .wizard__steps { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; padding: 14px 16px; }
  .wizard__main { padding: 18px 16px; }
  .wizard__foot > * { flex: 1; }
}

/* 3 · Defter sayfası */
.cta-defter { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cta-defter__paper { flex: 1 1 620px; min-width: 0; transform: rotate(-.5deg); }
.cta-defter__paper:focus-within { box-shadow: 0 0 0 2px var(--lavender), var(--shadow-paper); }
.cta-defter__paper textarea {
  display: block; width: 100%; min-height: 176px; margin: 0; padding: 0; border: 0; outline: 0; resize: vertical;
  background: transparent; font: inherit; line-height: 44px; color: var(--indigo);
}
.cta-defter__paper textarea::placeholder { color: var(--faint); }
.cta-defter__foot { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
.cta-defter__foot .halka { box-shadow: 0 0 0 2px #fff; background: #fff; color: var(--brand); }
.cta-defter__note { flex: 0 1 250px; margin-top: 30px; transform: rotate(3deg); }
@media (max-width: 560px) { .cta-defter__paper { padding-left: 64px; font-size: 22px; } }

/* Breadcrumb */
.crumbs { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] { color: var(--ink); }

/* Formlar */
.form { background: var(--cam); border: 1px solid var(--cam-kenar); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -36px rgba(36, 29, 79, .45); }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field-row > .field { flex: 1 1 200px; }
.field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.input, .select {
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 13px 14px;
  font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); background: #fff; width: 100%;
}
.input:focus, .select:focus, .textarea-defter:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.textarea-defter {
  border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 16px 4px 72px; width: 100%;
  font-family: var(--font-hand); font-size: 26px; line-height: 44px; color: var(--paper-ink); resize: vertical;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, transparent 52px, var(--lavender-2) 52px, var(--lavender-2) 54px, transparent 54px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #E2DCF7 43px, #E2DCF7 44px);
  background-attachment: local;
}
.textarea-defter::placeholder { color: var(--faint); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--muted); }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.field-error { color: var(--alert); font-size: 13px; font-weight: 500; }
.input-validation-error { border-color: var(--alert); }
.validation-summary-errors ul { list-style: none; color: var(--alert); font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-radius: var(--radius); padding: 22px 24px; }
.alert-ok strong { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 400; margin-bottom: 4px; }

/* 6. Bölümler: üst bilgi ve alt bilgi ------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background-color: rgba(251, 250, 247, .92); backdrop-filter: saturate(1.4) blur(8px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
/* Logo, marka kılavuzundaki yatay logoya göre (design/marka/kilavuz): işaret = yazı boyunun 1,3 katı,
   "saya" Outfit 600 (-.02em), "yazılım" Outfit 300, boyunun ~yarısı, gri, aynı taban çizgisinde. */
.brand { --logo: 24px; display: flex; align-items: center; gap: calc(var(--logo) * .4); color: #141416; }
.brand:hover { color: #141416; }
.brand img { width: calc(var(--logo) * 1.3); height: calc(var(--logo) * 1.3); flex: none; }
.brand__name { display: inline-flex; align-items: baseline; gap: calc(var(--logo) * .2); font-family: "Outfit", system-ui, sans-serif; font-size: var(--logo); font-weight: 600; letter-spacing: -.02em; line-height: 1; text-transform: lowercase; white-space: nowrap; }
.brand__sub { font-size: .525em; font-weight: 300; letter-spacing: 0; color: #6A686D; }
.kbd { white-space: nowrap; }
@media (max-width: 480px) {
  .brand { --logo: 21px; }
  .search-btn .kbd { display: none; }
  .search-btn { width: 44px; height: 44px; justify-content: center; padding: 0; }
}
/* Üst bilgi = görev çubuğu. Marka bir programın başlık çubuğu gibi: Saya Yazılım / bulunulan sayfa (daktiloyla yazılır). */
.site-header { background-color: rgba(255, 255, 255, .92); border-bottom-color: var(--line-2); }
.site-header__inner { padding-block: 12px; }
.brand__sep { font-family: "Outfit", system-ui, sans-serif; font-size: 20px; font-weight: 300; color: #CFC7EE; }
.brand__page { display: inline-flex; align-items: center; font-family: "Outfit", system-ui, sans-serif; font-size: 17px; font-weight: 300; color: var(--brand); white-space: nowrap; }
.brand__type { animation: brand-yaz .7s steps(var(--n, 10), end) both; }
.brand__caret { width: 2px; height: 22px; margin-left: 3px; background: var(--brand); animation: brand-imlec 1s steps(1) 5 forwards; }
@keyframes brand-yaz { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* İmleç 5 kez yanıp söner ve durur (sürekli yanıp sönen öğe dikkat dağıtır) */
@keyframes brand-imlec { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
.site-header .nav a, .site-header .btn { white-space: nowrap; }
.site-header .nav a { padding-inline: 10px; }
/* Dar masaüstünde arama yalnızca simge; daha da darda sayfa adı gizlenir */
@media (max-width: 1400px) { .site-header .search-btn .kbd { display: none; } .site-header .search-btn { width: 42px; height: 42px; justify-content: center; padding: 0; } }
@media (max-width: 1240px) { .brand__sep, .brand__page { display: none; } }
.nav { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--indigo); padding: 8px 14px; border-radius: 8px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--indigo); background: var(--tint-2); }
.nav a[aria-current="page"] { color: var(--indigo); background: var(--tint); border-bottom-color: var(--brand); }
@media (min-width: 1021px) and (max-width: 1180px) { .site-header .nav a { padding-inline: 8px; } }
.header-actions { display: flex; align-items: center; gap: 10px; }
.search-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--muted); cursor: pointer; font-size: 14px;
}
.search-btn:hover { border-color: var(--lavender); color: var(--indigo); }
.kbd { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--tint); color: var(--indigo); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--indigo); cursor: pointer; align-items: center; justify-content: center; }

@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; }
  /* Telefonda menü, başlat menüsü gibi açılır */
  .nav {
    display: none; position: absolute; left: 12px; top: calc(100% + 8px); width: min(360px, calc(100% - 24px));
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: var(--surface); border: 1px solid #CFC7EE; border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(36, 29, 79, .4);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 17px; border-bottom: 0; }
  .header-actions .btn { display: none; }
}

/* Alt bilgi = Saya OS masaüstünün en altı: bağlantılar açık bir "Başlat menüsü"nde, altında koyu görev çubuğu
   (sayfa sekmeleri, bildirim alanında iletişim simgeleri ve saat). */
.site-footer { font-size: 15px; padding-block: 48px 32px; }
.baslat-menu { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); border: 1px solid var(--cam-kenar); border-bottom: 0; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .8); box-shadow: 0 -24px 50px -34px rgba(36, 29, 79, .35); }
.baslat-menu__sut { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 28px; }
.baslat-menu__sut + .baslat-menu__sut { border-left: 1px solid var(--grid); }
.baslat-menu__sut a { color: var(--ink); }
.baslat-menu__sut a:hover { color: var(--brand); }
.site-footer__head { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.site-footer .brand { --logo: 22px; }
.gorev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 56px; padding: 6px 8px; border-radius: 0 0 16px 16px; background: var(--window-bar); color: #FFFFFF; }
.gorev__baslat { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 10px; background: var(--brand); color: #FFFFFF; font-weight: 600; }
.gorev__baslat:hover { background: var(--brand-ink); color: #FFFFFF; }
.gorev__sekmeler { display: flex; gap: 2px; margin-left: 6px; }
.gorev__sekmeler a { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 10px; color: var(--window-bar-ink); font-size: 14px; }
.gorev__sekmeler a:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.gorev__sekmeler a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #FFFFFF; box-shadow: inset 0 -2px 0 #9B87FF; }
.gorev__tepsi { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .15); }
.gorev__tepsi a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; }
.gorev__tepsi a:hover { background: rgba(255, 255, 255, .1); }
.gorev__tepsi svg { width: 18px; height: 18px; fill: none; stroke: var(--window-bar-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gorev__saat { display: flex; flex-direction: column; align-items: flex-end; padding: 0 8px 0 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; color: var(--window-bar-ink); white-space: nowrap; }
.site-footer__alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 6px 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .baslat-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baslat-menu__sut:nth-child(3) { border-left: 0; }
  .baslat-menu__sut:nth-child(n+3) { border-top: 1px solid var(--grid); }
  .gorev__sekmeler { display: none; }
}
@media (max-width: 520px) {
  .baslat-menu { grid-template-columns: minmax(0, 1fr); }
  .baslat-menu__sut + .baslat-menu__sut { border-left: 0; border-top: 1px solid var(--grid); }
  .gorev__saat { display: none; }
  .gorev__baslat span { display: none; }
}
/* Sayfa içi bağlantıyla gidilen başlık yapışkan üst bilginin altında kalmasın */
main [id] { scroll-margin-top: calc(var(--ust) + 16px); }

/* Komut paleti (Ctrl K) */
.palette { width: min(640px, calc(100vw - 32px)); max-height: min(560px, 80vh); padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(36, 29, 79, .55); margin-top: 12vh; }
.palette::backdrop { background: rgba(36, 29, 79, .28); backdrop-filter: blur(2px); }
.palette__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.palette__input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 18px; color: var(--ink); background: transparent; }
.palette__list { list-style: none; margin: 0; padding: 8px; max-height: 420px; overflow-y: auto; }
.palette__group { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 10px 10px 4px; }
.palette__item a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); }
.palette__item a:hover, .palette__item.is-active a { background: var(--tint); color: var(--indigo); }
.palette__path { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.palette__empty { padding: 18px 12px; color: var(--muted); }
.palette__foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* Hata sayfası */
.error-page { min-height: 60vh; display: flex; align-items: center; }
.error-code { font-family: var(--font-mono); font-size: 14px; color: var(--brand); }

/* Yasal metinler */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--font-serif); font-size: 28px; margin-top: 36px; }
.legal p, .legal li { color: var(--ink-2); margin-top: 12px; }
.legal ul { padding-left: 20px; }
.yasal-tablo { margin-top: 16px; overflow-x: auto; }
.yasal-tablo table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.yasal-tablo th, .yasal-tablo td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.yasal-tablo thead th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.yasal-tablo tbody th { color: var(--ink); font-weight: 600; }

/* Program penceresi başlık çubuğu (masaüstü pencereleri ve sayfa sonu çağrıları) */
.appwin__bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px;
  background: var(--window-bar); color: #E8E3FF; font-family: var(--font-mono); font-size: 13px;
}
.appwin__bar img { width: 16px; height: 16px; flex: 0 0 auto; }
.appwin__exe { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Saya OS penceresi: sitedeki her "uygulama" yapısının ortak kabuğu (Denetim Masası, Ürünler, Hesaplar…) */
.oswin { background: var(--cam); border: 1px solid var(--cam-kenar); border-radius: var(--radius); overflow: hidden; box-shadow: var(--cam-golge); color: var(--ink); }
.oswin__ctrls { display: flex; gap: 4px; flex: 0 0 auto; }
.oswin__ctrls span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 20px; border-radius: 4px; background: var(--indigo); color: #E8E3FF; font-size: 10px; }
.oswin__ctrls span:last-child { background: #C2417A; color: #FFFFFF; }
.oswin__tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 8px 16px; border-bottom: 1px solid var(--grid); background: var(--tint-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.oswin__tool .kbd { margin-left: auto; }
.oswin__body { padding: clamp(18px, 2.6vw, 30px); }
.oswin__status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 7px 16px; border-top: 1px solid var(--grid); background: var(--tint-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* 8. Yardımcılar ---------------------------------------------------------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.center { text-align: center; }
.placeholder { outline: 1px dashed var(--lavender-2); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 9. Hareket -------------------------------------------------------------- */
/* Logodaki halkalardan gelen tıklama efekti (site.js ekler) */
.ripple { position: fixed; z-index: 90; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--brand); opacity: .7; animation: ripple .6s ease-out forwards; }
.ripple::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid var(--lavender); animation: ripple-outer .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes ripple-outer { from { transform: scale(.6); } to { transform: scale(1.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ripple { display: none; }
}
/* Bölümler ekrana girerken hafifçe belirir. JS yok: kaydırmaya bağlı CSS animasyonu (animation-timeline: view()).
   Desteklemeyen tarayıcıda ve hareket azaltma tercihinde içerik doğrudan görünür. Sahneler (.sahne) kendi hareketini yönetir. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(:first-child):not(.sahne) > .wrap { animation: bolum-belir linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes bolum-belir { from { opacity: 0; transform: translateY(24px); } }
/* Ekran dışındaki bölümler çizilmez (content-visibility): kaydırırken ana işlemcinin yükü yarıya iniyor
   (tools/test/akicilik_testi.py ile ölçüldü). Yer tutucu yükseklik, bölüm bir kez görününce gerçek boyuna döner.
   İlk iki bölüm ve alt bilgi hep çizilir: ilk ekranda görünürler; çizilmeyen sayılıp sonradan yerine oturunca
   sayfa açılışta kayıyordu (CLS 0,10–0,14, 2026-10-22 ölçümü). */
main > section:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* site.js açılışta bir kez .cv-olc ekler: bölümler bir kare çizilip gerçek boyları hatırlanır (contain-intrinsic-size: auto).
   Yoksa sayfa içi bağlantılar (ör. /#urunler) tahmini 900 px'lik boylarla hesaplanıp yanlış yere kayar. */
.cv-olc main > section { content-visibility: visible; }


/* Dokunmatik ekranlarda küçük bağlantılara parmak payı (WCAG 2.2 · 2.5.8: en az 24 px dokunma alanı). */
@media (pointer: coarse) {
  .oswin__status a, a.h3 { display: inline-block; padding-block: 10px; }
}

/* Başlıktaki sayfa adının harf sayısı (yazı animasyonunun adımları); CSP satır içi stile izin vermez. */
.brand__type.n-1 { --n: 1; }
.brand__type.n-2 { --n: 2; }
.brand__type.n-3 { --n: 3; }
.brand__type.n-4 { --n: 4; }
.brand__type.n-5 { --n: 5; }
.brand__type.n-6 { --n: 6; }
.brand__type.n-7 { --n: 7; }
.brand__type.n-8 { --n: 8; }
.brand__type.n-9 { --n: 9; }
.brand__type.n-10 { --n: 10; }
.brand__type.n-11 { --n: 11; }
.brand__type.n-12 { --n: 12; }
.brand__type.n-13 { --n: 13; }
.brand__type.n-14 { --n: 14; }
.brand__type.n-15 { --n: 15; }
.brand__type.n-16 { --n: 16; }
.brand__type.n-17 { --n: 17; }
.brand__type.n-18 { --n: 18; }
.brand__type.n-19 { --n: 19; }
.brand__type.n-20 { --n: 20; }
.brand__type.n-21 { --n: 21; }
.brand__type.n-22 { --n: 22; }
.brand__type.n-23 { --n: 23; }
.brand__type.n-24 { --n: 24; }

/* ==========================================================================
   Işık zemini v2 (2026-10-21): tasarım taslağına yaklaştırma. Işık sayfa çapında, kartlar gerçek cam,
   üst menü saydam, ana düğmeler parıltılı, pencere başlıkları açık cam (koyu çubuklar aydınlık havayı kesiyordu).
   ========================================================================== */
:root {
  --cam: rgba(255, 255, 255, .6);
  --cam-kenar: rgba(255, 255, 255, .85);
  --cam-golge: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(36, 29, 79, .06), 0 30px 60px -34px rgba(60, 40, 160, .38);
}
body {
  background-image:
    radial-gradient(ellipse 460px 380px at 74% 420px, rgba(127, 107, 255, .4), rgba(127, 107, 255, 0)),
    radial-gradient(ellipse 380px 330px at 96% 860px, rgba(59, 76, 240, .2), rgba(59, 76, 240, 0)),
    radial-gradient(ellipse 520px 420px at 8% 1250px, rgba(185, 174, 240, .45), rgba(185, 174, 240, 0));
  background-size: 100% 1800px;
  background-repeat: repeat-y;
}
.site-header { background-color: rgba(251, 250, 254, .55); border-bottom-color: rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(36, 29, 79, .05); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.btn--primary { box-shadow: 0 14px 30px -12px rgba(100, 64, 248, .7); }
.btn--primary:hover { box-shadow: 0 18px 34px -12px rgba(100, 64, 248, .8); }
.btn--ghost { background-color: rgba(255, 255, 255, .55); }
/* Açık cam pencere başlığı */
.appwin__bar, .window__bar { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(239, 235, 255, .65)); color: var(--ink); border-bottom: 1px solid rgba(36, 29, 79, .08); }
.window__bar::before { background-image: url("/img/saya-isaret.svg"); }
.window__bar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 20'%3E%3Crect width='26' height='20' rx='4' fill='%23E4DFF3'/%3E%3Crect x='30' width='26' height='20' rx='4' fill='%23E4DFF3'/%3E%3Crect x='60' width='26' height='20' rx='4' fill='%23C2417A'/%3E%3Cpath d='M9 13h8M39 6h8v8h-8z' stroke='%23352C68' stroke-width='1.4' fill='none'/%3E%3Cpath d='M69 6l8 8M77 6l-8 8' stroke='white' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); }
.oswin__ctrls span { background: rgba(36, 29, 79, .08); color: var(--indigo); }
.oswin__ctrls span:last-child { background: #C2417A; color: #FFFFFF; }