/* ═══════════════════════════════════════════════════════════
   LINALUX — modules/paywall.css
   Ortak paywall bileşeni (PAYWALL-TALIMAT.md). core/tokens.css'teki
   değişkenleri kullanır — bu dosyada YENİ değişken tanımlanmaz.
   Sınıf öneki: pw2- (avuc-analizi'nin eski .pw-* sistemiyle KARIŞMASIN
   diye — o sayfa bu bileşeni hiç yüklemez, ama önek yine de ayrı tutuldu).

   🔴 2026-08-08 — KÂĞIT/MÜREKKEP TEMASINA TAŞINDI.
   Bu dosya tema geçişinin (tasarim-tasima.md Faz A–F) DIŞINDA kalmıştı:
   sabit renk sayacı CSS dosyalarını ELLE TUTULAN bir listeden okuyordu ve
   modules/ o listede hiç yoktu. Sonuç: 11 koyu mor/altın renk bütün geçiş
   boyunca burada durdu, koşum "0 sabit renk" raporlarken. Sayaç artık CSS'i
   de kendi tarıyor (kapı 1).
   Tasarım kaynağı: stitch_monochrome_page_harmony (kullanıcı hazırladı) —
   "Editorial Minimalism": gölge yok, doygun renk yok, hiyerarşi yalnızca
   kontrast ve boşlukla kuruluyor.

   ── TONLAMA KURALI ──
   Token paleti kâğıttan YUKARI doğru gidiyor (--bg → --s1 → --s2 → --s3);
   kâğıttan KOYU bir yüzey token'ı yok. Bölüm zeminleri bu yüzden
   `color-mix(in srgb, var(--ak) N%, var(--bg))` ile üretiliyor: mürekkebi
   kâğıda karıştırmak. Sonuç OPAK — yarı saydam olsaydı arkadaki gökyüzü
   kartların içinden görünürdü (ana sayfada tam bu yaşandı, opak yapıldı).
   ═══════════════════════════════════════════════════════════ */

/* ─── GİRİŞ ANİMASYONU ("Haftalık Değer Çapası") ───
   Şu an KAPALI (paywall.js: PW_INTRO_ACTIVE = false). Kuralları yine de
   temaya taşındı: geri açıldığında koyu mor bir perde açılmasın. */
.pw2-intro {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(6px);
}
.pw2-intro-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  opacity: .8; transition: opacity .3s ease;
}
.pw2-intro-num {
  font-family: var(--serif); font-size: 52px; font-weight: 300;
  color: var(--text); transition: transform .5s cubic-bezier(.2,.8,.2,1), color .5s ease;
}
.pw2-intro-num.pw2-morph {
  animation: pw2-shrink .5s cubic-bezier(.2,.8,.2,1);
  color: var(--ak2);
}
@keyframes pw2-shrink {
  0%   { transform: scale(1); }
  40%  { transform: scale(.82); }
  100% { transform: scale(1); }
}
.pw2-intro-spark {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ak) 7%, transparent) 0%, transparent 70%);
  animation: pw2-pulse 2.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pw2-pulse {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50%      { opacity: .9; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .pw2-intro-num, .pw2-intro-num.pw2-morph { animation: none; transition: none; }
  .pw2-intro-spark { animation: none; }
}

/* ─── PANEL ─── */
.pw2-panel {
  position: relative;
  padding: 20px 20px 28px;
  max-width: 480px; margin: 0 auto;
}

/* 🔴 .pw2-bgimg KAPATILDI. Koyu mor→altın bulanık bir başlık perdesiydi;
   kâğıt temada hem yanlış renk hem yanlış fikir (referans tasarımın ilk
   ilkesi "gölge ve gradyan yok"). Eleman ve sınıf yerinde — silinmedi. */
.pw2-bgimg { display: none; }

/* ─── ÜST ŞERİT — "ÖDEME" + ilerleme (referans tasarımdan) ───
   🔴 2026-08-10 KALDIRILDI (User-tests.md B3): paywall.js artık bu bloğu HİÇ
   basmıyor — çağıran funnel'ın kendi üst çubuğuyla (adım etiketi + ilerleme
   çubuğu) yinelendiği için sayfanın üstü "duplicate" görünüyordu. Kurallar
   silinmedi, geri açmak paywall.js'e tek blok eklemek. */
.pw2-head { margin-bottom: 22px; }
.pw2-head-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.pw2-progress { height: 1px; background: var(--b2); position: relative; }
.pw2-progress-fill {
  position: absolute; inset: 0 auto 0 0; width: 92%; background: var(--ak);
}

.pw2-title {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text); margin-bottom: 12px;
}
.pw2-anchor {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  line-height: 1.7; margin-bottom: 10px;
}
/* User-tests.md B3 — pw2-anchor'un altındaki aciliyet rozeti. */
.pw2-offer-badge {
  display: inline-block; position: relative; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); background: color-mix(in srgb, var(--ak) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--ak) 22%, transparent);
  border-radius: 20px; padding: 5px 12px;
  margin-bottom: 24px;
}

/* ─── HİZMET LİSTESİ ─── */
.pw2-services {
  background: color-mix(in srgb, var(--ak) 4%, var(--bg));
  border: none; border-radius: 12px;
  padding: 20px 18px; margin-bottom: 22px;
}
.pw2-svc-header {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 18px;
}
.pw2-svc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--serif); font-size: 16px; line-height: 1.3; color: var(--text);
  padding: 11px 0;
  border-bottom: 1px solid var(--b2);
}
.pw2-svc-row:last-child { border-bottom: none; padding-bottom: 0; }
.pw2-svc-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); background: color-mix(in srgb, var(--ak) 9%, var(--bg));
  border: none; border-radius: 20px; padding: 4px 10px;
  flex-shrink: 0; white-space: nowrap;
}
/* Bu üçü JS'in ürettiği ama CSS karşılığı HİÇ olmayan sınıflardı (yükseltme
   görünümünün iskeleti). Kural gereği tanımlandılar: işaretlemede duran her
   sınıfın bir karşılığı olmalı, yoksa "stil var sanılan" bir kanca kalır. */
.pw2-svc-group + .pw2-svc-group { margin-top: 6px; }
.pw2-svc-have .pw2-svc-row { color: var(--muted); }
.pw2-svc-new .pw2-svc-row { color: var(--text); }

.pw2-svc-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 6px;
}
.pw2-svc-faded { color: var(--muted); }
.pw2-svc-highlight { color: var(--text); font-weight: 500; }
.pw2-upgrade-copy {
  font-family: var(--serif); font-size: 15px; color: var(--dim);
  margin-top: 14px; text-align: center;
}

/* ─── ACİLİYET SATIRI (kozmik zamanlama) ───
   Geri sayım DEĞİL (PAYWALL-TALIMAT §6 yasağı): sayfanın kendi astro
   verisinden gelen bir zamanlama cümlesi. Kutu değil, tipografik bir not. */
.pw2-urgency {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  text-align: center; line-height: 1.7; margin-bottom: 22px;
  padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--ak) 4%, var(--bg));
}

/* ─── PLUS/PRO SEÇİMİ ───
   Seçili olan BEYAZ + 2px mürekkep çerçeve, seçili olmayan tonlanmış ve
   soluk. Referans tasarımın "aktif durum gölgeyle değil, tersine çevirmeyle
   ya da çerçeve kalınlığıyla anlatılır" kuralı. */
.pw2-tier-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px;
}
.pw2-tier-card {
  font-family: inherit; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--ak) 4%, var(--bg));
  border: 1px solid var(--b2); border-radius: 12px;
  padding: 16px 14px; color: var(--muted);
  opacity: .75;
  transition: border-color .2s, background .2s, opacity .2s;
}
.pw2-tier-card.is-selected {
  background: var(--s3); border: 2px solid var(--ak); padding: 15px 13px;
  color: var(--text); opacity: 1;
}
.pw2-tier-price {
  font-family: var(--serif); font-size: 22px; line-height: 1; color: inherit;
}
.pw2-tier-name { font-size: 12px; font-weight: 500; color: inherit; margin-top: 6px; }
.pw2-tier-sub { font-family: var(--mono); font-size: 9px; color: var(--muted); margin-top: 8px; }
.pw2-tier-card:focus-visible { outline: 2px solid var(--ak); outline-offset: 3px; }
/* İki kart aynı biçimde; ayrım yalnızca SEÇİLİ olma durumunda. Sınıflar
   işaretlemede duruyordu ama tanımsızdı — kanca olarak kalsınlar diye
   tanımlandı, görsel fark yok (fark is-selected'da). */
.pw2-tier-plus, .pw2-tier-pro { min-width: 0; }

/* ─── CHECKOUT PANELİ ───
   Bilinçli sapma (PAYWALL-TALIMAT §5): burası üst bölgenin edebî dilinden
   çıkar, sıradan bir abonelik ödeme ekranı gibi durur. Beyaz kâğıt + ince
   çerçeve, referans tasarımın "kart" tanımı. */
.pw2-checkout {
  background: var(--s3); border: 1px solid var(--b1); border-radius: 12px;
  padding: 20px 18px; margin-top: 4px;
}
.pw2-price-box { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pw2-price-big { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--text); }
.pw2-price-plan {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.pw2-renew {
  font-family: var(--mono); font-size: 11px; color: var(--dim); line-height: 1.7;
  margin-bottom: 20px;
}

/* ─── KART ALANLARI ───
   Placeholder deseni KORUNDU (PAYWALL-TALIMAT §5-7: gerçek Stripe Elements
   ayrı teknik borç, kapsam dışı). Yalnızca renkleri temaya uydu. */
.pay-card { margin-bottom: 16px; }
.pay-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 6px;
}
.cf {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border: 1px solid var(--b2); border-radius: 10px;
  padding: 13px 14px; margin-bottom: 12px;
}
.cl span {
  font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: .1em;
}
.cfk { font-family: var(--mono); font-size: 13px; color: var(--text); letter-spacing: .06em; }
.c2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm {
  background: var(--bg); border: 1px solid var(--b2); border-radius: 10px;
  padding: 13px 14px; font-family: var(--mono); font-size: 12px; color: var(--text);
}

/* ─── SÖZLEŞME ONAYI (2026-08-08, kullanıcı isteği) ───
   İki ayrı onay: Kullanım Koşulları ve Gizlilik Politikası. Tek kutuda
   birleştirilmedi — ikisi ayrı belge, ayrı rıza; tek kutu "toplu onay"
   olurdu ve neyi onayladığı belirsizleşirdi.
   Onay verilmeden CTA çalışmaz (paywall.js). Bağlantılar YENİ SEKMEDE
   açılıyor: ödeme akışından çıkarıp geri dönemeyen kullanıcı bırakmamak için. */
.pw2-consent { margin-bottom: 16px; display: grid; gap: 10px; }
.pw2-consent-row { display: flex; align-items: flex-start; gap: 10px; }
.pw2-consent-box {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  background: var(--s3); border: 1px solid var(--b3); border-radius: 4px;
  cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
.pw2-consent-box:checked { background: var(--ak); border-color: var(--ak); }
/* Onay işareti CSS ile — görsel dosyası yok, tema rengiyle birlikte döner. */
.pw2-consent-box:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--beyaz); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pw2-consent-box:focus-visible { outline: 2px solid var(--ak); outline-offset: 2px; }
.pw2-consent-text {
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--dim);
  cursor: pointer;
}
.pw2-consent-text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ─── RIZA CÜMLESİ (2026-08-10, User-tests.md B3) ───
   İki onay kutusu kaldırıldı — CTA'nın hemen üstünde, kart alanının altında
   tek satırlık bir rıza cümlesi var. Rıza artık BUTONA BASMA eylemiyle
   veriliyor, iki ayrı kutuyla değil. Yukarıdaki .pw2-consent* kuralları
   bilinçli olarak silinmedi (geri açmak tek blok). */
.pw2-consent-note {
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--dim);
  margin: 0 0 16px;
}
.pw2-consent-note a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ─── CTA ─── */
.pw2-cta {
  width: 100%; padding: 17px; margin-top: 2px;
  background: var(--ak); color: var(--beyaz); border: none; border-radius: 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s;
}
.pw2-cta:active { opacity: .85; }
.pw2-cta:focus-visible { outline: 2px solid var(--ak); outline-offset: 3px; }
/* Onay kutuları işaretlenmeden pasif. Görsel olarak da açıkça pasif —
   "basılabilir ama çalışmıyor" hâli en kötü seçenek olurdu. */
.pw2-cta[disabled] {
  background: color-mix(in srgb, var(--ak) 22%, var(--bg));
  color: var(--beyaz); cursor: not-allowed; opacity: 1;
}
.pw2-trust {
  text-align: center; font-family: var(--mono); font-size: 11px; color: var(--dim);
  margin-top: 12px;
}
.pw2-disclaimer {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  line-height: 1.7; text-align: center; margin-top: 14px;
}
.pw2-badges {
  text-align: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; color: var(--muted); margin-top: 12px;
}