/* ═══════════════════════════════════════════════════════════════════
   protan.ai, TASARIM TOKENLARI  v2
   Tailwind v4 `@theme` bloğuna birebir taşınacak.

   TEMA KARARI  (11.09.2026'da değişti)
   ───────────
   VARSAYILAN AÇIK, koyu tema seçmeli. Eskiden tam tersiydi.

   Sebep pazarlama değil okuma koşulu: bu ürünü satın alan kişi
   skoru ve raporu gündüz, ofiste, çoğu zaman bir toplantıda
   açıyor; PDF raporu zaten kâğıt için açık paletle basılıyor ve
   panelin ekran görüntüleri tanıtım sayfasına konuyor. Üç yüzeyin
   üçü de açık zemin isteyince koyu varsayılan tek başına kaldı.

   Token'lar ROL adı taşıyor (--surface, --ink, --line), renk adı
   değil; bu yüzden iki tema iki değişken bloğundan ibaret ve
   HİÇBİR bileşen kodu tema bilmiyor. Yeni bir renk gerektiğinde
   kural içine sabit değer yazmak yerine buraya token eklenir;
   yoksa o kural tek temada doğru görünür.

   Koyu blok İKİ KEZ yazılı ve ikisi AYNI kalmalı: biri işletim
   sistemi tercihi için (`prefers-color-scheme`), biri kullanıcının
   düğmeyle yaptığı seçim için (`[data-theme]`). CSS'te bir medya
   sorgusuyla düz bir seçici tek kuralda birleştirilemiyor.
   Üçüncü bir hâl daha var: kullanıcı AÇIK dediyse işletim sistemi
   koyu olsa bile açık kalmalı; bunu media bloğundaki
   `:not([data-theme="light"])` sağlıyor.

   Seçim ÇEREZDE ve `data-theme` özniteliği SUNUCUDA basılıyor
   (bkz. app/Support/Tema.php). Satır içi script CSP'de yasak
   olduğu için tema JS ile uygulanamaz; uygulansaydı koyu tema
   seçen kullanıcı her sayfa açılışında bir kare beyaz görürdü.

   PDF/yazdırma yine ayrı: `@media print` bloğu paleti açık
   değerlere zorluyor, çünkü orası bir tema değil çıktı biçimi ve
   kullanıcının koyu seçimi kâğıda taşınmamalı.

   Ölçek, yarıçap ve gölge değerleri ajans tasarım sistemiyle aynı.
   Aynı elden çıktığı hissi renkten değil oranlardan gelir.
   ═══════════════════════════════════════════════════════════════════ */

/* ── AÇIK (varsayılan) ──────────────────────────────────────────────
   Yeşil burada #3DDC97 DEĞİL: o ton beyaz zeminde okunmuyor ve
   "yeşil" değil "açık yeşil bir leke" gibi duruyor. Aynı rengin
   koyulaştırılmışı beyazda okunuyor. Mor da aynı sebeple #6C5CE7.
   İki palet aynı renk AİLESİ, aynı hex değil.

   RENKLER GÖZ KARARI DEĞİL, ÖLÇÜLDÜ. İlk denemede imza rengi
   #0FA968'di: beyaz zeminde 3.05:1 veriyor ve WCAG'in normal metin
   için istediği 4.5:1'in altında. Düğme zemini olarak sorun değil,
   ama imza rengi yalnızca düğmede durmuyor — seçili çip, bağlantı,
   "Öneriyor" rozeti, skor çubuğu etiketi hepsi 11-13 piksellik
   yeşil METİN. #0A7A4A beyazda 5.39:1 veriyor, üstüne beyaz metin
   konduğunda da aynı oranı koruyor; ayrıca @media print bloğunun
   zaten kullandığı yeşil bu — ekrandaki raporla kâğıda basılan
   artık aynı renk. Uyarı, hata ve bilgi renkleri de aynı ölçüden
   geçti. Koyu temada tersi gerekiyor (açık tonlar), o yüzden iki
   palette aynı rol farklı hex taşıyor. */
:root{
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#F1F3F7;
  --surface-3:#E9EDF3;
  --line:#E4E8EE;
  --line-2:#D2D8E2;

  --ink:#0E1220;
  --ink-2:#3F4859;
  --ink-3:#6B7484;
  --ink-4:#98A1B0;

  --sig:#0A7A4A;
  --sig-hover:#086B41;
  --sig-ink:#FFFFFF;
  --sig-soft:rgba(10,122,74,.10);
  --sig-line:rgba(10,122,74,.28);
  --sig-ring:rgba(10,122,74,.26);
  --sig-band:rgba(10,122,74,.20);

  --op:#6C5CE7;
  --op-hover:#5A49DB;
  --op-ink:#FFFFFF;
  --op-soft:rgba(108,92,231,.10);
  --op-line:rgba(108,92,231,.28);

  --p0:#0A7A4A; --p1:rgba(10,122,74,.55);
  --p2:#6C5CE7; --p3:rgba(108,92,231,.55);

  --ok:#0A7A4A;   --ok-bg:rgba(10,122,74,.10);   --ok-line:rgba(10,122,74,.26);
  --warn:#A8690A; --warn-bg:rgba(168,105,10,.10); --warn-line:rgba(168,105,10,.28);
  --err:#C63B2F;  --err-bg:rgba(198,59,47,.09);   --err-line:rgba(198,59,47,.26);
  --info:#2F6FE0; --info-bg:rgba(47,111,224,.09); --info-line:rgba(47,111,224,.26);
  --rival:#C63B2F; --rival-soft:rgba(198,59,47,.12);

  /* WhatsApp · hızlı iletişim bloğunun yeşili (--sig DEĞİL).
     Marka rengi olduğu için rol adı taşımıyor ama yine de token:
     iki temada iki ton gerekiyor ve kuralın içine sabit değer
     yazılsaydı koyu temada sönük kalırdı. Mürekkep de temayla
     dönüyor — açıkta koyu yeşil üstüne beyaz, koyuda parlak yeşil
     üstüne koyu. Tersi, ikisinde de okunmuyor. */
  --wa:#1AA34A; --wa-ink:#FFFFFF; --wa-soft:rgba(26,163,74,.14);

  /* Gölgeler açıkta İNCE. Koyudaki 0 18px 44px rgba(0,0,0,.5)
     beyaz zeminde kirli bir leke gibi duruyor; ayrımı gölge değil
     kenarlık kuruyor, gölge yalnızca "bu kutu yüzüyor" diyor. */
  --sh-sm:0 1px 2px rgba(16,24,40,.06);
  --sh-md:0 6px 18px rgba(16,24,40,.08);
  --sh-lg:0 24px 60px rgba(16,24,40,.14);
  --sh-ring:0 0 0 1px rgba(16,24,40,.05);
  --sh-bar:0 10px 30px rgba(16,24,40,.10);
  --sh-bar-focus:0 12px 34px rgba(16,24,40,.14);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.7);
  --scrim:rgba(14,18,32,.45);
  --band-fill:rgba(10,122,74,.16);

  /* Işıma açıkta neredeyse görünmez: koyuda ışık kaynağı hissi
     veren şey beyazda sararmış kâğıt izlenimi bırakıyor. */
  --glow:radial-gradient(ellipse 46% 42% at 50% 44%,rgba(10,122,74,.13),transparent 70%),
    radial-gradient(ellipse at center,rgba(10,122,74,.07),transparent 68%);
  --glow-2:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(108,92,231,.07),transparent 62%);
  --glow-scan:radial-gradient(ellipse 58% 100% at 50% 0%,rgba(10,122,74,.07),transparent 66%),
    radial-gradient(ellipse 92% 100% at 50% 0%,rgba(108,92,231,.05),transparent 70%);
  color-scheme:light;
}

/* ── KOYU · 1/2 · işletim sistemi tercihi ───────────────────────────
   `:not([data-theme="light"])`: kullanıcı açıkça AÇIK dediyse
   işletim sistemi koyu olsa bile bu blok uygulanmaz. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --bg:#0A0C11;
  --surface:#12151C;
  --surface-2:#171B24;
  --surface-3:#1D222D;
  --line:#242A36;
  --line-2:#2F3746;

  --ink:#EEF1F6;
  --ink-2:#AFB8C7;
  --ink-3:#7E8899;
  --ink-4:#5A6373;

  --sig:#3DDC97;
  --sig-hover:#2FC384;
  --sig-ink:#04140D;
  --sig-soft:rgba(61,220,151,.11);
  --sig-line:rgba(61,220,151,.26);
  --sig-ring:rgba(61,220,151,.30);
  --sig-band:rgba(61,220,151,.22);

  --op:#8B7CF6;
  --op-hover:#7663E8;
  --op-ink:#FFFFFF;
  --op-soft:rgba(139,124,246,.12);
  --op-line:rgba(139,124,246,.28);

  --p0:#3DDC97; --p1:rgba(61,220,151,.62);
  --p2:#8B7CF6; --p3:rgba(139,124,246,.64);

  --ok:#3DDC97;   --ok-bg:rgba(61,220,151,.10);   --ok-line:rgba(61,220,151,.24);
  --warn:#F5B544; --warn-bg:rgba(245,181,68,.10); --warn-line:rgba(245,181,68,.24);
  --err:#F2685C;  --err-bg:rgba(242,104,92,.10);  --err-line:rgba(242,104,92,.24);
  --info:#5B9BF8; --info-bg:rgba(91,155,248,.10); --info-line:rgba(91,155,248,.24);
  --rival:#F2685C; --rival-soft:rgba(242,104,92,.16);

  --wa:#25D366; --wa-ink:#06301A; --wa-soft:rgba(37,211,102,.16);

  --sh-sm:0 1px 3px rgba(0,0,0,.4);
  --sh-md:0 4px 14px rgba(0,0,0,.36);
  --sh-lg:0 18px 44px rgba(0,0,0,.5);
  --sh-ring:0 0 0 1px rgba(0,0,0,.25);
  --sh-bar:0 14px 40px rgba(0,0,0,.42);
  --sh-bar-focus:0 16px 46px rgba(0,0,0,.5);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.04);
  --scrim:rgba(6,8,12,.72);
  --band-fill:rgba(61,220,151,.17);

  /* Kahraman ışıması iki katmanlı: dar/parlak çekirdek + geniş/yumuşak
     hâle. Tek gradyanla ya sönük ya da leke gibi duruyordu. */
  --glow:radial-gradient(ellipse 46% 42% at 50% 44%,rgba(61,220,151,.30),transparent 70%),
    radial-gradient(ellipse at center,rgba(61,220,151,.15),transparent 68%);
  --glow-2:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(139,124,246,.10),transparent 62%);
  --glow-scan:radial-gradient(ellipse 58% 100% at 50% 0%,rgba(61,220,151,.09),transparent 66%),
    radial-gradient(ellipse 92% 100% at 50% 0%,rgba(139,124,246,.07),transparent 70%);
  color-scheme:dark;
  }
}

/* ── KOYU · 2/2 · kullanıcının seçimi ───────────────────────────────
   YUKARIDAKİ BLOKLA AYNI KALMALI. Değeri burada değiştirip
   ötekinde unutmak, temayı elle seçenle sistemden gelenin farklı
   renkler görmesi demektir ve kimse fark etmez. */
:root[data-theme="dark"]{
  --bg:#0A0C11;
  --surface:#12151C;
  --surface-2:#171B24;
  --surface-3:#1D222D;
  --line:#242A36;
  --line-2:#2F3746;

  --ink:#EEF1F6;
  --ink-2:#AFB8C7;
  --ink-3:#7E8899;
  --ink-4:#5A6373;

  --sig:#3DDC97;
  --sig-hover:#2FC384;
  --sig-ink:#04140D;
  --sig-soft:rgba(61,220,151,.11);
  --sig-line:rgba(61,220,151,.26);
  --sig-ring:rgba(61,220,151,.30);
  --sig-band:rgba(61,220,151,.22);

  --op:#8B7CF6;
  --op-hover:#7663E8;
  --op-ink:#FFFFFF;
  --op-soft:rgba(139,124,246,.12);
  --op-line:rgba(139,124,246,.28);

  --p0:#3DDC97; --p1:rgba(61,220,151,.62);
  --p2:#8B7CF6; --p3:rgba(139,124,246,.64);

  --ok:#3DDC97;   --ok-bg:rgba(61,220,151,.10);   --ok-line:rgba(61,220,151,.24);
  --warn:#F5B544; --warn-bg:rgba(245,181,68,.10); --warn-line:rgba(245,181,68,.24);
  --err:#F2685C;  --err-bg:rgba(242,104,92,.10);  --err-line:rgba(242,104,92,.24);
  --info:#5B9BF8; --info-bg:rgba(91,155,248,.10); --info-line:rgba(91,155,248,.24);
  --rival:#F2685C; --rival-soft:rgba(242,104,92,.16);

  --wa:#25D366; --wa-ink:#06301A; --wa-soft:rgba(37,211,102,.16);

  --sh-sm:0 1px 3px rgba(0,0,0,.4);
  --sh-md:0 4px 14px rgba(0,0,0,.36);
  --sh-lg:0 18px 44px rgba(0,0,0,.5);
  --sh-ring:0 0 0 1px rgba(0,0,0,.25);
  --sh-bar:0 14px 40px rgba(0,0,0,.42);
  --sh-bar-focus:0 16px 46px rgba(0,0,0,.5);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.04);
  --scrim:rgba(6,8,12,.72);
  --band-fill:rgba(61,220,151,.17);

  /* Kahraman ışıması iki katmanlı: dar/parlak çekirdek + geniş/yumuşak
     hâle. Tek gradyanla ya sönük ya da leke gibi duruyordu. */
  --glow:radial-gradient(ellipse 46% 42% at 50% 44%,rgba(61,220,151,.30),transparent 70%),
    radial-gradient(ellipse at center,rgba(61,220,151,.15),transparent 68%);
  --glow-2:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(139,124,246,.10),transparent 62%);
  --glow-scan:radial-gradient(ellipse 58% 100% at 50% 0%,rgba(61,220,151,.09),transparent 66%),
    radial-gradient(ellipse 92% 100% at 50% 0%,rgba(139,124,246,.07),transparent 70%);
  color-scheme:dark;
}

/* ölçek, temadan bağımsız */
:root{
  --r-sm:6px; --r:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --sidebar-w:238px; --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv05","ss01";
  transition:background .18s,color .18s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* ── FORM DENETİMLERİ · TEMEL GÖRÜNÜM ────────────────────────────
   Sınıfı olmayan bir alan — toplu işlem çubuğundaki gerekçe kutusu,
   çöp kutusundaki yazılı onay, ziyaretçi ekranındaki IP alanı —
   eskiden tarayıcının kendi kutusunu çiziyordu: kare köşe, mavi
   odak halkası, işletim sistemine göre değişen yükseklik. Aynı
   ekranda .fld alanlarının yanına gelince iki ayrı tasarımdan
   toplanmış gibi okunuyordu. Alan sınıfsız diye çıplak kalmamalı;
   varsayılan da markanın parçası.

   Blok :where() içinde ve ÖZGÜLLÜĞÜ SIFIR. Yani yalnızca başka
   hiçbir kuralın söylemediği yerde konuşuyor: .fld, .bare, tablo
   içi alanlar, sihirbaz alanları kendi kurallarıyla üstüne yazar.
   Dosyadaki sıraya bağlı bir üstünlük kurulmuyor — bu dosyada daha
   önce tam da o yüzden (.scanbar / .fld çakışması) bir kutu içinde
   ikinci kutu belirmişti.

   Kutucuk, radyo ve dosya listenin DIŞINDA: onların çizdiği şey bir
   metin kutusu değil. Renkleri accent-color ile veriliyor. */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=range],
       [type=color],[type=submit],[type=reset],[type=button],[type=image]),
       select,textarea){
  height:38px;padding:0 12px;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:13.5px;caret-color:var(--sig);
  transition:border-color .14s,box-shadow .14s,background .14s}
:where(textarea){height:auto;min-height:92px;padding:10px 12px;
  line-height:1.6;resize:vertical}
:where(select){padding-right:8px;cursor:pointer}
:where(input,select,textarea)::placeholder{color:var(--ink-4)}
:where(input:not([type=checkbox],[type=radio],[type=file]),select,textarea):hover:not(:focus):not(:disabled):not([readonly]){
  border-color:var(--ink-4)}
/* Odak: kenarlık imza rengine döner, dışına 3px yumuşak halka.
   Tarayıcının kendi konturu KAPATILIYOR, yoksa halkanın üstüne
   ikinci bir çerçeve biniyor — :focus-visible kuralı (aşağıda,
   sayfa genelinde) özgüllükçe bu bloktan güçlü olduğu için kapatma
   :where() dışında, gerçek özgüllükle yazılmak zorunda. */
input:not([type=checkbox],[type=radio],[type=file]):focus-visible,
select:focus-visible,textarea:focus-visible{outline:0}
:where(input:not([type=checkbox],[type=radio],[type=file]),select,textarea):focus{
  outline:0;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-ring)}
:where(input,select,textarea):disabled{background:var(--surface-3);
  color:var(--ink-4);cursor:not-allowed}
:where(input[readonly]){color:var(--ink-3);background:var(--surface-3)}
/* Kutucuk ve radyo: tarayıcının mavisi yeşil bir panelde yabancı
   duruyordu. accent-color tek satırda hem işareti hem dolguyu
   imza rengine çeviriyor ve koyu temada kendiliğinden dönüyor. */
:where(input[type=checkbox],input[type=radio]){accent-color:var(--sig);
  width:16px;height:16px;cursor:pointer}
/* Tarih alanının takvim simgesi: varsayılan tam siyah/tam beyaz,
   alanın en koyu öğesi oluyordu. Sönük duruyor, alana gelince
   belirginleşiyor. */
::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;
  transition:opacity .14s}
input:hover::-webkit-calendar-picker-indicator,
input:focus::-webkit-calendar-picker-indicator{opacity:.9}

svg{display:block}
:focus-visible{outline:2px solid var(--sig);outline-offset:2px;border-radius:3px}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico-sm{width:15px;height:15px}
.mono{font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-size:12px;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-4)}

/* ── ortak parçalar ─────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;
  border-radius:var(--r);font-weight:600;font-size:13.5px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ink-2);transition:.14s}
.btn:hover{border-color:var(--ink-4);color:var(--ink)}
.btn-p{background:var(--sig);border-color:var(--sig);color:var(--sig-ink)}
.btn-p:hover{background:var(--sig-hover);border-color:var(--sig-hover);color:var(--sig-ink)}
.btn-op{background:var(--op);border-color:var(--op);color:var(--op-ink)}
.btn-op:hover{background:var(--op-hover);border-color:var(--op-hover);color:var(--op-ink)}
.btn-lg{height:46px;padding:0 22px;font-size:15px}
.btn-sm{height:30px;padding:0 11px;font-size:12.5px}
/* Mürekkep düğmesi · üst çubukta "Kayıt ol".
   İmza rengiyle yarışmadan ondan daha ağır durabilen tek renk,
   metnin kendi rengi. Koyu temada kendiliğinden tersine dönüyor
   (--ink beyaza yakın, --bg siyaha): kural tek, sonuç iki tema. */
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-ink:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--bg)}
/* Çerçevesiz düğme · üst çubukta "Giriş".
   Kenarlığı olan bir düğme, yanındaki dolu düğmeyle birlikte iki
   kutu oluşturup ikisinin de ağırlığını düşürüyordu. */
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);border-color:transparent;color:var(--ink)}
/* Tema düğmesi kare: içinde metin değil tek ikon var ve yatay
   dolgu bırakılırsa yanındaki dil düğmesiyle aynı hizada durmuyor.
   aspect-ratio yüksekliği takip ediyor, .mnav'da 34, panelde 30. */
.tsw{width:30px;aspect-ratio:1;padding:0;justify-content:center}
.mtema{justify-content:flex-start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.pad{padding:20px}
.chip{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;
  border-radius:100px;font-size:11.5px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ink-3)}
.chip.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.chip.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.chip.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.chip.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
.chip.sig{background:var(--sig-soft);border-color:var(--sig-line);color:var(--sig)}

/* ── LOGO ────────────────────────────────────────────────────────
   Tek SVG, beş kullanım yeri. Renkler CSS değişkenine bağlı;
   özel değişkenler `<use>` gölge ağacına miras kaldığı için
   sembolü kopyalamadan her yerde kullanabiliyoruz.

   Koyu temada P-2 varyantı geçerli: beyaz rozet, siyah "AI".
   Yazdırmada otomatik P-1'e dönüyor (siyah rozet, beyaz "AI"),
   çünkü --ink ve --bg orada yer değiştiriyor.
   Renk vurgusu arayüzün işi, logonun değil. */
:root{
  --logo-wm:var(--ink);          /* "protan" kelime markası */
  --logo-badge:var(--ink);       /* rozet zemini */
  --logo-badge-ink:var(--bg);    /* rozetin içindeki "AI" */
}
/* Marka renginin gerektiği tek yer varsa (sosyal medya avatarı,
   ürün ikonu) bu sınıf açılır. Arayüzde kullanılmıyor. */
.logo--brand{--logo-badge:var(--sig);--logo-badge-ink:var(--sig-ink)}

.logo{display:inline-flex;align-items:center;gap:9px;height:30px;flex:0 0 auto}
/* aspect-ratio ŞART. Dış <svg> etiketinde viewBox yok (viewBox
   sembolün üzerinde); viewBox'sız bir <svg>'nin doğal en-boy oranı
   da yoktur, `width:auto` görünce tarayıcı ona varsayılan 300px
   verir ve sembol o kutunun ORTASINA oturur, iki yanda ~80px
   hayalet boşlukla. Oranı burada bildirince kutu mürekkebe birebir
   oturuyor ve logo gerçekten sola dayanıyor.
   Değer sembolün viewBox'ından gelir: 521.79 / 129.40

   Seçici doğrudan çocuk DEĞİL: Laravel sürümünde logo bir <a>
   ile sarılı (prototipte sarılı değildi). `.logo>svg` o yüzden
   eşleşmiyor, svg 300x150 varsayılanına düşüyor ve logo devleşiyordu. */
.logo a{display:block;height:100%}
.logo svg{height:100%;width:auto;aspect-ratio:521.79/129.4;display:block}
.logo--lg{height:38px}
.logo--sm{height:22px}
.lgmark{height:100%;width:auto;display:block;aspect-ratio:1}
/* Yapay zekâ markaları: genişlik ve yükseklik ikisi de açıkça verildiği
   için aynı tuzağa düşmüyorlar. */

/* ölçüm künyesi, her skorun altında, tartışmayı bitirir */
.stamp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--ink-4);padding:11px 0 0;margin-top:14px;
  border-top:1px dashed var(--line-2)}
.stamp span{display:inline-flex;align-items:center;gap:5px}
.stamp span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--ink-4);opacity:.6}
.stamp span:first-child::before{display:none}

/* ── PAZARLAMA ──────────────────────────────────────────────────── */
/* Navigasyon tam genişlik: logo içerik kolonuna değil, ekranın
   soluna hizalanıyor. Marka kenarda durunca daha büyük görünür.

   Logonun viewBox'ı mürekkep sınırına kırpıldı (10.87 8.11 …).
   Ham dosyada solda ~11, üstte ~8 birim boşluk vardı; simetrik
   padding versek bile logo içeriden ötelenmiş görünüyordu.
   Şimdi sol boşluk = sağ boşluk = padding değeri, tam olarak. */
/* top:0 — prototipteki 46px'lik ekran değiştirici şerit (.deck)
   canlı sürümde yok, ofset kaldırıldı. */
.mnav{position:sticky;top:0;z-index:100;height:74px;display:flex;
  align-items:center;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
/* MENU LOGONUN YANINDA, ORTADA DEGIL. Onceden wrap space-between'di
   ve uc oge (logo · nav · eylemler) esit araliklarla dagiliyordu:
   nav ekranin ortasinda, logodan da dugmelerden de kopuk duruyordu.
   Simdi nav logonun hemen sagina yapisik; sag gruba margin-left:auto
   verilerek bosluk tek yerde, ortada toplaniyor. */
.mnav .wrap{max-width:none;padding:0 24px;display:flex;align-items:center;
  justify-content:flex-start;width:100%;gap:24px}
.mnav .wrap>:last-child{margin-left:auto}
.mnav .logo{height:34px}
.mnav nav{display:flex;gap:30px;font-size:15px;color:var(--ink-3);font-weight:500;
  letter-spacing:-.01em;margin-left:12px}
.mnav nav a:hover{color:var(--ink)}
/* Sağdaki son öğe düğme: kenarlığı zaten hizada durur. */
.mnav .btn-sm{height:34px;padding:0 14px;font-size:13.5px}
.vr{width:1px;height:20px;background:var(--line-2);flex:0 0 auto;margin:0 4px}

/* ── KAYNAKLAR · açılır menü ──────────────────────────────────────
   Tamamen CSS: :hover ve :focus-within. JS'e ihtiyaç yok, dolayısıyla
   CSP'ye takılacak bir şey de yok. Klavyeyle gelen kullanıcı düğmeye
   odaklanınca menü açılır, içindeki bağlantılar sırayla odak alır,
   son bağlantıdan çıkınca kapanır. */
.mnav nav .ddn{position:relative}
.mnav nav .ddn>button{background:none;border:0;padding:0;font:inherit;
  color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.mnav nav .ddn>button:hover{color:var(--ink)}
.mnav nav .ddn>button svg{width:12px;height:12px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:.15s}
.mnav nav .ddn:hover>button svg,.mnav nav .ddn:focus-within>button svg{transform:rotate(180deg)}
.mnav nav .ddm{position:absolute;top:calc(100% + 14px);left:-14px;width:340px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:7px;display:none;flex-direction:column;gap:2px;
  font-size:14px}
/* Düğme ile menü arasındaki 14px boşlukta fare kaybolmasın: görünmez köprü. */
.mnav nav .ddm::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mnav nav .ddn:hover .ddm,.mnav nav .ddn:focus-within .ddm{display:flex}
/* Üç satır · ikon kutusu + başlık + tek satır açıklama. */
.mnav nav .ddm a{display:flex;align-items:flex-start;gap:11px;padding:10px 11px;
  border-radius:var(--r);color:var(--ink-2);transition:background .13s}
.mnav nav .ddm a:hover{background:var(--surface-2)}
.mnav nav .ddm .di{flex:0 0 auto;width:31px;height:31px;border-radius:9px;
  background:var(--surface-3);border:1px solid var(--line);display:grid;place-items:center;
  transition:background .13s,border-color .13s}
.mnav nav .ddm .di svg{width:16px;height:16px;stroke:var(--ink-3);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .13s}
.mnav nav .ddm a:hover .di{background:var(--sig-soft);border-color:var(--sig-line)}
.mnav nav .ddm a:hover .di svg{stroke:var(--sig)}
.mnav nav .ddm .dt{display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.mnav nav .ddm .dt small{font-size:12.5px;font-weight:400;color:var(--ink-4);line-height:1.4}

/* ── MOBİL MENÜ ──────────────────────────────────────────────────
   940px altında yatay nav gizleniyordu ve YERİNE HİÇBİR ŞEY
   gelmiyordu: telefonda Fiyatlar, Yöntem ve araçlara ulaşmanın tek
   yolu altbilgiydi. Gizlenen menü, olmayan menüdür.

   Açma/kapama common.js'te (aria-expanded), CSS yalnızca duruma
   göre gösteriyor. Panel çubuğun ALTINA açılır, sayfayı kaplamaz:
   arkada kalan içerik görünür ve dışına tıklamak kapatır. */
.mtgl{display:none;width:38px;height:38px;border-radius:var(--r);border:1px solid var(--line);
  background:none;color:var(--ink-2);cursor:pointer;align-items:center;justify-content:center;
  flex:0 0 auto;padding:0}
.mtgl svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mtgl .x{display:none}
.mtgl[aria-expanded=true] .x{display:block}
.mtgl[aria-expanded=true] .bars{display:none}
.mtgl:hover{color:var(--ink);background:var(--surface-2)}
.mtgl:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.mmenu{display:none;position:absolute;top:100%;left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--sh-lg);
  padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));
  /* dvh: iOS Safari'de 100vh araç çubuklarını da sayıyor, panelin
     dibi çubuğun altında kalıyordu. dvh tanımayan tarayıcı bir üst
     satırdaki vh'yi kullanır. */
  max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mmenu[data-acik]{display:block}
.mmenu a{display:block;padding:12px 6px;font-size:16px;font-weight:500;color:var(--ink-2);
  border-bottom:1px solid var(--line)}
.mmenu a:hover{color:var(--ink)}
.mmenu .mh{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);padding:16px 6px 4px}
.mmenu .mgrp a{padding-left:16px;font-size:15px}
.mmenu .mgrp a small{display:block;font-size:12px;color:var(--ink-4);font-weight:400;margin-top:1px}
/* Eylemler EN ÜSTTE: tam genişlik "Ücretsiz tara", altında yan yana
   Giriş · Kayıt ol. .mmenu a kuralının display:block ve alt çizgisi
   burada geçersiz, düğme düğme gibi dursun. */
.mmenu .macts{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:2px 0 14px;
  margin-bottom:4px;border-bottom:1px solid var(--line)}
.mmenu .macts .btn{display:inline-flex;justify-content:center;height:44px;
  padding:0 14px;font-size:14.5px;border-bottom:1px solid var(--line-2)}
.mmenu .macts .btn-p{grid-column:1/-1;border-bottom-color:var(--sig);color:var(--sig-ink)}
.mmenu .macts .btn-p .ico{width:16px;height:16px}

/* ── DİL SEÇİCİ · açılır menü ─────────────────────────────────────
   Düğmede dünya ikonu + geçerli dilin KENDİ adı ("Türkçe"); açılınca
   bütün diller kendi adlarıyla, sağda iki harfli kodla listelenir.

   Önceki hâli iki dilde tek hedef düğmesi ("EN"), üçte yan yana sıra
   ("TR EN DE") idi. Dört dilden sonra sıra üst çubuğa sığmıyordu;
   menü dil sayısından bağımsız aynı yeri kaplar (bkz.
   partials/locale-menu.blade.php).

   BAYRAK KULLANILMIYOR. Bayrak ülkeyi anlatır, dili değil:
   İngilizce yalnızca İngiltere'nin, Almanca yalnızca Almanya'nın
   değil. Yerine dünya ikonu — dilin evrensel işareti.

   Açma/kapama JS ile (common.js · dil menüsü): wrapper'a data-acik
   gelince liste görünür. :hover ile açılmıyor — üst çubukta Çıkış
   düğmesine giderken farenin altından liste fırlamasın.

   Para birimi seçici bilinçli olarak YOK: protan.ai Türkiye'de
   TRY ile satıyor. Gerçekten gerekirse eklenir. */
.langmenu{position:relative;display:inline-flex;flex:0 0 auto}
.langbtn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 9px 0 11px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:600;
  white-space:nowrap;cursor:pointer;transition:.14s;line-height:1}
.langbtn:hover,.langmenu[data-acik] .langbtn{color:var(--ink);background:var(--surface-2);border-color:var(--line-2)}
.langbtn:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
/* Menü çubuğunda düğmeler 34px; seçici de aynı hizada durmalı. */
.mnav .langbtn{height:34px;padding:0 10px 0 12px}
.langbtn .gl2{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.7;transition:.14s}
.langbtn:hover .gl2,.langmenu[data-acik] .gl2{opacity:1;stroke:var(--sig)}
.langbtn .langcar{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:.18s}
.langmenu[data-acik] .langcar{transform:rotate(180deg);opacity:1}

/* LİSTE · SEÇİCİLİK BİLEREK YÜKSEK (.langmenu .langlist).
   Uygulama kabuğunda liste bir <form> ve orada ".pnav-r form{display:flex}"
   kuralı var; tek sınıflı ".langlist{display:none}" ona yenilip menüyü
   sayfa açılır açılmaz açık bırakıyordu (ödeme sayfasında görüldü).

   Liste uzayabilir (10+ dil): kaydırma çubuğu inceltildi, kaydırma
   menüde kapatıldı (overscroll-behavior) — menünün sonuna gelince
   arkadaki sayfa kaymasın.

   GENİŞLİK İÇERİKTEN GELİR. Önce min-width:248px idi; en uzun ad
   ("Français") ~70px tuttuğu için ad ile kod rozeti arasında koca bir
   boşluk açılıyordu. Şimdi taban 184px (düğmeden biraz geniş), daha
   uzun bir dil adı gelirse liste kendiliğinden genişler. Ad ile rozet
   arası en az 24px (.langname padding-right). */
.langmenu .langlist{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:120;
  min-width:184px;max-height:min(62vh,460px);overflow-y:auto;overscroll-behavior:contain;margin:0;
  background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:var(--sh-lg),var(--sh-ring);padding:7px;
  flex-direction:column;align-items:stretch;gap:2px;font-size:14px;text-align:left;
  transform-origin:top right;animation:langin .16s cubic-bezier(.2,.9,.3,1);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.langmenu .langlist::-webkit-scrollbar{width:10px}
.langmenu .langlist::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
.langmenu[data-acik] .langlist{display:flex}
@keyframes langin{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.langmenu .langlist{animation:none}}
/* Başlık · listenin ne olduğu ("Dil / Language"). Ayraç çizgisi YOK:
   yedi sekiz satırlık bir menüde her çizgi listeyi ağırlaştırıyor,
   boşluk aynı işi sessizce görüyor. */
.langlist .langhd{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);padding:7px 12px 8px;margin:0}
.langmenu .langopt{display:flex;align-items:center;gap:10px;min-height:38px;
  padding:8px 10px 8px 34px;position:relative;
  border-radius:10px;border:0;background:none;width:100%;text-align:left;
  font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;text-decoration:none;
  transition:background .12s,color .12s;white-space:nowrap;line-height:1.2}
.langmenu .langopt:hover,.langmenu .langopt:focus-visible{background:var(--surface-2);color:var(--ink);outline:none}
.langmenu .langopt:focus-visible{box-shadow:inset 0 0 0 2px var(--sig)}
.langmenu .langopt.on{color:var(--ink);font-weight:600;cursor:default;background:var(--sig-soft)}
.langopt .langname{flex:1 1 auto;letter-spacing:-.01em;padding-right:14px}
/* Kod rozeti · çerçeve yerine zemin. Satırın kendi zemini açılınca
   (hover, geçerli dil) rozet ters yöne geçer ki kaybolmasın. */
.langopt .langcode{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--ink-4);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--surface-2);border-radius:6px;padding:3px 6px;line-height:1;transition:.12s}
.langmenu .langopt:hover .langcode,.langmenu .langopt:focus-visible .langcode{color:var(--ink-3);background:var(--surface)}
.langopt.on .langcode{color:var(--sig);background:var(--surface)}
.langopt .langchk{position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;
  stroke:var(--sig);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* Kahraman alan ORTALI. Aşağıdaki bölümler sola dayalı kalıyor:
   ilk ekran izlenim, gerisi okuma. İkisi aynı hizada olmak zorunda değil. */
/* Yükseklik = görünür alan eksi yapışkan başlıklar (taslak şeridi 46px
   + menü 74px) eksi --peek. İçerik dikeyde ortalanıyor, boşluklar ekran
   yüksekliğiyle birlikte esniyor. */
/* KAHRAMAN ARTIK TAM EKRAN DEGIL. Once yukseklik = gorunur alan eksi
   yapiskan basliklardi; bu, altindaki urun ekranini katlamanin tamamen
   altinda birakiyordu. Prototipteki kural geri geldi (site-yon-onizleme):
   ekranin ust seridi ve KPI satirinin basi katlamanin USTUNDE kalir,
   cunku "ne satin aliyorum" sorusunun cevabi o goruntu. --peek o pay. */
.hero{--shell-h:0px;--nav-h:74px;--peek:200px;
  min-height:calc(100dvh - var(--shell-h) - var(--nav-h) - var(--peek));
  padding:clamp(24px,3.5vh,64px) 0 clamp(26px,2.6vh,40px);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;background:var(--glow-2)}
/* iki katman: yumuşak ışık + ince ölçüm ızgarası. Izgara "alet"
   hissini taşıyor, kenarlara doğru maskeyle eriyor. */
.hero::before{content:"";position:absolute;top:-340px;left:50%;
  transform:translateX(-50%);width:min(1180px,140vw);height:840px;
  background:var(--glow);filter:blur(14px);
  pointer-events:none;animation:breathe 9s ease-in-out infinite}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 34%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 34%,#000,transparent 72%)}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none;opacity:.92}}
.hero .wrap{position:relative;z-index:1;text-align:center}
.h1{font-size:60px;line-height:1.03;font-weight:700;letter-spacing:-.04em;
  max-width:17ch;margin:22px auto 0}
.h1 em{font-style:normal;color:var(--sig)}
.hero .lede{margin:24px auto 0;font-size:19.5px;max-width:62ch;
  line-height:1.58;color:var(--ink-2)}
.lede{font-size:17px;color:var(--ink-2);max-width:56ch;margin-top:20px;line-height:1.62}

/* ── ARAMA ÇUBUĞU ────────────────────────────────────────────────
   Alan ve düğme tek kapsül içinde. Ayrı iki kutu yerine tek nesne:
   "buraya adresini yaz" tek bir eylem gibi okunuyor. */
.scanbar{display:flex;align-items:center;gap:8px;
  margin:clamp(22px,3.4vh,34px) auto 0;max-width:580px;
  padding:8px 8px 8px 20px;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:100px;
  box-shadow:var(--sh-bar),var(--inset-hi);
  transition:border-color .18s,box-shadow .18s}
.scanbar:focus-within{border-color:var(--sig);
  box-shadow:0 0 0 4px var(--sig-ring),var(--sh-bar-focus)}
.scanbar>.gl{stroke:var(--ink-4);flex:0 0 auto;transition:stroke .18s}
.scanbar:focus-within>.gl{stroke:var(--sig)}
/* Kutu kapsülün kendisi, alan çıplak: temel form kuralının verdiği
   yükseklik, köşe ve odak halkası burada geri alınıyor — kapsülün
   içinde ikinci bir kutu görünmesin. Halkayı .scanbar:focus-within
   zaten çiziyor. */
.scanbar input{flex:1;background:none;border:0;outline:0;font-size:16.5px;
  font-weight:500;min-width:0;letter-spacing:-.01em;
  height:auto;padding:0;border-radius:0;box-shadow:none}
.scanbar input:focus{box-shadow:none}
.scanbar input::placeholder{color:var(--ink-4);font-weight:400}
.btn-scan{height:50px;padding:0 26px;border-radius:100px;background:var(--sig);
  color:var(--sig-ink);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  box-shadow:0 4px 14px var(--sig-ring);transition:.16s}
.btn-scan:hover{background:var(--sig-hover);box-shadow:0 6px 20px var(--sig-ring)}
.btn-scan:active{transform:scale(.985)}
.btn-scan svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* güven satırı, tek cümle yerine üç kısa vaat */
.trust{display:flex;align-items:center;justify-content:center;gap:22px;
  flex-wrap:wrap;margin-top:20px;font-size:13.5px;color:var(--ink-3)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:15px;height:15px;stroke:var(--sig);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ölçek çentikleri, "alet" motifi, sessiz ayraç */
.ticks{display:flex;align-items:flex-end;justify-content:center;gap:5px;
  height:16px;margin-top:clamp(18px,3vh,34px);opacity:.4}
.ticks i{width:1px;background:var(--ink-4);height:6px;display:block}
.ticks i:nth-child(5n+1){height:14px;background:var(--sig);opacity:.9}

/* ── MOTOR MARKALARI ─────────────────────────────────────────────
   OpenAI ve xAI tek renk → currentColor (koyu zeminde beyaz,
   yazdırmada siyah). Claude, Perplexity ve DeepSeek kendi marka
   rengini korur, Gemini gradyanlı.

   DeepSeek kuralı DURUYOR ama paketlerde satılmıyor: entegrasyon
   silinmedi, ileride Enterprise / Additional Engines kapsamında
   kullanılabilir (bkz. config/protan.php · package_engines). */
.emk{width:19px;height:19px;flex:0 0 auto;display:block}
.emk-sm{width:15px;height:15px}
.emk-lg{width:26px;height:26px}
.e-openai,.e-grok{color:var(--ink)}
.e-claude{color:#D97757}
.e-perplexity{color:#20808D}
.e-deepseek{color:#4D6BFE}

/* Çerçevesiz logo duvarı. Rozet/kutu yok, markalar kendi
   biçimleriyle duruyor, aralarındaki boşluk ayırıcı görevi
   görüyor. Sönük dururlar, üzerine gelince canlanır. */
.engines{margin-top:12px;padding-top:clamp(14px,2vh,24px)}
.englist{display:flex;align-items:center;justify-content:center;
  gap:14px 40px;flex-wrap:wrap;margin-top:clamp(12px,1.8vh,18px)}
.eng{display:inline-flex;align-items:center;gap:11px;font-size:15.5px;
  font-weight:600;letter-spacing:-.015em;color:var(--ink-3);opacity:.68;
  transition:opacity .18s,color .18s}
.eng:hover{opacity:1;color:var(--ink)}
.eng .emk{width:27px;height:27px}
/* İkinci kopya yalnızca mobil şerit için (bkz. MOBİL · logo şeridi). */
.englist .engtrack{display:contents}
.englist .engtrack[aria-hidden]{display:none}

.sec{padding:78px 0;border-top:1px solid var(--line)}
/* Punto viewport'a göre daralıyor: en uzun başlık ("Bir sayı, nasıl
   ölçüldüğü yazılı değilse sayı değildir.", 55 karakter) 941px'e
   kadar tek satırda kalsın diye. Alt sınır 30px, üst sınır 34px.
   text-wrap:balance ise mecburen sardığında satırları eşitler. */
.h2{font-size:clamp(30px,3.05vw,34px);line-height:1.14;font-weight:700;
  letter-spacing:-.03em;max-width:24ch;margin-top:14px;text-wrap:balance}
.sec .lede{font-size:16px;margin-top:16px}

/* Bölüm GİRİŞLERİ ortalı: üst etiket, başlık, açıklama.
   İçerik blokları sola dayalı kalıyor, ortalanmış gövde metninde
   her satır farklı yerden başlar, göz satır başını her seferinde
   yeniden arar. Başlık üç satır, gövde otuz satırdır. */
.sec>.wrap{text-align:center}
.sec>.wrap>.eyebrow{display:block}
/* Bölüm başlıklarında genişlik sınırı yok: masaüstünde tek satır. */
.sec>.wrap>.h2{max-width:none}
.sec>.wrap>.h2,.sec>.wrap>.lede,.sec>.wrap>p{margin-left:auto;margin-right:auto}
/* Ortalanmış bölüm girişi genel .lede'nin 56ch'ine sıkışmıyor: geniş
   başlığın altında dar bir sütun kalınca paragraf sayfaya göre cılız
   duruyor, satır sayısı da gereksiz artıyor. 72ch ortalı metinde hâlâ
   rahat okunuyor ve wrap'in (1120px) içinde kenarlara değmiyor. */
.sec>.wrap>.lede,.sec>.wrap>p.lede{max-width:72ch}
/* Çapa çipleri flex kutu: text-align:center onlara işlemez, ortalama
   ekseni ayrıca söylenmeli. Yalnızca doğrudan bölüm çocuğu olanlar —
   kart içindeki .fmeta'lar sola yaslı kalır. */
.sec>.wrap>.fmeta{justify-content:center}
.sec .card,.sec .pil,.sec .step,.sec .pr,.sec .answer,.sec .faq,
.sec .subline,.sec .two,.sec .bench,.sec .emx{text-align:left}

.answer{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;font-size:14.5px;line-height:1.72;
  color:var(--ink-2)}
.answer .who{display:flex;align-items:center;gap:8px;margin-bottom:13px;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.answer mark{background:var(--sig-soft);color:var(--sig);padding:1px 5px;
  border-radius:4px;font-weight:600}
.answer .rv{background:var(--rival-soft);color:var(--rival);padding:1px 5px;
  border-radius:4px;font-weight:600}
.answer.dim{opacity:.66}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.pil{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px}
.pil h4{font-size:14.5px;font-weight:650;margin:12px 0 7px}
.pil p{font-size:13px;color:var(--ink-3);line-height:1.58}
.pil .w{font-size:11px;color:var(--ink-4);margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line)}

/* ═══ SKOR HALKASI ════════════════════════════════════════════════
   Dört ayrı kart, dört ayrı sayı gibi okunuyordu; oysa iddia
   "TEK sayı, dört ölçüm". Halka bunu tek nesnede gösteriyor:
   yay uzunluğu ağırlık, dilim sayısı bileşen sayısı.

   RENK BİR BİLGİ TAŞIYOR, süs değil. Yeşil iki dilim yapay zekâlara
   soru sorularak ölçülüyor (Görünürlük, Doğruluk); mor iki dilim
   hiç soru sormadan, siteye ve kamuya açık kayıtlara bakarak
   (Yapı, Otorite). Bu ayrım tesadüfi değil, ücretsiz taramanın
   sınırı tam olarak orada: ziyaretçi hangi kısmı bedava
   göreceğini halkaya bakınca anlıyor, SSS'yi okumadan.

   Her çift içinde ikinci bileşen aynı rengin soluğu: iki ayrı
   renk yerine iki renk ailesi, dört ton. Marka disiplini
   bozulmadan dört dilim ayırt edilebiliyor.
   ═══════════════════════════════════════════════════════════════ */
.scorewrap{display:grid;grid-template-columns:294px 1fr;gap:20px 44px;
  align-items:center;margin-top:40px;text-align:left}
.ringbox{display:flex;flex-direction:column;align-items:center;gap:16px}
.ring{width:230px;height:230px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg);overflow:visible}
.ring{position:relative}
.ring .arc{fill:none;stroke-width:19;stroke-linecap:butt;
  stroke-dasharray:0 465;
  transition:stroke-dasharray .95s cubic-bezier(.2,.7,.3,1),
             opacity .18s,stroke-width .18s}
/* Üzerine gelinen dilim kalınlaşıp öne çıkıyor, diğerleri soluyor.
   Vurgu eklemek yerine dikkat çekmeyeni geri çekmek daha sessiz. */
.scorewrap.pick .arc{opacity:.24}
.scorewrap.pick .arc.on{opacity:1;stroke-width:23}
.ring .hub{position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;line-height:1;pointer-events:none}
.ring .hub b{font-size:40px;font-weight:700;letter-spacing:-.04em;display:block;
  font-variant-numeric:tabular-nums;transition:color .18s}
.ring .hub span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-4);margin-top:8px}
.rlgd{display:grid;gap:7px;font-size:12px;color:var(--ink-3);
  width:fit-content;margin-inline:auto}
.rlgd span{display:flex;align-items:center;gap:8px}
.rlgd i{width:22px;height:5px;border-radius:100px;flex:0 0 auto}
.rlgd i.a{background:var(--p0)} .rlgd i.b{background:var(--p2)}

.plrs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;min-width:0}
.plr{background:var(--surface);padding:14px 17px;display:grid;
  grid-template-columns:11px 1fr auto;gap:3px 11px;align-items:center;
  border-left:3px solid transparent;transition:background .16s,border-color .16s;
  text-align:left;width:100%}
.plr:hover,.plr:focus-visible{background:var(--surface-2);border-left-color:var(--pc)}
.plr .sw{width:11px;height:11px;border-radius:3px;background:var(--pc)}
.plr .nm{font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.plr .pc{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink-3)}
.plr p{grid-column:2/-1;font-size:13px;color:var(--ink-3);line-height:1.55;margin-top:1px}
.plr .mt{grid-column:2/-1;font-size:11px;color:var(--ink-4);margin-top:7px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
.scorenote{margin-top:16px;font-size:12.5px;color:var(--ink-4);line-height:1.6;
  text-align:left}
.scorenote b{color:var(--ink-3);font-weight:600}

/* ═══ KANIT BANDI ═════════════════════════════════════════════════
   Rakipte bu bölümün yerinde "%92 artış" duruyor. Aynı görsel
   ağırlığı, doğrulanabilir sayılarla kurmak mümkün: buradaki altı
   hücrenin hiçbiri sonuç vaat etmiyor, hepsi YÖNTEMİ tarif ediyor.
   Sonuç vaadi ispat gerektirir (TKHK m.61), yöntem beyanı
   gerektirmez ve zaten daha ikna edici. */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:38px}
.pf{background:var(--surface);padding:19px 19px 18px;transition:background .18s;
  text-align:left}
.pf:hover{background:var(--surface-2)}
.pf .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-4)}
.pf b{display:block;font-size:25px;font-weight:700;letter-spacing:-.03em;
  line-height:1.08;margin:11px 0 8px}
.pf.sig b{color:var(--sig)}
.pf .s{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.56}
.pfnote{margin-top:20px;padding:16px 20px;border:1px dashed var(--line-2);
  border-radius:var(--r-lg);font-size:13.5px;color:var(--ink-2);line-height:1.66;
  max-width:none;text-align:left}
.pfnote b{color:var(--ink);font-weight:650}
.h2 em{font-style:normal;color:var(--sig)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.step{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px}
.step .n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--sig);font-weight:600}
.step h4{font-size:16px;font-weight:650;margin:11px 0 8px;letter-spacing:-.015em}
.step p{font-size:13.5px;color:var(--ink-3);line-height:1.6}

/* ═══ AKIŞ, "Nasıl çalışır" ══════════════════════════════════════
   Üç adım, her birinin YANINDA o adımın çıktısı duruyor.
   Metin iddiayı söyler, panel iddianın kanıtını gösterir; ikisi
   aynı satırda olunca cümle doğrulanabilir hâle geliyor.

   Satırlar dönüşümlü: 01 metin solda, 02 panel solda, 03 metin
   solda. Göz her satırda aynı yerden başlamayınca sayfa "liste"
   değil "anlatı" gibi okunuyor, kaydırma da yavaşlıyor, ki bu
   bölümde istenen şey tam olarak bu.

   Paneller GERÇEK ÜRÜN parçaları: matris tarama ekranındaki
   ızgaranın aynısı, yol haritası panel tablosunun aynısı, grafik
   ise raporun 30. gün sayfası. Pazarlama için ayrı görsel
   üretilmiyor, üründen kesit alınıyor.
   ═══════════════════════════════════════════════════════════════ */
.flow{display:grid;margin-top:46px;text-align:left}
.frow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px 46px;align-items:center;padding:38px 0;
  border-top:1px dashed var(--line-2)}
.frow:first-child{border-top:0;padding-top:6px}
/* çift satırda panel sola geçiyor */
.frow:nth-child(even)>.ftxt{order:2}
.frow:nth-child(even)>.fvis{order:1}

.fstep{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.fstep .n{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;
  font-weight:700;color:var(--sig);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--sig-line);
  background:var(--sig-soft);flex:0 0 auto}
.fstep .l{font-size:11px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-4)}
.ftxt h3{font-size:25px;line-height:1.16;font-weight:700;letter-spacing:-.03em;
  max-width:19ch}
.ftxt p{font-size:14.5px;color:var(--ink-3);line-height:1.68;margin-top:13px;
  max-width:44ch}
.ftxt p b{color:var(--ink-2);font-weight:600}
.fmeta{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.fmeta .chip{height:25px}

/* ═══ HERO ALTI · ÜRÜN EKRANI ═══════════════════════════════════════
   Kahraman bölümünün altında, sayfanın ikinci nesnesi olarak duran
   panel görüntüsü.

   NEDEN VAR: bu sayfa uzun süre ürünü HİÇ göstermeden anlatıyordu.
   Ziyaretçi "ölçüyoruz, kıyaslıyoruz, yol haritası veriyoruz"
   cümlesini okuyor ama elde ne olacağını ancak fiyat sayfasına kadar
   inerse tahmin edebiliyordu. Rakiplerin tamamı (Topify, Peec,
   Profound) kahramanın hemen altına ürün ekranını koyuyor ve sebebi
   estetik değil: "ne satın alıyorum" sorusunun en ucuz cevabı ekranın
   kendisi.

   EKRAN GİBİ DURMASI İÇİN ÜÇ AYRINTI:
   1. Alt kenarı YOK ve içerik aşağı doğru soluyor (mask-image).
      Dört kenarı kapalı bir kutu "resim" gibi okunuyor; alttan
      kesilen bir yüzey "devamı var" diyor ve bakan kişi gerçek bir
      ekrana baktığını sanıyor.
   2. Kenar çubuğu GRUPLU. Düz bir liste menü değil, bağlantı
      yığınıdır; başlıklar (Genel / Rakipler / Yol haritası / Hesap)
      ekranın bir ürün olduğunu tek bakışta söylüyor.
   3. Kadranlı rozet kutunun DIŞINA taşıyor. Tek sayının kutudan
      taşması, o sayının ekranın konusu olduğunu söylüyor; içeride
      kalsaydı dört KPI'dan biri gibi okunurdu.

   TEMSİLÎ, GİZLİ DEĞİL. Sayıların uydurma olduğu altındaki notta
   yazıyor. Marka ve rakip adları #degisen bölümüyle AYNI çeviri
   anahtarlarından geliyor; 12 → 71 rakamı da o bölümle aynı. */
.shwsec{padding:0 0 clamp(44px,7vh,84px);position:relative;z-index:2}
.shw{max-width:1080px;margin:0 auto;padding:0 24px;position:relative}
.shwin{border:1px solid var(--line-2);border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--surface);box-shadow:var(--sh-lg);overflow:hidden;text-align:left;
  /* Solma %88'den başlıyor: %80'de "Sonraki işler" kartlarının
     açıklama satırları okunmaz hâle geliyordu. Amaç son birkaç
     pikselin kesilmesi, içeriğin yutulması değil. */
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
.shwtop{display:flex;align-items:center;gap:11px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
  font-size:11.5px;color:var(--ink-4)}
.shwtop .dots{display:flex;gap:5px;flex:0 0 auto}
.shwtop .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.shwtop b{color:var(--ink);font-weight:600}
/* Çip kırıntının HEMEN YANINDA, sağa yaslı DEĞİL: sağ üst köşe
   kadranın yeri ve ikisi üst üste biniyordu. */
.shwtop .chip{margin-left:4px}
.shwbody{display:grid;grid-template-columns:192px 1fr}

/* Kenar çubuğu · gruplu. */
.shwside{border-right:1px solid var(--line);background:var(--surface-2);
  padding:12px 9px;display:grid;gap:1px;align-content:start}
.shwside .gh{font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);padding:11px 9px 4px}
.shwside .gh:first-child{padding-top:2px}
.shwside span.it{display:flex;align-items:center;gap:8px;padding:6px 9px;
  border-radius:7px;font-size:12.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shwside span.it svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;
  fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.shwside span.on{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:var(--sh-sm)}
.shwside span.on svg{stroke:var(--sig);opacity:1}

.shwmain{padding:15px;display:grid;gap:11px;min-width:0}
.shwkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.shwk{border:1px solid var(--line);border-radius:10px;padding:11px 13px;min-width:0}
.shwk.hi{border-color:var(--sig-line);background:var(--sig-soft)}
.shwk .k{font-size:10.5px;color:var(--ink-3);font-weight:500}
.shwk .v{font-size:21px;font-weight:700;letter-spacing:-.025em;margin-top:2px;
  font-variant-numeric:tabular-nums;line-height:1.2;
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.shwk .v small{font-size:11px;font-weight:600;letter-spacing:0}
.shwk .up{color:var(--ok)}
.shwk .dn{color:var(--err)}
.shwk .q{color:var(--ink-4);font-weight:500}

.shwcols{display:grid;grid-template-columns:1.34fr 1fr;gap:11px}
.shwbox{border:1px solid var(--line);border-radius:10px;padding:12px 13px;min-width:0}
.shwbox .bh{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:10px;font-size:12.5px;font-weight:600}
.shwbox .bh em{font-style:normal;font-weight:400;color:var(--ink-4);font-size:10.5px}
.shwbox svg.chart{width:100%;height:auto;display:block}

/* Rakip karşılaştırması · ekranın "kontrol grubu" tablosu.
   Kendi satırınız imza renginde ve solunda bir çubuk: dört satırlık
   bir tabloda kendinizi aramak zorunda kalmıyorsunuz. */
/* SABİT YERLEŞİM. Serbest bırakıldığında sütunlar içeriğin
   min-content genişliğine şişiyor ve tablo kutudan taşıyordu:
   "Marmara Çelik İşleme" gibi uzun bir ad, sağdaki iki sütunu
   panelin dışına itiyordu. Sabit yerleşimde artan yeri firma
   sütunu alıyor, sığmayan ad üç noktayla kesiliyor. */
/* min-width:0 ŞART: panel bölümündeki genel `table` kuralı bütün
   tablolara min-width:660px veriyor (orada doğru, veri tabloları
   dar ekranda kaydırılsın diye). Buradaki tablo bir ekran
   görüntüsünün içinde ve 330 piksellik kutuya sığmak zorunda;
   o kural devredeyken sağdaki üç sütun panelin dışına taşıyordu. */
.shwtab{width:100%;min-width:0;border-collapse:collapse;font-size:11px;table-layout:fixed}
.shwtab th:nth-child(1),.shwtab td:nth-child(1){width:20px}
.shwtab th:nth-child(3),.shwtab td:nth-child(3){width:78px}
.shwtab th:nth-child(4),.shwtab td:nth-child(4){width:30px}
.shwtab th:nth-child(5),.shwtab td:nth-child(5){width:40px}
.shwtab td:nth-child(2){overflow:hidden;text-overflow:ellipsis}
/* text-transform:none · panel bölümündeki `thead th` kuralı bütün
   tablo başlıklarını BÜYÜK HARFE çeviriyor. Burada "GÖRÜNÜRLÜK"
   sütununa sığmıyor ve üç noktayla kesiliyordu; ekran görüntüsünde
   kesik bir başlık, ürünün kendisi bozukmuş gibi duruyor. */
.shwtab th{text-align:left;font-weight:500;color:var(--ink-4);font-size:9.5px;
  text-transform:none;letter-spacing:0;
  padding:0 5px 7px;border-bottom:1px solid var(--line);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.shwtab td{padding:7px 5px;border-bottom:1px solid var(--line);white-space:nowrap}
.shwtab tbody tr:last-child td{border-bottom:0}
.shwtab .me td{background:var(--sig-soft)}
.shwtab .me td:first-child{box-shadow:inset 2px 0 0 var(--sig)}
.shwtab .me b{font-weight:600}
.shwtab .num{font-variant-numeric:tabular-nums}
.shwtab small{font-weight:600;font-size:9.5px}
.shwtab .up{color:var(--ok)}
.shwtab .dn{color:var(--err)}
.shwbars{display:inline-flex;gap:2px;vertical-align:middle}
.shwbars i{width:3px;height:10px;border-radius:1px;background:var(--line-2);display:block}
.shwbars i.f{background:var(--ok)}

/* Motor satırları · özellik sekmesinde de kullanılıyor. */
.shwe{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px;
  border-top:1px solid var(--line)}
.shwe:first-of-type{border-top:0;padding-top:0}
.shwe .en{font-weight:600;min-width:76px}
.shwe .bar{flex:1;height:5px;border-radius:100px;background:var(--surface-3);
  overflow:hidden;min-width:36px}
.shwe .bar i{display:block;height:100%;border-radius:100px;background:var(--sig)}
.shwe .bar i.w{background:var(--warn)}
.shwe .bar i.e{background:var(--err)}
.shwe .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  color:var(--ink-4);min-width:40px;text-align:right}

/* Sonraki işler · üç kart, her birinde bileşen + puan çipi. */
.shwacts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.shwact{border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  display:grid;gap:5px;align-content:start}
.shwact b{font-size:12px;font-weight:600}
.shwact .m{font-size:11px;color:var(--ink-4);line-height:1.5}
.shwact .chip{justify-self:start;height:19px;font-size:10px;padding:0 7px}

/* Yüzen kadran · kutunun sağ üstünden taşıyor. */
/* Kadran kutunun SAĞ ÜST KÖŞESİNDEN taşıyor. Önce KPI sırasının
   üstüne konmuştu ve dördüncü kutunun sayısını ("12/14") tamamen
   örtüyordu: taşma etkisi için veriyi gizlemek kötü bir takas. */
.shwfloat{position:absolute;right:16px;top:-20px;z-index:3;
  display:flex;align-items:center;gap:11px;
  padding:11px 15px 11px 12px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--sh-lg);font-size:12.5px;font-weight:600;
  animation:shwfl 5.5s ease-in-out infinite}
.shwfloat .ring{width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--sig) 0 71%,var(--surface-3) 71% 100%);
  display:grid;place-items:center}
.shwfloat .ring b{width:32px;height:32px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.shwfloat small{display:block;font-weight:500;color:var(--ink-4);
  font-size:11px;margin-top:1px}
@keyframes shwfl{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.shwfloat{animation:none}}

.shwnote{text-align:center;font-size:12px;color:var(--ink-4);margin-top:16px;
  margin-inline:auto;line-height:1.6;
  /* Tek satirlik dipnot: 60ch sinirini kaldirdik, metin kisaltildigi
     icin genis ekranda zaten tek satira siginiyor. */
  max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){.shwnote{white-space:normal;max-width:44ch}}

@media (max-width:1080px){.shwfloat{right:8px}}
@media (max-width:980px){
  /* Kenar çubuğu, yüzen rozet ve alttaki solma dar ekranda düşüyor:
     küçültülmüş bir masaüstü ekranı telefonda okunmaz, solma da
     son kartı tamamen yutar. */
  .shwbody{grid-template-columns:1fr}
  .shwside,.shwfloat{display:none}
  .shwin{-webkit-mask-image:none;mask-image:none;
    border-bottom:1px solid var(--line-2);border-radius:var(--r-xl)}
  .shwkpis{grid-template-columns:repeat(2,1fr)}
  .shwcols,.shwacts{grid-template-columns:1fr}
  /* Tablo dar ekranda kendi içinde kayar; sayfa gövdesi kaymaz. */
  .shwtabwrap{overflow-x:auto}
}
@media (max-width:620px){
  .shw{padding:0 16px}
  .shwmain{padding:12px;gap:9px}
}

/* ── panel kabuğu, üç görselin ortak çerçevesi ── */
.panel{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden;min-width:0}
.panel .phd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-size:11.5px;color:var(--ink-4)}
.panel .phd .chip{height:21px;font-size:11px}
.panel .pbd{padding:16px 15px}
.panel .pft{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  padding:10px 15px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:11.5px;color:var(--ink-4);line-height:1.5}
.panel .pft .lg{display:inline-flex;align-items:center;gap:6px}
.panel .pft .lg i{width:9px;height:9px;border-radius:2px;background:var(--surface-3);
  flex:0 0 auto;display:block}
.panel .pft .lg i.on{background:var(--sig)}

/* ── 01 · ölçüm matrisi ──────────────────────────────────────────
   150 hücre = 5 yapay zekâ × 10 istem × 3 tekrar. Sayının kendisi
   iddia, ızgara ise o iddianın ölçeği. Üçlü gruplar arasındaki
   boşluk "tekrar" kavramını hiçbir açıklama yazmadan anlatıyor. */
.mtx{display:grid;gap:9px}
.mrow{display:flex;align-items:center;gap:12px}
.mrow .mn{width:92px;flex:0 0 auto;display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--ink-2)}
.mrow .mn .emk{width:15px;height:15px}
.cells{flex:1;display:grid;grid-template-columns:repeat(10,1fr);gap:5px;min-width:0}
.cells .g{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.cells .c{height:17px;border-radius:2px;background:var(--surface-3);
  transform:scaleY(.25);opacity:0;transform-origin:center;
  transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .34s,background .34s}
.cells .c.hit{background:var(--sig)}
.in .cells .c{transform:none;opacity:1}
.mrow .ms{width:34px;flex:0 0 auto;text-align:right;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mrow .ms.good{color:var(--sig)}
.qcount{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11.5px;
  color:var(--ink-3)}
.qcount b{color:var(--sig);font-weight:700}

/* ── 02 · yol haritası ───────────────────────────────────────────
   Sıra rozetle değil, etki çubuğuyla savunuluyor. Kullanıcı
   "neden bu ilk sırada" diye sormadan cevabı görüyor. */
.rmap{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.rmap li{display:flex;align-items:center;gap:12px;padding:11px 13px;
  background:var(--surface);opacity:0;transform:translateX(-10px);
  transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.3,1)}
.in .rmap li{opacity:1;transform:none}
.rmap .rk{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--ink-4);flex:0 0 auto;padding-top:1px}
.rmap .rb{flex:1;min-width:0}
.rmap .rb b{display:block;font-size:13px;font-weight:600;color:var(--ink);
  line-height:1.35}
.rmap .rb span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:3px}
/* Etki çubuğu bir RAY içinde duruyor. Raysız çubuk havada asılı
   kalıyor ve "%kaç" sorusuna cevap vermiyor; ray gelince uzunluk
   bir orana dönüşüyor. Ray sabit 48px: maddeler arası kıyas ancak
   ölçek sabitse mümkün. */
.rmap .ri{flex:0 0 auto;display:flex;align-items:center;gap:9px}
.rmap .ri .trk2{width:48px;height:5px;border-radius:100px;
  background:var(--surface-3);overflow:hidden;flex:0 0 auto}
.rmap .ri i{height:100%;border-radius:100px;background:var(--sig);opacity:.6;
  width:0;transition:width .7s cubic-bezier(.2,.7,.3,1);display:block}
.in .rmap .ri i{width:var(--w)}
.rmap .ri b{font-size:12.5px;font-weight:700;color:var(--sig);width:28px;
  text-align:right;font-variant-numeric:tabular-nums}
.rsum{display:flex;align-items:baseline;gap:8px;margin-top:12px;font-size:12px;
  color:var(--ink-4)}
.rsum b{font-size:15px;font-weight:700;color:var(--sig);
  font-variant-numeric:tabular-nums}

/* ── 03 · 30. gün grafiği ────────────────────────────────────────
   Bölümün en önemli parçası. İki gri çizgi düz gidiyor, yeşil
   olan yükseliyor: nedensellik iddiası grafikte kanıtlanıyor,
   metinde savunulmuyor. Kontrol grubu olmadan bu grafik yalnızca
   bir pazarlama eğrisi olurdu. */
.chart{width:100%;height:auto;display:block}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--ink-4);font-size:10px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
.chart .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s cubic-bezier(.3,.6,.25,1)}
.in .chart .ln{stroke-dashoffset:0}
.chart .ln.you{stroke:var(--sig)}
.chart .ln.ctl{stroke:var(--ink-4);stroke-width:1.7;stroke-dasharray:4 4;
  stroke-dashoffset:0;opacity:.72}
.chart .dot{fill:var(--sig);opacity:0;transition:opacity .4s .9s}
.in .chart .dot{opacity:1}
.chart .lb{font-size:11px;font-weight:700;
  font-family:'Inter',sans-serif;opacity:0;transition:opacity .4s 1.1s}
.in .chart .lb{opacity:1}
.chart .lb.you{fill:var(--sig)}
.chart .lb.ctl{fill:var(--ink-4);font-weight:600}
/* Bandın rengi --sig-soft'tan bir tık koyu: arayüzdeki yumuşak
   yeşil zeminler geniş alanlarda çalışıyor, burada 20 piksellik
   ince bir şerit ve o opaklıkta görünmüyor. */
.chart .band{fill:var(--band-fill);opacity:0;transition:opacity .5s .3s}
.in .chart .band{opacity:1}
/* Grafik açıklaması yalnızca dar ekranda. Geniş ekranda etiketler
   çizginin ucunda duruyor, ki en iyisi odur: göz çizgiden etikete
   gitmiyor, ikisi aynı yerde. Dar ekranda o etiketler okunamayacak
   kadar küçüldüğü için aşağı, normal punto bir satıra iniyor. */
.clgd{display:none;flex-wrap:wrap;gap:8px 18px;margin-top:11px;
  font-size:12px;color:var(--ink-3)}
.clgd span{display:inline-flex;align-items:center;gap:7px}
.clgd i{width:16px;height:0;border-top:2px solid var(--ink-4);flex:0 0 auto}
.clgd i.you{border-top-color:var(--sig);border-top-width:2.5px}
.clgd i.ctl{border-top-style:dashed}
.clgd b{color:var(--ink-2);font-variant-numeric:tabular-nums}
.clgd .you b{color:var(--sig)}
.cnote{margin-top:13px;padding:11px 13px;border:1px solid var(--sig-line);
  background:var(--sig-soft);border-radius:var(--r-md);font-size:12.5px;
  line-height:1.58;color:var(--ink-2)}
.cnote b{color:var(--sig);font-weight:700}

/* ── belirme ─────────────────────────────────────────────────────
   Tek bir sınıf, üç panelin içindeki bütün animasyonları
   tetikliyor. Görünmeden oynayan animasyon, oynamamış animasyondur. */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  .cells .c,.rmap li,.chart .ln,.chart .dot,.chart .lb,.chart .band,.rmap .ri i,
  .ring .arc{opacity:1;transform:none;transition:none;stroke-dashoffset:0}
  .rmap .ri i{width:var(--w)}
  /* Dilim konumu dashoffset ile veriliyor; onu sıfırlamak halkayı
     bozar. Yalnız geçiş kapatılıyor, dizilim JS'ten geldiği gibi. */
  .ring .arc{stroke-dashoffset:revert}
  .scorewrap.pick .arc{opacity:1}
  .scorewrap.pick .arc.on{stroke-width:19}
}

/* ── FİYATLANDIRMA ───────────────────────────────────────────────
   Paketleri ayiran tek sey olculen yapay zeka sayisi. Tasarim da
   bunun uzerine kuruldu: ortak kalemler kartlarin USTUNDE tek
   satirda, kartlarin icinde yalnizca degisen kalemler ve bes
   markanin acik/sonuk dizilimi var. Boylece merdiven tek bakista
   okunuyor, ziyaretci uc listeyi satir satir kiyaslamiyor. */

.allinc{margin-top:34px;display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;
  padding:13px 18px;border:1px solid var(--line);border-radius:100px;
  background:var(--surface)}
.allinc .eyebrow{color:var(--ink-4);margin-right:2px}
.allinc ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px}
.allinc li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.allinc li svg{width:13px;height:13px;stroke:var(--sig);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ── FIYAT SEKMELERI ────────────────────────────────────────────
   Iki urun ailesi ayni sayfada duruyor ama ESIT SECENEK degil:
   rapor giris, izleme onun devami. Sekme cubugu bunu bozmasin
   diye varsayilan HER ZAMAN raporlama; izleme ancak secilerek
   ya da #izleme baglantisiyla aciliyor.

   Paneller `hidden` ozniteligiyle gizleniyor, sinifla degil:
   JS calismazsa ikisi de acik kalir ve sayfa sekme oncesi haliyle
   okunur. Bu yuzden asagida `display:none` degil, tarayicinin
   kendi `hidden` davranisi kullaniliyor; tek yaptigimiz onu
   ezebilecek bir kural olmadigindan emin olmak. */
/* Cubuk sayfa genisligine yayilmiyor: iki secenek arasindaki
   mesafe buyudukce "ayni sorunun iki cevabi" hissi kayboluyor,
   iki ayri menu gibi okunuyor. Ortada ve dar. */
.ptabs{display:flex;max-width:720px;margin:0 auto;
  border-bottom:1px solid var(--line)}
.ptabs button{flex:1 1 0;min-width:0;padding:13px 14px 14px;text-align:center;
  color:var(--ink-4);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .18s,border-color .18s}
.ptabs button:hover{color:var(--ink-2)}
.ptabs button .tt{display:block;font-size:16.5px;font-weight:700;
  letter-spacing:-.02em;line-height:1.25}
.ptabs button .ts{display:block;font-size:12.5px;margin-top:3px;line-height:1.3}
.ptabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--sig)}
.ptabs button[aria-selected=true] .ts{color:var(--ink-3)}
.ptabs button:focus-visible{outline:2px solid var(--sig-ring);outline-offset:-2px;
  border-radius:var(--r-sm) var(--r-sm) 0 0}
/* Cubuk kendi bolumunun dibinde duruyor; altindaki ilk bolum
   kendi ust cizgisini cizerse alt cizgi cift gorunur. */
.sec.sectabs{padding:44px 0 0}
/* Anasayfa: cubuk kendi bolumu degil, fiyat bolumunun icinde;
   lede ile kartlar arasina giriyor. */
.ptabs.inhome{margin-top:30px}
/* Dört sekmeli çubuk · "Raporun içinde ne var".
   720px'te dört başlık 180'er piksele sıkışıp iki satıra kırılıyordu;
   bu çubuk daha geniş ve başlıkları tek satırlık. */
.ptabs.four{max-width:920px}
.ptabs.four button .tt{font-size:15px}

/* ── ÖZELLİK SEKMESİ İÇERİĞİ ─────────────────────────────────────
   Solda cümle, sağda o cümlenin ekrandaki karşılığı. Görsel sağda
   çünkü iddia önce okunuyor, kanıt sonra bakılıyor; ters sırada
   ziyaretçi ekran görüntüsüne bakıp ne olduğunu tahmin etmeye
   çalışıyor. Dar ekranda metin üstte kalıyor. */
.fx{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:30px;align-items:center;padding:38px 0 6px;text-align:left}
.fx h3{font-size:clamp(21px,2.2vw,25px);letter-spacing:-.025em;line-height:1.2}
.fx p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin-top:12px}
.fx ul{list-style:none;margin-top:14px;display:grid;gap:7px}
.fx li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.fx li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;stroke:var(--sig);
  fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fx .shwbox{background:var(--surface);box-shadow:var(--sh-md);border-color:var(--line-2);padding:16px 18px}
/* Alıntı · panelde gerçek cevabın gösterildiği kutunun aynısı. */
.fxq p{font-size:14px;line-height:1.7;margin:0;color:var(--ink)}
.fxq mark{background:var(--sig-soft);color:var(--sig);padding:1px 5px;
  border-radius:4px;font-weight:600}
.fxq .rv{background:var(--rival-soft);color:var(--rival);padding:1px 5px;
  border-radius:4px;font-weight:600}
.fxq .qf{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-4)}
@media (max-width:860px){
  .fx{grid-template-columns:1fr;gap:22px;padding-top:28px}
}
.ptp>.sec:first-child{border-top:0;padding-top:52px}
.ptp[hidden]{display:none}
@media (max-width:640px){
  .ptabs button{padding:11px 8px 12px}
  .ptabs button .tt{font-size:14px}
  .ptabs button .ts{font-size:11px}
}

.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:16px;align-items:stretch}
.pr{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.pr:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--sh-md)}
.pr.hi{border-color:var(--sig-line);box-shadow:var(--sh-md),0 0 0 1px var(--sig-line);
  background:linear-gradient(180deg,var(--sig-soft),transparent 38%)}
.pr.hi:hover{box-shadow:var(--sh-lg),0 0 0 1px var(--sig-ring)}
/* Rozet kartin ust kenarina biniyor: kart yuksekliklerini
   esitlemek icin akista yer kaplamamasi gerekiyor. */
.prflag{position:absolute;top:-10px;left:24px;height:21px;padding:0 10px;
  display:inline-flex;align-items:center;border-radius:100px;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--sig);color:var(--sig-ink)}

.prhd h4{font-size:19px;font-weight:700;letter-spacing:-.02em}
.prhd p{font-size:12.5px;color:var(--ink-3);margin-top:3px}

.pr .amt{display:flex;align-items:baseline;gap:1px;margin:16px 0 0;
  font-size:38px;font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.pr .amt .cur{font-size:22px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.pr .amt small{font-size:12.5px;font-weight:500;color:var(--ink-4);
  letter-spacing:0;margin-left:6px}
/* ── ODEME DONEMI ANAHTARI · aylik / yillik ─────────────────────
   Yillik fiyat eskiden her kartin altinda gri bir satirdi. Iki
   tutar artik ayni yerde, ayni puntoda ve SIRAYLA gosteriliyor:
   secim durumu <html data-period> uzerinde (bkz. pricing.js), tek
   oznitelik hem kartlari hem karsilastirma tablosunu ceviriyor.

   Varsayilan AYLIK ve bu CSS ile kuruluyor; JS calismazsa kartlar
   bugunku hallerinde kalir, hicbir tutar kaybolmaz. */
.pertog{display:flex;width:max-content;max-width:100%;margin:26px auto 0;
  padding:4px;gap:4px;border:1px solid var(--line);border-radius:100px;
  background:var(--surface)}
.pertog button{display:inline-flex;align-items:center;gap:8px;height:36px;
  padding:0 18px;border-radius:100px;font-size:13.5px;font-weight:600;
  color:var(--ink-3);transition:background .18s,color .18s,box-shadow .18s}
.pertog button:hover{color:var(--ink)}
.pertog button[aria-pressed=true]{background:var(--sig);color:var(--sig-ink);
  box-shadow:var(--sh-sm)}
.pertog button:focus-visible{outline:2px solid var(--sig-ring);outline-offset:2px}
/* Indirim rozeti · secili degilken de okunur kalmali, cunku yillik
   sekmesine tiklanmasinin sebebi tam olarak bu rakam. */
.pertag{padding:2px 8px;border-radius:100px;font-size:11px;font-weight:700;
  letter-spacing:.02em;background:var(--sig-soft);color:var(--sig)}
.pertog button[aria-pressed=true] .pertag{background:rgba(255,255,255,.22);
  color:var(--sig-ink)}

/* Iki tutar da sayfada duruyor, biri gizli. Kural YALNIZCA
   sarmalayiciya yaziliyor: icerideki .amt kendi flex duzenini
   korusun diye (.pr .amt daha ozgul bir secici). */
.peri-y{display:none}
[data-period=annual] .peri-m{display:none}
[data-period=annual] .peri-y{display:block}
/* Fiyatin altindaki tek satirlik not · eskiden satir ici stildi.
   Iki donem blogunda da ayni oldugu icin sinifa alindi: kart
   yukseklikleri donem degisince oynamasin. */
.pr .amtn{font-size:12px;color:var(--ink-4);margin-top:6px}
/* Dar ekranda iki dugme + indirim rozeti 360px'e sigmali. */
@media (max-width:420px){
  .pertog button{padding:0 12px;font-size:12.5px;gap:6px}
  .pertag{font-size:10px;padding:2px 6px}
}

/* Bes marka her kartta. Dâhil olmayanlar sonuk ve renksiz;
   "neyi almiyorum" sorusu kart degistirmeden cevaplaniyor. */
/* .prmk hem ana sayfadaki fiyat kartinda hem tarama sonucundaki
   paket secicide kullaniliyor; bu yuzden .pr'ye baglanmadi. */
.prmk{display:flex;align-items:center;gap:9px}
.prmk .mk{display:flex;opacity:.2;filter:grayscale(1);transition:opacity .18s,filter .18s}
.prmk .mk.on{opacity:1;filter:none}
.prmk .mk .emk{width:21px;height:21px}
.prmk .mkn{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:13px;font-weight:600;color:var(--ink-2)}
.prmk .mkn i{font-style:normal;color:var(--ink-4);font-weight:400}
.pr .prmk{margin-top:18px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.pr .prlist{list-style:none;margin:16px 0 20px;display:grid;gap:11px;flex:1}
.pr .prlist li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;
  color:var(--ink-2);line-height:1.45}
.pr .prlist li svg{width:15px;height:15px;stroke:var(--sig);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px;flex:0 0 auto}
.pr .prlist li.off{color:var(--ink-4)} .pr .prlist li.off svg{stroke:var(--ink-4)}
.pr .prlist .t{margin-left:auto;padding-left:8px;font-size:11px;color:var(--ink-4);
  white-space:nowrap;font-family:'JetBrains Mono',ui-monospace,monospace}

/* Satin alma ucu kartin en altina sabitlenir: uc kartta da ayni
   hizada dursun diye ustteki liste flex:1 ile bosluğu yiyor. */
.pr .buybox{display:grid;gap:9px;margin-top:auto}
.pr .buybox .btn{width:100%;justify-content:center;height:42px}
.pr .buynote{font-size:11.5px;color:var(--ink-4);text-align:center}

@media (max-width:980px){
  .allinc{border-radius:var(--r-lg)}
  .prices{grid-template-columns:1fr;gap:12px}
  .pr{padding-top:24px}
  .prflag{top:-9px}
}
.subline{margin-top:20px;padding:16px 20px;border:1px dashed var(--line-2);
  border-radius:var(--r-lg);display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:18px 0;font-weight:600;font-size:15px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-4);font-weight:400;font-size:19px}
.faq details[open] summary::after{content:"−"}
/* Cevap satırı ölçü sınırı taşımıyor: soru başlığı zaten kutu
   genişliğinde, cevap 74ch'te kesilince açılan blok başlıktan dar
   kalıp sağda boşluk bırakıyordu. */
.faq p{padding:0 0 18px;color:var(--ink-3);font-size:14px;line-height:1.68}

/* ── KAPANIŞ BANDI ───────────────────────────────────────────────
   Sayfanın son nesnesi ve tek işi taramaya geri döndürmek.
   Mürekkep zemin: sayfadaki bütün bölümler açık yüzeyler üzerinde
   ilerliyor, burada zemin koyulaşıyor ve göz "bitti" diyor.
   Koyu temada kendiliğinden tersine dönüyor (--ink beyaza yakın). */
.closing{background:var(--ink);color:var(--bg);border-radius:var(--r-xl);
  padding:clamp(30px,4vw,46px);display:flex;align-items:center;
  justify-content:space-between;gap:22px;flex-wrap:wrap;text-align:left}
.closing h2{font-size:clamp(23px,2.6vw,30px);letter-spacing:-.03em;
  line-height:1.18;font-weight:700;max-width:20ch}
.closing p{opacity:.72;margin-top:8px;font-size:15px}
.closing .cact{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
/* İkincil düğme koyu zeminde: kenarlığı zeminin değil METNİN
   renginden alıyor, yoksa --line-2 koyu zeminde kayboluyor. */
.closing .btn-o{background:transparent;border-color:color-mix(in srgb,currentColor 32%,transparent);
  color:inherit}
.closing .btn-o:hover{border-color:currentColor;color:inherit;
  background:color-mix(in srgb,currentColor 8%,transparent)}
@media (max-width:620px){
  .closing{flex-direction:column;align-items:flex-start}
  .closing .cact{width:100%}
  .closing .cact .btn{flex:1 1 auto;justify-content:center}
}

/* ── ALT BİLGİ ───────────────────────────────────────────────────
   Dört sütun: marka + üç bağlantı kümesi. Marka sütunu geniş,
   çünkü asıl iş orada: ne yaptığımızı anlatan cümle.
   İletişim şeridi ve feragat paragrafları ortalı.
   Alt şerit ayrı bir katman; telif, künye ve durum orada. */
.foot{border-top:1px solid var(--line);padding:64px 0 0;font-size:13px;
  color:var(--ink-3);line-height:1.7;background:var(--surface)}
.foot .fgrid{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(120px,1fr));
  gap:44px 40px}
.foot .fbrand{max-width:34ch}
.foot .fbrand .logo{opacity:.92;margin-bottom:16px}
.foot .fbrand p{color:var(--ink-3);font-size:13.5px;line-height:1.68}
.foot .fcol .eyebrow{display:block;margin-bottom:13px;color:var(--ink-4);
  background:none;border:0;padding:0;font:inherit;font-size:11px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;text-align:left;cursor:default;width:100%}
.foot .fcol .eyebrow svg{display:none}
.foot .fcol ul{list-style:none;display:grid;gap:9px}
.foot .fcol a{color:var(--ink-3);font-size:13.5px;transition:color .14s}
.foot .fcol a:hover{color:var(--ink)}
/* İletişim şeridi ve feragat paragrafları ortalı: sütun ızgarası bittikten
   sonra footer tek kolona iner, sola dayalı kalırsa şerit sayfanın solunda
   asılı duruyordu. justify-content satırı ortalar, text-align ise satır
   kırıldığında sarkan metni. */
.foot .fcontact{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;
  justify-content:center;text-align:center;font-style:normal}
.foot .fcontact a,.foot .fcontact span{display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ink-3)}
.foot .fcontact a:hover{color:var(--ink)}
.foot .fcontact .ico{width:15px;height:15px;color:var(--ink-4);transition:color .14s}
.foot .fcontact a:hover .ico{color:var(--ink-3)}
/* Marka feragati: yasal olarak gerekli, görsel olarak sessiz.
   max-width yok: 92ch sınırı hem metni yarıda kesiyor hem de border'ı
   kutu kadar kısaltıyordu. Metin de çizgi de .wrap genişliğini kullanır. */
.foot .disc{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.66;color:var(--ink-4);text-align:center}
.foot .fbar{margin-top:26px;border-top:1px solid var(--line);padding:18px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  justify-content:space-between;font-size:12.5px;color:var(--ink-4)}
/* margin-top, .ftxt bloğunun .fmeta'sından sızıyordu; şeritte hizayı bozuyor. */
.foot .fbar .fmeta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;
  margin-top:0}
.foot .fbar .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-4);
  opacity:.55;flex:0 0 auto}
.foot .fbar a:hover{color:var(--ink-2)}
.foot .fstatus{display:inline-flex;align-items:center;gap:7px;font-weight:600;
  color:var(--ink-3)}
.foot .fstatus i{width:6px;height:6px;border-radius:50%;background:var(--sig);
  box-shadow:0 0 0 3px var(--sig-soft);flex:0 0 auto}
@media(max-width:940px){
  /* Üç bağlantı sütunu yan yana kalsın; 1fr 1fr'de sonuncusu tek başına düşüyordu. */
  .foot .fgrid{grid-template-columns:repeat(3,1fr);gap:34px}
  .foot .fbrand{grid-column:1/-1;max-width:52ch}
}
@media(max-width:620px){
  .foot{padding-top:46px}
  .foot .fgrid{grid-template-columns:1fr;gap:28px}
  .foot .fbar{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ── SKOR GÖSTERGELERİ ──────────────────────────────────────────── */
.dial{position:relative;width:132px;height:132px;flex:0 0 auto}
.dial svg{transform:rotate(-90deg)}
.dial .val{position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;line-height:1}
.dial .val b{font-size:38px;font-weight:700;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;display:block}
.dial .val span{font-size:10.5px;color:var(--ink-4);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;margin-top:6px;display:block}

.bars{display:grid;gap:15px;flex:1;min-width:0}
.bar .top{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:7px;gap:12px}
.bar .top b{font-size:13.5px;font-weight:600}
.bar .top .v{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.bar .trk{height:8px;border-radius:100px;background:var(--surface-3);
  overflow:hidden;position:relative}
.bar .fil{height:100%;border-radius:100px;
  transition:width .9s cubic-bezier(.2,.7,.3,1)}
/* güven aralığı, tek sayı yerine bant. Yöntemin dürüst tarafı. */
.bar .band{position:absolute;top:0;bottom:0;background:var(--sig-band);
  border-left:1px solid var(--sig);border-right:1px solid var(--sig);
  opacity:.9;pointer-events:none}
/* ÖNCEKİ ÖLÇÜMÜN İZİ · ince dikey çizgi.
   Çubuğun bugünkü boyu tek başına "iyi mi kötü mü" sorusunu
   yanıtlamıyor; asıl bilgi HAREKET. Çizgi önceki ölçümün durduğu
   yeri işaretliyor, dolgu oradan nereye geldiğini gösteriyor.
   overflow:hidden olan .trk'nin İÇİNDE: taşan bir çizgi, %100'e
   yakın değerlerde çubuğun dışına çıkıyordu. */
.bar .prev{position:absolute;top:0;bottom:0;width:2px;border-radius:2px;
  background:var(--ink-4);opacity:.55;pointer-events:none}
.bar .hint{font-size:12px;color:var(--ink-4);margin-top:6px}

/* ── DURUM ŞERİDİ · panelin her ekranının üstünde ───────────────────
   Dört kalem: son ölçüm, sonraki ölçüm, paket ve iki eylem. Hepsi
   zaten sayfanın bir yerinde vardı ama dağınıktı; müşterinin panele
   girer girmez sorduğu üç soru ("ne zaman ölçüldü", "yine ne zaman
   ölçülecek", "hangi paketteyim") tek satırda cevaplanıyor.

   Son kutu sola değil SAĞA yaslı (margin-left:auto): eylemler
   bilgilerin devamı değil, şeridin öteki ucu. */
.pstrip{display:flex;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden}
.pstrip .it{padding:11px 18px;border-right:1px solid var(--line);min-width:0}
.pstrip .it:last-child{border-right:0;margin-left:auto;display:flex;gap:8px;align-items:center}
.pstrip .k{display:block;font-size:11px;color:var(--ink-4);font-weight:500}
.pstrip .v{display:block;font-size:13px;font-weight:600;margin-top:2px}
.pstrip .v small{font-weight:500;color:var(--ink-4);font-size:11.5px}
@media (max-width:760px){
  .pstrip .it{border-right:0;border-bottom:1px solid var(--line);width:100%}
  .pstrip .it:last-child{border-bottom:0;margin-left:0}
}
.bar.locked{opacity:.55}
.bar.locked .trk{background:repeating-linear-gradient(115deg,
  var(--surface-3) 0 7px,var(--surface-2) 7px 14px)}

/* yapay zekâ matrisi */
.emx{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.erow{display:grid;grid-template-columns:1fr 132px 40px 58px;align-items:center;
  gap:12px;padding:10px 14px;background:var(--surface);font-size:13px}
.erow .en{font-weight:600;display:flex;align-items:center;gap:9px;min-width:0}
.erow .mt{height:6px;border-radius:100px;background:var(--surface-3);overflow:hidden}
.erow .mf{height:100%;border-radius:100px}
.erow .es{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.erow.hd{background:var(--surface-2);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}

/* rakip kıyası, ücretsiz taramanın en güçlü parçası */
.bench{display:grid;gap:9px}
.brow{display:flex;align-items:center;gap:12px}
.brow .nm{width:158px;font-size:13px;color:var(--ink-2);flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .t2{flex:1;height:24px;border-radius:var(--r-sm);
  background:var(--surface-3);overflow:hidden;min-width:0}
.brow .f2{height:100%;border-radius:var(--r-sm);background:var(--ink-4);
  transition:width .8s cubic-bezier(.2,.7,.3,1)}
.brow .sc{width:30px;text-align:right;font-weight:700;font-size:13.5px;
  font-variant-numeric:tabular-nums;color:var(--ink-3);flex:0 0 auto}
.brow.you .nm{color:var(--ink);font-weight:700}
.brow.you .f2{background:var(--err)}
.brow.you .sc{color:var(--err)}
.brow.you.win .f2{background:var(--sig)}
.brow.you.win .sc{color:var(--sig)}

/* ── TARAMA EKRANI ──────────────────────────────────────────────── */
/* Prototipte .mnav bu kutunun İÇİNDEYDİ ve ilk 62px'lik satırı o
   dolduruyordu. Laravel'de nav layout'ta; tek çocuk (.scanwrap)
   62px'lik satıra sıkışıp tasarımı bozuyordu. Satır tanımı kalktı. */
.scanpage{min-height:calc(100dvh - 74px);display:grid;grid-template-rows:1fr}
.scanwrap{max-width:900px;margin:0 auto;padding:44px 24px 80px;width:100%}
.runlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:26px}
.run{display:flex;align-items:center;gap:12px;padding:13px 17px;
  background:var(--surface);font-size:13.5px}
.run .st{width:16px;height:16px;flex:0 0 auto}
.run .lbl{flex:1;color:var(--ink-2)}
.run .res{font-size:12px;color:var(--ink-4);text-align:right}
.run.pending{opacity:.4}
.run.pending .lbl{color:var(--ink-4)}
.spin{width:14px;height:14px;border:2px solid var(--line-2);
  border-top-color:var(--sig);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* Bekleme ekranindaki GERCEK ilerleme. Alt satirdaki adim listesi bir
   animasyon; bu cubuk sunucudan gelen sayiyi gosterir (ScanRunner her
   kontrolu bitirdiginde scan_checks'e satir yaziyor, durum ucu onlari
   sayiyor). Ikisi ayri gorunmeli, yoksa cubugun da uydurma oldugu
   sanilir — bu yuzden once ve daha belirgin duruyor. */
.runprog{margin-top:24px}
.runbar{height:6px;border-radius:100px;background:var(--surface-3);overflow:hidden}
.runfil{height:100%;border-radius:100px;background:var(--sig);
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.runpct{margin-top:8px;font-size:12.5px;color:var(--ink-4);
  font-variant-numeric:tabular-nums}
.runprog + .runlist{margin-top:16px}

.scorehead{display:flex;gap:32px;align-items:center;padding:26px}

/* Skor cubuklarinin grup basligi · "Ucretsiz taramada olculen" /
   "AI analizi ile olculen". Dort bilesen yan yana duruyordu ve
   ikisinin bu taramada HIC olculmedigi yalnizca ipucu satirindan
   anlasiliyordu. */
.bargrp{font-size:11px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.bargrp:not(:first-child){margin-top:6px}

/* Kategori bazli durum satirlari · eski .findings listesinin yerine.
   Bir bulgu degil bir DURUM gosterir: cozum, kanit ve puan tasimaz. */
.cats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.cat{display:flex;gap:14px;padding:16px 18px;background:var(--surface);align-items:flex-start}
.cat .sev{width:3px;border-radius:100px;align-self:stretch;flex:0 0 auto}
.cat .bd{flex:1;min-width:0}
.cat h5{font-size:14px;font-weight:600;margin-bottom:5px}
.cat p{font-size:13px;color:var(--ink-3);line-height:1.55}
.catst{text-align:right;white-space:nowrap;flex:0 0 auto}
.catst b{display:block;font-size:12.5px;font-weight:700}
.catst span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:3px}

/* Ucretsiz sonucun kapanis ozeti · ekranda kalan tek sayisal ifade.
   Ad ".sum" DEGIL: o ad asagida (satir ~1300) odeme ekranindaki siparis
   ozeti kutusuna ait ve text-align oraya sizip kutuyu ortalardi.

   ── SAYI CUMLENIN ICINDEN CIKARILDI ──

   Blok bir donem ortali bir kartti: baslik ("7 iyilestirme firsati
   tespit edildi."), altinda iki satir govde, altinda bir dugme. Firsat
   sayisi baslik cumlesinin icinde 20px'te duruyordu ve goz gezdiren
   ziyaretci onu hic gormuyordu — oysa o, ucretsiz ekranin tek bulgusu.

   Simdi sayi SOLDA, iri ve kendi renginde; cumle sagda. Ayni bilgi,
   iki ayri okuma hizinda: bakan sayiyi, okuyan cumleyi aliyor.

   Kutu .card DEGIL: kendi zeminini ve kenarligini kendisi kuruyor,
   cunku firsat varken (.has-gaps) uyari tonuna geciyor. Sarinin
   gerekcesi: bu bir hata degil, bir acik. Kirmizi olsaydi ziyaretci
   sitesinde bir ariza oldugunu sanardi. */
.freesum{display:flex;align-items:center;gap:24px;padding:26px 28px;
  margin-top:26px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl)}
.freesum.has-gaps{border-color:var(--warn-line);
  background:linear-gradient(180deg,var(--warn-bg),var(--surface) 78%)}

/* Sayi · tabular-nums degil, tek basina duran bir rakam. line-height:1
   cunku 58px'lik bir sayinin varsayilan satir yuksekligi kutuyu
   yanindaki iki satirlik metinden uzun yapiyor. */
.freesum-num{font-size:58px;font-weight:700;line-height:1;letter-spacing:-.04em;
  color:var(--warn);flex:0 0 auto}
.freesum-bd{min-width:0}
.freesum-hd{font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.3}
.freesum-bd p{font-size:13.5px;color:var(--ink-2);margin-top:9px;line-height:1.6;
  max-width:62ch}
/* Gecen kontrollerin sayisi · bir denge cumlesi, bulgunun kendisi
   degil. O yuzden govdeden bir tik sonuk. */
.freesum-note{font-size:12.5px;color:var(--ink-4);margin-top:10px}

@media (max-width:620px){
  .freesum{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 18px}
  .freesum-num{font-size:46px}
}

.findings{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.fnd{display:flex;gap:14px;padding:15px 18px;background:var(--surface);align-items:flex-start}
.fnd .sev{width:3px;border-radius:100px;align-self:stretch;flex:0 0 auto}
.fnd .bd{flex:1;min-width:0}
.fnd h5{font-size:14px;font-weight:600;margin-bottom:5px}
.fnd p{font-size:13px;color:var(--ink-3);line-height:1.55}
.fnd .meta{font-size:11.5px;color:var(--ink-4);margin-top:7px}
.fnd .imp{font-size:12px;font-weight:700;color:var(--sig);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* .gate / .gatenote / .gate-eng KALDIRILDI · tarama sonucundaki uc
   paragrafik satis kapisi ("Asil soru hâlâ cevapsiz: sizi aniyorlar
   mi?") ekrandan cikti. Kartlarin ustunde duran o blok, motor
   listesini ve olcum yontemini kilitli blokta ve fiyat sayfasinda
   zaten yazili oldugu hâlde tekrarliyor, firsat sayisiyla paketlerin
   arasini bir ekran boyu aciyordu.

   Tarama sonucundaki paket secimi. Ana sayfadaki .pr kartlarinin
   dar surumu: rapor sayfasi zaten uzun, kartlar burada kisa olmali. */
.gatepicks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.gpick{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column}
.gpick.hi{border-color:var(--sig-line);background:var(--sig-soft)}
.gpick-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gpick-hd h4{font-size:15px;font-weight:650}
.gpick-amt{font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.gpick-amt small{font-size:11px;font-weight:500;color:var(--ink-4);margin-left:2px}
.gpick .prmk{display:flex;align-items:center;gap:8px;margin-top:12px;
  padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gpick .prmk .emk{width:18px;height:18px}
.gpick .prmk .mkn{font-size:12px}
.gpick-desc{font-size:12.5px;color:var(--ink-3);margin-top:11px;line-height:1.5}
.gpick-facts{list-style:none;margin:12px 0 16px;display:grid;gap:6px;flex:1}
.gpick-facts li{font-size:12.5px;color:var(--ink-2)}
.gpick .btn{width:100%;justify-content:center;margin-top:auto}
@media (max-width:860px){.gatepicks{grid-template-columns:1fr}}

/* hata durumu */
.errstate{margin-top:26px;border:1px solid var(--err-line);background:var(--err-bg);
  border-radius:var(--r-lg);padding:26px}
.errstate h3{font-size:18px;font-weight:650;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px}
.errstate p{font-size:13.5px;color:var(--ink-2);margin-top:10px;max-width:62ch;line-height:1.62}
.errstate pre{margin-top:14px;padding:13px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);overflow-x:auto;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2);line-height:1.7}

/* Ham tarayıcı çıktısı · İKİNCİL.
   Eskiden bu metin başlığın kendisiydi ve ziyaretçi "cURL error 6:
   Could not resolve host" okuyordu. Sebebi göstermek doğru, onu
   manşet yapmak değil: burada okumak isteyen okur.

   overflow-wrap + overflow-x: cURL mesajları uzun URL taşıyor
   (curl.se belge bağlantısı) ve dar ekranda kartı yırtıyordu. */
.errdetail{margin-top:16px;padding-top:14px;border-top:1px solid var(--err-line)}
.errdetail .k{display:block;font-size:11px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.errdetail code{display:block;padding:11px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  font-size:12px;color:var(--ink-3);line-height:1.65;
  overflow-x:auto;overflow-wrap:anywhere}

/* ── PANEL KABUĞU ───────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100dvh}
/* IKINCI SUTUN minmax(0,1fr) · 1fr DEGIL.
   Izgara satirinda `1fr` aslinda minmax(auto,1fr)'dir: sutun, icerigin
   en kucuk sigabilecegi genislige kadar BUYUYEBILIR. Ust cubuktaki tek
   satirlik aciklama (.topbar .t small, white-space:nowrap) uzun oldugunda
   sutun 2200px'e cikiyor, kabuk ekrandan tasiyor ve ayar kutulari
   (.setgrid'in iki sutunu) ekranin disina uzuyordu. Alt sinir 0 olunca
   sutun kabugun genisliginde kaliyor, uzun aciklama da tasarlandigi gibi
   uc noktayla kirpiliyor. */
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;
  display:flex;flex-direction:column;gap:5px}
.side .brand{padding:6px 10px 18px}
/* Kenar çubuğundaki logo · `.side a` kuralı (display:flex + padding)
   `.logo a` ile aynı özgüllükte ve DAHA SONRA geldiği için onu eziyordu:
   bağlantının yüksekliği kalkınca svg'nin height:100% değeri dayanaksız
   kalıyor ve logo pazarlama sitesindekinin yarısı kadar görünüyordu.
   Ölçü de pazarlama başlığıyla eşitlendi (.mnav .logo → 34px). */
.side .brand .logo{height:34px}
.side .brand .logo a{display:block;height:100%;padding:0;border-radius:0;
  background:none;color:inherit}
.side .brand .logo a:hover{background:none}
.side .grp{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);padding:16px 10px 7px}
.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  font-size:13.5px;color:var(--ink-3);font-weight:500}
.side a:hover{background:var(--surface-2);color:var(--ink-2)}
.side a.on{background:var(--sig-soft);color:var(--sig)}
.side a.on .ico{stroke:var(--sig)}
.side .foot2{margin-top:auto;padding:12px 10px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-4)}
.op .side a.on{background:var(--op-soft);color:var(--op)}
.op .side a.on .ico{stroke:var(--op)}

.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:50;gap:16px}
.topbar .t{font-size:15px;font-weight:650;letter-spacing:-.015em;min-width:0}
.topbar .t small{display:block;font-size:12px;color:var(--ink-4);font-weight:400;
  margin-top:2px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{padding:26px;display:grid;gap:18px;align-content:start}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--surface-3);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--ink-2);flex:0 0 auto}
/* Profil · baştaki harfler artık hesap ayarlarına giden bir bağlantı.
   Tıklanabilir olduğunun görünmesi için imleç ve üzerine gelince halka. */
a.avatar{cursor:pointer;transition:background .15s,box-shadow .15s}
a.avatar:hover{background:var(--surface-2);box-shadow:0 0 0 2px var(--sig-ring)}
.op a.avatar:hover{box-shadow:0 0 0 2px var(--op-line)}

.sechd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sechd h3{font-size:16px;font-weight:650;letter-spacing:-.015em}
.sechd p{font-size:12.5px;color:var(--ink-4);margin-top:3px}

.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:660px}
thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);padding:0 14px 10px;border-bottom:1px solid var(--line)}
tbody td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td .ttl{color:var(--ink);font-weight:550}
/* Fiyat satirinda tutarin ardindaki donem soneki ("/ ay"): rakamla
   ayni satirda ama onun agirliginda degil. */
td .ttl .per{font-style:normal;font-weight:400;font-size:12px;color:var(--ink-4);
  margin-left:3px}
/* Tabloda "var" hucresi · yazi tek basina okununca hangi kademede
   ne oldugunu goz taramiyor, tik isareti sutunu okunur kiliyor. */
td .tck{width:14px;height:14px;stroke:var(--sig);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
td .sub{font-size:12px;color:var(--ink-4);margin-top:3px}
/* Tablo içinde alan.

   Form alanlarının görünümü .fld altında tanımlı ve orası dikey bir
   yerleşim varsayıyor (etiket üstte, alan altta). Motorlar ekranında
   alanlar tablo hücresinde duruyor: etiket sütun başlığı, alan hücre.
   .fld'yi hücreye sarmak, satır yüksekliğini iki katına çıkarıp altı
   satırlık tabloyu ekrana sığmaz hâle getiriyordu. */
tbody td select,tbody td input[type=text]{width:100%;height:36px;padding:0 11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:13px;color:var(--ink);outline:0;
  transition:border-color .14s,box-shadow .14s}
tbody td select:hover:not(:focus),
tbody td input[type=text]:hover:not(:focus){border-color:var(--line-2)}
tbody td select:focus,tbody td input[type=text]:focus{border-color:var(--sig);
  box-shadow:0 0 0 3px var(--sig-ring)}
tbody td input::placeholder{color:var(--ink-4)}
/* Model sütunu uzun kimlikleri taşıyor; dar bırakılırsa seçenek
   metinleri kırpılıyor ve iki sürüm ayırt edilemez hâle geliyor. */
.enginetbl td:nth-child(3){min-width:290px}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:middle}
/* etki = sayı + orantılı çubuk. Sıralamayı gözle görünür yapar. */
.impact{display:flex;align-items:center;gap:8px}
.impact b{font-variant-numeric:tabular-nums;color:var(--sig);font-size:13px;width:26px}
.impact .ib{height:4px;border-radius:100px;background:var(--sig);opacity:.45;min-width:3px}

.delta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.delta.up{color:var(--ok)} .delta.dn{color:var(--err)}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba .col{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);padding:16px}
.ba .col.now{border-color:var(--sig-line);background:var(--sig-soft)}
.ba .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.ba p{font-size:13.5px;line-height:1.66;color:var(--ink-2)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.kpi .k{font-size:11.5px;color:var(--ink-4);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.kpi .v{font-size:27px;font-weight:700;letter-spacing:-.03em;margin-top:9px;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:9px}

/* ── OPERATÖR ───────────────────────────────────────────────────── */
/* Sol sütun 296px sabitti; sipariş özetinde .rvr'nin 158px etiket
   sütunu düşünce değere ~90px kalıyor ve e-posta, "Sağlayıcı keser
   (Merchant of Record)", "Kredi / banka kartı" gibi değerler 3-4
   satıra bölünüyordu. clamp: dar ekranda eski genişlik, geniş
   ekranda 392px'e kadar nefes alıyor. İkinci sütun minmax(0,1fr) —
   1fr olsaydı geniş bir tablo sayfayı yatay taşırırdı. */
.opgrid{display:grid;grid-template-columns:clamp(296px,25vw,392px) minmax(0,1fr);
  gap:18px;align-items:start}
/* Müşteri kartı: ana içerik (siteler, siparişler, taramalar, günlük)
   solda ve GENİŞ, hesap + iç notlar sağda dar. Düz .opgrid'in ilk
   sütunu 296px sabit; müşteri kartında tablolar o sütuna düşüp
   sağdan kesiliyordu. Ana sütun minmax(0,1fr): 1fr olsaydı geniş bir
   tablo sütunu büyütüp sayfayı yatay taşırırdı. */
.opgrid.opwide{grid-template-columns:minmax(0,1fr) clamp(300px,26vw,390px)}
.plist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.plist .hd{padding:14px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.plist .hd b{font-size:13.5px}
.pitem{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;
  align-items:flex-start;cursor:pointer;font-size:13px}
.pitem:last-child{border-bottom:0}
.pitem:hover{background:var(--surface-2)}
.pitem.on{background:var(--op-soft);box-shadow:inset 2px 0 0 var(--op)}
.pitem .ix{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-4);
  padding-top:1px;flex:0 0 auto}
.pitem .q{flex:1;color:var(--ink-2);line-height:1.45}
.pitem.on .q{color:var(--ink)}
.pitem .mk{width:14px;height:14px;flex:0 0 auto;margin-top:1px}

.enginetabs{display:flex;gap:2px;padding:4px;background:var(--surface-3);
  border-radius:var(--r-md);width:fit-content;flex-wrap:wrap}
.enginetabs button{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.enginetabs button[aria-selected=true]{background:var(--op);color:var(--op-ink)}
/* Seçili sekmede marka rengi mor zeminde okunmuyor, tek renge düşür */
.enginetabs button[aria-selected=true] .emk{color:currentColor}
/* Henüz cevabı girilmemiş yapay zekânın markası soluk */
.enginetabs button.todo .emk{opacity:.4}

/* tekrar sayacı, aynı istem N kez sorulur */
.reps{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-4)}
.reps .r{width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:11px;font-weight:700;border:1px solid var(--line-2);color:var(--ink-4)}
.reps .r.done{background:var(--op-soft);border-color:var(--op-line);color:var(--op)}
.reps .r.now{background:var(--op);border-color:var(--op);color:var(--op-ink)}

.paste{width:100%;min-height:172px;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:14px 15px;
  font-size:13.5px;line-height:1.68;color:var(--ink-2);resize:vertical;outline:0}
.paste:focus{border-color:var(--op);box-shadow:0 0 0 3px var(--op-soft)}

.detect{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;margin-top:14px}
.drow{display:flex;align-items:center;gap:12px;padding:11px 15px;
  background:var(--surface-2);font-size:13px;flex-wrap:wrap}
.drow .dk{width:150px;color:var(--ink-4);font-size:12.5px;flex:0 0 auto}
.drow .dv{flex:1;display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}

.rate{display:grid;gap:12px;margin-top:16px}
.rateq{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 15px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);font-size:13.5px;flex-wrap:wrap}
.seg{display:flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:var(--r-sm)}
.seg button{padding:5px 12px;border-radius:4px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.seg button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.seg button.no[aria-selected=true]{color:var(--err)}
.seg button.yes[aria-selected=true]{color:var(--ok)}

.note{padding:13px 16px;border:1px solid var(--info-line);background:var(--info-bg);
  border-radius:var(--r-md);font-size:12.5px;color:var(--ink-2);line-height:1.6;display:flex;gap:10px}
.note svg{stroke:var(--info);flex:0 0 auto;margin-top:1px}
.note.warnbox{border-color:var(--warn-line);background:var(--warn-bg)}
.note.warnbox svg{stroke:var(--warn)}

/* Örnek altı çekince: masaüstünde tek satır, darda doğal sarma. */
.disclaim{font-size:12px;color:var(--ink-4);margin-top:16px}
@media(min-width:941px){.disclaim{white-space:nowrap}}

/* ═══ SİPARİŞ VE ÖDEME ════════════════════════════════════════════
   Ücretsiz tarama sonucu ile ödeme arasındaki üç ekran. Rakibin
   huni kurgusu doğru, o yüzden aynen alınıyor: skoru gören
   kullanıcı paketi aynı akışta, sayfayı terk etmeden seçiyor.

   Üç yerde bilinçli olarak ayrılıyoruz:

   1. FATURA SONRADAN EKLENEN BİR KUTU DEĞİL, siparişin parçası.
      Türkiye'de e-arşiv fatura zorunlu. "İsterseniz sonra ekleyin"
      demek, kurumsal alıcının her birini satın alma sonrası destek
      talebine çevirmek demek.
   2. FİYAT HER EKRANDA AYNI TEK SAYI. Pazarlama sayfasında bir
      rakam, ödeme ekranında başka bir rakam göstermek ödeme anında
      sürpriz üretir. Vergiyi Merchant of Record ekliyor, biz hiçbir
      yüzeyde vergi satırı göstermiyoruz.
   3. YASAL ONAYLAR AYRI AYRI. Ön bilgilendirme formu ve mesafeli
      satış sözleşmesi tek bir "kabul ediyorum" kutusuna bağlanamaz;
      cayma hakkının erken sona ermesi için de ayrı ve açık onay
      gerekir (Mesafeli Sözleşmeler Yönetmeliği m.15/ğ).
      İYS/ticari ileti kutusu ise BOŞ başlar, başlamak zorunda.

   Skor, alan adı ve rakip sırası bu üç ekranda da görünür kalıyor.
   Satın alma kararını üreten sayı, ödeme düğmesini gördüğü anda
   ekrandan kaybolmamalı.
   ═════════════════════════════════════════════════════════════ */

.copage{min-height:calc(100dvh - 74px);display:grid;grid-template-rows:1fr}
.cowrap{max-width:1000px;margin:0 auto;padding:34px 24px 90px;width:100%}

/* Adım başlığı ORTALI ve TEK SATIR. Genel .h2 kuralı 24ch'lik bir
   ölçü sınırı taşıyor — gövde metni için doğru, üç kelimelik bir
   soru için değil: "Neyi ölçelim, nereye kadar gidelim?" 1000px'lik
   kabın ortasında ikiye bölünüyordu. Sınır kalkıyor, satır nowrap
   ile korunuyor; punto viewport'a bağlı küçülerek uzun çevirileri
   de (en/de başlıkları TR'nin bir buçuk katı) aynı satırda tutuyor.
   Dar ekranda nowrap bırakılsa punto okunmaz hale gelirdi: 720px
   altında kural geri alınıp dengeli sarmaya dönülüyor. */
.cohead{text-align:center;margin-top:26px}
.cohead>.h2{max-width:none;margin:11px auto 0;white-space:nowrap;
  font-size:clamp(20px,2.9vw,29px)}
@media (max-width:720px){
  .cohead>.h2{white-space:normal;text-wrap:balance;font-size:24px}
}

.co-step{display:none}
.co-step.on{display:block}

/* adım şeridi: beş adım, ikisi geride. Geride kalanlar tıklanabilir,
   ilerideki adımlar değil, çünkü henüz veri yok. */
.cost{display:flex;align-items:flex-start;justify-content:center;
  max-width:620px;margin:0 auto 6px}
.cost .cs{display:flex;flex-direction:column;align-items:center;gap:9px;
  flex:0 0 auto;width:72px;text-align:center}
.cost .cn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2);color:var(--ink-4);background:var(--surface);
  transition:.16s}
.cost .cn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.cost .cl{font-size:11.5px;font-weight:600;color:var(--ink-4)}
.cost .cbar{flex:1;height:1px;background:var(--line-2);margin-top:14px;min-width:10px}
.cost .cs.done{cursor:pointer}
.cost .cs.done .cn{border-color:var(--sig-line);background:var(--sig-soft);color:var(--sig)}
.cost .cs.done .cl{color:var(--ink-3)}
.cost .cs.now .cn{background:var(--sig);border-color:var(--sig);color:var(--sig-ink);
  box-shadow:0 0 0 4px var(--sig-ring)}
.cost .cs.now .cl{color:var(--ink)}

/* iki kolon: solda karar, sağda değişmeyen özet.
   Özet yapışkan, çünkü form uzadıkça tutar ekrandan çıkmamalı. */
.colay{display:grid;grid-template-columns:1fr 336px;gap:22px;
  align-items:start;margin-top:30px}
.cosum{position:sticky;top:126px}
/* Onaylar özetin içine girdiğinden bu kart uzun: alçak ekranlarda
   yapışkan kalırsa ödeme düğmesi görünür alanın altında kesiliyor.
   Kesilen bir düğme, kaybolan bir tutardan kötü. Onaylar artık aynı
   sütunda olduğu için birlikte kaydırılmalarında sakınca yok. */
@media (max-height:800px){.cosum-tall{position:static}}

/* taşınan bağlam: hangi site, hangi skor, kaçıncı sıra */
.ctx{display:flex;align-items:center;gap:16px;padding:15px 18px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  flex-wrap:wrap}
.ctx .cx{min-width:0}
.ctx .cx .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4)}
.ctx .cx .v{font-size:14px;font-weight:600;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx .cx .v.num{font-variant-numeric:tabular-nums}
.ctx .sepv{width:1px;align-self:stretch;background:var(--line-2)}

/* paket kartları: radyo düğmesi, açılır liste değil.
   Üç seçenek varsa üçü de aynı anda görünmeli. */
.pks{display:grid;gap:10px;margin-top:14px}
.pk{display:grid;grid-template-columns:18px 1fr auto;gap:14px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);cursor:pointer;transition:.14s;text-align:left;width:100%}
.pk:hover{border-color:var(--line-2)}
.pk.on{border-color:var(--sig);background:var(--sig-soft)}
.pk .rd{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);
  margin-top:3px;position:relative;flex:0 0 auto;transition:.14s}
.pk.on .rd{border-color:var(--sig)}
.pk.on .rd::after{content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--sig)}
 /* <button> içerik modeli akış içeriği kabul etmiyor: başlık
    görevi gören bu satır <h4> değil <span>. Görünüşü aynı,
    işaretlemesi geçerli. */
.pk .pkh{font-size:15px;font-weight:650;letter-spacing:-.015em;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pk .pd{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.56;max-width:52ch}
.pk .pp{text-align:right;white-space:nowrap}
.pk .pp b{font-size:17px;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;display:block}
.pk .pp small{font-size:11px;color:var(--ink-4);display:block;margin-top:3px}

/* seçilen paketin kapsamı: kart içinde değil altında.
   Üç kartın içine üç liste koymak, seçim ekranını fiyat sayfasına
   çevirir; karar zaten verildi, burada teyit ediliyor. */
.scope{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:14px}
.scope .si{display:flex;align-items:center;gap:11px;padding:11px 16px;
  background:var(--surface);font-size:13px;color:var(--ink-2)}
.scope .si svg{width:15px;height:15px;stroke:var(--sig);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.scope .si.off{color:var(--ink-4)}
.scope .si.off svg{stroke:var(--ink-4)}
.scope .si .tag{margin-left:auto;font-size:11.5px;color:var(--ink-4);white-space:nowrap}

/* form */
.frm{display:grid;gap:15px;margin-top:14px}
.f2c{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.f3c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
/* Form hatası: kırmızı metin tek başına yeterli değil, alan
   sınırının hemen altında ve aynı hizada durması gerekiyor. */
.ferr{color:var(--err);font-size:12.5px;margin-top:7px;line-height:1.5}
.fld>label{display:block;font-size:12px;font-weight:600;color:var(--ink-3);
  margin-bottom:6px}
/* Yarıçap --r (8px) değil --r-md (10px): sınıfsız alanların temel
   kuralı da bu değeri kullanıyor, ikisi aynı ekranda yan yana
   geldiğinde 2px'lik fark "başka bir yerden gelmiş" gibi okunuyor. */
.fld input,.fld select,.fld textarea{width:100%;height:40px;padding:0 13px;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:14px;outline:0;transition:.14s}
.fld textarea{height:auto;padding:11px 13px;resize:vertical;line-height:1.55;
  font-size:13.5px}
/* Üzerine gelince kenarlık koyulaşıyor: uzun formda hangi kutunun
   altında olunduğu imleçle birlikte görünsün. Düğmelerdeki
   (.btn:hover) kenarlık hareketiyle aynı. */
.fld input:hover:not(:focus):not([readonly]):not(:disabled),
.fld select:hover:not(:focus):not(:disabled),
.fld textarea:hover:not(:focus):not([readonly]):not(:disabled){border-color:var(--ink-4)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--sig);
  box-shadow:0 0 0 3px var(--sig-ring)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
/* kilitli alan: taramadan geliyor, elle değiştirilemez.
   Kesikli kenarlık "burası devre dışı" demenin gri renkten
   daha okunur yolu; gri metin düşük kontrastla da karışıyor. */
.fld input[readonly]{color:var(--ink-3);background:var(--surface-3);
  border-style:dashed;cursor:default}
.fld .hlp{font-size:11.5px;color:var(--ink-4);margin-top:6px;line-height:1.5}

/* ALAN ALTI HATA · @error bloklarının çıktısı.
   Bu kural yoktu: danışmanlık siparişindeki @error paragrafları
   biçimsiz gövde metni olarak basılıyor, ipucu satırından ayırt
   edilemiyordu. Renk tek başına yetmiyor — hata satırı ipucundan
   BÜYÜK ve KALIN, ayrıca alan kenarlığı da kırmızıya dönüyor ki
   uzun bir formda göz yanlış alanı aramasın.
   .hlp'den ÖNCE gelmesi gerekmiyor; sıralama blade'de. */
.fld>.err{font-size:12px;font-weight:550;color:var(--err);
  margin-top:6px;line-height:1.5}
.fld:has(>.err) input,
.fld:has(>.err) select,
.fld:has(>.err) textarea{border-color:var(--err-line)}
/* Hata varken ipucu ikinci plana düşer: iki satır aynı ağırlıkta
   okunduğunda hangisinin eylem istediği belirsiz kalıyor. */
.fld>.err+.hlp{opacity:.72}

.fgrp{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:18px}
/* Grup başlığı. Yalnızca .fgrp içinde değil; operatör kartlarının
   hepsi aynı başlık kalıbını kullanıyor ve seçici .fgrp'ye bağlıyken
   o kartlarda başlık biçimsiz kalıyordu. */
.gh{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:4px}
.gh h4{font-size:14.5px;font-weight:650;letter-spacing:-.015em}
.gh p{font-size:12px;color:var(--ink-4);margin-top:3px}

/* özet kutusu */
.sum{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden}
.sum .sh{padding:14px 17px;border-bottom:1px solid var(--line);
  background:var(--surface-2);display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.sum .sh b{font-size:13.5px;font-weight:650}
.sum .sb{padding:15px 17px}
.sum .sl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:12.5px;color:var(--ink-3);padding:5px 0}
.sum .sl b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.sum .tot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:11px;padding-top:12px;border-top:1px solid var(--line)}
.sum .tot span{font-size:12.5px;color:var(--ink-3);font-weight:600}
.sum .tot b{font-size:21px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.sum .sf{padding:0 17px 17px;display:grid;gap:9px}
.sum .fine{font-size:11.5px;color:var(--ink-4);line-height:1.55;
  padding:12px 17px;border-top:1px solid var(--line);background:var(--surface-2)}

/* yasal onaylar */
.lgl{display:grid;gap:12px;margin-top:16px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.ck2{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:12.5px;color:var(--ink-2);line-height:1.6}
.ck2 input{appearance:none;-webkit-appearance:none;width:17px;height:17px;
  border:1.5px solid var(--line-2);border-radius:5px;flex:0 0 auto;margin-top:1px;
  background:var(--surface);position:relative;cursor:pointer;transition:.12s}
.ck2 input:checked{background:var(--sig);border-color:var(--sig)}
.ck2 input:checked::after{content:"";position:absolute;left:5px;top:1.5px;
  width:4px;height:9px;border:solid var(--sig-ink);border-width:0 2.2px 2.2px 0;
  transform:rotate(45deg)}
.ck2 a{color:var(--sig);text-decoration:underline;text-underline-offset:2px}

/* Onaylar sipariş özetinin içinde (checkout-review): kutu içinde kutu
   olmasın diye kendi çerçevesi kalkıyor, yerine .sf'nin dolgusunu
   taşan tek bir ayraç çizgisi geçiyor. Kutuların kendisi (.ck2) ve
   payment.js'in beklediği .lgck sınıfı aynı — yalnızca kabuk değişti. */
.sum .lgl{margin:2px -17px 0;padding:14px 17px 0;border:0;border-top:1px solid var(--line);
  border-radius:0;background:transparent;gap:11px}
.sum .lgl .ck2{font-size:12px;line-height:1.55}
.sum .lgl + p{margin:10px -17px 2px!important;padding:0 17px}

/* inceleme satırları */
.rvw{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:14px;container-type:inline-size}
.rvr{display:grid;grid-template-columns:158px 1fr auto;gap:14px;align-items:baseline;
  padding:13px 17px;background:var(--surface);font-size:13.5px}
.rvr .k{font-size:12px;color:var(--ink-4);font-weight:600}
.rvr .v{color:var(--ink-2);min-width:0;line-height:1.55}
.rvr .v small{display:block;font-size:12px;color:var(--ink-4);margin-top:3px}
.rvr .ed{font-size:12px;color:var(--sig);font-weight:600;white-space:nowrap}
.rvr .ed:hover{text-decoration:underline}
/* Etiket|değer yan yana ancak kap yeterince genişse duruyor. Dar bir
   kolona (sipariş/abonelik sol sütunu, müşteri kartı sağ sütunu)
   düştüğünde etiket kendi satırına çıkıyor — ekran genişliğine değil,
   kabın genişliğine bakıyoruz; aynı .rvw geniş kolonda yan yana kalsın.
   Alttaki 620px medya sorgusu container query desteklemeyen eski
   tarayıcılar için aynı şeyi yapıyor, ikisi çakışmıyor. */
@container (max-width: 430px){
  .rvr{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px}
  .rvr .k{grid-column:1/-1}
}

/* teslim zinciri: tarih vermek yerine sıra veriyoruz.
   "14 Eylül'de teslim" sözü tutulamazsa marka bedeli ödenir,
   "ödemeden sonra 3 iş günü" tutulabilir bir söz. */
.tl{display:grid;margin-top:6px}
.tli{display:grid;grid-template-columns:22px 1fr;gap:13px;padding-bottom:17px;
  position:relative}
.tli:last-child{padding-bottom:0}
.tli:not(:last-child)::before{content:"";position:absolute;left:10.5px;top:24px;
  bottom:2px;width:1px;background:var(--line-2)}
.tli .tn{width:22px;height:22px;border-radius:50%;background:var(--surface-3);
  border:1px solid var(--line-2);display:grid;place-items:center;font-size:10.5px;
  font-weight:700;color:var(--ink-3);position:relative;z-index:1;
  font-variant-numeric:tabular-nums}
.tli b{font-size:13.5px;font-weight:600;display:block;line-height:1.4}
.tli p{font-size:12.5px;color:var(--ink-4);margin-top:4px;line-height:1.56;max-width:60ch}

/* ödeme yöntemi */
.pmt{display:grid;gap:10px;margin-top:14px}
.pmr{display:grid;grid-template-columns:18px 1fr auto;gap:13px;align-items:center;
  padding:14px 17px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);cursor:pointer;transition:.14s;width:100%;text-align:left}
.pmr:hover{border-color:var(--line-2)}
.pmr.on{border-color:var(--sig);background:var(--sig-soft)}
.pmr .rd{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);
  position:relative;flex:0 0 auto}
.pmr.on .rd{border-color:var(--sig)}
.pmr.on .rd::after{content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--sig)}
.pmr b{font-size:13.5px;font-weight:600;display:block}
.pmr small{font-size:12px;color:var(--ink-4);display:block;margin-top:3px}
.cardbox{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:18px;margin-top:12px}
.cbrands{display:flex;align-items:center;gap:7px}
.cbrands i{display:block;width:30px;height:19px;border-radius:3px;
  border:1px solid var(--line-2);background:var(--surface-3)}
/* 3D Secure rozeti: banka yönlendirmesi sürpriz olmasın diye
   düğmenin dibinde, düğmenin üstünde değil. */
.secline{display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:11.5px;color:var(--ink-4);margin-top:11px}
.secline svg{width:14px;height:14px;stroke:var(--sig);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* onay ekranı */
.okpanel{max-width:620px;margin:34px auto 0;text-align:center;
  border:1px solid var(--sig-line);border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--sig-soft),transparent 62%);padding:40px 30px}
.okpanel .tick{width:54px;height:54px;border-radius:50%;background:var(--sig);
  display:grid;place-items:center;margin:0 auto 20px}
.okpanel .tick svg{width:27px;height:27px;stroke:var(--sig-ink);fill:none;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.okpanel h3{font-size:23px;font-weight:700;letter-spacing:-.03em}
.okpanel p{font-size:14px;color:var(--ink-2);margin-top:11px;line-height:1.62;
  max-width:50ch;margin-inline:auto}
.okpanel .ordno{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  padding:9px 15px;border-radius:100px;border:1px solid var(--line-2);
  background:var(--surface);font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:12.5px;color:var(--ink-2)}

/* İzleme teklifi · ödeme sonrası. İnceleme adımından buraya taşındı
   (orada zorunlu bir karardı ve ödemeden önce duruyordu).

   Panelin geri kalanından SESSİZ: yeşil zemin yok, başlık küçük,
   düğme ikincil. Parayı almış olmak aynı ekranda ikinci bir satışı
   yükseltmek için serbestlik vermez; ayrıca asıl çağrı yukarıdaki
   "Kuruluma başla" ve onu bastırmamalı.

   Sola dayalı: .okpanel ortalı ve okunması gereken bir paragraf,
   ortalanmış hâlde satır satır zıplıyordu. */
.okpanel .upsell{margin-top:26px;padding:18px 20px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.okpanel .upsell b{font-size:14.5px;font-weight:650}
.okpanel .upsell p{font-size:13px;color:var(--ink-3);margin:6px 0 13px;
  max-width:none;margin-inline:0;line-height:1.6}

/* ── duyarlı ────────────────────────────────────────────────────── */
@media(max-width:940px){
  .pillars,.prices,.kpis{grid-template-columns:1fr 1fr}
  .steps,.two,.ba,.opgrid,.opgrid.opwide{grid-template-columns:1fr}
  /* Tek sütunda hesap kartı ve notlar tabloların altında kaybolmasın */
  .opgrid.opwide>.opside{order:-1}
  .h1{font-size:36px}.h2{font-size:26px}
  .scorehead{flex-direction:column;align-items:flex-start;gap:22px;padding:20px}
  /* Durum etiketi darda saga sigmiyor: aciklamanin altina, sola gecer.
     white-space:nowrap kaliyor, "Iyilestirme Gerekiyor" bolunmesin. */
  .cat{flex-wrap:wrap}
  .catst{text-align:left;width:100%;padding-left:17px;
    display:flex;gap:8px;align-items:baseline}
  .catst b,.catst span{display:inline;margin-top:0}
  .mnav nav{display:none}
  .mnav .wrap{padding:0 18px}
  .mtgl{display:inline-flex}
  /* Darda içerik zaten ekranı dolduruyor; zorlamalı yükseklik bırakılıyor,
     yalnızca boşluklar sıkışıyor. */
  .hero{min-height:0;padding:clamp(32px,5vh,64px) 0 clamp(28px,4vh,52px)}
  .hero .lede{font-size:17px;max-width:52ch}
  .englist{gap:14px 28px}
  .eng{font-size:14px}.eng .emk{width:23px;height:23px}
  /* Akış tek kolona iniyor: metin her zaman panelin ÜSTÜNDE kalıyor,
     dönüşümlü sıralama burada anlamsız. Önce iddia, sonra kanıt. */
  .frow{grid-template-columns:1fr;gap:22px;padding:30px 0}
  .frow:nth-child(even)>.ftxt{order:0}
  .frow:nth-child(even)>.fvis{order:0}
  .ftxt h3{font-size:22px;max-width:24ch}
  .ftxt p{max-width:60ch}
  .mrow .mn{width:78px;font-size:12px}
  .cells{gap:3px}.cells .c{height:15px}
  /* Halka üste, liste alta. Yan yana sıkıştırmak yerine üst üste:
     halka zaten bir "kapak görseli", listeyi ondan sonra okumak
     doğal sıra. */
  .scorewrap{grid-template-columns:1fr;gap:28px}
  .ringbox{flex-direction:row;align-items:center;gap:26px;flex-wrap:wrap}
  .ring{width:190px;height:190px}
  .rlgd{width:auto;flex:1;min-width:200px}
  .proof{grid-template-columns:1fr 1fr}
  /* Kenar çubuğu gizlenmiyor, yatay şeride dönüyor.
     Gizlenen menü, olmayan menüdür. */
  .shell{grid-template-columns:1fr}
  .side{flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--line);padding:10px 12px;align-items:center}
  .side .brand,.side .grp,.side .foot2{display:none}
  .side a{white-space:nowrap;padding:8px 12px}
  .main{padding:18px}
  .brow .nm{width:104px}
  .erow{grid-template-columns:1fr 68px 34px 48px;gap:8px}
  /* Özet yapışkanlıktan çıkıp formun ALTINA iniyor. Darda yukarı
     taşınırsa, kullanıcı paketleri görmeden tutarı görüyor. */
  .colay{grid-template-columns:1fr;gap:18px}
  .cosum{position:static}
  .cost{max-width:none}
  .cost .cs{width:60px}
  .cost .cl{font-size:10.5px}
  .rvr{grid-template-columns:130px 1fr auto;gap:11px}
}
@media(max-width:620px){
  .pillars,.prices,.kpis{grid-template-columns:1fr}
  .h1{font-size:32px}
  .hero .lede{font-size:16px}
  .mnav .logo{height:30px}
  /* Dar ekranda "Giriş" düşüyor; dil seçici kalıyor çünkü
     yanlış dildeki bir ziyaretçinin ilk ihtiyacı o. */
  /* Dar ekranda çubukta yalnızca logo, dil seçici ve menü düğmesi
     kalıyor. "Giriş" ve "Ücretsiz tara" mobil menünün altında tam
     genişlikte duruyor; çubukta ikisi de sığmıyordu (400px'te taşma). */
  .mnav>.wrap .btn:not(.mtgl),.vr{display:none}
  /* 620px altında düğme ikon + koda iner ("English" → "EN"); liste
     yine tam adlarla açılır. Ad kalsaydı hamburger çubuğun dışına
     taşıyordu. Kod, düğmenin data-code özniteliğinden basılıyor. */
  .langbtn{padding:0 8px 0 10px;gap:5px}
  .langbtn .langcur{font-size:0}
  .langbtn .langcur::after{content:attr(data-code);font-size:12px;font-weight:700;letter-spacing:.07em}
  /* Kapsül dar ekranda dikey açılıyor: düğme tam genişlik. */
  .f3c{grid-template-columns:1fr}
  .scanbar{flex-direction:column;align-items:stretch;gap:10px;
    border-radius:var(--r-xl);padding:14px}
  .scanbar>.gl{display:none}
  .btn-scan{justify-content:center;width:100%}
  .trust{gap:10px 18px;font-size:12.5px}
  /* Matriste yapay zekâ adı satır başına çıkıyor, ızgara tam genişlik.
     150 hücre dar ekranda okunmaz değil, sadece daha ince. */
  .mrow{flex-wrap:wrap;gap:6px 10px}
  .mrow .mn{width:auto}
  .cells{flex:1 0 100%;gap:2px}
  .cells .c{height:13px}
  .mrow .ms{margin-left:auto}
  .ftxt h3{font-size:20px}
  .rmap li{flex-wrap:wrap}
  .rmap .ri{margin-left:auto}
  /* Grafik dar ekranda küçülünce viewBox içindeki 11 puntoluk
     etiketler okunmaz hâle geliyor: eksen yazıları büyüyor,
     uç etiketleri ise altta gerçek punto bir açıklamaya taşınıyor. */
  .chart .ax{font-size:14px}
  .chart .lb,.chart .dot{display:none}
  .clgd{display:flex}
  .proof{grid-template-columns:1fr}
  .ringbox{flex-direction:column;gap:18px}
  .ring{width:172px;height:172px}
  .ring .hub b{font-size:32px}
  /* Halka ortalanıyor, açıklama da onunla aynı eksende dursun:
     tam genişlik verirsek satırlar sola kaçıp halkayı yalnız bırakıyor. */
  .rlgd{width:fit-content;flex:0 0 auto;min-width:0}
  /* Dokunmatikte "üzerine gelme" yok: dilim seçimi çalışmıyor,
     o yüzden liste kendi başına yeterli olacak şekilde duruyor. */
  .plr{padding:13px 14px}
  /* Sipariş formu tek kolona iniyor. Adım şeridinde yalnızca
     rakamlar kalıyor: beş etiket dar ekranda üst üste biniyor,
     bulunulan adımın etiketi zaten başlıkta tekrar ediyor. */
  .f2c{grid-template-columns:1fr}
  .cost .cl{display:none}
  .cost .cs{width:40px}
  .pk{grid-template-columns:18px 1fr;gap:12px}
  .pk .pp{grid-column:2;text-align:left;margin-top:9px}
  .pk .pp b{display:inline}
  .pk .pp small{display:inline;margin-left:7px}
  .rvr{grid-template-columns:1fr auto;gap:4px 12px}
  .rvr .k{grid-column:1/-1}
  .ctx{gap:12px}
  .ctx .sepv{display:none}
}

/* ── yazdırma / PDF, her zaman açık tema ───────────────────────── */
@media print{
  html{--bg:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#EEF0F3;
    --line:#D6DAE1;--line-2:#C2C8D1;--ink:#0D1219;--ink-2:#3A4453;
    --ink-3:#5C6673;--ink-4:#8A929E;--sig:#0A7A4A;--sig-ink:#fff;
    --sig-soft:#EAF6F0;--sig-line:#B7DFCC;--err:#B03227;--warn:#8A5705;
    --ok:#0A7A4A;--sh-sm:none;--sh-md:none;--sh-lg:none;--glow:none;--glow-2:none}
  .deck,.mnav,.side,.topbar,.tsw,.btn{display:none!important}
  /* Kâğıtta sekme diye bir şey yok: çubuk düşer, iki panel de basar.
     Fiyat sayfası basıldığında izleme kademelerinin kaybolması,
     teklife ek olarak yazdıran müşteride eksik belge demek. */
  .ptabs{display:none!important}
  .ptp[hidden]{display:block!important}
  .ptp>.sec:first-child{border-top:1px solid var(--line)}
  .screen{display:block!important}
  /* `.screen` kâğıtta hepsi açılıyor; sipariş akışının üç adımı
     birden basılmasın, yalnızca açık olan bassın. */
  .co-step:not(.on){display:none!important}
  .cosum{position:static!important}
  .card,.findings,.cats,.runlist,.panel,.frow{break-inside:avoid;box-shadow:none}
  /* Kâğıtta gözlemci çalışmaz: belirme animasyonlarının başlangıç
     hâli kalıcı olur ve bölüm boş basılır. Hepsi açık duruma sabit. */
  .rv,.cells .c,.rmap li,.chart .dot,.chart .lb,.chart .band{
    opacity:1!important;transform:none!important}
  .chart .ln{stroke-dashoffset:0!important}
  .rmap .ri i{width:var(--w)!important}
  .frow{grid-template-columns:1fr;gap:14px;padding:16px 0}
  /* Halka kâğıtta boş basılmasın: dizilim JS'ten geliyor, gözlemci
     tetiklenmemişse yaylar sıfır uzunlukta kalır. */
  .scorewrap{grid-template-columns:200px 1fr;gap:24px}
  .proof,.scorewrap,.pf{break-inside:avoid}
  .main,.scanwrap{padding:0}
  body{font-size:11pt}
}

/* ═══════════════════════════════════════════════════════════════════
   UYGULAMA EKLERI
   Mockup'ta karsiligi olmayan, yalnizca calisan uygulamada ortaya
   cikan parcalar: filtre cubuklari, sayfalama, akordeon satirlari.
   Taslaktan gelen hicbir kural degistirilmedi; hepsi burada, sonda.
   ═══════════════════════════════════════════════════════════════════ */

/* Filtre cubugundaki ciplak form elemanlari (.fld sarmalayicisi yok) */
/* Yarıçap --r-sm (6px) değil --r (8px): filtre çubuğu alanları
   yanlarındaki .btn'lerle (--r) aynı köşeyi paylaşsın. Odakta
   yalnızca kenarlık dönüyordu; halka temel kuraldan geliyor ve
   burada bastırılmıyor. */
input[type=search],input[type=text].bare,select.bare,
form.sechd input,form.sechd select{
  height:34px;padding:0 11px;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);font-size:13px;
  outline:none;transition:border-color .15s,box-shadow .15s}
form.sechd input:hover:not(:focus),form.sechd select:hover:not(:focus),
input[type=search]:hover:not(:focus){border-color:var(--line-2)}
form.sechd input:focus,form.sechd select:focus{border-color:var(--sig)}
form.sechd input::placeholder{color:var(--ink-4)}

/* KISA ALAN · .btn-sm ile aynı satırda duran kutular.
   Toplu işlem çubuklarında (çöp kutusu onayı, satır içi "KALICI
   SİL") alan 38px, düğme 30px olunca satır kayıyordu; iki denetim
   aynı yükseklikte olmalı. */
.inp-sm,tbody td input[type=text].inp-sm{height:30px;width:auto;padding:0 10px;
  font-size:12.5px;border-radius:var(--r)}

/* Sayfalama, Laravel'in varsayilan Tailwind bilesenini kullanmiyoruz */
.pag{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:4px}
.pag a,.pag span{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 9px;border-radius:var(--r-sm);
  font-size:12.5px;border:1px solid var(--line);color:var(--ink-2);
  background:var(--surface);transition:background .15s,border-color .15s}
.pag a:hover{background:var(--surface-2);border-color:var(--line-2)}
.pag .cur{background:var(--surface-3);color:var(--ink);border-color:var(--line-2);font-weight:600}
.pag .off{opacity:.4;pointer-events:none}
.pag .info{border:0;background:none;color:var(--ink-4);margin-left:6px}

/* Operator: cevap yapistirma izgarasi */
.answergrid{display:grid;gap:14px}
.answercell{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden}
.answercell>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:10px;padding:12px 15px;font-size:13px;color:var(--ink-2)}
.answercell>summary::-webkit-details-marker{display:none}
.answercell>summary:hover{background:var(--surface-2)}
.answercell[open]>summary{border-bottom:1px solid var(--line);background:var(--surface-2)}
.answercell .body{padding:15px}
.answercell .idx{font-family:'JetBrains Mono',monospace;font-size:11.5px;
  color:var(--ink-4);flex:0 0 auto}
.answercell .st{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}

/* Istem satirlari */
.promptrow{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line)}
.promptrow:last-child{border-bottom:0}
.promptrow .n{font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--ink-4);padding-top:11px}

/* Yasal metin sayfasindaki uzun icerik icin (pages/legal.blade.php
   kendi <style> blogunu tasiyor; burasi yalnizca kart dolgusu) */
.card.pad.legaldoc{padding:30px 34px}
@media(max-width:640px){.card.pad.legaldoc{padding:22px 20px}}

/* Teslim zincirinde adim durumu: tamamlanan yesil, siradaki vurgulu.
   Operatorun "simdi ne yapmaliyim" sorusunu ekrana bakinca cevaplamasi
   icin; liste sirasi tek basina bunu soylemiyor. */
.tli .tn.done{background:var(--sig-soft);border:1px solid var(--sig-line);color:var(--sig)}
.tli .tn.now{background:var(--op-soft);border:1px solid var(--op-line);color:var(--op);
  box-shadow:0 0 0 3px var(--op-soft)}

/* Operator dogruluk ekraninda .seg icinde <button> degil <label>+radio
   var: JS kapaliyken de calissin ve secim form gonderiminde tasinsin.
   Gorunum aynı kalsin diye aynı kurallar label icin de yaziliyor. */
.seg label{display:inline-flex;align-items:center;height:30px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:550;color:var(--ink-3);white-space:nowrap;
  transition:background .15s,color .15s}
.seg label:hover{color:var(--ink-2)}
.seg label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.seg label.no:has(input:checked){color:var(--err)}
.seg label.yes:has(input:checked){color:var(--ok)}
.seg label:focus-within{outline:2px solid var(--sig-ring);outline-offset:1px}

/* Paket ve odeme yontemi secimi de <button> degil <label>: aynı sebep. */
.pk:has(input:checked),.pmr:has(input:checked){border-color:var(--sig-line)}
.pk,.pmr{cursor:pointer}

/* ── OPERATÖR ANALİTİĞİ ──────────────────────────────────────────
   Panelin sayı ekranları. Grafik kütüphanesi yok: veri az, biçim
   sabit ve satır içi SVG hem tema değişkenlerini hem de JS kapalı
   tarayıcıyı sorunsuz karşılıyor. ------------------------------- */

.mgrid{display:grid;gap:16px;margin-top:18px}
.mgrid.c2{grid-template-columns:1fr 1fr}
.mgrid.c3{grid-template-columns:repeat(3,1fr)}
.mgrid.c23{grid-template-columns:1.35fr 1fr}

/* Değişim rozeti. Yön RENKLE değil OKLA da veriliyor: renk körlüğü
   olan operatör de yükselişi düşüşten ayırabilmeli. */
.dlt{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-4)}
.dlt.up{color:var(--sig)}
.dlt.dn{color:var(--err)}
.dlt.flat{color:var(--ink-4)}

.kpi .foot{margin-top:8px;font-size:11.5px;color:var(--ink-4);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* Zaman serisi. Yükseklik sabit, genişlik esner. */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .bar{fill:var(--op);opacity:.55}
.chart .bar:hover{opacity:1}
.chart .ln{fill:none;stroke:var(--sig);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--sig)}
.chart .ax{fill:var(--ink-4);font-size:9.5px;
  font-family:'JetBrains Mono',ui-monospace,monospace}
.lgnd{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-4);
  margin-top:10px}
.lgnd i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px}

/* Huni. Basamaklar birbirinin alt kümesi değil, aynı dönemin sayımı. */
.fnl{display:grid;gap:11px;margin-top:14px}
.fnl .fr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.fnl .fr .n{font-size:13px;color:var(--ink-2)}
.fnl .fr .q{font-variant-numeric:tabular-nums;font-weight:650;font-size:14px}
.fnl .fr .q small{color:var(--ink-4);font-weight:500;font-size:11.5px;margin-left:6px}
.fnl .trk{grid-column:1/-1;height:7px;border-radius:100px;background:var(--surface-3);
  overflow:hidden}
.fnl .fil{height:100%;border-radius:100px;background:var(--sig);opacity:.85}

/* Etiket–değer–çubuk satırı: motor görünürlüğü, paket dağılımı. */
.mrow{display:grid;grid-template-columns:1fr 62px;gap:3px 12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow .n{font-size:13px;color:var(--ink-2)}
.mrow .n small{display:block;font-size:11px;color:var(--ink-4);margin-top:2px}
.mrow .q{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.mrow .trk{grid-column:1/-1;height:5px;border-radius:100px;background:var(--surface-3);
  margin-top:5px;overflow:hidden}
.mrow .fil{height:100%;border-radius:100px;background:var(--op)}

/* Ad–değer çiftlerinin sıkışık dizilişi (teslim, kuyruk). */
.facts{display:grid;grid-template-columns:1fr auto;gap:10px 14px;margin-top:14px;
  font-size:13px}
.facts dt{color:var(--ink-4)}
.facts dd{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--ink)}
.facts dd.bad{color:var(--err)}
.facts dd.warn{color:var(--warn)}

@media (max-width:1080px){
  .mgrid.c3,.mgrid.c23{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .mgrid.c2,.mgrid.c3,.mgrid.c23{grid-template-columns:1fr}
}

/* Ekran okuyucuya görünen, göze görünmeyen etiket. Görsel olarak
   başlığın kendisi etiket görevi görüyorsa bile <label> yazılmalı;
   yoksa alan ekran okuyucuda adsız kalır. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── AYARLAR ─────────────────────────────────────────────────────
   Her ayar kendi kutusunda. Tek kartta on alan alt alta dizildiginde
   hangi aciklamanin hangi alana ait oldugu kayboluyordu; motor sayisi
   arttikca da sayfa tek uzun forma donusuyordu.

   Iki sutun: alanlarin cogu kisa (model kimligi, sayi, acilir liste),
   tam genislik bos yer uretiyordu. 900px altinda tek sutuna iner. */
.setsec{margin:26px 0 12px}
.setsec:first-of-type{margin-top:18px}
.setsec h3{font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.setsec p{font-size:12px;color:var(--ink-4);margin-top:4px;text-transform:none;
  letter-spacing:0;font-weight:400}
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  align-items:start}
@media(max-width:900px){.setgrid{grid-template-columns:1fr}}
/* Baslik satiri: etiket solda, "tanımlı/boş" rozeti sagda. Rozet
   etiketin yanina degil hizanin sonuna gidiyor; kutular arasinda
   dikey bir okuma hatti kaliyor. */
.setbox .sbh{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:7px}
.setbox .fld>label{margin-bottom:0}

/* ── FİYAT MATRİSİ · satır ürün, sütun para birimi ─────────────────
   Fiyat bölümü yirmi beş ayar kutusuydu: üç paket × üç para birimi, üç
   kademe × üç para birimi, altı dil ve bir anahtar — hepsi aynı boyda,
   hepsi aynı görünümde. Aradığı alanı bulmak için operatör etiketleri
   tek tek okuyordu ve iki fiyatı KARŞILAŞTIRMAK (Growth USD ile Pro
   USD) mümkün değildi.

   Fiyat doğal olarak bir matris ve tabloya dönünce aynı bilgi üçte bir
   yere sığıyor. Kalıp motorlar ekranından geliyor (bkz. .enginetbl):
   etiket sütun başlığı, alan hücre. */
.pricetbl{min-width:560px}
/* Rakamlar TABULAR: oransal rakamlarda hane genişlikleri farklı olduğu
   için 899 ile 8990 alt alta bakıldığında ayırt edilemiyor ve bir
   basamak kayması gözle yakalanamıyordu. */
.pricetbl td{font-variant-numeric:tabular-nums}
.pricetbl td .sub{line-height:1.45}
.pricetbl td .sub.err{color:var(--err);font-weight:550}
.pricetbl .nil{color:var(--ink-4)}
/* Para birimi sütunları eşit ve dar. İçeriğe göre büyümeye
   bırakıldığında üç fiyat sütunu ürün adı sütununu eziyor, uzun paket
   adları iki satıra kırılıyordu. */
.pricegrid th:not(:first-child),.pricegrid td:not(:first-child){width:150px}
.pricegrid td:not(:first-child) input[type=text]{text-align:right}
/* Girilmiş değer ile yer tutucu arasındaki fark bu ekranın tek
   "kaynak" göstergesi: koyu ve ağır olan panelden, soluk olan
   config/protan.php'den geliyor. Aynı ağırlıkta çizilseydi operatör
   fiyatı girdiğini sanarak boş bir alana bakardı. */
.pricegrid td input[type=text]{font-weight:550;color:var(--ink)}
/* Reddedilen hücre · hata mesajı hücrenin ALTINDA duruyor ve tabloda
   mesajı hangi alana ait olduğunu söyleyen tek şey kenarlığın rengi. */
.pricegrid td input[type=text].bad{border-color:var(--err-line);
  background:var(--err-bg)}
.pricegrid td input[type=text].bad:focus{border-color:var(--err);
  box-shadow:0 0 0 3px var(--err-bg)}

/* ── AYAR MERKEZİ · konu kutuları ─────────────────────────────────
   /settings artık kırk alanlık tek form değil; her konu bir kutu ve
   kendi sayfasına gidiyor.

   KUTU BİR BAĞLANTI, İÇİNDE BAĞLANTI YOK. Tıklanabilir alanın kutunun
   tamamı olması gerekiyordu — başlığın kendisi tıklanacak olsaydı
   hedef 200px'lik bir metin olurdu. Bu yüzden <a> dışta duruyor ve
   içindeki her şey <span>: bir <a> içine ikinci bir <a> koymak geçersiz
   HTML'dir ve tarayıcılar bunu sessizce, birbirinden farklı biçimlerde
   onarır.

   ÜÇ SÜTUN, SATIR DEĞİL KUTU. Tek sütunda on üç konu ekrana sığmıyordu;
   operatör "ödeme nerede" diye kaydırıyordu. Kutular yan yana durunca
   hepsi tek bakışta görünüyor.

   İki sütun denemesindeki iki kusur burada çözüldü:
   · göz sağa sola zıplıyordu → kutu artık satır değil, yukarıdan aşağı
     okunan bir blok (simge → başlık → açıklama → rozet);
   · rozetler aynı hizada durmuyordu → rozet şeridi kutunun ALTINA
     sabitlendi (.hb'de flex:1) ve kutular eşit yükseklikte gerildiği
     için bir satırdaki bütün rozetler aynı çizgide duruyor. */
.hubgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-top:18px;align-items:stretch}
.hubcard{display:flex;flex-direction:column;height:100%;padding:18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);color:inherit;text-decoration:none;
  transition:border-color .14s,background .14s,transform .14s}
.hubcard:hover{border-color:var(--sig-line);background:var(--surface-2)}
.hubcard:hover .hx{transform:translateX(3px);color:var(--sig)}
.hubcard:focus-visible{outline:2px solid var(--sig);outline-offset:2px}

/* Üst şerit: solda simge, sağda ok. Ok kutunun bağlantı olduğunu
   söyleyen tek işaret; metnin yanında değil köşede duruyor ki
   açıklama satırları hizasını bozmasın. */
.hubcard .hh{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:14px}
.hubcard .hi{flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:38px;height:38px;border-radius:10px;
  background:var(--surface-3);border:1px solid var(--line);color:var(--ink-3)}
.hubcard:hover .hi{color:var(--sig);border-color:var(--sig-line)}
.hubcard .hx{flex:0 0 auto;color:var(--ink-4);
  transition:transform .14s,color .14s}

/* flex:1 · açıklama kısa olsa da gövde kalan boşluğu yutuyor, rozet
   şeridi böylece her kutuda aynı yükseklikte kalıyor. */
.hubcard .hb{flex:1 1 auto;min-width:0;display:block}
.hubcard .ht{display:block;font-size:14px;font-weight:650;
  letter-spacing:-.015em;line-height:1.35}
.hubcard .hd{display:block;font-size:12px;color:var(--ink-4);margin-top:6px;
  line-height:1.55}

/* Rozet şeridi · kutunun durum satırı. Üstündeki ince çizgi onu
   açıklamadan ayırıyor: biri ne olduğunu, diğeri şu an ne durumda
   olduğunu söylüyor. */
.hubcard .hs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.hubcard .hs .chip{height:20px;padding:0 8px;font-size:10.5px}

@media(max-width:1180px){
  .hubgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .hubgrid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .hubcard{padding:15px}
}

/* ═══ ÜRÜN KABUĞU · app.protan.ai ══════════════════════════════════
   Kayıt, giriş, checkout, ödeme ve izleme ekranlarının kabuğu.
   Bkz. resources/views/layouts/product.blade.php

   NEDEN PAZARLAMA KABUĞUNDAN AYRI
   ───────────────────────────────
   Bu ekranlar eskiden layouts.app'ı kullanıyordu; ödeme yapan
   müşterinin üst çubuğunda "Fiyatlar" ve "Ücretsiz tara" duruyor,
   altında altı kolonluk pazarlama alt bilgisi açılıyordu. Ekran,
   uygulama gibi değil satın alma öncesi bir tanıtım sayfası gibi
   görünüyordu.

   AYRIM GÖRSEL OLARAK DA TAŞINIYOR. Çubuk .mnav gibi saydam ve
   bulanık değil, opak; 74px değil 58px — yani panel kabuğundaki
   .topbar ile aynı yükseklikte. Kullanıcı sekmeyi değiştirdiğinde
   başka bir yere geldiğini renk ve yükseklikten anlıyor, yazıyı
   okumasına gerek kalmıyor.
   ═════════════════════════════════════════════════════════════ */

/* Alt bilgi kısa sayfalarda da ekranın altına yapışsın: sipariş
   sonucu gibi tek kartlık ekranlarda yasal şeridin sayfanın
   ortasında asılı kalması, sayfayı yarım yüklenmiş gösteriyordu. */
body.app-shell{min-height:100dvh;display:flex;flex-direction:column}
.pmain{flex:1 0 auto}

.pnav{position:sticky;top:0;z-index:100;height:58px;flex:0 0 auto;
  background:var(--surface);border-bottom:1px solid var(--line)}
.pnav-in{height:100%;display:flex;align-items:center;gap:18px;padding:0 26px}

.pbrand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.pbrand .logo{height:26px}
/* "Uygulama" etiketi kabuğun tek sözlü işareti. Mono ve sönük:
   marka değil, konum bildirimi. Ayırıcı çizgi ::before ile, çünkü
   border-left flex öğesinin yazı yüksekliğine değil kutu
   yüksekliğine oturuyor ve logoya göre kayıyordu. */
.ptag{position:relative;padding-left:13px;
  font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap}
.ptag::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:17px;background:var(--line-2)}
.pbrand:hover .ptag{color:var(--ink-3)}

/* Bağlam alanı: sipariş numarası, abonelik, adım adı. Taşarsa
   kesilir — üst çubuk asla ikinci satıra inmemeli, indiğinde
   yapışkan çubuk içeriğin üçte birini yiyor. */
.pnav-ctx{flex:1;min-width:0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:12px;color:var(--ink-4);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pnav-r{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.pnav-r form{display:flex;align-items:center}

/* ── ürün alt şeridi ───────────────────────────────────────────
   Pazarlama footer'ının yerine geçer. Yasal bağlantılar burada
   KALMAK ZORUNDA: mesafeli satışta ön bilgilendirme ve sözleşme
   metinlerine sipariş anında erişilebilir olmak gerekiyor. --- */
.pfoot{flex:0 0 auto;border-top:1px solid var(--line);background:var(--surface);
  padding:18px 26px 22px}
/* İki satır da ORTALI: alt bilgide sola dayanacak bir sütun düzeni
   yok, tek kolonluk iki şerit var ve sola dayalı hâlleri geniş
   ekranda sayfanın sol kenarına asılı kalıyordu. */
.pfoot-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:11px}
.pfoot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 20px;
  text-align:center;font-size:12.5px}
.pfoot-legal a{color:var(--ink-3)}
.pfoot-legal a:hover{color:var(--ink);text-decoration:underline}
.pfoot-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  text-align:center;gap:9px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--ink-4)}
.pfoot-meta a:hover{color:var(--ink-2)}
.pfoot-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-4);
  opacity:.5;flex:0 0 auto}
.pfoot-lock{display:inline-flex;align-items:center;gap:6px}
.pfoot-lock svg{width:13px;height:13px;stroke:var(--ink-4)}

/* ── pazarlama kabuğuna göre ölçülmüş kutuların düzeltmesi ──────
   .copage ve .scanpage yüksekliklerini "görünür alan eksi 74px'lik
   .mnav" diye hesaplıyor. Bu kabukta çubuk 58px ve altta bir şerit
   daha var; eski hesap her sayfaya birkaç piksellik sahte bir kaydırma
   ekliyordu. Dikey esnek düzen yüksekliği zaten veriyor. */
.app-shell .copage,
.app-shell .scanpage{min-height:0}
/* 90px'lik alt boşluk pazarlama footer'ından ayrışmak içindi;
   sessiz şeridin üstünde o kadar boşluk sayfayı bitmemiş gösteriyor. */
.app-shell .cowrap{padding-bottom:46px}

@media (max-width:760px){
  .pnav-in{padding:0 16px;gap:12px}
  /* Bağlam satırı darda düşüyor: 58px'lik çubukta kalan yer logo,
     dil, panel ve çıkış için ancak yetiyor. Sipariş numarası zaten
     sayfanın kendisinde de yazıyor, tek kaynağı üst çubuk değil. */
  .pnav-ctx{display:none}
  .pfoot{padding:16px}
  .pfoot-legal{gap:6px 14px;font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════════
   ÜCRETSİZ TARAMA EKRANLARI · GÖRSEL DÜZEN
   (form: /tr/tarama · sonuç: /tr/tarama/<token>)

   Buradaki kurallar İÇERİK DEĞİL HİZA işidir. İki ekran da aynı
   .scanwrap kabında duruyordu ama içerideki bloklar üç ayrı genişlikte
   hizalanıyordu: başlık 900px'lik kaba sola dayalı, arama kapsülü
   580px'e ortalı, e-posta alanı yine 900px. Göz her blokta yeni bir
   sol kenar arıyordu ve sayfa "yerleştirilmiş" değil "yığılmış"
   görünüyordu.

   Karar: her iki ekranda da SAYFA GİRİŞİ (rozet, başlık, spot, pazar
   çipi) ortalı; altındaki içerik blokları tek bir kolon genişliğinde
   ve sola dayalı. Ana sayfadaki .sec>.wrap kuralı ile aynı mantık —
   başlık üç satır, gövde otuz satırdır.

   Bu blok dosyanın SONUNDA: aşağıdaki seçicilerin çoğu daha genel
   kuralları (.scanbar, .note, .lgl) bilerek eziyor ve kendi dar ekran
   kuralını kendisi taşıyor, yukarıdaki 620px sorgusuna güvenmiyor.
   ═══════════════════════════════════════════════════════════════════ */

/* Sayfa üstü ışıma · kahraman bölümündeki --glow'un çok daha sönük
   hâli. Amaç dekor değil derinlik: başlık bloğu düz koyu zeminde
   asılı duruyordu. z-index:-1 kullanıldığı için kap izole ediliyor,
   yoksa ışıma gövde arkasına kaçar. */
.scanpage{position:relative;isolation:isolate}
.scanpage::before{content:"";position:absolute;left:0;right:0;top:0;height:430px;
  z-index:-1;pointer-events:none;
  background:var(--glow-scan)}
.scanwrap{position:relative}

/* Sayfa girişi · iki ekranda ortak. .scanhead sarmalayıcısı formda
   var; sonuç ekranında dallanma (bekleme/hata/sonuç) yüzünden
   sarmalayıcı kurulamıyor, orada doğrudan çocuk seçicisi kullanılıyor. */
.scanhead{text-align:center}
.scanhead>.chip{margin-bottom:2px}
.scanhead .h2{max-width:24ch;margin:16px auto 0;font-size:clamp(27px,3.1vw,33px);
  letter-spacing:-.03em}
.scanhead .lede{margin:14px auto 0;max-width:54ch;font-size:15px;line-height:1.62}

/* ── FORM EKRANI ────────────────────────────────────────────────── */
/* Kolon 620px: iki alanlı bir form 900px'e yayıldığında etiket ile
   alanın sağ ucu arasında göz gezdirecek kadar boşluk kalıyor. */
.scan-form .scanwrap{max-width:620px;padding-top:clamp(40px,7vh,74px);padding-bottom:76px}

/* Alanlar TEK KARTTA. Serbest duran alanlar + ayrı bir onay kutusu +
   ayrı bir düğme üç ayrı nesne gibi okunuyordu; kart hepsini "şu an
   doldurulacak şey" diye tek nesneye indiriyor. */
.scanform{display:grid;gap:17px;margin-top:28px;padding:26px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);text-align:left}
.scanform .fld>label{margin-bottom:7px}

/* Arama kapsülü kart içinde kapsül DEĞİL: yuvarlak hatlı bir alan,
   köşeli bir kartın içinde yamalı duruyor. Kahraman bölümündeki
   .scanbar'a dokunulmuyor, yalnızca kart içindeki örneği değişiyor. */
.scanform .scanbar{margin:0;max-width:none;height:52px;gap:10px;
  padding:0 16px;border-radius:var(--r-md);background:var(--surface-2);
  border-color:var(--line-2);box-shadow:var(--inset-hi)}
.scanform .scanbar:focus-within{box-shadow:0 0 0 3px var(--sig-ring)}
/* Adres alanı artık bir .fld içinde ve .fld input kuralı dosyada
   .scanbar input kuralından SONRA geliyor: aynı özgüllükte olduğu için
   kapsülün içindeki alan kendi kutusunu, kenarlığını ve zeminini geri
   alıyordu — kapsülün içinde ikinci bir kutu görünüyordu. Kapsül
   içindeki alan çıplak kalmalı, kutu kapsülün kendisi. */
.scanform .scanbar>input{height:auto;padding:0;background:none;border:0;
  border-radius:0;font-size:15.5px;box-shadow:none}
.scanform .scanbar>input:focus{box-shadow:none}
.scanform .fld>input{height:52px;padding:0 16px;font-size:15px;
  border-radius:var(--r-md)}

.scanform .lgl{margin:0;padding:15px 17px;border-radius:var(--r-md)}
/* Oturum açmış kullanıcının gördüğü tek satır. E-posta alanı ve KVKK
   kutusu o kişi için hiç render edilmiyor; bu satır onların yerine
   geçmiyor, taramanın hangi hesaba bağlanacağını söylüyor. Onay
   kutusu görünümü bilerek verilmedi: onaylanacak bir şey yok. */
.scanform .signedin{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.scanform .signedin b{color:var(--ink-2);font-weight:600}
/* Düğme kart içinde kapsül değil: 100px'lik yarıçap, 10px yarıçaplı
   iki alanın altında başka bir tasarımdan alınmış gibi duruyor. */
.scanform .btn-scan{width:100%;justify-content:center;height:52px;margin:0;
  border-radius:var(--r-md)}

/* ── LANSMAN KİLİDİ ──────────────────────────────────────────────
   Panelden (Ayarlar → Site durumu) tarama kapatıldığında form
   ekrandan KALKMIYOR, sönüyor. Siteyi inceleyen firmanın görmesi
   gereken şey ürünün kendisi; formu gizlemek "burada ne var"
   sorusunu cevapsız bırakırdı.

   Kutu formun ÜSTÜNDE ve .scannotes'un aksine dolgulu: bu bir dipnot
   değil, ekranın o anki durumunu söyleyen tek cümle. Ondan aşağısı
   sönükleşiyor, o parlak kalıyor — göz sırayı böyle kuruyor.

   opacity YETMEZ, pointer-events de VERİLMİYOR: alanlar zaten
   disabled ve tıklanınca hiçbir şey olmuyor. pointer-events:none
   eklenseydi imleç "yasak" yerine "normal" görünür, kilitli olduğu
   ancak tıklandıktan sonra anlaşılırdı. */
.scanlock{margin-top:24px}
.scanform.is-locked{margin-top:14px}
/* Alanlar sönük, kart değil: kartın kendisi solduğunda ürün
   "kaldırılmış" gibi okunuyor. Sönen şey doldurulamayan alanlar. */
.scanform.is-locked .fld,
.scanform.is-locked .lgl{opacity:.5}
.scanform.is-locked input:disabled{cursor:not-allowed}
/* Düğme sönük AMA ölü değil: metni "Çok yakında" ve okumaya devam
   edilebilir kalmalı. .45 opaklıkta metin kontrastı düşüyordu. */
.scanform.is-locked .btn-scan{opacity:.62;cursor:not-allowed;
  filter:grayscale(.55)}

/* Sayfa altındaki iki bilgi kutusu SÖNÜK. Mavi dolgulu iki kutu üst
   üste gelince formla eşit ağırlıkta okunuyor ve asıl eylemi
   gölgeliyordu; bunlar bir uyarı değil, dipnot. */
.scannotes{display:grid;gap:10px;margin-top:22px}
.scannotes .note{background:none;border-color:var(--line);color:var(--ink-3);
  font-size:12px;padding:12px 15px}
.scannotes .note svg{stroke:var(--ink-4)}
.scannotes .note a{color:var(--ink-2);text-decoration:underline;
  text-underline-offset:2px}

@media (max-width:620px){
  .scan-form .scanwrap{padding-top:34px}
  .scanform{padding:18px;border-radius:var(--r-lg)}
  /* Kapsül dar ekranda dikey açılıyordu (bkz. yukarıdaki 620px
     sorgusu); kart içinde buna gerek yok, alan zaten tam genişlikte. */
  .scanform .scanbar{flex-direction:row;align-items:center;
    padding:0 14px;border-radius:var(--r-md)}
  .scanform .scanbar>.gl{display:block}
}

/* ── SONUÇ EKRANI ───────────────────────────────────────────────── */
.scan-result .scanwrap{padding-top:clamp(34px,5.5vh,60px)}

/* Sayfa girişi ortalı. Sarmalayıcı yok, o yüzden doğrudan çocuklar:
   kap içindeki kartlar ve listeler bu kurallardan etkilenmiyor. */
.scan-result .scanwrap>.chip{display:flex;width:max-content;margin:0 auto}
.scan-result .scanwrap>.h2{max-width:26ch;margin:18px auto 0;text-align:center;
  font-size:clamp(27px,3.1vw,33px);letter-spacing:-.03em}
.scan-result .scanwrap>.lede{margin:13px auto 0;max-width:62ch;text-align:center;
  font-size:15px;line-height:1.62}
.scan-result .scanwrap>.chips{display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:center;margin-top:16px}

/* Bölüm başlıkları da ortalı — ama YALNIZCA kabın doğrudan çocuğu
   olanlar. Kart içindeki .sechd (kilitli kutu, "bu sayfayı saklayın")
   sola dayalı kalıyor: orası gövde metni. */
.scan-result .scanwrap>.sechd{justify-content:center;text-align:center}

/* ═══ BULUNAN İŞLETME BAĞLAMI ══════════════════════════════════════
   Skor kartının ÜSTÜNDE duruyor. Sıra bilinçli: ziyaretçi bir sayıya
   inanmadan önce sistemin sitesini gerçekten okuduğunu görmeli.

   Skor kartından KASITLI OLARAK DAHA SESSİZ: gradyan yok, başlık
   daha küçük. İkisi aynı ağırlıkta olsaydı sayfanın odağı ikiye
   bölünürdü ve asıl ürün skordur. */
/* Bağlam artık AYRI KART DEĞİL, skor kartının üst şeridi.
   İkisi de aynı işi yapıyordu — "sitenizi okuduk, durum bu" — ve iki
   kart hâlinde paket kartlarını bir kart boyu aşağı itiyordu.
   Bağlam kanıt, skor hüküm: biri diğerinin üstünde durmalı. */
.ctxband{padding:20px 26px;border-bottom:1px solid var(--line)}
.ctxname{font-size:19px;font-weight:650;margin-top:7px;letter-spacing:-.01em}

/* Kadran ve altındaki ölçek satırı tek sütun. */
.dialwrap{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto}

/* Ölçek · LEJANT DEĞİL, tek satır alt yazı.
   Kadranda bir dönem ikinci bir halka (yöntem kapsamı) ve bir hedef
   çentiği vardı; ikisi de altına renk kutucuklu bir açıklama
   istiyordu. Bir görsel kendini anlatmak için lejant gerektiriyorsa
   çalışmıyor demektir. Kapsam bilgisi grup başlıklarına taşındı,
   geriye bu sessiz satır kaldı. */
.scale{font-size:11.5px;color:var(--ink-4);white-space:nowrap}

/* Grup başlığının yanındaki ağırlık payı · "yöntemin %45'i". */
.scan-result .bargrp{display:flex;align-items:baseline;gap:9px}
.scan-result .bargrp em{font-style:normal;font-weight:500;letter-spacing:0;
  text-transform:none;font-size:11px;color:var(--ink-4);opacity:.75}

/* Kilitli bileşenin izi KESİKLİ, boş değil.
   Boş bir çubuk "sıfır aldın" diye okunuyordu; kesikli olan
   "burası henüz çizilmedi" diyor — satılan şey tam olarak o. */
.scan-result .bar.locked .trk{background:none;border:1px dashed var(--line-2);height:8px}
.scan-result .bar.locked .trk .fil{display:none}

/* auto-fit + minmax: üç alan geniş ekranda yan yana, dar ekranda
   alt alta. Sabit üç kolon, marka adı kaynağı uzun olduğunda
   (JSON-LD · Organization.legalName) taşıyordu. */
.ctxgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.ctxgrid>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ctxgrid .k{font-size:11px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.ctxgrid .v{font-size:14px;color:var(--ink-1);line-height:1.5;overflow-wrap:anywhere}

/* Kaynak satırı · KANIT, süs değil. "Arkas Holding" yazan bir kutu,
   altında nereden okunduğu yazmadığı sürece bir iddiadır. Ayrıca
   müşteriye ne düzelteceğini söylüyor: ad <title>'dan okunduysa
   şema yok demektir. Soluk ve küçük, çünkü okunması gereken ikinci
   satır. */
.ctxgrid .src{font-size:11px;color:var(--ink-4);overflow-wrap:anywhere}
.ctxnote{font-size:12.5px;color:var(--ink-3);line-height:1.65;
  margin-top:16px;max-width:78ch}

/* Skor kartı · sayfanın ilk ve en ağır nesnesi. Üstten açılan hafif
   gradyan onu alttaki düz kartlardan ayırıyor. */
.scorecard{background:linear-gradient(180deg,var(--surface-2),var(--surface) 62%)}
/* 26px: kartın altındaki kapsam notu satır içi style ile 26px'ten
   başlıyor, başlık bloğu 30px'ten başlayınca kartın içinde iki ayrı
   sol kenar oluşuyordu. */
.scan-result .scorehead{padding:26px;gap:30px;align-items:center}
/* Halka ile çubuklar arasında dikey çizgi: ikisi ayrı iki okuma,
   boşluk tek başına bunu söylemiyordu. */
.scan-result .bars{gap:16px;padding-left:30px;border-left:1px solid var(--line)}
.scan-result .bar .top b{font-size:14px}
.scan-result .bar .top .v{font-size:15.5px}
.scan-result .bar .trk{height:7px}
/* Halka büyütüldü. Dört bileşenlik çubuk kolonu ~340px; 132px'lik
   halka onun yanında yüzüyor ve solda ölü alan bırakıyordu. Ölçü
   şablondaki width/height'tan değil buradan geliyor: viewBox zaten
   ölçekleniyor. */
.scan-result .dial{width:170px;height:170px}
.scan-result .dial svg{width:100%;height:100%}
.scan-result .dial .val b{font-size:47px}
.scan-result .dial .val span{font-size:11px}

/* PAYDA · "32/45". Skorun tavanı ücretsiz taramada 45 ve bunu söyleyen
   en ucuz yer, sayının kendisi: "32" tek başına 100'lük bir ölçek
   varsayımı uyandırıyor. em cinsinden, çünkü kadranın sayısı iki farklı
   boyutta (132px ve 170px halka) kullanılıyor.

   letter-spacing sıfırlanıyor: b'nin -.04em'i büyük rakamlar için,
   14px'lik bir paydada harfleri üst üste bindiriyor. */
.dial .val b i{font-size:.4em;font-style:normal;font-weight:600;
  letter-spacing:0;color:var(--ink-4)}

/* KİLİTLİ YAY · ölçülmeyen ağırlığın kadrandaki karşılığı.
   Skor yayından sönük ama zeminden koyu: "burada bir şey var ama
   çizilmedi" demeli, ne kaybedilmiş puan ne de boşluk. Kesikli
   çizilemiyor — dasharray zaten yayı yerleştirmek için kullanılıyor. */
.diallock{opacity:.6}

/* Kategori listesi boş dönebiliyor (ölçüm hiç kategori üretmediyse).
   Boş .cats bir "kart" değil, 1px'lik yapayalnız bir çizgi bırakıyordu:
   kap kenarlığı ve ızgara boşluğu zemini gösteriyor.

   NOT · "Genel Teknik Değerlendirme" bloğu ücretsiz sonuç ekranından
   kaldırıldı, yani .cats/.cat kuralları (satır ~975) şu an HİÇBİR
   şablonda kullanılmıyor. Silinmediler çünkü ürettikleri veri duruyor
   (ScanSummary::categories) ve blok ücretli rapora taşınabilir; bir
   sonraki temizlikte hâlâ kimse kullanmıyorsa gitmeliler. */
.cats:empty{display:none}

/* ═══ KİLİTLİ AI GÖRÜNÜRLÜK ═══════════════════════════════════════
   Sayfanın en pahalı bloğu, en sessiz bloğuydu: bir .card.pad içinde
   başlık, gri çipler ve dört kalın satır. Kilitli olduğu yalnızca
   çiplerdeki asma kilit ikonundan anlaşılıyordu.

   Blok artık kendi zeminini kuruyor: skor kartıyla AYNI gradyanı
   kullanıyor, çünkü ikisi birlikte tek bir cümle söylüyor — "şu kadarı
   ölçüldü, şu kadarı ölçülmedi". Markanın yeşili buraya HİÇ girmiyor;
   yeşil, sayfada ölçülmüş olanın rengi. */
.lockedai{padding:26px 28px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2),var(--surface) 58%)}
.lockedai-hd h3{font-size:19px;font-weight:650;letter-spacing:-.02em;margin-top:11px}
.lockedai-hd p{font-size:13.5px;color:var(--ink-3);margin-top:7px;line-height:1.6}

/* Rozet · bloğun ilk okunan kelimesi. */
.lockedai-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:100px;background:var(--surface-3);border:1px solid var(--line-2);
  font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)}
.lockedai-tag svg{stroke:var(--ink-4)}

/* Motor rozetleri · gri çipler değil, markanın kendi simgesi.
   Ziyaretçi "ChatGPT" yazan bir çipi okumuyor, logoyu tanıyor.
   Simgeler sönük DEĞİL: ölçülmemiş olan görünürlük, motorlar değil. */
.lockedai-eng{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.lockedai-eng .lmk{display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px 6px 9px;border-radius:100px;background:var(--surface);
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.lockedai-eng .emk{width:17px;height:17px}

/* Soru kartları · iki kolon. Dört soru tek kolonda alt alta dizilince
   bir liste gibi okunuyordu ve listeler göz gezdirilir. */
.lockedai-qs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  margin-top:20px}
.lq{padding:15px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.lq b{display:block;font-size:14px;font-weight:600;line-height:1.45}

/* KARARTILMIŞ CEVAP · bloğun tek gerçek fikri.
   Boş bırakmak "cevabı yok" derdi; sahte bir cevap yazmak yalan
   olurdu. Üç şerit, cevabın VAR olduğunu ve ölçüldüğünde buraya
   yazılacağını söylüyor. blur() ile: düz gri kutular bir yükleme
   iskeleti gibi okunuyor, bulanık olan "gizlenmiş" okunuyor. */
.lq-blur{display:flex;flex-direction:column;gap:6px;margin-top:11px;
  filter:blur(3px);opacity:.5}
.lq-blur i{display:block;height:7px;border-radius:100px;background:var(--ink-4)}
.lq-blur i:nth-child(1){width:92%}
.lq-blur i:nth-child(2){width:78%}
.lq-blur i:nth-child(3){width:54%}

.lockedai-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:22px}
.lockedai-cta .sub{margin:0}

@media (max-width:620px){
  .lockedai{padding:22px 18px}
  .lockedai-qs{grid-template-columns:1fr}
}

/* Paket kartları · seçilebilir olduklarını hareketle söylüyorlar.
   Kartlar artık fırsat özetinin HEMEN altında: üstlerindeki üç
   paragraflık satış kapısı kaldırıldı, o yüzden kendi üst boşluklarını
   kendileri taşıyorlar. */
.scan-result .gatepicks{margin-top:14px}
.gpick{transition:border-color .16s,transform .16s,box-shadow .16s}
.gpick:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:var(--sh-md)}
.gpick.hi:hover{border-color:var(--sig)}
@media (prefers-reduced-motion:reduce){.gpick:hover{transform:none}}

/* Sayfa sonundaki iki dipnot · form ekranındakiyle aynı sönüklük. */
.scan-result .scanwrap>.note{background:none;border-color:var(--line);
  color:var(--ink-3);font-size:12px;padding:12px 15px}
.scan-result .scanwrap>.note svg{stroke:var(--ink-4)}
.scan-result .scanwrap>.note a{color:var(--ink-2);text-decoration:underline;
  text-underline-offset:2px}

@media (max-width:760px){
  /* Halka üstte, çubuklar altta: dikey çizgi burada anlamını yitiriyor. */
  .scan-result .scorehead{flex-direction:column;align-items:stretch;gap:22px;
    padding:22px}
  .scan-result .scorehead .dial{margin:0 auto}
  .scan-result .bars{padding-left:0;border-left:0;padding-top:20px;
    border-top:1px solid var(--line)}
}

/* ═══════════════════════════════════════════════════════════════════
   HESAP EKRANLARI · /register · /login
   (bkz. resources/views/pages/{register,login}.blade.php)

   ── ÖNCEKİ DURUM ──

   İki ekran da tek bir `.sec > .wrap(480px) > .card.pad` kutusuydu.
   O kalıp pazarlama sayfalarındaki yardımcı kutular için ölçülmüştü:
   78px'lik `.sec` üst boşluğu, ortalanmış `.wrap`, 20px'lik `.pad`.
   Sonuç, altı alanlı bir kayıt formunun 58px'lik ürün çubuğunun
   altında, geniş ekranın ortasında asılı duran dar ve kenarlıksız
   bir şerit gibi görünmesiydi — form uzadıkça sayfa boşaldı.

   ── KARAR · KAYIT İKİ KOLON, GİRİŞ TEK ──

   Kayıt ekranı checkout ile AYNI iskelete oturuyor (.colay: solda
   karar, sağda değişmeyen özet). Gerekçesi kozmetik değil: kullanıcı
   buraya fiyat sayfasından bir paket SEÇEREK geliyor ve bir sonraki
   ekranı da (checkout) aynı düzende görecek. İki ekran arasında
   kolonların yer değiştirmesi, akışı iki ayrı ürün gibi gösterir.

   Giriş ekranında sağ kolonda gösterilecek bir karar yok; orada tek
   kolon KALIYOR, yalnızca kartın kendisi bu bloktaki başlık, alan ve
   ayraç kurallarını paylaşıyor.

   ── DAR EKRANDA ÖZET FORMUN ALTINDA ──

   .cosum ile aynı davranış ve aynı gerekçe: dar ekranda özeti forma
   TAŞIMAK, kullanıcıyı ilk alana ulaşmadan önce bir ekran boyu
   kaydırmaya zorlar. Paket adı zaten kart başlığındaki çipte duruyor,
   yani bağlam kaybolmuyor.

   ── BU BLOK DOSYANIN SONUNDA ──

   Aşağıdaki birkaç seçici `.sec`, `.card` ve `.h2` gibi daha genel
   kuralları bilerek eziyor ve kendi dar ekran sorgusunu kendisi
   taşıyor; yukarıdaki 940/620px sorgularına güvenmiyor.
   ═══════════════════════════════════════════════════════════════════ */

/* Sayfa üstü ışıma · .scanpage'dekinin daha sönüğü. Amaç dekor değil
   derinlik: kart düz koyu zeminde kesilmiş kâğıt gibi duruyordu.
   z-index:-1 kullanıldığı için kap izole ediliyor. */
.aupage{position:relative;isolation:isolate;padding:44px 0 64px}
.aupage::before{content:"";position:absolute;left:0;right:0;top:0;height:360px;
  z-index:-1;pointer-events:none;
  background:radial-gradient(720px 300px at 50% -12%,var(--sig-soft),transparent 70%)}
.auwrap{max-width:1000px;margin:0 auto;padding:0 24px;width:100%}

/* ── .aumid · hesap ekranlarının dikey ortalanması ──────────────
   Giriş tek kartlık bir ekran: 44px'lik üst boşlukla başlayınca
   kart çubuğa yapışık duruyor, altında yarım ekran boşluk kalıyordu.
   Kayıt da paketle birlikte çoğu ekranda kısa kalıyor.

   Ortalama justify-content ile DEĞİL margin-block:auto ile yapılıyor.
   Fark, içerik kaptan uzun olduğunda ortaya çıkıyor: flex ortalamada
   taşan kısım kutunun ÜST kenarından çıkar ve kaydırma çubuğu oraya
   erişemez — 700px yüksekliğindeki bir dizüstünde kayıt formunun
   başlığı ve ilk alanı ulaşılamaz olurdu. Otomatik kenar boşluğu ise
   yer kalmadığında kendiliğinden 0'a düşüyor, sayfa normal akışına
   dönüyor. Bu yüzden ekstra bir @media koşulu da gerekmiyor. */
.app-shell:has(.aumid) .pmain{display:flex}
.aupage.aumid{flex:1;display:flex;padding-top:28px;padding-bottom:28px}
.aupage.aumid>.auwrap{margin-block:auto}
/* Işıma sayfanın tepesine değil kartın üstüne otursun: kart aşağı
   indiğinde tepede kalan hâlesi kabuğun altında asılı duruyordu. */
.aupage.aumid::before{top:0;bottom:0;height:auto;
  background:radial-gradient(720px 340px at 50% 22%,var(--sig-soft),transparent 70%)}

/* Sayfa girişi · ortalı. Altındaki bloklar sola dayalı kalıyor:
   başlık üç satır, form otuz satırdır. */
.auhead{text-align:center;max-width:56ch;margin:0 auto 26px}
.auhead h1{font-size:clamp(25px,2.6vw,30px);line-height:1.16;font-weight:700;
  letter-spacing:-.03em;margin-top:10px;text-wrap:balance}
.auhead p{font-size:14px;color:var(--ink-3);margin-top:10px;line-height:1.6;
  max-width:52ch;margin-inline:auto}

/* Kayıt: solda form, sağda özet. Ölçüler .colay ile birebir aynı —
   checkout'a geçerken kolon genişliği zıplamasın. */
.aulay{display:grid;grid-template-columns:1fr 336px;gap:22px;align-items:start}
.auside{position:sticky;top:80px;display:grid;gap:14px}

/* Giriş: tek kolon, aynı kart. */
.auwrap.solo{max-width:452px}

/* ── ORTALI HESAP KARTI ──────────────────────────────────────────────
   Giriş, kayıt ve şifre ekranlarının ortak kalıbı: tek kolon, dar
   kart, kart içinde her şey tek eksende. Rakiplerin tamamı (Topify,
   Peec, Otterly) bu kalıbı kullanıyor ve sebebi estetik değil: bu
   ekranda kullanıcının vereceği tek karar var, ikinci bir kolon o
   kararın yanına ikinci bir şey koymak demek.

   .bare · ETİKETLER GİZLİ.
   Yalnızca iki alanlı ekranlarda (giriş, şifre sıfırlama) açılıyor:
   orada "E-posta" etiketi, içine "ad@firma.com" yazan bir alanın
   üstünde gereksiz bir satır. Kayıt formunda AÇILMIYOR — beş alan
   ve biri isteğe bağlı; etiketi kaldırdığınızda kullanıcı
   yazmaya başladığı anda hangi alanda olduğunu unutuyor, "isteğe
   bağlı" işareti de etiketle birlikte kayboluyor.

   Etiketler görsel olarak gizleniyor, DOM'dan silinmiyor: ekran
   okuyucu ve otomatik doldurma ikisi de etikete bakıyor. */
.auwrap.auc{max-width:540px}
.auwrap.auc.auc-w{max-width:600px}
.auc .aucb{text-align:center}
/* Dolgu .aucard .aucb'den SONRA geldigi icin sinif zinciri uzun:
   iki secici de esit ozgullukte olsaydi dosyada sonra gelen kazanirdi
   ve hesap kartlari 24px'lik dar dolguya duserdi. */
.auc .aucard .aucb{padding:30px 32px 28px}

/* ── BAŞLIK KARTIN İÇİNDE ────────────────────────────────────────
   Eskiden .auhead kartın ÜSTÜNDE, boşlukta duruyordu: ekranda iki
   ayrı blok vardı ve "Giriş" sözcüğü hangi kutunun başlığı olduğunu
   söylemiyordu. Artık tek kutu (accounts.ikas.com kalıbı).

   Kart bu yüzden 436px'ten önce 496px'e, sonra 540px'e genişledi;
   kayıt ekranı (.auc-w) 486 → 520 → 600px. Tek gerekçe var: giriş ve
   kayıt spotu ALTI DİLDE DE TEK SATIR olmalı.

   Ölçü hesabı (yanlış hesaplamak kolay, sayıları yazıyorum):
   .auwrap'ın 24px yan dolgusu + kartın 32px dolgusu + 1px kenarlık
   iki yandan düşüyor. 540px kapta metin genişliği 426px, 600px kapta
   486px. Ölçülen en uzun metinler: giriş de ~408px, kayıt en ~449px,
   kayıt de ~462px. Yeni dil eklerken ya da metni uzatırken tarayıcıda
   `Range.getClientRects().length` ile satır sayısını doğrulayın.

   Zorlamalı bir nowrap kullanılmıyor; kutu yeterince geniş, dar
   ekranda ise satır kendiliğinden sarıyor ve hiçbir yerde taşma
   olmuyor. */
.auc .aucb>.auhead{max-width:none;margin:0 0 22px}
.auc .aucb>.auhead h1{font-size:clamp(23px,2.2vw,27px);margin-top:7px}
.auc .aucb>.auhead p{font-size:13.5px;max-width:none;margin-top:8px}
.auc .augrp{gap:13px;text-align:left}
.auc .btn-sub,.auc .btn-lg{width:100%;justify-content:center}
/* Onay kutusu ortada ama metni sola dayalı: iki satıra taşan ortalı
   bir onay metni, sözleşme değil slogan gibi okunuyor. */
.auc .ck2{justify-content:center;max-width:330px;margin-inline:auto}
.auc .aufoot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.auc .lgl{text-align:center}

.auc.bare .augrp{text-align:center}
.auc.bare .fld label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.auc.bare .fld input{text-align:center}
/* Şifre alanının sağında göz düğmesi var; metin ortalanınca sola
   doğru kayıyor gibi duruyordu. Soldan aynı boşluk veriliyor. */
.auc.bare .aupw input{padding-left:44px}
.auc.bare .ck2{justify-content:center}

/* Google düğmesi ve ayraç. Düğme formun ALTINDA, "veya" ayracından
   sonra: ana yol e-posta ve şifre, Google ikincil seçenek. Üstte
   durduğu sürümde ekranın ilk eylemi Google'dı ve form onun altında
   kalan bir alternatif gibi okunuyordu. */
.btn-g{background:var(--surface);border-color:var(--line-2);color:var(--ink);font-weight:600}
.btn-g:hover{background:var(--surface-2);border-color:var(--ink-4);color:var(--ink)}
/* Resmî dört renkli "G". Renkleri svg'nin kendi fill'lerinden geliyor;
   buradan yalnızca boyutu veriliyor — currentColor ya da stroke
   uygulanmamalı, aksi hâlde marka renkleri ezilir. */
.gmark{width:18px;height:18px;flex:0 0 auto;display:block}
/* Google düğmesinin altındaki yasal satır · kayıt formundaki zorunlu
   onay kutusunun karşılığı. Düğmeye YAPIŞIK duruyor (margin-top 9px,
   altındaki ayraç 15px): araya eşit boşluk konsaydı hangi eyleme ait
   olduğu okunmaz, bağımsız bir dipnot gibi görünürdü. */
.gterms{margin-top:9px;font-size:11.5px;line-height:1.55;color:var(--ink-4)}
.gterms a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.gterms a:hover{color:var(--ink)}

.orline{display:flex;align-items:center;gap:10px;margin:18px 0 15px;
  font-size:11.5px;color:var(--ink-4)}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}

/* Kayıt kartındaki paket özeti. Sağ kolondaki tam kartın yerine
   geçiyor: ad, tutar ve kapsam. "Sonraki adımlar" zaman çizelgesi
   buraya taşınmadı — aynı bilgi checkout'ta, kararın verildiği
   ekranda zaten duruyor. */
.pkgc{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface-2);padding:15px 16px;margin-bottom:18px}
.pkgc .ph{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pkgc .pp{display:block;font-size:21px;font-weight:700;letter-spacing:-.03em;margin-top:8px}
.pkgc .pt{font-size:12px;color:var(--ink-4);margin-top:3px}
.pkgc ul{list-style:none;margin:12px 0 0;padding:12px 0 0;display:grid;gap:5px;
  text-align:left;border-top:1px solid var(--line)}
.pkgc li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-2)}
.pkgc li svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;
  stroke:var(--sig);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pkgc li.off{color:var(--ink-4)}
.pkgc li.off svg{stroke:var(--ink-4)}
.pkgc .pf{font-size:11.5px;color:var(--ink-4);margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line)}

.aucard{border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-md);overflow:hidden}
/* Başlık şeridi tek satır: solda etiket, sağda paket çipi. Sarmıyor —
   iki öğe de kısa ve sarmasına izin verilen bir şerit, çipi ikinci
   satıra atıp bandı iki kata çıkarıyordu. */
.aucard .auch{padding:14px 24px;border-bottom:1px solid var(--line);
  background:var(--surface-2);display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.aucard .aucb{padding:22px 24px 24px}

/* Alan grubu · form artık altı eşit alanlık bir liste değil, üç
   adlandırılmış bölüm. Etiketin kendisi bir soru sormuyorsa
   (“Firma?”) kullanıcı neden istendiğini bölüm başlığından okuyor. */
.augrp{display:grid;gap:14px}
.augrp+.augrp{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.augh{margin-bottom:-2px}
.augl{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-4);display:block}
.augh p{font-size:12px;color:var(--ink-4);margin-top:4px;line-height:1.5}

/* Şifre alanı · göz düğmesi girdinin İÇİNDE, yanında değil. Yanına
   konan düğme iki kolonlu ızgarada alanı daraltıyor ve şifre tekrar
   alanıyla hizası kayıyordu. */
.aupw{position:relative}
.aupw input{padding-right:44px}
.aupw button{position:absolute;right:1px;top:1px;bottom:1px;width:40px;
  display:grid;place-items:center;color:var(--ink-4);border-radius:0;
  background:none;border:0;cursor:pointer;transition:.14s}
.aupw button:hover{color:var(--ink-2)}
.aupw button svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Girdiye odaklanınca halka düğmenin altından geçiyordu. */
.aupw input:focus~button{color:var(--ink-2)}

/* İki düğme · göz SAĞDA kalıyor. Şifre oluştur nadir kullanılan bir
   eylem, göz her yazımda kullanılıyor; sık olanın yeri alanlar
   arasında kaymamalı. Yalnız göz varken köşeyi o yuvarlıyor. */
.aupw:not(.has-gen) .pw-eye{border-radius:0 var(--r) var(--r) 0}
.aupw.has-gen input{padding-right:84px}
.aupw.has-gen .pw-eye{right:41px}
.aupw.has-gen .pw-gen{right:1px;border-radius:0 var(--r) var(--r) 0}
/* İnce ayraç: iki ikon bitişikken tek geniş düğme gibi görünüyordu. */
.aupw.has-gen .pw-gen::before{content:"";position:absolute;left:0;
  top:8px;bottom:8px;width:1px;background:var(--line-2)}

/* Şifre gücü · üç çubuk, yüzde değil. Yüzde veren gösterge kullanıcıya
   “%80 yeterli mi” diye sordurur; üç kademe yalnızca bir eşik bildirir.
   Ölçüm JS'te (common.js), kural sunucuda (min 8 karakter) kalıyor. */
.aups{display:flex;align-items:center;gap:8px;margin-top:8px}
.aups .bars{display:flex;gap:4px;flex:1}
.aups .bars i{height:3px;flex:1;border-radius:2px;background:var(--line-2);
  transition:background .16s}
.aups .lbl{font-size:11px;font-weight:600;color:var(--ink-4);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.aups[data-lvl="1"] .bars i:nth-child(1){background:var(--err)}
.aups[data-lvl="1"] .lbl{color:var(--err)}
.aups[data-lvl="2"] .bars i:nth-child(-n+2){background:var(--warn)}
.aups[data-lvl="2"] .lbl{color:var(--warn)}
.aups[data-lvl="3"] .bars i{background:var(--sig)}
.aups[data-lvl="3"] .lbl{color:var(--sig)}

/* Gönder düğmesi tam genişlik: kartın içindeki tek eylem o. */
.aucard .btn-sub{width:100%;justify-content:center}

/* Kart altı · giriş/kayıt geçişi ve şifre hatırlatma. Kart gövdesinin
   İÇİNDE değil ALTINDA: form bittiğinde kutu da bitmeli. */
.aufoot{margin-top:16px;text-align:center;font-size:13px;color:var(--ink-3);
  line-height:1.7}
.aufoot a{color:var(--sig);text-decoration:underline;text-underline-offset:2px}
.aufoot .quiet{display:block;font-size:12.5px;color:var(--ink-4);margin-top:6px}
.aufoot .quiet a{color:var(--ink-3)}

/* ── sağ kolon · seçilen paket ─────────────────────────────────────
   .sum'un kardeşi ama "toplam" satırı YOK: burada tahsilat yapılmıyor
   ve toplamı ödeme adımından önce göstermek, kullanıcının aklında bu
   ekranı bir ödeme ekranına çeviriyor. Paketin fiyatı, fiyat
   sayfasındaki kartla aynı biçimde duruyor. */
.aupkg{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden}
.aupkg .ph{padding:13px 17px;border-bottom:1px solid var(--line);
  background:var(--surface-2);display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.aupkg .ph span{font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4)}
.aupkg .pb{padding:16px 17px}
.aupkg .pn{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.aupkg .pn b{font-size:19px;font-weight:700;letter-spacing:-.03em}
.aupkg .pn .pp{text-align:right;white-space:nowrap}
.aupkg .pn .pp b{font-size:17px;font-variant-numeric:tabular-nums;display:block}
.aupkg .pn .pp small{font-size:11px;color:var(--ink-4);display:block;margin-top:2px}
.aupkg .pt{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.56}
/* Kapsam satırları .scope ile aynı görünüyor ama kendi ızgarasında:
   .scope kart genişliğinde bir tablo, bu 336px'lik kolonda o
   satırların sağdaki notu ikinci satıra düşüyor. */
.aupkg .pl{display:grid;gap:9px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);list-style:none}
.aupkg .pl li{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;
  color:var(--ink-2);line-height:1.5}
.aupkg .pl li svg{width:14px;height:14px;stroke:var(--sig);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto;margin-top:2px}
.aupkg .pl li.off{color:var(--ink-4)}
.aupkg .pl li.off svg{stroke:var(--ink-4)}
.aupkg .pf{font-size:11.5px;color:var(--ink-4);line-height:1.55;
  padding:12px 17px;border-top:1px solid var(--line);background:var(--surface-2)}

/* Sonraki adımlar · .tl zincirinin dar kolona ölçülmüş hâli. Kayıt
   düğmesine basınca ne olacağını SÖYLEMEK, "ödeme alınmaz" demenin
   inandırıcı hâli: sıra görünüyorsa söz denetlenebilir oluyor. */
.aunext{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:16px 17px 17px}
.aunext>span{font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:13px}
.aunext .tli{padding-bottom:14px}
.aunext .tli b{font-size:12.5px}
.aunext .tli p{font-size:11.5px;margin-top:3px}
.aunext .tli.now .tn{background:var(--sig);border-color:var(--sig);
  color:var(--sig-ink)}

@media (max-width:940px){
  /* Özet formun ALTINA iniyor · .cosum ile aynı gerekçe. */
  .aulay{grid-template-columns:1fr;gap:18px}
  .auside{position:static}
  .aupage{padding:30px 0 48px}
}
@media (max-width:620px){
  .auwrap{padding:0 16px}
  .aucard .auch{padding:16px 18px}
  .aucard .aucb{padding:18px}
  /* Geniş ekranın 32px'lik kart dolgusu burada geri alınıyor: kural
     medya sorgusunun DIŞINDA ve daha özgül, kendiliğinden düşmez. */
  .auc .aucard .aucb{padding:20px 18px 18px}
  .aucard{border-radius:var(--r-lg)}
  /* İki kolonlu alan çiftleri (ad+telefon, şifre+tekrar) tek kolona
     iniyor; .f2c'nin genel kuralı 940px'te değil 620px'te devreye
     giriyor, bu ekranda ondan önce sıkışmıyor. */
  .auhead{margin-bottom:20px}
  .auc .aucb>.auhead{margin-bottom:18px}
}

/* ═══════════════════════════════════════════════════════════════════
   İLETİŞİM SAYFASI · /iletisim
   (pages/contact.blade.php · yan sütundaki iletişim kartları)

   NEDEN AYRI BİR BİLEŞEN
   ──────────────────────
   Sayfa önceden alt bilginin `.fcontact` sınıfını kullanıyordu, ama o
   kural `.foot .fcontact` diye YAZILMIŞ: alt bilginin dışında hiçbir
   şey uygulanmıyordu. Görünen düzeni ayakta tutan tek şey şablondaki
   satır içi `style` idi. Bu yüzden kart burada kendi adıyla tanımlı.

   SATIR YAPISI
   ────────────
   Her satır üç parça taşıyor: simge, ETİKET ("E-posta"), DEĞER
   (adresin kendisi). Etiket şart, çünkü yalnızca simge gösterildiğinde
   +90'lı bir numara ile bir KEP adresi aynı görünüyor. Etiket üstte ve
   küçük; okuyan önce neye baktığını, sonra değeri görüyor.

   Satırlar arası çizgi ile ayrılıyor, kutu ile değil: kutulara
   bölünmüş üç satır, üç ayrı bölüm izlenimi veriyor — oysa bunlar tek
   bir künyenin kalemleri.
   ═══════════════════════════════════════════════════════════════════ */

.ctcard{padding:20px 22px}
.ctcard>.eyebrow{display:block}

/* <address> varsayılan olarak italik; künye burada bir alıntı değil
   veri, düz yazılıyor. */
.ctlist{font-style:normal;margin-top:6px}

/* Simge satırın TAMAMINA göre ortalanıyor (align-items:center), etikete
   ya da değere göre değil. Sabit bir margin ile hizalamak, satır iki
   satırdan üçe çıktığı anda (telefon + çalışma saatleri) bozuluyordu. */
.ctrow{display:flex;align-items:center;gap:12px;
  padding:13px 0;border-top:1px solid var(--line)}
.ctrow:first-child{border-top:0}
.ctrow>.ico{width:16px;height:16px;color:var(--ink-4);transition:color .14s}
.ctrow .ctb{min-width:0;display:block}

.ctrow .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4)}
/* Uzun bir e-posta ya da KEP adresi dar sütunda taşmasın; kelime
   ortasından bölmek yerine tarayıcıya izin verilen yerden bölmesi
   söyleniyor. */
.ctrow .v{display:block;font-size:13.5px;color:var(--ink-2);
  margin-top:5px;line-height:1.55;overflow-wrap:anywhere;transition:color .14s}
/* İkincil satır (çalışma saatleri). Değerin ALTINDA duruyor:
   numaranın yanına yazılsaydı numaranın parçası gibi okunurdu. */
.ctrow .s{display:block;font-size:11.5px;color:var(--ink-4);margin-top:4px}

/* Tıklanabilir satır yalnızca <a> olanlar; adres satırı bir bağlantı
   değil ve öyleymiş gibi de görünmüyor. */
a.ctrow:hover .v{color:var(--ink)}
a.ctrow:hover>.ico{color:var(--sig)}

/* "Künyenin tamamı" · kartın son satırı değil, kartın altındaki
   çıkış. Bu yüzden çizginin üstünde değil altında ve daha küçük. */
.ctmore{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:12.5px;font-weight:600;color:var(--sig);transition:gap .14s}
.ctmore:hover{gap:9px}
.ctmore .ico{width:14px;height:14px}

/* GÖNDER + KVKK · yan yana.
   Onay metni düğmenin altında kalırsa, gönderdikten sonra okunmuş
   olur. Yanında durunca düğmeye uzanan göz metni de görüyor. */
.ctsend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.ctsend .btn{flex:0 0 auto}
.ctkvkk{flex:1 1 240px;font-size:11.5px;color:var(--ink-4);line-height:1.6;margin:0}
.ctkvkk a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.ctkvkk a:hover{color:var(--ink-2)}

/* ── SAYFA DÜZENİ · form üstte, kanal altında ────────────────────────
   Sayfanın tek işi form olduğu için form da tek sütunda ve ortada.
   760px: iki alanlı satırlar rahat sığıyor, konu ızgarası dört
   sütun açabiliyor. */
.ctop{max-width:620px;margin:0 auto 30px;text-align:center}
.ctop .eyebrow{display:block;margin-bottom:10px}
.ctop .lede{margin:12px auto 0;max-width:56ch}
.ctform{max-width:760px;margin:0 auto;padding:6px 32px 30px;position:relative;
  overflow:hidden}
/* Kartın üst kenarındaki ince sinyal çizgisi · formu sayfanın geri
   kalanından ayıran tek süs. */
.ctform::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--sig),var(--sig-line) 70%,transparent)}
.ctnote{max-width:760px;margin:0 auto 16px}

/* Kanal kartı · her dilde yalnızca e-posta (16.09.2026'dan beri telefon
   ve adres hiçbir dilde yok). Tek kart ortada, formdan dar. */
.ctbelow{max-width:360px;margin:18px auto 0;display:grid;gap:12px}
/* Kart içinde tek satır var: kartın kendi dolgusu yeterli. */
.ctbelow .ctcard{padding:14px 18px}
.ctbelow .ctrow{padding:0;border-top:0;justify-content:center}

/* ── ADIMLAR ─────────────────────────────────────────────────────────
   Form dört numaralı bölüm: konu, iletişim, bağlam, mesaj. Bölümler
   kutuyla değil ince çizgiyle ayrılıyor; kutu içinde kutu kartı
   ağırlaştırıyordu. <fieldset> ve <section> aynı sınıfı taşıyor. */
.ctstep{border:0;margin:0;min-width:0;padding:24px 0 22px;
  border-top:1px solid var(--line)}
/* İlk adım (konu) kartın başında; üstünde çizgi yok. :first-of-type
   kullanılamaz: <section> adımlarının ilki de eşleşiyordu. */
.ctstep.ctchips{border-top:0}
.ctstep-h{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 14px;
  font-size:14.5px;font-weight:650;letter-spacing:-.005em;color:var(--ink);
  line-height:1.3}
/* <legend> float olmadan flex almıyor; float bu kutuyu fieldset'in
   akışına sokuyor, ardından gelen blok temizliyor. */
fieldset.ctstep>legend.ctstep-h{float:left;width:100%}
fieldset.ctstep>legend.ctstep-h+*{clear:both}
.ctnum{display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:50%;flex:0 0 auto;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--sig);background:var(--sig-soft);
  border:1px solid var(--sig-line)}

/* "İsteğe bağlı" · etiketin yanında, sönük. Zorunlu alanlarda işaret
   yok: üç zorunlu alana yıldız koymak yerine yedi isteğe bağlı alanı
   işaretlemek ziyaretçiye "bunları atlayabilirsin" diyor. */
.ctopt{font-weight:500;color:var(--ink-4);font-size:11px;margin-left:4px}
.ctopt::before{content:"· "}

/* Mesaj altı · yardım metni solda, sayaç sağda. */
.ctmsgfoot{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.ctmsgfoot .hlp{flex:1 1 auto}
.ctcount{flex:0 0 auto;margin-top:6px;font-size:11.5px;color:var(--ink-4);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ctcount.yakin{color:var(--err)}

/* ── GÖNDER + KVKK · yan yana ─────────────────────────────────────────
   Onay metni düğmenin altında kalırsa, gönderdikten sonra okunmuş
   olur. Yanında durunca düğmeye uzanan göz metni de görüyor. */
.ctsend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line)}
.ctsend .btn{flex:0 0 auto}
.ctkvkk{flex:1 1 240px;font-size:11.5px;color:var(--ink-4);line-height:1.6;margin:0}
.ctkvkk a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.ctkvkk a:hover{color:var(--ink-2)}

/* ── KONU KUTUCUKLARI ────────────────────────────────────────────────
   Görsel olarak kutucuk, anlamsal olarak radyo grubu. Gerçek input'lar
   duruyor ve YALNIZCA GÖRSEL OLARAK gizli: display:none yazılsaydı
   klavyeyle gezilemez, ekran okuyucuya da görünmezlerdi.
   Odak halkası input'un değil kutucuğun üstünde çiziliyor. */
.ctchips .opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.ctchips .opts label{position:relative;cursor:pointer;display:block}
.ctchips .opts input{position:absolute;inset:0;opacity:0;width:100%;height:100%;
  margin:0;cursor:pointer;appearance:none}
/* Seçiciler .opts'a bağlı: fieldset'in içindeki başka span'lar
   (adım numarası, "isteğe bağlı" işareti) kutucuk olmasın. */
.ctchips .opts span{display:flex;align-items:center;gap:9px;min-height:44px;height:100%;
  padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:13px;font-weight:500;line-height:1.3;color:var(--ink-2);
  background:var(--surface);
  transition:border-color .14s,background .14s,color .14s,box-shadow .14s}
.ctchips .opts span .ico{width:16px;height:16px;color:var(--ink-4);transition:color .14s}
.ctchips .opts label:hover span{border-color:var(--ink-4);color:var(--ink)}
.ctchips .opts input:checked+span{border-color:var(--sig);background:var(--sig-soft);
  color:var(--sig);font-weight:600;box-shadow:inset 0 0 0 1px var(--sig)}
.ctchips .opts input:checked+span .ico{color:var(--sig)}
.ctchips .opts input:focus-visible+span{outline:2px solid var(--sig);outline-offset:2px}

/* Sipariş numarası · yalnızca "Mevcut sipariş" seçiliyken.
   :has() yoksa alan hep görünür — gizleme yalnızca destek varsa. */
.ctif-order{margin-top:14px;max-width:340px}
@supports selector(:has(*)){
  .ctif-order{display:none}
  .ctchips:has(input[data-konu="order"]:checked) .ctif-order{display:block}
}

/* Danışmanlık alanları · yalnızca "Danışmanlık" seçiliyken.
   Sipariş numarasıyla aynı kalıp: :has() yoksa alanlar hep görünür,
   gizleme yalnızca destek varsa. Talep kalitesini bu iki alan
   belirliyor, çünkü danışmanlık satışı formdan sonra konuşmayla
   yürüyor: hangi kademeye baktığı ve elinde rapor olup olmadığı
   ilk cevabın ne olacağını değiştiriyor. */
.ctif-consult{margin-top:14px;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@supports selector(:has(*)){
  .ctif-consult{display:none}
  .ctchips:has(input[data-konu="consulting"]:checked) .ctif-consult{display:grid}
}
@media (max-width:720px){.ctif-consult{grid-template-columns:1fr}}

@media (max-width:720px){
  .ctform{padding:4px 22px 24px}
  .ctchips .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctif-order{max-width:none}
}

@media (max-width:620px){
  /* Dar ekranda düğme tam genişlikte ve metin ALTINA iniyor: yan yana
     kalsalardı düğme 120px'e sıkışırdı. */
  .ctsend{gap:12px}
  .ctsend .btn{width:100%;justify-content:center}
  .ctcard{padding:18px}
  .ctform .f2c{grid-template-columns:1fr}
  .ctmsgfoot{flex-direction:column;gap:0}
}

@media (max-width:380px){
  .ctchips .opts{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   YÖNTEM SAYFASI · /tr/yontem · /en/method
   (pages/method.blade.php)

   NEDEN KENDİ BLOĞU VAR
   ─────────────────────
   Sayfa daha önce ana sayfanın bileşenlerini ödünç alıyordu: .sechd,
   .findings, .steps. Üçü de bir bölümün İÇİNDE, ortalanmış bir giriş
   bloğunun ardında kullanılmak üzere yazılmış. Buradaki kullanım
   farklı: sayfanın TAMAMI gövde metni, altı bölüm arka arkaya geliyor.

   .sec>.wrap{text-align:center} kuralının yanındaki muafiyet listesi
   (.card, .step, .subline …) .sechd ile .findings'i saymıyordu; o iki
   blok ortalanmış basılıyordu. Ortalanmış bir başlıkla sola dayalı
   açıklamasının yan yana durması, sayfanın hizasız görünmesinin
   sebebiydi. Muafiyet listesine iki sınıf daha eklemek yerine sayfaya
   kendi kapsayıcısı verildi (.methodpage): bu sayfada ortalanan tek
   şey giriş bloğu, geri kalanı sola dayalı.

   Kapsam .methodpage ile sınırlı. Tarama sonucu ve fiyat sayfaları
   aynı sınıfları başka bir bağlamda kullanmaya devam ediyor; oradaki
   ortalama BİLEREK öyle ve buradan bozulmuyor.

   RENK SÖZLÜĞÜ (sayfa boyunca aynı)
   ─────────────────────────────────
   Yeşil (--sig) · yapay zekâya SORULARAK ölçülen bileşenler
   Mor  (--op)  · soru sormadan ölçülenler (ücretsiz taramanın kapsamı)
   Sarı (--warn) · bilinen sınırlar, yani söz VERMEDİĞİMİZ yerler

   Bu üç renk sayfada başka hiçbir anlamda kullanılmıyor. Kurulum
   kapsamındaki yeşil de aynı sözlükten değil — orası "yapılan iş"
   demek — bu yüzden kurulum sütunları renkle değil SİMGE ile
   ayrılıyor; ✓ ile –, renk körü bir okuyucuda da ayırt edilir.
   ═══════════════════════════════════════════════════════════════════ */

/* Seçici `.sec>.wrap` ile AYNI ağırlıkta olsaydı dosyadaki sırası
   kararı verirdi; `.sec>.wrap.methodpage` bir sınıf daha taşıyor ve
   sıradan bağımsız kazanıyor. */
.sec>.wrap.methodpage{text-align:left;max-width:1000px}

/* Giriş bloğu ortalı kalıyor: etiket, başlık, lede. Başlığın kendi
   max-width'i (24ch) burada kalkıyor, cümle 55 karakter. */
.sec>.wrap.methodpage>.eyebrow,
.sec>.wrap.methodpage>.h2,
.sec>.wrap.methodpage>.lede{text-align:center}
.methodpage>.h2{max-width:none;margin-left:auto;margin-right:auto}
/* Genişlik artık genel bölüm girişi kuralından (.sec>.wrap>.lede, 72ch)
   geliyor; eski 62ch sınırı kalktı ki yöntem sayfasının girişi diğer
   sayfalardakiyle aynı ölçüde okunsun. Burada yalnızca ortalama kalıyor. */
.methodpage>.lede{margin-left:auto;margin-right:auto}

/* ── Yürürlükteki sürüm şeridi ─────────────────────────────────────
   Kutu değil ŞERİT: üstünde ve altında çizgi, iki yana dayalı. Bir
   kart olsaydı sayfadaki diğer kartlarla aynı ağırlıkta okunurdu,
   oysa bu bir künye satırı — sayfanın konusu değil, damgası. */
.mver{display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;margin-top:34px;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mver h2{font-size:14px;font-weight:650;letter-spacing:-.01em}
.mver p{font-size:13px;color:var(--ink-3);line-height:1.62;
  margin-top:6px;max-width:66ch}
.mver .chip{flex:0 0 auto;height:28px;margin-top:2px}

/* ── Bölüm başlığı ─────────────────────────────────────────────────
   Numara + başlık + başlıktan sonra sayfa sonuna kadar uzanan ince
   çizgi. Çizgi süs değil: bölüm başlıkları 16px'ti ve gövde metninden
   ayırt edilemiyordu; puntoyu büyütmek yerine başlığa yatay bir
   duraklama verildi, sayfa altı bölüm olduğunu ilk bakışta söylüyor.

   Numara mono ve sönük · bölümler numaralı ama numara bir sıralama
   iddiası taşımıyor, yalnızca yeri işaretliyor. */
.mhd{margin:56px 0 18px}
.mhd:first-of-type{margin-top:44px}
.mhd .row{display:flex;align-items:center;gap:12px}
.mhd .n{font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11.5px;font-weight:600;color:var(--ink-4);letter-spacing:0;
  flex:0 0 auto}
.mhd h2{font-size:20px;font-weight:650;letter-spacing:-.022em;flex:0 0 auto}
/* Çizgi kalan boşluğu yiyor; başlık uzadıkça kısalıyor, hiç sarmıyor. */
.mhd .rule{flex:1 1 auto;height:1px;background:var(--line);min-width:24px}
.mhd p{font-size:13px;color:var(--ink-4);margin-top:7px;
  padding-left:31px;max-width:70ch}

/* ── Ağırlıklar ────────────────────────────────────────────────────
   Eski çubuklar yüzdeyi 2.6 ile ÇARPARAK çiziyordu: %35 ekranda
   %91 genişliğinde duruyordu. Sayfanın tamamı "ölçüyü olduğu gibi
   raporlarız" diyorken, sayfadaki tek grafiğin ölçeği abartması
   savunulabilir değildi.

   Yerine tek bir %100 çubuk geldi. Dört bileşen bir bütünü paylaşıyor;
   dört ayrı çubuk bunu göstermiyordu, dört ayrı sayı gibi okunuyordu.
   Genişlikler gerçek: %35 çubuğun %35'i. */
.wstack{display:flex;height:34px;border-radius:var(--r);overflow:hidden;
  background:var(--surface-3);gap:2px}
.wstack .seg{position:relative;display:grid;place-items:center;min-width:0;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
/* Yazı segmentin İÇİNDE ve zemine göre koyu: mor/yeşil dolgunun
   üstünde açık gri okunmuyordu. */
.wstack .seg.asked{background:var(--sig);color:var(--sig-ink)}
.wstack .seg.static{background:var(--op);color:var(--op-ink)}

/* Çubuğun altındaki iki grup etiketi · yeşil ikisi ile mor ikisinin
   toplamı. Ücretsiz taramanın kapsamını (%45) çubuğun kendisinden
   okutuyor, dipnottan değil. */
.wgroups{display:flex;gap:2px;margin-top:7px}
.wgroup{display:flex;align-items:center;gap:7px;min-width:0;
  font-size:11.5px;color:var(--ink-4);padding-top:7px;
  border-top:1px solid var(--line)}
.wgroup .dot{width:6px;height:6px;border-radius:100px;flex:0 0 auto}
.wgroup b{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wgroup span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Bileşen satırları · çubuğun okunuşu. İki sütun: dar ekranda tek. */
.wlist{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  margin-top:26px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.wlist .wi{background:var(--surface);padding:16px 18px}
.wi .k{display:flex;align-items:baseline;gap:9px}
.wi .k .dot{width:7px;height:7px;border-radius:100px;flex:0 0 auto;
  align-self:center}
.wi .k b{font-size:14px;font-weight:650;flex:1 1 auto}
.wi .k .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.wi p{font-size:12.5px;color:var(--ink-4);line-height:1.6;margin-top:7px}

/* ── Dört kural ────────────────────────────────────────────────────
   Numara kartın SIRT numarası: büyük, sönük ve sağ üstte. Metnin
   akışına girmiyor, kartı sayılabilir kılıyor. */
.mrules{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.mrule{position:relative;background:var(--surface);padding:22px 24px 24px}
.mrule .n{position:absolute;top:16px;right:20px;
  font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-size:22px;font-weight:600;color:var(--line-2);
  letter-spacing:-.02em;pointer-events:none}
.mrule h3{font-size:15.5px;font-weight:650;letter-spacing:-.015em;
  padding-right:44px}
.mrule p{font-size:13.5px;color:var(--ink-3);line-height:1.66;margin-top:9px}
.mrule p b{color:var(--ink);font-weight:600}

/* ── Ölçülen yapay zekâlar ─────────────────────────────────────────
   Motorlar önceden zeminin üstünde serbest duruyordu; sayfadaki tek
   çerçevesiz blok oydu ve altındaki nota ait bir başlık gibi
   görünüyordu. Kart, listeyi bölümün gövdesi hâline getiriyor. */
.mengines{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 24px}
.mengines .englist{margin:0;flex-wrap:wrap;gap:14px 34px}
.mengines .enote{font-size:12.5px;color:var(--ink-4);line-height:1.65;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.mengines .enote b{color:var(--ink-3);font-weight:600}

/* ── Kurulum kapsamı ───────────────────────────────────────────────
   İki sütun. Tek listede "(kapsam dışı)" eki her satırın SONUNDA
   duruyordu: okuyan satırı okuyup bitirene kadar hangi listede
   olduğunu bilmiyordu. Sütun başlığı bunu satır başına taşıyor ve
   ekin kendisi gereksizleşiyor.

   İki sütun aynı yükseklikte durmuyor (4'e 4 ama satırlar farklı
   uzunlukta sarabilir); grid'in align-items:start'ı kutuların
   birbirini germesini engelliyor. */
.mscope{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.mscol{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.mscol h3{display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.mscol h3 .c{margin-left:auto;font-variant-numeric:tabular-nums;
  color:var(--ink-4);font-weight:600;letter-spacing:0}
.mscol ul{list-style:none}
.mscol li{display:flex;align-items:flex-start;gap:11px;
  padding:12px 18px;font-size:13.5px;line-height:1.55;
  border-top:1px solid var(--line)}
.mscol li:first-of-type{border-top:0}
.mscol .ico{width:15px;height:15px;margin-top:2px}
/* Yapılanlar tam kontrastta, yapılmayanlar bir ton sönük: ikisi aynı
   ağırlıkta basılsaydı sayfa sekiz iş yaptığımızı söylerdi. */
.mscol.is-in li{color:var(--ink-2)}
.mscol.is-in .ico{color:var(--sig)}
.mscol.is-out li{color:var(--ink-4)}
.mscol.is-out .ico{color:var(--ink-4)}

/* ── Bilinen sınırlar ──────────────────────────────────────────────
   Sarı şerit sol kenarda ve satırın TAMAMI boyunca: maddeler
   "dikkat" değil "sınır", göz onları tek blok olarak görmeli. */
.mlimits{border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--line)}
.mlim{display:flex;gap:16px;padding:18px 20px;background:var(--surface)}
.mlim+.mlim{margin-top:1px}
.mlim .bar{width:3px;border-radius:100px;background:var(--warn);
  flex:0 0 auto;align-self:stretch;opacity:.7}
.mlim h3{font-size:14px;font-weight:650;letter-spacing:-.01em}
.mlim p{font-size:13px;color:var(--ink-3);line-height:1.66;margin-top:7px}
.mlim p b{color:var(--ink);font-weight:600}

/* Sayfa sonu notları · sola dayalı, gövdenin devamı. */
.methodpage .scorenote,.methodpage .disclaim{text-align:left;max-width:none}

@media (max-width:860px){
  .mrules,.mscope,.wlist{grid-template-columns:1fr}
  /* Tek sütuna inen ızgarada 1px'lik boşluk çizgi görevini
     sürdürüyor; ayrıca bir kenarlık gerekmiyor. */
  .mver{flex-direction:column;gap:14px}
  .mver .chip{margin-top:0}
}

@media (max-width:620px){
  .mhd{margin:42px 0 16px}
  .mhd h2{font-size:18px}
  .mhd p{padding-left:0}
  .mrule{padding:18px 18px 20px}
  .mengines{padding:20px 18px}
  .mscol li{padding:11px 15px}
  .mlim{padding:15px 16px;gap:13px}
  /* Dar çubukta segment yazıları sığmıyor; yüzdeler zaten alttaki
     listede duruyor, çubuk yalnızca oranı gösteriyor. */
  .wstack{height:24px}
  .wstack .seg{font-size:0}
  /* Etiketler alt alta. Şablon her etikete satır içi bir `flex` yazıyor
     (çubukla aynı oranda genişlesinler diye); sütun yönünde o oran
     YÜKSEKLİĞE uygulanır ve flex-basis:0 olan kutular sıfır yükseklikte
     çizilir. Satır içi bildirimi geçmenin tek yolu !important. */
  .wgroups{flex-direction:column;gap:0}
  .wgroup{flex:0 0 auto!important;padding:7px 0}
}

/* ═══════════════════════════════════════════════════════════════════
   YAPIM AŞAMASI BİLDİRİMİ
   (partials/construction.blade.php · panelden açılıp kapanır)

   Dosyanın SONUNDA: hiçbir sayfanın kalıcı parçası değil, geçici bir
   katman. Kaldırılacağı gün silinecek tek blok bu olsun.

   position:fixed + inset:0 · sayfa kaydırması KİLİTLENMİYOR. Kutu bir
   onay penceresi değil bir bildirim; arkasındaki sayfayı okunamaz ya
   da kaydırılamaz kılmanın gerekçesi yok. Kilitlenseydi, kutuyu
   kapatmadan sayfayı gözden geçirmek imkânsız olurdu — oysa
   ziyaretçiyi buraya davet etme sebebimiz tam olarak o.
   ═══════════════════════════════════════════════════════════════════ */

.cmodal{position:fixed;inset:0;z-index:60;display:flex;
  align-items:center;justify-content:center;padding:20px}

/* Zemin TIKLANINCA KAPATIYOR (data-yapim-kapat). Kutunun dışına
   tıklamak "kapat" demektir ve bunu desteklemeyen bir katman,
   kapatma düğmesini bulamayan kullanıcıyı tuzağa düşürür. */
.cmodal-bg{position:absolute;inset:0;background:var(--scrim);
  backdrop-filter:blur(3px);cursor:pointer}

.cmodal-box{position:relative;width:100%;max-width:460px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  padding:26px 26px 24px;text-align:left}
.cmodal-box>.chip{margin-bottom:14px}
.cmodal-box h3{font-size:19px;letter-spacing:-.02em;line-height:1.35;margin:0}
.cmodal-box p{margin:11px 0 0;font-size:14px;line-height:1.65;color:var(--ink-3)}
.cmodal-box p b{color:var(--ink-2);font-weight:600}
/* Düğme tam genişlikte: kutuda tek eylem var ve sağa yaslanmış bir
   düğme, ikinci bir seçenek varmış izlenimi bırakıyor. */
.cmodal-box .btn{width:100%;justify-content:center;height:46px;margin-top:20px}

@media (max-width:620px){
  .cmodal{padding:16px;align-items:flex-end}
  .cmodal-box{padding:20px 20px 18px;border-radius:var(--r-lg)}
}

/* Hareketi azaltılmış tercihte animasyon yok · zaten yok, ama kutu
   ileride kayarak gelecek olursa bu kural yerinde dursun. */
@media (prefers-reduced-motion:reduce){
  .cmodal,.cmodal-box{animation:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   ÇEREZ ONAY KUTUSU
   (partials/cookie-consent.blade.php · ilk sayfa görüntülemesinde bir kez)

   SOL ALTTA KÜÇÜK KART, MODAL DEĞİL (16.09.2026 · eskiden tam
   genişlik alt şeritti). Yalnızca ilk sayfada çıkar. Sayfayı karartmıyor, kaydırmayı
   kilitlemiyor, odağı çalmıyor. Gerekçesi hukuki olduğu kadar
   pratik: onay vermeden de siteyi kullanmak mümkün olmalı ve
   içeriği göremeyen ziyaretçi "kabul"e sırf kurtulmak için basar —
   o onay özgür iradeyle verilmiş sayılmaz.

   z-index 55 · yapım bildiriminin (60) ALTINDA. İkisi aynı anda
   açıksa üstte duran, ziyaretçinin önce kapatacağı kutu olmalı.
   ═══════════════════════════════════════════════════════════════════ */

.czbar{position:fixed;left:16px;bottom:16px;z-index:55;
  width:340px;max-width:calc(100vw - 32px);pointer-events:none}

.czbox{pointer-events:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:14px 16px}

.cztext strong{display:block;font-size:13.5px;letter-spacing:-.01em;color:var(--ink-1)}
.cztext p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.cztext a{color:var(--sig);text-decoration:underline;text-underline-offset:2px}

/* İki düğme EŞİT boyutta ve yan yana. Reddi küçültmek ya da bir
   "ayarlar" ekranının arkasına saklamak rızayı sakatlar. */
.czact{display:flex;gap:8px;margin-top:12px}
.czact form{margin:0;flex:1 1 0}
.czact .btn{width:100%;justify-content:center;height:34px;padding:0 10px;
  font-size:13px;white-space:nowrap}

@media (max-width:420px){
  .czbar{left:10px;bottom:10px;max-width:calc(100vw - 20px)}
}

/* Yıkıcı eylem düğmesi · hesap silme.

   Zemin DEĞİL kenarlık ve yazı renkleniyor: dolu kırmızı bir düğme
   göz için "buraya bas" demektir ve bu düğme tam tersini söylemeli.
   Ayrıca ekranda tek başına duruyor, yani vurguya ihtiyacı yok. */
.btn-d{border-color:var(--err-line);color:var(--err)}
.btn-d:hover{border-color:var(--err);color:var(--err);background:var(--err-bg)}

/* ── ÜCRETSİZ ARAÇLAR · /araclar ─────────────────────────────────── */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;text-align:left}
.tool{display:flex;flex-direction:column;gap:9px;padding:18px;transition:border-color .15s}
.tool:hover{border-color:var(--line-2)}
.tool-ic{width:34px;height:34px;border-radius:9px;background:var(--surface-3);
  display:grid;place-items:center;color:var(--sig)}
.tool-ic .ico{stroke-width:1.8}
.tool h3{font-size:15px;font-weight:650;letter-spacing:-.01em}
.tool p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0}
.tool-cta{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--sig)}
/* Kart başlığı · ikon solda, "nerede çalışır" rozeti sağda. */
.tool-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tool-tag{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:100px;
  border:1px solid var(--line);background:var(--surface-2);
  font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
/* Kartın içindeki üç madde · menüden düşen ayrıntı buraya taşındı. */
.tool-pts{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;
  padding-top:11px;border-top:1px solid var(--line)}
.tool-pts li{position:relative;padding-left:16px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.tool-pts li::before{content:"";position:absolute;left:3px;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--sig);opacity:.65}
/* Giriş gerekmez · Kayıt istemez · Sonuç anında */
.factline{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0}
.factline li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:550;color:var(--ink-3)}
.factline .ico{stroke:var(--sig);stroke-width:2.4;flex:0 0 auto}
.tool-lay{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;
  margin-top:30px;text-align:left}
.tool-note{font-size:12.5px;color:var(--ink-4);line-height:1.55;margin-top:12px;max-width:none}
.tool-out .outhd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tool-out .outhd .t{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
pre.out{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;font-family:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);font-size:12.5px;
  line-height:1.55;color:var(--ink-2);overflow-x:auto;white-space:pre;max-height:460px;overflow-y:auto}
pre.out:not(.dolu){color:var(--ink-4);white-space:pre-wrap;font-family:inherit;font-size:13.5px}
.tool-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.tool-sum .k{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.tool-sum .k b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tool-sum .k span{font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tool-sum .k.ok b{color:var(--ok)}.tool-sum .k.err b{color:var(--err)}.tool-sum .k.warn b{color:var(--warn)}
.botrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.botrow:first-child{border-top:0}
.botrow .b{font-size:12.5px;color:var(--ink)}
.botrow .who,.botrow .basis{color:var(--ink-4);font-size:12px}
.botrow .chip i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.tool-upsell{margin-top:34px;padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--sig-line);
  background:linear-gradient(135deg,var(--sig-soft),transparent 70%);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:14px;text-align:left}
.tool-upsell b{display:block;font-size:15px}
.tool-upsell p{font-size:13px;color:var(--ink-2);margin:3px 0 0;max-width:none}
@media(max-width:860px){.tool-lay{grid-template-columns:1fr}}
@media(max-width:760px){.tools{grid-template-columns:1fr}}
@media(max-width:480px){.tool-sum{grid-template-columns:1fr 1fr}.botrow{grid-template-columns:1fr auto}.botrow .basis{display:none}}

/* ── MOTOR BAZLI DURUM · Öneriyor / Tanıyor / Anmıyor ──────────────
   Üst kenar rengi durumu taşıyor: yeşil/sarı/kırmızı. Sınıflandırma
   yoksa nötr çizgi — bilmediğimiz şeye renk vermiyoruz. */
.engstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:4px}
.engstat .es{display:flex;flex-direction:column;gap:5px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  border-top:3px solid var(--line-2)}
.engstat .es.ok{border-top-color:var(--ok)}
.engstat .es.warn{border-top-color:var(--warn)}
.engstat .es.err{border-top-color:var(--err)}
.engstat .en{font-size:13px;font-weight:650;color:var(--ink-2)}
.engstat .st{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink-3)}
.engstat .es.ok .st{color:var(--ok)}
.engstat .es.warn .st{color:var(--warn)}
.engstat .es.err .st{color:var(--err)}
.engstat .hint{font-size:12px;color:var(--ink-4);line-height:1.45}
.engstat .cnt{font-size:12px;color:var(--ink-3);margin-top:4px}
.engstat .cnt b{color:var(--ink);font-weight:600}

/* ── BLOG VE SÖZLÜK · /blog, /sozluk ────────────────────────────────
   Liste kartları araç kartlarıyla aynı iskelet (.tool). Uzun metin
   tipografisi .prose: legal sayfasındaki .legaldoc kurallarının
   Markdown çıktısı için tekrarı — o kurallar sayfaya gömülü, burada
   da gerekli. ---------------------------------------------------- */
.crumb{display:inline-flex;font-size:13px;color:var(--ink-3);font-weight:500}
.crumb:hover{color:var(--ink)}
.cats-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.cats-nav a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:100px;
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.cats-nav a:hover{color:var(--ink);border-color:var(--line-2)}
.cats-nav a.on{background:var(--sig-soft);border-color:var(--sig-line);color:var(--sig)}
.posts,.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;text-align:left}
.post,.term{display:flex;flex-direction:column;gap:9px;padding:18px;transition:border-color .15s}
.post:hover,.term:hover{border-color:var(--line-2)}
.post h2,.term h2{font-size:16px;font-weight:650;letter-spacing:-.01em;line-height:1.35;margin:0}
.post p,.term p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0;max-width:none}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--ink-4)}
.post-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:12px;color:var(--ink-4);padding-top:6px}
.post-foot .tool-cta{margin-top:0}
.prose{max-width:74ch;line-height:1.75;color:var(--ink-2);font-size:14.5px}
.prose h1{font-size:26px;color:var(--ink);margin:0 0 18px;letter-spacing:-.02em;line-height:1.25}
.prose h2{font-size:19px;color:var(--ink);margin:30px 0 10px;letter-spacing:-.01em}
.prose h3{font-size:16px;color:var(--ink);margin:22px 0 8px}
.prose p{margin:0 0 13px;max-width:none}
.prose ul,.prose ol{margin:0 0 15px 20px;display:flex;flex-direction:column;gap:6px}
.prose li{padding-left:2px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--sig);text-decoration:underline;text-underline-offset:2px}
.prose code{font-family:'JetBrains Mono',monospace;font-size:12.5px;
  background:var(--surface-2);padding:1px 5px;border-radius:4px;color:var(--ink-2)}
.prose pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;overflow-x:auto;margin:0 0 15px;font-size:12.5px;line-height:1.55}
.prose pre code{background:none;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.prose blockquote{border-left:2px solid var(--line-2);padding-left:14px;margin:0 0 14px;color:var(--ink-3)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.5px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
.prose .post-lede{font-size:16px;color:var(--ink-2);line-height:1.6;margin:0 0 22px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.prose .term-short{margin:0 0 22px;padding:14px 16px;border-radius:var(--r);
  background:var(--sig-soft);border:1px solid var(--sig-line)}
.prose .term-short b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--sig);margin-bottom:5px}
.prose .term-short p{margin:0;color:var(--ink)}
.aside-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.aside-list a{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.aside-list a:hover{color:var(--ink)}

/* ── BLOG YAZISI · /blog/<slug> ─────────────────────────────────────
   Yazı artık hukuk metinleriyle aynı kartta değil: tam genişlikte bir
   başlık bandı, altında iki sütun (gövde + yapışkan içindekiler) ve
   en altta ilgili yazı kartları. Gövde kartın DIŞINDA akıyor; okuma
   sütununun kendi kenarı ve gölgesi olması, metnin etrafına gereksiz
   bir çerçeve koyuyordu. ----------------------------------------- */

/* Okuma çubuğu · gezinme çubuğunun hemen altına yapışık. scaleX ile
   çiziliyor, genişlikle değil: kaydırmanın her karesinde düzen
   yeniden hesaplanmasın. JS yoksa scaleX(0) kalır, görünmez. */
.rprog{position:sticky;top:73px;z-index:40;height:3px;background:transparent}
.rprog i{display:block;height:100%;background:var(--sig);transform:scaleX(0);
  transform-origin:left center;will-change:transform}
@media(prefers-reduced-motion:reduce){.rprog i{transition:none}}

/* .sec/.wrap ortalı yazıyor (anasayfa bölümleri öyle kurulu); yazı
   sayfasının TAMAMI sola yaslı. Eskiden bunu gövdeyi saran kart
   (.legaldoc) hallediyordu, kart kalkınca metin ortalanmıştı. */
.art,.art .wrap{text-align:left}
.arthd{padding:30px 0 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),transparent)}
.artcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-4)}
.artcrumb a{color:var(--ink-4)}
.artcrumb a:hover{color:var(--sig)}
.artcrumb a:last-child{color:var(--ink-3);font-weight:550}
.arthd h1{font-size:clamp(27px,3.4vw,40px);line-height:1.16;letter-spacing:-.028em;
  margin:14px 0 0;max-width:min(25ch,100%)}
/* Başlık bandı tam genişlikte (1040px wrap) ve h1 onu doldururken özet
   66ch'te kalınca başlığın altında belirgin bir boşluk kalıyordu. 78ch
   sola dayalı bu bantta hâlâ rahat okunuyor, bkz. .sec>.wrap>.lede. */
.artlede{font-size:17px;line-height:1.6;color:var(--ink-2);margin:14px 0 0;max-width:78ch}
.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:20px;
  font-size:12.5px;color:var(--ink-4)}
.artmeta b{color:var(--ink-2);font-weight:600}
.artmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.artby{display:inline-flex;align-items:center;gap:8px}
.artav{width:26px;height:26px;border-radius:50%;background:var(--sig-soft);
  border:1px solid var(--sig-line);display:grid;place-items:center}
.artav svg{width:15px;height:15px;stroke:var(--sig);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.artlay{grid-template-columns:minmax(0,1fr) 280px;align-items:start;
  /* .colay'in ust bosluğu buraya fazla: baslik bandinin kendi
     alt boslugu zaten var. */
  margin-top:0;padding-top:34px}
.artmain{min-width:0}
.artside .card+.card{margin-top:14px}

/* Gövde · okuma boyu 68ch, listedeki karttan bir punto büyük. */
.artbody{max-width:68ch;font-size:16px;line-height:1.78}
.artbody>p:first-child{font-size:17px;color:var(--ink-2)}
.artbody h2{font-size:23px;margin:38px 0 12px;scroll-margin-top:100px;letter-spacing:-.02em}
.artbody h3{font-size:17.5px;margin:26px 0 8px;scroll-margin-top:100px}
.artbody p{margin:0 0 16px}
.artbody ul,.artbody ol{margin:0 0 18px 22px;gap:8px}
.artbody blockquote{border-left:0;margin:24px 0;padding:18px 20px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);font-size:16px}
.artbody blockquote p:last-child{margin-bottom:0}
.artbody pre{border-radius:var(--r-lg);padding:15px 17px;margin:0 0 18px}
.artbody table{margin:0 0 22px}
.artbody th{background:var(--surface-2);font-weight:600;color:var(--ink);
  font-size:12.5px;letter-spacing:.02em}
.artbody hr{margin:32px 0}

/* İçindekiler · yapışkan, okunan başlık imzalı. */
.arttoc ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
  counter-reset:toc}
.arttoc li{counter-increment:toc}
.arttoc a{display:flex;gap:9px;padding:6px 9px;border-radius:8px;font-size:13px;line-height:1.4;
  color:var(--ink-3);border-left:2px solid transparent;transition:color .13s,background .13s}
.arttoc a::before{content:counter(toc);flex:0 0 auto;font-size:11px;font-weight:600;
  color:var(--ink-4);font-variant-numeric:tabular-nums;padding-top:1px}
.arttoc a:hover{background:var(--surface-2);color:var(--ink)}
.arttoc a[aria-current]{color:var(--sig);border-left-color:var(--sig);background:var(--sig-soft)}
.arttoc a[aria-current]::before{color:var(--sig)}

/* Paylaşım · yan sütunda dikey, yazının altında yatay. */
.sharebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:34px;
  padding-top:20px;border-top:1px solid var(--line)}
.sharebar.bare{margin-top:12px;padding-top:0;border-top:0;flex-direction:column;align-items:stretch}
.sharebar .sl{font-size:12.5px;font-weight:600;color:var(--ink-4);margin-right:4px}
.sbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;
  border:1px solid var(--line);border-radius:100px;background:var(--surface);cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);
  transition:border-color .13s,color .13s}
.sharebar.bare .sbtn{height:36px;border-radius:var(--r);justify-content:flex-start}
.sbtn:hover{border-color:var(--line-2);color:var(--ink)}
.sbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sbtn.ok{border-color:var(--sig-line);color:var(--sig);background:var(--sig-soft)}

/* Yazının altındaki tarama çağrısı · yan sütundaki kutunun gövde
   içindeki eşi. Kaydırmadan okuyan kişi yan sütunu hiç görmüyor. */
.artcta{margin-top:24px;padding:22px 24px;border-radius:var(--r-lg);
  border:1px solid var(--sig-line);background:var(--sig-soft);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.artcta b{display:block;font-size:16px;letter-spacing:-.01em}
.artcta p{font-size:13.5px;color:var(--ink-2);margin:5px 0 0;max-width:52ch}

.artrel{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.artrel>h2{font-size:19px;letter-spacing:-.015em}
.artrel .posts{margin-top:18px}
.artrel .post h3{font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.35;margin:0}

@media(max-width:940px){
  .artlay{grid-template-columns:1fr}
  /* İçindekiler dar ekranda gövdenin ALTINA düşerdi: orada işe
     yaramaz. Gizleniyor; paylaşım ve araç kutuları kalıyor. */
  .arttoc{display:none}
  .artbody{max-width:none}
}
@media(max-width:640px){
  .artlay{padding-top:22px}
  .arthd{padding:22px 0 20px}
  .arthd h1{font-size:26px}
  .artlede{font-size:15.5px}
  .artcta{padding:18px 18px}
  .artcta .btn{width:100%;justify-content:center}
}
@media(max-width:860px){.posts,.terms{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posts,.terms{grid-template-columns:1fr}}


/* ═══════════════════════════════════════════════════════════════════
   MOBİL · anasayfa ve ortak parçaların dar ekran hâli
   ═══════════════════════════════════════════════════════════════════ */

/* ── logo şeridi (620px altı) ───────────────────────────────────────
   Beş marka iki satıra kırılıp ortalanıyordu; darda kayan tek satır.
   İki kopya yan yana (engtrack ×2), ilk kopya kendi genişliği kadar
   sola kayınca ikincisi tam yerine geliyor: kesintisiz döngü.
   padding-right = gap, yoksa dikişte boşluk atlıyor.
   Kenarlar maskeyle eriyor. Hareket azaltma tercihinde animasyon yok,
   şerit elle kaydırılır. */
@media(max-width:620px){
  /* width:0 + min-width: şeridin içsel genişliği (10 marka yan yana,
     ~1200px) üst kapsayıcıya sızmasın. .hero .wrap bir grid/flex
     öğesi ve min-width:auto ile içeriğin min-content genişliğine
     açılıyordu; bütün hero sağa kayıyordu. overflow:hidden içsel
     ölçüyü değiştirmez, bu yüzden yetmiyor. Aynı tuzak .prices'ta. */
  .englist{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;
    overflow:hidden;margin-inline:-24px;padding-block:4px;
    width:0;min-width:calc(100% + 48px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .englist .engtrack,.englist .engtrack[aria-hidden]{display:flex;flex:0 0 auto;
    align-items:center;gap:34px;padding-right:34px;
    animation:engmarq 22s linear infinite;will-change:transform}
  .englist .eng{font-size:14.5px;opacity:.78;white-space:nowrap}
  .englist .eng .emk{width:24px;height:24px}
  @keyframes engmarq{to{transform:translateX(-100%)}}
}
@media(max-width:620px) and (prefers-reduced-motion:reduce){
  .englist{overflow-x:auto;mask-image:none;-webkit-mask-image:none;padding-inline:24px;
    scrollbar-width:none;width:0;min-width:calc(100% + 48px)}
  .englist::-webkit-scrollbar{display:none}
  .englist .engtrack{animation:none}
  .englist .engtrack[aria-hidden]{display:none}
}

/* ── fiyat kartları · kaydırmalı (760px altı) ──────────────────────
   Üç kart alt alta dizilince paket karşılaştırması üç ekran boyuna
   yayılıyordu. Darda kartlar yatay bir raf: bir kart ekranda, bir
   sonrakinin kenarı görünür (devamı olduğunu söyleyen tek ipucu
   bu, ok düğmesi yok). scroll-snap kartı ortaya oturtur; altındaki
   noktalar common.js'ten, JS yoksa yalnızca kaydırma kalır.
   Öne çıkan kart (.hi) açılışta ortaya getirilir (common.js).
   İzleme sekmesi ve fiyat sayfası aynı sınıfı kullandığı için
   hepsinde geçerli. */
@media(max-width:760px){
  .prices{display:flex;gap:12px;align-items:stretch;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    margin:6px -24px 0;padding:16px 24px 8px;width:0;min-width:calc(100% + 48px);
    scroll-padding-inline:24px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .prices::-webkit-scrollbar{display:none}
  .prices>.pr{flex:0 0 min(80vw,340px);scroll-snap-align:center;scroll-snap-stop:always;
    padding:26px 22px 22px}
  .prices>.pr:hover{transform:none}
  .prices>.pr .prflag{top:-10px}
  .pdots{display:flex;justify-content:center;gap:7px;margin-top:6px}
  .pdots button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;
    display:grid;place-items:center}
  .pdots button::before{content:"";width:7px;height:7px;border-radius:50%;
    background:var(--line-2);transition:width .18s,background .18s}
  .pdots button[aria-current]::before{width:20px;border-radius:100px;background:var(--sig)}
  .pdots button:focus-visible{outline:2px solid var(--sig);outline-offset:-2px;border-radius:50%}
  .prices+.subline{margin-top:16px}
}
@media(min-width:761px){.pdots{display:none}}

/* ── alt bilgi (620px altı) ─────────────────────────────────────────
   Sütunlar akordeon: başlık tam genişlik düğme, sağda ok; liste
   kapalıyken gizli. Marka ve iletişim kartı üstte kalır, alt şerit
   ortalanır. */
@media(max-width:620px){
  .foot{padding-top:38px}
  .foot .fgrid{gap:0}
  .foot .fbrand{max-width:none;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .foot .fbrand .logo{margin-bottom:12px}
  .foot .fcol{border-bottom:1px solid var(--line)}
  .foot .fcol .eyebrow{display:flex;align-items:center;justify-content:space-between;
    margin:0;padding:15px 0;cursor:pointer;color:var(--ink-3);font-size:11.5px}
  .foot .fcol .eyebrow svg{display:block;width:16px;height:16px;stroke:currentColor;
    fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .18s;color:var(--ink-4)}
  .foot .fcol .eyebrow[aria-expanded=true] svg{transform:rotate(180deg)}
  .foot .fcol .eyebrow[aria-expanded=false]+ul{display:none}
  .foot .fcol ul{padding:0 0 16px;gap:0}
  .foot .fcol ul a{display:block;padding:9px 0;font-size:15px;color:var(--ink-2)}
  .foot .fcontact{margin-top:22px;padding:16px;border:1px solid var(--line);
    border-radius:var(--r-lg);background:var(--bg);
    flex-direction:column;align-items:stretch;gap:0;text-align:left}
  .foot .fcontact a,.foot .fcontact span{padding:9px 0;font-size:14px;gap:11px;
    border-bottom:1px solid var(--line)}
  .foot .fcontact>:last-child{border-bottom:0}
  .foot .fcontact .ico{width:17px;height:17px;flex:0 0 auto}
  .foot .disc{text-align:left;font-size:11.5px}
  .foot .fbar{align-items:center;text-align:center;gap:10px;
    padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .foot .fbar .fmeta{justify-content:center}
}

/* ═══ FİYAT KARTLARI · metrik ızgara (16.09.2026) ═══════════════════
   Kart sırası: ad → fiyat → satın alma → üç kutulu rakam ızgarası →
   beş marka → "öncekindeki her şey, artı:" listesi. Izgara ve liste
   App\Support\PlanLadder'dan. Öne çıkan kartın rozeti artık kartın
   üst kenarına binen bir hap değil, kartın kendi başlık şeridi:
   kart yükseklikleri şeritle eşit kalsın diye diğer kartlarda da
   aynı yükseklikte boş bir şerit var.
   Bu blok yukarıdaki .pr kurallarını (ve MOBİL raftaki dolguyu)
   bilerek SONDAN eziyor. */
.pr,.prices>.pr{padding:0;overflow:hidden}
.pr.hi{border:2px solid var(--sig);background:var(--surface);box-shadow:var(--sh-lg)}
.pr.hi:hover{box-shadow:var(--sh-lg)}
.prstrip{height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pr.hi .prstrip{height:26px;background:var(--sig);color:var(--sig-ink)}
.prbody{flex:1;display:flex;flex-direction:column;padding:14px 24px 24px}
.pr .amt s{font-size:15px;font-weight:500;color:var(--ink-4);letter-spacing:0;margin-left:8px}
.pr .amtn b{font-weight:600;color:var(--sig)}
.pr .prbuy{width:100%;justify-content:center;height:42px;margin-top:16px}
.prgrid{display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr));margin-top:20px;
  border:1px solid var(--line);border-radius:var(--r-lg)}
.prgrid>div{padding:12px 5px 11px;text-align:center}
.prgrid>div+div{border-left:1px solid var(--line)}
.prgrid b{display:block;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* Kadans ve etiketler dile gore uzuyor ("Wöchentlich", "Antworten / Monat"):
   kutu kirpmaz, alt satira gecer. */
.prgrid span{display:block;margin-top:3px;font-size:10.5px;line-height:1.3;color:var(--ink-4)}
.pr .prmk{justify-content:center;gap:12px;margin-top:14px;padding:0;border:0}
.pr .prmk .mk .emk{width:18px;height:18px}
.prplus{margin-top:20px;font-size:12px;font-weight:600;color:var(--ink-3)}
.pr .prlist{flex:0 0 auto;gap:9px;margin:10px 0 0}
.prnote{margin-top:14px;text-align:center;font-size:12px;color:var(--ink-4)}
@media(max-width:760px){
  .prbody{padding:14px 20px 22px}
  .pdots+.prnote{margin-top:6px}
}

/* ── ödeme dönemi · kayar anahtar, kartların sağ üstünde ─────────────
   "Aylık" / "Yıllık" yazıları da düğme; ortadaki anahtar role=switch.
   Seçiciler eski hap düzenini (.pertog button[aria-pressed]) ezecek
   kadar özgül yazıldı. */
.pertop{display:flex;justify-content:flex-end;margin-top:22px}
.pertop .pertog{width:auto;margin:0;padding:0;gap:10px;align-items:center;
  border:0;border-radius:0;background:none}
.pertog button.perlb,.pertog button.perlb[aria-pressed=true]{height:auto;padding:4px 2px;
  border-radius:6px;background:none;box-shadow:none;font-size:13.5px;font-weight:600;color:var(--ink-4)}
.pertog button.perlb[aria-pressed=true]{color:var(--ink)}
.pertog button.persw{position:relative;width:44px;height:26px;padding:0;border-radius:100px;
  background:var(--line-2);box-shadow:none;transition:background .2s}
.pertog button.persw span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-sm);transition:transform .2s}
.pertog button.persw[aria-checked=true]{background:var(--sig)}
.pertog button.persw[aria-checked=true] span{transform:translateX(18px)}
.pertop .pertag{margin-left:2px}
@media(max-width:760px){.pertop{justify-content:center;margin-top:18px}}
@media(prefers-reduced-motion:reduce){.pertog button.persw,.pertog button.persw span{transition:none}}

/* ═══ KARŞILAŞTIRMA TABLOSU · görsel ölçüm (16.09.2026) ═════════════
   partials/compare-table. Masaüstünde öne çıkan sütun başlığın
   altındaki yeşil çizgiyle ayrılır. 760px altında kalem sütunu
   yapışkan, paketler yana kayar ve öne çıkan sütun baştan sona
   yeşil şeritle işaretlenir. */
.cmpw{margin-top:24px;padding:6px 10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl)}
.cmpsc{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;font-size:13.5px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);font-weight:400}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .cmpk{width:30%}
.cmp thead th{padding:22px 16px 16px;vertical-align:bottom;font-size:inherit;
  text-transform:none;letter-spacing:0;color:var(--ink)}
.cmp thead th.f{box-shadow:inset 0 -2px 0 var(--sig)}
.cmpcap{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.cmphd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:6px}
.cmpnm{font-size:15px;font-weight:650;color:var(--ink)}
.cmpbadge{padding:3px 8px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--sig);color:var(--sig-ink)}
.cmpamt{display:flex;align-items:baseline;gap:1px;font-size:24px;font-weight:700;line-height:1.15;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.cmpamt .cur{font-size:15px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.cmpamt small{margin-left:4px;font-size:12px;font-weight:500;color:var(--ink-4);letter-spacing:0}
.cmpl{display:block;font-weight:600;color:var(--ink)}
.cmps{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--ink-4)}
.cmpv{color:var(--ink-2)}
b.cmpv{font-weight:600;color:var(--ink)}
.cmp .cmpmk{gap:7px}
.cmp .cmpmk .mk .emk{width:18px;height:18px}
.cmpx{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;font-weight:600;color:var(--ink)}
.cmpx em{font-style:normal;font-weight:500;color:var(--ink-4)}
.cmpn{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cmpbar{display:block;max-width:180px;height:6px;margin-top:6px;border-radius:6px;
  background:var(--surface-3);overflow:hidden}
.cmpbar span{display:block;height:100%;border-radius:6px;background:var(--sig)}
.cmprv{display:flex}
.cmprv i{width:18px;height:18px;margin-left:-5px;border-radius:50%;
  background:color-mix(in srgb,var(--rival) 22%,var(--surface));border:2px solid var(--surface)}
.cmprv i:first-child{margin-left:0}
.cmpcd{display:flex;gap:3px}
.cmpcd i{width:13px;height:13px;border-radius:4px;background:var(--surface-3)}
.cmpcd i.on{background:var(--sig)}
.cmptk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sig-soft)}
.cmptk svg{width:13px;height:13px;fill:none;stroke:var(--sig);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.cmpno{display:inline-block;width:12px;height:2px;border-radius:2px;background:var(--line-2);vertical-align:middle}
.cmpnote{margin-top:12px}
@media(max-width:760px){
  .cmpw{padding:4px 0;border-radius:var(--r-lg)}
  table.cmp{min-width:600px}
  .cmp th,.cmp td{padding:12px}
  .cmp .cmpk{position:sticky;left:0;z-index:2;width:132px;min-width:132px;
    background:var(--surface);box-shadow:6px 0 10px -8px rgba(16,24,40,.25)}
  .cmp tbody .cmpk .cmps{display:none}
  .cmp .f{background:color-mix(in srgb,var(--sig) 5%,var(--surface));
    box-shadow:inset 1px 0 0 var(--sig-line),inset -1px 0 0 var(--sig-line)}
  .cmp thead th.f{box-shadow:inset 1px 0 0 var(--sig-line),inset -1px 0 0 var(--sig-line),inset 0 2px 0 var(--sig)}
  .cmpamt{font-size:20px}
}

/* ═══ GEO DANIŞMANLIĞI SAYFASI · /tr/geo-danismanligi ═══════════════
   Sayfanın kendi bileşenleri `ds` önekiyle. Fiyat kartları, sekme
   çubuğu, dönem anahtarı ve karşılaştırma tablosu bu blokta DEĞİL:
   onlar fiyat sayfasının bileşenleri (.pr, .ptabs, .pertog, .cmp) ve
   olduğu gibi yeniden kullanılıyor. Burada yalnızca bu sayfaya özgü
   beş parça var: kahraman açık listesi, akış şeridi, hafta planı,
   sorumluluk sütunları ve sınır kutuları.

   Danışmanlık şimdilik yalnızca Türkçe yayımlanıyor (SiteRoutes
   'only' => ['tr']); yine de hiçbir ölçü metne göre sabitlenmedi,
   başka bir dile açıldığında kırılmasın. */

/* Kahraman · solda vaat, sağda rapordan gelen açık listesi. */
.dshero{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
.dshero .lede{margin-top:14px}
.dscta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.dsnote{font-size:12.5px;color:var(--ink-4);margin-top:14px}
.dsfind{padding:18px}
.dsfind .ft{display:flex;align-items:center;justify-content:space-between;font-size:12px;
  color:var(--ink-4);padding-bottom:12px;border-bottom:1px solid var(--line)}
.dsfind ul{list-style:none;margin-top:6px}
.dsfind li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.dsfind li:last-child{border-bottom:0}
.dsfind li b{font-weight:550;font-size:13.2px;color:var(--ink-2)}
.dssev{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:100px;padding:3px 8px;white-space:nowrap}
.dssev.h{background:var(--err-bg);color:var(--err);border:1px solid var(--err-line)}
.dssev.m{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.dsfind .arw{margin-top:14px;font-size:12.5px;color:var(--sig);font-weight:600;
  display:flex;gap:7px;align-items:center}
@media (max-width:860px){.dshero{grid-template-columns:1fr;gap:26px}}

/* Durum · üç kutu. */
.dsprob{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.dsprob>div{padding:19px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.dsprob b{display:block;font-size:14px;font-weight:650;margin-bottom:6px}
.dsprob p{font-size:13px;color:var(--ink-3)}
@media (max-width:860px){.dsprob{grid-template-columns:1fr}}

/* Akış · danışmanlığın ürünün neresinde durduğu.
   İkinci ve dördüncü adım danışmanlık, birinci ve üçüncü ürün. */
.dsflow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px}
.dsstep{padding:22px 18px;background:var(--surface);border:1px solid var(--line);border-right:0}
.dsstep:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.dsstep:last-child{border-right:1px solid var(--line);border-radius:0 var(--r-lg) var(--r-lg) 0}
.dsstep.on{background:linear-gradient(var(--sig-soft),var(--sig-soft)),var(--surface);
  border-color:var(--sig-line);position:relative;z-index:1;box-shadow:var(--sh-md)}
.dsstep .no{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:600;color:var(--ink-4)}
.dsstep b{display:block;font-size:14.5px;font-weight:650;margin:8px 0 6px}
.dsstep p{font-size:12.8px;color:var(--ink-3)}
.dsstep .tag{display:block;margin-top:11px;font-size:11px;font-weight:650;color:var(--sig)}
.dsstep .tag.mut{color:var(--ink-4)}
@media (max-width:860px){
  .dsflow{grid-template-columns:1fr}
  .dsstep{border-right:1px solid var(--line)}
  .dsstep:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .dsstep:not(:first-child){border-top:0}
  .dsstep:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
}

/* Hafta planı · sağdaki sütun o haftanın teslimi. */
.dswk{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);margin-top:22px}
.dswrow{display:grid;grid-template-columns:120px 1fr 176px;gap:20px;padding:19px 22px;
  border-top:1px solid var(--line);align-items:start}
.dswrow:first-child{border-top:0}
.dswrow .w{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:600;
  color:var(--sig);padding-top:2px}
.dswrow b{display:block;font-size:14.5px;font-weight:650;margin-bottom:5px}
.dswrow p{font-size:12.8px;color:var(--ink-3)}
.dswrow .out{font-size:12px;color:var(--ink-4);border-left:2px solid var(--line-2);padding-left:13px}
.dswrow .out em{font-style:normal;display:block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:3px}
@media (max-width:860px){
  .dswrow{grid-template-columns:1fr;gap:9px}
  .dswrow .out{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:9px}
}

/* Sorumluluk · iki sütun. Danışmanlıkta işin tıkandığı yer bu. */
.dsduty{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.dsduty>div{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.dsduty>div.you{background:var(--surface-2)}
.dsduty h3{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:13px}
.dsduty ul{list-style:none}
.dsduty li{display:flex;gap:9px;font-size:13.2px;color:var(--ink-2);padding:7px 0;line-height:1.5}
.dsduty li svg{width:15px;height:15px;stroke:var(--sig);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-top:3px;flex:0 0 auto}
@media (max-width:860px){.dsduty{grid-template-columns:1fr}}

/* Kapsam · altı kalem, her biri rapordaki bir ölçüm başlığı. */
.dsscope{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.dsscope>div{padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.dsscope .no{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-4)}
.dsscope b{display:block;font-size:14.5px;font-weight:650;margin:8px 0 6px}
.dsscope p{font-size:12.8px;color:var(--ink-3)}
@media (max-width:860px){.dsscope{grid-template-columns:1fr}}

/* Ayrım bandı · ölçümün tarafsız kaldığını söyleyen tek koyu blok. */
.dsinv{background:var(--inv-bg, var(--ink));color:var(--bg);border-radius:var(--r-xl);
  padding:30px 32px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-top:22px}
.dsinv .ic{width:44px;height:44px;border-radius:12px;background:var(--sig);color:var(--sig-ink);
  display:grid;place-items:center}
.dsinv .ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.dsinv b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.dsinv p{font-size:13.5px;opacity:.72;max-width:70ch}
@media (max-width:620px){.dsinv{grid-template-columns:1fr;padding:22px 18px}}

/* Sınır · kimin için değil. Yanlış talebi formdan önce eliyor. */
.dsnf{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.dsnf>div{padding:18px;border-radius:var(--r-lg);border:1px dashed var(--line-2)}
.dsnf b{display:block;font-size:13.5px;font-weight:650;margin-bottom:6px;color:var(--ink-2)}
.dsnf p{font-size:12.8px;color:var(--ink-4)}
@media (max-width:860px){.dsnf{grid-template-columns:1fr}}

/* TEK KART · aylık takip.
   .prices üç sütunlu bir ızgara; tek çocukla kart ilk sütuna
   yapışıyor ve sayfanın solunda kalıyordu. Tek kartlı kullanımda
   ızgara tek sütuna iniyor ve ortalanıyor. 760px altında app.css
   .prices'ı yana kayan bir rafa çeviriyor (dört yüz satır yukarıda);
   tek kartta raf anlamsız, ızgaraya geri dönüyor. */
.prices.one{grid-template-columns:minmax(0,440px);justify-content:center}
@media (max-width:760px){
  .prices.one{display:grid;grid-template-columns:1fr;overflow:visible}
  .prices.one>.pr{flex:none;width:auto}
}

/* Sekme panelinin tek satırlık girişi ve kart altı ödeme satırı. */
.dspan{text-align:center;color:var(--ink-3);font-size:13px;margin:20px auto 0;max-width:62ch}
/* Tutar kaldırılınca (22.09.2026) kartta rakamın durduğu yerde
   kademenin tek satırlık koşulu kaldı. `.amtn` kendi başına fiyatın
   hemen altına yapışacak kadar dar bir boşlukla geliyor; başlıktan
   sonra tek başına durunca o boşluk yetmiyor. Ayrı sınıf, çünkü
   fiyat sayfasındaki `.amtn` olduğu gibi kalmalı. */
.pr .amtn.dsnp{margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.dspay{display:flex;gap:9px;align-items:center;justify-content:center;font-size:12.5px;
  color:var(--ink-4);margin-top:18px}
.dspay svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.dsgrid-note{margin-top:14px;text-align:center;font-size:12px;color:var(--ink-4)}
.dsgrid-note a{color:var(--sig);font-weight:600}

/* ══ HEDEF PAZAR SEÇİCİ ═════════════════════════════════════════════
   Şablon: components/market-select.blade.php · davranış:
   assets/js/market-select.js

   İKİ HÂLİ VAR ve ikisi de çalışır durumda olmalı:

     .mktsel          → JS yok · sade <select> + "Değiştir" düğmesi,
     .mktsel.js       → panel kuruldu · select gizli, .mkt görünür.

   Gizleme display:none DEĞİL. Gizli bir form alanı bazı tarayıcılarda
   doğrulama hatası verdiğinde "odaklanamayan alan" diye konsola
   düşüyor ve gönderim sessizce duruyordu; select ekran dışına
   alınıyor, hâlâ odaklanabilir bir öğe.

   29 PAZAR. Bu bileşenin bütün kararları o sayıdan geliyor: arama
   kutusu, bölge başlıkları, kaydırılan liste ve yukarı/aşağı açılma. */
.mktsel{display:flex;align-items:center;gap:8px;min-width:0}
.mktsel-lbl{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.mktsel.js .mktsel-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
.mktsel.js .mktsel-lbl{cursor:default}

/* JS'siz hâl de markanın parçası. Eskiden buraya satır içi style ile
   height/font-size yazılıyordu; kural burada olunca yedek görünüm de
   temayla birlikte değişiyor. */
.mktsel:not(.js) .mktsel-native{height:34px;max-width:220px;padding:0 8px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  color:var(--ink);font-size:13px}

.mkt{position:relative}

/* ── kapalı düğme ───────────────────────────────────────────────
   Yüksekliği .chip ile aynı aileden ama biraz büyük: bu bir rozet
   değil, tıklanacak bir denetim. 36px dokunmatikte hedef boyutunun
   altına düşmeyen en küçük değer. */
.mkt-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 11px;
  max-width:260px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);color:var(--ink);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:border-color .14s,box-shadow .14s,background .14s}
.mkt-btn:hover{border-color:var(--line-2);background:var(--surface-2)}
.mkt-btn:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.mkt.acik .mkt-btn{border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-ring)}
.mkt-btn .mkt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Bayrak emojisi · metin yazı tipiyle değil sistem emoji yığınıyla
   çizilsin. Inter bayrakları çizmiyor ve platform yedeği bazı
   sistemlerde iki harfli kod gösteriyordu; ülke adı zaten yanında
   olduğu için bu en kötü durumda gürültü, hata değil. */
.mkt-flag{font-size:15px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

.mkt-caret{width:0;height:0;margin-left:2px;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid var(--ink-4);
  transition:transform .16s}
.mkt.acik .mkt-caret{transform:rotate(180deg)}

/* ── açılır panel ───────────────────────────────────────────────
   z-index 60: sayfa içi yapışkan başlıkların (.sechd, z:20) üstünde,
   çerez bandı ve modallerin (z:100+) altında. */
.mkt-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:290px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;animation:mktin .13s ease-out}
.mkt.yukari .mkt-pop{top:auto;bottom:calc(100% + 6px)}
@keyframes mktin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mkt-pop{animation:none}
  .mkt-caret{transition:none}
}

.mkt-searchwrap{padding:9px;border-bottom:1px solid var(--line)}
.mkt-search{width:100%;height:34px;padding:0 11px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;color:var(--ink);
  outline:0;transition:border-color .14s}
.mkt-search::placeholder{color:var(--ink-4)}
.mkt-search:focus{border-color:var(--sig);background:var(--surface)}

/* Liste yüksekliği yaklaşık 7 satır: daha kısası aramayı zorunlu
   kılıyor, daha uzunu panelin küçük ekranlarda ekranı doldurması
   demek. overscroll-behavior: listenin sonuna gelince sayfanın
   kaymaya başlamasını engelliyor. */
.mkt-list{max-height:252px;overflow-y:auto;overscroll-behavior:contain;padding:5px}
.mkt-group{padding:9px 9px 5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.mkt-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r);
  font-size:13.5px;color:var(--ink-2);cursor:pointer;user-select:none}

/* [hidden] YETMİYOR · aramanın çalışmasının tek şartı bu satır.
   Tarayıcının kendi [hidden]{display:none} kuralı sınıfsız ve
   özgüllüğü en düşük; yukarıdaki .mkt-opt{display:flex} onu eziyor ve
   elenen ülkeler listede durmaya devam ediyordu. Aynısı başlık için
   de geçerli olsun diye ikisi birlikte yazıldı. */
.mkt-opt[hidden],.mkt-group[hidden],.mkt-list[hidden],.mkt-empty[hidden]{display:none}
.mkt-opt .mkt-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ülke kodu · ARAMA İPUCU olarak duruyor. "DE" yazınca Almanya'nın
   geldiğini kullanıcıya söyleyen tek şey bu sütun. */
.mkt-code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;
  font-weight:600;color:var(--ink-4);letter-spacing:.04em}

/* Klavye imleci (.hv) ile SEÇİLİ olan (.on) ayrı görünüyor: ikisi
   aynı renkte olsaydı ok tuşuyla gezinen kullanıcı hangisinin
   kayıtlı seçim olduğunu göremezdi. */
.mkt-opt.hv{background:var(--surface-2);color:var(--ink)}
.mkt-opt.on{color:var(--sig);font-weight:650}
.mkt-opt.on .mkt-code{color:var(--sig)}
.mkt-opt.on::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sig)}

.mkt-empty{padding:16px 12px;text-align:center;font-size:12.5px;color:var(--ink-4)}
.mkt-hint{padding:9px 11px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:11.5px;line-height:1.5;color:var(--ink-4)}

/* Dar ekranda panel düğmeye değil KENARA hizalanıyor: 290px'lik
   panel sağdaki bir düğmeden açıldığında ekran dışına taşıyordu. */
@media (max-width:480px){
  /* Dayanak .mkt'ten .mktsel'e taşınıyor: .mkt yalnızca düğme kadar
     geniş ve sağdaki bir düğmeden açılan 290px'lik panel ekran dışına
     taşıyordu. .mktsel satırın tamamı. */
  .mktsel{position:relative;flex-wrap:wrap}
  .mkt{position:static}
  .mkt-pop{width:auto;left:0;right:0}
  .mkt-btn{max-width:none}
}

/* ═══════════════════════════════════════════════════════════════════
   AUDIT KURULUMU · kendi kabuğu (layouts/setup)
   ───────────────────────────────────────────────────────────────────
   Kurulum panelin içinde değil, panelin yanında bir mod: aynı token
   seti, farklı kabuk. Gezinme yok, çünkü bitmeden gidilecek anlamlı
   bir yer yok (gerekçesi layouts/setup.blade.php başında).

   SINIF ADLARI `wz-` ÖN EKLİ. Kurulumun ızgarası, seçenek kartları ve
   zaman çizelgesi, panelde ve tarama sonucunda zaten var olan .mkt,
   .opts, .tli adlarıyla çakışıyordu; ön ek olmadan iki ekran birbirini
   sessizce bozuyordu. Ortak bileşenler (.card, .btn, .chip, .note,
   .rvw) ön ek ALMIYOR: onlar gerçekten aynı bileşen.
   ═══════════════════════════════════════════════════════════════════ */

.wz{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.wz-wrap{max-width:1060px;margin:0 auto;width:100%}
.wz-sp{flex:1}

/* ── üst çubuk ── */
.wz-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:13px;
  padding:0 26px;height:58px;background:var(--surface);
  border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(10px)){
  .wz-top{background:color-mix(in srgb,var(--surface) 86%,transparent);
    backdrop-filter:blur(10px)}
}
.wz-logo{height:26px;color:var(--ink)}
.wz-ono{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);
  padding:5px 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface-2)}
.wz-ono b{font-weight:600;color:var(--ink-2)}
.wz-exit{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
.wz-exit:hover{color:var(--ink)}

/* ── başlık alanı ── */
.wz-hero{background:var(--glow-scan);border-bottom:1px solid var(--line);padding:26px 26px 0}
.wz-kicker{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--sig)}
.wz-h1{font-size:25px;font-weight:700;letter-spacing:-.03em;margin-top:8px;line-height:1.25}
.wz-sub{font-size:13.5px;color:var(--ink-3);margin-top:5px;max-width:620px;line-height:1.6}

/* ── adım şeridi ──
   Adın altındaki çizgi ilerlemeyi taşıyor; rakamlar tek başınayken
   "kaç adım kaldı" ancak sayarak anlaşılıyordu. */
.wz-steps{display:flex;align-items:center;margin-top:22px;overflow-x:auto;
  scrollbar-width:none}
.wz-steps::-webkit-scrollbar{display:none}
.wz-step{display:flex;align-items:center;gap:9px;padding:0 14px 15px;position:relative;
  flex:0 0 auto;color:var(--ink-4)}
.wz-step:first-child{padding-left:0}
.wz-step .n{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;border:1.5px solid var(--line-2);background:var(--surface);
  color:var(--ink-4);transition:.16s}
.wz-step .n svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.wz-step .t{font-size:12.5px;font-weight:600;white-space:nowrap}
.wz-step::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:transparent;border-radius:2px}
a.wz-step.done:hover .t{color:var(--ink)}
.wz-step.done{color:var(--ink-2)}
.wz-step.done .n{background:var(--sig-soft);border-color:var(--sig-line);color:var(--sig)}
.wz-step.done::after{background:var(--sig-line)}
.wz-step.now{color:var(--ink)}
.wz-step.now .n{background:var(--sig);border-color:var(--sig);color:var(--sig-ink);
  box-shadow:0 0 0 4px var(--sig-soft)}
.wz-step.now::after{background:var(--sig)}
.wz-sep{flex:1;min-width:14px;height:1px;background:var(--line);margin-bottom:15px}

/* ── gövde · içerik + sipariş rayı ── */
.wz-body{padding:26px;flex:1}
.wz-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:26px;align-items:start;
  max-width:1060px;margin:0 auto}
.wz-main{min-width:0}
.wz-card{border-radius:var(--r-xl)}
.wz .pad{padding:26px 28px}

/* soru başlığı */
.wz .q-h{display:flex;gap:14px;align-items:flex-start}
.wz .q-h .qn{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r);display:grid;
  place-items:center;background:var(--sig-soft);color:var(--sig)}
.wz .q-h h2{font-size:18.5px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.wz .q-h p{font-size:13px;color:var(--ink-3);line-height:1.65;margin-top:7px}
.wz .q-sec{font-size:13px;font-weight:700;letter-spacing:-.01em;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;
  flex-wrap:wrap}
.wz .q-sec span{font-weight:500;color:var(--ink-4);font-size:12px}
.wz .q-sec-p{font-size:12.5px;color:var(--ink-3);line-height:1.65;margin-top:8px}

/* alanlar */
.wz .frm{display:grid;gap:16px;margin-top:22px}
.wz .fld{display:grid;gap:6px}
.wz .fld>label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.wz .fld>label em{font-style:normal;font-weight:500;color:var(--ink-4)}
/* height:auto · sihirbaz alanları dolguyla ölçülüyor (yaklaşık
   45px), temel kuralın 38px'i bu ekranda alanları kısaltırdı. */
.wz .fld input[type=text]{width:100%;height:auto;padding:11px 13px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);background:var(--surface);font-size:14px;transition:.14s}
.wz .fld input::placeholder{color:var(--ink-4)}
.wz .fld input:focus{outline:0;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-soft)}
.wz .f2c{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* https:// ÖN EKİ · yazılacak bir şey değil, alanın parçası */
.wz .pre{display:flex;align-items:stretch;border:1px solid var(--line-2);
  border-radius:var(--r-md);background:var(--surface);overflow:hidden;transition:.14s}
.wz .pre:focus-within{border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-soft)}
.wz .pre i{font-style:normal;display:flex;align-items:center;padding:0 12px;font-size:12.5px;
  color:var(--ink-4);background:var(--surface-2);border-right:1px solid var(--line);
  white-space:nowrap}
/* Ön ekli alanda kutu .pre'nin kendisi: temel kuralın yüksekliği,
   köşesi ve odak halkası burada da geri alınıyor. */
.wz .pre input{flex:1;border:0;padding:11px 13px;background:transparent;font-size:14px;
  min-width:0;height:auto;border-radius:0;box-shadow:none}
.wz .pre input:focus{outline:0;box-shadow:none}

/* ── seçenek kartları ──
   Eski ekranda radyolar .ck2 ile KARE çiziliyordu; tek cevabı olan
   bir listede kare kutu yanlış söz veriyor. Tıklanabilir alan da
   kutu değil kartın tamamı. */
.wz-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.wz-opt{position:relative;display:flex;align-items:center;gap:12px;padding:13px 15px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  cursor:pointer;transition:.14s}
.wz-opt:hover{border-color:var(--line-2);background:var(--surface-2)}
.wz-opt input{position:absolute;opacity:0;pointer-events:none}
.wz-opt .dot{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line-2);
  flex:0 0 auto;display:grid;place-items:center;transition:.14s;background:var(--surface)}
.wz-opt .dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sig-ink);
  transform:scale(0);transition:.14s}
.wz-opt .tx{display:grid;gap:2px;min-width:0}
.wz-opt .tx b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wz-opt .tx small{font-size:11.5px;color:var(--ink-4)}
.wz-opt input:checked+.dot{border-color:var(--sig);background:var(--sig)}
.wz-opt input:checked+.dot::after{transform:scale(1)}
.wz-opt input:focus-visible+.dot{outline:2px solid var(--sig);outline-offset:2px}
.wz-opt:has(input:checked){border-color:var(--sig);background:var(--sig-soft);
  box-shadow:0 0 0 1px var(--sig-line)}
.wz .chip.mut{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}

/* tam dil listesi · JS istemeyen <details> */
.wz .more{margin-top:12px}
.wz .more summary{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  font-weight:600;color:var(--sig);cursor:pointer;padding:4px 0}
.wz .more[open] summary{margin-bottom:4px}

/* ── pazar seçici ── */
.wz-mkt-cur{display:flex;align-items:center;gap:12px;margin-top:18px;padding:13px 15px;
  border:1px solid var(--sig-line);background:var(--sig-soft);border-radius:var(--r-lg)}
.wz-mkt-cur .fl{font-size:24px;line-height:1}
.wz-mkt-cur b{font-size:14px;font-weight:600}
.wz-mkt-cur small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.wz-mkt-search{position:relative;margin-top:18px}
.wz-mkt-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--ink-4)}
.wz-mkt-search input{width:100%;height:auto;padding:11px 13px 11px 38px;
  border:1px solid var(--line-2);
  border-radius:99px;background:var(--surface);font-size:13.5px}
.wz-mkt-search input:focus{outline:0;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-soft)}
.wz-mkt-reg{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin:20px 0 9px;display:flex;align-items:center;gap:10px}
.wz-mkt-reg::after{content:"";flex:1;height:1px;background:var(--line)}
.wz-mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wz-mkt{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  cursor:pointer;transition:.13s}
.wz-mkt:hover{border-color:var(--line-2);background:var(--surface-2)}
.wz-mkt input{position:absolute;opacity:0;pointer-events:none}
.wz-mkt .fl{font-size:19px;line-height:1}
.wz-mkt .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.wz-mkt .tick{margin-left:auto;width:16px;height:16px;border-radius:50%;background:var(--sig);
  display:none;place-items:center;flex:0 0 auto}
.wz-mkt .tick svg{width:10px;height:10px;stroke:var(--sig-ink);fill:none;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.wz-mkt input:checked~.tick{display:grid}
.wz-mkt:has(input:checked){border-color:var(--sig);background:var(--sig-soft);
  box-shadow:0 0 0 1px var(--sig-line)}
.wz-mkt:has(input:checked) .nm{font-weight:600}
.wz-mkt input:focus-visible~.nm{outline:2px solid var(--sig);outline-offset:3px;
  border-radius:3px}
.wz-mkt.gizli{display:none}
.wz-mkt-empty{font-size:12.5px;color:var(--ink-4);padding:16px 0;display:none}
.wz-mkt-empty.acik{display:block}

/* ── rakip satırları ── */
.wz .rv-rows{display:grid;gap:9px;margin-top:18px}
.wz .rv-row{display:flex;align-items:center;gap:10px}
.wz .rv-row[hidden]{display:none}
.wz .rv-row .idx{width:24px;height:24px;flex:0 0 auto;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--ink-3)}
.wz .rv-row .pre{flex:1;min-width:0}
.wz .rv-del{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r);
  color:var(--ink-4);flex:0 0 auto;background:none;border:0;cursor:pointer}
.wz .rv-del:hover{color:var(--err);background:var(--err-bg)}
.wz .rv-bar{display:flex;align-items:center;margin-top:12px}
.wz .rv-add{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  border:1px dashed var(--line-2);border-radius:var(--r-md);font-size:12.5px;font-weight:600;
  color:var(--ink-2);background:none;cursor:pointer;transition:.14s}
.wz .rv-add:hover{border-color:var(--sig);color:var(--sig);background:var(--sig-soft)}
.wz .rv-add[hidden]{display:none}
.wz .rv-count{font-size:11.5px;color:var(--ink-4);margin-left:10px}

/* ── inceleme · başlatınca ne oluyor ── */
.wz .rvw{margin-top:20px}
.wz-tl{display:grid;margin-top:18px}
.wz-tli{display:flex;gap:12px;padding:0 0 16px;position:relative}
.wz-tli:last-child{padding-bottom:0}
.wz-tli .d{width:9px;height:9px;border-radius:50%;background:var(--sig);margin-top:5px;
  flex:0 0 auto;box-shadow:0 0 0 3px var(--sig-soft)}
.wz-tli:not(:last-child)::before{content:"";position:absolute;left:4px;top:16px;bottom:0;
  width:1px;background:var(--line-2)}
.wz-tli b{font-size:13px;font-weight:600;display:block}
.wz-tli span{font-size:12px;color:var(--ink-3);line-height:1.6}
.wz-tli.mut .d{background:var(--line-2);box-shadow:none}

/* ── düğme satırı ── */
.wz .acts{display:flex;align-items:center;gap:10px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line);flex-wrap:wrap}

/* ── sipariş rayı ── */
.rail{position:sticky;top:84px;display:grid;gap:14px}
.rail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm)}
.rail-hd{padding:15px 17px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.rail-hd .pk{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rail-hd b{font-size:14px;font-weight:700;letter-spacing:-.02em}
.rail-hd .on{font-size:11px;color:var(--ink-4);margin-top:3px;letter-spacing:.02em}
.rail-sc{display:flex;flex-wrap:wrap;gap:6px;padding:13px 17px;border-bottom:1px solid var(--line)}
.rail-sc:empty{display:none}
.scp{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--line);font-size:11px;color:var(--ink-3);
  font-weight:500}
.rail-list{padding:6px 0}
.rl{display:flex;gap:11px;align-items:flex-start;padding:9px 17px}
.rl .mk{width:16px;height:16px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line-2);
  margin-top:2px;display:grid;place-items:center;background:var(--surface)}
.rl .mk svg{width:9px;height:9px;stroke:var(--sig-ink);fill:none;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.rl .k{font-size:11.5px;color:var(--ink-4);font-weight:600}
.rl .v{font-size:13px;color:var(--ink-4);margin-top:1px;word-break:break-word}
.rl .v small{display:block;font-size:11px;color:var(--ink-4);margin-top:2px}
.rl.ok .mk{background:var(--sig);border-color:var(--sig)}
.rl.ok .mk svg{opacity:1}
.rl.ok .v{color:var(--ink);font-weight:500}
.rl.ok .v.mono{font-size:12.5px}
.rl.now .mk{border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-soft)}
.rl.now .k{color:var(--sig)}
.rail-ft{padding:12px 17px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:11.5px;color:var(--ink-4);line-height:1.6}
.rail-help{font-size:11.5px;color:var(--ink-4);line-height:1.6;padding:0 4px}

@media (max-width:980px){
  .wz-grid{grid-template-columns:1fr}
  /* Ray içeriğin ÜSTÜNE çıkıyor: telefonda sipariş özeti formun
     altında kalsaydı hiç görülmezdi. */
  .rail{position:static;order:-1}
  .wz .f2c,.wz-opts{grid-template-columns:1fr}
  .wz-body,.wz-hero{padding-left:16px;padding-right:16px}
  .wz .pad{padding:20px 18px}
  .wz-top{padding:0 16px;gap:10px}
  .wz-h1{font-size:21px}
}
@media (max-width:620px){
  /* Sipariş numarası ve "sonra devam et" metni düşüyor, ikonlar
     kalıyor: 58px'lik çubukta dört öğe yan yana sığmıyor. */
  .wz-top .hd-sm{display:none}
  .wz-mkt-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ═══ KURULUM DAVETİ · panel açılışındaki pencere ═══════════════════
   Eski hâli panelin tepesinde ince bir şeritti ve görülmüyordu:
   parasını ödemiş müşteri boş bir panele bakıp ölçümün başlamasını
   bekliyordu. Kesinti burada haklı, çünkü kullanıcı bir şey yapana
   kadar ürün hiçbir şey ölçmüyor.

   ŞERİT KALDIRILMADI. Pencere kapatılınca (aynı oturumda bir daha
   açılmıyor) geriye görünür bir yol kalması gerekiyor; tek yol
   pencere olsaydı "sonra" diyen müşteri kurulumu bir daha hiç
   bulamazdı. */
.stpv{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:22px;
  background:var(--scrim);overflow-y:auto}
@supports (backdrop-filter:blur(3px)){.stpv{backdrop-filter:blur(3px)}}
.stpv[hidden]{display:none}
.stpm{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--sh-lg);overflow:hidden;margin:auto;
  animation:stp-in .34s cubic-bezier(.2,.9,.3,1) both}
@keyframes stp-in{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
.stp-top{position:relative;padding:28px 30px 24px;background:var(--glow-scan);
  border-bottom:1px solid var(--line);text-align:center}
.stp-x{position:absolute;right:14px;top:14px;width:30px;height:30px;display:grid;
  place-items:center;border-radius:50%;color:var(--ink-4);background:none;border:0;cursor:pointer}
.stp-x:hover{background:var(--surface-2);color:var(--ink)}
.stp-ring{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;
  place-items:center;background:var(--sig-soft);border:1px solid var(--sig-line);
  color:var(--sig);animation:stp-pulse 2.6s ease-in-out infinite}
@keyframes stp-pulse{0%,100%{box-shadow:0 0 0 0 var(--sig-soft)}50%{box-shadow:0 0 0 12px transparent}}
.stp-ring svg{width:26px;height:26px;stroke-width:1.6}
.stp-top h3{font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.stp-top p{font-size:13px;color:var(--ink-3);line-height:1.65;margin:8px auto 0;max-width:390px}
.stp-ono{display:inline-flex;align-items:center;gap:7px;margin-top:13px;padding:5px 11px;
  border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:11.5px;
  color:var(--ink-3)}
.stp-ono b{color:var(--ink-2);font-weight:600}
.stp-steps{display:grid;gap:12px;padding:22px 30px}
.stps{display:flex;gap:12px;align-items:flex-start}
.stps .n{width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;
  color:var(--ink-3)}
.stps b{font-size:13px;font-weight:600;display:block}
.stps span{font-size:12px;color:var(--ink-3);line-height:1.55}
.stp-ft{padding:18px 30px 24px;border-top:1px solid var(--line);background:var(--surface-2);
  display:grid;gap:10px}
.stp-ft .btn{width:100%;justify-content:center}
.stp-later{font-size:11.5px;color:var(--ink-4);text-align:center;line-height:1.6}
.stp-later button{color:var(--sig);text-decoration:underline;text-underline-offset:2px;
  background:none;border:0;padding:0;font:inherit;cursor:pointer}
@media (max-width:520px){
  .stp-top{padding:24px 20px 20px}
  .stp-steps,.stp-ft{padding-left:20px;padding-right:20px}
}
/* Hareketi azalt tercihinde giriş animasyonu ve nabız durur. */
@media (prefers-reduced-motion:reduce){
  .stpm{animation:none}
  .stp-ring{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════
   HIZLI İLETİŞİM BLOĞU
   (partials/quick-contact.blade.php · yalnızca Türkçe yüzeyde)

   Masaüstünde sağ altta iki daire; üzerine gelince yazı yandan
   açılıyor. Mobilde bunun yerine ekranın altında üç düğmelik bant.

   AÇILMA TAMAMEN CSS: genişleyen şey düğmenin kendisi değil
   İÇİNDEKİ YAZI (.qc-tx). Düğmeye overflow:hidden verilseydi nabız
   halkası da kırpılırdı; kırpma metnin kendi üstünde duruyor.

   :focus-within olmadan klavyeyle gezen kişi düğmeyi sekmeyle
   bulur ama etiketini hiç göremez.

   Z-İNDEKS 50 · çerez kutusunun (55) ve yapım bildiriminin (60)
   ALTINDA. İkisi de kapatılması gereken kutular; kapatılacak şey
   her zaman üstte olmalı.
   ═══════════════════════════════════════════════════════════════════ */

.qc{position:fixed;right:22px;bottom:22px;z-index:50;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.qc-btn{position:relative;display:flex;align-items:center;padding:5px;
  border-radius:99px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-md);
  transition:box-shadow .18s,border-color .18s}
.qc-btn:hover{box-shadow:var(--sh-lg);border-color:var(--line-2)}

.qc-ic{position:relative;z-index:1;width:44px;height:44px;flex:0 0 auto;
  border-radius:50%;display:grid;place-items:center}
.qc-ic svg{width:22px;height:22px}

.qc-scan .qc-ic{background:var(--sig);color:var(--sig-ink)}
.qc-wa .qc-ic{background:var(--wa);color:var(--wa-ink)}
.qc-wa .qc-ic svg{width:24px;height:24px}

/* Yazı · kapalıyken genişliği sıfır ama DOM'da duruyor: bağlantının
   erişilebilir adı bu metin. display:none yapılsaydı ekran
   okuyucuya adsız bir bağlantı kalırdı. */
.qc-tx{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;padding:0;
  transition:max-width .26s cubic-bezier(.22,.61,.36,1),opacity .18s,padding .26s}
.qc-btn:hover .qc-tx,
.qc-btn:focus-visible .qc-tx,
.qc-btn:focus-within .qc-tx{max-width:230px;opacity:1;padding:0 17px 0 11px}

.qc-tx b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.qc-tx>span{display:block;margin-top:1px;font-size:11.5px;color:var(--ink-3)}

/* Nabız · dairenin ALTINDAN büyüyor (z-index 0 · ikon 1). */
.qc-pulse{position:absolute;left:5px;top:5px;width:44px;height:44px;border-radius:50%;
  background:var(--wa);pointer-events:none;animation:qc-pulse 2.6s ease-out infinite}
@keyframes qc-pulse{
  0%{transform:scale(1);opacity:.42}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* ── MOBİL BANT ────────────────────────────────────────────────────
   Masaüstünde hiç yok, mobilde sağ alttaki yığının yerini alıyor.

   İKİ EŞİT DÜĞME, üç yuvalı bir bant değil: ajans sitesindeki
   bandın üçüncü yuvası telefon ve o numara burada hiçbir ekranda
   görünmüyor (16.09.2026). İki düğme aynı genişlikte çünkü
   aralarında öncelik yok — biri ürünü denetiyor, diğeri insana
   bağlıyor; hangisinin doğru olduğunu ziyaretçi biliyor.

   Parmakla basılan yüzey 44px'in altına inmiyor.                  */
.qcbar{display:none}

@media (max-width:768px){
  .qc{display:none}

  .qcbar{display:flex;gap:9px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:var(--sh-bar)}

  .qcb-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;
    height:44px;border-radius:var(--r);font-size:13.5px;font-weight:600;
    white-space:nowrap;border:1px solid var(--line-2);color:var(--ink-2)}
  .qcb-btn svg{width:19px;height:19px;flex:0 0 auto}

  .qcb-scan svg{color:var(--sig)}

  /* WhatsApp dolu, tarama kenarlıklı: renk burada süs değil,
     "bu düğme siteden çıkarıyor" işareti. */
  .qcb-wa{background:var(--wa);border-color:var(--wa);color:var(--wa-ink)}

  /* Bant sayfanın son satırını örtmesin; çerez kartı da bandın
     altında kalmasın. :has() desteklemeyen tarayıcıda ikisi de
     eski hâlinde kalıyor — üst üste binme, içeriğin kaybolmasından
     hafif bir kusur. */
  /* Bant 62px + güvenli alan. Aşağıdaki iki sayı bunun üstüne
     kuruluyor; düğme yüksekliği değişirse ikisi de değişmeli. */
  @supports selector(body:has(.qcbar)){
    body:has(.qcbar){padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
    body:has(.qcbar) .czbar{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  }
}

@media (max-width:420px){
  @supports selector(body:has(.qcbar)){
    body:has(.qcbar) .czbar{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  }
}

/* Baskıda sabit düğmelerin işi yok. */
@media print{
  .qc,.qcbar{display:none}
}

/* Hareketi azalt tercihinde nabız durur, açılma anında olur. */
@media (prefers-reduced-motion:reduce){
  .qc-pulse{animation:none;opacity:.28}
  .qc-tx{transition:none}
}