@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* =========================================================
   Barbarostech ana tema katmanı — WHMCS "twenty-one" için
   NOT: Bu dosya üst menü / footer / sayfa başlığı bandına
   DOKUNMAZ — mevcut temanızın header'ı olduğu gibi kalır.
   O bölümleri de bu tasarıma çevirmek isterseniz
   optional-header-footer.css dosyasını ekleyin.
   Kurulum: templates/twenty-one klasörünü kopyalayın
   (örn. templates/barbarostech) ve bu dosyayı
   assets/css/custom.css olarak koyun.
   "six" temasında yol: templates/six/css/custom.css
   Sipariş formu (barbaros_cart) ile aynı token'ları kullanır.
   ========================================================= */

:root {
    --bt-bg: #f5f6f8;
    --bt-surface: #ffffff;
    --bt-ink: #171b26;
    --bt-ink-2: #3d4557;
    --bt-muted: #6c7484;
    --bt-line: #e6e8ee;
    --bt-line-2: #f0f1f5;
    --bt-accent: #2b63d9;
    --bt-accent-dark: #1c49ab;
    --bt-accent-soft: #eef3fd;
    --bt-ok: #17915c;
    --bt-ok-soft: #e8f6ef;
    --bt-warn: #b8791f;
    --bt-warn-soft: #fdf6e9;
    --bt-danger: #c2402f;
    --bt-danger-soft: #fdeeec;
    --bt-r: 12px;
    --bt-r-sm: 9px;
    --bt-r-lg: 16px;
    --bt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --bt-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .03);
    --bt-shadow-lg: 0 10px 30px rgba(16, 24, 40, .09);
    --bt-shadow-xl: 0 20px 48px rgba(16, 24, 40, .14);
    --bt-ease: cubic-bezier(.2, .7, .3, 1);
    --bt-font: 'Manrope', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --bt-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Tile vurgu renkleri (anasayfa widget'ları) */
.tile .highlight.bg-color-blue, .bg-color-blue { background: var(--bt-accent) !important; }
.tile .highlight.bg-color-green, .bg-color-green { background: var(--bt-ok) !important; }
.tile .highlight.bg-color-gold, .bg-color-gold { background: var(--bt-warn) !important; }
.tile .highlight.bg-color-red, .bg-color-red { background: var(--bt-danger) !important; }
.tile .highlight.bg-color-purple, .bg-color-purple { background: #7c5cd6 !important; }

/* ---------- Temel ---------- */

body {
    background: var(--bt-bg) !important;
    color: var(--bt-ink-2) !important;
    font-family: var(--bt-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    -webkit-font-smoothing: antialiased !important;
}

body, h1, h2, h3, h4, h5, h6, p, a, span, li, label,
input, select, textarea, button, .btn, .nav, .card, .panel {
    font-family: var(--bt-font) !important;
}

h1, h2, h3, h4, h5 {
    color: var(--bt-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

h1 { font-size: clamp(24px, 2.6vw, 32px); }
h2 { font-size: clamp(20px, 2.1vw, 25px); }
h3 { font-size: 19px; }
h4 { font-size: 16px; }

a { color: var(--bt-accent); }
a:hover, a:focus { color: var(--bt-accent-dark); text-decoration: none; }

.text-muted, .small, small { color: var(--bt-muted) !important; }

code, kbd, pre, .monospace,
.amount, .price, .invoice-total, td.text-right .amount {
    font-family: var(--bt-mono) !important;
    font-variant-numeric: tabular-nums !important;
}

/* ---------- Kart ve paneller ---------- */

.card, .panel {
    overflow: hidden !important;
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r) !important;
    box-shadow: var(--bt-shadow) !important;
    transition: box-shadow .18s var(--bt-ease), border-color .18s var(--bt-ease), transform .18s var(--bt-ease) !important;
}

.card.card-hover:hover, a.card:hover, .tile:hover {
    border-color: #cfd8ea !important;
    box-shadow: var(--bt-shadow-lg) !important;
    transform: translateY(-2px);
}

.card-header, .panel-heading {
    background: var(--bt-surface) !important;
    border-bottom: 1px solid var(--bt-line) !important;
    padding: 15px 18px !important;
    border-radius: var(--bt-r) var(--bt-r) 0 0 !important;
}

.card-header h3, .panel-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--bt-muted) !important;
    margin: 0 !important;
}

.card-body, .panel-body { padding: 18px; }

.card-footer, .panel-footer {
    background: #fbfcfe !important;
    border-top: 1px solid var(--bt-line) !important;
}

.list-group { border-radius: var(--bt-r); }

.list-group-item {
    border: 0 !important;
    border-radius: var(--bt-r-sm) !important;
    padding: 11px 13px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bt-ink-2) !important;
}

.list-group-item:hover { background: var(--bt-line-2); }

.list-group-item.active,
.list-group-item.active:hover {
    background: var(--bt-accent-soft) !important;
    border-color: transparent !important;
    color: var(--bt-accent-dark) !important;
}

/* ---------- Butonlar ---------- */

.btn {
    border-radius: var(--bt-r-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 11px 18px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    white-space: normal !important;
    transition: background-color .15s var(--bt-ease), border-color .15s var(--bt-ease), color .15s var(--bt-ease), box-shadow .15s var(--bt-ease), transform .1s var(--bt-ease) !important;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible, .form-control:focus-visible, a:focus-visible, .list-group-item:focus-visible {
    outline: 2px solid var(--bt-accent) !important;
    outline-offset: 2px !important;
}

.btn-lg { padding: 14px 28px; font-size: 15px; font-weight: 700; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.btn-primary, .btn-success {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bt-accent) 100%, white 6%), var(--bt-accent)) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 16px rgba(43, 99, 217, .18) !important;
}

.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
    background: var(--bt-accent-dark) !important;
    border-color: var(--bt-accent-dark) !important;
    box-shadow: 0 6px 18px rgba(43, 99, 217, .26) !important;
    transform: translateY(-1px);
}

.btn-default, .btn-secondary, .btn-light {
    background: #fff !important;
    border-color: #d8dce6 !important;
    color: var(--bt-ink-2) !important;
}

.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
    border-color: var(--bt-accent) !important;
    color: var(--bt-accent) !important;
    background: #fff !important;
}

.btn-dark, .btn-inverse {
    background: var(--bt-ink) !important;
    border-color: var(--bt-ink) !important;
    color: #fff !important;
}

.btn-danger { background: var(--bt-danger); border-color: var(--bt-danger); }

.btn-link { color: var(--bt-accent); font-weight: 600; }

/* ---------- Formlar ---------- */

label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--bt-ink-2) !important;
    margin-bottom: 6px !important;
}

.form-control, .custom-select, select.form-control {
    height: auto !important;
    padding: 11px 14px !important;
    border: 1px solid #d8dce6 !important;
    border-radius: var(--bt-r-sm) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: var(--bt-ink) !important;
    max-width: 100% !important;
}

.form-control:focus, .custom-select:focus {
    border-color: var(--bt-accent) !important;
    box-shadow: 0 0 0 3px rgba(43, 99, 217, .13) !important;
}

.form-control::placeholder { color: #9aa1b1; }

.input-group-text {
    background: var(--bt-line-2) !important;
    border-color: #d8dce6 !important;
    color: var(--bt-muted) !important;
}

/* İkon önekli alanlar (kayıt/fatura formları) — .form-control genel padding'i ezmesin */
.prepend-icon {
    position: relative !important;
}

.prepend-icon > .field-icon {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 42px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    color: #9aa1b1 !important;
}

.prepend-icon > .field,
.prepend-icon > .input-group > .field,
.prepend-icon .form-control {
    padding-left: 42px !important;
}

/* Telefon alanı ülke bayrağı eklentisi (intl-tel-input, jackocnr sürümü — gerçek class: .intl-tel-input) */
.intl-tel-input {
    width: 100% !important;
    position: relative !important;
}

.intl-tel-input .flag-container {
    z-index: 3 !important;
}

.intl-tel-input input,
.intl-tel-input input[type="tel"],
.intl-tel-input input[type="text"] {
    padding-left: 88px !important;
}

.intl-tel-input.iti-sdc-2 input { padding-left: 78px !important; }
.intl-tel-input.iti-sdc-3 input { padding-left: 88px !important; }
.intl-tel-input.iti-sdc-4 input { padding-left: 98px !important; }
.intl-tel-input.iti-sdc-5 input { padding-left: 108px !important; }

/* Alan aynı zamanda .prepend-icon içindeyse jenerik ikon bayrakla çakışmasın diye gizlenir */
.prepend-icon:has(.intl-tel-input) > .field-icon {
    display: none !important;
}

/* ---------- Tablolar ---------- */

.table {
    background: var(--bt-surface) !important;
    border-radius: var(--bt-r) !important;
    font-size: 14px !important;
}

.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--bt-r) !important;
}

.card > .table,
.card > .table-responsive,
.panel > .table,
.panel > .table-responsive {
    margin-bottom: 0 !important;
}

.table > thead > tr > th,
.table thead th {
    background: #fbfcfe !important;
    border-bottom: 1px solid var(--bt-line) !important;
    border-top: 0 !important;
    font-family: var(--bt-mono) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--bt-muted) !important;
    padding: 12px 14px !important;
}

.table > tbody > tr > td,
.table tbody td {
    border-top: 1px solid var(--bt-line-2) !important;
    padding: 14px !important;
    vertical-align: middle !important;
    color: var(--bt-ink-2) !important;
    font-weight: 500 !important;
}

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

.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--bt-r-sm) !important;
    border: 1px solid #d8dce6 !important;
    padding: 8px 12px !important;
}

/* ---------- Rozetler / durum etiketleri ---------- */

.label, .badge {
    border-radius: 20px !important;
    padding: 5px 11px !important;
    font-family: var(--bt-mono) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.label-success, .badge-success, .status-active, .label-active {
    background: var(--bt-ok-soft) !important;
    color: var(--bt-ok) !important;
}

.label-danger, .badge-danger, .status-cancelled, .status-terminated {
    background: #fdeeec !important;
    color: var(--bt-danger) !important;
}

.label-warning, .badge-warning, .status-pending {
    background: #fdf6e9 !important;
    color: var(--bt-warn) !important;
}

.label-info, .badge-info, .label-default, .badge-secondary {
    background: var(--bt-accent-soft) !important;
    color: var(--bt-accent-dark) !important;
}

/* ---------- Uyarılar ---------- */

.alert {
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r) !important;
    padding: 14px 18px !important;
    font-size: 13.5px !important;
}

.alert-info { background: var(--bt-accent-soft); border-color: rgba(43, 99, 217, .22); color: var(--bt-accent-dark); }
.alert-success { background: var(--bt-ok-soft); border-color: rgba(23, 145, 92, .25); color: #0f6b45; }
.alert-warning { background: #fdf6e9; border-color: #f0dcb5; color: var(--bt-warn); }
.alert-danger { background: #fdeeec; border-color: #f3cdc7; color: var(--bt-danger); }

/* ---------- Anasayfa "tile" widget'ları (twenty-one clientareahome) ---------- */

.tile {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r) !important;
    box-shadow: var(--bt-shadow) !important;
    padding: 20px 18px 18px !important;
    text-align: left !important;
    cursor: pointer;
}

.tile a { color: inherit !important; }

.tile .icon, .tile > i {
    font-size: 20px;
    color: var(--bt-accent);
    margin-bottom: 10px;
    display: block;
}

.tile .stat {
    font-family: var(--bt-mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--bt-ink);
    line-height: 1.1;
}

.tile .title {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bt-muted);
}

.tile .highlight {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 !important;
    margin: 0 0 18px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

.breadcrumb-item, .breadcrumb-item a { color: var(--bt-muted) !important; }
.breadcrumb-item a:hover { color: var(--bt-accent) !important; }
.breadcrumb-item.active { color: var(--bt-ink) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #c3c9d6 !important; }

/* ---------- Sayfalama ---------- */

.pagination { gap: 4px; }

.page-item .page-link {
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r-sm) !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bt-ink-2) !important;
}

.page-item .page-link:hover { border-color: var(--bt-accent) !important; color: var(--bt-accent) !important; background: var(--bt-accent-soft) !important; }
.page-item.active .page-link { background: var(--bt-accent) !important; border-color: var(--bt-accent) !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: .45; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r-sm) !important;
    padding: 6px 12px !important;
    margin-left: 4px !important;
    color: var(--bt-ink-2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}

/* ---------- Genel açılır menü (navbar dışı) ---------- */

.dropdown-menu {
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r) !important;
    box-shadow: var(--bt-shadow-lg) !important;
    padding: 8px !important;
}

.dropdown-item {
    border-radius: var(--bt-r-sm) !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--bt-ink-2) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--bt-accent-soft) !important;
    color: var(--bt-accent-dark) !important;
}

.dropdown-divider { border-color: var(--bt-line) !important; }

/* ---------- Modal ---------- */

.modal-content {
    border: 0 !important;
    border-radius: var(--bt-r-lg) !important;
    box-shadow: var(--bt-shadow-xl) !important;
}

.modal-header { border-bottom: 1px solid var(--bt-line) !important; padding: 18px 22px !important; }
.modal-title { font-size: 16px !important; font-weight: 700 !important; color: var(--bt-ink) !important; }
.modal-body { padding: 22px !important; color: var(--bt-ink-2); }
.modal-footer { border-top: 1px solid var(--bt-line) !important; padding: 16px 22px !important; gap: 10px; }

/* ---------- Tooltip / Popover ---------- */

.tooltip-inner {
    background: var(--bt-ink) !important;
    border-radius: var(--bt-r-sm) !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.popover {
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r) !important;
    box-shadow: var(--bt-shadow-lg) !important;
}

.popover-header {
    background: var(--bt-surface) !important;
    border-bottom: 1px solid var(--bt-line) !important;
    font-weight: 700 !important;
    color: var(--bt-ink) !important;
}

/* ---------- Custom checkbox / radio (Bootstrap 4) ---------- */

.custom-control-label::before {
    border: 1.5px solid #ccd2e0 !important;
    box-shadow: none !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(43, 99, 217, .13) !important;
}

.custom-switch .custom-control-label::before { border-radius: 20px !important; }

/* ---------- İlerleme çubuğu (parola gücü, disk kullanımı vb.) ---------- */

.progress {
    height: 8px !important;
    border-radius: 20px !important;
    background: var(--bt-line-2) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.progress-bar { background-color: var(--bt-accent) !important; }
.progress-bar.bg-success { background-color: var(--bt-ok) !important; }
.progress-bar.bg-warning { background-color: var(--bt-warn) !important; }
.progress-bar.bg-danger { background-color: var(--bt-danger) !important; }

/* ---------- Destek talebi görünümü (viewticket) ---------- */

.posted-by-name { font-weight: 700; color: var(--bt-ink); }
.posted-on { font-family: var(--bt-mono); font-size: 11.5px; color: var(--bt-muted); }

.requestor-badge {
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-family: var(--bt-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.requestor-type-client { background: var(--bt-accent-soft) !important; color: var(--bt-accent-dark) !important; }
.requestor-type-staff, .requestor-type-admin { background: var(--bt-ok-soft) !important; color: var(--bt-ok) !important; }

/* ---------- Avatar / gravatar ---------- */

.avatar, .gravatar, img.rounded-circle {
    border-radius: 50% !important;
    border: 2px solid var(--bt-surface) !important;
    box-shadow: 0 0 0 1px var(--bt-line) !important;
}

/* ---------- Arama kutusu (bilgi bankası) ---------- */

.input-group-prepend .btn, .input-group-append .btn {
    border-color: #d8dce6 !important;
}

.prepended-form-control { border-radius: 0 var(--bt-r-sm) var(--bt-r-sm) 0 !important; }

/* ---------- Ağ durumu / bakım bildirim çubuğu ---------- */

#network-issue-notification .alert,
.network-status-bar {
    border-radius: 0 !important;
    border-width: 0 0 1px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
}

/* ---------- Boş durum mesajları ---------- */

.view-cart-empty, .empty-state, .dataTables_empty {
    padding: 46px 20px !important;
    text-align: center !important;
    color: var(--bt-muted) !important;
    font-size: 14.5px !important;
}

/* ---------- Ana sayfa kısayolları / hizmet kutuları ---------- */

.home-shortcuts .btn,
.panel-shortcut,
.client-home-panels .card {
    border-radius: var(--bt-r) !important;
}

.home-shortcuts .btn {
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-line) !important;
    box-shadow: var(--bt-shadow) !important;
    padding: 22px 16px !important;
    font-weight: 700 !important;
    color: var(--bt-ink) !important;
}

.home-shortcuts .btn:hover {
    border-color: var(--bt-accent) !important;
    color: var(--bt-accent) !important;
    box-shadow: var(--bt-shadow-lg) !important;
}

.home-shortcuts .btn i,
.home-shortcuts .btn .fas {
    color: var(--bt-accent) !important;
    margin-bottom: 8px !important;
}

/* ---------- Sekmeler ---------- */

.nav-tabs {
    border-bottom: 1px solid var(--bt-line) !important;
}

.nav-tabs > li > a,
.nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 13px 15px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--bt-muted) !important;
}

.nav-tabs > li.active > a,
.nav-tabs .nav-link.active {
    background: none !important;
    border: 0 !important;
    border-bottom: 2px solid var(--bt-accent) !important;
    color: var(--bt-accent) !important;
}

/* ---------- Fatura ---------- */

.invoice-container, #invoice {
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r) !important;
    box-shadow: var(--bt-shadow) !important;
    padding: 26px !important;
}

.invoice-total, .total-due {
    font-family: var(--bt-mono) !important;
    font-weight: 700 !important;
    color: var(--bt-ink) !important;
    white-space: nowrap !important;
}

/* ---------- Mağaza anasayfası (index.tpl) — gerçek kurulumdan görülen sınıflar ---------- */

.card-columns.home {
    column-count: 3;
    column-gap: 16px;
}

.card-columns.home .card {
    break-inside: avoid;
}

.pricing-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bt-ink) !important;
}

.btn-outline-primary {
    background: transparent !important;
    border-color: var(--bt-accent) !important;
    color: var(--bt-accent) !important;
}

.btn-outline-primary:hover {
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}

.btn-outline-secondary, .btn-outline-dark {
    background: transparent !important;
    border-color: #d8dce6 !important;
    color: var(--bt-ink-2) !important;
}

.btn-outline-danger { background: transparent !important; border-color: var(--bt-danger) !important; color: var(--bt-danger) !important; }
.btn-outline-danger:hover { background: var(--bt-danger) !important; color: #fff !important; }

.action-icon-btns a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 12px;
    background: var(--bt-surface);
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-r);
    box-shadow: var(--bt-shadow);
    color: var(--bt-ink) !important;
    font-weight: 700;
    font-size: 13.5px;
    text-align: center;
    transition: box-shadow .18s var(--bt-ease), border-color .18s var(--bt-ease), transform .18s var(--bt-ease);
}

.action-icon-btns a:hover {
    border-color: var(--bt-accent);
    box-shadow: var(--bt-shadow-lg);
    transform: translateY(-2px);
    color: var(--bt-ink) !important;
}

.action-icon-btns .ico-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 50%;
    background: var(--bt-accent-soft);
    color: var(--bt-accent);
    font-size: 18px;
}

/* Ayrı renk kategorileri yerine tek, sakin vurgu rengi (aşırı renk karışıklığını önler) */
.card-accent-teal .ico-container, .card-accent-green .ico-container { background: var(--bt-ok-soft); color: var(--bt-ok); }
.card-accent-pomegranate .ico-container { background: var(--bt-danger-soft); color: var(--bt-danger); }
.card-accent-sun-flower .ico-container { background: var(--bt-warn-soft); color: var(--bt-warn); }
.card-accent-asbestos .ico-container, .card-accent-midnight-blue .ico-container { background: var(--bt-accent-soft); color: var(--bt-accent); }

/* ---------- Dil / para birimi seçici modalı ---------- */

.modal-localisation .item-selector .item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--bt-r-sm);
    color: var(--bt-ink-2) !important;
    font-weight: 600;
    text-align: center;
}

.modal-localisation .item-selector .item:hover { background: var(--bt-line-2); }
.modal-localisation .item-selector .item.active { background: var(--bt-accent-soft); color: var(--bt-accent-dark) !important; }

/* ---------- Yönetici oturumuna dön butonu ---------- */
/* Not: bu genelde ekran kenarında dikey/rotated bir şerittir; sadece renk
   veriyoruz, konum/boyutuna (theme.min.css) dokunmuyoruz. */

.btn-return-to-admin {
    background: var(--bt-ink) !important;
    color: #fff !important;
}

/* ---------- Taşma korumaları ---------- */

.container, .container-fluid, [class*="col-"] { min-width: 0; }
img, table, pre { max-width: 100%; }
.card-body, .panel-body { overflow-wrap: break-word; }

@media (max-width: 767px) {
    .jumbotron { padding: 30px 0 26px; }
    .table > tbody > tr > td { padding: 11px; }
}

/* =========================================================
   Üst menü, sayfa başlığı bandı ve alt bilgi
   (önceden ayrı "optional-header-footer.css" dosyasıydı — twenty-one
   yalnızca TEK custom.css yüklediği için buraya birleştirildi)
   ========================================================= */

#header, .navbar, #main-menu, .header-lined {
    font-family: var(--bt-font) !important;
}

#main-menu .navbar,
#header .navbar,
.navbar-default,
.navbar-light {
    background: var(--bt-ink) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
}

/* İkinci navbar (ör. ana menü şeridi, .main-navbar-wrapper) — aynı koyu tonun bir tık altı, ayrım için */
#header .navbar.main-navbar-wrapper {
    background: #1d2233 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
}

/* Sadece hesap/bildirim gibi gerçekten küçük ikincil bilgi çubuklarında kullanın (bu class'ı elle ekleyin) */
.navbar-secondary {
    background: #20263a !important;
    padding: 9px 0 !important;
    font-size: 12.5px !important;
    min-height: 40px !important;
    overflow: hidden !important;
}

.navbar-secondary .container {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.navbar-secondary .badge {
    margin-left: 4px !important;
}

.btn-active-client {
    border-radius: 20px !important;
    padding: 6px 13px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

.navbar .badge, .notifications-toggle .badge, #cartItemCount {
    background: var(--bt-danger) !important;
    color: #fff !important;
}

.navbar .cart-btn { color: rgba(255, 255, 255, .85) !important; }
.navbar .cart-btn:hover { color: #fff !important; }

.navbar-light .input-group .form-control {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}

.navbar-light .input-group .form-control::placeholder { color: rgba(255, 255, 255, .5) !important; }
.navbar-light .input-group-prepend .btn { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .16) !important; color: rgba(255, 255, 255, .8) !important; }

.navbar .navbar-brand,
#logo a {
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
}

.navbar .nav > li > a,
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav > li > a {
    white-space: nowrap !important;
    color: rgba(255, 255, 255, .74) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    padding: 14px 15px !important;
    border-radius: var(--bt-r-sm) !important;
}

.navbar .nav > li > a:hover,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .navbar-nav .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .09) !important;
}

/* Logo genelde beyaz zeminli bir görsel — koyu barda köşeleri yuvarlayıp rozet gibi göster */
.navbar-brand, #logo a {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--bt-r-sm) !important;
    overflow: hidden !important;
}

.navbar .dropdown-menu {
    border: 1px solid var(--bt-line) !important;
    border-radius: var(--bt-r) !important;
    box-shadow: var(--bt-shadow-lg) !important;
    padding: 8px !important;
    margin-top: 6px !important;
}

.navbar .dropdown-menu > li > a,
.navbar .dropdown-item {
    border-radius: var(--bt-r-sm) !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bt-ink-2) !important;
    text-transform: none !important;
}

.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-item:hover {
    background: var(--bt-accent-soft) !important;
    color: var(--bt-accent-dark) !important;
}

/* ---------- Sayfa başlığı bandı ---------- */

#header .header-lined,
.jumbotron,
#main-body > .container > h1:first-child {
    background: none !important;
}

.jumbotron {
    background: linear-gradient(180deg, #fbfcfe 0%, var(--bt-bg) 100%) !important;
    border-bottom: 1px solid var(--bt-line) !important;
    border-radius: 0 !important;
    padding: 44px 0 40px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

.jumbotron h1 {
    font-size: clamp(28px, 3.4vw, 44px) !important;
    letter-spacing: -.03em !important;
    margin: 0 !important;
}

.jumbotron p {
    color: var(--bt-muted) !important;
    font-size: 15px !important;
    margin-top: 8px !important;
}

/* ---------- Breadcrumb bandı (ana menülerin hemen altında) ---------- */

nav[aria-label="breadcrumb"], .breadcrumb-bar, .master-breadcrumb {
    background: var(--bt-surface) !important;
    border-bottom: 1px solid var(--bt-line) !important;
}

nav[aria-label="breadcrumb"] .breadcrumb, .breadcrumb-bar .breadcrumb, .master-breadcrumb .breadcrumb {
    max-width: 1140px;
    margin: 0 auto !important;
    padding: 12px 15px !important;
}

/* ---------- Alt bilgi ---------- */

#footer, .footer {
    background: var(--bt-ink) !important;
    border: 0 !important;
    color: rgba(255, 255, 255, .6) !important;
    padding: 34px 0 !important;
    margin-top: 46px !important;
    font-size: 13.5px !important;
}

#footer a, .footer a { color: rgba(255, 255, 255, .82); }
#footer a:hover, .footer a:hover { color: #fff; }

#footer .list-inline .btn, .footer .list-inline .btn {
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

#footer .list-inline .btn:hover, .footer .list-inline .btn:hover { color: #fff !important; }
#footer .copyright, .footer .copyright { color: rgba(255, 255, 255, .5) !important; font-size: 12.5px !important; }