/* ============================================================
   ControlAtWork — ana sayfa
   Renk sistemi brand.css icinde.
   ============================================================

   HAREKET FELSEFESI
   Tek bir egri kullanilir: ease-out-expo. Hizli baslar, uzun yerlesir,
   HEDEFI ASMAZ. Yaylanma (overshoot) oyuncu okunur; burada konu insanlarin
   isyerinde kotu muamele gormesi. Tek bu egri secimi, duygusal registerin
   buyuk kismini belirliyor.

   Sureler 700-1100ms — jenerik sayfalarin 300ms'i tedirgin gorunur.

   Acilan hicbir sey geri KAPANMAZ. Yukari kaydirinca yeniden gizlenen
   bolumler, amator sayfanin bir numarali isareti.

   YAPILMAYANLAR (arastirma bulgusu)
   - Mor-mavi gradyan: 2026'da "yapay zeka uretimi sayfa" imzasi.
   - Cam efektli kartlar, bulanik lekeler uzerinde yuzen paneller.
   - Her seyin ortalanmasi. Odullu sayfalar asimetrik ve sola hizali.
   - Ozel imlec, miknatisli dugme, yatay kaydirma bolumu.
   - Her yerde ayni 16px kose yaricapi.
   ============================================================ */

:root {
  --ease: cubic-bezier(.16, 1, .3, 1);      /* ease-out-expo */
  --ease-soft: cubic-bezier(.25, 1, .5, 1);
  --dur: 900ms;
  /* Yukselme mesafesi: 12px altinda gorunmez, 32px ustunde "kayan arayuz"
     olur. 18px ~ bir govde satiri; oge kendi satirina yerlesiyor gibi. */
  --lift: 18px;

  --wrap: 1140px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(88px, 13vw, 168px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1.0625rem, .35vw + .98rem, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Baslıklar ---------- */
/* Serif basliklar: "dusunulmus" okunur, "kurumsal" degil. Bu urunde
   ton onemli — konu birinin isyerinde yasadigi kotu muamele. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Kullanici talebi: baslik karakteri daha KALIN ve profesyonel.
     Fraunces degisken bir serif; 600-700 agirlikta hem agir hem zarif. */
  font-weight: 640;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.06; font-weight: 680; }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.12; }
/* h3 govde metninden BELIRGIN sekilde buyuk. Onceki 1.2rem cok kucuk
   kaliyordu ve baslik gibi okunmuyordu. */
h3 { font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.22; }
h4 { font-size: clamp(1.16rem, 1.3vw, 1.3rem); line-height: 1.3; font-weight: 620; }

p { margin: 0 0 1.1em; max-width: 62ch; text-wrap: pretty; }
/* 62ch, 75 degil: Turkce kelimeler daha uzun; uzun olcu + uzun kelime
   gozu hizli yorar. */

.lede { font-size: clamp(1.15rem, 1.1vw + .95rem, 1.4rem); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; line-height: 1.55; color: var(--ink-3); }

/* Bolum etiketi. text-transform KULLANILMIYOR: Turkce'de i -> I olur,
   "İşyeri" -> "ISYERI" cikar. Harfler dogrudan boyle yaziliyor. */
.eyebrow {
  font-size: .84rem; font-weight: 600; letter-spacing: .1em;
  color: var(--accent); margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; flex: none;
}

section { padding-block: var(--section-y); }

/* ---------- Dugmeler ---------- */
@property --glow { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.btn {
  --glow: 0%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-size: .98rem; font-weight: 600; letter-spacing: -.005em;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #135741 0%, var(--accent) 60%, #0A3124 100%);
  color: var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 calc(var(--glow) * .07) color-mix(in oklch, var(--accent) 26%, transparent),
    0 6px 18px rgba(8,39,29,.16);
  transition: --glow 420ms linear, transform 220ms var(--ease-soft);
}
.btn:hover { --glow: 100%; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--lg { padding: 18px 32px; font-size: 1.02rem; }

.arrow { transition: transform 320ms var(--ease); }
.btn:hover .arrow, .lnk:hover .arrow { transform: translateX(4px); }

.lnk {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 560; font-size: .98rem;
}
.lnk:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   Ust cubuk
   ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 400ms var(--ease-soft);
}
.hdr.is-stuck { border-bottom-color: var(--line); }

.hdr-in {
  max-width: var(--wrap); margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
/* Ust cubukta IKON YOK — yalnizca kelime markasi. Ikon favicon olarak
   ve sosyal onizlemede yasiyor; basligin icinde metinle yarisiyordu. */

.nav { display: flex; gap: 4px; margin-left: 18px; }
.nav a {
  padding: 8px 13px; border-radius: 9px;
  font-size: .94rem; color: var(--ink-2);
  transition: color 220ms, background 220ms;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.spacer { flex: 1; }

.hdr-act { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink-2);
  transition: color 200ms, border-color 200ms;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
/* ============================================================
   Dil secici — bayrakli
   ============================================================
   Onceki "TR/EN" metin dugmesi sayfanin geri kalanindan kopuktu.
   Bayrak hem daha hizli taniniyor hem de tipografiyle yarismiyor.

   Iki bayrak da HER ZAMAN gorunur; aktif olan tam opak ve altin
   cizgili, digeri soluk. Boylece "tiklarsam ne olacak" belirsizligi
   kalmiyor — kullanici iki secenegi birden goruyor.
   ============================================================ */
.caw-lang {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.caw-lang button {
  width: 34px; height: 34px; padding: 0;
  border: 0; background: transparent; border-radius: 999px;
  display: grid; place-items: center; position: relative;
  transition: background 260ms var(--ease-soft);
}
.caw-lang img {
  width: 26px; height: 26px; border-radius: 999px;
  object-fit: cover; display: block;
  opacity: .3; filter: grayscale(1);
  transition: opacity 320ms var(--ease-soft), filter 320ms var(--ease-soft);
}
/* Aktif dil: tam renkli + altin halka. Pasif olan gri ve soluk —
   hangisinin secili oldugu tek bakista anlasiliyor. */
.caw-lang button[aria-pressed="true"] img { opacity: 1; filter: none; }
.caw-lang button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px var(--surface-2);
}
.caw-lang button:hover img { opacity: .75; filter: grayscale(.3); }

@media (max-width: 900px) { .nav { display: none; } }

/* ============================================================
   Hero
   ============================================================
   Asimetrik: metin solda, gorsel sagda ve hafif asagida. Ortalanmis
   hero, arastirmadaki "jenerik" isaretlerinden biri.
   ============================================================ */
.hero {
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(64px, 10vw, 128px);
  position: relative; isolation: isolate;
}

/* ============================================================
   Hero zemini — akan tul
   ============================================================
   Video GRI TONLU. Rengi CSS veriyor; tek dosya iki temaya birden
   hizmet ediyor ve tema degisince zemin de degisiyor.

   Boyama yontemi: sepia() gri goruntuyu kahverengiye cevirir (~35°),
   hue-rotate onu zumrute tasir, saturate doygunlugu ayarlar. Ustune
   ince bir zumrut/altin katman soft-light ile biniyor — sert bir
   renk yamasi degil, kumasin uzerine dusen isik gibi.

   Video 42 MB'dan 0.69 MB'a indirildi: 854px, 20fps, agir sikistirma.
   Zaten soluk ve bulanik gosterildigi icin cozunurluk fark etmiyor.
   ============================================================ */
.silk {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  /* Kenarlarda yumusak bitis: video dikdortgeni belli olmasin. */
  -webkit-mask-image: radial-gradient(115% 86% at 50% 28%, #000 24%, transparent 72%);
          mask-image: radial-gradient(122% 92% at 50% 32%, #000 34%, transparent 76%);
}
.silk-v {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Cok dusuk opaklik: tul FARK EDILMEMELI, yalnizca yuzeyde bir
     doku hissi birakmali. Onceki .30 degeri parlak mint bir yikama
     yaratiyordu ve elegan degil ÇIG duruyordu. */
  opacity: .13;
  filter: grayscale(1) sepia(.6) hue-rotate(108deg) saturate(1.5) brightness(.92);
}
.silk-tint {
  position: absolute; inset: 0; display: block;
  /* Altin pay SAG UST'te: hero metni solda; altin orada olsa metnin
     arkasindan gecer ve okunurlugu bozardi. */
  background:
    radial-gradient(60% 52% at 84% 18%,
      color-mix(in srgb, var(--gold) 22%, transparent), transparent 66%),
    radial-gradient(50% 44% at 16% 24%,
      color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 68%);
  mix-blend-mode: soft-light;
  opacity: .8;
}

/* Koyu temada tul daha gorunur olmali: koyu zeminde ayni opaklik
   kayboluyor. Ton da aciliyor. */
:root[data-theme="dark"] .silk-v {
  opacity: .16;
  filter: grayscale(1) sepia(.5) hue-rotate(112deg) saturate(1.4) brightness(.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .silk-v {
    opacity: .16;
    filter: grayscale(1) sepia(.5) hue-rotate(112deg) saturate(1.4) brightness(.7);
  }
}

/* Hareketi azalt: video durur, poster kalir. */
@media (prefers-reduced-motion: reduce) {
  .silk-v { display: none; }
  .silk { background: var(--accent-soft); opacity: .5; }
}

.hero-grid {
  display: grid; grid-template-columns: 1fr .82fr;
  gap: clamp(32px, 4vw, 56px); align-items: center;
  position: relative;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 22px; }
/* Korku cumlesi altin: cumlenin agirligi orada. Acik zeminde ham altin
   okunmaz, bu yuzden gradyanin en parlak bandi 3.25:1 — buyuk metin
   esigi 3:1, guvenli. */
.hero .lede { margin-bottom: 32px; max-width: 40ch; }
.hero-note { margin: 26px 0 0; }

/* ============================================================
   Hero metni: bulaniktan nete
   ============================================================
   Sert maske yerine BULANIKLIK: maske "perdenin arkasindan cikti"
   der, bulaniklik "odaklandi" der. Ikincisi daha sakin.
   Turkce kazanci: overflow olmadigi icin ğ ş ç kuyruklari kirpilmiyor.
   ============================================================ */
.lines .ln { display: block; }
.lines .ln > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .lines .ln > span {
    opacity: 0; filter: blur(10px); transform: translateY(12px);
    animation: focus-in 1000ms var(--ease) forwards;
  }
  .lines .ln:nth-child(2) > span { animation-delay: 90ms; }
  .lines .ln:nth-child(3) > span { animation-delay: 180ms; }
  @keyframes focus-in { to { opacity: 1; filter: blur(0); transform: none; } }

  .hero .lede, .hero-cta, .hero-note {
    opacity: 0; filter: blur(6px); transform: translateY(10px);
    animation: focus-in 900ms var(--ease) forwards;
  }
  .hero .lede { animation-delay: 320ms; }
  .hero-cta   { animation-delay: 430ms; }
  .hero-note  { animation-delay: 540ms; }
}

/* --- Hero gorseli: sohbet --- */
.chat-card {
  background: var(--surface);
  /* Ust kenarda cok ince altin hat — kart bir mucevher kutusu gibi
     kapaniyor. Altin burada dolgu, metin degil; kural korunuyor. */
  border-top: 2px solid transparent;
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    linear-gradient(90deg, transparent, var(--gold), transparent);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  max-width: 420px; margin-left: auto;
}
@media (max-width: 940px) { .chat-card { margin-inline: 0; max-width: 100%; } }

.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.chat-head img { width: 30px; height: 30px; border-radius: 8px; }
.chat-head b { font-size: .94rem; font-weight: 620; }
.chat-head span { font-size: .78rem; color: var(--ink-3); display: block; }

.msgs { display: flex; flex-direction: column; gap: 10px; min-height: 210px; }
.msg {
  padding: 11px 15px; border-radius: 15px;
  font-size: .95rem; line-height: 1.5; max-width: 88%;
}
.msg--bot { background: var(--surface-2); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg--me  {
  background: linear-gradient(180deg, #145A43 0%, var(--accent) 62%, #0A3125 100%);
  color: var(--accent-ink);
  border-bottom-right-radius: 5px; align-self: flex-end;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ============================================================
   Sohbet ritmi
   ============================================================
   Mesajlar JS ile SIRAYLA gosteriliyor (home.js), CSS gecikmesiyle
   degil. Neden: gercekci olmasi icin bekleme suresi MESAJ UZUNLUGUNA
   bagli olmali — kisa cevap hizli, uzun cevap yavas gelir. Sabit
   gecikme, sahte bir metronom gibi duyuluyor.

   Bot tarafinda "yazma" durumu var ama ZIPLAYAN UC NOKTA YOK. O
   kalip sevimli ve bu urunu oyuncak gosterir. Yerine baslikta sessiz
   bir durum yazisi var.
   ============================================================ */
.msg {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  transition: opacity 520ms var(--ease), filter 520ms var(--ease),
              transform 520ms var(--ease);
}
.msg.is-on { opacity: 1; filter: blur(0); transform: none; }

@media (prefers-reduced-motion: reduce) {
  .msg { opacity: 1; filter: none; transform: none; }
}

/* Baslikta sessiz durum yazisi. Nokta yok, ziplama yok. */
.chat-state {
  font-size: .78rem; color: var(--ink-3); display: block;
  min-height: 1.2em;
}
.chat-state.typing { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .chat-state.typing { animation: breathe 1.6s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
}

/* ============================================================
   Guven seridi
   ============================================================
   Sayilar tabular-nums ve sabit genislikle: sayarken satir zipllamasin.
   O zipllama, insanlarin adini koyamadigi ama hissettigi kalitesizliktir.
   ============================================================ */
.proof {
  padding-block: clamp(44px, 6vw, 72px);
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.proof-in {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 5vw, 64px); flex-wrap: wrap;
}
.proof-item { text-align: center; }
.proof-n {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  /* Renk .metal-gold / .metal-emerald sinifindan gelir; burada
     background-image TANIMLANMAZ, yoksa o siniflari ezer. */
  -webkit-background-clip: text; background-clip: text;
}
.proof-l {
  display: block; margin-top: 8px;
  font-size: .84rem; letter-spacing: .04em; color: var(--ink-3);
}
/* Ince altin ayirac — kitligi degerini yapiyor. */
.proof-sep {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .55;
}
@media (max-width: 720px) { .proof-sep { display: none; } }
.proof-note {
  margin: 26px auto 0; text-align: center;
  font-size: .92rem; color: var(--ink-3); max-width: 52ch;
}

/* ============================================================
   Sessizligin bedeli
   ============================================================ */
.cost {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.cost-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 44px); margin-top: 52px;
}
.cost-item { border-top: 2px solid var(--line); padding-top: 20px; }
.cost-item h3 { margin-bottom: 8px; }
.cost-item p { font-size: .96rem; color: var(--ink-2); margin: 0; }

/* ============================================================
   Yapiskan anlati: bireysel sohbet -> isimsiz harita
   Sayfanin en onemli bolumu. Urunun cekirdek guven iddiasi bu ve
   tek cumleyle anlatmasi gercekten zor.
   ============================================================ */
.story-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 6vw, 88px); }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 0; } }

.story-vis { position: sticky; top: 14vh; height: 72vh; display: grid; place-items: center; }
@media (max-width: 900px) {
  .story-vis { top: 64px; height: 46vh; z-index: 1; background: var(--bg); }
}

.story-steps > .step {
  /* 80vh, 100vh degil: tam ekran adim, okuyucuya iki yaninda hicbir baglam
     birakmaz ve kaydirma ele gecirilmis hissi verir. Ayrica mobilde 100vh
     daralan adres cubuguyla kavga eder. */
  min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 900px) { .story-steps > .step { min-height: 58vh; } }

.step-n {
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1;
  font-weight: 700; color: var(--accent); opacity: .22; margin-bottom: 10px;
}
.step h3 { margin-bottom: 14px; }
.step p { color: var(--ink-2); margin: 0; }

/* Gorsel durumlari */
.vis {
  width: 100%; max-width: 400px; aspect-ratio: 1;
  display: grid; place-items: center; position: relative;
}
.vis-layer {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity 600ms var(--ease-soft);
}
.vis-layer.is-on { opacity: 1; }

/* 1 — tek kisi */
.dot-one {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center;
  color: var(--accent-ink); font-weight: 600; font-size: .9rem;
  box-shadow: 0 0 0 12px var(--accent-soft);
}
/* 2 — kalabalik */
.dot-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.dot-grid i {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ramp-2); display: block;
}
.dot-grid i.hi { background: var(--accent); }
/* 3 — isimsiz harita */
.map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; width: 100%; max-width: 330px; }
.map i { aspect-ratio: 1; border-radius: 5px; display: block; }

/* ============================================================
   Firma ne goruyor
   ============================================================ */
.panel-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px); margin-top: 48px;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.panel-head h3 { margin: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.tile { background: var(--surface-2); border-radius: var(--r-sm); padding: 16px 18px; }
.tile dt { font-size: .8rem; color: var(--ink-2); margin-bottom: 6px; }
.tile dd { margin: 0; font-size: 1.85rem; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 132px; margin-bottom: 10px; }
.bar { flex: 1; border-radius: 5px 5px 0 0; transform: scaleY(0); transform-origin: bottom; }
/* height degil scaleY: height yerlesim hesaplatir, scale ise dogrudan
   birlestiricide calisir — mobilde fark edilir. */
.is-in .bar { transition: transform 1000ms var(--ease); transform: scaleY(1); }
.bar:nth-child(1) { transition-delay: 0ms }   .bar:nth-child(2) { transition-delay: 70ms }
.bar:nth-child(3) { transition-delay: 140ms } .bar:nth-child(4) { transition-delay: 210ms }
.bar:nth-child(5) { transition-delay: 280ms }
.bar-labels { display: flex; gap: 10px; }
.bar-labels span { flex: 1; text-align: center; font-size: .74rem; color: var(--ink-3); }

.warnbox {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--r-sm);
  background: var(--warn-bg); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  font-size: .92rem; line-height: 1.6;
}
.warnbox b { color: var(--warn); }

/* ============================================================
   Guven mimarisi
   ============================================================ */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; margin-top: 52px; }
.tcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 24px;
  transition: opacity 400ms var(--ease-soft), border-color 300ms;
}
.tcard h3 { margin-bottom: 10px; font-size: 1.12rem; }
.tcard p { font-size: .95rem; color: var(--ink-2); margin: 0; }
/* Ikonlar altin: zumrut kartlarin uzerinde altin, tastaki metal
   montura karsilik geliyor. Ikon CIZGI oldugu icin (metin degil)
   parlak altin burada kullanilabilir. */
.tmark {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 16px;
  display: grid; place-items: center;
  color: var(--gold-ink);
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
/* Kardes soluklastirma: sessiz bir odak isareti. .55'te tutuluyor —
   daha agir soluklastirma saldirgan hissettiriyor. */
@media (hover: hover) {
  .trust-grid:has(.tcard:hover) .tcard:not(:hover) { opacity: .55; }
  .tcard:hover { border-color: var(--line-strong); }
}

/* ============================================================
   Yontem
   ============================================================ */
.method { background: var(--surface); border-block: 1px solid var(--line); }
.refs { display: grid; gap: 2px; margin-top: 40px; }
.ref {
  display: grid; grid-template-columns: minmax(112px, .3fr) 1fr;
  gap: clamp(12px, 3vw, 40px);
  padding: 22px 0; border-top: 1px solid var(--line);
}
@media (max-width: 640px) { .ref { grid-template-columns: 1fr; gap: 6px; } }
.ref dt { font-weight: 600; font-size: .96rem; }
.ref dd { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ============================================================
   Kapanis
   ============================================================ */
.cta-sec { text-align: left; }
.cta-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow);
  padding: clamp(36px, 6vw, 76px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 820px) { .cta-box { grid-template-columns: 1fr; } }
.cta-box h2 { margin-bottom: 14px; }
.cta-box p { margin-bottom: 26px; color: var(--ink-2); }

.entry { display: grid; gap: 10px; }
/* Alt giris kartlari: onceki halinde "tiklanabilir" oldugu
   anlasilmiyordu — cerceve zayif, imlec ipucu yoktu. Artik dolgulu
   yuzey, belirgin kenarlik ve ok var. */
.entry-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-radius: var(--r);
  /* Daha kalin kenarlik + zumrut ipucu: "tiklanir" mesaji durgun
     haldeyken de verilmeli, yalnizca uzerine gelince degil. */
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6);
  transition: border-color 260ms, transform 260ms var(--ease-soft),
              box-shadow 260ms var(--ease-soft);
}
/* Uzerine gelince zumrut dolgu + altin hat: "burasi tiklanir" mesaji
   renkle de veriliyor, yalnizca kenarlikla degil. */
.entry-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, #135741 0%, var(--accent) 62%, #0A3124 100%);
  opacity: 0; transition: opacity 320ms var(--ease-soft);
  z-index: -1;
}
.entry-card { position: relative; isolation: isolate; overflow: hidden; }
.entry-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.entry-card:hover::after { opacity: 1; }
.entry-card:hover b { color: var(--accent-ink); }
.entry-card:hover span { color: color-mix(in srgb, var(--accent-ink) 74%, transparent); }
.entry-card:hover .arrow { color: var(--gold); transform: translateX(5px); }
.entry-card b, .entry-card span, .entry-card .arrow { transition: color 320ms var(--ease-soft), transform 320ms var(--ease); }
.entry-card b { display: block; font-size: 1rem; font-weight: 640; color: var(--ink); }
.entry-card span { font-size: .85rem; color: var(--ink-3); }
.entry-card .arrow { margin-left: auto; color: var(--accent); flex: none; }

/* ============================================================
   Hero giris dugmeleri
   ============================================================
   Iki satirli dugme: ust satir eylem, alt satir aciklama. Tek satirlik
   "Giris" dugmesi kullaniciya HANGI girisi oldugunu sormak zorunda
   birakiyordu; aciklama o soruyu ortadan kaldiriyor.
   ============================================================ */
.hbtn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px; border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 1rem; font-weight: 620; color: var(--ink);
  min-width: 0;
  transition: border-color 300ms var(--ease-soft),
              transform 300ms var(--ease-soft),
              box-shadow 300ms var(--ease-soft);
}
.hbtn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.hbtn .arrow { color: var(--accent); flex: none; }
.hbtn:hover .arrow { transform: translateX(4px); }
.hbtn .arrow { color: var(--accent); flex: none; }
.hbtn:hover .arrow { transform: translateX(4px); }

/* Birincil: zumrut dolgulu. Altin ince cizgi — kitligi degerini yapiyor. */
/* Gradyan derinlik: referans gorseldeki metalik zumrutun karsiligi.
   Ustten hafif acik, dibe koyu — isik yukaridan geliyor gibi. */
.hbtn--primary {
  background: linear-gradient(180deg, #135741 0%, var(--accent) 60%, #0A3124 100%);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent),
    0 8px 24px rgba(8,39,29,.18);
}
/* DIKKAT: bu blok @media icinde OLMAK ZORUNDA.
   Sarmalayici olmadan :root:not([data-theme="light"]) acik modda DA
   eslesir — hicbir data-theme yokken kosul dogrudur — ve acik temada
   parlak yesil bir dugme cikardi. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hbtn--primary {
    background: linear-gradient(180deg, #8FDCBC 0%, var(--accent) 58%, #4FA684 100%);
  }
}
:root[data-theme="dark"] .hbtn--primary {
  background: linear-gradient(180deg, #8FDCBC 0%, var(--accent) 58%, #4FA684 100%);
}
/* Tek satira gecince .hbtn-txt sarmalayicisi kalkti; renk kurallari
   ona bagli kaldigi icin birincil dugmenin metni KOYU kalmisti.
   Renk artik dogrudan dugmenin kendisinde. */
.hbtn--primary { color: var(--accent-ink); }
.hbtn--primary .arrow { color: var(--accent-ink); }
.hbtn--primary:hover { border-color: var(--gold); }

/* Iki dugme YAN YANA. Onceki flex+min-width:260px kurgusunda hero
   sutunu dar oldugu icin alt alta duşuyorlardi. Grid ile kesin. */
.hero-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch;
}
@media (max-width: 620px) { .hero-cta { grid-template-columns: 1fr; } }

.btn--sm { padding: 10px 18px; font-size: .92rem; }
.btn--block { width: 100%; justify-content: center; }

/* ============================================================
   Iletisim formu
   ============================================================ */
.cform { display: grid; gap: 14px; align-content: start; }
/* Formun gonder dugmesi DUZ renk. Gradyan burada, ozellikle koyu
   temada, hero dugmesiyle yarisiyor ve kirli duruyordu. Form eylemi
   sessiz olmali. */
.cform .btn { background: var(--accent); box-shadow: none; }
.cform .btn:hover { background: var(--accent-2); }
.cfield { display: grid; gap: 6px; }
.cfield label { font-size: .88rem; font-weight: 560; color: var(--ink-2); }
.cfield .opt { font-weight: 400; color: var(--ink-3); }
.cfield input, .cfield textarea {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: .98rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  outline: none; resize: vertical;
  transition: border-color 220ms, box-shadow 220ms;
}
.cfield input:focus, .cfield textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cfield input[aria-invalid="true"], .cfield textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.cform-msg { min-height: 22px; margin: 2px 0 0; font-size: .9rem; }
.cform-msg.ok  { color: var(--ok); }
.cform-msg.err { color: var(--danger); }

/* ============================================================
   Alt bilgi — DERIN ZUMRUT BLOK
   ============================================================
   Acik zeminde koyu bir blok: referans gorseldeki kontrastin aynisi
   (acik fonda koyu zumrut arac). Sayfayi kapatir ve altin burada
   METIN olarak kullanilabilir — koyu zeminde altin 13.59:1.

   Acik modda bile koyu: footer bir "dip" olmali, sayfanin devami degil.
   ============================================================ */
.ftr {
  --f-ink:   #EAF3EE;
  --f-ink-2: #9FB8AD;
  --f-ink-3: #7D9A8E;
  --f-line:  rgba(255,255,255,.10);

  position: relative; overflow: hidden;
  padding-block: clamp(56px, 7vw, 88px) 0;
  color: var(--f-ink);
  /* Gradyan: ust kenar biraz daha acik, dibe dogru koyulasiyor —
     cilali bir yuzeyin derinligi. Duz renk yassi duruyordu. */
  background:
    radial-gradient(120% 90% at 50% 0%, #14513C 0%, transparent 62%),
    linear-gradient(180deg, #0D3F2F 0%, #072A1F 58%, #052017 100%);
}
/* Ayni tuzak: @media sarmalayicisi olmadan bu kural ACIK modda da
   eslesirdi ve footer yanlis gradyani alirdi. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ftr {
    background:
      radial-gradient(120% 90% at 50% 0%, #0F3B2C 0%, transparent 62%),
      linear-gradient(180deg, #0A2C21 0%, #05130D 100%);
  }
}
:root[data-theme="dark"] .ftr {
  background:
    radial-gradient(120% 90% at 50% 0%, #0F3B2C 0%, transparent 62%),
    linear-gradient(180deg, #0A2C21 0%, #05130D 100%);
}

.ftr-in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start;
}
.ftr-brand { flex: 1 1 280px; }
.ftr-brand .wordmark { color: var(--f-ink-2); }
.ftr-brand .wordmark b { color: var(--gold); }
.ftr-brand p { font-size: .9rem; color: var(--f-ink-3); margin: 14px 0 0; max-width: 32ch; }

.ftr-col { flex: 0 1 auto; min-width: 132px; display: grid; gap: 11px; align-content: start; }
.ftr-col b {
  font-size: .76rem; font-weight: 620; letter-spacing: .09em;
  color: var(--gold); margin-bottom: 3px;
}
/* Koyu footer zemininde parlak altin gradyani kullanilabilir. */
.ftr .metal-gold-sm { background-image: var(--gold-grad-sm); }
.ftr-col a { font-size: .93rem; color: var(--f-ink-2); transition: color 220ms; }
.ftr-col a:hover { color: var(--f-ink); }

/* --- Dev kelime markasi --- */
.ftr-big {
  margin-top: clamp(40px, 5vw, 72px);
  /* Kapsayici YOK: yazi sayfanin tamamini kaplasin. Tasmasi sorun degil,
     kullanicinin talebi bu — bir yuzey gibi dursun. */
  width: 100%; overflow: hidden;
}
.ftr-big span {
  display: block; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  /* 13.2vw: ekran ne olursa olsun kenardan kenara uzanir. */
  font-size: 13.2vw;
  line-height: .86; letter-spacing: -.045em;
  white-space: nowrap; user-select: none;

  background-image: linear-gradient(
    100deg,
    rgba(255,255,255,.085) 0%, rgba(255,255,255,.085) 33%,
    #C9A643 44%, #F4DE9C 50%, #C9A643 56%,
    rgba(255,255,255,.085) 67%, rgba(255,255,255,.085) 100%);
  background-size: 320% 100%;
  background-position: 135% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .ftr-big span { animation: sheen 14s var(--ease-soft) infinite; }
  @keyframes sheen {
    0%, 8%    { background-position: 135% 0; }
    58%, 100% { background-position: -35% 0; }
  }
}

.ftr-btm {
  max-width: var(--wrap); margin-inline: auto;
  padding: 22px var(--gutter) 34px;
  margin-top: clamp(10px, 2vw, 20px);
  border-top: 1px solid var(--f-line);
  font-size: .85rem; color: var(--f-ink-3);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.ftr-btm a { color: var(--f-ink-2); }
.ftr-btm a:hover { color: var(--gold); }

/* ============================================================
   Ortaya cikma
   ============================================================
   Taban: her sey GORUNUR. Icerigi, geri getirecek bir yol olmadan
   asla gizlemeyiz — betik calismazsa sayfa yine okunur.
   ============================================================ */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 42%;
    }
  }
  @supports not (animation-timeline: view()) {
    .reveal {
      opacity: 0; transform: translateY(var(--lift));
      transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .reveal.is-in { opacity: 1; transform: none; }
  }
  @keyframes reveal-in {
    from { opacity: 0; transform: translateY(var(--lift)); }
    to   { opacity: 1; transform: none; }
  }
}

/* Kademeli: 90ms. 60ms altinda es zamanli okunur, 150ms ustunde
   dorduncu kart yarim saniye gec gelir ve okuyucu coktan gecmistir. */
.stagger > * { --i: 0; }
.stagger > *:nth-child(1) { --i: 0 } .stagger > *:nth-child(2) { --i: 1 }
.stagger > *:nth-child(3) { --i: 2 } .stagger > *:nth-child(4) { --i: 3 }
.stagger > *:nth-child(5) { --i: 4 } .stagger > *:nth-child(6) { --i: 5 }

@media (prefers-reduced-motion: no-preference) {
  @supports not (animation-timeline: view()) {
    .stagger.is-in > * { transition-delay: calc(var(--i) * 90ms); }
  }
  @supports (animation-timeline: view()) {
    .stagger > * {
      animation: reveal-in linear both;
      animation-timeline: view();
      /* Kaydirma zaman cizgisinde gecikme anlamsizdir — ilerleme zaman
         degil KONUM. Kademelendirme araligi kaydirilarak yapilir. */
      animation-range: entry calc(8% + var(--i) * 5%) entry calc(38% + var(--i) * 5%);
    }
  }
}

@media print { .hdr, .hero-cta, .entry { display: none; } }


/* ============================================================
   KOYU TEMA — altin vurgular ve parildayan zumrut
   ============================================================
   Koyu zeminde altin 13.6:1 okunuyor; orada METIN olabiliyor.
   Acik zeminde 2.3:1 — orada yalnizca dolgu/cizgi.

   Bu yuzden asagidaki kurallarin tamami KOYU tema ve KOYU BOLGE
   icin. Acik temada ayni ogeler zumrut kaliyor.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow,
  :root:not([data-theme="light"]) .step-n { color: var(--gold); }
}
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .step-n,
.dark-zone .eyebrow,
.dark-zone .step-n { color: var(--gold); }

/* Adim numarasi: duz altin yerine metalik gradyan. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  :root[data-theme="dark"] .step-n,
  .dark-zone .step-n {
    background-image: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: .9;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .step-n {
      background-image: var(--gold-grad);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      opacity: .9;
    }
  }
}

/* --- Parildayan zumrut yuzeyler --- */
/* Kartlar duz renk yerine ic gradyan + ince ust isik aliyor: taskin
   yuzeyinde isik kirilmasi gibi. Yalnizca koyu temada; acik temada
   ayni etki kirli gorunuyordu. */
:root[data-theme="dark"] .tcard,
:root[data-theme="dark"] .panel-card,
:root[data-theme="dark"] .cost-item,
:root[data-theme="dark"] .chat-card,
:root[data-theme="dark"] .cta-box {
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(111,201,162,.09) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.028) 0%, transparent 46%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcard,
  :root:not([data-theme="light"]) .panel-card,
  :root:not([data-theme="light"]) .cost-item,
  :root:not([data-theme="light"]) .chat-card,
  :root:not([data-theme="light"]) .cta-box {
    background-image:
      radial-gradient(120% 80% at 12% 0%, rgba(111,201,162,.09) 0%, transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.028) 0%, transparent 46%);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  }
}

/* --- Footer zemin videosu --- */
.ftr-silk {
  position: absolute; inset: 0; height: 100%;
  overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
}
.ftr-silk .silk-v { opacity: .14; filter: grayscale(1) sepia(.5) hue-rotate(112deg) saturate(1.4) brightness(.8); }
/* Footer icerigi videonun USTUNDE kalmali. */
.ftr-in, .ftr-big, .ftr-btm { position: relative; z-index: 1; }
.ftr-by { color: var(--gold); font-weight: 600; letter-spacing: .02em; }

/* ============================================================
   Gizlilik ikonlarinin kutusu — KOYU MODDA ZUMRUT
   ============================================================
   Acik modda --gold-soft sicak bir krem; koyu modda ayni token
   #241F10 idi ve zumrut kartin uzerinde kahverengi bir leke gibi
   duruyordu. Koyu modda kutu zumrut olur, ikon altin kalir:
   kontrast 7.1:1 (#E6C45C uzerine #0E3B2C) — AA'nin uzerinde.
   ============================================================ */
:root[data-theme="dark"] .tmark {
  color: var(--gold);
  background: linear-gradient(158deg, #12513C 0%, #0C3628 62%, #092C20 100%);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tmark {
    color: var(--gold);
    background: linear-gradient(158deg, #12513C 0%, #0C3628 62%, #092C20 100%);
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  }
}
/* Koyu blok (hero, footer, yasa bolumu) tema bagimsizdir — orada da zumrut. */
.dark-zone .tmark {
  color: var(--gold);
  background: linear-gradient(158deg, #12513C 0%, #0C3628 62%, #092C20 100%);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}

/* ============================================================
   Yasal zorunluluk blogu
   ============================================================
   Sayfanin en sert argumani; bu yuzden tema ne olursa olsun koyu
   zumrut (.dark-zone). Koyu zeminde altin METIN olarak
   kullanilabildigi icin alintiyi ve sayilari altin birakiyoruz.
   ============================================================ */
.law {
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 8vw, 104px);
  background:
    radial-gradient(110% 80% at 18% 0%, #14513C 0%, transparent 58%),
    linear-gradient(168deg, #0D3F2F 0%, #082A20 62%, #061F17 100%);
}
.law-tag { color: var(--gold); }
.law h2 { max-width: 22ch; }
.law-quote {
  margin: 34px 0 0; padding: 0 0 0 clamp(18px, 2.4vw, 30px);
  border-left: 2px solid var(--gold);
  max-width: 62ch;
}
.law-quote p {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.55vw, 1.36rem); line-height: 1.55;
  color: #EAF3EE;
}
.law-quote cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: .82rem; letter-spacing: .04em; color: var(--gold);
}
.law-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px; margin-top: clamp(38px, 4.5vw, 58px);
}
.law-item {
  padding: 24px 22px; border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(158deg, rgba(20,81,60,.55) 0%, rgba(8,42,32,.5) 100%);
  transition: border-color 300ms var(--ease-soft), transform 400ms var(--ease-soft);
}
.law-item:hover { border-color: color-mix(in srgb, var(--gold) 42%, transparent); transform: translateY(-3px); }
.law-item b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.72rem; line-height: 1; letter-spacing: -.02em; margin-bottom: 12px;
}
.law-item h3 { margin: 0 0 8px; font-size: 1.04rem; color: #EAF3EE; }
.law-item p { margin: 0; font-size: .93rem; line-height: 1.62; color: #A9C2B6; }
.law-note {
  margin: clamp(30px, 3.6vw, 44px) 0 0; max-width: 58ch;
  font-size: 1rem; line-height: 1.7; color: #C3D7CC;
}
.law-note b { color: var(--gold); font-weight: 620; }

/* ============================================================
   Ana sayfa basligi — HER IKI TEMADA DA KOYU
   ============================================================
   Baslik .dark-zone; ama .hdr zemini var(--bg) uzerinden %82
   saydamdi ve acik temada arkadaki acik govde saydamlıktan
   sizarak basligi soluk gosteriyordu. Zemin artik tokendan
   degil, dogrudan zumrut degerinden geliyor — tema ne olursa
   olsun ayni.
   ============================================================ */
.hdr {
  background: linear-gradient(180deg, rgba(9,44,33,.90) 0%, rgba(7,36,27,.86) 100%);
}
.hdr.is-stuck {
  border-bottom-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
/* backdrop-filter desteklenmeyen tarayicida saydamlik hic olmasin. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { background: linear-gradient(180deg, #092C21 0%, #07241B 100%); }
}

/* ============================================================
   Hero sohbet karti — SAYFA TEMASINI izler
   ============================================================
   Kart .hero.dark-zone icinde duruyor, yani token'lari koyu
   geliyordu ve acik temada da koyu kaliyordu. Burada token'lar
   sayfanin temasina geri cevriliyor: acik temada BEYAZ kart,
   koyu temada koyu kart.

   Neden .dark-zone'u kaldirmak yerine token geri cevriliyor:
   hero'nun geri kalani (baslik, lede, butonlar) HER ZAMAN koyu
   kalmali — kullanicinin kendi karari. Yalnizca bu kart ayrisiyor.
   ============================================================ */
.chat-card {
  --surface:     #FFFFFF;
  /* Zumrut dolgunun UZERINDEKI renk. Yazilmayi atlayinca .dark-zone
     degeri (#06231A) miras aliniyor ve gonder oku koyu zeminde koyu
     kaliyordu — ayni hata calisanin balonunda da olmustu. */
  --accent-ink:  #FFFFFF;
  --surface-2:   #F2EFE6;
  --ink:         #08271D;
  --ink-2:       #46615A;
  --ink-3:       #5C716A;
  --line:        #E3DED4;
  --accent:      #0D3F2F;
  --gold:        #D4A82C;
  color: var(--ink);
  /* Acik kart koyu zeminin uzerinde duruyor: govde golgesi degil,
     yukseklik golgesi gerekiyor. */
  box-shadow: 0 2px 4px rgba(0,0,0,.28), 0 30px 70px rgba(0,0,0,.42);
}
:root[data-theme="dark"] .chat-card {
  --surface:     #0C221B;
  --surface-2:   #132E25;
  --ink:         #E8EFEA;
  --ink-2:       #A3B5AC;
  --ink-3:       #7A8F86;
  --line:        #1E362C;
  --accent:      #6FC9A2;
  --gold:        #E6C45C;
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.05);
}
.chat-card b, .chat-card .msg { color: var(--ink); }
.chat-card .chat-state { color: var(--ink-3); }

/* --- OwO ikonu: metin blogu ile AYNI yukseklik --- */
/* Ilk deneme "align-self: stretch" idi ve patladi: ikon esnek
   genislikte oldugu icin satiri buyuttu, satir da ikonu — 30px
   yerine 128px cikti. Yukseklik artik OLCULMUYOR, TURETILIYOR:
   iki metin satirinin satir yuksekligi burada sabitleniyor ve
   ikon tam ikisinin toplami kadar. Font degisirse tek yerden
   (--owo-l1 / --owo-l2) ayarlanir. */
.chat-head {
  --owo-l1: 1.36rem;   /* "OwO" satiri     — .94rem x 1.45 */
  --owo-l2: 1.12rem;   /* alt aciklama satiri — .78rem x 1.44 */
  align-items: center;
}
.chat-head > div { display: flex; flex-direction: column; justify-content: center; }
.chat-head b    { line-height: var(--owo-l1); }
.chat-head span { line-height: var(--owo-l2); }
.chat-head img {
  width:  calc(var(--owo-l1) + var(--owo-l2));
  height: calc(var(--owo-l1) + var(--owo-l2));
  flex: none;
  border-radius: 10px;
  object-fit: contain;
}

/* ============================================================
   Koyu zeminde birincil dugme — DUZ ZUMRUT
   ============================================================
   Onceki hali kosede parlak bir radial leke tasiyordu; kucuk bir
   dugmede bu gradyan degil, LEKE gibi okunuyordu. Simdi tek yonlu,
   dar araligli bir zumrut govde (#17553F -> #0E3A2C) — bant
   olusturmayacak kadar yakin iki ton — ve ustte tek bir isik cizgisi.
   Parlaklik gradyanla degil, kenardaki altin hatla veriliyor.
   ============================================================ */
:root[data-theme="dark"] .hbtn--primary,
.dark-zone .hbtn--primary {
  background: linear-gradient(180deg, #17553F 0%, #0E3A2C 100%);
  border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  color: #EAF7F0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 22px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .hbtn--primary:hover,
.dark-zone .hbtn--primary:hover {
  background: linear-gradient(180deg, #1C6349 0%, #114634 100%);
  border-color: color-mix(in srgb, var(--gold) 58%, transparent);
}
:root[data-theme="dark"] .hbtn--primary .arrow,
.dark-zone .hbtn--primary .arrow { color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hbtn--primary {
    background: linear-gradient(180deg, #17553F 0%, #0E3A2C 100%);
    border-color: color-mix(in srgb, var(--gold) 38%, transparent);
    color: #EAF7F0;
  }
  :root:not([data-theme="light"]) .hbtn--primary .arrow { color: var(--gold); }
}

/* ============================================================
   Footer dev kelime markasi — koyu temada KOYU metin
   ============================================================
   Acik temada footer zemini #0D3F2F; yazi acik bir golge olarak
   uzerinde duruyor ve dogru gorunuyor — orasi degismiyor.

   Koyu temada zemin #0A2C21 -> #05130D'ye kadar iniyor ve ayni
   acik yazi zeminden kopup one firliyordu. Burada yazi zeminden
   KOYU olur: kabartma degil, oyma. Gecen isik da ayni mantikla
   sonuk altina duser — koyu bir yuzeyde parlak altin bir sey
   sizdiginda ucuz gorunur.
   ============================================================ */
:root[data-theme="dark"] .ftr-big span {
  background-image: linear-gradient(
    100deg,
    rgba(0,0,0,.34) 0%, rgba(0,0,0,.34) 33%,
    #6E5205 44%, #A8811A 50%, #6E5205 56%,
    rgba(0,0,0,.34) 67%, rgba(0,0,0,.34) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ftr-big span {
    background-image: linear-gradient(
      100deg,
      rgba(0,0,0,.34) 0%, rgba(0,0,0,.34) 33%,
      #6E5205 44%, #A8811A 50%, #6E5205 56%,
      rgba(0,0,0,.34) 67%, rgba(0,0,0,.34) 100%);
  }
}

/* ============================================================
   Hero kartinda yazma alani — GERCEK EKRANIN AYNISI
   ============================================================
   Duzen sohbet.html'deki .caw-compose ile birebir: solda mikrofon,
   ortada alan, sagda gonder. Ziyaretci burada gordugu seyi birebir
   o ekranda bulmali; farkli gostermek reklam olurdu.

   ETKILESIMLI DEGIL: bunlar <button> degil <span>. Tiklanabilir
   gorunup hicbir sey yapmayan bir dugme, kartin anlattigi guveni
   ilk saniyede bozardi.
   ============================================================ */
.chat-compose {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cc-btn {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-3);
  transition: background 220ms var(--ease-soft), color 220ms,
              border-color 220ms, transform 160ms var(--ease-soft);
}
.cc-send { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
/* Gonderim ani: dugme bir an icine cokup geri geliyor. */
.cc-btn.is-press { transform: scale(.88); }
/* Mikrofon aciksa zumrut yanar ve nabiz gibi atar. */
.cc-mic.is-on {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .cc-mic.is-on { animation: cc-pulse 1.5s ease-in-out infinite; }
  @keyframes cc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
    55%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
}

.cc-field {
  flex: 1; min-width: 0; min-height: 34px;
  display: flex; align-items: center;
  padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: .89rem; color: var(--ink-2);
  overflow: hidden; white-space: nowrap;
}
.cc-ph { color: var(--ink-3); opacity: .85; }
.cc-ph[hidden] { display: none; }
/* Imlec: yaziyorken yanip soner, bosken de durur — gercek bir alan gibi. */
.cc-caret {
  display: inline-block; width: 1.5px; height: 1.02em;
  margin-left: 1px; background: var(--accent); vertical-align: -.16em;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-caret { animation: cc-blink 1.1s steps(1) infinite; }
  @keyframes cc-blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }
}

/* --- Ses frekansi --- */
/* Alanin YERINE geciyor, yanina degil: konusurken yazi alani yok.
   Cubuklarin yuksekligi ve gecikmesi elle dagitildi — esit araliklar
   metronom gibi duruyordu, gercek ses oyle gorunmuyor. */
.cc-wave {
  flex: 1; min-width: 0; height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--surface-2);
}
.cc-wave[hidden] { display: none; }
.cc-wave i {
  width: 3px; border-radius: 2px; background: var(--accent);
  height: 22%; opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-wave i { animation: cc-bar 900ms ease-in-out infinite; }
  @keyframes cc-bar {
    0%, 100% { height: 18%; opacity: .45 }
    50%      { height: 78%; opacity: 1 }
  }
  .cc-wave i:nth-child(1) { animation-delay: -.72s; animation-duration: 820ms }
  .cc-wave i:nth-child(2) { animation-delay: -.31s; animation-duration: 1040ms }
  .cc-wave i:nth-child(3) { animation-delay: -.55s; animation-duration: 760ms }
  .cc-wave i:nth-child(4) { animation-delay: -.08s; animation-duration: 980ms }
  .cc-wave i:nth-child(5) { animation-delay: -.44s; animation-duration: 700ms }
  .cc-wave i:nth-child(6) { animation-delay: -.19s; animation-duration: 1120ms }
  .cc-wave i:nth-child(7) { animation-delay: -.63s; animation-duration: 860ms }
  .cc-wave i:nth-child(8) { animation-delay: -.27s; animation-duration: 940ms }
  .cc-wave i:nth-child(9) { animation-delay: -.50s; animation-duration: 790ms }
}

.chat-note {
  margin: 10px 0 0; font-size: .72rem; line-height: 1.5;
  color: var(--ink-3);
}

/* Mesaj akisi sabit yukseklikte kalsin: yeni mesaj geldikce kart
   buyuyup sayfayi ziplatmasin. Tasan eski mesajlar yukaridan cikar. */
/* justify-content: flex-end KULLANILMIYOR. Kaydirilabilir bir flex
   sutununda bu, tasan icerigin USTUNU erisilemez kiliyor (Chrome).
   Ayni isi .msgs::before uzerindeki margin-top:auto guvenle yapiyor. */
.msg--out { animation: cc-out 420ms var(--ease-soft) forwards; }
@keyframes cc-out { to { opacity: 0; transform: translateY(-10px); } }
/* .cc-field flex; [hidden] tek basina display:flex'i yenemez. */
.cc-field[hidden] { display: none; }
/* "Powered by OwO AI": OwO adi altin, geri kalani soluk — imza satiri
   marka gibi degil, dipnot gibi okunmali. */
.ftr-by { color: var(--f-ink-3); font-weight: 500; letter-spacing: .02em; }
.ftr-by b { color: var(--gold); font-weight: 650; }

/* --- Calisanin balonu: HER IKI TEMADA da beyaz metin --- */
/* Kartin token'lari sayfa temasina cevrildiginde --accent-ink
   yazilmayi atlamisti; koyu zumrut balonun uzerinde koyu metin
   kaliyordu. Balon artik temadan bagimsiz: derin zumrut govde,
   beyaz metin. Kontrast 12.5:1 (acik) / 9.8:1 (koyu) — ikisi de
   AAA. Calisanin kendi sozu kartin en okunakli yeri olmali. */
.chat-card .msg--me {
  background: linear-gradient(180deg, #17654B 0%, #0F4735 62%, #0A3125 100%);
  color: #FFFFFF;
}
:root[data-theme="dark"] .chat-card .msg--me {
  background: linear-gradient(180deg, #1B6E52 0%, #124F3C 62%, #0C382A 100%);
  color: #FFFFFF;
}

/* --- Gonder oku: acik temada ALTIN --- */
/* Zumrut govde uzerinde altin ok. Ok bir CIZIM, metin degil; bu yuzden
   parlak altin burada kullanilabilir (metin esigi 4.5:1, grafik esigi
   3:1). #D4A82C / #0D3F2F = 4.9:1 — ikisini de geciyor. */
.chat-card .cc-send { color: var(--gold); }
:root[data-theme="dark"] .chat-card .cc-send { color: var(--accent-ink); }

/* ============================================================
   Hero basligi — daha sik satir araligi
   ============================================================
   1.06'dan 0.98'e indi. Daha asagi INILMEDI ve inilmemeli: Fraunces'in
   inis kuyrugu (~.26em) ile Turkce ust isaretleri (ü, ö, ğ) ust uste
   gelmeye burada basliyor. "korkuyorum" satirindaki y kuyrugu ile bir
   sonraki satirin d/i harfleri arasindaki bosluk olculdu — 0.98'de
   temiz, 0.94'te degiyor.
   ============================================================ */
.hero h1 { line-height: .98; }

/* ============================================================
   Kart yuksekligi ve cihaz seridi
   ============================================================ */
/* Mesaj alani buyudu: ust mesajin silinme efekti kalsin diye AKIS
   korunuyor, ama uc mesaj artik rahat siginiyor ve kesilme daha az
   sik goruluyor. */
.msgs { height: 262px; }

/* --- Her cihazda calisir seridi --- */
/* Kartin altinda, sohbet ekraninin telefonda da tablette de masaustunde
   de ayni sekilde calistigini tek bakista soyluyor. Ikonlar CIZIM
   oldugu icin altin burada serbest (grafik esigi 3:1). */
.chat-devices {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 16px;
}
.chat-devices svg { display: block; }
.cd-item {
  display: grid; place-items: center;
  color: var(--gold);
  opacity: .78;
  transition: opacity 320ms var(--ease-soft), transform 320ms var(--ease-soft);
}
.chat-devices:hover .cd-item { opacity: .5; }
.chat-devices .cd-item:hover { opacity: 1; transform: translateY(-2px); }
/* Ince altin ayirici — ikonlar arasinda nefes, cizgi degil nokta. */
.cd-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: .38;
}
.chat-devices-note {
  margin: 8px 0 0; text-align: center;
  font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-3);
}
/* Koyu zemin uzerinde duruyor: hero .dark-zone, kart degil. Bu serit
   KARTIN DISINDA oldugu icin hero'nun koyu token'larini kullanir. */

/* ============================================================
   Sohbet karti -> Sonuc karti gecisi
   ============================================================
   Iki kart AYNI grid hucresini paylasiyor. Ust uste durduklari icin
   biri cikip digeri girerken sayfa ziplamiyor; yukseklik degisimi
   kapsayicida yumusatiliyor.

   Gecis "kaybol/belir" degil: sohbet karti hafifce kucululup
   yukari suzuluyor, sonuc karti asagidan olceklenerek geliyor.
   Anlatilan sey bu: soylenen sey bir seye DONUSUYOR.
   ============================================================ */
.card-stage {
  display: grid;
  transition: min-height 620ms var(--ease-soft);
}
.card-stage > .chat-card,
.card-stage > .result-card {
  grid-area: 1 / 1;
  transition: opacity 520ms var(--ease-soft), transform 620ms var(--ease-soft);
}
/* [hidden] tek basina grid yerlesimini yenemez. */
.card-stage > [hidden] { display: none; }

.chat-card.is-out {
  opacity: 0;
  transform: translateY(-16px) scale(.965);
  pointer-events: none;
}
.result-card {
  opacity: 0;
  transform: translateY(22px) scale(.97);
}
.result-card.is-in { opacity: 1; transform: none; }

/* ============================================================
   Sonuc karti
   ============================================================
   Kart sohbet kartiyla AYNI kabugu kullanir (zemin, kenar, ust
   altin hat) — ayni ekranin ikinci hali oldugu anlasilsin diye.
   Renkler yine sayfa temasini izler.
   ============================================================ */
.result-card {
  --surface:     #FFFFFF;
  --surface-2:   #F2EFE6;
  --ink:         #08271D;
  --ink-2:       #46615A;
  --ink-3:       #5C716A;
  --line:        #E3DED4;
  --accent:      #0D3F2F;
  --accent-ink:  #FFFFFF;
  --gold:        #D4A82C;

  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 2px solid transparent;
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    linear-gradient(90deg, transparent, var(--gold), transparent);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 4px rgba(0,0,0,.28), 0 30px 70px rgba(0,0,0,.42);
  padding: 22px 20px 20px;
  max-width: 420px; margin-left: auto;
}
:root[data-theme="dark"] .result-card {
  --surface:     #0C221B;
  --surface-2:   #132E25;
  --ink:         #E8EFEA;
  --ink-2:       #A3B5AC;
  --ink-3:       #7A8F86;
  --line:        #1E362C;
  --accent:      #6FC9A2;
  --accent-ink:  #06231A;
  --gold:        #E6C45C;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (max-width: 940px) { .result-card { margin-inline: 0; max-width: 100%; } }

.rc-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rc-eyebrow {
  display: block; font-size: .68rem; font-weight: 620;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px;
}
.rc-title {
  margin: 0; font-family: var(--font-display);
  font-size: 1.24rem; line-height: 1.2; color: var(--ink);
}

/* Kurumsal iddia satiri: duygusal kanca (h1) ile lede arasinda degil,
   lede'den SONRA. Once problem anlatiliyor, sonra satin alinan seyin
   tek cumlelik karsiligi geliyor. h2 boyutunda degil — h1 ile
   yarismamali, onu tamamlamali. */
.hero-claim {
  margin: 4px 0 30px;
  font-family: var(--font-display);
  font-size: clamp(1.24rem, 1.9vw, 1.62rem);
  line-height: 1.25; font-weight: 600;
  color: var(--ink);
  max-width: 22ch;
}
.hero .lede { margin-bottom: 20px; }

/* ============================================================
   Altin metnin inis kuyruklari (y, g, ş, ç)
   ============================================================
   "korkuyorum" kelimesindeki y GORUNMUYORDU. Sebep satir araligi
   degil, BOYAMA KUTUSU:

   .metal-gold `background-clip: text` + `color: transparent` ile
   calisiyor. Yani harfler kendi rengiyle degil, ARKADAKI gradyanla
   goruluyor. Gradyanin boyandigi alan ise elemanin icerik kutusu.
   line-height .98 olunca icerik kutusu .98em; y'nin kuyrugu bu
   kutunun ALTINDA kaliyor, orada gradyan yok, dolayisiyla harfin
   o parcasi seffaf kaliyor — kirpilmis gibi gorunuyor.

   Cozum satir arasini acmak DEGIL: alt dolgu ile boyama kutusunu
   asagi uzatiyoruz, ayni miktarda negatif margin ile de yerlesimi
   oldugu yerde birakiyoruz. Satir araligi aynen korunuyor.
   .18em: Fraunces'in inis kuyrugu ~.26em; .18em kuyrugun gorunen
   kismini kapsiyor ve satirlar birbirine degmiyor.
   ============================================================ */
.lines .metal-gold,
.hero-claim .metal-gold {
  padding-bottom: .18em;
  margin-bottom: -.18em;
}

/* Hero acikklama metni 2 punto kucuk: baslikla arasindaki
   hiyerarsi netlessin, iddia satiri (.hero-claim) one ciksin. */
/* Taban .lede 1.4rem (22.4px). Iki punto ~2.7px; hero 1.23rem (19.7px). */
.hero .lede { font-size: clamp(1.02rem, .95vw + .78rem, 1.23rem); }

/* ============================================================
   Sonuc karti govdesi
   ============================================================
   Onceki hali yalnizca yuzde cubuklariydi ve hicbir sey anlatmiyordu:
   "%82" tek basina iyi mi kotu mu belli degil. Simdi her satir
   KENDINI ACIKLIYOR:

     [YUKSEK]  Yonetici iletisimi  ▓▓▓▓▓▓▓░░  34/47

   Duzey sozle yaziliyor (renk tek ayirt edici degil — renk korlugu),
   sayi ham KISI SAYISI, payda toplam katilimci. Okuyan kisi ne
   olduguna kendi karar verebiliyor.
   ============================================================ */
.rc-lede {
  margin: 13px 0 15px; font-size: .84rem; line-height: 1.55;
  color: var(--ink-2);
}
.rc-lede b { color: var(--ink); font-weight: 620; }

.rc-rows { display: grid; gap: 9px; }
.rc-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  grid-template-areas:
    "tag  name name"
    "tag  bar  cnt";
  align-items: center;
  column-gap: 10px; row-gap: 4px;
}
.rc-tag {
  grid-area: tag;
  font-size: .6rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; text-align: center;
  padding: 4px 0; border-radius: 6px;
  border: 1px solid transparent;
}
.rc-name { grid-area: name; font-size: .82rem; color: var(--ink); }
.rc-track {
  grid-area: bar; display: block;
  height: 6px; border-radius: 99px;
  background: var(--surface-2); overflow: hidden;
}
.rc-track > i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  transition: width 820ms var(--ease-soft);
}
.rc-cnt {
  grid-area: cnt; font-size: .74rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rc-cnt b { color: var(--ink); font-weight: 650; font-size: .86rem; }
@media (prefers-reduced-motion: reduce) { .rc-track > i { transition: none; } }


/* --- Kurumun goremedigi --- */
/* "0 kisi tanimlanabilir" yaziyordu; bir sayinin sifir olmasi
   supheyle okunuyordu ("neye gore sifir?"). Yerine ne GORULMEDIGI
   dogrudan sayiliyor — iddia degil, liste. */
.rc-not {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line);
  display: grid; gap: 7px;
}
.rc-not-t {
  font-size: .62rem; font-weight: 640; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.rc-not-l { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-not-l em {
  font-style: normal; font-size: .73rem;
  padding: 4px 9px; border-radius: 99px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  /* Ustu cizili: gorulmeyen sey oldugu bir bakista anlasilsin. */
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent);
  text-decoration-thickness: 1px;
}

.rc-foot {
  margin: 12px 0 0;
  font-size: .68rem; line-height: 1.45; color: var(--ink-3);
}

/* ============================================================
   Kart boyutu SABIT — gecerken hicbir sey oynamaz
   ============================================================
   Onceki cozum gizlenen karti display:none yapiyor ve yuksekligi
   JS ile olcup kilitliyordu; olcum bir kare gec kaldiginda kart
   zipliyordu.

   Simdi iki kart da DOM'da ve AYNI grid hucresinde duruyor.
   Gizlenen kart display:none DEGIL, gorunmez: hucre her zaman
   ikisinin BUYUGU kadar yer kapliyor. Genislik zaten ortak
   (max-width 420px, ayni hucre). Sonuc: gecis sirasinda ne
   yukseklik ne genislik degisiyor — JS'in olcmesine de gerek yok.
   ============================================================ */
.card-stage { display: grid; }
.card-stage > .chat-card,
.card-stage > .result-card {
  grid-area: 1 / 1;
  width: 100%;
  transition: opacity 460ms var(--ease-soft),
              transform 620ms var(--ease-soft),
              filter 460ms var(--ease-soft);
}
/* Gorunmez kart: yer kaplar ama tiklanmaz, okunmaz, sekmelenmez. */
.card-stage > .is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Cikan kart: hafifce kucululup yukari suzuluyor ve odagi kaybediyor. */
.chat-card.is-out {
  transform: translateY(-14px) scale(.97);
  filter: blur(3px);
}
/* Giren kart: asagidan, netleserek. */
.result-card { transform: translateY(20px) scale(.975); filter: blur(3px); }
.result-card.is-in { transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .card-stage > .chat-card,
  .card-stage > .result-card { transition: opacity 200ms linear; }
  .chat-card.is-out, .result-card { transform: none; filter: none; }
}

/* ============================================================
   Mesaj akisi — GERCEK sohbet gibi
   ============================================================
   Eski hali: ucuncu mesajdan sonra en eski mesaj DOM'dan siliniyordu
   ve bir anda yok oluyordu. Gercek bir sohbette mesaj silinmez,
   yukari kayar ve ekranin ustunde kaybolur.

   Simdi hicbir mesaj silinmiyor. Alan gercekten kayiyor ve ust
   kenarda bir maske var: mesajlar yukari cikarken solarak
   kayboluyor. Kaydirma cubugu gizli — bu bir gosterim, kullanici
   elle kaydirmiyor.
   ============================================================ */
.msgs {
  height: 262px; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Ust kenarda 40px'lik yumusak kayboluş. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 100%);
  overscroll-behavior: contain;
}
.msgs::-webkit-scrollbar { display: none; }
/* Az mesaj varken hepsi ALTTA toplansin — bos alan ustte kalsin.
   `justify-content: flex-end` kaydirmayi bozdugu icin bosluk
   bir sahte oge ile aliniyor. */
.msgs::before { content: ''; margin-top: auto; }
/* Yeni mesaj asagidan yumusakca belirir. */
.msg { animation: msg-in 380ms var(--ease-soft) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .msgs { scroll-behavior: auto; }
}

/* ============================================================
   Risk duzeyi renkleri — iyi/kotu ILK BAKISTA
   ============================================================
   Onceki hali "Yuksek/Dusuk" diyordu ve hangisinin iyi hangisinin
   kotu oldugu anlasilmiyordu: "Sosyal destek — DUSUK" cumlesi
   "sosyal destek az" diye de okunabiliyordu.

   Iki degisiklik:
   1. Olcek acikca RISK: yuksek risk kotu, dusuk risk iyi.
   2. Renk bunu izliyor. Rozet DOLGU — cerceve degil; dolgu bir
      bakista okunuyor, ince cerceve okunmuyordu.

   Kiremit (--danger #9C3A22) bilincli: alev kirmizisi degil.
   Zumrut/altin paletinin yaninda duran, sicak ve agir bir ton.
   Kontrast: #FFF uzerine #9C3A22 = 7.4:1 (AAA).
   ============================================================ */
.rc-row[data-lvl="high"] .rc-tag {
  color: #FFFFFF;
  background: linear-gradient(160deg, #B04429 0%, #9C3A22 60%, #83301C 100%);
  border-color: transparent;
}
.rc-row[data-lvl="high"] .rc-track > i {
  background: linear-gradient(90deg, #83301C, #B04429);
}
.rc-row[data-lvl="mid"] .rc-tag {
  color: #2E2405;
  background: linear-gradient(160deg, #E0B944 0%, #C9A227 60%, #AC8618 100%);
  border-color: transparent;
}
.rc-row[data-lvl="mid"] .rc-track > i {
  background: linear-gradient(90deg, #AC8618, #D4A82C);
}
.rc-row[data-lvl="low"] .rc-tag {
  color: #FFFFFF;
  background: linear-gradient(160deg, #17654B 0%, #0F4735 60%, #0A3527 100%);
  border-color: transparent;
}
.rc-row[data-lvl="low"] .rc-track > i {
  background: linear-gradient(90deg, #0F4735, #2C8F6C);
}
/* Koyu temada ayni siralama, zeminden ayrisacak parlaklikta. */
:root[data-theme="dark"] .rc-row[data-lvl="high"] .rc-tag {
  color: #2A1009;
  background: linear-gradient(160deg, #EDA187 0%, #E08D72 60%, #C9765B 100%);
}
:root[data-theme="dark"] .rc-row[data-lvl="high"] .rc-track > i {
  background: linear-gradient(90deg, #C9765B, #E08D72);
}
:root[data-theme="dark"] .rc-row[data-lvl="mid"] .rc-tag {
  color: #2E2405;
  background: linear-gradient(160deg, #F0D588 0%, #E6C45C 60%, #C9A643 100%);
}
:root[data-theme="dark"] .rc-row[data-lvl="mid"] .rc-track > i {
  background: linear-gradient(90deg, #C9A643, #F0D588);
}
:root[data-theme="dark"] .rc-row[data-lvl="low"] .rc-tag {
  color: #06231A;
  background: linear-gradient(160deg, #8FD9B6 0%, #6FC9A2 60%, #4FA684 100%);
}
:root[data-theme="dark"] .rc-row[data-lvl="low"] .rc-track > i {
  background: linear-gradient(90deg, #4FA684, #8FD9B6);
}
/* Rozet artik dolgu oldugu icin biraz daha genis ve nefesli. */
.rc-tag { padding: 4px 2px; letter-spacing: .05em; }
.rc-row { grid-template-columns: 74px 1fr auto; }

/* ============================================================
   Kart ust kenarindaki altin hat — kose duzeltmesi
   ============================================================
   Onceki yontem: `border-top: 2px solid transparent` + iki katmanli
   background + `background-clip: padding-box, border-box`.
   Yuvarlatilmis kosede bu yontem bozuluyordu: kenarlik saydam
   oldugu icin kosede zeminin rengi disari tasiyor ve kartin sol
   ust kosesinde bir centik/leke goruluyordu.

   Yeni yontem: kenarlik normal, altin hat bir ust katman
   (::before) olarak duruyor ve kartin kendi border-radius'unu
   miras aliyor. Kosede tasma imkani yok.
   ============================================================ */
.chat-card, .result-card {
  position: relative;
  border: 1px solid var(--line);
  background-image: none;
  background: var(--surface);
}
.chat-card::before, .result-card::before {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: -1px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  pointer-events: none;
}
:root[data-theme="dark"] .chat-card,
:root[data-theme="dark"] .result-card { background: var(--surface); }

/* ============================================================
   Sohbet kutusunda bosluk
   ============================================================
   Mesaj alani sabit yukseklikte (kart boyu degismesin diye) ama
   az mesaj varken altta bir bosluk kaliyordu: mesajlar ortada
   asili duruyordu. Artik gercekten en alta yasliyorlar; ustteki
   bosluk maskeyle zaten yumusuyor.

   Yazma alaninin ust bosluklari da kisaldi — kutuda gereksiz
   bosluk kalmayacak.
   ============================================================ */
.msgs { padding-bottom: 2px; }
.chat-compose { margin-top: 10px; padding-top: 11px; }
.chat-note { margin-top: 8px; }
.chat-head { padding-bottom: 12px; margin-bottom: 12px; }

/* ============================================================
   "Calisani degil, calisma ortamini olcun." — masaustunde TEK SATIR
   ============================================================
   max-width: 22ch idi ve iki satira kiriliyordu. Bir iddia cumlesi
   tek satirda daha sert vuruyor. Dar ekranda kirilmasi serbest;
   orada zorlamak tasma yaratirdi.
   ============================================================ */
.hero-claim { max-width: none; }
@media (min-width: 1024px) {
  .hero-claim { white-space: nowrap; }
}

/* ============================================================
   KART YUKSEKLIGI — tek bir sayi, iki kart, ekrana sigan
   ============================================================
   Onceki cozum "hucre iki kartin buyugu kadar olsun" diyordu.
   Sonucu: sonuc karti uzun oldugu icin SOHBET karti da o boya
   geriliyordu; mesaj alaniyla yazma alani arasinda dev bir bosluk
   kaliyor ve kart ekrana sigmiyordu.

   Simdi yukseklik ONCEDEN belirleniyor ve iki kart da tam o kadar:
     clamp(regular 430px, 54vh, 540px)
   54vh: 950px'lik bir ekranda ~510px. Basligin (70px) ve kart
   altindaki cihaz seridinin (~60px) altinda kalan alana sigiyor.
   Alt sinir 430px: dort satirlik sonuc karti bunun altina sigmiyor.

   Kartlar artik dikey flex: mesaj alani ARTAN yeri kapiyor,
   dolayisiyla bosluk mesajlarin altinda degil, mesaj alaninin
   kendisinde — yani yok.
   ============================================================ */
.card-stage { height: var(--card-h); }

.chat-card, .result-card {
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 18px 20px 16px;
}
/* Mesaj alani artan yeri alir; sabit yukseklik yok. */
.msgs { flex: 1 1 auto; height: auto; min-height: 0; }
/* Baslik ve yazma alani sabit; ortadaki alan esner. */
.chat-head, .chat-compose, .chat-note { flex: none; }
.result-card > * { flex: none; }
/* Satirlar artan yeri paylasir, aralari acilir — sikismis durmaz. */
.rc-rows { flex: 1 1 auto; align-content: space-evenly; min-height: 0; }

/* Dar ekranda sabit yukseklik dogru degil: metin daha cok satira
   kiriliyor ve icerik tasardi. Orada kart kendi boyunda. */
@media (max-width: 940px) {
  .card-stage { height: auto; }
  .chat-card, .result-card { height: auto; }
  .msgs { height: 300px; flex: none; }
  .rc-rows { flex: none; align-content: start; }
}

/* ============================================================
   Sonuc karti — tasma duzeltmesi
   ============================================================
   `.rc-rows` hem `flex: 1 1 auto` hem `min-height: 0` idi. Flexbox
   bu ikisiyle kutuyu ICERIGINDEN kucuk yapabiliyor; satirlar disari
   tasip alttaki aciklama metninin uzerine biniyordu.

   Artik satir kutusu KUCULMUYOR (flex: 0 0 auto). Kartin sabit
   yuksekliginden artan yer, bolumler arasina `space-between` ile
   dagitiliyor — hicbir sey ust uste binemez.
   ============================================================ */
.result-card { justify-content: space-between; }
.rc-rows { flex: 0 0 auto; align-content: start; }

/* Rozet tek satir: "YÜKSEK RİSK" iki satira kiriliyordu. */
.rc-row { grid-template-columns: 90px 1fr auto; }
.rc-tag {
  white-space: nowrap;
  font-size: .565rem; letter-spacing: .04em;
  padding: 5px 4px;
}

/* Metinler kisaldi: kart sabit yukseklikte ve her satir yer tutuyor. */
.rc-lede { margin: 11px 0 13px; font-size: .8rem; }
.rc-title { font-size: 1.16rem; }
.rc-not { margin-top: 11px; padding-top: 11px; }
.rc-foot { margin-top: 10px; }

@media (max-width: 420px) {
  .rc-row { grid-template-columns: 78px 1fr auto; }
  .rc-tag { font-size: .52rem; }
}

/* ============================================================
   KART YUKSEKLIGI — SABIT, tek sayi
   ============================================================
   vh'ye bagli degil. Onceki hali clamp(430px, 54vh, 540px) idi ve
   ekran kisaldikca kart da kisaliyor, sonuc kartinin icerigi
   tasiyordu. Yukseklik artik ekrana degil ICERIGE gore belirlendi:
   iki dilden UZUN olani (Ingilizce sonuc karti) olculdu ve
   uzerine pay birakildi.

   Bu sayi degistirilecekse once iki dilde de olculur.
   ============================================================ */
:root { --card-h: 552px; }
@media (max-width: 1180px) { :root { --card-h: 568px; } }

/* ============================================================
   Risk satiri — rozetle SIMETRIK
   ============================================================
   Onceki duzende konu adi ustte, cubuk altta, rozet ikisinin
   ortasindaydi; rozet hicbir seyle hizalanmiyordu. Simdi rozet ve
   konu adi AYNI SATIRDA, sayi da onlarla ayni hizada; cubuk
   altlarinda tam genislikte uzaniyor.
   ============================================================ */
.rc-row {
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "tag name cnt"
    "bar bar  bar";
  align-items: center;
  column-gap: 11px; row-gap: 7px;
}
.rc-tag {
  grid-area: tag;
  min-width: 92px;
  white-space: nowrap;
  padding: 5px 8px;
}
.rc-name { grid-area: name; line-height: 1.2; }
.rc-cnt  { grid-area: cnt; }
.rc-track { grid-area: bar; }

/* ============================================================
   Hero izgarasi — sol sutun sag sutunu EZMESIN
   ============================================================
   `1fr` aslinda `minmax(auto, 1fr)` demek; yani sutun kendi
   min-content genisliginden dar olamiyor. Iddia satirina
   `white-space: nowrap` verilince sol sutunun min-content'i o
   satir kadar oldu ve sag sutunu (karti) 445px'ten 326px'e
   dusurdu — Ingilizce'de cumle uzun oldugu icin orada daha da
   kotuydu.

   `minmax(0, ...)` bu bagi kesiyor: sutunlar oranlarina sadik
   kaliyor, kart her dilde ayni genislikte.
   ============================================================ */
@media (min-width: 941px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
}
/* DIKKAT: bu kural MEDIA QUERY ICINDE olmak zorunda.
   Sarmalayicisiz yazildiginda, dosyanin basindaki tek-sutun
   kuralindan (max-width 940px) SONRA geldigi icin onu eziyordu:
   mobilde hero iki sutun kaliyor, kart telefonda metnin yaninda
   sikisiyordu. Ayni ozgullukte iki kuralda SONRAKI kazanir. */

/* Tek satir yalnizca sol sutunun gercekten yettigi genislikte.
   1200px alti: iki satira kirilmasi serbest — zorlamak tasma
   yaratirdi. */
.hero-claim { white-space: normal; }
@media (min-width: 1200px) { .hero-claim { white-space: nowrap; } }

/* Hero icerigi 20px yukari. */
.hero { padding-top: clamp(36px, 9vw - 20px, 84px); }

/* ============================================================
   MOBIL duzeltmeleri
   ============================================================ */

/* 1. Yazma alanindaki metin tasiyordu.
   .cc-field bir flex ogesi; flex ogelerinin varsayilan
   min-width degeri `auto` ve bu, icerigin kutuyu ITMESINE izin
   veriyor. overflow:hidden tek basina yetmiyor — once kutunun
   kuculebilmesi gerek. */
.cc-field { min-width: 0; }
.cc-text { min-width: 0; overflow: hidden; text-overflow: clip; }

/* 2. Baslikta uzun alt yazi ("yapay zekâ · yöneticiniz okumuyor")
   dar ekranda tasiyordu. */
.chat-head > div { min-width: 0; }
.chat-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 3. Risk satiri: dar ekranda rozet + ad + sayi yan yana sigmiyor.
   Rozet kendi satirina alinir, ad ve sayi altina gecer. */
@media (max-width: 560px) {
  .rc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tag  cnt"
      "name name"
      "bar  bar";
    row-gap: 5px;
  }
  .rc-tag { min-width: 0; justify-self: start; }
  .rc-cnt { justify-self: end; }
}

/* 4. Cok dar ekranda (<=360px) kart kenar bosluklari daralir. */
@media (max-width: 360px) {
  .chat-card, .result-card { padding: 15px 14px 14px; }
  .rc-tag { font-size: .5rem; padding: 4px 7px; }
  .rc-name { font-size: .78rem; }
  .chat-devices { gap: 14px; }
}

/* 5. Mobilde kart yuksekligi sabit degil (metin daha cok satira
   kiriliyor); mesaj alani makul bir boyda kalir. */
@media (max-width: 940px) {
  .msgs { height: min(52vh, 320px); }
}

/* Mobilde hero: kart metnin ALTINA iner ve tam genislige yayilir. */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .chat-card, .result-card { max-width: 100%; margin-inline: 0; }
  .card-stage { margin-top: 8px; }
}

/* ============================================================
   Yatay kayma — kokten kapali
   ============================================================
   Mobilde sayfanin saga sola oynamasi tek bir tasan ogeden
   kaynaklanir ve bulmak zordur. Iki katmanli koruma:
     1. Govde yatayda hic kaydirilmaz.
     2. Dev kelime markasi gibi BILEREK tasan ogeler kendi
        kapsayicilarinda kirpilir (footer zaten overflow:hidden).
   `overflow-x: clip` tercih edildi: `hidden` yeni bir kaydirma
   baglami yaratip `position: sticky` basligi bozuyor.
   ============================================================ */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) {
  /* Eski tarayici yedegi. Baslik sticky kalabilsin diye yalnizca
     body'ye uygulanir. */
  body { overflow-x: hidden; }
}
/* Hicbir medya ogesi kutusunu asmaz. */
img, video, svg, canvas { max-width: 100%; }

/* Dar ekran baslik kurallari header.css e tasindi: sohbet ve panel
   site.css yuklemiyor, kural burada kalinca o sayfalarda baslik
   320px te tasiyordu. */
}

/* ============================================================
   Iletisim kutusundaki giris kartlari — masaustunde nefes
   ============================================================
   Formun yanindaki sutunda iki kart 10px araliktaydi ve altta
   genis bir bosluk kaliyordu. Masaustunde aralik aciliyor ve
   kartlar biraz daha dolgun duruyor; artan yer araya dagiliyor.

   MOBILE DOKUNULMUYOR: orada dikey alan zaten kiymetli ve
   mevcut denge dogru. Kural yalnizca >=941px'te calisir.
   ============================================================ */
@media (min-width: 941px) {
  .entry { gap: 18px; align-content: center; }
  .entry-card { padding: 22px 24px; }
}


/* ============================================================
   Fiyatlandirma
   ============================================================
   Uc kart esit: hicbiri one cikarilmiyor. "En cok tercih edilen"
   rozeti bilerek YOK — kademe secilmiyor, calisan sayisina gore
   kendiliginden belirleniyor. Olmayan bir tercihi varmis gibi
   gostermek satis dili degil, yanlis bilgi olurdu.

   Rakam altin ve buyuk; kart yuzeyi sakin. Vurgu tek yerde
   toplaniyor, uc kart birbiriyle yarismiyor.
   ============================================================ */
.pricing { background: var(--surface-2); border-block: 1px solid var(--line); }
.pr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px; margin-top: clamp(38px, 4.5vw, 56px);
}
.pr-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 26px 26px;
  display: grid; gap: 6px; align-content: start;
  transition: border-color 320ms var(--ease-soft),
              transform 380ms var(--ease-soft),
              box-shadow 380ms var(--ease-soft);
}
@media (hover: hover) {
  .pr-grid:has(.pr-card:hover) .pr-card:not(:hover) { opacity: .62; }
  .pr-card { transition: border-color 320ms var(--ease-soft), transform 380ms var(--ease-soft),
                         box-shadow 380ms var(--ease-soft), opacity 380ms var(--ease-soft); }
  .pr-card:hover {
    border-color: color-mix(in srgb, var(--gold) 46%, transparent);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
}
.pr-range {
  font-size: .78rem; font-weight: 620; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
}
.pr-price {
  margin: 6px 0 0; display: flex; align-items: baseline; gap: 7px;
}
.pr-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.pr-cur {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.12rem; color: var(--ink-2);
}
.pr-per { font-size: .84rem; color: var(--ink-2); }
.pr-note {
  margin: clamp(26px, 3vw, 36px) 0 0; max-width: 62ch;
  font-size: .88rem; line-height: 1.65; color: var(--ink-3);
}
.pr-note b { color: var(--ink-2); font-weight: 620; }

/* ============================================================
   Fiyat blogu — rotus
   ============================================================
   ₺ sembolu rakamin ONUNDE ve daha kucuk: para birimi rakamla
   ayni agirlikta olunca goz once ona takiliyor, oysa okunmasi
   gereken sayinin kendisi.
   ============================================================ */
.pr-price { align-items: flex-start; gap: 3px; margin-top: 10px; }
.pr-cur {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.35;
  font-weight: 600;
}
.pr-n { line-height: .92; }

/* Kartlar biraz daha dolgun ve derinlikli; ust kenarda ince altin
   hat — sohbet/sonuc kartlariyla ayni imza. */
.pr-card {
  position: relative;
  padding: 32px 28px 28px;
  overflow: hidden;
}
.pr-card::before {
  content: '';
  position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
  transition: opacity 320ms var(--ease-soft);
}
.pr-card:hover::before { opacity: 1; }

/* Aralik etiketi bir rozet gibi: kart icinde ilk okunan sey o. */
.pr-range {
  display: inline-block;
  padding: 5px 11px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .68rem; letter-spacing: .07em;
  color: var(--ink-2); justify-self: start;
}
.pr-per {
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-3);
}

/* Fiyat kartlarinda icerik ORTALI. Uc kart esit oldugu icin
   ortalanmis duzen simetriyi gorunur kiliyor; sola dayali halde
   kartlar birbirinden bagimsiz uc blok gibi duruyordu. */
.pr-card { justify-items: center; text-align: center; }
.pr-range { justify-self: center; }
.pr-price { justify-content: center; }
.pr-per { width: 100%; }


/* Ondalikli fiyat daha uzun; rakam bir tik kuculuyor ki uc kart
   ayni gorsel agirlikta kalsin ve dar ekranda kirilmasin. */
.pr-n { font-size: clamp(2.1rem, 3.1vw, 2.8rem); }

/* "+ 24 ölçüm alanı daha": kartta dördü gösteriliyor, ölçülen alan
   sayısı çok daha fazla. Satır olmadan ürün "dört sonuç veriyor"
   sanılıyordu. Satırlarla arası açık; onlardan biriymiş gibi
   okunmamalı. */
.rc-more {
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
  font-size: .76rem; letter-spacing: .03em;
  color: var(--gold);
  text-align: center;
}