/* ============================================
   ACCOUNT PAGES — Hesabım şablonları (account_nav_base)
   Önceki sürümdeki %50 nav + aşırı padding-top mobil UX’i bozuyordu; tek kaynak kurallar.
============================================ */

:root {
  /* Tek yatay nefes — #mainContent (wrapper’larda yatay padding yok) */
  --account-layout-gutter: clamp(6px, 0.7vw, 12px);
  /* Üst/alt: satır yüksekliği seviyesinde */
  --account-layout-gutter-y: 0.3rem;
  /* tmv2 bar (~58px) + 2px — üstteki büyük boşluğun çoğu buradan */
  --account-main-offset-desktop: 60px;
  --account-main-offset-mobile: calc(50px + 1.25vw);
  --account-mobile-header-bottom: 88px;
  --account-nav-gap-header: var(--account-layout-gutter-y);
  --account-nav-strip-height: 44px;
  --account-nav-content-gap: 0.4rem;
  /* Önce 1680’dı; büyük ekranda içerik dar kalıyordu */
  --account-page-max-width: 1920px;
  --account-nav-inner-max-width: var(--account-page-max-width);
  --account-side-rail-width: 200px;
  --account-mobile-bottom-nav-height: 58px;
  --account-desktop-nav-top: var(--account-main-offset-desktop);
  --account-padding-below-nav: calc(
    var(--account-nav-strip-height) + var(--account-nav-content-gap)
  );

}

/* Geniş ekranda sağ/sol şeritte renk sıçraması: html + flex + main tam genişlik ve aynı gradient */
html:has(.account-page-wrapper),
html:has(.profile-page-wrapper),
html:has(.subscription-page-wrapper),
html:has(.shipping-page-wrapper),
html:has(.notifications-page-wrapper),
html:has(.integration-page-wrapper),
html:has(.security-page-wrapper),
html:has(.balance-page-wrapper),
html:has(.cart-page-wrapper),
html:has(.favorites-page-wrapper),
html:has(.orders-page-wrapper) {
  background-color: transparent;
  background-image: none;
  min-height: 100%;
}

#mainContent.main-content:has(.account-page-wrapper),
#mainContent.main-content:has(.profile-page-wrapper),
#mainContent.main-content:has(.subscription-page-wrapper),
#mainContent.main-content:has(.shipping-page-wrapper),
#mainContent.main-content:has(.security-page-wrapper),
#mainContent.main-content:has(.notifications-page-wrapper),
#mainContent.main-content:has(.balance-page-wrapper),
#mainContent.main-content:has(.integration-page-wrapper),
#mainContent.main-content:has(.cart-page-wrapper),
#mainContent.main-content:has(.favorites-page-wrapper),
#mainContent.main-content:has(.orders-page-wrapper) {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 1 1 auto !important;
}

.flex.min-h-screen:has(.account-page-wrapper),
.flex.min-h-screen:has(.profile-page-wrapper),
.flex.min-h-screen:has(.subscription-page-wrapper),
.flex.min-h-screen:has(.shipping-page-wrapper),
.flex.min-h-screen:has(.security-page-wrapper),
.flex.min-h-screen:has(.notifications-page-wrapper),
.flex.min-h-screen:has(.balance-page-wrapper),
.flex.min-h-screen:has(.integration-page-wrapper),
.flex.min-h-screen:has(.cart-page-wrapper),
.flex.min-h-screen:has(.favorites-page-wrapper),
.flex.min-h-screen:has(.orders-page-wrapper) {
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Sayfa sarmalayıcı — üst boşluk içerikte (container) hesaplanır; burada çift boşluk yok */
body .account-page,
body .account-page-wrapper,
body .profile-page-wrapper,
body .subscription-page-wrapper,
body .shipping-page-wrapper,
body .security-page-wrapper,
body .notifications-page-wrapper,
body .balance-page-wrapper,
body .integration-page-wrapper,
body .cart-page-wrapper,
body .favorites-page-wrapper,
body .orders-page-wrapper,
html body .account-page,
html body .account-page-wrapper,
html body .profile-page-wrapper,
html body .subscription-page-wrapper,
html body .shipping-page-wrapper,
html body .security-page-wrapper,
html body .notifications-page-wrapper,
html body .balance-page-wrapper,
html body .integration-page-wrapper,
html body .cart-page-wrapper,
html body .favorites-page-wrapper,
html body .orders-page-wrapper {
  min-height: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Hesabım: içerik (sol) + sağ dikey şerit — account_nav_base.html */
.account-layout-with-rail {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  width: 100% !important;
  max-width: min(100%, var(--account-page-max-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  /* Yatay: #mainContent padding — çift gutter yok */
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Üst boşluk #mainContent padding-top’ta (sabit header ile tek hizalama) */
  padding-top: 0 !important;
  min-width: 0 !important;
}

.account-main-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body .account-nav-container,
html body .account-nav-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Masaüstü: dikey şerit içi — varsayılan; mobilde ezilir */
.account-nav-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0.35rem !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  padding: 0.5rem 0.35rem !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.account-nav-wrapper::-webkit-scrollbar {
  width: 4px !important;
}

.account-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.35rem 0.4rem;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--color-text-muted);
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  background: transparent;
  border: 2px solid transparent;
  font-weight: 500;
}

.account-nav-item i {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

.account-nav-item span {
  font-size: 0.7rem;
  font-weight: 500;
}

.account-nav-item:hover {
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-secondary-soft) 100%);
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
}

.account-nav-item:hover i,
.account-nav-item:hover span {
  color: var(--color-primary);
}

.account-nav-item.active {
  background: var(--tm-account-hero-gradient);
  color: var(--tm-fg-on-brand);
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.22);
}

.account-nav-item.active i,
.account-nav-item.active span {
  color: var(--tm-fg-on-brand);
  font-weight: 600;
}

.account-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--tm-fg-on-brand);
  border-radius: 2px 2px 0 0;
}

/* Yüklenirken sekme asla soluklmasın (sadece active eşleşmezse bile okunaklı kalsın) */
.account-nav-item.loading {
  opacity: 1 !important;
  pointer-events: none;
}

.account-nav-item.active.loading {
  opacity: 1 !important;
  pointer-events: none;
}

#accountNavigation .account-nav-item.loading {
  opacity: 1 !important;
}

html.dark-mode .account-navigation {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark-mode .account-navigation .account-nav-container {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark-mode .account-nav-item {
  color: var(--color-text-muted) !important;
  background: transparent !important;
}

html.dark-mode .account-nav-item:hover {
  background: rgba(var(--color-primary-rgb), 0.12) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode .account-nav-item.active {
  background: rgba(var(--color-primary-rgb), 0.22) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

html.dark-mode .account-nav-item i,
html.dark-mode .account-nav-item span {
  color: inherit !important;
}

/* Dış sarmalayıcı — yatay boşluk burada; iç *-container’da padding yok (çift gutter önlenir) */
body .account-container-wrapper,
body .profile-container-wrapper,
body .subscription-container-wrapper,
body .shipping-container-wrapper,
body .security-container-wrapper,
body .notifications-container-wrapper,
body .balance-container-wrapper,
body .integration-container-wrapper,
body .cart-container-wrapper,
body .favorites-container-wrapper,
body .orders-container-wrapper,
html body .account-container-wrapper,
html body .profile-container-wrapper,
html body .subscription-container-wrapper,
html body .shipping-container-wrapper,
html body .security-container-wrapper,
html body .notifications-container-wrapper,
html body .balance-container-wrapper,
html body .integration-container-wrapper,
html body .cart-container-wrapper,
html body .favorites-container-wrapper,
html body .orders-container-wrapper {
  max-width: min(100%, var(--account-page-max-width)) !important;
  margin: 0 auto !important;
  /* Yatay: main’de; burada sadece dikey nefes */
  padding: var(--account-layout-gutter-y) 0 0.65rem !important;
  padding-top: var(--account-layout-gutter-y) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* İç container — genişlik only; kenar boşluğu wrapper + account-main-column (Hesabım/Profil = Abonelik ile aynı) */
body .account-container,
body .profile-container,
body .subscription-container,
body .shipping-container,
body .security-container,
body .notifications-container,
body .balance-container,
body .integration-container,
body .cart-container,
body .favorites-container,
body .orders-container,
html body .account-container,
html body .profile-container,
html body .subscription-container,
html body .shipping-container,
html body .security-container,
html body .notifications-container,
html body .balance-container,
html body .integration-container,
html body .cart-container,
html body .favorites-container,
html body .orders-container {
  max-width: min(100%, var(--account-page-max-width)) !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  padding: 0 !important;
}

.account-main-content,
.profile-main-content,
.subscription-main-content,
.shipping-main-content,
.security-main-content,
.notifications-main-content,
.balance-main-content,
.integration-main-content,
.cart-main-content,
.favorites-main-content,
.orders-main-content {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Eski account.css .account-main-content (margin-left 280px vb.) rail düzenini bozmasın */
html body .account-layout-with-rail .account-main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
}

html body .account-page-wrapper .main-content,
html body .profile-page-wrapper .main-content,
html body .subscription-page-wrapper .main-content,
html body .shipping-page-wrapper .main-content,
html body .security-page-wrapper .main-content,
html body .notifications-page-wrapper .main-content,
html body .balance-page-wrapper .main-content,
html body .integration-page-wrapper .main-content,
html body .cart-page-wrapper .main-content,
html body .favorites-page-wrapper .main-content,
html body .orders-page-wrapper .main-content,
html body .account-page .main-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Masaüstü: sağda yapışkan dikey şerit (layout flex içinde) */
@media (min-width: 769px) {
  html body .account-layout-with-rail {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* Ana içerik: tek yüzey — tüm Hesabım alt sayfalarında aynı çerçeve (üst ofset header ile birlikte) */
  /* Dashboard ile aynı: ekstra opak “ikinci tabaka” yok — grid + bg-shapes .page-shell üzerinden görünsün */
  html body .account-layout-with-rail > .account-main-column {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    /* Yatay: #mainContent’te zaten gutter var; çift nefes kaldırıldı */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.5rem !important;
    /* İçerik kadar yükseklik; tam viewport min-height kaldırıldı */
    min-height: 0 !important;
  }

  /* İçerik alanı: Hesabım / Profil diğer hub sayfalarıyla aynı genişlik */
  html body .account-main-column .account-container,
  html body .account-main-column .profile-container,
  html body .account-main-column .subscription-container,
  html body .account-main-column .shipping-container,
  html body .account-main-column .notifications-container,
  html body .account-main-column .integration-container,
  html body .account-main-column .balance-container,
  html body .account-main-column .security-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  html body .account-main-column .account-container-wrapper,
  html body .account-main-column .profile-container-wrapper,
  html body .account-main-column .subscription-container-wrapper,
  html body .account-main-column .shipping-container-wrapper,
  html body .account-main-column .security-container-wrapper,
  html body .account-main-column .notifications-container-wrapper,
  html body .account-main-column .balance-container-wrapper,
  html body .account-main-column .integration-container-wrapper,
  html body .account-main-column .cart-container-wrapper,
  html body .account-main-column .favorites-container-wrapper,
  html body .account-main-column .orders-container-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Kartın üstü = içerik sarmalayıcı üstü (aynı başlangıç çizgisi) */
    padding-top: var(--account-layout-gutter-y) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Entegrasyon: sütunlar hizalama + sıkı gutter; sol sütun içeriğe göre yükseklik */
  html body:has(.account-layout-with-rail) .integration-container > .row {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0.5rem !important;
    align-items: flex-start !important;
  }

  html body:has(.account-layout-with-rail) .integration-container .platform-forms-container {
    min-height: 0 !important;
  }

  /* Entegrasyon: hoşgeldin / form — diğer hesap sayfalarına dokunmadan */
  html body:has(.account-layout-with-rail) .integration-container > .account-welcome-card {
    margin-bottom: 0.35rem !important;
  }

  html body:has(.account-layout-with-rail) .integration-container .account-welcome-card > .card-body {
    padding: 0.75rem 1rem !important;
  }

  html body:has(.account-layout-with-rail) .integration-platform-form-card .integration-platform-form-card-body {
    padding: 0.75rem 1rem !important;
  }

  html body:has(.account-layout-with-rail) .integration-container .form-platform-header {
    margin-bottom: 0.65rem !important;
  }

  html body:has(.account-layout-with-rail) .integration-container .platform-form-actions {
    margin-top: 0.45rem !important;
  }

  html body .account-navigation {
    position: sticky !important;
    top: var(--account-desktop-nav-top) !important;
    flex: 0 0 var(--account-side-rail-width) !important;
    width: var(--account-side-rail-width) !important;
    max-width: var(--account-side-rail-width) !important;
    align-self: flex-start !important;
    /* Header z-index 1030 + hesap dropdown 1050 üstte kalsın; rail yalnızca içerik üzerinde */
    z-index: 1020 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body .account-navigation .account-nav-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-alt) 100%) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.18) !important;
    border-right: 3px solid var(--color-primary) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    overflow: hidden !important;
  }

  html body .account-nav-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    padding: 0.55rem 0.4rem !important;
    max-height: calc(100vh - var(--account-desktop-nav-top) - 1.5rem) !important;
  }

  html body .account-nav-item {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0.42rem 0.5rem !important;
    border-radius: 10px !important;
  }

  html body .account-nav-item i {
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
  }

  html body .account-nav-item span {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  html body .account-nav-item.active::after {
    display: none !important;
  }

  /* Masaüstü: yükleme sınıfında da tam opaklık (mobil ile tutarlı) */
  html body #accountNavigation .account-nav-item.loading {
    opacity: 1 !important;
  }
}

/* Mobil: alt sabit sekme çubuğu (6 sekme tek satır); üstte ekstra şerit yok */
@media (max-width: 768px) {
  /* İçerik padding + yüzen buton ofseti ile uyumlu (2 satır etiket + home indicator) */
  :root {
    --account-mobile-bottom-nav-height: 72px;
    /* Sabit header altı — fazla boşluk kalksın (önce ~88px + ek) */
    --account-mobile-header-bottom: 62px;
  }

  /* Turuncu yalnızca .account-welcome-card üzerinde (dosyanın üstündeki + :has mobil blokları) */

  html body .account-layout-with-rail {
    flex-direction: column !important;
    align-items: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
    /* Üst ofset #mainContent’te; burada çift boşluk olmasın */
    padding-top: 0 !important;
  }

  html body .account-layout-with-rail > .account-main-column {
    padding-top: 0 !important;
    padding-bottom: calc(
      var(--account-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px
    ) !important;
    /* Masaüstü paneli mobilde kaldır — tam genişlik krem arka plan */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
  }

  html body .account-navigation {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    /* Üst header / hesap dropdown (≈1030–1050) altında kalsın; sayfa gövdesinin üstünde yeter */
    z-index: 1020 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12) !important;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%) !important;
    border-top: 2px solid rgba(var(--color-primary-rgb), 0.35) !important;
    border-bottom: none !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html body .account-nav-container {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  html body .account-nav-wrapper,
  body .account-nav-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    padding: 0.4rem max(6px, env(safe-area-inset-left)) 0.35rem max(6px, env(safe-area-inset-right)) !important;
    max-height: none !important;
    scrollbar-width: none !important;
  }

  html body .account-nav-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  /* Mobil sekme: dokunma alanı + yatay kaydırma (çok dar ekran) */
  html body .account-nav-item {
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0.32rem 0.18rem !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
    scroll-snap-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease !important;
  }

  html body .account-nav-item:active:not(.loading) {
    transform: scale(0.97) !important;
  }

  html body .account-nav-item i {
    font-size: 1.12rem !important;
    flex-shrink: 0 !important;
  }

  html body .account-nav-item span {
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    hyphens: auto;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
  }

  html body .account-nav-item.active {
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.28) !important;
  }

  /* Alt sekmede ::after beyaz çizgisi 2 satır etiketin üstüne biniyordu */
  html body .account-nav-item.active::after {
    display: none !important;
    content: none !important;
  }

  html body .account-page-wrapper,
  html body .profile-page-wrapper,
  html body .subscription-page-wrapper,
  html body .shipping-page-wrapper,
  html body .security-page-wrapper,
  html body .notifications-page-wrapper,
  html body .balance-page-wrapper,
  html body .integration-page-wrapper,
  html body .cart-page-wrapper,
  html body .favorites-page-wrapper,
  html body .orders-page-wrapper {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobil: tek ince yan boşluk (safe-area); #mainContent padding’i ayrıca sıfırlanır */
  html body .account-container-wrapper,
  html body .profile-container-wrapper,
  html body .subscription-container-wrapper,
  html body .shipping-container-wrapper,
  html body .security-container-wrapper,
  html body .notifications-container-wrapper,
  html body .balance-container-wrapper,
  html body .integration-container-wrapper,
  html body .cart-container-wrapper,
  html body .favorites-container-wrapper,
  html body .orders-container-wrapper {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: 24px !important;
    padding-top: var(--account-layout-gutter-y) !important;
    max-width: 100% !important;
  }

  /* Şerit düzeninde üst boşluk zaten .account-layout-with-rail’de — çift nefes kaldırıldı */
  html body:has(.account-layout-with-rail) .account-container-wrapper,
  html body:has(.account-layout-with-rail) .profile-container-wrapper,
  html body:has(.account-layout-with-rail) .subscription-container-wrapper,
  html body:has(.account-layout-with-rail) .shipping-container-wrapper,
  html body:has(.account-layout-with-rail) .security-container-wrapper,
  html body:has(.account-layout-with-rail) .notifications-container-wrapper,
  html body:has(.account-layout-with-rail) .balance-container-wrapper,
  html body:has(.account-layout-with-rail) .integration-container-wrapper,
  html body:has(.account-layout-with-rail) .cart-container-wrapper,
  html body:has(.account-layout-with-rail) .favorites-container-wrapper,
  html body:has(.account-layout-with-rail) .orders-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .account-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .profile-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .subscription-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .shipping-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .security-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .notifications-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .balance-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .integration-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .cart-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .favorites-container-wrapper,
  html body:has(.account-layout-with-rail) .account-main-column .orders-container-wrapper {
    padding-top: 0.35rem !important;
  }

  /* Masaüstü kuralı (.account-main-column … padding:0) mobilde ezilir */
  html body .account-main-column .account-container-wrapper,
  html body .account-main-column .profile-container-wrapper,
  html body .account-main-column .subscription-container-wrapper,
  html body .account-main-column .shipping-container-wrapper,
  html body .account-main-column .security-container-wrapper,
  html body .account-main-column .notifications-container-wrapper,
  html body .account-main-column .balance-container-wrapper,
  html body .account-main-column .integration-container-wrapper,
  html body .account-main-column .cart-container-wrapper,
  html body .account-main-column .favorites-container-wrapper,
  html body .account-main-column .orders-container-wrapper {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: 24px !important;
    padding-top: var(--account-layout-gutter-y) !important;
  }

  html body .profile-main-content,
  html body .account-main-content,
  html body .subscription-main-content,
  html body .shipping-main-content,
  html body .notifications-main-content,
  html body .balance-main-content,
  html body .integration-main-content {
    padding-top: 0 !important;
  }
}

/* Tablet: kenar boşluğu ~%2 */
@media (max-width: 1024px) and (min-width: 769px) {
  body .account-container-wrapper,
  body .profile-container-wrapper,
  html body .subscription-container-wrapper,
  html body .shipping-container-wrapper,
  html body .notifications-container-wrapper,
  html body .balance-container-wrapper,
  html body .integration-container-wrapper,
  html body .cart-container-wrapper,
  html body .favorites-container-wrapper,
  html body .orders-container-wrapper {
    /* Yatay: #mainContent — tekrar gutter yok */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Header gizle - Account sayfalarında */
html body .account-page #mainHeader,
html body .account-page-wrapper #mainHeader,
html body .profile-page-wrapper #mainHeader,
html body .subscription-page-wrapper #mainHeader,
html body .shipping-page-wrapper #mainHeader,
html body .security-page-wrapper #mainHeader,
html body .notifications-page-wrapper #mainHeader,
html body .balance-page-wrapper #mainHeader,
html body .integration-page-wrapper #mainHeader,
html body .cart-page-wrapper #mainHeader,
html body .favorites-page-wrapper #mainHeader,
html body .orders-page-wrapper #mainHeader,
html body .account-page .main-header,
html body .account-page-wrapper .main-header,
html body .profile-page-wrapper .main-header,
html body .subscription-page-wrapper .main-header,
html body .shipping-page-wrapper .main-header,
html body .security-page-wrapper .main-header,
html body .notifications-page-wrapper .main-header,
html body .balance-page-wrapper .main-header,
html body .integration-page-wrapper .main-header,
html body .cart-page-wrapper .main-header,
html body .favorites-page-wrapper .main-header,
html body .orders-page-wrapper .main-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .account-page #sidebar,
html body .account-page-wrapper #sidebar,
html body .profile-page-wrapper #sidebar,
html body .subscription-page-wrapper #sidebar,
html body .shipping-page-wrapper #sidebar,
html body .security-page-wrapper #sidebar,
html body .notifications-page-wrapper #sidebar,
html body .balance-page-wrapper #sidebar,
html body .integration-page-wrapper #sidebar,
html body .cart-page-wrapper #sidebar,
html body .favorites-page-wrapper #sidebar,
html body .orders-page-wrapper #sidebar {
  z-index: 1050 !important;
}

/* base.html genel .text-orange (accent) korunur; yalnızca hesabım şeridinde marka mavisi */
.account-page-wrapper .text-orange,
.profile-page-wrapper .text-orange,
.subscription-page-wrapper .text-orange,
.shipping-page-wrapper .text-orange,
.notifications-page-wrapper .text-orange,
.integration-page-wrapper .text-orange,
.balance-page-wrapper .text-orange,
.security-page-wrapper .text-orange,
.cart-page-wrapper .text-orange,
.favorites-page-wrapper .text-orange,
.orders-page-wrapper .text-orange {
  color: var(--color-primary) !important;
}
.account-page-wrapper .bg-orange,
.profile-page-wrapper .bg-orange,
.subscription-page-wrapper .bg-orange,
.shipping-page-wrapper .bg-orange,
.notifications-page-wrapper .bg-orange,
.integration-page-wrapper .bg-orange,
.balance-page-wrapper .bg-orange,
.security-page-wrapper .bg-orange,
.cart-page-wrapper .bg-orange,
.favorites-page-wrapper .bg-orange,
.orders-page-wrapper .bg-orange {
  background-color: var(--color-primary) !important;
}
.account-page-wrapper .border-orange,
.profile-page-wrapper .border-orange,
.subscription-page-wrapper .border-orange,
.shipping-page-wrapper .border-orange,
.notifications-page-wrapper .border-orange,
.integration-page-wrapper .border-orange,
.balance-page-wrapper .border-orange,
.security-page-wrapper .border-orange,
.cart-page-wrapper .border-orange,
.favorites-page-wrapper .border-orange,
.orders-page-wrapper .border-orange {
  border-color: var(--color-primary) !important;
}
.account-page-wrapper .bg-orange-light,
.profile-page-wrapper .bg-orange-light,
.subscription-page-wrapper .bg-orange-light,
.shipping-page-wrapper .bg-orange-light,
.notifications-page-wrapper .bg-orange-light,
.integration-page-wrapper .bg-orange-light,
.balance-page-wrapper .bg-orange-light,
.security-page-wrapper .bg-orange-light,
.cart-page-wrapper .bg-orange-light,
.favorites-page-wrapper .bg-orange-light,
.orders-page-wrapper .bg-orange-light {
  background-color: var(--color-primary-soft) !important;
}

.gradient-card {
  background: var(--tm-gradient-card) !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gradient-card:hover {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface) 100%) !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(var(--color-primary-rgb), 0.2) !important;
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hover-lift:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.shadow-orange {
  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.22) !important;
}

.bi {
  font-family: 'bootstrap-icons' !important;
}

.bi::before {
  font-family: 'bootstrap-icons' !important;
}

.account-page-wrapper > footer,
.account-page-wrapper footer,
.profile-page-wrapper > footer,
.profile-page-wrapper footer,
.subscription-page-wrapper > footer,
.subscription-page-wrapper footer,
.shipping-page-wrapper > footer,
.shipping-page-wrapper footer,
.security-page-wrapper > footer,
.security-page-wrapper footer,
.notifications-page-wrapper > footer,
.notifications-page-wrapper footer,
.balance-page-wrapper > footer,
.balance-page-wrapper footer,
.integration-page-wrapper > footer,
.integration-page-wrapper footer,
.cart-page-wrapper > footer,
.cart-page-wrapper footer,
.favorites-page-wrapper > footer,
.favorites-page-wrapper footer,
.orders-page-wrapper > footer,
.orders-page-wrapper footer {
  margin-top: 1.5rem !important;
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  clear: both !important;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* v2: shell + gövde — hesap akışlarında bölüm aralığı aşırı açılmasın */
#tmv2App:has(.account-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.profile-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.subscription-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.shipping-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.security-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.notifications-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.balance-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.integration-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.cart-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.favorites-page-wrapper) .tmv2-page-shell,
#tmv2App:has(.orders-page-wrapper) .tmv2-page-shell {
  gap: 0.35rem;
}
#tmv2App:has(.account-page-wrapper) .tmv2-page-body,
#tmv2App:has(.profile-page-wrapper) .tmv2-page-body,
#tmv2App:has(.subscription-page-wrapper) .tmv2-page-body,
#tmv2App:has(.shipping-page-wrapper) .tmv2-page-body,
#tmv2App:has(.security-page-wrapper) .tmv2-page-body,
#tmv2App:has(.notifications-page-wrapper) .tmv2-page-body,
#tmv2App:has(.balance-page-wrapper) .tmv2-page-body,
#tmv2App:has(.integration-page-wrapper) .tmv2-page-body,
#tmv2App:has(.cart-page-wrapper) .tmv2-page-body,
#tmv2App:has(.favorites-page-wrapper) .tmv2-page-body,
#tmv2App:has(.orders-page-wrapper) .tmv2-page-body {
  gap: 0.25rem;
}

/* Ana içerik alanı — tmv2 #mainContent ile aynı eleman; yüksek özgüllük: çift main padding olmasın */
#tmv2App main#mainContent.tmv2-page:has(.account-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.profile-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.subscription-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.shipping-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.security-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.notifications-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.balance-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.integration-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.cart-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.favorites-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.orders-page-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.support-tickets-account-wrapper),
#tmv2App main#mainContent.tmv2-page:has(.profile-email-settings-wrapper),
#mainContent.main-content:has(.account-page-wrapper),
#mainContent.main-content:has(.profile-page-wrapper),
#mainContent.main-content:has(.subscription-page-wrapper),
#mainContent.main-content:has(.shipping-page-wrapper),
#mainContent.main-content:has(.security-page-wrapper),
#mainContent.main-content:has(.notifications-page-wrapper),
#mainContent.main-content:has(.balance-page-wrapper),
#mainContent.main-content:has(.integration-page-wrapper),
#mainContent.main-content:has(.cart-page-wrapper),
#mainContent.main-content:has(.favorites-page-wrapper),
#mainContent.main-content:has(.orders-page-wrapper),
#mainContent.main-content:has(.support-tickets-account-wrapper),
#mainContent.main-content:has(.profile-email-settings-wrapper) {
  padding-left: var(--account-layout-gutter) !important;
  padding-right: var(--account-layout-gutter) !important;
  padding-top: var(--account-main-offset-desktop) !important;
  padding-bottom: 0.2rem !important;
}

@media (max-width: 768px) {
  #tmv2App main#mainContent.tmv2-page:has(.account-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.profile-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.subscription-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.shipping-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.security-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.notifications-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.balance-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.integration-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.cart-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.favorites-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.orders-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.support-tickets-account-wrapper),
  #tmv2App main#mainContent.tmv2-page:has(.profile-email-settings-wrapper),
  #mainContent.main-content:has(.account-page-wrapper),
  #mainContent.main-content:has(.profile-page-wrapper),
  #mainContent.main-content:has(.subscription-page-wrapper),
  #mainContent.main-content:has(.shipping-page-wrapper),
  #mainContent.main-content:has(.security-page-wrapper),
  #mainContent.main-content:has(.notifications-page-wrapper),
  #mainContent.main-content:has(.balance-page-wrapper),
  #mainContent.main-content:has(.integration-page-wrapper),
  #mainContent.main-content:has(.cart-page-wrapper),
  #mainContent.main-content:has(.favorites-page-wrapper),
  #mainContent.main-content:has(.orders-page-wrapper),
  #mainContent.main-content:has(.support-tickets-account-wrapper),
  #mainContent.main-content:has(.profile-email-settings-wrapper) {
    padding-top: var(--account-main-offset-mobile) !important;
  }
}

/* ============================================================
   Hesap hub — birleşik turuncu sayfa başlığı (Hesabım, Profil,
   Abonelik, Entegrasyon, Kargo, Bildirimler …)
   ============================================================ */
.account-welcome-card {
  border: none !important;
  background: transparent !important;
  box-shadow: 0 10px 28px rgba(var(--color-primary-rgb), 0.18) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Karanlık modda genel html.dark-mode .card rengi bu kartı kaplamasın (turuncu gövde görünsün) */
html.dark-mode .card.account-welcome-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.account-welcome-card > .card-body {
  background: var(--tm-account-hero-gradient) !important;
  color: var(--tm-fg-on-brand) !important;
  padding: 0.7rem 0.9rem !important;
}

@media (min-width: 768px) {
  .account-welcome-card > .card-body {
    padding: 0.8rem 1.05rem !important;
  }
}

.account-welcome-card h4,
.account-welcome-card h5 {
  color: var(--tm-fg-on-brand) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
}

.account-welcome-card .text-muted {
  color: color-mix(in srgb, var(--tm-fg-on-brand) 90%, transparent) !important;
}

/* Tüm hesap sayfalarında aynı ikon kutusu (turuncu şerit üzerinde) */
.account-welcome-card__icon {
  flex-shrink: 0 !important;
  width: 42px !important;
  height: 42px !important;
  margin-right: 0.5rem !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: color-mix(in srgb, var(--tm-fg-on-brand) 22%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--tm-fg-on-brand) 38%, transparent) !important;
}

.account-welcome-card__icon i {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  color: var(--tm-fg-on-brand) !important;
}

.account-welcome-card__icon--photo {
  padding: 0 !important;
  overflow: hidden !important;
}

.account-welcome-card__icon--photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* Eski sınıflar (şablonlarda kalırsa) aynı görünüme zorlanır */
.account-welcome-card .bg-orange-light {
  background: color-mix(in srgb, var(--tm-fg-on-brand) 22%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--tm-fg-on-brand) 38%, transparent) !important;
}

.account-welcome-card .text-orange,
.account-welcome-card i.text-orange {
  color: var(--tm-fg-on-brand) !important;
}

.account-welcome-card .bg-orange.rounded-circle {
  background: color-mix(in srgb, var(--tm-fg-on-brand) 22%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--tm-fg-on-brand) 38%, transparent) !important;
  border-radius: 12px !important;
}

.account-welcome-card .bg-orange.rounded-circle i,
.account-welcome-card .bg-orange.rounded-circle .text-white {
  color: var(--tm-fg-on-brand) !important;
}

.account-welcome-card img.rounded-circle {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tm-fg-on-brand) 45%, transparent) !important;
}

.account-welcome-card .btn-light,
.account-welcome-card .help-btn.btn-light {
  background: color-mix(in srgb, var(--tm-fg-on-brand) 95%, transparent) !important;
  color: var(--color-primary-hover) !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: var(--tm-shadow-sm) !important;
}

.account-welcome-card .btn-light:hover,
.account-welcome-card .help-btn.btn-light:hover {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
}

/* Ana bölüm kartları — aynı genişlik çizgisinde, ince turuncu çerçeve */
.account-container > .card:not(.account-welcome-card),
.profile-container > .card:not(.account-welcome-card),
.subscription-container > .card:not(.account-welcome-card),
.shipping-container > .card:not(.account-welcome-card),
.notifications-container > .card:not(.account-welcome-card),
.integration-container > .row.g-4 > .col > .card {
  border: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
}

.account-container .card-header.bg-light,
.profile-container .card-header.bg-light,
.subscription-container .card-header.bg-light,
.shipping-container .card-header.bg-light,
.notifications-container .card-header.bg-light,
.integration-container .card-header.bg-light {
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface) 100%) !important;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
}

.account-container .card-header.bg-light h6,
.profile-container .card-header.bg-light h6,
.subscription-container .card-header.bg-light h6,
.shipping-container .card-header.bg-light h6,
.notifications-container .card-header.bg-light h6,
.integration-container .card-header.bg-light h6 {
  color: var(--color-primary-hover) !important;
  font-weight: 700 !important;
}

html body .integration-platform-card-header {
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface) 100%) !important;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
}

html.dark-mode .account-welcome-card > .card-body {
  background: var(--tm-account-hero-gradient) !important;
}

html.dark-mode .account-container > .card:not(.account-welcome-card),
html.dark-mode .profile-container > .card:not(.account-welcome-card),
html.dark-mode .subscription-container > .card:not(.account-welcome-card),
html.dark-mode .shipping-container > .card:not(.account-welcome-card),
html.dark-mode .notifications-container > .card:not(.account-welcome-card),
html.dark-mode .integration-container > .row.g-4 > .col > .card {
  border-color: rgba(var(--color-primary-rgb), 0.35) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode .account-container .card-header.bg-light,
html.dark-mode .profile-container .card-header.bg-light,
html.dark-mode .subscription-container .card-header.bg-light,
html.dark-mode .shipping-container .card-header.bg-light,
html.dark-mode .notifications-container .card-header.bg-light,
html.dark-mode .integration-container .card-header.bg-light,
html.dark-mode html body .integration-platform-card-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 28%, transparent) 0%,
    color-mix(in srgb, var(--color-surface) 92%, var(--color-bg) 8%) 100%
  ) !important;
  border-bottom-color: rgba(var(--color-primary-rgb), 0.25) !important;
}

html.dark-mode .account-container .card-header.bg-light h6,
html.dark-mode .profile-container .card-header.bg-light h6,
html.dark-mode .subscription-container .card-header.bg-light h6,
html.dark-mode .shipping-container .card-header.bg-light h6,
html.dark-mode .notifications-container .card-header.bg-light h6,
html.dark-mode .integration-container .card-header.bg-light h6 {
  color: var(--color-primary) !important;
}

html.dark-mode .account-page-wrapper,
html.dark-mode .account-container-wrapper,
html.dark-mode .account-main-content {
  background: transparent !important;
}

@media (min-width: 769px) {
  html.dark-mode html body .account-layout-with-rail > .account-main-column {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* Bildirimler — ayarlar (notifications_base.html) */
.notifications-settings-page .notifications-settings-card {
  background: var(--tm-gradient-card) !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
}

.notifications-settings-page .notifications-settings-card__header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface) 100%) !important;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1) !important;
}

.notifications-settings-page .notifications-settings-card__header i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 10px !important;
  background: rgba(var(--color-primary-rgb), 0.12) !important;
  color: var(--color-primary) !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}

.notifications-settings-page .notifications-settings-card__header h6 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--color-text) !important;
}

.notifications-settings-page .notifications-settings-card__body {
  padding: 0.25rem 1.25rem 1rem !important;
}

.notifications-settings-page .notifications-settings-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.9rem 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent) !important;
}

.notifications-settings-page .notifications-settings-row:last-child {
  border-bottom: none !important;
}

.notifications-settings-page .notifications-settings-row .form-switch {
  flex-shrink: 0 !important;
}

.notifications-settings-page .notifications-settings-row__title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  margin-bottom: 0.2rem !important;
}

.notifications-settings-page .notifications-settings-row__desc {
  font-size: 0.8125rem !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.notifications-settings-page .notifications-settings-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: flex-end !important;
  padding: 1rem 1.25rem !important;
  margin-top: 0.5rem !important;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-primary-soft) 100%) !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.12) !important;
  border-radius: 14px !important;
  box-shadow: var(--tm-shadow-sm) !important;
}

.notifications-settings-page .notifications-settings-actions .btn-baklava-primary {
  background: var(--tm-account-cta-gradient) !important;
  border: none !important;
  color: var(--tm-fg-on-brand) !important;
  padding: 0.55rem 1.25rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.notifications-settings-page .notifications-settings-actions .btn-baklava-outline {
  border: 1px solid var(--tm-border-light) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

.notifications-settings-page .notifications-settings-actions .btn-baklava-outline:hover {
  background: var(--color-surface-alt) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.notifications-settings-page .form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.notifications-settings-page .form-check-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25) !important;
}

.notifications-settings-page .profit-margin-settings {
  margin-top: 0.75rem !important;
  padding-top: 1rem !important;
  border-top: 1px dashed rgba(var(--color-primary-rgb), 0.2) !important;
}

@media (max-width: 768px) {
  .notifications-settings-page .notifications-settings-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .notifications-settings-page .notifications-settings-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .notifications-settings-page .notifications-settings-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Bildirimler — kategori accordion (uzun sayfayı kısaltır) */
.notifications-settings-page .notifications-settings-accordion {
  --bs-accordion-border-radius: 14px;
  --bs-accordion-inner-border-radius: 12px;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

.notifications-settings-page .notifications-settings-accordion .accordion-item {
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent) !important;
  background: var(--color-surface) !important;
}

.notifications-settings-page .notifications-settings-accordion .accordion-item:last-child {
  border-bottom: none !important;
}

.notifications-settings-page .notifications-settings-accordion .accordion-button {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.9rem 1.1rem !important;
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface) 100%) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.notifications-settings-page .notifications-settings-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-surface) 100%) !important;
  color: var(--color-primary-hover) !important;
}

.notifications-settings-page .notifications-settings-accordion .accordion-button::after {
  filter: opacity(0.65);
}

.notifications-settings-page .notifications-settings-accordion .accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.notifications-settings-page .notifications-settings-accordion .accordion-body {
  padding: 0.25rem 1rem 1rem !important;
  background: var(--color-surface-alt) !important;
}

/* =============================================================================
   Mobil iyileştirmeler — Hesabım şeridi (account_nav_base), ≤768px.
   Bu blok dosyanın sonunda; #mainContent ve gutter için önceki kuralları ezer.
   Masaüstü / tablet (≥769px) için kurallar yok.
   ============================================================================= */
@media (max-width: 768px) {
  :root {
    /* Hub mobil: yan boşluk çoğunlukla wrapper’da; burada küçük tut */
    --account-layout-gutter: 10px;
    --account-mobile-bottom-nav-height: 78px;
  }

  /*
   * Hoş geldin kartı — mobil: turuncu gradient kart kabuğunda (:has desteklenmese de çalışır).
   * Gövde şeffaf; böylece dark-mode .card veya dış padding beyazlığı turuncuyu örtmez.
   */
  .account-page-wrapper .account-welcome-card.card {
    background: var(--tm-account-hero-gradient) !important;
    background-color: var(--color-primary) !important;
  }

  .account-page-wrapper .account-welcome-card > .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tm-fg-on-brand) !important;
  }

  html.dark-mode .account-page-wrapper .account-welcome-card.card {
    background: var(--tm-account-hero-gradient) !important;
    background-color: var(--color-primary) !important;
  }

  html.dark-mode .account-page-wrapper .account-welcome-card > .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tm-fg-on-brand) !important;
  }

  /* Çift gutter kaldır: yatayda safe-area; üstte tek header ofseti (içerik header altında kalsın) */
  #mainContent.main-content:has(.account-layout-with-rail) {
    padding-left: max(var(--account-layout-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--account-layout-gutter), env(safe-area-inset-right, 0px)) !important;
    padding-top: var(--account-main-offset-mobile) !important;
    padding-bottom: var(--account-layout-gutter-y) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Üst bar (header.html): kenar boşluğu küçült, şerit neredeyse tam genişlik */
  html body:has(.account-layout-with-rail) .header-wrapper {
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 6px !important;
    padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  html body:has(.account-layout-with-rail) .header-bar {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
  }

  /* Turuncu / beyaz kartlar tam sütun genişliği */
  html body:has(.account-layout-with-rail) .account-welcome-card,
  html body:has(.account-layout-with-rail) .account-container > .card,
  html body:has(.account-layout-with-rail) .profile-container > .card,
  html body:has(.account-layout-with-rail) .subscription-container > .card,
  html body:has(.account-layout-with-rail) .shipping-container > .card,
  html body:has(.account-layout-with-rail) .notifications-container > .card,
  html body:has(.account-layout-with-rail) .integration-container > .card {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Alt menü: dar ekranda yatay kaydırma + dokunma alanı */
  html body:has(.account-layout-with-rail) .account-nav-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
  }

  html body:has(.account-layout-with-rail) .account-nav-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  html body:has(.account-layout-with-rail) .account-nav-item {
    flex: 0 0 auto !important;
    min-width: 3.35rem !important;
    max-width: none !important;
    min-height: 50px !important;
    padding: 0.36rem 0.22rem !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
    scroll-snap-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body:has(.account-layout-with-rail) .account-nav-item span {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    -webkit-line-clamp: 2 !important;
  }

  html body:has(.account-layout-with-rail) .account-nav-item i {
    font-size: 1.14rem !important;
  }

  html body:has(.account-layout-with-rail) .account-nav-item.active {
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.28) !important;
  }

  html body:has(.account-layout-with-rail) .account-nav-item.active::after {
    display: none !important;
    content: none !important;
  }

  /* Sayfa başlığı — mobil: tema primary → accent */
  html body:has(.account-layout-with-rail) .account-welcome-card.card {
    background: var(--tm-account-hero-gradient) !important;
    background-color: var(--color-primary) !important;
    box-shadow: 0 8px 26px rgba(var(--color-primary-rgb), 0.22) !important;
  }

  html body:has(.account-layout-with-rail) .account-welcome-card > .card-body {
    padding: 1rem 1.1rem !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tm-fg-on-brand) !important;
    border: none !important;
  }

  html body:has(.account-layout-with-rail) .account-welcome-card h5 {
    color: var(--tm-fg-on-brand) !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }

  html body:has(.account-layout-with-rail) .account-welcome-card .text-muted,
  html body:has(.account-layout-with-rail) .account-welcome-card .text-muted.small {
    color: color-mix(in srgb, var(--tm-fg-on-brand) 92%, transparent) !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }

  html body:has(.account-layout-with-rail) .account-welcome-card__icon {
    width: 44px !important;
    height: 44px !important;
    margin-right: 0.65rem !important;
    border-radius: 10px !important;
  }

  html body:has(.account-layout-with-rail) .account-welcome-card__icon i {
    font-size: 1.2rem !important;
  }

  /* Entegrasyon: başlık + yardım dikey */
  html body:has(.account-layout-with-rail) .account-welcome-card .d-flex.flex-wrap.gap-3 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  html body:has(.account-layout-with-rail) .account-welcome-card .btn-light,
  html body:has(.account-layout-with-rail) .account-welcome-card .help-btn.btn-light {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  /* Kart içi — hoş geldiniz kartı hariç (turuncu gövde bozulmasın) */
  html body:has(.account-layout-with-rail) .card:not(.account-welcome-card) .card-body.p-3,
  html body:has(.account-layout-with-rail) .card:not(.account-welcome-card) .card-body.p-md-4 {
    padding: 0.85rem 1rem !important;
  }

  /* Bölüm başlıkları — mobilde turuncu şerit */
  html body:has(.account-layout-with-rail) .account-container .card:not(.account-welcome-card) .card-header.bg-light,
  html body:has(.account-layout-with-rail) .profile-container .card:not(.account-welcome-card) .card-header.bg-light,
  html body:has(.account-layout-with-rail) .subscription-container .card:not(.account-welcome-card) .card-header.bg-light,
  html body:has(.account-layout-with-rail) .shipping-container .card:not(.account-welcome-card) .card-header.bg-light,
  html body:has(.account-layout-with-rail) .notifications-container .card:not(.account-welcome-card) .card-header.bg-light,
  html body:has(.account-layout-with-rail) .integration-container .card:not(.account-welcome-card) .card-header.bg-light,
  html body:has(.account-layout-with-rail) .balance-container .card:not(.account-welcome-card) .card-header.bg-light {
    background: var(--tm-account-cta-gradient) !important;
    border-bottom: none !important;
    color: var(--tm-fg-on-brand) !important;
    padding: 0.75rem 1rem !important;
  }

  html body:has(.account-layout-with-rail) .account-container .card:not(.account-welcome-card) .card-header.bg-light h6,
  html body:has(.account-layout-with-rail) .profile-container .card:not(.account-welcome-card) .card-header.bg-light h6,
  html body:has(.account-layout-with-rail) .subscription-container .card:not(.account-welcome-card) .card-header.bg-light h6,
  html body:has(.account-layout-with-rail) .shipping-container .card:not(.account-welcome-card) .card-header.bg-light h6,
  html body:has(.account-layout-with-rail) .notifications-container .card:not(.account-welcome-card) .card-header.bg-light h6,
  html body:has(.account-layout-with-rail) .integration-container .card:not(.account-welcome-card) .card-header.bg-light h6,
  html body:has(.account-layout-with-rail) .balance-container .card:not(.account-welcome-card) .card-header.bg-light h6 {
    color: var(--tm-fg-on-brand) !important;
  }

  html body:has(.account-layout-with-rail) .account-container .card:not(.account-welcome-card) .card-header.bg-light .text-muted,
  html body:has(.account-layout-with-rail) .account-container .card:not(.account-welcome-card) .card-header.bg-light small,
  html body:has(.account-layout-with-rail) .profile-container .card:not(.account-welcome-card) .card-header.bg-light .text-muted,
  html body:has(.account-layout-with-rail) .profile-container .card:not(.account-welcome-card) .card-header.bg-light small,
  html body:has(.account-layout-with-rail) .subscription-container .card:not(.account-welcome-card) .card-header.bg-light .text-muted,
  html body:has(.account-layout-with-rail) .subscription-container .card:not(.account-welcome-card) .card-header.bg-light small,
  html body:has(.account-layout-with-rail) .shipping-container .card:not(.account-welcome-card) .card-header.bg-light .text-muted,
  html body:has(.account-layout-with-rail) .shipping-container .card:not(.account-welcome-card) .card-header.bg-light small,
  html body:has(.account-layout-with-rail) .integration-container .card:not(.account-welcome-card) .card-header.bg-light .text-muted,
  html body:has(.account-layout-with-rail) .integration-container .card:not(.account-welcome-card) .card-header.bg-light small,
  html body:has(.account-layout-with-rail) .balance-container .card:not(.account-welcome-card) .card-header.bg-light .text-muted,
  html body:has(.account-layout-with-rail) .balance-container .card:not(.account-welcome-card) .card-header.bg-light small {
    color: color-mix(in srgb, var(--tm-fg-on-brand) 92%, transparent) !important;
  }

  html body:has(.account-layout-with-rail) .card:not(.account-welcome-card) .card-header .small,
  html body:has(.account-layout-with-rail) .card:not(.account-welcome-card) .card-header small {
    display: block !important;
    margin-top: 0.35rem !important;
    line-height: 1.35 !important;
  }

  /* Tablolar (kargo, abonelik, vb.) */
  html body:has(.account-layout-with-rail) .table-responsive {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    border-radius: 12px !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
    background: var(--color-surface) !important;
  }

  html body:has(.account-layout-with-rail) .table-responsive .table {
    font-size: 0.8125rem !important;
    margin-bottom: 0 !important;
  }

  html body:has(.account-layout-with-rail) .table th,
  html body:has(.account-layout-with-rail) .table td {
    padding: 0.5rem 0.45rem !important;
    vertical-align: middle !important;
  }

  /* iOS: odakta yakınlaştırmayı azaltmak için 16px */
  html body:has(.account-layout-with-rail) input.form-control,
  html body:has(.account-layout-with-rail) select.form-select,
  html body:has(.account-layout-with-rail) textarea.form-control {
    font-size: 16px !important;
  }

  html body:has(.account-layout-with-rail) input.form-control:not([type="checkbox"]):not([type="radio"]),
  html body:has(.account-layout-with-rail) select.form-select {
    min-height: 44px !important;
  }

  /* Vurgulu butonlar */
  html body:has(.account-layout-with-rail) .card .btn.bg-orange,
  html body:has(.account-layout-with-rail) .card .btn.btn-orange,
  html body:has(.account-layout-with-rail) .card .btn-primary,
  html body:has(.account-layout-with-rail) .card .btn-baklava-primary {
    min-height: 44px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Profil: fatura tipi — mobilde tek sütun */
  html body:has(.account-layout-with-rail) .tm-radio-cards.d-flex.flex-column.flex-sm-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  html body:has(.account-layout-with-rail) .tm-radio-card.flex-fill {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Entegrasyon: üst satır tam genişlik, alt alta */
  html body:has(.account-layout-with-rail) .integration-container > .row.g-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 1rem !important;
  }

  html body:has(.account-layout-with-rail) .integration-container > .row.g-4 > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Abonelik plan kartı taşması */
  html body:has(.account-layout-with-rail) .subscription-plan-card {
    max-width: 100% !important;
  }

  /* Bildirim accordion — daha yüksek dokunma */
  html body:has(.account-layout-with-rail) .notifications-settings-accordion .accordion-button {
    min-height: 48px !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem !important;
  }

  html body:has(.account-layout-with-rail) .notifications-settings-accordion .accordion-body {
    padding: 0.35rem 0.85rem 0.9rem !important;
  }

  /* Hesabım hızlı linkler */
  html body:has(.account-layout-with-rail) .account-quick-link {
    min-height: 44px !important;
    padding: 0.55rem 0.7rem !important;
    font-size: 0.8125rem !important;
  }

  /* Uzun e-posta / metin */
  html body:has(.account-layout-with-rail) .account-container,
  html body:has(.account-layout-with-rail) .profile-container,
  html body:has(.account-layout-with-rail) .subscription-container,
  html body:has(.account-layout-with-rail) .shipping-container,
  html body:has(.account-layout-with-rail) .notifications-container,
  html body:has(.account-layout-with-rail) .integration-container {
    overflow-x: hidden !important;
  }

  html body:has(.account-layout-with-rail) .small.text-muted,
  html body:has(.account-layout-with-rail) small.text-muted {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Entegrasyon — pazaryeri kartı üst başlığı mobilde marka gradient */
  html body:has(.account-layout-with-rail) .integration-platform-card-header {
    background: var(--tm-account-cta-gradient) !important;
    border-bottom: none !important;
  }

  html body:has(.account-layout-with-rail) .integration-platform-card-header .platform-card-title {
    color: var(--tm-fg-on-brand) !important;
  }

  html body:has(.account-layout-with-rail) .integration-platform-card-header .platform-card-subtitle {
    color: color-mix(in srgb, var(--tm-fg-on-brand) 88%, transparent) !important;
  }

  html body:has(.account-layout-with-rail) .integration-platform-card-header .platform-card-header-icon {
    background: color-mix(in srgb, var(--tm-fg-on-brand) 28%, transparent) !important;
    color: var(--tm-fg-on-brand) !important;
    box-shadow: none !important;
  }

  /* Karanlık mod + mobil: hoş geldin — tema primary / accent */
  html.dark-mode body:has(.account-layout-with-rail) .account-welcome-card.card {
    background: var(--tm-account-hero-gradient) !important;
    background-color: var(--color-primary) !important;
  }

  html.dark-mode body:has(.account-layout-with-rail) .account-welcome-card > .card-body {
    background: transparent !important;
    background-color: transparent !important;
  }

  html.dark-mode body:has(.account-layout-with-rail) .account-container .card:not(.account-welcome-card) .card-header.bg-light,
  html.dark-mode body:has(.account-layout-with-rail) .profile-container .card:not(.account-welcome-card) .card-header.bg-light,
  html.dark-mode body:has(.account-layout-with-rail) .subscription-container .card:not(.account-welcome-card) .card-header.bg-light,
  html.dark-mode body:has(.account-layout-with-rail) .shipping-container .card:not(.account-welcome-card) .card-header.bg-light,
  html.dark-mode body:has(.account-layout-with-rail) .notifications-container .card:not(.account-welcome-card) .card-header.bg-light,
  html.dark-mode body:has(.account-layout-with-rail) .integration-container .card:not(.account-welcome-card) .card-header.bg-light,
  html.dark-mode body:has(.account-layout-with-rail) .balance-container .card:not(.account-welcome-card) .card-header.bg-light {
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-surface-alt) 100%) !important;
  }

  html.dark-mode body:has(.account-layout-with-rail) .integration-platform-card-header {
    background: var(--tm-account-cta-gradient) !important;
  }
}