/* ==========================================================================
   VEXORIA — Core Override Katmanı
   --------------------------------------------------------------------------
   Bu dosya SADECE tema dışından gelen ve wisecp.css ile ezilemeyen stiller
   içindir. Sebebi yükleme sırası:

       1. View::main_style()                    (core)
       2. css/wisecp.css                        (tema)
       3. font-awesome / ionicons / animate / aos
       4. assets/style/theme-default.css        (core)  <-- EN SON
       5. css/vexoria.css                       (bu dosya) <-- bizim son sözümüz

   theme-default.css tema CSS'inden SONRA yüklendiği için eşit specificity'de
   core kazanır. Panel yerleşimi (.leftbar, .rightcontent, .modernclient-*) ve
   vendor eklentileri (DataTables, select2, jQuery-UI, iziModal) core'dan gelir
   ve yalnızca buradan ezilebilir.

   KURAL: Tema içinde çözülebilen hiçbir şey buraya yazılmaz — o iş
   css/wisecp.php'ye aittir. Burası son çare katmanıdır.

   Faz 1  : token'lar + genel koyu zemin temeli
   Faz 7  : panel yerleşimi (.leftbar / .rightcontent / sidebar)
   Faz 9  : DataTables, select2, jQuery-UI koyu tema
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Genel zemin — core'un açık gövde/panel zeminlerini bastır
   -------------------------------------------------------------------------- */
body,
body#modernpanel,
body#muspanel {
  background-color: var(--vx-bg);
  color: var(--vx-text-muted);
  font-family: var(--vx-font);
}

/* --------------------------------------------------------------------------
   2. Tipografi — core başlık stillerini tasarım fontuna çek
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vx-font-head);
  color: var(--vx-text-strong);
}

/* --------------------------------------------------------------------------
   3. Form elemanları — core'un açık zeminli input stilleri
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background-color: var(--vx-surface-2);
  color: var(--vx-text);
  border-color: var(--vx-line-strong);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--vx-accent-line);
  background-color: var(--vx-surface);
}

/* Tarayıcı otomatik doldurma: beyaz zemin dayatmasını kır */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--vx-text);
  -webkit-box-shadow: 0 0 0 1000px var(--vx-surface-2) inset;
  caret-color: var(--vx-text);
}

/* --------------------------------------------------------------------------
   4. Seçim ve kaydırma çubuğu
   -------------------------------------------------------------------------- */
::selection {
  background: var(--vx-accent-soft);
  color: var(--vx-text-strong);
}

* {
  scrollbar-color: var(--vx-line-strong) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vx-bg-deep); }
::-webkit-scrollbar-thumb {
  background: var(--vx-line-strong);
  border-radius: 10px;
  border: 2px solid var(--vx-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--vx-text-dim); }

/* --------------------------------------------------------------------------
   5. Çerez politikası kutusu — core bileşeni (assets/style/theme.css)
   Varsayılan açık mavi/gri zeminler koyu temada beyaz yazıyla yetersiz
   kontrast veriyordu (3.26:1 ve 4.37:1; eşik 4.5).
   -------------------------------------------------------------------------- */
/* NOT: core theme.css bu kuralları !important ile yazıyor
   (#mio-cookie-popup .mio-cookie-popup__card ve #mio-cookie-popup button).
   Bu dosya daha sonra yüklense ve specificity daha yüksek olsa bile
   !important olmadan ezilemiyor — bu yüzden burada da !important şart. */
#mio-cookie-popup .mio-cookie-popup__card,
#mio-cookie-popup .mio-cookie-popup__c-p-card {
  background: var(--vx-surface) !important;
  border: 1px solid var(--vx-line) !important;
  color: var(--vx-text-muted) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
}

#mio-cookie-popup h3 {
  color: var(--vx-text-strong) !important;
  font-family: var(--vx-font-head);
}

#mio-cookie-popup p,
#mio-cookie-popup .mio-cookie-popup__content {
  color: var(--vx-text-muted) !important;
}

#mio-cookie-popup a { color: var(--vx-accent-text) !important; }

#mio-cookie-popup button,
#mio-cookie-popup .mio-cookie-popup__c-p-button {
  background: var(--vx-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--vx-r-md);
  font-weight: 600;
}

#mio-cookie-popup button:hover,
#mio-cookie-popup .mio-cookie-popup__c-p-button:hover {
  background: var(--vx-accent-hover) !important;
}

/* --------------------------------------------------------------------------
   6. Faz 7'de doldurulacak — panel yerleşimi (core theme-default.css)
   -------------------------------------------------------------------------- */
/* .leftbar          { } */
/* .rightcontent     { } */
/* .modernclient-rightcon { } */

/* --------------------------------------------------------------------------
   7. jQuery UI — core'un assets/plugins/css/jquery-ui.css dosyasından geliyor
   ve tamamen açık tema. Ürün sayfalarındaki SSS akordiyonunda beyaz zemin
   üzerine beyaz yazı oluşuyordu (ölçülen kontrast 1.01 — okunamaz).
   Faz 9'a bırakılmıştı ama ürün sayfalarında görünür olduğu için öne alındı.
   -------------------------------------------------------------------------- */
.ui-widget-content {
  background: transparent;
  border-color: var(--vx-line);
  color: var(--vx-text-muted);
}

.ui-widget-header {
  background: var(--vx-surface);
  border-color: var(--vx-line);
  color: var(--vx-text-strong);
}

.ui-accordion .ui-accordion-header {
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-sm);
  color: var(--vx-text-strong);
  font-family: var(--vx-font-head);
  font-weight: 600;
  margin-top: 10px;
}

.ui-accordion .ui-accordion-header:hover,
.ui-accordion .ui-accordion-header.ui-state-active {
  background: var(--vx-raise);
  border-color: var(--vx-line-strong);
  color: var(--vx-text-strong);
}

.ui-accordion .ui-accordion-content {
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-top: none;
  color: var(--vx-text-muted);
}

.ui-accordion .ui-accordion-content p,
.ui-accordion .ui-accordion-content li,
.ui-accordion .ui-accordion-content span { color: var(--vx-text-muted); }

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-state-active,
.ui-widget-content .ui-state-active {
  background: var(--vx-surface);
  border-color: var(--vx-line);
  color: var(--vx-text-strong);
}

/* Akordiyon okları açık tema sprite'ı — koyu zeminde kayboluyor */
.ui-accordion .ui-accordion-header .ui-icon { filter: invert(1) brightness(1.6); }

/* Tarih seçici (jquery-ui datepicker) */
.ui-datepicker {
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  color: var(--vx-text-muted);
}

.ui-datepicker .ui-datepicker-title { color: var(--vx-text-strong); }
.ui-datepicker td a, .ui-datepicker td span { color: var(--vx-text-muted); }
.ui-datepicker td a:hover { background: var(--vx-raise); color: var(--vx-text-strong); }

/* --------------------------------------------------------------------------
   8. Domain sorgulama sonuç tablosu — core theme.css'ten geliyor
   İki kural tema CSS'ini eziyordu (core daha sonra yükleniyor ve
   specificity'si daha yüksek):

     .lookcolum .lbtn       { background:#eee }            (0,2,0)
     #LookupList .lookcolum { border-bottom-color:currentcolor }

   Birincisi TRANSFER/WHOIS butonlarını açık gri yapıyordu (ölçülen
   kontrast 1.52). İkincisi ayraç rengini currentcolor'a bağladığı için
   satır çizgileri metin rengiyle (açık) çiziliyordu.
   Aynı seçicilerle, bu dosya sonra yüklendiği için !important gerekmiyor.
   -------------------------------------------------------------------------- */
.lookcolum .lbtn {
  background: var(--vx-fill);
  background-color: var(--vx-fill);
  color: var(--vx-text-soft);
  border: 1px solid var(--vx-line);
}

.lookcolum .lbtn:hover {
  background: var(--vx-raise);
  background-color: var(--vx-raise);
  color: var(--vx-text-strong);
  border-color: var(--vx-line-strong);
}

#LookupList .lookcolum,
.lookcolum.tld-select {
  border-bottom-color: var(--vx-line-soft);
}

/* --------------------------------------------------------------------------
   9. DataTables — core'un assets/plugins/dataTables/ dosyasından geliyor ve
   tamamen açık tema. Sunucu listesinde başlıklar #ebebeb, tek satırlar
   beyaz, metin koyu; ölçülen kontrast 1.07'ye kadar düşüyordu (50 sorun).
   Faz 9'a bırakılmıştı, sunucu sayfasında görünür olduğu için öne alındı.
   -------------------------------------------------------------------------- */
table.dataTable {
  background: transparent;
  border-collapse: collapse;
}

/* thead'in KENDİ zemini de açık kalıyordu; hücreler üstünü örttüğü için
   metin okunur oluyor ama hücre aralarından sızıyor. */
table.dataTable thead,
table.dataTable thead tr,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_disabled {
  background-color: var(--vx-surface);
  color: var(--vx-text-soft);
  border-bottom: 1px solid var(--vx-line);
  font-family: var(--vx-font-head);
  font-weight: 600;
}

/* Sıralama okları açık tema sprite'ı */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
  color: var(--vx-text-dim);
  opacity: .8;
}

/* DataTables satır zeminlerini "white" olarak sabitliyor. Eşit specificity'de
   sıralama bize yeter gibi görünse de eklenti sürümüne göre daha özgül
   seçiciler (stripe/display/hover kombinasyonları) devreye girebiliyor;
   vendor dosyasını düzenleyemediğimiz için burada kesinleştiriyoruz. */
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background-color: transparent !important;
  color: var(--vx-text-muted);
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable tbody tr:hover,
table.dataTable.stripe tbody tr.odd:hover {
  background-color: var(--vx-fill) !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
  border-top: 1px solid var(--vx-line-soft);
  color: var(--vx-text-muted);
}

table.dataTable tbody td a { color: var(--vx-accent-text); }

/* Sarmalayıcı: arama kutusu, sayfa uzunluğu, bilgi satırı, sayfalama */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--vx-text-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--vx-surface-2);
  color: var(--vx-text);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-sm);
  padding: 6px 10px;
}

.dataTables_wrapper .dataTables_processing {
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-sm);
}

/* DataTables sayfalama butonlarında !important kullanıyor */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--vx-text-muted) !important;
  background: transparent;
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-sm);
}

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

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--vx-text-strong) !important;
  background: var(--vx-raise);
  border-color: var(--vx-line-strong);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--vx-text-dim) !important;
  background: transparent;
  border-color: var(--vx-line-soft);
}

/* Responsive eklentisinin aç/kapa düğmesi ve genişletilmiş satırı */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  background-color: var(--vx-accent);
  border-color: var(--vx-accent);
  box-shadow: none;
  color: #fff;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom: 1px solid var(--vx-line-soft);
  color: var(--vx-text-muted);
}

table.dataTable > tbody > tr.child span.dtr-title { color: var(--vx-text-soft); }

/* --------------------------------------------------------------------------
   10. Sipariş akışı — hizmet süresi seçimi
   Kartlar core theme.css'ten açık tema alıyor:
     .orderperiodblock { background: linear-gradient(#efefef, #fff);
                         border: 2px solid #efefef }
     .periodselectbox  { background: white; border: 2px solid #efefef }
   Beyaz kartın üstünde fiyat yazısı --vx-text-strong olduğu için görünmez
   oluyordu (ölçülen kontrast 1.07).
   -------------------------------------------------------------------------- */
.orderperiodblock {
  background: var(--vx-surface-grad);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-md);
  color: var(--vx-text-muted);
  transition: all .25s ease;
}

.orderperiodblock:hover {
  border-color: var(--vx-line-strong);
  background: var(--vx-surface);
}

.orderperiodblock.active {
  border: 1px solid var(--vx-accent);
  background: linear-gradient(160deg, var(--vx-accent-soft), var(--vx-surface-2));
  box-shadow: 0 12px 34px rgba(227, 6, 19, .18);
}

/* Süre adı ve fiyat */
.orderperiodblock h3 {
  font-family: var(--vx-font-head);
  font-weight: 700;
  color: var(--vx-text-soft);
}

.orderperiodblock.active h3 { color: var(--vx-accent-text); }

.orderperiodblock h2 {
  font-family: var(--vx-font-head);
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--vx-text-strong);
}

/* Seçim işareti */
.periodselectbox {
  background: var(--vx-surface);
  border: 2px solid var(--vx-line);
}

.active .periodselectbox {
  background: var(--vx-accent);
  border-color: var(--vx-accent);
}

.periodselectbox i { color: #fff; }

/* Yapılandırma paneli (2. adım: ek özellikler).
   core theme.css: .skonfiginfo { background: white }
   Panel bembeyaz açılıyor, "Eklenti ve Seçenekler" başlığı beyaz üstünde
   beyaz kalıyordu. Tema tarafında .skonfiginfo'ya zemin verilmemişti,
   bu yüzden core'unki geçerli oluyordu. */
.skonfiginfo {
  background: var(--vx-surface-grad);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-md);
  color: var(--vx-text-muted);
}

.skonfiginfo h4 {
  font-family: var(--vx-font-head);
  color: var(--vx-text-strong);
  border-bottom-color: var(--vx-line);
}

.skonfiginfo .line { background-color: var(--vx-line); }

/* Fatura hatırlatma kutusu da core'da beyaz zemin alıyor (panel, Faz 8) */
#modernpanel .invoiceremind .red-info {
  background: var(--vx-surface);
  border-color: var(--vx-accent-line);
  color: var(--vx-text-muted);
}

/* Ödeme adımı — core theme.css'te kalan açık tema kalıntıları:
     #modernpanel .hesapbilgisi { border-bottom: 1px solid #eee }
     #muspanel   .hesapbilgisi { border-bottom: 1px solid #eee }
   Panel gövde kimliğiyle nitelendikleri için tema kuralından daha özgüller. */
#modernpanel .hesapbilgisi,
#muspanel .hesapbilgisi {
  border-bottom-color: var(--vx-line-soft);
}

/* Ödeme sağlayıcı logoları açık zemin için hazırlanmış; ödeme logolarında
   olduğu gibi açık bir kutuya alınıyor ki markalar okunur kalsın. */
.paymentlogos img {
  background: rgba(255, 255, 255, .92);
  border-radius: 6px;
  padding: 5px 8px;
}

.paymentlogos span { color: var(--vx-text-dim); }

/* Sepet → hesap adımı: "Hesap Oluştur / Giriş Yap" sekmeleri.
   core theme.css:
     .orderuserlogin .radio-custom-label            { border: 1px solid #eee }
     .orderuserlogin .radio-custom-label:hover      { background: #eee }
     .orderuserlogin .radio-custom:checked + .radio-custom-label { background: #eee }
   Seçili sekme açık gri zemin alıyor, üstündeki yazı açık kaldığı için
   okunmuyordu. Tasarımdaki sekme desenine çevrildi. */
.orderuserlogin .radio-custom-label {
  border: 1px solid var(--vx-line);
  background: var(--vx-fill);
  color: var(--vx-text-soft);
  border-radius: var(--vx-r-md);
  font-weight: 600;
}

.orderuserlogin .radio-custom-label:hover {
  background: var(--vx-raise);
  border-color: var(--vx-line-strong);
  color: var(--vx-text-strong);
}

.orderuserlogin .radio-custom:checked + .radio-custom-label {
  background: linear-gradient(160deg, var(--vx-accent-soft), var(--vx-surface-2));
  border-color: var(--vx-accent);
  color: var(--vx-text-strong);
}

/* Tablo içindeki radyo etiketleri sekme değil, normal seçenek */
.orderuserlogin table .radio-custom-label,
.orderuserlogin table .radio-custom-label:hover,
.orderuserlogin table .radio-custom:checked + .radio-custom-label {
  background: none;
  border: none;
  color: var(--vx-text-muted);
}

.orderuserlogin h2 {
  font-family: var(--vx-font-head);
  color: var(--vx-text-strong);
}

/* ==========================================================================
   14. MÜŞTERİ PANELİ KABUĞU (WClient)  — Faz 7
   --------------------------------------------------------------------------
   Panelin yerleşim CSS'i tema klasörünün DIŞINDA, core'un
   assets/style/theme.css dosyasında. Bu dosya tema CSS'inden sonra
   yüklendiği için panel yüzeylerinin tamamı buradan ezilmek zorunda.

   Core taraması (2026-08-10): panele ait 47 açık tema kuralı bulundu.
   Aşağıdakiler o listenin karşılıklarıdır.
   ========================================================================== */

/* --- Ana içerik alanı ve kartlar ------------------------------------------ */
.modernclient-rightcon,
.moderncliendcontent,
#muspanel .mpanelrightcon {
  background: transparent;
  color: var(--vx-text-muted);
}

.moderncliendblock {
  background: var(--vx-surface-grad);
  border: 1px solid var(--vx-line);
  border-radius: 16px;
}

/* Panel başlık çubuğu: core'da "background:#345a6c" sabit yazılmış —
   default temanın eski ikincil rengi. Koyu palete yabancı duruyordu. */
#modernpanel .moderncliendblock .mpaneltitle {
  background: var(--vx-surface);
  border-bottom: 1px solid var(--vx-line);
  color: var(--vx-text-strong);
  font-family: var(--vx-font-head);
}

#modernpanel .moderncliendblock .mpaneltitle h4 { color: var(--vx-text-strong); }

.mclientlastblocks .mpaneltitle .sbtn {
  background: var(--vx-fill);
  border: 1px solid var(--vx-line);
  color: var(--vx-text-soft);
  border-radius: var(--vx-r-sm);
  opacity: 1;
}

.mclientlastblocks .mpaneltitle .sbtn:hover {
  background: var(--vx-raise);
  color: var(--vx-text-strong);
}

/* Kart gölgesi ve tablo satırlarındaki açık iç gölgeler */
.moderncliendblock { box-shadow: none; }

#modernpanel .moderncliendblock table tr,
#modernpanel .moderncliendblock table tr:hover {
  box-shadow: none;
}

#modernpanel .moderncliendblock table tr:hover { background: var(--vx-fill); }

/* Sol menüde yatay kaydırma çubuğu çıkıyordu (core: overflow:scroll) */
.modernclientmenu {
  overflow-x: hidden;
  overflow-y: auto;
}

/* --- Üst bar -------------------------------------------------------------- */
.rightconhead {
  background: var(--vx-bg-deep);
  border-bottom: 1px solid var(--vx-line);
}

#modernpanel .mpanelinfo {
  background: var(--vx-bg-deep);
  color: var(--vx-text-muted);
}

#modernpanel .headbutonlar a:hover,
#modernpanel .wclientnotifi:hover .wnotifitibtn,
.wclientnotifi:hover .wnotifitibtn {
  background: var(--vx-raise);
  color: var(--vx-text-strong);
}

#modernpanel #dashboard_button_close { color: var(--vx-text-soft); }

/* --- Üst bar yerleşimi — Faz 2 GERİLEMESİ -------------------------------
   ac-header-1.php, public navbar ile AYNI sınıfları kullanıyor:
   .headbutonlar, #sepeticon, .langflagicon, .scurrencyicon.
   Faz 2'de bunları public navbar için flex'e çevirip float'ları kaldırınca
   panel üst barının yerleşimi bozuldu: .headbutonlar blok seviyesinde flex
   olduğu için alt satıra düştü ve .mpanelinfo'nun sabit yüksekliğini
   (70px) taşarak sayfa başlığının üstüne bindi.
   Panel bağlamında kendi düzenini veriyoruz. */
#modernpanel .mpanelinfo #wrapper,
.rightconhead .mpanelinfo #wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#modernpanel .mpanelinfo .headbutonlar,
.rightconhead .mpanelinfo .headbutonlar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex: none;
  float: none;
}

#modernpanel .mpanelinfo { height: auto; min-height: 70px; }

#modernpanel .mpanelinfo > span,
.rightconhead .mpanelinfo > span { flex: 1 1 auto; min-width: 0; }

/* --- Dil bayrağı hizası ---------------------------------------------------
   core, bayrağa sabit üst boşluklar veriyor ve float uyguluyor:
     .langflagicon img            { float:left; margin-top:12px }
     #modernpanel .langflagicon img { margin-top:22px }  ve sonra 27px
   Flex satırında bunlar bayrağı aşağı/yana kaydırıyordu. Sıfırlanıp
   satır içinde ortalanıyor. */
/* Bayrak ve para birimi bağlantıları .sosyalbtns içinde duruyor ve oradaki
   30px'lik YUVARLAK sosyal düğme ölçülerini miras alıyorlardı
   (.sosyalbtns a { width:30px; height:30px; line-height:30px; border-radius:100% }
    + core: .sosyalbtns .langflagicon { line-height:47px }).
   Bayrağın yukarıda kalmasının sebebi buydu — ölçüler sıfırlandı. */
.sosyalbtns .langflagicon,
.sosyalbtns .scurrencyicon,
.langflagicon,
.scurrencyicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: 0;
  line-height: 1;
  padding: 0;
  border: none;
  border-radius: 0;
}

.sosyalbtns .langflagicon:hover,
.sosyalbtns .scurrencyicon:hover { border: none; background: none; }

.langflagicon img,
#modernpanel .langflagicon img,
.fullwidthhead .langflagicon img {
  float: none;
  margin: 0;
  height: 16px;
  width: auto;
  display: block;
  border-radius: 3px;
  opacity: .9;
}

.langflagicon img:hover { opacity: 1; }

/* --- Güncel döviz kurları -------------------------------------------------
   Money::getCurrencies() + Money::exChange() ile hesaplanıyor
   (inc/main-header-1.php ve inc/ac-header-1.php). */
.vx-rates {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--vx-text-muted);
  white-space: nowrap;
}

.vx-rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vx-rate i {
  font-style: normal;
  font-family: var(--vx-font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--vx-text-dim);
  background: var(--vx-fill);
  border: 1px solid var(--vx-line);
  border-radius: 5px;
  padding: 2px 6px;
}

/* Panelde üst bar line-height:70px taşıyor; rozetler bu yüzden tam yükseklik
   kutulara dönüşüyordu. Public üst bardaki görünüm esas alınarak sabitlendi. */
#modernpanel .vx-rates,
.rightconhead .vx-rates {
  margin-right: 8px;
  line-height: 1;
  align-self: center;
}

#modernpanel .vx-rate,
#modernpanel .vx-rate i,
.rightconhead .vx-rate,
.rightconhead .vx-rate i {
  line-height: 1;
  height: auto;
}

#modernpanel .vx-rate i,
.rightconhead .vx-rate i { padding: 3px 6px; }

/* Üst bardaki çıkış bağlantısı (navbar'dan taşındı) */
.vx-topbar__logout i { margin-right: 5px; opacity: .8; }
.vx-topbar__logout:hover { color: var(--vx-accent-text); }

@media only screen and (max-width: 1200px) {
  .vx-rates { display: none; }
}

/* --- Bildirim paneli ------------------------------------------------------ */
#modernpanel .wclientnotification,
.wclientnotification {
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

/* Bildirim penceresi başlığı.
   core: .wnotifititle { background:#2c4a59;
          background-image: url(templates/system/images/leftbarbg.png) }
   Sol menüdeki ile aynı sistem dokusu; koyu palete yabancı duruyordu.
   Şablondaki satır içi renk de kaldırıldı (ac-header-1.php), böylece
   görünüm tamamen buradan yönetiliyor. */
.wnotifititle {
  background: linear-gradient(160deg, var(--vx-accent-soft), var(--vx-surface-2));
  background-image: linear-gradient(160deg, var(--vx-accent-soft), var(--vx-surface-2));
  border-bottom: 1px solid var(--vx-line);
  color: var(--vx-text-strong);
  font-family: var(--vx-font-head);
}

.wnotifititle i {
  font-size: 110px;
  color: rgba(255, 255, 255, .04);
}

.wnotifititle h3 {
  font-family: var(--vx-font-head);
  font-weight: 700;
  color: var(--vx-text-strong);
}

.wnotifititle h5 { color: var(--vx-text-muted); font-weight: 400; }

/* Panel ana sayfa bağlantısı (ac-sidebar-1.php'ye eklendi) */
.modernclientmenu ul li.vx-panel-home a.toggle { font-weight: 600; }

/* Menü ikonları: sabit genişlik + hizalama, böylece etiketler tek sütunda
   başlıyor ve menü dengeli görünüyor. */
.modernclientmenu ul li a span { display: flex; align-items: center; }

.modernclientmenu ul li i {
  width: 26px;
  flex: 0 0 26px;
  text-align: center;
  font-size: 15px;
  opacity: .85;
}

.modernclientmenu ul li a.toggle:hover i,
.modernclientmenu #active i { opacity: 1; }
.modernclientmenu #active i { color: var(--vx-accent-text); }

/* Alt menü ikonları daha küçük ve silik */
.modernclientmenu ul li ul li i {
  width: 20px;
  flex: 0 0 20px;
  font-size: 12px;
  opacity: .6;
}

/* Hızlı erişim çubuğu — istatistik şeridi alt sayfalarda sayısız basılıyor
   (core sayıları yalnızca panel ana sayfasında sağlıyor). Boş <h1> gizlenip
   kartlar daha kompakt hâle getiriliyor. */
.muspanelbloks.vx-quicknav .mpanelblok { min-height: 0; }
.muspanelbloks.vx-quicknav .mpanelblok h1 { display: none; }
.muspanelbloks.vx-quicknav .mpanelblok h2 { margin-top: 22px; font-size: 15px; }
.muspanelbloks.vx-quicknav .mpanelblokicon { font-size: 74px; top: -8px; }

.wnotifilist { border-bottom: 1px solid var(--vx-line-soft); }
.wnotifilisticon .fa-check-circle-o { color: var(--vx-ok); }

#modernpanel .allread a:hover {
  background: var(--vx-raise);
  border: 1px solid var(--vx-line-strong);
  color: var(--vx-text-strong);
}

/* --- Ayraçlar ------------------------------------------------------------- */
#modernpanel .sayfabaslik,
#modernpanel .msjyazan,
#modernpanel .hesapbilgisi,
#muspanel .hesapbilgisi,
#modernpanel .formcon {
  border-bottom-color: var(--vx-line-soft);
}

#modernpanel .mpanelbtns a { border-bottom-color: var(--vx-line); }

/* --- Ürün grubu kartları (panel ana ekranı) ------------------------------- */
.wclientblockscon .product-group-item {
  background: var(--vx-surface-grad);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-md);
  color: var(--vx-text-muted);
}

.wclientblockscon .product-group-item:hover {
  border-color: var(--vx-line-strong);
  background: var(--vx-surface);
}

/* --- Eklenti sayfası butonları -------------------------------------------- */
.clientArea-module-page-btn {
  background: var(--vx-fill);
  border: 1px solid var(--vx-line);
  color: var(--vx-text-soft);
  border-radius: var(--vx-r-sm);
}

.clientArea-module-page-btn:hover {
  background: var(--vx-raise);
  border-color: var(--vx-line-strong);
  color: var(--vx-text-strong);
}

/* --- Destek talebi butonu (eski yeşil) ------------------------------------ */
.modernclient-rightcon .mpaneltitle .destekolsbtn {
  background: var(--vx-accent);
  color: #fff;
  border-radius: var(--vx-r-sm);
}

.modernclient-rightcon .mpaneltitle .destekolsbtn:hover {
  background: var(--vx-accent-hover);
  color: #fff;
}

#modernpanel .footsosyal a:hover {
  background: var(--vx-raise);
  color: var(--vx-text-strong);
}

/* --- Sol menü arka plan görseli -------------------------------------------
   core: .leftbar { background-image: url(templates/system/images/leftbarbg.png) }
   Sistem klasöründen gelen mavi-yeşil bir doku; koyu tema paletiyle
   çakışıyor ve menüyü bulanıklaştırıyor. Şablon zaten zemin RENGİNİ
   veriyor (theme/color2), görsele gerek yok. */
.leftbar {
  background-image: none;
  background-color: var(--vx-bg-deep);
}

/* İstatistik kartı şeridinin açık gölgesi */
.mpanelbtns { box-shadow: none; border-top: 1px solid var(--vx-line-soft); }
#modernpanel .mpanelbtns a { color: var(--vx-text-soft); }
#modernpanel #mpanelbtnsaktif,
#modernpanel .mpanelbtns a:hover { background: var(--vx-raise); color: var(--vx-text-strong); }

/* --- Sol menü -------------------------------------------------------------
   .leftbar zemini şablondan geliyor (ac-sidebar-1.php, theme/color2 = #0A101A),
   yani zaten koyu. Sorun vurgu durumlarında: core hem hover'ı hem aktif öğeyi
   rgba(0,0,0,.25) ile, yani SİYAH örtüyle işaretliyor. Neredeyse siyah bir
   menüde bu görünmez. Açık örtüye çevrildi ve aktif öğeye accent şerit eklendi. */
.leftbar { border-right: 1px solid var(--vx-line-soft); }

.modernclientmenu ul li a.toggle {
  color: var(--vx-text-soft);
  border-left: 3px solid transparent;
}

.modernclientmenu ul li a.toggle:hover {
  background: var(--vx-fill);
  color: var(--vx-text-strong);
}

.modernclientmenu #active,
#clientAreaMenus-2 #active {
  background: var(--vx-accent-soft);
  color: var(--vx-text-strong);
  border-left-color: var(--vx-accent);
}

.modernclientmenu ul li ul { background: rgba(0, 0, 0, .25); }

.modernclientmenu ul li ul li a.toggle {
  color: var(--vx-text-muted);
  border-left: none;
}

.modernclientmenu ul li ul li a.toggle:hover { color: var(--vx-text-strong); }

.leftbar .wclientwelcome { color: var(--vx-text-muted); }
.leftbar .wclientwelcome i { color: var(--vx-text-strong); font-weight: 600; }

/* Yeni sipariş düğmesi menüde ayrışsın */
.modernclientmenu ul li.neworderbtn a.toggle {
  background: var(--vx-accent);
  color: #fff;
  border-left-color: var(--vx-accent);
}

.modernclientmenu ul li.neworderbtn a.toggle:hover {
  background: var(--vx-accent-hover);
  color: #fff;
}

/* --- Kaydırma çubukları --------------------------------------------------- */
#modernpanel::-webkit-scrollbar,
#modernpanel::-webkit-scrollbar-track,
.mpanelrightcon::-webkit-scrollbar,
.mpanelrightcon::-webkit-scrollbar-track,
.leftbar::-webkit-scrollbar,
.leftbar::-webkit-scrollbar-track,
.wnotificontent::-webkit-scrollbar,
.wnotificontent::-webkit-scrollbar-track {
  background-color: var(--vx-bg-deep);
}

.mpanelrightcon::-webkit-scrollbar-thumb,
.wnotificontent::-webkit-scrollbar-thumb {
  background-color: var(--vx-line-strong);
  border-radius: 10px;
}

/* ==========================================================================
   15. Panel içi eski palet kalıntıları (core theme.css)
   --------------------------------------------------------------------------
   Core, default temanın paletini birçok yerde ZEMİN olarak sabitliyor:
     #607D8B  eski metin rengi -> zemin olarak kullanılmış (gri bloklar)
     #009595  eski vurgu (turkuaz)
     #4CAF50 / #79a940 / #6a9d40 / #6d993b / #709b3e  eski yeşiller
   Fatura detayındaki gri tablo ve "ÖDENMEDİ" kutusu bunlardan geliyordu.
   ========================================================================== */

/* Gri bloklar -> koyu yüzey */
.square,
.statusother,
.gray-info,
.themepreview,
.DomainModuleChildPage h1,
#modernpanel .ModifyDns span,
#order-service-detail-btns a {
  background: var(--vx-surface);
  color: var(--vx-text-soft);
}

.gray-info { border-color: var(--vx-line); }
#modernpanel .invoiceremind span { color: var(--vx-text-muted); }
.invoicex .invoicestatus .invnopay { color: var(--vx-text-soft); }

#vpsgeneral:hover,
#vpspanellogin:hover,
#vpsreboot:hover,
#vpsrestart:hover,
#order-service-detail-btns a:hover {
  background: var(--vx-raise);
  color: var(--vx-text-strong);
}

/* Eski turkuaz -> vurgu */
#nserverinfo,
.block_module_details-title h4,
.securityinfo-left,
.securityinfo-right h5 { color: var(--vx-accent-text); }

.defaultcardtitle,
#order-service-detail-btns .yesilbtn:hover {
  background: var(--vx-accent);
  color: #fff;
}

#order-service-detail-btns .yesilbtn { color: var(--vx-accent-text); }

/* Eski yeşiller */
.withdrawal-request,
.defaultcard:hover,
#modernpanel .destekdetayright .gonderbtn:hover,
.modernclient-rightcon .mpaneltitle .destekolsbtn:hover {
  background: var(--vx-accent-hover);
  border-color: var(--vx-accent-hover);
  color: #fff;
}

.withdrawal-request:hover { background: var(--vx-accent); }

#selectorOnlyPanel input.sitemio-checkbox:checked + label.sitemio-checkbox-label {
  background-color: var(--vx-accent);
}

.securemsj,
.noinstallmentcomm,
.listingstatus .active,
.listingstatus .responded { color: var(--vx-ok); border-color: var(--vx-ok); }

.listingstatus .process,
.listingstatus .resolved { color: #62A8EA; border-color: #62A8EA; }

.ticketstatusbtn .mavibtn:hover { background: #3d6f9e; color: #fff; }

/* Panel içi jQuery-UI aktif durumu da #607D8B alıyordu */
#modernpanel .ui-state-active,
#modernpanel .ui-widget-content .ui-state-active {
  background: var(--vx-accent);
  color: #fff;
  border-color: var(--vx-accent);
}

/* "Destek Talebi Oluştur" düğmesi sağ kenardan taşıyordu
   (core: margin-right:-17px + negatif üst boşluk) */
.modernclient-rightcon .mpaneltitle .destekolsbtn {
  margin-right: 0;
  margin-top: 0;
  padding: 12px 20px;
  border-radius: var(--vx-r-sm);
  float: right;
}

/* --------------------------------------------------------------------------
   16. select2 — "İlişkili Hizmet" alanı beyaz açılıyordu
   -------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-sm);
  color: var(--vx-text);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--vx-text);
  line-height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--vx-text-dim);
}

.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--vx-surface);
  border-color: var(--vx-line);
  color: var(--vx-text);
}

.select2-container--default .select2-results__option {
  background: transparent;
  color: var(--vx-text-muted);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--vx-accent-soft);
  color: var(--vx-text-strong);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--vx-text-dim) transparent transparent transparent;
}

/* Destek mesajı balonları — core daha özgül seçiciyle karşı çıkıyor:
     #modernpanel .destekdetaymsj { border:none; border-radius:7px;
                                    box-shadow: 0 0 20px #ededed }
   Kenarlığı siliyor, açık bir dış gölge veriyor ve yarıçapı ezip balon
   görünümünü bozuyordu. */
#modernpanel .destekdetaymsj {
  border: 1px solid var(--vx-accent-line);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  margin-left: auto;
  margin-right: 0;
  max-width: 76%;
}

#modernpanel .destekdetaymsj#yetkilimsj {
  border-color: var(--vx-line);
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 4px;
  margin-left: 0;
  margin-right: auto;
}

#modernpanel .destekdetaymsjcon { padding: 18px 20px; }

/* --------------------------------------------------------------------------
   17. Dosya yükleme alanı
   Tarayıcının varsayılan <input type="file"> görünümü (gri "Dosyaları Seç"
   düğmesi + düz metin) koyu temada yabancı duruyordu. Native görünüm
   ::file-selector-button ile temaya çekiliyor.
   -------------------------------------------------------------------------- */
input[type="file"] {
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-sm);
  color: var(--vx-text-muted);
  padding: 10px 12px;
  font-family: var(--vx-font);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

input[type="file"]:hover { border-color: var(--vx-line-strong); }

input[type="file"]:focus {
  border-color: var(--vx-accent-line);
  background: var(--vx-surface);
  outline: none;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: var(--vx-fill);
  border: 1px solid var(--vx-line);
  color: var(--vx-text-soft);
  border-radius: var(--vx-r-sm);
  padding: 8px 16px;
  margin-right: 14px;
  cursor: pointer;
  font-family: var(--vx-font);
  font-size: 13.5px;
  font-weight: 600;
  transition: all .2s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--vx-accent);
  border-color: var(--vx-accent);
  color: #fff;
}

/* İzin verilen tür açıklaması ve etiket */
.destekdetayright label,
#createticket label { color: var(--vx-text-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   18. Bilgi bankası
   Liste başlıklarının tamamı vurgu kırmızısındaydı; sayfa "kırmızı bağlantı
   duvarı" gibi görünüyordu. Tasarımda başlıklar nötr, vurgu etkileşimde.
   -------------------------------------------------------------------------- */
/* Yerleşim: .sayfacontent (float:right) ve .sidebar (float:left) kardeş
   olmalarına ve toplam genişlikleri kaba sığmasına rağmen yan sütun alt
   satıra düşüyordu; ayrıca iki çocuk da float olduğu için #wrapper'ın
   yüksekliği 0'a çöküyordu. Float yerine flex ile deterministik hâle
   getirildi. :has() ile yalnızca bu iki bloğun bulunduğu sarmalayıcıya
   uygulanıyor, diğer sayfalardaki #wrapper etkilenmiyor. */
#wrapper:has(> .sayfacontent):has(> .sidebar) {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

#wrapper:has(> .sayfacontent) > .sidebar {
  float: none;
  width: 290px;
  flex: 0 0 290px;
  order: 1;
  margin: 0;
}

#wrapper:has(> .sayfacontent) > .sayfacontent {
  float: none;
  width: auto;
  flex: 1 1 auto;
  order: 2;
  margin: 0;
}

/* Başlık listeleri: "a" genel kuralı hepsini vurgu kırmızısı yapıyordu.
   Gerçek işaretleme .encokokunanbasliklar > h5 > a biçiminde. */
.encokokunanbasliklar a,
.encokokunanbasliklar h5 a,
.sayfacontent .sidelinks a,
.sidebar .sidelinks a,
.bilgibankasi a {
  color: var(--vx-text-soft);
}

.encokokunanbasliklar a:hover,
.encokokunanbasliklar h5 a:hover,
.sidebar .sidelinks a:hover,
.bilgibankasi a:hover { color: var(--vx-accent-text); }

.encokokunanbasliklar h5 {
  border-bottom: 1px solid var(--vx-line-soft);
  padding: 12px 0;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--vx-text-dim);
}

.encokokunanbasliklar h5:last-child { border-bottom: none; }
.encokokunanbasliklar h5 i { color: var(--vx-accent); margin-right: 8px; }

/* Makale gövdesi: tek blok hâlinde ve sıkışık geliyordu */
.sayfacontent .padding20 > div:not([class]),
.sayfacontent .articlecontent,
.sayfacontent .kbcontent {
  line-height: 1.85;
  font-size: 15px;
  color: var(--vx-text-muted);
}

.sayfacontent ul li {
  border-bottom: 1px solid var(--vx-line-soft);
  padding: 12px 0;
  list-style: none;
}

.sayfacontent ul li:last-child { border-bottom: none; }
.sayfacontent ul { padding-left: 0; margin: 0; }

/* Makale gövdesi: uzun metin bloğu okunaklı olsun */
.sayfacontent p,
.sayfacontent div:not([class]) {
  line-height: 1.8;
  color: var(--vx-text-muted);
  font-size: 15px;
}

.sayfacontent h1,
.sayfacontent h2,
.sayfacontent h3 {
  font-family: var(--vx-font-head);
  color: var(--vx-text-strong);
  margin-bottom: 14px;
}

/* "Aradığınız bilgiyi bulamıyor musunuz?" kutusu */
.openticket {
  background: var(--vx-fill);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-md);
  padding: 26px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   19. Fatura detayı
   Kalem tablosu ve durum kutusu gri kalıyordu:
     core: .invoicex .invoicestatus { background: rgb(229 229 228 / 20%) }
     ac-detail-invoice.php'de bazı satırlarda style="background:white" vardı
     (kaldırıldı).
   Kaynağı tek tek kovalamak yerine bu bölümün görünümü burada kesin olarak
   tanımlanıyor — hangi katmandan gelirse gelsin sonuç değişmesin.
   -------------------------------------------------------------------------- */
.invoicex .invoicedesc {
  background: var(--vx-surface-2) !important;
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-r-md);
  overflow: hidden;
}

.invoicex .invoicedesc .formcon {
  background: transparent !important;
  border-bottom: 1px solid var(--vx-line-soft);
  padding: 12px 0;
  color: var(--vx-text-muted);
}

.invoicex .invoicedesc .formcon:first-child {
  background: var(--vx-surface) !important;
  color: var(--vx-text-soft);
  font-family: var(--vx-font-head);
}

.invoicex .invoicedesc .formcon:last-child { border-bottom: none; }
.invoicex .invoicedesc .formcon strong { color: var(--vx-text-strong); }
.invoicex .invoicedesc .formcon span { color: inherit; }

/* Ara toplam / genel toplam satırları */
.invoicex .invoicedesc .formcon:nth-last-child(-n+2) {
  background: var(--vx-fill) !important;
  color: var(--vx-text-soft);
}

/* Durum kutusu ("ÖDENMEDİ") — açık gri zemin + açık yazı okunmuyordu */
.invoicex .invoicestatus {
  background: var(--vx-fill) !important;
  border: 1px solid var(--vx-line) !important;
  border-radius: var(--vx-r-md);
  font-family: var(--vx-font-head);
}

.invoicex .invoicestatus .invnopay { color: var(--vx-accent-text); }
.invoicex .invoicestatus .invpaid  { color: var(--vx-ok); }
.invoicex .invoicestatus .invwait  { color: var(--vx-warn); }
.invoicex .invoiceidx { color: var(--vx-text-strong); font-family: var(--vx-font-head); }

/* --------------------------------------------------------------------------
   20. Kredi kartı görseli
   core: .creditcardbox { background:#f8f8f8; border:3px solid #eee }
   Beyaz kart üzerinde kart bilgileri okunamıyordu.
   -------------------------------------------------------------------------- */
.creditcardbox {
  background: linear-gradient(145deg, #1B2739, #0E1622);
  border: 1px solid var(--vx-line-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  color: var(--vx-text-strong);
}

.creditcardbox:hover,
.creditcardbox.active {
  box-shadow: 0 22px 50px rgba(0, 0, 0, .6);
  border-color: var(--vx-accent-line);
}

.creditcardbox#default { box-shadow: 0 0 0 2px var(--vx-accent), 0 18px 40px rgba(0, 0, 0, .5); }

.creditcardbox-numbers h5,
.creditcardbox-fullname,
.creditcardbox-validdate,
.creditcardbox-behind-bank-brand { color: var(--vx-text-strong); }

.creditcardbox-band { background: #0A0F18; }

.creditcardbox-CCW {
  background: rgba(255, 255, 255, .88);
  color: #10151f;
}

.creditcardbox-CCW span strong { color: #10151f; }

/* --------------------------------------------------------------------------
   21. Durum filtresi sekmeleri (.ac-domainlist-status)
   Bu sınıfın ne temada ne core'da HİÇ kuralı yoktu; sekmeler tarayıcı
   varsayılanıyla, ince ayraçlarla bölünmüş düz bağlantılar olarak
   görünüyordu. Tasarımın sekme desenine çevrildi.
   Aynı sınıf panel ana sayfasındaki "Alan Adlarım" bloğunda da kullanılıyor,
   ikisi birden düzeliyor.
   -------------------------------------------------------------------------- */
.ac-domainlist-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 22px;
  padding: 6px;
  background: var(--vx-fill);
  border: 1px solid var(--vx-line);
  border-radius: 14px;
}

.ac-domainlist-status a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--vx-text-muted);
  border: 1px solid transparent;
  transition: all .2s ease;
}

.ac-domainlist-status a:hover {
  background: var(--vx-raise);
  color: var(--vx-text-strong);
}

.ac-domainlist-status a.active {
  background: var(--vx-accent);
  border-color: var(--vx-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(227, 6, 19, .28);
}

/* Panel ana sayfasındaki blok içinde daha kompakt dursun */
.moderncliendblock .ac-domainlist-status { margin: 4px 0 14px; }
.moderncliendblock .ac-domainlist-status a { padding: 7px 13px; font-size: 13px; }

/* Yan taraftaki eylem düğmeleri: eski yeşil/mavi palet */
.green.lbtn,
.blue.lbtn {
  background: var(--vx-fill);
  border: 1px solid var(--vx-line);
  color: var(--vx-text-soft);
}

.green.lbtn:hover,
.blue.lbtn:hover {
  background: var(--vx-raise);
  border-color: var(--vx-line-strong);
  color: var(--vx-text-strong);
}

.green.lbtn i { color: var(--vx-ok); }
.blue.lbtn i { color: #62A8EA; }

/* --------------------------------------------------------------------------
   22. Boş durum ikonları — açık gri daireler
   -------------------------------------------------------------------------- */
.nodatainfo i,
.nodata i,
.emptydata i,
.moderncliendblock .fa-meh-o,
.moderncliendblock .fa-info { color: var(--vx-text-dim); }
/* .dataTables_wrapper { } */
/* .select2-container  { } */
/* .ui-datepicker      { } */

/* --------------------------------------------------------------------------
   23. Anlamlı tablo hücreleri  (eski bgcolor özniteliklerinin karşılığı)
   --------------------------------------------------------------------------
   HTML'in bgcolor özniteliği tema genelinde kaldırıldı (97 adet). Nötr
   grileri silmek yetti, ancak birkaç hücrede renk anlam taşıyordu: toplu
   ödeme tablosunun toplam satırı ve SMS rapor başlıkları. Onlar data-vx
   kancasına çevrildi; görünümleri buradan geliyor.

   data-* seçicisi bilerek tercih edildi: class listesine dokunmadığı için
   bu hücrelere bağlı mevcut JS/DataTables seçicileri etkilenmiyor.        */
[data-vx="vx-cell-total"] {
    background: linear-gradient(180deg,rgba(46,211,123,.16),rgba(46,211,123,.08));
    border-top: 1px solid rgba(46,211,123,.38) !important;
    color: var(--vx-text-strong);
}
[data-vx="vx-cell-total"] strong { color: var(--vx-ok); }

[data-vx="vx-cell-ok"],
[data-vx="vx-cell-wait"],
[data-vx="vx-cell-bad"] {
    border-bottom: 2px solid currentColor !important;
    font-weight: 600;
}
[data-vx="vx-cell-ok"]   { background: rgba(46,211,123,.12);  color: var(--vx-ok); }
[data-vx="vx-cell-wait"] { background: rgba(240,180,41,.12);  color: var(--vx-warn); }
[data-vx="vx-cell-bad"]  { background: rgba(255,106,94,.12);  color: var(--vx-danger); }
[data-vx^="vx-cell-"] strong { color: inherit; }

/* --------------------------------------------------------------------------
   24. Bilgi kutuları — .green-info / .blue-info / .red-info
   --------------------------------------------------------------------------
   Core theme.css bu üçünü parlak dolgu + beyaz metinle tanımlıyor:
     .green-info { background:#79ba7c; color:white }
     .blue-info  { background:#5aadb8; color:white }
     .red-info   { background:#e76f67; color:white }
   Tema CSS'i yalnızca renk ve kenarlık veriyor, arka planı hiç set etmiyor;
   core sonra yüklendiği için eşit özgüllükte core kazanıyordu. Bakiye
   sayfasındaki parlak yeşil kutu bundan geliyordu.

   Bu aile 26 dosyada kullanılıyor (bakiye, hesap bilgileri, bayilik, satış
   ortaklığı, ticket oluşturma, tüm hizmet detayları, sepet, fatura detayı,
   e-bülten). Tek tek değil, aile olarak çözülüyor.

   Yaklaşım: dolgu yerine tint + soldan 3px anlam şeridi. Metin token'lardan
   geliyor, artık beyaza zorlanmıyor.                                       */
/* DİKKAT — özgüllük: core'un `#modernpanel .green-info{border:none}` kuralı
   (1,1,0) sade `.green-info` kuralımdan (0,1,0) daha özgül. Bu yüzden ortak
   kural ID ile de niteleniyor. Ama renkleri bu ortak kurala koyarsam, ID'li
   hâli kendi sade renk kurallarımı ezer ve panelde üç kutu da gri kenarlık
   alır. O yüzden ortak kural SADECE renksiz özellikleri taşıyor; renkler
   aşağıda, aynı ID nitelemesiyle tekrar veriliyor. */
#modernpanel .green-info, #modernpanel .blue-info, #modernpanel .red-info,
#clean-theme-client .green-info, #clean-theme-client .blue-info, #clean-theme-client .red-info,
.green-info, .blue-info, .red-info {
    color: var(--vx-text-soft);
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    border-radius: var(--vx-r-sm);
}
#modernpanel .green-info, #clean-theme-client .green-info, .green-info {
    background: rgba(46,211,123,.09);
    border-color: rgba(46,211,123,.26);
    border-left-color: var(--vx-ok);
}
#modernpanel .blue-info, #clean-theme-client .blue-info, .blue-info {
    background: rgba(98,168,234,.09);
    border-color: rgba(98,168,234,.26);
    border-left-color: #62A8EA;
}
#modernpanel .red-info, #clean-theme-client .red-info, .red-info {
    background: rgba(255,106,94,.09);
    border-color: rgba(255,106,94,.26);
    border-left-color: var(--vx-danger);
}

/* Başlık satırı kutunun anlamını taşısın, gövde metni sakin kalsın */
.green-info h5, .green-info strong { color: var(--vx-ok); }
.blue-info  h5, .blue-info  strong { color: #7FBCF0; }
.red-info   h5, .red-info   strong { color: var(--vx-danger); }
.green-info p, .blue-info p, .red-info p,
.green-info li, .blue-info li, .red-info li { color: var(--vx-text-soft); }

/* Kutu içi bağlantılar core'da beyaza sabitlenmiş */
.green-info a { color: var(--vx-ok); }
.blue-info  a { color: #7FBCF0; }
.red-info   a { color: var(--vx-danger); }
.green-info a:hover, .blue-info a:hover, .red-info a:hover { text-decoration: underline; }

/* Dev filigran ikon: core'da siyah %16. Koyu tintin üstünde çamur gibi
   duruyor — beyaza düşük alfayla çevrildi. */
#modernpanel .green-info i, #modernpanel .blue-info i, #modernpanel .red-info i,
#clean-theme-client .green-info i, #clean-theme-client .blue-info i, #clean-theme-client .red-info i,
.green-info i, .blue-info i, .red-info i { color: rgba(255,255,255,.05); }

/* Kutu içindeki düğme core'da siyah %15 dolgu + beyaz metin */
.red-info .lbtn, .green-info .lbtn, .blue-info .lbtn {
    background: var(--vx-fill);
    border: 1px solid var(--vx-line);
    color: var(--vx-text);
}
.red-info .lbtn:hover, .green-info .lbtn:hover, .blue-info .lbtn:hover {
    background: var(--vx-raise);
    border-color: var(--vx-line-strong);
}

/* Ödeme ekranı başlığı core'da beyaza sabit */
#payment-screen .red-info h5 { color: var(--vx-danger); }

/* Fatura paylaşım kutusu */
#share-invoice .green-info { color: var(--vx-text-soft); }

/* --------------------------------------------------------------------------
   25. Hesap bilgileri / bakiye sayfalarında kalan iki core kuralı
   --------------------------------------------------------------------------
   Sınıf bazlı tarama ile bulundu: bu iki sayfanın kullandığı sınıflardan
   core theme.css'te açık zemin alıp benim override dosyamda karşılığı
   olmayanlar.                                                             */

/* Kayıtlı kart silme düğmesi — core'da düz gri (#aeaeae) dolgu */
.deletecard {
    background: rgba(255,106,94,.12);
    border: 1px solid rgba(255,106,94,.30);
    color: var(--vx-danger);
    border-radius: var(--vx-r-sm);
    transition: background .16s, border-color .16s;
}
.deletecard:hover {
    background: rgba(255,106,94,.20);
    border-color: rgba(255,106,94,.50);
}

/* Sekme içeriğindeki tablo başlıkları — core'da #ebebeb.
   Hesap bilgileri sayfasının tüm sekmelerini etkiliyor. */
.tabcontentcon table thead,
.tabcontentcon table thead th {
    background: var(--vx-fill);
    color: var(--vx-text-strong);
    border-bottom: 1px solid var(--vx-line);
}

/* --------------------------------------------------------------------------
   26. Dil / para birimi seçim penceresi — core'un kenarlık sıfırlaması
   --------------------------------------------------------------------------
   Core theme.css:
     #selectLang    .langandcur a { border:1px solid transparent; width:47% }
     #selectCurrency .langandcur a { border:1px solid transparent; width:45% }
     ...a:hover { border:1px solid #fff }
   ID ile nitelendikleri için tema CSS'indeki kenarlık kuralını eziyorlardı;
   pencerede görünmez pastiller oluşuyordu. Aynı özgüllükle geri alınıyor. */
#selectLang .langandcur a,
#selectCurrency .langandcur a {
    border: 1px solid var(--vx-line);
    width: 47%;
}
#selectLang .langandcur a:hover,
#selectCurrency .langandcur a:hover {
    border: 1px solid var(--vx-accent-line);
}
#selectLang .langandcur a.activelangcur,
#selectCurrency .langandcur a.activelangcur {
    border: 1px solid var(--vx-accent-line);
}

/* --------------------------------------------------------------------------
   27. Dil / para birimi penceresinin konumu — iziModal
   --------------------------------------------------------------------------
   Pencere sayfanın en üstünde açılıyordu. Sebep: core bu modalleri iziModal
   ile açıyor ve iziModal elemanı body'nin doğrudan çocuğu olarak AKIŞ İÇİNDE
   bırakıyor (position:relative, margin:0 auto). Yani dikey konumu sayfanın
   başı oluyor.

   Şablondan seçenek geçirmek işe yaramaz: core'un
   get_modal_options_generate() fonksiyonu $.extend(options, modal_options)
   çağırıyor — argüman sırası ters olduğu için core'un varsayılanları dışarıdan
   geçilen her şeyi eziyor. Bu yüzden çözüm CSS tarafında.

   !important şart: iziModal position/margin/border-radius/height değerlerini
   elemanın satır içi style'ına yazıyor (border-radius:3px dahil, ki bu tema
   köşe yarıçapını da bozuyordu). Satır içi stil ancak !important ile ezilir.
   Not: !important yazar bildirimleri animasyon bildirimlerini de ezer, bu
   yüzden fadeInDown'ın transform'u devre dışı kalır; opaklık geçişi kalır.

   Canlı sitede ölçüldü: pencere merkezi 640x360 = görünüm alanı merkezi.   */
.selectLangCurrency.iziModal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--vx-r-lg) !important;
    width: calc(100vw - 32px) !important;
    max-width: 620px !important;
    /* overflow:auto DENENDİ, GERİ ALINDI: kapatma düğmesi kartın dışında
       konumlanıyor, auto onu kırpıyordu; ayrıca gereksiz bir kaydırma
       çubuğu çıkıyordu. Kaydırma iç sarmalayıcıya taşındı (aşağıda),
       kapatma düğmesi de kartın içine alındı (wisecp.php). */
    overflow: visible !important;
}
/* Uzun para birimi listesi kısa ekranda taşarsa kaydırma burada olsun */
.selectLangCurrency.iziModal .padding20 {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}