/*
 * YPCad Hub — tanıtım sitesi.
 *
 * YALNIZCA MANTIKSAL YÖN ÖZELLİKLERİ. `margin-left` yerine `margin-inline-start`,
 * `text-align: left` yerine `text-align: start`. Sebebi Arapça: yazı yönü sağdan sola
 * döndüğünde düzenin kendiliğinden dönmesi gerekiyor. Fiziksel bir özellik, o dilde
 * sessizce bozulan bir hizalama demek ve hatayı ancak Arapça okuyan biri fark eder.
 *
 * Bu kural bir testle zorlanıyor (`src/site/styles.test.ts`).
 *
 * Dış yazı tipi YÜKLENMİYOR. Bir tanıtım sitesinin ilk işi hızlı açılmak; ayrıca üçüncü
 * taraf bir yazı tipi sunucusu, ziyaretçinin IP adresini bizim adımıza birine göndermek
 * olurdu — kurum içi çalışmayı satan bir ürün için tuhaf bir başlangıç.
 */

:root {
  --ink: #0b1727;
  --ink-soft: #44576d;
  /* Olculdu: #6b7d92 beyazda 4,22:1 idi -- normal metin icin WCAG AA sinirinin
     (4,5:1) altinda. Bu deger beyazda 5,46, soluk zeminde 5,08. `contrast.test.ts`
     bir daha asagi inmesini engelliyor. */
  --ink-faint: #5a6b80;

  --paper: #ffffff;
  --paper-soft: #f4f7fb;
  --line: #dce4ee;

  --accent: #1560d4;
  --accent-dark: #0c4aa6;
  --accent-soft: #e8f0fd;

  --ok: #0f7a52;
  --no: #9a3b2f;

  --radius: 12px;
  --radius-lg: 18px;
  --page: 1120px;

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.6vw, 3.6rem);

  --font: ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
    'Noto Sans Arabic', 'Noto Sans Georgian', Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-block: 0 0.5em;
  text-wrap: balance;
}

p {
  margin-block: 0 1em;
  text-wrap: pretty;
}

a {
  color: var(--accent);
}

.container {
  inline-size: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
}

/* Odaklanmadan gorunmez, odaklaninca ekranin basina gelir: klavyeyle gezen kullanici her
   sayfada gezinme baglantilarini tek tek gecmek zorunda kalmasin. */
.skip {
  position: absolute;
  inset-block-start: -4rem;
  inset-inline-start: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}

.skip:focus {
  inset-block-start: 0;
}

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

/* ---------------------------------------------------------------- başlık */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-block-size: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.site-nav {
  display: flex;
  gap: 1.25rem;
  margin-inline-start: auto;
  flex-wrap: wrap;
}

.nav-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  padding-block: 0.25rem;
  border-block-end: 2px solid transparent;
}

.nav-link:hover {
  color: var(--ink);
}

.nav-link--current {
  color: var(--ink);
  border-block-end-color: var(--accent);
}

.site-header__cta {
  flex: none;
}

@media (max-width: 780px) {
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: 0.75rem;
  }

  .site-nav {
    order: 3;
    inline-size: 100%;
    margin-inline-start: 0;
    gap: 1rem;
  }

  .site-header__cta {
    margin-inline-start: auto;
  }
}

/* ---------------------------------------------------------------- düğmeler */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.button--lg {
  padding: 0.85rem 1.6rem;
  font-size: 1.02rem;
}

/*
 * Sayfada AYNI ANDA gorunen tek dolu dugme birincil olandir.
 *
 * Iki esit agirlikta secenek, secim degil tereddut uretir: goz ikisi arasinda gider gelir ve
 * en olasi sonuc hicbirine basmamaktir. Golge de bunun bir parcasi -- yuzeyden yukselen bir
 * sey, tiklanacak bir sey gibi okunur.
 */
.button--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(12, 74, 166, 0.85);
}

.button--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -12px rgba(12, 74, 166, 0.9);
}

.button--ghost {
  border-color: var(--line);
  color: var(--ink);
  background: var(--paper);
}

.button--ghost:hover {
  border-color: var(--ink-faint);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 55%);
  overflow: hidden;
}

/* Cizim kagidi izlenimi: CAD'e bir gonderme, ama okumayi zorlastirmayacak kadar soluk. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(21, 96, 212, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 96, 212, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 15%, transparent 78%);
  pointer-events: none;
}

/*
 * Tek sutun, sirasi: METIN -> KANIT -> URUNUN EKRANI.
 *
 * Gorsel once metnin YANINDA, yarim sutunda duruyordu: 1440 piksel genisligindeki yogun bir
 * yonetim ekrani 545 piksele indiginde %38 olceginde kaliyor ve okunmuyor. Ziyaretcinin
 * gordugu sey urun degil bos bir kutu oluyordu -- yani gorseli one almanin butun kazanci
 * kayboluyordu.
 *
 * Tam genislikte %78'de kaliyor: paket adlari, kanal etiketleri ve tarihler secilebiliyor.
 */
.hero__copy {
  position: relative;
  max-inline-size: 44rem;
}

.eyebrow {
  display: inline-block;
  margin-block-end: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero__title {
  font-size: var(--step-4);
  margin-block-end: 1rem;
}

.hero__subtitle {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-inline-size: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.75rem 0.9rem;
}

/* Tiklamanin bedelini dusuren cumle: dugmenin HEMEN altinda duruyor, cunku tereddut tam
   orada oluyor. */
.hero__cta-note {
  margin-block-end: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-inline-size: 30rem;
}

/*
 * KANIT SERIDI.
 *
 * Musteri logosu ya da referans yok: henuz yok ve uydurulamaz. Yerine dogrulanabilir
 * rakamlar duruyor -- her biri sitenin baska bir sayfasinda ayrintisiyla yazili. Teknik
 * alicida, tanimadigi logolardan cok daha fazla is gorur.
 */
.proof {
  position: relative;
  list-style: none;
  margin: clamp(2.25rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 2.75rem);
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.proof__item {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.proof__value {
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-dark);
  line-height: 1.1;
}

.proof__label {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.hero__shot {
  position: relative;
  margin: 0;
}

.hero__shot img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(11, 23, 39, 0.45);
}

.hero__shot figcaption {
  margin-block-start: 0.9rem;
  color: var(--ink-faint);
  font-size: 0.88rem;
  max-inline-size: 44rem;
}

.hero__shot-title {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-block-end: 0.2rem;
}

.hero__note {
  position: relative;
  font-size: 0.9rem;
  color: var(--ink-faint);
  max-inline-size: 44rem;
  margin-block: 1.75rem 0;
}

/* ---------------------------------------------------------------- bölümler */

.section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.section--muted {
  background: var(--paper-soft);
}

.section--dark {
  background: var(--ink);
  color: #e7eef7;
}

.section--dark .section__intro,
.section--dark .card__body,
.section--dark .lead {
  color: #aebfd2;
}

.section--dark .card {
  background: #12243a;
  border-color: #22395a;
}

.section__head {
  max-inline-size: 46rem;
  margin-block-end: 2.5rem;
}

.section__title {
  font-size: var(--step-3);
}

.section__intro {
  font-size: var(--step-1);
  color: var(--ink-soft);
  margin-block-end: 0;
}

.page-head {
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(1rem, 2vw, 2rem);
  background: var(--paper-soft);
  border-block-end: 1px solid var(--line);
}

.page-head h1 {
  font-size: var(--step-3);
}

.page-head__intro {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-inline-size: 44rem;
  margin-block-end: 0;
}

.lead {
  font-size: var(--step-1);
  max-inline-size: 46rem;
  margin-block-end: 0;
}

/* ---------------------------------------------------------------- kartlar */

/*
 * Kartlar genis ekranda 2x2.
 *
 * Dort karti yan yana dizmek dar ve uzun sutunlar uretiyordu: her kart uc-dort satirlik bir
 * metin tasiyor ve o metin 250 piksel genislikte okunacak bir sey degil. Iki sutun, ayni
 * icerigi "ozellik seridi" degil, okunacak bir metin gibi gosteriyor.
 */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.cards--contact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: #c2d2e6;
  box-shadow: 0 16px 32px -24px rgba(11, 23, 39, 0.5);
}

.section--dark .card:hover {
  border-color: #2c476d;
  box-shadow: none;
}

.card__title {
  font-size: var(--step-1);
  margin-block-end: 0.5rem;
}

.card__body {
  color: var(--ink-soft);
  margin-block-end: 0;
}

.card__link {
  display: inline-block;
  margin-block-start: 0.75rem;
  font-weight: 600;
  word-break: break-word;
}

/* Sorun kartlarinda ince bir isaret: bunlar cozum degil, bugunun tablosu. */
.cards--problem .card {
  border-inline-start: 3px solid #d9a441;
}

.cards--solution .card {
  border-inline-start: 3px solid var(--accent);
}

/* ---------------------------------------------------------------- gerçekler tablosu */

.facts {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.facts {
  background: var(--paper);
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 1rem;
  padding: 0.95rem 1.25rem;
  border-block-end: 1px solid var(--line);
  transition: background-color 120ms ease;
}

/* Yedi satirlik bir tabloda goz kolayca satir atlar; vurgu okunan satiri sabitliyor. */
.facts__row:hover {
  background: var(--paper-soft);
}

.facts__row:last-child {
  border-block-end: none;
}

.facts dt {
  font-weight: 600;
  color: var(--ink);
}

.facts dd {
  margin: 0;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .facts__row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ---------------------------------------------------------------- fiyatlandırma */

.panel {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  margin-block-end: 2rem;
}

.panel__title {
  font-size: var(--step-1);
  margin-block-end: 0.4rem;
}

.panel__body {
  margin-block-end: 0;
  color: #24405f;
}

.tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.tier {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.tier__name {
  font-size: var(--step-1);
  margin-block-end: 0.25rem;
}

.tier__seats {
  font-weight: 600;
  color: var(--accent-dark);
  margin-block-end: 0.5rem;
}

.tier__note {
  color: var(--ink-soft);
  margin-block-end: 0;
}

.columns {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.list li {
  padding-inline-start: 1.75rem;
  position: relative;
}

.list li::before {
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}

.list--yes li::before {
  content: '✓';
  color: var(--ok);
}

.list--no li::before {
  content: '×';
  color: var(--no);
}

.list-title {
  font-size: var(--step-1);
  margin-block-end: 0.4rem;
}

.muted {
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- SSS */

.faq {
  max-inline-size: 52rem;
}

.faq__group {
  margin-block-end: 2.5rem;
}

.faq__group-title {
  font-size: var(--step-2);
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--line);
  margin-block-end: 0.75rem;
}

.faq__item {
  border-block-end: 1px solid var(--line);
}

.faq__question {
  cursor: pointer;
  padding-block: 0.9rem;
  font-weight: 600;
  font-size: var(--step-1);
  list-style: none;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.faq__question::marker,
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::before {
  content: '+';
  color: var(--accent);
  font-weight: 700;
  flex: none;
}

.faq__item[open] .faq__question::before {
  content: '–';
}

.faq__answer {
  color: var(--ink-soft);
  padding-inline-start: 1.5rem;
  padding-block-end: 0.75rem;
  max-inline-size: 46rem;
}

.faq__answer p {
  margin-block-end: 0;
}

/* ---------------------------------------------------------------- kapanış çağrısı */

.cta {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(135deg, var(--accent-dark) 0%, #113f86 60%, #0b2d61 100%);
  color: #fff;
}

.cta__inner {
  max-inline-size: 42rem;
}

.cta h2 {
  font-size: var(--step-3);
}

.cta p {
  color: #cfe0f7;
  font-size: var(--step-1);
}

.cta .button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.cta .button--ghost:hover {
  border-color: #fff;
}

.cta .button--primary {
  background: #fff;
  color: var(--accent-dark);
}

.cta .button--primary:hover {
  background: #eaf1fd;
}

/* ---------------------------------------------------------------- altbilgi */

.site-footer {
  padding-block: 3rem 2rem;
  background: var(--ink);
  color: #9fb2c7;
  font-size: 0.93rem;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  padding-block-end: 1.75rem;
  border-block-end: 1px solid #1c2f47;
}

.brand--footer .brand__name {
  color: #fff;
}

.site-footer__tagline {
  margin-block: 0.6rem 0;
  max-inline-size: 28rem;
}

.site-footer__links {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.site-footer__links .nav-link {
  color: #9fb2c7;
  border: none;
}

.site-footer__links .nav-link:hover,
.site-footer__links .nav-link--current {
  color: #fff;
}

.language {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 1.25rem;
}

.language__label {
  color: #6f8399;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.language__item {
  color: #9fb2c7;
  text-decoration: none;
}

.language__item:hover {
  color: #fff;
}

.language__item--current {
  color: #fff;
  font-weight: 600;
}

.site-footer__notice {
  max-inline-size: 40rem;
  color: #6f8399;
  font-size: 0.85rem;
}

.site-footer__rights {
  margin-block-end: 0;
  color: #6f8399;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------- hareket */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- adımlar */

/*
 * Numarali ve SIRALI. Sira anlam tasiyor: yukleme yayin degildir, yayin da sirkete cikmak
 * degildir. Yan yana dizilmis dort kutu aralarindaki bagi siler.
 */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  max-inline-size: 52rem;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block-end: 2rem;
  position: relative;
}

/* Adimlari birbirine baglayan dikey cizgi; sonuncuda yok. */
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-block: 2.75rem 0;
  inset-inline-start: 1.1rem;
  inline-size: 2px;
  background: var(--line);
}

.step__number {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.step__title {
  font-size: var(--step-1);
  margin-block: 0.25rem 0.35rem;
}

.step__body {
  color: var(--ink-soft);
  margin-block-end: 0;
}

/* ---------------------------------------------------------------- ayrıntılar */

.dives {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.dive {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.dive__title {
  font-size: var(--step-1);
  margin-block-end: 0.5rem;
}

.dive__body {
  color: var(--ink-soft);
}

/* Iddianin nereden geldigi: pazarlama cumlesinden gorsel olarak da ayriliyor. */
.dive__detail {
  margin-block-end: 0;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--accent-soft);
  color: var(--ink-faint);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------- güvenlik denetimleri */

.controls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.control {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-inline-start: 3px solid var(--accent);
}

.control__title {
  font-size: var(--step-1);
  margin-block-end: 0.5rem;
}

.control__body {
  color: var(--ink-soft);
}

/* "Neden boyle": mekanizmanin tarifi degil, kararin gerekcesi. Ayri bir zemin, okuyanin
   ikisini karistirmamasi icin. */
.control__why {
  margin-block-end: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.list--limit li::before {
  content: '—';
  color: var(--ink-faint);
}

.list--limit {
  max-inline-size: 52rem;
}

/* ---------------------------------------------------------------- hukuki metinler */

.legal {
  max-inline-size: 46rem;
}

.legal__draft {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: #fdf4e3;
  border-inline-start: 3px solid #d9a441;
  color: #6b4f16;
}

.legal__section {
  margin-block-start: 2rem;
}

.legal__section h2 {
  font-size: var(--step-2);
}

.legal__section p {
  color: var(--ink-soft);
}

.page-head__meta {
  margin-block: 0.75rem 0;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

/* Altbilgideki baglanti obeklerinin baslIgi. */
.site-footer__group {
  color: #6f8399;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-block-end: 0.25rem;
}

/* ---------------------------------------------------------------- kurulum biçimi */

.deployments {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}

.deployment {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  block-size: 100%;
}

/* Bulut karti one cikiyor cunku fiyatlari ACIK; kurum ici teklifle geliyor ve teklif
   isteyen kisi zaten ne aradigini biliyor. */
.deployment--featured {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -28px rgba(21, 96, 212, 0.55);
}

.deployment__badge {
  align-self: start;
  margin: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.deployment--featured .deployment__badge {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.deployment__name {
  font-size: var(--step-2);
  margin: 0;
}

.deployment__body {
  color: var(--ink-soft);
  margin: 0;
}

.deployment__points {
  margin-block: 0.25rem;
}

/* "Hazir mi" sorusunun cevabi. Ayri bir zeminde duruyor cunku pazarlama cumlesi degil,
   durum bildirimi. */
.deployment__status {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.deployment__cta {
  margin-block-start: auto;
  align-self: start;
}

/* ---------------------------------------------------------------- ödeme biçimi */

/*
 * Yillik/aylik gecisi SAF CSS.
 *
 * Sitede hic JavaScript yok ve `script-src 'none'` basligini yazabilmemizin sebebi bu; tek
 * bir secici icin o sozu bozmak olmazdi. Iki gizli radyo dugmesi ve kardes secicisi ayni
 * isi goruyor -- ustelik klavyeyle de calisiyor, cunku dugmeler gercekten radyo dugmesi.
 */
.billing {
  position: relative;
  margin-block-end: 2.5rem;
}

/* Gorunmuyor ama ODAKLANILABILIR: `opacity` erisilebilirlik agacindan silmez,
   `display: none` silerdi. */
.billing__radio {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.billing__switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  margin-block-end: 1.5rem;
}

.section--muted .billing__switch {
  background: var(--paper);
}

.billing__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

#billing-annual:checked ~ .billing__switch .billing__option--annual,
#billing-monthly:checked ~ .billing__switch .billing__option--monthly {
  background: var(--ink);
  color: #fff;
}

#billing-annual:focus-visible ~ .billing__switch .billing__option--annual,
#billing-monthly:focus-visible ~ .billing__switch .billing__option--monthly {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.billing__save {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

#billing-annual:checked ~ .billing__switch .billing__option--annual .billing__save {
  background: #16a06c;
}

.billing__note {
  max-inline-size: 46rem;
  color: var(--ink-faint);
  font-size: 0.92rem;
  margin-block: 1.25rem 0;
}

/* Varsayilan yillik. Aylik blok DOM'da duruyor ama gizli; secici acinca yer degistiriyorlar. */
.billed--monthly {
  display: none;
}

#billing-monthly:checked ~ .plans .billed--annual {
  display: none;
}

#billing-monthly:checked ~ .plans .billed--monthly {
  display: block;
}

/* ---------------------------------------------------------------- paketler */

.plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  block-size: 100%;
}

.plan--recommended {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -28px rgba(21, 96, 212, 0.55);
}

/*
 * Fiyati OLMAYAN dorduncu kart.
 *
 * Yuzden fazla koltukta kurulum tek tip olmaktan cikiyor. Buraya bir rakam yazmak, ilk
 * ciddi gorusmede geri alinmak zorunda kalinirdi -- ve arama motorunda aylarca oyle
 * kalirdi. Kart digerlerinden gorsel olarak da ayri duruyor: okuyan kisi "burada fiyat
 * yok" sonucuna bakmadan varmali.
 */
.plan--custom {
  background: var(--paper-soft);
  border-style: dashed;
}

.plan__custom-body {
  margin: 0.75rem 0 0;
  padding-block: 0.75rem;
  border-block: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.plan__flag--quiet {
  background: var(--ink-soft);
}

/*
 * "Onerilen" -- "en cok tercih edilen" DEGIL: ikincisi dunya hakkinda bir iddia ve
 * dogrulayacak musterimiz henuz yok.
 *
 * Rozet AKISIN DISINDA duruyor. Icerideyken onerilen kartin butun satirlarini bir rozet boyu
 * asagi itiyordu ve uc kartin fiyatlari AYRI HIZALARDA kaliyordu -- fiyat karsilastirmasi
 * tam olarak goz hizasiyla yapilir.
 */
.plan__flag {
  position: absolute;
  inset-block-start: -0.8rem;
  inset-inline-end: 1.25rem;
  margin: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.plan__name {
  font-size: var(--step-2);
  margin: 0;
}

.plan__seats {
  margin: 0;
  font-weight: 600;
  color: var(--accent-dark);
}

/* Iki satira tasan bir tanitim cumlesi, o kartin butun fiyatlarini asagi kaydiriyordu.
   Fiyat karsilastirmasi goz hizasiyla yapilir; iki satirlik yer hep ayrilmis duruyor. */
.plan__tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  min-block-size: 2.8em;
}

.price {
  margin-block: 0.75rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--line);
}

.price__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.2rem;
}

.price__label {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.price__value {
  font-weight: 700;
  font-size: var(--step-1);
  white-space: nowrap;
}

.price__unit {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* Fiyat "platform + koltuk" oldugu icin tek rakam yetmiyor; ornek hesap toplami sayfada
   yapiyor ve rakami KODDAN aliyor. */
.plan__example {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: #24405f;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Yillik peşin ne kadar kazandiriyor: rakamin HEMEN yaninda, cunku karsilastirma orada
   yapiliyor. Ayri bir satirda dursaydi goz once fiyata, sonra baska yere giderdi. */
.plan__saving {
  display: block;
  margin-block-start: 0.35rem;
  color: var(--ok);
  font-weight: 700;
  font-size: 0.88rem;
}

.plan__example-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-dark);
  margin-block-end: 0.15rem;
}

.plan__service {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.plan__features {
  margin-block-start: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.plan__cta {
  margin-block-start: auto;
  align-self: stretch;
}

/* ---------------------------------------------------------------- dil seçici */

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  margin-inline-start: auto;
}

.site-nav {
  margin-inline-start: 0;
}

/*
 * Dil secici: JAVASCRIPT'SIZ acilir liste.
 *
 * `<details>` tarayicinin kendi acilir ogesi -- klavyeyle acilir, ekran okuyucu
 * "genisletilebilir" olarak duyurur ve sayfa bir bayt betik indirmez. Bir dil secici
 * ugruna `script-src 'none'` sozunu bozmak olmazdi.
 */
.langpick {
  position: relative;
}

.langpick__button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.langpick__button::-webkit-details-marker,
.langpick__button::marker {
  display: none;
}

.langpick__button:hover {
  border-color: var(--ink-faint);
}

.langpick[open] .langpick__button {
  border-color: var(--accent);
}

/* Ucgen ok: ayri bir gorsel yuklemeden, kenarliklardan cizilmis. */
.langpick__caret {
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid var(--ink-faint);
}

.langpick[open] .langpick__caret {
  transform: rotate(180deg);
}

/*
 * Kapaliyken ACIKCA gizli.
 *
 * `<details>` icerigini zaten gizliyor, ama liste `position: absolute` oldugu icin
 * tarayicinin varsayilan gizlemesinin altindan kayip olculebilir bir kutu birakiyordu --
 * gorunmeyen ama yer kaplayan, uzerine tiklanabilen bir katman. Gercek bir tarayicida
 * olculdu; hicbir birim testi bunu goremezdi.
 */
.langpick:not([open]) .langpick__list {
  display: none;
}

.langpick__list {
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-end: 0;
  z-index: 20;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  min-inline-size: 12rem;

  /* On uc dil yayinlandiginda liste ekrani asmasin. */
  max-block-size: min(70vh, 26rem);
  overflow-y: auto;

  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -20px rgba(11, 23, 39, 0.35);
}

.langpick__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}

.langpick__item:hover {
  background: var(--paper-soft);
  color: var(--ink);
}

.langpick__item--current {
  color: var(--ink);
  font-weight: 700;
  background: var(--accent-soft);
}

/*
 * Bayrak HICBIR ZAMAN tek basina durmaz; yaninda dilin kendi adi yazar ve anlami tasiyan o.
 * Bayrak bir dili degil bir ulkeyi gosterir -- Arapca yirmiden fazla ulkede konusuluyor,
 * Ingilizce'nin "ulkesi" yok.
 */
.flag {
  inline-size: 21px;
  block-size: 14px;
  flex: none;
  border-radius: 2px;

  /* Beyaz agirlikli bayraklar (Japonya, Polonya) beyaz zeminde kaybolmasin. */
  box-shadow: 0 0 0 1px rgba(11, 23, 39, 0.12);
}

@media (max-width: 780px) {
  .langpick__name {
    display: none;
  }

  .langpick__button {
    padding-inline: 0.6rem;
  }
}

/* ---------------------------------------------------------------- iletişim formu */

.contact {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 860px) {
  .contact {
    grid-template-columns: 1fr;
  }
}

.contact__aside {
  display: grid;
  gap: 1.25rem;
}

.form {
  display: grid;
  gap: 1.1rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.form__title {
  font-size: var(--step-2);
  margin: 0;
}

.form__intro {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.form__field {
  display: grid;
  gap: 0.35rem;
}

.form__row {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Etiket GORUNUR. Yalnizca yer tutucu metinle calisan formlar, alan doldurulunca neyin
   istendigini unutturuyor ve ekran okuyucuda tamamen kayboluyor. */
.form__label {
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.form__required {
  color: var(--no);
}

.form__optional {
  color: var(--ink-faint);
  font-weight: 500;
  font-size: 0.82rem;
}

.form__input {
  inline-size: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.form__input:focus-visible {
  border-color: var(--accent);
}

.form__input--area {
  resize: vertical;
  min-block-size: 8rem;
}

.form__hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/*
 * BAL KUPU.
 *
 * Ekranda gorunmuyor ama HTML'de duruyor; otomatik doldurucularin cogu her alani doldurur.
 * `display: none` DEGIL: bazi doldurucular gizli alanlari atliyor. Ekran disina tasiniyor
 * ve `aria-hidden` ile okuyucudan da sakli -- aksi halde gormeyen bir kullanici, doldurdugu
 * icin reddedilirdi.
 */
.form__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__turnstile {
  min-block-size: 65px;
}

.form__submit {
  justify-self: start;
}

.form__note {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.panel--quiet {
  background: var(--paper-soft);
  margin-block-end: 0;
}

/* ---------------------------------------------------------------- form sonucu */

.result {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--paper-soft);
  min-block-size: 60vh;
}

.result__inner {
  max-inline-size: 40rem;
}

.result__mark {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 0 1.25rem;
  background: var(--ok);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
}

/* Hata sayfasi gercekten HATA diyor: sessizce "tesekkurler" gostermek daha kolay olurdu ve
   ziyaretci hic gelmeyecek bir cevabi beklerdi. */
.result--failed .result__mark {
  background: var(--no);
}

.result__body {
  font-size: var(--step-1);
  color: var(--ink-soft);
}

.result__points {
  margin-block: 1.5rem;
}

.result__points li::before {
  content: '·';
  color: var(--accent);
  font-weight: 700;
}

.result__fallback {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--paper);
  border-inline-start: 3px solid var(--no);
  font-weight: 600;
}

/* ==========================================================================
   YAZI SİSTEMİNE GÖRE DÜZELTMELER

   Latin için ayarlanmış tipografi, kelime arası boşluk kullanmayan yazılarda
   sessizce bozulur: negatif harf aralığı Çince ve Japonca karakterleri
   birbirine yapıştırır, 1,65 satır yüksekliği CJK için sıkışıktır ve
   `word-break: break-word` Tayca'yı rastgele yerden keser.

   Hiçbiri konsola hata yazmaz; yalnızca o dili okuyan biri fark eder — ve o
   kişi genellikle müşteridir. Kural `locales.ts` içindeki `script` alanıyla
   eşleşiyor ve `styles.test.ts` her yazı sistemi için bir blok arıyor.

   DIŞ YAZI TİPİ YOK. Sistem yazı tipleri kullanılıyor; CJK yazı tipi dosyaları
   megabaytlarca yer tutar ve sitenin ilk işi hızlı açılmak.
   ========================================================================== */

:lang(ja),
:lang(ko),
:lang(zh) {
  /* CJK'da HARF ARALIGI: negatif deger karakterleri ust uste bindirir. Latin
     basliklarda -0.02em okunakliligi artiriyordu; burada tam tersini yapar. */
  letter-spacing: normal;

  /* Japonca ve Cince'de kelime arasi bosluk YOK, bu yuzden satir daha yogun
     gorunur; nefes payi satir YUKSEKLIGINDEN geliyor. Korece bu uclunun icinde
     ama bu yonuyle DEGIL -- orada bosluk var (bkz. `:lang(ko)` asagida). */
  line-height: 1.8;

  /* Satir sonu kurallari (kinsoku): kucuk kana, uzatma isareti ve noktalama
     satir basina DUSMEZ. `strict` bunu tarayiciya birakiyor. */
  line-break: strict;

  /* `break-all` CJK'da bile yanlis: bagli bir ifadeyi ortasindan boler. */
  word-break: normal;
  overflow-wrap: normal;
}

:lang(ja) h1,
:lang(ko) h1,
:lang(zh) h1,
:lang(ja) h2,
:lang(ko) h2,
:lang(zh) h2,
:lang(ja) h3,
:lang(ko) h3,
:lang(zh) h3 {
  letter-spacing: normal;
  line-height: 1.4;
}

:lang(ja) {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP',
    'Meiryo', var(--font);
}

:lang(ko) {
  font-family: 'Apple SD Gothic Neo', 'Pretendard', 'Malgun Gothic', 'Noto Sans KR',
    var(--font);

  /* KORECE JAPONCA GIBI DEGIL: kelime arasinda bosluk var (ttuieosugi).
     Tarayici Hangul'u CJK sayip satiri HERHANGI BIR HECEDE bolebiliyor, yani
     kelime ortadan ikiye ayriliyor. `keep-all` bolunmeyi bosluklara sabitler.

     Olculdu (gercek Chromium, 90-250px arasi dokuz genislik, `e2e/screenshots.mjs`
     icindeki dar ekran araligi):

       word-break: normal    -> 15 kelime ORTASINDAN bolundu
       word-break: keep-all  ->  0

     Kontrol olarak Ingilizce ayni olcumden gecti: `normal` ile 0, `break-all`
     ile 13. Yani olcum bolunmeyi gercekten goruyor; Korece'deki 15 bir olcum
     hatasi degil. */
  word-break: keep-all;
}

:lang(zh) {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC',
    var(--font);
}

:lang(th) {
  /* Tayca'da kelime arasi bosluk yoktur ama satir kesme SOZLUGE dayanir;
     tarayici bunu kendi yapar. `break-word` devreye girerse kelimeyi anlamsiz
     bir yerden keser.

     ONCE IDDIAYDI, task-115'te OLCULDU. Gercek Chromium, dokuz genislik
     (90-250px), sitenin kendi Tayca cumlesi; her satir sonu elle cikarilmis
     kelime sinirlariyla karsilastirildi:

         kural                    satir   yanlis yerde
         line-break: loose          20         1
         KONTROL word-break:        19        15
                  break-all

     Kontrol olmasaydi "1" hicbir sey ifade etmezdi. `break-all` sozluge
     bakmiyor ve yirmi satirin on besini yanlis yerden bolerken, bugunku kural
     yalnizca bir kez ayriliyor: 90px'de `ติดตั้ง` (kurulum) bilesigini
     `ติด`+`ตั้ง` seklinde ayiriyor. Ikisi de gercek Tayca kelime; bu bir
     cizim hatasi degil, ICU sozlugunun bilesikleri kendi parcalarina
     bolmesi. */
  word-break: normal;
  overflow-wrap: normal;
  line-break: loose;

  /* Tay yazisinda ust ve alt isaretler var; 1,65 onlari kirpiyor. */
  line-height: 1.85;
  font-family: 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', 'Thonburi', var(--font);
}

:lang(ka) {
  /* Gurcu yazisinda BUYUK HARF yok: `text-transform: uppercase` uygulanan
     yerler (rozetler, ust etiketler) o dilde hicbir sey degistirmez ama
     harf araligi metni seyreltir ve okunakliligi dusurur. */
  font-family: 'Noto Sans Georgian', 'BPG Arial', var(--font);
}

:lang(ka) .eyebrow,
:lang(ka) .badge {
  letter-spacing: normal;
}

:lang(ar) {
  /* Arapcada harfler BIRLESIR: harf araligi baglantilari koparir ve metni
     okunmaz hale getirir. Latin'de suslu duran bir ayar, burada bir arizadir. */
  letter-spacing: normal;
  line-height: 1.9;
  font-family: 'Noto Sans Arabic', 'Segoe UI', 'Geeza Pro', var(--font);
}

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) .eyebrow,
:lang(ar) .badge {
  letter-spacing: normal;
}