/* ============================================================================
   BACKLINK SAYFALARI - PAYLASILAN TEMA KATMANI

   BU DOSYA NEDIR?
   Backlink akisinin (satin alma + siparis gecmisi) ORTAK renk paleti ve
   yalnizca birden fazla sayfanin kullandigi birkac bilesen sinifi.

   KIM KULLANIYOR?
     - public/backlink_orders.php    (siparis gecmisi)  -> bu dosyayi <link> ile ceker
     - public/backlink_purchase.php  (satin alma)       -> HENUZ CEKMIYOR, asagiya bak
     - public/orders.php             (siparislerim)     -> 6..12 bolumlerini kullanacak
     - public/transactions.php       (islem gecmisi)    -> 6..12 bolumlerini kullanacak
     - public/purchase.php           (destek talebi)    -> 6..12 bolumlerini kullanacak
     - public/services.php           (servis vitrini)   -> 6..12 bolumlerini kullanacak

   NEDEN AYRI DOSYA?
   Token'lar once yalnizca backlink_purchase.php icindeki <style> blogunda
   duruyordu. Ikinci sayfa ayni paleti kullanacagi icin degerleri o sayfadan
   kopyalamak IKI DOGRULUK KAYNAGI demek olurdu; biri guncellenip digeri
   unutuldugunda iki sayfa zamanla farkli tonlara kayar. Tek dosya = tek kaynak.

   GECIS NOTU (onemli, sonraki gorev icin):
   backlink_purchase.php bugun dagitildigi ve "dokunma" isaretli oldugu icin
   kendi gomulu :root / body.dark-mode kopyasi HALA duruyor. Asagidaki degerler
   o blokla (backlink_purchase.php:594-681) BIREBIR ayni; kasten farklilik YOK.
   Satin alma sayfasi bu dosyayi cekmeye baslar baslamaz oradaki iki token
   blogu silinmelidir - o ana kadar palet degisikligi IKI YERDE birden
   yapilmalidir.

   NEDEN "body.dark-mode"?
   Bu projede data-bs-theme YOK; koyu tema body uzerindeki .dark-mode sinifi
   ile calisiyor (includes/header.php:864 sunucu tarafi cerezden, header.php:780
   istemci tarafi localStorage'dan - VE VARSAYILAN KOYU). Acik degerler
   :root (0,1,0) uzerinde, koyu degerler "body.dark-mode" (0,1,1) uzerinde
   yaziliyor - boylece koyu, acigi kesin olarak yener.
   BU SECICIYI ".dark-mode" DIYE KISALTMA: assets/css/style.css:1133'te de
   ".dark-mode" (0,1,0) secicisi var; esitlige dusulur ve sira kavgasi baslar.

   KAPSAM SINIRI (onemli, KURAL DEGISMEDI - kapsam genisledi):
   Buraya YALNIZCA IKI VE DAHA FAZLA sayfanin kullandigi sey girer. Tek
   sayfaya ozgu her kural o sayfanin kendi <style> blogunda kalir.
   Ilk surumde kapsam 2 sayfaydi (backlink ikilisi), simdi 6 sayfa var; bu
   yuzden 6..12 bolumleri eklendi. Her bolumun basliginda "KIM KULLANIYOR"
   satiri ve SAYIM vardir - sayim 2'nin altina duserse o bolum buradan
   cikarilip ilgili sayfaya tasinmalidir.
   BURAYA GIRMEYENLER (olculdu, hepsi TEK sayfada):
     - onay kutusu tasarimi        -> yalnizca purchase.php  (--bl-check-* orada)
     - "table-danger" satir rengi  -> yalnizca orders.php
     - ozet istatistik kartlari    -> yalnizca transactions.php
     - servis karti resim/overlay  -> yalnizca services.php
     - sayfa hero basligi (h1+lead)-> yalnizca services.php
     - para birimi / adim sihirbazi-> yalnizca purchase.php
   Soluk metin icin yeni ortak sinif ACMAYIN; dogrudan var(--bl-text-muted)
   kullanin - boylece sayfa stilleriyle isim cakismasi olmaz.

   GERIYE UYUMLULUK GARANTISI (backlink_orders.php bu dosyayi canli cekiyor):
   6..12 bolumlerindeki HICBIR kural o sayfanin gorunumunu degistiremez.
   Bunu iki mekanik kuralla sagliyoruz:
     1) Her yeni secici EN AZ BIR YENI .bl-* sinif adi icerir. Ciplak Bootstrap
        secicisi (.table, .card-header, .form-control, .page-link, .badge) veya
        ciplak element secicisi TEK BASINA KULLANILMAZ.
     2) Yeni sinif adlari backlink_orders.php'de HIC GECMIYOR (grep ile
        dogrulandi: bl-tablo, bl-tablo-kutu, bl-rozet-yumusak, bl-bos-kutu,
        bl-bos-kutu-ikon, bl-bos-kutu-metin, bl-bos-kutu-eylem,
        bl-kart-basligi, bl-kart-basligi-eylem, bl-form, bl-sayfalama
        -> hepsi 0 eslesme).
   MEVCUT SECICILER (.bl-kart, .bl-rozet, .bl-rozet-notr, .bl-odak) NE
   GENISLETILDI NE DE ALTLARINA TORUN KURALI YAZILDI. Ornegin ".bl-kart
   .card-header" gibi bir secici YAZMAK YASAK - backlink_orders.php'nin
   kartina carpardi; onun yerine ayri ".bl-kart-basligi" sinifi acildi.
   ============================================================================ */


/* ============================================================
   1) TOKEN'LAR - ACIK TEMA
   ============================================================ */
:root {
    /* Ust bar yuksekligi. RENK DEGIL, YERLESIM degeri; paylasilan dosyada
       durmasinin sebebi token ailesinin butun kalmasi - eksik olursa o
       degiskeni okuyan calc() sessizce gecersize duser.
       backlink_purchase.php JS'i calisma aninda olcup <html> uzerine
       satir-ici yazar (orada 80px yalnizca olcum oncesi yedektir). */
    --bl-ust-bar: 80px;

    /* --- Yuzeyler --- */
    --bl-surface:        #ffffff;
    --bl-surface-2:      #f8fafc;
    --bl-surface-3:      #f1f5f9;
    --bl-border:         rgba(15, 23, 42, 0.12);
    --bl-border-strong:  rgba(15, 23, 42, 0.20);

    /* --- Metin --- */
    --bl-text:           #1e293b;
    --bl-text-muted:     #5b6675;
    --bl-text-on-accent: #ffffff;

    /* --- Vurgu (mavi) --- */
    --bl-accent:         #1d4ed8;
    --bl-accent-strong:  #1e40af;
    /* Dolu blok zemini: beyaz metinle IKI TEMADA DA 6.7:1 verir,
       bu yuzden kasitli olarak acik/koyu ayni deger. */
    --bl-accent-solid:   #1d4ed8;
    --bl-accent-soft:    rgba(29, 78, 216, 0.09);
    --bl-accent-soft-2:  rgba(29, 78, 216, 0.16);
    --bl-accent-ring:    rgba(29, 78, 216, 0.28);

    /* --- Onay kutusu --- */
    --bl-check-fill:     #1d4ed8;
    --bl-check-border:   rgba(15, 23, 42, 0.32);

    /* --- Odak --- */
    --bl-focus-ring:     rgba(29, 78, 216, 0.30);

    /* --- Uyari --- */
    --bl-warn-bg:        rgba(180, 83, 9, 0.10);
    --bl-warn-text:      #8a4b00;
    --bl-warn-border:    rgba(180, 83, 9, 0.35);

    /* --- Hata --- */
    --bl-danger:         #b42318;
    --bl-danger-bg:      rgba(180, 35, 24, 0.10);
    --bl-danger-border:  rgba(180, 35, 24, 0.35);

    /* --- Durum / diger --- */
    --bl-success:        #15803d;
    --bl-scroll-thumb:   rgba(15, 23, 42, 0.22);
    --bl-shadow:         0 10px 30px rgba(15, 23, 42, 0.10);

    /* --- Rozet metin renkleri (8. bolum, .bl-rozet-yumusak icin) ---
       NEDEN AYRI TOKEN: yumusak rozet, dolu blogu %16 tinte cevirir; uzerine
       yazilacak metin bu ACIK zeminde okunmali. Iki renk icin mevcut
       token'lar YETMIYOR, kalan dordu icin YETIYOR - olculdu:
         bg-info / bg-primary metni = var(--bl-accent)     (#1d4ed8 / #8bb9fe)
         bg-warning        metni    = var(--bl-warn-text)  (#8a4b00 / #ffc94d)
         bg-danger         metni    = var(--bl-danger)     (#b42318 / #ff9c94)
       Bu ucu birebir ayni degerler oldugu icin YENI TOKEN ACILMADI.
       Asagidaki ikisi ise mevcut hicbir token'la ayni DEGIL:
         --bl-success  #15803d  tint uzerinde 4.0:1 -> yetersiz, bu yuzden
         --bl-rz-basari-metin #13652f (5.4:1) ayri duruyor.
         --bl-text-muted #5b6675 notr tint uzerinde soluk kaliyor, bu yuzden
         --bl-rz-notr-metin #475467 (6.3:1) ayri duruyor.

       GECIS NOTU: bu iki ad backlink_orders.php:252-282'de de TANIMLI ve
       degerler BIREBIR AYNIDIR (kopyalandi, uydurulmadi). O sayfanin <style>
       blogu bu dosyanin <link>'inden SONRA geldigi icin orada yerel tanim
       kazanir - yani bu satirlarin eklenmesi o sayfayi DEGISTIRMEZ. Sayfa bir
       daha elden gecirildiginde oradaki iki satir silinmelidir. */
    --bl-rz-basari-metin: #13652f;
    --bl-rz-notr-metin:   #475467;
}


/* ============================================================
   2) TOKEN'LAR - KOYU TEMA

   Koyu degerler uydurulmadi; assets/css/style.css'teki mevcut koyu
   paletten (#2b3035, #343a40, #e9ecef, #adb5bd, #6ea8fe, #75b798)
   alindi, boylece backlink sayfalari sitenin geri kalaniyla ayni tonda kalir.

   --bl-ust-bar burada BILEREK yeniden tanimlanmadi: yerlesim olcusu
   temaya gore degismez.
   ============================================================ */
body.dark-mode {
    --bl-surface:        #2b3035;
    --bl-surface-2:      #343a40;
    --bl-surface-3:      rgba(255, 255, 255, 0.05);
    --bl-border:         rgba(255, 255, 255, 0.12);
    --bl-border-strong:  rgba(255, 255, 255, 0.22);

    --bl-text:           #e9ecef;
    --bl-text-muted:     #adb5bd;
    --bl-text-on-accent: #ffffff;

    --bl-accent:         #8bb9fe;
    --bl-accent-strong:  #9ec5fe;
    --bl-accent-solid:   #1d4ed8;
    --bl-accent-soft:    rgba(110, 168, 254, 0.14);
    --bl-accent-soft-2:  rgba(110, 168, 254, 0.22);
    --bl-accent-ring:    rgba(110, 168, 254, 0.34);

    /* Onay kutusu dolgusu KOYU MAVI kalir: uzerindeki tik beyaz.
       Acik maviye (#8bb9fe) cevrilirse beyaz tik okunmaz olur. */
    --bl-check-fill:     #2563eb;
    --bl-check-border:   rgba(255, 255, 255, 0.38);

    --bl-focus-ring:     rgba(110, 168, 254, 0.45);

    --bl-warn-bg:        rgba(255, 193, 7, 0.14);
    --bl-warn-text:      #ffc94d;
    --bl-warn-border:    rgba(255, 193, 7, 0.40);

    --bl-danger:         #ff9c94;
    --bl-danger-bg:      rgba(255, 156, 148, 0.13);
    --bl-danger-border:  rgba(255, 156, 148, 0.38);

    --bl-success:        #75b798;
    --bl-scroll-thumb:   rgba(255, 255, 255, 0.22);
    --bl-shadow:         0 10px 30px rgba(0, 0, 0, 0.45);

    /* Koyu temada basari metni --bl-success ile AYNI olabilirdi ama token
       ailesini butun tutmak icin yine de yaziliyor; eksik birakilsaydi acik
       tema degeri (#13652f) koyu zemine sizardi. */
    --bl-rz-basari-metin: #75b798;
    --bl-rz-notr-metin:   #ced4da;
}


/* ============================================================
   3) ORTAK BILESEN: KART YUZEYI

   Bootstrap 5.3.3'un KENDI kart degiskenlerini eziyoruz; ham
   background-color/color yazmiyoruz. Sebep: .card, .card-header,
   .card-body, .card-footer zaten bu degiskenleri okuyor, yani tek
   yerden dokundugumuzda kartin TUM parcalari birlikte donuyor ve
   Bootstrap'in kendi kurallariyla ozgulluk yarisina girmiyoruz.

   KULLANIM:  <div class="card bl-kart">
   ONEMLI:    kart basligindaki "bg-light" sinifi KALDIRILMALIDIR.
              .bg-light, background-color'i dogrudan .card-header
              uzerine !important ile yazar (header.php:398 koyu temada
              #1e1e1e'ye ceviriyor) ve --bs-card-cap-bg'yi devre disi birakir.

   box-shadow BILEREK AYARLANMADI: sayfalarda .shadow-sm kullaniliyor,
   buraya box-shadow yazsaydik onu sessizce ezerdik. Gerekirse
   var(--bl-shadow) ilgili sayfada uygulanir.
   ============================================================ */
.bl-kart {
    --bs-card-bg:           var(--bl-surface);
    --bs-card-color:        var(--bl-text);
    --bs-card-border-color: var(--bl-border);
    --bs-card-cap-bg:       var(--bl-surface-3);
    --bs-card-cap-color:    var(--bl-text);
}


/* ============================================================
   4) ORTAK BILESEN: ROZET TABANI

   .bl-rozet BILEREK renk (background/color) AYARLAMAZ.
   Sebep: bu sayfalarda rozet renkleri getBacklinkStatusColor()
   ciktisindan geliyor (includes/functions.php:991) ve
   "badge bg-success | bg-info | bg-warning | bg-danger | bg-secondary"
   seklinde basiliyor. Burada background-color yazsaydik, bu dosya
   Bootstrap'ten SONRA yuklendigi icin esit ozgullukte kazanir ve
   TUM durum renklerini tek renge duzlerdik.
   Bu yuzden taban yalnizca bicim/kenarlik verir.

   .bl-rozet-notr ise renksiz/notr rozet icindir; tema-kor
   "bg-light text-dark" ikilisinin yerine gecer. getBacklinkStatusColor()
   'light' DONDURMEZ, dolayisiyla bu sinif durum rozetlerine dokunmaz.

   KULLANIM: <span class="badge bl-rozet bl-rozet-notr">Hazirlaniyor</span>
   ============================================================ */
.bl-rozet {
    border: 1px solid transparent;
    font-weight: 600;
    letter-spacing: .01em;
}

.bl-rozet-notr {
    background-color: var(--bl-surface-3);
    color: var(--bl-text);
    border-color: var(--bl-border);
}


/* ============================================================
   5) ORTAK BILESEN: ODAK HALKASI

   Klavye erisilebilirligi. :focus DEGIL :focus-visible kullaniliyor -
   fare tiklamasinda halka cikmaz, yalnizca klavyeyle gezerken cikar.

   outline + box-shadow BIRLIKTE: outline yuksek kontrast modunda
   ayakta kalir, box-shadow ise yumusak renkli halkayi verir.

   KULLANIM: odak halkasi isteyen butona/baglantiya "bl-odak" ekle.
   ============================================================ */
.bl-odak:focus-visible {
    outline: 2px solid var(--bl-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem var(--bl-focus-ring);
}


/* ============================================================================
   6) OZGULLUK NOTU - ASAGIDAKI TUM BOLUMLER ICIN GECERLI

   BU BOLUMDE KURAL YOK, SADECE ACIKLAMA VAR. Asagida bazi seciciler ayni
   sinif adini IKI KEZ yaziyor (ornek: ".bl-form.bl-form .form-control").
   Yazim hatasi degil, kasitli:

   assets/css/style.css koyu tema icin HAM renkleri ".dark-mode X" (0,2,0)
   secicileriyle yaziyor. Olculen carpisanlar:
       style.css:1147  .dark-mode .form-control        -> #2b3035
       style.css:1178  .dark-mode .form-control/select -> #343a40
       style.css:1187  .dark-mode .form-control:focus  -> #3e4551   (0,3,0)
       style.css:1230  .dark-mode .table               -> border #495057
       style.css:1235  .dark-mode .table th            -> mavi gradyan (0,2,1)
       style.css:1240  .dark-mode .table td            -> border #495057 (0,2,1)
       style.css:1253  .dark-mode .card-header         -> mavi gradyan
       style.css:1420  .dark-mode ::-webkit-scrollbar-thumb        (0,1,1)
       style.css:514   .table-responsive { overflow: hidden }      (0,1,0)
   Tek sinifla yazsaydik (0,1,0) veya (0,2,0) cikar, bu kurallara YENILIRDIK.

   NEDEN "dosya sirasina guvenelim" DEMIYORUZ: bu dosya bugun govde icinden
   link'leniyor, yani style.css'ten SONRA yukleniyor ve beraberlikleri
   kazaniyor. Ama bir gun birisi link'i head'e tasirsa butun beraberlikler
   sessizce TERSINE doner ve koyu tema kirilir. Sinif adini ikilemek ozgullugu
   kalici olarak yukseltir; sonuc yukleme sirasindan BAGIMSIZ olur.

   ID (kare isaretli secici) kullanilmadi: backlink_purchase.php:1084 bu isi
   "#order-form-container" ile cozuyor, ama paylasilan dosya sayfalarda hangi
   ID'nin bulundugunu VARSAYAMAZ.

   NEDEN "background" KISAYOLU, "background-color" DEGIL: style.css'teki iki
   koyu tema kurali gradyan (background-image) yaziyor. Sadece background-color
   yazsaydik ozgullugu kazansak bile gradyan resmi ustte kalmaya devam ederdi.
   Kisayol background-image'i initial'a dondurur.
   ============================================================================ */


/* ============================================================
   7) ORTAK BILESEN: TABLO

   KIM KULLANIYOR: orders.php, transactions.php   (SAYIM: 2)
     orders.php:66        table table-hover table-striped
     transactions.php:330 table table-striped table-hover transaction-table

   NEDEN BOYLE COZULDU (BS 5.3 tuzagi):
   Bootstrap 5.3'te hucre zemini SAYDAM DEGIL - ".table" once
   "--bs-table-bg: var(--bs-body-bg)" tanimliyor, sonra
   ".table > :not(caption) > * > *" bunu hucreye "background-color" olarak
   basiyor. Zebra cizgisi de "tr" arka plani DEGIL, hucrenin uzerine binen
       box-shadow: inset 0 0 0 9999px var(--bs-table-bg-type, ...)
   golgesi. Bu yuzden "tr" arka planina yazan yamalar HICBIR SEY YAPMAZ;
   style.css:1244 ve style.css:1248'deki iki koyu tema yamasi tam olarak bu
   sebeple OLU (opak hucre zemini onlarin ustunu kapatiyor).

   DOGRU COZUM: ham renk yazmak yerine Bootstrap'in KENDI degiskenlerini
   token'a baglamak. Boylece "table-striped" ve "table-hover" MARKUP'TA KALIR
   ve dogru calisir; ayrica hucre metni "--bs-table-color" uzerinden tema
   rengini alir.

   MARKUP'TAN KALDIRILMASI GEREKENLER:
     - thead uzerindeki "table-light": ham "--bs-table-bg:#f8f9fa" ve
       "--bs-table-color:#000" yazar, koyu temada beyaz bant birakir.
       Yerine asagidaki "> thead > tr > *" kurali gecti.
     - "table-bordered": her hucreye cerceve cizer, token'li alt cizgiyle
       cakisir.
   ============================================================ */
table.bl-tablo.bl-tablo {
    /* Bootstrap'in kendi degiskenleri -> token. Ham renk YOK. */
    --bs-table-color:         var(--bl-text);
    --bs-table-bg:            var(--bl-surface);
    --bs-table-border-color:  var(--bl-border);

    /* Zebra: acik temada #f8fafc opak, koyu temada #343a40 opak.
       Ikisi de hucre golgesi olarak tam ortuyor, sonuc net bir cizgi. */
    --bs-table-striped-color: var(--bl-text);
    --bs-table-striped-bg:    var(--bl-surface-2);

    /* Uzerine gelme: saydam mavi tint - altindaki zebra/zemin okunur kalir. */
    --bs-table-hover-color:   var(--bl-text);
    --bs-table-hover-bg:      var(--bl-accent-soft);

    --bs-table-active-color:  var(--bl-text);
    --bs-table-active-bg:     var(--bl-accent-soft-2);

    /* style.css:1230 ".dark-mode .table" (0,2,0) ham "#495057" yaziyor;
       "table.bl-tablo.bl-tablo" (0,2,1) onu yener. Hucreler border-color'i
       tablodan miras alir (Bootstrap reboot: tbody,td,th,tr icin
       "border-color: inherit"), o yuzden tek yerden ayarlamak yetiyor. */
    color: var(--bl-text);
    border-color: var(--bl-border);
}

/* Govde ve alt bilgi hucrelerinin alt cizgisi.
   style.css:1240 ".dark-mode .table td" (0,2,1) ham renk yaziyor;
   asagidaki secici (0,2,2) oldugu icin yener. */
.bl-tablo.bl-tablo > tbody > tr > *,
.bl-tablo.bl-tablo > tfoot > tr > * {
    border-bottom-color: var(--bl-border);
}

/* Baslik bandi - thead uzerindeki "table-light" sinifinin yerine gecer.
   style.css:1235 ".dark-mode .table th" (0,2,1) mavi GRADYAN yaziyor;
   asagidaki secici (0,2,2) hem onu yener hem de "background" kisayolu
   oldugu icin gradyan resmini temizler. */
.bl-tablo.bl-tablo > thead > tr > * {
    background: var(--bl-surface-3);
    color: var(--bl-text);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--bl-border-strong);
}


/* ============================================================
   7b) ORTAK BILESEN: TABLO KAYDIRMA KUTUSU

   KIM KULLANIYOR: orders.php, transactions.php   (SAYIM: 2)
   Ikisi de tabloyu "table-responsive" sinifli bir div icine sariyor.

   NEDEN GEREKLI (olculdu, tahmin degil):
   style.css:514 su kurali yaziyor:
       .table-responsive { border-radius: ...; overflow: hidden; }
   "overflow: hidden" Bootstrap'in "overflow-x: auto" kuralini eziyor
   (ikisi de (0,1,0), style.css sonra yukleniyor) - yani YATAY KAYDIRMA
   OLMUYOR. transactions.php:190 bunu "@media (max-width:768px)" icinde tekrar
   "auto" yaparak yamamis; 768px USTUNDE dar pencerede tablo hala kirpiliyor.
   Burada kalici olarak geri aciliyor.

   "overflow: auto" yaziliyor cunku Bootstrap'in "overflow-x:auto" tek basina
   verdigi sonuc da budur: CSS'te eksenlerden biri auto ise digerinin
   "visible" degeri de auto'ya donusur.

   Kaydirma cubugu ayrica temaya baglaniyor - style.css:1420
   ".dark-mode ::-webkit-scrollbar-thumb" (0,1,1) ham "#495057" ve
   "3px solid #343a40" cerceve yaziyor; ikili sinif (0,2,1) onu yener.
   ============================================================ */
.bl-tablo-kutu.bl-tablo-kutu {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bl-scroll-thumb) transparent;
}

.bl-tablo-kutu.bl-tablo-kutu::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.bl-tablo-kutu.bl-tablo-kutu::-webkit-scrollbar-track {
    background: transparent;
}

.bl-tablo-kutu.bl-tablo-kutu::-webkit-scrollbar-thumb {
    background-color: var(--bl-scroll-thumb);
    border: none;              /* style.css'teki "3px solid #343a40" temizlenir */
    border-radius: 6px;
}


/* ============================================================
   8) ORTAK BILESEN: YUMUSAK DURUM ROZETI

   KIM KULLANIYOR: orders.php, transactions.php, purchase.php   (SAYIM: 3)
     orders.php:150       badge rounded-pill bg-(getStatusColor ciktisi)
     transactions.php:245 badge bg-info
     purchase.php         badge bg-primary / bg-warning / bg-success /
                          bg-secondary  (toplam 12 kullanim)

   COZULEN SORUN (olculdu):
   ".badge" metni "--bs-badge-color: #fff" ile BEYAZ; ".bg-warning" ve
   ".bg-info" ise acik sari/turkuaz dolu blok. Beyaz metin bu iki zeminde
   1.6:1 ve 1.8:1 veriyor - WCAG esigi 4.5:1. Hem acik hem koyu temada kirik.

   NEDEN "!important" YAZILMADI:
   Bootstrap'in kurali su sekilde:
       .bg-warning { --bs-bg-opacity: 1;
                     background-color: rgba(var(--bs-warning-rgb),
                                            var(--bs-bg-opacity)) !important; }
   "!important" background-color DEKLARASYONUNDA; ozel degiskenin kendisinde
   degil. Ozel degiskenler bu yaristan etkilenmez. Yani "--bs-bg-opacity"a
   dusuk bir deger vermek, Bootstrap'in kendi !important'li satirinin
   HESAPLADIGI degeri degistirir - onunla kavga etmeden. Ayni sekilde metin
   rengi de "--bs-badge-color" ozel degiskeni uzerinden yaziliyor.

   SONUC: dolu blok yumusak tinte doner, uzerine koyulastirilmis durum rengi
   gelir. Olculen kontrast (acik / koyu):
       bg-success   5.4:1 / 4.9:1
       bg-info      5.9:1 / 4.9:1
       bg-warning   6.3:1 / 6.1:1
       bg-primary   5.4:1 / 5.8:1
       bg-secondary 6.3:1 / 7.6:1
   Hepsi 4.5:1 esiginin ustunde.

   NEDEN RENK KURALLARI ".bl-rozet-yumusak" ILE KAPILI:
   Ciplak ".badge.bg-success" yazsaydik backlink_orders.php'nin durum
   rozetlerini de degistirirdik (o sayfa da "badge bg-*" basiyor). Her renk
   kurali yeni sinifi ZORUNLU tutuyor, o yuzden eski sayfa etkilenmiyor.

   KULLANIM: span sinifi = "badge bl-rozet bl-rozet-yumusak bg-warning"
   MARKUP'TAN KALDIRILMASI GEREKENLER:
     - "text-dark" / "text-white": bunlar "color"u DOGRUDAN !important ile
       yazar ve "--bs-badge-color"u devre disi birakir. purchase.php'de iki
       yerde "bg-warning text-dark" var; koyu temada neredeyse siyah metin
       koyu tint uzerinde okunmaz olur.
     - "text-bg-*": bu sinif "color:#000!important" dayatir, ayni sorun.
       Yerine duz "bg-*" kullanin.
   ============================================================ */
.bl-rozet-yumusak {
    /* Dolu blogu tinte cevirir. Bootstrap'in !important'ina DOKUNMADAN. */
    --bs-bg-opacity: .16;

    /* Cerceve metin renginin kendisi: "currentColor" asagidaki
       "--bs-badge-color" ile ayni renge cozulur, yani her durumda ve her
       temada goruntulenen metin rengiyle otomatik uyumlu - ayri token
       gerekmiyor. */
    border: 1px solid currentColor;
}

.bl-rozet-yumusak.bg-success   { --bs-badge-color: var(--bl-rz-basari-metin); }
.bl-rozet-yumusak.bg-info      { --bs-badge-color: var(--bl-accent); }
.bl-rozet-yumusak.bg-primary   { --bs-badge-color: var(--bl-accent); }
.bl-rozet-yumusak.bg-warning   { --bs-badge-color: var(--bl-warn-text); }
.bl-rozet-yumusak.bg-danger    { --bs-badge-color: var(--bl-danger); }
.bl-rozet-yumusak.bg-secondary { --bs-badge-color: var(--bl-rz-notr-metin); }


/* ============================================================
   9) ORTAK BILESEN: BOS DURUM KUTUSU

   KIM KULLANIYOR: orders.php, transactions.php, services.php   (SAYIM: 3)
     orders.php:57        alert alert-info              (siparis yok)
     transactions.php:349 alert alert-info mb-3         (islem yok, ikon+2 buton)
     services.php:346     alert alert-info text-center  (aktif servis yok)

   NEDEN "alert alert-info" YERINE AYRI SINIF:
   1) ".alert-info" renklerini Bootstrap'in "--bs-info-*-subtle" ailesinden
      alir; bu aile bu projede tema ile DEGISMEZ (data-bs-theme kullanilmiyor).
      style.css:1150 ve :1391 bunu koyu temada ham "#2b3035" ile yamiyor -
      yani ayni kutunun rengi uc ayri yerden geliyor.
   2) "alert" semantik olarak UYARI demek; "kayit yok" bir uyari degil, bos
      durum. Ekran okuyucuda gereksiz aciliyet yaratiyor.
   Bu sinif kesik cizgili notr bir kutu verir ve rengini tek yerden - token
   katmanindan - alir.

   KULLANIM (dis kutu / ikon / metin / buton obegi):
     div.bl-bos-kutu
       i.bl-bos-kutu-ikon
       p.bl-bos-kutu-metin
       div.bl-bos-kutu-eylem
   transactions.php'de bu kutu bir td (colspan=5) icine girer - blok eleman
   oldugu icin sorun cikarmaz.
   ============================================================ */
.bl-bos-kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .75rem;
    padding: 2.5rem 1.25rem;
    background-color: var(--bl-surface-2);
    color: var(--bl-text-muted);
    border: 1px dashed var(--bl-border-strong);
    border-radius: .75rem;
}

.bl-bos-kutu-ikon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--bl-text-muted);
    opacity: .55;           /* ikon dekoratif; metnin onune gecmemeli */
}

.bl-bos-kutu-metin {
    margin: 0;
    color: var(--bl-text);  /* asil mesaj soluk DEGIL - kutu soluk, metin net */
    font-weight: 500;
}

.bl-bos-kutu-eylem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}


/* ============================================================
   10) ORTAK BILESEN: KART BASLIK BANDI

   KIM KULLANIYOR: orders.php, transactions.php, purchase.php   (SAYIM: 3)
     orders.php:41        card-header d-flex justify-content-between ... flex-wrap
     transactions.php:239 card-header d-flex justify-content-between ... flex-wrap
     purchase.php:223     card-header bg-primary text-white py-3
   Ilk ikisi ayni yerlesim yardimci siniflarini SATIR SATIR tekrar ediyor;
   ucuncusu ayni bandi farkli (tema-kor) renkle yapiyor.

   services.php BU BOLUME DAHIL DEGIL: onun basligi kart icinde degil, sayfa
   ustunde duran bir hero (h1.display-4 + p.lead). SAYIM 1 oldugu icin
   services.php'nin kendi stil blogunda kalir.

   NEDEN "background" KISAYOLU:
   style.css:1253 ".dark-mode .card-header" (0,2,0) bir MAVI GRADYAN yaziyor.
   Sadece "background-color" yazsaydik gradyan resmi ustte kalirdi. Secici
   ".card-header.bl-kart-basligi.bl-kart-basligi" (0,3,0) onu yener.

   NEDEN ".bl-kart .card-header" DIYE YAZILMADI:
   O secici backlink_orders.php'nin kartina da carpardi (o sayfa ".bl-kart"
   kullaniyor). Ayri sinif acmak tek guvenli yol - bkz. dosya basindaki
   GERIYE UYUMLULUK GARANTISI.

   MARKUP'TAN KALDIRILMASI GEREKENLER:
     - purchase.php'deki "bg-primary text-white": ".bg-primary" arka plani
       !important ile yazar, buradaki token'li zemini ezer.
     - "d-flex justify-content-between align-items-center flex-wrap" yardimci
       siniflari: yerlesim artik bu sinifin icinde.
   ============================================================ */
.card-header.bl-kart-basligi.bl-kart-basligi {
    background: var(--bl-surface-3);
    color: var(--bl-text);
    border-bottom: 1px solid var(--bl-border);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* Baslik metni. Torun secici kullaniliyor (cocuk degil) cunku
   transactions.php:242'de h4, araya giren bir div icinde duruyor. */
.bl-kart-basligi h1,
.bl-kart-basligi h2,
.bl-kart-basligi h3,
.bl-kart-basligi h4,
.bl-kart-basligi h5,
.bl-kart-basligi h6 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: inherit;
}

/* Sagdaki buton/rozet obegi. */
.bl-kart-basligi-eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Dar ekranda baslik ve butonlar alt alta gecer, butonlar tam genislik olur.
   transactions.php:186 bunu 768px'te "align-items: flex-start !important" ile
   yapiyordu; burada !important gerekmiyor cunku yerlesim zaten bu sinifin
   kendi kurali - kimseyle yarismiyor. */
@media (max-width: 575.98px) {
    .card-header.bl-kart-basligi.bl-kart-basligi {
        flex-direction: column;
        align-items: stretch;
    }

    .bl-kart-basligi-eylem {
        width: 100%;
    }
}


/* ============================================================
   11) ORTAK BILESEN: FORM ALANLARI VE DOGRULAMA

   KIM KULLANIYOR: purchase.php, transactions.php, services.php   (SAYIM: 3)
     purchase.php     12 form-control, 4 form-select, 11 form-label,
                      5 is-invalid, 2 invalid-feedback, 1 input-group
     transactions.php  3 form-control, 2 form-select, 4 form-label
     services.php      1 form-control, 1 input-group  (arama kutusu)

   ONAY KUTUSU (form-check-input) BU BOLUME GIRMEDI: yalnizca purchase.php
   kullaniyor (5 adet), SAYIM 1. Onun icin gereken --bl-check-fill ve
   --bl-check-border token'lari zaten hazir; kural o sayfanin kendi blogunda
   kalmali.

   NEDEN DEGISKEN BAGLAMA TEK BASINA YETMEDI:
   Bootstrap ".form-control"u degiskenle boyuyor
   ("background-color: var(--bs-body-bg)", (0,1,0)). Ama style.css:1178 koyu
   tema icin HAM renkleri ".dark-mode .form-control" (0,2,0) ile yaziyor ve
   Bootstrap'in degisken satirini yeniyor. Yani "--bs-body-bg"i token'a
   baglamak koyu temada HICBIR ETKI YAPMAZDI. Bu yuzden burada ozelligin
   kendisi yaziliyor - ama ham renk degil, TOKEN ile.
   Ikili sinif ".bl-form.bl-form ..." (0,3,0) style.css:1178'i,
   ":focus" hali (0,4,0) ise style.css:1187'yi (0,3,0) yener.

   DOGRULAMA kismi tersine calisiyor: Bootstrap'in "is-invalid" kurallari
   "--bs-form-invalid-color" / "--bs-form-invalid-border-color" degiskenlerini
   okuyor ve style.css bu ikisine HIC dokunmuyor - o yuzden orada ozgulluk
   yarisi yok, sade degisken baglama yetiyor. Degiskenler ".bl-form" kabinde
   tanimlanip icerideki alanlara miras yoluyla iniyor.

   KULLANIM: form (veya sarmalayan div) uzerine "bl-form" sinifi.
   ============================================================ */
.bl-form {
    /* Bootstrap'in kendi dogrulama degiskenleri -> token.
       ".invalid-feedback { color: var(--bs-form-invalid-color) }" ve
       ".form-control.is-invalid { border-color: var(--bs-form-invalid-border-
       color) }" bunlari mirasla buradan okur. */
    --bs-form-invalid-color:        var(--bl-danger);
    --bs-form-invalid-border-color: var(--bl-danger);
}

.bl-form.bl-form .form-control,
.bl-form.bl-form .form-select,
.bl-form.bl-form .input-group-text {
    background-color: var(--bl-surface-2);
    color: var(--bl-text);
    border-color: var(--bl-border-strong);
}

.bl-form.bl-form .form-control:focus,
.bl-form.bl-form .form-select:focus {
    background-color: var(--bl-surface-2);
    color: var(--bl-text);
    border-color: var(--bl-accent);
    box-shadow: 0 0 0 .25rem var(--bl-focus-ring);
    outline: 0;
}

/* style.css:1195 ".dark-mode ::placeholder" (0,1,1) ham "#6c757d" yaziyor;
   asagidaki secici (0,3,1) onu yener. "opacity: 1" gerekli cunku Firefox
   yer tutucuya varsayilan olarak saydamlik uygular. */
.bl-form.bl-form .form-control::placeholder {
    color: var(--bl-text-muted);
    opacity: 1;
}

/* style.css:1339 / :1343 bunlari koyu temada ham renkle yaziyor (0,2,0);
   (0,3,0) yener. */
.bl-form.bl-form .form-label {
    color: var(--bl-text);
    font-weight: 500;
}

.bl-form.bl-form .form-text {
    color: var(--bl-text-muted);
}

/* Hatali alanin odak halkasi. Bootstrap burada ham
   "rgba(var(--bs-danger-rgb), .25)" yaziyor (0,3,0); (0,5,0) yener. */
.bl-form.bl-form .form-control.is-invalid:focus,
.bl-form.bl-form .form-select.is-invalid:focus {
    border-color: var(--bl-danger);
    box-shadow: 0 0 0 .25rem var(--bl-danger-border);
}

/* Acilir liste oku bir SVG data URI'si ve icindeki renk CSS degiskeni
   okuyamaz - bu yuzden token'a baglanamiyor, temaya gore ikinci bir resim
   yaziliyor. Bootstrap'in koyu tema karsiligi "[data-bs-theme=dark]"
   secicisine bagli ve bu projede ASLA eslesmiyor (data-bs-theme kullanilmiyor),
   o yuzden ok koyu temada koyu gri kaliyordu.
   Secici ".dark-mode" DIYE KISALTILMADI - dosya basindaki uyariya bakin. */
body.dark-mode .bl-form .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/* ============================================================
   12) ORTAK BILESEN: SAYFALAMA

   KIM KULLANIYOR: orders.php, transactions.php   (SAYIM: 2)
     orders.php       pagination justify-content-center            (9 page-link)
     transactions.php pagination justify-content-center flex-wrap (14 page-link)

   NEDEN SADECE DEGISKEN BAGLAMA YETIYOR (tablodan ve formdan farkli):
   Bootstrap sayfalamanin TAMAMINI "--bs-pagination-*" degiskenleriyle
   kuruyor ve style.css'te ".dark-mode .page-link" / ".pagination" diye
   HICBIR kural yok (arandi, 0 sonuc). Yani burada ozgulluk yarisi yok;
   ikili sinif hilesine de gerek yok.

   Bootstrap'in varsayilan aktif rengi HAM "#0d6efd", devre disi rengi ise
   tema ile degismeyen "--bs-secondary-color" - ikisi de koyu temada beyaz
   kutucuk birakiyordu.

   KULLANIM: ul sinifi = "pagination bl-sayfalama"
   ============================================================ */
.bl-sayfalama {
    --bs-pagination-color:               var(--bl-accent);
    --bs-pagination-bg:                  var(--bl-surface);
    --bs-pagination-border-color:        var(--bl-border);

    --bs-pagination-hover-color:         var(--bl-accent-strong);
    --bs-pagination-hover-bg:            var(--bl-accent-soft);
    --bs-pagination-hover-border-color:  var(--bl-border-strong);

    --bs-pagination-focus-color:         var(--bl-accent-strong);
    --bs-pagination-focus-bg:            var(--bl-accent-soft);
    --bs-pagination-focus-box-shadow:    0 0 0 .25rem var(--bl-focus-ring);

    /* Aktif sayfa: "--bl-accent-solid" iki temada da AYNI koyu mavi ve
       "--bl-text-on-accent" (beyaz) ile 6.7:1 veriyor - bkz. 1. bolum. */
    --bs-pagination-active-color:        var(--bl-text-on-accent);
    --bs-pagination-active-bg:           var(--bl-accent-solid);
    --bs-pagination-active-border-color: var(--bl-accent-solid);

    --bs-pagination-disabled-color:        var(--bl-text-muted);
    --bs-pagination-disabled-bg:           var(--bl-surface-2);
    --bs-pagination-disabled-border-color: var(--bl-border);
}