/* =============================================================================
 * cover-page.css — Paylaşılan "Kapak + Form" Split Sayfa Tasarımı
 *
 * Kullanan sayfalar:
 *   - /acc/login, /acc/new, /acc/forgot-password, /acc/reset-password (MVC)
 *   - data-dmrs-web="CheckoutPage" (Web Client component) — aynı --dmrs-web-cover-* değişkenlerini paylaşır
 *
 * Tasarım: Stripe-tarzı 50/50 full-viewport split.
 *   Sol panel: site logosu + slogan + site adı (themed kapak)
 *   Sağ panel: form içeriği (beyaz, RenderBody)
 *
 * Tema renkleri tek noktadan yönetilir: --dmrs-web-cover-* CSS değişkenleri
 * ============================================================================= */

:root {
  /* Varsayılan açık tema — site temasına göre :root veya .dmrs-web-cover-page üzerinde override edilir */
  --dmrs-web-cover-bg: #f6f9fc;
  --dmrs-web-cover-text: #1a1a2e;
  --dmrs-web-cover-secondary: #525f7f;
  --dmrs-web-cover-border: #e8e8e8;
  --dmrs-web-cover-accent: #635bff;
  --dmrs-web-cover-theme: var(--dmrs-web-cover-accent);
}

/* === Skip link — a11y (sadece focus'tayken görünür) === */
.dmrs-web-cover-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  background: #1a1a2e;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: top 0.15s;
}

.dmrs-web-cover-skip-link:focus {
  top: 8px;
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

[dir="rtl"] .dmrs-web-cover-skip-link {
  left: auto;
  right: 8px;
}

/* === Container — Full-viewport === */
.dmrs-web-cover-page {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  box-sizing: border-box;
  background: #ffffff;
}

.dmrs-web-cover-page *,
.dmrs-web-cover-page *::before,
.dmrs-web-cover-page *::after {
  box-sizing: border-box;
}

.dmrs-web-cover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* === Sol Panel — Kapak (themed) === */
.dmrs-web-cover-left {
  background: var(--dmrs-web-cover-bg);
  color: var(--dmrs-web-cover-text);
  display: flex;
  justify-content: flex-end;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Radial parıltı dekorasyonu — TÜM cover sayfaları (login/kayıt/abonelik/sepet/checkout).
   Renkler + aç/kapa admin'den (--dmrs-web-cover-glow1/2/3 + --dmrs-web-cover-glow: block|none).
   Element her zaman render edilir; görünürlüğü CSS değişkeni kontrol eder (React'e prop gerekmez). */
.dmrs-web-cover-left-bg {
  display: var(--dmrs-web-cover-glow, block);
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 50% 60% at 20% 80%, var(--dmrs-web-cover-glow1, rgba(99,91,255,0.25)), transparent),
    radial-gradient(ellipse 40% 50% at 80% 20%, var(--dmrs-web-cover-glow2, rgba(34,211,238,0.15)), transparent),
    radial-gradient(ellipse 35% 40% at 60% 70%, var(--dmrs-web-cover-glow3, rgba(16,185,129,0.10)), transparent);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.dmrs-web-cover-left-inner {
  width: 100%;
  max-width: 600px;
  /* CheckoutPage ile aynı değerler — iki dosyada cover-* class çakışmasında tutarlı görünüm */
  padding: 48px 48px 32px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Logo — renk filtresi YOK; admin doğru varyantı seçer (logo / logo-w beyaz / logo-d koyu). */
.dmrs-web-cover-logo {
  display: inline-block;
  margin-bottom: 32px;
}

.dmrs-web-cover-logo img {
  /* Genişlik admin'den (HesapAyarlari.LogoGenislik → --dmrs-web-cover-logo-width). height otomatik. */
  width: var(--dmrs-web-cover-logo-width, 160px);
  height: auto;
  max-height: 80px; /* aşırı yüksek logoyu sınırla (aspect-ratio guard) */
}

/* Site adı (logo alttaki text, küçük) */
.dmrs-web-cover-site-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--dmrs-web-cover-secondary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
  opacity: 0.85;
}

/* Slogan / başlık — CheckoutPage ile aynı boyut (22px) */
/* Standart kapak başlığı — TÜM cover sayfaları (login/kayıt/abonelik/sepet/checkout).
   Boyut: eski 22px ile checkout clamp(26-38px) ortası; kalınlık 700 (checkout); renk default (--cover-text). */
.dmrs-web-cover-title {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--dmrs-web-cover-text);
  margin: 0 0 10px 0;
  line-height: 1.18;
  letter-spacing: -0.3px;
}

.dmrs-web-cover-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: var(--dmrs-web-cover-secondary);
  margin: 0 0 32px 0;
  line-height: 1.55;
  max-width: 380px;
}

/* Özellik listesi (slogan altında — opsiyonel) */
.dmrs-web-cover-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.dmrs-web-cover-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: color-mix(in srgb, var(--dmrs-web-cover-text) 78%, transparent);
  line-height: 1.45;
}

.dmrs-web-cover-feature i,
.dmrs-web-cover-feature svg {
  /* İkon, admin'in seçtiği vurgu rengiyle (accent) aynı — SVG stroke="currentColor" color'ı izler */
  color: var(--dmrs-web-cover-accent, #635bff);
  font-size: 18px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* === Güvenli ödeme rozeti (logo altı) — CheckoutPage stili === */
.dmrs-web-cover-secure-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
  background: color-mix(in srgb, var(--dmrs-web-cover-text) 10%, transparent);
  color: var(--dmrs-web-cover-text);
  border: 1px solid color-mix(in srgb, var(--dmrs-web-cover-text) 18%, transparent);
}

.dmrs-web-cover-secure-badge svg,
.dmrs-web-cover-secure-badge i {
  stroke: currentColor;
  width: 14px;
  height: 14px;
}

/* === Güvence notu (özellikler altı) — CheckoutPage stili === */
.dmrs-web-cover-note {
  margin-top: 18px;
  font-size: 12px;
  color: color-mix(in srgb, var(--dmrs-web-cover-text) 70%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--dmrs-web-cover-text) 14%, transparent);
  padding-top: 14px;
  line-height: 1.7;
}

.dmrs-web-cover-note p {
  margin: 0;
}

/* === Footer (Mesafeli/KVKK + Powered by) — CheckoutPage stili === */
.dmrs-web-cover-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
  font-size: 12px;
  color: color-mix(in srgb, var(--dmrs-web-cover-text) 50%, transparent);
}

.dmrs-web-cover-footer-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dmrs-web-cover-footer-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--dmrs-web-cover-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.dmrs-web-cover-footer-link:hover {
  opacity: 0.8;
}

.dmrs-web-cover-footer-sep {
  color: var(--dmrs-web-cover-text);
  opacity: 0.4;
  font-size: 10px;
}

.dmrs-web-cover-footer-powered {
  color: var(--dmrs-web-cover-text);
  opacity: 0.7;
  font-size: 11px;
}

.dmrs-web-cover-footer-brand {
  color: var(--dmrs-web-cover-text);
  font-weight: 600;
  text-decoration: none;
}

.dmrs-web-cover-footer-brand:hover {
  text-decoration: underline;
}

/* === Sağ Panel — Form (beyaz) === */
.dmrs-web-cover-right {
  background: #ffffff;
  display: flex;
  justify-content: flex-start;
  min-height: 100vh;
  border-left: 1px solid #e8e8e8;
}

.dmrs-web-cover-right-inner {
  width: 100%;
  max-width: 600px;
  padding: 48px 40px 32px 48px;
  display: flex;
  flex-direction: column;
  /* Tutarlı dikey hiza: TÜM cover formları ÜSTTEN başlar (login/kayıt/şifre/abonelik aynı Y'de).
     Önceki 'center' kısa formları ortalıyor, uzun formlar min-height:100vh'yi aşınca üstte
     kalıyordu → sayfadan sayfaya dikey zıplama. flex-start hepsini üstten sabitler
     (padding-top:48px sabit offset); uzun formlar da asla kırpılmaz. */
  justify-content: flex-start;
}

/* Form başlığı — CheckoutPage ile aynı boyut (20px) */
.dmrs-web-cover-form-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}

.dmrs-web-cover-form-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 28px 0;
  line-height: 1.5;
}

/* Form container — form alanlarını sarar */
.dmrs-web-cover-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form alanı (label + input + hata) */
.dmrs-web-cover-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dmrs-web-cover-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.dmrs-web-cover-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.dmrs-web-cover-input:focus {
  border-color: var(--dmrs-web-cover-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dmrs-web-cover-accent) 18%, transparent);
}

.dmrs-web-cover-input::placeholder {
  color: #9ca3af;
}

/* Inline validasyon — kullanıcı blur ettikten sonra :invalid border kırmızı */
.dmrs-web-cover-input.touched:invalid {
  border-color: #fca5a5;
  background: #fef2f2;
}

.dmrs-web-cover-input.touched:invalid:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.dmrs-web-cover-error {
  font-size: 12px;
  color: #dc2626;
  margin-top: 2px;
}

/* Validation summary banner (Razor asp-validation-summary) — boş ise gösterme */
.dmrs-web-cover-error-banner {
  position: relative;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  padding: 12px 14px 12px 38px;
  border-radius: 6px;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.5;
  animation: dmrs-cover-error-slide 0.25s ease-out;
}

.dmrs-web-cover-error-banner:empty {
  display: none;
}

.dmrs-web-cover-error-banner::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.dmrs-web-cover-error-banner ul {
  margin: 0;
  padding-left: 18px;
}

@keyframes dmrs-cover-error-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Buton */
.dmrs-web-cover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.05s;
  text-decoration: none;
  margin-top: 8px;
}

.dmrs-web-cover-btn:active {
  transform: translateY(1px);
}

.dmrs-web-cover-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.25);
}

.dmrs-web-cover-btn-primary {
  background: var(--dmrs-web-cover-accent);
  color: #ffffff;
}

.dmrs-web-cover-btn-primary:hover {
  background: color-mix(in srgb, var(--dmrs-web-cover-accent) 88%, #000);
}

/* Secondary (outline) — ör. abonelik anonim CTA "Yeni Hesap Oluştur".
   Kural yoktu → <a> UA default link rengine (ziyaret edilince mor) düşüyordu. */
.dmrs-web-cover-btn-secondary {
  background: transparent;
  color: var(--dmrs-web-cover-accent);
  border: 1px solid var(--dmrs-web-cover-border);
}

.dmrs-web-cover-btn-secondary:hover {
  background: color-mix(in srgb, var(--dmrs-web-cover-accent) 8%, transparent);
  border-color: var(--dmrs-web-cover-accent);
}

/* Anonim CTA buton grubu (Giriş Yap / Yeni Hesap) — abonelik + sepet ORTAK (yan yana, dar ekranda sarar). */
.dmrs-web-cover-cta-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.dmrs-web-cover-cta-buttons .dmrs-web-cover-btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
}

/* Alt linkler ("Hesabın yok mu? Kayıt ol" vs.) */
.dmrs-web-cover-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 13px;
  color: #6b7280;
}

.dmrs-web-cover-link {
  color: var(--dmrs-web-cover-accent);
  text-decoration: none;
  font-weight: 500;
}

.dmrs-web-cover-link:hover {
  text-decoration: underline;
}

/* Single-link variant (tek alt link — örn. "Şifremi unuttum") */
.dmrs-web-cover-field-link {
  font-size: 12px;
  text-align: right;
  margin-top: -2px;
}

/* === Password toggle (eye/eye-slash button) === */
.dmrs-web-cover-pw-wrap {
  position: relative;
}

.dmrs-web-cover-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dmrs-web-cover-pw-toggle:hover {
  color: #1f2937;
}

/* === "Beni hatırla" + ekstra satır (checkbox row) === */
.dmrs-web-cover-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* İki uçtan dağılan satır — sol: checkbox, sağ: link */
.dmrs-web-cover-row-split {
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Küçük inline link (Şifremi unuttum gibi) */
.dmrs-web-cover-link-sm {
  font-size: 12px;
}

.dmrs-web-cover-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  user-select: none;
}

.dmrs-web-cover-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--dmrs-web-cover-accent);
}

/* === Turnstile widget — sadece N başarısız deneme sonrası render edilir === */
.dmrs-web-cover-turnstile {
  margin: 6px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.dmrs-web-cover-turnstile-hint {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

/* === intl-tel-input — kütüphane wrapper'ı cover-input ile aynı görünmeli === */
.iti {
  width: 100%;
  display: block;
}

.iti__tel-input.dmrs-web-cover-input {
  padding-left: 52px; /* ülke bayrağı + dropdown ok için yer */
}

/* Dropdown — kompakt görsel (boyut/pozisyon kütüphane JS'e bırakıldı) */
.iti__country-list {
  max-height: 220px;
  font-size: 12px;
  border-radius: 6px;
}

.iti__country {
  padding: 5px 10px;
  line-height: 1.35;
}

.iti__country-name {
  font-size: 12px;
}

.iti__dial-code {
  font-size: 11px;
}

.iti__search-input {
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px solid #e5e7eb;
}

[dir="rtl"] .iti__tel-input.dmrs-web-cover-input {
  padding-left: 14px;
  padding-right: 52px;
}

/* === Honeypot — gerçek kullanıcıdan tamamen gizli, bot'lara açık === */
.dmrs-web-cover-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* === Parola gücü göstergesi (kayıt ekranı) === */
.dmrs-web-cover-pwd-strength {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.dmrs-web-cover-pwd-strength[hidden] {
  display: none;
}

.dmrs-web-cover-pwd-strength-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.dmrs-web-cover-pwd-strength-bar-fill {
  height: 100%;
  width: 0;
  background: #e5e7eb;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.dmrs-web-cover-pwd-strength-bar-fill.level-1 { width: 25%; background: #ef4444; }
.dmrs-web-cover-pwd-strength-bar-fill.level-2 { width: 50%; background: #f59e0b; }
.dmrs-web-cover-pwd-strength-bar-fill.level-3 { width: 75%; background: #eab308; }
.dmrs-web-cover-pwd-strength-bar-fill.level-4 { width: 100%; background: #10b981; }

.dmrs-web-cover-pwd-strength-hint {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

.dmrs-web-cover-pwd-strength-hint.level-1 { color: #b91c1c; }
.dmrs-web-cover-pwd-strength-hint.level-4 { color: #047857; }

/* === Caps Lock uyarısı (parola input'unun altında) === */
.dmrs-web-cover-caps-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 2px;
  width: fit-content;
  line-height: 1;
}

.dmrs-web-cover-caps-warning[hidden] {
  display: none;
}

/* === Buton loading state — submit'te spinner === */
.dmrs-web-cover-btn {
  position: relative;
}

.dmrs-web-cover-btn-spinner {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}

.dmrs-web-cover-btn-spinner svg {
  width: 18px;
  height: 18px;
  animation: dmrs-cover-spin 0.8s linear infinite;
}

@keyframes dmrs-cover-spin {
  to { transform: rotate(360deg); }
}

.dmrs-web-cover-btn.is-loading {
  cursor: progress;
  pointer-events: none;
}

.dmrs-web-cover-btn.is-loading .dmrs-web-cover-btn-label {
  visibility: hidden;
}

.dmrs-web-cover-btn.is-loading .dmrs-web-cover-btn-spinner {
  display: inline-flex;
}

/* === OTP input (6 haneli sıfırlama kodu) === */
.dmrs-web-cover-input-otp {
  letter-spacing: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

/* === Success banner (mesaj) === */
.dmrs-web-cover-success-banner {
  background: #ecfdf5;
  border-left: 3px solid #10b981;
  padding: 10px 12px;
  border-radius: 4px;
  color: #065f46;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dmrs-web-cover-field-link a {
  color: var(--dmrs-web-cover-accent);
  text-decoration: none;
}

.dmrs-web-cover-field-link a:hover {
  text-decoration: underline;
}

/* === Responsive — mobile tek kolon === */
@media (max-width: 900px) {
  /* ── Base (TÜM cover: auth + checkout + abonelik) — tek kolon ──
     Sağ form/aksiyon paneli KART olur: themed bg grid'e taşınır → sağ BEYAZ form kartı tema
     üzerinde yüzer; SOL fonksiyonel içerik (checkout=Sipariş Özeti, abonelik=plan/tier/toplam)
     üstte themed bölüm olarak KORUNUR. Auth kendi restructure'ıyla (logo→kart→note) override eder. */
  .dmrs-web-cover-grid {
    /* mobilde FLEX-column (auth grid'iyle tutarlı). display:grid + 100vh + align-content default'u
       (normal=stretch) fazla dikey alanı satırlara dağıtıp cover-right etrafını "uzatıyordu"; flex
       main-axis'te stretch etmez → kart içerik-yüksekliğinde kalır, fazlalık tek parça (flex-start). */
    display: flex;
    flex-direction: column;
    /* themed bg viewport'u DOLDURSUN (kısa içerikte altta beyaz page-bg boşluğu kalmasın) */
    min-height: 100vh;
    background: var(--dmrs-web-cover-bg);
  }

  .dmrs-web-cover-left {
    min-height: auto;
    justify-content: center;
  }

  .dmrs-web-cover-left-inner {
    max-width: 100%;
    padding: 24px 24px 12px;
  }

  /* Sağ = beyaz yüzen kart (border-top yerine margin + yuvarlak köşe + gölge ile ayrılır) */
  .dmrs-web-cover-right {
    min-height: auto;
    justify-content: center;
    border: none;
    background: #ffffff;
    margin: 4px 16px 20px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  }

  .dmrs-web-cover-right-inner {
    max-width: 100%;
    padding: 22px 20px 26px;
  }

  .dmrs-web-cover-footer {
    padding-top: 24px;
    margin-top: 24px;
  }

  /* ── Dokunma dostu form (TÜM cover — checkout dahil) ──
     iOS Safari focus-zoom'u ÖNLEMEK için input font-size >= 16px ŞART (15px'te iOS
     odaklanınca sayfayı yakınlaştırıyordu). Input/buton 44px+ dokunma hedefi. */
  .dmrs-web-cover-input {
    font-size: 16px;
    padding: 13px 14px;
  }

  .dmrs-web-cover-btn {
    font-size: 16px;
    padding: 14px 24px;
  }

  /* Parola göster/gizle (göz) butonu — 44px dokunma hedefi (base ~26px). Input'a sağ padding ver
     ki büyüyen buton metinle çakışmasın (login/kayıt/şifre-sıfırla parola alanları). */
  .dmrs-web-cover-pw-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .dmrs-web-cover-pw-wrap .dmrs-web-cover-input {
    padding-right: 48px;
  }

  /* Mobilde form alt-başlığını gizle (declutter — form başlığı yeterli; TÜM cover). */
  .dmrs-web-cover-form-subtitle {
    display: none;
  }

  /* ═══ AUTH cover'a ÖZEL minimal mobil düzen ═══
     logo → beyaz form kartı → note + "Powered by" (altta). Scope = .dmrs-web-cover-auth
     (checkout/abonelik Sipariş Özeti sol paneli ETKİLENMEZ). Kapak wrapper'ları çökertilir
     (display:contents) ki logo/form/note/footer grid'de bağımsız sıralanabilsin; themed bg
     cover-left'ten GRID'e taşınır (koyu temada beyaz logo kaybolmasın), form beyaz kart olur. */
  .dmrs-web-cover-auth .dmrs-web-cover-grid {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--dmrs-web-cover-bg);
  }

  .dmrs-web-cover-auth .dmrs-web-cover-left,
  .dmrs-web-cover-auth .dmrs-web-cover-left-inner {
    display: contents;
  }

  .dmrs-web-cover-auth .dmrs-web-cover-left-bg {
    display: none;
  }

  /* Logo altındaki marka KALDIRILIR (rozet + başlık + alt-başlık + faydalar) */
  .dmrs-web-cover-auth .dmrs-web-cover-secure-badge,
  .dmrs-web-cover-auth .dmrs-web-cover-title,
  .dmrs-web-cover-auth .dmrs-web-cover-subtitle,
  .dmrs-web-cover-auth .dmrs-web-cover-features {
    display: none;
  }

  /* Sıra: logo (1) → form (2) → note (3) → footer/powered (4) */
  /* Logo SOLDA kalır (kullanıcı isteği) — sola hizalı, rahat üst boşluk. */
  .dmrs-web-cover-auth .dmrs-web-cover-logo {
    order: 1;
    margin: 0;
    padding: 26px 20px 16px;
  }

  /* Küçük rötuş: form BEYAZ KART olarak yüzer — yuvarlak köşe + hafif gölge + kenar boşluğu.
     Gölge açık temada ayrımı verir; koyu temada beyaz/koyu kontrastı zaten ayırır (gölge zararsızca
     görünmez). overflow:hidden köşe yarıçapının içeriği kırpması için. */
  .dmrs-web-cover-auth .dmrs-web-cover-right {
    order: 2;
    min-height: auto;
    border: none;
    background: #ffffff;
    margin: 2px 16px 12px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  .dmrs-web-cover-auth .dmrs-web-cover-right-inner {
    max-width: 100%;
    padding: 24px 22px 26px;
  }

  .dmrs-web-cover-auth .dmrs-web-cover-note {
    order: 3;
    display: block;
    /* margin-top:auto → flex-column'da note+footer'ı EN ALTA iter (uzun viewport'ta üstte
       logo+kart, arada themed boşluk, altta note+footer). Uzun içerikte auto=0, doğal akış. */
    margin-top: auto;
    padding: 14px 22px 2px;
  }

  .dmrs-web-cover-auth .dmrs-web-cover-footer {
    order: 4;
    margin: 0;
    padding: 8px 22px 26px;
  }

  .dmrs-web-cover-auth .dmrs-web-cover-footer-powered {
    display: block;
  }
}

@media (max-width: 576px) {
  .dmrs-web-cover-left-inner {
    padding: 20px 16px 8px;
  }

  .dmrs-web-cover-right-inner {
    padding: 16px 16px 24px;
  }
}

/* === /cart footer konumu (SepetSayfasi) ===
   DESKTOP: sol panelde (dmrs-web-cart-footer-desktop, themed bg → metin okunur).
   MOBİL: grid'in EN ALTINDA (dmrs-web-cart-footer-mobile — form kartından sonra, themed grid bg).
   İkisi AYNI içeriği render eder; viewport'a göre biri gizli. Footer metni `--dmrs-web-cover-text`
   (themed) olduğundan beyaz alta taşınırsa koyu temada görünmezdi → bu ayrım şart. */
.dmrs-web-cart .dmrs-web-cart-footer-mobile,
.dmrs-web-cart .dmrs-web-cart-note-mobile {
  display: none;
}

/* Sticky bar "landed" tespiti için sentinel (bar'dan hemen sonra; görsel yok, 1px hedef) */
.dmrs-web-cart-sticky-sentinel {
  height: 1px;
}

/* Toplam + "Siparişi Tamamla" — DESKTOP dahil dikey stack + buton TAM GENİŞLİK.
   Sticky flex kuralı eskiden yalnız @media≤900'daydı → desktop'ta bar display:block kalıp
   inline-flex .dmrs-web-cover-btn içerik-genişliğinde/sola yaslı render oluyordu. Base'e alındı
   (align-items:stretch default → hem Toplam satırı hem buton tam genişlik); mobil sticky/gölge
   kuralları (position:sticky, padding, box-shadow) bunun ÜSTÜNE eklenir. */
.dmrs-web-cart .dmrs-web-cart-sticky-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* /checkout footer (CheckoutPage) — /cart ile aynı dual-render: DESKTOP sol panelde
   (-desktop), MOBİL grid'in en altında (-mobile, ödeme kartından sonra, margin-top:auto ile dibe). */
.dmrs-web-cover-footer.dmrs-web-checkout-footer-mobile,
.dmrs-web-checkout-logo-mobile {
  display: none;
}

@media (max-width: 900px) {
  .dmrs-web-cover-footer.dmrs-web-checkout-footer-desktop {
    display: none;
  }
  .dmrs-web-cover-footer.dmrs-web-checkout-footer-mobile {
    display: flex;
    margin: auto 0 0;
    padding: 8px 20px 26px;
    order: 3;
  }

  /* /checkout mobil SIRA: logo(0) → ödeme formu(1) → Sipariş Özeti(2) → footer(3).
     SADECE checkout'a scope → /cart & auth ETKİLENMEZ; desktop order:0 (normal). */
  .dmrs-web-checkout-logo-mobile {
    display: block;
    order: 0;
    margin: 0;              /* base .dmrs-web-cover-logo 32px alt-margin'i sıfırla (auth ile tutarlı) */
    padding: 24px 20px 4px;
  }
  /* sol paneldeki (özet içindeki) logo mobilde gizli — üstteki mobil-logo gösterilir */
  .dmrs-web-checkout-input-left .dmrs-web-cover-logo {
    display: none;
  }
  .dmrs-web-checkout-input-left {
    order: 2;
  }
  .dmrs-web-checkout-input-left ~ .dmrs-web-cover-right {
    order: 1;
  }

  /* payId'siz "işlem no sorgula" akışında sol panel = pazarlama hero'su (badge/başlık/özellik/not).
     Mobilde formun ALTINDA tekrarlanan pazarlama kalabalıktı (form kartı zaten 3D/SSL/PCI rozetlerini
     taşıyor). Bu akışta (grid içinde .dmrs-web-checkout-input-right VARSA) sol hero'yu mobilde gizle →
     minimal: logo → form kartı → footer. Ana ödeme layout'u Sipariş Özeti'ni gösterir ve input-right
     İÇERMEZ → :has() eşleşmez → ETKİLENMEZ. */
  .dmrs-web-cover-grid:has(.dmrs-web-checkout-input-right) .dmrs-web-checkout-input-left {
    display: none;
  }
}

@media (max-width: 900px) {
  .dmrs-web-cart .dmrs-web-cart-footer-desktop,
  .dmrs-web-cart .dmrs-web-cart-note-desktop {
    display: none;
  }
  /* note (SSL güvence) + footer EN ALTTA (form kartından sonra), sıra: note → footer.
     margin-top:auto → flex-column'da note+footer'ı viewport'un EN ALTINA iter (kısa içerikte
     üstte içerik, arada themed boşluk, altta note+footer). Uzun içerikte auto=0, doğal akış. */
  .dmrs-web-cart .dmrs-web-cart-note-mobile {
    display: block;
    margin: auto 0 0;
    padding: 6px 20px 0;
  }
  .dmrs-web-cart .dmrs-web-cart-footer-mobile {
    display: flex;
    margin: 0;
    padding: 6px 20px 28px;
  }
  /* Güvence notu (coverContent.note) admin'de tanımlı DEĞİLSE note-mobile DOM'da render edilmez →
     dibe-itme margin-top:auto ona bağlıydı, footer sayfa ortasında asılı kalırdı. Bu durumda
     (grid'de note-mobile YOKSA) auto'yu footer'a devret ki footer yine EN ALTA yapışsın. */
  .dmrs-web-cart .dmrs-web-cover-grid:not(:has(.dmrs-web-cart-note-mobile)) .dmrs-web-cart-footer-mobile {
    margin-top: auto;
  }
}

/* === /cart mobil: title/subtitle gizle + Toplam/CTA sticky === */
@media (max-width: 900px) {
  /* "Sepetin hazır" başlığı + alt-başlığı gizle (declutter — logo + ürünler yeterli) */
  .dmrs-web-cart .dmrs-web-cover-title,
  .dmrs-web-cart .dmrs-web-cover-subtitle {
    display: none;
  }

  /* Toplam + Siparişi Tamamla — kart içinde alta YAPIŞIR (form kaydırılırken hep görünür).
     Kartın overflow'u yok → sticky window'a göre; üst border + beyaz bg akan içeriği örter. */
  .dmrs-web-cart .dmrs-web-cart-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #ffffff;
    margin-top: 8px;
    padding-top: 14px;
    /* butonun ALTINDA kart görünsün — ekran kenarına yapışmasın */
    padding-bottom: 16px;
    border-top: 1px solid #eef0f2;
    /* üstten gölge — yalnız YAPIŞIKKEN (floating); landed olunca kaldırılır (yumuşak geçiş).
       SADECE ÜST kenar: negatif spread (-8px) = blur (8px) → sağ/sol/alt sızıntı SIFIR.
       (Eski `0 -6px 16px` spread'siz → blur her yöne taşıp beyaz kart içindeki beyaz bar'ı
       yanlardan "kutuluyordu"; beyaz-içinde-beyaz gereksiz bölme görüntüsü veriyordu.) */
    box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Bar doğal yerine oturunca (sentinel görünür → is-landed) gölge KALKAR; border kalır (ayraç). */
  .dmrs-web-cart .dmrs-web-cart-sticky-bar.is-landed {
    box-shadow: none;
  }
}

/* === RTL (Arapça) === */
[dir="rtl"] .dmrs-web-cover-right {
  border-left: none;
  border-right: 1px solid #e8e8e8;
}

[dir="rtl"] .dmrs-web-cover-field-link {
  text-align: left;
}

@media (max-width: 900px) {
  [dir="rtl"] .dmrs-web-cover-right {
    border-right: none;
  }
}

/* =============================================================================
 * CheckoutPage — koyu sol panel (.dmrs-web-checkout-input-left) cover-* override'ları
 * Base cover-* (yukarıda) açık-tema; checkout'un koyu hero'su için beyaz metin/badge override.
 * SCOPE'lu (.dmrs-web-checkout-input-left) → sadece checkout'a uygulanır, diğer cover sayfalara sızmaz.
 * Buraya taşındı (CheckoutPage.css yerine) ki TÜM cover-* tek dosyada + statik cache-bust olsun.
 * Koyu panelin kendisi (.dmrs-web-checkout-input-left bg/gradient) CheckoutPage.css'te (component'e özgü).
 * ============================================================================= */
.dmrs-web-checkout-input-left .dmrs-web-cover-left-inner {
  position: relative;
  z-index: 1;
  justify-content: center;
}

/* KONTRAST FIX: input-left hero'su ESKİDEN koyu-panel varsayımıyla metni SABİT BEYAZ'a
   zorluyordu. Panel bg'si admin --dmrs-web-cover-bg'den gelir (çoğu sitede AÇIK, örn. #fffaf3)
   → beyaz metin açık krem üstünde GÖRÜNMEZ oluyordu (badge/alt-başlık/özellik/not/footer).
   Başlık zaten themed --cover-text kullanıp görünürken diğerleri kayboluyordu (ana layout ile
   tutarsız). Çözüm: sabit beyaz override'lar KALDIRILDI → base cover-* themed renkleri geçerli
   (color-mix(--cover-text) / --cover-secondary); hem açık hem koyu temada okunur. Yalnızca
   checkout'a özgü küçük spacing farkı (alt-başlık margin) korunur. */
.dmrs-web-checkout-input-left .dmrs-web-cover-subtitle {
  margin-bottom: 18px;
}

/* =============================================================================
 * AboneOl (subscribe) — sol panel cover-* override'ları (scoped .dmrs-web-aboneol*)
 * AboneOlWidget.css yerine burada → TÜM cover-* tek dosyada + statik cache-bust.
 * aboneol-spesifik (tier grid, toplam, hero) stilleri AboneOlWidget.css'te kalır.
 * ============================================================================= */
.dmrs-web-aboneol-left .dmrs-web-cover-left-inner {
  width: 100%;
  max-width: 600px;
  padding: 48px 48px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Dual-render (cart/checkout paterni): note + footer DESKTOP'ta sol panelde (-desktop),
   MOBİL'de grid'in en altında (-mobile). Eskiden note+footer sol panelin İÇİNDEydi → mobilde
   (flex-column) plan/toplam ile form kartı ARASINDA ortada kalıyordu ("powered by" sandviç).
   Varsayılan: mobil kopyalar gizli. */
.dmrs-web-aboneol-note-mobile,
.dmrs-web-aboneol-footer-mobile {
  display: none;
}

@media (max-width: 900px) {
  .dmrs-web-aboneol.dmrs-web-cover-page {
    min-height: auto;
  }
  .dmrs-web-aboneol-left .dmrs-web-cover-left-inner {
    max-width: 100%;
    padding: 32px 24px 28px;
  }

  /* Sol paneldeki desktop note+footer'ı gizle → grid sonundaki mobil kopyalar dibe yapışır.
     note-mobile margin-top:auto → flex-column grid'de note+footer'ı EN ALTA iter (kısa içerikte
     üstte plan+form, arada themed boşluk, altta note+footer). Uzun içerikte auto=0, doğal akış. */
  .dmrs-web-aboneol-note-desktop,
  .dmrs-web-aboneol-footer-desktop {
    display: none;
  }
  .dmrs-web-aboneol-note-mobile {
    display: block;
    margin: auto 0 0;
    padding: 6px 24px 0;
  }
  .dmrs-web-aboneol-footer-mobile {
    display: flex;
    margin: 0;
    padding: 6px 24px 26px;
  }
  /* Güvence notu admin'de tanımlı DEĞİLSE (note-mobile DOM'da yok) dibe-itmeyi footer'a devret. */
  .dmrs-web-aboneol .dmrs-web-cover-grid:not(:has(.dmrs-web-aboneol-note-mobile)) .dmrs-web-aboneol-footer-mobile {
    margin-top: auto;
  }
}

@media (max-width: 576px) {
  .dmrs-web-aboneol-left .dmrs-web-cover-left-inner {
    padding: 24px 16px 20px;
  }
}

/* Cart inline adres-formu — cover-btn'leri yan yana eşit genişlik (SepetSayfasi yerine burada: cover-* tek kaynak). */
.dmrs-web-cart-adresform-aksiyon .dmrs-web-cover-btn {
  flex: 1;
  margin-top: 0;
  padding: 0.55rem;
  font-size: 0.88rem;
}