/* ══ HESAPFEST MARKA KATMANI (2026-10-12) ═════════════════════════════════════════════════════════════════
   Tanıtım sayfaları (includes/site-head.php) ve panel (includes/header.php) en son bu dosyayı yükler.
   Renk tokenları: panelde assets/css/style.css (--primary tema başına body'de), tanıtımda site-head.php :root.

   Kurallar (kullanıcı onayı 2026-10-12, "logomuzla aynı renk"):
   1. Renk logodan: lacivert #003058 = metin tonu + birincil eylem + seçili durum (koyu temada okunur marka mavisi
      #3b7cc4). Logo kıvılcımı turuncusu #f26a00 yalnız küçük işaret (odak halkası, dock'ta aktif nokta).
   2. Renk anlam taşır: yeşil kâr / iyi yön, kırmızı zarar / kötü yön, amber dikkat. KPI etiketi, kart başlığı,
      düğme nötr.
   3. Düğme üç kademe: birincil dolu marka rengi, ikincil kart zemini + kontür, üçüncül metin. Pastel dolgu yok.
   4. Kart: kontür, gölge yok, imleçle kabarcık/çevirme/hareket yok.
   5. Etiket büyük harf + harf aralığı değil, cümle düzeni; rakamlar hizalı (tabular).
   6. Süs yok: üst etiket (eyebrow), gradyan yazı, radyal parlama, yeşil tikli liste, ikon kutusu.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

html:root {
    --hf-ink: #003058;
    --hf-ink-hover: #00213d;
    --hf-spark: #f26a00;
    --hf-paper: #ffffff;
    --hf-text: #0c2033;
    --hf-muted: #5e6f7f;
    --hf-line: hsla(193, 4%, 52%, .35);
    --hf-line-soft: hsla(200, 10%, 50%, .18);
    --hf-wash: #f1f4f6;
    --hf-neg: #c0362c;
}
html:root :focus-visible { outline: 2px solid var(--hf-spark) !important; outline-offset: 2px; }

/* ── PANEL ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* Üzerine gelme zemini temanın kendi kartından türer (açıkta açık gri, koyuda bir ton açık lacivert) */
html:root body { --hf-hover: color-mix(in srgb, var(--text-main, #0c2033) 6%, var(--bg-card, #fff)); }

/* GÖLGE DENEMESİ (2026-10-12, kullanıcı: "kartlara butonlara hafiften ufak bir gölge at, bir görmek istiyorum").
   Önceki kural "kart ve dropdown'da gölge yok" idi; beğenilmezse bu iki token'ı `none` yapmak yeter. */
html:root {
    --hf-shadow-card: 0 1px 2px rgba(12, 32, 51, .05), 0 2px 8px rgba(12, 32, 51, .05);
    --hf-shadow-btn: 0 1px 2px rgba(12, 32, 51, .10);
}
html:root body:is(.sidebar-dark, .sidebar-black) {
    --hf-shadow-card: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .22);
    --hf-shadow-btn: 0 1px 2px rgba(0, 0, 0, .35);
}
/* KART ÇİZGİSİ YOK (2026-10-22, kullanıcı: "bazı kartlarda ince gri stroke var bazılarında yok; olan ne varsa kaldır").
   Eskiden açık temada --hf-line ile tek tip çiziliyordu. Kenarlık saydam: genişlik korunur (ölçü/yerleşim aynı), kartı
   zeminden gölge ayırır. Dokunulmayanlar: seçili durumun renkli çerçevesi (.hf-tile.active, .rq-stat.on), renkli bilgi
   notları (.hf-note, .om-note; satır içi rgba zeminli uyarı kartları), kart içindeki alt kutular, form alanları, tablo
   ayraçları. Liste canlıda demo hesabıyla tüm menü sayfaları taranarak çıkarıldı; yeni sayfa kartı yoksa buraya ekle. */
html:root body :is(.card, .rep-card, .hf-panel, .stat-card, .ptab-bar, .table-container, .top-bar, .stab-bar, .hf-isl,
                   .hf-tile:not(.active), .rq-stat:not(.on), .rq-pane, .an-card, .an-kpi, .an-empty, .al-card, .al-empty, .apic,
                   .cl-card, .lm-filter, .lm-hero, .nt-card, .nt-composer, .pagination-card, .perf-chart-card, .plx-card,
                   .pm-card, .pmx-card, .rm-card, .rm-item, .rm-quick, .rm-tabs, .settings-card, .settings-tabs-container,
                   .subtab-bar, .toplu-card, .cargo-bulk-bar):not([style*="background:rgba"]) {
    border-color: transparent !important;
}
html:root body :is(.card, .rep-card, .hf-panel, .stat-card, .ptab-bar, .table-container, .top-bar, .stab-bar, .hf-isl, .hf-tile) {
    box-shadow: var(--hf-shadow-card) !important;
}
html:root body .hf-tile.active { box-shadow: inset 0 0 0 1px var(--hf-ic, var(--primary)), var(--hf-shadow-card) !important; }
/* Sayfalara özel kart sınıfları (kart zemini + çizgi + köşe; taranıp eklendi 2026-10-12, kullanıcı: "Anlık Performans'taki
   Bugünkü net kâr kartında gölge yok"). Yeni sayfa kartı .card / .hf-panel kullanmıyorsa buraya ekle. */
html:root body :is(.perf-chart-card, .al-card, .al-empty, .an-card, .cl-card, .box-preview-card, .breakdown-container,
                   .discount-stat-card, .markup-stat-card, .vat-stat-card, .pricing-stat-card, .pricing-card, .guide-article,
                   .guide-side, .lm-filter, .lm-hero, .nt-composer, .pagination-card, .pm-card, .pmx-card, .rm-card, .rm-tabs,
                   .rq-pane, .settings-card, .settings-tabs-container, .subtab-bar, .toplu-card, .cargo-bulk-bar,
                   .sa-card, .sa-stat) {
    box-shadow: var(--hf-shadow-card) !important;
}

/* ZEBRA SATIRLAR (2026-10-12, kullanıcı: "bütün tablolarda bir beyaz zemin satır, bir hafif gri zemin satır").
   Panelde includes/footer.php tabloyu .hf-zb ile işaretler ve şeridi pakete göre verir: rowspan'li sipariş satırları tek
   grup, gizlenen (filtrelenen) satırlar sayılmaz. Betik yoksa (tanıtım sayfaları) düz çift-satır kuralı çalışır.
   Özgüllük bilerek düşük: satırın kendi zemini (devir satırı, seçili satır, hover) şeridi ezer. */
html:root { --hf-zebra: #f5f7f9; }
html:root body:is(.sidebar-dark, .sidebar-black) { --hf-zebra: color-mix(in srgb, #fff 3.5%, var(--bg-card)); }
:where(table:not(.hf-zb):not([role="presentation"])) > tbody > tr:nth-child(even),
:where(table.hf-zb) > tbody > tr.hf-zb-alt { background-color: var(--hf-zebra); }
/* Mobilde yapışkan ilk sütun kendi kart zeminini taşıyor (style.css, ürün kârlılık raporu); şeritte o da gri olsun */
:where(.table-container > table.hf-zb) > tbody > tr.hf-zb-alt > td:first-child,
:where(table.hf-zb.rep-tbl) > tbody > tr.hf-zb-alt > td:nth-child(-n+2) { background-color: var(--hf-zebra); }
/* Tanıtım sayfalarındaki kartlar (kart kontürü --hf-card-line kullananlar + Tailwind border-border kartları) */
html:root :is(.hbl-card, .hbl-feat, .hff-card, .hff-stat, .hff-bar, .hp-shot, .hy-disc, .hz-price, .hz-tour, .hz-win,
              .hpr-card, .hpr-box, .hpr-pk, .hpr-wide, .hpr-faq, .hpr-incl, .hrf-card, .hrf-stat, .hrf-what, .faq-item,
              .border-border[class*="rounded-"], .nav-pill) {
    box-shadow: var(--hf-shadow-card) !important;
}
html:root :is(.leafbutton, .mm-btn) { box-shadow: var(--hf-shadow-btn); }

/* KPI kartı: etiket nötr ve cümle düzeninde; RAKAM kartın kendi renginde (2026-10-12, kullanıcı: "küçük kartlardaki
   sayıları eskisi gibi uygun renklerle renklendir" - --c-accent / satır içi value_color); kabarcık + çevirme yok.
   Arka yüz açıklaması başlıktaki "i" düğmesine tıklayınca balonda açılır (includes/footer.php). */
html:root .rep-card { cursor: default; }
html:root .rep-card::before,
html:root .rep-card::after { display: none !important; }
html:root .rep-card-back { display: none !important; }
html:root .rep-card:hover .rep-card-front { opacity: 1 !important; }
html:root .rep-card-label {
    color: var(--text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: .9rem;
    font-weight: 600;
}
html:root .rep-card-value { font-weight: 600; letter-spacing: -.01em; }
html:root .rep-card-value .unit,
html:root .rep-card-value .rcv-decimals { color: var(--text-muted); font-weight: 500; }
/* Koyu/siyah temada lacivert vurgulu kartın rakamı koyu zeminde kaybolmasın */
html:root body:is(.sidebar-dark, .sidebar-black) .rep-card:is([style*="--c-accent:#003058"], [style*="--c-accent: #003058"]) { --c-accent: #6fa3dc !important; }

/* "i" düğmesi + açıklama balonu */
html:root .hf-info-btn {
    width: 18px; height: 18px; flex: 0 0 18px; padding: 0; margin-left: 8px; border-radius: 50%;
    border: 1px solid var(--hf-line); background: transparent; color: var(--text-muted);
    font: 700 11px/1 var(--font-body, sans-serif); cursor: pointer; position: relative; z-index: 4;
    display: inline-flex; align-items: center; justify-content: center;
}
html:root .hf-info-btn:hover,
html:root .hf-info-btn[aria-expanded="true"] { border-color: var(--hf-teal-ink, #0b7f8c); color: var(--hf-teal-ink, #0b7f8c); background: color-mix(in srgb, var(--hf-teal, #1bc2d2) 12%, transparent); }
#hfInfoPop {
    position: fixed; z-index: 10050; max-width: 290px; padding: 10px 13px; border-radius: 5px;
    background: #0c2033; color: #f7f8f9; font: 400 13px/1.55 var(--font-body, sans-serif);
    box-shadow: 0 6px 20px rgba(12, 32, 51, .22); pointer-events: auto;
}
#hfInfoPop::before {
    content: ""; position: absolute; top: -5px; left: var(--hf-pop-arrow, 50%); width: 10px; height: 10px; margin-left: -5px;
    background: #0c2033; transform: rotate(45deg);
}
#hfInfoPop.is-up::before { top: auto; bottom: -5px; }
#hfInfoPop.is-wide { max-width: 380px; }
#hfInfoPop b, #hfInfoPop strong { color: #fff; font-weight: 600; }
#hfInfoPop a { color: #7fe3ee; text-decoration: underline; text-underline-offset: 2px; }
html:root body:is(.sidebar-dark, .sidebar-black) #hfInfoPop :is(b, strong) { color: #0c2033; }
html:root body:is(.sidebar-dark, .sidebar-black) #hfInfoPop a { color: #0b7f8c; }

/* Sabit açıklama notu → küçük tetikleyici (ikon + başlık); notun kendisi gizli, içeriği balonda (includes/footer.php) */
html:root .hf-tip-src { display: none !important; }
html:root .hf-tip-trigger {
    display: inline-flex; align-items: center; gap: 6px; margin: .5rem 1.25rem .25rem 0; padding: 2px 0;
    border: 0; background: none; cursor: help; font: 500 13px/1.3 var(--font-body, sans-serif); color: var(--text-muted);
    text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px;
}
html:root .hf-tip-trigger :is(i, iconify-icon) { font-size: 15px; color: var(--hf-teal-ink, #0b7f8c); text-decoration: none; }
html:root .hf-tip-trigger:hover,
html:root .hf-tip-trigger[aria-expanded="true"] { color: var(--hf-teal-ink, #0b7f8c); }
/* Dönüşüm footer.php'de sayfa sonunda yapılıyor; soğuk cache'te not bir an tam metin görünüp sonra tetikleyiciye
   dönüşüyor, alttaki içerik yukarı kayıyordu (2026-10-22). O ana kadar not tetikleyicinin kılığında yer tutar:
   aynı kutu, gövde gizli, başlık ::after ile. !important: notların kendi kartı (.om-note vb.) ve satır içi margin'leri. */
html:root [data-tip-label]:not(.hf-tip-src) {
    display: inline-flex !important; align-items: center; gap: 6px; margin: .5rem 1.25rem .25rem 0 !important; padding: 2px 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important;
    font: 500 13px/1.3 var(--font-body, sans-serif); color: var(--text-muted);
}
html:root [data-tip-label]:not(.hf-tip-src) > :not(i):not(iconify-icon) { display: none !important; }
html:root [data-tip-label]:not(.hf-tip-src) > :is(i, iconify-icon) { font-size: 15px; color: var(--hf-teal-ink, #0b7f8c); margin: 0 !important; }
html:root [data-tip-label]:not(.hf-tip-src)::after {
    content: attr(data-tip-label);
    text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px;
}

/* İKON DİLİ (2026-10-12, kullanıcı: "kutu içindeki bu tarz ikonlar AI slop; ikon stilimizi güncelle, kendi yorumunu kat"):
   Hesapfest ikonu KUTUSUZ durur - renkli kare/daire zemin, kontür, gölge yok. Çizgi ikon (Tabler outline) metnin yanında,
   metin boyunda; rengi anlamından gelir: bölüm/bilgi = logo turkuazı, uyarı = amber, hata = kırmızı, olumlu = yeşil
   (kendi anlam rengi olan ikon onu korur). Büyük boş durum/kilit ikonlarında aynı kural, yalnız boyut büyür. */
html:root :is(.hf-isl-ic, .al-ico, .an-ic, .an-kpi-ic, .rm-kpi-ic, .rq-stat-ic, .ml-ic, .mm-ico, .feat-ic, .feature-icon,
              .hz-grp-ico, .hrf-point-ico, .hz-mail-ic, .post-ico) {
    background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    width: auto !important; height: auto !important; min-width: 0 !important; flex: 0 0 auto !important; padding: 0 !important;
}
html:root :is(.hf-isl-ic, .ml-ic, .mm-ico, .feat-ic, .feature-icon, .hz-grp-ico, .hrf-point-ico, .hz-mail-ic, .post-ico) { color: var(--hf-teal-ink, #0b7f8c) !important; }
html:root .hf-isl-ic { font-size: 1.35rem !important; }
html:root .ml-ic { font-size: 2.75rem !important; }
html:root .mm-link.is-on .mm-ico { color: var(--hf-orange-ink, #c25400) !important; }
html:root body:is(.sidebar-dark, .sidebar-black) #hfInfoPop,
html:root body:is(.sidebar-dark, .sidebar-black) #hfInfoPop::before { background: #f7f8f9; color: #0c2033; }

/* Panel başlığındaki renkli ikon kutusu yok (Dashboard'da satır içi yazılmış eşi dahil) */
html:root .hf-panel-head .hf-ic { display: none !important; }
/* Küçük durum kutucukları (Ürünler vb. .hf-tile): ikon kutusuz, kutucuğun kendi renginde (ikon dili) */
html:root .hf-tile .hf-ic {
    display: inline-flex !important; background: none !important; width: auto !important; height: auto !important;
    flex: 0 0 auto !important; border-radius: 0 !important; font-size: 1.55rem !important; color: var(--hf-ic, var(--hf-teal-ink)) !important;
}
html:root .dash-card-wrap span[style*="width:34px"][style*="height:34px"] { display: none !important; }
html:root .hf-panel-name { font-size: .98rem; }

/* Tablo başlıkları ve satır içi etiketler: BÜYÜK HARF + harf aralığı yerine cümle düzeni */
html:root th { text-transform: none !important; letter-spacing: 0 !important; }
html:root .hf-isl-lbl { text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem; }
html:root :is([style*="text-transform:uppercase"], [style*="text-transform: uppercase"]) { text-transform: none !important; letter-spacing: 0 !important; }

/* DÜĞMELER (2026-10-12, kullanıcı: "butonlara kendi özel renklerini ver"): her düğme kendi rengini taşır.
     · birincil (.btn-primary)           → dolu lacivert
     · kendi rengi olan (satır içi --btn-color: yeşil = dışa aktar/ekle, kırmızı = sil/iptal, amber = dikkat, vb.)
                                         → o rengin sakin tonu: %10 zemin, %34 kontür, koyulaştırılmış yazı; üzerine gelince %18
     · senkron / yenile (bulut, yenile ikonlu) → logo turkuazı, aynı ton düzeni
     · rengi olmayan                     → nötr: kart zemini + kontür
   Kabarcık animasyonu yok; renk geçişi anında. */
html:root .btn::before,
html:root .btn::after { display: none !important; }
/* Ton düzeni: --bf = dolgu/kontür rengi (LOGONUN kendi tonu), --b = yazı tonu (okunur koyu eşi) →
   %11 zemin, %55 kontür, koyu yazı; üzerine gelince %20.
     varsayılan (kendi rengi olmayan)  = logo turkuazı #1bc2d2 (yazı #0b7f8c)
     temizle / sıfırla / kapat          = logo turuncusu #f26a00 (yazı #c25400)
     satır içi --btn-color              = o renk (yeşil Excel/ekle, kırmızı sil, amber dikkat)
   DOLU düğmeler (kullanıcı 2026-10-12: "logodaki turuncu ve turkuazı hiçbir butonda kullanmamışsın; bazı yerlerde lacivert,
   turkuaz ve turuncu"): birincil = lacivert / senkron-yenile-güncelle = logo turkuazı / şimşek (hızlı işlem) = logo
   turuncusu. Turkuaz ve turuncu dolguda yazı lacivert (logonun kendi renk eşleşmesi; beyaz yazı AA'yı geçmez). */
html:root .btn {
    --b: var(--hf-teal-ink, #0b7f8c);
    --bf: var(--hf-teal, #1bc2d2);
    background: color-mix(in srgb, var(--bf) 11%, var(--bg-card)) !important;
    color: color-mix(in srgb, var(--b) 88%, var(--text-main)) !important;
    border: 1px solid color-mix(in srgb, var(--bf) 55%, transparent) !important;
    box-shadow: var(--hf-shadow-btn) !important;
    transition: none !important;
}
html:root .btn:hover { background: color-mix(in srgb, var(--bf) 20%, var(--bg-card)) !important; }
html:root .btn:active { transform: none !important; filter: none !important; }
html:root .btn :is(i, iconify-icon) { color: inherit !important; }
html:root .btn:has(> .ti-rotate, > .ti-rotate-2, > .ti-x, > .ti-eraser, > .ti-filter-off, > iconify-icon[icon*="rotate"], > iconify-icon[icon*="eraser"], > iconify-icon[icon*="filter-off"]) {
    --b: var(--hf-orange-ink, #c25400); --bf: var(--hf-orange, #f26a00);
}
html:root .btn.btn[style*="--btn-color"] { --b: var(--btn-color); --bf: var(--btn-color); }   /* kendi rengi kazanır (×'li kırmızı İptal) */
html:root .btn.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html:root .btn.btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
/* Tarih aralığı bir eylem değil, durum → turkuaz ton (birincil dolgu değil) */
html:root .btn.btn-primary:has(> .ti-calendar) {
    background: color-mix(in srgb, var(--bf) 11%, var(--bg-card)) !important;
    border-color: color-mix(in srgb, var(--bf) 55%, transparent) !important;
    color: color-mix(in srgb, var(--b) 88%, var(--text-main)) !important;
}
html:root .btn.btn-primary:has(> .ti-calendar):hover { background: color-mix(in srgb, var(--bf) 20%, var(--bg-card)) !important; }
/* VURGULU LOGO TURKUAZI / TURUNCUSU (kullanıcı 2026-10-12: "tam koyu turkuaz ve turuncu olmasın" → dolu değil):
   açık zemin tonu (%24) + logonun tam renginde kontür + koyu yazı; üzerine gelince %34. Varsayılan tondan bir kademe belirgin.
   Turkuaz = senkron / yenile / verileri güncelle (birincil olanlar dahil); turuncu = şimşek / hızlı işlem. */
html:root .btn.btn:has(> .ti-refresh, > .ti-reload, > iconify-icon[icon*="refresh"], > iconify-icon[icon*="cloud"]) {
    --b: var(--hf-teal-ink, #0b7f8c); --bf: var(--hf-teal, #1bc2d2);
}
html:root .btn.btn:has(> .ti-bolt, > iconify-icon[icon*="bolt"]) { --b: var(--hf-orange-ink, #c25400); --bf: var(--hf-orange, #f26a00); }
html:root .btn:is(:has(> .ti-refresh), :has(> .ti-reload), :has(> iconify-icon[icon*="refresh"]), :has(> iconify-icon[icon*="cloud"]), :has(> .ti-bolt), :has(> iconify-icon[icon*="bolt"])) {
    background: color-mix(in srgb, var(--bf) 24%, var(--bg-card)) !important;
    border-color: var(--bf) !important;
    color: color-mix(in srgb, var(--b) 92%, var(--text-main)) !important;
}
html:root .btn:is(:has(> .ti-refresh), :has(> .ti-reload), :has(> iconify-icon[icon*="refresh"]), :has(> iconify-icon[icon*="cloud"]), :has(> .ti-bolt), :has(> iconify-icon[icon*="bolt"])):hover {
    background: color-mix(in srgb, var(--bf) 34%, var(--bg-card)) !important;
}

/* Açma-kapama anahtarı: kap köşeli olduğu için topuz da kare (kullanıcı 2026-10-12) */
html:root .ff-slider::before,
html:root .switch .slider:before,
html:root .switch .slider::before { border-radius: 3px !important; }
/* Çıkış ve üst çubuk düğmeleri kapalıyken de köşeli; açılınca biçim değişmez (yalnız genişler) */
html:root :is(.logout-Btn, .top-bar-btn),
html:root :is(.logout-Btn, .top-bar-btn):hover { border-radius: 5px !important; transition-property: max-width, opacity, padding, background !important; }

/* Platform sekmeleri: seçili = dolu marka rengi + altında turuncu kıvılcım çizgisi; üzerine gelince nötr zemin */
html:root .ptab-item { transition: none !important; }
html:root .ptab-item.active { background: var(--primary) !important; box-shadow: none !important; }
html:root .ptab-item.active::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--hf-spark); }
html:root .ptab-item:hover:not(.active) { background: var(--hf-hover) !important; }

/* Dock: seçili kutu marka rengi, altındaki nokta kıvılcım turuncusu */
html:root .dock-item.active .dock-trigger { background: var(--primary) !important; border-color: var(--primary) !important; box-shadow: none !important; }
/* Dock düğmeleri köşeli (kullanıcı 2026-10-12; eskiden %30) */
html:root .dock-trigger { border-radius: 5px !important; }
html:root .dock-item.active::after { background: var(--hf-spark) !important; width: 5px !important; height: 5px !important; }
html:root .dock-item:hover .dock-trigger .dock-icon { color: var(--primary) !important; }
/* Seçili kutunun üzerine gelince ikon lacivert zeminde kaybolmasın (kullanıcı 2026-10-12) */
html:root .dock-item.active:hover .dock-trigger .dock-icon,
html:root .dock-item.active .dock-trigger:hover .dock-icon { color: #fff !important; }
/* Sol menüde seçili satırın solunda turuncu kıvılcım çizgisi */
html:root .sidebar .nav-item.active { box-shadow: inset 3px 0 0 var(--hf-spark); }

/* TURKUAZ (logo): bağlantı, bilgi, form odağı, açık/kapalı anahtar, onay kutusu */
html:root :is(.hf-link, .hf-panel-foot a) { color: var(--hf-teal-ink, #0b7f8c) !important; }
html:root { accent-color: var(--hf-teal-ink, #0b7f8c); }
html:root .ff-switch input:checked + .ff-slider { background: var(--hf-teal-ink, #0b7f8c) !important; }
html:root body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus {
    border-color: var(--hf-teal-ink, #0b7f8c) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-teal, #1bc2d2) 22%, transparent) !important;
    outline: none !important;
}
html:root .al-info .al-ico { background: color-mix(in srgb, var(--hf-teal, #1bc2d2) 16%, transparent) !important; color: var(--hf-teal-ink, #0b7f8c) !important; }

/* Çıkış düğmesi kırmızı daire kalır (kullanıcı 2026-10-12: "çıkış yap butonunu tekrardan kırmızı yap") - style.css .logout-Btn */

/* Rakamlar hizalı */
html:root :is(td, .rep-card-value, .hf-rank, .apexcharts-yaxis-label, .apexcharts-xaxis-label) { font-variant-numeric: tabular-nums; }

/* Koyu/siyah tema güvenlik ağı: tırnak içinde (PHP/JS dizgesi) sabit lacivert yazılmış metin rengi koyu zeminde
   kaybolmasın. Yalnız panelin koyu temaları (sidebar-dark / sidebar-black); tanıtım sayfaları hep açık. */
html:root body:is(.sidebar-dark, .sidebar-black) :is([style*="color:#003058"], [style*="color: #003058"]) { color: #8fb3db !important; }

/* ── TANITIM SAYFALARI ─────────────────────────────────────────────────────────────────────────────────── */
html:root :is(.hx-kicker, .hff-kicker, .hpr-kicker) { display: none !important; }
/* İkon kutulu kart başlıkları (Özellikler, Fiyatlandırma) → kutusuz */
html:root :is(.hff-group-ico, .hff-card-ico, .hpr-pk-ico, .hpr-guard-ico) { display: none !important; }
/* Paket özellik listesi: yeşil daire tik yerine lacivert nokta */
html:root .hpr-feats iconify-icon { display: none !important; }
html:root .hpr-feats li::before { content: ""; flex: 0 0 5px; height: 5px; border-radius: 50%; background: var(--hf-teal); margin: .62em 4px 0 2px; }
/* Gradyan yazı ve radyal parlamalı koyu hero yok */
html:root .accent-grad { background: none !important; -webkit-text-fill-color: currentColor; color: inherit !important; }
html:root .page-hero-grad { background: var(--hf-ink) !important; }
/* Menü kapsülü: gölge yerine kontür */
html:root .nav-pill,
html:root .navbar.scrolled .nav-pill { border: 1px solid var(--hf-line); }
/* Kayıt Ol = birincil, Giriş Yap = ikincil */
/* Menüdeki "Kayıt Ol": logo turuncusunun açık tonu + tam renk kontür (dolu değil; kullanıcı "tam koyu olmasın") */
html:root a[href="register.php"].bg-lightblue,
html:root .mm-btn.mm-btn-primary {
    background: color-mix(in srgb, var(--hf-orange, #f26a00) 20%, #fff) !important; border: 1px solid var(--hf-orange, #f26a00) !important;
    color: var(--hf-orange-ink, #c25400) !important;
}
html:root a[href="register.php"].bg-lightblue:hover,
html:root .mm-btn.mm-btn-primary:hover { background: color-mix(in srgb, var(--hf-orange, #f26a00) 30%, #fff) !important; }
html:root a[href="login.php"].border-lightblue { border-color: var(--hf-line) !important; color: var(--hf-text) !important; }
html:root a[href="login.php"].border-lightblue:hover { background: var(--hf-wash) !important; }
html:root .hover\:bg-midblue:hover { background-color: var(--hf-ink-hover) !important; }
/* Hero altındaki tikli liste → düz, sakin satır */
html:root .hx-hero-checks iconify-icon { display: none !important; }
html:root .hx-hero-checks li { color: var(--hf-muted) !important; }
/* Bölüm içi yeşil daire tikli listeler → küçük lacivert nokta */
html:root .hz-checks li::before {
    content: "" !important; width: 5px !important; height: 5px !important; top: .6em !important; left: 6px !important;
    background: var(--hf-teal) !important; border-radius: 50%;
}
/* Sahte pencere çubuğundaki kırmızı-sarı-yeşil noktalar yok (başlık metni kalır) */
html:root .hz-win-bar > i { display: none !important; }
/* Panel turundaki numara işaretleri: parlama halkası yok */
html:root .hp-num { box-shadow: 0 0 0 3px #fff !important; }
/* Fiyat kartı: gradyan yerine düz kâğıt, tik yerine nokta */
html:root .hz-price { background: var(--hf-paper) !important; }
html:root .hz-price ul { border-top-style: solid !important; border-top-color: var(--hf-line-soft) !important; }
html:root .hz-price li::before { content: "" !important; width: 5px; height: 5px; border-radius: 50%; background: var(--hf-teal); top: .55em !important; left: 6px !important; }
/* Orbit merkezi ve logo yongaları: parlama/gölge yerine kontür */
html:root :is(.mp-hub, .mp-chip) { box-shadow: none !important; border: 1px solid var(--hf-line); }
/* Fiş: kâğıt gölgesi yerine kontür */
html:root .hy-receipt-wrap { filter: none !important; }
html:root .hy-receipt-paper { border: 1px solid var(--hf-line); border-bottom: 0; }
/* Alt bilgi sosyal ikonları: zıplama yok */
html:root :is(.footer-icons, .footer-fb-icons) { box-shadow: none !important; transition: none !important; }
html:root :is(.footer-icons, .footer-fb-icons):hover { transform: none !important; background-color: var(--hf-orange) !important; }
/* Form odağı */
html:root .fld:focus { border-color: var(--hf-ink) !important; box-shadow: 0 0 0 3px rgba(0, 48, 88, .12) !important; }

/* ── LOGONUN TURUNCUSU VE TURKUAZI - TANITIM (2026-10-12, kullanıcı: "turkuvaz ve turuncu renklerini güzel yerlerde kullan") ──
   Turuncu = kıvılcım: tek bir öne çıkan vurgu (hero'daki "net kâr.", öne çıkan paket rozeti, alt bilgi ikon üzerine gelme).
   Turkuaz = canlı / dene: Demo düğmeleri ve bağlantısı, liste noktaları, logo yörüngesi, metin içi bağlantılar.
   Turuncu metin büyük boyda (#e05d00, zeminde 3,4:1 - büyük metin AA); küçük metin turkuazın koyu tonuyla (#0b7f8c, 4,7:1). */
html:root .hf-spark-text { color: #e05d00; }
html:root a[href="demo.php"]:is(.leafbutton, .hx-btn.ghost) { color: var(--hf-teal-ink) !important; border-color: color-mix(in srgb, var(--hf-teal) 55%, transparent) !important; }
html:root a[href="demo.php"]:is(.leafbutton, .hx-btn.ghost):hover { background: color-mix(in srgb, var(--hf-teal) 10%, #fff) !important; }
html:root .nav-pill a[href="demo.php"] { color: var(--hf-teal-ink) !important; }
html:root .hpr-pk-tag { background: var(--hf-orange) !important; color: #0c2033 !important; border-color: var(--hf-orange) !important; }
html:root .mp-ring { border-color: color-mix(in srgb, var(--hf-teal) 40%, transparent) !important; }
html:root .mp-ring.r2 { border-color: color-mix(in srgb, var(--hf-teal) 60%, transparent) !important; }
html:root :is(.legal, .prose, .hbl-post-body, article) a:not([class]) { color: var(--hf-teal-ink); }