@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

/* ============================================================
   eticaret_pages — Dinamik Tasarım Sistemi
   Üretildi: eticaret-css.php | Primary: #c8a27a | Fontlar: Poppins / Poppins   ============================================================ */

/* Birleşik :root — auth.css + styles.css token'ları dinamik değerlerle */
:root {
  /* ── Ana renkler (stasarim tablosundan) ── */
  --primary:            #c8a27a;
  --primary-600:        #b89570;
  --primary-700:        #a48564;
  --primary-50:         #faf6f2;
  --primary-100:        #f4ece4;
  --primary-grad-start: #cba882;
  --primary-grad-end:   #a48564;

  /* ── Ara renk ── */
  --secondary:          #FFF2F0;

  /* ── Sabit renkler ── */
  --accent-red:         #ef4444;
  --accent-red-600:     #dc2626;
  --accent-pink:        #ec4899;

  /* Zemin / yüzey hiyerarşisi — Tailwind Slate ailesi (cool gray)
     bg        → sayfa zemini, kartların altı (sidebar dışı her yer)
     surface   → kart, sidebar, modal — saf beyaz
     surface-2 → input, hover, breadcrumb, kart-head — yüzey içi 1-ton */
  --bg:                 #f1f5f9;
  --surface:            #ffffff;
  --surface-2:          #f8fafc;
  --border:             #e2e8f0;
  --border-strong:      #cbd5e1;

  --text:               #0f172a;
  --text-2:             #475569;
  --text-3:             #94a3b8;
  --text-muted:         #cbd5e1;

  --warn:               #f59e0b;
  --warn-bg:            #fff7ea;
  --danger:             #ef4444;
  --info:               #3b82f6;

  --radius-sm:          2px;
  --radius:             3px;
  --radius-lg:          4px;
  --radius-xl:          5px;

  --shadow-sm:          0 1px 2px rgba(200,162,122,0.04);
  --shadow:             0 4px 16px rgba(200,162,122,0.06);
  --shadow-lg:          0 12px 40px rgba(200,162,122,0.1);

  --btn-shadow-sm:      0 2px 6px rgba(200,162,122,0.18);
  --btn-shadow-md:      0 6px 16px rgba(200,162,122,0.3);
  --btn-shadow-xs:      0 2px 6px rgba(200,162,122,0.2);

  /* ── Fontlar (stasarim tablosundan) ── */
  --font:               'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-secondary:     'Poppins', 'DM Sans', system-ui, sans-serif;

  /* ── Dashboard layout ── */
  --sidebar-w:          264px;
  --header-h:           56px;
}

/* ============================================================
   GLOBAL kurallar (prefix'siz). styles.css `.shell` ile prefixlendiği için
   `.shell` PARENT'ları (page wrap vb.) burada doğrudan tanımlanır.
   ============================================================ */

/* ── Body overflow — sticky fix ─────────────────────────────────────────────
   styles.css'de DEĞİL burada olmalı; orada .shell scope'una girerek
   ".shell html:has(...)" şeklinde geçersiz hale gelir ve sticky bozulur.
*/
html:has(.account-page-wrap),
body:has(.account-page-wrap) {
  overflow: visible !important;
}

/* ── Sayfa zemini ───────────────────────────────────────────────────────────
   Subtle radial gradient — düz gri yerine bir tık derinlik hissi verir.
   Mobilde tek-renk fallback (gradient hâlâ aktif ama görünmez).
*/
.account-page-wrap {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(20, 184, 138, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.03) 0%, transparent 45%);
  min-height: calc(100vh - 56px);
  padding: 0 0 40px;
}
.account-page-wrap > .container {
  padding-top: 0;
}

/* ── Shell wrapper — sidebar + main konteyneri ─────────────────────────────
   ÖNEMLİ: overflow:hidden KULLANMA — sidebar position:sticky'yi öldürür.
   Köşe yuvarlama sidebar ve main'in kendi border-radius'larıyla yapılır.
*/
.account-page-wrap .shell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.02),
    0 12px 40px rgba(15, 23, 42, 0.04);
  /* overflow:hidden YOK */
}

/* ── Sidebar — saf beyaz, sağ kenarda subtle ayraç, alt-sol köşe yuvarlak ── */
.account-page-wrap .sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.02);
  border-bottom-left-radius: var(--radius-xl);
}

/* ── Main alan — kartların yaşadığı yer ─────────────────────────────────── */
.account-page-wrap main.main {
  background: transparent;
}

/* ── Sidebar gizli mod — tekil sayfalarda full genişlik main ────────────── */
.account-page-wrap .shell.shell--no-sidebar {
  grid-template-columns: 1fr;
  border-radius: var(--radius-xl);
  border-top: 1px solid var(--border);
}
.account-page-wrap .shell.shell--no-sidebar .sidebar { display: none; }
.account-page-wrap .shell.shell--no-sidebar main.main {
  border-radius: var(--radius-xl);
}


/* ── auth.css (scoped: .auth-page) ── */
/* === Auth pages (Login / Register) === */


.auth-page *{ box-sizing: border-box; }
.auth-page{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
.auth-page a{ color: inherit; text-decoration: none; }
.auth-page button{ font-family: inherit; cursor: pointer; border: none; background: none; }
.auth-page input{ font-family: inherit; font-size: 14px; }

/* ================================================================
   HARICI CSS EZMESİ ÖNLEYİCİ RESET
   Ana sitenin Bootstrap/global CSS'i ne yazarsa yazsın,
   .auth-page içindeki elementler bu stilleri kullanır.
   ================================================================ */
.auth-page input[type="text"], .auth-page input[type="email"], .auth-page input[type="password"], .auth-page input[type="number"], .auth-page input[type="tel"], .auth-page input[type="search"], .auth-page .modal-scrim input[type="text"], .auth-page .modal-scrim input[type="email"], .auth-page .modal-scrim input[type="password"], .auth-page .modal-scrim input[type="number"], .auth-page .modal-scrim input[type="tel"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
.auth-page input[type="text"]:hover, .auth-page input[type="email"]:hover, .auth-page input[type="password"]:hover, .auth-page .modal-scrim input[type="text"]:hover, .auth-page .modal-scrim input[type="email"]:hover, .auth-page .modal-scrim input[type="password"]:hover{ border-color: var(--border-strong) !important; }

.auth-page input[type="text"]:focus, .auth-page input[type="email"]:focus, .auth-page input[type="password"]:focus, .auth-page input[type="number"]:focus, .auth-page input[type="tel"]:focus, .auth-page .modal-scrim input[type="text"]:focus, .auth-page .modal-scrim input[type="email"]:focus, .auth-page .modal-scrim input[type="password"]:focus, .auth-page .modal-scrim input[type="number"]:focus, .auth-page .modal-scrim input[type="tel"]:focus{
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}

/* Checkbox reset — tam baskın */
.auth-page input[type="checkbox"]{
  all: unset !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 1px 0 0 0 !important;
  background-color: #ffffff !important;
  border: 1.5px solid #d8dce1 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  flex: 0 0 16px !important;
  box-shadow: none !important;
  outline: none !important;
  vertical-align: middle !important;
  position: relative !important;
  transition: border-color .15s, background-color .15s !important;
}
.auth-page input[type="checkbox"]:hover{
  border-color: var(--primary, #18bcc7) !important;
}
.auth-page input[type="checkbox"]:checked{
  background-color: var(--primary, #18bcc7) !important;
  border-color: var(--primary, #18bcc7) !important;
}
.auth-page input[type="checkbox"]:checked::after{
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: 3px !important;
  left: 2px !important;
  width: 9px !important;
  height: 5px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) !important;
}

/* Button reset */
.auth-page button{
  font-family: var(--font) !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* ================================================================ */

/* Page wrap */
.auth-page{
  min-height: 100vh;
  padding: 28px 20px 40px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(20, 184, 138, 0.08), transparent 60%),
    var(--bg);
}
.auth-page .auth-container{
  max-width: 1100px;
  margin: 0 auto;
}

/* Top brand strip */
.auth-page .brand-strip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.auth-page .brand-mark{
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary-grad-start), var(--primary-grad-end));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

/* Two column layout */
.auth-page .auth-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 22px;
  align-items: start;
}

/* Card base */
.auth-page .auth-card{
  background: var(--surface);
 
  border: 1px solid var(--border);
  padding: 36px 38px;
  box-shadow: var(--shadow);
}

/* Card header (top brand label + title) */
.auth-page .card-eyebrow{
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 8px;
}
.auth-page .card-title{
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  font-family: 'Manrope', var(--font);
}
.auth-page .title-underline{
  display: block;
  margin: 0 auto 26px;
  width: 80px;
  height: 8px;
}

/* Field */
.auth-page .field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-page .field.full{ grid-column: 1 / -1; }
.auth-page .field label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.auth-page .field label .req{ color: var(--accent-red); margin-left: 1px; }
.auth-page .field label svg{ color: var(--primary-700); }
.auth-page .input, .auth-page .select{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-page .input:hover{ border-color: var(--border-strong); }
.auth-page .input:focus, .auth-page .select:focus{
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.auth-page .input.error{
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}
.auth-page .select{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.auth-page .field-hint{ font-size: 12px; color: var(--text-3); margin-top: 2px; }
.auth-page .field-hint.error{ color: var(--accent-red); }

/* Two-col form */
.auth-page .form-2col{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.auth-page .form-2col .field.full{ grid-column: 1 / -1; }

/* Açık satırlar — ad/soyad, e-posta/tel, şifre/şifre tekrar, vergi dairesi/no gibi çiftler yan yana */
.auth-page .form-2col.form-2col-rows{
	display: flex;
	flex-direction: column;
	gap: 0;
}
.auth-page .form-2col.form-2col-rows > .form-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
	align-items: start;
}
.auth-page .form-2col.form-2col-rows > .form-row > .field.full{
	grid-column: 1 / -1;
}

/* Password input + reveal */
.auth-page .input-pwd{ position: relative; }
.auth-page .input-pwd .input{ padding-right: 42px; }
.auth-page .modal-scrim .input-pwd{ position: relative !important; }
.auth-page .modal-scrim .input-pwd input[type="password"], .auth-page .modal-scrim .input-pwd input[type="text"]{ padding-right: 42px !important; }
.auth-page .pwd-reveal{
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.auth-page .pwd-reveal:hover{ background: var(--surface-2); color: var(--text); }

/* Captcha */
.auth-page .captcha-row{
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 10px;
  align-items: stretch;
}
.auth-page .captcha-q{
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  font-family: 'Manrope', var(--font);
  letter-spacing: 0.05em;
  color: var(--text);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.auth-page .captcha-q::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(0,0,0,0.05) 49%, rgba(0,0,0,0.05) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(0,0,0,0.04) 49%, rgba(0,0,0,0.04) 51%, transparent 52%);
  background-size: 8px 8px;
  pointer-events: none;
}

/* Terms */
.auth-page .terms-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.auth-page .terms-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 10px;
}
.auth-page .terms-title svg{ color: var(--primary-700); }
.auth-page .term-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 4px 0;
  cursor: pointer;
}
.auth-page .term-row a{ color: var(--primary-700); text-decoration: underline; }
.auth-page .term-row .req{ color: var(--accent-red); }

/* Custom checkbox — !important ile harici CSS ezmesi önlenir */
.auth-page input.cb[type="checkbox"], .auth-page .cb{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 16px !important; height: 16px !important;
  min-width: 16px !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 4px !important;
  background: var(--surface) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  flex: 0 0 16px !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
  transition: border-color .15s, background .15s;
  position: relative !important;
  box-shadow: none !important;
}
.auth-page input.cb[type="checkbox"]:hover, .auth-page .cb:hover{ border-color: var(--primary) !important; }
.auth-page input.cb[type="checkbox"]:checked, .auth-page .cb:checked{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.auth-page input.cb[type="checkbox"]:checked::after, .auth-page .cb:checked::after{
  content: '' !important;
  display: block !important;
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

/* Buttons — unified palette */
.auth-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: transform .08s, background .18s, box-shadow .18s, border-color .18s;
  width: 100%;
  border: 1px solid transparent;
  position: relative;
}
.auth-page .btn:active{ transform: scale(0.985); }

.auth-page .btn-primary{
  background: var(--primary);
  color: #fff;
}
.auth-page .btn-primary:hover{ background: var(--primary-600); }

/* Secondary action (was btn-danger / red Google) — softer outlined card */
.auth-page .btn-google{
  background: var(--surface);
  color: #1f2937;
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.auth-page .btn-google:hover{
  background: var(--surface-2);
  border-color: #c4cad2;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.auth-page .btn-google .g-icon{ width: 16px; height: 16px; flex: 0 0 16px; }

/* Tertiary "I have an account" */
.auth-page .btn-tertiary{
  background: var(--surface);
  color: var(--primary-700);
  border-color: var(--primary);
}
.auth-page .btn-tertiary:hover{
  background: var(--primary-50);
  border-color: var(--primary-700);
  color: var(--primary-700);
}

/* Soft danger only for actual destructive context */
.auth-page .btn-danger{
  background: var(--accent-red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.22);
}
.auth-page .btn-danger:hover{ background: var(--accent-red-600); }

/* Submit (full-width primary with subtle gradient) */
.auth-page .btn-submit{
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  font-size: 14px;
  background: linear-gradient(180deg, var(--primary-grad-start) 0%, var(--primary) 100%);
  color: #fff;
}
.auth-page .btn-submit:hover{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
}

/* OR divider */
.auth-page .or-divider{
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  margin: 14px 0 12px;
  position: relative;
}
.auth-page .or-divider::before, .auth-page .or-divider::after{
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--border);
}
.auth-page .or-divider::before{ left: 0; }
.auth-page .or-divider::after{ right: 0; }

/* Bottom button row */
.auth-page .btn-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Right column (small card) */
.auth-page .side-card{
  padding: 32px 28px;
}
.auth-page .side-card .card-title{ font-size: 26px; }
.auth-page .side-card .side-text{
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0 0 22px;
  font-weight: 500;
}
.auth-page .side-card .side-text strong{ color: var(--text); }
.auth-page .side-card .btn{ margin-bottom: 10px; }
.auth-page .side-card .side-actions{ display: flex; flex-direction: column; gap: 10px; }

/* Feature cards (footer) */
.auth-page .features{
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.auth-page .feature{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
  cursor: default;
}
.auth-page .feature:hover{
  background: var(--surface-2);
  border-color: var(--border);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.auth-page .feature:hover .feature-icon{ transform: scale(1.06) rotate(-3deg); }
.auth-page .feature-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.auth-page .feature-icon.shield{ background: rgba(20, 184, 138, 0.12); color: var(--primary-700); }
.auth-page .feature-icon.support{ background: rgba(239, 68, 68, 0.12); color: var(--accent-red); }
.auth-page .feature-icon.dashboard{ background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.auth-page .feature-body .t1{ font-weight: 700; font-size: 14px; margin-bottom: 4px; letter-spacing: -0.01em; }
.auth-page .feature-body .t2{ font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* Remember row */
.auth-page .remember-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px 0 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
.auth-page .remember-row label{ display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auth-page .remember-row a{ color: var(--primary-700); font-weight: 600; }
.auth-page .remember-hint{
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.auth-page .remember-hint svg{ color: var(--text-3); flex: 0 0 12px; }

/* ── Toast (floating notification) ─────────────────────────────────── */
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Masaüstü: sağ alt */
.auth-page .toast{
  position: fixed;
  bottom: 28px;
  right: 28px;
  left: auto;
  transform: translateY(16px);
  background: var(--text);
  color: #fff;
  padding: 14px 18px 18px;
  
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 260px;
  max-width: 360px;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .22s ease, transform .28s cubic-bezier(.34,1.4,.64,1);
}
.auth-page .toast.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.auth-page .toast.success{ background: #1a7f54; }
.auth-page .toast.error{ background: #c0392b; }

.auth-page .toast-icon{ flex-shrink: 0; margin-top: 1px; }
.auth-page .toast-msg{ flex: 1; }

/* Progress bar — geriye doğru akar */
.auth-page .toast-bar{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,0.35);
  transform-origin: left center;
  animation: toast-progress linear forwards;
}

/* Mobil: alt orta */
@media (max-width: 640px) {
  .auth-page .toast{
    right: auto;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(16px);
    width: calc(100vw - 32px);
    max-width: 420px;
    min-width: 0;

  }
  .auth-page .toast.show{
    transform: translateX(-50%) translateY(0);
  }
}

/* ── Modal sistemi ──────────────────────────────────────────────────── */
.auth-page .modal-scrim{
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(6px);
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0;
  transition: opacity .25s;
  text-align: left !important;  /* Ana site text-align:center override'ını engelle */
  flex-direction: row !important;
}
.auth-page .modal-scrim.show{
  display: flex !important;
  opacity: 1 !important;
}

.auth-page .modal{
  background: var(--surface) !important;
  border-radius: var(--radius-xl) !important;
  width: 100% !important;
  max-width: 440px !important;
  /* height: auto — ana site height:100% gibi override'ları kır */
  height: auto !important;
  min-height: 0 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25) !important;
  padding: 32px 30px !important;
  transform: translateY(12px) scale(0.98);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  position: relative !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border: none !important;
  margin: 0 !important;
  text-align: left !important;
  float: none !important;
  align-self: center !important;
  /* display: block — !important YOK, terms-modal ve modal.lg flex override yapabilsin */
  display: block;
}
.auth-page .modal-scrim.show .modal{ transform: translateY(0) scale(1); }
.auth-page .modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.auth-page .modal-close:hover{ background: var(--surface-2); color: var(--text); }

/* Forgot password — additional styles */
.auth-page .fp-card{ padding: 36px 38px; }
.auth-page .fp-method{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.auth-page .fp-method-opt{
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: var(--surface-2);
  transition: all .15s;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.auth-page .fp-method-opt:hover{ border-color: var(--primary); color: var(--text); }
.auth-page .fp-method-opt.active{
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary-700);
}
.auth-page .fp-method-opt.disabled{
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-2);
}
.auth-page .fp-method-opt input{ position: absolute; opacity: 0; pointer-events: none; }
.auth-page .fp-method-opt svg{ color: currentColor; }
.auth-page .fp-warn{
  background: #fef7e6;
  border: 1px solid #fbd68a;
  color: #92400e;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.auth-page .fp-warn svg{ flex: 0 0 14px; margin-top: 1px; }

/* ── Verification Stepper Modal ──────────────────────────────────────── */

/* Modal.lg = Doğrulama/Stepper modalı — flex-column layout zorunlu */
.auth-page .modal.lg{
  max-width: 560px !important;
  padding: 0 !important;
  /* flex-column: header → stepper → body → footer dikey sıralansın */
  display: flex !important;
  flex-direction: column !important;
  /* height: auto — ana site height:100% / min-height override'ını engelle */
  height: auto !important;
  min-height: 0 !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  align-self: center !important;
}

/* Modal header */
.auth-page .modal-header{
  padding: 20px 56px 16px 22px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.auth-page .modal-icon{
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.auth-page .modal-title-wrap{
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
  display: block !important;
}
.auth-page .modal-title-2{
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  line-height: 1.3 !important;
  border: none !important;
  background: none !important;
  display: block !important;
}
.auth-page .modal-sub{
  font-size: 13px !important;
  color: var(--text-3) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* Stepper — flex-row satırı, kendi padding'i var */
.auth-page .modal.lg .stepper{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 18px 24px 4px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.auth-page .step-node{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.auth-page .step-circle{
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--surface-2) !important;
  border: 2px solid var(--border) !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
  transition: all .3s;
  box-sizing: border-box !important;
}
.auth-page .step-node.active .step-circle{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px var(--primary-50) !important;
}
.auth-page .step-node.done .step-circle{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.auth-page .step-label{
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  white-space: nowrap !important;
}
.auth-page .step-node.active .step-label, .auth-page .step-node.done .step-label{ color: var(--text) !important; }
.auth-page .step-bar{
  flex: 1 !important;
  height: 2px !important;
  background: var(--border) !important;
  margin: 0 8px 22px !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}
.auth-page .step-bar::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--primary) !important;
  transform: translateX(-100%) !important;
  transition: transform .4s ease !important;
}
.auth-page .step-bar.filled::after{ transform: translateX(0) !important; }

/* Modal body (stepper altı içerik) — içerik kadar büyür, gereksiz boşluk oluşmaz */
.auth-page .modal.lg .modal-body{
  padding: 14px 24px 22px !important;
  flex: 0 0 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}
.auth-page .modal-step{ display: none !important; }
.auth-page .modal-step.active{ display: block !important; animation: stepIn .3s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Modal footer */
.auth-page .modal.lg .modal-footer{
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  padding: 14px 24px 20px !important;
  border-top: 1px solid var(--border) !important;
  box-sizing: border-box !important;
}

/* Info banner (kod bilgi satırı) */
.auth-page .modal-info{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.auth-page .modal-info strong{ color: var(--text) !important; }
.auth-page .modal-info svg{ color: var(--primary) !important; flex: 0 0 16px !important; margin-top: 1px !important; }

/* OTP kutucukları */
.auth-page .otp-wrap{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 18px 0 14px !important;
  align-items: center !important;
}
.auth-page .otp-input{
  /* Tüm miras alınan stilleri sıfırla */
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 52px !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  border: 1.5px solid #d0d7e2 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  outline: none !important;
  transition: all .15s !important;
  font-variant-numeric: tabular-nums !important;
  cursor: text !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.auth-page .otp-input:focus{
  border-color: var(--primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}
.auth-page .otp-input.filled{
  border-color: var(--primary) !important;
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
}
.auth-page .otp-input.error{
  border-color: #e74c3c !important;
  background: #fef2f2 !important;
  color: #e74c3c !important;
  animation: shake .35s !important;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.auth-page .otp-meta{
  text-align: center !important;
  font-size: 12.5px !important;
  color: var(--text-3) !important;
  display: block !important;
}
.auth-page .otp-meta .resend{
  color: var(--primary-700) !important;
  font-weight: 600 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: inherit !important;
}
.auth-page .otp-meta .resend:disabled{ color: var(--text-muted) !important; cursor: default !important; }

/* Step 1: Gönderiliyor animasyonu */
.auth-page .sending-state{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 30px 0 20px !important;
  text-align: center !important;
}
.auth-page .sending-spinner{
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 4px solid var(--primary-50) !important;
  border-top-color: var(--primary) !important;
  animation: spin .9s linear infinite !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.auth-page .sending-title{ font-weight: 700 !important; font-size: 15px !important; margin-bottom: 4px !important; display: block !important; }
.auth-page .sending-sub{ font-size: 13px !important; color: var(--text-3) !important; display: block !important; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-page .success-state{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 22px 0 10px !important;
  gap: 14px !important;
}
.auth-page .success-check{
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: var(--primary-50) !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  animation: pop .5s cubic-bezier(.2,.8,.2,1);
  flex-shrink: 0 !important;
}
.auth-page .success-check::before{
  content: '' !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: 50% !important;
  border: 2px solid var(--primary) !important;
  opacity: 0.3 !important;
  animation: ring 1s ease-out;
}
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes ring { from { transform: scale(0.6); opacity: 0.6; } to { transform: scale(1.3); opacity: 0; } }
.auth-page .success-check svg{ color: var(--primary) !important; }
.auth-page .error-state .success-check{ background: #fef2f2 !important; }
.auth-page .error-state .success-check::before{ border-color: var(--accent-red) !important; }
.auth-page .error-state .success-check svg{ color: var(--accent-red) !important; }
.auth-page .success-state .t1{ font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--text) !important; display: block !important; }
.auth-page .success-state .t2{ font-size: 13px !important; color: var(--text-3) !important; max-width: 340px !important; display: block !important; }

/* Modal-footer (genel — modal.lg içindekini ezmesin, modal.lg kendi tanımlıyor) */
.auth-page .modal-footer{ padding: 14px 24px 20px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); }
.auth-page .modal-footer .btn{ width: auto !important; padding: 11px 20px !important; }

/* Terms modal — column flex layout */
.auth-page .terms-modal{
  max-width: 580px !important;
  padding: 0 !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.auth-page .terms-modal .modal-header{
  flex-shrink: 0 !important;
}
.auth-page .terms-modal .modal-body{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 14px 24px 18px !important;
  min-height: 80px !important;
  /* Scroll çalışsın diye max-height sınırı */
  max-height: calc(90vh - 140px) !important;
}
.auth-page .terms-modal .modal-footer{
  flex-shrink: 0 !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  padding: 14px 24px 20px !important;
  border-top: 1px solid var(--border) !important;
}
.auth-page .terms-content{
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--text-2) !important;
}
.auth-page .terms-content h4{
  font-size: 14px !important;
  margin: 16px 0 6px !important;
  padding: 0 !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  border: none !important;
  background: none !important;
}
.auth-page .terms-content h4:first-child{ margin-top: 0 !important; }
.auth-page .terms-content p{
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
  font-weight: 400 !important;
}

/* Terms body dinamik içerik */
.auth-page .terms-body-text{ line-height: 1.8; color: var(--text-2); }

/* Brand faded suffix (/Panel gibi) */
.auth-page .brand-suffix{ opacity: 0.5; }

/* Kayıt kapalı / genel bildirim kartı */
.auth-page .auth-card--notice{ max-width: 520px; margin: 60px auto; text-align: center; }
.auth-page .notice-text{ color: var(--text-2); margin: 16px 0 24px; }

/* Inline (static) banner toast — popup değil, form içinde sabit */
.auth-page .toast-inline{
  position: static;
  transform: none;
  left: auto;
  width: 100%;
  box-sizing: border-box;
  opacity: 1;
  margin-bottom: 18px;
  border-radius: var(--radius);
}
.auth-page .toast-inline.info{ background: var(--info); }
.auth-page .toast-inline.warn{ background: var(--warn); }

/* Kurumsal alanlar — JS açar/kapar */
.auth-page .corp-only{ display: none; }

/* Captcha hata mesajı (field-hint.error) */
.auth-page .field-hint.error{ margin-top: 4px; }

/* Genel gizleme — JS show etmeden önce */
/* .hidden CSS fallback — JS kontrolü style.display ile yapılır (daha güvenilir) */
.auth-page .hidden{ display: none; }

/* Şifremi Unuttum — geri dön butonu üst boşluk */
.auth-page .fp-card .btn-google{ margin-top: 10px; }

/* Modal info — başarılı doğrulama varyantı (step 3) */
.auth-page .modal-info--success{ background: var(--primary-50); border-color: #bbf0d9; }
.auth-page .modal-info--success svg{ color: var(--primary-700); }

/* Gönderme durumu metin stilleri */
.auth-page .sending-title{ font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.auth-page .sending-sub{ font-size: 13px; color: var(--text-3); }

/* Büyük başlık varyantı — side-card içinde 32px */
.auth-page .card-title--lg{ font-size: 32px; }

/* Responsive */
@media (max-width: 920px) {
  .auth-page .auth-grid{ grid-template-columns: 1fr; }
  .auth-page .auth-card{ padding: 28px 22px; }
  .auth-page .features{ grid-template-columns: 1fr; gap: 22px; padding: 22px; }
}
@media (max-width: 540px) {
  .auth-page .fp-method{ grid-template-columns: 1fr; }
  .auth-page .otp-input{ width: 38px; height: 48px; font-size: 18px; }
  .auth-page .modal-footer{ flex-direction: column-reverse; }
  .auth-page .modal-footer .btn{ width: 100%; }
  .auth-page{ padding: 18px 14px 30px; }
  .auth-page .form-2col{ grid-template-columns: 1fr; }
  .auth-page .form-2col.form-2col-rows > .form-row{ grid-template-columns: 1fr; }
  .auth-page .card-title{ font-size: 26px; }
  .auth-page .side-card .card-title{ font-size: 22px; }
  .auth-page .btn-row{ grid-template-columns: 1fr; }
  .auth-page .auth-card{ padding: 24px 18px; }
  .auth-page .captcha-row{ grid-template-columns: 1fr; }
}

/* SweetAlert2 stilleri auth-swals-global.css (scoped .auth-page dışına taşındı — eticaret-css.php uyumu). */


/* ── shop.css ── */
/* === EvrenX Shop — shared styles === */
/* Uses :root tokens from auth.css */

/* ============= TOPBAR ============= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar .brand-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.topbar .brand-link .brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-grad-start), var(--primary-grad-end));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.topbar .brand-link b { color: var(--primary-700); }

.search {
  flex: 1;
  max-width: 560px;
  position: relative;
  margin: 0 16px;
}
.search input {
  width: 100%;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 11px 18px 11px 42px;
  background: var(--surface-2);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s;
}
.search input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  transition: background .15s, color .15s;
  cursor: pointer;
  background: transparent;
  border: none;
}
.nav-action:hover { background: var(--surface-2); color: var(--text); }
.nav-action .label { line-height: 1.1; }
.nav-action .sub { font-size: 10.5px; color: var(--text-3); display: block; font-weight: 500; }
.nav-action:hover .sub { color: var(--text-2); }
.nav-action .badge {
  position: absolute;
  top: 4px; left: 24px;
  min-width: 17px; height: 17px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--surface);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav-action .badge.show { transform: scale(1); }
.nav-action .badge.bump { animation: badgeBump .4s ease; }
@keyframes badgeBump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }

/* Hover preview panel for fav/cart */
.nav-preview {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 90;
}
.nav-action-wrap { position: relative; }
.nav-action-wrap:hover .nav-preview {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.preview-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
  margin-bottom: 10px;
}
.preview-head .count { color: var(--text-3); font-weight: 500; }
.preview-list { max-height: 320px; overflow-y: auto; }
.preview-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.preview-item:last-child { border-bottom: none; }
.preview-item img {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--surface-2);
  object-fit: cover;
}
.preview-item .pi-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.preview-item .pi-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.preview-item .pi-price { font-size: 12.5px; font-weight: 700; color: var(--primary-700); }
.preview-item .pi-remove {
  background: none; border: none;
  color: var(--text-3);
  padding: 4px; cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.preview-item .pi-remove:hover { background: #fef2f2; color: var(--accent-red); }
.preview-empty {
  padding: 30px 16px; text-align: center; color: var(--text-3); font-size: 13px;
}
.preview-empty svg { color: var(--text-muted); margin-bottom: 8px; }
.preview-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-foot .total {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 700;
  margin-bottom: 4px;
}
.preview-foot .total span:last-child { color: var(--primary-700); }
.preview-foot .btn { padding: 10px; font-size: 12.5px; }

/* ============= PAGE WRAP ============= */
.shop-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.shop-main {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 24px 60px;
}
.breadcrumbs {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumbs a:hover { color: var(--primary-700); }
.breadcrumbs .sep { color: var(--text-muted); }
.breadcrumbs .current { color: var(--text); font-weight: 600; }

/* ============= PRODUCT GRID ============= */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}
.gallery-wrap {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
}
.gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}
.gallery-thumbs::-webkit-scrollbar { width: 5px; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.gthumb {
  width: 74px; height: 74px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color .15s, transform .15s;
  flex: 0 0 74px;
  padding: 0;
}
.gthumb img, .gthumb .gthumb-fill {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gthumb:hover { border-color: var(--primary); transform: scale(1.04); }
.gthumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.gthumb.video::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'><polygon points='5 3 19 12 5 21'/></svg>") center/20px no-repeat;
}

.gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.gallery-main img, .gallery-main .gmain-fill {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .25s;
}
.gallery-main .gmain-fill {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.gallery-zoom {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.gallery-zoom:hover { transform: scale(1.08); color: var(--primary-700); }

.gallery-tags {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
}
.gtag {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--primary);
}
.gtag.discount { background: var(--accent-red); }
.gtag.new { background: #6366f1; }

.gallery-fav {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-3);
  box-shadow: var(--shadow-sm);
  transition: transform .15s, color .15s, background .15s;
}
.gallery-fav:hover { color: var(--accent-red); transform: scale(1.08); }
.gallery-fav.active { color: var(--accent-red); background: #fff; }
.gallery-fav.active svg { fill: var(--accent-red); }

/* ============= PRODUCT INFO PANEL ============= */
.info-panel {
  position: sticky;
  top: 84px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.info-brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.info-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text);
  text-wrap: pretty;
}
.info-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.stars {
  display: inline-flex; gap: 1px; color: #f59e0b;
}
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.stars .empty { color: var(--border-strong); }
.info-rating .num { color: var(--text); font-weight: 700; margin-left: 2px; }
.info-rating .sep { color: var(--border); }
.info-rating a:hover { color: var(--primary-700); text-decoration: underline; }

.price-block {
  background: linear-gradient(180deg, var(--primary-50) 0%, transparent 100%);
  border: 1px solid #d1f0e0;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.price-old {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.price-old .strike { text-decoration: line-through; }
.price-old .badge-disc {
  background: var(--accent-red);
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
}
.price-now {
  font-size: 30px;
  font-weight: 800;
  color: var(--primary-700);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-now .currency { font-size: 18px; font-weight: 700; margin-left: 2px; }
.price-saving {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
}
.price-saving b { color: var(--accent-red); }

/* Stock urgency strip */
.urgency-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.urgency-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.urgency-row svg { flex: 0 0 14px; }
.urgency-row.stock { color: #b45309; }
.urgency-row.viewers { color: var(--primary-700); }
.urgency-row.timer { color: var(--accent-red); }
.urgency-row b { font-variant-numeric: tabular-nums; }
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  position: relative;
  flex: 0 0 7px;
}
.live-dot::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.4;
  animation: pulse 1.5s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

.stock-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.stock-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, var(--accent-red));
  border-radius: 999px;
  transition: width .4s;
}

/* Variants */
.variant-group { margin-bottom: 14px; }
.variant-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.variant-label .selected-name {
  color: var(--text);
  font-weight: 700;
}
.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  cursor: pointer;
  position: relative;
  transition: transform .15s, border-color .15s;
}
.swatch:hover { transform: scale(1.08); }
.swatch.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.swatch.active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.size-pill {
  padding: 9px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: all .15s;
  min-width: 50px;
  text-align: center;
}
.size-pill:hover:not(.disabled) { border-color: var(--primary); color: var(--text); }
.size-pill.active {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary-700);
}
.size-pill.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.size-guide-link {
  font-size: 11.5px;
  color: var(--primary-700);
  font-weight: 600;
  cursor: pointer;
}
.size-guide-link:hover { text-decoration: underline; }

/* Quantity */
.qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.qty-row .label-q {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.qty-stepper button {
  width: 32px; height: 34px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 16px;
  font-weight: 700;
  transition: background .15s;
}
.qty-stepper button:hover { background: var(--surface-2); color: var(--primary-700); }
.qty-stepper input {
  width: 40px; height: 34px;
  border: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface);
  outline: none;
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Action buttons */
.action-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.btn-fav-lg {
  width: 50px; height: 50px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
}
.btn-fav-lg:hover { border-color: var(--accent-red); color: var(--accent-red); }
.btn-fav-lg.active { border-color: var(--accent-red); color: var(--accent-red); background: #fef2f2; }
.btn-fav-lg.active svg { fill: var(--accent-red); }
.btn-cart-lg {
  height: 50px;
  background: linear-gradient(180deg, var(--primary-grad-start) 0%, var(--primary) 100%);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.01em;
  transition: all .15s;
  width: 100%;
}
.btn-cart-lg:hover {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
}
.btn-cart-lg:active { transform: scale(0.99); }

.btn-buy-now {
  width: 100%;
  height: 46px;
  background: var(--surface);
  border: 1.5px solid var(--primary);
  color: var(--primary-700);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s;
}
.btn-buy-now:hover { background: var(--primary-50); }

/* Trust strip */
.trust-list {
  list-style: none;
  padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
.trust-list li svg { flex: 0 0 16px; color: var(--primary); }
.trust-list li b { color: var(--text); }

/* Seller mini-card */
.seller-card {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--surface-2);
}
.seller-avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.seller-name { font-size: 12.5px; font-weight: 700; }
.seller-meta { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.seller-meta .score { color: #f59e0b; font-weight: 700; }
.seller-link {
  font-size: 11.5px; font-weight: 700; color: var(--primary-700);
  padding: 6px 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  transition: background .15s;
}
.seller-link:hover { background: var(--primary-50); }

/* ============= TABS SECTION ============= */
.tabs-section {
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tabs-nav button {
  padding: 16px 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tabs-nav button:hover { color: var(--text); }
.tabs-nav button.active {
  color: var(--primary-700);
  border-bottom-color: var(--primary);
}
.tabs-nav button .count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.tabs-nav button.active .count {
  background: var(--primary-50);
  color: var(--primary-700);
}
.tab-panel { padding: 28px; display: none; }
.tab-panel.active { display: block; animation: fadeIn .3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Description */
.desc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.desc-grid h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.desc-grid p { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin: 0 0 12px; }
.feature-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feature-bullets li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--text-2);
}
.feature-bullets li svg { color: var(--primary); flex: 0 0 16px; margin-top: 2px; }

/* Specs table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table tr:nth-child(even) { background: var(--surface-2); }
.specs-table th, .specs-table td { padding: 12px 14px; text-align: left; }
.specs-table th {
  width: 40%;
  color: var(--text-2);
  font-weight: 600;
  font-size: 12.5px;
}
.specs-table td { color: var(--text); font-weight: 500; }

.specs-cats { display: flex; flex-direction: column; gap: 22px; }
.specs-cat h4 {
  font-size: 13px; font-weight: 700;
  color: var(--primary-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-50);
}

/* Reviews */
.reviews-summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.rating-big {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rating-big .num {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.rating-big .stars { margin: 8px 0 4px; }
.rating-big .stars svg { width: 18px; height: 18px; }
.rating-big .total { font-size: 12.5px; color: var(--text-3); }

.rating-bars { display: flex; flex-direction: column; gap: 6px; }
.rb-row { display: grid; grid-template-columns: 50px 1fr 50px; gap: 10px; align-items: center; font-size: 12px; color: var(--text-2); }
.rb-row .star-label { display: flex; align-items: center; gap: 3px; font-weight: 600; }
.rb-row .star-label svg { width: 11px; height: 11px; fill: #f59e0b; }
.rb-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.rb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 999px;
}
.rb-row .pct { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }

.review-list { display: flex; flex-direction: column; gap: 18px; }
.review-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s;
}
.review-item:hover { border-color: var(--border-strong); }
.review-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-grad-start), var(--primary-grad-end));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
}
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review-name { font-weight: 700; font-size: 13px; }
.review-verified {
  font-size: 10.5px; font-weight: 700;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
}
.review-date { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.review-stars { display: flex; gap: 1px; color: #f59e0b; margin-bottom: 6px; }
.review-stars svg { width: 13px; height: 13px; fill: currentColor; }
.review-stars .empty { color: var(--border-strong); }
.review-title { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.review-text { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 8px; }
.review-meta-tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.review-meta-tags .tag {
  background: var(--surface-2);
  color: var(--text-3);
  padding: 2px 8px;
  border-radius: 999px;
}
.review-meta-tags .tag b { color: var(--text-2); }
.review-helpful {
  margin-top: 8px;
  display: flex; gap: 14px;
  font-size: 11.5px; color: var(--text-3);
}
.review-helpful button {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-3); padding: 4px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.review-helpful button:hover { background: var(--surface-2); color: var(--primary-700); }

/* Q&A */
.qa-list { display: flex; flex-direction: column; gap: 16px; }
.qa-item { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.qa-q { display: flex; gap: 10px; margin-bottom: 10px; }
.qa-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 11px;
  flex: 0 0 24px;
}
.qa-icon.q { background: #dbeafe; color: #1d4ed8; }
.qa-icon.a { background: var(--primary-50); color: var(--primary-700); }
.qa-q .text { font-weight: 600; font-size: 13.5px; color: var(--text); flex: 1; }
.qa-a { display: flex; gap: 10px; padding-left: 12px; border-left: 2px solid var(--primary-50); }
.qa-a .text { font-size: 13px; color: var(--text-2); line-height: 1.55; flex: 1; }
.qa-meta { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.qa-meta b { color: var(--text-2); }
.qa-ask {
  margin-top: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.qa-ask svg { color: var(--primary-700); flex: 0 0 32px; }
.qa-ask .t1 { font-weight: 700; font-size: 13px; }
.qa-ask .t2 { font-size: 12px; color: var(--text-3); }
.qa-ask .btn { width: auto; padding: 9px 18px; }

/* Shipping/return */
.info-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.info-col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.info-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.info-col-head .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex: 0 0 38px;
}
.info-col-head h4 { margin: 0; font-size: 14px; font-weight: 700; }
.info-col-head .sub { font-size: 12px; color: var(--text-3); }
.info-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.info-col li {
  font-size: 12.5px; color: var(--text-2);
  display: flex; gap: 8px; align-items: flex-start;
  line-height: 1.55;
}
.info-col li svg { flex: 0 0 14px; color: var(--primary); margin-top: 2px; }

/* Installment table */
.install-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.install-table thead { background: var(--surface-2); }
.install-table th, .install-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.install-table th { font-weight: 700; font-size: 11.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.install-table td { color: var(--text); font-weight: 500; }
.install-table .bank-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.install-table .bank-logo {
  width: 30px; height: 30px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
}
.install-note { font-size: 11.5px; color: var(--text-3); margin-top: 14px; }

/* ============= BUNDLE ============= */
.bundle-section {
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 28px 26px;
}
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.section-head h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.section-head h2 svg { color: var(--primary-700); }
.section-head a { font-size: 12.5px; color: var(--primary-700); font-weight: 600; }
.section-head a:hover { text-decoration: underline; }

.bundle-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.bundle-items {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.bundle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, transform .15s;
}
.bundle-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.bundle-card.checked { border-color: var(--primary); background: var(--primary-50); }
.bundle-card .check {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: grid; place-items: center;
  color: transparent;
  transition: all .15s;
}
.bundle-card.checked .check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bundle-card .b-img {
  width: 70px; height: 70px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  margin-bottom: 8px;
}
.bundle-card .b-name {
  font-size: 11.5px; font-weight: 600;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 4px;
}
.bundle-card .b-price {
  font-size: 12px; font-weight: 700; color: var(--primary-700);
}
.bundle-plus {
  font-size: 22px; color: var(--text-muted); font-weight: 300;
  padding: 0 4px;
}
.bundle-summary {
  background: var(--primary-50);
  border: 1px solid #c5ebd9;
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.bundle-summary .bs-label { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.bundle-summary .bs-old { font-size: 13px; color: var(--text-3); text-decoration: line-through; }
.bundle-summary .bs-now { font-size: 24px; font-weight: 800; color: var(--primary-700); letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0; }
.bundle-summary .bs-save { font-size: 11.5px; font-weight: 700; color: var(--accent-red); margin-bottom: 10px; }
.bundle-summary .btn { width: 100%; padding: 10px; }

/* ============= RELATED PRODUCTS ============= */
.related-section {
  margin-top: 36px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 22px rgba(15,23,42,0.08);
}
.product-card .pc-img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  position: relative;
}
.product-card .pc-fav {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-3);
  cursor: pointer;
  transition: color .15s, transform .15s;
}
.product-card .pc-fav:hover { color: var(--accent-red); transform: scale(1.1); }
.product-card .pc-fav.active { color: var(--accent-red); }
.product-card .pc-fav.active svg { fill: var(--accent-red); }
.product-card .pc-disc {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--accent-red);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.product-card .pc-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.product-card .pc-brand { font-size: 11px; font-weight: 700; color: var(--primary-700); text-transform: uppercase; letter-spacing: 0.04em; }
.product-card .pc-name {
  font-size: 13px; font-weight: 600;
  margin: 4px 0 6px;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card .pc-rating { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; }
.product-card .pc-rating svg { width: 11px; height: 11px; fill: #f59e0b; }
.product-card .pc-price-row { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.product-card .pc-price-old { font-size: 11.5px; color: var(--text-3); text-decoration: line-through; }
.product-card .pc-price-now { font-size: 16px; font-weight: 800; color: var(--primary-700); letter-spacing: -0.01em; }
.product-card .pc-add {
  margin-top: 8px;
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px;
  font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: all .15s;
}
.product-card .pc-add:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============= ADD-TO-CART MODAL ============= */
.atc-modal { max-width: 460px; padding: 0; }
.atc-head {
  background: linear-gradient(135deg, var(--primary-50), #fff);
  padding: 22px 24px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.atc-check {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 44px;
  animation: pop .5s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.atc-check::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid var(--primary);
  opacity: 0.3; animation: ring 1s ease-out;
}
.atc-head .t1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.atc-head .t2 { font-size: 12.5px; color: var(--text-3); margin: 2px 0 0; }
.atc-body { padding: 18px 24px; display: flex; gap: 14px; align-items: center; }
.atc-img {
  width: 72px; height: 72px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  flex: 0 0 72px;
}
.atc-info .name { font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.atc-info .meta { font-size: 11.5px; color: var(--text-3); margin-bottom: 6px; }
.atc-info .price { font-size: 16px; font-weight: 800; color: var(--primary-700); }
.atc-stat {
  margin: 0 24px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.atc-stat div { display: flex; flex-direction: column; }
.atc-stat .lbl { font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.atc-stat .val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.atc-stat .val.green { color: var(--primary-700); }
.atc-foot {
  padding: 14px 24px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ============= FOOTER ============= */
.shop-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: 60px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-3);
}
.footer-inner .links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-inner .links a:hover { color: var(--primary-700); }

/* ============= TWEAKS PANEL ============= */
.tweaks-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 60;
  transition: transform .15s, background .15s;
}
.tweaks-fab:hover { transform: rotate(45deg) scale(1.05); background: var(--primary-700); }

.tweaks-panel {
  position: fixed;
  bottom: 84px; right: 24px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  z-index: 60;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.tweaks-panel.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tweaks-panel h4 {
  font-size: 13px; font-weight: 700;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.tweaks-panel h4 svg { color: var(--primary-700); }
.tweak-row { margin-bottom: 12px; }
.tweak-row label {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}
.tweak-segments {
  display: flex;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.tweak-segments button {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  transition: all .15s;
}
.tweak-segments button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.tweak-row input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}
.tweak-row .row-sw {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
}
.switch {
  position: relative;
  width: 38px; height: 22px;
  background: var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(16px); }

/* ============= DENSITY MODES ============= */
body.density-tight .info-panel { padding: 16px; }
body.density-tight .price-block { padding: 10px 12px; }
body.density-tight .price-now { font-size: 26px; }
body.density-tight .product-card .pc-body { padding: 9px; }
body.density-tight .tab-panel { padding: 20px; }

/* ============= GALLERY VARIANTS (tweak) ============= */
body.gallery-bottom .gallery-wrap { grid-template-columns: 1fr; grid-template-rows: 1fr 78px; }
body.gallery-bottom .gallery-thumbs {
  flex-direction: row;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
}
body.gallery-carousel .gallery-thumbs { display: none; }
body.gallery-carousel .gallery-wrap { grid-template-columns: 1fr; }

/* ============= RESPONSIVE ============= */
@media (max-width: 1100px) {
  .product-layout { grid-template-columns: 1fr; }
  .info-panel { position: static; }
  .related-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .reviews-summary { grid-template-columns: 1fr; }
  .desc-grid { grid-template-columns: 1fr; }
  .info-cols { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .bundle-grid { grid-template-columns: 1fr; }
  .topbar-inner { flex-wrap: wrap; }
  .search { order: 99; flex-basis: 100%; max-width: none; margin: 4px 0 0; }
  .nav-action .label, .nav-action .sub { display: none; }
}
@media (max-width: 540px) {
  .gallery-wrap { grid-template-columns: 1fr; grid-template-rows: 1fr 70px; }
  .gallery-thumbs { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .gthumb { flex: 0 0 64px; width: 64px; height: 64px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-main { padding: 16px 14px 40px; }
  .info-title { font-size: 17px; }
  .price-now { font-size: 26px; }
  .nav-preview { width: calc(100vw - 28px); right: -10px; }
}


/* ── checkout.css ── */
/* === EvrenX Checkout — sepet + ödeme akışı === */
/* Topbar/footer/topbar paylaşımlı (shop.css'den geliyor) */

/* ============= LAYOUT ============= */
main.main { padding: 0 !important; }
.cart-page, .checkout-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
.cart-main, .checkout-main {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 60px;
}
.cart-main.cart-main--empty {
  flex: 0 0 auto;
  padding-bottom: 40px;
}
@media (min-width: 721px) {
  .cart-main, .checkout-main { margin: 30px auto; }
}

/* ============= STEP PROGRESS BAR ============= */
/* ---- Step bar ---- */
.steps {
  display: flex;
  align-items: flex-start;
  padding: 20px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
}
.steps::before,
.steps::after { display: none; }

.step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 7px;
}
/* Connector line from right edge of this circle to left edge of next circle */
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(50% + 13px);
  width: calc(100% - 26px);
  height: 1px;
  background: var(--border-strong);
  z-index: 0;
}
.step-item.done:not(:last-child)::after {
  background: var(--primary);
}

.step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  transition: background .2s, border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}
.step-item.done .step-circle {
  background: var(--primary);
  border-color: var(--primary);
  font-size: 0;
}
.step-item.done .step-circle::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.step-item.active .step-circle {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  box-shadow: 0 2px 10px rgba(26,31,43,.18);
}

.step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  text-align: center;
}
.step-item.done .step-label { color: var(--primary-700); font-weight: 600; }
.step-item.active .step-label { color: var(--text); font-weight: 700; }

/* ============= CART LAYOUT ============= */
.cart-layout, .checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

/* ============= CART ITEMS ============= */
.cart-items {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cart-bar {
  padding: 14px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.cart-bar .seller {
  display: flex; align-items: center; gap: 10px;
}
.cart-bar .seller .seller-avatar {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 11px;
}
.cart-bar .delivery-promise {
  color: var(--primary-700);
  font-size: 12px;
  display: flex; align-items: center; gap: 6px;
}
.cart-bar .delivery-promise svg { color: var(--primary); }

.cart-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 130px 130px 30px;
  gap: 16px;
  padding: 18px 20px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.cart-row:last-child { border-bottom: none; }
.cart-row.removing { opacity: 0; transform: translateX(40px); transition: all .3s; }

.cart-img {
  width: 76px; height: 76px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  flex: 0 0 76px;
  position: relative;
  overflow: hidden;
}
.cart-img .gtag {
  position: absolute; top: 6px; left: 6px;
  font-size: 9.5px; padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
  font-weight: 700;
}

.cart-info .ci-brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.cart-info .ci-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.35;
}
.cart-info .ci-name:hover { color: var(--primary-700); }
.cart-info .ci-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cart-info .ci-meta .tag {
  background: var(--surface-2);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 500;
}
.ci-actions {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
}
.ci-actions button {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-3);
  font-weight: 600;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .15s;
}
.ci-actions button:hover { color: var(--primary-700); }
.ci-actions .save-fav:hover { color: var(--accent-red); }

.cart-qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cart-qty .qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.cart-qty .qty-stepper button {
  width: 30px; height: 32px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.cart-qty .qty-stepper button:hover { background: var(--surface-2); color: var(--primary-700); }
.cart-qty .qty-stepper input {
  width: 36px; height: 32px;
  border: none;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--surface);
  outline: none;
}
.cart-qty .stock-note { font-size: 10.5px; color: #b45309; font-weight: 600; }

.cart-price {
  text-align: right;
}
.cart-price .cp-old {
  font-size: 11.5px;
  color: var(--text-3);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.cart-price .cp-now {
  font-size: 17px;
  font-weight: 800;
  color: var(--primary-700);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cart-price .cp-unit {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
}

.cart-remove {
  background: none;
  border: none;
  color: var(--text-3);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cart-remove:hover { background: #fef2f2; color: var(--accent-red); }

.cart-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-3);
}
.cart-empty svg { color: var(--text-muted); margin-bottom: 12px; }
.cart-empty .ce-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cart-empty .ce-sub { font-size: 13px; margin-bottom: 16px; }

/* Cross-sell strip */
.cross-sell {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.cross-sell h3 {
  font-size: 14px; font-weight: 700;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.cross-sell h3 svg { color: var(--primary-700); }
.cross-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cross-card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .15s;
}
.cross-card:hover { transform: translateY(-2px); }
.cross-card .cc-img {
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.cross-card .cc-name { font-size: 12px; font-weight: 600; line-height: 1.3; min-height: 32px; }
.cross-card .cc-price-row { display: flex; align-items: center; justify-content: space-between; }
.cross-card .cc-price { font-size: 13px; font-weight: 800; color: var(--primary-700); }
.cross-card .cc-add {
  background: var(--primary);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.cross-card .cc-add:hover { background: var(--primary-600); transform: scale(1.08); }

/* ============= ORDER SUMMARY ============= */
.summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 84px;
}
.summary h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* Coupon */
.coupon {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.coupon input {
  flex: 1;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s;
}
.coupon input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.coupon button {
  background: var(--text);
  color: #fff;
  border: none;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background .15s;
}
.coupon button:hover { background: var(--primary-700); }

.coupon-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--primary-50);
  border: 1px dashed var(--primary);
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 14px;
  color: var(--primary-700);
  font-weight: 600;
}
.coupon-applied svg { color: var(--primary); }
.coupon-applied .remove {
  margin-left: auto;
  background: none; border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 4px;
}
.coupon-applied .remove:hover { color: var(--accent-red); }

/* Quick coupon suggestions */
.coupon-suggest {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.coupon-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  font-size: 11.5px;
  cursor: pointer;
  transition: all .15s;
  background: var(--surface);
}
.coupon-chip:hover { border-color: var(--primary); background: var(--primary-50); }
.coupon-chip .code {
  font-family: ui-monospace, 'SF Mono', monospace;
  background: var(--text);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.coupon-chip .desc { color: var(--text-2); flex: 1; margin: 0 8px; }

/* Summary rows */
.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-2);
}
.sr.discount span:last-child { color: var(--accent-red); font-weight: 700; }
.sr.shipping .free { color: var(--primary-700); font-weight: 700; }
.sr-tooltip {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: help;
}
.sr-tooltip svg { color: var(--text-muted); }

.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0 8px;
  font-weight: 700;
}
.summary-total .label { font-size: 14px; }
.summary-total .amount {
  font-size: 24px;
  color: var(--primary-700);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.summary-total + .save-note {
  font-size: 11.5px;
  color: var(--accent-red);
  font-weight: 700;
  text-align: right;
  margin-bottom: 12px;
}

.btn-checkout {
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, var(--primary-grad-start) 0%, var(--primary) 100%);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all .15s;
  text-decoration: none;
  margin-top: 4px;
}
.btn-checkout:hover {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  color: #fff;
}
.btn-checkout:active { transform: scale(0.99); }

.summary-trust {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-trust li {
  display: flex; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--text-3);
}
.summary-trust li svg { color: var(--primary); flex: 0 0 14px; }

.payment-logos {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.payment-logos .pl {
  width: 36px; height: 22px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}

/* ============= CHECKOUT STEPS ============= */
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.step-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.step-card-head .num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  flex: 0 0 30px;
}
.step-card-head h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.step-card-head .sub {
  font-size: 12px;
  color: var(--text-3);
  margin-left: auto;
}

/* Guest/member choice */
.guest-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.guest-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 18px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.guest-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.guest-card.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}
.guest-card.selected::after {
  content: '✓';
  position: absolute;
  top: 12px; right: 14px;
  width: 22px; height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.guest-card .ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--primary-700);
  margin-bottom: 12px;
}
.guest-card.selected .ic { background: var(--surface); }
.guest-card .gc-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.guest-card .gc-sub { font-size: 12px; color: var(--text-3); line-height: 1.45; }
.guest-card .gc-tag {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary-700);
  background: rgba(20, 184, 138, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
}

/* Member login form */
.member-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.member-form input {
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s;
}
.member-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }

/* ============= ADDRESS FORM ============= */
.addr-saved-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.addr-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  background: var(--surface);
}
.addr-card:hover { border-color: var(--primary); }
.addr-card.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}
.addr-card.selected::after {
  content: '✓';
  position: absolute;
  top: 10px; right: 12px;
  width: 22px; height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.addr-card .ac-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.addr-card.selected .ac-tag { background: var(--surface); }
.addr-card .ac-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.addr-card .ac-text { font-size: 12px; color: var(--text-2); line-height: 1.55; margin-bottom: 6px; }
.addr-card .ac-phone { font-size: 11.5px; color: var(--text-3); }
.addr-card .ac-actions {
  margin-top: 10px;
  display: flex; gap: 12px;
  font-size: 11px;
}
.addr-card .ac-actions a {
  color: var(--text-3);
  font-weight: 600;
}
.addr-card .ac-actions a:hover { color: var(--primary-700); }
.addr-card.add-new {
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--text-3);
  text-align: center;
}
.addr-card.add-new:hover { color: var(--primary-700); border-color: var(--primary); background: var(--surface-2); }
.addr-card.add-new svg { color: var(--primary); }
.addr-card.add-new .lbl { font-size: 13px; font-weight: 700; }

/* New address form */
.addr-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.addr-form .full { grid-column: 1 / -1; }
.addr-form .field-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}
.addr-form input,
.addr-form select,
.addr-form textarea {
  width: 100%;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.addr-form textarea { resize: vertical; min-height: 64px; }
.addr-form input:focus,
.addr-form select:focus,
.addr-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* Invoice toggle */
.invoice-toggle {
  display: flex;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
  gap: 4px;
}
.invoice-toggle button {
  flex: 1;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.invoice-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.same-as-shipping {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--primary-50);
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 14px;
  color: var(--primary-700);
  font-weight: 600;
  cursor: pointer;
}
.same-as-shipping .checkbox {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--primary);
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 18px;
}
.same-as-shipping.unchecked .checkbox { background: var(--surface); color: transparent; }
.same-as-shipping.unchecked { color: var(--text-2); background: var(--surface-2); }
.same-as-shipping.unchecked .checkbox { border-color: var(--border-strong); }

/* ============= SHIPPING METHODS ============= */
.shipping-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shipping-method {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .15s;
  position: relative;
}
.shipping-method:hover { border-color: var(--primary); }
.shipping-method.selected { border-color: var(--primary); background: var(--primary-50); }
.shipping-method .radio {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex: 0 0 20px;
  position: relative;
  transition: border-color .15s;
}
.shipping-method.selected .radio {
  border-color: var(--primary);
}
.shipping-method.selected .radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--primary);
  border-radius: 50%;
}
.shipping-method .sm-logo {
  width: 50px; height: 36px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  flex: 0 0 50px;
}
.shipping-method .sm-info { flex: 1; }
.shipping-method .sm-name { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.shipping-method .sm-time { font-size: 11.5px; color: var(--text-3); }
.shipping-method .sm-price {
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.shipping-method .sm-price.free { color: var(--primary-700); }
.shipping-method .sm-price.free::before { content: 'BEDAVA'; }

.delivery-time {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.delivery-time .dt-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.delivery-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dt-pill {
  padding: 9px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  background: var(--surface);
  transition: all .15s;
}
.dt-pill:hover { border-color: var(--primary); }
.dt-pill.active { border-color: var(--primary); background: var(--primary-50); color: var(--primary-700); }

/* ============= PAYMENT ============= */
.pay-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.pay-tab {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s;
  background: var(--surface);
}
.pay-tab:hover { border-color: var(--primary); }
.pay-tab.active {
  border-color: var(--primary);
  background: var(--primary-50);
}
.pay-tab svg { color: var(--text-3); }
.pay-tab.active svg { color: var(--primary-700); }
.pay-tab .pt-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  text-align: center;
  line-height: 1.25;
}
.pay-tab.active .pt-label { color: var(--primary-700); }
.pay-tab .pt-tag {
  font-size: 9.5px;
  font-weight: 700;
  background: var(--accent-red);
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  position: absolute;
  top: -8px; right: 8px;
}
.pay-tab { position: relative; }

.pay-content { display: none; }
.pay-content.active { display: block; animation: fadeIn .3s; }

/* Credit card visual + form */
.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.cc-visual {
  background: linear-gradient(135deg, #1f2937 0%, #111827 60%, #0f1722 100%);
  border-radius: var(--radius-lg);
  padding: 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.586 / 1;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.35);
}
.cc-visual::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(20,184,138,0.4), transparent 70%);
  border-radius: 50%;
}
.cc-visual::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(99,102,241,0.3), transparent 70%);
  border-radius: 50%;
}
.cc-visual > * { position: relative; z-index: 1; }
.cc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.cc-chip {
  width: 38px; height: 28px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fde68a, #d97706);
  position: relative;
}
.cc-chip::before, .cc-chip::after {
  content: ''; position: absolute;
  background: rgba(0,0,0,0.15);
}
.cc-chip::before { top: 6px; left: 4px; right: 4px; height: 1px; }
.cc-chip::after { top: 12px; left: 4px; right: 4px; height: 1px; }
.cc-brand {
  font-weight: 800; font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.9;
}
.cc-num {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 18px;
  letter-spacing: 0.12em;
  margin-top: 28px;
  font-weight: 600;
}
.cc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 18px;
}
.cc-bottom .lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.cc-bottom .val { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.cc-logo {
  width: 50px; height: 32px;
  background: linear-gradient(135deg, #f97316, #ef4444);
  border-radius: 6px;
  position: relative;
}
.cc-logo::before, .cc-logo::after {
  content: ''; position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
}
.cc-logo::before { left: 8px; background: rgba(255,255,255,0.25); }
.cc-logo::after { right: 8px; background: rgba(0,0,0,0.2); mix-blend-mode: overlay; }

.cc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
  align-content: start;
}
.cc-form .full { grid-column: 1 / -1; }
.cc-form .field-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-form .field-group input {
  width: 100%;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  box-sizing: border-box;
}
.cc-form .field-group input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.cc-form .field-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
#ccNumInput, #ccExpInput {
  font-family: ui-monospace, 'SF Mono', monospace !important;
  letter-spacing: 0.04em;
}

/* Installments */
.installments {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.installments h4 {
  font-size: 13px; font-weight: 700;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.inst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.inst-pill {
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.inst-pill:hover { border-color: var(--primary); }
.inst-pill.active { border-color: var(--primary); background: var(--primary-50); }
.inst-pill .il-x { font-size: 11px; font-weight: 700; color: var(--text-3); }
.inst-pill .il-amt { font-size: 13px; font-weight: 800; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.inst-pill.active .il-amt { color: var(--primary-700); }
.inst-pill .il-total { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

/* Other payment methods */
.pay-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.pay-info h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 4px; }
.pay-info p { font-size: 12.5px; color: var(--text-2); margin: 0 0 8px; line-height: 1.55; }
.pay-info ul { font-size: 12px; color: var(--text-2); padding-left: 18px; line-height: 1.6; margin: 0; }
.pay-info code {
  background: var(--text);
  color: #fff;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* 3D secure check */
.secure-check {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-2);
  padding: 10px 14px;
  background: rgba(20, 184, 138, 0.08);
  border-radius: 8px;
}
.secure-check svg { color: var(--primary); }
.secure-check b { color: var(--primary-700); }

/* ============= ORDER REVIEW (final step) ============= */
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.review-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.review-block .rb-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.review-block .rb-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.review-block .rb-edit {
  font-size: 11.5px;
  color: var(--primary-700);
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.review-block .rb-edit:hover { text-decoration: underline; }
.review-block .rb-body { font-size: 12.5px; color: var(--text); line-height: 1.6; }
.review-block .rb-body b { font-weight: 700; }

.review-products {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.review-products h4 { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.review-products .rp-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.review-products .rp-row:last-child { border-bottom: none; }
.review-products .rp-img {
  width: 50px; height: 50px;
  border-radius: 8px;
  background: var(--surface-2);
  flex: 0 0 50px;
}
.review-products .rp-info { flex: 1; }
.review-products .rp-name { font-size: 12.5px; font-weight: 600; }
.review-products .rp-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.review-products .rp-qty { font-size: 12px; color: var(--text-2); font-weight: 600; }
.review-products .rp-price { font-size: 13px; font-weight: 800; color: var(--primary-700); font-variant-numeric: tabular-nums; }

.consents {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.consent-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; color: var(--text-2);
  cursor: pointer;
  line-height: 1.5;
}
.consent-cb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 2px 0 0;
  border: 1.5px solid #94a3b8;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s, border-color .15s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.consent-cb:checked {
  background-color: #14b88a;
  border-color: #14b88a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.consent-cb:focus-visible {
  outline: 2px solid #14b88a;
  outline-offset: 2px;
}
.consent-row a { color: #1d4ed8; font-weight: 600; }
.consent-row a:hover { text-decoration: underline; }
/* form içinde consent-row kullanıldığında field-group label'ın display:block'unu override et */
.field-group label.consent-row,
.addr-form .field-group label.consent-row {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: 0;
  cursor: pointer;
}

/* ============= NAV BUTTONS ============= */
.step-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
}
.btn-back {
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  color: var(--text-2);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all .15s;
}
.btn-back:hover { border-color: var(--primary); color: var(--primary-700); }
.btn-next {
  background: linear-gradient(180deg, var(--primary-grad-start) 0%, var(--primary) 100%);
  color: #fff;
  border: none;
  padding: 12px 26px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition: all .15s;
}
.btn-next:hover { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%); }

/* ============= MODAL OVERLAY ============= */
/* auth.css modal-scrim stilleri .auth-page altında scope'lu; checkout sayfası için burada tekrar tanımlanır */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: left;
}
.modal-scrim > .modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 440px;
  height: auto;
  min-height: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  position: relative;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  border: none;
  margin: 0;
  float: none;
  align-self: center;
}

/* ============= 3D SECURE MODAL ============= */
.modal-3d {
  max-width: 460px;
  padding: 0;
}
.m3d-head {
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #fff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.m3d-head svg { color: #14b88a; }
.m3d-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.m3d-head .sub { font-size: 11px; opacity: 0.7; margin-top: 1px; }
.m3d-body { padding: 22px; }
.m3d-body p { font-size: 13px; color: var(--text-2); margin: 0 0 14px; line-height: 1.55; }
.m3d-body p b { color: var(--text); }
.m3d-otp {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0;
}
.m3d-otp input {
  width: 48px; height: 56px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.m3d-otp input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.m3d-timer {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.m3d-timer b { color: var(--accent-red); font-variant-numeric: tabular-nums; }
.m3d-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 22px 22px; }

/* ============= ORDER COMPLETE ============= */
.complete-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.complete-main {
  flex: 1;
  max-width: none;       /* Faz 3.3: container fluid — tam genişlik */
  margin: 0 auto;
  padding: 40px 32px 60px;
  width: 100%;
  box-sizing: border-box;
}
/* Faz 3.3: complete-main içindeki ana blokları yine ortalı tutmak için iç wrapper */
.complete-main > .complete-hero,
.complete-main > .order-info-card,
.complete-main > .tracking,
.complete-main > .next-grid,
.complete-main > .complete-actions {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
.complete-hero {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.complete-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, var(--primary-50) 0%, transparent 60%);
  pointer-events: none;
}
.complete-hero > * { position: relative; }
.complete-check {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  position: relative;
  animation: popBig .6s cubic-bezier(.2,.8,.2,1);
}
.complete-check::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  opacity: 0.25;
  animation: ringExpand 1.6s ease-out infinite;
}
@keyframes popBig {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ringExpand {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}
.complete-hero h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.complete-hero p {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 24px;
  line-height: 1.6;
}
.complete-no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.complete-no .num {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-700);
  letter-spacing: 0.04em;
}
.complete-no button {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.complete-no button:hover { color: var(--primary-700); border-color: var(--primary); }

.complete-meta {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  flex-wrap: wrap;
}
.complete-meta b { color: var(--text); }

/* Tracking timeline */
.tracking {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 22px;
}
.tracking h3 { font-size: 15px; font-weight: 700; margin: 0 0 18px; }
.tl {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 28px;
}
.tl::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  height: 3px;
  background: var(--surface-2);
  border-radius: 999px;
}
.tl::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  height: 3px;
  background: var(--primary);
  border-radius: 999px;
  width: calc((100% - 32px) * var(--tl-p, 0));
}
.tl-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 1;
}
.tl-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--surface-2);
  display: grid; place-items: center;
  color: var(--text-3);
  margin-bottom: 8px;
}
.tl-step.done .tl-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.tl-step.active .tl-dot {
  background: #fff;
  border-color: var(--primary);
  color: var(--primary-700);
  box-shadow: 0 0 0 4px var(--primary-50);
}
.tl-label { font-size: 11.5px; font-weight: 700; text-align: center; color: var(--text-3); }
.tl-step.done .tl-label, .tl-step.active .tl-label { color: var(--text); }
.tl-step.active .tl-label { color: var(--primary-700); }
.tl-time { font-size: 10.5px; color: var(--text-3); margin-top: 2px; text-align: center; }

.complete-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.complete-actions .btn {
  width: auto;
  padding: 12px 24px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1080px) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .cross-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  /* === Layout padding === */
  .cart-main, .checkout-main { padding: 20px 16px 40px; margin: 0 auto; }

  /* === Step bar (tl) === */
  .tl { gap: 0; }
  .tl::before, .tl::after { display: none; }
  .tl-dot { width: 28px; height: 28px; }
  .tl-label { font-size: 10px; }

  /* === Legacy .steps classes === */
  .steps { padding: 14px 8px 12px; }
  .step-item:not(:last-child)::after { top: 11px; left: calc(50% + 11px); width: calc(100% - 22px); }
  .step-circle { width: 22px; height: 22px; font-size: 10px; }
  .step-label { font-size: 10px; }

  /* === Cart bar & row === */
  .cart-bar { padding: 10px 14px; font-size: 12px; }
  .cart-row {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 10px;
    padding: 14px;
  }
  .cart-img { width: 60px; height: 60px; grid-row: 1; }
  .cart-info { grid-column: 2; grid-row: 1; }
  .cart-qty { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .cart-price { grid-column: 1 / -1; text-align: left; }
  .cart-price .cp-now { font-size: 15px; }
  .cart-remove { position: absolute; top: 12px; right: 12px; }

  /* === Cross sell === */
  .cross-sell { padding: 14px; }
  .cross-list { grid-template-columns: repeat(2, 1fr); }

  /* === Summary === */
  .summary { padding: 16px; }

  /* === Checkout step cards === */
  .step-card { padding: 16px 14px; margin-bottom: 12px; }
  .step-card-head { margin-bottom: 12px; padding-bottom: 10px; }
  .step-card-head h2 { font-size: 15px; }
  .step-card-head .sub { display: none; }

  /* === Guest auth cards — inline style override === */
  .guest-cards { grid-template-columns: 1fr !important; }
  .guest-card { padding: 16px 14px; }
  .guest-card .ic { width: 40px; height: 40px; }

  /* === Address === */
  .addr-saved-list { grid-template-columns: 1fr; }
  .addr-form { grid-template-columns: 1fr; }

  /* === Payment tabs === */
  .pay-tabs { grid-template-columns: repeat(2, 1fr); }
  .pay-tab { padding: 10px 8px; }
  .pay-tab .pt-label { font-size: 10.5px; }

  /* === Credit card === */
  .cc-grid { grid-template-columns: 1fr; }
  .cc-visual { padding: 18px; }
  .cc-num { font-size: 16px; }

  /* === Installments === */
  .inst-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

  /* === Review step === */
  .review-grid { grid-template-columns: 1fr; }

  /* === Step nav — full-width stacked buttons === */
  .step-nav { flex-direction: column-reverse; gap: 8px; }
  .btn-next, .btn-back { width: 100%; justify-content: center; }

  /* === Complete page === */
  .complete-main { padding: 20px 16px 40px; }
  .complete-hero { padding: 28px 18px; }
  .complete-hero h1 { font-size: 22px; }
  .complete-no { flex-wrap: wrap; justify-content: center; }
  .tracking { padding: 18px 16px; }
  .next-grid { grid-template-columns: 1fr; gap: 8px; }
  .order-info-card { grid-template-columns: repeat(2, 1fr); padding: 16px; gap: 12px; }
}

/* === Çok küçük ekranlar (≤ 400px) === */
@media (max-width: 400px) {
  .cart-main, .checkout-main { padding: 14px 12px 32px; }
.tl-label { font-size: 9px; }
  .tl-dot { width: 24px; height: 24px; }
  .cross-list { grid-template-columns: 1fr; }
  .cc-num { font-size: 14px; letter-spacing: 0.06em; }
  .complete-hero h1 { font-size: 20px; }
  .order-info-card { grid-template-columns: 1fr; }
}

/* ============= SİPARİŞ TAMAMLANDI SAYFASI ============= */
.complete-confetti {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.confetti-piece {
  position: absolute;
  width: 10px; height: 14px;
  top: -20px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.next-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: border-color .15s, transform .15s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.next-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.next-card .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--primary-50);
  color: var(--primary-700);
  display: grid; place-items: center;
  flex: 0 0 36px;
}
.next-card .nc-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.next-card .nc-sub  { font-size: 11.5px; color: var(--text-3); line-height: 1.45; }

.order-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.oi-item .oi-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.oi-item .oi-val { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.45; }
.oi-item .oi-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* ============= STM (Sipariş Tamamlandı Modern) ============= */
.stm-main {
  max-width: 720px;
  margin: 20px auto 32px;
  padding: 24px 24px 32px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hero */
.stm-hero {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 28px 32px;
  position: relative;
  overflow: hidden;
}
.stm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, var(--primary-50) 0%, transparent 65%);
  pointer-events: none;
}
.stm-hero > * { position: relative; }
.stm-hero h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--text);
}
.stm-hero-p {
  font-size: 13.5px;
  color: var(--text-2);
  margin: 0 0 18px;
  line-height: 1.6;
}
.stm-email-note {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}
.stm-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.stm-hero-no {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-700);
  letter-spacing: 0.04em;
}
.stm-sep { color: var(--border); }

/* Aksiyon strip — hero altındaki kart şeridi */
.stm-action-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 6px;
  margin-top: 20px;
}
.stm-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  margin: 3px;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.stm-action-tile:hover {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary-700);
  transform: translateY(-1px);
}
.stm-action-tile--primary .stm-tile-ic { background: var(--primary) !important; color: #fff !important; }
.stm-action-tile--primary { color: var(--primary-700); border-color: var(--primary); }
.stm-action-tile--primary:hover { background: var(--primary-50); }
.stm-tile-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-2);
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
.stm-action-tile:hover .stm-tile-ic {
  background: var(--primary-50);
  color: var(--primary-700);
}
.stm-tile-label { line-height: 1.2; text-align: center; }

/* Havale Banka Bilgisi */
.stm-bank {
  background: #f0fdf9;
  border: 1.5px solid #a7f3d0;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.stm-bank-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 14px;
}
.stm-bank-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.stm-bank-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  margin-bottom: 3px;
}
.stm-bank-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1f2b;
}
.stm-bank-sub { font-size: 11.5px; color: #64748b; margin-top: 1px; }
.stm-iban { margin-bottom: 10px; }
.stm-iban-val {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
  letter-spacing: .03em;
  word-break: break-all;
}
.stm-bank-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: #047857;
  background: #d1fae5;
  border-radius: 7px;
  padding: 9px 12px;
  line-height: 1.5;
}

/* Ürünler Kartı */
.stm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.stm-card-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 3px 8px;
}
.stm-prod-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.stm-prod-row:last-of-type { border-bottom: none; }
.stm-prod-img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--surface-2) center/cover no-repeat;
  flex: 0 0 52px;
}
.stm-prod-info { flex: 1; min-width: 0; }
.stm-prod-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stm-prod-qty { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.stm-prod-total {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* Özet satırları */
.stm-summary {
  padding: 0 18px 14px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.stm-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--surface-2);
}
.stm-sum-row:last-child { border-bottom: none; }
.stm-free { color: #16a34a; font-weight: 700; }
.stm-discount { color: #16a34a; }
.stm-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-top: 4px;
  border-top: 2px solid var(--border);
}

/* Teslimat + Kargo meta blok */
.stm-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stm-meta-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.stm-meta-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.stm-meta-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
}
.stm-phone { color: var(--text-2); }
.stm-track-link {
  color: var(--primary-700);
  font-weight: 600;
  text-decoration: none;
}
.stm-track-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 600px) {
  .stm-main { padding: 24px 14px 36px; margin: 16px auto 32px; gap: 12px; }
  .stm-hero { padding: 28px 18px 22px; }
  .stm-hero h1 { font-size: 20px; }
  .stm-hero-meta { font-size: 12px; padding: 8px 14px; }
  .stm-bank-row { grid-template-columns: 1fr; }
  .stm-meta { grid-template-columns: 1fr; }
  .stm-action-strip { grid-template-columns: 1fr; }
}



/* ── styles.css (scoped: .shell) ── */
/* === Hesap Bilgileri Dashboard === */



.shell *{ box-sizing: border-box; }

/* ████████████████████████████████████████████████████████████████
   MP DESIGN SYSTEM — müşteri paneli merkezi bileşen kütüphanesi
   Tüm sayfalar yalnızca aşağıdaki .mp-* bileşenlerinden kompoze edilir.
   Alias kuralları ile eski class isimleri (hero, content, btn, vb.) korunur.
   ████████████████████████████████████████████████████████████████ */

/* === Page wrapper === */
.shell main .mp-content, .shell main .content{
  display: block;
  margin-top: 0;
}
.shell main .mp-content-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 14px;
}

/* === Hero === */
/* (.hero kuralları aşağıda zaten tanımlı; .mp-hero alias olarak grup içinde
   ekleniyor — duplicate edilmiyor.) */

/* === Card === */
.shell .mp-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: transform .15s ease, box-shadow .18s ease;
}
.shell .mp-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}

/* ── Ortak kart hover sistemi — bld-card (bildirimler) ile özdeş ──────────────
   yr-card: yorumlarım  |  sq-card: sorularım  |  favorite-card: favorilerim
   (ef-card + es-card: aşağıda .shell main prefix'li tanımlarda güncellendi)
*/
.shell .yr-card, .shell .sq-card, .shell .favorite-card{
  transition: transform .15s ease, box-shadow .18s ease;
}
.shell .yr-card:hover, .shell .sq-card:hover, .shell .favorite-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}
.shell .mp-card-head{
  padding: 13px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.shell .mp-card-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.shell .mp-card-meta{
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.shell .mp-card-body{
  padding: 16px;
  display: block;
}
.shell .mp-card-body--row{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.shell .mp-card-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* === Block (detay sayfa kutusu — kart-altı içerik) === */
.shell .mp-block{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.shell .mp-block-title{
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Detail grid (1fr + 340px sticky right column) === */
.shell .mp-detail-grid{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}
@media (max-width: 900px) {
  .shell .mp-detail-grid{ grid-template-columns: 1fr; }
}

/* === Stat cards (3'lü grid metrik) === */
.shell .mp-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 600px) { .shell .mp-stats{ grid-template-columns: 1fr; } }
.shell .mp-stat{
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
  transition: border-color .15s, box-shadow .2s, transform .1s;
}
.shell .mp-stat:hover{
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  transform: translateY(-1px);
}
.shell .mp-stat-num{ font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.shell .mp-stat-label{ font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* === Badge (tek tip; variant'lar) === */
.shell .mp-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.shell .mp-badge--primary{ background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-100); }
.shell .mp-badge--success{ background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.shell .mp-badge--warning{ background: #fef3c7; color: #92400e; border-color: #fde68a; }
.shell .mp-badge--danger{ background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.shell .mp-badge--info{ background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.shell .mp-badge--neutral{ background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.shell .mp-badge--solid{ background: var(--primary); color: #fff; border-color: var(--primary); }

/* === Empty state === */
.shell .mp-empty{
  text-align: center;
  padding: 56px 20px;
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
.shell .mp-empty-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.shell .mp-empty-icon svg{ width: 36px; height: 36px; }
.shell .mp-empty-title{ font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.shell .mp-empty-text{ font-size: 13px; color: var(--text-3); margin: 0 0 18px; }

/* === Filter bar === */
.shell .mp-filter-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
}
.shell .mp-filter-chip{
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.shell .mp-filter-chip:hover, .shell .mp-filter-chip.is-active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.shell .mp-search{
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 13px;
  background: var(--surface);
}
.shell .mp-search:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* === Info pair (etiket + değer çiftleri) === */
.shell .mp-info-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .shell .mp-info-grid{ grid-template-columns: 1fr; } }
.shell .mp-info-item .mp-info-label{
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  margin-bottom: 4px;
}
.shell .mp-info-item .mp-info-value{
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
}

/* === Timeline (sipariş geçmişi vb.) === */
.shell .mp-timeline{
  position: relative;
  padding-left: 28px;
}
.shell .mp-timeline::before{
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}
.shell .mp-timeline-item{ position: relative; margin-bottom: 14px; }
.shell .mp-timeline-item:last-child{ margin-bottom: 0; }
.shell .mp-timeline-item::before{
  content: '';
  position: absolute;
  left: -24px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-strong);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--border-strong);
}
.shell .mp-timeline-item.is-done::before{
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}
.shell .mp-timeline-item .mp-timeline-event{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.shell .mp-timeline-item .mp-timeline-time{
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

/* === Section label (yatay çizgili bölüm başlığı) === */
.shell .mp-section-label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 20px 0 12px;
}
.shell .mp-section-label::before, .shell .mp-section-label::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* === Form === */
.shell .mp-form{ display: block; }
.shell .mp-form *{ box-sizing: border-box; }

.shell .mp-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.shell .mp-form-row:last-of-type{ margin-bottom: 0; }
@media (max-width: 560px) { .shell .mp-form-row{ grid-template-columns: 1fr; gap: 12px; } }

.shell .mp-field{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.shell .mp-field--full{ grid-column: 1 / -1; }
.shell .mp-field label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}
.shell .mp-required{ color: var(--danger); font-weight: 700; }
.shell .mp-optional{
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: lowercase;
}
.shell .mp-form input[type="text"], .shell .mp-form input[type="tel"], .shell .mp-form input[type="email"], .shell .mp-form input[type="password"], .shell .mp-form input[type="number"], .shell .mp-form input[type="search"], .shell .mp-form select, .shell .mp-form textarea{
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.shell .mp-form input:hover, .shell .mp-form select:hover, .shell .mp-form textarea:hover{
  border-color: var(--border-strong);
}
.shell .mp-form input:focus, .shell .mp-form select:focus, .shell .mp-form textarea:focus{
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.shell .mp-form textarea{
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}
.shell .mp-form select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* === Segmented control (radio tab grup) === */
.shell .mp-segmented{
  display: grid;
  grid-template-columns: repeat(var(--mp-seg-cols, 3), 1fr);
  gap: 6px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.shell .mp-segmented-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 7px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  user-select: none;
}
.shell .mp-segmented-item input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.shell .mp-segmented-item svg{ width: 16px; height: 16px; flex-shrink: 0; opacity: .75; }
.shell .mp-segmented-item:hover{ color: var(--text); background: var(--surface); }
.shell .mp-segmented-item.is-active, .shell .mp-segmented-item:has(input:checked){
  background: var(--surface);
  color: var(--primary-700);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 0 0 1px var(--primary);
}
.shell .mp-segmented-item.is-active svg, .shell .mp-segmented-item:has(input:checked) svg{ opacity: 1; }

/* === Toggle card (checkbox kart — varsayılan adres gibi) === */
.shell .mp-toggle-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.shell .mp-toggle-card:hover{ border-color: var(--primary); background: var(--primary-50); }
.shell .mp-toggle-card input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.shell .mp-toggle-card-icon{
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: background .15s, color .15s, border-color .15s;
}
.shell .mp-toggle-card-icon svg{ width: 18px; height: 18px; }
.shell .mp-toggle-card-text{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.shell .mp-toggle-card-t1{ font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.shell .mp-toggle-card-t2{ font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.shell .mp-toggle-card-check{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.shell .mp-toggle-card.is-checked, .shell .mp-toggle-card:has(input:checked){
  border-color: var(--primary);
  background: var(--primary-50);
}
.shell .mp-toggle-card.is-checked .mp-toggle-card-icon, .shell .mp-toggle-card:has(input:checked) .mp-toggle-card-icon{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.shell .mp-toggle-card.is-checked .mp-toggle-card-t1, .shell .mp-toggle-card:has(input:checked) .mp-toggle-card-t1{ color: var(--primary-700); }
.shell .mp-toggle-card.is-checked .mp-toggle-card-check, .shell .mp-toggle-card:has(input:checked) .mp-toggle-card-check{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* === Page header (h1 + sağda CTA) === */
.shell .mp-page-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.shell .mp-page-header h1, .shell .mp-page-header .mp-page-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

/* === MP DESIGN SYSTEM SONU === */


.shell{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

.shell a{ color: inherit; text-decoration: none; }
.shell button{ font-family: inherit; cursor: pointer; border: none; background: none; }
.shell input, .shell select, .shell textarea{ font-family: inherit; font-size: 14px; }

/* ================================================================
   HARICI CSS EZMESİ ÖNLEYİCİ RESET — .shell / dashboard scope
   ================================================================ */
.shell input[type="text"], .shell input[type="email"], .shell input[type="password"], .shell input[type="number"], .shell input[type="tel"], .shell input[type="search"], .shell select, .shell textarea{
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-family: var(--font) !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
.shell input[type="text"]:focus, .shell input[type="email"]:focus, .shell input[type="password"]:focus, .shell select:focus, .shell textarea:focus{
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}
.shell input[type="checkbox"], .shell input[type="radio"]{
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* ================================================================ */

/* === Top bar === */
.shell .topbar{
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.shell .topbar-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.shell .brand-mark{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-grad-start), var(--primary-grad-end));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.shell .topbar-spacer{ flex: 1; }
.shell .topbar-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}
.shell .icon-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  position: relative;
  transition: background .15s, color .15s;
}
.shell .icon-btn:hover{ background: var(--surface-2); color: var(--text); }
.shell .icon-btn .dot{
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
}
.shell .topbar-avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.shell .menu-toggle{
  display: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

/* Mobil sidebar tetikleyici — sadece ≤768px görünür, sticky */
.shell .account-mobile-menu{
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 16px 0 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.shell .account-mobile-menu:hover, .shell .account-mobile-menu:focus-visible{
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow);
  outline: none;
}
.shell .account-mobile-menu-icon{
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}
.shell .account-mobile-menu-text{
  flex: 1;
  text-align: left;
}
.shell .account-mobile-menu-chev{
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* === Layout shell === */
.shell .account-page-wrap{
  padding: 0;
}
.shell .account-page-wrap .container{ padding: 0; max-width: 1400px; }
.shell{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h));
  /* Border + radius + bg artık eticaret-css.php'nin GLOBAL bloğunda
     (.account-page-wrap .shell). Burada sadece grid layout. */
}

/* === Sidebar === */
.shell .sidebar{
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-radius: 0 0 0 var(--radius-lg);
  padding: 20px 14px 20px;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  align-self: start;
}
.shell .sidebar-section-label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 12px;
  margin-top: 4px;
}
.shell .nav{ display: flex; flex-direction: column; gap: 2px; }
.shell .nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-weight: 500;
  font-size: 13.5px;
  position: relative;
  transition: background .15s, color .15s;
}
.shell .nav-item .nav-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--text-3);
  transition: color .15s;
}
.shell .nav-item .nav-badge{
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
}
.shell .nav-item:hover, .shell .nav-item.active{
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 600;
}
.shell .nav-item:hover .nav-icon, .shell .nav-item.active .nav-icon{ color: var(--primary-700); }
.shell .nav-item:hover::before, .shell .nav-item.active::before{
  content: '';
  position: absolute;
  left: -14px;
  top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.shell .nav-item:hover .nav-badge, .shell .nav-item.active .nav-badge{
  background: var(--primary);
  color: #fff;
}
.shell .nav-item.nav-item-danger{ color: var(--danger); }
.shell .nav-item.nav-item-danger .nav-icon{ color: var(--danger); }
.shell .nav-item.nav-item-danger:hover{
  background: #fef2f2;
  color: var(--accent-red-600);
}
.shell .nav-item.nav-item-danger:hover .nav-icon{ color: var(--accent-red-600); }
.shell .nav-item.nav-item-danger:hover::before{ background: var(--danger); }
.shell .nav-item.nav-item-danger:hover .nav-badge{
  background: var(--danger);
  color: #fff;
}
.shell .nav + .sidebar-section-label{ margin-top: 18px; }

/* === Main === */
.shell .main{
  padding: 24px 28px 60px !important;
  min-width: 0;
}

/* === Breadcrumb (müşteri kabuğu) === */
.shell .account-breadcrumb{
  margin: 0 0 18px;
}
.shell .account-breadcrumb-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  margin: 0;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
.shell .account-breadcrumb-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.shell .account-breadcrumb-item:not(:last-child)::after{
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg);
  opacity: 0.55;
  margin-left: 2px;
  vertical-align: middle;
}
.shell .account-breadcrumb a{
  color: var(--primary-700);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}
.shell .account-breadcrumb a:hover{
  color: var(--primary);
  text-decoration: underline;
}
.shell .account-breadcrumb-current{
  color: var(--text);
  font-weight: 600;
}

/* === Hero / Header banner — kompakt (.hero / .mp-hero alias) === */
.shell .hero, .shell .mp-hero{
  background: linear-gradient(120deg, var(--primary-grad-start) 0%, var(--primary-grad-end) 100%);
  border-radius: var(--radius-xl);
  padding: 18px 24px;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.shell .hero::before, .shell .hero::after, .shell .mp-hero::before, .shell .mp-hero::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.shell .hero::before, .shell .mp-hero::before{ width: 260px; height: 260px; right: -100px; top: -130px; }
.shell .hero::after, .shell .mp-hero::after{ width: 180px; height: 180px; left: -60px; bottom: -100px; background: rgba(255,255,255,0.05); }

.shell .hero-grid, .shell .mp-hero-grid{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Avatar — sadece hesap-bilgileri sayfasında kullanılıyor */
.shell .avatar-wrap{
  position: relative;
  width: 88px; height: 88px;
  border-radius: 18px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.shell .avatar-wrap img{
  width: 100%; height: 100%;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}
.shell .avatar-edit{
  position: absolute;
  right: -6px; bottom: -6px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary-700);
  color: #fff;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  cursor: pointer;
  transition: transform .15s;
}
.shell .avatar-edit:hover{ transform: scale(1.08); }

/* Hero ikon — diğer tüm müşteri sayfalarında avatar yerine kullanılır.
   Sayfaya özgü SVG buraya gelir, data-anim="bounce|pulse|wiggle|spin|float|pop" ile animasyon kazanır.
   Hover trigger'ı .hero üzerinde — kullanıcı kart üzerine geldiğinde animasyon çalışır.
*/
.shell .hero-icon, .shell .mp-hero-icon{
  position: relative;
  width: 96px; height: 96px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  color: #fff;
  /* gölge yok — başlığa karışmasın */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  transition: transform .35s cubic-bezier(.4,1.4,.5,1), background .25s ease;
  cursor: default;
}
.shell .hero:hover .hero-icon, .shell .hero:hover .mp-hero-icon, .shell .mp-hero:hover .mp-hero-icon, .shell .mp-hero:hover .hero-icon{
  transform: translateY(-3px) scale(1.04);
  background: rgba(255, 255, 255, 0.28);
}
.shell .hero-icon svg, .shell .mp-hero-icon svg{
  width: 54px; height: 54px;
  transition: transform .4s ease;
}

/* Sürekli soft animasyonlar — sayfa açılır açılmaz fark edilir */
.shell .hero-icon[data-anim="float"] svg, .shell .mp-hero-icon[data-anim="float"] svg{ animation: hi-float 3s ease-in-out infinite; }
@keyframes hi-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.shell .hero-icon[data-anim="bounce"] svg, .shell .mp-hero-icon[data-anim="bounce"] svg{ animation: hi-bounce 1.8s ease-in-out infinite; }
@keyframes hi-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.04); }
}

.shell .hero-icon[data-anim="spin"] svg, .shell .mp-hero-icon[data-anim="spin"] svg{ animation: hi-spin 8s linear infinite; }
@keyframes hi-spin {
  to { transform: rotate(360deg); }
}

.shell .hero-icon[data-anim="pulse"]::before, .shell .mp-hero-icon[data-anim="pulse"]::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,0.45);
  animation: hi-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes hi-pulse {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* Hover trigger'lı animasyonlar — .hero üzerine gelince çalışır, ikona dokunmak gerekmez */
.shell .hero:hover .hero-icon[data-anim="wiggle"] svg, .shell .hero:hover .mp-hero-icon[data-anim="wiggle"] svg, .shell .mp-hero:hover .mp-hero-icon[data-anim="wiggle"] svg, .shell .mp-hero:hover .hero-icon[data-anim="wiggle"] svg{ animation: hi-wiggle .55s ease-in-out; }
@keyframes hi-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-10deg) scale(1.08); }
  75%      { transform: rotate(10deg)  scale(1.08); }
}

.shell .hero:hover .hero-icon[data-anim="pop"] svg, .shell .hero:hover .mp-hero-icon[data-anim="pop"] svg, .shell .mp-hero:hover .mp-hero-icon[data-anim="pop"] svg, .shell .mp-hero:hover .hero-icon[data-anim="pop"] svg{ animation: hi-pop .4s cubic-bezier(.4,1.6,.5,1) forwards; }
@keyframes hi-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25) rotate(-6deg); }
  100% { transform: scale(1.12); }
}

.shell .hero-info h1, .shell .mp-hero-info h1{
  margin: 0 0 3px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
}
.shell .hero-info .subtitle, .shell .mp-hero-info .mp-hero-sub, .shell .mp-hero-info .subtitle{
  margin: 0 0 10px;
  font-size: 15px;
  color: rgba(255,255,255,0.85) !important;
}
.shell .meta-row, .shell .mp-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
}
.shell .meta-item, .shell .mp-meta-item{
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.95;
}
.shell .meta-item svg, .shell .mp-meta-item svg{ opacity: 0.85; }

@media (max-width: 600px) {
  .shell .hero{ padding: 16px 18px; border-radius: var(--radius-lg); }
  .shell .hero-grid, .shell .mp-hero-grid{ gap: 16px; grid-template-columns: auto 1fr; }
  .shell .hero-icon, .shell .mp-hero-icon{ width: 76px; height: 76px; border-radius: 16px; }
  .shell .hero-icon svg, .shell .mp-hero-icon svg{ width: 42px; height: 42px; }
  .shell .hero-info h1, .shell .mp-hero-info h1{ font-size: 19px; }
}

.shell .hero-side{
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.shell .user-name{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.shell .tier-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.32);
  padding: 5px 13px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #fff !important;
}
.shell .tier-badge svg{ opacity: 0.9; }
.shell .tier-badge.premium{
  background: linear-gradient(135deg, rgba(251,191,36,0.85), rgba(245,158,11,0.85));
  border-color: rgba(255,255,255,0.3);
  color: #fff !important;
}
.shell .tier-badge--clickable{
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.shell .tier-badge--clickable:hover, .shell .tier-badge--clickable:focus-visible{
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.5);
  outline: none;
  transform: translateY(-1px);
}
.shell .tier-badge-chev{ opacity: 0.7; }

/* === Müşteri Grubu Detay Modal === */
.shell .grup-modal{ max-width: 560px; }
.shell .grup-modal-header{
  background: linear-gradient(135deg, var(--primary-grad-start), var(--primary-grad-end));
  color: #fff;
}
.shell .grup-modal-header .modal-title-2, .shell .grup-modal-header .modal-sub{ color: #fff; }
.shell .grup-modal-header .modal-sub{ opacity: 0.85; }
.shell .grup-modal-icon{
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.shell .grup-modal-header .modal-close{
  color: rgba(255,255,255,0.9);
}
.shell .grup-modal-header .modal-close:hover{
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.shell .grup-name-pill{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  margin: 0 auto 18px;
}
.shell .grup-cards{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.shell .grup-card{
  flex: 1 1 220px;
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
}
.shell .grup-card[hidden]{ display: none; }
.shell .grup-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shell .grup-card-icon{
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.shell .grup-card-value-wrap{ text-align: right; }
.shell .grup-card-value{
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.shell .grup-card-label{
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}
.shell .grup-card-detail{
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
  opacity: 0.75;
}
.shell .grup-card-foot{
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  opacity: 0.85;
}

.shell .grup-card--discount{
  background: var(--primary-50);
  border-color: var(--primary-100);
  border-left-color: var(--primary-600);
  color: var(--primary-700);
}
.shell .grup-card--discount .grup-card-icon{
  background: rgba(15, 163, 119, 0.18);
  color: var(--primary-600);
}
.shell .grup-card--discount .grup-card-value{ color: var(--primary-600); }

.shell .grup-card--time-ok{
  background: var(--primary-50);
  border-color: var(--primary-100);
  border-left-color: var(--primary-600);
  color: var(--primary-700);
}
.shell .grup-card--time-ok .grup-card-icon{
  background: rgba(15, 163, 119, 0.18);
  color: var(--primary-600);
}
.shell .grup-card--time-ok .grup-card-value{ color: var(--primary-600); }

.shell .grup-card--time-warn{
  background: var(--warn-bg, #fff7ea);
  border-color: rgba(245, 158, 11, 0.25);
  border-left-color: var(--warn);
  color: #92400e;
}
.shell .grup-card--time-warn .grup-card-icon{
  background: rgba(245, 158, 11, 0.2);
  color: var(--warn);
}
.shell .grup-card--time-warn .grup-card-value{ color: var(--warn); }

.shell .grup-card--time-danger{
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  border-left-color: var(--danger);
  color: #991b1b;
}
.shell .grup-card--time-danger .grup-card-icon{
  background: rgba(239, 68, 68, 0.18);
  color: var(--danger);
}
.shell .grup-card--time-danger .grup-card-value{ color: var(--danger); }

.shell .grup-desc{
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 16px;
}
.shell .grup-desc[hidden]{ display: none; }
.shell .grup-desc-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.shell .grup-desc-title svg{ color: var(--primary); }
.shell .grup-desc-body{
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}
.shell .grup-empty{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-3);
}
.shell .grup-empty[hidden]{ display: none; }
.shell .grup-empty svg{ color: var(--info); flex-shrink: 0; }

/* Pill-Radio: pill stilinde radio button group (her form'da kullanılabilir) */
.shell .pill-radio-group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shell .pill-radio{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.shell .pill-radio input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.shell .pill-radio svg{ width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
.shell .pill-radio:hover{
  border-color: var(--primary);
  color: var(--primary-700);
  transform: translateY(-1px);
}
.shell .pill-radio:has(input[type="radio"]:checked){
  background: var(--primary-50);
  border-color: var(--primary);
  color: var(--primary-700);
  font-weight: 700;
}
.shell .pill-radio:has(input[type="radio"]:checked) svg{ opacity: 1; }

/* ================================================================
   ADRES MODAL — temiz, kompakt, kendi namespace'i (adr-*)
   .shell veya genel .form-grid kurallarına bağımlı değil.
   ================================================================ */
.shell .adr-form{ display: block; }
.shell .adr-form *{ box-sizing: border-box; }

/* Üst alert (hata/info) */
.shell .adr-alert{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
.shell .adr-alert svg{ flex-shrink: 0; color: #dc2626; }

/* Satır = 2 kolon, mobilde 1 kolon */
.shell .adr-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.shell .adr-row:last-of-type{ margin-bottom: 0; }
@media (max-width: 560px) {
  .shell .adr-row{ grid-template-columns: 1fr; gap: 12px; }
}

/* Tek alan */
.shell .adr-field{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.shell .adr-field--full{ grid-column: 1 / -1; }

.shell .adr-field label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}
.shell .adr-req{ color: var(--danger); font-weight: 700; }
.shell .adr-opt{
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Form input/select/textarea — TEK TİP, modal-scoped */
.shell .adr-form input[type="text"], .shell .adr-form input[type="tel"], .shell .adr-form input[type="email"], .shell .adr-form input[type="number"], .shell .adr-form select, .shell .adr-form textarea{
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.shell .adr-form input:hover, .shell .adr-form select:hover, .shell .adr-form textarea:hover{
  border-color: var(--border-strong);
}
.shell .adr-form input:focus, .shell .adr-form select:focus, .shell .adr-form textarea:focus{
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.shell .adr-form textarea{
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
  line-height: 1.5;
}
.shell .adr-form select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* Bölüm başlığı: yatay çizgi + küçük etiket */
.shell .adr-section-label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 20px 0 12px;
}
.shell .adr-section-label::before, .shell .adr-section-label::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Adres tipi sekmesi — 3 eşit hücre */
.shell .adr-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.shell .adr-tab{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 7px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.shell .adr-tab input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0;
}
.shell .adr-tab svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .75;
}
.shell .adr-tab:hover{ color: var(--text); background: var(--surface); }
.shell .adr-tab.is-active, .shell .adr-tab:has(input:checked){
  background: var(--surface);
  color: var(--primary-700);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 0 0 1px var(--primary);
}
.shell .adr-tab.is-active svg, .shell .adr-tab:has(input:checked) svg{ opacity: 1; }

/* Varsayılan toggle — clean checkbox satırı */
.shell .adr-default{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-top: 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.shell .adr-default:hover{
  border-color: var(--primary);
  background: var(--primary-50);
}
.shell .adr-default input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0;
}
.shell .adr-default-icon{
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: background .15s, color .15s, border-color .15s;
}
.shell .adr-default-icon svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.shell .adr-default-text{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.shell .adr-default-t1{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.shell .adr-default-t2{
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.3;
}
.shell .adr-default-check{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.shell .adr-default.is-checked, .shell .adr-default:has(input:checked){
  border-color: var(--primary);
  background: var(--primary-50);
}
.shell .adr-default.is-checked .adr-default-icon, .shell .adr-default:has(input:checked) .adr-default-icon{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.shell .adr-default.is-checked .adr-default-t1, .shell .adr-default:has(input:checked) .adr-default-t1{
  color: var(--primary-700);
}
.shell .adr-default.is-checked .adr-default-check, .shell .adr-default:has(input:checked) .adr-default-check{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.shell .field-optional{
  font-weight: 500;
  color: var(--text-3);
  font-size: 11.5px;
  margin-left: 4px;
}

.shell .cb-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500 !important;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px !important;
  color: var(--text-2) !important;
}
.shell .cb-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Modal'da form-grid responsive */
@media (max-width: 600px) {
  .shell .modal .form-grid{ grid-template-columns: 1fr; }
  .shell .modal .form-grid .field.full{ grid-column: 1; }
}
.shell .rating{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: 0.95;
}
.shell .stars{ display: flex; gap: 1px; color: #ffd166; }

/* === Profile completion === */
.shell .profile-progress{
  margin-top: 18px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.shell .progress-ring{
  position: relative;
  width: 44px; height: 44px;
  flex: 0 0 44px;
}
.shell .progress-ring svg{ transform: rotate(-90deg); }
.shell .progress-ring .pct{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-700);
}
.shell .progress-text{ flex: 1; min-width: 0; }
.shell .progress-text .t1{ font-weight: 600; font-size: 13.5px; }
.shell .progress-text .t2{ font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.shell .progress-text .missing-chip{
  display: inline-block;
  margin-right: 6px;
  margin-top: 6px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: #92400e;
  border: 1px solid #fbd9a3;
}

/* === Profile-progress slider mode === */
.shell .profile-progress.profile-progress-slider{
  padding: 0;
  position: relative;
  overflow: hidden;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  touch-action: pan-y;
}
.shell .profile-progress.profile-progress-slider.pp-dragging{ cursor: grabbing; }
.shell .profile-progress.profile-progress-slider.pp-dragging .pp-track{
  transition: none;
}
.shell .pp-track{
  display: flex;
  width: 100%;
  transition: transform .45s cubic-bezier(.4,.0,.2,1);
  will-change: transform;
}
.shell .pp-slide{
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 26px;
}
.shell .pp-slide .progress-ring, .shell .pp-slide .progress-text{
  /* hiçbir override yok — mevcut .progress-ring ve .progress-text kuralları geçerli */
}
.shell .pp-icon{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-50);
  color: var(--primary-700);
}
.shell .pp-icon svg{ width: 22px; height: 22px; }
.shell .pp-slide-bildirim .pp-icon{ background: #e0f2fe; color: #0369a1; }
.shell .pp-slide-destek .pp-icon{ background: #d1fae5; color: #065f46; }
.shell .pp-slide-kampanya .pp-icon{
  background: linear-gradient(135deg, var(--primary-grad-start), var(--primary-grad-end));
  color: #fff;
}
.shell .pp-body{ flex: 1; min-width: 0; }
.shell .pp-title{ font-weight: 600; font-size: 13.5px; color: var(--text); }
.shell .pp-sub{ font-size: 12.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.shell .pp-action{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-700);
  transition: color .15s, gap .15s;
}
.shell .pp-action:hover{ color: var(--primary-600); gap: 7px; }
.shell .pp-action svg{ width: 14px; height: 14px; }
.shell .pp-badge-pill{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
  vertical-align: 1px;
}

/* Dots */
.shell .pp-dots{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.shell .pp-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .2s ease, width .25s ease;
  border: none;
  padding: 0;
}
.shell .pp-dot:hover{ background: var(--text-3); }
.shell .pp-dot.active{
  background: var(--primary);
  width: 18px;
}

@media (max-width: 540px) {
  .shell .pp-slide{ padding: 12px 14px 24px; gap: 10px; }
  .shell .pp-icon{ width: 40px; height: 40px; flex-basis: 40px; }
  .shell .pp-icon svg{ width: 20px; height: 20px; }
}

/* === Card === */
.shell .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: 18px;
  overflow: hidden;
}

/* === Tabs (.tabs / .mp-tabs alias) === */
.shell .mp-tabs-header{
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  padding-right: 16px;
}
.shell .mp-tabs-header .mp-tabs{
  border-bottom: none;
  flex: 1;
  min-width: 0;
}
.shell .tabs, .shell .mp-tabs{
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shell .tabs::-webkit-scrollbar, .shell .mp-tabs::-webkit-scrollbar{ display: none; }
.shell .tab, .shell .mp-tab{
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.shell .tab:hover, .shell .mp-tab:hover{ color: var(--text); }
.shell .tab.active, .shell .mp-tab.active{
  color: var(--primary-700);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.shell .tab svg, .shell .mp-tab svg{ opacity: 0.9; }

/* Tab içinde sayaç badge'i (örn: 12 kullanılabilir) */
.shell .mp-tab-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
}
.shell .mp-tab.active .mp-tab-count, .shell .tab.active .mp-tab-count{
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary-100);
}

/* === Tab panels === */
.shell .tab-panel, .shell .mp-tab-panel{ display: none; padding: 28px 32px 32px; }
.shell .tab-panel.active, .shell .mp-tab-panel.active{ display: block; }
@media (max-width: 600px) {
  .shell .tab-panel, .shell .mp-tab-panel{ padding: 20px 16px 24px; }
}

.shell .section-title{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.shell .section-sub{
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 22px;
}

/* === Form === */
.shell .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.shell .field{ display: flex; flex-direction: column; gap: 6px; }
.shell .field.full{ grid-column: 1 / -1; }
.shell .field label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.shell .field label .req{ color: var(--danger); }
.shell .field label svg{ color: var(--text-3); }

.shell .input, .shell .select, .shell .textarea{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text);
  transition: background .15s, border-color .15s, box-shadow .15s;
  outline: none;
}
.shell .input:hover, .shell .select:hover, .shell .textarea:hover{ border-color: var(--border-strong); }
.shell .input:focus, .shell .select:focus, .shell .textarea:focus{
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.shell .textarea{ min-height: 100px; resize: vertical; }
.shell .select{ appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

.shell .input-with-action{
  display: flex;
  gap: 8px;
}
.shell .input-with-action .input{ flex: 1; min-width: 0; }
.shell .action-btn{
  background: var(--warn);
  color: #fff;
  border-radius: var(--radius);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: background .15s, transform .05s;
}
.shell .action-btn:hover{ background: #d97706; }
.shell .action-btn:active{ transform: scale(0.97); }
.shell .action-btn.verified{ background: var(--primary); }
.shell .action-btn.verified:hover{ background: var(--primary-600); }
.shell .pwd-toggle{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
  cursor: pointer;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.shell .pwd-toggle:hover{ color: var(--text); background: var(--surface); }

.shell .field-hint{
  font-size: 12px;
  color: #92400e;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
}
.shell .field-hint.success, .shell .field-hint-success{ color: var(--primary-700); }
.shell .field-hint-info{ color: var(--info); }
.shell .field-hint svg{ flex: 0 0 14px; margin-top: 1px; }
.shell .hidden{ display: none !important; }

/* Kurumsal alanlar — yumuşak aç/kapat animasyonu */
.shell .corporate-only{
  overflow: hidden;
  max-height: 240px;
  opacity: 1;
  transition: max-height .28s ease, opacity .22s ease, margin .22s ease, padding .22s ease;
}
.shell .corporate-only.hidden{
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}


.shell .segmented{
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}
.shell .seg-opt{
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 7px;
  transition: background .15s, color .15s;
}
.shell .seg-opt.active{
  background: var(--surface);
  color: var(--primary-700);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Form actions */
.shell .form-actions{
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
/* ================================================================
   UNIFIED BUTTON SYSTEM — global .btn
   Variants: primary, secondary, ghost, outline, danger, danger-soft, warning
   Sizes:    .btn-sm, default, .btn-lg, .btn-icon
   Modifiers: .btn-block, .btn-pill
   .es-btn / .ef-btn / .es-action-btn aliases aşağıda korundu (geriye dönük).
   ================================================================ */
.shell .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.2;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.shell .btn:hover{ transform: translateY(-1px); }
.shell .btn:active{ transform: translateY(0); }
.shell .btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.shell .btn:disabled, .shell .btn[disabled], .shell .btn.disabled{ opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.shell .btn svg{ flex-shrink: 0; width: 16px; height: 16px; }

/* Sizes */
.shell .btn-sm{ padding: 7px 12px; font-size: 12.5px; gap: 6px; }
.shell .btn-sm svg{ width: 14px; height: 14px; }
.shell .btn-lg{ padding: 13px 26px; font-size: 14.5px; gap: 10px; }
.shell .btn-lg svg{ width: 18px; height: 18px; }

/* Modifiers */
.shell .btn-block{ width: 100%; }
.shell .btn-pill{ border-radius: 999px; }

/* Icon-only square button */
.shell .btn-icon{ padding: 0; width: 36px; height: 36px; gap: 0; flex-shrink: 0; }
.shell .btn-icon.btn-sm{ width: 30px; height: 30px; }
.shell .btn-icon.btn-lg{ width: 42px; height: 42px; }

/* === Variants === */

/* Primary — birincil eylem (Kaydet, Gönder, Onayla) */
.shell .btn-primary{
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: var(--btn-shadow-sm);
}
.shell .btn-primary:hover{ background: var(--primary-700) !important; border-color: var(--primary-700) !important; box-shadow: var(--btn-shadow-md); color: #fff !important; }
.shell .btn-primary:active{ background: var(--primary-700) !important; box-shadow: var(--btn-shadow-xs); }

/* Secondary — alternatif eylem (Geri Dön, Detay) */
.shell .btn-secondary{
  background: var(--surface);
  color: var(--text-2) !important;
  border-color: var(--border);
}
.shell .btn-secondary:hover{ background: var(--surface-2); color: var(--text) !important; border-color: var(--border-strong); }

/* Ghost — yumuşak (Vazgeç, İptal modal'da, link benzeri) */
.shell .btn-ghost{
  background: transparent;
  color: var(--text-2) !important;
  border-color: transparent;
}
.shell .btn-ghost:hover{ background: var(--surface-2); color: var(--text) !important; transform: none; }

/* Outline — vurgulu border, dolgu yok (Filtre seçili değil, ikincil CTA) */
.shell .btn-outline{
  background: transparent;
  color: var(--primary-700) !important;
  border-color: var(--primary);
}
.shell .btn-outline:hover{ background: var(--primary-50); color: var(--primary-700) !important; border-color: var(--primary-700); }

/* Danger — yıkıcı eylem (Sil, İptal Et) */
.shell .btn-danger{
  background: var(--danger);
  color: #fff !important;
  border-color: var(--danger);
  box-shadow: 0 2px 6px rgba(239, 68, 68, .18);
}
.shell .btn-danger:hover{ background: #dc2626; border-color: #dc2626; box-shadow: 0 6px 16px rgba(239, 68, 68, .30); color: #fff !important; }
.shell .btn-danger:active{ background: #b91c1c; }

/* Danger soft — uyarı seviyesi yumuşak (Talep iptal, Çıkış) */
.shell .btn-danger-soft{
  background: #fef2f2;
  color: var(--danger) !important;
  border-color: #fecaca;
}
.shell .btn-danger-soft:hover{ background: #fee2e2; border-color: #fca5a5; color: #b91c1c !important; }

/* Warning — sarı, uyarı (Beklet, Onay bekle) */
.shell .btn-warning{
  background: var(--warn);
  color: #fff !important;
  border-color: var(--warn);
  box-shadow: 0 2px 6px rgba(245, 158, 11, .18);
}
.shell .btn-warning:hover{ background: #d97706; border-color: #d97706; color: #fff !important; }

/* Loading state — spinner */
.shell .btn-loading{
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.shell .btn-loading::after{
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  top: 50%; left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: btn-spin .7s linear infinite;
  color: #fff;
}
.shell .btn-loading.btn-secondary::after, .shell .btn-loading.btn-ghost::after, .shell .btn-loading.btn-outline::after{ color: var(--primary); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* === Aliases — eski sınıflar yeni .btn üzerinden çalışır === */
.shell main .es-btn, .shell main .ef-btn{ font-weight: 600; flex-shrink: 0; }

/* es-btn-primary / ef-btn-primary alias = btn-primary davranışı */
.shell main .es-btn-primary:hover, .shell main .ef-btn-primary:hover{ transform: translateY(-1px); }

.shell main .es-btn-secondary:hover, .shell main .ef-btn-secondary:hover{ transform: translateY(-1px); }

/* es-action-btn (sipariş detay aksiyon listesi) */
.shell main .es-action-btn{ transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; }
.shell main .es-action-btn:hover{ transform: translateY(-1px); }

/* === Address tab — yenilendi === */
.shell .address-tab-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.shell .address-tab-head .section-title{ margin-bottom: 4px; }
.shell .address-tab-head .section-sub{ margin-bottom: 0; }

.shell .address-list{
  display: grid;
  gap: 14px;
}
.shell .address-card{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.shell .address-card:hover{
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
.shell .address-card.default{
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--primary-50) 0%, var(--surface) 80%);
}
.shell .address-card.default::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--primary);
  pointer-events: none;
}
.shell .address-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-50);
  display: grid;
  place-items: center;
  color: var(--primary-700);
  flex: 0 0 44px;
  margin-top: 2px;
}
.shell .address-card.default .address-icon{ background: var(--primary); color: #fff; }

.shell .address-body{ min-width: 0; }
.shell .address-title{
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.shell .address-default-tag{
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shell .address-default-tag::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.4);
}
.shell .address-type-tag{
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.shell .address-text{
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 4px;
}
.shell .address-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.shell .address-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  font-weight: 500;
}
.shell .address-meta-item svg{ color: var(--primary-700); flex-shrink: 0; }

.shell .address-actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.shell .address-action{
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .15s ease;
}
.shell .address-action:hover{
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.shell .address-action-danger:hover{
  background: #fef2f2;
  color: var(--danger);
  border-color: #fecaca;
}
.shell .address-action-star:hover{
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}

.shell .address-empty{
  text-align: center;
  padding: 56px 24px;
  color: var(--text-3);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.shell .address-empty svg{ margin-bottom: 14px; opacity: .5; color: var(--text-3); }
.shell .address-empty .t1{ font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.shell .address-empty .t2{ font-size: 13px; }

.shell .add-address{
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 13.5px;
  background: transparent;
  width: 100%;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}
.shell .add-address:hover{
  border-color: var(--primary);
  color: var(--primary-700);
  background: var(--primary-50);
  border-style: solid;
  transform: translateY(-1px);
}
.shell .add-address svg{
  width: 18px; height: 18px;
  padding: 3px;
  background: var(--primary-50);
  border-radius: 50%;
  color: var(--primary);
  transition: transform .2s ease;
}
.shell .add-address:hover svg{
  background: var(--primary);
  color: #fff;
  transform: rotate(90deg);
}

@media (max-width: 600px) {
  .shell .address-card{
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 14px;
  }
  .shell .address-actions{
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .shell .address-icon{ width: 40px; height: 40px; }
}

/* Notification preferences */
.shell .pref-list{ display: grid; gap: 14px; }
.shell .pref-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.shell .pref-row .t1{ font-weight: 600; font-size: 13.5px; }
.shell .pref-row .t2{ font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.shell .toggle-group{ display: flex; gap: 14px; align-items: center; }
.shell .toggle-mini{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }

.shell .switch{
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .15s;
  flex: 0 0 38px;
}
.shell .switch::after{
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left .18s;
  transform: none;
}
.shell .switch.on{ background: var(--primary); }
.shell .switch.on::after{ left: 18px; transform: none; }

/* Password strength */
.shell .pwd-strength{
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  margin-top: 8px;
  overflow: hidden;
}
.shell .pwd-strength-fill{
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width .25s, background .25s;
}
.shell .pwd-rules{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--text-3);
}
.shell .pwd-rule{ display: flex; align-items: center; gap: 6px; }
.shell .pwd-rule.ok{ color: var(--primary-700); }
.shell .input-error{ border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }
.shell .input-ok{ border-color: var(--primary) !important; }
/* === Verification Modal === */
.shell .modal-scrim{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s;
}
.shell .modal-scrim.show{ display: flex; opacity: 1; }

.shell .modal{
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 460px;        /* default = small */
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
/* Standart modal boyutları */
.shell .modal.sm{ max-width: 380px; }
.shell .modal.lg{ max-width: 760px; }
.shell .modal.xl{ max-width: 920px; }
.shell .modal-scrim.show .modal{ transform: translateY(0) scale(1); }

/* HTML5 hidden attribute — utility class'larla çakışmasın */
.shell [hidden]{ display: none !important; }

.shell .modal-header{
  padding: 22px 24px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.shell .modal-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-50);
  color: var(--primary-700);
  display: grid;
  place-items: center;
  flex: 0 0 44px;
}
.shell .modal-title-wrap{ flex: 1; min-width: 0; }
.shell .modal-title{ font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 2px; }
.shell .modal-sub{ font-size: 13px; color: var(--text-3); margin: 0; }
.shell .modal-close{
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  flex: 0 0 32px;
}
.shell .modal-close:hover{ background: var(--surface-2); color: var(--text); }

/* Stepper */
.shell .stepper{
  display: flex;
  align-items: center;
  padding: 18px 24px 4px;
  gap: 0;
  flex-shrink: 0;
}
.shell .step-node{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.shell .step-circle{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-3);
  transition: all .3s;
}
.shell .step-node.active .step-circle{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--primary-50);
}
.shell .step-node.done .step-circle{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.shell .step-label{
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.shell .step-node.active .step-label, .shell .step-node.done .step-label{ color: var(--text); }
.shell .step-bar{
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}
.shell .step-bar::after{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-100%);
  transition: transform .4s ease;
}
.shell .step-bar.filled::after{ transform: translateX(0); }

.shell .modal-body{
  padding: 18px 24px 22px;
  min-height: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.shell .modal-step{ display: none; }
.shell .modal-step.active{ display: block; animation: stepIn .3s ease; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.shell .modal-info{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.shell .modal-info strong{ color: var(--text); }
.shell .modal-info svg{ color: var(--primary); flex: 0 0 16px; margin-top: 1px; }

/* OTP input */
.shell .otp-wrap{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 14px;
}
.shell .otp-input{
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: all .15s;
  font-variant-numeric: tabular-nums;
}
.shell .otp-input:focus{
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.shell .otp-input.filled{
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary-700);
}
.shell .otp-input.error{
  border-color: var(--danger);
  background: #fef2f2;
  color: var(--danger);
  animation: shake .35s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shell .otp-meta{
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
}
.shell .otp-meta .resend{
  color: var(--primary-700);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.shell .otp-meta .resend:disabled{ color: var(--text-muted); cursor: default; }

/* Sending step */
.shell .sending-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px 0 20px;
  text-align: center;
}
.shell .sending-spinner{
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 4px solid var(--primary-50);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.shell .sending-state .t1{ font-weight: 600; font-size: 14.5px; }
.shell .sending-state .t2{ font-size: 13px; color: var(--text-3); }

/* Success step */
.shell .success-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 0 10px;
  gap: 14px;
}
.shell .success-check{
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--primary-50);
  display: grid;
  place-items: center;
  position: relative;
  animation: pop .5s cubic-bezier(.2,.8,.2,1);
}
.shell .success-check::before{
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0.3;
  animation: ring 1s ease-out;
}
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes ring { from { transform: scale(0.6); opacity: 0.6; } to { transform: scale(1.3); opacity: 0; } }
.shell .success-check svg{ color: var(--primary); }
.shell .success-state .t1{ font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.shell .success-state .t2{ font-size: 13.5px; color: var(--text-3); max-width: 320px; }

.shell .modal-footer{
  padding: 14px 24px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.shell .modal-footer:empty{ display: none; }
.shell .modal-footer .btn{ flex: 0 0 auto; }

@media (max-width: 480px) {
  .shell .otp-input{ width: 38px; height: 48px; font-size: 18px; }
  .shell .step-label{ display: none; }
  .shell .modal-footer{ flex-direction: column-reverse; }
  .shell .modal-footer .btn{ width: 100%; justify-content: center; }
}

/* Sidebar close button — sadece mobil drawer'da görünür */
.shell .sidebar-close-btn{ display: none; }

/* Mobile drawer */
.shell .scrim{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.shell .scrim.open{ opacity: 1; pointer-events: auto; }

/* Drawer açıkken arkadaki sayfa scroll'unu kilitle —
   account-page-wrap'a verilen overflow:visible kuralını override eder (specificity ile) */
.shell.drawer-locked, .shell.drawer-locked{
  overflow: hidden !important;
  touch-action: none;
}

/* === Responsive === */
@media (max-width: 960px) {
  .shell .hero, .shell .mp-hero{ padding: 22px; }
  .shell .hero-grid, .shell .mp-hero-grid{
    grid-template-columns: auto 1fr;
    gap: 18px;
  }
  .shell .hero-side{
    grid-column: 1 / -1;
    text-align: left;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .shell .avatar-wrap{ width: 88px; height: 88px; }
  .shell .hero-info h1, .shell .mp-hero-info h1{ font-size: 22px; }
  .shell .form-grid{ grid-template-columns: 1fr; }
  .shell .pwd-rules{ grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  
  .shell .menu-toggle{ display: flex; }
  .shell .account-mobile-menu{
    display: flex;
    position: sticky;
    top: var(--header-h);
    z-index: 40;
  }
  .shell{ grid-template-columns: 1fr; }
  .shell .sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    width: 280px;
    z-index: 99999;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
    background: var(--surface);
    border-radius: 0;
    border-right: none;
  }
  .shell .sidebar.open{ transform: translateX(0); }
  .shell .sidebar-close-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--border, #e2e8f0);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    z-index: 1;
    flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .shell .sidebar-close-btn:hover{ background: var(--border-hover, #cbd5e1); color: var(--text, #1e293b); }
  .shell .main{ padding: 16px 16px 80px; }
  .shell .hero, .shell .mp-hero{ padding: 20px 18px; border-radius: var(--radius-lg); }
  .shell .hero-grid, .shell .mp-hero-grid{ grid-template-columns: 1fr; gap: 14px; }
  .shell .hero-info, .shell .mp-hero-info{ text-align: center; }
  .shell .meta-row, .shell .mp-meta-row{ justify-content: center; }
  .shell .hero-side{ justify-content: center; align-items: center; text-align: center; }
  .shell .avatar-wrap{ margin: 0 auto; }
  .shell .account-breadcrumb-list{ padding: 8px 12px; font-size: 12.5px; }
  .shell .tab-panel{ padding: 22px 18px; }
  .shell .tabs{ padding: 0 4px; }
  .shell .tab{ padding: 14px 12px; font-size: 13px; }
  .shell .form-actions{ justify-content: stretch; flex-direction: column-reverse; }
  .shell .form-actions .btn{ justify-content: center; width: 100%; }
  .shell .pref-row{ grid-template-columns: 1fr; }
  .shell .toggle-group{ justify-content: flex-start; }
}

/* ── Favoriler (müşteri shell; eski `.customer-page` scope yerine `.shell main`) ── */
.shell main .favoriler-toolbar .btn svg{ flex-shrink: 0; }
.shell main .favori-demo-title{
  color: var(--title-color);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  min-height: 40px;
}
.shell main .favorite-card{
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 12px 32px rgba(15, 23, 42, 0.07));
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .15s ease, box-shadow .18s ease;
}
.shell main .favorite-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}
.shell main .favorite-card-media{
  position: relative;
  overflow: hidden;
  height: 200px;
}
.shell main .favorite-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.shell main .favorite-card-media:hover img{
  transform: scale(1.05);
}
.shell main .favorite-remove-form{
  position: absolute;
  top: 14px;
  right: 14px;
}
.shell main .favorite-remove-btn{
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.35);
}
.shell main .favorite-card-body{
  padding: 20px 22px 22px;
  flex: 1;
}
.shell main .favorite-note{
  background: var(--surface-2, #f8fafc);
  border-radius: var(--radius-md, 10px);
  padding: 10px 14px;
  color: var(--text-2, #475569);
  margin-bottom: 12px;
  font-size: 13px;
}
.shell main .favorite-price{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.shell main .favorite-price-old{
  text-decoration: line-through;
  color: var(--text-4, #94a3b8);
  font-weight: 500;
}
.shell main .favorite-price-current{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}
.shell main .favorite-inline-cart .input, .shell main .favorite-inline-cart .select{
  border-radius: var(--radius-md, 10px);
  font-size: 14px;
}
.shell main .favorite-actions{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shell main .favorite-card-footer{
  padding: 12px 22px;
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 13px;
  color: var(--text-3, #64748b);
}
.shell main .favorite-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 999px;
  line-height: 1.3;
}
.shell main .favorite-pill.discount{
  background: #fee2e2;
  color: #b91c1c;
}
.shell main .favorite-pill[data-variant="crm"]{ background: #e0f2fe; color: #0369a1; }
.shell main .favorite-pill[data-variant="kurumsal"]{ background: #e6f7ed; color: #0f9d58; }
.shell main .favorite-pill[data-variant="teknoloji"]{ background: #f3e8ff; color: #7c3aed; }
.shell main .favorite-pill[data-variant="portfolio"]{ background: #fff7e6; color: #a16207; }
.shell main .favorite-pill[data-variant="secondary"]{ background: #f1f5f9; color: #475569; }

/* ── Favoriler sayfası — kart düzeni ve boş durum (shell token’ları) ── */
.shell main .card.favoriler-main{ margin-top: 18px; }
.shell main .favoriler-main__inner{
  padding: 26px 28px 30px;
}
@media (max-width: 768px) {
  .shell main .favoriler-main__inner{ padding: 20px 16px 24px; }
}

.shell main .favoriler-eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
}
.shell main .favoriler-toolbar__text .section-title{ margin-bottom: 6px; }
.shell main .favoriler-toolbar__text .section-sub{
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}

.shell main .favoriler-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.shell main .favoriler-toolbar__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
@media (max-width: 575px) {
  .shell main .favoriler-toolbar{ flex-direction: column; align-items: stretch; }
  .shell main .favoriler-toolbar__actions .btn{ justify-content: center; }
}

.shell main .favoriler-danger-ghost{
  color: var(--danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: var(--radius);
  background: transparent;
}
.shell main .favoriler-danger-ghost:hover{
  background: rgba(239, 68, 68, 0.07);
  border-color: var(--danger);
  color: var(--danger) !important;
}

.shell main .favoriler-inline-form{ margin: 0; }

.shell main .favoriler-filters{
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 6px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.shell main .favoriler-filters-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .shell main .favoriler-filters-grid{ grid-template-columns: 1fr; }
}

.shell main .favoriler-empty{
  position: relative;
  text-align: center;
  padding: 44px 22px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: radial-gradient(
    120% 80% at 50% -10%,
    var(--primary-50) 0%,
    var(--surface) 55%
  );
  overflow: hidden;
}
.shell main .favoriler-empty__orb{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--primary-100);
  opacity: 0.35;
  top: -72px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.shell main .favoriler-empty__icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.shell main .favoriler-empty__icon svg{
  color: var(--primary);
  opacity: 0.95;
}
.shell main .favoriler-empty__title{
  position: relative;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 10px;
}
.shell main .favoriler-empty__text{
  position: relative;
  font-size: 14px;
  color: var(--text-2);
  margin: 0 auto 22px;
  max-width: 400px;
  line-height: 1.55;
}
.shell main .favoriler-empty__cta{
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* mp-card içinde favoriler-empty: kart zaten border'lı, iç border gereksiz */
.shell main .mp-card .favoriler-empty{
  border: none;
  border-radius: 0;
  padding: 32px 22px 28px;
}

.shell main .favoriler-main__inner .row{
  --bs-gutter-x: 1.15rem;
  --bs-gutter-y: 1.15rem;
}
.shell main #favoriListContainer .favorite-card{
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .shell main #favoriListContainer .favorite-card:hover{
    border-color: var(--primary-100);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.09);
    transform: translateY(-2px);
  }
}

/* ── Hizmetlerim (shell main) ─────────────────────────────────────────── */
.shell main .card.hizmetler-main{ margin-top: 18px; }
.shell main .hizmetler-main__inner{
  padding: 22px 22px 26px;
}
@media (max-width: 768px) {
  .shell main .hizmetler-main__inner{
    padding: 20px 16px 24px;
  }
}

/* ── Siparişlerim (shell main; eski müşteri sayfa stilleri yerine) ───────── */
.shell main .card.siparisler-main{ margin-top: 18px; }
.shell main .siparisler-main__inner{
  padding: 22px 22px 26px;
}
@media (max-width: 768px) {
  .shell main .siparisler-main__inner{
    padding: 20px 16px 24px;
  }
}
.shell main .siparisler-eyebrow{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #64748b);
  margin: 0 0 8px;
}
.shell main .siparisler-toolbar{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline, #e5e7eb);
}
.shell main .siparisler-toolbar__text .section-title{ margin-bottom: 6px; }
.shell main .siparisler-toolbar__text .section-sub{
  margin: 0;
  font-size: 14px;
  color: var(--muted, #64748b);
  max-width: 52ch;
}
.shell main .siparisler-toolbar__actions .btn svg{ flex-shrink: 0; }
.shell main .siparisler-toolbar__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
@media (max-width: 768px) {
  .shell main .siparisler-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .shell main .siparisler-toolbar__actions .btn{
    justify-content: center;
  }
}
.shell main .siparisler-filters{
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--radius, 14px);
  background: rgba(248, 250, 252, 0.6);
}
.shell main .siparisler-filters-grid{
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(180px, 1fr);
  gap: 16px;
  align-items: end;
}
@media (max-width: 576px) {
  .shell main .siparisler-filters-grid{
    grid-template-columns: 1fr;
  }
}
.shell main .siparisler-empty{
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 48px 24px;
  margin-top: 8px;
  border-radius: var(--radius, 14px);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  background: radial-gradient(circle at 30% -10%, rgba(26, 182, 157, 0.08), transparent 55%), #fafbfc;
}
.shell main .siparisler-empty__orb{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: -60px;
  right: -40px;
  background: radial-gradient(circle, rgba(26, 182, 157, 0.12), transparent 70%);
  pointer-events: none;
}
.shell main .siparisler-empty__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: rgba(26, 182, 157, 0.1);
  color: var(--primary, #1ab69d);
}
.shell main .siparisler-empty__title{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--title, #0f172a);
}
.shell main .siparisler-empty__text{
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted, #64748b);
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.shell main .siparisler-empty__cta{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Sipariş detayı (shell main) ─────────────────────────────────────────── */
.shell main .card.sipdet-main{ margin-top: 18px; }
.shell main .sipdet-main__inner{
  padding: 0 4px 8px;
}
.shell main .sipdet-eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #64748b);
  margin: 0 0 4px;
}
.shell main .sipdet-toolbar__text .section-title{ margin-bottom: 6px; }
.shell main .sipdet-toolbar__text .section-sub{
  margin: 0;
  font-size: 14px;
  color: var(--text-3, #64748b);
}
.shell main .sipdet-toolbar{
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.shell main .sipdet-toolbar__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.shell main .sipdet-toolbar__actions .btn{ border-radius: 10px; padding: 10px 14px; }
@media (max-width: 768px) {
  .shell main .sipdet-toolbar{ flex-direction: column; align-items: stretch; }
  .shell main .sipdet-toolbar__actions .btn{ justify-content: center; }
}
.shell main .sipdet-order-card{ margin-top: 0; }
@keyframes sipdet-wave-ripple-btn {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}
.shell main .sipdet-odeme-btn.sipdet-odeme-btn--urgent{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}
.shell main .sipdet-odeme-btn.sipdet-odeme-btn--urgent::before, .shell main .sipdet-odeme-btn.sipdet-odeme-btn--urgent::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.shell main .sipdet-odeme-btn.sipdet-odeme-btn--urgent::before{
  background: rgba(255, 255, 255, 0.5);
  animation: sipdet-wave-ripple-btn 2s ease-out infinite;
}
.shell main .sipdet-odeme-btn.sipdet-odeme-btn--urgent::after{
  background: rgba(255, 255, 255, 0.3);
  animation: sipdet-wave-ripple-btn 2s ease-out infinite 0.5s;
}
.shell main .sipdet-odeme-btn.sipdet-odeme-btn--urgent:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5) !important;
}
.shell main .sipdet-odeme-btn.sipdet-odeme-btn--urgent:active{
  transform: translateY(0);
}

.shell #odemeBildirimiTalepDetayModal.modal-scrim.show .sipdet-ec-talep{
  display: flex;
  flex-direction: column;
  max-height: calc(90vh - 48px);
}
.shell #odemeBildirimiTalepDetayModal.modal-scrim.show .sipdet-talep-modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.shell main .siparisler-table-wrap{
  margin-top: 4px;
}
.shell main .siparisler-credit-table{
  border-radius: 0;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.shell main .siparisler-credit-table thead{
  background: #f8fafc;
}
.shell main .siparisler-credit-table th{
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #94a3b8 !important;
  border-bottom: none !important;
  padding: 14px 16px;
}
.shell main .siparisler-credit-table td{
  padding: 16px;
  vertical-align: middle;
  font-size: 14px;
}
.shell main .siparisler-credit-table tbody tr{
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
.shell main .siparisler-credit-table tbody tr:hover{
  background-color: #eff4f5 !important;
}
.shell main .siparisler-credit-table tbody tr:hover td{
  background-color: #eff4f5 !important;
}
.shell main .support-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.shell main .support-pill-emerald{ background: #ecfdf5; color: #047857; }
.shell main .support-pill-amber{ background: #fef9e7; color: #b45309; }
.shell main .support-pill-sky{ background: #eff6ff; color: #0369a1; }
.shell main .support-pill-indigo{ background: #e0e7ff; color: #4338ca; }
.shell main .support-pill-gray{ background: #f8fafc; color: #64748b; }
.shell main .support-pill-coral{ background: #fef2f2; color: #b91c1c; }
.shell main .support-pill-new{ background: #dc2626; color: #fff; font-size: 0.8rem; padding: 5px 14px; }
.shell main .support-pill-orange{ background: #fff7ed; color: #c2410c; }
.shell main .support-pill-cyan{ background: #ecfeff; color: #0e7490; }
.shell main .support-pill-green{ background: #ecfdf5; color: #047857; }
.shell main .support-pill-red{ background: #fef2f2; color: #991b1b; }
.shell main .support-pill-warning{ background: #fef3c7; color: #92400e; }

/* Müşteri paneli — hesap bilgileri kart dili (dashboard) */
.shell main .card.panel-dashboard-main{
  margin-top: 18px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 14px);
}
.shell main .panel-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.55), transparent);
}
.shell main .panel-toolbar__text .section-title.panel-toolbar__title{ margin-bottom: 6px; font-size: 1.2rem; }
.shell main .panel-toolbar__sub{
  margin: 0;
  font-size: 14px;
  color: var(--text-3, #64748b);
  max-width: 56ch;
}
.shell main .panel-eyebrow{
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3, #64748b);
  margin-bottom: 6px;
}
.shell main .panel-toolbar__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
@media (max-width: 768px) {
  .shell main .panel-toolbar{
    flex-direction: column;
    align-items: stretch;
    padding: 18px 18px 14px;
  }
  .shell main .panel-toolbar__actions .btn{ justify-content: center; width: 100%; }
}
.shell main .panel-dashboard-main__inner{
  padding: 0 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
@media (max-width: 767.98px) {
  .shell main .panel-dashboard-main__inner{
    padding: 0 18px 22px;
    gap: 22px;
  }
}
.shell main .panel-dash-muted-sub{
  margin: 0;
  font-size: 14px;
  color: var(--text-3, #64748b);
  max-width: 60ch;
}
.shell main .panel-dash-section__head{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.shell main .panel-dash-section__head--stack{ margin-bottom: 12px; }
.shell main .panel-dash-link-more{ font-weight: 600; white-space: nowrap; }
.shell main .panel-dash-section{ padding-top: 8px; }
.shell main .panel-dash-section:first-of-type{ padding-top: 22px; }

.shell main .panel-feed-list{ display: flex; flex-direction: column; gap: 10px; }
.shell main .panel-feed-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 12px);
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
@media (hover: hover) {
  .shell main .panel-feed-item:hover{
    border-color: var(--border-strong, #cbd5e1);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  }
}
.shell main .panel-feed-item--unread{
  border-color: #fbbf24;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.45), #fff);
}
.shell main .panel-feed-item--important{ border-left: 3px solid #ef4444; }
.shell main .panel-feed-item__icon{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.shell main .panel-feed-item__body{ min-width: 0; }
.shell main .panel-feed-item__title{
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text, #0f172a);
}
.shell main .panel-feed-item__excerpt{
  font-size: 13px;
  color: var(--text-2, #475569);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shell main .panel-feed-item__meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3, #64748b);
}
.shell main .panel-feed-item__badges{ display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.shell main .panel-feed-pill-stack{ margin-top: 0 !important; }

.shell main .panel-stat-tile{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px);
  background: var(--surface, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
@media (hover: hover) {
  .shell main .panel-stat-tile:hover{
    border-color: var(--border-strong, #cbd5e1);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
  }
}
.shell main .panel-stat-tile__icon{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 2px;
}
.shell main .panel-stat-tile--indigo .panel-stat-tile__icon{ background: #e0e7ff; color: #4338ca; }
.shell main .panel-stat-tile--emerald .panel-stat-tile__icon{ background: #d1fae5; color: #047857; }
.shell main .panel-stat-tile--amber .panel-stat-tile__icon{ background: #fef3c7; color: #b45309; }
.shell main .panel-stat-tile--violet .panel-stat-tile__icon{ background: #ede9fe; color: #6d28d9; }
.shell main .panel-stat-tile--cyan .panel-stat-tile__icon{ background: #cffafe; color: #0e7490; }
.shell main .panel-stat-tile--rose .panel-stat-tile__icon{ background: #fee2e2; color: #b91c1c; }
.shell main .panel-stat-tile__value{
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--title-color, #0f172a);
}
.shell main .panel-stat-tile__label{ font-size: 14px; color: var(--text-3, #64748b); }
.shell main .panel-stat-tile__hint{ font-size: 12px; font-weight: 600; color: #b45309; }

.shell main .panel-odeme-top{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
}
.shell main .panel-odeme-filters{ display: flex; justify-content: flex-end; }
.shell main .odeme-filter-btn.active.btn-ghost, .shell main .odeme-filter-btn.odeme-filter-btn--active.btn-ghost{
  background: var(--primary, #1ab69d) !important;
  color: #fff !important;
  border-color: transparent;
}
.shell main .panel-odeme-table-wrap{
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}
.shell main .panel-odeme-table thead th{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3, #64748b);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: rgba(248, 250, 252, 0.95);
}
.shell main .panel-odeme-table td.panel-odeme-cell{
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #1e293b);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.shell main .panel-odeme-cell--date{ white-space: nowrap; width: 1%; }
.shell main .hizmetlers-odeme-filter-empty{
  margin-top: 0;
  padding: 32px 20px;
  text-align: center;
}
.shell main .panel-odeme-tr--past .panel-odeme-cell{ color: #b91c1c !important; }
.shell main .panel-odeme-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.shell main .panel-odeme-pay-btn{ white-space: nowrap; padding: 5px 12px !important; }

.shell main .panel-dash-subcard{
  padding: 20px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px);
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
}
.shell main .panel-list-stack{ display: flex; flex-direction: column; gap: 10px; }
.shell main .panel-list-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) {
  .shell main .panel-list-row:hover{
    border-color: var(--border-strong, #cbd5e1);
    background: rgba(248, 250, 252, 0.6);
  }
}
.shell main .panel-list-row__main{ min-width: 0; flex: 1; }
.shell main .panel-list-row__title{
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text, #0f172a);
}
.shell main .panel-list-row__meta{
  font-size: 12px;
  color: var(--text-3, #64748b);
}
.shell main .panel-list-row__accent{
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  color: var(--text, #0f172a);
}

.shell main .panel-quick-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 992px) {
  .shell main .panel-quick-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .shell main .panel-quick-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.shell main .panel-quick-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #0f172a);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  background: var(--surface, #fff);
}
@media (hover: hover) {
  .shell main .panel-quick-tile:hover{
    border-color: var(--border-strong, #cbd5e1);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
  }
}
.shell main .panel-quick-tile__icon{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.shell main .panel-quick-tile--emerald .panel-quick-tile__icon{ background: #d1fae5; color: #059669; }
.shell main .panel-quick-tile--indigo .panel-quick-tile__icon{ background: #e0e7ff; color: #4338ca; }
.shell main .panel-quick-tile--amber .panel-quick-tile__icon{ background: #fef3c7; color: #b45309; }
.shell main .panel-quick-tile--cyan .panel-quick-tile__icon{ background: #cffafe; color: #0e7490; }
.shell main .panel-quick-tile--violet .panel-quick-tile__icon{ background: #ede9fe; color: #6d28d9; }
.shell main .panel-quick-tile--rose .panel-quick-tile__icon{ background: #fee2e2; color: #dc2626; }
.shell main .panel-quick-tile--slate .panel-quick-tile__icon{ background: #f1f5f9; color: #475569; }

.shell main .panel-dash-empty{
  text-align: center;
  padding: 44px 20px;
  border-radius: var(--radius, 14px);
  border: 1px dashed rgba(148, 163, 184, 0.55);
  background: radial-gradient(circle at 30% -10%, rgba(26, 182, 157, 0.06), transparent 52%), var(--surface, #fafbfc);
}
.shell main .panel-dash-empty--compact{
  padding: 28px 16px;
  border-style: solid;
}
.shell main .panel-dash-empty__icon{
  font-size: 42px;
  margin-bottom: 12px;
  color: rgba(148, 163, 184, 0.9);
}
.shell main .panel-dash-empty__text{
  margin: 0;
  font-size: 14px;
  color: var(--text-3, #64748b);
}

.shell main .card.faturalar-main{ margin-top: 18px; }
.shell main .faturalar-main__inner{
  padding: 22px 22px 26px;
}
@media (max-width: 768px) {
  .shell main .faturalar-main__inner{
    padding: 20px 16px 24px;
  }
}
.shell main .faturalar-eyebrow{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #64748b);
  margin: 0 0 8px;
}
.shell main .faturalar-toolbar{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline, #e5e7eb);
}
.shell main .faturalar-toolbar__text .section-title{ margin-bottom: 6px; }
.shell main .faturalar-toolbar__text .section-sub{
  margin: 0;
  font-size: 14px;
  color: var(--muted, #64748b);
  max-width: 52ch;
}
.shell main .faturalar-toolbar__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.shell main .faturalar-toolbar__actions .btn svg{ flex-shrink: 0; }
@media (max-width: 768px) {
  .shell main .faturalar-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .shell main .faturalar-toolbar__actions .btn{
    justify-content: center;
  }
}
.shell main .faturalar-filters{
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--radius, 14px);
  background: rgba(248, 250, 252, 0.6);
}
.shell main .faturalar-filters-grid{
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(180px, 1fr);
  gap: 16px;
  align-items: end;
}
@media (max-width: 576px) {
  .shell main .faturalar-filters-grid{
    grid-template-columns: 1fr;
  }
}
.shell main .faturalar-empty{
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 48px 24px;
  margin-top: 8px;
  border-radius: var(--radius, 14px);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  background: radial-gradient(circle at 30% -10%, rgba(26, 182, 157, 0.08), transparent 55%), #fafbfc;
}
.shell main .faturalar-empty__orb{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: -60px;
  right: -40px;
  background: radial-gradient(circle, rgba(26, 182, 157, 0.12), transparent 70%);
  pointer-events: none;
}
.shell main .faturalar-empty__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: rgba(26, 182, 157, 0.1);
  color: var(--primary, #1ab69d);
}
.shell main .faturalar-empty__title{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--title, #0f172a);
}
.shell main .faturalar-empty__text{
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted, #64748b);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.shell main .faturalar-empty__cta{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.shell main .faturalar-table-wrap{
  margin-top: 4px;
}
.shell main .faturalar-credit-table{
  border-radius: 0;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.shell main .faturalar-credit-table thead{
  background: #f8fafc;
}
.shell main .faturalar-credit-table th{
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #94a3b8 !important;
  border-bottom: none !important;
  padding: 14px 16px;
}
.shell main .faturalar-credit-table td{
  padding: 16px;
  vertical-align: middle;
  font-size: 14px;
}
.shell main .faturalar-credit-table tbody tr{
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
.shell main .faturalar-credit-table tbody tr:hover{
  background-color: #eff4f5 !important;
}
.shell main .faturalar-credit-table tbody tr:hover td{
  background-color: #eff4f5 !important;
}
.shell main .faturalar-credit-table .dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius: 999px !important;
}
.shell main .faturalar-credit-table .dataTables_filter input{
  border-radius: 12px !important;
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
}
.shell main .faturalar-cell-primary{
  font-size: 15px;
  font-weight: 600;
  color: var(--title, #0f172a);
}
.shell main .faturalar-cell-muted{
  font-size: 14px;
  color: #94a3b8;
  margin-top: 4px;
}
.shell main .faturalar-discount{
  font-size: 13px;
  color: #10b981;
  margin-top: 4px;
}
.shell main .faturalar-actions{
  width: 200px;
  min-width: 200px;
}
.shell main .faturalar-actions .d-flex{
  justify-content: flex-end;
}
.shell main .faturalar-pill{
  font-size: 11px;
  padding: 5px 12px;
}

/* ── Kredi yükleme (shell main) ─────────────────────────────────────────── */
.shell main .card.krediyl-main{ margin-top: 18px; }
.shell main .krediyl-main__inner{
  padding: 22px 22px 26px;
}
@media (max-width: 768px) {
  .shell main .krediyl-main__inner{
    padding: 20px 16px 24px;
  }
}
.shell main .krediyl-tabs-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline, #e5e7eb);
}
.shell main .krediyl-tabs-toolbar .tabs{
  flex: 1 1 auto;
  min-width: 0;
}
.shell main .krediyl-filters{
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--radius, 14px);
  background: rgba(248, 250, 252, 0.6);
}
.shell main .krediyl-filters-grid{
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(160px, 1fr);
  gap: 16px;
  align-items: end;
}
@media (max-width: 576px) {
  .shell main .krediyl-filters-grid{
    grid-template-columns: 1fr;
  }
}
.shell main .krediyl-table-wrap{
  margin-top: 4px;
}
.shell main .krediyl-credit-table{
  border-radius: 0;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.shell main .krediyl-credit-table thead{
  background: #f8fafc;
}
.shell main .krediyl-credit-table th{
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #94a3b8 !important;
  border-bottom: none !important;
  padding: 14px 16px;
}
.shell main .krediyl-credit-table td{
  padding: 16px;
  vertical-align: middle;
  font-size: 14px;
}
.shell main .krediyl-credit-table tbody tr{
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
@media (hover: hover) {
  .shell main .krediyl-credit-table tbody tr:hover{
    background-color: #eff4f5 !important;
  }
  .shell main .krediyl-credit-table tbody tr:hover td{
    background-color: #eff4f5 !important;
  }
}
.shell main .krediyl-empty{
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 48px 24px;
  margin-top: 8px;
  border-radius: var(--radius, 14px);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  background: radial-gradient(circle at 30% -10%, rgba(26, 182, 157, 0.08), transparent 55%), #fafbfc;
}
.shell main .krediyl-empty__orb{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: -60px;
  right: -40px;
  background: radial-gradient(circle, rgba(26, 182, 157, 0.12), transparent 70%);
  pointer-events: none;
}
.shell main .krediyl-empty__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: rgba(26, 182, 157, 0.1);
  color: var(--primary, #1ab69d);
}
.shell main .krediyl-empty__title{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--title, #0f172a);
}
.shell main .krediyl-empty__text{
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted, #64748b);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.shell main .krediyl-bank-panel{
  border-radius: var(--radius, 14px);
  border: 1px solid var(--hairline, #e2e8f0);
  padding: 18px 20px;
  background: rgba(248, 250, 252, 0.5);
}
.shell main .krediyl-bank-panel h5{
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 1rem;
}
.shell main .krediyl-bank-card{
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.shell main .krediyl-bank-card.active{
  border: 2px solid var(--primary, #1ab69d);
  box-shadow: 0 12px 30px rgba(26, 182, 157, 0.12);
  background: rgba(240, 253, 250, 0.5);
}
.shell main .krediyl-bank-badge{
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #e0f2fe;
  color: #0369a1;
}
.shell main .krediyl-summary{
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--radius, 14px);
  padding: 24px 20px;
  background: rgba(248, 250, 252, 0.65);
}
.shell main .krediyl-summary h5{
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 1rem;
}
.shell main .krediyl-odeme-icon{
  color: var(--primary, #1ab69d);
}
.shell main #krediYuklemeDetayContent.krediyl-detay-body{
  max-height: min(72vh, 640px);
  overflow-y: auto;
}

/* ── Destek taleplerim (shell main) ─────────────────────────────────────── */
.shell main .support-pill-gold{ background: #fff1c7; color: #92400e; }
.shell main .support-pill-slate{ background: #e0f2fe; color: #0f4c81; }
.shell main .support-pill-lilac{ background: #f3e8ff; color: #7c3aed; }
.shell main .support-pill-mint{ background: #dcfce7; color: #15803d; }
.shell main .dstalep-pill-xs.support-pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  font-size: 9px;
  padding: 2px 7px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.shell main .dstalep-pill-xs.support-pill i{ font-size: 8px; }
.shell main .card.dstalep-main{ margin-top: 18px; }
.shell main .dstalep-main__inner{ padding: 0 4px 8px; }
.shell main .dstalep-toolbar{ margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.shell main .dstalep-toolbar__text .dstalep-eyebrow{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #64748b);
  margin: 0 0 6px;
}
.shell main .dstalep-toolbar__actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.shell main .dstalep-filters{ margin-bottom: 8px; }
.shell main .dstalep-filters-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; }
.shell main .dstalep-table-wrap{ margin-top: 12px; }
.shell main #taleplerListesi.dstalep-table-wrap tbody tr:hover, .shell main #taleplerListesi.dstalep-table-wrap tbody tr.table-success:hover{
  background-color: #eff4f5 !important;
}
.shell main #taleplerListesi.dstalep-table-wrap tbody tr:hover td{
  background-color: #eff4f5 !important;
}
.shell main #taleplerListesi.dstalep-table-wrap tbody tr.table-success, .shell main #taleplerListesi.dstalep-table-wrap tbody tr.table-success td{
  background-color: #f7fef9 !important;
}
.shell main .dstalep-row-title{
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title, #0f172a);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.shell main .dstalep-row-title .dstalep-row-icon{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 182, 157, 0.12);
  color: var(--primary, #1ab69d);
  font-size: 1.1rem;
}
.shell main .dstalep-row-meta{ font-size: 12px; color: #94a3b8; margin-left: 4px; font-weight: 400; }
.shell main .dstalep-msg-preview{ font-size: 0.92rem; color: #64748b; margin-top: 6px; margin-left: 50px; line-height: 1.45; }
.shell main .dstalep-actions{ width: 120px; min-width: 120px; }
.shell main .dstalep-empty{
  text-align: center;
  padding: 56px 24px;
  border-radius: var(--radius, 14px);
  border: 1px solid var(--hairline, #e5e7eb);
  background: #fff;
}
.shell main .dstalep-empty__icon{
  font-size: 56px;
  color: #d1d5db;
  margin-bottom: 16px;
}
.shell main .dstalep-empty__title{ font-size: 1.1rem; font-weight: 600; color: #111827; margin: 0 0 8px; }
.shell main .dstalep-empty__text{ font-size: 14px; color: #6b7280; margin: 0 0 20px; }
.shell main #bosSonucMesaji.dstalep-bos-sonuc{
  text-align: center;
  padding: 40px 20px;
  border-radius: var(--radius, 12px);
  border: 1px dashed var(--hairline, #e5e7eb);
  margin-top: 16px;
  background: #fafafa;
}
.shell main #bosSonucMesaji.dstalep-bos-sonuc .dstalep-empty__icon{ font-size: 48px; margin-bottom: 12px; }

.shell #yeniDestekTalepModal.modal-scrim.show .modal.ec-modal.dstalep-yeni-ec{
  max-height: calc(90vh - 48px);
  display: flex;
  flex-direction: column;
  --ec-modal-max-w: 700px;
}
.shell #yeniDestekTalepModal.modal-scrim.show .dstalep-yeni-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.shell #destekTalepDetayModal.modal-scrim.show .modal.ec-modal.dstalep-detay-ec{
  display: flex;
  flex-direction: column;
  max-height: calc(90vh - 48px);
  --ec-modal-max-w: 750px;
}
.shell #destekTalepDetayModal.modal-scrim.show .dstalep-detay-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
  padding: 0;
}

/* ── Müşteri bildirimler (shell main) ───────────────────────────────────── */
.shell main .mbildir-pill-xs.support-pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  font-size: 9px;
  padding: 2px 7px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.shell main .mbildir-pill-xs.support-pill i{ font-size: 8px; }
.shell main .card.mbildir-main{ margin-top: 18px; }
.shell main .mbildir-main__inner{ padding: 0 4px 8px; }
.shell main .mbildir-toolbar{ margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.shell main .mbildir-toolbar__text .mbildir-eyebrow{
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #64748b);
  margin: 0 0 6px;
}
.shell main .mbildir-filters{ margin-bottom: 8px; }
.shell main .mbildir-filters-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; }
.shell main .mbildir-search-wrap{ position: relative; }
.shell main .mbildir-search-wrap .input, .shell main .mbildir-search-wrap .form-control{
  padding-left: 40px;
}
.shell main .mbildir-search-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  font-size: 14px;
}
.shell main .mbildir-table-wrap{ margin-top: 12px; }
.shell main #bildirimlerListesi.mbildir-table-wrap tbody tr:hover, .shell main #bildirimlerListesi.mbildir-table-wrap tbody tr.table-warning:hover{
  background-color: #eff4f5 !important;
}
.shell main #bildirimlerListesi.mbildir-table-wrap tbody tr:hover td{
  background-color: #eff4f5 !important;
}
.shell main #bildirimlerListesi.mbildir-table-wrap tbody tr.table-warning, .shell main #bildirimlerListesi.mbildir-table-wrap tbody tr.table-warning td{
  background-color: #fffef5 !important;
}
.shell main .mbildir-row-title{
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title, #0f172a);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.shell main .mbildir-row-icon{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 182, 157, 0.12);
  color: var(--primary, #1ab69d);
  font-size: 1.1rem;
}
.shell main .mbildir-row-meta{ font-size: 12px; color: #94a3b8; margin-left: 4px; font-weight: 400; }
.shell main .mbildir-msg-preview{
  font-size: 0.85rem;
  color: #64748b;
  margin: 8px 0 0 50px;
  line-height: 1.45;
}
.shell main .mbildir-link-meta{ font-size: 0.85rem; max-width: 100%; }
.shell main .mbildir-link{
  color: var(--primary, #1ab69d);
  text-decoration: none;
  word-break: break-all;
}
.shell main .mbildir-link:hover{ text-decoration: underline; }
.shell main .mbildir-pill-row{ margin-top: 8px; }
.shell main .mbildir-actions{ min-width: 100px; white-space: nowrap; }
.shell main .mbildir-empty{
  text-align: center;
  padding: 56px 24px;
  border-radius: var(--radius, 14px);
  border: 1px solid var(--hairline, #e5e7eb);
  background: #fff;
}
.shell main .mbildir-empty__icon{ font-size: 56px; color: #d1d5db; margin-bottom: 16px; }
.shell main .mbildir-empty__title{ font-size: 1.1rem; font-weight: 600; color: #111827; margin: 0 0 8px; }
.shell main .mbildir-empty__text{ font-size: 14px; color: #6b7280; margin: 0; }
.shell main #bosSonucMesaji.mbildir-bos-sonuc{
  text-align: center;
  padding: 40px 20px;
  border-radius: var(--radius, 12px);
  border: 1px dashed var(--hairline, #e5e7eb);
  margin-top: 16px;
  background: #fafafa;
}
.shell main .mbildir-pagination .pagination .page-item.disabled .page-link{
  opacity: 0.65;
  pointer-events: none;
}

.shell #bildirimDetayModal.modal-scrim.show .modal.ec-modal.mbildir-bildirim-ec{
  display: flex;
  flex-direction: column;
  max-height: calc(90vh - 48px);
  --ec-modal-max-w: 900px;
}
.shell #bildirimDetayModal.modal-scrim.show .mbildir-detay-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.shell #bildirimTransferOnayModal.modal-scrim.show .mbildir-transfer-ec .modal-header{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
}
.shell #bildirimTransferOnayModal.modal-scrim.show .mbildir-transfer-ec .modal-header .modal-title-2, .shell #bildirimTransferOnayModal.modal-scrim.show .mbildir-transfer-ec .modal-header .modal-sub{
  color: rgba(255, 255, 255, 0.96);
}
.shell #bildirimTransferOnayModal.modal-scrim.show .mbildir-transfer-ec .modal-header .modal-close{
  color: #fff;
}
.shell #bildirimTransferOnayModal.modal-scrim.show .mbildir-transfer-ec .modal-icon{
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.shell #bildirimTransferOnayModal .mbildir-transfer-body .mbildir-transfer-summary{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.shell #bildirimTransferOnayModal .mbildir-transfer-summary__label{ font-size: 14px; opacity: 0.9; margin-bottom: 4px; }
.shell #bildirimTransferOnayModal .mbildir-transfer-summary__value{ font-size: 22px; font-weight: 700; margin-bottom: 12px; word-break: break-all; }
.shell #bildirimTransferOnayModal .mbildir-transfer-summary__hr{ border: 0; height: 1px; background: rgba(255,255,255,0.25); margin: 12px 0; opacity: 1; }
.shell #bildirimTransferOnayModal .mbildir-transfer-summary__sender{ font-size: 18px; font-weight: 600; }
.shell #bildirimTransferOnayModal .mbildir-transfer-info{ background: #eff6ff; border-radius: 10px; margin-bottom: 16px; }
.shell #bildirimTransferOnayModal .mbildir-transfer-kod-input{
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  font-weight: 700;
  padding: 16px;
  border-radius: 12px;
}
.shell #bildirimTransferOnayModal .mbildir-transfer-submit{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
}
.shell #bildirimTransferOnayModal .mbildir-transfer-submit:hover{
  filter: brightness(1.05);
}

/* Sipariş modalları: ec-modal ile tam yüksek gövde (detay) */
.shell #siparisDestekTalepDetayModal.modal-scrim.show .siparisler-detay-ec{
  display: flex;
  flex-direction: column;
  max-height: calc(90vh - 48px);
  --ec-modal-max-w: 750px;
}
.shell #siparisDestekTalepDetayModal.modal-scrim.show .siparisler-detay-modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.shell #iadeTalebiModal .siparisler-iade-ec .modal-header{
  background: linear-gradient(135deg, var(--warning-color, #f59e0b) 0%, var(--warning-color-dark, #d97706) 100%);
  border-bottom: none;
}
.shell #iadeTalebiModal .siparisler-iade-ec .modal-header .modal-title-2, .shell #iadeTalebiModal .siparisler-iade-ec .modal-header .modal-sub{
  color: rgba(255, 255, 255, 0.96);
}
.shell #iadeTalebiModal .siparisler-iade-ec .modal-header .modal-close{
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD v2 — musteri-panel.php yeni tasarım bileşenleri
   ════════════════════════════════════════════════════════════════ */

/* Profil tamamlama uyarı bandı */
.shell .mp-profile-alert{
  display: flex; align-items: center; gap: 14px;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--radius-lg); padding: 13px 18px; margin-bottom: 18px;
}
.shell .mp-profile-alert__ring{ position: relative; flex-shrink: 0; }
.shell .mp-profile-alert__ring svg{ display: block; }
.shell .mp-profile-alert__pct{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--text);
}
.shell .mp-profile-alert__body{ flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); }
.shell .mp-profile-alert__body strong{ color: var(--text); }
.shell .mp-profile-alert__btn{ flex-shrink: 0; }

/* Stat kartları şeridi */
.shell .mp-stat-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 18px;
}
@media (max-width: 900px) { .shell .mp-stat-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .shell .mp-stat-row{ grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.shell .mp-stat-card{
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s, transform .15s;
  box-shadow: var(--shadow-sm);
}
.shell .mp-stat-card:hover{
  box-shadow: var(--shadow); border-color: var(--border-strong);
  transform: translateY(-2px); text-decoration: none; color: inherit;
}
.shell .mp-stat-card__icon{
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.shell .mp-stat-card__icon svg{ width: 20px; height: 20px; }
.shell .mp-stat-card__icon--indigo{ background: #e0e7ff; color: #4338ca; }
.shell .mp-stat-card__icon--emerald{ background: #d1fae5; color: #047857; }
.shell .mp-stat-card__icon--violet{ background: #ede9fe; color: #6d28d9; }
.shell .mp-stat-card__icon--amber{ background: #fef3c7; color: #b45309; }
.shell .mp-stat-card__icon--rose{ background: #fee2e2; color: #b91c1c; }
.shell .mp-stat-card__body{ min-width: 0; }
.shell .mp-stat-card__val{ font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.shell .mp-stat-card__lbl{ font-size: 12px; color: var(--text-3); margin-top: 2px; }
.shell .mp-stat-card__hint{ font-size: 11px; color: #b45309; font-weight: 600; margin-top: 3px; }

/* Nokta göstergesi */
.shell .mp-dot{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.shell .mp-dot--warn{ background: #f59e0b; }

/* İki sütun ana grid */
.shell .mp-dash-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 16px; margin-bottom: 18px; align-items: start;
}
@media (max-width: 960px) { .shell .mp-dash-grid{ grid-template-columns: 1fr; } }
.shell .mp-dash-grid--equal{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .shell .mp-dash-grid--equal{ grid-template-columns: 1fr; } }
.shell .mp-dash-col{ display: flex; flex-direction: column; gap: 14px; }

/* Sipariş listesi */
.shell .mp-order-list{ display: flex; flex-direction: column; gap: 2px; }
.shell .mp-order-row{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  text-decoration: none; color: inherit; transition: background .15s;
  border-radius: var(--radius);
}
.shell .mp-order-row:nth-child(even){ background: var(--surface-2); }
.shell .mp-order-row:hover{ background: #eef2f7; text-decoration: none; color: inherit; }
.shell .mp-order-row__icon{
  width: 36px; height: 36px; flex-shrink: 0;
  background: #e0e7ff; color: #4338ca;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.shell .mp-order-row__icon svg{ width: 16px; height: 16px; }
.shell .mp-order-row__body{ flex: 1; min-width: 0; }
.shell .mp-order-row__no{ font-size: 14px; font-weight: 600; color: var(--text); }
.shell .mp-order-row__meta{ font-size: 12px; color: var(--text-3); margin-top: 2px; }
.shell .mp-order-row__right{ display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.shell .mp-order-row__price{ font-size: 14px; font-weight: 700; color: var(--text); }

/* Mini strip: favoriler, yorumlar, sorular, faturalar */
.shell .mp-mini-strip{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.shell .mp-mini-tile{
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 13px;
  text-decoration: none; color: inherit;
  transition: background .15s, border-color .15s;
  font-size: 13px; font-weight: 500;
}
.shell .mp-mini-tile:hover{ background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; color: inherit; }
.shell .mp-mini-tile__icon{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.shell .mp-mini-tile__icon svg{ width: 15px; height: 15px; }
.shell .mp-mini-tile__icon--rose{ background: #fee2e2; color: #dc2626; }
.shell .mp-mini-tile__icon--amber{ background: #fef3c7; color: #b45309; }
.shell .mp-mini-tile__icon--indigo{ background: #e0e7ff; color: #4338ca; }
.shell .mp-mini-tile__icon--slate{ background: #f1f5f9; color: #475569; }
.shell .mp-mini-tile__lbl{ flex: 1; min-width: 0; }
.shell .mp-mini-tile__chev{ width: 14px; height: 14px; flex-shrink: 0; color: var(--text-3); }

/* Badge sistemi */
.shell .mp-badge{
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap; line-height: 1.6;
}
.shell .mp-badge--success{ background: #d1fae5; color: #065f46; }
.shell .mp-badge--warn{ background: #fef3c7; color: #92400e; }
.shell .mp-badge--danger{ background: #fee2e2; color: #991b1b; }
.shell .mp-badge--info{ background: #dbeafe; color: #1e40af; }
.shell .mp-badge--primary{ background: var(--primary-50, #e8f8f1); color: var(--primary-700, #0d8a64); }
.shell .mp-badge--muted{ background: #f1f5f9; color: var(--text-3); }
.shell .mp-badge--pill{ border-radius: 20px; min-width: 20px; justify-content: center; }

/* Bildirim listesi */
.shell .mp-notif-list{ display: flex; flex-direction: column; gap: 2px; }
.shell .mp-notif-item{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 18px;
  cursor: pointer; transition: background .15s;
  border-radius: var(--radius);
}
.shell .mp-notif-item:hover{ background: var(--surface-2); }
.shell .mp-notif-item--unread{ background: #f0fdf4; }
.shell .mp-notif-item--unread:hover{ background: #dcfce7; }
.shell .mp-notif-item__dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.shell .mp-notif-item__body{ flex: 1; min-width: 0; }
.shell .mp-notif-item__title{ font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .mp-notif-item__time{ font-size: 11px; color: var(--text-3); margin-top: 2px; }
.shell .mp-unread-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 4px; }

/* Destek talep listesi */
.shell .mp-support-list{ display: flex; flex-direction: column; gap: 2px; }
.shell .mp-support-row{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  text-decoration: none; color: inherit; transition: background .15s;
  border-radius: var(--radius);
}
.shell .mp-support-row:hover{ background: var(--surface-2); text-decoration: none; color: inherit; }
.shell .mp-support-row__body{ flex: 1; min-width: 0; }
.shell .mp-support-row__title{ font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .mp-support-row__meta{ font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* Hesap özet kartı */
.shell .mp-account-rows{ padding: 0; }
.shell .mp-account-row{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.shell .mp-account-row:last-child{ border-bottom: none; }
.shell .mp-account-row__lbl{ color: var(--text-3); flex-shrink: 0; width: 70px; font-size: 12px; }
.shell .mp-account-row__val{ color: var(--text); flex: 1; font-weight: 500; min-width: 0; }
.shell .mp-account-row__val--trunc{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .mp-account-footer{
  padding: 11px 18px; border-top: 1px solid var(--border);
  background: var(--surface-2); display: flex; gap: 8px;
}

/* Empty state */
.shell .mp-empty{
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 20px; gap: 10px; color: var(--text-3); text-align: center;
}
.shell .mp-empty--sm{ padding: 20px 18px; }
.shell .mp-empty__icon{ width: 44px; height: 44px; opacity: .3; }
.shell .mp-empty__icon svg{ width: 100%; height: 100%; }
.shell .mp-empty__text{ margin: 0; font-size: 14px; color: var(--text-3); }

/* Hızlı erişim grid */
.shell .mp-quicknav-card .mp-card-head{ border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.shell .mp-quicknav-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1px; background: var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden;
}
.shell .mp-qn-tile{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px 12px; background: var(--surface);
  text-decoration: none; color: inherit; transition: background .15s;
  position: relative; text-align: center;
}
.shell .mp-qn-tile:hover{ background: var(--surface-2); text-decoration: none; color: inherit; }
.shell .mp-qn-tile__icon{
  width: 44px; height: 44px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.shell .mp-qn-tile__icon svg{ width: 20px; height: 20px; }
.shell .mp-qn-tile--indigo  .mp-qn-tile__icon{ background: #e0e7ff; color: #4338ca; }
.shell .mp-qn-tile--emerald .mp-qn-tile__icon{ background: #d1fae5; color: #047857; }
.shell .mp-qn-tile--rose    .mp-qn-tile__icon{ background: #fee2e2; color: #dc2626; }
.shell .mp-qn-tile--violet  .mp-qn-tile__icon{ background: #ede9fe; color: #6d28d9; }
.shell .mp-qn-tile--amber   .mp-qn-tile__icon{ background: #fef3c7; color: #b45309; }
.shell .mp-qn-tile--cyan    .mp-qn-tile__icon{ background: #cffafe; color: #0e7490; }
.shell .mp-qn-tile--slate   .mp-qn-tile__icon{ background: #f1f5f9; color: #475569; }
.shell .mp-qn-tile__lbl{ font-size: 12px; font-weight: 600; color: var(--text); }
.shell .mp-qn-badge{
  position: absolute; top: 9px; right: 9px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Küçük ikon (başlıklar içi) */
.shell .mp-icon-sm{ width: 15px; height: 15px; vertical-align: middle; margin-right: 5px; }

/* ── musteri-domainlerim (domainlers-*) ─────────────────────────────────── */
.shell main .domainlers-stat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  .shell main .domainlers-stat-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .shell main .domainlers-stat-grid{ grid-template-columns: 1fr; }
}
.shell main .domainlers-stat-item.panel-stat-tile{
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}
.shell main .domainlers-stat-item .panel-stat-tile__icon{ margin-bottom: 0; }
.shell main .domainlers-tab-badge{
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary, #1ab69d);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.shell main .domainlers-chip-count{
  font-size: 12px !important;
  padding: 6px 12px !important;
}
.shell main .domainler-tab-content{ padding-top: 4px; }
.shell main .domainler-tab-pane-inner{ padding: 8px 0 16px; }
.shell main .domainlers-tr-pending td{
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.06)) !important;
}
.shell main .domainlers-transfer-ico{ color: #6366f1; font-size: 16px; }
.shell main .domainlers-transfer-name{ color: #4338ca; }
.shell main .domainlers-cell-title{
  font-weight: 600;
  color: var(--title-color, #0f172a);
}
.shell main .domainlers-cell-muted{
  color: var(--text-3, #64748b);
  font-size: 14px;
}
.shell main .domainlers-pill-transfer{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff !important;
}
.shell main .domainlers-days-warn{
  color: #b45309;
  font-weight: 600;
  font-size: 14px;
}
.shell main .domainlers-lock-ico{ font-size: 16px; }
.shell main .domainlers-lock-ico--on{ color: #059669; }
.shell main .domainlers-lock-ico--off, .shell main .domainlers-lock-ico--muted{ color: var(--text-3, #94a3b8); }
.shell main .domainlers-th-lock{ width: 72px; white-space: nowrap; }
.shell main .domainlers-th-actions{ min-width: 168px; }
.shell main .domainlers-durum-pill{
  font-size: 12px !important;
  padding: 6px 12px !important;
}
.shell main .domainlers-dot{ font-size: 7px !important; opacity: .88; vertical-align: middle; }
.shell main .domainlers-btn-accept{ font-weight: 600; }
.shell main .domainlers-transfer-meta{ margin-top: 4px; font-size: 12px; }
.shell main .domainlers-filter-empty{
  margin-top: 0;
  padding: 28px 16px;
}
.shell main .domainlers-list-intro .section-sub{ margin-bottom: 0; }
.shell main .domainler-main .domainler-tab-pane-inner .row.g-3 .card{
  margin-top: 0;
}
.shell main .domainlers-opt-transfer{ font-weight: 600; color: #5b21b6; }

/* ── musteri-websitelerim ───────────────────────────────────────────────── */
.shell main .websitelerim-domain-ico{ color: var(--primary, #1ab69d); }
.shell main .websitelerim-th-actions{ min-width: 150px; white-space: nowrap; }
.shell main .websitelerim-tab-pane-inner{ padding: 8px 0 18px; }
.shell main .websitelerim-filter-empty-msg{ margin-top: 16px; }
.shell main .order-action-btn.order-action-btn--in-empty{
  border-radius: 10px;
  text-decoration: none;
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-container{
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-header{
  display: grid;
  grid-template-columns: 2fr 1.5fr 150px 120px 180px;
  gap: 15px;
  padding: 15px 20px;
  background: var(--smoke-color);
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--title-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-body{ display: flex; flex-direction: column; }
.shell main .musteri-websitelerim-scope .hizmet-tablo-row{
  display: grid;
  grid-template-columns: 2fr 1.5fr 150px 120px 180px;
  gap: 15px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
  transition: background-color 0.2s;
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-row:hover{ background-color: var(--smoke-color); }
.shell main .musteri-websitelerim-scope .hizmet-tablo-row:last-child{ border-bottom: none; }
.shell main .musteri-websitelerim-scope .hizmet-tablo-cell{ display: flex; align-items: center; }
.shell main .musteri-websitelerim-scope .hizmet-tablo-paket{
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-paket-adi{
  font-weight: 600;
  color: var(--title-color);
  font-size: 15px;
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-paket-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-tarih{
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-tarih-item{
  display: flex;
  align-items: center;
  color: var(--body-color);
}
.shell main .musteri-websitelerim-scope .hizmet-tablo-kalan{ flex-direction: column; gap: 6px; }
.shell main .musteri-websitelerim-scope .hizmet-tablo-kalan-container{ width: 100%; }
.shell main .musteri-websitelerim-scope .hizmet-tablo-durum{ justify-content: center; }
.shell main .musteri-websitelerim-scope .hizmet-tablo-actions{ justify-content: center; gap: 8px; }
@media (max-width: 768px) {
  .shell main .musteri-websitelerim-scope .hizmet-tablo-header, .shell main .musteri-websitelerim-scope .hizmet-tablo-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-header{ display: none; }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-row{
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 15px;
  }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-cell{ justify-content: flex-start; }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-cell::before{
    content: attr(data-label);
    font-weight: 600;
    color: var(--title-color);
    margin-right: 10px;
    min-width: 100px;
  }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-paket::before{ content: 'Paket: '; }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-tarih::before{ content: 'Tarihler: '; }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-durum::before{ content: 'Durum: '; }
  .shell main .musteri-websitelerim-scope .hizmet-tablo-actions::before{ content: 'İşlemler: '; }
}
.shell main .musteri-websitelerim-scope .service-card{
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
  background: #fff;
}
.shell main .musteri-websitelerim-scope .service-card-header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.shell main .musteri-websitelerim-scope .service-title{
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.shell main .musteri-websitelerim-scope .service-meta{
  font-size: 14px;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.shell main .musteri-websitelerim-scope .service-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
}
.shell main .musteri-websitelerim-scope .service-icon{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--title-color);
  font-weight: 500;
}
.shell main .musteri-websitelerim-scope .service-progress{
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.shell main .musteri-websitelerim-scope .service-progress-bar{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
}
.shell main .musteri-websitelerim-scope .service-feature{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  height: 100%;
}
.shell main .musteri-websitelerim-scope .service-feature i{
  color: #22c55e;
  margin-top: 4px;
}
.shell main .musteri-websitelerim-scope .service-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.shell main .musteri-websitelerim-scope .service-actions .btn{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .shell main .musteri-websitelerim-scope .service-card{ padding: 22px; }
}
.shell main .musteri-websitelerim-scope .collapsed-service-card{ transition: all 0.3s ease; }
.shell main .musteri-websitelerim-scope .collapsed-service-header{
  user-select: none;
  transition: background-color 0.2s;
}
.shell main .musteri-websitelerim-scope .collapsed-service-header:hover{
  background-color: #f8f9fa;
  border-radius: 15px;
  padding: 8px;
  margin: -8px;
}
.shell main .musteri-websitelerim-scope .collapse-service-icon{ transition: transform 0.3s ease; }
.shell main .musteri-websitelerim-scope .collapsed-service-card.expanded .collapse-service-icon{
  transform: rotate(180deg);
}
.shell main .musteri-websitelerim-scope .collapse-service-content{
  animation: wsSlideDownSvc 0.3s ease;
  overflow: hidden;
}
@keyframes wsSlideDownSvc {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 2000px; }
}
.shell main .musteri-websitelerim-scope .sure-secenek-card{
  border: 2px solid #e4e6ef;
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  margin-bottom: 10px;
}
.shell main .musteri-websitelerim-scope .sure-secenek-card:hover{
  border-color: var(--theme-color);
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.shell main .musteri-websitelerim-scope .sure-secenek-card.selected{
  border-color: var(--theme-color);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(34, 211, 238, 0.1) 100%);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.shell main .musteri-websitelerim-scope .hizmet-destek-talep-btn{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  font-size: 16px;
  transition: all 0.3s ease;
}
.shell main .musteri-websitelerim-scope .hizmet-destek-talep-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.shell .vanilla-modal-text{ font-size: 14px !important; }
.shell .vanilla-modal-body, .shell .vanilla-modal-body *:not(.vanilla-modal-title):not(.vanilla-modal-subtitle):not(.vanilla-modal-close):not(button):not(input):not(select):not(textarea):not(.badge):not(.support-pill):not(i):not(.fa):not(.fas):not(.far):not(.fab){
  font-size: 14px !important;
}
.shell .vanilla-modal-body table, .shell .vanilla-modal-body table td, .shell .vanilla-modal-body table th, .shell .vanilla-modal-body table td *, .shell .vanilla-modal-body table th *{ font-size: 13px !important; }
.shell .vanilla-modal-body div, .shell .vanilla-modal-body span, .shell .vanilla-modal-body p, .shell .vanilla-modal-body label, .shell .vanilla-modal-body small, .shell .vanilla-modal-body a{ font-size: 13px !important; }
.shell .vanilla-modal-body h1, .shell .vanilla-modal-body h2, .shell .vanilla-modal-body h3, .shell .vanilla-modal-body h4, .shell .vanilla-modal-body h5, .shell .vanilla-modal-body h6{ font-size: inherit !important; }

/* Websitelerim ec-modal içerik tipografisi (= eski vanilla-modal-body) */
.shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body *:not(.modal-title-2):not(.modal-sub):not(.modal-close):not(button):not(input):not(select):not(textarea):not(.badge):not(.support-pill):not(i):not(.fa):not(.fas):not(.far):not(.fab){
  font-size: 14px !important;
}
.shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body table, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body table td, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body table th, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body table td *, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body table th *{ font-size: 13px !important; }
.shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body div, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body span, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body p, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body label, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body small, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body a{ font-size: 13px !important; }
.shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body h1, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body h2, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body h3, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body h4, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body h5, .shell .modal-scrim.modal-scrim--global.websitelerim-ec-fill > .modal.ec-modal .modal-body h6{ font-size: inherit !important; }

.shell main .musteri-websitelerim-scope .websitelerim-main .row.g-3 .card{ margin-top: 0; }

/* ================================================================
   E-TICARET MUSTERI SAYFALARI - shell-scoped namespace
   - .shell main .es-*    → siparislerim & siparis-detay
   - .shell main .ef-*    → faturalarim
   ================================================================ */

/* ---------- E-Ticaret: Sipariş listesi (.es-*) + faturalar (.ef-*) ---------- */
.shell main .es-page-header, .shell main .ef-page-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.shell main .es-page-header h1, .shell main .ef-page-header h1{
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: var(--text);
}

/* Filtre çubuğu — sipariş (tek satır: select + arama + buton) */
.shell main .es-filters-row, .shell main .ef-filters-row, .shell main .es-filters, .shell main .ef-filters{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
}
.shell main .es-filter-select, .shell main .ef-filter-select{
  flex: 0 0 20%;
  width: 20%;
  min-width: 0;
  max-width: 20%;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  box-sizing: border-box;
}
.shell main .es-filter-btn, .shell main .ef-filter-btn{
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.shell main .es-filter-btn:hover, .shell main .es-filter-btn.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.shell main .ef-filter-btn:hover, .shell main .ef-filter-btn.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.shell main .es-search, .shell main .ef-search{
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  box-sizing: border-box;
}

/* Liste kartı — sipariş + fatura ortak */
.shell main .es-card, .shell main .ef-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .18s ease;
}
.shell main .es-card:hover, .shell main .ef-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}
.shell main .es-card-head, .shell main .ef-card-head{
  padding: 13px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.shell main .es-card-head .es-no, .shell main .ef-card-head .ef-no{ font-size: 14px; font-weight: 700; color: var(--text); }
.shell main .es-card-head .es-tarih, .shell main .ef-card-head .ef-tarih{ font-size: 12px; color: var(--text-3); }
.shell main .es-card-body, .shell main .ef-card-body{
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.shell main .es-card-body .es-info, .shell main .ef-card-body .ef-info{ flex: 1; min-width: 200px; }
.shell main .es-info .es-products-count{ font-size: 12.5px; color: var(--text-3); }
.shell main .es-info .es-toplam{ font-size: 17px; font-weight: 800; color: var(--text); margin-top: 4px; }
.shell main .ef-info .ef-siparis{ font-size: 12.5px; color: var(--text-3); }
.shell main .ef-info .ef-toplam{ font-size: 18px; font-weight: 800; color: var(--text); margin-top: 4px; }
.shell main .ef-info .ef-toplam.iade{ color: var(--danger); }

/* Sipariş kartı thumb satırı */
.shell main .es-thumbs{ display: flex; gap: 6px; }
.shell main .es-thumb{
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
}

/* Badge'ler */
.shell main .es-badge, .shell main .ef-badge{
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Aksiyon butonları */
.shell main .es-actions, .shell main .ef-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.shell main .es-btn, .shell main .ef-btn{
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shell main .es-btn-primary, .shell main .ef-btn-primary{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.shell main .es-btn-primary:hover, .shell main .ef-btn-primary:hover{ background: var(--primary-700); border-color: var(--primary-700); }
.shell main .es-btn-secondary, .shell main .ef-btn-secondary{
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
}
.shell main .es-btn-secondary:hover, .shell main .ef-btn-secondary:hover{ background: var(--surface-2); }

/* Sipariş listesi — tablo görünümü (sadece es-card; ef-card etkilenmez) */
.shell main .es-list{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  gap: 0 !important;
}
.shell main .es-list .es-card{
  display: grid;
  grid-template-columns: minmax(180px, 220px) auto minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  transition: background .12s ease;
}
.shell main .es-list .es-card:first-child{ border-top: 0; }
.shell main .es-list .es-card:nth-child(even){ background: var(--surface-2); }
.shell main .es-list .es-card:hover{
  background: #eef2f7;
  transform: none;
  box-shadow: none;
}
.shell main .es-list .es-card-head, .shell main .es-list .es-card-body{ display: contents; }
.shell main .es-list .es-card-head > div:nth-child(1){
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  margin: -12px 0 -12px -16px;
  background: #eef2f7;
  border-right: 1px solid var(--border);
  border-radius: 0;
}
.shell main .es-list .es-card:nth-child(even) .es-card-head > div:nth-child(1){ background: #e4ebf3; }
.shell main .es-list .es-card:hover .es-card-head > div:nth-child(1){ background: #dde5ef; }
.shell main .es-list .es-card-head > div:nth-child(2){
  grid-column: 4;
  justify-content: flex-end !important;
  padding: 0; background: transparent; border: 0;
}
.shell main .es-list .es-thumbs{ grid-column: 2; }
.shell main .es-list .es-card-body .es-info{ grid-column: 3; min-width: 0; }
.shell main .es-list .es-actions{ grid-column: 5; flex-wrap: nowrap; }
.shell main .es-list .es-info .es-toplam{ font-size: 15px; margin-top: 2px; }
.shell main .es-list .es-thumb{ width: 40px; height: 40px; }
.shell main .es-list .es-thumbs{ gap: 4px; }
.shell main .es-list .es-thumbs .es-thumb:nth-child(n+3){ display: none; }

@media (max-width: 820px) {
  .shell main .es-list .es-card{
    grid-template-columns: 1fr auto;
    grid-auto-flow: row;
    row-gap: 8px;
  }
  .shell main .es-list .es-card-head > div:nth-child(1){ grid-column: 1; }
  .shell main .es-list .es-card-head > div:nth-child(2){ grid-column: 2; }
  .shell main .es-list .es-thumbs{ grid-column: 1 / -1; }
  .shell main .es-list .es-card-body .es-info{ grid-column: 1; }
  .shell main .es-list .es-actions{ grid-column: 2; }
  .shell main .es-list .es-thumbs .es-thumb:nth-child(n+3){ display: block; }
}

/* Boş durum */
.shell main .es-empty, .shell main .ef-empty{
  text-align: center;
  padding: 56px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.shell main .es-empty svg, .shell main .ef-empty svg{ color: var(--border-strong); margin-bottom: 14px; }
.shell main .es-empty h3, .shell main .ef-empty h3{ font-size: 17px; color: var(--text); margin: 0 0 8px; }
.shell main .es-empty p, .shell main .ef-empty p{ color: var(--text-3); margin-bottom: 18px; }

/* Fatura — istatistik kartları */
.shell main .ef-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.shell main .ef-stat{
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.shell main .ef-stat .ef-stat-num{ font-size: 26px; font-weight: 800; color: var(--text); }
.shell main .ef-stat .ef-stat-label{ font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
@media (max-width: 600px) {
  .shell main .ef-stats{ grid-template-columns: 1fr; }
}

/* ---------- E-Ticaret: Sipariş Detay (.es-detay-*) ---------- */
.shell main .es-detay-back{
  color: var(--text-3);
  text-decoration: none;
  font-size: 13px;
}
.shell main .es-detay-back:hover{ color: var(--text); }
.shell main .es-detay-grid{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}
@media (max-width: 900px) {
  .shell main .es-detay-grid{ grid-template-columns: 1fr; }
}
.shell main .es-block{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.shell main .es-block h3{
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--text);
}
.shell main .es-info-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) {
  .shell main .es-info-grid{ grid-template-columns: 1fr; }
}
.shell main .es-info-item .lbl{
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  margin-bottom: 4px;
}
.shell main .es-info-item .val{
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
}

.shell main .es-status-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: linear-gradient(90deg, var(--primary-50), var(--primary-100));
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.shell main .es-status-bar .label{
  font-size: 11px;
  color: var(--primary-700);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

/* Ürün satırı */
.shell main .es-product-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.shell main .es-product-row:last-child{ border-bottom: none; }
.shell main .es-product-row .img{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.shell main .es-product-row .info{ flex: 1; min-width: 0; }
.shell main .es-product-row .name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.shell main .es-product-row .qty{
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.shell main .es-product-row .price{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Özet (sağ kolon) */
.shell main .es-summary-rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shell main .es-summary-rows .sr{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-2);
}
.shell main .es-summary-rows .sr.discount{ color: var(--danger); }
.shell main .es-summary-rows .sr.shipping .free{
  color: var(--primary);
  font-weight: 700;
}
.shell main .es-total-row{
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 2px solid var(--border);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
}
.shell main .es-detay-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.shell main .es-action-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid;
  background: var(--surface);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}
.shell main .es-action-btn.danger{ color: var(--danger); border-color: #fecaca; }
.shell main .es-action-btn.danger:hover{ background: #fef2f2; }
.shell main .es-action-btn.primary{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.shell main .es-action-btn.primary:hover{ background: var(--primary-700); }
.shell main .es-action-btn.secondary{ color: var(--text); border-color: var(--border); }
.shell main .es-action-btn.secondary:hover{ background: var(--surface-2); }

/* Timeline (sipariş geçmişi) */
.shell main .es-timeline{
  position: relative;
  padding-left: 28px;
}
.shell main .es-timeline::before{
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}
.shell main .es-timeline-item{
  position: relative;
  margin-bottom: 14px;
}
.shell main .es-timeline-item::before{
  content: '';
  position: absolute;
  left: -24px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-strong);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--border-strong);
}
.shell main .es-timeline-item.done::before{
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}
.shell main .es-timeline-item .ev{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.shell main .es-timeline-item .tm{
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ===========================================================================
   MOBILE REFINEMENTS — 2026-05-19
   Müşteri panel sayfaları için son düzeltmeler (panel / hesap-bilgileri /
   eticaret-siparislerim ve diğer ortak shell sayfaları).
   =========================================================================== */

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
  .shell .account-page-wrap .container{ padding-left: 12px; padding-right: 12px; }
  .shell .main{ padding: 16px 14px 80px !important; }
  .shell .hero, .shell .mp-hero{ padding: 18px 16px; border-radius: 14px; }
  .shell .hero-grid, .shell .mp-hero-grid{
    grid-template-columns: auto 1fr;
    gap: 14px 16px;
  }
  .shell .hero-side{
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 6px;
  }
  .shell .hero-side .user-name{ font-size: 14px; }
  .shell .hero-info h1, .shell .mp-hero-info h1{ font-size: 20px; }
  .shell .hero-info .subtitle, .shell .mp-hero-info .mp-hero-sub{ font-size: 13px; }
  .shell .hero-info .meta-row{ gap: 8px 12px; }
  .shell .meta-item{ font-size: 12px; }
  .shell .tier-badge{ font-size: 11.5px; padding: 4px 10px; }

  /* Stat cards — orta breakpoint için daha kompakt */
  .shell .mp-stat-card{ padding: 12px; gap: 10px; }
  .shell .mp-stat-card__icon{ width: 38px; height: 38px; }
  .shell .mp-stat-card__val{ font-size: 19px; }

  /* Kart başlıkları */
  .shell .mp-card-head{
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
  }
  .shell .mp-card-head .btn{ padding: 6px 10px; font-size: 12px; }
  .shell .mp-card-title{ font-size: 14.5px; }
  .shell .mp-card-meta{ font-size: 12px; }
}

/* ── Telefon (≤576px) ── */
@media (max-width: 576px) {
  .shell .account-page-wrap .container{ padding-left: 8px; padding-right: 8px; }
  .shell .main{ padding: 12px 10px 80px !important; }

  /* Hero — ikon sol üst köşede absolute; içerik ikon yokmuş gibi akar */
  .shell .hero, .shell .mp-hero{ position: relative; padding: 16px 14px; }
  .shell .hero-grid, .shell .mp-hero-grid{
    display: block;
    text-align: left;
  }
  .shell .hero-icon, .shell .mp-hero-icon{
    position: absolute;
    top: 0;
    left: 0;
    width: 56px; height: 56px;
    margin: 0;
    border-radius: 10px;
    flex-shrink: 0;
    opacity: 0.35;
    pointer-events: none;
  }
  .shell .hero-icon svg, .shell .mp-hero-icon svg{ width: 32px; height: 32px; }
  .shell .avatar-wrap{
    position: absolute;
    top: -10px;
    left: -10px;
    width: 60px; height: 60px;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    padding: 3px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  }
  .shell .avatar-wrap img{ border-radius: 11px; }
  /* Hesap bilgileri sayfası: profil avatarı kart sınırlarının dışına taşabilsin */
  .shell .hero:has(> .hero-grid > .avatar-wrap), .shell .mp-hero:has(> .mp-hero-grid > .avatar-wrap){
    overflow: visible;
  }
  /* Avatar dışarı taşarken arka plan dekoratif daireleri gizle (mobilde küçük ekran karışıklığı yapmasın) */
  .shell .hero:has(> .hero-grid > .avatar-wrap)::before, .shell .hero:has(> .hero-grid > .avatar-wrap)::after, .shell .mp-hero:has(> .mp-hero-grid > .avatar-wrap)::before, .shell .mp-hero:has(> .mp-hero-grid > .avatar-wrap)::after{ display: none; }
  .shell .hero-info{ display: block; min-width: 0; }
  .shell .hero-info h1, .shell .mp-hero-info h1{
    font-size: 18px;
    line-height: 1.25;
    margin: 0;
  }
  .shell .hero-info .subtitle, .shell .mp-hero-info .mp-hero-sub{
    margin-top: 6px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shell .hero-info .meta-row{ margin-top: 8px; }
  .shell .hero-side{ margin-top: 10px; }
  .shell .hero-info .meta-row{ gap: 6px 10px; }
  .shell .meta-item svg{ width: 12px; height: 12px; }

  .shell .hero-side{
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 10px;
  }
  .shell .hero-side .user-name{ width: 100%; font-size: 13.5px; }

  /* Sayfa-içi kartlar */
  .shell .mp-card{ border-radius: 12px; }
  .shell .mp-card-body{ padding: 14px 14px; }
  .shell .mp-card-head{ padding: 12px 14px; }

  /* Sipariş satırı — fiyat ve durum alt alta */
  .shell .mp-order-row{ padding: 12px 14px; gap: 10px; }
  .shell .mp-order-row__icon{ width: 32px; height: 32px; }
  .shell .mp-order-row__no{ font-size: 13px; }
  .shell .mp-order-row__meta{ font-size: 11px; }
  .shell .mp-order-row__right{ gap: 4px; }
  .shell .mp-order-row__price{ font-size: 13px; }

  /* Bildirim & destek satırları */
  .shell .mp-notif-item, .shell .mp-support-row{ padding: 10px 12px; }
  .shell .mp-notif-item__title, .shell .mp-support-row__title{ font-size: 12.5px; }
  .shell .mp-notif-item__time, .shell .mp-support-row__meta{ font-size: 10.5px; }

  /* Profile slider */
  .shell .profile-progress{ padding: 14px; }
  .shell .pp-slide{ padding: 10px 12px 22px; gap: 10px; flex-wrap: wrap; }
  .shell .pp-title{ font-size: 13.5px; }
  .shell .pp-sub{ font-size: 12px; }
  .shell .pp-action{ font-size: 11px; }
  .shell .progress-text .t1{ font-size: 13.5px; }
  .shell .progress-text .t2{ font-size: 12px; }

  /* Tab çubuğu hesap-bilgileri sayfası */
  .shell .tab, .shell .mp-tab{
    padding: 12px 14px;
    font-size: 13px;
  }

  /* Sipariş arama / filtre */
  .shell main .es-search-row{ flex-direction: column; gap: 8px; }
  .shell main .es-search-btn{ width: 100%; padding: 12px; }
  .shell main .es-status-tabs{
    padding: 4px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .shell main .es-status-tabs::-webkit-scrollbar{ display: none; }
  .shell main .es-tab{ padding: 8px 12px; font-size: 12.5px; flex-shrink: 0; }

  /* Genel butonlar */
  .shell .btn.btn-sm{ padding: 8px 12px; font-size: 12.5px; }
}

/* ── Küçük telefon (≤420px) ── */
@media (max-width: 420px) {
  .shell .mp-stat-row{ grid-template-columns: 1fr 1fr; }
  .shell .mp-stat-card{ padding: 10px; }
  .shell .mp-stat-card__icon{ width: 34px; height: 34px; }
  .shell .mp-stat-card__val{ font-size: 17px; }
  .shell .mp-stat-card__lbl{ font-size: 11px; }
  .shell .mp-stat-card__hint{ font-size: 10px; }

  .shell .hero-info h1, .shell .mp-hero-info h1{ font-size: 17px; line-height: 1.25; }
  .shell .hero-info .subtitle, .shell .mp-hero-info .mp-hero-sub{ font-size: 12.5px; }
  .shell .hero-icon, .shell .mp-hero-icon{ top: 0; left: 0; width: 50px; height: 50px; border-radius: 9px; }
  .shell .hero-icon svg, .shell .mp-hero-icon svg{ width: 28px; height: 28px; }
  .shell .avatar-wrap{ top: -10px; left: -10px; width: 54px; height: 54px; opacity: 1; pointer-events: auto; }

  /* Sipariş kartı butonları full-width */
  .shell .eo-actions .eo-btn{ flex: 1 1 100%; min-width: 0; justify-content: center; }
}

/* ── Touch hedef boyutu (≤768px) ── */
@media (max-width: 768px) {
  .shell .btn{ min-height: 38px; }
  .shell .btn.btn-sm{ min-height: 34px; }
  .shell .tab, .shell .mp-tab{ min-height: 44px; }
  .shell .nav-item{ min-height: 44px; }
}

/* ===========================================================================
   FATURALARIM / FAVORILERIM / KUPONLARIM — Mobile (2026-05-19)
   =========================================================================== */

/* ── Faturalarım ── */
@media (max-width: 768px) {
  .shell main .ef-stats{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .shell main .ef-stat{ padding: 12px 10px; }
  .shell main .ef-stat .ef-stat-num{ font-size: 20px; }
  .shell main .ef-stat .ef-stat-label{ font-size: 11.5px; }

  .shell main .ef-filters-row{
    flex-wrap: wrap;
    padding: 10px;
    gap: 6px;
  }
  .shell main .ef-filter-select{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .shell main .ef-search{ flex: 1 1 60%; }
  .shell main .ef-filters-row .ef-btn{ flex: 0 0 auto; }
}
@media (max-width: 576px) {
  .shell main .ef-stats{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .shell main .ef-stat{ padding: 10px 8px; }
  .shell main .ef-stat .ef-stat-num{ font-size: 17px; }
  .shell main .ef-stat .ef-stat-label{ font-size: 10.5px; }

  .shell main .ef-card-head{
    padding: 11px 13px;
    gap: 6px;
  }
  .shell main .ef-card-body{
    padding: 13px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .shell main .ef-card-body .ef-info{ width: 100%; min-width: 0; }
  .shell main .ef-info .ef-toplam{ font-size: 17px; }
  .shell main .ef-actions{
    width: 100%;
    flex-wrap: wrap;
  }
  .shell main .ef-actions .ef-btn{ flex: 1 1 calc(50% - 4px); justify-content: center; padding: 9px 10px; font-size: 12px; }

  .shell main .ef-filters-row .ef-btn{ flex: 1 1 100%; justify-content: center; }
  .shell main .ef-search{ flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .shell main .ef-actions .ef-btn{ flex: 1 1 100%; }
}

/* ── Favorilerim ── */
@media (max-width: 768px) {
  .shell main .favoriler-toolbar{ gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
  .shell main .favoriler-filters{ padding: 14px 14px 4px; margin-bottom: 16px; }
  .shell main .favorite-card-media{ height: 170px; }
  .shell main .favorite-card-body{ padding: 16px 16px 18px; }
}
@media (max-width: 576px) {
  .shell main .favoriler-main__inner{ padding: 14px 12px 18px; }
  .shell main .favorite-card{ border-radius: 14px; }
  .shell main .favorite-card-media{ height: 150px; }
  .shell main .favorite-card-body{ padding: 12px 14px 14px; }
  .shell main .favori-demo-title{ font-size: 13.5px; min-height: 36px; }
  .shell main .favorite-price-current{ font-size: 1rem; }
  .shell main .favorite-remove-btn{ width: 36px; height: 36px; }
  .shell main .favorite-card-footer{ padding: 10px 14px; font-size: 12px; }
  /* Bootstrap grid override — telefonda 2 sütun garanti */
  .shell main .row.cols-2{ --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
}

/* ── Kuponlarım ── */
@media (max-width: 768px) {
  .shell main .kupon-card .kupon-head{
    padding: 12px 14px;
    gap: 10px;
  }
  .shell main .kupon-card .kupon-head::before{ right: 110px; }
  .shell main .kupon-card .kupon-head{
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-2) calc(100% - 110px), var(--primary-50) calc(100% - 110px));
  }
  .shell main .kupon-discount{ width: 110px; padding: 0 8px; }
  .shell main .kupon-discount-value{ font-size: 19px; }
  .shell main .kupon-code{ font-size: 15px; }
  .shell main .kupon-meta{ gap: 6px 12px; }
}
@media (max-width: 576px) {
  /* Mobilde dashed perforasyon ve sağdaki blok kayboluyor, kart dikey diziliyor */
  .shell main .kupon-card .kupon-head{
    flex-direction: column;
    align-items: stretch;
    background: var(--surface-2);
    padding: 12px 14px;
    gap: 10px;
  }
  .shell main .kupon-card .kupon-head::before{ display: none; }
  .shell main .kupon-head-left{ width: 100%; }
  .shell main .kupon-discount{
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: var(--primary-50);
    border-radius: 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .shell main .kupon-discount-value{ font-size: 18px; }
  .shell main .kupon-discount-label{ margin-top: 0; }
  .shell main .kupon-card .mp-card-body{ padding: 12px 14px; }
  .shell main .kupon-title{ font-size: 13px; margin-bottom: 6px; }
  .shell main .kupon-meta-item{ font-size: 12px; }
  .shell main .kupon-actions{
    padding: 10px 14px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .shell main .kupon-actions .btn{ flex: 1 1 calc(50% - 3px); justify-content: center; }
}
@media (max-width: 420px) {
  .shell main .kupon-actions .btn{ flex: 1 1 100%; }
}

/* ===========================================================================
   YORUMLARIM / SORULARIM / BİLDİRİMLER — Mobile (2026-05-19)
   =========================================================================== */

/* ── Yorumlarım & Sorularım (yr-* / sq-* aynı yapı) ── */
@media (max-width: 576px) {
  .shell main .yr-card, .shell main .sq-card{
    padding: 12px;
    gap: 9px;
    border-radius: 12px;
  }
  .shell main .yr-card-top, .shell main .sq-card-top{ gap: 10px; flex-wrap: wrap; }
  .shell main .yr-product-thumb, .shell main .sq-product-thumb{ width: 44px; height: 44px; border-radius: 7px; }
  .shell main .yr-product-name, .shell main .sq-product-name{ font-size: 13px; }
  .shell main .yr-badge-col, .shell main .sq-badge-col{
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    order: 99;
  }
  .shell main .yr-badge, .shell main .sq-badge{ font-size: 10.5px; padding: 3px 7px; }
  .shell main .yr-meta-row{ gap: 6px 10px; }
  .shell main .yr-stars svg{ width: 14px; height: 14px; }
  .shell main .yr-text, .shell main .sq-text{ font-size: 12.5px; }
  .shell main .yr-reply{ padding: 8px 10px; }
  .shell main .sq-soru-block, .shell main .sq-cevap-block{ padding: 8px 10px; }
  .shell main .yr-actions, .shell main .sq-actions{ justify-content: stretch; }
  .shell main .yr-delete-btn, .shell main .sq-delete-btn{ flex: 1; justify-content: center; padding: 7px 12px; font-size: 12px; }
}
@media (max-width: 420px) {
  .shell main .yr-card, .shell main .sq-card{ padding: 10px; }
  .shell main .yr-product-thumb, .shell main .sq-product-thumb{ width: 40px; height: 40px; }
}

/* ── Bildirimler (bld-*) ── */
@media (max-width: 768px) {
  .shell main .bld-toolbar{
    flex-wrap: wrap;
    padding: 10px;
    gap: 6px;
  }
  .shell main .bld-select{
    flex: 1 1 calc(50% - 3px);
    width: auto;
    max-width: none;
  }
  .shell main .bld-search-wrap{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .shell main .bld-toolbar-btn{ flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 576px) {
  .shell main .bld-toolbar{ padding: 8px; }
  .shell main .bld-select{ flex: 1 1 100%; }
  .shell main .bld-card-inner{ padding: 12px 13px; }
  .shell main .bld-row-top{
    gap: 9px;
    margin-bottom: 6px;
  }
  .shell main .bld-type-icon{ width: 32px; height: 32px; border-radius: 7px; }
  .shell main .bld-type-icon svg{ width: 16px; height: 16px; }
  .shell main .bld-card-title{ font-size: 13.5px; }
  .shell main .bld-card-time{ font-size: 11px; }
  .shell main .bld-preview{ font-size: 12.5px; margin-bottom: 8px; }
  .shell main .bld-meta-row{ flex-wrap: wrap; gap: 6px; }
  .shell main .bld-chips{ gap: 4px; }
  .shell main .bld-chip{ font-size: 10.5px; padding: 2px 7px; }
  .shell main .bld-card-actions{ width: 100%; justify-content: flex-end; }
  .shell main .bld-btn-icon{ width: 34px; height: 34px; }

  /* Detay modal — bar yatay scroll */
  .shell #bldDetailBar{ padding: 9px 14px; gap: 5px; }
  .shell #bldDetailContent{ padding: 14px 16px; }
  .shell #bldDetailFooter{ padding: 9px 14px; flex-wrap: wrap; }
  .shell #bldDetailFooter .btn{ flex: 1; justify-content: center; }
  .shell #bldDetailMessage{ padding: 13px 14px; font-size: 13px; line-height: 1.65; }
}

/* ===========================================================================
   DESTEK / SİPARİŞ DETAY / AYARLAR / DİĞER ALT SAYFALAR — Mobile (2026-05-19)
   =========================================================================== */

/* ── Destek Taleplerim (dst-*) ── */
@media (max-width: 768px) {
  .shell main .dst-toolbar{ gap: 8px; }
  .shell main .dst-toolbar-filters{ flex: 1 1 100%; gap: 6px; }
  .shell main .dst-select{ flex: 1 1 calc(50% - 3px); }
  .shell main .dst-search{ flex: 1 1 100%; min-width: 0; }
  .shell main .mp-tabs-header{ padding: 6px; }
  .shell main .mp-tabs-header .mp-tab{ padding: 7px 10px; font-size: 12.5px; }
}
@media (max-width: 576px) {
  .shell main .dst-card-inner{ padding: 13px 14px 12px; gap: 9px; }
  .shell main .dst-cat-icon{ width: 34px; height: 34px; border-radius: 9px; }
  .shell main .dst-cat-icon svg{ width: 16px; height: 16px; }
  .shell main .dst-card-title{ font-size: 13px; }
  .shell main .dst-date{ font-size: 11px; }
  .shell main .dst-preview{ font-size: 12.5px; padding-left: 0; }
  .shell main .dst-meta-row{
    flex-wrap: wrap;
    padding-top: 8px;
    padding-left: 0;
    gap: 6px;
  }
  .shell main .dst-meta-left{ gap: 8px; flex-wrap: wrap; }
  .shell main .dst-cat-label, .shell main .dst-last-upd{ font-size: 10.5px; }
  .shell main .dst-priority-chip, .shell main .dst-msg-count{ font-size: 10.5px; padding: 2px 6px; }
}

/* ── Destek Talep Detay (support-* + dsd-*) ── */
@media (max-width: 576px) {
  .shell .support-ticket-header{ padding: 14px 16px; }
  .shell .support-ticket-body{ padding: 14px 16px; }
  .shell .support-ticket-title{ font-size: 0.98rem; }
  .shell .support-message{ gap: 8px; margin-bottom: 12px; }
  .shell .support-message-avatar{ width: 34px; height: 34px; font-size: 14px; }
  .shell .support-message-bubble{ max-width: 85%; padding: 12px 14px; }
  .shell .support-message-meta{ font-size: 0.75rem; gap: 8px; }

  /* Detay Modal chat (dsd-*) */
  .shell #talepDetayIcerik .dsd-info-bar{ padding: 8px 12px; gap: 4px; }
  .shell #talepDetayIcerik .dsd-chip{ font-size: 10.5px; padding: 2px 7px; }
  .shell #talepDetayIcerik .dsd-messages{ padding: 12px 14px; gap: 8px; }
  .shell #talepDetayIcerik .dsd-msg{ max-width: 90%; gap: 6px; }
  .shell #talepDetayIcerik .dsd-avatar{ width: 26px; height: 26px; font-size: 10.5px; }
  .shell #talepDetayIcerik .dsd-bubble-inner{ padding: 8px 11px; font-size: 12.5px; }
  .shell #talepDetayIcerik .dsd-form-area{ padding: 10px 12px; }
  .shell #talepDetayIcerik .dsd-form-inner{ flex-direction: column; gap: 8px; align-items: stretch; }
  .shell #talepDetayIcerik .dsd-textarea{ min-height: 58px; font-size: 12.5px; }
  .shell #talepDetayIcerik .dsd-form-area .btn{ width: 100%; justify-content: center; }
}

/* ── Sipariş Detay (es-detay-* / es-info-*) ── */
@media (max-width: 768px) {
  .shell main .es-info-3col{ gap: 10px; }
  .shell main .es-info-card-head{ padding: 10px 12px; font-size: 12px; }
  .shell main .es-info-card-body{ padding: 11px 12px; font-size: 12.5px; }
  .shell main .es-info-line-strong{ font-size: 13px; }
}
@media (max-width: 576px) {
  .shell main .es-accordion > .es-accordion-head .es-accordion-title{ font-size: 14px; }
  .shell main .es-detay-grid--2col, .shell main .es-detay-grid{ gap: 12px; }
  .shell main .es-cargo-row{ font-size: 12.5px; }
  .shell main .es-cargo-row .val.mono{ font-size: 11.5px; }
  .shell main .es-help-card{ padding: 10px 12px; font-size: 12px; }
  .shell main .hero .hero-actions{ width: 100%; }
  .shell main .hero .hero-actions .btn{ flex: 1; justify-content: center; }
  /* Sipariş ürün satırı thumb + isim + price */
  .shell main .es-product-row{ gap: 8px; }
}

/* ── Genel form satırı (ec-modal mp-form-row / talep-olustur) ── */
@media (max-width: 576px) {
  .shell .ec-modal .mp-form-row{ gap: 10px; margin-bottom: 16px; }
  .shell .ec-modal .mp-form-row .mp-field{ flex: 1 1 100%; }
  .shell .ec-modal .modal-body{ padding: 14px 16px; }
  .shell .ec-modal .modal-header{ padding: 14px 16px; gap: 10px; }
  .shell .ec-modal .modal-title-2{ font-size: 16px; }
  .shell .ec-modal .modal-sub{ font-size: 12px; }
  .shell .ec-modal .form-control, .shell .ec-modal .form-control-solid{
    padding: 11px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
  /* Talep oluştur (Bootstrap-grid) — col-md-6 zaten 768 altı full-width */
  .shell main .needs-validation .row{ --bs-gutter-y: 0; }
  .shell main .needs-validation .form-control{ padding: 11px 14px; font-size: 14px; border-radius: 8px; }
  .shell main .needs-validation .form-label{ font-size: 13px; margin-bottom: 5px; }
}

/* ── Modal genel sıkılaştırma ── */
@media (max-width: 576px) {
  .shell .modal{ width: calc(100vw - 20px) !important; max-width: 100% !important; }
  .shell .modal.lg, .shell .modal.ec-modal{ max-width: calc(100vw - 20px) !important; }
  .shell .modal-footer{ padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .shell .modal-footer .btn{ flex: 1; justify-content: center; }
}

/* ── Email Doğrulama / OTP ── */
@media (max-width: 480px) {
  .shell .otp-input{ width: 38px !important; height: 48px !important; font-size: 18px !important; }
}

/* ===========================================================================
   PROFILE-PROGRESS SLIDER (panel dashboard) — Mobile refinement (2026-05-19)
   =========================================================================== */

@media (max-width: 576px) {
  .shell .profile-progress{ padding: 0; }
  .shell .profile-progress.profile-progress-slider{ border-radius: 12px; }

  /* Slide içeriği: ikon + metin üst satır, buton/aksiyon alt satır full-width */
  .shell .pp-slide{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
    padding: 14px 14px 32px;
  }
  .shell .pp-icon, .shell .pp-slide .progress-ring{
    width: 40px; height: 40px; flex: 0 0 40px;
  }
  .shell .pp-icon svg{ width: 20px; height: 20px; }

  .shell .pp-body, .shell .pp-slide .progress-text{
    flex: 1 1 calc(100% - 52px);
    min-width: 0;
  }
  .shell .pp-title, .shell .progress-text .t1{ font-size: 13px; line-height: 1.35; }
  .shell .pp-sub, .shell .progress-text .t2{
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .shell .pp-badge-pill{ font-size: 10px; padding: 1px 6px; vertical-align: 2px; }

  /* Eksik bilgi rozetleri (E-posta doğrulanmadı vs.) — wrap düzgün dağılsın */
  .shell .progress-text .missing-chip{
    display: inline-block;
    margin-right: 4px;
    margin-top: 6px;
    font-size: 10.5px;
    padding: 2px 7px;
  }

  /* "Görüntüle / Profili Tamamla" — kart sağ alttan tam genişliğe iner */
  .shell .pp-action{
    width: 100%;
    margin-top: 4px;
    padding: 7px 12px;
    background: var(--primary-50);
    border-radius: 8px;
    justify-content: center;
    font-size: 12.5px;
  }
  .shell .pp-action:hover{ gap: 4px; }

  .shell .pp-slide > .btn, .shell .pp-slide > a.btn{
    flex: 1 1 100%;
    width: 100%;
    margin-top: 4px;
    justify-content: center;
    white-space: normal !important;
  }

  /* Dots — alt çubuğa yaklaşmasın */
  .shell .pp-dots{ bottom: 10px; gap: 5px; }
  .shell .pp-dot{ width: 5px; height: 5px; }
  .shell .pp-dot.active{ width: 16px; }
}

@media (max-width: 420px) {
  .shell .pp-slide{ padding: 12px 12px 30px; gap: 8px 10px; }
  .shell .pp-icon, .shell .pp-slide .progress-ring{ width: 36px; height: 36px; flex: 0 0 36px; }
  .shell .pp-icon svg{ width: 18px; height: 18px; }
  .shell .pp-body, .shell .pp-slide .progress-text{ flex-basis: calc(100% - 46px); }
}


/* ── modal-overlay-global.css (prefixsiz) ── */
/**
 * Global müşteri modalları (OTP, adres, …). `.shell` scope’unun dışında çalışır.
 *
 * ── Standart yapı (HTML) ──────────────────────────────────────────────────
 * .modal-scrim.modal-scrim--global
 *   > .modal.ec-modal[.sm|.lg|.xl]     ← genişlik modifier’ları
 *       .modal-header
 *       .stepper (opsiyonel)
 *       .modal-body                    ← içerik kadar yükseklik; taşarsa scroll
 *       .modal-footer
 *
 * Dikey boşluk hatası için kritik: .modal-body flex-grow kullanmaz (0 1 auto);
 * uzun içerikte modal max-height’a takılınca gövde küçülür ve overflow-y ile kayar.
 * Yatay iç boşluk: --ec-modal-pad-x (varsayılan 26px) başlık / stepper / gövde / footer’da ortak.
 */
.modal-scrim.modal-scrim--global {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10050;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s;
  box-sizing: border-box;
}
.modal-scrim.modal-scrim--global.show {
  display: flex;
  opacity: 1;
}

.modal-scrim.modal-scrim--global > .modal.ec-modal,
.modal-scrim.modal-scrim--global > .modal {
  --ec-modal-max-w: 420px;
  --ec-modal-pad-x: 26px;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  align-self: center;
  align-items: stretch;
  width: 100%;
  max-width: min(var(--ec-modal-max-w), 100%);
  /* İçerik kısaysa kutuyu sıkı tut; uzunsa viewport’a sığdırıp gövdede scroll */
  height: auto;
  max-height: min(calc(100vh - 40px), 90dvh);
  background: var(--surface);
  border-radius: var(--radius-xl);
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  box-sizing: border-box;
  transform: translateY(12px) scale(0.98);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.modal-scrim.modal-scrim--global > .modal.sm { --ec-modal-max-w: 380px; }
.modal-scrim.modal-scrim--global > .modal.lg { --ec-modal-max-w: 720px; }
.modal-scrim.modal-scrim--global > .modal.xl { --ec-modal-max-w: 920px; }
.modal-scrim.modal-scrim--global.show > .modal {
  transform: translateY(0) scale(1);
}

.modal-scrim.modal-scrim--global .modal-header {
  width: 100%;
  box-sizing: border-box;
  padding: 22px var(--ec-modal-pad-x) 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-scrim.modal-scrim--global .modal-header .modal-title-2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.modal-scrim.modal-scrim--global .modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-50);
  color: var(--primary-700);
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  align-self: flex-start;
}
.modal-scrim.modal-scrim--global .modal-title-wrap {
  flex: 1 1 0%;
  min-width: 0;
}
.modal-scrim.modal-scrim--global .modal-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.modal-scrim.modal-scrim--global .modal-sub { font-size: 13px; color: var(--text-3); margin: 0; }
.modal-scrim.modal-scrim--global .modal-close {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  flex: 0 0 38px;
  flex-shrink: 0;
  margin-inline-start: auto;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.modal-scrim.modal-scrim--global .modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
}
.modal-scrim.modal-scrim--global .modal-close:active {
  transform: scale(0.96);
}
.modal-scrim.modal-scrim--global .modal-close:focus {
  outline: none;
}
.modal-scrim.modal-scrim--global .modal-close:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}
.modal-scrim.modal-scrim--global .modal-close svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  opacity: 0.85;
}
.modal-scrim.modal-scrim--global .modal-close svg path {
  fill: none;
}
.modal-scrim.modal-scrim--global .modal-close:hover svg {
  opacity: 1;
}

.modal-scrim.modal-scrim--global .stepper {
  display: flex;
  align-items: center;
  padding: 18px var(--ec-modal-pad-x) 4px;
  gap: 0;
  flex-shrink: 0;
}
.modal-scrim.modal-scrim--global .step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.modal-scrim.modal-scrim--global .step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-3);
  transition: all .3s;
}
.modal-scrim.modal-scrim--global .step-node.active .step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--primary-50);
}
.modal-scrim.modal-scrim--global .step-node.done .step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.modal-scrim.modal-scrim--global .step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.modal-scrim.modal-scrim--global .step-node.active .step-label,
.modal-scrim.modal-scrim--global .step-node.done .step-label {
  color: var(--text);
}
.modal-scrim.modal-scrim--global .step-bar {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}
.modal-scrim.modal-scrim--global .step-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-100%);
  transition: transform .4s ease;
}
.modal-scrim.modal-scrim--global .step-bar.filled::after { transform: translateX(0); }

.modal-scrim.modal-scrim--global .modal-body {
  padding: 18px var(--ec-modal-pad-x) 20px;
  width: 100%;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* flex-grow: 0 → kısa içerikte footer hemen altta; shrink ile uzun içerikte scroll */
  flex: 0 1 auto;
}
/* Geniş formlar (adres): gövde padding üst blok ile aynı --ec-modal-pad-x kullanır */
.modal-scrim.modal-scrim--global .modal-step { display: none; }
.modal-scrim.modal-scrim--global .modal-step.active {
  display: block;
  animation: ecModalStepIn .3s ease;
}

/* OTP modalı: SMS kapalı bilgi modu (stepper gizli) */
.modal-scrim.modal-scrim--global.verify-modal--sms-off .stepper {
  display: none;
}
.modal-scrim.modal-scrim--global.verify-modal--sms-off .modal-body {
  padding-top: 14px;
  padding-bottom: 14px;
}

.modal-scrim.modal-scrim--global .sms-blocked-state {
  text-align: center;
  padding: 4px 4px 0;
  max-width: 100%;
  margin: 0 auto;
}
.modal-scrim.modal-scrim--global .sms-blocked-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  color: var(--danger);
  display: grid;
  place-items: center;
}
.modal-scrim.modal-scrim--global .sms-blocked-lead {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.modal-scrim.modal-scrim--global .sms-blocked-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.modal-scrim.modal-scrim--global .sms-blocked-text strong {
  color: var(--text);
  font-weight: 600;
}
@keyframes ecModalStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-scrim.modal-scrim--global .modal-info {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.modal-scrim.modal-scrim--global .modal-body > .modal-info {
  margin-bottom: 16px;
}
.modal-scrim.modal-scrim--global .modal-info strong { color: var(--text); }
.modal-scrim.modal-scrim--global .modal-info svg {
  color: var(--primary);
  flex: 0 0 16px;
  margin-top: 1px;
}

.modal-scrim.modal-scrim--global .otp-wrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 14px;
}
.modal-scrim.modal-scrim--global .otp-input {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: all .15s;
  font-variant-numeric: tabular-nums;
}
.modal-scrim.modal-scrim--global .otp-input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.modal-scrim.modal-scrim--global .otp-input.filled {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary-700);
}
.modal-scrim.modal-scrim--global .otp-input.error {
  border-color: var(--danger);
  background: #fef2f2;
  color: var(--danger);
  animation: ecModalShake .35s;
}
@keyframes ecModalShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.modal-scrim.modal-scrim--global .otp-meta {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
}
.modal-scrim.modal-scrim--global .otp-meta .resend {
  color: var(--primary-700);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.modal-scrim.modal-scrim--global .otp-meta .resend:disabled {
  color: var(--text-muted);
  cursor: default;
}

.modal-scrim.modal-scrim--global .sending-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px 0 20px;
  text-align: center;
}
.modal-scrim.modal-scrim--global .sending-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--primary-50);
  border-top-color: var(--primary);
  animation: ecModalSpin 0.9s linear infinite;
}
@keyframes ecModalSpin { to { transform: rotate(360deg); } }
.modal-scrim.modal-scrim--global .sending-title { font-weight: 600; font-size: 14.5px; }
.modal-scrim.modal-scrim--global .sending-sub { font-size: 13px; color: var(--text-3); }

.modal-scrim.modal-scrim--global .success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 0 10px;
  gap: 14px;
}
.modal-scrim.modal-scrim--global .success-check {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary-50);
  display: grid;
  place-items: center;
  position: relative;
  animation: ecModalPop .5s cubic-bezier(.2, .8, .2, 1);
}
.modal-scrim.modal-scrim--global .success-check::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0.3;
  animation: ecModalRing 1s ease-out;
}
@keyframes ecModalPop {
  from { transform: scale(0); }
  60% { transform: scale(1.15); }
  to { transform: scale(1); }
}
@keyframes ecModalRing {
  from { transform: scale(0.6); opacity: 0.6; }
  to { transform: scale(1.3); opacity: 0; }
}
.modal-scrim.modal-scrim--global .success-check svg { color: var(--primary); }
.modal-scrim.modal-scrim--global .success-state .t1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.modal-scrim.modal-scrim--global .success-state .t2 {
  font-size: 13.5px;
  color: var(--text-3);
  max-width: 320px;
}

.modal-scrim.modal-scrim--global .modal-footer {
  padding: 14px var(--ec-modal-pad-x) 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-scrim.modal-scrim--global .modal-footer .btn { flex: 0 0 auto; }

@media (max-width: 480px) {
  .modal-scrim.modal-scrim--global .otp-input {
    width: 38px;
    height: 48px;
    font-size: 18px;
  }
  .modal-scrim.modal-scrim--global .step-label { display: none; }
  .modal-scrim.modal-scrim--global .modal-footer { flex-direction: column-reverse; }
  .modal-scrim.modal-scrim--global .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Adres modalı + şifre sıfırlama: form sınıfları styles.css’te .shell ile scope’lu; burada tekrar ── */
.modal-scrim.modal-scrim--global input[type="text"],
.modal-scrim.modal-scrim--global input[type="tel"],
.modal-scrim.modal-scrim--global input[type="password"],
.modal-scrim.modal-scrim--global input[type="email"],
.modal-scrim.modal-scrim--global select,
.modal-scrim.modal-scrim--global textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-family: var(--font) !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
}
.modal-scrim.modal-scrim--global input[type="text"]:focus,
.modal-scrim.modal-scrim--global input[type="tel"]:focus,
.modal-scrim.modal-scrim--global input[type="password"]:focus,
.modal-scrim.modal-scrim--global input[type="email"]:focus,
.modal-scrim.modal-scrim--global select:focus,
.modal-scrim.modal-scrim--global textarea:focus {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}
.modal-scrim.modal-scrim--global input[type="text"]:hover,
.modal-scrim.modal-scrim--global input[type="tel"]:hover,
.modal-scrim.modal-scrim--global input[type="password"]:hover,
.modal-scrim.modal-scrim--global input[type="email"]:hover {
  border-color: var(--border-strong) !important;
}

/* Şifre alanı (reveal butonu ile) */
.modal-scrim.modal-scrim--global .input-pwd {
  position: relative !important;
}
.modal-scrim.modal-scrim--global .input-pwd input[type="password"],
.modal-scrim.modal-scrim--global .input-pwd input[type="text"] {
  padding-right: 44px !important;
}
.modal-scrim.modal-scrim--global .pwd-reveal {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--text-3) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background .15s, color .15s !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.modal-scrim.modal-scrim--global .pwd-reveal:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Başarılı doğrulama banner (step 3 üstü yeşil bilgi satırı) */
.modal-scrim.modal-scrim--global .modal-info--success {
  background: var(--primary-50) !important;
  border-color: #bbf0d9 !important;
}
.modal-scrim.modal-scrim--global .modal-info--success svg { color: var(--primary-700) !important; }
.modal-scrim.modal-scrim--global .modal-body > form {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
.modal-scrim.modal-scrim--global .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  width: 100%;
  box-sizing: border-box;
}
.modal-scrim.modal-scrim--global .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.modal-scrim.modal-scrim--global .field.full { grid-column: 1 / -1; }
.modal-scrim.modal-scrim--global .field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-scrim.modal-scrim--global .field label .req { color: var(--danger); }
.modal-scrim.modal-scrim--global .field-optional {
  font-weight: 500;
  color: var(--text-3);
  font-size: 11.5px;
  margin-left: 4px;
}
.modal-scrim.modal-scrim--global .textarea { min-height: 100px; resize: vertical; }
.modal-scrim.modal-scrim--global .select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px !important;
}
.modal-scrim.modal-scrim--global .pill-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-scrim.modal-scrim--global .pill-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.modal-scrim.modal-scrim--global .pill-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.modal-scrim.modal-scrim--global .pill-radio:hover {
  border-color: var(--primary);
  color: var(--primary-700);
}
.modal-scrim.modal-scrim--global .pill-radio:has(input[type="radio"]:checked) {
  background: var(--primary-50);
  border-color: var(--primary);
  color: var(--primary-700);
  font-weight: 600;
}
.modal-scrim.modal-scrim--global .cb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500 !important;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px !important;
  color: var(--text-2) !important;
}
.modal-scrim.modal-scrim--global .cb-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.modal-scrim.modal-scrim--global .btn {
  padding: 11px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, transform .05s, box-shadow .15s, color .15s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.modal-scrim.modal-scrim--global .btn-primary {
  background: var(--primary);
  color: #fff;
}
.modal-scrim.modal-scrim--global .btn-primary:hover { background: var(--primary-600); }
.modal-scrim.modal-scrim--global .btn-primary:active { transform: scale(0.98); }
.modal-scrim.modal-scrim--global .btn-ghost {
  background: transparent;
  color: var(--text-2);
}
.modal-scrim.modal-scrim--global .btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}
@media (max-width: 600px) {
  .modal-scrim.modal-scrim--global .modal .form-grid {
    grid-template-columns: 1fr;
  }
  .modal-scrim.modal-scrim--global .modal .form-grid .field.full {
    grid-column: 1;
  }
}

/* drawer-locked: styles.css .shell ile scope'lanınca html/body kuralı eşleşmez */
html.drawer-locked,
body.drawer-locked {
  overflow: hidden !important;
  touch-action: none;
}

/* ── Navbar Login Modal (.nlm-scrim) — input stilleri ───────────────────────
   Modalın inputları Bootstrap'in form-control class'ını kullanır;
   tip seçiciyle hedefleyerek aynı tasarım sistemini uygularız. */
.nlm-scrim input[type="text"],
.nlm-scrim input[type="email"],
.nlm-scrim input[type="password"],
.nlm-scrim input[type="number"],
.nlm-scrim input[type="tel"],
.nlm-scrim select {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-family: var(--font) !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
}
.nlm-scrim input[type="text"]:hover,
.nlm-scrim input[type="email"]:hover,
.nlm-scrim input[type="password"]:hover,
.nlm-scrim input[type="tel"]:hover {
  border-color: var(--border-strong) !important;
}
.nlm-scrim input[type="text"]:focus,
.nlm-scrim input[type="email"]:focus,
.nlm-scrim input[type="password"]:focus,
.nlm-scrim input[type="number"]:focus,
.nlm-scrim input[type="tel"]:focus,
.nlm-scrim select:focus {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-50) !important;
}

/* Select — özel ok oku */
.nlm-scrim select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

/* Şifre alanı (göz butonu wrapper'ı) */
.nlm-scrim .nlm-input-with-toggle {
  position: relative !important;
}
.nlm-scrim .nlm-input-with-toggle input[type="password"],
.nlm-scrim .nlm-input-with-toggle input[type="text"] {
  padding-right: 44px !important;
}
.nlm-scrim .nlm-pwd-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--text-3) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background .15s, color .15s !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.nlm-scrim .nlm-pwd-toggle:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── Adres modal layout — adr-* sınıfları styles.css'te .shell ile scope'lu,
   modal .shell dışında olduğu için kuralları burada tekrar tanımlanıyor ── */
.modal-scrim.modal-scrim--global .adr-form { display: block; }
.modal-scrim.modal-scrim--global .adr-form * { box-sizing: border-box; }

.modal-scrim.modal-scrim--global .adr-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
.modal-scrim.modal-scrim--global .adr-alert svg { flex-shrink: 0; color: #dc2626; }

.modal-scrim.modal-scrim--global .adr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.modal-scrim.modal-scrim--global .adr-row:last-of-type { margin-bottom: 0; }
@media (max-width: 560px) {
  .modal-scrim.modal-scrim--global .adr-row { grid-template-columns: 1fr; gap: 12px; }
}

.modal-scrim.modal-scrim--global .adr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.modal-scrim.modal-scrim--global .adr-field--full { grid-column: 1 / -1; }

.modal-scrim.modal-scrim--global .adr-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}
.modal-scrim.modal-scrim--global .adr-req { color: var(--danger); font-weight: 700; }
.modal-scrim.modal-scrim--global .adr-opt {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: lowercase;
  letter-spacing: 0;
}

.modal-scrim.modal-scrim--global .adr-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 20px 0 12px;
}
.modal-scrim.modal-scrim--global .adr-section-label::before,
.modal-scrim.modal-scrim--global .adr-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.modal-scrim.modal-scrim--global .adr-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.modal-scrim.modal-scrim--global .adr-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 7px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.modal-scrim.modal-scrim--global .adr-tab input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0;
}
.modal-scrim.modal-scrim--global .adr-tab svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; }
.modal-scrim.modal-scrim--global .adr-tab:hover { color: var(--text); background: var(--surface); }
.modal-scrim.modal-scrim--global .adr-tab.is-active,
.modal-scrim.modal-scrim--global .adr-tab:has(input:checked) {
  background: var(--surface);
  color: var(--primary-700);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 0 0 1px var(--primary);
}
.modal-scrim.modal-scrim--global .adr-tab.is-active svg,
.modal-scrim.modal-scrim--global .adr-tab:has(input:checked) svg { opacity: 1; }

.modal-scrim.modal-scrim--global .adr-default {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-top: 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.modal-scrim.modal-scrim--global .adr-default:hover {
  border-color: var(--primary);
  background: var(--primary-50);
}
.modal-scrim.modal-scrim--global .adr-default input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0;
}
.modal-scrim.modal-scrim--global .adr-default-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: background .15s, color .15s, border-color .15s;
}
.modal-scrim.modal-scrim--global .adr-default-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.modal-scrim.modal-scrim--global .adr-default-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.modal-scrim.modal-scrim--global .adr-default-t1 { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.modal-scrim.modal-scrim--global .adr-default-t2 { font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.modal-scrim.modal-scrim--global .adr-default-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.modal-scrim.modal-scrim--global .adr-default.is-checked,
.modal-scrim.modal-scrim--global .adr-default:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-50);
}
.modal-scrim.modal-scrim--global .adr-default.is-checked .adr-default-icon,
.modal-scrim.modal-scrim--global .adr-default:has(input:checked) .adr-default-icon {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.modal-scrim.modal-scrim--global .adr-default.is-checked .adr-default-t1,
.modal-scrim.modal-scrim--global .adr-default:has(input:checked) .adr-default-t1 { color: var(--primary-700); }
.modal-scrim.modal-scrim--global .adr-default.is-checked .adr-default-check,
.modal-scrim.modal-scrim--global .adr-default:has(input:checked) .adr-default-check {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* Checkbox (.custom-checkbox) */
.nlm-scrim input[type="checkbox"].custom-checkbox {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 1px 0 0 0 !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  flex: 0 0 16px !important;
  box-shadow: none !important;
  outline: none !important;
  vertical-align: middle !important;
  position: relative !important;
  transition: border-color .15s, background-color .15s !important;
}
.nlm-scrim input[type="checkbox"].custom-checkbox:hover {
  border-color: var(--primary) !important;
}
.nlm-scrim input[type="checkbox"].custom-checkbox:checked {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.nlm-scrim input[type="checkbox"].custom-checkbox:checked::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: 3px !important;
  left: 2px !important;
  width: 9px !important;
  height: 5px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) !important;
}