/* zamanli · marka katmanı · fiyatlandırma sayfası · Arada
   Yerleşim: üst bar → kapak (başlık, dürüst cümleler, aylık/yıllık anahtarı) → üç paket (kart yok: ince çizgi, popüler paket
   yeşil çizgi) → karşılaştırma → bilgi şeritleri → SSS → son çağrı → ödeme bandı → alt bilgi.
   Yön: A · Nefes. Sayfanın kendi stil katmanıdır: eski <style> bloğu kalktı; id/sınıf adları ve JS aynı.
   styles.css + tokens.css + ux.css'ten SONRA bağlanır; seçiciler :root önekli (özgüllükle geçer). */

/* ---------- taban ---------- */
:root body { background: var(--zemin); color: var(--yazi-1); font-family: var(--font); font-size: 16px; line-height: 1.55; margin: 0; overflow-x: clip; }
:root :is(h1, h2, h3) { font-family: var(--font); letter-spacing: -0.015em; color: var(--yazi-1); margin: 0; }
:root p { margin: 0; }
:root ul { list-style: none; margin: 0; padding: 0; }
:root .i { width: 20px; height: 20px; flex: none; vertical-align: middle; }
:root .gorunmez { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- düğmeler ---------- */
:root .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--yaricap-hap); border: 1px solid transparent; font-family: var(--font); font-size: 16px; font-weight: 700;
  line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s var(--gecis), border-color .2s var(--gecis); }
:root .btn-primary { background: var(--vurgu); color: var(--yuzey); }
:root .btn-primary:hover { background: var(--vurgu-koyu); color: var(--yuzey); }
:root .btn-outline { background: transparent; color: var(--yazi-1); border-color: var(--slate-300); }
:root .btn-outline:hover { border-color: var(--yazi-1); color: var(--yazi-1); }
:root :where(a, button, [onclick], [role="switch"]):focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* ---------- üst bar ---------- */
:root .header { position: sticky; top: 0; z-index: 100; padding: 0 16px; background: rgba(247,247,243,.94);
  border-bottom: 1px solid var(--cizgi); box-shadow: none; backdrop-filter: blur(8px); }
:root .header-container { max-width: 1152px; height: 64px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
:root .logo { display: inline-flex; align-items: center; min-height: 44px; gap: 0; text-decoration: none; }
:root .logo-marka { display: block; height: 28px; width: auto; }
:root .nav { display: flex; align-items: center; gap: 4px; }
:root .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--yaricap-hap);
  color: var(--yazi-2); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .2s var(--gecis); }
:root .nav a:hover { background: var(--yuzey-2); color: var(--yazi-1); }
:root .nav a.aktif { color: var(--vurgu-koyu); }
:root .nav a.btn-primary { margin-left: 6px; padding: 0 18px; min-height: 44px; background: var(--vurgu); color: var(--yuzey); }
:root .nav a.btn-primary:hover { background: var(--vurgu-koyu); color: var(--yuzey); }
:root .mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-kart); background: transparent; color: var(--yazi-1); cursor: pointer; }
:root .mobile-menu-btn .i { width: 22px; height: 22px; }
@media (max-width: 768px) {
  :root .nav { display: none; }
  :root .mobile-menu-btn { display: inline-flex; }
}

/* telefon menüsü (açma/kapama sayfa JS'inde: style.right) */
:root .fm-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(20,32,25,.48); }
:root .fm-panel { position: fixed; top: 0; width: 280px; height: 100%; z-index: 999; display: flex; flex-direction: column;
  background: var(--yuzey); border-left: 1px solid var(--cizgi); font-family: var(--font); }
:root .fm-baslik { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 20px;
  background: var(--zemin); border-bottom: 1px solid var(--cizgi); }
:root .fm-kapat { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-kart); background: transparent; color: var(--yazi-2); }
:root .fm-kapat:hover { background: var(--yuzey-2); color: var(--yazi-1); }
:root .fm-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
:root .fm-nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; color: var(--yazi-1);
  font-size: 16px; font-weight: 600; text-decoration: none; }
:root .fm-nav a .i { color: var(--vurgu); }
:root .fm-nav a:hover { background: var(--vurgu-acik); }
:root .fm-nav a.aktif { color: var(--vurgu-koyu); }
:root .fm-ayrac { height: 1px; margin: 8px 20px; background: var(--cizgi); }
:root .fm-alt { padding: 16px 20px; border-top: 1px solid var(--cizgi); text-align: center; font-size: 13px; color: var(--yazi-3); }

/* ---------- kapak ---------- */
:root .hero { padding: clamp(40px, 8vw, 80px) 16px clamp(24px, 4vw, 40px); text-align: center; background: transparent; }
:root .hero h1 { max-width: 20ch; margin: 0 auto 16px; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; font-weight: 800; }
:root .hero > p { max-width: 36em; margin: 0 auto 28px; font-size: clamp(1rem, 2.2vw, 1.1875rem); line-height: 1.6; color: var(--yazi-2); }
:root .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 24px; }
:root .trust-badges { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; max-width: 760px; margin: 0 auto;
  font-size: 15px; font-weight: 600; color: var(--yazi-2); }
:root .trust-badges li { display: inline-flex; align-items: center; gap: 6px; }
:root .tik { display: inline-flex; flex: none; color: var(--vurgu); }
:root .tik--yok { color: var(--yazi-3); }
:root .tik .i { width: 18px; height: 18px; }

/* aylık / yıllık anahtarı */
:root .billing-toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
:root .billing-toggle > span:not(.savings-badge) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-weight: 500; color: var(--yazi-3); cursor: pointer; }
:root #monthlyLabel.active, :root #yearlyLabel.active { color: var(--yazi-1); font-weight: 600; }
:root .toggle-switch { position: relative; flex: none; width: 56px; height: 32px; border-radius: var(--yaricap-hap);
  background: var(--cizgi); cursor: pointer; transition: background-color .2s var(--gecis); }
:root .toggle-switch.active { background: var(--vurgu); }
:root .toggle-switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--yuzey); box-shadow: 0 1px 2px rgba(20,32,25,.2); transition: transform .2s var(--gecis); }
:root .toggle-switch.active::after { transform: translateX(24px); }
:root .savings-badge { padding: 4px 12px; border-radius: var(--yaricap-hap); background: var(--vurgu-acik); color: var(--vurgu-koyu);
  font-size: 13px; font-weight: 700; }

/* ---------- paketler: kart kutusu yok, üstte ince çizgi ---------- */
:root .pricing-section { max-width: 1120px; margin: 0 auto; padding: 24px 16px clamp(48px, 8vw, 80px); }
:root .pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 520px; margin: 0 auto; }
@media (min-width: 900px) {
  :root .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: none; align-items: stretch; }
}
:root .pricing-card { position: relative; display: flex; flex-direction: column; padding: 24px 0 0; background: transparent;
  box-shadow: none; border: 0; border-top: 1px solid var(--cizgi); border-radius: 0; transform: none; }
:root .pricing-card.popular { border-top: 2px solid var(--vurgu); padding-top: 23px; }
:root .popular-badge { position: static; align-self: flex-start; box-sizing: border-box; height: 28px; margin: 0 0 16px; padding: 4px 12px; line-height: 20px; border-radius: var(--yaricap-hap);
  background: var(--yuzey-2); color: var(--yazi-2); font-size: 13px; font-weight: 700; transform: none; }
:root .pricing-card.popular .popular-badge { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
/* Ücretsiz kartta etiket yok: aynı satır yüksekliği (28 + 16) ayrılır, üç kartın başlık ve fiyatı hizalı kalır */
:root .pricing-card.free::before { content: ''; display: block; height: 44px; }
:root .card-header { margin: 0 0 16px; padding: 0; border: 0; text-align: left; }
:root .card-title { margin-bottom: 4px; font-size: 1.375rem; font-weight: 800; color: var(--yazi-1); }
:root .pricing-card.popular .card-title { color: var(--vurgu-koyu); }
:root .card-desc { font-size: 15px; color: var(--yazi-2); }
:root .card-price { min-height: 128px; margin-bottom: 20px; text-align: left; }
:root .price { font-size: 2.75rem; font-weight: 800; line-height: 1.1; color: var(--yazi-1); }
:root .price-currency { font-size: 1.25rem; font-weight: 600; color: var(--yazi-2); }
:root .price-period { margin-top: 4px; font-size: 15px; color: var(--yazi-3); }
:root .value-prop { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: var(--yaricap-hap);
  background: var(--yuzey-2); color: var(--yazi-2); font-size: 13px; font-weight: 600; }
:root .pricing-card.popular .value-prop { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
:root .features-list { flex: 1; margin-bottom: 24px; }
:root .features-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--cizgi);
  font-size: 15px; color: var(--yazi-1); }
:root .features-list .tik { margin-top: 2px; }
:root .features-list li.feature-category { display: block; margin-top: 12px; padding: 16px 0 8px; border-bottom: 0;
  font-size: 13px; font-weight: 700; color: var(--yazi-3); text-transform: none; }
:root .feature-highlight { font-weight: 700; }
:root .card-cta { margin-top: auto; }
:root .card-cta .btn { width: 100%; }
:root .upgrade-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px;
  font-size: 14px; font-weight: 600; color: var(--vurgu-koyu); text-decoration: none; text-align: center; }
:root .upgrade-link:hover { text-decoration: underline; }

/* ---------- karşılaştırma ---------- */
:root .comparison-section { max-width: 1120px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) 16px; border-top: 1px solid var(--cizgi); }
:root .comparison-title { margin-bottom: 24px; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }
:root .comparison-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:root .comparison-table { width: 100%; min-width: 600px; border-collapse: collapse; }
:root .comparison-table th, :root .comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); text-align: center; font-size: 15px; }
:root .comparison-table th:first-child, :root .comparison-table td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--zemin); }
:root .comparison-table th { background: var(--zemin); font-weight: 700; color: var(--yazi-1); border-bottom: 2px solid var(--cizgi); }
:root .comparison-table .col-popular { background: var(--vurgu-acik); }
:root .comparison-table .check-cell { color: var(--vurgu); }
:root .comparison-table .x-cell { color: var(--yazi-3); }
:root .comparison-table td .i { width: 18px; height: 18px; }
:root .comparison-accordion { display: none; }
:root .compare-acc-item { border-bottom: 1px solid var(--cizgi); cursor: pointer; }
:root .compare-acc-item:first-child { border-top: 1px solid var(--cizgi); }
:root .compare-acc-header { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 0; font-weight: 700; }
:root .compare-acc-header::after { content: '+'; font-size: 1.25rem; color: var(--yazi-3); }
:root .compare-acc-item.open .compare-acc-header::after { content: '−'; color: var(--vurgu); }
:root .compare-acc-body { display: none; padding: 0 0 12px; }
:root .compare-acc-item.open .compare-acc-body { display: block; }
:root .compare-acc-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 15px; color: var(--yazi-2); }
:root .compare-acc-row .i { color: var(--vurgu); }
@media (max-width: 768px) {
  :root .comparison-wrap, :root .comparison-table { display: none; }
  :root .comparison-accordion { display: block; }
}

/* ---------- bilgi şeritleri ---------- */
:root .info-banner { padding: clamp(32px, 6vw, 56px) 16px; background: var(--yuzey-2); border-top: 1px solid var(--cizgi); }
:root .info-banner--alt { background: var(--zemin); }
:root .info-banner-inner { max-width: 760px; margin: 0 auto; text-align: left; }
:root .info-banner h3 { margin-bottom: 8px; font-size: 1.25rem; font-weight: 800; }
:root .info-banner p { color: var(--yazi-2); font-size: 16px; line-height: 1.65; }
:root .info-banner .btn { margin-top: 20px; }

/* ---------- SSS ---------- */
:root .faq-section { max-width: none; margin: 0; padding: clamp(48px, 8vw, 80px) max(16px, calc((100% - 760px) / 2)); background: transparent; }
:root .faq-title { margin-bottom: 24px; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }
:root .faq-item { border-bottom: 1px solid var(--cizgi); cursor: pointer; }
:root .faq-item:first-of-type { border-top: 1px solid var(--cizgi); }
:root .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 0;
  font-size: 17px; font-weight: 700; color: var(--yazi-1); }
:root .faq-question:hover { color: var(--vurgu-koyu); }
:root .faq-question::after { content: '+'; font-size: 1.25rem; color: var(--yazi-3); }
:root .faq-item.open .faq-question::after { content: '−'; color: var(--vurgu); }
:root .faq-answer { display: none; max-width: 62ch; padding: 0 0 20px; color: var(--yazi-2); font-size: 16px; line-height: 1.65; }
:root .faq-item.open .faq-answer { display: block; }

/* ---------- son çağrı ve ödeme bandı ---------- */
:root .cta-banner { padding: clamp(48px, 8vw, 80px) 16px; background: var(--koyu); color: var(--koyu-yazi); text-align: center; }
:root .cta-banner h2 { margin-bottom: 8px; color: var(--koyu-yazi); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }
:root .cta-banner p { margin-bottom: 24px; color: rgba(247,247,243,.82); font-size: 1.0625rem; }
:root .cta-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
:root .cta-banner .btn { background: var(--koyu-yazi); color: var(--koyu); }
:root .cta-banner .btn:hover { background: var(--yuzey); }
:root .cta-banner .btn-ghost { background: transparent; color: var(--koyu-yazi); border-color: rgba(247,247,243,.5); }
:root .cta-banner .btn-ghost:hover { background: transparent; border-color: var(--koyu-yazi); }
:root .odeme-bandi { padding: 32px 16px; text-align: center; background: var(--yuzey); border-top: 1px solid var(--cizgi); }
:root .odeme-bandi img { display: inline-block; max-width: min(429px, 100%); height: auto; }
:root .odeme-baslik { margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--yazi-2); }
:root .odeme-not { margin-top: 12px; font-size: 13px; color: var(--yazi-3); }

/* ---------- alt bilgi (ana.css ile aynı dil) ---------- */
:root .footer { background: var(--koyu); color: var(--koyu-yazi); font-family: var(--font); padding: 48px 16px 32px; }
:root .footer-container { max-width: 1120px; margin: 0 auto; }
:root .footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: 24px; border-bottom: 1px solid rgba(247,247,243,.14); }
:root .footer-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
:root .footer-brand .logo-marka { height: 28px; }
:root .footer-brand p { margin: 0; color: rgba(247,247,243,.72); font-size: 15px; }
:root .footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
:root .footer a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(247,247,243,.82); text-decoration: none; }
:root .footer a:hover { color: var(--koyu-yazi); text-decoration: underline; }
:root .footer-bottom { padding-top: 16px; color: rgba(247,247,243,.6); font-size: 14px; }
:root .footer-legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 12px; }
:root .footer-legal a { font-size: 14px; }
:root .footer-credit a { display: inline; min-height: 0; text-decoration: underline; }
@media (max-width: 768px) {
  :root .footer-content { justify-content: center; }
  :root .footer-brand { justify-content: center; text-align: center; }
  :root .footer-legal { justify-content: center; gap: 0 18px; }
  :root .footer-bottom { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}