/* ============================================================================
   Üyelik (müşteri portalı) — auth + hesap. Yalnız /uye sayfalarında yüklenir.
   Site tasarım token'larını (app.css :root) kullanır; kendi bileşenlerini ekler.
   ========================================================================== */

/* --- Auth ekranı: yumuşak markalı arka planda ortalı kart --------------------- */
.mem-auth {
  min-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(28px, 6vw, 64px) 18px;
  background:
    radial-gradient(60% 55% at 15% 0%, var(--blue-tint) 0%, transparent 60%),
    radial-gradient(55% 50% at 100% 100%, var(--green-tint) 0%, transparent 55%);
}

.mem-card {
  width: 100%;
  max-width: 452px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 5vw, 42px);
}

.mem-card__badge {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.mem-card__badge svg { width: 30px; height: 30px; }
.mem-card__badge--green { background: linear-gradient(135deg, var(--green) 0%, var(--green-700) 100%); }

.mem-card__title {
  font-size: clamp(22px, 4.4vw, 27px);
  font-weight: 800;
  text-align: center;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mem-card__sub {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 auto 22px;
  max-width: 36ch;
}
.mem-card__sub strong { color: var(--ink); }

/* --- Alanlar ---------------------------------------------------------------- */
.mem-field { margin-bottom: 13px; }
.mem-field > label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.mem-field .opt { color: var(--muted); font-weight: 500; }

.mem-input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.mem-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.mem-input:disabled { background: var(--bg); color: var(--muted); }
.mem-input::placeholder { color: #9aa7b4; }

/* Telefon ön-eki (+90) birleşik alan */
.mem-phone {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.mem-phone:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.mem-phone__cc {
  display: grid;
  place-items: center;
  padding: 0 13px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border-right: 1.5px solid var(--border);
}
.mem-phone input { flex: 1; min-height: 46px; padding: 0 14px; border: 0; outline: none; font-size: 16px; background: transparent; }

/* OTP: büyük, ferah, tek kutu */
.mem-otp {
  width: 100%;
  min-height: 56px;
  text-align: center;
  letter-spacing: .5em;
  font-size: 23px;
  font-weight: 800;
  color: var(--ink);
  padding-left: .5em; /* letter-spacing dengesi */
}

/* --- Onaylar (checkbox) ----------------------------------------------------- */
.mem-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 4px 0 8px;
}
.mem-consent input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--blue); flex-shrink: 0; }
.mem-consent a { color: var(--blue); font-weight: 600; }

/* --- Butonlar --------------------------------------------------------------- */
.mem-btn {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, box-shadow .18s, background .18s;
}
.mem-btn svg { width: 18px; height: 18px; }
.mem-btn--primary { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-700) 100%); color: #fff; box-shadow: var(--shadow-orange); }
.mem-btn--primary:hover { transform: translateY(-1px); }
.mem-btn--blue { background: var(--blue); color: #fff; }
.mem-btn--ghost { background: transparent; border: 1.5px solid var(--border); color: var(--ink); }
.mem-btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

.mem-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blue); font-weight: 600; font-size: 13.5px;
}
.mem-foot { text-align: center; margin-top: 16px; font-size: 13.5px; }
.mem-foot a { color: var(--blue); font-weight: 600; }
.mem-note { text-align: center; font-size: 12px; color: var(--muted); line-height: 1.5; margin: 14px 0 0; }
.mem-note a { color: var(--blue); }

/* --- Flash ------------------------------------------------------------------ */
.mem-flash {
  margin: 0 0 16px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
}
.mem-flash--ok { background: var(--green-tint); color: var(--green-700); }
.mem-flash--error { background: #FDECEC; color: #B42318; }

/* --- Hesap paneli ----------------------------------------------------------- */
.mem-hero {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  color: #fff;
  padding: clamp(30px, 6vw, 52px) 18px;
  text-align: center;
}
.mem-hero h1 { font-size: clamp(23px, 4.6vw, 30px); font-weight: 800; margin: 0; }
.mem-hero p { margin: 8px 0 0; opacity: .9; font-size: 15.5px; }

.mem-grid {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 34px) 18px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .mem-grid { grid-template-columns: 1fr; } }

.mem-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 4vw, 28px);
}
.mem-panel h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; color: var(--ink);
  margin: 0 0 14px;
}
.mem-panel h2 svg { width: 22px; height: 22px; color: var(--blue); }

/* "Yakında" boş-durum */
.mem-soon {
  text-align: center;
  padding: 8px 0 4px;
}
.mem-soon__icon {
  width: 58px; height: 58px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-tint); color: var(--blue);
}
.mem-soon__icon svg { width: 28px; height: 28px; }
.mem-soon p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.mem-soon strong { color: var(--ink); }

.mem-logout { text-align: center; padding: 8px 0 40px; }

/* --- Kurtarma kodları (tek-sefer gösterim) ---------------------------------- */
.mem-codes { background: #FFF8E6; border: 1px solid #F0D98A; border-radius: var(--r-lg); padding: 22px 24px; }
.mem-codes h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: #8A6D1B; margin: 0 0 8px; }
.mem-codes h2 svg { width: 22px; height: 22px; }
.mem-codes p { color: #6B5A2A; font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.mem-codes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; }
.mem-codes__grid code { display: block; text-align: center; padding: 11px 6px; background: #fff; border: 1px solid #E8D9A0; border-radius: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #1a2733; }

/* ============================================================================
   Hesap paneli v2 — kimlik başlığı + sigortalarım + güvenlik sağlığı + hızlı
   işlemler. Tüm stiller token'lı; view'da inline stil YOK (CSP-dostu).
   ========================================================================== */

/* --- Kimlik başlığı (avatar + chip'ler) ------------------------------------- */
.mem-hero--account { text-align: left; }
.mem-hero--account .mem-hero__inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 22px);
}
.mem-avatar {
  flex-shrink: 0;
  width: clamp(56px, 13vw, 72px); height: clamp(56px, 13vw, 72px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .4);
  color: #fff; font-weight: 800; font-size: clamp(20px, 5vw, 27px);
  letter-spacing: .02em; backdrop-filter: blur(4px);
}
.mem-avatar svg { width: 34px; height: 34px; }
.mem-hero__meta h1 { margin: 0 0 9px; }
.mem-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mem-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1;
}
.mem-chip svg { width: 15px; height: 15px; opacity: .95; }
.mem-chip--verified { background: rgba(255, 255, 255, .22); }
.mem-chip--verified svg { color: #C7F0CE; opacity: 1; }

/* --- Grid yardımcıları ------------------------------------------------------ */
.mem-col-full { grid-column: 1 / -1; }
.mem-muted { color: var(--muted); font-size: 13.5px; }
.mem-btn--auto { width: auto; padding: 0 18px; }

.mem-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.mem-panel__head h2 { margin: 0; }
.mem-tag {
  flex-shrink: 0; padding: 4px 11px; border-radius: 999px;
  background: var(--blue-tint); color: var(--blue);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
}

/* --- "Yakında" önizleme satırları (FAZ-5 poliçe slotları) ------------------- */
.mem-soon-preview { margin-top: 18px; border-top: 1px solid var(--border); }
.mem-soon-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; border-bottom: 1px solid var(--border);
  color: var(--ink); font-weight: 600; font-size: 14.5px;
}
.mem-soon-row:last-child { border-bottom: 0; }
.mem-soon-row span { display: inline-flex; align-items: center; gap: 10px; }
.mem-soon-row span svg { width: 19px; height: 19px; color: var(--blue); }
.mem-soon-row em {
  font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--bg); padding: 4px 10px; border-radius: 999px;
}

/* --- Güvenlik sağlığı (kurtarma kodu durumu) -------------------------------- */
.mem-health { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.mem-health__ring {
  flex-shrink: 0; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  border: 3px solid var(--green); color: var(--green-700);
}
.mem-health__ring strong { font-size: 22px; font-weight: 800; }
.mem-health__ring span { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.mem-health--warn .mem-health__ring { border-color: #E0A106; color: #96700A; }
.mem-health--danger .mem-health__ring { border-color: #D9483B; color: #B42318; }
.mem-health__label {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
  background: var(--green-tint); color: var(--green-700);
}
.mem-health__label--warn { background: #FDF4E1; color: #96700A; }
.mem-health__label--danger { background: #FDECEC; color: #B42318; }
.mem-health__body p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.mem-health__body strong { color: var(--ink); }
.mem-inline-form { margin: 0; }

/* --- Hızlı işlemler --------------------------------------------------------- */
.mem-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.mem-quick__tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-weight: 700; font-size: 14px; text-align: center;
  text-decoration: none; transition: border-color .16s, transform .12s, box-shadow .18s;
}
.mem-quick__tile:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mem-quick__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.mem-quick__ic svg { width: 23px; height: 23px; }
.mem-quick__ic--green { background: var(--green-tint); color: var(--green-700); }
.mem-quick__ic--blue { background: var(--blue-tint); color: var(--blue); }
.mem-quick__ic--orange { background: var(--orange-tint); color: var(--orange-700); }

/* --- OTP tekrar-gönder sayaç (disabled state) ------------------------------- */
.mem-linkbtn:disabled { color: var(--muted); cursor: default; }

/* --- Test modu (dev OTP reveal — canlıda ASLA görünmez) --------------------- */
.mem-dev {
  margin: 0 0 18px; padding: 14px 16px; text-align: left;
  background: #FFF8E6; border: 1px dashed #E0A106; border-radius: var(--r-md);
}
.mem-dev__tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #96700A; text-transform: uppercase;
}
.mem-dev__tag svg { width: 14px; height: 14px; }
.mem-dev p { margin: 8px 0 4px; font-size: 14px; color: #6B5A2A; }
.mem-dev code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: 20px; letter-spacing: .18em; color: #1a2733; background: #fff; padding: 2px 10px; border-radius: 8px; border: 1px solid #E8D9A0; }
.mem-dev small { color: #96700A; font-size: 11.5px; }

/* ============================================================================
   Sigortalarım — kimlik doğrulama (bind/step-up) + poliçe/taksit/teklif verisi
   ========================================================================== */
.mem-tag--green { background: var(--green-tint); color: var(--green-700); display: inline-flex; align-items: center; gap: 5px; }
.mem-tag--green svg { width: 14px; height: 14px; }

/* --- Kimlik doğrulama (bind + step-up ortak) -------------------------------- */
.mem-verify { text-align: center; padding: 8px 0 4px; max-width: 460px; margin: 0 auto; }
.mem-verify__icon {
  width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 16px; background: var(--blue-tint); color: var(--blue);
}
.mem-verify__icon svg { width: 27px; height: 27px; }
.mem-verify h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--ink); }
.mem-verify > p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.mem-verify > p strong { color: var(--ink); }
.mem-verify__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mem-verify__form .mem-input { max-width: 240px; text-align: center; letter-spacing: .12em; font-weight: 600; }
.mem-verify__note { display: inline-flex; align-items: center; gap: 7px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
.mem-verify__note svg { width: 15px; height: 15px; color: var(--green-700); }

/* --- Alt başlık ------------------------------------------------------------- */
.mem-subhead { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--ink); margin: 22px 0 12px; }
.mem-subhead:first-child { margin-top: 4px; }
.mem-subhead svg { width: 19px; height: 19px; color: var(--blue); }

/* --- Durum rozetleri (poliçe/taksit) --------------------------------------- */
.mem-st { flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mem-st--ok   { background: var(--green-tint); color: var(--green-700); }
.mem-st--warn { background: #FDF4E1; color: #96700A; }
.mem-st--bad  { background: #FDECEC; color: #B42318; }
.mem-st--info { background: var(--blue-tint); color: var(--blue); }
.mem-st--mut  { background: var(--bg); color: var(--muted); }

/* --- Poliçe kartları -------------------------------------------------------- */
.mem-pol-list { display: grid; gap: 14px; }
.mem-pol { border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; background: var(--surface); }
.mem-pol__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mem-pol__type { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.mem-pol__ins { font-size: 13px; color: var(--muted); }
.mem-pol__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 16px; }
.mem-pol__grid > div { display: flex; flex-direction: column; gap: 3px; }
.mem-pol__grid span { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.mem-pol__grid strong { font-size: 14.5px; color: var(--ink); font-weight: 700; }
.mem-pol__foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.mem-pol__pdf { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--blue); }
.mem-pol__pdf svg { width: 18px; height: 18px; }
.mem-pol__pdf--soon { color: var(--muted); }
.mem-pol__pdf--soon em { font-style: normal; font-weight: 600; }

/* --- Taksit / teklif satırları --------------------------------------------- */
.mem-inst { display: grid; gap: 8px; }
.mem-inst__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.mem-inst__date { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); }
.mem-inst__date svg { width: 17px; height: 17px; color: var(--blue); }
.mem-inst__amt { margin-left: auto; font-weight: 800; font-size: 14.5px; color: var(--ink); }
.mem-inst__amt.mem-muted { font-weight: 600; }

/* ============================================================================
   ÜYE UYGULAMA KABUĞU (mapp) — mobil-app deneyimi: üst başlık + alt sekme nav.
   uye-profil.jpeg ve kardeş ekranlara birebir. Tüm ölçüler token'lı, CSP-dostu.
   ========================================================================== */
:root { --mnavy: #14307c; --mnavy2: #0e2560; --mink: #17335f; }

body.mapp { background: var(--bg); padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* Auth modu: alt tab-nav yok → boşluk yok; içerik tam genişlikte (mem-auth kendi ortalar). */
body.mapp--auth { padding-bottom: 0; }
.mapp-main--auth { max-width: none; padding: 0; }

/* --- Üst başlık ------------------------------------------------------------- */
/* Üye kabuğunda site header'ı yapışkanlıktan çıkarıyoruz.
   İkisi de `top: 0`da yapışkandı ve site header'ın z-index'i (100) daha yüksekti:
   sayfa kaydırılınca üye barı — geri düğmesi ve sayfa başlığı — header'ın ALTINA
   girip tamamen kayboluyordu. Üye alanında birincil gezinme app barıdır; site
   header'ı yukarı kaydırınca ulaşılan bir çıkış kapısı olarak kalıyor.
   position:relative + yüksek z-index: mega-menü panelleri app barının üstünde açılsın. */
.mapp .site-head { position: relative; z-index: 60; }
.mapp-top { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); }
.mapp-top__inner { max-width: 640px; margin: 0 auto; min-height: 54px; padding: 9px 16px; display: flex; align-items: center; gap: 12px; }
.mapp-greet { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.mapp-greet span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.mapp-greet strong { font-size: 18.5px; font-weight: 800; color: var(--mink); letter-spacing: -0.01em; }
.mapp-top__actions { display: flex; gap: 10px; }
.mapp-iconbtn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); flex-shrink: 0; }
.mapp-iconbtn svg { width: 18px; height: 18px; }
.mapp-back { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--mink); flex-shrink: 0; }
.mapp-back svg { width: 20px; height: 20px; }
.mapp-title { flex: 1; text-align: center; margin: 0; font-size: 16px; font-weight: 800; color: var(--mink); }
.mapp-top__spacer { width: 36px; flex-shrink: 0; }
.mapp-topaction { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.mapp-topaction svg { width: 16px; height: 16px; }

/* --- İçerik ----------------------------------------------------------------- */
.mapp-main { max-width: 640px; margin: 0 auto; padding: 16px 16px 8px; }

/* --- Alt sekme navigasyonu -------------------------------------------------- */
.mapp-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(16, 42, 90, .06); display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
.mapp-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 10.5px; font-weight: 600; text-decoration: none; max-width: 92px; }
.mapp-tab__ic { display: grid; place-items: center; }
.mapp-tab__ic svg { width: 21px; height: 21px; }
.mapp-tab.is-active { color: var(--blue); }
.mapp-tab.is-active .mapp-tab__ic svg { color: var(--blue); }
/* Ortadaki "Davet Et" sekmesi — yükseltilmiş dolu daire */
.mapp-tab--center .mapp-tab__ic { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%); color: #fff; margin-top: -22px; box-shadow: 0 8px 18px rgba(20, 48, 124, .34); border: 4px solid var(--surface); }
.mapp-tab--center .mapp-tab__ic svg { width: 22px; height: 22px; color: #fff; }
.mapp-tab--center.is-active .mapp-tab__ic { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-700) 100%); box-shadow: var(--shadow-orange); }

/* ============================================================================
   DASHBOARD (uye-profil) — profil kartı + hızlı işlemler + davet banner
   ========================================================================== */
.mpcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.mpcard__row { display: flex; align-items: center; gap: 16px; }
.mpavatar { position: relative; flex-shrink: 0; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--mnavy) 0%, var(--mnavy2) 100%); color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .02em; }
.mpavatar svg { width: 34px; height: 34px; }
.mpavatar__cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--blue); box-shadow: var(--shadow-sm); }
.mpavatar__cam svg { width: 13px; height: 13px; }
.mpcard__info { flex: 1; min-width: 0; }
.mtier-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--orange-tint); color: var(--orange-700); font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.mtier-badge svg { width: 13px; height: 13px; }
.mtier-badge--gumus { background: #eef1f5; color: #5b6b80; }
.mtier-badge--altin { background: #fbf3d8; color: #977613; }
.mpcard__c { display: flex; align-items: center; gap: 8px; color: var(--mink); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.mpcard__c svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
.mpcard__c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpcard__chev { margin-left: auto; color: #c2cede; flex-shrink: 0; align-self: center; }
.mpcard__chev svg { width: 18px; height: 18px; }
.mpcard__detail { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--mink); font-weight: 700; font-size: 13.5px; }
.mpcard__detail .mdet-ic { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--mnavy) 0%, var(--mnavy2) 100%); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.mpcard__detail .mdet-ic svg { width: 16px; height: 16px; }
.mpcard__detail .mdet-val { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--mink); font-weight: 800; }
.mpcard__detail .mdet-val svg { width: 16px; height: 16px; color: #c2cede; }

/* --- Bölüm başlığı ---------------------------------------------------------- */
.msec-title { font-size: 15px; font-weight: 800; color: var(--mink); margin: 20px 4px 10px; }

/* --- İşlem listesi (kart içinde satırlar) ----------------------------------- */
.mlist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.mrow { display: flex; align-items: center; gap: 11px; padding: 11px 13px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); background: none; width: 100%; text-align: left; cursor: pointer; }
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: var(--bg); }
.mrow__ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); }
.mrow__ic svg { width: 17px; height: 17px; }
.mrow__ic--green { background: var(--green-tint); color: var(--green-700); }
.mrow__ic--orange { background: var(--orange-tint); color: var(--orange-700); }
.mrow__ic--red { background: #FDECEC; color: #B42318; }
.mrow__ic--navy { background: var(--blue-tint); color: var(--mnavy); }
.mrow__tx { flex: 1; min-width: 0; }
.mrow__tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--mink); }
.mrow__tx span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.mrow__chev { color: #c2cede; flex-shrink: 0; }
.mrow__chev svg { width: 17px; height: 17px; }

/* --- Davet banner (dashboard, yeşil) --------------------------------------- */
.mbanner { position: relative; overflow: hidden; margin-top: 8px; background: linear-gradient(120deg, #E9F6EC 0%, #DFF3E4 100%); border-radius: var(--r-lg); padding: 18px; }
.mbanner__tx { position: relative; z-index: 2; max-width: 68%; }
.mbanner__tx h3 { margin: 0 0 7px; font-size: 17.5px; font-weight: 800; color: var(--mink); }
.mbanner__tx p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: #38614a; }
.mbanner__btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 11px; background: linear-gradient(135deg, var(--orange) 0%, var(--orange-700) 100%); color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; box-shadow: var(--shadow-orange); }
.mbanner__btn svg { width: 16px; height: 16px; }
.mbanner__art { position: absolute; right: 10px; bottom: 0; top: 0; width: 130px; display: grid; place-items: center; color: #58c07a; opacity: .9; }
.mbanner__art svg { width: 72px; height: 72px; }

/* ============================================================================
   DAVET ET KAZAN (davet-et-kazan) — hero + nasıl çalışır + kazançlar + link
   ========================================================================== */
.mhero-blue { position: relative; overflow: hidden; background: linear-gradient(120deg, #E8F0FE 0%, #DCE9FC 100%); border-radius: var(--r-lg); padding: 20px; }
/* Heading/body wrap before the artwork; the button is free to run wider so its
   label never breaks across two lines. */
.mhero-blue__tx { position: relative; z-index: 2; }
.mhero-blue h2 { margin: 0 0 8px; padding-right: 64px; font-size: 19px; font-weight: 800; color: var(--mink); line-height: 1.22; }
.mhero-blue p { margin: 0 0 14px; padding-right: 104px; font-size: 12.5px; line-height: 1.5; color: #3a5074; }
.mhero-blue__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: linear-gradient(135deg, var(--mnavy) 0%, var(--mnavy2) 100%); color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap; text-decoration: none; box-shadow: 0 8px 18px rgba(20, 48, 124, .28); }
.mhero-blue__btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.mhero-blue__art { position: absolute; right: 10px; bottom: 14px; top: 34px; width: 104px; display: grid; place-items: center; color: #9DB8E4; }
.mhero-blue__art svg { width: 66px; height: 66px; }

.msteps { display: flex; align-items: flex-start; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px 8px; }
.mstep { flex: 1; min-width: 0; text-align: center; }
.mstep__ic { width: 42px; height: 42px; margin: 0 auto 8px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; }
.mstep__ic svg { width: 19px; height: 19px; }
.mstep strong { display: block; font-size: 12px; font-weight: 800; color: var(--mink); margin-bottom: 3px; line-height: 1.3; }
/* Açıklama metni. `.mstep span` yazmak ikon <span>'ini de yakalıyordu: 0,1,1
   özgüllüğüyle .mstep__ic'i (0,1,0) ezip display:grid'i block'a çeviriyor ve
   place-items:center'ı etkisiz bırakıyordu — ikon dairenin ortası yerine üst
   kenarına yapışıyordu. Hedefi açıkça daraltıyoruz. */
.mstep > span:not(.mstep__ic) { font-size: 10.5px; line-height: 1.4; color: var(--muted); display: block; }
/* Pin the arrow to the icon's vertical centre (42px icon -> 21px). Centring it on
   the flex line instead pushed it down beside the copy, which made the whole row
   read as misaligned. */
.mstep__arrow { align-self: flex-start; margin-top: 21px; transform: translateY(-50%); color: #c2cede; flex-shrink: 0; }
.mstep__arrow svg { width: 16px; height: 16px; }

.mkazanc { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; }
.mkazanc__ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; }
.mkazanc__ic svg { width: 20px; height: 20px; }
.mkazanc__tx { flex: 1; min-width: 0; }
.mkazanc__label { font-size: 12.5px; font-weight: 700; color: var(--mink); margin-bottom: 2px; }
.mkazanc__big { font-size: 15.5px; font-weight: 800; color: var(--mnavy); line-height: 1.25; }
.mkazanc__desc { font-size: 11.5px; color: var(--muted); line-height: 1.42; margin-top: 3px; }
.mkazanc__chev { color: #c2cede; flex-shrink: 0; }
.mkazanc__chev svg { width: 18px; height: 18px; }

.mlinkbox { display: flex; align-items: stretch; gap: 10px; }
.mlinkbox input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 13.5px; color: var(--mink); }
.mlinkbox button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--mink); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.mlinkbox button svg { width: 16px; height: 16px; }
.mlinkbox button.is-copied { border-color: var(--green); color: var(--green-700); }

.mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px 4px; }
.mstat { text-align: center; padding: 0 3px; }
.mstat + .mstat { border-left: 1px solid var(--border); }
.mstat__ic { color: var(--blue); margin-bottom: 5px; }
.mstat__ic svg { width: 18px; height: 18px; }
.mstat__v { font-size: 15.5px; font-weight: 800; color: var(--mink); }
.mstat__l { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.25; }

.minfo { display: flex; align-items: flex-start; gap: 10px; background: var(--blue-tint); border-radius: var(--r-md); padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: #3a5074; }
.minfo svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.minfo--green { background: var(--green-tint); color: #38614a; }
.minfo--green svg { color: var(--green-700); }
.minfo--orange { background: var(--orange-tint); color: #7a4a12; }
.minfo--orange svg { color: var(--orange-700); }

.mflaglink { display: block; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none; }

/* ============================================================================
   DAVETLERIM (davetlerim) — özet + filtre çipleri + davet listesi
   ========================================================================== */
.mdstat { display: flex; align-items: center; gap: 14px; background: var(--blue-tint); border-radius: var(--r-lg); padding: 16px; }
.mdstat__ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); color: var(--blue); display: grid; place-items: center; }
.mdstat__ic svg { width: 22px; height: 22px; }
.mdstat__tx strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--mink); margin-bottom: 4px; }
.mdstat__tx p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #3a5074; }

.mchips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mchips::-webkit-scrollbar { display: none; }
.mchip { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mchip.is-active { background: var(--blue-tint); border-color: transparent; color: var(--blue); }

.minv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.minv__row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border); text-decoration: none; }
.minv__row:last-child { border-bottom: 0; }
.minv__av { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.minv__tx { flex: 1; min-width: 0; }
.minv__name { font-size: 14px; font-weight: 700; color: var(--mink); }
.minv__st { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.minv__st svg { width: 13px; height: 13px; }
.minv__meta { text-align: right; flex-shrink: 0; }
.minv__date { font-size: 12px; color: var(--muted); }
.minv__amt { font-size: 14px; font-weight: 800; color: var(--green-700); margin-top: 6px; }
.minv__amt--none { color: #6b7a8c; }  /* 1,59:1 kontrast okunamıyordu; WCAG AA icin koyulastirildi */
.minv__st--ok   { background: var(--green-tint); color: var(--green-700); }
.minv__st--warn { background: #FDF4E1; color: #96700A; }
.minv__st--bad  { background: #FDECEC; color: #B42318; }
.minv__st--info { background: var(--blue-tint); color: var(--blue); }
.minv__st--mut  { background: var(--bg); color: var(--muted); }
.minv__row.is-hidden { display: none; }

/* ============================================================================
   ÖDÜLLERİM (odullerim) — puan hero + istatistik + geçmiş + ödül kataloğu
   ========================================================================== */
.mphero { display: flex; align-items: center; gap: 12px; overflow: hidden; background: linear-gradient(135deg, var(--mnavy) 0%, var(--mnavy2) 100%); border-radius: var(--r-lg); padding: 18px; color: #fff; }
.mphero__tx { flex: 1; min-width: 0; }
.mphero__label { font-size: 12.5px; opacity: .85; }
.mphero__big { font-size: 34px; font-weight: 800; line-height: 1.05; margin: 2px 0; }
.mphero__unit { font-size: 13.5px; opacity: .85; margin-bottom: 12px; }
.mphero__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.mphero__btn svg { width: 14px; height: 14px; }
.mphero__side { flex-shrink: 0; width: 40%; max-width: 150px; text-align: center; }
.mphero__art { color: rgba(255,255,255,.95); }
.mphero__art svg { width: 60px; height: 60px; }
.mphero__note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; opacity: .85; }

.mp3 { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 15px 6px; }
.mp3__c { text-align: center; }
.mp3__ic { width: 36px; height: 36px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; }
.mp3__ic svg { width: 18px; height: 18px; }
.mp3__ic--blue { background: var(--blue-tint); color: var(--blue); }
.mp3__ic--green { background: var(--green-tint); color: var(--green-700); }
.mp3__ic--orange { background: var(--orange-tint); color: var(--orange-700); }
.mp3__v { font-size: 16.5px; font-weight: 800; color: var(--mink); }
.mp3__l { font-size: 11px; color: var(--muted); margin-top: 2px; }

.mphist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.mphist__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.mphist__row:last-child { border-bottom: 0; }
.mphist__ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.mphist__ic--plus { background: var(--green-tint); color: var(--green-700); }
.mphist__ic--minus { background: #FDECEC; color: #B42318; }
.mphist__tx { flex: 1; min-width: 0; }
.mphist__tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--mink); }
.mphist__tx span { font-size: 11.5px; color: var(--muted); }
.mphist__meta { text-align: right; flex-shrink: 0; }
.mphist__amt { font-size: 13.5px; font-weight: 800; }
.mphist__amt--plus { color: var(--green-700); }
.mphist__amt--minus { color: #B42318; }
.mphist__date { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* Bağış vakıfları yatay ray hâlinde, tasarımdaki gibi; "Tüm Vakıfları Gör" rayı
   ızgaraya açıyor ki her seçenek yana kaydırmadan erişilebilir olsun. */
.mredeem { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mredeem::-webkit-scrollbar { display: none; }
.mredeem.is-expanded { flex-wrap: wrap; overflow: visible; }
.mredeem__c { flex: 0 0 134px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 12px 11px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.mredeem.is-expanded .mredeem__c { flex: 1 1 calc(50% - 6px); }
.mredeem__brand { height: 26px; display: grid; place-items: center; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); }
.mredeem__brand svg { width: 22px; height: 22px; }
.mredeem__brand img { max-width: 90px; max-height: 26px; object-fit: contain; }
.mredeem__name { font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1.3; margin-top: 6px; }
.mredeem__fname { font-size: 12.5px; font-weight: 800; color: var(--mink); line-height: 1.25; margin-top: 8px; }
.mredeem-all { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--blue); cursor: pointer; }
.mredeem-all svg { width: 14px; height: 14px; }

/* Vakıf kartı bir radyo etiketidir. Radyo GÖRÜNÜR bırakıldı: seçimi yalnız
   :has() ile boyayan bir kart, :has() desteklemeyen bir tarayıcıda hangi vakfın
   seçili olduğunu hiç göstermez — para hareketi olan bir ekranda kabul edilemez.
   :has() burada yalnızca cila. */
.mredeem__c--fund { position: relative; cursor: pointer; padding-top: 26px; }
.mredeem__radio { position: absolute; top: 9px; left: 9px; width: 17px; height: 17px; margin: 0; accent-color: var(--blue); }
.mredeem__c--fund:focus-within { border-color: var(--blue); }
.mredeem__c--fund:has(.mredeem__radio:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-tint); }

.mdonate { margin-top: 12px; }
.mdonate__fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.mdonate__fs[disabled] { opacity: .55; }
.mdonate__legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.mdonate__row { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.mdonate__field { flex: 1; min-width: 0; }
.mdonate__field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* 16px bilinçli: altına düşünce iOS Safari odaklanınca sayfayı zorla yakınlaştırıyor. */
.mdonate__field input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 16px; font-weight: 700; color: var(--mink); }
.mdonate__row .mem-btn { flex: 0 0 auto; width: auto; padding: 0 16px; }
.mdonate__hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.mdonate__consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.mdonate__consent input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }
.mdonate__consent span { font-size: 11.5px; line-height: 1.5; color: var(--mink); }

/* ============================================================================
   ÜYELİK SEVİYEM (uyelik-seviyem) — tier hero + ilerleme + avantajlar
   ========================================================================== */
.mtier-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #F6EDE2 0%, #F3E4D4 100%); border-radius: var(--r-lg); padding: 18px; }
.mtier-hero--gumus { background: linear-gradient(120deg, #eef1f5 0%, #e3e8ef 100%); }
.mtier-hero--altin { background: linear-gradient(120deg, #fbf3d8 0%, #f6e9bd 100%); }
.mtier-hero__top { display: flex; align-items: center; gap: 16px; }
.mtier-hex { flex-shrink: 0; width: 66px; height: 66px; border-radius: 19px; display: grid; place-items: center; background: linear-gradient(135deg, #9a6a3c 0%, #7c5228 100%); color: #fff; box-shadow: 0 8px 16px rgba(124, 82, 40, .3); }
.mtier-hex svg { width: 32px; height: 32px; }
.mtier-hero--gumus .mtier-hex { background: linear-gradient(135deg, #9aa6b5 0%, #6f7d8f 100%); box-shadow: 0 8px 16px rgba(111, 125, 143, .3); }
.mtier-hero--altin .mtier-hex { background: linear-gradient(135deg, #d8b24a 0%, #b8901f 100%); box-shadow: 0 8px 16px rgba(184, 144, 31, .3); }
.mtier-hero__ttl { font-size: 21px; font-weight: 800; color: #7c5228; margin: 0 0 6px; }
.mtier-hero--gumus .mtier-hero__ttl { color: #5b6b80; }
.mtier-hero--altin .mtier-hero__ttl { color: #977613; }
.mtier-hero__sub { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--mink); }
.mtier-prog { margin-top: 16px; background: var(--surface); border-radius: var(--r-md); padding: 14px; }
.mtier-prog__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.mtier-prog__next { font-size: 12.5px; color: var(--mink); }
.mtier-prog__next strong { color: var(--mink); font-weight: 800; }
.mtier-prog__next span { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.4; }
.mtier-prog__val { text-align: right; flex-shrink: 0; font-size: 15px; font-weight: 800; color: var(--mnavy); white-space: nowrap; }
.mprogbar { height: 9px; border-radius: 999px; background: #eadfce; overflow: hidden; }
.mtier-hero--gumus .mprogbar { background: #dde2ea; }
.mprogbar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c07f2f 0%, #9a6a3c 100%); }
.mtier-prog__pct { text-align: right; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 7px; }
.mtier-histrow { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 13px 14px; }
.mtier-histrow__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--orange-tint); color: #7c5228; display: grid; place-items: center; flex-shrink: 0; }
.mtier-histrow__ic svg { width: 19px; height: 19px; }
.mtier-histrow__tx { flex: 1; }
.mtier-histrow__tx strong { display: block; font-size: 14px; font-weight: 700; color: var(--mink); }
.mtier-histrow__tx span { font-size: 11.5px; color: var(--muted); }
.mtier-histrow__tag { flex-shrink: 0; padding: 5px 11px; border-radius: 999px; background: var(--green-tint); color: var(--green-700); font-size: 11.5px; font-weight: 700; }

/* ============================================================================
   PROFİL / ÜYELİK DETAYLARI — bilgi kartları + kv satırları + bölümler
   ========================================================================== */
.mprofcard { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.mprofcard .mpavatar { width: 62px; height: 62px; font-size: 22px; }
.mprofcard__info { flex: 1; min-width: 0; }
.mprofcard__name { font-size: 17.5px; font-weight: 800; color: var(--mink); margin-bottom: 5px; }

.msplit { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; margin-top: 14px; }
.msplit__c { flex: 1; display: flex; align-items: flex-start; gap: 11px; }
.msplit__c + .msplit__c { border-left: 1px solid var(--border); padding-left: 16px; }
.msplit__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; }
.msplit__ic svg { width: 16px; height: 16px; }
.msplit__l { font-size: 11.5px; color: var(--muted); }
.msplit__v { font-size: 13.5px; font-weight: 800; color: var(--mink); margin-top: 2px; }
.msplit__v--ok { color: var(--green-700); }

.msection { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.msection__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.msection__head .msec-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; }
.msection__head .msec-ic svg { width: 17px; height: 17px; }
.msection__head h2, .msection__head h3 { flex: 1; margin: 0; font-size: 14.5px; font-weight: 800; color: var(--mink); }
.msection__edit { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1.5px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--blue); font-weight: 700; font-size: 12px; cursor: pointer; text-decoration: none; }
.msection__edit svg { width: 13px; height: 13px; }
.mkv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--border); }
.mkv:first-of-type { border-top: 0; }
.mkv__k { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.mkv__v { font-size: 13.5px; font-weight: 700; color: var(--mink); text-align: right; }
.mkv__v--soon { color: var(--muted); font-weight: 600; font-style: italic; }
.mkv__v a, .mkv__act { color: var(--blue); font-weight: 700; text-decoration: none; }

/* --- Bildirim tercihleri (toggle) ------------------------------------------ */
.mtoggle { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.mtoggle:last-child { border-bottom: 0; }
.mtoggle__ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--green-tint); color: var(--green-700); display: grid; place-items: center; }
.mtoggle__ic svg { width: 18px; height: 18px; }
.mtoggle__tx { flex: 1; min-width: 0; }
.mtoggle__tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--mink); }
.mtoggle__tx span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.mswitch { position: relative; flex-shrink: 0; width: 44px; height: 25px; }
.mswitch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mswitch__track { position: absolute; inset: 0; border-radius: 999px; background: #cdd6e2; transition: background .18s; }
.mswitch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.mswitch input:checked + .mswitch__track { background: var(--green); }
.mswitch input:checked + .mswitch__track::after { transform: translateX(19px); }

/* --- Gizlilik bilgi listesi ------------------------------------------------ */
.mginfo { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-bottom: 1px solid var(--border); }
.mginfo:last-child { border-bottom: 0; }
.mginfo__ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; }
.mginfo__ic svg { width: 17px; height: 17px; }
.mginfo__tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--mink); line-height: 1.35; }
.mginfo__tx p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* --- Ortak: kart üstü başlık satırı (Tümünü Gör) --------------------------- */
.msec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 4px 10px; }
.msec-row .msec-title { margin: 0; }
.msec-row a { font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.msec-row a svg { width: 14px; height: 14px; }

/* --- Boş durum (liste boşsa) ------------------------------------------------ */
.mempty { text-align: center; padding: 28px 18px; }
.mempty__ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; }
.mempty__ic svg { width: 24px; height: 24px; }
.mempty p { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.mempty strong { color: var(--mink); }

/* --- Alt bilgi/CTA (kart) --------------------------------------------------- */
.mcta { display: flex; align-items: center; gap: 12px; background: var(--green-tint); border-radius: var(--r-lg); padding: 14px 16px; }
.mcta__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--green-700); display: grid; place-items: center; flex-shrink: 0; }
.mcta__ic svg { width: 17px; height: 17px; }
.mcta__tx { flex: 1; }
.mcta__tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--mink); }
.mcta__tx span { font-size: 11.5px; color: #38614a; }
.mcta__btn { flex-shrink: 0; padding: 8px 13px; border: 1.5px solid var(--green); border-radius: 9px; color: var(--green-700); font-weight: 700; font-size: 12.5px; text-decoration: none; background: var(--surface); }

/* --- Çıkış satırı ----------------------------------------------------------- */
.mlogout { margin-top: 10px; }
.mlogout button { width: 100%; }

/* Aralık yardımcıları (inline stil yerine — CSP-dostu) */
.mt16 { margin-top: 16px; }
.mb16 { margin-bottom: 16px; }

/* Geniş ekran: app kolonunu ortala, çok genişletme */
@media (min-width: 720px) {
  .mapp-nav { max-width: 640px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 18px 18px 0 0; }
}

/* ============================================================================
   Poliçelerim (policelerim.jpeg) + Poliçe Detayları (police-detaylari.jpeg)
   CRM portalı canlıyken görünür; 'off' durumunda bu bileşenler render edilmez.
   ========================================================================== */

/* --- Ürün tür tonları (ikon kareleri) -------------------------------------- */
.mpol__ic--blue,   .mpd-hero__ic--blue   { background: var(--blue-tint);  color: var(--blue); }
.mpol__ic--green,  .mpd-hero__ic--green  { background: var(--green-tint); color: var(--green-700); }
.mpol__ic--orange, .mpd-hero__ic--orange { background: var(--orange-tint); color: var(--orange-700); }
.mpol__ic--purple, .mpd-hero__ic--purple { background: #F0EBFB; color: #6B46C1; }
.mpol__ic--navy,   .mpd-hero__ic--navy   { background: #E7ECF8; color: var(--mnavy); }
.mpol__ic--pink,   .mpd-hero__ic--pink   { background: #FDECF3; color: #C2185B; }

/* --- Özet hero (lacivert) --------------------------------------------------- */
.mpolhero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--mnavy) 0%, var(--mnavy2) 100%);
  color: #fff; box-shadow: var(--shadow-md);
}
.mpolhero__ic {
  width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.mpolhero__ic svg { width: 26px; height: 26px; color: #fff; }
.mpolhero__grid { display: flex; flex: 1; min-width: 0; }
.mpolhero__c { flex: 1; min-width: 0; padding: 0 10px; display: flex; flex-direction: column; gap: 1px; }
.mpolhero__c + .mpolhero__c { border-left: 1px solid rgba(255, 255, 255, .18); }
.mpolhero__l { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .74); line-height: 1.25; }
.mpolhero__v { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.15; }
.mpolhero__v--sm { font-size: 16px; }
.mpolhero__s { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .62); }

/* --- Poliçe kartları -------------------------------------------------------- */
.mpollist { display: grid; gap: 12px; margin-top: 14px; }
[data-filter-item].is-hidden { display: none; }

.mpol {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm);
}
.mpol__main { display: flex; align-items: flex-start; gap: 12px; padding: 14px; color: inherit; text-decoration: none; }
.mpol__ic { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; }
.mpol__ic svg { width: 24px; height: 24px; }
.mpol__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mpol__name { font-size: 15px; font-weight: 800; color: var(--mink); letter-spacing: -0.01em; }
.mpol__co { font-size: 13px; font-weight: 600; color: var(--muted); }
.mpol__no { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mpol__dates { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mpol__dates svg { width: 13px; height: 13px; color: var(--blue); flex-shrink: 0; }
.mpol__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; text-align: right; }
.mpol__renew { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.mpol__renew strong { font-size: 15px; font-weight: 800; color: var(--mink); }
.mpol__chev { display: grid; place-items: center; color: var(--muted); flex-shrink: 0; align-self: center; }
.mpol__chev svg { width: 18px; height: 18px; }

.mpol__foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px; margin: 0 12px 12px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  background: var(--blue-tint); color: var(--blue);
}
.mpol__foot svg { width: 15px; height: 15px; }
.mpol__foot--green  { background: var(--green-tint); color: var(--green-700); }
.mpol__foot--orange,
.mpol__foot--warn   { background: var(--orange-tint); color: var(--orange-700); }
.mpol__foot--purple { background: #F0EBFB; color: #6B46C1; }
.mpol__foot--navy   { background: #E7ECF8; color: var(--mnavy); }
.mpol__foot--pink   { background: #FDECF3; color: #C2185B; }

/* --- Alt bilgi bandi -------------------------------------------------------- */
.mpolcta {
  display: flex; align-items: center; gap: 11px; padding: 14px;
  border-radius: var(--r-md); background: var(--blue-tint); border: 1px solid #D5E0EF;
}
.mpolcta__ic svg { width: 21px; height: 21px; color: var(--blue); flex-shrink: 0; }
.mpolcta p { flex: 1; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--mink); line-height: 1.45; }
.mpolcta__btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 10px 14px; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.mpolcta__btn svg { width: 14px; height: 14px; }

/* --- Detay: künye ----------------------------------------------------------- */
.mpd-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.mpd-hero__top { display: flex; gap: 13px; padding: 16px; }
.mpd-hero__ic { width: 62px; height: 62px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; }
.mpd-hero__ic svg { width: 32px; height: 32px; }
.mpd-hero__tx { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.mpd-hero__name { margin: 0; font-size: 17px; font-weight: 800; color: var(--mink); letter-spacing: -0.02em; line-height: 1.25; }
.mpd-hero__co { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.mpd-hero__st { margin: 2px 0; }
.mpd-hero__no { font-size: 13px; font-weight: 700; color: var(--ink); }
.mpd-hero__dates { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mpd-hero__dates svg { width: 13px; height: 13px; color: var(--blue); }

/* --- Detay: 4'lu istatistik seridi ------------------------------------------ */
.mpd-stats { display: flex; background: #F4F7FB; border-top: 1px solid var(--border); }
.mpd-stat { flex: 1; min-width: 0; padding: 13px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.mpd-stat + .mpd-stat { border-left: 1px solid var(--border); }
.mpd-stat__ic svg { width: 19px; height: 19px; color: var(--blue); }
.mpd-stat__l { font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.mpd-stat__v { font-size: 12.5px; font-weight: 800; color: var(--mink); line-height: 1.25; }

/* --- Detay: sekmeler -------------------------------------------------------- */
.mpd-card { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.mpd-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.mpd-tabs::-webkit-scrollbar { display: none; }
.mpd-tab {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 14px; border: 0; background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.mpd-tab svg { width: 19px; height: 19px; }
.mpd-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }

.mpd-panel { display: none; padding: 16px; }
.mpd-panel.is-active { display: block; }
.mpd-h { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 14.5px; font-weight: 800; color: var(--blue); }
.mpd-h svg { width: 17px; height: 17px; }
.mpd-sub { margin: 0 0 13px; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.mpd-soon { padding: 26px 12px; }

/* --- Detay: teminat tablosu -------------------------------------------------- */
.mpd-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mpd-table__head, .mpd-table__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; }
.mpd-table__head { background: #F4F7FB; font-size: 12px; font-weight: 700; color: var(--muted); }
.mpd-table__row { border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mpd-table__val { font-weight: 700; color: var(--mink); text-align: right; flex-shrink: 0; }

/* --- Detay: link satiri ------------------------------------------------------ */
.mpd-link {
  display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 13px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  text-decoration: none; color: inherit;
}
.mpd-link__ic { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--blue-tint); color: var(--blue); }
.mpd-link__ic svg { width: 19px; height: 19px; }
.mpd-link__tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mpd-link__tx strong { font-size: 13.5px; font-weight: 800; color: var(--mink); }
.mpd-link__tx span { font-size: 12px; font-weight: 600; color: var(--muted); }
.mpd-link__chev { color: var(--muted); flex-shrink: 0; }
.mpd-link__chev svg { width: 17px; height: 17px; }

/* --- Detay: kisiler ---------------------------------------------------------- */
.mpd-people { display: grid; gap: 9px; }
.mpd-person { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; }
.mpd-person__av { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.mpd-person__av svg { width: 19px; height: 19px; }
.mpd-person__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mpd-person__tx strong { font-size: 13.5px; font-weight: 800; color: var(--mink); }
.mpd-person__tx span { font-size: 12px; font-weight: 600; color: var(--muted); }

/* --- Detay: gecmis islemler (zaman cizgisi) ---------------------------------- */
.mpd-timeline { display: grid; gap: 0; }
.mpd-tl { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 11px 0 11px 4px; }
.mpd-tl + .mpd-tl { border-top: 1px solid var(--border); }
.mpd-tl__dot { width: 9px; height: 9px; margin-top: 4px; flex-shrink: 0; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.mpd-tl__tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mpd-tl__tx strong { font-size: 13.5px; font-weight: 700; color: var(--mink); }
.mpd-tl__tx span { font-size: 12px; font-weight: 600; color: var(--muted); }
.mpd-tl__date { font-size: 11.5px; font-weight: 700; color: var(--muted); flex-shrink: 0; }

/* --- Detay: alt aksiyonlar ---------------------------------------------------- */
.mpd-actions { display: flex; gap: 10px; margin-top: 16px; }
.mpd-actions .mem-btn { flex: 1; justify-content: center; }
.mem-btn.is-disabled { opacity: .5; pointer-events: none; }

/* --- Poliçelerim: 390px sığdırma rötuşları (tasarım kıyası) ------------------ */
.mpolhero { gap: 11px; padding: 16px 13px; }
.mpolhero__ic { width: 48px; height: 48px; }
.mpolhero__ic svg { width: 23px; height: 23px; }
.mpolhero__c { padding: 0 7px; }
.mpolhero__l { font-size: 10px; line-height: 1.2; }
.mpolhero__v { font-size: 18px; white-space: nowrap; }
.mpolhero__v--sm { font-size: 14px; }
.mpolhero__s { font-size: 9.5px; line-height: 1.2; }

/* Dört çip 390px'te tek satıra sığsın (Davetlerim çipleri etkilenmez) */
.mchips--pol .mchip { padding: 8px 11px; font-size: 12px; }

/* Kart: başlık ve sağ sütun birbirini ezmesin */
.mpol__name { font-size: 14.5px; line-height: 1.3; }
.mpol__side { min-width: 84px; }

/* --- Poliçe kartı: tasarımdaki 2 satırlı yapı --------------------------------
   Üst satır = ikon + künye + (durum rozeti & geri sayım) + chevron
   Alt satır = tarihler, kartın TAM genişliğinde tek satır (tasarım birebir).      */
.mpol__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mpol__row { display: flex; align-items: flex-start; gap: 10px; }
.mpol__row .mpol__tx { flex: 1; min-width: 0; }
.mpol__row .mpol__chev { align-self: center; }
.mpol__dates { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Poliçe Detayları: 390px sığdırma rötuşları (tasarım kıyası) ------------- */
/* Tarihler tek satır (tasarımdaki gibi iki takvim ikonuyla) */
.mpd-hero__dates { font-size: 11px; flex-wrap: nowrap; white-space: nowrap; }
.mpd-hero__dates svg { width: 12px; height: 12px; }
.mpd-hero__top { padding: 15px 14px; gap: 12px; }
.mpd-hero__ic { width: 58px; height: 58px; }
.mpd-hero__ic svg { width: 29px; height: 29px; }
.mpd-hero__name { font-size: 16px; }

/* Beş sekme 390px'e sığsın ("Geçmiş İşlemler" kesilmesin) */
.mpd-tab { padding: 11px 7px; font-size: 10.5px; gap: 3px; }
.mpd-tab svg { width: 17px; height: 17px; }

/* İstatistik şeridi: etiketler sıkışmasın, değerler tek satır kalsın */
.mpd-stat { padding: 12px 4px; }
.mpd-stat__l { font-size: 9.5px; }
.mpd-stat__v { font-size: 12px; }

/* --- Profil fotoğrafı (avatar yükleme) --------------------------------------- */
.mavatar { display: contents; }
.mavatar .mpavatar { cursor: pointer; }
.mpavatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mavatar__rm { margin-top: 6px; }
.mavatar__rm button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: underline;
}
.mavatar__rm button:hover { color: #B42318; }

/* --- Invite welcome box on the login screen (arriving via /davet/{code}) ----- */
.mem-invite {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 16px; padding: 13px 14px;
  border: 1px solid #CFE3D0; border-radius: var(--r-md); background: var(--green-tint);
}
.mem-invite__ic { flex-shrink: 0; color: var(--green-700); }
.mem-invite__ic svg { width: 20px; height: 20px; }
.mem-invite__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mem-invite__tx strong { font-size: 13.5px; font-weight: 800; color: var(--mink); }
.mem-invite__tx span { font-size: 12px; line-height: 1.45; color: #35603a; }
.mem-invite__tx span strong { font-size: inherit; color: var(--green-700); }

/* ============================================================================
   YARDIM & DESTEK — iletisim satirlari + SSS akordeonu
   ========================================================================== */
/* Signed-out visitors arrive from the login screen, where the shell renders in
   auth mode (no padded main), so the page carries its own frame. */
.mapp-main--auth .mhelp { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; }
.mhelp__ttl { margin: 0 0 16px; font-size: 20px; font-weight: 800; color: var(--mink); text-align: center; }

.mfaqs { display: grid; gap: 8px; }
.mfaq {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.mfaq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--mink); line-height: 1.35;
}
.mfaq > summary::-webkit-details-marker { display: none; }
.mfaq__chev { flex-shrink: 0; color: var(--blue); display: grid; place-items: center; transition: transform .18s; }
.mfaq__chev svg { width: 17px; height: 17px; }
.mfaq[open] .mfaq__chev { transform: rotate(180deg); }
.mfaq[open] > summary { color: var(--blue); }
.mfaq__a { padding: 0 14px 13px; border-top: 1px solid var(--border); }
.mfaq__a p { margin: 11px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.mfaq__a p strong { color: var(--mink); font-weight: 700; }
.mfaq__a a { color: var(--blue); font-weight: 700; }

/* Profile: the edit form stays folded until a "Düzenle" pill targets it, so the
   read view matches the design instead of stacking a full-height form beneath it. */
#duzenle:not(:target) { display: none; }
.mform-cancel { display: block; text-align: center; margin-top: 12px; padding: 8px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; }

/* --- Tercih formu: anlik kaydetme geri bildirimi ---------------------------- */
.is-autosave .mem-btn--primary { display: none; }
.mautosave { margin: 12px 0 0; text-align: center; font-size: 12px; font-weight: 700; min-height: 16px; }
.mautosave.is-saving { color: var(--muted); }
.mautosave.is-saved  { color: var(--green-700); }
.mautosave.is-failed { color: #B42318; }

/* --- Dokunma hedefleri: kucultme sonrasi erisilebilirlik tabani -------------
   Shrinking to the design's proportions pulled some controls under the minimum
   touch target. The visuals stay at design size; only the hit area grows. */
.mswitch input { inset: -10px -8px; width: auto; height: auto; }
.mredeem__pts { min-height: 36px; }
.mredeem-all { padding: 7px 0; }
.msec-row a { padding: 5px 0; }
.mpcard__chev { padding: 11px 0 11px 8px; }

/* Iki ikincil eylemi yan yana; dar ekranda alt alta. */
.msec-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.msec-actions .mem-inline-form { flex: 1 1 auto; }
.msec-actions .mem-btn { width: 100%; }

/* Genel gizleme yardımcısı. Daha önce yalnız .minv__row ve [data-filter-item] için
   kuralı vardı; Ödüllerim'in "Tümünü Gör" katlaması aynı sınıfı kullandığı için
   sessizce ölüydü — satırlar hep görünüyordu, düğme hiçbir şey yapmıyordu. */
.is-hidden { display: none !important; }

/* JS gelmeden çubuk %100 dolu görünmesin (sunucu inline width verir). */
.mprogbar__fill { width: 0; transition: width .35s ease; }

/* "Bu ben değilim" — form içinde düğme olarak render edildiği için sıfırlanır. */
button.mform-cancel { width: 100%; border: 0; background: transparent; cursor: pointer; }

/* Davet kutusundaki puan→TL kuru: vaadin hemen altında, aynı cümlenin parçası. */
.mem-invite__rate { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

/* OTP alanının altındaki süre/otomatik-gönderim ipucu. */
.mem-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Davet listesi sayfalayıcı. Dokunma hedefleri 24px tabanının üstünde. */
.mpager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.mpager__btn { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--blue); }
.mpager__btn svg { width: 14px; height: 14px; }
.mpager__btn.is-off { color: #b7c2d0; border-color: #e7edf4; }
.mpager__pos { font-size: 11.5px; color: var(--muted); text-align: center; flex: 1; min-width: 0; }

/* Profil fotoğrafı dosya alanı: görünmez ama ODAKLANABİLİR (hidden değil), böylece
   klavye ve ekran okuyucu erişebiliyor. Odak halkası görünen avatar üzerinde. */
.mavatar__file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mpavatar:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Kimlik doğrulama alanının görünür etiketi — form flex satırında tam genişlik
   alıp inputun üstünde kalır. */
.mem-verify__form .mem-label { flex: 0 0 100%; margin-bottom: -2px; font-size: 13px; font-weight: 700; color: var(--mink); }

/* Kurtarma kodları: kopyala/indir eylemleri + son uyarı. Kodlar bir daha
   gösterilmediği için bu kutudan kaydetmeden çıkmak geri alınamaz. */
.mem-codes__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mem-codes__acts .mem-btn { flex: 1 1 auto; min-width: 150px; }
.mem-codes__warn { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: #8A6D1B; }
.mem-codes__warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* Toggle klavye odağı: gerçek input opacity:0 olduğu için global :focus-visible
   halkası da görünmez oluyordu — halkayı görünen parçaya taşıyoruz. Çerez
   tercihlerindeki .cprefs__sw ile aynı desen. */
.mswitch input:focus-visible { outline: none; }
.mswitch input:focus-visible + .mswitch__track { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Pasif "Poliçeyi İndir" düğmesinin gerekçe notu. */
.mem-note-sm { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }