/* TM paketi — kaynak sirasi korunur. Uretici: scripts/build_assets.py */

/* ===== css/base-shell-inline.css ===== */
/* Extracted from templates/layouts/base.html inline <style> block 1 (lines 287-1151).
   Byte-equivalent: same cascade position (after head stylesheets, before line-1153 stylesheets).
   No Jinja/url_for — pure static CSS, now cacheable instead of re-sent inline per page. */
    /* ============================================
         BOOTSTRAP + MARKA — theme-variables.css semantic token
         Ana aksiyon: mavi; turuncu CTA: .btn-accent
      ============================================ */

    :root {
      --bs-primary: var(--color-primary) !important;
      --bs-primary-rgb: var(--color-primary-rgb) !important;
      --bs-primary-dark: var(--color-primary-hover) !important;
      --bs-primary-light: var(--color-secondary) !important;
    }

    .bg-primary {
      background-color: var(--color-primary) !important;
      background: var(--color-primary) !important;
    }

    .text-primary {
      color: var(--color-primary) !important;
    }

    .btn-primary {
      background-color: var(--color-primary) !important;
      border-color: var(--color-primary) !important;
      color: var(--tm-fg-on-brand) !important;
    }

    .btn-primary:hover:not(:disabled),
    .btn-primary:focus:not(:disabled),
    .btn-primary:active:not(:disabled) {
      background-color: var(--color-primary-hover) !important;
      border-color: var(--color-primary-hover) !important;
      color: var(--tm-fg-on-brand) !important;
      box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.22) !important;
    }

    .btn-accent {
      background-color: var(--color-accent) !important;
      border-color: var(--color-accent) !important;
      color: var(--tm-fg-on-brand) !important;
    }

    .btn-accent:hover:not(:disabled),
    .btn-accent:focus:not(:disabled),
    .btn-accent:active:not(:disabled) {
      background-color: var(--color-accent-hover) !important;
      border-color: var(--color-accent-hover) !important;
      color: var(--tm-fg-on-brand) !important;
    }

    .badge.bg-primary {
      background-color: var(--color-primary) !important;
      color: var(--tm-fg-on-brand) !important;
    }

    .modal-header.bg-primary {
      background-color: var(--color-primary) !important;
      border-color: var(--color-primary) !important;
    }

    .modal-body .text-primary {
      color: var(--color-primary) !important;
    }

    .spinner-border.text-primary {
      color: var(--color-primary) !important;
    }

    .alert-primary {
      background-color: var(--color-primary-soft) !important;
      border-color: rgba(var(--color-primary-rgb), 0.28) !important;
      color: var(--color-primary-hover) !important;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: var(--color-primary) !important;
      box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.2) !important;
    }

    a.text-primary,
    .text-primary a {
      color: var(--color-primary) !important;
    }

    a.text-primary:hover,
    .text-primary a:hover {
      color: var(--color-primary-hover) !important;
    }

    /* ============================================
         ACCOUNT PAGES - UNIFIED DESIGN SYSTEM
      ============================================ */
    
    /* #mainContent kabuğu: app-background-decor.css (glass + sidebar hizası) — burada arka plan zorlama yok */

    html:not(.dark-mode) .flex.min-h-screen.app-shell-wrap,
    html:not(.dark-mode) .app-layout,
    html:not(.dark-mode) .flex.min-h-screen:is(.tmh-1db5c619, :not(*) > #mainContent),
    html:not(.dark-mode) .flex.min-h-screen:is(.tmh-2426357c, :not(*) > main#mainContent) {
      background-color: transparent !important;
    }

    html.dark-mode .flex.min-h-screen.app-shell-wrap,
    html.dark-mode .app-layout,
    html.dark-mode .flex.min-h-screen:is(.tmh-1db5c619, :not(*) > #mainContent),
    html.dark-mode .flex.min-h-screen:is(.tmh-2426357c, :not(*) > main#mainContent) {
      background-color: transparent !important;
    }

    /* Unified Width Variables — Hesabım/Profil dahil tüm hesap alt sayfaları aynı içerik genişliği */
    :root {
      --account-content-max-width: 1920px;
      --account-content-width: 100%;
      /* Yatay: main#tmv2; wrapper’larda yatay padding yok (account_pages_base_compatible) */
      --account-content-padding: 0;
      --account-nav-height: 56px;
    }

    /* Hesap sayfaları: üst boşluk main’de (tek ofset); arka plan şeffaf — body + bg-shapes dekoru görünsün */
    .account-page-wrapper,
    .profile-page-wrapper,
    .subscription-page-wrapper,
    .shipping-page-wrapper,
    .security-page-wrapper,
    .notifications-page-wrapper,
    .balance-page-wrapper,
    .integration-page-wrapper,
    .cart-page-wrapper,
    .favorites-page-wrapper,
    .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;
    }

    .flex.min-h-screen:is(.tmh-c9a7ee6d, :not(*) .account-page-wrapper),
    .flex.min-h-screen:is(.tmh-73a78611, :not(*) .profile-page-wrapper),
    .flex.min-h-screen:is(.tmh-c8fe281a, :not(*) .subscription-page-wrapper),
    .flex.min-h-screen:is(.tmh-c5094361, :not(*) .shipping-page-wrapper),
    .flex.min-h-screen:is(.tmh-8d4a4bb5, :not(*) .security-page-wrapper),
    .flex.min-h-screen:is(.tmh-bd5a7eb2, :not(*) .notifications-page-wrapper),
    .flex.min-h-screen:is(.tmh-bce0929b, :not(*) .balance-page-wrapper),
    .flex.min-h-screen:is(.tmh-c1b541be, :not(*) .integration-page-wrapper),
    .flex.min-h-screen:is(.tmh-be34f6a1, :not(*) .cart-page-wrapper),
    .flex.min-h-screen:is(.tmh-f5b295e1, :not(*) .favorites-page-wrapper),
    .flex.min-h-screen:is(.tmh-c63180ef, :not(*) .orders-page-wrapper),
    #mainContent.main-content:is(.tmh-7cbd5f17, :not(*) .account-page-wrapper),
    #mainContent.main-content:is(.tmh-1551c377, :not(*) .profile-page-wrapper),
    #mainContent.main-content:is(.tmh-4bf8c489, :not(*) .subscription-page-wrapper),
    #mainContent.main-content:is(.tmh-ff348833, :not(*) .shipping-page-wrapper),
    #mainContent.main-content:is(.tmh-cf9a0c83, :not(*) .security-page-wrapper),
    #mainContent.main-content:is(.tmh-9ff04b80, :not(*) .notifications-page-wrapper),
    #mainContent.main-content:is(.tmh-0b6fe877, :not(*) .balance-page-wrapper),
    #mainContent.main-content:is(.tmh-769d578e, :not(*) .integration-page-wrapper),
    #mainContent.main-content:is(.tmh-8e1df1b0, :not(*) .cart-page-wrapper),
    #mainContent.main-content:is(.tmh-a9740839, :not(*) .favorites-page-wrapper),
    #mainContent.main-content:is(.tmh-ea387c2c, :not(*) .orders-page-wrapper),
    #mainContent.main-content:is(.tmh-7360cbcb, :not(*) #pricing-page),
    #mainContent.main-content:is(.tmh-0cd00ab4, :not(*) .xml-upload-page),
    .flex.min-h-screen:is(.tmh-e6393396, :not(*) #pricing-page),
    .flex.min-h-screen:is(.tmh-a4c0cb7f, :not(*) .xml-upload-page) {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
    }

    /* Account Navigation - BASIT */
    .account-nav-container {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    .account-nav-wrapper {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 0.25rem !important;
      overflow-x: auto !important;
      padding: 0.5rem 10px !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 auto !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

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

    /* Container Wrappers - UNIFIED WIDTH (same as navigation; account_pages_base_compatible ile aynı mantık) */
    .account-container-wrapper,
    .profile-container-wrapper,
    .subscription-container-wrapper,
    .shipping-container-wrapper,
    .security-container-wrapper,
    .notifications-container-wrapper,
    .balance-container-wrapper,
    .integration-container-wrapper,
    .cart-container-wrapper,
    .favorites-container-wrapper,
    .orders-container-wrapper {
      max-width: min(100%, var(--account-content-max-width)) !important;
      width: 100% !important;
      margin: 0 auto !important;
      /* Üst boşluk: #mainContent (v2) — tekrar 61px ekleme */
      padding: 0.3rem 0 0.65rem !important;
      box-sizing: border-box !important;
      background: transparent !important;
    }

    /* Inner Content Containers - Full width of parent */
    .account-container,
    .profile-container,
    .subscription-container,
    .shipping-container,
    .security-container,
    .notifications-container,
    .balance-container,
    .integration-container,
    .cart-container,
    .favorites-container,
    .orders-container {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      box-sizing: border-box !important;
    }

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

    /* Account Navigation - Unified with Content Width */
    /* Hesabım menüsü (sağ şerit / mobil alt): account_nav_base → account_navigation.html */
    /* Responsive rules are defined below in the Responsive section */

    /* Account pages: mobile-friendly "radio card" (e.g. invoice type) */
    .tm-radio-cards {
      width: 100% !important;
    }

    .tm-radio-card.form-check {
      position: relative !important;
      margin: 0 !important;
      padding-left: 0 !important;
      /* bootstrap form-check padding-left reset */
    }

    .tm-radio-card>.form-check-input {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
      overflow: hidden !important;
      white-space: nowrap !important;
    }

    .tm-radio-label {
      width: 100% !important;
      min-height: 44px !important;
      padding: 0.75rem 0.85rem !important;
      border-radius: 12px !important;
      background: #f8fafc !important;
      color: #475569 !important;
      cursor: pointer !important;
      user-select: none !important;
      -webkit-tap-highlight-color: transparent !important;
      transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease !important;
    }

    .tm-radio-card>.form-check-input:checked+.tm-radio-label {
      background: var(--color-primary-soft) !important;
      color: var(--bl-color-primary) !important;
      font-weight: 700 !important;
    }

    .tm-radio-card>.form-check-input:checked+.tm-radio-label i {
      color: var(--bl-color-primary) !important;
    }

    .tm-radio-card>.tm-radio-label:active {
      transform: scale(0.99) !important;
    }

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

    /* Utility: isim "orange" — görsel accent turuncu (CTA); ana marka .text-primary */
    .text-orange {
      color: var(--color-accent) !important;
    }

    .bg-orange {
      background-color: var(--color-accent) !important;
    }

    .bg-orange-light {
      background-color: var(--color-accent-soft) !important;
    }

    /* Baklava — marka birincil mavi ile hizalı */
    :root {
      --bl-color-primary: var(--color-primary);
      --bl-color-primary-hover: var(--color-primary-hover);
      --bl-color-secondary: #1D3557;
      --bl-color-success: #06D6A0;
      --bl-color-danger: #EF233C;
      --bl-color-warning: #FFD93D;
      --bl-color-info: #0dcaf0;
      --bl-border-radius: 12px;
      --bl-border-radius-sm: 8px;
      --bl-border-radius-lg: 16px;
      --bl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
      --bl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
      --bl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
      --bl-spacing-xs: 0.25rem;
      --bl-spacing-sm: 0.5rem;
      --bl-spacing-md: 1rem;
      --bl-spacing-lg: 1.5rem;
      --bl-spacing-xl: 2rem;
    }

    /* Responsive - Tablet */
    @media (max-width: 1024px) {
      :root {
        --account-content-max-width: 98%;
        --account-content-width: 98%;
      }

      .account-page-wrapper,
      .profile-page-wrapper,
      .subscription-page-wrapper,
      .shipping-page-wrapper,
      .security-page-wrapper,
      .notifications-page-wrapper,
      .balance-page-wrapper,
      .integration-page-wrapper,
      .cart-page-wrapper,
      .favorites-page-wrapper,
      .orders-page-wrapper {
        /* Ofset: main#tmv2; tekrar 100px = çift nefes */
        padding-top: 0 !important;
      }
    }

    /* Responsive - Mobile */
    @media (max-width: 768px) {
      :root {
        --account-content-max-width: 100%;
        --account-content-width: 100%;
        --account-content-padding: 0;
        /* Sabit header + menü altı boşluk + tek satır menü yüksekliği + içerik üst boşluğu */
        --account-mobile-header-bottom: 72px;
        --account-nav-gap-header: 10px;
        --account-nav-strip-height: 56px;
        --account-nav-content-gap: 8px;
      }

      .account-page-wrapper,
      .profile-page-wrapper,
      .subscription-page-wrapper,
      .shipping-page-wrapper,
      .security-page-wrapper,
      .notifications-page-wrapper,
      .balance-page-wrapper,
      .integration-page-wrapper,
      .cart-page-wrapper,
      .favorites-page-wrapper,
      .orders-page-wrapper {
        padding-top: 0 !important;
        padding-bottom: 32px !important;
      }

      .account-container-wrapper,
      .profile-container-wrapper,
      .subscription-container-wrapper,
      .shipping-container-wrapper,
      .security-container-wrapper,
      .notifications-container-wrapper,
      .balance-container-wrapper,
      .integration-container-wrapper,
      .cart-container-wrapper,
      .favorites-container-wrapper,
      .orders-container-wrapper {
        /* Yatay: #mainContent (account_pages) — çift 12px olmasın */
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
        /* Üst boşluk account_pages_base_compatible (.account-layout-with-rail) — çift padding kalktı */
        padding-top: 0 !important;
        padding-bottom: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      .account-nav-container {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

    /* Hesap şablonları: main’deki p-6 ve genel padding’i kaldır (çift boşluk önlenir) */
    #mainContent.main-content:is(.tmh-7cbd5f17, :not(*) .account-page-wrapper),
    #mainContent.main-content:is(.tmh-1551c377, :not(*) .profile-page-wrapper),
    #mainContent.main-content:is(.tmh-4bf8c489, :not(*) .subscription-page-wrapper),
    #mainContent.main-content:is(.tmh-ff348833, :not(*) .shipping-page-wrapper),
    #mainContent.main-content:is(.tmh-cf9a0c83, :not(*) .security-page-wrapper),
    #mainContent.main-content:is(.tmh-9ff04b80, :not(*) .notifications-page-wrapper),
    #mainContent.main-content:is(.tmh-0b6fe877, :not(*) .balance-page-wrapper),
    #mainContent.main-content:is(.tmh-769d578e, :not(*) .integration-page-wrapper),
    #mainContent.main-content:is(.tmh-8e1df1b0, :not(*) .cart-page-wrapper),
    #mainContent.main-content:is(.tmh-a9740839, :not(*) .favorites-page-wrapper),
    #mainContent.main-content:is(.tmh-ea387c2c, :not(*) .orders-page-wrapper) {
      padding: 0 !important;
    }

    @media (max-width: 768px) {
      #mainContent.main-content:is(.tmh-7cbd5f17, :not(*) .account-page-wrapper),
      #mainContent.main-content:is(.tmh-1551c377, :not(*) .profile-page-wrapper),
      #mainContent.main-content:is(.tmh-4bf8c489, :not(*) .subscription-page-wrapper),
      #mainContent.main-content:is(.tmh-ff348833, :not(*) .shipping-page-wrapper),
      #mainContent.main-content:is(.tmh-cf9a0c83, :not(*) .security-page-wrapper),
      #mainContent.main-content:is(.tmh-9ff04b80, :not(*) .notifications-page-wrapper),
      #mainContent.main-content:is(.tmh-0b6fe877, :not(*) .balance-page-wrapper),
      #mainContent.main-content:is(.tmh-769d578e, :not(*) .integration-page-wrapper),
      #mainContent.main-content:is(.tmh-8e1df1b0, :not(*) .cart-page-wrapper),
      #mainContent.main-content:is(.tmh-a9740839, :not(*) .favorites-page-wrapper),
      #mainContent.main-content:is(.tmh-ea387c2c, :not(*) .orders-page-wrapper) {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

    body {
      overflow-x: hidden;
      background: var(--tm-app-bg, #f0f2f8) !important;
      background-color: var(--tm-app-bg, #f0f2f8) !important;
      /* PR-A 2026-06-11 (perf): 'Rubik' stack'ten çıkarıldı — font hiçbir
         yerde yüklenmiyordu (ölü ilk tercih, her metin node'unda boşa font
         matching). Görsel birebir: fiilen kullanılan font zaten fallback'ti. */
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    /* Baklava Typography */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 600;
      color: #212529;
    }

    /* Baklava Button Styles - Override Bootstrap */
    .btn-primary,
    button.btn-primary,
    a.btn-primary,
    input[type="submit"].btn-primary {
      background: linear-gradient(135deg, var(--bl-color-primary) 0%, var(--bl-color-primary-hover) 100%) !important;
      border: none !important;
      border-radius: var(--bl-border-radius-sm) !important;
      color: white !important;
      font-weight: 600 !important;
      transition: all 0.3s ease !important;
      box-shadow: var(--bl-shadow-sm) !important;
    }

    .btn-primary:hover,
    button.btn-primary:hover,
    a.btn-primary:hover,
    input[type="submit"].btn-primary:hover {
      transform: translateY(-2px) !important;
      box-shadow: var(--bl-shadow-md) !important;
      background: linear-gradient(135deg, var(--bl-color-primary-hover) 0%, var(--bl-color-primary) 100%) !important;
      color: white !important;
    }

    .btn-success {
      background: linear-gradient(135deg, var(--bl-color-success) 0%, #04b88a 100%) !important;
      border: none !important;
      border-radius: var(--bl-border-radius-sm) !important;
      color: white !important;
      font-weight: 600 !important;
    }

    .btn-danger {
      background: linear-gradient(135deg, var(--bl-color-danger) 0%, #d90429 100%) !important;
      border: none !important;
      border-radius: var(--bl-border-radius-sm) !important;
      color: white !important;
      font-weight: 600 !important;
    }

    /* Baklava Card Styles - Override Bootstrap */
    .card,
    div.card,
    .modern-card {
      border-radius: var(--bl-border-radius) !important;
      box-shadow: var(--bl-shadow-sm) !important;
      border: 1px solid #e9ecef !important;
      transition: all 0.3s ease !important;
    }

    .card:hover:not(.tmv2-kpi):not(.tmv2-panel),
    div.card:hover:not(.tmv2-kpi):not(.tmv2-panel),
    .modern-card:hover {
      box-shadow: var(--bl-shadow-md) !important;
      transform: translateY(-2px) !important;
    }

    /* Baklava Input Styles - Override Bootstrap */
    .form-control,
    .form-select,
    input.form-control,
    select.form-select,
    textarea.form-control {
      border-radius: var(--bl-border-radius-sm) !important;
      border: 2px solid #e9ecef !important;
      transition: all 0.3s ease !important;
    }

    .form-control:focus,
    .form-select:focus,
    input.form-control:focus,
    select.form-select:focus,
    textarea.form-control:focus {
      border-color: var(--bl-color-primary) !important;
      box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.15) !important;
      outline: none !important;
    }

    /* Baklava Header/Sidebar — yalnız tmv2 sol aside yokken (#tmv2SidebarRoot); panelde tm-header-v2 + reference-chrome */
    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .header-wrapper,
    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .header-bar {
      border-radius: var(--bl-border-radius-lg);
    }

    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .header-bar .header-logo-icon,
    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .header-wrapper .header-logo-icon {
      box-shadow: none !important;
      filter: none !important;
      background: transparent !important;
    }

    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .header-bar .header-logo-icon img,
    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .header-wrapper .header-logo-icon img {
      box-shadow: none !important;
      filter: none !important;
    }

    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) #sidebar,
    body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .sidebar {
      border-radius: var(--bl-border-radius-lg);
      box-shadow: var(--bl-shadow-lg);
    }

    /* Baklava Badge Styles */
    .badge {
      border-radius: var(--bl-border-radius-sm);
      font-weight: 600;
      padding: 0.35em 0.65em;
    }

    .badge-primary {
      background-color: var(--bl-color-primary);
      color: white;
    }

    .badge-success {
      background-color: var(--bl-color-success);
      color: white;
    }

    .badge-danger {
      background-color: var(--bl-color-danger);
      color: white;
    }

    .badge-warning {
      background-color: var(--bl-color-warning);
      color: #000;
    }

    /* Baklava Alert Styles */
    .alert {
      border-radius: var(--bl-border-radius);
      border: none;
      box-shadow: var(--bl-shadow-sm);
    }

    .alert-primary {
      background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
      color: var(--bl-color-primary);
      border-left: 4px solid var(--bl-color-primary);
    }

    .alert-success {
      background: linear-gradient(135deg, rgba(6, 214, 160, 0.1) 0%, rgba(6, 214, 160, 0.05) 100%);
      color: var(--bl-color-success);
      border-left: 4px solid var(--bl-color-success);
    }

    .alert-danger {
      background: linear-gradient(135deg, rgba(239, 35, 60, 0.1) 0%, rgba(239, 35, 60, 0.05) 100%);
      color: var(--bl-color-danger);
      border-left: 4px solid var(--bl-color-danger);
    }

    /* Baklava Table Styles */
    .table {
      border-radius: var(--bl-border-radius);
      overflow: hidden;
    }

    .table thead {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .table tbody tr {
      transition: background-color 0.2s ease;
    }

    .table tbody tr:hover {
      background-color: #f8f9fa;
    }

    /* Baklava Modal Styles */
    .modal-content {
      border-radius: var(--bl-border-radius-lg);
      border: none;
      box-shadow: var(--bl-shadow-lg);
    }

    .modal-header {
      border-bottom: 2px solid #e9ecef;
      border-radius: var(--bl-border-radius-lg) var(--bl-border-radius-lg) 0 0;
    }

    .modal-footer {
      border-top: 2px solid #e9ecef;
      border-radius: 0 0 var(--bl-border-radius-lg) var(--bl-border-radius-lg);
    }

    /* Baklava Nav/Tab Styles - Override Bootstrap */
    .nav-tabs .nav-link,
    .nav-tabs .nav-item .nav-link,
    ul.nav-tabs .nav-link {
      border-radius: var(--bl-border-radius-sm) var(--bl-border-radius-sm) 0 0 !important;
      transition: all 0.3s ease !important;
      color: #6c757d !important;
      border-color: transparent !important;
    }

    .nav-tabs .nav-link:hover,
    .nav-tabs .nav-item .nav-link:hover,
    ul.nav-tabs .nav-link:hover {
      color: var(--bl-color-primary) !important;
      background: rgba(var(--color-primary-rgb), 0.05) !important;
      /* Baklava Primary Light */
      border-color: transparent !important;
    }

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item .nav-link.active,
    ul.nav-tabs .nav-link.active,
    .nav-tabs .nav-link.active:hover,
    .nav-tabs .nav-item .nav-link.active:hover {
      color: var(--bl-color-primary) !important;
      border-bottom-color: var(--bl-color-primary) !important;
      border-bottom-width: 3px !important;
      font-weight: 600 !important;
      background: rgba(var(--color-primary-rgb), 0.05) !important;
      /* Baklava Primary Light */
    }

    /*
     * Baklava: eski layout’ta mavi hover’ı kırmak için inherit kullanılmıştı.
     * #tmv2App içinde bu kural outline/secondary/empty-state butonlarında
     * background:inherit → beyaz metin + açık zemin / görünmez buton hatasına yol açıyordu.
     * v2 shell (#tmv2App) bu kuralın dışında — Bootstrap + tm-buttons-v2.css geçerli.
     */
    body:not(.tmv2-body, #tm-yok) .btn:hover:not(.tmv2-icon-btn):not(.tmv2-btn):not(.tmv2-btn-primary),
    body:not(.tmv2-body, #tm-yok) button:hover:not(.tmv2-icon-btn):not(.tmv2-btn):not(.tmv2-btn-primary),
    body:not(.tmv2-body, #tm-yok) a.btn:hover:not(.tmv2-icon-btn):not(.tmv2-btn):not(.tmv2-btn-primary),
    body:not(.tmv2-body, #tm-yok) input[type="submit"]:hover,
    body:not(.tmv2-body, #tm-yok) input[type="button"]:hover {
      background-color: inherit !important;
    }

    .btn-primary:hover,
    button.btn-primary:hover,
    a.btn-primary:hover {
      background: linear-gradient(135deg, var(--bl-color-primary-hover) 0%, var(--bl-color-primary) 100%) !important;
      color: white !important;
    }

    .btn-outline-primary:hover,
    button.btn-outline-primary:hover,
    a.btn-outline-primary:hover {
      background-color: var(--bl-color-primary) !important;
      border-color: var(--bl-color-primary) !important;
      color: white !important;
    }

    .btn-outline-primary {
      border-color: var(--bl-color-primary) !important;
      color: var(--bl-color-primary) !important;
    }

    .btn-outline-primary:hover {
      background-color: var(--bl-color-primary) !important;
      border-color: var(--bl-color-primary) !important;
      color: white !important;
    }

    /* Remove Bootstrap Blue Colors - Override All Blue States */
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show>.btn-primary.dropdown-toggle {
      background: linear-gradient(135deg, var(--bl-color-primary) 0%, var(--bl-color-primary-hover) 100%) !important;
      border-color: var(--bl-color-primary) !important;
      color: white !important;
    }

    .btn-primary:focus,
    .btn-primary.focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25) !important;
      /* Baklava Primary Focus */
    }

    .btn-outline-primary:focus,
    .btn-outline-primary.focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25) !important;
      /* Baklava Primary Focus */
    }

    /* Override Bootstrap Link Colors */
    a:not(.btn):hover {
      color: var(--bl-color-primary) !important;
    }

    /* Override Bootstrap Badge Primary */
    .badge-primary,
    .badge.bg-primary {
      background-color: var(--bl-color-primary) !important;
    }

    /* Override Bootstrap Alert Primary */
    .alert-primary {
      background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.05) 100%) !important;
      color: var(--bl-color-primary) !important;
      border-left: 4px solid var(--bl-color-primary) !important;
    }

    /* Override Bootstrap Dropdown */
    .dropdown-item.active,
    .dropdown-item:active {
      background-color: var(--bl-color-primary) !important;
      color: white !important;
    }

    .dropdown-item:hover {
      background-color: rgba(var(--color-primary-rgb), 0.1) !important;
      /* Baklava Primary Light */
      color: var(--bl-color-primary) !important;
    }

    /* Override Bootstrap Pagination */
    .page-link {
      color: var(--bl-color-primary) !important;
    }

    .page-link:hover {
      background-color: rgba(var(--color-primary-rgb), 0.1) !important;
      /* Baklava Primary Light */
      border-color: var(--bl-color-primary) !important;
      color: var(--bl-color-primary) !important;
    }

    .page-item.active .page-link {
      background-color: var(--bl-color-primary) !important;
      border-color: var(--bl-color-primary) !important;
      color: white !important;
    }

    /* Baklava Spacing Utilities */
    .bl-spacing-xs {
      margin: var(--bl-spacing-xs);
      padding: var(--bl-spacing-xs);
    }

    .bl-spacing-sm {
      margin: var(--bl-spacing-sm);
      padding: var(--bl-spacing-sm);
    }

    .bl-spacing-md {
      margin: var(--bl-spacing-md);
      padding: var(--bl-spacing-md);
    }

    .bl-spacing-lg {
      margin: var(--bl-spacing-lg);
      padding: var(--bl-spacing-lg);
    }

    .bl-spacing-xl {
      margin: var(--bl-spacing-xl);
      padding: var(--bl-spacing-xl);
    }

    /* Layout: .sidebar / .main-content / main#mainContent — base-legacy-layout.css (yalnız body:not(:has(#tmv2SidebarRoot))); v2: tm-shell + tm-v2-overrides */


/* ===== css/account_pages_base_compatible.css ===== */
/* ============================================
   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: 0px;
  --account-shell-header-height: 58px;
  /* tmv2 bar (~58px) + 2px — üstteki büyük boşluğun çoğu buradan */
  --account-main-offset-desktop: var(--tmv2-page-pad-y, 16px);
  --account-main-offset-mobile: var(--tmv2-page-pad-y, 12px);
  --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: calc(var(--account-shell-header-height) + var(--tmv2-page-pad-y, 16px));
  --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:is(.tmh-24552821, :not(*) .account-page-wrapper),
html:is(.tmh-c72229ff, :not(*) .profile-page-wrapper),
html:is(.tmh-2492a1ee, :not(*) .subscription-page-wrapper),
html:is(.tmh-b3b28955, :not(*) .shipping-page-wrapper),
html:is(.tmh-c3b247a3, :not(*) .notifications-page-wrapper),
html:is(.tmh-f4e75cb6, :not(*) .integration-page-wrapper),
html:is(.tmh-a7a52e3a, :not(*) .security-page-wrapper),
html:is(.tmh-4ab5dc8b, :not(*) .balance-page-wrapper),
html:is(.tmh-a3239f0d, :not(*) .cart-page-wrapper),
html:is(.tmh-cdd4ca82, :not(*) .favorites-page-wrapper),
html:is(.tmh-9585ce63, :not(*) .orders-page-wrapper) {
  background-color: transparent;
  background-image: none;
  min-height: 100%;
}

#mainContent.main-content:is(.tmh-7cbd5f17, :not(*) .account-page-wrapper),
#mainContent.main-content:is(.tmh-1551c377, :not(*) .profile-page-wrapper),
#mainContent.main-content:is(.tmh-4bf8c489, :not(*) .subscription-page-wrapper),
#mainContent.main-content:is(.tmh-ff348833, :not(*) .shipping-page-wrapper),
#mainContent.main-content:is(.tmh-cf9a0c83, :not(*) .security-page-wrapper),
#mainContent.main-content:is(.tmh-9ff04b80, :not(*) .notifications-page-wrapper),
#mainContent.main-content:is(.tmh-0b6fe877, :not(*) .balance-page-wrapper),
#mainContent.main-content:is(.tmh-769d578e, :not(*) .integration-page-wrapper),
#mainContent.main-content:is(.tmh-8e1df1b0, :not(*) .cart-page-wrapper),
#mainContent.main-content:is(.tmh-a9740839, :not(*) .favorites-page-wrapper),
#mainContent.main-content:is(.tmh-ea387c2c, :not(*) .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:is(.tmh-c9a7ee6d, :not(*) .account-page-wrapper),
.flex.min-h-screen:is(.tmh-73a78611, :not(*) .profile-page-wrapper),
.flex.min-h-screen:is(.tmh-c8fe281a, :not(*) .subscription-page-wrapper),
.flex.min-h-screen:is(.tmh-c5094361, :not(*) .shipping-page-wrapper),
.flex.min-h-screen:is(.tmh-8d4a4bb5, :not(*) .security-page-wrapper),
.flex.min-h-screen:is(.tmh-bd5a7eb2, :not(*) .notifications-page-wrapper),
.flex.min-h-screen:is(.tmh-bce0929b, :not(*) .balance-page-wrapper),
.flex.min-h-screen:is(.tmh-c1b541be, :not(*) .integration-page-wrapper),
.flex.min-h-screen:is(.tmh-be34f6a1, :not(*) .cart-page-wrapper),
.flex.min-h-screen:is(.tmh-f5b295e1, :not(*) .favorites-page-wrapper),
.flex.min-h-screen:is(.tmh-c63180ef, :not(*) .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: var(--tm-radius-lg, 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.125rem;
  color: var(--color-text-muted);
}

.account-nav-item span {
  font-size: 0.6875rem;
  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: 4px 4px 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;
  /* 2026-10-10: metin rengi öncesi var(--color-primary) idi — aynı mavi, çocuk
     i/span `color:inherit` (satır 289-292) ile bunu devralıyordu → mavi-üstü-mavi,
     "Abonelik" etiketi koyu temada görünmez oluyordu (kontrast ~1:1). Düz
     markanın-üstü-metin tokenı (daima beyaz) kullanılıyor — translüsan mavi zemin
     üstünde yüksek kontrast verir. */
  color: var(--tm-fg-on-brand, #ffffff) !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.tm-hesap-rayli .integration-container > .row {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0.5rem !important;
    align-items: flex-start !important;
  }

  html body.tm-hesap-rayli .integration-container .platform-forms-container {
    min-height: 0 !important;
  }

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

  html body.tm-hesap-rayli .integration-container .account-welcome-card > .card-body {
    padding: 0.75rem 1rem !important;
  }

  html body.tm-hesap-rayli .integration-platform-form-card .integration-platform-form-card-body {
    padding: 0.75rem 1rem !important;
  }

  html body.tm-hesap-rayli .integration-container .form-platform-header {
    margin-bottom: 0.65rem !important;
  }

  html body.tm-hesap-rayli .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: var(--tm-radius-card, 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: var(--tm-radius-lg, 10px) !important;
  }

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

  html body .account-nav-item span {
    font-size: 0.75rem !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;
    /* 2026-07-29 FIX: masaüstü `flex: 1 1 0` (yatay büyüme için) mobilde layout
       column'a döndüğünde flex-basis:0 DİKEY eksende içeriği ~nav-yüksekliğine
       çökertiyordu → tüm sayfa içeriği (entegrasyon vb.) boş/kırpık görünüyordu.
       Column'da içerik-yüksekliği için flex-basis:auto. */
    flex: 1 1 auto !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: var(--tm-radius-card, 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.125rem !important;
    flex-shrink: 0 !important;
  }

  html body .account-nav-item span {
    font-size: 0.625rem !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.tm-hesap-rayli .account-container-wrapper,
  html body.tm-hesap-rayli .profile-container-wrapper,
  html body.tm-hesap-rayli .subscription-container-wrapper,
  html body.tm-hesap-rayli .shipping-container-wrapper,
  html body.tm-hesap-rayli .security-container-wrapper,
  html body.tm-hesap-rayli .notifications-container-wrapper,
  html body.tm-hesap-rayli .balance-container-wrapper,
  html body.tm-hesap-rayli .integration-container-wrapper,
  html body.tm-hesap-rayli .cart-container-wrapper,
  html body.tm-hesap-rayli .favorites-container-wrapper,
  html body.tm-hesap-rayli .orders-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .account-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .profile-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .subscription-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .shipping-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .security-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .notifications-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .balance-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .integration-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .cart-container-wrapper,
  html body.tm-hesap-rayli .account-main-column .favorites-container-wrapper,
  html body.tm-hesap-rayli .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:is(.tmh-9cd1faa7, :not(*) .account-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-2f967827, :not(*) .profile-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-14f85d35, :not(*) .subscription-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-e0d8465c, :not(*) .shipping-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-97dcbf1c, :not(*) .security-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-26e785c0, :not(*) .notifications-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-501d798d, :not(*) .balance-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-c9af1301, :not(*) .integration-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-c8b00c6d, :not(*) .cart-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-5f2d63c8, :not(*) .favorites-page-wrapper) .tmv2-page-shell,
#tmv2App:is(.tmh-d22dafa1, :not(*) .orders-page-wrapper) .tmv2-page-shell {
  gap: 0.35rem;
}
#tmv2App:is(.tmh-9cd1faa7, :not(*) .account-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-2f967827, :not(*) .profile-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-14f85d35, :not(*) .subscription-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-e0d8465c, :not(*) .shipping-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-97dcbf1c, :not(*) .security-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-26e785c0, :not(*) .notifications-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-501d798d, :not(*) .balance-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-c9af1301, :not(*) .integration-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-c8b00c6d, :not(*) .cart-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-5f2d63c8, :not(*) .favorites-page-wrapper) .tmv2-page-body,
#tmv2App:is(.tmh-d22dafa1, :not(*) .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:is(.tmh-b1d57a77, :not(*) .account-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-38fa801b, :not(*) .profile-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-9ac1abe4, :not(*) .subscription-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-ff8579ba, :not(*) .shipping-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-91a985d0, :not(*) .security-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-2855683a, :not(*) .notifications-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-938426c7, :not(*) .balance-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-5096f73c, :not(*) .integration-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-2fde07db, :not(*) .cart-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-1c2b0f2a, :not(*) .favorites-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-7034d6d8, :not(*) .orders-page-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-fb8c7962, :not(*) .support-tickets-account-wrapper),
#tmv2App main#mainContent.tmv2-page:is(.tmh-0b5c0faa, :not(*) .profile-email-settings-wrapper),
#mainContent.main-content:is(.tmh-7cbd5f17, :not(*) .account-page-wrapper),
#mainContent.main-content:is(.tmh-1551c377, :not(*) .profile-page-wrapper),
#mainContent.main-content:is(.tmh-4bf8c489, :not(*) .subscription-page-wrapper),
#mainContent.main-content:is(.tmh-ff348833, :not(*) .shipping-page-wrapper),
#mainContent.main-content:is(.tmh-cf9a0c83, :not(*) .security-page-wrapper),
#mainContent.main-content:is(.tmh-9ff04b80, :not(*) .notifications-page-wrapper),
#mainContent.main-content:is(.tmh-0b6fe877, :not(*) .balance-page-wrapper),
#mainContent.main-content:is(.tmh-769d578e, :not(*) .integration-page-wrapper),
#mainContent.main-content:is(.tmh-8e1df1b0, :not(*) .cart-page-wrapper),
#mainContent.main-content:is(.tmh-a9740839, :not(*) .favorites-page-wrapper),
#mainContent.main-content:is(.tmh-ea387c2c, :not(*) .orders-page-wrapper),
#mainContent.main-content:is(.tmh-26786bcd, :not(*) .support-tickets-account-wrapper),
#mainContent.main-content:is(.tmh-5ede5039, :not(*) .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:is(.tmh-b1d57a77, :not(*) .account-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-38fa801b, :not(*) .profile-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-9ac1abe4, :not(*) .subscription-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-ff8579ba, :not(*) .shipping-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-91a985d0, :not(*) .security-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-2855683a, :not(*) .notifications-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-938426c7, :not(*) .balance-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-5096f73c, :not(*) .integration-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-2fde07db, :not(*) .cart-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-1c2b0f2a, :not(*) .favorites-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-7034d6d8, :not(*) .orders-page-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-fb8c7962, :not(*) .support-tickets-account-wrapper),
  #tmv2App main#mainContent.tmv2-page:is(.tmh-0b5c0faa, :not(*) .profile-email-settings-wrapper),
  #mainContent.main-content:is(.tmh-7cbd5f17, :not(*) .account-page-wrapper),
  #mainContent.main-content:is(.tmh-1551c377, :not(*) .profile-page-wrapper),
  #mainContent.main-content:is(.tmh-4bf8c489, :not(*) .subscription-page-wrapper),
  #mainContent.main-content:is(.tmh-ff348833, :not(*) .shipping-page-wrapper),
  #mainContent.main-content:is(.tmh-cf9a0c83, :not(*) .security-page-wrapper),
  #mainContent.main-content:is(.tmh-9ff04b80, :not(*) .notifications-page-wrapper),
  #mainContent.main-content:is(.tmh-0b6fe877, :not(*) .balance-page-wrapper),
  #mainContent.main-content:is(.tmh-769d578e, :not(*) .integration-page-wrapper),
  #mainContent.main-content:is(.tmh-8e1df1b0, :not(*) .cart-page-wrapper),
  #mainContent.main-content:is(.tmh-a9740839, :not(*) .favorites-page-wrapper),
  #mainContent.main-content:is(.tmh-ea387c2c, :not(*) .orders-page-wrapper),
  #mainContent.main-content:is(.tmh-26786bcd, :not(*) .support-tickets-account-wrapper),
  #mainContent.main-content:is(.tmh-5ede5039, :not(*) .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: var(--tm-radius-card, 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.25rem !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: var(--tm-radius-card, 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: var(--tm-radius-xl, 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;
}

/* Account hub vanilla polish: Hesabim, Profil, Abonelik, Entegrasyon, Kargo, Bildirimler */
html body.tm-hesap-rayli .account-layout-with-rail {
  gap: var(--tmv2-sp-2, 8px) !important;
}

html body.tm-hesap-rayli .account-welcome-card {
  border-radius: 8px !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10) !important;
}

html body.tm-hesap-rayli .account-welcome-card > .card-body {
  padding: var(--tmv2-sp-4, 16px) var(--tmv2-sp-5, 20px) !important;
}

html body.tm-hesap-rayli .account-welcome-card__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
}

html body.tm-hesap-rayli .account-container > .card:not(.account-welcome-card),
html body.tm-hesap-rayli .profile-container > .card:not(.account-welcome-card),
html body.tm-hesap-rayli .subscription-container > .card:not(.account-welcome-card),
html body.tm-hesap-rayli .shipping-container > .card:not(.account-welcome-card),
html body.tm-hesap-rayli .notifications-container > .card:not(.account-welcome-card),
html body.tm-hesap-rayli .integration-container .card:not(.account-welcome-card) {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: var(--color-surface, #fff) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

html body.tm-hesap-rayli .account-container .card-header.bg-light,
html body.tm-hesap-rayli .profile-container .card-header.bg-light,
html body.tm-hesap-rayli .subscription-container .card-header.bg-light,
html body.tm-hesap-rayli .shipping-container .card-header.bg-light,
html body.tm-hesap-rayli .notifications-container .card-header.bg-light,
html body.tm-hesap-rayli .integration-container .card-header.bg-light,
html body.tm-hesap-rayli .integration-platform-card-header {
  background: var(--tm-surface-sunken, #f8fafc) !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: var(--ink, #0f172a) !important;
  padding: var(--tmv2-sp-3, 12px) var(--tmv2-sp-4, 16px) !important;
}

html body.tm-hesap-rayli .account-container .card-header.bg-light h6,
html body.tm-hesap-rayli .profile-container .card-header.bg-light h6,
html body.tm-hesap-rayli .subscription-container .card-header.bg-light h6,
html body.tm-hesap-rayli .shipping-container .card-header.bg-light h6,
html body.tm-hesap-rayli .notifications-container .card-header.bg-light h6,
html body.tm-hesap-rayli .integration-container .card-header.bg-light h6 {
  color: #075eb8 !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
}

html body.tm-hesap-rayli .card:not(.account-welcome-card) .card-body {
  padding: var(--tmv2-sp-4, 16px) !important;
}

html body.tm-hesap-rayli .form-control,
html body.tm-hesap-rayli .form-select {
  border-radius: 8px !important;
  border-color: #d9e1ec !important;
  box-shadow: none !important;
}

html body.tm-hesap-rayli .form-control:focus,
html body.tm-hesap-rayli .form-select:focus {
  border-color: var(--color-primary, #0175e4) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12) !important;
}

html body.tm-hesap-rayli .btn {
  border-radius: 8px !important;
}

html body.tm-hesap-rayli .account-navigation .account-nav-container {
  border-radius: 8px !important;
  border: 1px solid #dbe3ee !important;
  border-right: 0 !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

html body.tm-hesap-rayli .account-navigation .account-nav-item {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
}

html body.tm-hesap-rayli .account-navigation .account-nav-item:hover {
  background: var(--color-surface-3, #f1f5f9) !important;
  box-shadow: none !important;
}

html body.tm-hesap-rayli .account-navigation .account-nav-item.active {
  background: var(--color-primary, #0175e4) !important;
  border-color: #0064c8 !important;
  box-shadow: 0 8px 16px rgba(var(--color-primary-rgb), 0.18) !important;
}

/* 2026-10-10 — KOYU TEMA: aktif şerit etiketi (ör. "Abonelik") OKUNMUYORDU.
   ÖLÇÜLDÜ (Playwright + CSSOM, `scripts/qa/_abn_kural_sor.cjs`): zemini yukarıdaki
   kural boyuyor (özgüllük 0-4-2, `!important`), metin rengini ise `dark-mode.css`
   `html.dark-mode .account-navigation a.active { color: var(--color-primary) }`
   (0-3-2) kazanıyordu. Koyu temada `--color-primary` #60a5fa'ya AÇILIYOR, zemin ise
   #3a88e5 kalıyor → mavi-üstü-mavi, ölçülen kontrast **1,42:1**.
   Bir önceki deneme (`html.dark-mode .account-nav-item.active`, 0-3-1) dark-mode.css
   kuralına özgüllükte YENİLDİĞİ için ölü kalmıştı — bu yüzden burada kapsam
   yukarıdaki kuralın ŞEKLİ birebir tekrarlanarak (0-5-2) yazılıyor.
   Zemin de koyulaştırılıyor: beyaz metin #3a88e5 üstünde yalnız 3,60:1 verir
   (4,5 eşiğinin altında); #0f5fae ile **6,43:1**. Açık tema DOKUNULMADI. */
html.dark-mode body.tm-hesap-rayli .account-navigation .account-nav-item.active,
html.dark body.tm-hesap-rayli .account-navigation .account-nav-item.active {
  background: #0f5fae !important;
  border-color: #1b6fc4 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode body.tm-hesap-rayli .account-navigation .account-nav-item.active i,
html.dark-mode body.tm-hesap-rayli .account-navigation .account-nav-item.active span,
html.dark body.tm-hesap-rayli .account-navigation .account-nav-item.active i,
html.dark body.tm-hesap-rayli .account-navigation .account-nav-item.active span {
  color: #ffffff !important;
}

html body.tm-hesap-rayli .notifications-settings-accordion .accordion-item {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html body.tm-hesap-rayli .notifications-settings-accordion .accordion-button {
  background: var(--tm-surface, #fff) !important;
  box-shadow: none !important;
}

html body.tm-hesap-rayli .table-responsive {
  border-radius: 8px !important;
  border-color: #e5e7eb !important;
}

/* Account/Profile UX refresh */
.profile-page-modern .profile-overview-grid,
.account-dashboard-home .account-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: var(--tmv2-sp-3, 12px);
  align-items: stretch;
}

.profile-page-modern .profile-identity-card,
.profile-page-modern .profile-readiness-card,
.account-dashboard-home .account-health-card,
.account-dashboard-home .account-next-card {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: var(--tm-surface, #fff) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

.profile-page-modern .profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #0175e4);
  color: var(--tm-surface, #fff);
  font-size: 1.5rem;
}

.profile-page-modern .profile-avatar-action {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tm-surface, #fff);
  border-radius: 8px;
  background: var(--ink, #0f172a);
  color: var(--tm-surface, #fff);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.profile-page-modern .profile-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.5rem;
  border-radius: var(--tm-radius-full, 999px);
  background: #ecfdf3;
  color: #137333;
  font-size: 0.75rem;
  font-weight: 700;
}

.profile-page-modern .profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.profile-page-modern .profile-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--tm-surface-sunken, #f8fafc);
  color: #475569;
  font-size: 0.8125rem;
}

.profile-page-modern .profile-completion-score,
.account-dashboard-home .account-health-score {
  color: var(--tmv2-primary, #075eb8);
  font-size: 1.375rem;
  line-height: 1;
  white-space: nowrap;   /* 2026-10-05: kart kenarına taşıyordu */
  flex-shrink: 0;
}

.profile-page-modern .profile-progress,
.account-dashboard-home .account-health-progress {
  height: 8px;
  border-radius: var(--tm-radius-full, 999px);
  background: #e8eef6;
  overflow: hidden;
}

.profile-page-modern .profile-progress span,
.account-dashboard-home .account-health-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tm-primary, #0175e4) 0%, #22c55e 100%);
}

.profile-page-modern .profile-checklist,
.account-dashboard-home .account-health-list,
.account-dashboard-home .account-next-actions {
  display: grid;
  gap: 0.5rem;
}

.profile-page-modern .profile-checklist span,
.account-dashboard-home .account-health-list a,
.account-dashboard-home .account-next-actions a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.48rem 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--tm-surface-sunken, #f8fafc);
  color: #334155;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.profile-page-modern .profile-checklist .is-done,
.account-dashboard-home .account-health-list .is-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.profile-page-modern .profile-checklist .is-missing,
.account-dashboard-home .account-health-list .is-missing {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.profile-page-modern .profile-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--tm-surface, #fff);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.profile-page-modern .profile-section-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.2rem;
  padding: 0.42rem 0.7rem;
  border-radius: 8px;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.profile-page-modern .profile-section-nav a:hover {
  background: var(--color-surface-3, #f1f5f9);
  color: #075eb8;
}

.profile-page-modern .profile-form-section {
  scroll-margin-top: calc(var(--account-desktop-nav-top, 74px) + 12px);
}

.profile-page-modern .profile-actions-card {
  position: sticky;
  bottom: var(--tmv2-sp-3, 12px);
  z-index: 20;
  border: 1px solid #dbe3ee !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
}

.profile-page-modern .profile-security-card {
  border: 1px solid #dbe3ee !important;
  border-radius: 8px !important;
}

.account-dashboard-home .account-next-actions a:hover,
.account-dashboard-home .account-health-list a:hover {
  border-color: #bfdbfe;
  color: #075eb8;
  background: #eff6ff;
}

@media (max-width: 900px) {
  .profile-page-modern .profile-overview-grid,
  .account-dashboard-home .account-command-grid {
    grid-template-columns: 1fr;
  }

  .profile-page-modern .profile-section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .profile-page-modern .profile-section-nav a {
    flex: 0 0 auto;
  }
}

@media (max-width: 575.98px) {
  .profile-page-modern .profile-avatar {
    width: 60px;
    height: 60px;
  }

  .profile-page-modern .profile-meta-row span {
    width: 100%;
  }

  .profile-page-modern .profile-actions-card {
    bottom: calc(var(--account-mobile-bottom-nav-height, 78px) + 8px);
  }

  .profile-page-modern .profile-security-card {
    margin-bottom: calc(var(--account-mobile-bottom-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 16px) !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: var(--tm-radius-xl, 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: var(--tm-radius-lg, 10px) !important;
  background: rgba(var(--color-primary-rgb), 0.12) !important;
  color: var(--color-primary) !important;
  font-size: 1.125rem !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: var(--tm-radius-xl, 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: var(--tm-radius-lg, 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: var(--tm-radius-lg, 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: var(--tm-radius-xl, 14px);
  --bs-accordion-inner-border-radius: var(--tm-radius-card, 12px);
  border-radius: var(--tm-radius-xl, 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.9375rem !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) */
  .tm-hesap-rayli #mainContent.main-content {
    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.tm-hesap-rayli .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.tm-hesap-rayli .header-bar {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border-radius: var(--tm-radius-xl, 14px) !important;
  }

  /* Turuncu / beyaz kartlar tam sütun genişliği */
  html body.tm-hesap-rayli .account-welcome-card,
  html body.tm-hesap-rayli .account-container > .card,
  html body.tm-hesap-rayli .profile-container > .card,
  html body.tm-hesap-rayli .subscription-container > .card,
  html body.tm-hesap-rayli .shipping-container > .card,
  html body.tm-hesap-rayli .notifications-container > .card,
  html body.tm-hesap-rayli .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.tm-hesap-rayli .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.tm-hesap-rayli .account-nav-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  html body.tm-hesap-rayli .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: var(--tm-radius-card, 12px) !important;
    touch-action: manipulation !important;
    scroll-snap-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.tm-hesap-rayli .account-nav-item span {
    font-size: 0.625rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    -webkit-line-clamp: 2 !important;
  }

  html body.tm-hesap-rayli .account-nav-item i {
    font-size: 1.125rem !important;
  }

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

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

  /* Sayfa başlığı — mobil: tema primary → accent */
  html body.tm-hesap-rayli .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.tm-hesap-rayli .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.tm-hesap-rayli .account-welcome-card h5 {
    color: var(--tm-fg-on-brand) !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  html body.tm-hesap-rayli .account-welcome-card .text-muted,
  html body.tm-hesap-rayli .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.tm-hesap-rayli .account-welcome-card__icon {
    width: 44px !important;
    height: 44px !important;
    margin-right: 0.65rem !important;
    border-radius: var(--tm-radius-lg, 10px) !important;
  }

  html body.tm-hesap-rayli .account-welcome-card__icon i {
    font-size: 1.25rem !important;
  }

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

  html body.tm-hesap-rayli .account-welcome-card .btn-light,
  html body.tm-hesap-rayli .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.tm-hesap-rayli .card:not(.account-welcome-card) .card-body.p-3,
  html body.tm-hesap-rayli .card:not(.account-welcome-card) .card-body.p-md-4 {
    padding: 0.85rem 1rem !important;
  }

  /* 2026-10-05: "mobilde turuncu şerit" (zemin + beyaz başlık metni) kaldırıldı — bölüm başlıkları masaüstüyle aynı. */




  html body.tm-hesap-rayli .card:not(.account-welcome-card) .card-header .small,
  html body.tm-hesap-rayli .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.tm-hesap-rayli .table-responsive {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    border-radius: var(--tm-radius-card, 12px) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
    background: var(--color-surface) !important;
  }

  html body.tm-hesap-rayli .table-responsive .table {
    font-size: 0.8125rem !important;
    margin-bottom: 0 !important;
  }

  html body.tm-hesap-rayli .table th,
  html body.tm-hesap-rayli .table td {
    padding: 0.5rem 0.45rem !important;
    vertical-align: middle !important;
  }

  /* iOS: odakta yakınlaştırmayı azaltmak için 16px */
  html body.tm-hesap-rayli input.form-control,
  html body.tm-hesap-rayli select.form-select,
  html body.tm-hesap-rayli textarea.form-control {
    font-size: 16px !important;
  }

  html body.tm-hesap-rayli input.form-control:not([type="checkbox"]):not([type="radio"]),
  html body.tm-hesap-rayli select.form-select {
    min-height: 44px !important;
  }

  /* Vurgulu butonlar */
  html body.tm-hesap-rayli .card .btn.bg-orange,
  html body.tm-hesap-rayli .card .btn.btn-orange,
  html body.tm-hesap-rayli .card .btn-primary,
  html body.tm-hesap-rayli .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.tm-hesap-rayli .tm-radio-cards.d-flex.flex-column.flex-sm-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  html body.tm-hesap-rayli .tm-radio-card.flex-fill {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Entegrasyon: üst satır tam genişlik, alt alta */
  html body.tm-hesap-rayli .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.tm-hesap-rayli .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.tm-hesap-rayli .subscription-plan-card {
    max-width: 100% !important;
  }

  /* Bildirim accordion — daha yüksek dokunma */
  html body.tm-hesap-rayli .notifications-settings-accordion .accordion-button {
    min-height: 48px !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.875rem !important;
  }

  html body.tm-hesap-rayli .notifications-settings-accordion .accordion-body {
    padding: 0.35rem 0.85rem 0.9rem !important;
  }

  /* Hesabım hızlı linkler */
  html body.tm-hesap-rayli .account-quick-link {
    min-height: 44px !important;
    padding: 0.55rem 0.7rem !important;
    font-size: 0.8125rem !important;
  }

  /* Uzun e-posta / metin */
  html body.tm-hesap-rayli .account-container,
  html body.tm-hesap-rayli .profile-container,
  html body.tm-hesap-rayli .subscription-container,
  html body.tm-hesap-rayli .shipping-container,
  html body.tm-hesap-rayli .notifications-container,
  html body.tm-hesap-rayli .integration-container {
    overflow-x: hidden !important;
  }

  html body.tm-hesap-rayli .small.text-muted,
  html body.tm-hesap-rayli small.text-muted {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }






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

  html.dark-mode body.tm-hesap-rayli .account-welcome-card > .card-body {
    background: transparent !important;
    background-color: transparent !important;
  }




}

/* Tek yazı tipi (2026-10-05, ölçüldü): ayarlar sayfalarının 6'sı `--tmv2-ff-sans` ("Inter", ui-sans-serif,
   system-ui…), `.tm-page` kullanan 4'ü (Profil · Kargo · Bildirimler · e-Fatura) `--tm-font-sans` ("Inter var",
   "Inter", -apple-system…) alıyordu; Inter hiçbir yerde yüklenmediği için iki yığın farklı sistem fontuna
   düşüp sayfadan sayfaya farklı yazı görünüyordu. Hesap düzeninde ikisi tek token'a bağlanır. */
.account-page-wrapper { --tm-font-sans: var(--tmv2-ff-sans); }


/* ===== css/app-background-decor.css ===== */
/**
 * App surface: subtle decorative background.
 * Designed to be barely visible — atmosphere only, never dominate.
 */

.app-shell-wrap {
  position: relative;
  z-index: 2;
}

/* --- Fixed background: very subtle grid + soft gradients --- */
.bg-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: layout paint;
}

.bg-shapes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--tm-app-grid-line, rgba(0, 112, 224, 0.025)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tm-app-grid-line, rgba(0, 112, 224, 0.025)) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-shapes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 14%, rgba(0, 112, 224, 0.03) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 88% 22%, rgba(240, 112, 16, 0.02) 0%, transparent 50%);
}

.shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  /* 2026-09-24 (kullanıcı): kartların arkasında beliren soluk daire/leke istenmiyor —
     üç şekil de kapatıldı (grid + yumuşak degrade zemin kalır). */
  display: none;
}

/* Light mode shapes — very subtle, barely visible */
html:not(.dark-mode) .shape-1 {
  width: clamp(180px, 24vmin, 280px);
  height: clamp(180px, 24vmin, 280px);
  border-radius: 50%;
  top: 6%;
  left: 2%;
  opacity: 0.05;
  background: linear-gradient(145deg, #70b0f0 0%, #0070e0 55%, #0058b3 100%);
}

html:not(.dark-mode) .shape-2 {
  width: clamp(140px, 18vmin, 220px);
  height: clamp(140px, 18vmin, 220px);
  top: 52%;
  right: 4%;
  transform: rotate(22deg);
  border-radius: 12px;
  opacity: 0.04;
  background: linear-gradient(160deg, #9cc8f5 0%, #0070e0 50%, #0058b3 100%);
}

html:not(.dark-mode) .shape-3 {
  width: clamp(240px, 36vmin, 380px);
  height: clamp(96px, 14vmin, 150px);
  border-radius: 999px;
  bottom: 4%;
  left: 28%;
  opacity: 0.04;
  background: linear-gradient(90deg, rgba(240, 112, 16, 0.4) 0%, rgba(255, 140, 66, 0.3) 40%, rgba(0, 112, 224, 0.25) 100%);
}

/* Body background */
html:not(.dark-mode) body {
  min-height: 100vh;
  background-color: var(--tm-app-bg, #f1f4f9) !important;
  /* 2026-10-11: sabit #edf0f7/#eef1f8 uçları kanonik zeminin (--color-bg #e6ebf3)
     ÜSTÜNDE kalıp Palet B'yi siliyordu; uçlar artık token ailesinden. */
  background-image: linear-gradient(165deg, #e3e9f2 0%, var(--tm-app-bg-mid, #e9eef5) 52%, var(--tm-app-bg, #e6ebf3) 100%) !important;
}

/* Dark body bg: flat neutral surface from canonical tokens.
 * Audit 2026-06-11: eski navy gradient (#0f172a → #0c1222) kaldırıldı; tekleştirilmiş
 * --color-bg üzerinden flat boyama. Bir önceki radial-gradient ışıklı blue overlay'i de
 * lacivert hissinin kaynaklarındandı, kaldırıldı. */
html.dark-mode body {
  min-height: 100vh;
  background-color: var(--color-bg) !important;
  background-image: none;
}

/* Legacy wrappers transparent */
html:not(.dark-mode) .app-layout,
html:not(.dark-mode) .flex.min-h-screen.app-shell-wrap,
html:not(.dark-mode) .flex.min-h-screen:is(.tmh-1db5c619, :not(*) > #mainContent),
html:not(.dark-mode) .flex.min-h-screen:is(.tmh-2426357c, :not(*) > main#mainContent) {
  background-color: transparent !important;
}

html.dark-mode .app-layout,
html.dark-mode .flex.min-h-screen.app-shell-wrap,
html.dark-mode .flex.min-h-screen:is(.tmh-1db5c619, :not(*) > #mainContent),
html.dark-mode .flex.min-h-screen:is(.tmh-2426357c, :not(*) > main#mainContent) {
  background-color: transparent !important;
}

/* Dark mode shapes */
html.dark-mode .bg-shapes::after {
  background:
    radial-gradient(ellipse 78% 58% at 12% 16%, rgba(112, 176, 240, 0.06) 0%, transparent 52%),
    radial-gradient(ellipse 62% 48% at 88% 24%, rgba(240, 112, 16, 0.03) 0%, transparent 48%);
}

html.dark-mode .shape-1 {
  width: clamp(180px, 24vmin, 280px);
  height: clamp(180px, 24vmin, 280px);
  border-radius: 50%;
  top: 8%;
  left: 4%;
  opacity: 0.06;
  background: linear-gradient(145deg, #b8dafb 0%, #8ec5f7 45%, #0070e0 100%);
}

html.dark-mode .shape-2 {
  width: clamp(140px, 18vmin, 220px);
  height: clamp(140px, 18vmin, 220px);
  top: 56%;
  right: 6%;
  transform: rotate(25deg);
  border-radius: 16px;
  opacity: 0.05;
  background: linear-gradient(155deg, #8ec5f7 0%, #1a7fd9 50%, #0070e0 100%);
}

html.dark-mode .shape-3 {
  width: clamp(240px, 36vmin, 360px);
  height: clamp(96px, 14vmin, 130px);
  border-radius: 999px;
  bottom: 5%;
  left: 30%;
  opacity: 0.05;
  background: linear-gradient(90deg, rgba(240, 112, 16, 0.3) 0%, rgba(251, 146, 60, 0.2) 45%, rgba(112, 176, 240, 0.2) 100%);
}

/* Mobile: hide decorative shapes entirely */
@media (max-width: 768px) {
  .shape-1, .shape-2, .shape-3 {
    display: none !important;
  }
  .bg-shapes::before {
    opacity: 0.5;
  }
  .bg-shapes::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-shapes::after {
    display: none !important;
  }
}

@media (prefers-contrast: more) {
  .bg-shapes {
    display: none !important;
  }
  html:not(.dark-mode) body {
    background-color: var(--tm-bg-primary) !important;
  }
}


/* ===== css/tm-buttons-v2.css ===== */
/* DS-SCOPE EXCLUSION — REGISTERED DEBT (2026-09-13, UI design-system refactor Faz 4a).
   Rules carrying `:where(:not(.tm-ds *))` stand down inside pages that opted into the
   design system (<main class="tm-ds">); `:where()` keeps their specificity unchanged, so
   every other page resolves exactly as before. Counted in the DS metrics table
   ("Debt: shell DS-scope exclusions"); removed when the rule itself is deleted. */
/**
 * Trendmetrik UI v2 — buton state sistemi (#tmv2App)
 * base.html inline’daki body:not(:has(#tmv2App)) … background:inherit kuralı v2’de kapalı;
 * bu dosya Bootstrap .btn + .tmv2-button* için tutarlı hover/active/focus/disabled sağlar.
 */

#tmv2App .btn {
  border-radius: var(--tmv2-btn-radius, 10px);
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

/* ----- PR-D6c: resting-state Bootstrap .btn-outline-* shim -----
   Kök neden: kanonik bare .btn (tm-v2.css) Bootstrap'tan sonra yüklenip base katmanı
   kazanıyor (beyaz yüzey + 1px kenarlık + gölge); solid varyantlar aşağıda kurtarılmış
   ama outline'ların DİNLENME hali yoktu → body-level .btn-outline-* beyaz dolu çip gibi
   görünüyordu. Aşağıdaki kurallar token tabanlı, şeffaf-dinlenme + dolgu-hover ile
   Bootstrap outline semantiğini geri getirir. Hover/focus/active kuralları mevcut
   (bkz. ilerideki bloklar); burada yalnız resting state. */
#tmv2App .btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

#tmv2App .btn-outline-secondary {
  background-color: transparent !important;
  border: 1px solid var(--tmv2-bs-secondary) !important;
  color: var(--tmv2-ink-2) !important;
  box-shadow: none !important;
}

#tmv2App .btn-outline-success {
  background-color: transparent !important;
  border: 1px solid var(--color-success) !important;
  color: var(--tm-success-strong) !important; /* light: #047857 → 5.48:1 on white */
  box-shadow: none !important;
}

#tmv2App .btn-outline-danger {
  background-color: transparent !important;
  border: 1px solid var(--color-danger) !important;
  color: var(--color-danger) !important;
  box-shadow: none !important;
}

#tmv2App .btn-outline-warning {
  background-color: transparent !important;
  border: 1px solid var(--tmv2-warning-border) !important;
  color: var(--tmv2-ink) !important; /* sarı düşük kontrast; ink ile okunur (mirror .btn-warning) */
  box-shadow: none !important;
}

#tmv2App .btn-outline-info {
  background-color: transparent !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important; /* info=primary (theme-variables --tmv2-info) */
  box-shadow: none !important;
}

#tmv2App .btn-outline-dark {
  background-color: transparent !important;
  border: 1px solid var(--tmv2-bs-dark) !important;
  color: var(--tmv2-bs-dark) !important;
  box-shadow: none !important;
}

#tmv2App .btn-outline-light {
  background-color: transparent !important;
  border: 1px solid var(--tmv2-line) !important;
  color: var(--tmv2-ink-2) !important;
  box-shadow: none !important;
}

/* hover/focus dolgusu — sarı/light hariç beyaz-üzeri-renk yerine renk-üzeri-beyaz */
#tmv2App .btn-outline-warning:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-warning:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-warning:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-warning.focus:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-warning) !important;
  border-color: var(--tmv2-warning-border) !important;
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-outline-info:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-info:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-info:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-info.focus:not(:disabled):not(.disabled) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-outline-dark:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-dark:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-dark:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-dark.focus:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-bs-dark) !important;
  border-color: var(--tmv2-bs-dark) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-outline-light:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-light:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-light:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-light.focus:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-surface-2) !important;
  border-color: var(--tmv2-line) !important;
  color: var(--tmv2-ink) !important;
}

/* Dark-mode resting düzeltmeleri — düşük kontrastlı token'ları aydınlat */
html.dark-mode #tmv2App .btn-outline-success {
  color: var(--color-success) !important; /* dark: #16a34a → 5.83:1 (success-strong dark'ta 3.5 düşük) */
}

html.dark-mode #tmv2App .btn-outline-danger {
  border-color: var(--tmv2-delta-danger-fg-dark) !important;
  color: var(--tmv2-delta-danger-fg-dark) !important; /* #f87171 → 6.95:1 (dc2626 dark'ta 3.98 düşük) */
}

html.dark-mode #tmv2App .btn-outline-dark {
  border-color: var(--tmv2-line) !important; /* bs-dark = page bg, görünmez → line */
  color: var(--tmv2-ink) !important;
}

html.dark-mode #tmv2App .btn-outline-dark:hover:not(:disabled):not(.disabled),
html.dark-mode #tmv2App .btn-outline-dark:active:not(:disabled):not(.disabled),
html.dark-mode #tmv2App .btn-outline-dark:focus-visible:not(:disabled):not(.disabled),
html.dark-mode #tmv2App .btn-outline-dark.focus:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-surface-2) !important;
  border-color: var(--tmv2-line) !important;
  color: var(--tmv2-ink) !important;
}

/* ----- Bootstrap: outline / secondary — metin her zaman okunur ----- */
#tmv2App .btn-outline-secondary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-secondary:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-secondary:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-secondary.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--tmv2-bs-secondary) !important;
  border-color: var(--tmv2-bs-secondary) !important;
}

#tmv2App .btn-outline-primary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-primary:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-primary:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-primary.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

#tmv2App .btn-outline-danger:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-danger:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-danger:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-danger.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}

#tmv2App .btn-outline-success:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-success:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-success:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-success.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

/* Ghost / light — hover’da kaybolma yok */
#tmv2App .btn-light:hover:not(:disabled):not(.disabled),
#tmv2App .btn-light:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-light.focus:not(:disabled):not(.disabled) {
  color: var(--tmv2-bs-body) !important;
  background-color: var(--tmv2-bs-light-hover-bg) !important;
  border-color: var(--tmv2-bs-light-hover-border) !important;
}

html.dark-mode #tmv2App .btn-light:hover:not(:disabled):not(.disabled) {
  color: var(--tmv2-ink, #e2e8f0) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* Focus-visible — görünür halka, metin korunur */
#tmv2App .btn:focus-visible,
#tmv2App .btn.focus,
#tmv2App button:focus-visible:not(.tmv2-skip-focus):not([role="switch"]) {
  outline: none !important;
  box-shadow: var(--tmv2-focus-ring) !important;
}

#tmv2App .btn-primary:focus-visible:not(:disabled),
#tmv2App .btn-primary.focus:not(:disabled),
#tmv2App .btn-accent:focus-visible:not(:disabled),
#tmv2App .btn-accent.focus:not(:disabled) {
  box-shadow:
    var(--tmv2-focus-ring),
    0 2px 8px rgba(var(--color-primary-rgb), 0.25) !important;
}

#tmv2App .btn-outline-primary:focus-visible:not(:disabled),
#tmv2App .btn-outline-primary.focus:not(:disabled),
#tmv2App .btn-outline-secondary:focus-visible:not(:disabled),
#tmv2App .btn-outline-secondary.focus:not(:disabled) {
  box-shadow: var(--tmv2-focus-ring) !important;
}

/* Active — şeffaf arka plan + beyaz yazı kombinasyonunu engelle */
#tmv2App .btn:active:not(:disabled):not(.disabled) {
  filter: brightness(0.97);
}

#tmv2App .btn:disabled:where(:not(.tm-ds *)),
#tmv2App .btn.disabled:where(:not(.tm-ds *)),
#tmv2App button:disabled:where(:not(.tm-ds *)) {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ----- tmv2-button* — yeni bileşen (Bootstrap ile birlikte kullanılabilir) ----- */
#tmv2App .tmv2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--tmv2-btn-radius, 10px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#tmv2App .tmv2-button:active:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.97);
}

#tmv2App .tmv2-button:disabled,
#tmv2App .tmv2-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

#tmv2App .tmv2-button-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

#tmv2App .tmv2-button-primary {
  background: var(--color-primary);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.22);
}

#tmv2App .tmv2-button-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-button-primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tmv2-primary-active);
  border-color: var(--tmv2-primary-active);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-button-primary:focus-visible {
  box-shadow: var(--tmv2-focus-ring), 0 2px 8px rgba(var(--color-primary-rgb), 0.22) !important;
}

#tmv2App .tmv2-button-secondary {
  background: var(--tmv2-surface-2, #f1f5f9);
  color: var(--tmv2-ink, #0f172a) !important;
  border-color: var(--tmv2-line, #e7ebf1);
}

#tmv2App .tmv2-button-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tmv2-surface-3, #e2e8f0);
  border-color: var(--tmv2-line, #cbd5e1);
  color: var(--tmv2-ink, #0f172a) !important;
}

#tmv2App .tmv2-button-outline {
  background: transparent;
  color: var(--color-primary, #0175e4) !important;
  border-color: var(--color-primary, #0175e4);
}

#tmv2App .tmv2-button-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--color-primary);
}

#tmv2App .tmv2-button-ghost {
  background: transparent;
  color: var(--tmv2-ink-2, #475569) !important;
  border-color: transparent;
}

#tmv2App .tmv2-button-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tmv2-surface-2, #f1f5f9);
  color: var(--tmv2-ink, #0f172a) !important;
}

#tmv2App .tmv2-button-danger {
  background: var(--tmv2-danger);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--tmv2-danger);
}

#tmv2App .tmv2-button-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.05);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-button-success {
  background: var(--tmv2-success);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--tmv2-success);
}

#tmv2App .tmv2-button-success:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.05);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--tmv2-btn-radius);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line, #e7ebf1));
  background: var(--tmv2-surface, #fff);
  color: var(--tmv2-ink-2, #475569);
  box-shadow: var(--tmv2-sh-1);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#tmv2App .tmv2-icon-button:hover:not(:disabled) {
  background: var(--tmv2-surface-2, #f1f5f9);
  color: var(--tmv2-ink, #0f172a);
  box-shadow: var(--tmv2-sh-2);
  border-color: var(--tmv2-line, #e7ebf1);
}

#tmv2App .tmv2-icon-button--primary {
  background: var(--tmv2-primary-soft);
  border-color: color-mix(in srgb, var(--tmv2-primary) 35%, var(--tmv2-line));
  color: var(--tmv2-primary);
}

#tmv2App .tmv2-icon-button--success {
  background: var(--tmv2-success-soft);
  border-color: color-mix(in srgb, var(--tmv2-success) 35%, var(--tmv2-line));
  color: var(--tmv2-success);
}

#tmv2App .tmv2-icon-button--danger {
  background: var(--tmv2-danger-soft);
  border-color: color-mix(in srgb, var(--tmv2-danger) 35%, var(--tmv2-line));
  color: var(--tmv2-danger);
}

/* Eski pulse/glow utility sınıflarıyla birlikte — sakin v2 */
#tmv2App button.tmv2-icon-button.xml-action-btn:hover,
#tmv2App a.tmv2-icon-button.xml-action-btn:hover {
  animation: none !important;
  transform: none !important;
}

#tmv2App button.tmv2-icon-button.xml-action-btn::before,
#tmv2App a.tmv2-icon-button.xml-action-btn::before,
#tmv2App button.tmv2-icon-button.xml-action-btn::after,
#tmv2App a.tmv2-icon-button.xml-action-btn::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px) {
  #tmv2App button.tmv2-icon-button,
  #tmv2App a.tmv2-icon-button {
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
  }
}

#tmv2App .tmv2-button:focus-visible,
#tmv2App .tmv2-icon-button:focus-visible {
  outline: none !important;
  box-shadow: var(--tmv2-focus-ring, 0 0 0 3px rgba(1, 117, 228, 0.35)) !important;
}

/* Dark mode */
html.dark-mode #tmv2App .tmv2-button-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tmv2-ink, #e2e8f0) !important;
  border-color: var(--tmv2-line, #1e2533);
}

html.dark-mode #tmv2App .tmv2-button-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--tm-fg-on-brand) !important;
}

html.dark-mode #tmv2App .tmv2-button-outline {
  color: var(--color-primary, #73b7fe) !important;
  border-color: rgba(var(--color-primary-rgb, 1, 117, 228), 0.55);
}

html.dark-mode #tmv2App .tmv2-button-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary);
  color: var(--tm-fg-on-brand) !important;
}

html.dark-mode #tmv2App .tmv2-icon-button {
  background: var(--tmv2-surface, #10151f);
  border-color: var(--tmv2-line, #1e2533);
  color: var(--tmv2-ink-2, #94a3b8);
}

html.dark-mode #tmv2App .tmv2-icon-button--primary {
  background: var(--tmv2-primary-soft);
  border-color: color-mix(in srgb, var(--tmv2-primary) 40%, var(--tmv2-line));
  color: var(--tmv2-primary);
}

html.dark-mode #tmv2App .tmv2-icon-button--success {
  background: var(--tmv2-success-soft);
  border-color: color-mix(in srgb, var(--tmv2-success) 40%, var(--tmv2-line));
  color: var(--tmv2-success);
}

html.dark-mode #tmv2App .tmv2-icon-button--danger {
  background: var(--tmv2-danger-soft);
  border-color: color-mix(in srgb, var(--tmv2-danger) 40%, var(--tmv2-line));
  color: var(--tmv2-danger);
}

/* ----- Bootstrap solid — base.html + Baklava ile çakışmayı #tmv2App altında çöz
   Kök neden: :focus / .focus durumunda arka plan veya metin rengi düşüyor; inherit/outline
   kombinasyonu beyaz metin + açık zemin üretiyordu. ----- */
#tmv2App .btn-primary,
#tmv2App a.btn-primary,
#tmv2App button.btn-primary {
  background-color: var(--tmv2-primary) !important;
  border-color: var(--tmv2-primary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-primary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-primary:focus:not(:disabled):not(.disabled),
#tmv2App .btn-primary.focus,
#tmv2App .btn-primary:active:not(:disabled):not(.disabled),
#tmv2App .show > .btn-primary.dropdown-toggle {
  background-color: var(--tmv2-primary-hover) !important;
  border-color: var(--tmv2-primary-hover) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-secondary {
  background-color: var(--tmv2-bs-secondary) !important;
  border-color: var(--tmv2-bs-secondary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-secondary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-secondary:focus:not(:disabled):not(.disabled),
#tmv2App .btn-secondary.focus:not(:disabled):not(.disabled),
#tmv2App .btn-secondary:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-secondary:active:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-bs-secondary-hover) !important;
  border-color: var(--tmv2-bs-secondary-active) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-success:hover:not(:disabled):not(.disabled),
#tmv2App .btn-success:focus:not(:disabled):not(.disabled),
#tmv2App .btn-success:active:not(:disabled):not(.disabled) {
  filter: brightness(0.95);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-danger:hover:not(:disabled):not(.disabled),
#tmv2App .btn-danger:focus:not(:disabled):not(.disabled),
#tmv2App .btn-danger:active:not(:disabled):not(.disabled) {
  filter: brightness(0.95);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-warning {
  background-color: var(--tmv2-warning) !important;
  border-color: var(--tmv2-warning-border) !important;
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-warning:hover:not(:disabled):not(.disabled),
#tmv2App .btn-warning:focus:not(:disabled):not(.disabled),
#tmv2App .btn-warning:active:not(:disabled):not(.disabled) {
  filter: brightness(0.97);
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-info {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-info:hover:not(:disabled):not(.disabled),
#tmv2App .btn-info:focus:not(:disabled):not(.disabled),
#tmv2App .btn-info:active:not(:disabled):not(.disabled) {
  filter: brightness(0.97);
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-dark {
  background-color: var(--tmv2-bs-dark) !important;
  border-color: var(--tmv2-bs-dark) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-dark:hover:not(:disabled):not(.disabled),
#tmv2App .btn-dark:focus:not(:disabled):not(.disabled),
#tmv2App .btn-dark:active:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-bs-dark-hover) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-link {
  color: var(--color-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: none;
}

#tmv2App .btn-link:hover:not(:disabled),
#tmv2App .btn-link:focus:not(:disabled) {
  color: var(--color-primary-hover) !important;
  text-decoration: underline;
}

/* Pagination */
#tmv2App .page-link {
  color: var(--color-primary) !important;
  background-color: var(--tmv2-surface) !important;
  border-color: var(--tmv2-line) !important;
}

#tmv2App .page-link:hover:not(:disabled) {
  color: var(--color-primary) !important;
  background-color: var(--tmv2-surface-2) !important;
}

#tmv2App .page-item.active .page-link {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .page-item.disabled .page-link {
  color: var(--tmv2-mute) !important;
  background-color: var(--tmv2-surface-2) !important;
}

html.dark-mode #tmv2App .page-link {
  background-color: var(--tmv2-surface) !important;
  border-color: var(--tmv2-line) !important;
}

/* Modal footer — aynı görünürlük garantisi */
#tmv2App .modal-footer .btn:disabled {
  opacity: 0.55;
}

/* Filter bar / toolbar */
#tmv2App .filter-bar .btn-outline-secondary,
#tmv2App .tmv2-filter-bar .btn-outline-secondary,
#tmv2App .dashboard-top-controls .btn-outline-secondary {
  color: var(--tmv2-ink-2) !important;
  background-color: var(--tmv2-surface) !important;
  border-color: var(--tmv2-line) !important;
}

#tmv2App .filter-bar .btn-outline-secondary:hover:not(:disabled),
#tmv2App .tmv2-filter-bar .btn-outline-secondary:hover:not(:disabled),
#tmv2App .dashboard-top-controls .btn-outline-secondary:hover:not(:disabled),
#tmv2App .filter-bar .btn-outline-secondary.focus:not(:disabled),
#tmv2App .tmv2-filter-bar .btn-outline-secondary.focus:not(:disabled),
#tmv2App .dashboard-top-controls .btn-outline-secondary.focus:not(:disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--tmv2-bs-secondary) !important;
  border-color: var(--tmv2-bs-secondary) !important;
}


/* ===== css/tm-spacing.css ===== */
/* =================================================================
   TRENDMETRIK — GLOBAL SPACING SSOT (tm-spacing)
   -----------------------------------------------------------------
   FAZ-0 altyapı katmanı. ADDITIVE — hiçbir mevcut sayfayı DEĞİŞTİRMEZ.
   Amaç: "tüm sayfalarda container'lar arası farklı boşluk/padding var"
   sorununu tek bir kanonik boşluk ölçeği + semantik alias seti ile
   çözmek. Bu dosya YENİ px/rem üretmez; zaten var olan iki paralel
   ölçeği (v2/tokens.css `--tm-space-*` ve design-system.css `--space-*`)
   TEK KANONİK KAYNAK altında toplar ve eksik semantik alias'ları ekler.
   FAZ-1'de sayfa-özel hardcoded değerler bu token'lara migrate edilecek
   (bkz. docs/global-spacing.md).

   ┌── YÜKLEME SIRASI ──────────────────────────────────────────────┐
   │ base.html'de v2 bundle'ından (v2/v2.css → tokens.css) SONRA,     │
   │ tm-page-shell.css'ten ÖNCE yüklenir. Böylece:                    │
   │  - --tm-space-* ve --tm-page-padding-x/--tm-section-card-gap...  │
   │    (v2/tokens.css) TANIMLIDIR → alias'lar onlara bağlanır.       │
   │  - Yeni semantik alias'lar (--tm-page-gap, --tm-card-pad ...)    │
   │    page-shell / empty-state / FAZ-1 sayfaları tarafından         │
   │    kullanılabilir.                                                │
   └────────────────────────────────────────────────────────────────┘

   KURAL (FAZ-1): sayfa CSS/şablonlarında `padding: 16px` / `gap: 20px`
   gibi sabit değer YAZMA → semantik alias veya ölçek token'ı kullan:
     padding: var(--tm-card-pad);      /* yerine: padding: 20px */
     gap:     var(--tm-section-gap);   /* yerine: gap: 20px      */
     gap:     var(--tm-space-4);       /* yerine: gap: 16px      */

   Dark/Light: boşluk tema-bağımsızdır → tema değişkeni YOK.
   ================================================================= */

:root {
  /* =============================================================
     1) KANONİK BOŞLUK ÖLÇEĞİ (8px-uyumlu 4px-grid) — SSOT
     -------------------------------------------------------------
     v2/tokens.css içindeki --tm-space-* ölçeği KANONİK ilan edilir.
     Değerler oradaki tanımla BYTE-BYTE aynıdır; burada yeniden
     TANIMLANMAZ (tek gerçek kaynak = v2/tokens.css). Referans için
     ölçek özeti (yalnız yorum):

       --tm-space-0  = 0
       --tm-space-1  = 0.25rem  (4px)
       --tm-space-2  = 0.5rem   (8px)
       --tm-space-3  = 0.75rem  (12px)
       --tm-space-4  = 1rem     (16px)
       --tm-space-5  = 1.25rem  (20px)
       --tm-space-6  = 1.5rem   (24px)
       --tm-space-8  = 2rem     (32px)
       --tm-space-10 = 2.5rem   (40px)
       --tm-space-12 = 3rem     (48px)
       --tm-space-16 = 4rem     (64px)
       --tm-space-20 = 5rem     (80px)
       --tm-space-24 = 6rem     (96px)

     Not: design-system.css ayrıca aynı değerlerle bir --space-*
     ölçeği tanımlar. İkisi de aynı 4px-grid → çakışma YOK. FAZ-1'de
     yeni kod --tm-space-* kullanmalı; --space-* geriye-uyum içindir.
     ============================================================= */

  /* =============================================================
     2) SEMANTİK ALIAS'LAR (container boşluk sözleşmesi)
     -------------------------------------------------------------
     Kullanıcı "global bir boşluk miktarı olmalı" dedi. Aşağıdaki
     semantik isimler, sayfa/section/kart bağlamında HANGİ ölçek
     adımının kullanılacağını TEK yerde sabitler. Var olan v2/tokens
     semantik token'larına (--tm-page-padding-x, --tm-section-card-gap
     vb.) bağlanır → tek gerçek kaynak korunur, yeni paralel sistem
     AÇILMAZ. Fallback literal'ler yalnız izole fixture (tokens.css
     yüklü değil) senaryosu içindir.
     ============================================================= */

  /* --- Sayfa kabuğu (page shell) --- */
  /* Sayfa yatay iç boşluğu (gutter). Mevcut --tm-page-padding-x = 24px */
  --tm-page-pad-x: var(--tm-page-padding-x, 1.5rem);
  /* Sayfa dikey iç boşluğu. Mevcut --tm-page-padding-y = 20px */
  --tm-page-pad-y: var(--tm-page-padding-y, 1.25rem);
  /* Sayfa içi bölümler arası dikey ritim (page-level stack gap). 20px */
  --tm-page-gap:   var(--tm-section-card-gap, var(--tm-section-gap, 1.25rem));

  /* --- Bölüm (section) --- */
  /* Section-card iç padding'i (kart tüm-kenar). 20px */
  --tm-section-pad: var(--tm-section-padding, 1.25rem);
  /* NOT: --tm-section-gap ve --tm-card-gap v2/tokens.css'te ZATEN tanımlı
     (20px / 16px). Burada yeniden tanımlanmaz → tek kaynak korunur;
     FAZ-1'de doğrudan var(--tm-section-gap) / var(--tm-card-gap) kullan. */

  /* --- Kart (card) --- */
  /* Kart iç padding'i (comfortable). 20px */
  --tm-card-pad:  var(--tm-section-padding, 1.25rem);
  /* Kart iç sıkı padding (dense/compact kart). 16px */
  --tm-card-pad-sm: var(--tm-space-4, 1rem);
  /* NOT: --tm-card-inner-gap (12px) ve --tm-card-item-gap (16px)
     v2/tokens.css'te ZATEN tanımlı → kart içi öğe yığını için onları
     kullan; burada tekrar üretilmez. */

  /* --- Form / kontrol --- */
  /* Form alanları arası dikey boşluk. 16px */
  --tm-form-gap:    var(--tm-space-4, 1rem);
  /* Yan-yana buton/kontrol arası boşluk. 8px */
  --tm-control-gap: var(--tm-space-2, 0.5rem);
}


/* ===== css/tm-page-shell.css ===== */
/* =================================================================
   TRENDMETRIK — ORTAK SAYFA KABUĞU (tm-page-shell)
   -----------------------------------------------------------------
   FAZ-0 altyapı katmanı. ADDITIVE — hiçbir mevcut sayfayı değiştirmez;
   yeni sınıflar opt-in'dir. Amaç: tutarlı container/wrapper/başlık/grid/
   tablo yapısı → iç içe container, çift padding, çift header, tutarsız
   max-width sorunlarını tek bir sistemle bitirmek.

   ┌── UYUM ─────────────────────────────────────────────────────────┐
   │ Bu dosya `static/css/v2/tokens.css` (canonical --tm-* token'ları)  │
   │ üzerine kurulur ve `v2/layout.css`'teki mevcut .tm-page /          │
   │ .tm-page-header / .tm-section sistemiyle UYUMLUDUR. Base.html'de   │
   │ v2 bundle'ından (v2/v2.css) SONRA yüklenir → --tm-* token'ları     │
   │ tanımlıdır, kurallar yalnızca ADDITIVE pekiştirme yapar (kutu-     │
   │ modeli, yatay-taşma, min-width) — mevcut görsel stili EZMEZ.       │
   │                                                                    │
   │ Dark/Light: tüm renk/yüzey/kenar değerleri --tm-* token'larından   │
   │ gelir → data-theme="dark" / html.dark-mode otomatik çalışır.       │
   │ tmv2-* isim-alanına DOKUNULMAZ (ayrı namespace).                   │
   └────────────────────────────────────────────────────────────────┘
   ================================================================= */

/* -----------------------------------------------------------------
   Yerel token köprüsü — yeni bir paralel sistem AÇMAZ; mevcut
   canonical --tm-* token'larına bağlanır. tokens.css yoksa (izole
   fixture) fallback literal'ler devreye girer.
   ----------------------------------------------------------------- */
:root {
  /* Tek max-width kaynağı (opt-in --constrained modifier'ında kullanılır) */
  --tm-page-max: var(--tm-content-max, 1280px);

  /* Yatay yan boşluk — sayfa shell'i (.tmv2-page-body) zaten gutter verir;
     .tm-page-content standalone kullanımda bu değeri kullanır. */
  --tm-page-gutter: var(--tm-page-padding-x, 1.5rem);

  /* Dikey ritim */
  --tm-page-section-gap: var(--tm-section-card-gap, var(--tm-section-gap, 1.25rem));
  --tm-page-content-gap: var(--tm-section-card-gap, var(--tm-section-gap, 1.25rem));
  --tm-page-card-gap:    var(--tm-card-gap, 1rem);

  /* Kart grid minimum kolon genişliği (auto-fit minmax) */
  --tm-card-grid-min: 240px;

  /* Yüzey / kenar (tablo/kart sarmalları) */
  --tm-page-surface: var(--tm-surface, #ffffff);
  --tm-page-border:  var(--tm-border, #e4e4e7);
  --tm-page-radius:  var(--tm-radius-card, 12px);
  --tm-page-shadow:  var(--tm-card-shadow, var(--tm-shadow-xs, 0 1px 2px rgba(9,9,11,.04)));
}

/* =================================================================
   .tm-page — sayfa kök konteyneri
   -----------------------------------------------------------------
   v2/layout.css zaten .tm-page için display:flex/column + gap tanımlar.
   Burada YALNIZ ADDITIVE güvenceler: box-sizing, min-width:0 (grid/flex
   taşma engeli) ve yatay-overflow=0. Mevcut layout stilini EZMEZ.
   ================================================================= */
.tm-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Yatay taşma güvencesi — hiçbir çocuk viewport'u yatayda taşırmaz. */
  max-width: 100%;
  overflow-x: clip; /* clip: scroll oluşturmaz ama taşmayı keser */
}

/* Kutu-modeli tüm alt öğelere yayılsın (çift padding kaynaklı taşma engeli) */
.tm-page,
.tm-page *,
.tm-page *::before,
.tm-page *::after {
  box-sizing: border-box;
}

/* Opt-in: içeriği tek, tutarlı max-width'e ortala.
   Varsayılan .tm-page shell genişliğini korur (mevcut geniş sayfalar
   etkilenmez); yalnız <div class="tm-page tm-page--constrained"> ekleyen
   sayfa okunabilir max-width'e girer. */
.tm-page--constrained {
  max-width: var(--tm-page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Standalone kullanım (shell gutter'ı olmayan bağlam) için yan boşluk. */
.tm-page--gutter {
  padding-left: var(--tm-page-gutter);
  padding-right: var(--tm-page-gutter);
}

/* =================================================================
   .tm-page-header — tek sayfa başlığı bölgesi
   -----------------------------------------------------------------
   v2/layout.css .tm-page-header'ı (flex/space-between/wrap) + __title /
   __subtitle / __actions / __title-group alt-parçalarını sağlar. Burada
   ADDITIVE: box-sizing + tam genişlik + min-width:0 (uzun başlık taşması).
   Alt-parça tipografisi mevcut layout.css'ten gelir → EZİLMEZ.
   ================================================================= */
.tm-page-header {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.tm-page-header__title-group {
  min-width: 0; /* uzun başlık kesme/wrap için */
}

/* Uzun başlıklar taşmasın (mevcut renk/boyut layout.css'ten). */
.tm-page-header__title {
  overflow-wrap: anywhere;
}

.tm-page-header__actions {
  flex-shrink: 0; /* aksiyon slotu daralmasın, gerekirse alt satıra sarsın */
}

/* Başlık üstü küçük etiket (opsiyonel, macro tm_page_header eyebrow=...) */
.tm-page-header__eyebrow {
  font-size: var(--tm-text-xs, 0.75rem);
  font-weight: var(--tm-weight-semibold, 600);
  letter-spacing: var(--tm-tracking-wide, 0.04em);
  text-transform: uppercase;
  color: var(--tm-text-muted, #71717a);
}

/* Bölüm başlığı sağ aksiyon slotu (macro tm_section actions=...) */
.tm-section__actions {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2, 0.5rem);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* =================================================================
   .tm-page-content — içerik bölgesi
   -----------------------------------------------------------------
   YENİ. Başlık altındaki içerik akışını dikey ritimle sarar. .tm-page
   zaten kendi gap'ini verir; .tm-page-content, başlık + içerik ayrımını
   netleştirmek isteyen ya da .tm-page dışında kullanan sayfalar için
   bağımsız bir sarmalayıcıdır.
   ================================================================= */
.tm-page-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--tm-page-content-gap);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* =================================================================
   .tm-section — bölüm sarmalı
   -----------------------------------------------------------------
   v2/layout.css .tm-section'ı (flex/column + gap) + __header/__title
   sağlar. ADDITIVE: box-sizing + tam genişlik + min-width:0.
   ================================================================= */
.tm-section {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* =================================================================
   .tm-card-grid — responsive kart grid
   -----------------------------------------------------------------
   YENİ. auto-fit minmax → kolon sayısı içerik genişliğine göre otomatik;
   mobilde tek kolona düşer. Minimum kolon genişliği --tm-card-grid-min
   ile ayarlanır (varsayılan 240px).
   ================================================================= */
.tm-card-grid {
  box-sizing: border-box;
  display: grid;
  gap: var(--tm-page-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--tm-card-grid-min), 1fr));
  width: 100%;
  min-width: 0;
}

/* min-width ölçek varyantları (opt-in) */
.tm-card-grid--sm { --tm-card-grid-min: 180px; }
.tm-card-grid--lg { --tm-card-grid-min: 320px; }

/* Çok dar viewport'ta minmax alt-sınırı taşmasın → garantili tek kolon. */
@media (max-width: 480px) {
  .tm-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   .tm-table-shell — tablo sarmalı
   -----------------------------------------------------------------
   YENİ. Geniş tabloları yatayda güvenli scroll'a alır (overflow-x:auto),
   sayfayı yatayda TAŞIRMAZ. Opsiyonel yapışkan başlık modifier'ı.
   ================================================================= */
.tm-table-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  /* iOS momentum scroll */
  -webkit-overflow-scrolling: touch;
  background: var(--tm-page-surface);
  border: 1px solid var(--tm-page-border);
  border-radius: var(--tm-page-radius);
  box-shadow: var(--tm-page-shadow);
}

/* İçerideki tablo sarmalayıcıyı doldursun; küçük ekranda min-width ile
   scroll tetiklensin (hücreler ezilmesin). */
.tm-table-shell > table {
  width: 100%;
  border-collapse: collapse;
}

/* Opsiyonel: yapışkan başlık — dikey scroll'da th sabit kalır.
   max-height sayfa tarafından belirlenir (örn. style="max-height:480px"). */
.tm-table-shell--sticky {
  overflow-y: auto;
}

.tm-table-shell--sticky > table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tm-page-surface);
}

/* Kenarsız/gölgesiz varyant (kart içine gömülü tablo). */
.tm-table-shell--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* =================================================================
   Genel yatay-taşma güvenceleri (yalnız yeni namespace kapsamında)
   ================================================================= */
.tm-page img,
.tm-page video,
.tm-page canvas,
.tm-page-content img,
.tm-page-content video,
.tm-page-content canvas {
  max-width: 100%;
  height: auto;
}


/* ===== css/tm-states.css ===== */
/* ============================================================================
   TM-STATES — Ortak 4-state bileşen sistemi (loading / success / empty / error)
   ----------------------------------------------------------------------------
   ADDITIVE / OPT-IN: Bu dosya hiçbir mevcut sayfayı etkilemez. Sayfalar
   `.tm-empty`, `.tm-error`, `.tm-loading`, `.tm-table-empty`, `.tm-chart-empty`,
   `.tm-kpi-empty` sınıflarını (veya templates/includes/tm_states.html macro'larını)
   opt-in olarak kullanır.

   TASARIM İLKELERİ
   • Tüm tokenlar kanonik `--tm-*` sisteminden gelir (theme-variables.css).
     Light = :root, Dark = html.dark-mode. CDN yok, hardcoded renk yok.
   • Her state MİN-YÜKSEKLİK'li → container asla 0px'e çökmez (collapse=0).
   • loading → empty → data geçişleri AYNI min-height paylaşır → CLS/pop = 0.
   • Mobilde taşma yok (yatay-overflow = 0), içerik ortalanır, metin sarılır.
   ============================================================================ */

:root {
  /* Bu sistemin kendi ayarlanabilir ölçekleri (tüm state'ler paylaşır → CLS=0). */
  --tm-state-min-h: 240px;          /* panel min yükseklik (collapse önler) */
  --tm-state-min-h-sm: 160px;       /* kompakt (tablo satırı / küçük kart) */
  --tm-state-chart-min-h: 260px;    /* chart placeholder min yükseklik */
  --tm-state-kpi-min-h: 96px;       /* KPI kart min yükseklik */
  --tm-state-icon-size: 48px;
  --tm-state-max-w: 420px;          /* açıklama metni okunur genişlik */
  --tm-state-gap: var(--space-3, 0.75rem);
}

/* ────────────────────────────────────────────────────────────────────────────
   ORTAK PANEL KABUĞU — .tm-empty / .tm-error / .tm-loading hepsi paylaşır.
   Aynı min-height + aynı flex ortalama → state geçişinde zıplama olmaz.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-empty,
.tm-error,
.tm-loading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--tm-state-gap);
  min-height: var(--tm-state-min-h);
  width: 100%;
  max-width: 100%;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Kart içi kullanımda (card-body vb.) kabuk saydam kalır; kendi zemini yok. */
.tm-empty,
.tm-error {
  color: var(--tm-text-secondary, #64748b);
}

/* Kompakt varyant (dar alan / küçük kart). */
.tm-empty--sm,
.tm-error--sm,
.tm-loading--sm {
  min-height: var(--tm-state-min-h-sm);
  padding: var(--space-5, 1.25rem) var(--space-4, 1rem);
}

/* İkon çemberi — anlamsal ton alt-sınıftan gelir. */
.tm-empty__icon,
.tm-error__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tm-state-icon-size);
  height: var(--tm-state-icon-size);
  border-radius: var(--radius-full, 9999px);
  font-size: 24px;
  line-height: 1;
}

.tm-empty__icon svg,
.tm-error__icon svg {
  width: 24px;
  height: 24px;
}

.tm-empty__icon {
  background: var(--tm-primary-soft, var(--primary-50, #e8f4ff));
  color: var(--tm-primary, var(--primary-600, #0163c2));
}

.tm-empty__title,
.tm-error__title {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-semibold, 600);
  color: var(--tm-text-primary, #1e293b);
  line-height: 1.35;
}

.tm-empty__desc,
.tm-error__desc {
  margin: 0;
  max-width: var(--tm-state-max-w);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-normal, 400);
  color: var(--tm-text-secondary, #64748b);
  line-height: 1.55;
}

/* CTA slotu — sayfa istediği butonu (btn btn-primary vb.) yerleştirir. */
.tm-empty__cta,
.tm-error__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-1, 0.25rem);
}

/* ────────────────────────────────────────────────────────────────────────────
   HATA PANELİ — empty benzeri ama error tonu.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-error__icon {
  background: var(--tm-error-bg, var(--error-50, #fef2f2));
  color: var(--tm-error, var(--error-600, #dc2626));
}

.tm-error__title {
  color: var(--tm-error, var(--error-700, #b91c1c));
}

/* Dahili "Tekrar dene" butonu (macro CTA vermezse). */
.tm-error__retry {
  /* .btn/.btn-outline ile birlikte kullanılabilir; tek başına da çalışır. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
}

/* ────────────────────────────────────────────────────────────────────────────
   LOADING PANELİ / SKELETON WRAPPER
   Mevcut skeleton shimmer estetiğiyle uyumlu; min-height ile CLS önler.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-loading {
  gap: var(--space-3, 0.75rem);
}

.tm-loading__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  max-width: var(--tm-state-max-w);
}

.tm-skeleton-bar {
  height: 16px;
  border-radius: var(--radius-md, 6px);
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 0%,
    rgba(148, 163, 184, 0.22) 50%,
    rgba(148, 163, 184, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: tm-skeleton-shimmer 1.4s ease-in-out infinite;
}

.tm-skeleton-bar--title { height: 20px; width: 55%; }
.tm-skeleton-bar--w80 { width: 80%; }
.tm-skeleton-bar--w60 { width: 60%; }
.tm-skeleton-bar--w40 { width: 40%; }

@keyframes tm-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

html.dark-mode .tm-skeleton-bar {
  background: linear-gradient(
    90deg,
    rgba(71, 85, 105, 0.35) 0%,
    rgba(100, 116, 139, 0.45) 50%,
    rgba(71, 85, 105, 0.35) 100%
  );
  background-size: 200% 100%;
}

/* Basit dönen spinner (design-system loading-spinner ile aynı token'lar). */
.tm-loading__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--tm-border-color, var(--secondary-200, #e2e8f0));
  border-top-color: var(--tm-primary, var(--primary-500, #0175e4));
  border-radius: 50%;
  animation: tm-spin 0.8s linear infinite;
}

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

.tm-loading__label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--tm-text-muted, #94a3b8);
}

/* ────────────────────────────────────────────────────────────────────────────
   TABLO BOŞ DURUMU — boş <tbody> yerine düzgün, colspan-full empty-row.
   Kullanım: <tr class="tm-table-empty-row"><td colspan="N">…tm-empty…</td></tr>
   ──────────────────────────────────────────────────────────────────────────── */
.tm-table-empty-row > td,
td.tm-table-empty {
  padding: 0;                       /* iç .tm-empty kendi padding'ini verir */
  border-bottom: none;
  background: transparent;
}

.tm-table-empty-row .tm-empty,
.tm-table-empty-row .tm-error,
.tm-table-empty-row .tm-loading,
td.tm-table-empty .tm-empty,
td.tm-table-empty .tm-error,
td.tm-table-empty .tm-loading {
  min-height: var(--tm-state-min-h-sm);
}

/* Tablo satırlarında skeleton (loading state) için hazır yardımcı. */
.tm-table-skeleton-row > td {
  background: transparent;
  border-top: 1px solid var(--tm-border-light, rgba(148, 163, 184, 0.12));
}

/* ────────────────────────────────────────────────────────────────────────────
   CHART BOŞ DURUMU — chart'ı 0×0 init etmek yerine min-height'lı placeholder.
   Kullanım: chart container'ı .tm-chart-empty ile sar; JS veri yoksa canvas
   yerine bunu gösterir (bkz. tm-states.js TmStates.chartEmpty).
   ──────────────────────────────────────────────────────────────────────────── */
.tm-chart-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--tm-state-gap);
  /* Chart konteynerinin gerçek yüksekliğini miras alır; yoksa min ile korur →
     canvas 0×0 init sorunu (chart.js NaN boyut) engellenir. */
  min-height: var(--tm-state-chart-min-h);
  width: 100%;
  max-width: 100%;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-lg, 8px);
  background: var(--tm-bg-secondary, var(--secondary-50, #f8fafc));
  color: var(--tm-text-secondary, #64748b);
  overflow: hidden;
}

.tm-chart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tm-state-icon-size);
  height: var(--tm-state-icon-size);
  border-radius: var(--radius-full, 9999px);
  background: var(--tm-bg-tertiary, #f1f5f9);
  color: var(--tm-text-muted, #94a3b8);
  font-size: 24px;
}

.tm-chart-empty__icon svg { width: 24px; height: 24px; }

.tm-chart-empty__title {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--tm-text-primary, #1e293b);
}

.tm-chart-empty__desc {
  margin: 0;
  max-width: var(--tm-state-max-w);
  font-size: var(--text-xs, 0.75rem);
  color: var(--tm-text-secondary, #64748b);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────────
   KPI BOŞ DURUMU — "0" / "Veri yok" durumunda kart çökmesin.
   Kullanım: KPI değer alanına .tm-kpi-empty; kart yüksekliği korunur.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-kpi-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1, 0.25rem);
  min-height: var(--tm-state-kpi-min-h);
  width: 100%;
}

.tm-kpi-empty__value {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-bold, 700);
  color: var(--tm-text-muted, #94a3b8);
  line-height: 1.1;
}

.tm-kpi-empty__label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--tm-text-muted, #94a3b8);
}

/* Ortalanmış (grid hücresi merkez) varyant. */
.tm-kpi-empty--center {
  align-items: center;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────────
   GEÇİŞ YARDIMCILARI — TmStates.show() bu data-attribute'u yönetir.
   Aynı konteyner içinde 4 state kardeş dururken min-height paylaşılır → CLS=0.
   ──────────────────────────────────────────────────────────────────────────── */
[data-tm-state-host] {
  position: relative;
}

/* Host içindeki state slotları; aktif olmayan gizlenir. */
[data-tm-state] { display: none; }
[data-tm-state-host][data-tm-active="loading"] [data-tm-state="loading"],
[data-tm-state-host][data-tm-active="empty"]   [data-tm-state="empty"],
[data-tm-state-host][data-tm-active="error"]   [data-tm-state="error"],
[data-tm-state-host][data-tm-active="data"]    [data-tm-state="data"] {
  display: block;
}

/* İlk boyanmada (JS gelmeden) host'un çökmesini engelle. */
[data-tm-state-host]:not([data-tm-active]) {
  min-height: var(--tm-state-min-h-sm);
}

/* Yumuşak giriş — reduced-motion'da kapanır. */
[data-tm-state].tm-fade-in { animation: tm-state-fade 0.2s ease-out; }
@keyframes tm-state-fade { from { opacity: 0; } to { opacity: 1; } }

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — mobilde daha kompakt, taşma yok.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --tm-state-min-h: 200px;
    --tm-state-chart-min-h: 220px;
  }
  .tm-empty,
  .tm-error,
  .tm-loading {
    padding: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
  }
  .tm-empty__desc,
  .tm-error__desc,
  .tm-chart-empty__desc {
    max-width: 100%;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   ERİŞİLEBİLİRLİK — hareketi azalt.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tm-skeleton-bar,
  .tm-loading__spinner,
  [data-tm-state].tm-fade-in {
    animation: none;
  }
}


/* ===== css/mobile-account-fixes.css ===== */
/* ============================================================================
   mobile-account-fixes.css — sadece test edilmiş, kanıtlanmış mobile UX
   sorunlarını hedef alan dar scope'lu fix'ler.

   Yöntem: önce-sonra Playwright screenshot ile her satırın etkisi doğrulandı.

   Kapsam (yalnızca @media (max-width: 768px)):
     1. Floating destek/whatsapp/feedback widget'ı içerik üstüne biniyordu →
        gizle (bottom-nav zaten erişim sağlıyor).
     2. Hesap navigation altında içerik kesiliyordu → padding-bottom yeterli.
     3. .account-welcome-card "beyaz text + beyaz zemin" olduğu için invisible
        kalıyordu → CSS variable'lar fallback'li doğrudan uygula, body class
        scoping ile yüksek specificity sağla.

   Bu dosya base.html sonunda yüklenir; tek satırlı page kodu değişikliği yok.
   ============================================================================ */

@media (max-width: 768px) {
  /* ---- 1. Floating support/wa/feedback widget mobilde gizle ----
     Kullanıcı için bottom-tab-bar'da Bildirimler + sayfa içi destek linkleri
     erişimi sağlıyor. 4 sticky FAB form input/toggle/CTA üzerine biniyordu
     (test edildi: profile TC-no input, notifications toggle, subscription
     "Süresiz Kullanım" rozeti). */
  /* 2026-09-13: yalnız HESAP sayfalarında (alt tab-bar'ın olduğu yerde) gizle — kapsamsız kural Canlı/Genel Bakış/
     Siparişler'de de destek/WhatsApp erişimini kaldırıyordu (gerçek-veri incelemesi). Seçiciler 2. kuralla aynı. */
  body:is(.tmh-6dc253cf, :not(*) .account-navigation--rail) .support-floating-buttons,
  body:is(.tmh-b9920366, :not(*) #accountNavigation) .support-floating-buttons,
  body:is(.tmh-a6188157, :not(*) .account-page-wrapper) .support-floating-buttons {
    display: none !important;
  }

  /* ---- 2. Hesap nav alt sticky tab-bar yüksekliği için içerik dolgusu ----
     Bottom nav ~78-86px + safe-area-inset → 110px content padding. Yoksa
     kullanıcı son satırı (Account: "Entegrasyon/Pazaryeri" satırı) göremez. */
  body:is(.tmh-6dc253cf, :not(*) .account-navigation--rail) main#mainContent.main-content,
  body:is(.tmh-b9920366, :not(*) #accountNavigation) main#mainContent.main-content,
  body:is(.tmh-a6188157, :not(*) .account-page-wrapper) main#mainContent.main-content {
    /* Bottom-tab-bar gerçek yüksekliği ölçüldü: ~85-92px + drop-shadow + safe
       area + nefes alanı. 130px+safe-area = "Entegrasyon/Pazaryeri" gibi son
       satır kart içeriğinin tam görünmesini garanti eder (test edildi). */
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- 3. account-welcome-card "invisible" sorunu ----
     CSS variable resolved ama daha düşük specificity'li başka bir kural
     veya cache nedeniyle uygulanmıyordu. Burada yüksek specificity +
     hex fallback ile garanti et. tm-account-hero-gradient yoksa Trendyol
     primary palette ile fallback. */
  /* ID-specificity yenmek için #tmv2App scope'u dahil — #tmv2App .card kuralı
     specificity (1,1,0) ile beyaz arkaplan veriyordu, class-only kurallar
     yenemiyordu. Burada #tmv2App + .account-welcome-card iki kez
     (specificity-boost trick) ile yenilebilir bir kural. */
  #tmv2App .account-welcome-card.account-welcome-card,
  #tmv2App .account-welcome-card.account-welcome-card.card {
    background: var(
      --tm-account-hero-gradient,
      linear-gradient(135deg, #0163c2 0%, #0175e4 52%, #73b7fe 100%)
    ) !important;
    background-color: var(--color-primary, #0175e4) !important;
    box-shadow: 0 8px 26px rgba(1, 117, 228, 0.22) !important;
    border: none !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card > .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tm-fg-on-brand, #ffffff) !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card h4,
  #tmv2App .account-welcome-card.account-welcome-card h5,
  #tmv2App .account-welcome-card.account-welcome-card h6 {
    color: var(--tm-fg-on-brand, #ffffff) !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card .text-muted,
  #tmv2App .account-welcome-card.account-welcome-card .text-muted.small,
  #tmv2App .account-welcome-card.account-welcome-card p {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card .account-welcome-card__icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
  }
  #tmv2App .account-welcome-card.account-welcome-card .account-welcome-card__icon i {
    color: #ffffff !important;
  }
}


/* ===== css/ui-polish-2026-06-04.css ===== */
/* ============================================================
   UI Polish — 2026-06-04
   Cross-page görsel cila: dokuz kritik sayfada density azaltma,
   focus/hover tutarlılığı, mobile overflow koruması, collapsible
   detay alanları için utility'ler.

   Yaklaşım: sınıf bazlı, opt-in. Mevcut bileşenleri ezmez,
   sadece yardımcı modifier'lar sağlar. Phase 1 transition
   bridge (tmNavigateTo) ile çakışma yok.

   Etkilenen sayfalar:
   - dashboard (overview/live/orders)
   - xml_field_mapping, xml_category_mapping, xml_sync,
     xml_sources, xml_add_source
   - buybox_control, commission_analysis, profit_margin_list
   ============================================================ */

/* ------------------------------------------------------------
   1. <details>/<summary> polish — "Daha fazla göster" kalıpları
   Mevcut HTML <details> elementlerinde tutarlı imleç + erişimli
   hover. Sayfalarda teknik detayları collapsible'a taşırken
   tek tip görünüm sağlar.
   ------------------------------------------------------------ */
.tm-polish details > summary,
details.tm-polish-collapsible > summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  list-style: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.tm-polish details > summary::-webkit-details-marker,
details.tm-polish-collapsible > summary::-webkit-details-marker {
  display: none;
}
.tm-polish details > summary::before,
details.tm-polish-collapsible > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
  color: #0163c2;
  transition: transform 0.15s ease;
  margin-right: 0.25rem;
}
.tm-polish details[open] > summary::before,
details.tm-polish-collapsible[open] > summary::before {
  content: "−";
}
.tm-polish details > summary:hover,
details.tm-polish-collapsible > summary:hover {
  background: #eff6ff;
  color: #0f172a;
  border-color: #bfdbfe;
}
.tm-polish details > summary:focus-visible,
details.tm-polish-collapsible > summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.tm-polish details[open] > summary,
details.tm-polish-collapsible[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ------------------------------------------------------------
   2. Long-text truncate utilities
   Tablolarda ve kart başlıklarında uzun metni güvenli kırpar.
   Tooltip için title attribute eklenmesi önerilir.
   ------------------------------------------------------------ */
.tm-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tm-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.tm-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* ------------------------------------------------------------
   3. Mobile table/grid overflow koruması
   xml_sync, buybox_control, commission_analysis gibi geniş
   tablolar mobile 390x844'te yatay scroll'a düşüyor; sarmalayıcı
   sınıfı uygulanan yerlerde scroll içeride tutulur ve gövde
   taşmaz. Sayfa template'lerinde <div class="tm-table-scroll">
   içine sarın.
   ------------------------------------------------------------ */
.tm-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.tm-table-scroll::-webkit-scrollbar {
  height: 8px;
}
.tm-table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.tm-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ------------------------------------------------------------
   4. Focus ring tutarlılığı
   tabindex'li info chip ve interaktif span'lar tarayıcı default
   outline'ı yerine birleşik bir focus ring kullanır.
   ------------------------------------------------------------ */
.tm-focus-ring,
button.tm-focus-ring:focus-visible,
a.tm-focus-ring:focus-visible,
[role="button"].tm-focus-ring:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* ------------------------------------------------------------
   5. Secondary action grubu — düğme density azaltma
   Birden çok ikincil aksiyonu kompakt bir grup içine alır.
   Buybox toolbar, dashboard live header gibi yerlerde
   .tm-secondary-actions sınıfı uygulanır.
   ------------------------------------------------------------ */
.tm-secondary-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}
.tm-secondary-actions > button,
.tm-secondary-actions > a {
  background: transparent;
  border: 1px solid transparent;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tm-secondary-actions > button:hover,
.tm-secondary-actions > a:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
}

/* ------------------------------------------------------------
   6. KPI density helper'ı
   Mobile'da KPI gridini 2 sütuna düşürür (5/4 sütun ekrana
   sığmıyorsa). Overview tab'ında tm-kpi-grid var; bu sınıf
   isteğe bağlı override sağlar.
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .tm-kpi-grid--compact-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .tm-kpi-grid--compact-mobile .tm-kpi-card__value {
    font-size: 1rem !important;
  }
}

/* ------------------------------------------------------------
   7. Skeleton shimmer animasyon kalitesi
   Mevcut .skeleton sınıfı bazı sayfalarda statik gri kalıyor.
   .tm-skeleton-shimmer modifier'ı pürüzsüz nabız efekti ekler.
   ------------------------------------------------------------ */
@keyframes tmPolishShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.tm-skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(241, 245, 249, 0.6) 0%,
    rgba(226, 232, 240, 0.95) 50%,
    rgba(241, 245, 249, 0.6) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: tmPolishShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tm-skeleton-shimmer {
    animation: none;
    background: rgba(226, 232, 240, 0.7);
  }
}

/* ------------------------------------------------------------
   8. Disabled "Coming soon" chip'lerini sustur
   N11 "Yakında" gibi disabled noise pill'lerini visually
   downgrade eder (kaldırılamadığı yerlerde). Buybox'ta zaten
   markup'tan kaldırıldı; bu fallback diğer sayfalar için.
   ------------------------------------------------------------ */
.tm-polish [disabled].mp-pill,
.tm-polish .btn-coming-soon[disabled] {
  opacity: 0.45;
  filter: grayscale(0.85);
}

/* ------------------------------------------------------------
   9. Page hero kompaktlaştırma yardımcısı
   xml_field_mapping zaten kendi .field-mapping-page-hero CSS'ini
   tanımlıyor; bu sınıf hero KPI box'ı için varsayılan kompakt
   ölçüleri sağlar (opt-in).
   ------------------------------------------------------------ */
.tm-hero-compact {
  padding: 0.875rem 1rem !important;
}
.tm-hero-compact h1,
.tm-hero-compact .tm-hero-title {
  font-size: 1.125rem !important;
  line-height: 1.25 !important;
}
.tm-hero-compact p,
.tm-hero-compact .tm-hero-subtitle {
  margin-top: 0.25rem !important;
  font-size: 0.8125rem !important;
}

/* ------------------------------------------------------------
   10. Smooth fade for content that appears post-load
   Field Mapping → Kategori Eşleştirme transition sırasında
   içerik render'ı için yumuşak fade. Phase 1 overlay bridge'i
   ile uyumlu — overlay düşerken içerik hızlı fade-in yapar.
   ------------------------------------------------------------ */
@keyframes tmPolishFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tm-fade-in {
  animation: tmPolishFadeIn 0.22s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .tm-fade-in { animation: none; }
}

/* =================================================================
   PR-2 2026-06-05: Phase 2 user-page redesign utilities
   --------------------------------------------------------------
   4 cross-page pattern: toolbar overflow disclosure, filter
   bar collapsible, banner queue limiter, segmented tab look.
   Sayfa-bazlı scope'lu CSS dosyaları bu utility'leri tüketir.
   ================================================================= */

/* 11. Toolbar overflow "Daha fazla" — birincil aksiyon görünür kalır,
       ikincil aksiyonlar <details> + summary "Daha fazla" altına. */
.tm-actions-overflow {
  display: inline-block;
  margin: 0;
  position: relative;
}
.tm-actions-overflow > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tm-actions-overflow > summary::-webkit-details-marker { display: none; }
.tm-actions-overflow > summary::before {
  content: "+";
  font-weight: 700;
  color: #0163c2;
  width: 0.85em;
  display: inline-block;
}
.tm-actions-overflow[open] > summary::before { content: "−"; }
.tm-actions-overflow > summary:hover {
  background: #eff6ff;
  color: #0f172a;
  border-color: #bfdbfe;
}
.tm-actions-overflow > summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.tm-actions-overflow__body {
  position: absolute;
  z-index: 50;
  right: 0;
  margin-top: 6px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  white-space: nowrap;
}

/* 12. Filter bar collapse — varsayılan açık (loaded state), kapanabilir.
       Boş veri durumunda ilgili Jinja gate gizler; bu, "veri var ama
       kullanıcı sadeleştirmek istiyor" senaryosu için inline disclosure. */
.tm-filters-collapse {
  margin: 0 0 0.75rem;
}
.tm-filters-collapse > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.tm-filters-collapse > summary::-webkit-details-marker { display: none; }
.tm-filters-collapse > summary::before {
  content: "▾";
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}
.tm-filters-collapse[open] > summary::before { transform: rotate(180deg); }
.tm-filters-collapse > summary:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.tm-filters-collapse__body {
  padding-top: 0.75rem;
}

/* 13. Banner queue — birden çok conditional banner üst üste açıldığında
       sadece ilk 2 görünür (3+ gizli). DOM'da hepsi olabilir; CSS sınırlar.
       Wrapper element <div class="tm-banner-queue"> içine taşınır. */
.tm-banner-queue {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tm-banner-queue > *:nth-child(n+3) {
  display: none;
}
/* Override: kullanıcı "Daha fazla göster" tıkladığında bir parent
   .tm-banner-queue--all sınıfı ekleyebilirsiniz. */
.tm-banner-queue--all > *:nth-child(n+3) {
  display: revert;
}

/* 14. Segmented tabs — eski Bootstrap pill nav yerine modern
       segmented control görünümü. Tab container'a opt-in class. */
.tm-segmented-tabs {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
  position: relative;
}
.tm-segmented-tabs > * {
  border: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap;
}
.tm-segmented-tabs > .active,
.tm-segmented-tabs > [aria-pressed="true"],
.tm-segmented-tabs > .is-active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.tm-segmented-tabs > *:hover:not(.active):not([aria-pressed="true"]):not(.is-active) {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #0f172a !important;
}
.tm-segmented-tabs > *:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .tm-segmented-tabs {
    flex-wrap: wrap;
    width: 100%;
  }
  .tm-segmented-tabs > * {
    flex: 1 0 calc(50% - 4px);
    text-align: center;
  }
}

/* 15. PR #1728 revision: real first-fold reductions for failed/partial pages. */
.platform-dist-metric-toggle--legacy,
.tm-live-page .tm-live-segs--legacy,
#tmLivePerformancePage .tm-live-segs--legacy,
.tm-insights-filter-buttons--legacy,
.orders-tab-buttons--legacy,
.xml-sync-filter-btns-legacy {
  display: none !important;
}

.platform-dist-metric-select,
.tm-live-metric-select > select,
.tm-insights-filter-select,
.orders-tab-select,
.xml-sync-filter-select {
  min-height: 34px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 2rem 0.35rem 0.7rem;
}

.orders-tab-select-wrap,
.platform-dist-metric-select-wrap,
.xml-sync-filter-select-wrap,
.tm-live-metric-select,
.tm-insights-filter-select-wrap,
.valid-status-select-wrap {
  display: inline-flex;
  align-items: center;
}
.valid-status-buttons--legacy {
  display: none !important;
}
.valid-status-select {
  min-height: 36px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.4rem 2rem 0.4rem 0.75rem;
}

.orders-table-sort-btn {
  /* FIX 2026-07-09: 2026-06-04 ui-polish redesign'ı bu butonu display:none yaptı
     (planlanan yeni .orders-sort-host/.orders-sort-label markup'ına geçiş içindi) AMA
     template hâlâ .orders-table-sort-btn butonunu kullanıyor → İade/İptal/Geçerli
     SORTABLE başlıkları (Tarih/Adet/Satış Fiyatı/Alış Fiyatı/Net Zarar/İptal tipi/Zarar)
     ~5 haftadır GÖRÜNMÜYORDU (kullanıcı "sütun adları yok" — günlerdir). Butonu geri
     görünür kıl: metin + sort ikonu + sort onclick zaten var/çalışıyor. Her kolon YA
     span YA buton (çift değil) → duplikasyon yok. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
}
.orders-sort-host {
  cursor: pointer;
  user-select: none;
}
.orders-sort-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.orders-filter-bar .valid-status-filters,
.orders-filter-bar .valid-status-filters + .d-flex,
.orders-filter-bar .orders-actions-more {
  align-items: center;
}
.orders-filter-bar .valid-status-btn,
.orders-filter-bar .btn-baklava-outline,
.orders-filter-bar .orders-actions-more > summary,
.orders-filter-bar .orders-status-collapse > summary {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.orders-filter-bar .orders-status-collapse,
.orders-filter-bar .orders-actions-more {
  display: inline-flex;
  align-items: center;
}
.orders-filter-bar .orders-status-collapse > summary {
  margin: 0;
  white-space: nowrap;
}
.orders-filter-bar .valid-status-count {
  line-height: 1;
}
@media (max-width: 767.98px) {
  .orders-filter-bar > .d-flex {
    align-items: stretch !important;
  }
  .orders-filter-bar .valid-status-filters,
  .orders-filter-bar .valid-status-filters + .d-flex {
    width: 100%;
  }
  .orders-filter-bar .valid-status-btn,
  .orders-filter-bar .orders-status-collapse,
  .orders-filter-bar .orders-status-collapse > summary,
  .orders-filter-bar .btn-baklava-outline,
  .orders-filter-bar .orders-actions-more,
  .orders-filter-bar .orders-actions-more > summary {
    flex: 1 1 auto;
  }
}

.tm-live-filterdrawer {
  margin: 0 0 0.75rem;
}
.tm-live-filterdrawer > summary {
  margin-left: 1rem;
}
.tm-live-filterdrawer .tm-live-filterbar {
  display: flex;
}

.tm-live-chartbox,
.tm-live-doughnut,
.tm-live-rank,
.tm-action-insights,
.tm-insights-summary {
  min-height: 260px;
}
.tm-live-doughnut__chart {
  min-height: 220px;
}
.tm-live-rank {
  contain: layout paint;
}
@media (max-width: 767.98px) {
  .tm-live-chartbox,
  .tm-live-doughnut,
  .tm-live-rank,
  .tm-action-insights,
  .tm-insights-summary {
    min-height: 220px;
  }
  .tm-live-main-grid__sidebar {
    min-height: 96px;
  }
  .tm-live-page .tm-live-pulseline {
    display: none !important;
  }
  .tm-live-filterdrawer .tm-live-filterbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.tm-live-page .tm-live-orders-card {
  order: 30;
}
.tm-live-page .tm-live-main-grid {
  order: 40;
}

.xml-sync-tech-details {
  margin-bottom: 0;
}
.xml-sync-tech-details .xml-sync-stats-row {
  display: flex;
}
.xml-sync-row-more {
  width: 100%;
  text-align: left;
}
.xml-sync-row-more > summary {
  width: 100%;
  justify-content: center;
}
.xml-sync-row-more .tm-actions-overflow__body {
  left: auto;
  right: 0;
}
.xml-sync-filter-select {
  max-width: 12rem;
}

#overviewTab .tm-overview-extra-kpi {
  display: inline-flex;
  width: auto;
  margin-top: 0.75rem;
}
#overviewTab .tm-overview-extra-kpi > summary {
  min-height: 36px;
  padding: 0.45rem 0.8rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: none;
}
#overviewTab .tm-overview-extra-kpi > summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
#overviewTab .tm-overview-extra-kpi__body {
  min-width: min(22rem, calc(100vw - 2rem));
}
@media (max-width: 767.98px) {
  #overviewTab .tm-overview-extra-kpi {
    display: flex;
    width: 100%;
  }
  #overviewTab .tm-overview-extra-kpi > summary {
    width: 100%;
  }
}

/* Controlled user-shell compacting: keep profile/notifications intact; reduce
   secondary icon strip on dense merchant work pages. */
body:is(.tmh-54330f0e, :not(*) .tmv2-dashboard) .tmv2-header-status,
body:is(.tmh-ee415756, :not(*) .tmv2-overview-tab-inner) .tmv2-header-status,
body:is(.tmh-7c8e0b17, :not(*) .tm-live-page) .tmv2-header-status,
body:is(.tmh-43c09866, :not(*) .xml-sync-page) .tmv2-header-status {
  display: none !important;
}
body:is(.tmh-ee415756, :not(*) .tmv2-overview-tab-inner) #tmLivePromoBanner {
  display: none !important;
}
@media (max-width: 767.98px) {
  body:is(.tmh-54330f0e, :not(*) .tmv2-dashboard) #languageMenuToggle,
  body:is(.tmh-54330f0e, :not(*) .tmv2-dashboard) #darkModeToggle,
  body:is(.tmh-54330f0e, :not(*) .tmv2-dashboard) #whatsNewToggle,
  body:is(.tmh-ee415756, :not(*) .tmv2-overview-tab-inner) #languageMenuToggle,
  body:is(.tmh-ee415756, :not(*) .tmv2-overview-tab-inner) #darkModeToggle,
  body:is(.tmh-ee415756, :not(*) .tmv2-overview-tab-inner) #whatsNewToggle,
  body:is(.tmh-7c8e0b17, :not(*) .tm-live-page) #languageMenuToggle,
  body:is(.tmh-7c8e0b17, :not(*) .tm-live-page) #darkModeToggle,
  body:is(.tmh-7c8e0b17, :not(*) .tm-live-page) #whatsNewToggle,
  body:is(.tmh-43c09866, :not(*) .xml-sync-page) #languageMenuToggle,
  body:is(.tmh-43c09866, :not(*) .xml-sync-page) #darkModeToggle,
  body:is(.tmh-43c09866, :not(*) .xml-sync-page) #whatsNewToggle {
    display: none !important;
  }
}


/* ===== css/r5a-saas-polish-2026-06-06.css ===== */
/* R5-A — Gelirup-inspired SaaS polish: tokens + buttons + transitions.
   2026-06-06 — Trendmetrik markası korunur (mavi accent); gelirup'tan
   premium derinlik hissi (panel-soft, gradient surface, hover glow,
   smooth transition, dark toolbar button system) alınır.

   Yalnızca dark theme (html.dark-mode / [data-theme="dark"]) için
   aktiftir. Light theme davranışı 0 değişim. */
/* DS-SCOPE EXCLUSION — REGISTERED DEBT (2026-09-13, design(live) r4).
   Rules carrying `:where(:not(.tm-ds *))` stand down inside pages that opted
   into the design system (<main class="tm-ds">); `:where()` keeps their
   specificity unchanged, so pages without .tm-ds resolve identically. The
   `.tm-card` background/border/shadow + hover + fade-up-entrance rules below
   painted a THIRD dark surface tone (--r5a-panel #131a25) on top of
   ds-primitives.css's `--tm-bg-surface` (#0b0f14) — measured via
   reference-extract.cjs on the Canlı Performans dark screenshot (6 distinct
   surface tones, target 1 + accent). */

/* ════════════════════════════════════════════════════════════════════
   1) TOKEN SİSTEMİ — gelirup-style premium dark
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode,
[data-theme="dark"] {
  /* Surface katmanları — düz lacivert yerine derinlikli stack */
  --r5a-bg:           #0a0e16;   /* en derin zemin */
  --r5a-bg-soft:      #0f141d;   /* page background gradient stop */
  --r5a-panel:        #131a25;   /* kart yüzeyi */
  --r5a-panel-soft:   #1a2230;   /* hover/nested panel */
  --r5a-panel-raised: #1f2837;   /* modal/dropdown */

  /* Border — düz #1a1a → glow-ready */
  --r5a-border:       rgba(148, 163, 184, 0.08);   /* default kart border */
  --r5a-border-hover: rgba(16, 185, 129, 0.30);    /* accent green hover glow */
  --r5a-border-focus: rgba(1, 117, 228, 0.45);     /* mavi focus ring */

  /* Accent renkler — Trendmetrik mavi korunur, gelirup canlılığı eklenir */
  --r5a-accent-blue:    #0175e4;          /* Trendmetrik brand */
  --r5a-accent-blue-soft: rgba(1,117,228,.12);
  --r5a-accent-green:   #10b981;          /* canlı yeşil — success/positive */
  --r5a-accent-green-soft: rgba(16,185,129,.14);
  --r5a-accent-orange:  #fb923c;          /* uyarı/action */
  --r5a-accent-orange-soft: rgba(251,146,60,.14);
  --r5a-accent-red:     #ef4444;          /* risk/negatif */
  --r5a-accent-red-soft: rgba(239,68,68,.14);
  --r5a-accent-purple:  #a78bfa;          /* opsiyonel ikinci accent */

  /* Tipografi */
  --r5a-text-primary:  #e8edf4;
  --r5a-text-secondary:#9aa5b8;
  --r5a-text-muted:    #6b7689;

  /* Shadow — flat değil, soft+layered */
  --r5a-shadow-card:  0 1px 2px rgba(0,0,0,.20), 0 0 0 1px rgba(148,163,184,.04);
  --r5a-shadow-hover: 0 6px 18px rgba(0,0,0,.32), 0 0 0 1px var(--r5a-border-hover);
  --r5a-shadow-glow:  0 0 0 3px rgba(16,185,129,.18);

  /* Motion */
  --r5a-transition-fast:   180ms cubic-bezier(0.4, 0, 0.2, 1);
  --r5a-transition-medium: 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════════
   2) PAGE / PANEL SURFACE — düz lacivert yerine derinlikli gradient
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode body,
[data-theme="dark"] body {
  /* Canonical token, flat — shorthand'ı kaldırıp explicit bg-color set ediyoruz
   * ki bg-color "transparent"a sıfırlanmasın (audit 2026-06-11) */
  background-color: var(--color-bg) !important;
  background-image: none !important;
  background-attachment: fixed !important;
}

/* Kart yüzeyleri — gelirup-style soft elevation */
html.dark-mode .tm-card:where(:not(.tm-ds *)),
html.dark-mode .tmv2-panel,
html.dark-mode .dashboard-widget-inner,
html.dark-mode .bg-white,
html.dark-mode .ai-stat-card,
html.dark-mode .tm-cost-breakdown,
html.dark-mode .overview-platform-dist,
[data-theme="dark"] .tm-card:where(:not(.tm-ds *)),
[data-theme="dark"] .tmv2-panel,
[data-theme="dark"] .dashboard-widget-inner,
[data-theme="dark"] .overview-platform-dist {
  background: var(--r5a-panel) !important;
  border: 1px solid var(--r5a-border) !important;
  box-shadow: var(--r5a-shadow-card) !important;
  transition: background var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              box-shadow var(--r5a-transition-medium),
              transform var(--r5a-transition-fast) !important;
}

/* Card hover — subtle lift + border glow (kullanıcı premium hissi) */
html.dark-mode .tm-card:hover:where(:not(.tm-ds *)),
html.dark-mode .tmv2-panel:hover,
html.dark-mode .dashboard-widget-inner:hover,
html.dark-mode .ai-stat-card:hover,
html.dark-mode .overview-platform-dist:hover,
[data-theme="dark"] .tm-card:hover:where(:not(.tm-ds *)),
[data-theme="dark"] .tmv2-panel:hover,
[data-theme="dark"] .dashboard-widget-inner:hover,
[data-theme="dark"] .overview-platform-dist:hover {
  background: var(--r5a-panel-soft) !important;
  border-color: var(--r5a-border-hover) !important;
  box-shadow: var(--r5a-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* KPI kartları — daha kontrollü (overview/live) */
html.dark-mode .tm-kpi-card,
html.dark-mode .tm-kpi,
[data-theme="dark"] .tm-kpi-card,
[data-theme="dark"] .tm-kpi {
  background: linear-gradient(180deg, var(--r5a-panel) 0%, var(--r5a-panel-soft) 100%) !important;
  border: 1px solid var(--r5a-border) !important;
  transition: transform var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              box-shadow var(--r5a-transition-medium) !important;
}
html.dark-mode .tm-kpi-card:hover,
html.dark-mode .tm-kpi:hover,
[data-theme="dark"] .tm-kpi-card:hover,
[data-theme="dark"] .tm-kpi:hover {
  border-color: var(--r5a-border-hover) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.30), 0 0 0 1px var(--r5a-border-hover) !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════════════════════════════════
   3) BUTTON SYSTEM — kaba beyaz Tools/Filtreler son
   ════════════════════════════════════════════════════════════════════ */

/* Reusable utility classes (yeni component'lar için) */
.tm-btn-r5a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font: 600 13px/1.2 'Inter', system-ui, sans-serif;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              color var(--r5a-transition-fast),
              transform var(--r5a-transition-fast);
  text-decoration: none; white-space: nowrap;
}
.tm-btn--toolbar-r5a {
  background: var(--r5a-panel-soft);
  border-color: var(--r5a-border);
  color: var(--r5a-text-primary);
}
.tm-btn--toolbar-r5a:hover {
  background: var(--r5a-panel-raised);
  border-color: var(--r5a-border-hover);
  color: var(--r5a-accent-green);
}
.tm-btn--ghost-r5a {
  background: transparent;
  border-color: transparent;
  color: var(--r5a-text-secondary);
}
.tm-btn--ghost-r5a:hover {
  background: var(--r5a-panel-soft);
  color: var(--r5a-text-primary);
}
.tm-btn--icon-r5a {
  width: 36px; height: 36px; padding: 0;
  justify-content: center;
  background: var(--r5a-panel-soft);
  border-color: var(--r5a-border);
  color: var(--r5a-text-secondary);
  border-radius: 8px;
}
.tm-btn--icon-r5a:hover {
  border-color: var(--r5a-border-hover);
  color: var(--r5a-accent-green);
  transform: translateY(-1px);
}
.tm-chip-r5a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font: 600 12px/1.2 'Inter', system-ui, sans-serif;
  border-radius: 999px;
  background: var(--r5a-panel-soft);
  border: 1px solid var(--r5a-border);
  color: var(--r5a-text-secondary);
  cursor: pointer;
  transition: all var(--r5a-transition-fast);
}
.tm-chip-r5a:hover,
.tm-chip-r5a.is-active {
  background: var(--r5a-accent-green-soft);
  border-color: var(--r5a-accent-green);
  color: var(--r5a-accent-green);
}

/* ════════════════════════════════════════════════════════════════════
   4) MEVCUT BEYAZ BUTTONLARI OVERRIDE — btn-baklava-outline +
      dashboard içindeki Bootstrap btn-outline-* kalıntıları
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode .btn-baklava-outline,
html.dark-mode .orders-filter-bar .btn-baklava-outline,
[data-theme="dark"] .btn-baklava-outline {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background var(--r5a-transition-fast),
              border-color var(--r5a-transition-fast),
              color var(--r5a-transition-fast),
              transform var(--r5a-transition-fast) !important;
}
html.dark-mode .btn-baklava-outline:hover,
[data-theme="dark"] .btn-baklava-outline:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.18) !important;
}

/* tm-actions-overflow ("Daha fazla" summary) */
html.dark-mode .tm-actions-overflow > summary,
html.dark-mode .tm-filters-collapse > summary,
[data-theme="dark"] .tm-actions-overflow > summary,
[data-theme="dark"] .tm-filters-collapse > summary {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-primary) !important;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--r5a-transition-fast);
}
html.dark-mode .tm-actions-overflow > summary:hover,
html.dark-mode .tm-filters-collapse > summary:hover,
[data-theme="dark"] .tm-actions-overflow > summary:hover,
[data-theme="dark"] .tm-filters-collapse > summary:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
}

/* "Daha fazla KPI" summary — gerçek class: tm-overview-extra-kpi (details parent),
   tm-polish-collapsible (style class). Summary'nin DOM içeriği "+ Daha fazla KPI"
   beyaz pill ile geliyor; override hem details hem inner content'i tema'ya alır. */
html.dark-mode .tm-overview-extra-kpi > summary,
html.dark-mode .tm-polish-collapsible > summary,
html.dark-mode .overview-kpi-extra-collapse > summary,
[data-theme="dark"] .tm-overview-extra-kpi > summary,
[data-theme="dark"] .tm-polish-collapsible > summary,
[data-theme="dark"] .overview-kpi-extra-collapse > summary {
  background: transparent !important;
  border: 1px dashed var(--r5a-border) !important;
  color: var(--r5a-text-secondary) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  cursor: pointer;
  list-style: none;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: all var(--r5a-transition-fast);
}
html.dark-mode .tm-overview-extra-kpi > summary::before,
html.dark-mode .tm-polish-collapsible > summary::before,
[data-theme="dark"] .tm-overview-extra-kpi > summary::before,
[data-theme="dark"] .tm-polish-collapsible > summary::before {
  background: transparent !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .tm-overview-extra-kpi > summary > *,
html.dark-mode .tm-polish-collapsible > summary > *,
[data-theme="dark"] .tm-overview-extra-kpi > summary > *,
[data-theme="dark"] .tm-polish-collapsible > summary > * {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
html.dark-mode .tm-overview-extra-kpi > summary:hover,
html.dark-mode .tm-polish-collapsible > summary:hover,
[data-theme="dark"] .tm-overview-extra-kpi > summary:hover,
[data-theme="dark"] .tm-polish-collapsible > summary:hover {
  background: var(--r5a-panel-soft) !important;
  border-color: var(--r5a-border-hover) !important;
  border-style: solid !important;
  color: var(--r5a-accent-blue) !important;
}

/* Generic Bootstrap btn-outline-secondary on dark (modal close vs.) */
html.dark-mode .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-text-primary) !important;
}

/* Sidebar nav group header (accordion) — "Ürün ve Katalog", "Raporlar", etc.
   Mevcut sınıf .tmv2-nav-item--group .nav-group-header .mobile-accordion-btn
   bazı durumlarda white bg ile geliyordu (Bootstrap fallback). */
html.dark-mode .tmv2-nav-item--group,
html.dark-mode .nav-group-header,
html.dark-mode .mobile-accordion-btn,
[data-theme="dark"] .tmv2-nav-item--group,
[data-theme="dark"] .nav-group-header,
[data-theme="dark"] .mobile-accordion-btn {
  background: transparent !important;
  border: none !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .tmv2-nav-item--group:hover,
html.dark-mode .nav-group-header:hover,
html.dark-mode .mobile-accordion-btn:hover,
[data-theme="dark"] .tmv2-nav-item--group:hover,
[data-theme="dark"] .nav-group-header:hover,
[data-theme="dark"] .mobile-accordion-btn:hover {
  background: var(--r5a-panel-soft) !important;
  color: var(--r5a-text-primary) !important;
}

/* AI Ayarları + Auto-QA hero secondary buttons */
html.dark-mode .ai-hero-secondary-btn,
[data-theme="dark"] .ai-hero-secondary-btn {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-primary) !important;
  transition: all var(--r5a-transition-fast) !important;
}
html.dark-mode .ai-hero-secondary-btn:hover,
[data-theme="dark"] .ai-hero-secondary-btn:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
  transform: translateY(-1px) !important;
}

/* Refresh icon button (live + orders) */
html.dark-mode #refreshOrdersBtn,
html.dark-mode #refreshDataBtn,
html.dark-mode #dashboardSettingsBtn,
html.dark-mode #tmLiveRefresh,
[data-theme="dark"] #refreshOrdersBtn,
[data-theme="dark"] #refreshDataBtn,
[data-theme="dark"] #dashboardSettingsBtn,
[data-theme="dark"] #tmLiveRefresh {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode #refreshOrdersBtn:hover,
html.dark-mode #refreshDataBtn:hover,
html.dark-mode #dashboardSettingsBtn:hover,
html.dark-mode #tmLiveRefresh:hover,
[data-theme="dark"] #refreshOrdersBtn:hover,
[data-theme="dark"] #refreshDataBtn:hover,
[data-theme="dark"] #dashboardSettingsBtn:hover,
[data-theme="dark"] #tmLiveRefresh:hover {
  border-color: var(--r5a-border-hover) !important;
  color: var(--r5a-accent-green) !important;
  transform: translateY(-1px) !important;
}

/* ════════════════════════════════════════════════════════════════════
   4.5) COST BREAKDOWN CARDS — dashboard_tabbed_tab_overview.html'deki
   inline style light theme için tasarlanmış (bg #fafbfc, color #0f172a).
   Dark override edilmemişti. R5-A bu 6 kart için panel-soft + dark text.
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode .tm-cost-breakdown__card,
[data-theme="dark"] .tm-cost-breakdown__card {
  background: var(--r5a-panel-soft) !important;
  border: 1px solid var(--r5a-border) !important;
  transition: all var(--r5a-transition-fast) !important;
}
html.dark-mode .tm-cost-breakdown__card:hover,
[data-theme="dark"] .tm-cost-breakdown__card:hover {
  background: var(--r5a-panel-raised) !important;
  border-color: var(--r5a-border-hover) !important;
  transform: translateY(-1px) !important;
}
html.dark-mode .tm-cost-breakdown__card-label,
[data-theme="dark"] .tm-cost-breakdown__card-label {
  color: var(--r5a-text-secondary) !important;
}
html.dark-mode .tm-cost-breakdown__card-value,
[data-theme="dark"] .tm-cost-breakdown__card-value {
  color: var(--r5a-text-primary) !important;
}
html.dark-mode .tm-cost-breakdown__card-source--cari,
[data-theme="dark"] .tm-cost-breakdown__card-source--cari {
  background: rgba(14, 116, 144, 0.18) !important;
  color: #67e8f9 !important;
}
html.dark-mode .tm-cost-breakdown__card-source--orders,
[data-theme="dark"] .tm-cost-breakdown__card-source--orders {
  background: rgba(146, 64, 14, 0.20) !important;
  color: #fbbf24 !important;
}

/* ════════════════════════════════════════════════════════════════════
   5) SIDEBAR + TOPBAR PREMIUM — active state belirgin yeşil accent
   ════════════════════════════════════════════════════════════════════ */
/* SOL RAY KURALLARI BU DOSYADAN KALDIRILDI (2026-10-08).
   Burada koyu temada `.tmv2-sidebar` zemini bir GRADYAN'a (background-image,
   background-color YOK) ve `.tmv2-nav-item.active` yeşil bir sol çubuğa
   çekiliyordu — üstelik `body:not(.tm-ds-shell)` ile YALNIZ bazı sayfalarda.

   Ölçülen sonuç (2026-10-08, gerçek DOM): XML Sync koyu temada ray'in
   `background-color`'ı `rgba(0,0,0,0)` çıkıyordu; "aynı ray sayfaya göre
   başka zemin" kusurunun BEŞİNCİ ve en sinsi kaynağıydı — yalnız bir sayfa
   ve yalnız bir temada görünüyordu.

   Ray artık tema-bağımsız ve sayfa-bağımsız: v2/components/sidebar.css.
   🔒 Buraya sol ray kuralı geri eklenmez. */

/* Topbar — derinlik */
html.dark-mode .tmv2-header,
html.dark-mode #tmv2Header,
[data-theme="dark"] .tmv2-header {
  background: var(--r5a-panel) !important;
  border-bottom: 1px solid var(--r5a-border) !important;
  backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════════
   6) BADGE / PILL — durum rozetleri canlı ve tutarlı
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode .badge.badge-success,
html.dark-mode .tm-badge-success,
[data-theme="dark"] .badge.badge-success {
  background: var(--r5a-accent-green-soft) !important;
  color: var(--r5a-accent-green) !important;
  border: 1px solid rgba(16,185,129,.25) !important;
}
html.dark-mode .badge.badge-warning,
[data-theme="dark"] .badge.badge-warning {
  background: var(--r5a-accent-orange-soft) !important;
  color: var(--r5a-accent-orange) !important;
}
html.dark-mode .badge.badge-danger,
[data-theme="dark"] .badge.badge-danger {
  background: var(--r5a-accent-red-soft) !important;
  color: var(--r5a-accent-red) !important;
}

/* ════════════════════════════════════════════════════════════════════
   7) FOCUS RING — kullanılabilirlik
   ════════════════════════════════════════════════════════════════════ */
html.dark-mode button:focus-visible,
html.dark-mode .btn:focus-visible,
html.dark-mode a:focus-visible,
html.dark-mode .tmv2-nav-item:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--r5a-border-focus) !important;
}

/* ════════════════════════════════════════════════════════════════════
   8) SMOOTH PAGE ENTRY — kart fade-up (sadece tabbed pages)
   ════════════════════════════════════════════════════════════════════ */
@keyframes r5aFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.dark-mode .tm-card:where(:not(.tm-ds *)),
html.dark-mode .tmv2-panel,
html.dark-mode .ai-stat-card,
[data-theme="dark"] .tm-card:where(:not(.tm-ds *)),
[data-theme="dark"] .tmv2-panel,
[data-theme="dark"] .ai-stat-card {
  animation: r5aFadeUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--r5a-stagger, 0) * 35ms);
}

@media (prefers-reduced-motion: reduce) {
  html.dark-mode *,
  [data-theme="dark"] * {
    animation: none !important;
    transition: none !important;
  }
}