/* ------------------------------------------------------------------
   E-Merkad — tema üstü ince ayarlar.
   Material Dashboard'un kendi kuralları korunur; burada yalnızca
   okunabilirlik sorunları giderilir.
   ------------------------------------------------------------------ */

/* Renkli kart başlıklarında BAŞLIK ve ALT METİN beyaz olmalı.
   Tema bunu yalnızca .card-title / .category sınıflarına uygular;
   içlerindeki diğer etiketler (small, b, code) siyah kalıyordu. */
.card [data-background-color] .card-title,
.card [data-background-color] .card-title * {
    color: #FFFFFF;
}
.card [data-background-color] .category,
.card [data-background-color] .category * {
    color: rgba(255, 255, 255, 0.88);
}
.card [data-background-color] code {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    border: none;
}

/* Kart alt bilgisi (stats) çok soluktu — okunur hale getirildi. */
.card .card-footer .stats {
    color: #66615b;
    font-size: 12px;
    line-height: 1.5;
}
.card .card-footer .stats .material-icons {
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Tablo başlıkları (DataTables'sız düz tablolar). Eski yönetim ekranları
   material-dashboard98f3.css:6056-6059 ile 1.25em (14px gövdede 17.5px),
   300 kalınlık, harf aralığı normal basıyordu; boyut ve harf aralığı eskisi
   gibi temadan gelir (HATA-KAYDI §69-tablolar2 — burada önce 14px/.02em'e
   küçültülmüştü). Kalınlık 500: okunurluk kararı (müşteri geri bildirimi,
   §69-cikis "Bilerek değiştirilmeyenler"). DataTables başlıkları
   merkad-tablolar.css'te (eski 17px). */
.table > thead > tr > th {
    font-weight: 500;
    border-bottom-width: 1px;
}

/* Başlık rengi: eski yönetim listelerinin HİÇBİRİNDE thead text-primary yok;
   başlıklar eski CSS'le rgba(0,0,0,.87) (tablonun yazı rengi). Yeni
   sayfalardaki <thead class="text-primary"> (Material şablonundan kalma)
   başlıkları mora (#9c27b0) boyuyordu — tek merkezden nötrlenir, başlık
   tablonun rengini alır (sayfalara ve paylaşılan parçalara dokunmadan).
   Ölçüm ve sayfa listesi: HATA-KAYDI §69-tablolar2. */
.main-panel .table > thead.text-primary {
    color: inherit;
}

/* Satır yüksekliği ve okunabilirlik */
.table > tbody > tr > td {
    padding: 10px 8px;
    vertical-align: middle;
}

/* Para sütunları için tabular rakamlar — hizalama düzgün olsun */
.para, td.text-right {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Durum etiketleri biraz daha okunur */
.label {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 3px;
    font-weight: 500;
}

/* Sayı/para hücreleri vurgulu. Yalnız içeriği sayı/para olan hücreler:
   td.merkad-sayi ya da merkad-tablolar.js'in içeriğe bakıp işaretlediği
   td.text-right.merkad-sayi-icerik ("2.616", "1.234,56 €", "12,5%").
   Önceden bütün td.text-right'lara uyuyordu; eskide text-right olan METİN
   hücreleri (ödeme tipi/iletişim kutuları, "Aylık Kırılım" düğmesi, "3 Gün
   Geçti", işlem düğmeleri, "—") da kalın ve mavimsi griydi — eskide yoktu
   (HATA-KAYDI §69-tablolar2). (Eskiden burada her kart tablosunun İLK
   SÜTUNU #9a9a9a soluk griye çekiliyordu — eskide yoktu, kaldırıldı.) */
.card .table > tbody > tr > td.merkad-sayi,
.card .table > tbody > tr > td.text-right.merkad-sayi-icerik {
    color: #3c4858;
    font-weight: 500;
}

/* Kart içi başlık boşlukları */
.card .card-header .card-title { margin: 0 0 3px; font-size: 18px; }
.card .card-header .category   { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------------
   ODAK HALKASI — tek merkezden (docs/hata-kaydi-taslak/duzen.md).
   Temanın niyeti tıklanan bağlantı/düğmede halka ÇIKMAMASIDIR
   (material-dashboard98f3.css:5282-5286). Ancak oradaki seçici listesinde
   Chromium'un tanımadığı ::-moz-focus-inner olduğu için Chrome/Edge kuralın
   TAMAMINI atıyor; geriye Bootstrap'in a:focus {outline:5px auto} kuralı
   kalıyor ve nav-pills sekmelerinde tıklayınca kırık mavi halka çıkıyordu.
   Burada: fareyle tıklamada halka yok, klavyeyle (Tab) gezinmede
   :focus-visible ile görünür halka var (erişilebilirlik).
   ------------------------------------------------------------------ */
a:focus:not(:focus-visible),
a:active:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn.focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn.active:focus:not(:focus-visible),
.btn.active.focus:not(:focus-visible),
input[type="file"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) {
    outline: 0 !important;
    outline-offset: 0 !important;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input[type="file"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid #00bcd4 !important;
    outline-offset: 2px !important;
}

/* ------------------------------------------------------------------
   DÜĞME YAZISI KAYBOLMASI — tek merkezden.
   Tema özelleştirmesi `.btn:hover, .btn:focus, .btn:active
   { COLOR: white !important }` (material-dashboard98f3.css:4800-4803)
   beyaz zeminli (btn-white) ve saydam (btn-simple) düğmelerin yazısını da
   beyaza çeviriyor; tıklanan <button> odakta kaldığı için yazı/ikon beyaz
   kart üstünde kayboluyordu. Her düğme kendi normal rengine döner.
   ------------------------------------------------------------------ */
.btn.btn-white:hover, .btn.btn-white:focus, .btn.btn-white:active,
.btn.btn-simple:hover, .btn.btn-simple:focus, .btn.btn-simple:active {
    color: #999999 !important;
}
/* İçerikteki beyaz yazılı düğmeler (sekme/süzgeç düğmeleri, "Aylık Kırılım"
   gibi tablo içi bağlantılar): temanın #999'u beyaz zeminde 2.85:1 idi (AA
   altı; btn-xs'te 10px ile iyice okunmuyordu). Aynı gri ton koyulaştırıldı
   (#555 = 7.5:1), btn-xs 11px. Zemin, gölge, yerleşim aynen. Üst çubuktaki
   daralt düğmesi (#minimizeSidebar, yalnız ikon) kapsam dışı. */
.main-panel > .content .btn.btn-white:not(.btn-simple),
.main-panel > .content .btn.btn-white:not(.btn-simple):hover,
.main-panel > .content .btn.btn-white:not(.btn-simple):focus,
.main-panel > .content .btn.btn-white:not(.btn-simple):active {
    color: #555555 !important;
}
.main-panel > .content .btn.btn-xs.btn-white:not(.btn-simple) {
    font-size: 11px;
    font-weight: 500;
}
.btn.btn-primary.btn-simple:hover, .btn.btn-primary.btn-simple:focus, .btn.btn-primary.btn-simple:active { color: #9c27b0 !important; }
.btn.btn-info.btn-simple:hover,    .btn.btn-info.btn-simple:focus,    .btn.btn-info.btn-simple:active    { color: #00bcd4 !important; }
.btn.btn-success.btn-simple:hover, .btn.btn-success.btn-simple:focus, .btn.btn-success.btn-simple:active { color: #4caf50 !important; }
.btn.btn-warning.btn-simple:hover, .btn.btn-warning.btn-simple:focus, .btn.btn-warning.btn-simple:active { color: #ff9800 !important; }
.btn.btn-danger.btn-simple:hover,  .btn.btn-danger.btn-simple:focus,  .btn.btn-danger.btn-simple:active  { color: #f44336 !important; }
.btn.btn-rose.btn-simple:hover,    .btn.btn-rose.btn-simple:focus,    .btn.btn-rose.btn-simple:active    { color: #e91e63 !important; }
/* .btn.btn-info yazıyı her durumda `#FFFFFF !important` yapıyor (css:4841-4846);
   saydam btn-info.btn-simple bu yüzden normal durumda da görünmüyordu. */
.btn.btn-info.btn-simple { color: #00bcd4 !important; }
/* Koyu zemin için tasarlanmış beyaz-saydam düğme beyaz kalır. */
.btn.btn-white.btn-simple:hover, .btn.btn-white.btn-simple:focus, .btn.btn-white.btn-simple:active { color: #FFFFFF !important; }

/* ==================================================================
   OKUNURLUK — tek merkezden (müşteri geri bildirimi: "yazılar sönük,
   isimler net değil"). Eski görünüm dili (renkler, yerleşim, koyu tablo
   başlıkları, camgöbeği bağlantılar) KORUNUR; yalnız yazı kalınlığı ve
   kontrast WCAG AA (4.5:1) düzeyine çekilir (ölçüm: getComputedStyle,
   ayrıntı ui/okunurluk dalının commit mesajında).
   Kapsam .main-panel — giriş sayfaları (merkad.css'i ayrıca yükler)
   etkilenmez.
   ================================================================== */

/* 1) Tablo gövdesi: tema gövde yazısını Roboto Light (300) yapıyor;
   ekranda "soluk" görünmesinin asıl nedeni bu. 400 + koyu gri. Satır
   içi renk/kalınlık veren hücreler (kırmızı adlar, <b> toplamlar) aynen kalır. */
.main-panel .table > tbody > tr > td,
.main-panel .table > tfoot > tr > td {
    color: #262626;
    font-weight: 400;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

/* 2) Başlık satırı: DataTables sayfalarında eski 17px başlık korunur
   (merkad-tablolar.css; renk yukarıdaki thead.text-primary kuralıyla eski
   koyu renk), yalnız kalınlık 500 — daha belirgin (eski 300).
   Seçici merkad-tablolar.css'ten (sonra yüklenir) özgül olduğu için kazanır. */
.main-panel table.dataTable > thead > tr > th,
.main-panel table.dataTable > tfoot > tr > th {
    font-weight: 500;
}

/* 3) Tablo içi bağlantılar (çoğunlukla ad ve üye kodu): eski camgöbeği
   #06a8bd beyaz zeminde 2.9:1 idi (AA altı) ve 300 kalınlıktaydı.
   Aynı ton koyulaştırıldı (#007c8c = 4.9:1, zebra satırda 4.7:1), 500.
   Üzerine gelince eski altın rengi (tema a:hover !important) aynen. */
.main-panel .table > tbody > tr > td a:not(.btn):not(.label):not(.badge) {
    color: #007c8c;
    font-weight: 500;
}

/* 4) Satır üzerine gelme: hangi satırda olduğunu gösteren hafif vurgu
   (zemin rengini değiştirmez, üstüne yarı saydam biner). */
.main-panel .card .table > tbody > tr:hover > td {
    background-color: rgba(0, 188, 212, 0.07);
}
.main-panel .card .table > tbody > tr.child:hover > td,
.main-panel .card .table > tbody > tr > td.dataTables_empty {
    background-color: transparent;
}

/* 5) Genel sınıflar — liste parçalarında (partial) kullanılmak üzere.
   .merkad-ad    : ad soyad hücresi/bağlantısı — eski UyelerTablosu.ascx:170
                   gibi 15px kalın.
   .merkad-ad-kirmizi : eski UyelerTablosu'nun kırmızı adı (#de1c2e, 4.9:1).
   .merkad-kod   : üye kodu — kalın, rakamlar hizalı, satır kırılmaz.
   .merkad-sayi  : sayı/para — sağa hizalı, tabular rakam, satır kırılmaz. */
.merkad-ad,
.main-panel .table > tbody > tr > td .merkad-ad {
    font-size: 15px;
    font-weight: 700;
}
.merkad-ad-kirmizi,
.main-panel .table > tbody > tr > td a.merkad-ad-kirmizi {
    color: #de1c2e;
    font-weight: 700;
}
.merkad-kod,
.main-panel .table > tbody > tr > td .merkad-kod {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.merkad-sayi {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 6) Yardımcı metinler: #999 (2.8:1) → #616161 (beyazda 6.2:1; uyarı
   kutularının pembe/sarı zemininde de ≥4.5 — #6b6b6b alert-danger üstünde
   4.1'de kalıyordu). Renkli kart başlıklarındaki beyaz kural (yukarıda,
   daha özgül) etkilenmez. */
.main-panel .text-muted,
.card .card-title small {
    color: #616161;
}
/* Grafik kartlarındaki yeşil oran yazısı (Ana Panel / Yaş İstatistikleri
   "Riskli Üye (71+)" yüzdesi): temanın #4caf50'si beyazda 2.8:1 idi; aynı
   yeşilin koyusu (#2e7d32 = 5.1:1). %40 üstü kırmızı (satır içi) aynen. */
.main-panel .card .card-content .category .text-success {
    color: #2e7d32;
}
.main-panel .card .card-content,
.main-panel .form-control {
    font-weight: 400;
}

/* 7) Form etiketleri: temanın label.control-label (#AAAAAA, 2.3:1) ve
   .form-group label.control-label (#797979, 4.35:1) renkleri AA altındaydı
   (ör. Toplu Mektup "Türkçe", Başvuru Ekle "Adı (Zorunlu)"). Aynı gri,
   AA sınırına çekildi (#757575 = 4.6:1) — değer yazısından (#555) hâlâ açık,
   "boş alan" görünümü korunur. :where() ile özgüllük temanınkiyle aynı
   tutuldu: odak (mor), hata (kırmızı), uyarı vb. durum renkleri
   (.form-group.is-focused/.has-error …, daha özgül) aynen çalışır. */
:where(.main-panel > .content) label.control-label,
:where(.main-panel > .content) .form-group label,
:where(.main-panel > .content) .form-group label.control-label,
:where(.main-panel > .content) .form-group .checkbox label,
:where(.main-panel > .content) .form-group .radio label {
    color: #757575;
}

/* ------------------------------------------------------------------
   Satır içi flex süzgeç çubukları (ör. Yapılan İşlemler üst çubuğu):
   material.js her .form-control'ü .form-group'a sarar; "width:auto"
   seçicinin sarmalayıcısı en uzun seçeneğin genişliğini alıp 1024px'te
   kartı ve sayfayı 60-140px yatay taşırıyordu. Sarmalayıcı ve seçici
   kapsayıcının genişliğini aşmasın (dar değilse görünüm aynı).
   ------------------------------------------------------------------ */
.main-panel form[style*="display:flex"] > .form-group,
.main-panel form[style*="display: flex"] > .form-group {
    min-width: 0;
    max-width: 100%;
}
.main-panel form[style*="display:flex"] > .form-group > select.form-control,
.main-panel form[style*="display: flex"] > .form-group > select.form-control {
    max-width: 100%;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   ÜYE PROFİLİ sekmelerinde (Üye / Aile / Yakını / Giriş Bilgileri)
   etiket-solda alan çiftleri: 992-1359px arasında sekme içeriği dar
   (1024px'te ~300px) kaldığı için iki sütunlu yerleşimde etiket sütunu
   40-50px'e düşüyor, "Soyad", "Konsolosluk", "Telefon" gibi etiketler
   değerin üstüne biniyordu ("SoyadBican"). Bu aralıkta her alan kendi
   satırına geçer; etiket solda-değer sağda düzeni ve sıra aynen korunur.
   ≥1360px'te (etiketler sığıyor) ve mobilde değişiklik yok.
   ------------------------------------------------------------------ */
@media (min-width: 992px) and (max-width: 1359px) {
    .pk-duzen .tab-content .row > .col-md-6:has(> .label-on-left) {
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   WhatsApp yüzen düğmesi (Üye Profili, satır içi stil — eski aspx:653-655):
   telefonda 55px ikon sağ alttaki işlem düğmelerinin, alan değerlerinin
   üstüne biniyordu. Dar ekranda küçülür ve kenara yaslanır.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    a[href^="https://wa.me/"] > div {
        bottom: 12px !important;
        right: 6px !important;
    }
    a[href^="https://wa.me/"] > div > img {
        height: 42px !important;
    }
}

/* ------------------------------------------------------------------
   MOBİL (≤767px) genel taşma kuralları.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Geniş tablolar sayfayı değil kendi kutusunu kaydırsın. */
    .main-panel .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 0;
        margin-bottom: 10px;
    }
    /* Kart iç boşlukları dar ekranda daralır (içerik genişliği +16px). */
    .main-panel .card .card-content { padding: 12px 12px; }
    .main-panel .card .card-header { padding-left: 12px; padding-right: 12px; }
    /* Kart içindeki en dış .row'lar Bootstrap'in -15px kenar payıyla bu 12px
       iç boşluğu 3px aşıp kartın dışına taşıyordu; paya eşitlenir.
       (Sütun içindeki iç içe .row'lar -15px'te kalır.) */
    .main-panel .card .card-content > .row,
    .main-panel .card .card-content > form > .row,
    .main-panel .card .card-content > form.row,
    .main-panel .card .card-content > .tab-content > .tab-pane > .row {
        margin-left: -12px;
        margin-right: -12px;
    }
    /* Uzun yazılı düğmeler ("Önceden Gönderilenleri", "Borcu Kapanan Tüm
       Ödemeleri Onayla") tek satırda ekranı aşıyordu; yazı düğme içinde
       alta kayar.
       Tablo hücresindeki düğmeler ("Aylık Kırılım" gibi; tablo zaten kendi
       içinde kayar) ve açılır seçici/menü düğmeleri (bootstrap-select
       "Türkçe", MEKTUP ▾; ok işareti alt satıra düşüp düğmeyi 41→58px
       uzatıyordu) kapsam dışı: onlar eskisi gibi kalır. Ezen bir kural
       yerine :not() kullanıldı; sayfaların kendi kuralları (ör. profil
       sekmelerindeki .pk-duzen .tab-content .btn) aynen geçerli. */
    .main-panel > .content .btn:not(.dropdown-toggle):not(td .btn):not(th .btn) {
        white-space: normal;
        max-width: 100%;
    }
    /* Satır içi display:flex filtre formları (ör. Yapılan İşlemler üst
       çubuğu) tek satıra sığmayınca alta insin; sabit genişlikli
       girişler ekranı aşmasın. */
    .main-panel form[style*="display:flex"],
    .main-panel form[style*="display: flex"],
    .main-panel div[style*="display:flex"],
    .main-panel div[style*="display: flex"],
    .main-panel span[style*="display:flex"],
    .main-panel span[style*="display: flex"] {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .main-panel form[style*="display:flex"] > *,
    .main-panel form[style*="display: flex"] > *,
    .main-panel div[style*="display:flex"] > *,
    .main-panel div[style*="display: flex"] > *,
    .main-panel span[style*="display:flex"] > *,
    .main-panel span[style*="display: flex"] > * {
        min-width: 0;
        max-width: 100%;
    }
    .main-panel .form-control,
    .main-panel select,
    .main-panel input,
    .main-panel textarea,
    .main-panel img {
        max-width: 100%;
    }
    /* Uzun e-posta/IBAN gibi boşluksuz değerler kartı taşırmasın
       (tablo hücreleri hariç — onlar kendi kutusunda kayar). */
    .main-panel .card-content p,
    .main-panel .card-content label,
    .main-panel .card-content .form-control-static {
        overflow-wrap: anywhere;
    }
}

/* Sağdaki alt+x ad arama paneli (350px, right:-10px) dar ekrana sığsın.
   (Menünün hamburgere döndüğü ≤991px'e genişletildi; tablette de 10px
   ekran dışına taşıyordu. alt+x düğmesinin bu aralıktaki yeri _Layout'ta.) */
@media (max-width: 991px) {
    #sagarama { max-width: calc(100vw - 20px); right: 0 !important; }
}

/* Profil kartındaki "MERKAD ÜYESİ" / "Ön Kayıt" satırı: temanın .text-gray'i
   (#999, kontrast 2.85) sönük kalıyordu; aynı gri tonun koyusu. */
.card-profile .category.text-gray { color: #666; }

/* Başvuru sihirbazı (Başvuru Ekle): etkin adımı renkli "moving-tab" gösterir.
   Tema dosyasındaki genel `.nav-pills > li.active > a { background:#272727
   !important }` (profil sekmeleri için) sihirbazın kendi saydam kuralını
   ezdiği için renkli sekmenin sağ ucundan siyah bir hap taşıyordu. Eski
   temada bu genel kural yoktu; sihirbazda etkin adım yine saydamdır. */
.wizard-card .nav-pills > li.active > a,
.wizard-card .nav-pills > li.active > a:hover,
.wizard-card .nav-pills > li.active > a:focus {
    background-color: transparent !important;
    box-shadow: none;
}