/* ═══════════════════════════════════════════════════════════════════════
 * 🎨 AYDINCLOUD48 - MODERN MAVI TEMA (v50) 🎨
 * BUILD: 2026-07-05-v50
 * Bu yorumu görüyorsan → doğru tema yüklendi ✓
 * 
 * Tema klasörü: /templates/aydincloud48/
 * theme.yaml: name: "AydinCloud48"
 * 
 * v12 düzeltmeleri:
 *   - Order form Kategoriler paneli: saran KOLON da full genişlik (:has)
 *   - col-3 gibi dar kolonlar mobilde full
 *   - (v11'den) sepet mavi barı + promo icon düzeltmeleri dahil
 * ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─────────────────────────────────────────────────────────────────────
 * RENK PALETI - aydincloud.com ana sayfa ile uyumlu
 * ───────────────────────────────────────────────────────────────────── */
:root {
    --ac-primary: #2563EB;
    --ac-primary-dark: #1E40AF;
    --ac-primary-light: #3B82F6;
    --ac-primary-soft: #DBEAFE;
    --ac-primary-bg: #EFF6FF;
    --ac-navy: #0F1B36;
    --ac-navy-soft: #1E3A5F;
    --ac-dark: #0F172A;
    --ac-text: #475569;
    --ac-text-light: #64748B;
    --ac-muted: #94A3B8;
    --ac-border: #E2E8F0;
    --ac-border-light: #F1F5F9;
    --ac-bg: #F8FAFC;
    --ac-bg-card: #FFFFFF;
    --ac-success: #10B981;
    --ac-warning: #F59E0B;
    --ac-danger: #EF4444;
    --ac-info: #3B82F6;
    --ac-gold: #F59E0B;
    --ac-emerald: #10B981;
    --ac-asbestos: #64748B;
    --ac-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ac-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ac-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --ac-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08);
    --ac-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08);
    --ac-radius-sm: 6px;
    --ac-radius: 8px;
    --ac-radius-md: 10px;
    --ac-radius-lg: 12px;
    --ac-radius-xl: 16px;
    --ac-radius-full: 9999px;
    --ac-transition: all 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────────
 * RESET & BASE
 * ───────────────────────────────────────────────────────────────────── */
html {
    overflow-x: hidden !important;
}

body,
body.primary-bg-color,
html body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--ac-text) !important;
    background-color: var(--ac-bg) !important;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', sans-serif !important;
    color: var(--ac-dark) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
}

h1, .h1 { font-size: 1.875rem !important; font-weight: 800 !important; }
h2, .h2 { font-size: 1.5rem !important; }
h3, .h3 { font-size: 1.25rem !important; }
h4, .h4 { font-size: 1.0625rem !important; }
h5, .h5 { font-size: 1rem !important; }

a {
    color: var(--ac-primary) !important;
    transition: var(--ac-transition) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--ac-primary-dark) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * TOP BAR (logged-out, login sayfası üst barı)
 * topbar91.tpl içeriği: search + chat ikonu + sepet + hesap dropdown
 * ───────────────────────────────────────────────────────────────────── */
.top-bar-section {
    background: var(--ac-bg-card) !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    padding: 10px 0 !important;
}

.top-bar-section .top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
}

.top-bar-section .top-bar-left-content,
.top-bar-section .top-bar-right-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.top-bar-section .top-bar-left-content {
    flex: 1 !important;
    justify-content: flex-start !important;
}

.top-bar-section .top-bar-right-content {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
}

.top-bar-section .top-bar-left-content > li,
.top-bar-section .top-bar-right-content > li {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Search alanı */
.top-bar-section .topbar-search {
    flex: 1 !important;
    max-width: 360px !important;
}

.top-bar-section .topbar-search form {
    width: 100% !important;
}

.top-bar-section .input-group.search {
    width: 100% !important;
    display: flex !important;
}

.top-bar-section .input-group.search .btn-default {
    background: var(--ac-bg) !important;
    border: 1px solid var(--ac-border) !important;
    border-right: none !important;
    color: var(--ac-text-light) !important;
    border-radius: var(--ac-radius) 0 0 var(--ac-radius) !important;
    padding: 7px 12px !important;
}

.top-bar-section .input-group.search .form-control {
    border: 1px solid var(--ac-border) !important;
    border-left: none !important;
    border-radius: 0 var(--ac-radius) var(--ac-radius) 0 !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    background: var(--ac-bg) !important;
    height: auto !important;
    box-shadow: none !important;
}

.top-bar-section .input-group.search .form-control:focus {
    background: var(--ac-bg-card) !important;
    border-color: var(--ac-primary) !important;
}

/* Sağ taraftaki ikonlar (chat, sepet) - badge için overflow görünür */
.top-bar-section .top-bar-right-content > li {
    position: relative !important;
}

.top-bar-section .top-bar-right-content > li > a:not(.dropdown-item) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--ac-radius) !important;
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    border: 1px solid var(--ac-border-light) !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 0 !important;
    transition: var(--ac-transition) !important;
    overflow: visible !important;
}

.top-bar-section .top-bar-right-content > li > a:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    border-color: var(--ac-primary-light) !important;
}

/* Sepet sayı badge'i - yuvarlak, beyaz çerçeveli, taşmadan */
.top-bar-section .top-bar-right-content .cart-btn .badge-info,
.top-bar-section .cart-btn .badge,
.top-bar-section .cart-btn #cartItemCount {
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    background: var(--ac-primary) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    min-width: 19px !important;
    width: 19px !important;
    height: 19px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--ac-bg-card) !important;
    box-sizing: border-box !important;
}

/* Hesap dropdown ("Hesap ▼") - navbar.tpl içinden geliyor */
.top-bar-section .top-bar-right-content .dropdown-toggle,
.top-bar-section .top-bar-right-content > li.dropdown > a,
.top-bar-section .top-bar-right-content > li.account > a {
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    border: 1px solid var(--ac-border-light) !important;
    border-radius: var(--ac-radius) !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: auto !important;
    height: auto !important;
}

.top-bar-section .top-bar-right-content .dropdown-toggle:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    border-color: var(--ac-primary-light) !important;
}

/* Login sayfası topbar mobil */
@media (max-width: 768px) {
    /* GLOBAL mobil yatay taşma engelleyici - sayfa sola/sağa kaymasın */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .top-bar-section .top-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .top-bar-section .topbar-search {
        max-width: 100% !important;
        order: 3 !important;
        width: 100% !important;
    }
    
    .top-bar-section .top-bar-right-content {
        margin-left: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * HEADER TOPBAR (logged-in, üst gri/beyaz alan)
 * ───────────────────────────────────────────────────────────────────── */
#header.header {
    background: var(--ac-bg-card) !important;
}

#header.header .topbar {
    background: var(--ac-bg-card) !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

#header.header .topbar .btn {
    color: var(--ac-text) !important;
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: var(--ac-radius) !important;
}

#header.header .topbar .btn:hover,
#header.header .topbar .btn:focus {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
}

#header.header .topbar #accountNotifications {
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    padding: 6px 14px !important;
    border-radius: var(--ac-radius) !important;
    border: 1px solid var(--ac-border-light) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

#header.header .topbar #accountNotifications:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    border-color: var(--ac-primary-light) !important;
}

#header.header .topbar .form-control {
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    height: auto !important;
    box-shadow: none !important;
}

#header.header .topbar .form-control:focus {
    background: var(--ac-bg-card) !important;
    border-color: var(--ac-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

#header.header .topbar .btn-default {
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) 0 0 var(--ac-radius) !important;
    background: var(--ac-bg) !important;
    color: var(--ac-text-light) !important;
}

#header.header .topbar .input-group .form-control {
    border-radius: 0 var(--ac-radius) var(--ac-radius) 0 !important;
}

#header.header .topbar ::placeholder {
    color: var(--ac-muted) !important;
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * SAĞ ÜST TOPBAR: Sepet + Hesap Dropdown
 * HTML: <div class="input-group active-client">
 *         <div class="btn-group">
 *           <ul class="sign-in-topbar-right">
 *             <li class="nav-item"><a class="cart-btn">...</a></li>
 *             <li class="dropdown account"><a class="dropdown-toggle">...</a></li>
 *           </ul>
 *         </div>
 *       </div>
 * Bootstrap'in input-group + btn-group sınıfları içindekileri sıkıştırıyor,
 * onları reset edip yatay flex ile yan yana yapıyoruz.
 * ───────────────────────────────────────────────────────────────────── */

/* active-client (input-group) sıkıştırmasını kaldır */
#header.header .topbar .active-client,
#header.header .topbar .input-group.active-client {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
}

#header.header .topbar .active-client .btn-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
}

/* sign-in-topbar-right ul - yatay flex */
#header.header .topbar .sign-in-topbar-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#header.header .topbar .sign-in-topbar-right > li {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

/* Sepet butonu - yuvarlatılmış pill */
#header.header .topbar .cart-btn,
#header.header .topbar .nav-item .cart-btn,
#header.header .topbar a.cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    padding: 7px 14px !important;
    border-radius: var(--ac-radius) !important;
    border: 1px solid var(--ac-border-light) !important;
    margin: 0 !important;
    position: relative !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: 38px !important;
}

#header.header .topbar .cart-btn:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    border-color: var(--ac-primary-light) !important;
}

#header.header .topbar .cart-btn .badge-info {
    background: var(--ac-primary) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: 2px !important;
    line-height: 1.2 !important;
    min-width: 18px !important;
    text-align: center !important;
}

/* Hesap dropdown trigger "Hoş geldiniz, Burak!" */
#header.header .topbar .dropdown.account,
#header.header .topbar li.account {
    list-style: none !important;
}

#header.header .topbar .active-client .dropdown-toggle,
#header.header .topbar .account .dropdown-toggle,
#header.header .topbar li.account > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ac-text) !important;
    background: var(--ac-bg) !important;
    padding: 7px 14px !important;
    border-radius: var(--ac-radius) !important;
    border: 1px solid var(--ac-border-light) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    min-height: 38px !important;
    margin: 0 !important;
}

#header.header .topbar .active-client .dropdown-toggle:hover,
#header.header .topbar .account .dropdown-toggle:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    border-color: var(--ac-primary-light) !important;
}

/* Bootstrap'in dropdown caret ▼ ikonunu düzgün konumla */
#header.header .topbar .dropdown-toggle::after {
    margin-left: 2px !important;
    vertical-align: middle !important;
    border-top-color: currentColor !important;
}

/* Dropdown menü içeriği */
#header.header .topbar .active-client .dropdown-menu,
#header.header .topbar .account .dropdown-menu {
    border-radius: var(--ac-radius-md) !important;
    border: 1px solid var(--ac-border-light) !important;
    box-shadow: var(--ac-shadow-lg) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    min-width: 220px !important;
}

#header.header .topbar .active-client .dropdown-menu .dropdown-item,
#header.header .topbar .account .dropdown-menu .dropdown-item {
    color: var(--ac-text) !important;
    padding: 8px 12px !important;
    border-radius: var(--ac-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

#header.header .topbar .active-client .dropdown-menu .dropdown-item > a,
#header.header .topbar .account .dropdown-menu .dropdown-item > a {
    color: var(--ac-text) !important;
    padding: 0 !important;
    display: block !important;
    text-decoration: none !important;
}

#header.header .topbar .active-client .dropdown-menu .dropdown-item:hover,
#header.header .topbar .account .dropdown-menu .dropdown-item:hover {
    background: var(--ac-primary-soft) !important;
}

#header.header .topbar .active-client .dropdown-menu .dropdown-item:hover > a,
#header.header .topbar .account .dropdown-menu .dropdown-item:hover > a {
    color: var(--ac-primary) !important;
}

#header.header .topbar .active-client .dropdown-menu .dropdown-divider,
#header.header .topbar .account .dropdown-menu .dropdown-divider {
    border-top-color: var(--ac-border-light) !important;
    margin: 4px 0 !important;
}

/* Return to admin butonu - sağ tarafta */
#header.header .topbar .btn-return-to-admin {
    margin-left: 8px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * MAIN NAVBAR
 * ───────────────────────────────────────────────────────────────────── */
#header .navbar.navbar-light {
    background: var(--ac-bg-card) !important;
    padding: 16px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    box-shadow: none !important;
}

#header .navbar-brand img {
    width: 150px !important;
    height: auto !important;
}

#header .navbar-collapse a,
#header .navbar-nav > li > a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ac-dark) !important;
    padding: 8px 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: var(--ac-radius-sm) !important;
    transition: var(--ac-transition) !important;
}

#header .navbar-collapse a:hover,
#header .navbar-nav > li > a:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
}

/* "Yeni Destek Bildirimi" özel buton */
#header .navbar-nav #Primary_Navbar-Open_Ticket > a {
    background: var(--ac-primary) !important;
    color: white !important;
    border-radius: var(--ac-radius) !important;
    padding: 9px 18px !important;
    margin-left: 8px !important;
}

#header .navbar-nav #Primary_Navbar-Open_Ticket > a:hover {
    background: var(--ac-primary-dark) !important;
    color: white !important;
}

/* Dropdown menus */
#header .dropdown-menu {
    border-radius: var(--ac-radius-md) !important;
    border: 1px solid var(--ac-border-light) !important;
    box-shadow: var(--ac-shadow-lg) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    background: var(--ac-bg-card) !important;
}

#header .main-navbar-wrapper .dropdown-menu a,
#header .dropdown-menu .dropdown-item a,
#header .dropdown-menu a.dropdown-item {
    color: var(--ac-text) !important;
    padding: 8px 12px !important;
    border-radius: var(--ac-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

#header .main-navbar-wrapper .dropdown-menu a:hover,
#header .dropdown-menu a:hover,
#header .dropdown-menu .dropdown-item:hover,
#header .dropdown-menu .dropdown-item:hover > a {
    background: var(--ac-primary) !important;
    color: white !important;
}

/* dropdown-item li hover'ında içindeki a da beyaz olsun */
#header .dropdown-menu li.dropdown-item:hover {
    background: var(--ac-primary) !important;
    border-radius: var(--ac-radius-sm) !important;
}

#header .dropdown-menu li.dropdown-item:hover > a {
    background: transparent !important;
    color: white !important;
}

#header .dropdown-menu .dropdown-divider {
    border-top-color: var(--ac-border-light) !important;
    margin: 4px 0 !important;
}

/* Mobile menu button (hamburger ikon) */
#header.header .toolbar {
    margin: 0 !important;
    padding: 0 !important;
}

#header.header .toolbar .nav-item {
    margin: 0 !important;
}

#header.header .toolbar .nav-link {
    background: var(--ac-primary) !important;
    border-radius: var(--ac-radius) !important;
    height: 42px !important;
    width: 42px !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: white !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

#header.header .toolbar .nav-link:hover,
#header.header .toolbar .nav-link:focus {
    background: var(--ac-primary-dark) !important;
    color: white !important;
}

#header.header .toolbar .nav-link .fas.fa-bars,
#header.header .toolbar .nav-link span {
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * MAIN BODY
 * ───────────────────────────────────────────────────────────────────── */
section#main-body,
#main-body {
    background: var(--ac-bg) !important;
    padding: 40px 0 60px !important;
    margin: 0 !important;
    min-height: 400px !important;
}

#main-body > .container > .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * SIDEBAR (Bilgileriniz, Sorumlular, Hızlı Erişim)
 * ───────────────────────────────────────────────────────────────────── */
.sidebar .card,
.sidebar .card-sidebar,
.panel-sidebar,
.card-sidebar.panel-sidebar {
    background: var(--ac-bg-card) !important;
    border-radius: var(--ac-radius-lg) !important;
    border: 1px solid var(--ac-border-light) !important;
    box-shadow: var(--ac-shadow-xs) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

/* Order form Kategoriler paneli başlığı (mavi) */
.panel-sidebar .card-header,
.panel-sidebar .panel-heading {
    background: var(--ac-primary) !important;
    color: white !important;
    padding: 14px 18px !important;
    border-bottom: none !important;
    font-weight: 700 !important;
}

.panel-sidebar .card-header h3,
.panel-sidebar .card-header .card-title {
    color: white !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

/* Kategori linkleri (Paylaşımlı Web Hosting, Plesk, vs.) */
.panel-sidebar .list-group-item,
.panel-sidebar .list-group-item-action {
    background: var(--ac-bg-card) !important;
    border: none !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    padding: 12px 16px !important;
    color: var(--ac-text) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    white-space: normal !important;
}

.panel-sidebar .list-group-item:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
}

.panel-sidebar .list-group-item.active {
    background: var(--ac-primary) !important;
    color: white !important;
}

.sidebar .card .card-header {
    background: var(--ac-primary) !important;
    color: white !important;
    padding: 14px 18px !important;
    border-bottom: none !important;
}

.sidebar .card .card-header h3,
.sidebar .card .card-header .card-title {
    color: white !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.sidebar .card .card-header i {
    color: white !important;
}

.sidebar .card .card-header .card-minimise {
    margin-left: auto !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
}

.sidebar .card .card-header .card-minimise:hover {
    opacity: 1 !important;
}

.sidebar .card .card-body {
    padding: 18px !important;
    color: var(--ac-text) !important;
    line-height: 1.7 !important;
}

.sidebar .card .card-body strong {
    color: var(--ac-dark) !important;
    font-weight: 700 !important;
}

.sidebar .card .card-footer {
    background: var(--ac-bg) !important;
    border-top: 1px solid var(--ac-border-light) !important;
    padding: 14px 18px !important;
}

/* Sidebar buton (Güncelle, Yeni Sorumlu) */
.sidebar .card-footer .btn,
.sidebar .card .btn-block {
    width: 100% !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--ac-radius) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.sidebar .card-footer .btn-success {
    background: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
    color: white !important;
}

.sidebar .card-footer .btn-success:hover {
    background: var(--ac-primary-dark) !important;
    border-color: var(--ac-primary-dark) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.sidebar .card-footer .btn-default {
    background: var(--ac-bg-card) !important;
    border: 1px solid var(--ac-border) !important;
    color: var(--ac-text) !important;
}

.sidebar .card-footer .btn-default:hover {
    background: var(--ac-primary-soft) !important;
    border-color: var(--ac-primary-light) !important;
    color: var(--ac-primary) !important;
}

/* Quick Access list (Hızlı Erişim) */
.sidebar .list-group {
    background: transparent !important;
}

.sidebar .list-group-item,
.sidebar .list-group-item-action {
    background: var(--ac-bg-card) !important;
    border: none !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    padding: 12px 16px !important;
    color: var(--ac-text) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: var(--ac-transition) !important;
}

.sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

.sidebar .list-group-item:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    padding-left: 20px !important;
}

.sidebar .list-group-item.active {
    background: var(--ac-primary) !important;
    color: white !important;
    border-color: var(--ac-primary) !important;
}

/* ── Seçili sidebar/işlemler item (GLOBAL) ──
   HTML: <a class="list-group-item list-group-item-action active">
           <i class="fas fa-globe"></i> Yeni Alan Adı Kaydet</a>
   Seçili olan mavi zemin + mavi yazı = okunmuyordu. Beyaz yazı + ikon. */
.list-group-item.active,
.list-group-item-action.active,
a.list-group-item.active {
    background: var(--ac-primary) !important;
    color: white !important;
    border-color: var(--ac-primary) !important;
    z-index: auto !important;
}

.list-group-item.active i,
.list-group-item-action.active i,
.list-group-item.active .fa,
.list-group-item.active .fas,
.list-group-item.active .sidebar-menu-item-icon,
.list-group-item.active .sidebar-menu-item-label {
    color: white !important;
}

.list-group-item.active:hover {
    background: var(--ac-primary-dark) !important;
    color: white !important;
}

/* Sidebar menu item icon (Hızlı Erişim ikonları) */
.sidebar-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sidebar-menu-item-icon-wrapper {
    width: 28px !important;
    flex-shrink: 0 !important;
}

.sidebar-menu-item-icon {
    color: var(--ac-primary) !important;
    font-size: 14px !important;
}

.sidebar .list-group-item:hover .sidebar-menu-item-icon {
    color: var(--ac-primary) !important;
}

.sidebar-menu-item-label {
    flex: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * STAT TILES (Hizmetler, Alan Adı, Destek, Faturalar)
 * Bu HTML'de: .tiles .tile
 * ───────────────────────────────────────────────────────────────────── */
.tiles {
    margin-bottom: 24px !important;
}

/* 4 stat tile her zaman tek sırada (tüm ekran boyutlarında) */
.tiles .row.no-gutters {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin: 0 !important;
}

.tiles .row.no-gutters > [class*="col-"] {
    flex: 1 1 0 !important;
    max-width: 25% !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Bootstrap default col-6 col-xl-3 override - artık her zaman 25% */
.tiles .row.no-gutters > .col-6,
.tiles .row.no-gutters > .col-xl-3,
.tiles .row.no-gutters > .col-md-6,
.tiles .row.no-gutters > .col-lg-3 {
    flex: 1 1 0 !important;
    max-width: 25% !important;
    width: 25% !important;
}

.tile {
    background: var(--ac-bg-card) !important;
    border-radius: var(--ac-radius-lg) !important;
    border: 1px solid var(--ac-border-light) !important;
    box-shadow: var(--ac-shadow-xs) !important;
    padding: 18px 20px !important;
    transition: var(--ac-transition) !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: var(--ac-dark) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 110px !important;
    height: 100% !important;
}

.tile:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ac-shadow-md) !important;
    border-color: var(--ac-primary-light) !important;
    text-decoration: none !important;
    color: var(--ac-dark) !important;
}

.tile > i {
    position: absolute !important;
    top: 18px !important;
    right: 20px !important;
    font-size: 28px !important;
    color: var(--ac-primary-soft) !important;
    opacity: 0.9 !important;
}

.tile .stat {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--ac-dark) !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.02em !important;
}

.tile .title {
    color: var(--ac-text-light) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}

.tile .highlight {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--ac-primary) !important;
}

/* Highlight renkleri */
.tile .highlight.bg-color-blue { background: var(--ac-primary) !important; }
.tile .highlight.bg-color-green { background: var(--ac-emerald) !important; }
.tile .highlight.bg-color-red { background: var(--ac-danger) !important; }
.tile .highlight.bg-color-gold { background: var(--ac-gold) !important; }
.tile .highlight.bg-color-emerald { background: var(--ac-emerald) !important; }
.tile .highlight.bg-color-asbestos { background: var(--ac-asbestos) !important; }

/* Tile ikon renklerini highlight'a uygun yap */
.tile:hover > i {
    color: var(--ac-primary-light) !important;
    opacity: 0.5 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * CLIENT HOME CARDS (Aktif Ürün/Hizmetler, Son Destek, Yeni Alan Adı, Son Haberler)
 * ───────────────────────────────────────────────────────────────────── */
.client-home-cards .card,
#servicesPanel,
#ticketsPanel,
#announcementsPanel,
#registerDomainPanel {
    background: var(--ac-bg-card) !important;
    border-radius: var(--ac-radius-lg) !important;
    border: 1px solid var(--ac-border-light) !important;
    box-shadow: var(--ac-shadow-xs) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: var(--ac-transition) !important;
}

.client-home-cards .card:hover {
    box-shadow: var(--ac-shadow) !important;
    border-color: var(--ac-border) !important;
}

.client-home-cards .card-header {
    background: var(--ac-bg-card) !important;
    color: var(--ac-dark) !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    padding: 14px 20px !important;
    position: relative !important;
}

.client-home-cards .card-header h3,
.client-home-cards .card-header .card-title {
    color: var(--ac-dark) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* "Yeni Destek Bildirimi" gibi float-right buton DOM'da başlıktan önce
   geliyor; flex'te ters duruyordu (buton solda, başlık sağda) ve sığmıyordu.
   order ile buton sağa, başlık sola; margin-left:auto ile boşluk butonu iter. */
.client-home-cards .card-header .card-title > .float-right,
.client-home-cards .card-header h3 > .float-right {
    order: 2 !important;
    margin-left: auto !important;
    float: none !important;
    flex: 0 0 auto !important;
}

/* Başlık ikonu + metni solda kalsın */
.client-home-cards .card-header h3 > i:first-child,
.client-home-cards .card-header .card-title > i:first-child {
    color: var(--ac-primary) !important;
    font-size: 14px !important;
    order: 0 !important;
}

.client-home-cards .card-body {
    padding: 18px 20px !important;
    color: var(--ac-text) !important;
}

/* ── Aktif Ürün/Hizmetler bölümü (.div-service-*) ──
   NOT: Masaüstünde WHMCS'in orijinal düzeni KORUNUR (sorun yoktu).
   Sadece gereksiz iç dropdown gizlenir. Mobil düzenleme aşağıda
   @media (max-width: 768px) içinde yapılır. */

/* İç içe dropdown'u gizle (kullanıcı tercihi - gereksiz ikinci dropdown) */
.btn-group > .btn-group {
    display: none !important;
}

.client-home-cards .card-body p {
    margin-bottom: 0 !important;
    color: var(--ac-text-light) !important;
    font-size: 14px !important;
}

.client-home-cards .card-footer {
    background: var(--ac-bg) !important;
    border-top: 1px solid var(--ac-border-light) !important;
    padding: 10px 20px !important;
}

.client-home-cards .card-footer:empty {
    display: none !important;
}

/* Card header üstündeki accent border */
.card-accent-gold,
.card-accent-blue,
.card-accent-emerald,
.card-accent-asbestos,
.card-accent-red,
.card-accent-green {
    position: relative !important;
    overflow: hidden !important;
}

.card-accent-gold::before,
.card-accent-blue::before,
.card-accent-emerald::before,
.card-accent-asbestos::before,
.card-accent-red::before,
.card-accent-green::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    z-index: 1 !important;
}

.card-accent-gold::before { background: var(--ac-gold) !important; }
.card-accent-blue::before { background: var(--ac-primary) !important; }
.card-accent-emerald::before { background: var(--ac-emerald) !important; }
.card-accent-asbestos::before { background: var(--ac-asbestos) !important; }
.card-accent-red::before { background: var(--ac-danger) !important; }
.card-accent-green::before { background: var(--ac-emerald) !important; }

/* Header'daki buton (Ürünlerim, Yeni Destek Bildirimi, Hepsini Görüntüle) */
.client-home-cards .card-header .btn,
.client-home-cards .card-header .float-right .btn,
.client-home-cards .card-header .btn-xs {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: var(--ac-radius) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.client-home-cards .card-header .btn:hover {
    background: var(--ac-primary) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* bg-color-* btn varyantları */
.btn.bg-color-blue { background: var(--ac-primary-soft) !important; color: var(--ac-primary) !important; }
.btn.bg-color-blue:hover { background: var(--ac-primary) !important; color: white !important; }
.btn.bg-color-gold { background: rgba(245, 158, 11, 0.12) !important; color: var(--ac-gold) !important; }
.btn.bg-color-gold:hover { background: var(--ac-gold) !important; color: white !important; }
.btn.bg-color-emerald { background: rgba(16, 185, 129, 0.12) !important; color: var(--ac-emerald) !important; }
.btn.bg-color-emerald:hover { background: var(--ac-emerald) !important; color: white !important; }
.btn.bg-color-asbestos { background: rgba(100, 116, 139, 0.12) !important; color: var(--ac-asbestos) !important; }
.btn.bg-color-asbestos:hover { background: var(--ac-asbestos) !important; color: white !important; }
.btn.bg-color-red { background: rgba(239, 68, 68, 0.12) !important; color: var(--ac-danger) !important; }
.btn.bg-color-red:hover { background: var(--ac-danger) !important; color: white !important; }
.btn.bg-color-green { background: rgba(16, 185, 129, 0.12) !important; color: var(--ac-emerald) !important; }
.btn.bg-color-green:hover { background: var(--ac-emerald) !important; color: white !important; }

/* Daha Fazlasını Görüntüle disabled link */
.btn-view-more.disabled {
    color: var(--ac-muted) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    font-size: 13px !important;
    padding: 0 !important;
}

/* Son Destek Bildirimleri list-group */
/* Son Destek Bildirimleri paneli - liste düzeni */
#ticketsPanel .list-group {
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

#ticketsPanel .list-group a {
    display: block !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    color: var(--ac-dark) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    transition: var(--ac-transition) !important;
    background: var(--ac-bg-card) !important;
    text-decoration: none !important;
}

#ticketsPanel .list-group a:hover {
    background: var(--ac-primary-bg) !important;
    color: var(--ac-primary) !important;
}

#ticketsPanel .list-group a:last-child {
    border-bottom: none !important;
}

/* Ticket içindeki "Kapandı / Cevaplandı / Bekliyor" label'ları */
#ticketsPanel .list-group a .label {
    display: inline-block !important;
    margin: 6px 0 0 0 !important;
    padding: 3px 10px !important;
    border-radius: var(--ac-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: white !important;
    vertical-align: middle !important;
}

/* Ticket tarih satırı (Son Güncelleme: ...) */
#ticketsPanel .list-group a small,
#ticketsPanel .list-group a .text-muted,
#ticketsPanel .list-group a span.date {
    display: block !important;
    margin-top: 4px !important;
    color: var(--ac-text-light) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Yeni Alan Adı domain input */
#registerDomainPanel .form-control {
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    height: auto !important;
    box-shadow: none !important;
    color: var(--ac-dark) !important;
}

#registerDomainPanel .form-control:focus {
    border-color: var(--ac-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

#registerDomainPanel .input-group {
    gap: 6px !important;
    flex-wrap: wrap !important;
}

#registerDomainPanel .input-group-btn,
#registerDomainPanel .input-group-append {
    display: flex !important;
    gap: 6px !important;
}

#registerDomainPanel .btn-success {
    background: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
    color: white !important;
    border-radius: var(--ac-radius) !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

#registerDomainPanel .btn-success:hover {
    background: var(--ac-primary-dark) !important;
    border-color: var(--ac-primary-dark) !important;
}

#registerDomainPanel .btn-default {
    background: var(--ac-dark) !important;
    border-color: var(--ac-dark) !important;
    color: white !important;
    border-radius: var(--ac-radius) !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

#registerDomainPanel .btn-default:hover {
    background: var(--ac-navy) !important;
    border-color: var(--ac-navy) !important;
    color: white !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * BUTTON GROUP (.btn-group) - Domain aksiyon butonları
 * HTML: <div class="btn-group btn-group-sm"> Nameserver Yönetimi,
 *        İletişim Bilgileri, Alan Adlarını Yenile, Daha Fazla... </div>
 * Bootstrap default yapıştırır ve taşar. Ayrı yuvarlatılmış + wrap yapalım.
 * ───────────────────────────────────────────────────────────────────── */
.btn-group,
.btn-group-sm {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.btn-group > .btn,
.btn-group-sm > .btn,
.btn-group > .btn-group > .btn {
    border-radius: var(--ac-radius) !important;
    border: 1px solid var(--ac-border) !important;
    margin: 0 !important;
}

/* setBulkAction butonları (domain aksiyonları) modern stil */
.btn-group .btn-default.setBulkAction,
.btn-default.setBulkAction {
    background: var(--ac-bg-card) !important;
    border: 1px solid var(--ac-border) !important;
    color: var(--ac-text) !important;
}

.btn-group .btn-default.setBulkAction:hover,
.btn-default.setBulkAction:hover {
    background: var(--ac-primary-soft) !important;
    border-color: var(--ac-primary-light) !important;
    color: var(--ac-primary) !important;
}

/* btn-group içindeki nested dropdown (Daha Fazla...) */
.btn-group .btn-group .dropdown-toggle {
    border-radius: var(--ac-radius) !important;
}

/* Nested btn-group gap'i bozmasın */
.btn-group > .btn-group {
    margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * GENERAL BUTTONS
 * ───────────────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--ac-radius) !important;
    padding: 9px 18px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: var(--ac-transition) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none !important;
}

.btn-sm {
    padding: 7px 14px !important;
    font-size: 13px !important;
}

.btn-xs {
    padding: 5px 10px !important;
    font-size: 12px !important;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
    color: white !important;
    background-image: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--ac-primary-dark) !important;
    border-color: var(--ac-primary-dark) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.btn-success {
    background: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
    color: white !important;
    background-image: none !important;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--ac-primary-dark) !important;
    border-color: var(--ac-primary-dark) !important;
    color: white !important;
}

.btn-default {
    background: var(--ac-bg-card) !important;
    border: 1px solid var(--ac-border) !important;
    color: var(--ac-text) !important;
}

.btn-default:hover {
    background: var(--ac-bg) !important;
    border-color: var(--ac-border) !important;
    color: var(--ac-dark) !important;
}

.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid var(--ac-primary) !important;
    color: var(--ac-primary) !important;
}

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

.btn-block {
    width: 100% !important;
    color: white !important;
}

/* ── Sarı butonlar (.btn-warning) - "Paketlere gözat" gibi ──
   Sarı zemin üstünde mavi yazı okunmuyordu. Koyu lacivert yazı kontrastlı. */
.btn-warning,
.btn-warning:not(:disabled):not(.disabled) {
    background: var(--ac-gold) !important;
    border-color: var(--ac-gold) !important;
    color: var(--ac-navy) !important;
    background-image: none !important;
    font-weight: 700 !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #E08E00 !important;
    border-color: #E08E00 !important;
    color: var(--ac-navy) !important;
    transform: translateY(-1px) !important;
}

/* "Web hosting hizmeti ekle" promo kutusu içindeki turuncu/karışık başlıklar */
.product-cta-text,
.add-service-promo .text-warning,
.promo-box .text-warning {
    color: var(--ac-accent, #F59E0B) !important;
}

/* ── Promo/upsell kutusu butonları genel kontrast düzeltmesi ──
   Sarı veya açık zeminli butonlarda mavi yazı yerine koyu yazı */
.btn.btn-warning .fa,
.btn.btn-warning i {
    color: var(--ac-navy) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * DOMAIN CHECKER / KAYIT SAYFASI (domainchecker.php, cart domain)
 * Kategori etiketleri + fiyat tablosu
 * ───────────────────────────────────────────────────────────────────── */

/* TLD kategori filtreleri (Popular, Arts and Entertainment, Business, vs.)
   WHMCS bunları renkli zeminde verir, içlerindeki yazı mavi kalıp okunmuyordu.
   Çözüm: pill yapısını normalize et + yazıyı beyaz yap. */
.domain-categories a,
.tld-categories a,
.domain-lookup-categories a,
#tldCategories a,
.tld-filter a,
ul.nav-pills .nav-link,
.category-filters a,
.category-filters .badge,
.domain-checker-categories a {
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: var(--ac-radius-full) !important;
}

.domain-categories a:hover,
.tld-categories a:hover,
.tld-filter a:hover,
ul.nav-pills .nav-link:hover,
.category-filters a:hover {
    color: white !important;
    opacity: 0.85 !important;
}

/* Pasif kategori pill'leri - gri-mavi zemin, beyaz yazı okunur */
.domain-categories .nav-link,
.tld-categories .nav-link,
.nav-pills .nav-link,
.domaincheckresults .nav-pills .nav-link {
    background: var(--ac-asbestos) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ac-radius-full) !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 4px 8px 0 !important;
    transition: var(--ac-transition) !important;
}

.domain-categories .nav-link:hover,
.tld-categories .nav-link:hover,
.nav-pills .nav-link:hover {
    background: var(--ac-primary) !important;
    color: white !important;
    opacity: 1 !important;
}

/* Aktif/seçili kategori (Popular gibi) - mavi vurgu */
.domain-categories .nav-link.active,
.tld-categories .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--ac-primary) !important;
    color: white !important;
    border: none !important;
}

/* Badge tarzı kategori etiketleri (sayılı: Popular (27)) */
.domain-category-badge,
.tld-category-item {
    background: var(--ac-asbestos) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ac-radius-full) !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.domain-category-badge.active,
.tld-category-item.active {
    background: var(--ac-primary) !important;
    color: white !important;
}

/* Domain fiyat tablosu başlıkları */
.domain-pricing-table thead th,
.domaincheckresults thead th {
    background: var(--ac-bg) !important;
    color: var(--ac-dark) !important;
    font-weight: 700 !important;
}

/* Domain TLD fiyat kartları (.com, .net, .tv vs) */
.domain-tld-card,
.featured-tld {
    background: var(--ac-bg-card) !important;
    border: 1px solid var(--ac-border-light) !important;
    border-radius: var(--ac-radius-lg) !important;
    overflow: hidden !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * AYARLANABİLEN SEÇENEKLER (configurable options) - KART TASARIMI
 * Gerçek HTML: .product-configurable-options > .row > .col-sm-6 >
 *   .form-group > label > input[type=radio] + metin
 * VDS ek hizmetleri (DDOS, Yedekleme, Snapshot) modern kartlı görünüm.
 * ───────────────────────────────────────────────────────────────────── */

/* "Ayarlanabilen Seçenekler" başlık barı (.sub-heading > .primary-bg-color) */
#order-standard_cart .sub-heading {
    text-align: center !important;
    margin: 32px 0 56px !important;
    position: relative !important;
}

#order-standard_cart .sub-heading span.primary-bg-color {
    display: inline-block !important;
    background: var(--ac-primary) !important;
    color: white !important;
    padding: 8px 22px !important;
    border-radius: var(--ac-radius-full, 999px) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* ── Sipariş yapılandırma sayfası (cart.php?a=confproduct) düzeni ──
   Sol "Kategoriler/İşlemler" sidebar'ı KALDIR, içerik + sipariş özeti genişlesin. */

/* Sol kategori/işlemler sidebar'ını SADECE sipariş yapılandırma sayfasında
   gizle (#frmConfigureProduct olan sayfa). Ürün listeleme (/store/...) sayfasında
   kategori sidebar'ı GÖRÜNSÜN — orada :has ile koruyoruz. */
#order-standard_cart:has(#frmConfigureProduct) .cart-sidebar {
    display: none !important;
}

/* Config sayfasında içerik gövdesi tam genişlik */
#order-standard_cart:has(#frmConfigureProduct) .cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
}

/* İçerik (seçenekler) + Sipariş Özeti arası denge:
   secondary-cart-body biraz daralsın, secondary-cart-sidebar (özet) genişlesin */
#order-standard_cart .cart-body > form > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}

#order-standard_cart .secondary-cart-body {
    flex: 1 1 58% !important;
    max-width: 60% !important;
    min-width: 0 !important;
}

#order-standard_cart .secondary-cart-sidebar {
    flex: 1 1 36% !important;
    max-width: 38% !important;
    min-width: 280px !important;
}

/* Sipariş özeti kartı genişçe ve ferah */
#order-standard_cart .secondary-cart-sidebar .order-summary {
    width: 100% !important;
}

/* Sipariş Özeti masaüstünde sayfayla birlikte insin (sticky) */
#order-standard_cart:has(#frmConfigureProduct) .secondary-cart-sidebar,
#order-standard_cart #scrollingPanelContainer {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
}

/* ── Config options TEK KOLON (hepsi tam genişlik, alt alta) ──
   WHMCS yapısı: .product-configurable-options > .row > .col-sm-6 > .form-group
   Her kart tam genişlik olsun, yan yana DEĞİL alt alta dizilsin. */
#order-standard_cart .product-configurable-options > .row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

#order-standard_cart .product-configurable-options > .row > .col-sm-6,
#order-standard_cart .product-configurable-options > .row > [class*="col-"],
#order-standard_cart .product-configurable-options > .row > .form-group {
    flex: none !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Her seçenek grubu (İşletim Sistemi, DDOS, Yedekleme...) = kart kutu */
#order-standard_cart .product-configurable-options .form-group {
    background: white !important;
    border: 1px solid var(--ac-border-light, #E2E8F0) !important;
    border-radius: var(--ac-radius-lg, 12px) !important;
    padding: 16px 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Grup başlığı (label[for=inputConfigOption*]) - LACİVERT DOLGU BAR */
#order-standard_cart .product-configurable-options .form-group > label[for^="inputConfigOption"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--ac-navy-soft, #1E3A5F) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: -16px -18px 16px -18px !important;
    padding: 13px 18px !important;
    border-radius: var(--ac-radius-lg, 12px) var(--ac-radius-lg, 12px) 0 0 !important;
    border-bottom: none !important;
}

/* Grup başlığı ikonu - JS ile <i class="fas"> eklenir (FA5 ::before content
   boş kare veriyordu; gerçek <i> elementi kesin render olur). */
#order-standard_cart .product-configurable-options .form-group > label[for^="inputConfigOption"] > i.ac-group-icon {
    color: var(--ac-primary-light, #60A5FA) !important;
    font-size: 16px !important;
    width: 22px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Grup içindeki <br> gizle (kartlı düzende gereksiz boşluk yapıyor) */
#order-standard_cart .product-configurable-options .form-group > br {
    display: none !important;
}

/* Her radio seçeneği = tıklanabilir satır-kart */
#order-standard_cart .product-configurable-options .form-group > label:not([for]) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 12px 14px !important;
    border: 2px solid var(--ac-border-light, #E2E8F0) !important;
    border-radius: var(--ac-radius, 8px) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    color: var(--ac-text, #475569) !important;
    transition: all 0.15s ease !important;
    background: var(--ac-bg, #F8FAFC) !important;
}

#order-standard_cart .product-configurable-options .form-group > label:not([for]):hover {
    border-color: var(--ac-primary) !important;
    background: var(--ac-primary-bg, #EFF6FF) !important;
}

/* Seçili (checked) radio'nun label'ını vurgula - :has() ile */
#order-standard_cart .product-configurable-options .form-group > label:not([for]):has(input:checked) {
    border-color: var(--ac-primary) !important;
    background: var(--ac-primary-bg, #EFF6FF) !important;
    color: var(--ac-dark) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15) !important;
}

/* Radio butonu büyüt + mavi */
/* Radio butonu DÜZGÜN DAİRE (özel görünüm - tarayıcı default'unu sıfırla) */
#order-standard_cart .product-configurable-options .form-group > label:not([for]) input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border: 2px solid var(--ac-border, #CBD5E1) !important;
    border-radius: 50% !important;
    background: white !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

/* Seçili radio: mavi çember + içi dolu mavi nokta */
#order-standard_cart .product-configurable-options .form-group > label:not([for]) input[type="radio"]:checked {
    border-color: var(--ac-primary) !important;
    background: white !important;
}

#order-standard_cart .product-configurable-options .form-group > label:not([for]) input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: var(--ac-primary) !important;
}

/* Dropdown (İşletim Sistemi gibi select) modern stil */
#order-standard_cart .product-configurable-options .form-group select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid var(--ac-border-light, #E2E8F0) !important;
    border-radius: var(--ac-radius, 8px) !important;
    padding: 12px 44px 12px 16px !important;
    font-weight: 500 !important;
    color: var(--ac-dark) !important;
    margin-top: 4px !important;
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
}

#order-standard_cart .product-configurable-options .form-group select.form-control:focus {
    border-color: var(--ac-primary) !important;
    box-shadow: 0 0 0 3px var(--ac-primary-soft, #DBEAFE) !important;
}

/* ── Ödeme Döngüsü dropdown (#inputBillingcycle) - modernize ── */
#order-standard_cart #inputBillingcycle,
#order-standard_cart select.select-inline.custom-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 2px solid var(--ac-primary, #2563EB) !important;
    border-radius: var(--ac-radius, 8px) !important;
    background: white !important;
    color: var(--ac-navy, #0F1B36) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 14px 44px 14px 18px !important;
    min-width: 240px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
    /* özel ok ikonu (sağda mavi) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    transition: all 0.15s ease !important;
}

#order-standard_cart #inputBillingcycle:hover,
#order-standard_cart select.select-inline.custom-select:hover {
    border-color: var(--ac-primary-dark, #1E40AF) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2) !important;
}

#order-standard_cart #inputBillingcycle:focus,
#order-standard_cart select.select-inline.custom-select:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px var(--ac-primary-soft, #DBEAFE) !important;
}

/* "Ödeme Döngünüzü Seçiniz" etiketi */
#order-standard_cart label[for="inputBillingcycle"] {
    font-weight: 700 !important;
    color: var(--ac-navy, #0F1B36) !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Seçenek metni (radio'dan sonra) sola yaslı, fiyat etiketi sağa itsin */
#order-standard_cart .product-configurable-options .form-group > label:not([for]) .opt-text {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    text-align: left !important;
    line-height: 1.35 !important;
}

/* YEŞİL FİYAT ETİKETİ (JS ile metinden ayrılıp .price-badge span'ine sarılır) */
#order-standard_cart .product-configurable-options .form-group > label:not([for]) .price-badge {
    flex-shrink: 0 !important;
    background: var(--ac-success, #10B981) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: var(--ac-radius, 8px) !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* Ücretsiz seçenekler için açık yeşil etiket */
#order-standard_cart .product-configurable-options .form-group > label:not([for]) .price-badge.free {
    background: var(--ac-success, #10B981) !important;
    opacity: 0.85 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * SEPET / İNCELEME VE ÖDEME (cart.php?a=view) - GERÇEK CLASS'LARLA
 * ───────────────────────────────────────────────────────────────────── */

/* "Ürün/Seçenek | Fiyat/Dönem" başlık barı.
   Gerçek HTML: <div class="view-cart-items-header"> background:#058 (koyu mavi) */
.view-cart-items-header {
    background: var(--ac-navy-soft, #1E3A5F) !important;
    color: white !important;
    border-radius: var(--ac-radius) var(--ac-radius) 0 0 !important;
}

.view-cart-items-header,
.view-cart-items-header * {
    color: white !important;
}

/* Ürün satırı alt çizgisi (border-bottom) - koyu/teal yerine temamızın rengi */
#order-standard_cart .view-cart-items,
.view-cart-items {
    border-bottom: 2px solid var(--ac-primary) !important;
}

/* "Sepeti Boşalt" butonu - biraz aşağı insin + kırmızı (boşaltma = uyarı rengi) */
#order-standard_cart .empty-cart .btn,
.empty-cart .btn {
    margin-top: 16px !important;
    background: var(--ac-danger) !important;
    border-color: var(--ac-danger) !important;
    color: white !important;
    font-weight: 600 !important;
}

#order-standard_cart .empty-cart .btn:hover,
.empty-cart .btn:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Promosyon kodu input - GERÇEK HTML:
   <div class="prepend-icon">
     <input id="inputPromotionCode" class="field form-control" ...>
     <i class="field-icon"><i class="fa..."></i></i>
   </div>
   .prepend-icon icon'u absolute sol konumluyor, .field input'a sol padding
   gerekiyor. İkon ve placeholder çakışıyordu. Çözüm: icon'u düzgün konumla
   + input'a sol padding ver (icon görünür, çakışma yok). */
.prepend-icon,
#order-standard_cart .prepend-icon {
    position: relative !important;
    display: block !important;
}

/* Input'a sol padding - icon için yer aç */
.prepend-icon .field,
.prepend-icon #inputPromotionCode,
#order-standard_cart .prepend-icon .field,
#inputPromotionCode,
input.field.form-control,
input.field[name="promocode"] {
    background-image: none !important;
    padding-left: 42px !important;
    text-indent: 0 !important;
}

/* field-icon'u input'un sol içine düzgün konumla */
.prepend-icon .field-icon,
#order-standard_cart .prepend-icon .field-icon {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 38px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ac-text-light) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    margin: 0 !important;
}

.prepend-icon .field-icon i,
#order-standard_cart .prepend-icon .field-icon i {
    color: var(--ac-text-light) !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* "Kodu Onayla" butonu görünmüyordu (beyaz üstüne açık yazı).
   Promo formundaki submit butonunu mavi yap. */
#btnValidatePromo,
.promo-validate,
input[type="submit"][value*="Onayla"],
button[type="submit"][name="validatepromo"],
.promofield .btn,
.promotioncode .btn,
form[action*="cart.php"] .promo-area .btn {
    background: var(--ac-primary) !important;
    color: white !important;
    border-color: var(--ac-primary) !important;
    font-weight: 600 !important;
}

#btnValidatePromo:hover,
.promo-validate:hover {
    background: var(--ac-primary-dark) !important;
    color: white !important;
}

.cart-review thead th,
.order-review thead th,
.cart-items thead th,
table.cart thead th,
#orderSummary thead th,
.summary-container thead th,
.review-table thead th,
.cart .table thead th,
/* ── SEPET/ÖDEME AKIŞI - LACİVERT DOLGU BAŞLIKLAR (keyubu tarzı) ── */

/* "Sipariş Özeti" başlığı - lacivert bar */
#order-standard_cart .order-summary h2,
.order-summary h2.font-size-30 {
    background: var(--ac-navy-soft, #1E3A5F) !important;
    color: white !important;
    margin: 0 0 0 0 !important;
    padding: 16px 20px !important;
    border-radius: var(--ac-radius-lg, 12px) var(--ac-radius-lg, 12px) 0 0 !important;
    font-size: 22px !important;
}

/* Sipariş özeti kutusu - üst köşeler başlıkla uyumlu, çerçeveli */
#order-standard_cart .order-summary {
    background: white !important;
    border: 1px solid var(--ac-border-light, #E2E8F0) !important;
    border-radius: var(--ac-radius-lg, 12px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: 0 2px 12px rgba(15, 27, 54, 0.06) !important;
}

#order-standard_cart .order-summary .summary-container {
    padding: 18px 20px !important;
}

/* Ürün başlığı (VDS 1 - Başlangıç) - lacivert bar */
#order-standard_cart .product-info {
    background: var(--ac-navy-soft, #1E3A5F) !important;
    border-radius: var(--ac-radius-lg, 12px) !important;
    padding: 20px 22px 14px !important;
    margin-bottom: 24px !important;
}

#order-standard_cart .product-info .product-title {
    color: white !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
}

/* Özellik satırları (p > i + metin) - düzgün satır aralığı */
#order-standard_cart .product-info p {
    margin-bottom: 0 !important;
    line-height: 1.7 !important;
}

/* Son <br> kaynaklı fazla boşluğu kes */
#order-standard_cart .product-info p br:last-child {
    display: none !important;
}

#order-standard_cart .product-info p,
#order-standard_cart .product-info strong {
    color: rgba(255, 255, 255, 0.92) !important;
}

#order-standard_cart .product-info i {
    color: var(--ac-primary-light, #60A5FA) !important;
}

/* "Sipariş Detaylarını Yapılandır" ana başlık altı çizgi - lacivert vurgu */
#order-standard_cart .header-lined h1 {
    color: var(--ac-navy, #0F1B36) !important;
}

/* "Sipariş Detaylarını Yapılandır" başlığı ile ürün kutusu arası ferah dursun */
#order-standard_cart .header-lined {
    margin-bottom: 24px !important;
}

#order-standard_cart .secondary-cart-body > p:first-of-type {
    margin-bottom: 22px !important;
}

/* Panel başlıkları (Kategoriler/İşlemler kalsa da) lacivert */
#order-standard_cart .panel-sidebar .card-header,
#order-standard_cart .panel-heading.card-header {
    background: var(--ac-navy-soft, #1E3A5F) !important;
}

#order-standard_cart .panel-sidebar .card-header h3,
#order-standard_cart .panel-heading.card-header h3 {
    color: white !important;
}

.cartheading,
.carttitle,
.order-summary .table thead th {
    background: var(--ac-navy-soft, #1E3A5F) !important;
    color: white !important;
    border-color: var(--ac-navy, #0F1B36) !important;
    font-weight: 700 !important;
}

/* Koyu mavi başlık barı (genel - WHMCS cart başlık satırı) */
.cart-box-header,
.summary-box-header,
.order-box-header {
    background: var(--ac-primary) !important;
    color: white !important;
}

/* "Sepeti Boşalt" gibi koyu mavi butonlar (.btn-primary zaten mavi) */
.cart-actions .btn,
.empty-cart-btn {
    border-radius: var(--ac-radius) !important;
}

/* Sipariş özeti kutusu (sağdaki Ara Toplam/KDV/Toplam) */
.order-summary,
.summary-container,
.cart-summary {
    border-radius: var(--ac-radius-lg) !important;
    border: 1px solid var(--ac-border-light) !important;
}

/* Sepet tab'ları (Promosyon/İndirim Kodu | Tahmini Vergiler) */
.cart-tabs .nav-link,
.promo-tax-tabs .nav-link {
    color: var(--ac-text-light) !important;
    font-weight: 600 !important;
}

.cart-tabs .nav-link.active,
.promo-tax-tabs .nav-link.active {
    color: var(--ac-primary) !important;
    border-bottom: 2px solid var(--ac-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * GLOBAL INPUT-GROUP-MERGE (cart promo kodu, vs.)
 * HTML: <div class="input-group input-group-merge">
 *         <div class="input-group-prepend"><span class="input-group-text"><i></i></span></div>
 *         <input class="form-control">
 *       </div>
 * Sorun: icon ve input çakışıyordu (placeholder icon üstüne biniyordu).
 * Çözüm: icon ayrı kutuda, input ondan sonra başlasın.
 * ───────────────────────────────────────────────────────────────────── */
.input-group-merge {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    overflow: hidden !important;
    background: var(--ac-bg-card) !important;
}

.input-group-merge:focus-within {
    border-color: var(--ac-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.input-group-merge .input-group-prepend,
.input-group-merge .input-group-append {
    display: flex !important;
    flex: 0 0 auto !important;
}

.input-group-merge .input-group-text {
    background: var(--ac-bg) !important;
    border: none !important;
    color: var(--ac-text-light) !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    min-width: 44px !important;
}

.input-group-merge .input-group-prepend .input-group-text {
    border-right: 1px solid var(--ac-border) !important;
}

.input-group-merge .input-group-append .input-group-text {
    border-left: 1px solid var(--ac-border) !important;
}

.input-group-merge .form-control {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 11px 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-indent: 0 !important;
}

.input-group-merge .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ── Cart promosyon kodu icon çakışması (KESİN ÇÖZÜM) ──
   WHMCS standard_cart promo HTML:
   <div class="input-group">
     <span class="input-group-text border-end-0"><i class="fas fa-tag"></i></span>
     <input class="form-control border-start-0 ps-0" placeholder="...">
   </div>
   Bootstrap ps-0 + border-start-0 input'un sol padding'ini sıfırlıyor,
   icon kutusu görünmez olunca icon input içine binip placeholder'la çakışıyordu.
   Çözüm: icon kutusunu görünür/ayrı yap, input'a sol padding geri ver. */

/* Genel input-group içindeki icon kutusu - her zaman görünür ve ayrı */
.input-group > .input-group-text,
.input-group-prepend > .input-group-text {
    background: var(--ac-bg) !important;
    border: 1px solid var(--ac-border) !important;
    color: var(--ac-text-light) !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--ac-radius) 0 0 var(--ac-radius) !important;
}

/* Bootstrap'in border-end-0 / border-start-0 / ps-0 sınıflarını nötrle */
.input-group .input-group-text.border-end-0 {
    border-right: 1px solid var(--ac-border) !important;
}

.input-group .form-control.border-start-0 {
    border-left: none !important;
}

.input-group .form-control.ps-0,
.input-group .form-control.pl-0 {
    padding-left: 14px !important;
}

/* Promo input'a kesin sol padding (icon ile çakışmasın) */
.promotioncode .form-control,
#inputPromotionCode,
input[name="promocode"],
input[name="promotioncode"],
.promo-code-input .form-control,
form[action*="cart.php"] .input-group .form-control {
    padding-left: 14px !important;
    text-indent: 0 !important;
    border-radius: 0 var(--ac-radius) var(--ac-radius) 0 !important;
}

/* Promo alanındaki input-group-text icon'u düzgün ayrılsın */
.checkout-promo .input-group-text,
.promotioncode .input-group-text,
form[action*="cart.php"] .input-group-text {
    background: var(--ac-bg) !important;
    border: 1px solid var(--ac-border) !important;
    border-right: 1px solid var(--ac-border) !important;
    color: var(--ac-text-light) !important;
    min-width: 44px !important;
    justify-content: center !important;
    border-radius: var(--ac-radius) 0 0 var(--ac-radius) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * FORM ELEMENTS
 * ───────────────────────────────────────────────────────────────────── */
.form-control {
    border-radius: var(--ac-radius) !important;
    border: 1px solid var(--ac-border) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: var(--ac-bg-card) !important;
    color: var(--ac-dark) !important;
    transition: var(--ac-transition) !important;
    height: auto !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
}

.form-control:focus {
    border-color: var(--ac-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    background: var(--ac-bg-card) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--ac-muted) !important;
}

label {
    color: var(--ac-dark) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

.input-group-prepend .input-group-text,
.input-group-prepend .btn {
    background: var(--ac-bg) !important;
    border: 1px solid var(--ac-border) !important;
    border-right: none !important;
    color: var(--ac-text-light) !important;
    border-radius: var(--ac-radius) 0 0 var(--ac-radius) !important;
}

.input-group > .form-control {
    border-radius: 0 var(--ac-radius) var(--ac-radius) 0 !important;
}

/* Login form özel: password göster butonu (turuncu eye icon) */
.input-group-append .btn {
    background: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
    color: white !important;
    border-radius: 0 var(--ac-radius) var(--ac-radius) 0 !important;
}

.input-group-append .btn:hover {
    background: var(--ac-primary-dark) !important;
    border-color: var(--ac-primary-dark) !important;
}

/* Checkbox & radio */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked {
    background-color: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * LOGIN / REGISTER / PASSWORD RESET FORM
 * HTML yapısı: <form class="login-form"> > .card.mw-540 > .card-body
 * ───────────────────────────────────────────────────────────────────── */

/* Login form'u ortalı ve düzgün boyutta */
.login-form,
form.login-form {
    max-width: 540px !important;
    margin: 40px auto !important;
    padding: 0 16px !important;
}

/* Login card - modern, gölgeli, beyaz */
.login-form .card,
.login-form .card.mw-540 {
    background: var(--ac-bg-card) !important;
    border-radius: var(--ac-radius-lg) !important;
    border: 1px solid var(--ac-border-light) !important;
    box-shadow: var(--ac-shadow-lg) !important;
    overflow: hidden !important;
    max-width: 540px !important;
    margin: 0 auto !important;
}

.login-form .card-body {
    padding: 40px 36px !important;
}

/* Login başlık */
.login-form .card-body h6,
.login-form .card-body .h3 {
    color: var(--ac-dark) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.02em !important;
}

.login-form .card-body .text-muted {
    color: var(--ac-text-light) !important;
    font-size: 14px !important;
    margin-bottom: 24px !important;
}

/* Form group spacing */
.login-form .form-group {
    margin-bottom: 18px !important;
}

.login-form .form-control-label {
    color: var(--ac-dark) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Şifremi Unuttum link */
.login-form a.small.text-muted {
    color: var(--ac-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.login-form a.small.text-muted:hover {
    color: var(--ac-primary-dark) !important;
    text-decoration: underline !important;
}

/* Input group merge - input ve ikon birleştirilmiş */
.login-form .input-group-merge {
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    overflow: hidden !important;
    background: var(--ac-bg-card) !important;
    transition: var(--ac-transition) !important;
}

.login-form .input-group-merge:focus-within {
    border-color: var(--ac-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.login-form .input-group-merge .input-group-prepend {
    display: flex !important;
}

.login-form .input-group-merge .input-group-text {
    background: var(--ac-bg) !important;
    border: none !important;
    border-right: 1px solid var(--ac-border) !important;
    color: var(--ac-text-light) !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
    font-size: 14px !important;
}

.login-form .input-group-merge .form-control {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: var(--ac-dark) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.login-form .input-group-merge .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.login-form .input-group-merge .form-control::placeholder {
    color: var(--ac-muted) !important;
}

/* Password göster/gizle butonu (turuncu eye) */
.login-form .input-group-merge .input-group-append {
    display: flex !important;
}

.login-form .input-group-merge .btn-reveal-pw,
.login-form .input-group-merge .input-group-append .btn {
    background: var(--ac-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    color: white !important;
    padding: 0 16px !important;
    cursor: pointer !important;
    transition: var(--ac-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login-form .input-group-merge .btn-reveal-pw:hover,
.login-form .input-group-merge .input-group-append .btn:hover {
    background: var(--ac-primary-dark) !important;
    color: white !important;
}

/* Giriş butonu */
.login-form .btn-primary,
.login-form button#login {
    background: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
    color: white !important;
    padding: 11px 32px !important;
    border-radius: var(--ac-radius) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: none !important;
    background-image: none !important;
}

.login-form .btn-primary:hover,
.login-form button#login:hover {
    background: var(--ac-primary-dark) !important;
    border-color: var(--ac-primary-dark) !important;
    transform: translateY(-1px) !important;
}

/* Beni hatırla */
.login-form label input[type="checkbox"],
.login-form .form-check-input {
    margin-right: 6px !important;
    accent-color: var(--ac-primary) !important;
    cursor: pointer !important;
}

.login-form .text-right label {
    color: var(--ac-text) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Login form - float düzeni temizle, flex kullan */
.login-form .float-left,
.login-form .text-right {
    float: none !important;
}

.login-form .card-body > div:last-of-type {
    margin-top: 4px !important;
}

/* Login alt bölümü - Hesap oluştur */
.login-form .card-footer {
    background: var(--ac-bg) !important;
    border-top: 1px solid var(--ac-border-light) !important;
    padding: 16px 36px !important;
    text-align: center !important;
}

.login-form .card-footer small {
    color: var(--ac-text-light) !important;
    font-size: 14px !important;
}

.login-form .card-footer .small.font-weight-bold,
.login-form .card-footer a.small {
    color: var(--ac-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}

.login-form .card-footer a.small:hover {
    text-decoration: underline !important;
}

/* Login feedback / hata mesajları */
.providerLinkingFeedback {
    max-width: 540px !important;
    margin: 0 auto !important;
}

.providerLinkingFeedback:empty {
    display: none !important;
}

/* Giriş butonu ve "Beni hatırla" yatay düzen */
.login-form .float-left {
    display: inline-block !important;
}

@media (min-width: 576px) {
    .login-form .card-body > .float-left + .text-right {
        display: inline-block !important;
        float: right !important;
        margin-top: 8px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * GENERIC CARDS (Login form gibi, hosting cards, vs)
 * Default WHMCS .card sınıfı için
 * ───────────────────────────────────────────────────────────────────── */
.card {
    background: var(--ac-bg-card) !important;
    border: 1px solid var(--ac-border-light) !important;
    border-radius: var(--ac-radius-lg) !important;
    box-shadow: var(--ac-shadow-xs) !important;
    transition: var(--ac-transition) !important;
}

.card:hover {
    box-shadow: var(--ac-shadow) !important;
}

.card-header {
    background: var(--ac-bg-card) !important;
    color: var(--ac-dark) !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
}

.card-body {
    padding: 20px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * LABELS (Aktif badge gibi, login form labels değil)
 * Bu sayfada inline style ile gelmiş, ama yine de düzeltelim
 * ───────────────────────────────────────────────────────────────────── */
.label,
span.label {
    padding: 3px 10px !important;
    border-radius: var(--ac-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    color: white !important;
    display: inline-block !important;
}

.badge,
.badge-info {
    padding: 3px 10px !important;
    border-radius: var(--ac-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

.badge-info {
    background: var(--ac-primary) !important;
    color: white !important;
}

.badge-success { background: var(--ac-success) !important; color: white !important; }
.badge-warning { background: var(--ac-warning) !important; color: white !important; }
.badge-danger { background: var(--ac-danger) !important; color: white !important; }
.badge-primary { background: var(--ac-primary) !important; color: white !important; }

/* ── Domain kategori etiketleri (.badge.badge-secondary) ──
   HTML: <a class="badge badge-secondary" data-category="...">Arts and Entertainment (19)</a>
   Gri zemin + mavi link yazısı okunmuyordu. Beyaz yazı + gri-mavi zemin. */
.badge-secondary,
a.badge-secondary {
    background: var(--ac-asbestos) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: var(--ac-radius-full) !important;
    text-decoration: none !important;
    transition: var(--ac-transition) !important;
}

a.badge-secondary:hover {
    background: var(--ac-primary) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Seçili/aktif kategori → YEŞİL (Popular varsayılan seçili, orijinalde yeşildi) */
a.badge.active,
a.badge-secondary.active,
a.badge-primary.active,
a.badge-success,
.badge.active {
    background: var(--ac-success) !important;
    color: white !important;
}

a.badge.active:hover,
a.badge-secondary.active:hover {
    background: #0EA371 !important;
    color: white !important;
}

/* Genel: badge olan tüm <a> linkleri beyaz yazı (kategori filtreleri) */
a.badge {
    color: white !important;
    text-decoration: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * BANNER (Login/Register sayfa headerleri için)
 * ───────────────────────────────────────────────────────────────────── */
.hostiko-banner-whmcs {
    background-color: var(--ac-primary-bg) !important;
    background-image: linear-gradient(180deg, var(--ac-primary-bg) 0%, var(--ac-bg) 100%) !important;
    padding: 60px 0 80px !important;
    margin-bottom: 0 !important;
}

.hostiko-banner-whmcs .title-heading,
.hostiko-banner-whmcs h1 {
    color: var(--ac-dark) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

.hostiko-banner-whmcs .title-text {
    color: var(--ac-text-light) !important;
    text-align: center !important;
    font-size: 0.95rem !important;
}

.hostiko-banner-whmcs .breadcrumb {
    background: transparent !important;
    justify-content: center !important;
    padding: 12px 0 0 !important;
    margin-bottom: 0 !important;
}

.hostiko-banner-whmcs .breadcrumb-item a {
    color: var(--ac-primary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

.hostiko-banner-whmcs .breadcrumb-item.active {
    color: var(--ac-text-light) !important;
    font-size: 13px !important;
}

.hostiko-banner-whmcs .breadcrumb-item + .breadcrumb-item::before {
    color: var(--ac-muted) !important;
    content: "›" !important;
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * FOOTER SECTION (koyu lacivert middle-portion)
 * Bu HTML'de logged-in için CTA YOK, sadece middle-portion var
 * ───────────────────────────────────────────────────────────────────── */
.footer-section {
    background: var(--ac-bg) !important;
    position: relative !important;
}

/* CTA bölümü (logged-out durumda) */
.footer-section .contact-section {
    margin-top: -40px !important;
    padding: 40px 50px !important;
    border-radius: var(--ac-radius-xl) !important;
    background-image: none !important;
    background: linear-gradient(135deg, var(--ac-primary) 0%, var(--ac-primary-dark) 100%) !important;
    box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.4) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.footer-section .contact-section::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 350px !important;
    height: 350px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 70%) !important;
    border-radius: 50% !important;
}

.footer-section .contact-section > * {
    position: relative !important;
    z-index: 1 !important;
}

.footer-section .contact-section .content h3 {
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em !important;
}

.footer-section .contact-section .content p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.footer-section .contact-section .button .get_started {
    background: var(--ac-bg-card) !important;
    color: var(--ac-primary) !important;
    border: none !important;
    border-radius: var(--ac-radius) !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
    transition: var(--ac-transition) !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.footer-section .contact-section .button .get_started:hover {
    transform: translateY(-2px) !important;
    background: var(--ac-bg) !important;
    color: var(--ac-primary-dark) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Middle portion - koyu lacivert footer */
/* NOT: Eski 9999px trick yatay scroll oluşturuyordu (footer sağa uzuyordu).
   Yeni yöntem: viewport tabanlı width + negative margin ile container'ı genişlet.
   Bu hem yatay scroll açmaz hem de tam genişlik lacivert arka plan verir. */
.footer-section .middle-portion {
    background: var(--ac-navy) !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 50px !important;
    padding: 60px 0 40px !important;
}

/* İçerik container genişliğinde ortalı kalsın */
.footer-section .middle-portion .row {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.footer-section .middle-portion .row > [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Masaüstünde footer kolon dengesini düzelt (≥992px):
   İletişim Adresleri kolonu (col-lg-3) diğerlerine göre geniş duruyordu.
   Logo geniş kalsın, link kolonları + İletişim daha dengeli olsun. */
@media (min-width: 992px) {
    /* Logo kolonu biraz daralt */
    .footer-section .middle-portion .row > .col-lg-4 {
        flex: 0 0 33% !important;
        max-width: 33% !important;
    }
    /* Navigasyon biraz genişlesin */
    .footer-section .middle-portion .row > .col-lg-2 {
        flex: 0 0 19% !important;
        max-width: 19% !important;
    }
    /* Kısayol Linkleri */
    .footer-section .middle-portion .row > .use-link,
    .footer-section .middle-portion .row > .col-lg-3:nth-of-type(3) {
        flex: 0 0 23% !important;
        max-width: 23% !important;
    }
    /* İletişim Adresleri kolonu daralt (son col-lg-3) */
    .footer-section .middle-portion .row > .col-lg-3:last-child {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

.footer-section .middle-portion h4,
.footer-section .middle-portion .heading {
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.footer-section .middle-portion p {
    color: rgba(255, 255, 255, 0.65) !important;
    line-height: 1.7 !important;
    font-size: 14px !important;
}

.footer-section .footer-logo {
    margin-bottom: 16px !important;
}

.footer-section .footer-logo img {
    width: 140px !important;
    filter: brightness(0) invert(1) !important;
    height: auto !important;
}

.footer-section .middle-portion .social-icons {
    margin-top: 20px !important;
    padding: 0 !important;
    display: flex !important;
    gap: 6px !important;
}

.footer-section .middle-portion .social-icons li {
    list-style: none !important;
    margin: 0 !important;
}

.footer-section .middle-portion .social-icons li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    height: 36px !important;
    width: 36px !important;
    border-radius: var(--ac-radius) !important;
    transition: var(--ac-transition) !important;
    text-decoration: none !important;
}

.footer-section .middle-portion .social-icons li a i {
    color: inherit !important;
}

.footer-section .middle-portion .social-icons li a:hover {
    background: var(--ac-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

.footer-section .middle-portion .links li {
    margin-bottom: 10px !important;
    list-style: none !important;
}

.footer-section .middle-portion .links li i {
    color: var(--ac-primary-light) !important;
    font-size: 10px !important;
    margin-right: 8px !important;
}

.footer-section .middle-portion .links li a {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: var(--ac-transition) !important;
    text-decoration: none !important;
}

.footer-section .middle-portion .links li a:hover {
    color: white !important;
}

/* İletişim adresleri (HER EKRANDA ortalı - masaüstü + mobil).
   Önce sadece mobilde ortalıyordu; masaüstünde sola yaslıydı.
   .icon text-align:center + ul fit-content+margin:auto = ortalı blok. */
.footer-section .middle-portion .icon {
    text-align: center !important;
}

.footer-section .middle-portion .icon ul,
.footer-section .middle-portion .icon ul.list-unstyled {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    list-style: none !important;
}

.footer-section .middle-portion .icon ul li,
.footer-section .middle-portion .icon ul li.text {
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    list-style: none !important;
}

/* Adres 2 satır olduğu için metni de ortala (telefon/mail kısa, zaten ortalıydı) */
.footer-section .middle-portion .icon ul li .address,
.footer-section .middle-portion .icon ul li p,
.footer-section .middle-portion .icon ul li a {
    text-align: center !important;
}

.footer-section .middle-portion .icon ul li i {
    color: var(--ac-primary-light) !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
    width: 16px !important;
}

.footer-section .middle-portion .icon ul li a,
.footer-section .middle-portion .icon ul li p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    margin: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.footer-section .middle-portion .icon ul li a:hover {
    color: white !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * COPYRIGHT FOOTER
 * ───────────────────────────────────────────────────────────────────── */
footer.footer,
footer#footer {
    background: var(--ac-navy) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 0 !important;
    margin-top: 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

footer.footer .container {
    color: rgba(255, 255, 255, 0.6) !important;
}

footer.footer .btn,
footer.footer .nav-link,
footer.footer .btn-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
    color: white !important;
    border-radius: var(--ac-radius) !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: none !important;
    box-shadow: none !important;
    margin: 0 2px !important;
}

footer.footer .btn:hover,
footer.footer .nav-link:hover,
footer.footer .btn-icon:hover {
    background: var(--ac-primary) !important;
    border-color: var(--ac-primary) !important;
    color: white !important;
}

footer.footer .btn-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

footer.footer .nav-link {
    background: transparent !important;
}

footer.footer .nav-link:hover {
    background: transparent !important;
    color: var(--ac-primary-light) !important;
}

footer.footer .copyright {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

footer.footer ul {
    padding: 0 !important;
    margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * TABLES
 * ───────────────────────────────────────────────────────────────────── */
.table {
    background: var(--ac-bg-card) !important;
    border-radius: var(--ac-radius-lg) !important;
    overflow: hidden !important;
}

.table thead th {
    background: var(--ac-bg) !important;
    color: var(--ac-dark) !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--ac-border) !important;
    border-top: none !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.table tbody tr:hover {
    background: var(--ac-primary-bg) !important;
}

.table td {
    padding: 12px 16px !important;
    border-color: var(--ac-border-light) !important;
    vertical-align: middle !important;
    color: var(--ac-text) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--ac-bg) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * MODALS
 * ───────────────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--ac-radius-lg) !important;
    border: none !important;
    box-shadow: var(--ac-shadow-lg) !important;
    overflow: hidden !important;
}

.modal-header {
    background: var(--ac-bg) !important;
    border-bottom: 1px solid var(--ac-border-light) !important;
    padding: 16px 20px !important;
}

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

.modal-title {
    font-weight: 700 !important;
    color: var(--ac-dark) !important;
}

.modal-header.bg-primary .modal-title {
    color: white !important;
}

.modal-body {
    padding: 20px !important;
}

.modal-footer {
    padding: 14px 20px !important;
    background: var(--ac-bg) !important;
    border-top: 1px solid var(--ac-border-light) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * ALERTS
 * ───────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--ac-radius) !important;
    border: 1px solid transparent !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.alert-info {
    background: var(--ac-primary-bg) !important;
    border-color: var(--ac-primary-soft) !important;
    color: var(--ac-primary-dark) !important;
}

.alert-success {
    background: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
}

.alert-warning {
    background: #FFFBEB !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

.alert-danger {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #991B1B !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * PAGINATION
 * ───────────────────────────────────────────────────────────────────── */
.pagination {
    gap: 4px !important;
}

.page-link {
    border-radius: var(--ac-radius-sm) !important;
    border: 1px solid var(--ac-border) !important;
    color: var(--ac-text) !important;
    padding: 7px 12px !important;
    font-weight: 600 !important;
}

.page-link:hover {
    background: var(--ac-primary-soft) !important;
    color: var(--ac-primary) !important;
    border-color: var(--ac-primary-light) !important;
}

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

/* ─────────────────────────────────────────────────────────────────────
 * BREADCRUMBS
 * ───────────────────────────────────────────────────────────────────── */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1.25rem !important;
    font-size: 13px !important;
}

.breadcrumb-item a {
    color: var(--ac-primary) !important;
    font-weight: 500 !important;
}

.breadcrumb-item.active {
    color: var(--ac-text-light) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ac-muted) !important;
    content: "›" !important;
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * TABS
 * ───────────────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--ac-border) !important;
}

.nav-tabs .nav-link {
    border: none !important;
    color: var(--ac-text-light) !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    background: transparent !important;
    position: relative !important;
}

.nav-tabs .nav-link:hover {
    color: var(--ac-primary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--ac-primary) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--ac-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * RETURN TO ADMIN BUTTON
 * ───────────────────────────────────────────────────────────────────── */
.btn-return-to-admin {
    background: var(--ac-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ac-radius) 0 0 var(--ac-radius) !important;
    box-shadow: var(--ac-shadow-md) !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.btn-return-to-admin:hover {
    background: var(--ac-primary-dark) !important;
    color: white !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * SHOPPING CART, PROGRESS, MISC
 * ───────────────────────────────────────────────────────────────────── */
.order-summary,
.cart-summary {
    background: var(--ac-bg-card) !important;
    border-radius: var(--ac-radius-lg) !important;
    box-shadow: var(--ac-shadow-xs) !important;
    border: 1px solid var(--ac-border-light) !important;
    padding: 20px !important;
}

.progress {
    height: 8px !important;
    border-radius: var(--ac-radius-full) !important;
    background: var(--ac-bg) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.progress-bar {
    background: var(--ac-primary) !important;
}

/* TEXT COLORS */
.text-primary { color: var(--ac-primary) !important; }
.text-success { color: var(--ac-success) !important; }
.text-danger { color: var(--ac-danger) !important; }
.text-info { color: var(--ac-primary) !important; }
.text-warning { color: var(--ac-warning) !important; }
.text-muted { color: var(--ac-text-light) !important; }

/* ─────────────────────────────────────────────────────────────────────
 * RESPONSIVE - Mobile First Düzeltmeler
 * ───────────────────────────────────────────────────────────────────── */

/* Tablet ve aşağısı (≤991px) */
@media (max-width: 991px) {
    /* Container padding kabuk */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Topbar mobilde sıkışmasın */
    #header.header .topbar {
        padding: 10px 0 !important;
    }
    
    #header.header .topbar .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }
    
    #header.header .topbar .mr-auto,
    #header.header .topbar .ml-auto {
        margin: 0 !important;
    }
    
    /* Notifications butonu daha kompakt */
    #header.header .topbar #accountNotifications {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    
    #header.header .topbar #accountNotifications .d-none.d-sm-inline {
        display: none !important;
    }
    
    /* Sepet ve user dropdown mobilde de düzgün */
    #header.header .topbar .sign-in-topbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    #header.header .topbar .sign-in-topbar-right > li {
        margin: 0 !important;
    }
    
    #header.header .topbar .cart-btn {
        margin-left: 0 !important;
        padding: 5px 10px !important;
    }
    
    #header.header .topbar .active-client .dropdown-toggle {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
    
    /* Navbar branding ve mobile button */
    #header .navbar.navbar-light {
        padding: 12px 0 !important;
    }
    
    #header .navbar-brand img {
        width: 130px !important;
    }
    
    /* ── Mobilde logo (sol) + burger (sağ) aynı satırda, menü altta ── */
    #header .navbar.navbar-light > .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
    }
    
    /* Logo sol tarafta */
    #header .navbar.navbar-light > .container > .navbar-brand {
        order: 1 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    /* Burger butonu (toolbar) sağ tarafta, logo ile aynı hizada */
    #header .navbar.navbar-light > .container > .toolbar,
    #header .navbar-nav.toolbar {
        order: 2 !important;
        margin: 0 0 0 auto !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Açılan menü (main-navbar-wrapper) tam genişlik, alt satıra */
    #header .navbar.navbar-light > .container > .main-navbar-wrapper {
        order: 3 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        position: static !important;
    }
    
    #header .navbar.navbar-light {
        flex-wrap: wrap !important;
        position: relative !important;
    }
    
    #header .main-navbar-wrapper {
        width: 100% !important;
        position: static !important;
    }
    
    #header .navbar-collapse {
        background: var(--ac-bg-card) !important;
        border-radius: var(--ac-radius-lg) !important;
        margin-top: 14px !important;
        padding: 12px !important;
        box-shadow: var(--ac-shadow-md) !important;
        border: 1px solid var(--ac-border-light) !important;
        width: 100% !important;
        position: static !important;
        z-index: 50 !important;
    }
    
    /* Mobil menü içindeki arama formu */
    #header .navbar-collapse form,
    #header .navbar-collapse .input-group.search {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    #header .navbar-collapse .input-group.search .form-control {
        border-radius: 0 var(--ac-radius) var(--ac-radius) 0 !important;
        background: var(--ac-bg) !important;
        border: 1px solid var(--ac-border) !important;
        font-size: 14px !important;
    }
    
    #header .navbar-collapse .input-group.search .btn-default {
        border-radius: var(--ac-radius) 0 0 var(--ac-radius) !important;
        background: var(--ac-bg) !important;
        border: 1px solid var(--ac-border) !important;
        border-right: none !important;
    }
    
    #header .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        gap: 2px !important;
    }
    
    #header .navbar-collapse .navbar-nav > li {
        width: 100% !important;
        border-bottom: 1px solid var(--ac-border-light) !important;
    }
    
    #header .navbar-collapse .navbar-nav > li:last-child {
        border-bottom: none !important;
    }
    
    #header .navbar-collapse .navbar-nav > li > a {
        padding: 12px 14px !important;
        width: 100% !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 14px !important;
        border-radius: var(--ac-radius-sm) !important;
    }
    
    /* "Yeni Destek Bildirimi" / İletişim butonu mobilde tam genişlik + MAVİ */
    #header .navbar-collapse .navbar-nav #Primary_Navbar-Open_Ticket > a,
    #header .navbar-collapse .navbar-nav #Primary_Navbar-Contact_Us > a,
    #header .navbar-collapse .navbar-nav li.menu-button > a,
    #header .navbar-collapse .navbar-nav .nav-item.btn > a {
        margin-top: 10px !important;
        margin-left: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        background: var(--ac-primary) !important;
        color: white !important;
        border-radius: var(--ac-radius) !important;
        font-weight: 600 !important;
        padding: 12px 14px !important;
    }
    
    #header .navbar-collapse .navbar-nav #Primary_Navbar-Open_Ticket > a:hover,
    #header .navbar-collapse .navbar-nav #Primary_Navbar-Contact_Us > a:hover {
        background: var(--ac-primary-dark) !important;
        color: white !important;
    }
    
    #header .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        background: var(--ac-bg) !important;
        margin: 0 0 6px !important;
        padding: 4px 0 4px 12px !important;
        width: 100% !important;
    }
    
    #header .navbar-collapse .dropdown-menu .dropdown-item a,
    #header .navbar-collapse .dropdown-menu a {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    /* Banner */
    .hostiko-banner-whmcs {
        padding: 40px 0 50px !important;
    }
    
    .hostiko-banner-whmcs .title-heading,
    .hostiko-banner-whmcs h1 {
        font-size: 1.625rem !important;
    }
    
    /* Footer CTA */
    .footer-section .contact-section {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 24px !important;
    }
    
    .footer-section .contact-section .content h3 {
        font-size: 1.25rem !important;
    }
}

/* ── KRİTİK: Mobile sidebar (≤991px) sıkışıyordu ── */
@media (max-width: 991px) {
    /* Ana içerik ve sidebar yan yana DEĞIL, sidebar ALTTA */
    #main-body > .container > .row {
        flex-direction: column !important;
    }
    
    /* Sidebar tam genişlik */
    #main-body .col-lg-4.col-xl-3 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 2 !important;  /* Sidebar ALTA gitsin */
        margin-top: 24px !important;
    }
    
    /* Ana içerik tam genişlik ve ÖNCE */
    #main-body .col-lg-8.col-xl-9.primary-content {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 1 !important;  /* İçerik ÜSTTE */
    }
    
    /* Sidebar tek sütun olsun, kartlar yan yana */
    .sidebar {
        display: block !important;
    }
    
    .sidebar .card.card-sidebar {
        margin-bottom: 14px !important;
    }
    
    /* d-none d-lg-block sidebar (Sorumlular/Hızlı Erişim) artık görünsün mobilde */
    .d-none.d-lg-block.sidebar {
        display: block !important;
    }
    
    /* d-md-none sidebar-secondary GİZLENSİN (duplicate olur) */
    .d-md-none.sidebar.sidebar-secondary {
        display: none !important;
    }
}

/* Mobil (≤768px) */
@media (max-width: 768px) {
    h1, .h1 { font-size: 1.5rem !important; }
    h2, .h2 { font-size: 1.25rem !important; }
    
    section#main-body {
        padding: 30px 0 50px !important;
    }
    
    /* Stat tiles - mobilde 2x2 grid (üstte 1-2, altta 3-4) */
    .tiles .row.no-gutters {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    
    .tiles .row.no-gutters > [class*="col-"] {
        padding: 0 !important;
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }
    
    /* Mobilde tile içeriği - sayı + başlık + ikon (sol hizalı, ferah) */
    .tile {
        min-height: 90px !important;
        padding: 16px !important;
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: center !important;
    }
    
    .tile > i {
        font-size: 22px !important;
        top: 16px !important;
        right: 16px !important;
        opacity: 0.4 !important;
    }
    
    .tile .stat {
        font-size: 28px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
    }
    
    .tile .title {
        font-size: 11px !important;
        letter-spacing: 0.03em !important;
    }
    
    /* Card header'ları mobilde sıkışıyor */
    .client-home-cards .card-header h3,
    .client-home-cards .card-header .card-title {
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .client-home-cards .card-header .float-right {
        float: none !important;
        margin-left: auto !important;
    }
    
    .client-home-cards .card-header .btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
    
    /* Domain input mobilde dikey */
    #registerDomainPanel .input-group {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    #registerDomainPanel .input-group .form-control {
        width: 100% !important;
        border-radius: var(--ac-radius) !important;
    }
    
    #registerDomainPanel .input-group-btn,
    #registerDomainPanel .input-group-append {
        width: 100% !important;
        display: flex !important;
        gap: 6px !important;
    }
    
    #registerDomainPanel .input-group-btn .btn,
    #registerDomainPanel .input-group-append .btn {
        flex: 1 !important;
    }
    
    /* Footer - 4 sütun yerine 2 sütun (full-width korunur) */
    .footer-section .middle-portion {
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        margin-top: 40px !important;
        padding: 40px 0 24px !important;
    }
    
    .footer-section .middle-portion .row {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .footer-section .middle-portion .row > [class*="col-"] {
        margin-bottom: 24px !important;
    }
    
    /* Footer logo alanı tam genişlik */
    .footer-section .middle-portion .col-lg-4 {
        text-align: center !important;
    }
    
    .footer-section .footer-logo {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 16px !important;
    }
    
    .footer-section .middle-portion .social-icons {
        justify-content: center !important;
    }
    
    /* Copyright footer */
    footer.footer {
        text-align: center !important;
    }
    
    footer.footer .float-lg-right {
        float: none !important;
        margin-bottom: 16px !important;
        justify-content: center !important;
        display: flex !important;
    }
    
    footer.footer .list-inline {
        justify-content: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    footer.footer .nav {
        justify-content: center !important;
        margin-bottom: 12px !important;
    }
    
    footer.footer .copyright {
        text-align: center !important;
        font-size: 12px !important;
    }
    
    /* ── TLD fiyat tablosu — GERÇEK YAPI: tablo değil, DIV-GRID! ──
       HTML: .tld-pricing-header > .col-md-4 (Alan Adı) + .col-md-8 > 3x .col-4
       Veri satırları da aynı düzende. Mobilde col-md-* tam genişlik olunca
       (+ bizim genel full-width kuralı col-4'leri de %100 yapınca) her şey
       alt alta dağılıyordu. Çözüm: bu grid'i yüzdelik kolonlarla yan yana tut. */
    
    /* Sol kolon (Alan Adı / .com / .net) %30 */
    #order-standard_cart .tld-pricing-header > .col-md-4,
    #order-standard_cart .bg-white .row.no-gutters > .col-md-4,
    .tld-pricing-header > .col-md-4 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        width: 30% !important;
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        padding: 8px 6px !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        word-break: break-all !important;
    }
    
    /* Sağ blok (fiyatlar) %70 */
    #order-standard_cart .tld-pricing-header > .col-md-8,
    #order-standard_cart .bg-white .row.no-gutters > .col-md-8,
    .tld-pricing-header > .col-md-8 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        width: 70% !important;
    }
    
    /* İç 3 fiyat kolonu (Yeni Fiyat / Transfer / Yenileme) 3'lü yan yana */
    #order-standard_cart .tld-pricing-header .col-4,
    #order-standard_cart .tld-pricing-header .col-xs-4,
    #order-standard_cart .bg-white .row.no-gutters .col-4,
    #order-standard_cart .bg-white .row.no-gutters .col-xs-4 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
        font-size: 12px !important;
        padding: 8px 2px !important;
        text-align: center !important;
        word-break: normal !important;
        white-space: normal !important;
    }
    
    /* Satırlar yan yana düzeni korusun (genel wrap kuralını ez).
       NOT: display:flex BURADA KULLANILMAZ! WHMCS kategori filtresi satırları
       display:none ile gizliyor; flex'e zorlamak TÜM TLD'leri açığa çıkarıyordu.
       Bootstrap .row zaten flex — sadece wrap davranışını düzeltiyoruz. */
    #order-standard_cart .tld-pricing-header,
    #order-standard_cart .bg-white > .row.no-gutters,
    #order-standard_cart .bg-white .row.no-gutters {
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        align-items: stretch !important;
    }
    
    /* ── Ayarlanabilen Seçenekler mobilde (configurable options kartları) ── */
    /* MOBİL TAŞMA FİX (GÜÇLENDİRİLDİ): sayfa sola kayıyordu.
       Tüm sipariş sayfası zincirinde yatay taşmayı kes + Bootstrap .row
       negatif margin'ini sıfırla. */
    #main-body,
    #main-body .container,
    #main-body .container > .row,
    #order-standard_cart,
    #order-standard_cart > .row,
    #order-standard_cart .cart-body,
    #order-standard_cart .secondary-cart-body,
    #order-standard_cart .secondary-cart-sidebar,
    #order-standard_cart .product-configurable-options,
    #order-standard_cart form {
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Bootstrap .row negatif margin (-15px) yatay scroll yapıyor → sıfırla */
    #order-standard_cart .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Sipariş sayfası container/içerik padding'ini azalt - kartlar kenarlara
       yaklaşsın (fazla içeri sıkışmıştı). */
    #main-body > .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    
    #order-standard_cart .col-12.primary-content,
    #order-standard_cart .cart-body,
    #order-standard_cart .secondary-cart-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #order-standard_cart .cart-body > form > .row {
        display: block !important;
        gap: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Lacivert başlık barlarının negatif margin'i mobilde taşmasın */
    #order-standard_cart .product-configurable-options .form-group > label[for^="inputConfigOption"] {
        margin-left: -14px !important;
        margin-right: -14px !important;
    }
    
    /* Sipariş yapılandırma: içerik + özet mobilde alt alta tam genişlik */
    #order-standard_cart .secondary-cart-body,
    #order-standard_cart .secondary-cart-sidebar {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    #order-standard_cart .product-configurable-options > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: column !important;
    }
    
    #order-standard_cart .product-configurable-options > .row > .col-sm-6,
    #order-standard_cart .product-configurable-options > .row > [class*="col-"],
    #order-standard_cart .product-configurable-options > .row > .form-group {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #order-standard_cart .product-configurable-options .form-group {
        padding: 14px !important;
    }
    
    #order-standard_cart .product-configurable-options .form-group > label:not([for]) {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    /* ── Domain register sarı banner (cart.php?a=add&domain=register) ──
       Mobilde arama kutusu + captcha sola kaymıştı; ortala + taşmayı engelle. */
    .domain-checker-container,
    .domain-checker-bg {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    
    .domain-checker-bg .row,
    .domain-checker-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* offset'li kolonlar mobilde tam genişlik + ortalı */
    .domain-checker-bg [class*="col-"],
    .domain-checker-container [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Arama input + buton grubu tam genişlik, ortalı */
    #frmDomainChecker .input-group,
    .domain-checker-bg .input-group {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    #frmDomainChecker .input-group .form-control,
    .domain-checker-bg .input-group .form-control {
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Captcha kutusu ortalı */
    .domain-checker-bg .captcha-row,
    #capatchaContainer,
    .domain-checker-bg .text-center img,
    .domain-checker-bg img[src*="captcha"] {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    
    /* ── Sipariş formu (cart.php) Kategoriler paneli ──
       HTML: <div class="panel card card-sidebar mb-3 panel-sidebar">
       Mobilde panel daralıp yazılar harf harf bölünüyordu (dikey).
       ASIL SORUN: paneli saran KOLON dar kalıyordu (col-3 gibi).
       Çözüm: hem paneli hem saran kolonu full genişlik yap. */
    .panel-sidebar,
    .card-sidebar.panel-sidebar,
    .panel.card.card-sidebar.panel-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin-bottom: 16px !important;
    }
    
    /* :has() ile panel-sidebar'ı içeren kolonu full genişlik yap (modern tarayıcılar) */
    .row > [class*="col-"]:has(.panel-sidebar),
    .row > [class*="col-"]:has(> .panel-sidebar),
    [class*="col-"]:has(.panel-sidebar),
    [class*="col-"]:has(> .panel.panel-sidebar),
    div:has(> .panel-sidebar) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Order form layout - sidebar ve içerik alt alta (stack) */
    #order-standard_cart .row,
    #frmConfigureProduct .row,
    .order-form .row,
    .orderform .row,
    .order-page .row {
        flex-wrap: wrap !important;
    }
    
    /* Sipariş formu TÜM kolonları tam genişlik (col-3, col-md-3, col-lg-3 dahil) */
    #order-standard_cart .row > [class*="col-"],
    .order-form .row > [class*="col-"],
    .orderform .row > [class*="col-"],
    .order-page .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Genel: col-3 / col-2 gibi responsive olmayan dar kolonlar mobilde full
       (sadece içinde sidebar/panel olan order alanlarında) */
    .order-content .col-3,
    .order-content .col-2,
    .order-content .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Kategoriler paneli içindeki linkler düzgün, kırılmadan */
    .panel-sidebar .list-group-item,
    .panel-sidebar a {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    
    /* ── MOBİL TABLO UYUMU (Alan Adları, Ürünlerim, Faturalar listeleri) ── */
    /* WHMCS tabloları mobilde yatay taşıyordu. Yatay kaydırma sarmalı ekle. */
    .table-responsive,
    .table-container,
    #tableServicesList_wrapper,
    #tableDomainsList_wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Tablonun KENDİSİ scroll edilebilir olsun (wrapper olmasa bile).
       display:block + overflow-x:auto ile tablo sayfayı taşırmaz,
       kendi içinde yatay kayar. */
    .primary-content .table,
    .primary-content table.table,
    #main-body .table,
    .card .table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Tablo içeriği taşma sınırında kalsın, sayfayı genişletmesin */
    .primary-content,
    #main-body .primary-content,
    .col-lg-8.primary-content,
    .col-xl-9.primary-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* DataTables üst kısmı (arama, uzunluk seçimi) mobilde dikey */
    .dataTables_wrapper .row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        width: 100% !important;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* ── Aktif Ürün/Hizmetler bölümü mobilde (GERÇEK class .div-service-*) ──
       Hizmet butonları (cPanel'e Giriş Yap, Detayları Görüntüle) tam genişlik. */
    .div-service-buttons {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 12px !important;
    }
    
    .div-service-buttons .btn,
    .div-service-buttons .btn-view-details {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 !important;
        text-align: center !important;
        white-space: normal !important;
        font-size: 13px !important;
    }
    
    /* İç içe dropdown mobilde de gizli (kullanıcı tercihi) */
    .btn-group.btn-group-sm > .btn-group,
    .btn-group > .btn-group {
        display: none !important;
    }
    
    /* Hizmet satırı mobilde dikey */
    .div-service-item {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .div-service-status {
        margin: 11px auto !important;
        text-align: center !important;
    }
    
    /* ── Alan adı sayfası üst aksiyon butonları (Nameserver Yönetimi vs) ── */
    /* Gerçek HTML: .btn-group.btn-group-sm içinde setBulkAction butonları.
       Mobilde tam genişlik, alt alta, okunaklı. */
    .btn-group.btn-group-sm,
    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .btn-group.btn-group-sm > .btn,
    .btn-group > .btn,
    .btn-group.btn-group-sm > .btn-group {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Nested "Daha Fazla..." dropdown butonu tam genişlik */
    .btn-group.btn-group-sm > .btn-group {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .btn-group.btn-group-sm > .btn-group > .dropdown-toggle {
        width: 100% !important;
    }
    
    /* Dropdown menü tam genişlik açılsın */
    .btn-group .dropdown-menu {
        width: 100% !important;
    }
    
    /* Eski genel kurallar (varsa) */
    .domain-action-btns,
    .btn-toolbar,
    .panel-actions,
    .domain-management-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        overflow-x: visible !important;
    }
    
    /* Domain yönetim aksiyon kartları (Nameserver Yönetimi, İletişim Düzenle,
       Alan Adlarını Yenile, Daha...) - yatay kaydırma yerine 2'li grid */
    .domain-overview-actions,
    .domain-actions-row,
    .clientarea-action-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .domain-overview-actions > *,
    .domain-actions-row > * {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
    }
    
    .domain-action-btns > *,
    .btn-toolbar > * {
        flex: 0 0 auto !important;
    }
    
    /* WHMCS slick/carousel tarzı yatay buton kaydırıcı varsa wrap'e zorla */
    .clientarea-actions,
    .actions-wrapper {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    
    /* Sayfalama (Toplam X sayfa) ortalı */
    .dataTables_info,
    .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        width: 100% !important;
    }
}

/* Küçük mobil (≤576px) */
@media (max-width: 576px) {
    /* Login form mobilde */
    .login-form,
    form.login-form {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }
    
    .login-form .card-body {
        padding: 28px 22px !important;
    }
    
    .login-form .card-body h6,
    .login-form .card-body .h3 {
        font-size: 1.5rem !important;
    }
    
    .login-form .card-footer {
        padding: 14px 22px !important;
    }
    
    /* Giriş butonu ve Beni hatırla mobile dikey */
    .login-form .float-left {
        display: block !important;
        width: 100% !important;
        margin-bottom: 14px !important;
    }
    
    .login-form .float-left .btn-primary {
        width: 100% !important;
    }
    
    .login-form .text-right {
        text-align: center !important;
        display: block !important;
    }
    
    /* Stat tiles - 576px altında da 2x2 grid */
    .tiles .row.no-gutters > .col-6,
    .tiles .row.no-gutters > [class*="col-"] {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        padding: 0 !important;
    }
    
    .tile {
        min-height: 82px !important;
        padding: 14px !important;
    }
    
    .tile .stat {
        font-size: 24px !important;
    }
    
    .tile .title {
        font-size: 10px !important;
    }
    
    .tile > i {
        font-size: 18px !important;
        top: 12px !important;
        right: 12px !important;
        opacity: 0.35 !important;
    }
    
    /* Iki kart yan yana yerine üst üste */
    #main-body .col-md-6.col-lg-12.col-xl-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Card body padding daha az */
    .card-body {
        padding: 14px !important;
    }
    
    .client-home-cards .card-header {
        padding: 12px 16px !important;
    }
    
    .client-home-cards .card-body {
        padding: 14px 16px !important;
    }
    
    .sidebar .card-body {
        padding: 14px !important;
    }
    
    .sidebar .card-header {
        padding: 12px 14px !important;
    }
    
    .sidebar .card-header h3,
    .sidebar .card-header .card-title {
        font-size: 13px !important;
    }
    
    .sidebar .card-footer {
        padding: 12px 14px !important;
    }
    
    /* Footer 2 sütun yerine 1 sütun */
    .footer-section .middle-portion .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .footer-section .middle-portion .links,
    .footer-section .middle-portion .use-link,
    .footer-section .middle-portion .icon {
        text-align: center !important;
    }
    
    .footer-section .middle-portion .links ul,
    .footer-section .middle-portion .use-link ul {
        display: block !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }
    
    /* İletişim adresleri - GERÇEK YAPI:
       .icon > ul.list-unstyled > li.text > (i + p.address/a)
       Blok ortada, ikon+metin bitişik. fit-content+margin:auto = kesin ortalı. */
    .footer-section .middle-portion .icon {
        text-align: center !important;
    }
    
    .footer-section .middle-portion .icon ul,
    .footer-section .middle-portion .icon ul.list-unstyled {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .footer-section .middle-portion .icon ul li,
    .footer-section .middle-portion .icon ul li.text {
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 14px !important;
        display: flex !important;
        gap: 10px !important;
    }
    
    /* İkon metnin hemen solunda, kaymasın */
    .footer-section .middle-portion .icon ul li i,
    .footer-section .middle-portion .icon ul li.text > i {
        flex-shrink: 0 !important;
        margin-top: 3px !important;
        width: 16px !important;
    }
    
    /* Adres metni ve linkler - 2 satır adres de ortalı */
    .footer-section .middle-portion .icon ul li .address,
    .footer-section .middle-portion .icon ul li p,
    .footer-section .middle-portion .icon ul li a {
        line-height: 1.5 !important;
        font-size: 13px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Kısayol/Navigasyon linklerini de aynı yöntemle kesin ortala */
    .footer-section .middle-portion .links ul,
    .footer-section .middle-portion .use-link ul {
        display: block !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }
    
    .footer-section .middle-portion h4,
    .footer-section .middle-portion .heading {
        text-align: center !important;
        margin-bottom: 14px !important;
    }
    
    /* Banner */
    .hostiko-banner-whmcs {
        padding: 32px 0 40px !important;
    }
    
    .hostiko-banner-whmcs .title-heading,
    .hostiko-banner-whmcs h1 {
        font-size: 1.375rem !important;
    }
    
    /* Search bar mobilde gizle */
    #header.header .topbar .logged_in_search {
        display: none !important;
    }
    
    /* Notification kompakt */
    #header.header .topbar #accountNotifications {
        font-size: 11px !important;
    }
}

/* Çok küçük (≤400px) - extra kompakt */
@media (max-width: 400px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .tile {
        min-height: 74px !important;
        padding: 12px 10px !important;
    }
    
    .tile .stat {
        font-size: 22px !important;
    }
    
    .tile .title {
        font-size: 9px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.2 !important;
    }
    
    .tile > i {
        font-size: 15px !important;
        top: 10px !important;
        right: 10px !important;
        opacity: 0.3 !important;
    }
    
    /* Notifications text gizle, sadece icon kalsın */
    #header.header .topbar #accountNotifications .d-none.d-sm-inline,
    #header.header .topbar #accountNotifications {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * SELECTION
 * ───────────────────────────────────────────────────────────────────── */
/* NOT: Global ::-webkit-scrollbar override kaldırıldı.
   Sayfanın ana scroll bar'ı çok kalın görünüyordu, artık tarayıcının
   orijinal/varsayılan scroll bar'ı kullanılıyor. */

::selection {
    background: var(--ac-primary);
    color: white;
}

/* ─────────────────────────────────────────────────────────────────────
 * PARENT THEME (twenty-one) STİLLERİNİ EZ
 * ───────────────────────────────────────────────────────────────────── */
:root {
    --global--color-primary: var(--ac-dark) !important;
    --global--color-accent: var(--ac-primary) !important;
    --global--color-strong-blue: var(--ac-primary) !important;
    --global--color-very-lime-green: var(--ac-primary) !important;
    --global--color-text: var(--ac-text) !important;
    --global--color-background-color: var(--ac-bg) !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * CHECKOUT (cart.php?a=checkout) - TELEFON INPUT + FRAUD/KİLİT DÜZELTMESİ
 * WHMCS twenty-one standart yapısına göre.
 * ───────────────────────────────────────────────────────────────────── */

/* Telefon inputu: intl-tel-input (.iti) WHMCS'in tüm telefon alanlarını sarar.
   Bayrak konteyneri input'un soluna absolute oturur; input'a sol padding
   GEREKİR ki metin bayrağın altında kalmasın. Bizim genel .prepend-icon /
   .field padding kuralı bunu eziyordu — burada güçlü override veriyoruz. */
.iti {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

/* Telefon input'una bayrak+kod için yeterli sol boşluk (her ihtimale karşı geniş) */
.iti > input,
.iti > input[type="tel"],
.iti input#inputPhone,
input[name="phonenumber"],
#inputPhone,
.iti-container input {
    padding-left: 90px !important;
    text-indent: 0 !important;
    background-image: none !important;
}

/* Bayrak/ülke kodu konteyneri en solda, input'un üstünde */
.iti__flag-container,
.iti .iti__flag-container,
.intl-tel-input .flag-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 5 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.iti__selected-flag,
.intl-tel-input .selected-flag {
    display: flex !important;
    align-items: center !important;
    padding: 0 10px 0 14px !important;
    background: transparent !important;
    height: 100% !important;
}

/* Telefon, .prepend-icon (sol ikon) sarmalı içindeyse: o ikonu gizle
   (iti zaten kendi bayrağını koyuyor) ve .field padding'ini iti'ye bırak */
.prepend-icon:has(.iti) > .field-icon,
.prepend-icon:has(input[name="phonenumber"]) > .field-icon,
.prepend-icon:has(input#inputPhone) > .field-icon {
    display: none !important;
}

/* Telefon input'u .field class'ı da taşıyorsa, ona verdiğimiz 42px sol
   padding'i telefon için iptal et (iti'nin 90px'i geçerli olsun) */
.iti input.field,
input.field[name="phonenumber"],
input.field#inputPhone {
    padding-left: 90px !important;
}

/* ── Fraud/dolandırıcılık uyarısı + kilit ikonu hizası ──
   WHMCS standart: .fraud-notice / #fraudLabel, içinde <i class="fa-lock fa-2x">.
   Kilit ikonu sola taşıyordu; kutuyu flex'le düzgün hizala. */
.fraud-notice,
#fraudLabel,
.checkout-fraud-notice,
.recording-notice,
.alert:has(> .fa-lock),
.alert:has(> i.fa-lock) {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    max-width: 100% !important;
    padding: 16px 20px !important;
}

.fraud-notice > .fa-lock,
.fraud-notice i.fa-lock,
#fraudLabel .fa-lock,
#fraudLabel i.fa-lock,
.recording-notice i.fa-lock,
.alert .fa-lock {
    flex-shrink: 0 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: #8B5A2B !important;
    margin: 0 !important;
    align-self: center !important;
}