/* ==========================================================================
   WapFlow herkese açık sayfalar (giriş, kayıt, şifremi unuttum, şifre sıfırlama, fiyatlar) — SaaS "theme-v3"
   server.js withPublicTheme() yalnızca SaaS'ta </head> önüne ekler (masaüstünde bu dosya yüklenmez).
   Bu sayfalar koyu tasarımlıdır: müşteri panelinin koyu belirteçleri (theme-v3.css ile aynı değerler) kullanılır.
   Sayfa HTML'ine dokunulmadan, sınıf seçicileriyle uygulanır. Metin kontrastı ≥ 4.5:1.
   ========================================================================== */
html.theme-v3 {
    --bg: #0A1028;
    --bg-image: radial-gradient(1100px 560px at 88% -12%, #123B3A 0%, rgba(18, 59, 58, 0) 60%),
        radial-gradient(900px 500px at -5% 112%, #1B1F4D 0%, rgba(27, 31, 77, 0) 60%), #0A1028;
    --surface: rgba(255, 255, 255, .05);
    --surface-solid: #141B38;
    --border: rgba(255, 255, 255, .10);
    --border-strong: rgba(255, 255, 255, .18);
    --text: #FFFFFF;
    --text-2: #DCE3F2;
    --muted: #B8C2DC;
    --link: #63E6BE;
    --good: #8CE99A;
    --danger: #FFA8A8;
    --input-bg: rgba(255, 255, 255, .06);
    --input-border: rgba(255, 255, 255, .16);
    --grad: linear-gradient(135deg, #25D366 0%, #12B886 55%, #0B7285 100%);
    --grad-btn: linear-gradient(135deg, #25D366 0%, #12B886 100%);
    --on-grad: #04231A;
    --font: 'Plus Jakarta Sans', 'Segoe UI', 'Nirmala UI', 'Microsoft YaHei UI', 'Yu Gothic UI', 'Malgun Gothic', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color-scheme: dark;
}
html.theme-v3 body {
    font-family: var(--font) !important;
    background: var(--bg-image) !important;
    background-attachment: fixed !important;
    color: var(--text);
}
html.theme-v3 :is(input, button, select, textarea, .btn) { font-family: var(--font); }
html.theme-v3 .bg-animation .circle { background: radial-gradient(circle, rgba(18, 184, 134, .10) 0%, rgba(18, 184, 134, 0) 70%) !important; }

/* marka */
html.theme-v3 .brand-icon, html.theme-v3 .logo img { border-radius: 22px; box-shadow: 0 18px 44px rgba(18, 184, 134, .28) !important; }
html.theme-v3 .brand-name { font-weight: 800 !important; letter-spacing: -.03em; color: var(--text) !important; }
html.theme-v3 .brand-name span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html.theme-v3 .brand-tagline, html.theme-v3 .features-list li { color: var(--muted) !important; }
html.theme-v3 .features-list li i { background: rgba(37, 211, 102, .14) !important; color: #63E6BE !important; border-radius: 12px !important; }
html.theme-v3 .new-badge, html.theme-v3 .popular-badge { background: var(--grad-btn) !important; color: var(--on-grad) !important; font-weight: 800; }

/* cam paneller / kartlar */
html.theme-v3 :is(.login-panel, .register-panel) { background: rgba(255, 255, 255, .04) !important; border-color: var(--border) !important; backdrop-filter: blur(18px); }
html.theme-v3 :is(.login-container, .pricing-card, .promo-card, .navbar) {
    background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 22px !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html.theme-v3 .pricing-card.popular { border-color: rgba(37, 211, 102, .45) !important; box-shadow: 0 0 0 1px rgba(37, 211, 102, .35), 0 18px 44px rgba(18, 184, 134, .18) !important; }
html.theme-v3 :is(.login-header h1, .register-header h1, .login-header h2, .hero h1, .pricing-card h3, .pricing-card .card-header, .promo-title) { color: var(--text) !important; font-weight: 800 !important; letter-spacing: -.02em; }
html.theme-v3 :is(.login-header p, .register-header p, .hero p, .info-text, .price span, .price-info, .promo-text, .signup-info, .divider, .footer, .card-header.description) { color: var(--muted) !important; }
html.theme-v3 .price { color: #63E6BE !important; font-weight: 800 !important; }
html.theme-v3 .features li { color: var(--text-2) !important; }
html.theme-v3 .features li.feat-no { color: var(--muted) !important; }

/* form */
html.theme-v3 :is(.form-group label, .remember-me, .password-requirements p, .password-requirements li) { color: var(--text-2) !important; }
html.theme-v3 .password-requirements li.valid { color: var(--good) !important; }
html.theme-v3 :is(.form-control-custom, .form-select-custom) {
    background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--text) !important; border-radius: 14px !important;
}
html.theme-v3 .form-select-custom option { background: #141B38; color: #FFFFFF; }
html.theme-v3 :is(.form-control-custom, .form-select-custom):focus { border-color: #12B886 !important; box-shadow: 0 0 0 4px rgba(99, 230, 190, .22) !important; background: rgba(18, 184, 134, .06) !important; }
html.theme-v3 .form-control-custom::placeholder { color: rgba(184, 194, 220, .8) !important; }
html.theme-v3 .input-wrapper i { color: var(--muted) !important; }

/* düğmeler: yeşil→turkuaz geçiş, koyu yazı */
html.theme-v3 :is(.btn-login, .btn-register, .btn-submit, .btn-buy, .swal2-confirm) {
    background: var(--grad-btn) !important; color: var(--on-grad) !important; border: 0 !important; border-radius: 14px !important; font-weight: 800 !important;
    box-shadow: 0 10px 28px rgba(18, 184, 134, .25);
}
html.theme-v3 :is(.btn-login, .btn-register, .btn-submit, .btn-buy) :is(i, span) { color: inherit !important; }
html.theme-v3 .navbar .btn-login { box-shadow: none; }
html.theme-v3 :is(.btn-passkey, .pricing-link-btn, .lang-btn) { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 12px !important; }
html.theme-v3 :is(.forgot-link, .login-footer a, .login-row a, .signup-row a, .back-link a, .footer a, .link-btn) { color: var(--link) !important; }
html.theme-v3 .error-message { background: rgba(250, 82, 82, .14) !important; color: var(--danger) !important; border-color: rgba(250, 82, 82, .3) !important; }

/* dil menüsü */
html.theme-v3 :is(.lang-menu, .lang-dropdown .lang-menu, .lang-dropdown-menu) { background: var(--surface-solid) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; }
html.theme-v3 :is(.lang-item, .lang-option) { color: var(--text-2) !important; }
html.theme-v3 :is(.lang-item, .lang-option):hover { background: rgba(255, 255, 255, .08) !important; color: var(--text) !important; }

/* SweetAlert */
html.theme-v3 .swal2-popup { background: var(--surface-solid) !important; color: var(--text) !important; border: 1px solid var(--border); border-radius: 22px !important; }
html.theme-v3 .swal2-title { color: var(--text) !important; }
html.theme-v3 .swal2-html-container { color: var(--text-2) !important; }
html.theme-v3 .promo-badge { background: var(--grad-btn) !important; color: var(--on-grad) !important; }
html.theme-v3 :is(.pricing-container > p, .loading) { color: var(--muted) !important; }
html.theme-v3 .logo { color: var(--text) !important; }
html.theme-v3 .navbar { border-radius: 0 !important; border-width: 0 0 1px !important; }

/* Telefon: "Fiyatlar" ve dil düğmeleri mutlak konumlu — tek sütun düzende logonun üstüne biniyordu (2026-10-26) */
@media (max-width: 992px) {
  html.theme-v3 .brand-panel { padding-top: 84px !important; }
}
/* Fiyat sayfası dar telefon (≤400px): "Giriş Yap" iki satıra kırılıp ekrandan taşıyordu */
@media (max-width: 400px) {
  html.theme-v3 .navbar { padding-left: 12px !important; padding-right: 12px !important; }
  html.theme-v3 .navbar .nav-right { gap: 8px !important; }
  html.theme-v3 .navbar .logo { font-size: 18px !important; gap: 6px !important; }
  html.theme-v3 .navbar .logo img { width: 28px !important; height: 28px !important; }
  html.theme-v3 .navbar :is(.lang-btn, #navLoginBtn) { padding: 7px 10px !important; white-space: nowrap; font-size: 13px !important; }
}
/* Şifremi unuttum / şifre sıfırlama: kart dar telefonda ekran kenarlarına yapışıyordu — yanlarda 16px boşluk */
@media (max-width: 520px) {
  html.theme-v3 .login-container { width: calc(100% - 32px) !important; margin-left: auto !important; margin-right: auto !important; padding: 28px 22px !important; }
}