/* ARATİMO — PREMIUM KATMAN (V7)
 *
 *   🔴 KÖK SORUN VE DÜZELTME (2026-09-05)
 *   Kullanıcı "ürün arayüzü karanlık" dedi. Sebep iki tasarım sisteminin
 *   aynı anda çalışmasıydı: tasarim.css açık paleti tanımlıyor, BU DOSYA ise
 *   kendi KOYU mürekkep paletini tanımlayıp koyu renk şemasıyla
 *   üstüne yazıyordu. Yirmi sayfada görünen renk buradan geliyordu;
 *   tasarim.css'i açığa çevirmek tek başına HİÇBİR ŞEYİ değiştirmezdi.
 *
 *   Bu sürümde katmanın KENDİ RENGİ YOKTUR. Bütün renkler tasarim.css
 *   jetonlarından okunur (--zemin, --yuzey, --metin, --vurgu, --imza,
 *   --sampanya, --cizgi). Böylece:
 *     · tek palet, tek marka — iki sistem birbirini ezemez
 *     · `data-tema="koyu"` yazıldığında bu katman da kendiliğinden döner
 *       (koyu tema jetonları çevirir, bu dosyada tek satır değişmez)
 *     · kontrast kapısı tek yerden ölçer
 *
 *   Katmanın işi RENK DEĞİL MEKANİZMA: derinlik (gölge), kenar ışığı,
 *   yumuşak zemin yıkaması, tutarlı yarıçap, odak halkası, dokunma hedefi,
 *   hareket ve yüksek-kontrast uyumu.
 *
 *   Bu dosyada kontrast ORANI YAZILMAZ — oranlar tek yerde,
 *   tasarim.css jeton bloğunda hesaplanır ve S29 kapısı orayı ölçer.
 */

:root {
  --ara-max: 1240px;
  --ara-ease: cubic-bezier(.2, .75, .25, 1);
  --ara-radius-sm: 10px;
  --ara-radius-md: 14px;
  --ara-radius-lg: 20px;
  --ara-radius-xl: 28px;
}

/* ── ZEMİN ──────────────────────────────────────────────────────────────
   Premium his düz beyazdan değil, ışığın SAKİN dağılmasından gelir: iki
   geniş yıkama (imza turkuazı ve şampanya) çok düşük yoğunlukta. Metin
   kontrastı bu yıkamalardan etkilenmesin diye yoğunluk %6'yı geçmez. */
html:not([data-aratimo-premium-plus="false"]) {
  background: var(--zemin);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html:not([data-aratimo-premium-plus="false"]) body {
  min-height: 100vh;
  color: var(--metin);
  background:
    radial-gradient(920px 560px at 86% -10%, var(--sampanya-soluk), transparent 68%),
    radial-gradient(760px 520px at -8% 30%, var(--vurgu-soluk), transparent 72%),
    var(--zemin);
  background-attachment: fixed;
}

html:not([data-aratimo-premium-plus="false"]) :where(h1, h2, h3, h4) {
  color: var(--metin);
  letter-spacing: -.022em;
  text-wrap: balance;
}

html:not([data-aratimo-premium-plus="false"]) :where(p, li, label, small) {
  color: var(--metin-2);
}

/* 🔴 GENEL BAĞLANTI RENGİ DOLU DÜĞMELERİ OKUNAMAZ YAPIYORDU. Tarayıcıda
   ölçüldü (2026-08-26): dolu düğme yazısı zemininde 3,61:1 kalıyordu.
   Sebep çakışma: :where(a) sıfır ağırlıklı görünse de kuralın html:not(...)
   öneki onu düğmenin kendi renginden ağır kılıyor ve eziyordu.
   Dolu düğmeler ve atlama bağlantısı bu genel renkten MUAF kalır. */
html:not([data-aratimo-premium-plus="false"]) :where(a):not(.dugme):not(.atla):not([class*="dugme-birincil"]) {
  color: var(--vurgu-parlak);
  text-underline-offset: .22em;
}

html:not([data-aratimo-premium-plus="false"]) :where(a, button, input, textarea, select, [role="button"]):focus-visible {
  outline: 3px solid var(--vurgu) !important;
  outline-offset: 3px !important;
}

html:not([data-aratimo-premium-plus="false"]) :where(button, .btn, [class*="button"], [class*="Button"], a[role="button"]) {
  min-height: 46px;
  border-radius: var(--r-tam, 999px);
  font-weight: 680;
  letter-spacing: -.01em;
  transition: transform .22s var(--ara-ease), box-shadow .22s var(--ara-ease),
              border-color .22s var(--ara-ease), background .22s var(--ara-ease);
}

html:not([data-aratimo-premium-plus="false"]) :where(button, .btn, [class*="button"], [class*="Button"], a[role="button"]):not(:disabled):hover {
  transform: translateY(-1px);
}

/* Birincil eylem: DOLU vurgu zemini + üstünde jetonun kendi metin rengi.
   Renk burada seçilmez, tasarim.css'ten gelir — bu yüzden koyu temada
   düğme kendiliğinden turkuaza döner ve yine AA kalır. */
html:not([data-aratimo-premium-plus="false"]) :where(.btn-primary, [data-variant="primary"], button[type="submit"], a[class*="primary" i], .dugme-birincil) {
  color: var(--vurgu-uzeri) !important;
  border: 1px solid var(--vurgu) !important;
  background: var(--vurgu) !important;
  box-shadow: var(--golge-kart), var(--kenar-isik);
}

html:not([data-aratimo-premium-plus="false"]) :where(.btn-primary, [data-variant="primary"], button[type="submit"], a[class*="primary" i], .dugme-birincil):not(:disabled):hover {
  background: var(--vurgu-basili) !important;
  border-color: var(--vurgu-basili) !important;
}

html:not([data-aratimo-premium-plus="false"]) :where(.btn-secondary, [data-variant="secondary"], a[class*="secondary" i], .dugme-ikincil) {
  color: var(--metin) !important;
  border: 1px solid var(--cizgi) !important;
  background: var(--yuzey) !important;
  box-shadow: var(--kenar-isik);
}

html:not([data-aratimo-premium-plus="false"]) :where(header, nav) {
  border-color: var(--cizgi) !important;
}

/* 🔴 BAŞLIK ÇUBUĞU SAYDAM DEĞİL. Önce `color-mix(... 78%, transparent)`
   yazmıştım; kontrast ölçümü menü bağlantılarını 3,28:1 raporladı çünkü
   saydam zeminin arkasında ne olduğunu kimse bilemez. Ekranda oran 5,85:1
   idi — ama sayfa kaydıkça çubuğun altından KOYU bir bölüm de geçebilir ve
   o an menü gerçekten okunmaz olur. Ölçülemeyen oran, güvenilemeyen orandır.
   Çubuk düz zemin alır; premium his bulanıklıktan değil gölge ve ince
   çizgiden gelir. */
html:not([data-aratimo-premium-plus="false"]) :where(header) {
  background: var(--zemin);
  box-shadow: 0 1px 0 var(--cizgi);
}

html:not([data-aratimo-premium-plus="false"]) :where(main, .container, [class*="container" i]) {
  max-width: min(var(--ara-max), 100%);
}

html:not([data-aratimo-premium-plus="false"]) :where(section) {
  scroll-margin-top: 96px;
}

/* Kart: açık temada "cam" işe yaramaz (arkasında karanlık yok). Derinlik
   düz yüzey + gerçek gölge + üst kenar ışığıyla kurulur. */
html:not([data-aratimo-premium-plus="false"]) :where(.card, [class*="card" i], [data-premium-surface="true"], .panel, [class*="panel" i]) {
  border-color: var(--cizgi) !important;
  border-radius: var(--ara-radius-lg);
  background: var(--yuzey) !important;
  box-shadow: var(--kenar-isik), var(--golge-kart);
}

html:not([data-aratimo-premium-plus="false"]) :where(.card, [class*="card" i], [data-premium-surface="true"]):hover {
  border-color: var(--vurgu) !important;
  box-shadow: var(--kenar-isik), var(--golge-sahne);
}

html:not([data-aratimo-premium-plus="false"]) :where(input, textarea, select) {
  min-height: 46px;
  color: var(--metin);
  border: 1px solid var(--cizgi) !important;
  border-radius: var(--ara-radius-sm) !important;
  background: var(--yuzey) !important;
}

html:not([data-aratimo-premium-plus="false"]) :where(input, textarea)::placeholder {
  color: var(--metin-3);
}

html:not([data-aratimo-premium-plus="false"]) :where(table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: var(--ara-radius-md);
  background: var(--yuzey);
}

html:not([data-aratimo-premium-plus="false"]) :where(th) {
  color: var(--metin);
  background: var(--yuzey-2);
}

html:not([data-aratimo-premium-plus="false"]) :where(th, td) {
  padding: 13px 15px;
  border-bottom: 1px solid var(--cizgi);
}

html:not([data-aratimo-premium-plus="false"]) :where(code, pre) {
  border-color: var(--cizgi) !important;
  color: var(--metin) !important;
  background: var(--yuzey-2) !important;
}

.ara-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999;
  padding: 10px 16px;
  color: var(--vurgu-uzeri) !important;
  border-radius: 999px;
  background: var(--vurgu);
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.ara-skip-link:focus { transform: translateY(0); }

/* ── GÜVEN ŞERİDİ ───────────────────────────────────────────────────────
   Ürünün çalışma biçimi dört adımda. Zemin YÜZEY olur; metin oranları
   yüzeye göre hesaplanmış jetonlardan gelir. */
.ara-proof-rail {
  width: auto;
  max-width: min(var(--ara-max), 100%);
  margin: 18px auto 10px;
  padding: 14px;
  border: 1px solid var(--cizgi);
  border-radius: var(--ara-radius-lg);
  background: var(--yuzey);
  box-shadow: var(--kenar-isik), var(--golge-kart);
}

.ara-proof-rail__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  color: var(--vurgu-parlak) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ara-proof-rail__eyebrow::before {
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: var(--vurgu);
  box-shadow: 0 0 0 5px var(--vurgu-soluk);
}
.ara-proof-rail__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ara-proof-rail__step {
  position: relative;
  min-height: 74px;
  padding: 12px 13px 11px 43px;
  border: 1px solid var(--cizgi);
  border-radius: var(--ara-radius-md);
  background: var(--zemin);
}
.ara-proof-rail__number {
  position: absolute;
  top: 13px;
  left: 13px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--vurgu-uzeri);
  border-radius: 50%;
  background: var(--vurgu);
  font-size: 12.5px;
  font-weight: 900;
}
.ara-proof-rail__step strong {
  display: block;
  margin-bottom: 3px;
  color: var(--metin);
  font-size: 13px;
}
/* 🔴 ŞERİDİN AÇIKLAMALARI 11 PİKSELDİ. OctoAudit ölçtü (2026-08-26): üç dilde
   de 8 öğe 11,5 pikselin altında kaldı — "okunması zor, özellikle yaşlı ve
   görme güçlüğü olan kişiler için". Kusur o gün eklediğim tasarım paketinden
   geldi; renk kontrastını ölçmüştüm, YAZI BOYUTUNU ölçmemiştim.
   Türkçe'de ö ü ç ş ğ işaretleri küçük punto ile daha da okunmaz olur. */
.ara-proof-rail__step span:last-child {
  display: block;
  color: var(--metin-2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* 🔴 GENİŞLİK 100vw İLE ÖLÇÜLÜYORDU — ölçüldü (2026-09-03, /panel/plan
   @1440px): yan menüsü olan panelde kap 1132px iken `100vw - 36px` 1404px
   veriyor ve şerit sayfayı 78px yatay kaydırıyordu. Görünüm genişliği,
   öğenin İÇİNDE DURDUĞU kabın genişliği değildir; kaba göre ölçülür.
   ŞAMPANYA yalnız KENAR ve İŞARET içindir: açık zeminde şampanya METİN
   AA'dan kalır, o yüzden başlık --metin ile yazılır. */
.ara-commercial-note {
  width: auto;
  max-width: min(var(--ara-max), 100%);
  margin: 24px auto;
  padding: 18px 20px;
  border: 1px solid var(--sampanya);
  border-radius: var(--ara-radius-lg);
  background: var(--sampanya-zemin);
}
.ara-commercial-note strong { color: var(--metin); }
.ara-commercial-note p { margin: 5px 0 0; font-size: 14px; color: var(--metin-2); }

html:not([data-aratimo-premium-plus="false"]) .aratimo-avatar-support {
  max-width: min(420px, 42vw) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 98%);
}

/* Kaynak rozeti ürünün İMZASIDIR: turkuaz burada, CTA'da değil. */
html:not([data-aratimo-premium-plus="false"]) :where([class*="source" i], [class*="kaynak" i], [data-source]) {
  border-color: var(--vurgu) !important;
}

html:not([data-aratimo-premium-plus="false"]) :where([class*="confidence" i], [class*="guven" i], [data-confidence]) {
  color: var(--vurgu-parlak);
}

html:not([data-aratimo-premium-plus="false"]) :where(.badge, [class*="badge" i], [class*="pill" i]) {
  border: 1px solid var(--cizgi);
  color: var(--metin-2);
  background: var(--yuzey-2);
}

@media (max-width: 840px) {
  .ara-proof-rail__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not([data-aratimo-premium-plus="false"]) main,
  html:not([data-aratimo-premium-plus="false"]) .container,
  html:not([data-aratimo-premium-plus="false"]) [class*="container" i] { max-width: 100%; }
  html:not([data-aratimo-premium-plus="false"]) .aratimo-avatar-support { max-width: min(340px, 82vw) !important; }
}

@media (max-width: 520px) {
  .ara-proof-rail { width: auto; max-width: 100%; padding: 10px; border-radius: 16px; }
  .ara-proof-rail__steps { grid-template-columns: 1fr; }
  .ara-proof-rail__step { min-height: 64px; }
  .ara-commercial-note { width: auto; max-width: 100%; padding: 15px; }
  html:not([data-aratimo-premium-plus="false"]) :where(th, td) { padding: 10px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-aratimo-premium-plus="false"]) *,
  html:not([data-aratimo-premium-plus="false"]) *::before,
  html:not([data-aratimo-premium-plus="false"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .ara-proof-rail, .ara-commercial-note { border: 1px solid CanvasText; }
}