@font-face {
  font-family: "Stack Sans Headline";
  src: url("/assets/fonts/StackSansHeadline-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Headline";
  src: url("/assets/fonts/StackSansHeadline-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Headline";
  src: url("/assets/fonts/StackSansHeadline-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Headline";
  src: url("/assets/fonts/StackSansHeadline-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ============================================================
   VAYOS — Tasarım tokenları
   ------------------------------------------------------------
   Kaynak palet: VAYOS_2025_Renk_Paleti.pdf
   Bu dosya mevcut styles.css'in :root bloğunun YERİNE geçer.

   ÖNEMLİ: Değişken adları mevcut styles.css ile birebir aynıdır
   (--purple, --navy, --sky, --line, --muted ...). Bu sayede
   4.200 satırlık mevcut CSS'e hiç dokunmadan çalışır.
   Aşağıya yalnızca paletten gelen YENİ tonlar eklendi.

   Kural: bileşen CSS'inde ham renk kodu yazma, bu değişkenleri kullan.
   ============================================================ */

:root {
  /* ---- MEVCUT (styles.css bunları kullanıyor, adları değişmez) ---- */
  --purple: #484099;        /* palet: ana marka moru */
  --purple-dark: #332d78;   /* türetilmiş koyu ton */
  --purple-soft: #e4dfef;   /* palet */
  --purple-pale: #f1eef8;   /* türetilmiş açık zemin */
  --sky: #81c4e8;           /* palet: birincil vurgu */
  --sky-pale: #eaf6fc;      /* türetilmiş */
  --navy: #23204d;          /* palet: koyu zemin */
  --navy-soft: #393467;     /* türetilmiş */
  --green: #3cb87d;         /* palet */
  --orange: #f29f58;        /* palet */
  --red: #ef3c51;           /* palet */
  --ink: #24223c;
  --muted: #6d6a7d;
  --line: #dfddea;
  --surface: #f8f7fb;
  --white: #fff;

  --shadow-sm: 0 12px 36px rgba(35, 32, 77, 0.09);
  --shadow-md: 0 28px 74px rgba(35, 32, 77, 0.14);
  --shadow-lg: 0 36px 90px rgba(22, 18, 65, 0.28);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --container: 1240px;
  --header-height: 78px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- PALETTEN EKLENEN: mor ailesi ---- */
  --purple-ink: #3f3c59;    /* koyu mor metin */
  --purple-mid: #6868af;    /* ikincil vurgu */
  --purple-muted: #bbb4d9;  /* sönük kenarlık */
  --violet: #664199;        /* sıcak mor */
  --violet-warm: #834199;
  --violet-pink: #c887bb;   /* mor-pembe geçiş */
  --indigo: #405599;        /* mor-mavi */
  --indigo-soft: #86a3d4;

  /* ---- PALETTEN EKLENEN: mavi / arduvaz ---- */
  --sky-soft: #8fd4dc;      /* açık turkuaz */
  --slate-deep: #24353e;    /* en koyu arduvaz */
  --slate: #45687a;
  --slate-mid: #57849c;
  --slate-soft: #8aaabd;

  /* ---- PALETTEN EKLENEN: teal ---- */
  --teal: #90d1bf;

  /* ---- PALETTEN EKLENEN: durum tonları ---- */
  --orange-soft: #e8ab82;   /* yumuşak uyarı */
  --red-soft: #e88189;      /* yumuşak hata */
  --green-deep: #4a9944;    /* koyu yeşil — ZEMİN için; beyaz metinle 3.54, tek başına metin rengi OLARAK KULLANILMAZ */
  --green-ink: #37742f;     /* türetilmiş: metin güvenli yeşil. beyaz 5.67 · --lime-pale 4.89 · --purple-pale 4.95 */
  --green-soft: #afd582;    /* açık yeşil */
  --lime: #e6e26c;          /* sarı vurgu */
  --lime-pale: #e6f2dc;     /* en açık yeşil zemin */

  /* [[DOLDURULACAK: palet listesinde "f4b5" dört haneli yazılmış,
     eksik görünüyor. Muhtemelen bir amber/sarı tonu (#F4B5??).
     Tam kod gelince buraya --amber olarak eklenecek. ]] */

  /* ---- Tipografi ölçeği ---- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: clamp(34px, 5vw, 56px);
  --text-hero: clamp(38px, 6.4vw, 76px);

  /* ---- Boşluk ölçeği ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Hareket ---- */
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;

  /* ---- Katman ---- */
  --z-sticky: 40;
  --z-header: 60;
  --z-overlay: 80;
  --z-portal: 3000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}

/* ------------------------------------------------------------
   Renk kullanım rehberi (bileşen yazarken buna uy)
   ------------------------------------------------------------
   Ana eylem düğmesi ............ --purple
   Koyu bölüm zemini ............ --navy
   Koyu zemin üstü vurgu ........ --sky
   Sayfa zemini ................. --surface
   Kart zemini .................. --white
   Yumuşak vurgu zemini ......... --purple-pale
   Kenarlık ..................... --line
   Koyu zemin kenarlığı ......... rgba(255,255,255,.16)
   Ana metin .................... --ink
   İkincil metin ................ --muted

   Durum: başarı --green · uyarı --orange · hata --red
   Yumuşak rozet: --green-soft · --orange-soft · --red-soft · --lime-pale

   Modül renk kodlaması (14 modül, çizelge ve kartlarda):
     Kayıt/CRM ............ --purple
     Muhasebe ............. --indigo
     Eğitim ............... --slate-mid
     Etüt/Müfredat ........ --slate
     Ödev/Yoklama ......... --violet
     Sınav/Not ............ --violet-warm
     ÖDG .................. --purple-mid
     Rehberlik ............ --teal
     Takip ................ --sky
     Kulüp ................ --green-soft
     Sağlık ............... --red-soft
     Yemekhane ............ --orange-soft
     Belge ................ --indigo-soft
     İşletme .............. --slate-soft
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--white);
  font-family: "Stack Sans Headline", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

h1 em,
h2 em {
  color: var(--purple);
  font-style: normal;
}

button {
  color: inherit;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--navy);
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

.campaign-bar {
  position: relative;
  z-index: 42;
  min-height: 38px;
  color: var(--white);
  background: var(--navy);
}

.campaign-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
}

.campaign-inner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.campaign-inner strong {
  color: var(--white);
  font-weight: 600;
}

.campaign-inner a {
  color: var(--sky);
  font-weight: 600;
  text-decoration: none;
}

.campaign-inner a:hover {
  text-decoration: underline;
}

.campaign-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(60, 184, 125, 0.16);
}

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.91);
  border-bottom: 1px solid rgba(223, 221, 234, 0.7);
  backdrop-filter: blur(18px);
  transition: box-shadow 220ms ease, background 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 34px rgba(35, 32, 77, 0.08);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  width: 132px;
  height: auto;
}

.desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 25px;
}

.desktop-nav a,
.login-link {
  position: relative;
  color: #4d4a60;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--purple);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.login-link:hover {
  color: var(--purple);
}

.button {
  min-height: 48px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms var(--ease), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  color: var(--white);
  background: var(--purple);
  box-shadow: 0 11px 26px rgba(72, 64, 153, 0.22);
}

.button-primary:hover {
  background: var(--purple-dark);
  box-shadow: 0 15px 34px rgba(72, 64, 153, 0.3);
}

.button-secondary {
  color: var(--navy);
  background: var(--white);
  border-color: var(--line);
}

.button-secondary:hover {
  border-color: #b8b3ce;
  box-shadow: var(--shadow-sm);
}

.button-white {
  color: var(--purple);
  background: var(--white);
  box-shadow: 0 16px 38px rgba(24, 19, 72, 0.18);
}

.button-white:hover {
  color: var(--navy);
  box-shadow: 0 20px 44px rgba(24, 19, 72, 0.26);
}

.button-ghost-light {
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
}

.button-ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.button-small {
  /* Dokunma hedefi en az 44px (Apple/Google önerisi). */
  min-height: 44px;
  padding-inline: 18px;
  font-size: 14px;
}

.button-large {
  min-height: 56px;
  padding-inline: 26px;
}

.button-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.menu-button {
  width: 45px;
  height: 45px;
  margin-left: auto;
  display: none;
  place-items: center;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
}

.menu-button span {
  width: 20px;
  height: 2px;
  display: block;
  margin: 2.3px 0;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
  position: absolute;
  z-index: -1;
  top: 100%;
  right: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.99);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.mobile-menu-inner {
  display: grid;
  gap: 0;
  padding-block: 12px 22px;
}

.mobile-menu a {
  padding: 13px 3px;
  color: var(--navy);
  border-bottom: 1px solid #eceaf3;
  font-weight: 500;
  text-decoration: none;
}

.mobile-menu .button {
  margin-top: 14px;
  color: var(--white);
}

.hero {
  position: relative;
  min-height: 720px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(72, 64, 153, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 64, 153, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 78% 23%, rgba(129, 196, 232, 0.16), transparent 24%),
    var(--surface);
  background-size: 54px 54px, 54px 54px, auto, auto;
}

.hero-grid {
  position: relative;
  z-index: 2;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: 62px;
  padding-block: 70px;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.eyebrow {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 28px;
  height: 2px;
  background: currentColor;
}

.eyebrow-light {
  color: var(--sky);
}

.eyebrow-center {
  justify-content: center;
}

.hero h1 {
  max-width: 670px;
  margin-bottom: 25px;
  font-size: clamp(48px, 4.35vw, 71px);
  line-height: 0.98;
}

.hero h1 em {
  display: block;
  margin-top: 8px;
}

.hero-lead {
  max-width: 585px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-notes {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #6c687d;
  font-size: 12px;
  list-style: none;
}

.hero-notes li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-notes span {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #18794e;
  background: rgba(60, 184, 125, 0.13);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.hero-visual {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(129, 196, 232, 0.36), transparent 37%),
    linear-gradient(145deg, #373077 0%, #24204e 74%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 44px;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.visual-grid,
.final-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);
}

.product-aura {
  position: absolute;
  z-index: -1;
  top: 45%;
  left: 50%;
  width: 510px;
  height: 510px;
  background: rgba(129, 196, 232, 0.13);
  border: 1px solid rgba(129, 196, 232, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 80px rgba(129, 196, 232, 0.03);
}

.floating-insight {
  position: absolute;
  z-index: 7;
  min-width: 190px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 18px 44px rgba(10, 8, 41, 0.28);
  backdrop-filter: blur(10px);
}

.floating-insight div {
  display: grid;
}

.floating-insight strong {
  font-size: 12px;
  font-weight: 600;
}

.floating-insight small {
  color: var(--muted);
  font-size: 10px;
}

.floating-insight b {
  margin-left: auto;
  /* --green beyaz üstünde 2.52:1 idi; --purple-dark okunur kontrast verir. */
  color: var(--purple-dark);
  font-size: 15px;
}

/* Kartlar görselin ÜSTÜNE binmez (FAZ1 §C4): pencere panelin dikey
   ortasında duruyor, kartlar üstündeki ve altındaki boş banda oturuyor.
   Ölçüler .hero-visual'a göre; kart yüksekliği ~57px. */
.insight-top {
  top: 26px;
  right: 26px;
}

.insight-bottom {
  bottom: 24px;
  left: 26px;
  min-width: 172px;
}

.insight-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: var(--purple);
  background: var(--purple-pale);
  border-radius: 9px;
  font-weight: 700;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(60, 184, 125, 0.15);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.hero-orb-one {
  top: 8%;
  left: -70px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(72, 64, 153, 0.1);
}

.hero-orb-two {
  right: 34%;
  bottom: -85px;
  width: 210px;
  height: 210px;
  background: rgba(129, 196, 232, 0.08);
}

.proof-strip {
  color: var(--white);
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.proof-grid {
  min-height: 126px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 0.65fr);
  align-items: center;
}

.metric {
  min-height: 72px;
  padding-left: 35px;
  display: grid;
  align-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.metric strong {
  color: var(--white);
  font-size: 29px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.metric strong span {
  color: var(--sky);
}

.metric small {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section {
  position: relative;
  padding-block: 118px;
}

.section-heading {
  margin-bottom: 54px;
}

.section-heading h2,
.trust-copy h2,
.pricing-copy h2,
.faq-heading h2 {
  margin-bottom: 0;
  font-size: clamp(38px, 4.2vw, 58px);
}

.section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.62fr);
  align-items: end;
  gap: 88px;
}

.section-heading-split .eyebrow {
  margin-bottom: 16px;
}

.section-heading-split > p {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.section-heading.centered {
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading.centered h2 {
  margin-bottom: 19px;
}

.section-heading.centered > p:last-child {
  max-width: 670px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
}

.section-questions {
  overflow: hidden;
  background: var(--white);
}

.question-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  grid-template-rows: repeat(2, minmax(290px, 1fr));
  gap: 20px;
}

.question-card {
  position: relative;
  min-height: 315px;
  overflow: hidden;
  background: var(--purple-pale);
  border: 1px solid #e1deed;
  border-radius: var(--radius-lg);
}

.question-card-wide {
  min-height: 650px;
  grid-row: 1 / 3;
  background:
    radial-gradient(circle at 76% 72%, rgba(129, 196, 232, 0.24), transparent 34%),
    #f3f1f8;
}

.question-card-dark {
  color: var(--white);
  background:
    radial-gradient(circle at 80% 70%, rgba(129, 196, 232, 0.2), transparent 35%),
    var(--navy);
  border-color: var(--navy);
}

.question-card-sky {
  background:
    radial-gradient(circle at 82% 82%, rgba(255, 255, 255, 0.55), transparent 35%),
    var(--sky-pale);
  border-color: #d8edf8;
}

.card-copy {
  position: relative;
  z-index: 3;
  max-width: 490px;
  padding: 38px 38px 34px;
}

.question-card:not(.question-card-wide) .card-copy {
  max-width: 70%;
  padding: 31px;
}

.card-index {
  width: 34px;
  height: 26px;
  margin-bottom: 35px;
  display: grid;
  place-items: center;
  color: var(--purple);
  background: rgba(72, 64, 153, 0.11);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.question-card-dark .card-index {
  color: var(--sky);
  background: rgba(129, 196, 232, 0.12);
}

.question-card h3 {
  max-width: 430px;
  margin-bottom: 15px;
  font-size: 31px;
}

.question-card:not(.question-card-wide) h3 {
  font-size: 25px;
}

.question-card-dark h3 {
  color: var(--white);
}

.question-card p {
  max-width: 440px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 15px;
}

.question-card-dark p {
  color: rgba(255, 255, 255, 0.62);
}

.question-card a {
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.question-card-dark a {
  color: var(--sky);
}

.question-card a span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 180ms ease;
}

.question-card a:hover span {
  transform: translateX(4px);
}

.screenshot-window {
  position: absolute;
  overflow: hidden;
  background: var(--white);
  border: 5px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  box-shadow: 0 24px 48px rgba(35, 32, 77, 0.18);
}

.screenshot-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.screenshot-window-wide {
  right: -8px;
  bottom: -105px;
  width: 58%;
  height: 490px;
  transform: rotate(3deg);
}

.screenshot-finance,
.screenshot-parent {
  right: -22px;
  bottom: -98px;
  width: 44%;
  height: 340px;
  border-width: 4px;
  border-radius: 22px;
  transform: rotate(5deg);
}

.screenshot-finance {
  border-color: rgba(129, 196, 232, 0.35);
  box-shadow: 0 25px 48px rgba(3, 2, 27, 0.35);
}

.screenshot-parent {
  border-color: rgba(255, 255, 255, 0.9);
}

.section-flow {
  overflow: hidden;
  background: var(--surface);
}

.flow-line {
  position: relative;
  width: calc(66.666% - 40px);
  height: 1px;
  margin: 0 auto -1px;
  overflow: visible;
  background: #cfcadb;
}

.flow-line::before,
.flow-line::after,
.flow-line span {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--purple);
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--purple);
  transform: translateY(-50%);
}

.flow-line::before {
  left: 0;
}

.flow-line::after {
  right: 0;
}

.flow-line span {
  left: 50%;
  transform: translate(-50%, -50%);
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.flow-card {
  position: relative;
  min-height: 390px;
  padding: 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(35, 32, 77, 0.045);
  transition: transform 240ms var(--ease), box-shadow 240ms ease, border-color 240ms ease;
}

.flow-card:hover {
  border-color: #c7c1df;
  box-shadow: var(--shadow-md);
  transform: translateY(-7px);
}

.flow-card-featured {
  color: var(--white);
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 24px 54px rgba(72, 64, 153, 0.25);
}

.flow-number {
  position: absolute;
  top: 27px;
  right: 30px;
  color: #b2aec2;
  font-size: 12px;
  font-weight: 600;
}

.flow-card-featured .flow-number {
  color: rgba(255, 255, 255, 0.55);
}

.flow-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 61px;
  display: grid;
  place-items: center;
  color: var(--purple);
  background: var(--purple-pale);
  border-radius: 16px;
}

.flow-icon svg,
.solution-icon svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.flow-card-featured .flow-icon {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.flow-card h3 {
  margin-bottom: 13px;
  font-size: 25px;
}

.flow-card-featured h3 {
  color: var(--white);
}

.flow-card p {
  min-height: 74px;
  margin-bottom: 27px;
  color: var(--muted);
  font-size: 15px;
}

.flow-card-featured p {
  color: rgba(255, 255, 255, 0.7);
}

.flow-card a {
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.flow-card-featured a {
  color: var(--sky);
}

.section-product {
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}

.product-backdrop {
  position: absolute;
  top: -320px;
  right: -220px;
  width: 720px;
  height: 720px;
  background: rgba(129, 196, 232, 0.08);
  border: 1px solid rgba(129, 196, 232, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 120px rgba(72, 64, 153, 0.06);
}

.product-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 0.76fr) minmax(520px, 1.24fr);
  align-items: center;
  gap: 82px;
}

.product-copy h2 {
  margin-bottom: 20px;
  color: var(--white);
  font-size: clamp(38px, 4vw, 56px);
}

.product-copy h2 em {
  color: var(--sky);
}

.product-lead {
  margin-bottom: 35px;
  color: rgba(255, 255, 255, 0.63);
  font-size: 16px;
}

.product-tabs {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.product-tab {
  min-height: 62px;
  padding: 0 4px;
  display: grid;
  grid-template-columns: 34px 1fr 22px;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease, padding 180ms ease;
}

.product-tab span {
  font-size: 10px;
}

.product-tab b {
  font-size: 14px;
  font-weight: 500;
}

.product-tab i {
  opacity: 0;
  color: var(--sky);
  font-size: 18px;
  font-style: normal;
  transform: translateX(-5px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.product-tab:hover,
.product-tab.is-active {
  padding-left: 10px;
  color: var(--white);
}

.product-tab.is-active span {
  color: var(--sky);
}

.product-tab.is-active i {
  opacity: 1;
  transform: translateX(0);
}

.product-stage {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 48%, rgba(129, 196, 232, 0.2), transparent 37%),
    linear-gradient(145deg, #f7f6fb, #e9e7f2);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(7, 5, 31, 0.4);
}

.stage-header {
  height: 53px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid #dad7e6;
}

.stage-header > div {
  display: flex;
  gap: 6px;
}

.stage-dot {
  width: 8px;
  height: 8px;
  display: block;
  background: #c8c3d8;
  border-radius: 50%;
}

.stage-dot:first-child {
  background: var(--red);
}

.stage-dot:nth-child(2) {
  background: var(--orange);
}

.stage-dot:nth-child(3) {
  background: var(--green);
}

.stage-header small {
  color: #858195;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.stage-content {
  min-height: 548px;
  padding: 64px 52px 0;
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) minmax(250px, 1.15fr);
  align-items: center;
  gap: 38px;
}

.stage-text {
  align-self: start;
  padding-top: 40px;
}

.stage-text > span {
  display: block;
  margin-bottom: 15px;
  color: var(--purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.stage-text h3 {
  margin-bottom: 15px;
  font-size: 35px;
}

.stage-text p {
  color: var(--muted);
  font-size: 14px;
}

.stage-image-enter {
  animation: stageEnter 420ms var(--ease) both;
}

@keyframes stageEnter {
  from { opacity: 0.2; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.stage-status {
  position: absolute;
  right: 25px;
  bottom: 18px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6d687d;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(207, 202, 219, 0.75);
  border-radius: 999px;
  font-size: 9px;
  box-shadow: var(--shadow-sm);
}

.stage-status span {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
}

.section-solutions {
  background: var(--white);
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
}

.solution-card {
  position: relative;
  min-height: 430px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 240ms var(--ease), box-shadow 240ms ease;
}

.solution-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-7px);
}

.solution-top {
  display: flex;
  justify-content: space-between;
  color: currentColor;
  font-size: 11px;
  opacity: 0.62;
}

.solution-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
}

.solution-icon {
  width: 64px;
  height: 64px;
  margin: 70px 0 38px;
  display: grid;
  place-items: center;
  color: var(--purple);
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid currentColor;
  border-radius: 20px;
}

.solution-card h3 {
  margin-bottom: 13px;
  color: currentColor;
  font-size: 27px;
}

.solution-card p {
  margin-bottom: 25px;
  color: currentColor;
  font-size: 14px;
  opacity: 0.68;
}

.solution-card a {
  margin-top: auto;
  color: currentColor;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.solution-purple {
  color: var(--white);
  background: var(--purple);
  border-color: var(--purple);
}

.solution-blue {
  color: var(--navy);
  background: var(--sky);
  border-color: var(--sky);
}

.solution-light {
  color: var(--navy);
  background: var(--purple-pale);
}

.solution-navy {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

.section-mobile-app {
  padding-top: 40px;
  background: var(--white);
}

.mobile-app-panel {
  position: relative;
  min-height: 650px;
  padding: 72px 80px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: 50px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 78% 50%, rgba(129, 196, 232, 0.33), transparent 34%),
    linear-gradient(140deg, var(--purple) 0%, #342e78 72%);
  border-radius: 42px;
  box-shadow: 0 30px 76px rgba(72, 64, 153, 0.18);
}

.mobile-copy {
  position: relative;
  z-index: 4;
}

.mobile-copy h2 {
  margin-bottom: 22px;
  color: var(--white);
  font-size: clamp(39px, 4vw, 57px);
}

.mobile-copy h2 em {
  color: var(--sky);
}

.mobile-copy > p:not(.eyebrow) {
  max-width: 550px;
  margin-bottom: 29px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
}

.mobile-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.mobile-actions a {
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.mobile-copy > small {
  max-width: 560px;
  margin-top: 24px;
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  line-height: 1.6;
}

.mobile-visual {
  position: relative;
  min-height: 520px;
}

.app-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.ring-one {
  top: 16px;
  right: -40px;
  width: 470px;
  height: 470px;
}

.ring-two {
  top: 85px;
  right: 30px;
  width: 330px;
  height: 330px;
}

.custom-app-badge {
  position: absolute;
  z-index: 6;
  top: 102px;
  left: 40%;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 15px;
  box-shadow: 0 22px 44px rgba(14, 10, 56, 0.3);
}

.custom-app-badge > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--purple);
  border-radius: 10px;
  font-weight: 700;
}

.custom-app-badge div {
  display: grid;
}

.custom-app-badge strong {
  font-size: 11px;
}

.custom-app-badge small {
  color: var(--muted);
  font-size: 9px;
}

.section-rollout {
  overflow: hidden;
  background: var(--surface);
}

.rollout-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
}

.rollout-step {
  position: relative;
  padding-right: 35px;
}

.rollout-step > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--purple);
  border: 7px solid var(--purple-pale);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
}

.step-line {
  position: absolute;
  top: 22px;
  left: 45px;
  width: calc(100% - 45px);
  height: 1px;
  background: #cfcbdc;
}

.rollout-step:last-child .step-line {
  display: none;
}

.rollout-step h3 {
  margin: 26px 0 12px;
  font-size: 23px;
}

.rollout-step p {
  max-width: 245px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.section-trust {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 70%, rgba(129, 196, 232, 0.12), transparent 25%),
    var(--white);
}

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  align-items: center;
  gap: 110px;
}

.trust-copy h2 {
  margin-bottom: 22px;
}

.trust-copy > p:not(.eyebrow) {
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 17px;
}

.trust-cards {
  display: grid;
  gap: 13px;
}

.trust-card {
  padding: 25px 27px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform 200ms var(--ease), border-color 200ms ease;
}

.trust-card:hover {
  border-color: #c5bfdd;
  transform: translateX(7px);
}

.trust-check {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #18794e;
  background: rgba(60, 184, 125, 0.13);
  border-radius: 13px;
  font-size: 17px;
  font-weight: 700;
}

.trust-card h3 {
  margin-bottom: 7px;
  font-size: 20px;
}

.trust-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.section-pricing {
  padding-top: 30px;
  background: var(--white);
}

.pricing-panel {
  min-height: 525px;
  padding: 72px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
  align-items: center;
  gap: 78px;
  overflow: hidden;
  background:
    linear-gradient(rgba(72, 64, 153, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 64, 153, 0.04) 1px, transparent 1px),
    var(--purple-pale);
  background-size: 42px 42px, 42px 42px, auto;
  border: 1px solid #ded9eb;
  border-radius: 38px;
}

.pricing-copy h2 {
  margin-bottom: 20px;
}

.pricing-copy > p:not(.eyebrow) {
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 17px;
}

.pricing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.text-link {
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.pricing-visual {
  position: relative;
  height: 355px;
}

.pricing-card {
  position: absolute;
  right: 0;
  left: 0;
  min-height: 140px;
  padding: 28px 30px;
  display: grid;
  align-content: start;
  background: var(--white);
  border: 1px solid #d8d3e7;
  border-radius: 19px;
  box-shadow: var(--shadow-md);
}

.pricing-card span {
  margin-bottom: 9px;
  color: var(--purple);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-card b {
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.pricing-card i {
  margin-top: 18px;
  color: var(--purple);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.pricing-card-back {
  top: 0;
  opacity: 0.6;
  transform: scale(0.88) translateY(-6px);
}

.pricing-card-middle {
  top: 60px;
  opacity: 0.82;
  transform: scale(0.94);
}

.pricing-card-front {
  top: 132px;
  min-height: 190px;
  border-color: #c7c0df;
}

.section-faq {
  background: var(--white);
  border-top: 1px solid #f1eff6;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
  align-items: start;
  gap: 100px;
}

.faq-heading {
  position: sticky;
  top: 130px;
}

.faq-heading h2 {
  margin-bottom: 20px;
}

.faq-heading > p:not(.eyebrow) {
  margin-bottom: 27px;
  color: var(--muted);
}

.accordion {
  border-top: 1px solid var(--line);
}

.accordion-item {
  border-bottom: 1px solid var(--line);
}

.accordion-item h3 {
  margin: 0;
}

.accordion-item button {
  width: 100%;
  min-height: 80px;
  padding: 22px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  color: var(--navy);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
}

.accordion-item button i {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid #cfcbdc;
  border-radius: 50%;
}

.accordion-item button i::before,
.accordion-item button i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: var(--purple);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

.accordion-item button i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item.is-open button i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.accordion-panel {
  padding: 0 50px 25px 3px;
}

.accordion-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.final-cta {
  position: relative;
  min-height: 590px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 115%, rgba(129, 196, 232, 0.25), transparent 38%),
    linear-gradient(145deg, var(--purple) 0%, var(--navy) 76%);
}

.final-grid {
  opacity: 0.08;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.final-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding-block: 95px;
  text-align: center;
}

.final-inner h2 {
  max-width: 820px;
  margin: 0 auto 21px;
  color: var(--white);
  font-size: clamp(44px, 5.6vw, 74px);
}

.final-inner h2 em {
  color: var(--sky);
}

.final-inner > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 18px;
}

.final-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.final-inner > small {
  margin-top: 22px;
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.site-footer {
  padding-top: 76px;
  color: rgba(255, 255, 255, 0.62);
  background: #171532;
}

.footer-grid {
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 0.72fr);
  gap: 55px;
}

.brand-footer img {
  width: 137px;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  max-width: 260px;
  margin: 20px 0 9px;
  font-size: 14px;
}

.footer-brand > span {
  color: var(--sky);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 11px;
}

.footer-column h2 {
  margin-bottom: 8px;
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0;
}

.footer-column a,
.footer-button {
  padding: 0;
  color: rgba(255, 255, 255, 0.56);
  background: transparent;
  border: 0;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.footer-column a:hover,
.footer-button:hover {
  color: var(--sky);
}

.footer-bottom {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-bottom p {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.cookie-banner {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  left: 22px;
  max-width: 980px;
  margin: 0 auto;
  padding: 21px 23px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 25px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(18, 15, 56, 0.22);
  backdrop-filter: blur(15px);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner > div > span {
  color: var(--purple);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cookie-banner h2 {
  margin: 2px 0 3px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.cookie-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cookie-actions {
  display: flex;
  gap: 8px;
}

.cookie-actions .button {
  min-height: 44px;
  padding-inline: 15px;
  font-size: 11px;
}

.js-ready .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1120px) {
  .desktop-nav {
    gap: 17px;
  }

  .header-inner {
    gap: 20px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
    gap: 38px;
  }

  .hero h1 {
    font-size: clamp(46px, 5.2vw, 61px);
  }

  .hero-visual {
    min-height: 560px;
  }

  .question-card:not(.question-card-wide) .card-copy {
    max-width: 74%;
  }

  .product-grid {
    gap: 50px;
  }

  .stage-content {
    padding-inline: 37px;
    gap: 20px;
  }

  .stage-text h3 {
    font-size: 31px;
  }

  .mobile-app-panel,
  .pricing-panel {
    padding-inline: 58px;
  }

  .solution-card {
    padding: 24px;
  }

  .solution-icon {
    margin-top: 60px;
  }

  .trust-grid {
    gap: 70px;
  }

  .footer-grid {
    gap: 35px;
  }
}

@media (max-width: 980px) {
  :root {
    --header-height: 70px;
  }

  .desktop-nav,
  .header-actions {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block: 75px 64px;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero h1 {
    font-size: clamp(50px, 8vw, 70px);
  }

  .hero-visual {
    min-height: 620px;
  }

  .insight-top {
    right: 9%;
  }

  .insight-bottom {
    left: 10%;
  }

  .section-heading-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section-heading-split > p {
    max-width: 710px;
  }

  .question-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .question-card-wide {
    min-height: 570px;
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .question-card:not(.question-card-wide) {
    min-height: 430px;
  }

  .question-card:not(.question-card-wide) .card-copy {
    max-width: 93%;
  }

  .screenshot-finance,
  .screenshot-parent {
    width: 47%;
    height: 300px;
  }

  .flow-line {
    display: none;
  }

  .flow-grid {
    grid-template-columns: 1fr;
  }

  .flow-card {
    min-height: 280px;
  }

  .flow-icon {
    margin-bottom: 37px;
  }

  .flow-card p {
    min-height: auto;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-copy {
    max-width: 750px;
  }

  .product-tabs {
    grid-template-columns: repeat(5, 1fr);
    border: 0;
    gap: 8px;
  }

  .product-tab {
    min-height: 90px;
    padding: 12px !important;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
  }

  .product-tab i {
    display: none;
  }

  .product-tab.is-active {
    background: rgba(129, 196, 232, 0.13);
    border-color: rgba(129, 196, 232, 0.5);
  }

  .product-stage {
    min-height: 620px;
  }

  .stage-content {
    min-height: 568px;
    grid-template-columns: 1fr 1fr;
  }

  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mobile-app-panel {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .mobile-copy {
    max-width: 690px;
  }

  .mobile-visual {
    min-height: 510px;
    max-width: 640px;
    width: 100%;
    margin-inline: auto;
  }

  .rollout-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 55px;
  }

  .rollout-step:nth-child(2) .step-line {
    display: none;
  }

  .trust-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .trust-copy {
    max-width: 720px;
  }

  .pricing-panel {
    grid-template-columns: 1fr;
  }

  .pricing-copy {
    max-width: 720px;
  }

  .pricing-visual {
    max-width: 580px;
    width: 100%;
    margin-inline: auto;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .faq-heading {
    position: static;
    max-width: 720px;
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(2, 1fr);
    row-gap: 50px;
  }

  .footer-brand {
    grid-row: span 2;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(calc(100% - 34px), var(--container));
  }

  .campaign-inner {
    min-height: 42px;
    justify-content: flex-start;
    font-size: 10px;
  }

  .campaign-inner p {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .campaign-inner a {
    white-space: nowrap;
  }

  .brand img {
    width: 118px;
  }

  .hero-grid {
    gap: 39px;
    padding-block: 57px 46px;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
  }

  .hero h1 {
    margin-bottom: 20px;
    font-size: clamp(40px, 12.5vw, 58px);
  }

  .hero-lead {
    font-size: 16px;
    line-height: 1.55;
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-notes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
  }

  .hero-visual {
    min-height: 480px;
    border-radius: 29px;
  }

  .floating-insight {
    min-width: 153px;
    padding: 10px 11px;
  }

  .floating-insight b {
    font-size: 12px;
  }

  .insight-top {
    top: 45px;
    right: 7px;
  }

  .insight-bottom {
    bottom: 18px;
    left: 8px;
  }

  .product-aura {
    width: 340px;
    height: 340px;
  }

  .metric strong {
    font-size: 23px;
  }

  .metric small {
    font-size: 8px;
  }

  .section {
    padding-block: 82px;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .section-heading h2,
  .trust-copy h2,
  .pricing-copy h2,
  .faq-heading h2 {
    font-size: clamp(35px, 10.5vw, 48px);
  }

  .section-heading-split {
    gap: 17px;
  }

  .section-heading-split > p,
  .section-heading.centered > p:last-child {
    font-size: 15px;
  }

  .question-grid {
    grid-template-columns: 1fr;
  }

  .question-card,
  .question-card-wide,
  .question-card:not(.question-card-wide) {
    min-height: 500px;
    grid-column: auto;
  }

  .question-card .card-copy,
  .question-card:not(.question-card-wide) .card-copy {
    max-width: 100%;
    padding: 27px 26px;
  }

  .card-index {
    margin-bottom: 21px;
  }

  .question-card h3,
  .question-card:not(.question-card-wide) h3 {
    font-size: 26px;
  }

  .question-card p {
    font-size: 14px;
  }

  .screenshot-window-wide,
  .screenshot-finance,
  .screenshot-parent {
    right: 8%;
    bottom: -104px;
    width: 55%;
    height: 320px;
  }

  .flow-card {
    min-height: 310px;
    padding: 30px 27px;
  }

  .section-product {
    padding-bottom: 70px;
  }

  .product-grid {
    gap: 35px;
  }

  .product-copy h2 {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  .product-tabs {
    margin-right: -17px;
    padding-right: 17px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .product-tabs::-webkit-scrollbar {
    display: none;
  }

  .product-tab {
    min-width: 138px;
  }

  .product-stage {
    min-height: 620px;
    border-radius: 25px;
  }

  .stage-header {
    height: 47px;
  }

  .stage-content {
    min-height: 570px;
    padding: 29px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .stage-text {
    align-self: stretch;
    padding-top: 0;
  }

  .stage-text h3 {
    margin-bottom: 10px;
    font-size: 27px;
  }

  .stage-text p {
    font-size: 13px;
  }

  .stage-status {
    right: 12px;
    bottom: 10px;
  }

  .solution-grid {
    grid-template-columns: 1fr;
  }

  .solution-card {
    min-height: 350px;
  }

  .solution-icon {
    margin: 43px 0 29px;
  }

  .section-mobile-app {
    padding-top: 0;
  }

  .mobile-app-panel {
    width: 100%;
    padding: 58px 24px 0;
    border-radius: 0;
  }

  .mobile-copy h2 {
    font-size: clamp(36px, 10.8vw, 48px);
  }

  .mobile-copy > p:not(.eyebrow) {
    font-size: 15px;
  }

  .mobile-actions {
    display: grid;
    gap: 17px;
  }

  .mobile-actions .button {
    width: 100%;
  }

  .mobile-visual {
    min-height: 440px;
  }

  .custom-app-badge {
    top: 70px;
    left: 35%;
  }

  .rollout-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .rollout-step {
    padding: 0 0 0 66px;
  }

  .rollout-step > span {
    position: absolute;
    top: 0;
    left: 0;
  }

  .step-line {
    top: 45px;
    bottom: -42px;
    left: 22px;
    width: 1px;
    height: auto;
  }

  .rollout-step:nth-child(2) .step-line {
    display: block;
  }

  .rollout-step:last-child .step-line {
    display: none;
  }

  .rollout-step h3 {
    margin-top: 0;
  }

  .rollout-step p {
    max-width: none;
  }

  .trust-grid {
    gap: 38px;
  }

  .trust-copy > p:not(.eyebrow) {
    font-size: 15px;
  }

  .trust-copy .button {
    width: 100%;
  }

  .trust-card {
    padding: 21px;
    grid-template-columns: 38px 1fr;
    gap: 14px;
  }

  .trust-check {
    width: 37px;
    height: 37px;
  }

  .section-pricing {
    padding-top: 0;
  }

  .pricing-panel {
    width: 100%;
    min-height: auto;
    padding: 70px 24px 58px;
    gap: 50px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .pricing-copy > p:not(.eyebrow) {
    font-size: 15px;
  }

  .pricing-actions {
    display: grid;
  }

  .pricing-actions .button {
    width: 100%;
  }

  .pricing-visual {
    height: 315px;
  }

  .pricing-card {
    padding: 23px;
  }

  .faq-grid {
    gap: 38px;
  }

  .faq-heading .button {
    width: 100%;
  }

  .accordion-item button {
    min-height: 72px;
    padding-block: 19px;
    font-size: 16px;
  }

  .accordion-panel {
    padding-right: 20px;
  }

  .final-cta {
    min-height: 600px;
  }

  .final-inner {
    padding-block: 80px 105px;
  }

  .final-inner h2 {
    font-size: clamp(41px, 12vw, 58px);
  }

  .final-inner > p:not(.eyebrow) {
    font-size: 16px;
  }

  .final-actions {
    display: grid;
  }

  .final-actions .button {
    width: 100%;
  }

  .site-footer {
    padding-bottom: 74px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 42px 25px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .footer-bottom {
    padding-block: 20px;
    display: grid;
    gap: 6px;
  }

  .cookie-banner {
    right: 12px;
    bottom: 76px;
    left: 12px;
    padding: 18px;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .campaign-dot {
    display: none;
  }

  .campaign-inner {
    gap: 7px;
  }

  .campaign-inner p {
    max-width: 205px;
  }

  .hero-notes {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 445px;
  }

  .floating-insight {
    min-width: 143px;
  }

  .insight-icon {
    width: 27px;
    height: 27px;
  }

  .question-card,
  .question-card-wide,
  .question-card:not(.question-card-wide) {
    min-height: 520px;
  }

  .screenshot-window-wide,
  .screenshot-finance,
  .screenshot-parent {
    width: 62%;
  }

  .stage-status {
    display: none;
  }

  .mobile-visual {
    min-height: 405px;
  }

  .custom-app-badge {
    left: 28%;
    transform: scale(0.9);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   VAYOS — v2 eklenen bölümler
   Kanıt ölçeği · Bilişim Vadisi · Kapsam çizelgesi
   Okul günü · Raporlar & entegrasyon · Kampanya kapsamı
   ============================================================ */

/* --- Kanıt şeridi eklentileri --- */
.proof-stamp {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.scale-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.scale-label {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scale-rail ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scale-rail li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--muted);
  font-size: 14px;
}

.scale-rail li b {
  color: var(--purple);
  font-weight: 600;
}

/* --- Bilişim Vadisi --- */
.section-valley {
  padding-top: 0;
}

.valley-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 56px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
}

.valley-copy h2 {
  color: var(--white);
  font-size: 40px;
  line-height: 1.1;
}

.valley-copy h2 em {
  color: var(--sky);
  font-style: normal;
}

.valley-copy > p {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  max-width: 54ch;
}

.valley-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}

.text-link-light {
  color: var(--sky);
}

.valley-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.valley-facts li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
}

.valley-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--purple);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.valley-facts h3 {
  margin: 0 0 4px;
  color: var(--white);
  font-size: 17px;
}

.valley-facts p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Kapsam çizelgesi --- */
.section-board {
  background: var(--surface);
}

.board {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}

.board-scroll {
  overflow-x: auto;
}

.board-grid {
  display: grid;
  grid-template-columns: 232px repeat(6, minmax(116px, 1fr));
  min-width: 840px;
}

.board-head {
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--purple-pale);
}

.board-head-corner {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-role {
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.board-role b {
  display: block;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.board-role span {
  color: var(--muted);
  font-size: 12px;
}

.board-role[aria-pressed="true"] {
  background: var(--purple);
}

.board-role[aria-pressed="true"] b,
.board-role[aria-pressed="true"] span {
  color: var(--white);
}

.board-rowlabel {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--purple-pale);
}

.board-rowlabel .row-index {
  padding-top: 3px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
}

.board-rowlabel b {
  display: block;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.board-rowlabel small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.board-cell {
  min-height: 66px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: none;
  transition: opacity 0.25s var(--ease);
}

.board-cell.is-active {
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

.board-cell .cell-chip {
  display: block;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-sm);
  background: var(--purple-pale);
  color: var(--purple-dark);
  font-size: 12.5px;
  line-height: 1.35;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}

.board-cell.is-active:hover .cell-chip,
.board-cell.is-active:focus-visible .cell-chip {
  border-color: var(--purple);
  transform: translateY(-2px);
}

.board-cell.is-owner .cell-chip {
  border-color: var(--sky);
  background: var(--sky-pale);
  color: var(--navy);
  font-weight: 500;
}

.board-cell.is-dimmed {
  opacity: 0.22;
}

.board-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--purple-pale);
  color: var(--muted);
  font-size: 13px;
}

.board-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: block;
}

.legend-access {
  border: 1px solid var(--purple-soft);
  background: var(--purple-pale);
}

.legend-owner {
  border: 1px solid var(--sky);
  background: var(--sky-pale);
}

.board-reset {
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.board-reset:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.board-detail {
  min-height: 118px;
  padding: 22px 24px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.board-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-detail h3 {
  margin: 0 0 6px;
  font-size: 21px;
}

.board-detail p {
  margin: 0;
  color: var(--muted);
  max-width: 76ch;
}

.owner-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border: 1px solid var(--sky);
  border-radius: 999px;
  background: var(--sky-pale);
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}

/* --- Bir okul günü --- */
.section-day {
  background: var(--navy);
}

.section-day .section-heading h2,
.section-day .section-heading h2 em {
  color: var(--white);
}

.section-day .section-heading h2 em {
  color: var(--sky);
}

.section-day .section-heading > p {
  color: rgba(255, 255, 255, 0.72);
}

.section-day .eyebrow {
  color: var(--sky);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.day-slot {
  position: relative;
  padding: 26px 22px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.25s var(--ease);
}

.day-slot:hover {
  background: rgba(255, 255, 255, 0.05);
}

.day-slot::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--sky);
  transition: width 0.5s var(--ease);
}

.day-slot:hover::before {
  width: 100%;
}

.day-time {
  display: block;
  margin-bottom: 14px;
  color: var(--sky);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.day-slot h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 18px;
}

.day-slot p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.55;
}

/* --- Raporlar & entegrasyon --- */
.section-reports {
  background: var(--white);
}

.ledger {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}

.ledger::before,
.ledger::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 72px;
  pointer-events: none;
}

.ledger::before {
  left: 0;
  background: linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0));
}

.ledger::after {
  right: 0;
  background: linear-gradient(270deg, var(--white), rgba(255, 255, 255, 0));
}

.ledger-row {
  display: flex;
  gap: 10px;
  width: max-content;
  padding: 11px 0;
  animation: ledger-slide 52s linear infinite;
}

.ledger-row + .ledger-row {
  border-top: 1px solid var(--line);
}

.ledger-row:nth-child(2) {
  animation-duration: 64s;
  animation-direction: reverse;
}

.ledger-row:nth-child(3) {
  animation-duration: 58s;
}

.ledger-row span {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}

.ledger-row span.is-highlight {
  border-color: var(--purple-soft);
  background: var(--purple-pale);
  color: var(--purple-dark);
  font-weight: 500;
}

@keyframes ledger-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.integration-block {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: start;
  margin-top: 56px;
}

.integration-copy h3 {
  margin: 0 0 12px;
  font-size: 27px;
  line-height: 1.15;
}

.integration-copy p {
  margin: 0;
  color: var(--muted);
}

/* --- Kampanya kapsamı --- */
.campaign-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0 4px;
}

.scope-col {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.07);
}

.scope-col h3 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 15px;
}

.scope-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.scope-col li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.45;
}

.scope-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
}

/* Kampanya paneli KOYU MOR gradyan üstünde (--purple -> #342e78).
   Bu iki işaret metin sayılır, AA için 4.5:1 gerekiyor.
   Gradyanın açık ucunda ölçüldü: --green 2.52 · --sky 3.71 · --teal 4.07
   · --green-soft 4.27 · --sky-soft 4.26 hepsi yetersiz.
   Geçenler: --lime 5.21 · --purple-soft 5.43 · --white 7.08 */
/* 14 Eylül 2026 (Ö3): işaret U+2713 karakteriyken site yazı tipinde
   karşılığı olmadığı için işletim sistemi yedeğine düşüyordu. Artık
   iki kenarlıklı bir kutunun döndürülmesiyle ÇİZİLİYOR — hiçbir yazı
   tipine bağlı değil. Renk --lime olarak kalıyor (yukarıda ölçülen
   5.21:1 kontrast korunur). */
.scope-in li::before {
  content: "";
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--lime);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.scope-out li::before {
  content: "·";
  color: var(--purple-soft);
  font-size: 22px;
  line-height: 1;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .valley-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px;
  }

  .valley-copy h2 {
    font-size: 32px;
  }

  .integration-block {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 760px) {
  .valley-panel {
    padding: 28px 22px;
  }

  .valley-facts li {
    grid-template-columns: 62px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .campaign-scope {
    grid-template-columns: 1fr;
  }

  .day-slot {
    border-right: 0;
  }

  .board-detail {
    padding: 18px;
  }

  .scale-rail {
    gap: 10px;
  }
}

/* ============================================================
   VAYOS — v3 eklemeleri
   Üst bar · Sayfa yolu · Çizelge açılır liste · Hesaplayıcı
   Hakkımızda · Vaka çalışmaları · Teşekkür · Yasal · 404
   ============================================================ */

/* --- Üst bar --- */
.topbar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  flex-wrap: wrap;
}

.topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.topbar-phone:hover { color: var(--sky); }
.topbar-ico { color: var(--sky); }

.topbar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
}

/* .topbar-note kalktı; yerine .topbar-valley rozeti geldi (FAZ1 §D). */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.topbar-actions a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.topbar-actions a:hover { color: var(--white); }

.topbar-cta {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.topbar-cta:hover {
  background: var(--purple);
  border-color: var(--purple);
}

.desktop-nav a.is-active {
  color: var(--purple);
  font-weight: 600;
}

/* --- Sayfa yolu --- */
.crumbs {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 13px 0;
  list-style: none;
  font-size: 13.5px;
}

.crumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--muted);
}

.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--purple); }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

/* --- Sayfa başlıkları --- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 60px;
  background: var(--surface);
}

.page-hero-slim { padding: 56px 0 40px; }

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.page-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.06;
}

.page-lead {
  margin-top: 18px;
  color: var(--muted);
  font-size: 18px;
  max-width: 68ch;
}

/* --- Çizelge: açılır modül listesi --- */
.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  margin-bottom: 20px;
}

.board-views {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.board-view {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.board-view.is-on { background: var(--purple); color: var(--white); }

.board-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.board-rolechip {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.board-rolechip:hover { border-color: var(--purple); }
.board-rolechip.is-on {
  background: var(--purple-pale);
  border-color: var(--purple);
  color: var(--purple-dark);
  font-weight: 600;
}

.board-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}

.bl-item + .bl-item { border-top: 1px solid var(--line); }
.bl-item[hidden] { display: none; }

.bl-head {
  display: grid;
  grid-template-columns: 44px 1fr auto 26px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 18px 24px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.bl-head:hover { background: var(--purple-pale); }

.bl-no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--purple-pale);
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
}

.bl-head[aria-expanded="true"] .bl-no { background: var(--purple); color: var(--white); }

.bl-title b {
  display: block;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
}

.bl-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.bl-avatars { display: flex; gap: 5px; }

.bl-av {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bl-av.is-owner {
  border-color: var(--sky);
  background: var(--sky-pale);
  color: var(--navy);
}

.bl-icon { position: relative; width: 22px; height: 22px; justify-self: end; }

.bl-icon::before,
.bl-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: var(--purple);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.bl-icon::before { width: 14px; height: 2px; }
.bl-icon::after { width: 2px; height: 14px; }
.bl-head[aria-expanded="true"] .bl-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.bl-panel { padding: 0 24px 22px 86px; }

.bl-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-role {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.bl-role.is-owner { border-color: var(--sky); background: var(--sky-pale); }
.bl-role[hidden] { display: none; }

.bl-role-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bl-role-name { color: var(--purple-dark); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.bl-owner-tag {
  padding: 2px 8px;
  border: 1px solid var(--sky);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
}

.bl-role b { display: block; color: var(--navy); font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.bl-role p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.board-cross {
  margin-top: 22px;
  color: var(--muted);
  font-size: 15px;
}

.board-cross a { color: var(--purple); font-weight: 600; }

.calc-disclaimer {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  line-height: 1.5;
}

.calc-bridge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  padding: 30px;
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-lg);
  background: var(--purple-pale);
}

.calc-bridge h3 { margin: 10px 0 8px; font-size: 24px; }
.calc-bridge p { margin: 0; color: var(--muted); max-width: 62ch; }
.calc-bridge .button { margin-left: auto; }

.factor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.factor {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.factor span { display: block; margin-bottom: 12px; color: var(--purple); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.factor h3 { margin: 0 0 8px; font-size: 21px; }
.factor p { margin: 0; color: var(--muted); font-size: 15px; }

.calc-cross { margin-top: 26px; text-align: center; color: var(--muted); }
.calc-cross a { color: var(--purple); font-weight: 600; }

/* --- Hakkımızda --- */
.about-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 44px; align-items: start; }
.about-copy h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 18px; }
.about-copy p { margin-bottom: 16px; color: var(--muted); font-size: 17px; }

.about-facts {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 92px;
}

.about-facts h2 { color: var(--white); font-size: 20px; margin-bottom: 6px; }
.about-facts dl { margin: 0; }
.about-facts dl > div { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.about-facts dl > div:last-child { border-bottom: 0; }
.about-facts dt { color: rgba(255, 255, 255, 0.6); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.about-facts dd { margin: 5px 0 0; color: var(--white); font-size: 15.5px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.step { position: relative; padding: 28px 24px 32px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.step:last-child { border-right: 0; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--purple); transition: width 0.6s var(--ease); }
.step:hover::before { width: 100%; }
.step-no { display: block; margin-bottom: 12px; color: var(--purple); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.step h3 { margin: 0 0 8px; font-size: 20px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.value h3 { margin: 0 0 10px; font-size: 20px; }
.value p { margin: 0; color: var(--muted); font-size: 15px; }

.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 20px; align-items: stretch; }

.contact-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.contact-card h3,
.contact-card .contact-card-heading { margin: 20px 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.contact-card h3:first-child,
.contact-card .contact-card-heading:first-child { margin-top: 0; }
.contact-card address { font-style: normal; color: var(--navy); font-size: 16px; line-height: 1.6; }
.contact-card p { margin: 0; color: var(--navy); font-size: 16px; }
.contact-card a { color: var(--purple); font-weight: 600; }
.contact-card .button { margin-top: 24px; width: 100%; }

.contact-map { min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; }

/* --- Vaka çalışmaları --- */
.case-note {
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sky);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--muted);
  font-size: 14.5px;
  max-width: 74ch;
}

.case-list { display: grid; gap: 20px; }

.case {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.case-head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }

.case-no {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--purple);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}

.case-head h2 { margin: 0; font-size: 24px; }
.case-type { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.case-body { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 22px 0; }
.case-body h3 { margin: 0 0 10px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.case-title { margin: 0 0 8px; color: var(--navy); font-size: 17px; font-weight: 600; }
.case-before p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.case-after ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.case-after li {
  position: relative;
  padding: 11px 14px 11px 38px;
  border-radius: var(--radius-sm);
  background: var(--purple-pale);
  color: var(--purple-dark);
  font-size: 14.5px;
}

.case-after li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 17px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: rotate(-45deg);
}

.case-outcome {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: 15.5px;
}

.case-outcome strong { color: var(--purple); }

.case-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  padding: 36px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
}

.case-cta h2 { color: var(--white); font-size: 30px; margin: 0 0 10px; }
.case-cta p { margin: 0; color: rgba(255, 255, 255, 0.74); max-width: 62ch; }
.case-cta a { color: var(--sky); font-weight: 600; }
.case-cta .button { margin-left: auto; }

/* --- Teşekkürler --- */
.thanks { position: relative; overflow: hidden; padding: 80px 0 90px; background: var(--surface); }
.thanks-inner { position: relative; z-index: 2; max-width: 820px; }

.thanks-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-size: 30px;
  animation: thanks-pop 0.6s var(--ease) both;
}

@keyframes thanks-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.thanks h1 { margin: 14px 0 0; font-size: clamp(34px, 5vw, 54px); }

.thanks-steps { margin: 38px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.thanks-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.thanks-steps span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--purple-pale);
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.thanks-steps h2 { margin: 0 0 4px; font-size: 18px; }
.thanks-steps p { margin: 0; color: var(--muted); font-size: 14.5px; }

.thanks-meanwhile { margin-top: 44px; }
.thanks-meanwhile h2 { font-size: 22px; margin-bottom: 14px; }

.thanks-links, .nf-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.thanks-links a, .nf-links a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.thanks-links a:hover, .nf-links a:hover { border-color: var(--purple); transform: translateY(-2px); }
.thanks-links b, .nf-links b { display: block; color: var(--navy); font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.thanks-links span, .nf-links span { color: var(--muted); font-size: 13.5px; }

.thanks-call, .nf-help { margin-top: 30px; color: var(--muted); }
.thanks-call a, .nf-help a { color: var(--purple); font-weight: 700; }

/* --- Yasal --- */
.legal-shell { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }

.legal-nav { position: sticky; top: 92px; display: grid; gap: 4px; }
.legal-nav h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.legal-nav a { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--navy); text-decoration: none; font-size: 15px; }
.legal-nav a:hover { background: var(--purple-pale); color: var(--purple-dark); }

.legal-body article { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.legal-body article:last-child { border-bottom: 0; }
.legal-body h2 { font-size: 28px; margin-bottom: 16px; }
.legal-body h3 { font-size: 18px; margin: 22px 0 8px; }
.legal-body p { margin-bottom: 14px; color: var(--muted); font-size: 16px; max-width: 76ch; }
.legal-body ul { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 16px; }
.legal-body li { margin-bottom: 7px; }
.legal-body address { font-style: normal; color: var(--navy); line-height: 1.7; margin-bottom: 16px; }
.legal-body a { color: var(--purple); font-weight: 600; }

.legal-table { overflow-x: auto; margin-bottom: 18px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table caption { text-align: left; padding-bottom: 10px; color: var(--muted); font-size: 13.5px; }
.legal-table th, .legal-table td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.legal-table th { background: var(--purple-pale); color: var(--purple-dark); font-size: 13.5px; }
.legal-table td { color: var(--muted); }/* --- 404 --- */
.notfound { position: relative; overflow: hidden; padding: 78px 0 96px; background: var(--surface); }
.notfound-inner { position: relative; z-index: 2; max-width: 860px; }

.nf-code {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  color: var(--navy);
  font-size: clamp(76px, 13vw, 132px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.nf-zero {
  position: relative;
  display: block;
  width: 0.62em;
  height: 0.86em;
  border: 0.13em solid var(--purple);
  border-radius: 50%;
}

.nf-zero b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.1em;
  height: 0.32em;
  margin-left: -0.05em;
  border-radius: 999px;
  background: var(--sky);
  transform-origin: 50% 0;
  animation: nf-spin 3.6s linear infinite;
}

@keyframes nf-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.notfound h1 { margin: 14px 0 0; font-size: clamp(32px, 4.6vw, 50px); }
.nf-links { margin-top: 34px; }

/* --- Alt sabit çubuk --- */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.sticky-bar.is-hidden { transform: translateY(110%); }
.sticky-bar { transition: transform 0.3s var(--ease); }

.sticky-call, .sticky-demo {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.sticky-call { border: 1px solid var(--purple); background: var(--white); color: var(--purple); }
.sticky-demo { border: 0; background: var(--purple); color: var(--white); }

.footer-address {
  margin-top: 14px;
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.footer-address a { color: var(--purple); font-weight: 600; }

/* --- Responsive --- */
@media (max-width: 1080px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-facts { position: static; }
  .legal-shell { grid-template-columns: 1fr; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .legal-nav h2 { width: 100%; }
  .legal-nav a { border: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; }
  .factor-grid, .value-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2n) { border-right: 0; }
}

@media (max-width: 860px) {
  .topbar-valley, .topbar-sep, .topbar-actions a { display: none; }
  .topbar-actions { margin-left: auto; }
  .sticky-bar { display: flex; }
  body { padding-bottom: 76px; }
  .board-roles { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .board-rolechip { flex: none; }
  .bl-head { grid-template-columns: 38px 1fr 22px; gap: 12px; padding: 16px; }
  .bl-avatars { display: none; }
  .bl-panel { padding: 0 16px 18px; }
  .case-body { grid-template-columns: 1fr; gap: 20px; }
  .case { padding: 22px; }
  .case-cta { padding: 26px; }
  .case-cta .button { margin-left: 0; width: 100%; }
  .calc-bridge { padding: 24px; }
  .calc-bridge .button { margin-left: 0; width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; }
  .contact-map, .contact-map iframe { min-height: 300px; }
}

@media (max-width: 520px) {
  .page-hero { padding: 48px 0 40px; }
  
  .thanks-links, .nf-links { grid-template-columns: 1fr; }
}

.form-error {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid #E4B4B4;
  border-left: 3px solid #A32D2D;
  border-radius: var(--radius-sm);
  background: #FCEBEB;
  color: #A32D2D;
  font-size: 14.5px;
}

/* --- İletişim formu --- */
.contact-grid-wide { grid-template-columns: 0.8fr 1.2fr; }
.contact-grid-wide .contact-form-wrap { grid-column: 1 / -1; }
.contact-grid-wide .contact-map { grid-column: 1 / -1; }

.contact-form-wrap {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.contact-form-head { max-width: 62ch; margin-bottom: 24px; }
.contact-form-head h3 { margin: 10px 0 8px; font-size: 26px; }
.contact-form-head p { margin: 0; color: var(--muted); }
.contact-form-head a { color: var(--purple); font-weight: 600; }

.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-full { grid-column: 1 / -1; }

.cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-field > span { color: var(--navy); font-size: 13.5px; font-weight: 600; }
.cf-field > span em { font-style: normal; font-weight: 500; color: var(--muted); }

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  resize: vertical;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-pale);
}

.cf-field.has-error input,
.cf-field.has-error select { border-color: #A32D2D; }

.cf-error { color: #A32D2D; font-size: 12.5px; }

.cf-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  margin: 18px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
}

.cf-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--purple); }
.cf-check .cf-error { grid-column: 2; }
.cf-check.has-error span { color: #A32D2D; }
.cf-check a { color: var(--purple); font-weight: 600; }

.cf-note { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.cf-note a { color: var(--purple); font-weight: 600; }

@media (max-width: 860px) {
  .contact-grid-wide { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 22px; }
  .cf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   1. aşamada eklenen kurallar
   Mevcut kurallar değiştirilmedi, yalnızca bu blok eklendi.
   ============================================================ */

/* --- Kampanya şeridi kapatma düğmesi --- */
.campaign-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.campaign-close:hover,
.campaign-close:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.campaign-inner {
  position: relative;
  padding-right: 40px;
}

/* --- Mobil sabit çubuk: WhatsApp düğmesi --- */
.sticky-wa {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--white);
  /* --green-deep beyaz zeminde 3.54:1 — AA altı. Metin yeşili --green-ink
     (5.67:1). Denetimde yakalandı; kenarlık rengi değişmedi. */
  color: var(--green-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 420px) {
  .sticky-call,
  .sticky-wa,
  .sticky-demo { font-size: 13px; }
}

/* ============================================================
   2. aşamada eklenen kurallar — modül ızgarası ve modül sayfası
   Mevcut kurallar değiştirilmedi. Düzen .factor / .value / .case
   kartlarıyla aynı dili kullanır.
   ============================================================ */

/* --- Eksik temel düğme: .button-ghost referansta kullanılıyor ama
       hiç tanımlı değildi; açık zeminde stilsiz kalıyordu
       (çerez banner'ı, hata sayfası). --- */
.button-ghost {
  color: var(--navy);
  background: transparent;
  border-color: var(--line);
}

.button-ghost:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: var(--purple-pale);
}

/* --- Modül ızgarası: /moduller ve ana sayfadaki "Öne çıkanlar" --- */
.mods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod {
  --mod-color: var(--purple);
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.mod::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mod-color);
  opacity: 0.85;
}

.mod:hover {
  transform: translateY(-3px);
  border-color: var(--purple-muted);
  box-shadow: var(--shadow-sm);
}

.mod-link {
  display: block;
  padding: 28px 26px;
  color: inherit;
  text-decoration: none;
}

.mod-link:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -4px;
}

.mod-no {
  display: block;
  margin-bottom: 12px;
  color: var(--mod-color);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mod h3 {
  margin: 0 0 8px;
  font-size: 21px;
  color: var(--ink);
}

.mod-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.mod-more {
  display: inline-block;
  margin-top: 18px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
}

.mod:hover .mod-more span {
  display: inline-block;
  transform: translateX(3px);
  transition: transform var(--dur-fast) var(--ease);
}

/* --- Platform genelinde şeridi --- */
.section-platform { background: var(--surface); }

.platform-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-item {
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.platform-item strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 15px;
}

.platform-item span {
  color: var(--muted);
  font-size: 14px;
}

/* --- Modül sayfası --- */
.mod-features {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.mod-features li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  font-size: 16px;
}

.mod-features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mod-color, var(--purple));
}

.mod-highlight {
  padding: 24px 26px;
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-lg);
  background: var(--purple-pale);
}

.mod-highlight p { margin: 0; color: var(--purple-ink); font-size: 16px; }

.mod-highlight-label {
  margin: 0 0 8px !important;
  color: var(--purple) !important;
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-facts dd strong {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-weight: 600;
}

.about-facts dd { color: rgba(255, 255, 255, 0.72); }

.about-facts dl > div.is-responsible dt { color: var(--sky); }

.mod-owner {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(129, 196, 232, 0.18);
  color: var(--sky);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.about-facts .button { margin-top: 24px; width: 100%; }

/* --- Modüller arası gezinme --- */
.mod-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.mod-nav a { text-decoration: none; color: inherit; }

.mod-nav-prev span,
.mod-nav-next span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mod-nav-prev strong,
.mod-nav-next strong { color: var(--purple); font-size: 17px; }

.mod-nav-next { text-align: right; }

.mod-nav-all {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.mod-nav-all:hover { border-color: var(--purple); color: var(--purple); }

/* --- Modüller sayfası kapanışı --- */
.mods-cta {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: center;
  padding: 40px 44px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
}

.mods-cta h2 { margin: 0 0 10px; color: var(--white); font-size: clamp(24px, 3vw, 32px); }
.mods-cta p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 16px; }
.mods-cta-actions { display: grid; gap: 10px; }

@media (max-width: 980px) {
  .mods { grid-template-columns: repeat(2, 1fr); }
  .platform-list { grid-template-columns: repeat(2, 1fr); }
  .mods-cta { grid-template-columns: 1fr; padding: 32px 26px; }
}

@media (max-width: 620px) {
  .mods { grid-template-columns: 1fr; }
  .platform-list { grid-template-columns: 1fr; }
  .mod-nav { grid-template-columns: 1fr; text-align: left; }
  .mod-nav-next { text-align: left; }
  .mod-nav-all { justify-self: start; }
}

/* ============================================================
   3. aşamada eklenen kurallar — kapsam çizelgesi
   Çizelge artık sunucuda basılıyor; aşağıdakiler sunucu HTML'inin
   getirdiği yeni öğeler için. Mevcut kurallar değiştirilmedi.
   ============================================================ */

/* --- Modül listesinde modül sayfasına bağlantı --- */
.bl-more {
  display: inline-block;
  margin-top: 14px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.bl-more:hover { text-decoration: underline; }

/* --- Tam çizelgede satır adı da modül sayfasına gider --- */
.row-link {
  color: inherit;
  text-decoration: none;
}

.row-link:hover,
.row-link:focus-visible {
  color: var(--purple);
  text-decoration: underline;
}

/* --- Platform genelinde şeridi: çizelgede satır olmayanlar --- */
.board-platform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.board-platform-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-platform ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-platform li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 13.5px;
  cursor: default;
}

/* ============================================================
   4. aşamada eklenen kurallar
   Öne çıkanlar bölümü, okul günü iş şeridi, rapor şeridinin
   ekran okuyucu listesi. Mevcut kurallar değiştirilmedi.
   ============================================================ */

/* --- Ekran okuyucu için görünmez liste ---
   .ledger sonsuz akış olduğu için aria-hidden; rapor adları
   arama motoruna ve ekran okuyucuya bu listeyle ulaşır. --- */
.ledger-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Öne çıkanlar: /moduller ızgarasının öne çıkan hali ---
   Sütun düzeni 15 Eylül 2026'da dosya sonuna taşındı (altı kart). */
.section-featured { background: var(--surface); }

.mods-featured .mod-link { padding: 26px 22px; }
.mods-featured .mod h3 { font-size: 19px; }

.mod-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--purple-ink);
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Hero: ürün turuna giden ince metin bağlantısı --- */
.hero-alt {
  margin: 16px 0 0;
  font-size: 14.5px;
}

.hero-alt a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}

.hero-alt a:hover { text-decoration: underline; }

/* ============================================================
   7. aşamada eklenen kurallar — iletişim, harita onayı, yasal
   Mevcut kurallar değiştirilmedi.
   ============================================================ */

/* Form başlığı h3 yerine h2 (başlık hiyerarşisi) */
.contact-form-head h2 { margin: 10px 0 8px; font-size: 26px; }

/* Sunucu doğrulama hataları listesi */
.form-error ul { margin: 0; padding-left: 20px; }
.form-error li + li { margin-top: 4px; }

/* --- Harita: çerez onayı öncesi yer tutucu --- */
.map-placeholder {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      var(--surface) 0 12px,
      var(--white) 12px 24px);
}

.map-pin { font-size: 30px; line-height: 1; }

.map-placeholder p { margin: 0; color: var(--navy); font-size: 16px; }
.map-placeholder p strong { font-weight: 600; }

.map-note {
  max-width: 46ch;
  color: var(--muted) !important;
  font-size: 14px !important;
}

.map-placeholder .button { margin-top: 6px; }

.map-placeholder .text-link {
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.map-placeholder .text-link:hover { text-decoration: underline; }

/* --- İletişim kartı: WhatsApp bağlantısı --- */
/* Aynı düzeltme: --green-deep 3.54:1 idi, --green-ink 5.67:1. */
.contact-card a[href^="https://wa.me"] { color: var(--green-ink); }

@media (max-width: 620px) {
  .map-placeholder { min-height: 320px; padding: 26px 18px; }
}

/* ============================================================
   8. aşamada eklenen kurallar — hareket katmanı, WhatsApp, çerez
   Mevcut kurallar değiştirilmedi.

   İlerleyici zenginleştirme: aşağıdaki her şey JS YOKKEN de
   doğru görünür. Hareket katmanı yalnızca üstüne animasyon ekler.
   ============================================================ */

/* --- Okul günü: zaman çizgisi rayı ---
   JS yoksa ray dolu görünür (scaleX: 1). ScrollTrigger varsa
   motion.js sıfırdan başlatıp kaydırmayla doldurur. --- */
.day-rail-track {
  position: relative;
  height: 2px;
  margin-bottom: -2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.day-rail {
  display: block;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--sky), var(--teal));
}

/* Kaydırmayla dolan durak başlığı — .day-slot:hover ile aynı görünüm */
.day-slot.is-filled::before { width: 100%; }

/* --- Öne çıkan kartlar: Vanilla-tilt yerine saf CSS ---
   Tilt kütüphanesi JS bütçesi için çıkarıldı (BUILD_SPEC §8). --- */
.mods-featured .mod {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.mods-featured .mod:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--shadow-md);
}

/* --- Yüzen WhatsApp düğmesi --- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  /* #25d366 beyaz metinle 1.98:1 idi (WCAG AA altı).
     #0f7a6c beyazla 5.22:1 — WhatsApp'ın koyu marka yeşiline yakın. */
  background: #0f7a6c;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(15, 122, 108, 0.32);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 122, 108, 0.42);
}

.wa-float:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* Sabit çubukta zaten WhatsApp var; dar ekranda yüzen düğme gizlenir. */
@media (max-width: 860px) {
  .wa-float { display: none; }
}

/* --- Çerez banner'ı: kategori listesi --- */
.cookie-copy { max-width: 72ch; }

.cookie-cats {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.cookie-cat label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.cookie-cat input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--purple);
}

.cookie-cat input:disabled { cursor: not-allowed; opacity: 0.6; }

.cookie-cat span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cookie-cat b {
  display: inline-block;
  min-width: 92px;
  color: var(--navy);
  font-weight: 600;
}

@media (max-width: 720px) {
  .cookie-cat b { display: block; min-width: 0; }
}

/* --- prefers-reduced-motion: .reveal doğrudan görünür ---
   Referansın global bloğu süreleri 0.01ms'ye çekiyor ama .reveal
   öğeleri gözlemci tetiklenene kadar opacity:0 kalıyordu. Hareket
   kapalıyken içerik BEKLEMEDEN görünmeli (CLAUDE.md). --- */
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Zaman çizgisi ve durak çizgileri dolu başlar. */
  .day-slot::before { width: 100% !important; }
  .day-rail { transform: none !important; }
}

/* ============================================================
   Denetim sonrası eklenen kurallar
   ============================================================ */

/* --- Uzun kelime taşması ---
   Kullanıcıdan gelen ya da uzun bileşik terimler kart/hücre
   sınırını aşmasın. `anywhere` sözcüğü gerektiğinde her yerden
   böler; `break-word`'ün aksine kutunun min-content genişliğini
   de küçültür, ızgara hücrelerinde taşmayı önler. --- */
.mod h3,
.mod-tagline,
.mod-features li,
.bl-title b,
.bl-role b,
.bl-role p,
.board-rowlabel b,
.cell-chip,
.case-title,
.case-body p,
.contact-card address,
.contact-card p,
.cf-field span,
.cf-error,
.form-error li,
.about-facts dd,
.package-matrix th,
.package-matrix td,
.academic-table th,
.academic-table td,
.addon-table th,
.addon-table td,
.platform-item strong,
.platform-item span,
.legal-body p,
.legal-body li,
.faq-grid .accordion-panel p {
  overflow-wrap: anywhere;
}

/* ============================================================
   Kaydırma başarımı düzeltmeleri
   ------------------------------------------------------------
   Yukarıdaki kurallar korunuyor; buradakiler onları yalnızca
   gerektiği yerde geçersiz kılıyor.
   ============================================================ */

/* 1 · Lenis etkinken tarayıcının kendi yumuşatması kapanmalı.
   İkisi aynı anda açıkken Lenis her karede kaydırma konumunu
   yazıyor, tarayıcı da her yazımı ayrıca animasyona çevirip bir
   kare geriden kovalıyordu. Sınıf yalnızca Lenis çalışıyorken
   html'e ekleniyor; JS yüklenmezse yukarıdaki
   `scroll-behavior: smooth` yerinde kalır ve çapa bağlantıları
   eskisi gibi yumuşak akar. */
html.lenis,
html.lenis body {
  scroll-behavior: auto;
}

/* 2 · Yapışkan başlıktaki bulanıklık kaldırıldı.
   Arka plan zaten %91 opak olduğu için blur(18px) gözle
   seçilmiyordu, buna karşılık her kaydırma karesinde başlığın
   arkasındaki tüm şeridin yeniden bulanıklaştırılmasına yol
   açıyordu. Görünüm aynı, masraf yok. */
.site-header {
  backdrop-filter: none;
}

/* 3 · Hero ızgarası artık boyanarak değil, kaydırılarak hareket
   ediyor. Desen bir sözde öğeye taşındı: maske .visual-grid
   üzerinde sabit kalıyor, desen `transform` ile kayıyor. Böylece
   her karede tam yeniden boyama yerine yalnızca kompozit
   yapılıyor. `inset` üstteki -140px, kaymanın en büyük değeri
   olan 120px'i karşılayacak kadar pay bırakır. */
.visual-grid {
  overflow: hidden;
  background-image: none;
  will-change: opacity;
}

.visual-grid::before {
  content: "";
  position: absolute;
  inset: -140px 0 0 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: translate3d(0, var(--grid-shift, 0px), 0);
  will-change: transform;
}

/* 4 · Kalan bulanıklıklar da kaldırıldı.
   Üçünün de arka planı ≥%95 opak, yani bulanıklık gözle
   seçilmiyordu; buna karşılık .sticky-bar ile .cookie-banner
   `position: fixed` olduğu için kaydırma boyunca ekranda kalıp
   her karede arkalarındaki alanı yeniden bulanıklaştırıyordu.
   .floating-insight ise hero'nun içinde, yani zaten en yoğun
   çalışan bölgede duruyor. Görünüm aynı, masraf yok. */
.sticky-bar,
.cookie-banner,
.floating-insight {
  backdrop-filter: none;
}

/* ============================================================
   11. aşamada eklenen kurallar — masaüstü görseller, görsel
   uyarı etiketi, koyu zemin düğme kontrastı, Bilişim Vadisi
   üst boşluğu. Mevcut kurallar değiştirilmedi; bu blok
   dosyanın sonunda olduğu için eşit özgüllükte kazanır.
   ============================================================ */

/* --- Tarayıcı penceresi çerçevesi — 7 EYLÜL 2026'DA KULLANIMDAN KALKTI ---
   Yatay masaüstü görseller için vardı. Önce ürün turundan (beş sekme de
   telefona geçti), sonra hero'dan kalktı: 1790 px'lik bir ekranı 550 px
   alana koyunca %31 ölçek kalıyor ve hiçbir kesit bunu kurtarmıyor.
   Site artık her yerde mobil ekran gösteriyor.

   Kurallar silinmedi; yatay bir görsel gerekirse geri açılır.

   .browser-shell {
     overflow: hidden;
     background: var(--white);
     border: 1px solid rgba(255, 255, 255, 0.55);
     border-radius: 16px;
     box-shadow: 0 26px 60px rgba(10, 8, 41, 0.34);
   }

   .browser-bar {
     height: 30px;
     padding: 0 12px;
     display: flex;
     align-items: center;
     gap: 6px;
     background: #f1f0f6;
     border-bottom: 1px solid #dedbe9;
   }

   .browser-dot {
     width: 8px;
     height: 8px;
     display: block;
     border-radius: 50%;
     background: #c8c3d8;
   }

   .browser-dot:first-child { background: var(--red); }
   .browser-dot:nth-child(2) { background: var(--orange); }
   .browser-dot:nth-child(3) { background: var(--green); }

   .browser-screen {
     display: block;
     background: #f5f5fa;
   }

   .browser-screen img {
     width: 100%;
     height: auto;
     display: block;
   }
*/

/* --- Görsel uyarı etiketi (BUILD_SPEC §12) --- */
.media-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.media-note-light {
  color: rgba(255, 255, 255, 0.66);
}

/* --- Hero: tarayıcı penceresi + yanında telefon --- */
.hero-visual {
  display: grid;
  align-content: center;
}

/* Yanındaki telefon kalktı (FAZ1 §C4): pencere panelin tam genişliğini
   alıyor, dolayısıyla ~112px genişledi. Yatay padding yüzen kartların
   panel kenarına dayanmasına da yer bırakıyor. */
.hero-screens {
  position: relative;
  z-index: 3;
  padding: 30px 30px 26px;
}

.browser-hero {
  width: 100%;
}

/* --- Ürün turu sahnesi: çerçeve sekmeye göre değişir --- */
.stage-media {
  justify-self: end;
  align-self: end;
  overflow: hidden;
}

.stage-screen,
.stage-screen img {
  display: block;
  width: 100%;
}

/* 7 Eylül 2026: beş sekme de telefon. Yatay (.is-wide) çerçevenin
   kuralları silindi; tek çerçeve kaldığı için .is-phone niteleyicisi de
   gerekmiyor, kurallar doğrudan .stage-media üzerinde.

   Telefon BÜYÜTÜLDÜ: eskiden 306x562 sabitti ve içerik hâlâ küçük
   kalıyordu. Artık sağ sütunun izin verdiği kadar geniş (en çok 360px)
   ve yüksekliği en-boy oranıyla geliyor. */
.stage-media {
  width: 100%;
  max-width: 330px;
  aspect-ratio: 9 / 19;
  background: #0d0c18;
  border: 8px solid #151327;
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
  box-shadow: 0 28px 50px rgba(35, 32, 77, 0.24);
}

/* Görsel GENİŞLİĞE oturur, taşan alt kısmı çerçeve kırpar.
   object-fit: cover kullanılmıyor: beş görselin en-boy oranı aynı değil
   (mobil-muhasebe 1043x1467, ötekiler ~1:2,16) ve cover, oranı farklı
   olanın YANLARINI kesiyordu — geciken ödemeler ekranında başlık ve
   toplam tutar kırpılıyordu. Genişliğe oturunca yatayda hiçbir şey
   kaybolmuyor; kısa kalan görselin altında ekranın kendi zemini
   görünüyor. */
.stage-screen {
  height: 100%;
  background: #f5f5fa;
}

.stage-screen img {
  width: 100%;
  height: auto;
}

/* Uyarı etiketi .stage-status ile aynı dilde, sahnenin sol altında. */
.stage-media-note {
  position: absolute;
  z-index: 4;
  left: 25px;
  bottom: 18px;
  margin: 0;
  padding: 8px 12px;
  color: #6d687d;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(207, 202, 219, 0.75);
  border-radius: 999px;
  font-size: 9px;
  box-shadow: var(--shadow-sm);
}

/* --- Kampanya görsellerinin uyarı etiketi --- */
.app-media-note {
  margin-top: 8px;
  font-size: 10px;
}

/* --- Kurucu soruları kartlarındaki etiket --- */
.card-copy .media-note {
  margin-top: 14px;
}

/* --- Bilişim Vadisi bölümü ölçü şeridine yapışıyordu --- */
.section-valley {
  padding-top: var(--space-9);
}

/* --- Koyu zeminde düğme metni: kapsayıcının "a" kuralı .button-*
       renklerini eziyordu (.mobile-actions a, .case-cta a). Element
       + iki sınıf özgüllüğüyle geri alınıyor. --- */
a.button.button-white,
button.button.button-white {
  color: var(--purple);
  background: var(--white);
}

a.button.button-white:hover,
button.button.button-white:hover {
  color: var(--navy);
}

a.button.button-primary,
button.button.button-primary {
  color: var(--white);
}

a.button.button-secondary,
button.button.button-secondary {
  color: var(--navy);
}

a.button.button-ghost-light,
button.button.button-ghost-light {
  color: var(--white);
}

@media (max-width: 980px) {
  .hero-screens {
    padding: 26px 26px 22px;
  }

  .stage-media {
    max-width: 290px;
  }
}

@media (max-width: 720px) {
  /* Sahne dikey akışa geçtiğinde telefon ortalanır. */
  .stage-media {
    max-width: 250px;
    justify-self: center;
    align-self: center;
  }

  .stage-media-note {
    left: 12px;
    bottom: 10px;
  }
}

@media (max-width: 420px) {
  .stage-media-note {
    display: none;
  }
}

/* --- Soru havuzu bölümü (ana sayfa 9. sıra + ÖDG sayfası) --- */
.section-pool {
  background: var(--surface);
}

.pool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 34px;
}

.pool-col {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.pool-col h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.pool-col p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.pool-chips {
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
}

.pool-chips li {
  padding: 13px 15px;
  color: var(--purple-ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.pool-closing {
  margin: 24px 0 0;
  padding: 16px 20px;
  color: var(--purple-ink);
  background: var(--purple-pale);
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
}

/* --- Basılı kaynaklar (yalnızca ÖDG sayfası) --- */
.printed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 34px;
}

.printed-card {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.printed-card h3 {
  margin: 0 0 4px;
  font-size: 21px;
}

.printed-kind {
  margin: 0 0 12px;
  color: var(--purple);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.printed-card p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.printed-note {
  margin: 24px 0 0;
  padding: 18px 22px;
  color: var(--purple-ink);
  background: var(--purple-pale);
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.55;
}

.printed-note strong {
  color: var(--navy);
}

/* Fiyat sayfasındaki ikinci kapsam notu ilkinin altına iner. */

@media (max-width: 980px) {
  .pool-grid,
  .printed-grid {
    grid-template-columns: 1fr;
  }

  .pool-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pool-chips {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   12. aşama — hukuk onaylı yasal metinler (27 Ağustos 2026)
   Üç ayrı yasal sayfa, şirket künyesi ve form aydınlatması.
   Mevcut .legal-* kuralları değiştirilmedi; buraya yalnızca
   yeni düzen parçaları eklendi.
   ============================================================ */

/* --- Yasal sayfalar tek sütun; gezinme şeridi üstte --- */
.legal-shell-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
  margin-inline: auto;
  gap: 0;
}

/* .legal-nav'ın kenar çubuğu değil, yatay şerit hâli. Bağlantı
   görünümü mevcut .legal-nav a kuralından geliyor. */
.legal-nav-row {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
  padding: 14px;
  background: var(--purple-pale);
  border-radius: var(--radius-md);
}

.legal-nav-row a {
  background: var(--white);
  border: 1px solid var(--purple-soft);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

.legal-nav-row a[aria-current="page"] {
  color: var(--white);
  background: var(--purple);
  border-color: var(--purple);
}

.legal-nav-row a[aria-current="page"]:hover {
  color: var(--white);
  background: var(--purple-dark);
}

.legal-updated {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* Envanter tablosundaki gerçek anahtar adları */
.legal-body code {
  padding: 2px 6px;
  color: var(--purple-dark);
  background: var(--purple-pale);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  word-break: break-word;
}

.legal-body small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

/* --- Şirket künyesi (yasal sayfa sonu + footer) --- */
.legal-imprint {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.legal-imprint strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
}

.legal-imprint address {
  font-style: normal;
  margin: 0;
}

.legal-imprint p {
  margin: 0;
  font-size: 14px;
}

.footer-imprint {
  padding-top: 26px;
  margin-top: 10px;
}

.footer-imprint .legal-imprint {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
}

.footer-imprint .legal-imprint strong {
  color: rgba(255, 255, 255, 0.9);
}

/* --- Form altı kısa aydınlatma --- */
.cf-privacy-note {
  margin: 18px 0;
  padding: 14px 16px;
  color: var(--purple-ink);
  background: var(--purple-pale);
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.6;
}

.cf-privacy-note a {
  color: var(--purple);
  font-weight: 600;
}

@media (max-width: 720px) {
  .legal-nav-row {
    padding: 10px;
  }

  .legal-nav-row a {
    font-size: 13px;
  }
}

/* `hidden` özniteliği CSS'teki display kuralları tarafından eziliyordu:
   .cookie-cats grid, .button ise inline-flex. Çerez panelinin kapalı
   başlaması için açıkça geri alınıyor. */
.cookie-cats[hidden],
.cookie-actions .button[hidden] {
  display: none;
}

/* ============================================================
   14. aşama — 2026 paket modeli
   Fiyat sayfası öğrenci başı hesaplayıcıdan paket karşılaştırmasına
   geçti. Kullanılmayan .calc-* kuralları silindi; .calc-cross ve
   .calc-disclaimer duruyor.
   ============================================================ */

/* --- Ekran okuyucu için görünmez metin --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.section-packages { background: var(--white); }

/* --- Öğrenci bandı seçici --- */
.band-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 32px;
}

.band-picker-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}

.band-picker ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--purple-pale);
  border-radius: var(--radius-sm);
}

.band-picker a {
  display: block;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--purple-ink);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.band-picker a:hover { background: rgba(255, 255, 255, 0.7); }

.band-picker a.is-current {
  background: var(--purple);
  color: var(--white);
}

/* --- Paket kartları --- */
.package-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.package-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.package-card.is-featured {
  border-color: var(--purple);
  box-shadow: var(--shadow-sm);
}

.package-card.is-enterprise { background: var(--surface); }

.package-badge {
  align-self: flex-start;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--purple);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
}

.package-card h2 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.2;
}

.package-tagline {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.package-price { margin-top: 4px; }

.package-price-value strong {
  display: block;
  font-size: var(--text-3xl);
  line-height: 1.15;
  color: var(--ink);
}

.package-price-value .package-price-quote {
  font-size: var(--text-xl);
  color: var(--purple);
}

.package-price-meta {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.package-audience {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--purple-ink);
}

.package-lines {
  flex: 1;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: var(--text-sm);
  color: var(--muted);
}

.package-lines li { padding: 5px 0; }

.package-card .button { width: 100%; justify-content: center; }

.package-scope-note,
.package-matrix-legend,
.academic-note {
  margin: 24px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* --- Her pakette dahil olanlar --- */
.package-included {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--purple-pale);
  border-radius: var(--radius-sm);
}

.package-included-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--purple-ink);
}

.package-included ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--purple-ink);
}

.package-included li::before {
  content: "\2713";
  margin-right: 7px;
  color: var(--green-ink);
  font-weight: 700;
}

/* --- Enterprise merkez + kampüs bloğu --- */
.enterprise-note {
  margin-top: 36px;
  padding: 30px 32px;
  background: var(--navy);
  border-radius: var(--radius-md);
  color: var(--white);
}

.enterprise-note h3 {
  margin: 0 0 10px;
  font-size: var(--text-2xl);
}

.enterprise-note p {
  margin: 0 0 18px;
  color: var(--purple-soft);
  max-width: 68ch;
}

.enterprise-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.enterprise-lines li {
  padding: 16px 18px;
  background: var(--navy-soft);
  border-radius: var(--radius-sm);
}

.enterprise-lines b {
  display: block;
  font-size: var(--text-sm);
  color: var(--sky);
}

.enterprise-lines span {
  display: block;
  margin: 4px 0 6px;
  font-size: var(--text-lg);
  font-weight: 700;
}

.enterprise-lines i {
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--purple-soft);
}

.enterprise-example { font-size: var(--text-sm); }

/* --- Kapsam çizelgesi: 45 satır × 4 paket --- */
.package-matrix-wrap,
.academic-table-wrap,
.addon-table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.package-matrix-wrap:focus-visible,
.academic-table-wrap:focus-visible,
.addon-table-wrap:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

.package-matrix,
.academic-table,
.addon-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.package-matrix-caption {
  padding: 18px 20px 0;
  text-align: left;
  font-weight: 700;
  color: var(--ink);
}

.package-matrix th,
.package-matrix td,
.academic-table th,
.academic-table td,
.addon-table th,
.addon-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.package-matrix thead th,
.academic-table thead th,
.addon-table thead th {
  background: var(--purple-pale);
  color: var(--purple-ink);
  font-weight: 700;
}

.package-matrix thead th:not(:first-child),
.package-matrix tbody td { text-align: center; }

.package-matrix .is-featured { background: rgba(72, 64, 153, 0.05); }

.package-matrix-group th {
  padding: 14px 16px 8px;
  background: var(--surface);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.package-matrix tbody:last-of-type tr:last-child th,
.package-matrix tbody:last-of-type tr:last-child td { border-bottom: 0; }

.scope-yes { color: var(--green-ink); font-weight: 700; }

/* "—" isareti 1.97:1 ile neredeyse gorunmezdi; --muted 5.24:1. */
.scope-no { color: var(--muted); }

.scope-option,
.scope-soon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.scope-option {
  background: var(--purple-soft);
  color: var(--purple-ink);
}

/* "Yakında": henüz yayında değil, kabul isareti ile karismasin diye
   ayri renk ve ayri bicim. */
.scope-soon {
  background: var(--lime-pale);
  color: #46561f;
}

.package-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.package-matrix-legend b { font-weight: 700; }

/* --- Academic ve ek hizmetler --- */
.academic-block,
.addon-block { margin-bottom: 40px; }

.academic-head { margin-bottom: 20px; }

.academic-head h3,
.addon-block h3 {
  margin: 6px 0 8px;
  font-size: var(--text-3xl);
  line-height: 1.2;
}

.academic-head p,
.addon-block > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.academic-table tr.is-best { background: var(--lime-pale); }

.academic-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-ink);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
}

.academic-advantage {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  color: var(--green-ink);
  font-weight: 600;
}

@media (max-width: 1080px) {
  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .enterprise-lines { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .package-grid { grid-template-columns: 1fr; }

  .band-picker ul { width: 100%; }

  .band-picker a { padding: 9px 14px; }

  .enterprise-note { padding: 24px 20px; }
}

/* --- "Listede yoksa ekleriz" --- */
.integration-request {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--purple-pale);
  border-radius: var(--radius-md);
}

.integration-request h3 {
  margin: 0 0 8px;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--ink);
}

.integration-request p {
  margin: 0;
  max-width: 64ch;
  color: var(--purple-ink);
  font-size: var(--text-sm);
}

.integration-request .button { flex: none; }

@media (max-width: 760px) {
  .integration-request {
    padding: 24px 20px;
  }

  .integration-request .button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   16. aşama — modül sayfalarına paket bilgisi
   Her modül hangi paketten itibaren açıldığını rozetle söyler.
   ============================================================ */

/* --- Modül sayfası: başlık altındaki paket rozeti --- */
.package-pill-row {
  margin: 14px 0 0;
}

.package-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--purple-muted);
  border-radius: 999px;
  background: var(--white);
  color: var(--purple-ink);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.package-pill:hover,
.package-pill:focus-visible {
  border-color: var(--purple);
  background: var(--purple-pale);
}

.package-pill-label {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--purple);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
}

.package-pill b { font-weight: 600; }

/* Rehberlik özel durumu: rozetin söylemediği ayrım. */
.package-pill-note {
  margin: 14px 0 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* --- Modül kartlarındaki rozet (/moduller ve öne çıkanlar) ---
       Kart zaten bir bağlantı; rozet düz metin. --- */
.mod-package {
  display: inline-block;
  align-self: flex-start;
  margin: 8px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--purple-pale);
  color: var(--purple-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* --- Kapsam çizelgesi ve soru havuzu altındaki paket notları --- */
.board-package-note,
.pool-package-note {
  margin: 22px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
}

.board-package-note a,
.pool-package-note a {
  color: var(--purple);
  font-weight: 600;
}

/* Paket kapsam açıklaması — /moduller giriş bölümü. */
.package-scope-lead {
  margin-top: 14px;
  font-size: var(--text-base);
  color: var(--muted);
}

.package-scope-lead b { color: var(--purple-ink); }

.package-scope-lead a { color: var(--purple); font-weight: 600; }

/* ============================================================
   17. aşama — /partner sayfası
   Kaynak dosyanın CSS'i alınmadı; mevcut site dili kullanılıyor.
   Form alanları iletişim formuyla aynı .cf-* kurallarını paylaşır.
   ============================================================ */

/* --- Hero --- */
.partner-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.partner-highlights li {
  padding: 6px 14px;
  border: 1px solid var(--purple-muted);
  border-radius: 999px;
  background: var(--white);
  color: var(--purple-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.partner-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
}

/* --- Kazanç modeli kartları --- */
.partner-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-card {
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.partner-card-no {
  display: block;
  margin-bottom: 12px;
  color: var(--purple-mid);
  font-size: var(--text-lg);
  font-weight: 700;
}

.partner-card h3 {
  margin: 0 0 8px;
  font-size: var(--text-xl);
}

.partner-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* --- Şeffaflık --- */
.partner-transparency {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: start;
}

.partner-transparency h2 {
  margin: 0 0 14px;
  font-size: var(--text-3xl);
  line-height: 1.2;
}

.partner-transparency p {
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}

.partner-transparency-link {
  margin-top: 18px !important;
}

.partner-transparency-link a {
  color: var(--purple);
  font-weight: 600;
}

.partner-kit {
  padding: 26px 28px;
  background: var(--navy);
  border-radius: var(--radius-md);
  color: var(--white);
}

.partner-kit-label {
  display: block;
  margin-bottom: 14px;
  color: var(--sky);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.partner-kit ul,
.partner-kit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-kit li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-sm);
}

.partner-kit li:last-child { border-bottom: 0; }

/* --- Ürün portföyü --- */
.partner-portfolio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.partner-portfolio article {
  padding: 24px;
  background: var(--purple-pale);
  border-radius: var(--radius-md);
}

.partner-portfolio h3 {
  margin: 0 0 8px;
  font-size: var(--text-lg);
  color: var(--purple-ink);
}

.partner-portfolio p {
  margin: 0 0 12px;
  color: var(--purple-ink);
  font-size: var(--text-sm);
}

/* --- Kimler için --- */
.partner-audiences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-audiences li {
  padding: 22px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.partner-audiences strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: var(--text-base);
}

.partner-audiences span {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* --- Süreç --- */
.partner-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: partner-step;
}

.partner-steps li {
  padding-top: 18px;
  border-top: 2px solid var(--purple-soft);
}

.partner-step-no {
  display: block;
  margin-bottom: 10px;
  color: var(--purple);
  font-size: var(--text-sm);
  font-weight: 700;
}

.partner-steps strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-lg);
}

.partner-steps span {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* --- Başvuru formu --- */
.partner-form-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: start;
}

.partner-form-intro h2 {
  margin: 6px 0 12px;
  font-size: var(--text-3xl);
  line-height: 1.2;
}

.partner-form-intro > p {
  margin: 0 0 20px;
  color: var(--muted);
}

.partner-kit-list li {
  position: relative;
  padding: 7px 0 7px 24px;
  color: var(--purple-ink);
  font-size: var(--text-sm);
}

.partner-kit-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--green-ink);
  font-weight: 700;
}

.partner-terms-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.partner-terms-note a { color: var(--purple); font-weight: 600; }

.partner-form-wrap {
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Adım kutuları: JS yoksa hepsi görünür ve tek gönderimle yollanır. */
.partner-step {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.partner-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.partner-step legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
}

.partner-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
}

.partner-step-lead {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* İlerleme çubuğu — yalnızca JS varken görünür. */
.partner-progress { margin-bottom: 24px; }

.partner-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--purple-soft);
  overflow: hidden;
}

.partner-progress-bar i {
  display: block;
  height: 100%;
  width: 33%;
  border-radius: 999px;
  background: var(--purple);
  transition: width 0.3s var(--ease);
}

.partner-progress-text {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.partner-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.partner-form-actions .button { flex: 1 1 auto; justify-content: center; }

.partner-back { flex: 0 0 auto !important; }

/* `hidden` özniteliği .button kuralındaki inline-flex tarafından
   eziliyordu; açıkça geri alınıyor (çerez panelindeki aynı düzeltme). */
.partner-form-actions .button[hidden],
.partner-progress[hidden] {
  display: none;
}

/* --- Teşekkür sayfası --- */
.thanks-next {
  display: inline-block;
  margin: 18px 0 0;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--lime-pale);
  color: #46561f;
  font-size: var(--text-sm);
  font-weight: 700;
}

@media (max-width: 1080px) {
  .partner-cards,
  .partner-portfolio,
  .partner-steps { grid-template-columns: repeat(2, 1fr); }

  .partner-transparency,
  .partner-form-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  .partner-cards,
  .partner-portfolio,
  .partner-steps { grid-template-columns: 1fr; }

  .partner-form-wrap { padding: 22px 18px; }

  .partner-form-actions .button { width: 100%; flex: 1 1 100%; }
}

/* ============================================================
   19. aşama — footer sosyal hesapları
   Liste SiteInfo.Social'dan gelir; aynı liste Organization
   şemasının sameAs alanını da besler.
   ============================================================ */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Kart biçimi ve renkler FAZ1 §H bloğunda (dosya sonu): rozetler
   ikon oldu, eski aydınlık zemin renkleri oradan geçersiz kılınmak
   yerine tamamen kaldırıldı. */
.footer-social a {
  text-decoration: none;
}

/* ============================================================
   Faz 1 §B — entegrasyon logo ızgarası

   Grup ayrımı ve alt açıklamalar kalktı; 16 kalem tek şeritte
   duruyor. Logolar farklı en-boy oranlarında (169-320 x 144-160),
   bu yüzden kart yüksekliği sabit ve logo kartın içinde iki eksende
   ortalanıyor: object-fit yerine max-width/max-height + flex, çünkü
   img'nin intrinsic ölçüsü HTML'de yazılı ve sığdırma tarayıcıya
   bırakılıyor — taşma olmuyor, yer de baştan ayrılıyor.

   Gri ton bir SÜS: filter ve opacity düşse bile logo okunur kalır.
   Kontrast kuralı yazı kartına uygulanır (--muted, beyaz üstünde
   5.24:1); logolar WCAG'ın logo istisnası kapsamında.
   ============================================================ */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.logo-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.logo-card:hover,
.logo-card:focus-within {
  border-color: var(--purple-muted);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.logo-card:hover img,
.logo-card:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

/* Logosu olmayan kalem: aynı ölçüde kart, ortalanmış kurumsal yazı. */
.logo-wordmark {
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  transition: color var(--dur) var(--ease);
}

.logo-card-text:hover .logo-wordmark {
  color: var(--purple);
}

@media (max-width: 980px) {
  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .logo-card {
    height: 84px;
    padding: 12px 14px;
  }

  .logo-wordmark {
    font-size: 15px;
  }
}

/* ============================================================
   Faz 1 §C4 — hero tek görsele indi

   Mobil telefon çıktı; sağ sütun yalnızca masaüstü penceresini
   taşıyor. Pencere hem tam genişliği aldığı hem de sütun oranı
   kopya lehine değiştiği için görsel büyüdü, aynı zamanda
   metne daha çok yer kaldı.

   Yüzen kartlar duruyor ama pencerenin üstünü kapatmıyor:
   pencere dikeyde ortalanıyor, kartlar üstteki ve alttaki boş
   banda oturuyor. Panel yüksekliği bu bantları barındıracak
   kadar; pencere ~300px, panel 560px.
   ============================================================ */

/* Eşit sütun: telefon çıkınca görsel sütunun fazladan genişliğe
   ihtiyacı kalmadı. Görsele daha da pay vermek başlığı üç satıra
   düşürüyor — "Yazılım size uysun." iki satırda durmalı. */
.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(500px, 1fr);
  gap: 54px;
}

/* Panel yüksekliği pencereyi ve iki kart bandını taşıyacak kadar;
   telefon çıkınca eski 590px'in fazlası boş koyu alan olarak kalıyordu. */
.hero-visual {
  min-height: 500px;
  align-content: center;
  justify-items: center;
}

.hero-screens {
  width: 100%;
}

.hero-screens .media-note {
  margin-top: 12px;
  text-align: center;
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
  }
}

@media (max-width: 980px) {
  /* Tek sütuna düşünce görsel ortalanır ve genişliği sınırlanır;
     tam genişlikte pencere mobilde aşırı basık görünüyordu. */
  .hero-grid {
    grid-template-columns: 1fr;
  }

  /* Panel tek sütunda genişlediği için pencere de büyüyor ve kartların
     bandı kalmıyordu — 768px'te ikisi de pencerenin köşesine biniyordu.
     Dikey iç boşluk kartların yüksekliğini (~57px) barındıracak kadar
     açıldı; masaüstündeki düzenin aynısı. */
  .hero-visual {
    min-height: 0;
    padding-block: 84px 78px;
  }

  .hero-screens {
    max-width: 620px;
  }
}

@media (max-width: 760px) {
  .insight-top {
    top: 16px;
    right: 14px;
  }

  .insight-bottom {
    bottom: 14px;
    left: 14px;
  }

  .hero-screens {
    padding: 22px 18px 18px;
  }
}

@media (max-width: 520px) {
  /* Dar ekranda kartlar pencereyi kapatmadan sığmıyor; içerik
     görselin kendisi, kartlar süs. Kartlar gizlenince kartlara
     ayrılan dikey bant da gereksiz kalıyor, panel toparlanır. */
  .floating-insight {
    display: none;
  }

  .hero-visual {
    padding-block: 30px;
  }
}

/* ============================================================
   Faz 1 §D — Bilişim Vadisi mührü

   Kurumsal bir mühür gibi durması isteniyor: ölçülü, yavaş,
   parlamayan. Dönen halka SÜS — 96 saniyede bir tur, yani göz
   hareketi fark etmeden algılıyor. prefers-reduced-motion açıksa
   hiç dönmüyor; halka kaybolsa bile altıgen, kanun numarası ve
   yanındaki satır olduğu gibi kalıyor.

   KONTRAST (zemin --navy #23204d):
   - .seal-hex: --navy metin, --sky zemin ......... 7.94:1  AA
   - .seal-law: beyaz %82 opak .................. 10.59:1  AA
   - .valley-status: --sky ....................... 7.94:1  AA
   - .topbar-valley: beyaz %82 opak ............. 10.59:1  AA
     (eski .topbar-note %60 opaktı: 6.35:1)
   Dönen halka ve statik kenarlık dekoratif; metin taşımıyor.
   ============================================================ */

.valley-seal {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.seal-mark {
  position: relative;
  flex: none;
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
}

/* Sabit iç kenarlık: mührün kabartma hattı. Dönen halkadan ayrı
   duruyor, çünkü dönen bir tam çember zaten kıpırdamış görünmez. */
.seal-mark::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.seal-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  animation: seal-turn 96s linear infinite;
}

@keyframes seal-turn {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .seal-ring {
    animation: none;
  }
}

.seal-hex {
  width: 72px;
  height: 80px;
  display: grid;
  place-items: center;
  background: var(--sky);
  color: var(--navy);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.seal-hex b {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.seal-law {
  max-width: 13ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* .valley-copy > p'den daha özgül olmak zorunda: o kural rengi,
   ölçüyü ve üst boşluğu tanımlıyor. */
.valley-copy > .valley-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  max-width: none;
  color: var(--sky);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.valley-copy > .valley-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
}

/* --- Üst bardaki küçük hâli --- */
.topbar-valley {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.topbar-valley:hover,
.topbar-valley:focus-visible {
  color: var(--sky);
}

.topbar-hex {
  flex: none;
  color: var(--sky);
}

.topbar-valley:hover .topbar-hex,
.topbar-valley:focus-visible .topbar-hex {
  color: inherit;
}

@media (max-width: 560px) {
  .valley-seal {
    gap: 14px;
    margin-bottom: 22px;
  }

  .seal-mark {
    width: 88px;
    height: 88px;
  }

  .seal-hex {
    width: 60px;
    height: 66px;
  }

  .seal-hex b {
    font-size: 18px;
  }
}

/* ============================================================
   Faz 1 §E — ölçü şeridi tek hizaya oturdu

   Eskiden dört ayrı hizalama vardı: solda işaret + cümle, onun
   altında damga, sağda sola dayalı üç rakam, altta kutulu ayrı
   bir şerit. Cümle ve işaret kalktı; damga, rakamlar ve alt şerit
   aynı kapsayıcıda ortalandı. Alt şeridin beyaz kutuları da
   kalktı — koyu zeminde ayrı bir ada gibi duruyordu.

   KONTRAST (zemin --navy #23204d):
   - .proof-stamp: beyaz %66 opak ................ 7.34:1  AA
   - .metric strong: beyaz ...................... 15.16:1  AA
   - .metric-suffix (+): --sky ................... 7.94:1  AA
   - .metric small: beyaz %68 opak ............... 7.75:1  AA
   - .scale-label: beyaz %62 opak ................ 6.64:1  AA
   - .scale-rail li: beyaz %76 opak .............. 9.25:1  AA
   - .scale-rail li b: --sky ..................... 7.94:1  AA
   Alt şeridin rakamı eskiden --purple idi: koyu zeminde 1.78:1,
   yani okunmuyordu. Beyaz kutunun içinde doğruydu; kutu kalkınca
   --sky'a çevrildi. .proof-stamp ve .scale-label da --muted idi
   (2.89:1) — ikisi de beyaz opaklığa geçti.
   ============================================================ */

.proof-inner {
  padding-block: 20px 18px;
  text-align: center;
}

.proof-stamp {
  display: block;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.proof-grid {
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric {
  min-height: 0;
  padding: 2px 12px;
  justify-items: center;
  text-align: center;
  border-left: 0;
}

/* Ayraç yalnızca rakamların ARASINDA; ilkinin solunda çizgi olsaydı
   ortalanmış blok sola kaymış görünürdü. */
.metric + .metric {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.metric small {
  color: rgba(255, 255, 255, 0.68);
}

.scale-rail {
  justify-content: center;
  gap: 10px 22px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.scale-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-xs);
}

.scale-rail ul {
  justify-content: center;
  gap: 8px 26px;
}

/* Kutu yok: alt şerit rakamlarla aynı hizada duran düz metin. */
.scale-rail li {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.scale-rail li b {
  color: var(--sky);
}

@media (max-width: 620px) {
  .proof-inner {
    padding-block: 18px 16px;
  }

  .metric {
    padding: 2px 6px;
  }

  .scale-rail ul {
    gap: 6px 18px;
  }

  .scale-rail li {
    font-size: 13px;
  }
}

/* CountUp sayarken rakamları YENİ bir span'in içine taşıyor
   (motion.js). ".metric strong span" kuralı sonek için yazılmıştı;
   sayaç çalıştığı anda rakamların kendisi de --sky oluyordu, yani
   JS'li ve JS'siz sayfa farklı renkte rakam gösteriyordu. Sonek
   artık kendi sınıfıyla hedefleniyor. */
.metric strong span {
  color: inherit;
}

.metric strong .metric-suffix {
  color: var(--sky);
}

/* ============================================================
   Faz 1 §G — kampanya bölümü tek telefona indi

   İki telefon üst üste biniyor, arkadaki öndekinin altında
   kalıyor ve öndeki panelin sağ kenarından taşıyordu (panelin
   overflow:hidden'ı kesiyordu). İkisinin de içeriği okunmuyordu.

   Tek telefon: dik, ortalı ve görünür yüksekliği 418px'den
   530px'e çıktı. Halkalar telefonun arkasında ortalandı,
   "Kurumunuza özel" kartı yerinde kaldı, uyarı etiketi panelin
   içine döndü.
   ============================================================ */

.mobile-visual {
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
}

/* Halkalar telefonun arkasında ortalanır; eski konumları iki
   telefonlu düzenin sağ yığınına göre ayarlanmıştı. */
.app-ring {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.custom-app-badge {
  top: 54px;
  left: 8px;
}

.mobile-visual .app-media-note {
  margin-top: 16px;
  text-align: center;
}

@media (max-width: 980px) {
  .mobile-app-panel {
    padding-bottom: 72px;
  }

  .mobile-visual {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .mobile-app-panel {
    padding-bottom: 58px;
  }

  .ring-one {
    width: 380px;
    height: 380px;
  }

  .ring-two {
    width: 270px;
    height: 270px;
  }

  .custom-app-badge {
    top: 34px;
    left: 0;
  }
}

@media (max-width: 560px) {
  .custom-app-badge {
    top: 22px;
    transform: scale(0.92);
    transform-origin: left top;
  }
}

/* ============================================================
   Faz 1 §H — footer sosyal hesapları ikon oldu

   Rozetler düz metindi ve koyu footer zemininde (#171532)
   neredeyse görünmüyordu: --purple-ink metin 1.68:1, --line
   kenarlık ise 13.17:1 ile metinden parlaktı — yani kutu
   görünüyor, yazı görünmüyordu.

   KONTRAST (zemin #171532):
   - ikon: beyaz %82 opak ....................... 12.07:1
   - kenarlık: beyaz %22 opak (dekoratif)
   - hover: --navy ikon / --sky daire ............ 7.94:1
   İkonlar grafik nesne; WCAG 1.4.11 eşiği 3:1, ikisi de üstünde.

   Adres satırı da aynı dertteydi (--muted 3.37:1, bağlantılar
   --purple 2.08:1); ikisi de aydınlık zemin için yazılmıştı.
   ============================================================ */

.footer-social {
  gap: 10px;
  margin: 20px 0 0;
}

.footer-social a {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--navy);
  background: var(--sky);
  border-color: var(--sky);
}

.footer-social svg {
  display: block;
}

/* Adres ve iletişim bağlantıları koyu zemine göre. */
.footer-address {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.62);
}

.footer-address a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-address a:hover,
.footer-address a:focus-visible {
  color: var(--sky);
}

/* ============================================================
   Faz 1 §I2 — kapanış cümlesi

   Reklam kampanyasının imzası. Kapanış başlığının üstünde,
   onu kuran soru olarak duruyor.

   KONTRAST: kapanış zemini --purple'dan --navy'ye giden bir
   geçiş; en aydınlık ucu --purple. Beyaz %92 opak orada
   7.50:1, koyu ucunda 12.98:1 veriyor. --sky burada 4.45:1'de kalıyordu — büyük
   başlıkta (3:1 eşiği) sorun değil ama 21px'lik bu cümlede
   AA'yı tutturmuyordu, o yüzden beyaz kullanıldı.
   ============================================================ */

.final-inner > .final-question {
  max-width: 640px;
  margin: 0 auto 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .final-inner > .final-question {
    font-size: 18px;
    margin-bottom: 22px;
  }
}

/* --- Menüdeki Partner işareti — 7 EYLÜL 2026'DA KALDIRILDI ---
   Partner'ın adının solunda küçük dolu bir daire vardı. Menü üç öbeğe
   ayrılıp ortadaki öbek (Özel Yazılım, Partner) --purple ve 600
   ağırlıkla vurgulanınca nokta hem gereksiz hem de zayıf kaldı.
   Kuralları silindi; vurgu artık .nav-group-partnership üzerinden. */

/* ============================================================
   7 Eylül 2026 — Ürün turu tek çerçeveye indi, hero yeniden kuruldu.
   Bu blok dosyanın sonunda olduğu için eşit özgüllükte kazanır;
   yukarıdaki 980px ve 720px kırılımları burada yeniden veriliyor.
   ============================================================ */

/* --- Ürün turu: sahne telefonun yeni boyuna göre ölçüldü ---
   Telefon 330px geniş, 9/19 oranıyla ~697px yüksek (eskiden 306x562).
   Sahne = üst çubuk (53) + içerik üst boşluğu (64) + telefon.

   Yan boşluk ve sütun arası daraltıldı: telefon büyüyünce metin sütunu
   194px'e düşüyor ve başlık dört satıra kırılıyordu. Başlık da bir
   miktar küçültüldü — sahne artık her sekmede iki sütunlu. */
.product-stage {
  min-height: 816px;
}

.stage-content {
  min-height: 762px;
  padding-inline: 34px;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
}

.stage-text h3 {
  font-size: 30px;
}

@media (max-width: 980px) {
  /* Telefon 290px -> ~612px. */
  .product-stage {
    min-height: 730px;
  }

  .stage-content {
    min-height: 676px;
    padding-inline: 28px;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
  }

  .stage-text h3 {
    font-size: 27px;
  }
}

@media (max-width: 720px) {
  /* Sahne dikey akışa geçiyor; yükseklik içeriğe bırakılıyor. */
  .product-stage {
    min-height: 0;
  }

  .stage-content {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0;
  }
}

/* --- Hero rakam kartı — 7 EYLÜL 2026'DA KULLANIMDAN KALKTI ---
   Ekran karartılıp bulanıklaştırılmış, önüne rakamları CSS ile yazan
   beyaz bir kart konmuştu. Denendi ve geri alındı: kart ekranı
   kapatıyordu, arkadaki ekran da filtreler yüzünden okunmuyordu —
   ikisi de kaybediyordu. Şimdi ekranın üst kesiti NET gösteriliyor
   (bkz. .browser-screen-crop).

   Kurallar SİLİNMEDİ, yorumda tutuluyor: kart geri gelebilir.
   Sabitleri de SiteMetrics içinde yorumda; ikisi birlikte açılır.

   .hero-stage {
     position: relative;
     display: grid;
   }


   .hero-backdrop {
     filter: brightness(0.82) blur(1px);
   }

   .hero-cockpit {
     position: absolute;
     z-index: 2;
     top: 50%;
     left: 50%;
     width: min(100%, 420px);
     padding: 22px 26px 24px;
     transform: translate(-50%, -50%);
     background: var(--white);
     border-radius: var(--radius-lg);
     box-shadow: 0 26px 60px rgba(10, 8, 41, 0.28);
   }

   .cockpit-label {
     margin: 0 0 14px;
     color: var(--muted);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }

   .cockpit-figures {
     margin: 0;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 14px;
   }


   .cockpit-figure dt {
     margin: 0;
     color: var(--navy);
     font-size: 34px;
     font-weight: 700;
     line-height: 1.05;
     letter-spacing: -0.02em;
   }

   .cockpit-figure dd {
     margin: 6px 0 0;
     color: var(--muted);
     font-size: 11px;
     font-weight: 600;
     line-height: 1.35;
     letter-spacing: 0.04em;
     text-transform: uppercase;
   }

   @media (max-width: 980px) {
     .hero-cockpit {
       width: min(100%, 380px);
       padding: 20px 22px 22px;
     }

     .cockpit-figure dt {
       font-size: 30px;
     }
   }

   @media (max-width: 720px) {

     .hero-stage {
       padding-block: 8px;
     }

     .hero-backdrop {
       width: 88%;
       margin-inline: auto;
     }

     .hero-cockpit {
       position: static;
       width: 100%;
       transform: none;
     }

     .cockpit-figures {
       gap: 10px;
     }

     .cockpit-figure dt {
       font-size: 27px;
     }

     .cockpit-figure dd {
       font-size: 10px;
     }
   }

   @media (max-width: 420px) {
     .cockpit-figures {
       grid-template-columns: minmax(0, 1fr);
       gap: 12px;
     }

     .cockpit-figure {
       display: flex;
       align-items: baseline;
       gap: 10px;
     }

     .cockpit-figure dd {
       margin-top: 0;
     }
   }
*/

/* --- Basılı kaynaklar: görsel + metin, dönüşümlü hizalama ---
   Görseller şeffaf zeminli; kart içine alınmıyor, doğrudan bölüm
   zemininin üstünde duruyorlar. */
.printed-rows {
  display: grid;
  gap: var(--space-7, 56px);
  margin-top: 34px;
}

.printed-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 40px;
}

.printed-row:nth-child(even) .printed-figure {
  order: 2;
}

.printed-figure {
  margin: 0;
}

.printed-figure img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Uyarı etiketi görselle aynı hizada: görsel sütunda ortalanıyor,
   etiket de aynı genişlikte ortalanıyor. */
.printed-figure figcaption {
  max-width: 340px;
  margin-inline: auto;
  text-align: center;
}

.printed-body h3 {
  margin: 0 0 6px;
  font-size: 25px;
}

.printed-body .printed-kind {
  margin: 0 0 12px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.printed-body p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 860px) {
  .printed-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* Tek sütuna inince görsel her satırda üstte kalır. */
  .printed-row:nth-child(even) .printed-figure {
    order: 0;
  }

  .printed-figure img {
    max-width: 260px;
    margin-inline: 0;
  }

  .printed-figure figcaption {
    max-width: 260px;
    margin-inline: 0;
    text-align: left;
  }
}

/* ============================================================
   7 Eylül 2026 — Denetimde bulunan iki GÖRÜNMEZ metin.
   İkisi de metni okunamaz değil, tamamen görünmez yapıyordu;
   ölçülen kontrast 1,00:1 idi. Kurallar dosyanın sonunda olduğu
   için eşit özgüllükte kazanır.
   ============================================================ */

/* --- 1 · Fiyat sayfası: KDV ve "liste fiyatı" ibaresi ---
   Renk, 14. aşamada kaldırılan KOYU hesaplayıcı panelinden kalmıştı
   (rgba(255,255,255,.55)). Paragraf beyaz bölüme taşınmış, rengi
   taşınmamıştı; beyaz üstüne beyaz kalıyordu.

   Metin ticari olarak bağlayıcı: tutarların liste fiyatı ve KDV
   hariç olduğunu söyleyen tek cümle. Kaynak metni arayan test
   geçiyordu çünkü metin DOM'da vardı — görünmediğini görmüyordu. */
.calc-disclaimer {
  color: var(--muted);
}

/* --- 2 · Enterprise bloğunun başlığı ---
   .enterprise-note içeriğine `color: var(--white)` veriyor, ama bu
   MİRAS. Global `h1,h2,h3 { color: var(--navy) }` kuralı h3 ile
   DOĞRUDAN eşleştiği için mirası eziyordu: lacivert zeminde lacivert
   başlık. Blok, üstünde boş koyu bir şeritle açılıyordu.

   Çözüm başlığa doğrudan renk vermek; kutunun içindeki bütün
   başlıklar için geçerli olsun diye seçici h2/h3/h4'ü de kapsıyor. */
.enterprise-note h2,
.enterprise-note h3,
.enterprise-note h4 {
  color: var(--white);
}

/* ============================================================
   7 Eylül 2026 — Denetimden kalan kontrast maddeleri.
   ============================================================ */

/* --- 1 · "Bir okul günü" bölümü: koyu zeminde gri metin ---
   Bölüm --navy zeminli ama iki metin --muted kalmıştı: 2,89:1.

   NEDEN: 3375. satırdaki `.section-day .section-heading > p` kuralı
   (0,2,1) doğruydu, ama daha özgül olan
   `.section-heading.centered > p:last-child` (0,3,1) onu eziyordu —
   bölümün başlık bloğu "centered" sınıfını taşıyor. Aşağıdaki seçici
   ikisini de kapsayacak özgüllükte (0,4,1). */
.section-day .section-heading.centered > p:last-child,
.section-day .section-heading > p {
  color: rgba(255, 255, 255, 0.72);
}

/* --- 2 · Modül numaraları ---
   `.mod-no` modülün kendi rengini beyaz kart üstünde kullanıyordu;
   17 renkten 11'i AA altındaydı (en kötüsü --green-soft ve --sky-soft,
   1,66:1). Numara aria-hidden, yani ekran okuyucu atlıyor — ama gören
   kullanıcı için görünür metin, WCAG 1.4.3 geçerli.

   Renk kodlaması KORUNUYOR: modülün rengi lacivertle karıştırılarak
   koyultuluyor, kimliği duruyor. %45 karışımda 17 rengin en düşüğü
   5,09:1 (%50'de 4,53 — sınıra fazla yakın).

   İlk bildirim geri dönüş: color-mix desteklemeyen tarayıcı --muted
   ile kalır (5,24:1), yine AA. */
.mod-no {
  color: var(--muted);
  color: color-mix(in srgb, var(--mod-color) 45%, var(--navy));
}

/* --- 3 · Tek akış kartlarındaki üç madde ---
   Denetimde kalan son AA-altı çiftler; hepsi aynı bileşende.

   a) `.flow-number` beyaz kartta #b2aec2 idi: 2,16:1. --muted'a
      çekildi (5,24:1) — aynı bölümdeki öteki ikincil metinlerle
      de aynı renk oldu.
   b) Vurgulu (mor) karttaki numara beyazın %55'iydi: 3,80:1.
      %72'ye çıkarıldı; sitedeki öteki koyu-zemin ikincil metinlerle
      aynı oran (5,3:1).
   c) Vurgulu karttaki bağlantı --sky idi: mor üstünde 4,45:1 —
      eşiğin 0,05 altında. --sky-pale ile 7,73:1; hâlâ mavi ailesi,
      bağlantı olduğu belli. */
.flow-number {
  color: var(--muted);
}

.flow-card-featured .flow-number {
  color: rgba(255, 255, 255, 0.72);
}

.flow-card-featured a {
  color: var(--sky-pale);
}

/* ============================================================
   7 Eylül 2026 — /ozel-yazilim sayfası ve fiyat sayfası köprüsü.
   ============================================================ */

/* --- Hero: iki sütunlu .custom-hero 15 Eylül 2026'da silindi; kanıt
   kartı hero'dan danışmanlık sayfasının 6. bölümüne indi (.consult-*). */
.custom-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Kanıt kartı: sayfanın tek referansı VAYOS'un kendi ölçüleri. */
.custom-proof {
  padding: 30px 32px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px rgba(10, 8, 41, 0.28);
}

.custom-proof-title {
  margin: 0 0 22px;
  color: var(--white);
  font-size: 21px;
  line-height: 1.3;
}

.custom-proof-figures {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
}

.custom-figure dt {
  margin: 0;
  color: var(--white);
  font-size: 33px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.custom-figure dd {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.custom-proof-note {
  margin: 24px 0 0;
  padding-top: 18px;
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  line-height: 1.6;
}

/* --- "Ne yapıyoruz" altı kartı (.custom-services) 15 Eylül 2026'da
   silindi; yerini dört alanın kalem listeleri aldı (.consult-items). */
/* --- Nasıl çalışıyoruz: dört adım --- */
.custom-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.custom-step {
  padding: 24px 24px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.custom-step-no {
  display: block;
  margin-bottom: 12px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.custom-step h3 {
  margin: 0 0 9px;
  font-size: 18px;
}

.custom-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Neden biz: üç kart --- */
.custom-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.custom-reason {
  padding: 26px;
  background: var(--surface);
  border-radius: var(--radius-md);
}

.custom-reason h3 {
  margin: 0 0 10px;
  font-size: 19px;
}

.custom-reason p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* --- İletişim: WhatsApp büyük kart + form kartı --- */
.section-custom-contact {
  background: var(--surface);
}

.custom-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  margin-top: 32px;
}

.custom-contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.custom-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 18px 40px rgba(35, 32, 77, 0.12));
}

/* WhatsApp kartı birincil: sayfanın ana eylemi. */
.custom-contact-primary {
  color: var(--white);
  background: var(--green-ink);
  border-color: var(--green-ink);
}

.custom-contact-icon {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.custom-contact-body {
  display: grid;
  gap: 5px;
}

.custom-contact-body b {
  font-size: 19px;
}

.custom-contact-body span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.custom-contact-primary .custom-contact-body span {
  color: rgba(255, 255, 255, 0.88);
}

.custom-contact-number {
  font-weight: 600;
}

.custom-contact-cta {
  margin-left: auto;
  flex: none;
  font-size: 14px;
  font-weight: 600;
}

.custom-contact-primary .custom-contact-cta {
  color: var(--white);
}

.custom-contact-note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

/* --- Fiyat sayfasındaki köprü (ek hizmetler tablosunun yerine) --- */
.custom-bridge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  padding: 28px 30px;
  background: var(--purple-pale);
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-lg);
}

.custom-bridge h3 {
  margin: 0 0 7px;
  font-size: 21px;
}

.custom-bridge p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.6;
}

.custom-bridge .button {
  margin-left: auto;
}

@media (max-width: 980px) {
  .custom-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .custom-proof {
    padding: 24px 22px;
  }

  .custom-figure dt {
    font-size: 28px;
  }

  .custom-contact-card {
    flex-wrap: wrap;
    padding: 22px;
  }

  .custom-contact-cta {
    margin-left: 0;
  }

  .custom-bridge {
    padding: 22px 20px;
  }

  .custom-bridge .button {
    margin-left: 0;
  }
}

/* ============================================================
   7 Eylül 2026 — hero kesiti, menü grupları, kampanya telefonu.
   ============================================================ */

/* --- 1 · Hero: ekranın üst kesiti, filtre yok ---
   Önceki deneme (karartma + bulanıklık + önde beyaz kart) geri
   alındı; ikisi de kaybediyordu. Ekran NET, yalnızca üst kesiti
   görünüyor: üç KPI kartı ve kanal dağılımının ilk satırları.

   Kesit .browser-screen'in en-boy oranıyla veriliyor — genişlik
   değişince oran korunuyor, sabit piksel yüksekliği yok.

   Görsel 1790x818. 1790/240 = üst %29: üç KPI kartı, grafik başlığı
   ve kanal dağılımının ilk DÖRT satırı (Kayıt Yenileme, Kendi Gelen,
   Referans, Gelen Çağrı). Beşinci satır tam bu noktada başladığı için
   daha aşağıda kesmek yarım satır bırakıyor — değer tarayıcıda
   ölçülerek seçildi. */
.browser-screen-crop {
  aspect-ratio: 1790 / 240;
  overflow: hidden;
}

/* Kesit kısaldığı için panel de kısalıyor: 500 px sabit yükseklikte
   71 px'lik bir şerit ortada kayboluyordu. Panel artık içeriğine göre
   yükseliyor ve dikeyde ortalanıyor; çerçeve panelin genişliğini
   daha çok kullanıyor. */
.hero-visual {
  min-height: 0;
  align-self: center;
  padding-block: 58px;
}

.hero-screens {
  padding: 0 22px;
}

.browser-screen-crop img {
  width: 100%;
  height: auto;
  object-position: top;
}

/* Dar ekranda görsel zaten %17 ölçekte; hiçbir kesit oranı rakamları
   okunur yapmıyor. Kesit gevşetiliyor ki şerit gibi değil, ürün
   ekranı gibi dursun — burada görevi kanıt değil, bağlam.
   (Rakamlar mobilde de okunsun isteniyorsa ayrı bir çözüm gerekir;
   DURUM.md'de not düşüldü.) */
@media (max-width: 620px) {
  .browser-screen-crop {
    aspect-ratio: 1790 / 470;
  }
}

/* --- 2 · Menü: üç öbek, aralarında ince ayraç ---
   Ortadaki öbek (Özel Yazılım, Partner) yeni gelir kanalı; --purple
   ve 600 ağırlıkla öne çıkıyor. Ötekiler --ink ve 500. */
.nav-group {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav-divider {
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--line);
}

.desktop-nav a {
  color: var(--ink);
  font-weight: 500;
}

.nav-group-partnership a {
  color: var(--purple);
  font-weight: 600;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.nav-group-partnership a:hover,
.nav-group-partnership a:focus-visible {
  color: var(--purple-dark);
}

/* Mobil menüde dikey ayraç çizilemiyor; gruplama başlıkla yapılıyor. */
.mobile-menu-heading {
  margin: 18px 0 2px;
  padding: 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mobile-menu a.nav-accent {
  color: var(--purple);
  font-weight: 600;
}

/* --- 3 · Kampanya: telefon panele sığıyor ---
   Telefon sabit 246x530'du ve panelin sağ kenarından taşıp alttan
   kesiliyordu; "Kurumunuza özel" kartı da üstüne biniyordu.

   Artık yükseklik panelin bıraktığı yere göre sınırlanıyor
   (min ile), genişlik en-boy oranından geliyor. Kart telefonun
   DIŞINDA, sol üst köşede duruyor. */
.mobile-visual {
  position: relative;
  padding-left: 96px;
  justify-items: end;
}

.custom-app-badge {
  top: 6px;
  left: 0;
  right: auto;
}

@media (max-width: 1120px) {
  .mobile-visual {
    padding-left: 84px;
  }
}

@media (max-width: 980px) {
  /* Panel tek sütuna iniyor: telefon ortada, kart yine solunda. */
  .mobile-visual {
    padding-left: 0;
    justify-items: center;
  }

  .custom-app-badge {
    top: 0;
    left: 0;
  }
}

@media (max-width: 760px) {
  .custom-app-badge {
    transform: scale(0.92);
    transform-origin: left top;
  }
}

@media (max-width: 480px) {
  /* Dar ekranda telefonun solunda kart için yer yok — mutlak konumdan
     çıkıp akışa giriyor ve telefonun ÜSTÜNE alınıyor (order: -1).
     390 px'te ölçüldü: bu olmadan kart telefonun üzerine biniyordu. */
  .mobile-visual {
    padding-top: 0;
  }

  .custom-app-badge {
    position: static;
    order: -1;
    margin-bottom: 16px;
    justify-self: start;
    transform: none;
  }
}

/* ============================================================
   7 Eylül 2026 — Hero mobil ekrana geçti (üçüncü düzen).
   ============================================================ */

/* Koyu mor panel KALKTI. Görseli küçültüyor ve gereksiz yer
   kaplıyordu; arkada hero'nun kendi ışık lekeleri (.hero-orb)
   yeterli. Panel artık yalnızca yerleşim kabı. */
.hero-visual {
  min-height: 0;
  padding: 0;
  align-self: center;
  justify-items: center;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- Hero telefon çerçevesi — 7 EYLÜL 2026'DA KULLANIMDAN KALKTI ---
   Hero gerçek ekran yerine tasarım görseli gösteriyor; görselin kendi
   zemini var, çerçeve içine almak onu küçültüyordu.

   Kurallar silinmedi: hero'ya yeniden bir ürün ekranı konursa geri
   açılır. Ürün turunun telefon çerçevesi (.stage-media) bundan ayrı ve
   çalışmaya devam ediyor.

   .hero-phone {
     position: relative;
     display: inline-grid;
     max-width: 100%;
     padding: 10px;
     background: #0d0c18;
     border: 8px solid #151327;
     border-radius: 46px;
     box-shadow: 0 30px 60px rgba(10, 8, 41, 0.32);
   }

   .hero-phone-screen {
     height: min(660px, 72vh);
     aspect-ratio: 1290 / 2786;
     max-width: 100%;
     overflow: hidden;
     background: #f5f5fa;
     border-radius: 34px;
   }

   .hero-phone-screen img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     object-position: top;
   }
*/

/* ============================================================
   7 Eylül 2026 — Hero modül şeması: CSS, görsel değil.

   Dört deneme de görselle yapıldı ve hiçbiri okunmadı. Sonuncusu
   2400 px genişliğindeydi, hero'da 600 px alana giriyordu — %25
   ölçek, kart metinleri 4 piksele inip siliniyordu. Metin gerçek
   metin olunca her ölçekte net kalıyor.
   ============================================================ */

/* Şemanın dış köşesi için; :root'ta yalnızca sm/md/lg vardı.
   Mevcut blok değiştirilmedi, token burada ekleniyor. */
:root {
  --radius-xl: 42px;
}

.hero-diagram {
  position: relative;
  padding: 26px 24px 22px;
  overflow: hidden;
  background: linear-gradient(150deg, #2b2760, #1c1a45);
  border-radius: var(--radius-xl);
  box-shadow: 0 34px 70px rgba(10, 8, 41, 0.34);
}

/* İnce ızgara deseni: 34px aralık, %6 beyaz. SÜS — içerik değil,
   o yüzden ayrı bir öğe değil, zeminin üstünde katman. */
.hero-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.hero-diagram-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* --- Sekiz modül kartı --- */
.hero-node {
  padding: 15px 14px 16px;
  display: grid;
  align-content: start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
}

/* İkon kutusu modülün renginde, %26 opak. Renk kartın kendi
   --node-color değişkeninden geliyor (işaretlemede satır içi). */
.hero-node-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--node-color) 26%, transparent);
  border-radius: 13px;

  /* Glif modülün renginin AÇILMIŞ hâli, saf hâli değil. Koyu mor
     zeminde --purple gibi koyu tokenler kayboluyordu (ölçüldü: 1,55).
     Beyazla karıştırılınca hue duruyor ama okunur oluyor.
     Geri dönüş: color-mix desteklemeyen tarayıcı beyaz kullanır. */
  color: var(--white);
  color: color-mix(in srgb, var(--node-color) 42%, white);
}

.hero-node-name {
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

/* --- Çekirdek ---
   Ötekilerden 6px büyük: dört kenardan 3px taşıyor. */
.hero-core {
  margin: -3px;
  padding: 18px 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
  background: linear-gradient(150deg, var(--purple), var(--purple-dark));
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 34px rgba(10, 8, 41, 0.42);
}

.hero-core-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.hero-core-title {
  margin: 0;
  color: var(--white);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.hero-core-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1.4;
}

/* --- Etiket şeridi --- */
.hero-tags {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
}

.hero-tags li {
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.3;
}

@media (max-width: 1120px) {
  .hero-node {
    padding: 13px 12px 14px;
    gap: 10px;
  }

  .hero-node-icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 760px) {
  /* İki sütun; çekirdek üstte ve tam genişlikte. */
  .hero-diagram {
    padding: 20px 16px 18px;
  }

  .hero-diagram-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-core {
    order: -1;
    grid-column: 1 / -1;
    margin: 0 0 2px;
  }

  .hero-core-title {
    font-size: 23px;
  }
}

@media (max-width: 420px) {
  .hero-node {
    padding: 12px 11px 13px;
  }

  .hero-node-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .hero-node-name {
    font-size: 13px;
  }
}

/* ============================================================
   14 Eylül 2026 · yayın öncesi denetim eklemeleri
   ============================================================ */

/* --- Satır içi ikonlar (Ö3) ---
   Fontta karşılığı olmayan üç glif SVG'ye taşındı; SVG'ler
   Views/Shared/_Icon.cshtml içinde. Dosyanın başındaki genel
   `img, svg { display: block }` kuralı ikonları da blok yapardı,
   metnin yanında duramazlardı — burada satır içine alınıyorlar.
   Boyut 1em olduğu için kapsayıcının font-size değerini izler. */
.icon {
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
}

/* --- Yatay kaydırılan yasal tablolar (Ö2) ---
   tabindex="0" verildi: klavye kullanan ziyaretçi kabı odaklayıp ok
   tuşlarıyla kaydırabiliyor. Odaklanabilen her şeyin görünür bir
   halkası olmalı. */
.legal-table:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

/* ============================================================
   YAZDIRMA (Ö1)
   ------------------------------------------------------------
   Gerçek senaryo: okul müdürü fiyat sayfasını yazdırıp yönetim
   kuruluna götürüyor. Paket matrisi 1238 px genişliğinde (50 satır ×
   5 sütun) ve kapsayıcısında overflow-x var — yazdırmada taşan kısım
   KIRPILIR, 360 ve Enterprise sütunları kâğıda hiç düşmezdi.

   Buradaki seçicilerin HEPSİ tarayıcıda doğrulandı; sitede karşılığı
   olmayan sınıf yazılmadı (14 Eylül 2026).
   ============================================================ */

@media print {
  /* Ekranda işe yarayan, kâğıtta yalnızca yer kaplayan öğeler. */
  .skip-link,
  .topbar,
  .campaign-bar,
  .site-header,
  .crumbs,
  .sticky-bar,
  .wa-float,
  .cookie-banner,
  .band-picker,
  .footer-social,
  .contact-map,
  .hero-orb,
  .product-backdrop {
    display: none !important;
  }

  /* Zemin renkleri KORUNUR: koyu kartların (Enterprise bloğu, kampanya
     paneli) zemini kalkarsa üzerlerindeki AÇIK renkli metin beyaz kâğıtta
     görünmez olur — ölçüldü: .enterprise-note p rgb(228,223,239).
     Tarayıcılar yazdırmada zeminleri varsayılan olarak atar; bu yüzden
     print-color-adjust açıkça isteniyor. */
  html,
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Gövde metninin grisi kâğıtta soluk kalıyor. Token yazdırmada
     koyultuluyor: tek satır, bütün gövde metnini toparlar. Koyu kartların
     içindeki açık metin bu tokeni kullanmadığı için etkilenmez. */
  :root {
    --muted: #333;
  }

  /* --- KRİTİK: .reveal öğeleri yazdırmada GÖRÜNÜR olmalı ---
     .js-ready .reveal opacity:0 ile başlar ve IntersectionObserver
     görünce açılır. Kullanıcı sayfayı sonuna kadar kaydırmadan
     yazdırırsa (normal davranış: Ctrl+P'ye tepeden basılır) açılmamış
     bloklar KÂĞIDA BOŞ ÇIKAR.

     Ölçüldü (14 Eylül 2026): taze yüklenen /fiyatlandirma sayfasında
     10 .reveal bloğunun 10'u da opacity:0 — paket fiyat kartları ve
     Enterprise bloğu dahil. Yani fiyat sayfası fiyatsız basılıyordu.

     Aynı gerekçe prefers-reduced-motion bloğunda da var; yazdırma o
     bloğun kapsamına girmiyor, ayrıca yazılması gerekiyor. */
  .reveal,
  .js-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Gradyanlar düz renge iner: yazıcıda bant bant çıkmasın, mürekkep
     harcamasın. Sitedeki bütün zemin gradyanları bu ikisi. */
  .hero-diagram {
    background: #23204d !important;
  }

  .hero-core {
    background: #484099 !important;
  }

  /* Kart ve tablo satırları sayfa sonunda ikiye bölünmesin. */
  tr,
  thead,
  .mod,
  .trust-card,
  .package-card,
  .accordion-item,
  .case {
    break-inside: avoid;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  /* Uzun matriste başlık satırı her sayfada tekrarlasın. */
  thead { display: table-header-group; }

  /* Bağlantı adresleri kâğıtta görünsün — okuyan kişi adresi
     bilgisayara geçmeden yazabilsin. Yalnızca DIŞ adresler; iç
     bağlantılarda ve düğmelerde gürültü olurdu. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #444;
    word-break: break-all;
  }

  .button::after,
  .mod-link::after,
  .row-link::after,
  .accordion-item a::after,
  nav a::after {
    content: "" !important;
  }

  /* Kaydırılan kaplar kâğıtta kırpmasın: taşma serbest kalır,
     tablo olduğu gibi basılır. */
  .package-matrix-wrap,
  .academic-table-wrap,
  .legal-table {
    overflow: visible !important;
    border: 0 !important;
  }

  table {
    width: 100% !important;
    border-collapse: collapse;
  }

  /* Akordeonlar kâğıtta açık basılır: JS yokken zaten açıklar. */
  .accordion-panel {
    display: block !important;
    height: auto !important;
  }
}

/* --- Fiyat sayfası yazdırma ---
   Paket matrisi A4 dikeye rahat sığmıyor; bu sayfa YATAY basılır.
   Gövdeye .print-landscape sınıfı ViewData["BodyClass"] ile yalnızca
   /fiyatlandirma için ekleniyor (HomeController.Pricing). */
@media print {
  .print-landscape .package-matrix,
  .print-landscape .academic-table {
    font-size: 8pt;
  }

  .print-landscape .package-matrix th,
  .print-landscape .package-matrix td,
  .print-landscape .academic-table th,
  .print-landscape .academic-table td {
    padding: 3pt 4pt;
    border: 0.5pt solid #bbb;
  }

  .print-landscape .package-matrix-group th {
    background: #eee !important;
    font-weight: 700;
  }

  /* "Yakında" ve "Opsiyon" rozetleri kâğıtta çerçeveyle ayrılsın;
     renkli zemin gri tonuna düşerse okunmaz olurdu. */
  .print-landscape .scope-option,
  .print-landscape .scope-soon {
    padding: 1pt 3pt;
    border: 0.5pt solid #666;
    background: none !important;
    color: #000 !important;
  }
}

@page {
  size: A4;
  margin: 14mm;
}

/* Fiyat sayfası yatay basılır: adlandırılmış sayfa (CSS Paged Media).
   Desteklemeyen tarayıcıda sayfa dikey kalır ama tablo yine sığar —
   yukarıdaki `table { width: 100% }` ve 8pt yazı boyutu sütunları
   kâğıt genişliğine oturtuyor; kırpılma olmuyor. */
@page landscape {
  size: A4 landscape;
  margin: 12mm;
}

.print-landscape {
  page: landscape;
}

/* ============================================================
   15 Eylül 2026 — Gradyan zeminli dipnotlar: beyaz %62 → %70.

   Kampanya paneli (.mobile-app-panel) ve kapanış (.final-cta)
   gradyanı --purple (#484099) ucundan başlıyor. %62 beyaz o uçta
   4,35:1 idi — AA altı. %70'te 5,07:1. Metin panelde nereye düşerse
   düşsün geçsin diye EN AÇIK uç esas alındı; konuma göre ölçülmedi.

   Asıl kurallar (.mobile-copy > small, .final-inner > small) yerinde
   duruyor; aynı özgüllükte sonra geldiği için bu blok kazanır.
   Alt sınır %64 (4,54:1) — GradyanOpaklikTests koruyor.
   ============================================================ */

.mobile-copy > small,
.final-inner > small {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   15 Eylül 2026 — Kampanya ve kapanış etiketi: --sky → --sky-soft.

   .eyebrow-light --sky; #484099 ucunda 4,45:1 — 12px etiket için AA
   altı. --sky-soft (#8fd4dc) 5,11:1 ve mavi kalıyor; --sky-pale 7,73:1
   geçerdi ama neredeyse beyaz, etiketin marka rengi olduğu anlaşılmaz.

   Yalnızca bu iki bölümde: ürün turu ve vadi bölümü de .eyebrow-light
   kullanıyor, onların zemini farklı, genel kural değişmedi. Önündeki
   çizgi (.eyebrow > span, currentColor) rengi kendiliğinden alır.
   GradyanOpaklikTests koruyor.
   ============================================================ */

.mobile-app-panel .eyebrow-light,
.final-cta .eyebrow-light {
  color: var(--sky-soft);
}

/* ============================================================
   15 Eylül 2026 — FAZ3 §1 · Öne çıkanlar altı kart, Mesajlaşma sayfası.

   Izgara beşten altıya çıktı: masaüstü 3+3, tablet 2+2+2, mobil tek
   sütun. Kırılımlar /moduller ızgarasıyla (.mods) aynı: 980 ve 620.
   Eski beşli düzen ve 1180/860/560 kırılımları silindi.
   ============================================================ */

.mods-featured { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px) {
  .mods-featured { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .mods-featured { grid-template-columns: 1fr; }
}

/* Modül sayfası: özellik öbeği başlığı (Belge ve Organizasyon) */
.mod-feature-group {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 18px;
}

/* Modül sayfası: okul bazlı ayarlar tablosu (Mesajlaşma).
   İki sütun, 320 px'te de sığıyor; kaydırma kabı gerekmiyor. */
.mod-settings-title {
  margin: 8px 0 12px;
  color: var(--navy);
  font-size: 18px;
}

.mod-settings {
  width: 100%;
  margin: 0 0 28px;
  border-collapse: collapse;
  font-size: 15px;
}

.mod-settings th,
.mod-settings td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.mod-settings thead th {
  color: var(--purple-dark);
  background: var(--purple-pale);
  font-size: 13px;
  font-weight: 700;
}

.mod-settings tbody th {
  color: var(--muted);
  font-weight: 400;
}

.mod-settings td {
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   15 Eylül 2026 — FAZ3 §4 · Soru havuzunda basılı föy örnekleri.

   Üç sütunun altında, etiket şeridinin üstünde. İki Academic görseli
   yan yana; şeffaf zeminli, kart içine alınmıyor. Mobilde alt alta.
   Görseller alta hizalı: yükseklikleri farklı (433 / 495), taban
   çizgisi ortak dursun.
   ============================================================ */

.pool-printed {
  margin: 34px 0 0;
}

.pool-printed-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: 32px;
}

.pool-printed-images img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.pool-printed-caption {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}

.pool-printed-caption a {
  margin-left: 6px;
  color: var(--purple);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .pool-printed-images {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pool-printed-images img {
    max-width: 320px;
  }
}

/* ============================================================
   15 Eylül 2026 — FAZ3 §5 · Okul günü: arka planda çalışan işler.

   Zaman çizgisinin altında ayrı başlıklı blok: her iş adı ve ne
   yaptığıyla. Zaman çizgisi değil, iki sütunlu sade liste; 760 px
   altında tek sütun. Bölüm --navy zeminli.

   Eski şerit (.day-jobs flex + ul/li hap kutuları + .day-jobs-label)
   silindi; .section-day .day-jobs-label kontrast düzeltmesi de onunla
   birlikte kalktı. Yerini aşağıdaki kurallar aldı:
   başlık beyaz (15,16:1) · cümle ve açıklamalar %72 beyaz (8,48:1).
   ============================================================ */

.day-jobs {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.day-jobs-title {
  margin: 0 0 8px;
  color: var(--white);
  font-size: clamp(22px, 2.4vw, 28px);
}

.day-jobs-lead {
  max-width: 640px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.55;
}

.day-jobs-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
}

.day-jobs-list > div {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.day-jobs-list dt {
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
}

.day-jobs-list dd {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .day-jobs-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   15 Eylül 2026 — FAZ3 §6 · Ana sayfa partnerlik şeridi.

   Çözümler ile kampanya arasında tek satırlık kart. Bölüm DEĞİL:
   kendi dikey boşluğu yok, çözümler bölümünün alt boşluğunun bir
   kısmını geri alıyor. Açık zemin (koyu değil) — ana anlatıyı kesmesin.
   Dar ekranda etiket, metin ve bağlantı alt alta iner.
   Kontrast: --purple-ink / --purple-pale 10,4:1 · --purple 7,6:1.
   ============================================================ */

/* position + z-index şart: .section konumlu (position: relative)
   olduğu için negatif üst boşlukla yukarı çekilen şerit, beyaz
   çözümler bölümünün ALTINDA boyanıyordu — tarayıcıda görüldü. */
.partner-strip-wrap {
  position: relative;
  z-index: 1;
  margin-top: -56px;
}

.partner-strip {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  padding: 18px 26px;
  border: 1px solid var(--purple-soft);
  border-radius: var(--radius-lg);
  background: var(--purple-pale);
}

.partner-strip p {
  margin: 0;
}

.partner-strip-label {
  flex: none;
  color: var(--purple);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.partner-strip-text {
  flex: 1 1 auto;
  color: var(--purple-ink);
  font-size: 15.5px;
  line-height: 1.5;
}

.partner-strip-link {
  flex: none;
  color: var(--purple);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.partner-strip-link:hover,
.partner-strip-link:focus-visible {
  color: var(--purple-dark);
  text-decoration: underline;
}

@media (max-width: 980px) {
  .partner-strip {
    flex-wrap: wrap;
  }

  .partner-strip-text {
    flex-basis: 100%;
    order: 2;
  }

  .partner-strip-link {
    order: 3;
  }
}

@media (max-width: 760px) {
  /* Bu genişlikte kampanya bölümünün üst boşluğu 0 ve panel tam
     genişlik; şerit panele yapışmasın diye altına boşluk. */
  .partner-strip-wrap {
    margin-top: -24px;
    padding-bottom: 32px;
  }

  .partner-strip {
    padding: 16px 18px;
  }
}

/* ============================================================
   15 Eylül 2026 — FAZ3 §7 · Rehberlik kartının görseli.

   Öğrenci paneli (962x2077, dik) yerine öğretmen ekranının ÖDG ve
   Rehberlik & koçluk blokları geldi: kart-rehberlik.webp 900x816,
   yataya yakın. Eski pencere dikti (sabit 300–340 px yükseklik,
   object-fit: cover) — yeni görseli yanlardan kırpardı. Pencere artık
   görselin oranında, yüksekliği genişlikten geliyor; kırpılma yok.
   Genişlik ve eğim kırılımlardaki kurallardan gelmeye devam ediyor.

   Eski görsele özel `.screenshot-parent img { object-position }`
   kuralı silindi.
   ============================================================ */

.screenshot-parent {
  height: auto;
  aspect-ratio: 900 / 816;
  bottom: -36px;
}

.screenshot-parent img {
  display: block;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   15 Eylül 2026 — Kampanya: veli ekranı yine telefon çerçevesinde.

   FAZ3 §8'de telefonun yerine tablet + telefon görseli
   (kampanya-mockup.webp) konmuş, .app-phone kabı ve kuralları
   silinmişti. Aynı gün geri alındı: bölüm "velilere ve öğrencilere
   taşıyın" diyor, görsel veli ekranı olmalı. Mockup görseli ve
   .campaign-mockup kuralı silindi; .mobile-visual'a verilen
   "sol boşluk yok, ortala" geçersiz kılması da kalktı — kart yeniden
   telefonun solunda (7 Eylül düzeni: sol boşluk 96/84 px, 980 altında
   ortalı, 480 altında kart telefonun üstünde).

   ÇERÇEVE ve ORAN (7 Eylül'de yaşanan hatanın dersi korunuyor):
   çerçeve = 6 px kenarlık + 5 px dolgu; oran ÇERÇEVEYE verilirse bu
   22 px oranı kaydırıyor ve görsel kırpılıyordu. Oran ve ölçü GÖRSELİN
   kutusunda: tam 1290:2786 (1:2,16), object-fit: contain — kutu zaten
   görselin oranında, kırpılacak bir şey yok. Çerçeve içeriğe göre
   büyür. Yükseklik hem piksel hem görünür alanla sınırlı (küçüğü
   uygulanır); iç köşe 38 − 6 − 5 = 27 px.
   ============================================================ */

.app-phone {
  position: relative;
  z-index: 4;
  overflow: hidden;
  max-width: 100%;
  padding: 5px;
  background: #0e0d1a;
  border: 6px solid #161428;
  border-radius: 38px;
  box-shadow: 0 28px 55px rgba(7, 5, 31, 0.42);
}

.app-phone img {
  display: block;
  width: auto;
  height: 508px;
  max-height: calc(48vh - 22px);
  aspect-ratio: 1290 / 2786;
  object-fit: contain;
  border-radius: 27px;
}

@media (max-width: 1120px) {
  .app-phone img {
    height: 448px;
    max-height: calc(46vh - 22px);
  }
}

@media (max-width: 980px) {
  .app-phone img {
    height: 426px;
    max-height: calc(52vh - 22px);
  }
}

@media (max-width: 760px) {
  .app-phone img {
    height: 379px;
    max-height: calc(50vh - 22px);
  }
}

@media (max-width: 480px) {
  .app-phone img {
    height: 338px;
    max-height: calc(48vh - 22px);
  }
}

/* ============================================================
   15 Eylül 2026 — FAZ3 §9 · Mobil menü açıkken kaydırma kilidi.

   Menü açıkken parmakla kaydırınca arka plan hareket ediyor, önde
   titreme oluyordu: gövde kilitli değildi. site.js menü açılınca
   <html>'e .menu-open ekler ve gövdeyi o anki konumunda sabitler
   (body.style.top = -scrollY); kapanınca aynı konuma döner.

   Menü paneli kendi içinde kaydırılır; yüksekliğini site.js başlığın
   altında kalan alana göre verir (üst bar görünürken başlık 0'da
   değil). Aşağıdaki max-height JS gelmeden önceki yedek.
   overscroll-behavior: contain — panelin sonuna gelince kaydırma arka
   plana geçmesin.

   Titreme için will-change / backface-visibility EKLENMEDİ: şartname
   "önce kilidi çöz" diyor; kilitle birlikte arkada kayan içerik
   kalmıyor. Gerçek cihazda sürerse sıradaki adım o ikisi.
   ============================================================ */

/* overflow: hidden YALNIZCA <html>'de. Gövdeye verilirse gövde kendi
   kaydırma kabı olur ve yapışkan başlık ona göre konumlanır — sayfa
   aşağıdayken başlık (ve menü) ekranın dışında kalır. */
html.menu-open {
  overflow: hidden;
  /* Klasik kaydırma çubuklu tarayıcıda çubuk kaybolunca sayfa 15 px
     genişleyip yeniden akıyordu: arka plan 173 px kayıyordu (ölçüldü,
     375 px). Çubuğun yeri korunur. Dokunmatikte çubuk zaten üstte. */
  scrollbar-gutter: stable;
}

/* Alttaki sabit eylem çubuğu menünün son öğelerinin üstüne biniyordu. */
html.menu-open .sticky-bar,
html.menu-open .wa-float {
  display: none;
}

html.menu-open body {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
}

.mobile-menu {
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   15 Eylül 2026 — CIZELGE_DUZELTMELERI §9 · Rehberlik kartı görseli
   üstten hizalı.

   Yerleşim (konum, genişlik, eğim) DEĞİŞMEDİ. Görsel üstten hizalı
   (cover + top): kırpılacak bir şey olursa altı gider, üstü kalır.

   Pencere oranı BİLEREK görselin kendi oranı (900:816), daraltılmadı.
   Tarayıcıda denendi: pencere 900:600'e (yalnızca üst 600 px)
   indirilince kart pencerenin altını ayrıca kırptığı için görünen kısım
   kaynağın 0–405…472 pikseline iniyordu ve "Rehberlik & koçluk" mor
   başlığı (482–580) HİÇBİR genişlikte görünmüyordu. Görselin oranında
   görünen kısım 0–621 (760) … 0–688 (1440): ÖDG'nin yeşil başlığı
   (105–180) ve mor başlık ikisi de içeride, alttaki "Öğrencilerim"
   kartın dışında kalıyor.
   ============================================================ */

.screenshot-parent img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ============================================================
   15 Eylül 2026 — /danismanlik-ve-yazilim (eski /ozel-yazilim).

   Sekiz bölüm. Hero, kanıt kartı, adımlar ve iletişim kartları eski
   sayfanın .custom-* kurallarını kullanmaya devam ediyor; buradakiler
   yeni bölümler için.

   5. bölüm (Sürekli yönetim desteği) sayfanın en güçlü yeri: düz --navy
   panel (gradyan değil — kontrast tek renge karşı ölçülüyor).
   Hesaplanan oranlar (--navy #23204d üzerinde): başlık beyaz 15,16:1 ·
   giriş metni %80 beyaz 10,11:1 · kalemler %90 beyaz 12,52:1 ·
   etiket ve ikinci soru satırı --sky 7,94:1 · kapanış --sky-pale,
   %6 beyaz zemin üstünde 11,62:1. ConsultingTests aynı hesabı yapar.
   ============================================================ */

/* 1 · Hero: tek sütun, kanıt kartı yok */
.consult-hero {
  max-width: 880px;
}

.consult-hero h1 em {
  display: block;
  color: var(--purple);
  font-style: normal;
}

/* 2 · Pozisyonlama: solda başlık, sağda iki paragraf; altında üç kart */
.consult-positioning {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px 56px;
  align-items: start;
}

.consult-positioning h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
}

.consult-positioning-text p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.consult-positioning-text p:last-child {
  margin-bottom: 0;
}

/* 3–6 · Alanlar: solda soru + giriş, sağda kalemler */
.consult-area-grid,
.consult-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 64px;
  align-items: start;
}

.consult-question {
  margin: 0 0 22px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
}

.consult-question span {
  display: block;
}

.consult-question span + span {
  margin-top: 6px;
  color: var(--purple);
}

.consult-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
}

.consult-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.consult-items li {
  position: relative;
  padding: 14px 0 14px 26px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.5;
}

.consult-items li:first-child {
  border-top: 1px solid var(--line);
}

.consult-items li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}

/* 5 · Sürekli yönetim desteği: koyu panel */
.consult-panel {
  padding: 64px 64px 58px;
  color: var(--white);
  background: var(--navy);
  border-radius: 42px;
  box-shadow: 0 30px 76px rgba(35, 32, 77, 0.22);
}

.consult-panel .eyebrow {
  color: var(--sky);
}

.consult-panel .consult-question,
.consult-panel .consult-question span {
  color: var(--white);
}

.consult-panel .consult-question span + span {
  color: var(--sky);
}

.consult-panel .consult-intro {
  color: rgba(255, 255, 255, 0.8);
}

.consult-panel .consult-items li {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.16);
}

.consult-panel .consult-items li::before {
  background: var(--sky);
}

.consult-closing {
  margin: 26px 0 0;
  padding: 18px 20px;
  color: var(--sky-pale);
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--sky);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15.5px;
  line-height: 1.55;
}

/* 6 · Kuruma özel yazılım: VAYOS kanıt şeridi + "ürünü olan ekip" kartı */
.consult-software-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 18px;
  margin-top: 44px;
  align-items: stretch;
}

.consult-software-proof .custom-proof-figures {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.consult-software-proof .custom-reason {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 7 · Adımlar: dört kart. Otomatik sığdırma 980 px civarında 3+1'e
   düşüyordu (ölçüldü); dört / iki / tek sütun sabitlendi. */
#nasil-calisiyoruz .custom-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1120px) {
  #nasil-calisiyoruz .custom-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #nasil-calisiyoruz .custom-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1120px) {
  .consult-software-proof .custom-proof-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .consult-positioning,
  .consult-area-grid,
  .consult-panel,
  .consult-software-proof {
    grid-template-columns: minmax(0, 1fr);
  }

  .consult-panel {
    padding: 44px 36px 40px;
  }
}

@media (max-width: 620px) {
  .consult-panel {
    padding: 34px 22px 30px;
    border-radius: 28px;
  }

  .consult-items li {
    font-size: 15px;
  }
}