/* ============================================================================
   HOGEON — AÇIK TEMA (karşılaştırma sürümü)
   ----------------------------------------------------------------------------
   site.css'ten SONRA yüklenir, yalnız yüzey renklerini ezer.

   TASARIM İLKESİ — tek renk değil, RİTİM:
     · OKUNACAK yerler açık  (hero metni, özellikler, fiyat, SSS, yasal)
     · GÖSTERİLECEK yerler koyu ("sahne" — canlı gösterim, cam kataloğu)
   Fotoğraf stüdyosundaki siyah fon mantığı: ürünü koyu zemine koyarsın,
   yazıyı aydınlığa. Tek düze koyu sayfa hem yorar hem "gece kulübü" okunur;
   hedef kitle aydınlık, klinik dükkânlarda çalışan sağlık meslek mensubu.

   KONTRAST NOTU: açık zeminde marka yeşili METİN olarak --brand-700 olmalı
   (#2E6B24 → 6.6:1). --brand-500 (3.2:1) yalnız grafik öğe; üstüne düz metin
   yazılmaz. Bu kural site.css:275'te de yazılı.
   ============================================================================ */

:root {
  /* Zemin — kırık beyaz. Saf beyaz (#fff) klinik ve sert; logodaki
     kırık beyaza (#F8F8F7) yakın bir ton daha sıcak duruyor. */
  --bg:      #F6F7F4;
  --bg-2:    #FFFFFF;
  --bg-3:    #EEF1EC;

  /* Yüzeyler — koyu temada beyaz katmandı, açıkta koyu katman olmalı */
  --panel:   rgba(16, 26, 40, .035);
  --panel-2: rgba(16, 26, 40, .055);
  --line:    rgba(16, 26, 40, .11);
  --line-2:  rgba(16, 26, 40, .18);

  /* Metin */
  --fg:      #16202E;
  --fg-2:    #46586E;
  --fg-3:    #7A8899;

  --shadow:    0 18px 44px rgba(16, 26, 40, .10);
  --shadow-sm: 0 8px 20px rgba(16, 26, 40, .07);
}

/* Zemin dokusu — koyu temadaki yeşil hâle açıkta çok soluk kalıyor;
   daha yumuşak ve daha geniş bir yayılım. */
body::before {
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(82,181,61,.14), transparent 64%),
    radial-gradient(700px 460px at 6% 22%, rgba(59,130,246,.06), transparent 62%),
    radial-gradient(620px 620px at 50% 108%, rgba(82,181,61,.07), transparent 66%);
}

/* ── Üst çubuk ─────────────────────────────────────────────────────────────
   Koyu temada rgba(10,15,30,.72) sabitti — açıkta beyaz cam. */
.nav { background: rgba(255,255,255,.78); border-bottom-color: var(--line); }
.nav-links a:hover { background: var(--panel); }
.nav.open { background: var(--bg-2); }

/* Logo: koyu temada kelime markası kırık beyazdı, açıkta koyu olmalı.
   SVG içindeki #F8F8F7 dolguları CSS'ten çevrilemez → filtre ile. */
.brand svg [fill="#F8F8F7"] { fill: #16202E; }
.brand svg [fill="#0a0f1e"] { fill: #F6F7F4; }

/* ── Metin ────────────────────────────────────────────────────────────────
   Marka yeşili açık zeminde METİN olarak yeterli kontrast vermiyor. */
/* ⚠️ `background` KISAYOLU KULLANILMAZ — background-clip'i initial'a sıfırlar
   ve site.css'teki -webkit-background-clip:text ölür, yazı dolu bloğa döner.
   Yalnız background-image ezilir. */
h1 .hl { background-image: linear-gradient(96deg, var(--brand-700), var(--brand-500)); }

/* Rozet — açık zeminde açık yeşil metin okunmuyordu */
.badge { background: rgba(82,181,61,.13); border-color: rgba(82,181,61,.38); color: var(--brand-700); }
.badge b { background: var(--brand-600); color: #fff; }
.eyebrow { color: var(--brand-700); }
.hero-note b, .card p b, .split-card.good li b { color: var(--fg); }
.hero-stats div span { color: var(--brand-700); }
.lens-cat .count { color: var(--brand-700); }
.stat b { color: var(--brand-700); }

/* ── Kartlar ─────────────────────────────────────────────────────────────── */
.card { background: var(--bg-2); box-shadow: var(--shadow-sm); }
.card:hover { background: var(--bg-2); border-color: rgba(82,181,61,.45); box-shadow: var(--shadow); }
.card-icon { background: rgba(82,181,61,.10); border-color: rgba(82,181,61,.30); }
.card-icon svg { stroke: var(--brand-700); }

.split-card.bad  { background: rgba(220,38,38,.045); border-color: rgba(220,38,38,.20); }
.split-card.good { background: rgba(82,181,61,.07);  border-color: rgba(82,181,61,.30); }
.split-card.bad h3  { color: #B91C1C; }
.split-card.good h3 { color: var(--brand-700); }
.split-card.bad li::before {
  background-color: rgba(220,38,38,.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.split-card.good li::before {
  background-color: rgba(82,181,61,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6B24' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
}

/* ── Adımlar / planlar ───────────────────────────────────────────────────── */
.step { background: var(--bg-2); box-shadow: var(--shadow-sm); }
.plan { background: var(--bg-2); box-shadow: var(--shadow-sm); }
.plan.featured {
  background: linear-gradient(180deg, rgba(82,181,61,.09), var(--bg-2));
  border-color: rgba(82,181,61,.55);
  box-shadow: 0 20px 48px rgba(46,107,36,.15);
}
.plan-total em { color: var(--brand-700); }
.plan-alt a { color: var(--brand-700); }
.plan-price .vat { color: var(--brand-700); }
.plan-feats li svg { stroke: var(--brand-600); }
.stat { background: var(--bg-2); box-shadow: var(--shadow-sm); }

/* ── Butonlar ────────────────────────────────────────────────────────────── */
.btn-ghost { background: var(--bg-2); border-color: var(--line-2); color: var(--fg); }
.btn-ghost:hover { background: var(--bg-3); border-color: rgba(82,181,61,.55); }

/* ── SSS ─────────────────────────────────────────────────────────────────── */
.faq details { background: var(--bg-2); box-shadow: var(--shadow-sm); }
.faq details[open] { background: var(--bg-2); border-color: rgba(82,181,61,.40); }
.faq summary::after { border-color: var(--brand-700); }
.faq .answer a { color: var(--brand-700); }

.platform { background: var(--bg-2); box-shadow: var(--shadow-sm); }
.platform svg { stroke: var(--brand-700); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { background: var(--bg-3); border-top-color: var(--line); }
footer nav a:hover { color: var(--brand-700); }
.foot-bottom a { color: var(--brand-700) !important; }
.foot-brand svg [fill="#F8F8F7"] { fill: #16202E; }
.foot-brand svg [fill="#0a0f1e"] { fill: #EEF1EC; }

/* ═══ SAHNE BÖLÜMLERİ — bunlar KOYU KALIR ═════════════════════════════════
   Ürünü gösterdiğimiz yerler. Lens simülasyonu ve cam şemaları koyu zeminde
   parlıyor; açık zemine alınsa görsel güç kaybolur. Sayfaya ritim de bu verir. */
#deneyin, #camlar {
  background: #0B1220;
  margin: 0;
  padding-top: 96px;
  padding-bottom: 96px;
}
#deneyin .eyebrow, #camlar .eyebrow { color: var(--brand-300); }
#deneyin h2, #camlar h2 { color: #EEF3F8; }
#deneyin .lead, #camlar .lead { color: #A9B6C7; }
#deneyin .lead b, #camlar .lead b { color: #EEF3F8 !important; }

/* Sahne içindeki bileşenler koyu tema tokenlarına geri döner */
#deneyin .sim, #camlar .lens-cat {
  --panel:   rgba(255,255,255,.045);
  --panel-2: rgba(255,255,255,.07);
  --line:    rgba(255,255,255,.10);
  --line-2:  rgba(255,255,255,.17);
  --fg:      #EEF3F8;
  --fg-2:    #A9B6C7;
  --fg-3:    #71829A;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: none;
}
#deneyin .sim-ad { color: var(--brand-300); }
#deneyin .sim-toggle { background: rgba(255,255,255,.05); color: #A9B6C7; }
#deneyin .sim-toggle[aria-pressed=true] { color: var(--brand-200); }
#camlar .lens-cat .count { color: var(--brand-400); }
#camlar .lens-cat h3 { color: #EEF3F8; }
#camlar .lens-cat li { background: rgba(255,255,255,.05); color: #A9B6C7; }

/* Deneme bandı ve kapanış CTA'sı — vurgu için koyu kalır */
.trial {
  background: linear-gradient(125deg, #12351C, #0B1220 62%);
  border-color: rgba(82,181,61,.34);
}
.trial h2 { color: #EEF3F8; }
.trial p { color: #A9B6C7; }
.trial p b { color: #EEF3F8 !important; }
.trial .btn-ghost { background: rgba(255,255,255,.06); color: #EEF3F8; border-color: rgba(255,255,255,.20); }
.trial-mail { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.20); color: var(--brand-200); }
.trial .muted, .trial p[style] { color: #71829A !important; }

/* ═══ 13.09.2026 — AÇIK TEMA CANLIYA ALINDI ════════════════════════════════
   Bu dosya "karşılaştırma sürümü" olarak hazırlanmış ama HİÇBİR sayfaya
   bağlanmamıştı; site tamamen koyu yayındaydı. Kullanıcı geri bildirimi:
   "tema ve yazılar çok siyah tonlarında, güvenden uzak". Hedef kitle aydınlık,
   klinik dükkânlarda çalışan sağlık meslek mensubu — koyu tek düze sayfa
   "gece kulübü" okunuyordu. */

/* ── Fiyat kartları: satın alma kararının verildiği yer ────────────────── */
.plan { border-radius: 22px; }
.plan:hover { box-shadow: var(--shadow); border-color: rgba(82,181,61,.45); }
.plan-name { font-size: 17px; letter-spacing: .01em; }
.plan-price b { color: var(--fg); }
.plan.featured::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
}

/* ── Yasal sayfalar — yasal.css koyu zemin varsayıyordu ─────────────────── */
.yasal-icerik tbody tr:hover { background: rgba(16,26,40,.03); }
.yasal-icerik code { background: rgba(16,26,40,.06); color: var(--brand-700); }
.yer-tutucu { background: #FFF1D6; color: #7A4A00; border-color: #EDC476; }

/* ── Kontrast (13.09.2026) ───────────────────────────────────────────────
   --fg-3 #7A8899 beyaz zeminde 3.5:1 veriyordu; küçük metin için WCAG AA
   sınırı 4.5:1. Kart açıklamaları, fiyat detayları ve altbilgi bu renkte ve
   silik okunuyordu — "ucuz" izleniminin tek başına en büyük sebebi.
   #5F6E80 → 5.2:1. Koyu sahne bölümleri kendi --fg-3'ünü tanımlıyor, etkilenmez. */
:root { --fg-3: #5F6E80; }

.guven-oge { background: var(--bg-2); box-shadow: var(--shadow-sm); }
.guven-oge svg { stroke: var(--brand-600); }
.guven-alt a { color: var(--brand-700); }

/* ── Deneme bandı — AÇIK, marka tonlu kart (13.09.2026) ─────────────────────
   Önceki hâl #12351C → #0B1220 gradyanıydı; açık sayfanın ortasında bulanık
   yeşil-siyah bir blok gibi duruyordu ve hemen ardından gelen kapanış bandıyla
   aynı ağırlıktaydı. Sayfada tek koyu vurgu artık kapanış çağrısı.
   !important: yukarıdaki eski koyu kurallar !important taşıyor. */
.trial {
  background: linear-gradient(120deg, #E6F4DE 0%, #F4FAF0 48%, #FFFFFF 100%);
  border-color: rgba(82,181,61,.38);
  box-shadow: var(--shadow-sm);
}
.trial h2 { color: var(--fg); }
.trial p { color: var(--fg-2); }
.trial p b { color: var(--fg) !important; }
.trial .eyebrow { color: var(--brand-700); }
.trial .btn-ghost { background: #fff; color: var(--fg); border-color: var(--line-2); }
.trial-iletisim a { color: var(--brand-700); }

/* ═══ 13.09.2026 (2. tur) — "site çok beyaz" geri bildirimi ═══════════════════
   Açık tema doğru yöndeydi ama marka rengi neredeyse yalnız butonlarda kalmıştı.
   Rengi, kararın verildiği iki yere taşıyoruz: üst menü ve öne çıkan plan. */

/* ── Üst menü: kapanış bandıyla aynı marka yeşili ──────────────────────────
   DÜZ renk BİLEREK (gradyan değil): logodaki "O" harflerinin iç boşlukları
   ayrı dolgulu dikdörtgenler; zemin gradyan olsa boşluklar yama gibi görünür. */
.nav { background: #235420; border-bottom-color: transparent; box-shadow: 0 6px 22px rgba(27,82,23,.22); }
.nav .brand svg [fill="#F8F8F7"] { fill: #FFFFFF; }
.nav .brand svg [fill="#0a0f1e"] { fill: #235420; }
.nav-links a { color: rgba(255,255,255,.84); }
.nav-links a:hover { color: #FFFFFF; background: rgba(255,255,255,.14); }
.nav .nav-cta .btn-ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.nav .nav-cta .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; }
/* Yeşil zeminde yeşil buton kaybolur → birincil eylem BEYAZ */
.nav .nav-cta .btn-primary { background: #FFFFFF; color: #235420; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.nav .nav-cta .btn-primary:hover { background: #F0FAEC; }
.nav-toggle { color: #FFFFFF; border-color: rgba(255,255,255,.5); }
.nav.open { background: #235420; }
.nav.open .nav-links { border-top-color: rgba(255,255,255,.18); }

/* ── Fiyat bölümü hafif marka tonlu zemin: beyaz kartlar öne çıksın ─────── */
#fiyatlar { background: linear-gradient(180deg, #EAF3E4 0%, #F6F7F4 100%); }

/* ── Diğer planlar: beyaz ama BELİRGİN konturlu ────────────────────────── */
.plan { background: #FFFFFF; border: 1.5px solid rgba(46,107,36,.20); box-shadow: 0 10px 28px rgba(16,26,40,.06); }
.plan:hover { border-color: rgba(46,107,36,.55); box-shadow: 0 20px 44px rgba(16,26,40,.12); }

/* ── Öne çıkan plan: kapanış bandıyla aynı yeşil zemin ─────────────────────
   Satır içi stiller (ör. <b style="color:var(--fg)">) değişkenleri okuduğu için
   renkler DEĞİŞKENLE çevriliyor; tek tek seçici yazmak onları kaçırırdı. */
.plan.featured {
  --fg: #FFFFFF; --fg-2: rgba(255,255,255,.88); --fg-3: rgba(255,255,255,.74);
  --brand-700: #CFEFBF; --brand-600: #CFEFBF; --brand-300: #CFEFBF; --line: rgba(255,255,255,.22);
  background: linear-gradient(145deg, #235420 0%, #3E8F2E 58%, #52B53D 100%);
  border-color: transparent; color: #FFFFFF;
  box-shadow: 0 28px 64px rgba(46,107,36,.32);
}
.plan.featured::before { display: none; }
.plan.featured:hover { border-color: transparent; box-shadow: 0 34px 72px rgba(46,107,36,.38); }
.plan.featured .plan-tag { background: #FFFFFF; color: #235420; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.plan.featured .btn-primary { background: #FFFFFF; color: #235420; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.plan.featured .btn-primary:hover { background: #F0FAEC; }
.plan.featured .plan-alt { border-color: rgba(255,255,255,.35); }
.plan.featured .plan-alt a { color: #FFFFFF; }
.plan.featured .plan-feats li svg { stroke: #CFEFBF; }

/* ── Üst menü: öne çıkan plan kartının gradyanının YATAY hâli (13.09.2026, 3. tur)
   Düz #235420 "çok koyu" bulundu. Logo solda durduğu için "O" harflerinin iç
   boşlukları gradyanın SOL UCUNUN rengine boyanır (logo menü genişliğinin ilk
   ~%13'ünde; orada renk #235420 → #27602A arası) — yama gibi görünmesin. */
.nav { background: linear-gradient(90deg, #235420 0%, #3E8F2E 58%, #52B53D 100%); }
.nav .brand svg [fill="#0a0f1e"] { fill: #265B28; }
.nav.open { background: linear-gradient(180deg, #235420 0%, #2E6B24 100%); }

/* ── Aktif menü öğesi (13.09.2026) ─────────────────────────────────────────
   Kullanıcı: "hangi menüye tıkladığımızı, hangisinin seçili olduğunu
   anlayamıyoruz". Bulunulan bölüm beyaz hap: yeşil gradyanda en yüksek kontrast.
   Sınıfı index.html'deki kaydırma betiği verir. */
.nav-links a.on { background: #FFFFFF; color: #1B5217; font-weight: 600; }
.nav-links a.on:hover { background: #FFFFFF; color: #1B5217; }
/* Menüdeki "Kayıt Ol / Abone Ol" vurgu renginde — tema kuralı .btn-primary'yi
   beyaz yapıyordu, .btn-cta ayrı sınıf olduğu için etkilenmez. */
.nav .nav-cta .btn-cta:hover { background: linear-gradient(180deg,#FFBE4D,#FFA826); }
/* Öne çıkan planda satın alma butonu vurgu renginde (beyaz yerine) */
.plan.featured .btn-primary {
  background: linear-gradient(180deg,#FFB32E,#FF9F0A); color: #231600; font-weight: 700;
  box-shadow: 0 12px 28px rgba(255,159,10,.42);
}
.plan.featured .btn-primary:hover { background: linear-gradient(180deg,#FFBE4D,#FFA826); }

/* ── Ürün turu penceresi (13.09.2026) ─────────────────────────────────────────
   Pencere zemini KOYU (#0b111c, site.css .tur-pencere) ama altındaki açıklama
   açık temanın koyu gri token'larıyla yazılıyordu → koyu üstüne koyu, okunmuyordu.
   Kullanıcı: "bu yazı beyaz olsun". Pencere içindeki metinler açık renk. */
.tur-panel figcaption { color: rgba(255,255,255,.82); border-top-color: rgba(255,255,255,.10); }
.tur-panel figcaption b { color: #FFFFFF; }
.tur-cubuk { border-bottom-color: rgba(255,255,255,.08); }
.tur-cubuk span { color: rgba(255,255,255,.62); }