/* =============================================================
   BulutAtom × Nexus WHMCS Theme
   Tüm renk ve tasarım sistemi BulutAtom ana sitesiyle eşleşir.
   ============================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Obsidian palette ──────────────────────────── */
  --ba-obsidian:   #080c10;
  --ba-obsidian-2: #0d1117;
  --ba-obsidian-3: #141920;
  --ba-obsidian-4: #1c2330;
  --ba-obsidian-5: #252e3d;
  --ba-obsidian-6: #2f3a4d;

  /* ── Accent ────────────────────────────────────── */
  --ba-emerald:        #00e676;
  --ba-emerald-dim:    #00c853;
  --ba-emerald-glow:   rgba(0,230,118,.15);
  --ba-emerald-border: rgba(0,230,118,.25);

  /* ── Text ──────────────────────────────────────── */
  --ba-bone:       #f0ede8;
  --ba-bone-dim:   #c8c4bc;
  --ba-bone-muted: #8a8680;

  /* ── Status ────────────────────────────────────── */
  --ba-azure: #0ea5e9;
  --ba-amber: #f59e0b;
  --ba-rose:  #f43f5e;
  --ba-green: #00a63e;
  --ba-purple:#818cf8;

  /* ── Typography ─────────────────────────────────── */
  --ba-font-display: 'Syne', sans-serif;
  --ba-font-body:    'DM Sans', sans-serif;
  --ba-font-mono:    'JetBrains Mono', monospace;

  /* ── Radius / speed ─────────────────────────────── */
  --ba-r1: 4px; --ba-r2: 8px; --ba-r3: 12px; --ba-r4: 16px;
  --ba-dur-fast: 150ms; --ba-dur-base: 250ms;
  --ba-ease: cubic-bezier(.4,0,.2,1);

  /* ── Override WHMCS Nexus variables ─────────────── */
  --neutral-50:  #f0ede8;
  --neutral-100: #1c2330;
  --neutral-200: #252e3d;
  --neutral-300: #2f3a4d;
  --neutral-400: #8a8680;
  --neutral-500: #c8c4bc;
  --neutral-600: #f0ede8;
  --neutral-700: #f0ede8;
  --neutral-800: #f0ede8;
  --neutral-900: #f0ede8;
  --neutral-950: #f0ede8;

  --primary:           #00e676;
  --primary-lifted:    #00c853;
  --primary-accented:  #00a854;
  --secondary:         #8a8680;
  --secondary-lifted:  #c8c4bc;
  --secondary-accented:#f0ede8;

  --success:          #00a63e;
  --success-lifted:   #008236;
  --success-accented: #016630;
  --info:             #0ea5e9;
  --info-lifted:      #0284c7;
  --info-accented:    #0369a1;
  --notice:           #818cf8;
  --notice-lifted:    #6366f1;
  --notice-accented:  #4f46e5;
  --warning:          #f59e0b;
  --warning-lifted:   #d97706;
  --warning-accented: #b45309;
  --error:            #f43f5e;
  --error-lifted:     #e11d48;
  --error-accented:   #be123c;

  --grayscale:         #252e3d;
  --grayscale-lifted:  #1c2330;
  --grayscale-accented:#141920;
  --neutral-color:     #8a8680;
  --neutral-lifted:    #c8c4bc;
  --neutral-accented:  #f0ede8;

  --text-inverted:  #080c10;
  --text-muted:     #8a8680;
  --text-lifted:    #c8c4bc;
  --text-accented:  #f0ede8;
  --text:           #f0ede8;

  --border-muted:    rgba(28,35,48,.8);
  --border:          #1c2330;
  --border-lifted:   #252e3d;
  --border-accented: #2f3a4d;

  --bg:          #0d1117;
  --bg-muted:    #080c10;
  --bg-lifted:   #0d1117;
  --bg-accented: #141920;
  --bg-inverted: #080c10;

  --rounding-sm: 6px;
  --rounding-md: 10px;
  --rounding-lg: 14px;
  --letter-spacing: 0em;
  --disabled-opacity: 30%;

  /* yellow/teal/pink overrides */
  --yellow-200: #fde68a;
  --yellow-300: #f59e0b;
  --teal-300:   #2dd4bf;
  --teal-400:   #14b8a6;
  --emerald-300:#00e676;
  --pink-400:   #f43f5e;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL BASE
   ═══════════════════════════════════════════════════════════ */

html, body {
  font-family: var(--ba-font-body) !important;
  background-color: var(--ba-obsidian-2) !important;
  color: var(--ba-bone) !important;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

::selection { background: var(--ba-emerald); color: var(--ba-obsidian); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--ba-obsidian-2); }
::-webkit-scrollbar-thumb { background: var(--ba-obsidian-5); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ba-emerald); }

a { color: var(--ba-bone-dim); transition: color var(--ba-dur-fast); }
a:hover { color: var(--ba-emerald); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */

header.header {
  background: rgba(8,12,16,.9) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--ba-obsidian-4);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background var(--ba-dur-base), border-color var(--ba-dur-base);
}

/* Topbar (logged-in kullanıcı bilgisi şeridi) */
header.header .topbar {
  background: var(--ba-obsidian) !important;
  border-bottom: 1px solid var(--ba-obsidian-4);
  color: var(--ba-bone-muted);
  font-family: var(--ba-font-mono);
  font-size: 0.75rem;
  padding: 5px 0 !important;
}
header.header .topbar .btn { color: var(--ba-bone-dim) !important; font-size: 0.75rem; }
header.header .topbar .btn:hover { color: var(--ba-emerald) !important; }
header.header .topbar .input-group-text {
  color: var(--ba-bone-muted) !important;
  background: transparent !important;
  border: 0;
  font-size: 0.75rem;
}
header.header .topbar .btn-active-client span {
  border-bottom: 1px dashed var(--ba-bone-muted);
}

/* Navbar üst çubuğu (logo + arama + sepet) */
header.header .navbar.navbar-light {
  background: transparent !important;
  border-bottom: 1px solid var(--ba-obsidian-4);
  min-height: 68px !important;
}

/* Logo */
header.header .navbar-brand {
  font-family: var(--ba-font-display) !important;
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.04em;
  color: var(--ba-bone) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
header.header .navbar-brand:hover { color: var(--ba-bone) !important; }

header.header .logo-img {
  max-height: 40px !important;
  max-width: 180px !important;
}

/* Arama kutusu */
header.header .search {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r2) !important;
  width: 280px;
}
header.header .search .form-control {
  background: transparent !important;
  color: var(--ba-bone) !important;
  border: 0 !important;
  font-size: 0.875rem;
}
header.header .search .form-control::placeholder { color: var(--ba-bone-muted); }
header.header .search .btn { color: var(--ba-bone-muted) !important; background: transparent !important; }
header.header .search:focus-within { border-color: var(--ba-emerald-border) !important; }

/* Sepet / toolbar butonları */
header.header .toolbar .nav-link {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r2) !important;
  color: var(--ba-bone-dim) !important;
  transition: all var(--ba-dur-fast);
}
header.header .toolbar .nav-link:hover {
  border-color: var(--ba-emerald-border) !important;
  color: var(--ba-emerald) !important;
  background: var(--ba-emerald-glow) !important;
}
header.header .toolbar .nav-link .badge {
  background: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  font-family: var(--ba-font-mono);
  font-size: 9px;
}

/* Hamburger (mobil) */
header.header .btn[data-toggle="collapse"] {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r2) !important;
  color: var(--ba-bone-dim) !important;
  width: 40px; height: 40px;
}
header.header .btn[data-toggle="collapse"]:hover {
  border-color: var(--ba-emerald-border) !important;
  color: var(--ba-emerald) !important;
}

/* Ana nav menü şeridi */
header.header .main-navbar-wrapper {
  background: var(--ba-obsidian-2) !important;
  border-bottom: 1px solid var(--ba-obsidian-4);
}

header.header .navbar-nav {
  gap: 2px !important;
  margin: 6px 0 !important;
}

header.header .navbar-nav > li > a,
header.header .navbar-nav a.nav-item-link {
  font-family: var(--ba-font-body) !important;
  font-size: 0.9rem !important;
  color: var(--ba-bone-dim) !important;
  padding: 8px 14px !important;
  border-radius: var(--ba-r2) !important;
  transition: color var(--ba-dur-fast), background var(--ba-dur-fast) !important;
  font-weight: 400;
}
header.header .navbar-nav > li > a:hover {
  color: var(--ba-bone) !important;
  background: var(--ba-obsidian-4) !important;
  text-decoration: none;
}
header.header .navbar-nav > li.active > a,
header.header .navbar-nav > li > a.active {
  color: var(--ba-emerald) !important;
}

/* Dropdown menü */
header.header .dropdown-menu {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r3) !important;
  padding: 8px !important;
  min-width: 200px;
}
header.header .dropdown-item {
  color: var(--ba-bone-dim) !important;
  border-radius: var(--ba-r2) !important;
  padding: 9px 14px !important;
  font-size: 0.875rem !important;
  transition: background var(--ba-dur-fast), color var(--ba-dur-fast) !important;
}
header.header .dropdown-item:hover,
header.header .dropdown-item:focus {
  background: var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
}
header.header .dropdown-item.active,
header.header .dropdown-item:active {
  background: var(--ba-emerald-glow) !important;
  color: var(--ba-emerald) !important;
}
header.header .dropdown-divider {
  border-color: var(--ba-obsidian-5) !important;
  margin: 4px 0 !important;
}

/* Badge (nav items) */
header.header .navbar-nav .badge {
  background: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  font-family: var(--ba-font-mono);
  font-size: 10px;
  border-radius: 99px;
}

/* Return to admin btn */
.btn-return-to-admin {
  background: var(--ba-obsidian-5) !important;
  color: var(--ba-bone-dim) !important;
  border-radius: 0 0 var(--ba-r2) var(--ba-r2) !important;
}
.btn-return-to-admin:hover {
  color: var(--ba-emerald) !important;
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════ */

.master-breadcrumb {
  background: var(--ba-obsidian) !important;
  border-bottom: 1px solid var(--ba-obsidian-4);
}
.master-breadcrumb .breadcrumb {
  background: transparent !important;
  font-family: var(--ba-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 10px 0 !important;
}
.master-breadcrumb .breadcrumb a { color: var(--ba-bone-muted) !important; }
.master-breadcrumb .breadcrumb a:hover { color: var(--ba-emerald) !important; }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ba-obsidian-6); }
.master-breadcrumb .breadcrumb-item.active { color: var(--ba-emerald) !important; }

/* ═══════════════════════════════════════════════════════════
   MAIN BODY
   ═══════════════════════════════════════════════════════════ */

section#main-body {
  background: var(--ba-obsidian-2) !important;
  padding: 24px 0 48px !important;
}

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */

.card {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r3) !important;
  color: var(--ba-bone) !important;
  transition: border-color var(--ba-dur-base), box-shadow var(--ba-dur-base);
}
.card:hover { border-color: var(--ba-obsidian-5) !important; }

.card-header {
  background: var(--ba-obsidian-4) !important;
  border-bottom: 1px solid var(--ba-obsidian-5) !important;
  font-family: var(--ba-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ba-bone) !important;
  padding: 14px 20px;
  border-radius: var(--ba-r3) var(--ba-r3) 0 0 !important;
}
.card-body { color: var(--ba-bone-dim) !important; }
.card-title {
  font-family: var(--ba-font-display) !important;
  font-weight: 700 !important;
  color: var(--ba-bone) !important;
  font-size: 1.25rem !important;
}
.card-footer {
  background: var(--ba-obsidian-4) !important;
  border-top: 1px solid var(--ba-obsidian-5) !important;
  border-radius: 0 0 var(--ba-r3) var(--ba-r3) !important;
}

/* Card accent borders */
.card-accent-gold    { border-top: 3px solid var(--ba-amber) !important; }
.card-accent-green   { border-top: 3px solid var(--ba-emerald) !important; }
.card-accent-red     { border-top: 3px solid var(--ba-rose) !important; }
.card-accent-blue    { border-top: 3px solid var(--ba-azure) !important; }
.card-accent-orange  { border-top: 3px solid #f97316 !important; }
.card-accent-purple  { border-top: 3px solid var(--ba-purple) !important; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.btn {
  font-family: var(--ba-font-body) !important;
  font-weight: 500;
  border-radius: var(--ba-r2) !important;
  transition: all var(--ba-dur-fast) !important;
  letter-spacing: 0;
}

.btn-primary {
  background: var(--ba-emerald) !important;
  border-color: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  font-weight: 700 !important;
}
.btn-primary:hover {
  background: var(--ba-emerald-dim) !important;
  border-color: var(--ba-emerald-dim) !important;
  color: var(--ba-obsidian) !important;
  box-shadow: 0 0 20px var(--ba-emerald-glow) !important;
}
.btn-primary:focus { box-shadow: 0 0 0 3px var(--ba-emerald-glow) !important; }

.btn-default, .btn-secondary {
  background: var(--ba-obsidian-4) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  color: var(--ba-bone-dim) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  border-color: var(--ba-obsidian-6) !important;
}

.btn-success {
  background: var(--ba-green) !important;
  border-color: var(--ba-green) !important;
  color: #fff !important;
}
.btn-success:hover {
  background: #008236 !important;
  border-color: #008236 !important;
}

.btn-danger {
  background: var(--ba-rose) !important;
  border-color: var(--ba-rose) !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--ba-amber) !important;
  border-color: var(--ba-amber) !important;
  color: var(--ba-obsidian) !important;
  font-weight: 700 !important;
}

.btn-info {
  background: var(--ba-azure) !important;
  border-color: var(--ba-azure) !important;
  color: #fff !important;
}

.btn-outline-light {
  border-color: var(--ba-obsidian-5) !important;
  color: var(--ba-bone-dim) !important;
}
.btn-outline-light:hover {
  background: var(--ba-obsidian-4) !important;
  color: var(--ba-bone) !important;
}

.btn-link { color: var(--ba-emerald) !important; }
.btn-link:hover { color: var(--ba-emerald-dim) !important; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */

.form-control {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  border-radius: var(--ba-r2) !important;
  font-family: var(--ba-font-body);
  transition: border-color var(--ba-dur-fast), box-shadow var(--ba-dur-fast);
}
.form-control::placeholder { color: var(--ba-bone-muted) !important; }
.form-control:focus {
  background: var(--ba-obsidian-4) !important;
  border-color: var(--ba-emerald-border) !important;
  box-shadow: 0 0 0 3px var(--ba-emerald-glow) !important;
  color: var(--ba-bone) !important;
  outline: none;
}

label, .control-label { color: var(--ba-bone-dim) !important; font-size: 0.875rem; font-weight: 500; }

.form-group .help-block { color: var(--ba-bone-muted) !important; font-size: 0.8125rem; }

.input-group-text {
  background: var(--ba-obsidian-4) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  color: var(--ba-bone-dim) !important;
}

select.form-control option { background: var(--ba-obsidian-3); color: var(--ba-bone); }

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */

.table {
  color: var(--ba-bone-dim) !important;
  border-color: var(--ba-obsidian-4) !important;
}
.table thead th {
  background: var(--ba-obsidian-4) !important;
  border-color: var(--ba-obsidian-5) !important;
  color: var(--ba-bone-muted) !important;
  font-family: var(--ba-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 12px 16px;
}
.table tbody td { border-color: var(--ba-obsidian-4) !important; padding: 12px 16px; }
.table tbody tr:hover td { background: var(--ba-obsidian-4) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(28,35,48,.4) !important; }
.table-bordered { border-color: var(--ba-obsidian-4) !important; }
.table-bordered td, .table-bordered th { border-color: var(--ba-obsidian-4) !important; }

/* ═══════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════ */

.alert {
  border-radius: var(--ba-r2) !important;
  border-left-width: 3px;
  font-size: 0.875rem;
}
.alert-success {
  background: rgba(0,166,62,.12) !important;
  border-color: var(--ba-green) !important;
  color: #6ee7a0 !important;
}
.alert-danger, .alert-error {
  background: rgba(244,63,94,.12) !important;
  border-color: var(--ba-rose) !important;
  color: #fca5a5 !important;
}
.alert-warning {
  background: rgba(245,158,11,.12) !important;
  border-color: var(--ba-amber) !important;
  color: #fcd34d !important;
}
.alert-info {
  background: rgba(14,165,233,.12) !important;
  border-color: var(--ba-azure) !important;
  color: #7dd3fc !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGES / LABELS
   ═══════════════════════════════════════════════════════════ */

.badge-primary, .label-primary { background: var(--ba-emerald) !important; color: var(--ba-obsidian) !important; }
.badge-success, .label-success { background: var(--ba-green) !important; }
.badge-danger,  .label-danger  { background: var(--ba-rose) !important; }
.badge-warning, .label-warning { background: var(--ba-amber) !important; color: var(--ba-obsidian) !important; }
.badge-info,    .label-info    { background: var(--ba-azure) !important; }
.badge-dark { background: var(--ba-obsidian-4) !important; color: var(--ba-bone-dim) !important; }
.badge-secondary { background: var(--ba-obsidian-5) !important; color: var(--ba-bone-dim) !important; }

/* Status labels */
.status-active, .status-open, .status-completed, .status-paid, .status-accepted {
  background: var(--ba-green) !important;
}
.status-pending, .status-inprogress, .status-pending-registration {
  background: var(--ba-amber) !important; color: var(--ba-obsidian) !important;
}
.status-suspended, .status-onhold {
  background: var(--ba-azure) !important;
}
.status-terminated, .status-cancelled, .status-closed {
  background: var(--ba-obsidian-5) !important;
}
.status-unpaid, .status-fraud {
  background: var(--ba-rose) !important;
}
.status-answered {
  background: var(--ba-purple) !important;
}
.status-expired, .status-transferred-away {
  background: var(--ba-obsidian-6) !important;
}

/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */

.modal-content {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r3) !important;
  color: var(--ba-bone) !important;
}
.modal-header {
  background: var(--ba-obsidian-4) !important;
  border-bottom: 1px solid var(--ba-obsidian-5) !important;
  padding: 16px 24px;
  border-radius: var(--ba-r3) var(--ba-r3) 0 0 !important;
}
.modal-title {
  font-family: var(--ba-font-display) !important;
  font-weight: 700;
  color: var(--ba-bone) !important;
}
.modal-footer {
  background: var(--ba-obsidian-4) !important;
  border-top: 1px solid var(--ba-obsidian-5) !important;
  border-radius: 0 0 var(--ba-r3) var(--ba-r3) !important;
}
.modal-body { color: var(--ba-bone-dim) !important; }
.close { color: var(--ba-bone-muted) !important; opacity: 1 !important; }
.close:hover { color: var(--ba-bone) !important; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */

.sidebar .card {
  border-left: 3px solid var(--ba-obsidian-5) !important;
}
.sidebar .card-header {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ba-bone-muted) !important;
  font-family: var(--ba-font-mono) !important;
}
.sidebar ul.list-group { gap: 2px; }
.list-group-item {
  background: transparent !important;
  border-color: var(--ba-obsidian-4) !important;
  color: var(--ba-bone-dim) !important;
  transition: background var(--ba-dur-fast), color var(--ba-dur-fast);
  border-radius: var(--ba-r2) !important;
  margin-bottom: 2px;
}
.list-group-item:hover { background: var(--ba-obsidian-4) !important; color: var(--ba-bone) !important; }
.list-group-item.active {
  background: var(--ba-emerald-glow) !important;
  border-color: var(--ba-emerald-border) !important;
  color: var(--ba-emerald) !important;
  font-weight: 600;
}
.list-group-item a { color: inherit !important; }

/* ═══════════════════════════════════════════════════════════
   TABS / PILLS
   ═══════════════════════════════════════════════════════════ */

.nav-tabs {
  border-bottom: 1px solid var(--ba-obsidian-4) !important;
  gap: 4px;
}
.nav-tabs .nav-link {
  color: var(--ba-bone-dim) !important;
  border-radius: var(--ba-r2) var(--ba-r2) 0 0 !important;
  border: 1px solid transparent !important;
  padding: 8px 16px;
  font-size: 0.875rem;
  transition: all var(--ba-dur-fast);
}
.nav-tabs .nav-link:hover { color: var(--ba-bone) !important; background: var(--ba-obsidian-4) !important; }
.nav-tabs .nav-link.active {
  color: var(--ba-emerald) !important;
  background: var(--ba-obsidian-3) !important;
  border-color: var(--ba-obsidian-4) var(--ba-obsidian-4) var(--ba-obsidian-3) !important;
  font-weight: 600;
}
.tab-content { padding-top: 20px; }

/* Pills */
.nav-pills .nav-link { color: var(--ba-bone-dim) !important; border-radius: var(--ba-r2) !important; }
.nav-pills .nav-link:hover { background: var(--ba-obsidian-4) !important; color: var(--ba-bone) !important; }
.nav-pills .nav-link.active {
  background: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */

.pagination .page-link {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  color: var(--ba-bone-dim) !important;
  border-radius: var(--ba-r2) !important;
  margin: 0 2px;
}
.pagination .page-link:hover { background: var(--ba-obsidian-5) !important; color: var(--ba-bone) !important; }
.pagination .page-item.active .page-link {
  background: var(--ba-emerald) !important;
  border-color: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  font-weight: 700;
}
.pagination .page-item.disabled .page-link { opacity: 0.3; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

footer.footer {
  background: var(--ba-obsidian) !important;
  border-top: 1px solid var(--ba-obsidian-4) !important;
  color: var(--ba-bone-muted) !important;
  font-size: 0.875rem;
  padding: 40px 0 28px !important;
}
footer.footer .nav-link {
  color: var(--ba-bone-muted) !important;
  padding: 4px 12px !important;
  font-size: 0.875rem;
  transition: color var(--ba-dur-fast);
}
footer.footer .nav-link:hover { color: var(--ba-emerald) !important; }
footer.footer .copyright {
  color: var(--ba-obsidian-6) !important;
  font-family: var(--ba-font-mono);
  font-size: 0.75rem;
  text-align: center;
  margin-top: 24px !important;
}
footer.footer .btn { border-color: var(--ba-obsidian-5) !important; color: var(--ba-bone-dim) !important; }
footer.footer .btn:hover { color: var(--ba-emerald) !important; border-color: var(--ba-emerald-border) !important; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE (clientareahome / homepage.tpl)
   ═══════════════════════════════════════════════════════════ */

.client-home-stats {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r3) !important;
}
.client-home-stats .stat-value {
  font-family: var(--ba-font-display) !important;
  color: var(--ba-emerald) !important;
  font-weight: 800;
}
.client-home-stats .stat-label { color: var(--ba-bone-muted) !important; font-size: 0.8125rem; }

/* Domain search */
.domain-search-wrapper {
  background: linear-gradient(135deg, var(--ba-obsidian-3) 0%, var(--ba-obsidian-4) 100%) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r4) !important;
}

/* Product / service cards */
.product-card, .service-card {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r3) !important;
}

/* ═══════════════════════════════════════════════════════════
   NETWORK ALERT (topbar uyarı şeridi)
   ═══════════════════════════════════════════════════════════ */

.network-issue-alert {
  background: rgba(245,158,11,.1) !important;
  border-color: var(--ba-amber) !important;
  color: #fcd34d !important;
  font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════════════════════
   MISCELLANEOUS
   ═══════════════════════════════════════════════════════════ */

/* H1-H6 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ba-font-display) !important;
  color: var(--ba-bone) !important;
}

/* HR */
hr { border-color: var(--ba-obsidian-4) !important; }

/* Popover */
.popover {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r3) !important;
}
.popover-header {
  background: var(--ba-obsidian-4) !important;
  border-bottom: 1px solid var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  font-family: var(--ba-font-display);
  font-weight: 700;
}
.popover-body { color: var(--ba-bone-dim) !important; }

/* Tooltip */
.tooltip .tooltip-inner {
  background: var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  border-radius: var(--ba-r1) !important;
  font-size: 0.8125rem;
}

/* Progress bar */
.progress { background: var(--ba-obsidian-4) !important; border-radius: 99px !important; }
.progress-bar { background: var(--ba-emerald) !important; color: var(--ba-obsidian) !important; }
.progress-bar-success { background: var(--ba-green) !important; }
.progress-bar-warning { background: var(--ba-amber) !important; }
.progress-bar-danger  { background: var(--ba-rose) !important; }

/* Checkbox / radio custom */
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--ba-emerald) !important;
  border-color: var(--ba-emerald) !important;
}

/* Bootstrap switch */
.bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--ba-emerald) !important; color: var(--ba-obsidian) !important; }
.bootstrap-switch-handle-off { background: var(--ba-obsidian-5) !important; }

/* Fullpage overlay */
#fullpage-overlay { background: rgba(8,12,16,.9) !important; }

/* Client alerts popup */
#accountNotificationsContent {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r3) !important;
}
.client-alerts li a { color: var(--ba-bone-dim) !important; padding: 10px 14px; border-radius: var(--ba-r2); }
.client-alerts li a:hover { background: var(--ba-obsidian-4) !important; color: var(--ba-bone) !important; }

/* Invoice PDF (minimal) */
.invoice-header { background: var(--ba-obsidian) !important; }

/* KnowledgeBase */
.kb-category .card-body h3 { font-size: 1rem !important; color: var(--ba-bone) !important; }
.kb-category .card-body p { color: var(--ba-bone-dim) !important; font-size: 0.875rem; }

/* Emerald highlight on key numbers/prices */
.text-primary, .text-success { color: var(--ba-emerald) !important; }
.text-danger  { color: var(--ba-rose) !important; }
.text-warning { color: var(--ba-amber) !important; }
.text-info    { color: var(--ba-azure) !important; }
.text-muted   { color: var(--ba-bone-muted) !important; }
.text-white   { color: var(--ba-bone) !important; }

/* BulutAtom logo placeholder (logo yokken şirket adını renklendir) */
.navbar-brand {
  position: relative;
}
.navbar-brand::before {
  content: '';
  display: inline-block;
  width: 28px; height: 28px;
  background: var(--ba-emerald);
  border-radius: 7px;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Scrolled header gölgesi */
header.header.scrolled,
header.header:has(.topbar) {
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  header.header .navbar-collapse {
    background: var(--ba-obsidian-2) !important;
    border: 1px solid var(--ba-obsidian-4) !important;
    border-radius: var(--ba-r3) !important;
    padding: 12px !important;
    margin-top: 8px;
  }
  header.header .navbar-nav { margin: 0 !important; }
  header.header .navbar-nav > li > a {
    padding: 10px 14px !important;
    border-radius: var(--ba-r2) !important;
  }
  .dropdown-menu { position: static !important; width: 100% !important; margin-top: 4px; }
  section#main-body { padding: 16px 0 32px !important; }
}

@media (max-width: 575px) {
  .card-body { padding: 16px !important; }
  .card-header { padding: 12px 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   STORE — Ürün kartları / kategori sayfaları tam override
   Tüm hardcoded #ffffff / #fff arka planları karartılır.
   ═══════════════════════════════════════════════════════════ */

/* ── Temel store arka planı ─────────────────────────────── */
.landing-page,
.store-page,
section#main-body .landing-page {
  background: var(--ba-obsidian-2) !important;
  color: var(--ba-bone) !important;
}

/* ── Ürün kartları (tüm store landing şablonları) ─────── */
.landing-page .product-options .item,
.landing-page.ssl .validation-levels .item,
.landing-page .tab-content,
.landing-page.ssl .detailed-info .card-body,
.landing-page.ssl .browser-notice .wrapper {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r3) !important;
  color: var(--ba-bone) !important;
  transition: border-color 150ms, box-shadow 150ms;
}
.landing-page .product-options .item:hover {
  border-color: var(--ba-obsidian-6) !important;
}

/* Ürün başlıkları */
.landing-page .product-options h2,
.landing-page .product-options h3,
.landing-page .product-options h4,
.landing-page .product-options .item h4 {
  color: var(--ba-bone) !important;
  font-family: var(--ba-font-display) !important;
}

/* Ürün açıklamaları */
.landing-page .product-options p,
.landing-page .product-options .preview-text,
.landing-page .product-options span {
  color: var(--ba-bone-dim) !important;
}

/* Fiyat */
.landing-page .product-options .price,
.landing-page .product-options .from-price {
  color: var(--ba-emerald) !important;
  font-family: var(--ba-font-display) !important;
  font-weight: 700;
}

/* İkon */
.landing-page .product-options .icon { color: var(--ba-emerald) !important; }

/* ── Dynamic Store (store/dynamic) — Pricing kartları ─── */
.pricing-card {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: 14px !important;
  color: var(--ba-bone) !important;
}
.pricing-card:hover {
  border-color: var(--ba-obsidian-5) !important;
  transform: translateY(-6px);
}
.pricing-card:has(.plan-button:hover) {
  border-color: var(--ba-emerald-border) !important;
}

/* Öne çıkan (featured) kart */
.pricing-card.featured,
.pricing-card.is-featured,
.pricing-card--featured {
  border-color: var(--ba-emerald-border) !important;
  background: linear-gradient(160deg, var(--ba-obsidian-4) 0%, var(--ba-obsidian-3) 100%) !important;
}

/* Plan ismi */
.plan-name { color: var(--ba-bone) !important; font-family: var(--ba-font-display) !important; font-weight: 700 !important; }

/* Plan açıklaması */
.plan-description { color: var(--ba-bone-dim) !important; font-size: 0.875rem !important; }

/* Fiyat */
.price-amount { color: var(--ba-emerald) !important; font-family: var(--ba-font-display) !important; }
.price-period { color: var(--ba-bone-muted) !important; }

/* Feature listesi */
.feature-item { color: var(--ba-bone-dim) !important; border-bottom: 1px solid var(--ba-obsidian-4); }
.feature-item:last-child { border-bottom: none; }
.feature-item i { color: var(--ba-emerald) !important; }

/* Plan butonu */
.plan-button {
  background: var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  border: 1px solid var(--ba-obsidian-6) !important;
  border-radius: var(--ba-r2) !important;
  font-family: var(--ba-font-body) !important;
  font-weight: 600 !important;
  transition: all 150ms !important;
}
.plan-button:hover,
.plan-button.plan-button--featured {
  background: var(--ba-emerald) !important;
  border-color: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  box-shadow: 0 0 20px var(--ba-emerald-glow) !important;
}

/* ── Dynamic Store — Grid of cards ───────────────────────── */
.grid-of-cards-card,
.card-grid-item {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r3) !important;
  color: var(--ba-bone-dim) !important;
}
.grid-of-cards-card:hover { border-color: var(--ba-obsidian-5) !important; }
.grid-of-cards-card h3, .grid-of-cards-card h4 { color: var(--ba-bone) !important; }
.grid-of-cards-card p { color: var(--ba-bone-dim) !important; }

/* ── Dynamic Store — Features tablosu ───────────────────── */
.table-wrapper,
.comparison-table-wrapper {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r3) !important;
}
.comparison-table,
.features-table {
  color: var(--ba-bone-dim) !important;
}
.comparison-table thead th,
.features-table thead th {
  background: var(--ba-obsidian-4) !important;
  color: var(--ba-bone-muted) !important;
  font-family: var(--ba-font-mono) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-color: var(--ba-obsidian-5) !important;
}
.comparison-table tbody tr:hover td,
.features-table tbody tr:hover td {
  background: var(--ba-obsidian-4) !important;
}
.comparison-table td, .features-table td {
  border-color: var(--ba-obsidian-4) !important;
  color: var(--ba-bone-dim) !important;
}
.buy-row {
  background: var(--ba-obsidian-4) !important;
  border-top: 1px solid var(--ba-obsidian-5) !important;
}

/* ── Dynamic Store — CTA butonları ──────────────────────── */
.cta-primary-button {
  background: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px var(--ba-emerald-glow) !important;
  border-radius: var(--ba-r2) !important;
}
.cta-primary-button:hover {
  background: var(--ba-emerald-dim) !important;
  transform: translateY(-2px);
}
.cta-secondary-button {
  background: transparent !important;
  border-color: var(--ba-obsidian-5) !important;
  color: var(--ba-bone-dim) !important;
  border-radius: var(--ba-r2) !important;
}
.cta-secondary-button:hover {
  background: var(--ba-obsidian-4) !important;
  color: var(--ba-bone) !important;
  border-color: var(--ba-obsidian-6) !important;
}

/* ── Dynamic Store — Hero / Section başlıkları ─────────── */
.dynamic-landing-page {
  background: var(--ba-obsidian-2) !important;
  color: var(--ba-bone) !important;
}
.hero-section { background: var(--ba-obsidian-2) !important; }
.hero-title { color: var(--ba-bone) !important; -webkit-text-fill-color: var(--ba-bone) !important; }
.hero-subtitle, .hero-description { color: var(--ba-bone-dim) !important; }

.background-gradient,
.background-light { background: var(--ba-obsidian-3) !important; }
.background-dark   { background: var(--ba-obsidian) !important; }
.background-main   { background: var(--ba-obsidian-2) !important; }

.pricing-title, .features-title, .features-table-title, .cta-title {
  color: var(--ba-bone) !important;
  font-family: var(--ba-font-display) !important;
}
.pricing-subtitle, .features-subtitle, .features-table-subtitle, .cta-description {
  color: var(--ba-bone-dim) !important;
}

.features-content .feature {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r2) !important;
}
.features-content .feature:hover { border-color: var(--ba-obsidian-5) !important; }
.features-content .feature h3 { color: var(--ba-bone) !important; }
.features-content .feature p  { color: var(--ba-bone-dim) !important; }
.features-content .feature-icon {
  background: var(--ba-emerald-glow) !important;
  color: var(--ba-emerald) !important;
  border-radius: var(--ba-r2) !important;
}

/* hero accent çizgisi */
.hero-accent { background: var(--ba-emerald) !important; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r2) !important;
  margin-bottom: 8px;
}
.faq-question {
  color: var(--ba-bone) !important;
  font-weight: 600;
}
.faq-answer { color: var(--ba-bone-dim) !important; }

/* ── Logo container (hero içindeki beyaz kutu) ─────────── */
.hero-logo-container {
  background: var(--ba-obsidian-4) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: var(--ba-r3) !important;
}

/* ── Nav tabs (store içi sekmeler) ───────────────────────── */
.landing-page .nav-tabs > li.active > a,
.landing-page .nav-tabs > li.active > a:focus,
.landing-page .nav-tabs > li.active > a:hover {
  background: var(--ba-obsidian-3) !important;
  border-top-color: var(--ba-emerald) !important;
  color: var(--ba-bone) !important;
}
.landing-page .nav-tabs > li > a:hover {
  background: var(--ba-obsidian-4) !important;
  color: var(--ba-bone) !important;
}

/* ── Active navbar item (store landing) ──────────────────── */
.landing-page .navbar .navbar-nav > li.active > a {
  background: var(--ba-obsidian-4) !important;
  color: var(--ba-emerald) !important;
}

/* ── SSL sayfası özel renk ───────────────────────────────── */
.landing-page.ssl .validation-levels .item {
  color: var(--ba-bone) !important;
}

/* ── Store order form (sepet özeti) ──────────────────────── */
.order-summary,
.cart-items,
.order-details {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r3) !important;
  color: var(--ba-bone-dim) !important;
}
.order-summary h3, .cart-items h3 { color: var(--ba-bone) !important; }

/* ═══════════════════════════════════════════════════════════
   STORE — store.css hardcoded renk override'ları
   store.css'de !important kullanıldığı için özgüllük artırıldı
   ═══════════════════════════════════════════════════════════ */

/* Bootstrap .bg-white — tüm store sayfalarında karartılır */
.landing-page.bg-white,
.landing-page,
.bg-white {
  background-color: var(--ba-obsidian-2) !important;
  color: var(--ba-bone) !important;
}

/* store-domain-tab-content (order.tpl) */
.store-domain-tab-content,
.tab-content.store-domain-tab-content {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r2) !important;
  color: var(--ba-bone) !important;
}

/* ── landing-page genel metin renkleri ─────────────────── */
.landing-page,
.landing-page * { color: inherit; }

.landing-page .hero { color: var(--ba-bone) !important; }
.landing-page .hero h2 { color: var(--ba-bone) !important; }
.landing-page .hero p  { color: var(--ba-bone-dim) !important; }

/* ── product-options: açıklama ve fiyat ─────────────────── */
.landing-page .product-options p        { color: var(--ba-bone-dim) !important; }
.landing-page .product-options span     { color: var(--ba-bone-dim) !important; }
.landing-page .product-options .price   { color: var(--ba-emerald)  !important; }
.landing-page .product-options h2,
.landing-page .product-options h3,
.landing-page .product-options h4       { color: var(--ba-bone)     !important; }

/* Buton (ürün kartı içinde) */
.landing-page .product-options .item .btn {
  background: var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  border: 1px solid var(--ba-obsidian-6) !important;
}
.landing-page .product-options .item .btn:hover {
  background: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  border-color: var(--ba-emerald) !important;
}

/* mail-services özel arka planı */
.landing-page.mail-services .product-options .item {
  background: var(--ba-obsidian-3) !important;
  border-color: var(--ba-obsidian-4) !important;
}

/* ── content-block, feature-tabs, pricing blokları ──────── */
.content-block,
.content-block.feature-tabs,
.content-block.pricing,
.content-block.bg-white {
  background: var(--ba-obsidian-2) !important;
  color: var(--ba-bone) !important;
}

/* Tablo ve satır renkleri içinde gri yazılar */
.landing-page table { color: var(--ba-bone-dim) !important; }
.landing-page table th { color: var(--ba-bone-muted) !important; background: var(--ba-obsidian-4) !important; }
.landing-page table td { color: var(--ba-bone-dim) !important; border-color: var(--ba-obsidian-4) !important; }
.landing-page table tr:hover td { background: var(--ba-obsidian-4) !important; }

/* ── xovinow / spamexperts / nordvpn vb. store sayfaları ── */
/* Tüm section/div arka planları */
.landing-page section,
.landing-page .section,
.landing-page .pricing-section,
.landing-page .features-section {
  background: var(--ba-obsidian-2) !important;
}

/* Gri alt bölümler */
.landing-page .bg-gray,
.landing-page .bg-light,
.landing-page .bg-secondary,
.landing-page [class*="bg-light"],
.landing-page [class*="bg-gray"] {
  background: var(--ba-obsidian-3) !important;
  color: var(--ba-bone) !important;
}

/* Koyu bölümler — obsidian'a çek */
.landing-page .bg-dark,
.landing-page [class*="bg-dark"] {
  background: var(--ba-obsidian) !important;
  color: var(--ba-bone) !important;
}

/* xovinow feature tabs özel */
.landing-page .tab-pane { color: var(--ba-bone-dim) !important; }
.landing-page .tab-pane h3,
.landing-page .tab-pane h4 { color: var(--ba-bone) !important; }
.landing-page .nav-tabs { border-color: var(--ba-obsidian-4) !important; }

/* nordvpn / sitelockvpn pricing cards */
.landing-page .pricing .item,
.landing-page .pricing-item,
.landing-page .plan,
.landing-page .plan-card {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r3) !important;
  color: var(--ba-bone) !important;
}
.landing-page .plan h3,
.landing-page .plan-card h3 { color: var(--ba-bone) !important; }
.landing-page .plan p,
.landing-page .plan-card p  { color: var(--ba-bone-dim) !important; }
.landing-page .plan .price  { color: var(--ba-emerald) !important; }

/* ssl validation-levels koyu renk fix */
.landing-page.ssl .validation-levels .item { color: var(--ba-bone) !important; }
.landing-page.ssl .validation-levels .item h4 { color: var(--ba-bone) !important; }
.landing-page.ssl .validation-levels .item p  { color: var(--ba-bone-dim) !important; }

/* codeguard / socialbee genel */
.landing-page .feature,
.landing-page .feature-block,
.landing-page .feature-item-block {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-4) !important;
  border-radius: var(--ba-r2) !important;
}
.landing-page .feature h3,
.landing-page .feature h4 { color: var(--ba-bone) !important; }
.landing-page .feature p  { color: var(--ba-bone-dim) !important; }

/* ── store.css satır 35: hero #333 ──────────────────────── */
.landing-page .hero { color: var(--ba-bone) !important; }

/* ── store.css satır 591,840,1024,1292,1315: #888 griler ── */
.landing-page .text-muted,
.landing-page small,
.landing-page .subtext { color: var(--ba-bone-muted) !important; }

/* ── order.tpl: ürün açıklaması + form alanları ─────────── */
.store-order-container p { color: var(--ba-bone-dim) !important; }
.store-order-container h2 { color: var(--ba-bone) !important; font-family: var(--ba-font-display) !important; }
.store-order-container h4 { color: var(--ba-bone) !important; font-family: var(--ba-font-display) !important; }
.store-order-container .payment-term label { color: var(--ba-bone-dim) !important; }
.store-order-container .tab-pane { color: var(--ba-bone-dim) !important; }

/* Nav tabs (order.tpl domain seçim sekmeleri) */
.store-order-container .nav-tabs { border-color: var(--ba-obsidian-4) !important; }
.store-order-container .nav-tabs .nav-link { color: var(--ba-bone-muted) !important; border-color: transparent !important; }
.store-order-container .nav-tabs .nav-link:hover { color: var(--ba-bone) !important; background: var(--ba-obsidian-4) !important; }
.store-order-container .nav-tabs .nav-link.active {
  color: var(--ba-emerald) !important;
  background: var(--ba-obsidian-3) !important;
  border-top: 2px solid var(--ba-emerald) !important;
  border-left-color: var(--ba-obsidian-4) !important;
  border-right-color: var(--ba-obsidian-4) !important;
  border-bottom-color: var(--ba-obsidian-3) !important;
}

/* upsell card */
.store-promoted-product { color: var(--ba-bone-dim) !important; }
.store-promoted-product h3,
.store-promoted-product h4 { color: var(--ba-bone) !important; }

/* ═══════════════════════════════════════════════════════════
   FATURA SAYFASI (viewinvoice.tpl) — tam koyu tema
   invoice.css bootstrap body/card beyazlarını override eder
   ═══════════════════════════════════════════════════════════ */

/* Sayfa arka planı */
html, body {
  background: var(--ba-obsidian-2) !important;
  color: var(--ba-bone) !important;
}

/* Ana fatura kutusu */
.invoice-container {
  background: var(--ba-obsidian-3) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: 12px !important;
  color: var(--ba-bone) !important;
}

/* Başlık alanı — şirket adı, fatura no */
.invoice-container h2,
.invoice-container h3,
.invoice-container h4,
.invoice-container strong { color: var(--ba-bone) !important; }

/* Adres / küçük metin — tüm miras yollarını kapat */
.invoice-container .small-text,
.invoice-container address,
.invoice-container address *,
.invoice-container p,
.invoice-container span { color: var(--ba-bone-dim) !important; }

/* Bootstrap .text-muted ve caption rengi override */
.invoice-container .text-muted,
.invoice-container caption { color: var(--ba-bone-muted) !important; }

/* Fatura durumu */
.invoice-container .invoice-status { color: var(--ba-bone) !important; }
.invoice-container .paid       { color: var(--ba-emerald) !important; }
.invoice-container .unpaid     { color: var(--ba-rose) !important; }
.invoice-container .draft,
.invoice-container .cancelled  { color: var(--ba-bone-muted) !important; }
.invoice-container .refunded   { color: var(--ba-azure) !important; }
.invoice-container .collections{ color: var(--ba-amber) !important; }

/* Vade tarihi */
.invoice-container .small-text { color: var(--ba-bone-dim) !important; }

/* HR çizgisi */
.invoice-container hr { border-color: var(--ba-obsidian-5) !important; }

/* Fatura kalemleri tablosu */
.invoice-container .table {
  color: var(--ba-bone-dim) !important;
  border-color: var(--ba-obsidian-4) !important;
}
.invoice-container .table th,
.invoice-container .table td {
  border-color: var(--ba-obsidian-4) !important;
  color: var(--ba-bone-dim) !important;
}
.invoice-container .table thead td {
  color: var(--ba-bone-muted) !important;
  font-family: var(--ba-font-mono) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ba-obsidian-4) !important;
}
/* Toplam satırları */
.invoice-container td.total-row {
  background: var(--ba-obsidian-4) !important;
  color: var(--ba-bone) !important;
  font-weight: 600;
}

/* İşlem geçmişi kartı */
.invoice-container .card {
  background: var(--ba-obsidian-4) !important;
  border: 1px solid var(--ba-obsidian-5) !important;
  border-radius: 10px !important;
}
.invoice-container .card-title {
  background: var(--ba-azure) !important;
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 8px 8px 0 0 !important;
  font-size: 0.875rem !important;
  font-family: var(--ba-font-display) !important;
}
/* bg-info override (başlık şeridi) */
.invoice-container .bg-info {
  background: var(--ba-azure) !important;
  color: #fff !important;
}
.invoice-container .bg-success {
  background: var(--ba-green) !important;
  color: #fff !important;
}

/* Kredi uygulama kartı */
.invoice-container .card-body { color: var(--ba-bone-dim) !important; }

/* Butonlar */
.invoice-container .btn-default {
  background: var(--ba-obsidian-5) !important;
  border-color: var(--ba-obsidian-6) !important;
  color: var(--ba-bone-dim) !important;
  border-radius: 8px !important;
}
.invoice-container .btn-default:hover {
  background: var(--ba-obsidian-6) !important;
  color: var(--ba-bone) !important;
}
.invoice-container .btn-primary {
  background: var(--ba-emerald) !important;
  border-color: var(--ba-emerald) !important;
  color: var(--ba-obsidian) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.invoice-container .btn-primary:hover {
  background: var(--ba-emerald-dim) !important;
  box-shadow: 0 0 16px var(--ba-emerald-glow) !important;
}
.invoice-container .btn-success {
  background: var(--ba-green) !important;
  border-color: var(--ba-green) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Ödeme yöntemi select */
.invoice-container .custom-select {
  background-color: var(--ba-obsidian-4) !important;
  border-color: var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  border-radius: 8px !important;
}

/* Geri dön linki */
.text-center a { color: var(--ba-emerald) !important; }
.text-center a:hover { color: var(--ba-emerald-dim) !important; }

/* Alert kartları (başarı / hata) */
.invoice-container .alert-success {
  background: rgba(0,166,62,.12) !important;
  border-color: var(--ba-green) !important;
  color: #6ee7a0 !important;
}
.invoice-container .alert-danger {
  background: rgba(244,63,94,.12) !important;
  border-color: var(--ba-rose) !important;
  color: #fca5a5 !important;
}
.invoice-container .alert-info {
  background: rgba(14,165,233,.12) !important;
  border-color: var(--ba-azure) !important;
  color: #7dd3fc !important;
}

/* Input (kredi miktarı) */
.invoice-container .form-control {
  background: var(--ba-obsidian-3) !important;
  border-color: var(--ba-obsidian-5) !important;
  color: var(--ba-bone) !important;
  border-radius: 8px !important;
}
.invoice-container .form-control:focus {
  border-color: var(--ba-emerald-border) !important;
  box-shadow: 0 0 0 3px var(--ba-emerald-glow) !important;
}

/* ── Fatura sayfası mobil boyut ─────────────────────────── */
/* Masaüstü: padding biraz daralt */
.invoice-container {
  padding: 48px !important;
  max-width: 820px !important;
}

/* Tablet (≤895px) */
@media (max-width: 895px) {
  .invoice-container {
    margin: 12px !important;
    padding: 32px !important;
  }
}

/* Mobil (≤767px) */
@media (max-width: 767px) {
  .invoice-container {
    margin: 8px !important;
    padding: 20px !important;
    border-radius: 10px !important;
  }
  .invoice-container .invoice-status { font-size: 18px !important; }
  .invoice-container h2 { font-size: 1.3rem !important; }
  .invoice-container h3 { font-size: 1.1rem !important; }
  .invoice-container .table { font-size: 0.85rem !important; }
  .invoice-container .table th,
  .invoice-container .table td { padding: 6px 8px !important; }
}

/* Küçük mobil (≤499px) */
@media (max-width: 499px) {
  .invoice-container {
    margin: 4px !important;
    padding: 16px !important;
    border-radius: 8px !important;
  }
  .invoice-container .btn { font-size: 0.8rem !important; padding: 6px 12px !important; }
}

/* ── Ürün açıklaması – dark mod düzeltmeleri ──────────────── */
.landing-page .product-options .item {
  background-color: var(--ba-obsidian-3) !important;
  color: var(--ba-bone) !important;
}
.landing-page .product-options p {
  color: var(--ba-bone-dim) !important;
}
.landing-page .product-options h4,
.landing-page .product-options h3,
.landing-page .product-options h2 {
  color: var(--ba-bone) !important;
}
.landing-page .product-options span {
  color: var(--ba-bone-dim) !important;
}
.landing-page .product-options .icon {
  color: var(--ba-emerald) !important;
}
.landing-page .product-options .price,
.landing-page .product-options .from-price {
  color: var(--ba-emerald) !important;
}
/* Ürün kartı genel */
.product-card, .service-card {
  background: var(--ba-obsidian-3) !important;
  color: var(--ba-bone) !important;
}
.product-card p, .service-card p,
.product-card .description, .service-card .description {
  color: var(--ba-bone-dim) !important;
}
/* plan-description zaten var ama güçlendir */
.plan-description, .product-description, .service-description,
.product-info p, .service-info p {
  color: var(--ba-bone-dim) !important;
}

/* ── Sipariş formu ürün açıklaması rengi ──────────────────── */
body #order-standard_cart .products .product div.product-desc {
  color: var(--ba-obsidian) !important;
}