/* =============================================================================
   Wheelo tanıtım sitesi
   =============================================================================

   Bu dosya panelin `globals.css` dosyasından BAĞIMSIZDIR ve öyle kalmalı.
   İki ayrı şey sunuyorlar: panel bir alettir, burası bir vitrin. Ortak bir
   dosyaya bağlansaydı, vitrini değiştirmek aleti kırma riski taşırdı.

   Bağımsız olan dosya değil, DEĞERLER değil: kehribar, grafit ve kâğıt
   ölçekleri panelden birebir kopyalandı. Marka tek olmalı; iki ayrı sarı
   iki ayrı marka demektir.

   Dışarıya hiçbir istek yok: yazı tipi yok, betik kitaplığı yok, izleyici
   yok. Sebebi yalnızca hız değil — kök alan adı da panelle aynı içerik
   güvenliği başlıklarını taşıyacak (`default-src 'self'`) ve harici bir
   kaynak o başlıkla sessizce düşerdi.
   ========================================================================== */

:root {
  /* --- Marka: kehribar ------------------------------------------------- */
  --kehribar-300: oklch(0.83 0.13 82);
  --kehribar-400: oklch(0.77 0.16 75);
  --kehribar-500: oklch(0.7 0.17 68);
  --kehribar-600: oklch(0.61 0.16 60);
  /* Beyazla 5,80:1 — küçük metinde bile AA. */
  --kehribar-650: oklch(0.52 0.14 55);
  --kehribar-900: oklch(0.34 0.07 50);

  /* --- Grafit: lastik siyahından türetilmiş nötr ------------------------ */
  --grafit-50: oklch(0.98 0.002 250);
  --grafit-100: oklch(0.96 0.003 250);
  --grafit-200: oklch(0.91 0.005 250);
  --grafit-300: oklch(0.84 0.007 250);
  --grafit-400: oklch(0.68 0.009 250);
  --grafit-500: oklch(0.55 0.01 250);
  --grafit-600: oklch(0.45 0.011 250);
  --grafit-700: oklch(0.36 0.012 250);
  --grafit-800: oklch(0.26 0.012 250);
  --grafit-900: oklch(0.19 0.011 250);
  --grafit-950: oklch(0.13 0.01 250);

  /* --- Alan renkleri: paneldeki bölüm tonlarıyla aynı ------------------- */
  --ton-tezgah: oklch(0.63 0.16 55);
  --ton-atolye: oklch(0.56 0.15 25);
  --ton-servis: oklch(0.56 0.13 245);
  --ton-depo: oklch(0.55 0.11 155);
  --ton-para: oklch(0.55 0.14 295);
  --ton-kanallar: oklch(0.56 0.11 200);

  --basari: oklch(0.5 0.13 150);

  /* --- Açık tema ------------------------------------------------------- */
  --zemin: oklch(0.967 0.006 78);
  --kart: oklch(1 0 0);
  --cukur: oklch(0.938 0.008 78);
  --metin: var(--grafit-900);
  --metin-soluk: var(--grafit-600);
  --metin-silik: var(--grafit-500);
  --cizgi: var(--grafit-200);
  --cizgi-koyu: var(--grafit-300);
  --vurgu: var(--kehribar-600);
  --vurgu-guclu: var(--kehribar-650);
  --vurgu-yumusak: oklch(0.95 0.04 80);
  --vurgu-karsit: oklch(1 0 0);

  /* Koyu blok — açık temada da koyu kalan bölümler (hero, alt bilgi). */
  --murekkep: var(--grafit-950);
  --murekkep-kart: oklch(0.17 0.011 250);
  --murekkep-metin: var(--grafit-100);
  --murekkep-soluk: var(--grafit-400);
  --murekkep-cizgi: oklch(0.28 0.012 250);

  --golge: 0 1px 2px oklch(0.19 0.011 250 / 0.06), 0 8px 24px -12px oklch(0.19 0.011 250 / 0.16);
  --golge-kalk:
    0 2px 4px oklch(0.19 0.011 250 / 0.08), 0 18px 40px -18px oklch(0.19 0.011 250 / 0.28);

  --yay: 0.75rem;
  --yay-kucuk: 0.5rem;
  --hap: 999px;

  /*
    Sayfa genişliği 1180 piksel.

    Daha geniş bir kolon uzun satır demektir ve uzun satır okunmaz; daha
    dar olsaydı karşılaştırma tablosu iki sütununu yan yana taşıyamazdı.
  */
  --en: 1180px;

  color-scheme: light dark;
}

/*
 * Koyu tema yalnızca işletim sistemi tercihine bakar.
 *
 * Tanıtım sitesinde tema DÜĞMESİ yok: ziyaretçi buraya on saniyeliğine
 * uğruyor ve o on saniyede vereceği karar tema değil. Panelde düğme var,
 * çünkü orada insan sekiz saat oturuyor.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: var(--grafit-950);
    --kart: oklch(0.17 0.011 250);
    --cukur: oklch(0.15 0.01 250);
    --metin: var(--grafit-100);
    --metin-soluk: var(--grafit-400);
    --metin-silik: var(--grafit-500);
    --cizgi: oklch(0.28 0.012 250);
    --cizgi-koyu: var(--grafit-700);
    --vurgu: var(--kehribar-400);
    --vurgu-guclu: var(--kehribar-400);
    --vurgu-yumusak: oklch(0.28 0.05 60);
    --vurgu-karsit: var(--grafit-950);

    --murekkep: oklch(0.11 0.008 250);
    --murekkep-kart: oklch(0.16 0.011 250);
    --murekkep-cizgi: oklch(0.26 0.012 250);

    --golge: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px -12px oklch(0 0 0 / 0.6);
    --golge-kalk: 0 2px 4px oklch(0 0 0 / 0.5), 0 18px 40px -18px oklch(0 0 0 / 0.7);

    --ton-tezgah: oklch(0.78 0.15 60);
    --ton-atolye: oklch(0.72 0.16 28);
    --ton-servis: oklch(0.74 0.13 245);
    --ton-depo: oklch(0.74 0.12 155);
    --ton-para: oklch(0.75 0.13 295);
    --ton-kanallar: oklch(0.74 0.1 200);
    --basari: oklch(0.74 0.15 150);
  }
}

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

html {
  scroll-behavior: smooth;
  /* Sabit üst şerit, bağlantıyla gelen başlığı kesmesin. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

/* Sayısal değerler hizalı okunur — panelin `.tabular` sınıfının karşılığı. */
.rakam {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.tek {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.kabuk {
  width: 100%;
  max-width: var(--en);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Ekran okuyucuya görünür, göze görünmez. */
.gizli-metin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Klavye kullanıcısı için ilk durak: doğrudan içeriğe atlar. */
.atla {
  position: absolute;
  left: 50%;
  top: -4rem;
  transform: translateX(-50%);
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--vurgu-guclu);
  color: var(--vurgu-karsit);
  border-radius: 0 0 var(--yay-kucuk) var(--yay-kucuk);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.atla:focus {
  top: 0;
}

/* =============================================================================
   Üst şerit
   ========================================================================== */

.serit {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--murekkep) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--murekkep-cizgi);
  color: var(--murekkep-metin);
}

.serit .kabuk {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}

.kilit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: inherit;
}

.kilit svg {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.serit-menu {
  display: none;
  margin-left: auto;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.serit-menu a {
  color: var(--murekkep-soluk);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.serit-menu a:hover {
  color: var(--murekkep-metin);
  border-bottom-color: var(--kehribar-400);
}

@media (min-width: 900px) {
  .serit-menu {
    display: flex;
  }
}

.serit .dugme {
  margin-left: auto;
}

@media (min-width: 900px) {
  .serit .dugme {
    margin-left: 0;
  }
}

/* =============================================================================
   Düğmeler ve rozetler
   ========================================================================== */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border-radius: var(--yay-kucuk);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.dugme-birincil {
  background: var(--kehribar-600);
  color: oklch(1 0 0);
  box-shadow: 0 8px 20px -10px oklch(0.61 0.16 60 / 0.9);
}

.dugme-birincil:hover {
  background: var(--kehribar-500);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px oklch(0.61 0.16 60 / 0.95);
}

.dugme-sessiz {
  border-color: var(--murekkep-cizgi);
  color: var(--murekkep-metin);
}

.dugme-sessiz:hover {
  border-color: var(--kehribar-400);
  color: oklch(1 0 0);
}

.dugme-cizgi {
  border-color: var(--cizgi-koyu);
  color: var(--metin);
  background: var(--kart);
}

.dugme-cizgi:hover {
  border-color: var(--vurgu);
  transform: translateY(-1px);
}

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--hap);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid;
}

.rozet-yakinda {
  border-color: oklch(0.77 0.16 75 / 0.45);
  background: oklch(0.77 0.16 75 / 0.12);
  color: var(--kehribar-300);
}

.nokta {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--kehribar-400);
  flex: none;
  animation: nabiz 2.4s ease-in-out infinite;
}

@keyframes nabiz {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

/* =============================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--murekkep);
  color: var(--murekkep-metin);
  padding: 4.5rem 0 5rem;
}

/*
 * Zemin ışığı — iki yumuşak kehribar leke.
 *
 * Bir görsel yerine ışık kullanıldı: sektör görselleri stok fotoğraftan
 * ibaret olur ve stok fotoğraf, ürünün ciddiyetini düşürür. Işık ise
 * markanın kendi rengini taşır ve hiçbir şey iddia etmez.
 */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(closest-side at 22% 30%, oklch(0.61 0.16 60 / 0.28), transparent),
    radial-gradient(closest-side at 82% 12%, oklch(0.56 0.13 245 / 0.22), transparent);
  pointer-events: none;
}

.hero .kabuk {
  position: relative;
}

.hero-duzen {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-duzen {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 4rem;
  }
}

.hero h1 {
  margin: 1.25rem 0 0;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--kehribar-300);
}

.hero-giris {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--grafit-300);
  max-width: 34rem;
  text-wrap: pretty;
}

.hero-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-not {
  margin: 1.25rem 0 0;
  font-size: 0.82rem;
  color: var(--grafit-500);
}

/* --- Ölçü çözücü: sitenin tek "numara"sı ------------------------------- */

/*
 * Neden bu görsel.
 *
 * Bir lastikçi bu sayfada üç saniye kalır ve o üç saniyede tek bir soruya
 * cevap arar: "bunu yazanlar işi biliyor mu?" Bir ekran görüntüsü bunu
 * söylemez; her yazılımın ekran görüntüsü birbirine benzer.
 *
 * `205/55 R16 91V` ölçüsünün alanlarına ayrılmış hâli söyler. Çünkü
 * piyasadaki ürünlerin tamamında bu değer serbest METİNDİR ve arayan
 * bulamaz; burada alandır.
 */
.cozucu {
  border-radius: 1rem;
  border: 1px solid var(--murekkep-cizgi);
  background: color-mix(in oklab, var(--murekkep-kart) 92%, transparent);
  padding: 1.5rem;
  box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.75);
}

.cozucu-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grafit-500);
}

.cozucu-deger {
  margin: 0.75rem 0 0;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cozucu-deger span {
  color: var(--kehribar-300);
}

.cozucu-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.25rem;
}

@media (min-width: 520px) {
  .cozucu-izgara {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.alan {
  border: 1px solid var(--murekkep-cizgi);
  border-radius: var(--yay-kucuk);
  padding: 0.6rem 0.7rem;
  background: oklch(1 0 0 / 0.02);
}

.alan dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--grafit-500);
}

.alan dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.cozucu-ayrac {
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--murekkep-cizgi);
  font-size: 0.85rem;
  color: var(--grafit-400);
}

.cozucu-ayrac strong {
  color: var(--murekkep-metin);
}

/* =============================================================================
   Bölüm iskeleti
   ========================================================================== */

.bolum {
  padding: 4.5rem 0;
}

.bolum-cukur {
  background: var(--cukur);
}

.bolum-koyu {
  background: var(--murekkep);
  color: var(--murekkep-metin);
}

.bolum-basi {
  max-width: 42rem;
}

.bolum-basi.ortala {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.etiket {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vurgu-guclu);
}

.bolum-koyu .etiket {
  color: var(--kehribar-300);
}

.bolum h2 {
  margin: 0.6rem 0 0;
  font-size: clamp(1.65rem, 3.4vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}

.bolum-giris {
  margin: 0.9rem 0 0;
  color: var(--metin-soluk);
  font-size: 1.02rem;
  text-wrap: pretty;
}

.bolum-koyu .bolum-giris {
  color: var(--grafit-400);
}

/* Sırt şeridi — markanın tek süsü. Açısı 72 derece: beş bijon arası açı. */
.sirt {
  height: 7px;
  border-radius: 2px;
  background: repeating-linear-gradient(72deg, var(--vurgu) 0 6px, transparent 6px 13px);
}

.sirt-kisa {
  width: 4rem;
  margin-top: 1.25rem;
}

.bolum-basi.ortala .sirt-kisa {
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================================
   Kart ızgaraları
   ========================================================================== */

.izgara {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.izgara-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

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

.izgara-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.kart {
  position: relative;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yay);
  padding: 1.4rem;
  box-shadow: var(--golge);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.kart:hover {
  transform: translateY(-2px);
  box-shadow: var(--golge-kalk);
}

.bolum-koyu .kart {
  background: var(--murekkep-kart);
  border-color: var(--murekkep-cizgi);
  box-shadow: none;
}

.kart h3 {
  margin: 0.85rem 0 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.kart p {
  margin: 0.4rem 0 0;
  color: var(--metin-soluk);
  font-size: 0.92rem;
}

.bolum-koyu .kart p {
  color: var(--grafit-400);
}

/*
 * Renk şeridi.
 *
 * Panelde her bölümün bir tonu var (tezgah kehribar, servis mavi, depo
 * yeşil, para mor). Vitrin aynı tonları kullanıyor ki ürünü ilk kez açan
 * kişi renkleri tanısın. Renk kartın ZEMİNİNİ boyamıyor, kenarında ince
 * bir şerit olarak duruyor: dolu zemin metni okunmaz yapıyordu.
 */
.kart-ton {
  position: absolute;
  left: 1.4rem;
  top: 0;
  width: 2.25rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ton, var(--vurgu));
}

.simge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--yay-kucuk);
  background: color-mix(in oklab, var(--ton, var(--vurgu)) 14%, transparent);
  color: var(--ton, var(--vurgu));
}

.simge svg {
  width: 1.35rem;
  height: 1.35rem;
}

.kart ul {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--metin-soluk);
}

.kart li {
  position: relative;
  padding-left: 1.1rem;
  margin-top: 0.35rem;
}

.kart li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ton, var(--vurgu));
}

/* =============================================================================
   Sektörel derinlik — numaralı liste
   ========================================================================== */

.derin {
  display: grid;
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  border-radius: var(--yay);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.derin-oge {
  background: var(--kart);
  padding: 1.4rem;
}

.derin-no {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--vurgu-guclu);
}

.derin-oge h3 {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.derin-oge p {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--metin-soluk);
}

.derin-oge .yok {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vurgu-guclu);
  border-top: 1px dashed var(--cizgi-koyu);
  padding-top: 0.55rem;
}

/* =============================================================================
   Karşılaştırma
   ========================================================================== */

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

.kiyas-kutu {
  border-radius: var(--yay);
  border: 1px solid var(--murekkep-cizgi);
  padding: 1.5rem;
  background: var(--murekkep-kart);
}

.kiyas-kutu h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.kiyas-kutu > p {
  margin: 0.3rem 0 1.1rem;
  font-size: 0.85rem;
  color: var(--grafit-500);
}

.kiyas-kutu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.kiyas-kutu li {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--murekkep-cizgi);
  color: var(--grafit-300);
}

.kiyas-kutu li:first-child {
  border-top: 0;
}

.isaret {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
}

.isaret-var {
  color: var(--basari);
}

.isaret-yok {
  color: var(--grafit-600);
}

.kiyas-one {
  border-color: oklch(0.61 0.16 60 / 0.5);
  box-shadow: 0 0 0 1px oklch(0.61 0.16 60 / 0.25);
}

/* =============================================================================
   Güvenlik şeridi
   ========================================================================== */

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

.guven-oge {
  border-left: 3px solid var(--vurgu);
  padding: 0.15rem 0 0.15rem 1rem;
}

.guven-oge h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.guven-oge p {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--metin-soluk);
}

.bolum-koyu .guven-oge p {
  color: var(--grafit-400);
}

/* =============================================================================
   Durum çizelgesi — dürüstlük bölümü
   ========================================================================== */

.durum {
  margin-top: 2.5rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--yay);
  overflow: hidden;
  background: var(--kart);
}

.durum-satir {
  display: grid;
  gap: 0.25rem 1rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--cizgi);
  align-items: baseline;
}

@media (min-width: 700px) {
  .durum-satir {
    grid-template-columns: 12rem 1fr auto;
  }
}

.durum-satir:first-child {
  border-top: 0;
}

.durum-ad {
  font-weight: 600;
  font-size: 0.95rem;
}

.durum-aciklama {
  color: var(--metin-soluk);
  font-size: 0.88rem;
}

.durum-etiket {
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: var(--hap);
  border: 1px solid;
  white-space: nowrap;
}

.durum-hazir {
  color: var(--basari);
  border-color: color-mix(in oklab, var(--basari) 45%, transparent);
  background: color-mix(in oklab, var(--basari) 10%, transparent);
}

.durum-devam {
  color: var(--vurgu-guclu);
  border-color: color-mix(in oklab, var(--vurgu) 45%, transparent);
  background: color-mix(in oklab, var(--vurgu) 10%, transparent);
}

.durum-bekliyor {
  color: var(--metin-silik);
  border-color: var(--cizgi-koyu);
}

/* =============================================================================
   Erken erişim
   ========================================================================== */

.erken {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--murekkep);
  color: var(--murekkep-metin);
  padding: 3rem 2rem;
  text-align: center;
}

.erken::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: radial-gradient(closest-side at 50% 100%, oklch(0.61 0.16 60 / 0.35), transparent);
  pointer-events: none;
}

.erken > * {
  position: relative;
}

.erken h2 {
  margin: 1rem 0 0;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}

.erken p {
  margin: 0.9rem auto 0;
  max-width: 34rem;
  color: var(--grafit-300);
}

.erken-eylem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* =============================================================================
   Alt bilgi
   ========================================================================== */

.altbilgi {
  background: var(--murekkep);
  color: var(--grafit-400);
  padding: 3rem 0 2.5rem;
  border-top: 1px solid var(--murekkep-cizgi);
  font-size: 0.88rem;
}

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

.altbilgi h3 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grafit-500);
}

.altbilgi ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.altbilgi li {
  margin-top: 0.35rem;
}

.altbilgi a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.altbilgi a:hover {
  color: var(--kehribar-300);
  border-bottom-color: currentColor;
}

.altbilgi-son {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--murekkep-cizgi);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  color: var(--grafit-500);
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------------------
   Fiyat
   ---------------------------------------------------------------------------

   İki kart yan yana. Ömür boyu olan görsel olarak öne çıkıyor çünkü
   karşılaştırmanın sonucu o: üç yıllık bedele eşit ve yenilemesi yok.
   Öne çıkarma çerçeve ve rozetle yapılıyor, boyutla değil — yükseklikleri
   eşit kalırsa satır satır karşılaştırmak kolaylaşır.

   Renkler token üzerinden; karanlık kip merkezi blokta zaten çözülüyor.
   ------------------------------------------------------------------------ */

.fiyat-izgara {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 820px) {
  .fiyat-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fiyat-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yay);
  /* Üstteki boşluk İKİ kartta da aynı: rozet yalnızca öne çıkan kartta
     var ama yer her ikisinde ayrılıyor. Böylece başlıklar, tutarlar ve
     liste satırları aynı hizada durur — karşılaştırma göz gezdirerek
     yapılabilir. Yalnızca rozetli kartın üstünü açmak iki kartı
     kaydırıyor ve satır eşleşmesini bozuyordu. */
  padding: 2.6rem 1.6rem 1.6rem;
  box-shadow: var(--golge);
}

/* Öne çıkan kart: iki katlı çerçeve, rozete yer açmak için üstten fazladan
   boşluk. Rozet kartın dışına taşmıyor — taşan rozet mobilde kırpılır. */
.fiyat-kart-one {
  border-color: var(--vurgu);
  box-shadow:
    0 0 0 1px var(--vurgu),
    var(--golge-kalk);
}

.fiyat-rozet {
  position: absolute;
  top: 1rem;
  left: 1.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vurgu-guclu);
  background: var(--vurgu-yumusak);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}

.fiyat-kart h3 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.fiyat-aciklama {
  margin: 0.35rem 0 0;
  color: var(--metin-soluk);
  font-size: 0.9rem;
}

.fiyat-tutar {
  margin: 1.1rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.fiyat-sayi {
  font-size: clamp(2.2rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fiyat-birim {
  /* Sayıya yapışmasın: "50.000₺" tek kelime gibi okunuyordu. */
  margin-left: 0.15rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--metin-soluk);
}

.fiyat-kdv {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--metin-silik);
}

.fiyat-liste {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  /* Düğme her iki kartta da aynı hizada dursun diye liste boşluğu yer. */
  flex: 1;
  align-content: start;
}

.fiyat-liste li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.92rem;
  color: var(--metin-soluk);
}

/* Onay işareti metin değil, süs: ekran okuyucu "onay onay onay" okumasın
   diye ::before ile çiziliyor. */
.fiyat-liste li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.42em;
  width: 0.62rem;
  height: 0.32rem;
  border-left: 2px solid var(--basari);
  border-bottom: 2px solid var(--basari);
  transform: rotate(-45deg);
}

.fiyat-dugme {
  margin-top: 1.6rem;
  width: 100%;
  justify-content: center;
}

.fiyat-dipnot {
  margin: 1.5rem auto 0;
  max-width: 48rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--metin-silik);
}