/* ============================================================
   TEMA1 · LIGHT FINTECH  (v6)
   Online fatura ödeme platformu — aydınlık, temiz, modern, güven veren.
   Token sistemi + bileşen override katmanı.
   Bu dosya style.css / bootstrap / custom.css'ten SONRA kazanır () !important.
   ============================================================ */

:root {
    /* Zemin & yüzeyler */
    --bg:        #F3F6FC;   /* mavi-tonlu yumuşak beyaz zemin */
    --bg-2:      #EAF0FA;
    --surface:   #FFFFFF;   /* kart yüzeyi */
    --surface-2: #F7FAFF;
    --surface-3: #EEF3FC;
    --glass:     #FFFFFF;
    --glass-2:   #F7FAFF;
    --border:    #E6ECF6;
    --border-2:  #D7E0EF;

    /* Marka renkleri — kurumsal güven mavisi + taze zümrüt (başarı/aksiyon) */
    --primary:    #1E5AF0;   /* imza mavi (raster ikonlarla uyumlu) */
    --primary-dim:#1546C6;
    --primary-lt: #EAF1FF;   /* açık mavi zemin */
    --secondary:  #0FB981;   /* zümrüt — ödeme/başarı vurgusu */
    --secondary-b: #34D399;
    --secondary-lt:#E7FBF3;

    /* Metin */
    --text:      #101A2C;   /* koyu slate — okunaklı */
    --muted:     #5A6B84;
    --faint:     #93A0B5;

    /* Gölge & parıltı */
    --glow-blue: 0 0 0 1px rgba(30,90,240,.20), 0 16px 40px -14px rgba(30,90,240,.35);
    --glow-mint: 0 0 0 1px rgba(15,185,129,.22), 0 16px 40px -14px rgba(15,185,129,.35);
    --shadow-sm: 0 2px 10px -4px rgba(16,26,44,.12);
    /* Ana gölge Theme Engine (shadow_level → --card-shadow) ile ayarlanabilir. */
    --shadow:    var(--card-shadow, 0 18px 44px -22px rgba(23,49,110,.30));
    --shadow-lg: 0 30px 70px -28px rgba(23,49,110,.38);

    /* Tipografi Theme Engine (font_family → --font-family) ile ayarlanabilir. */
    --display: var(--font-family, "Space Grotesk", "Inter", sans-serif);
    --mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Base ---------- */
html, body {
    background: var(--bg) !important;
    color: var(--text) !important;
}
body {
    /* çok hafif, dağınık olmayan renkli ışıltı — mavi sol-üst, mint sağ-üst */
    background-image:
        radial-gradient(1100px 620px at 8% -10%, rgba(30,90,240,.08), transparent 60%),
        radial-gradient(1000px 640px at 106% 4%, rgba(15,185,129,.08), transparent 58%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) !important;
    background-attachment: fixed !important;
}
main, section, .bg-transparent { background: transparent !important; }

::selection { background: rgba(30,90,240,.18); color: var(--text); }

/* İnce, temaya uygun scrollbar */
* { scrollbar-color: var(--primary) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), var(--secondary)); border-radius: var(--radius, 20px); border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Tipografi ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
    font-family: var(--display) !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
}
p, span, li, label, td, th { color: var(--text); }
.text-muted, small, .small { color: var(--muted) !important; }

/* Rakamlar / tutarlar — mono (imza öğe) */
.mono, .tutar, .amount, .price, .fiyat, .fs-mono { font-family: var(--mono) !important; }

/* Hero başlığı: slate → mavi → mint gradient text (açık zeminde okunur) */
.faturaodeme h1,
main section h1:first-of-type {
    font-size: clamp(1.7rem, 2.6vw + 1rem, 3rem) !important;
    line-height: 1.12 !important;
    background: linear-gradient(92deg, #0E1B34 0%, var(--primary) 52%, var(--secondary) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
    text-transform: none !important;
}
.faturaodeme h4 { color: var(--muted) !important; font-family: var(--display) !important; font-weight: 500 !important; }

/* Link renkleri */
a { color: var(--primary); transition: color .2s ease; }
a:hover { color: var(--primary-dim) !important; }

/* ---------- Header (Güven Mavisi — korunan kimlik) ---------- */
:root {
    --hdr-1: #0A3FA8;   /* canlı kurumsal mavi */
    --hdr-2: #1660E0;   /* daha parlak mavi */
    --hdr-amber: #FFB020;
    --hdr-amber-2: #FF8A00;
}
.sticky-header,
.sticky-header.active,
.pageHeader {
    background:
        radial-gradient(140% 220% at 8% -80%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
        linear-gradient(108deg, var(--header-bg, var(--headerC1, var(--primary, #0A388F))) 0%, var(--header-bg2, var(--headerC2, #164FCB)) 58%, var(--header-bg2, var(--headerC2, var(--primary, #1E5AF0))) 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: var(--card-shadow, 0 12px 34px -18px rgba(8,30,86,.5)) !important;
    position: relative;
}
/* altında ince marka çizgisi (mavi→mint) */
.sticky-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(52,211,153,.55) 22%, rgba(47,123,255,.75) 50%, rgba(52,211,153,.55) 78%, transparent 100%);
    opacity: .8; pointer-events: none;
}
.sticky-header { padding-top: 0 !important; padding-bottom: 0 !important; }
.sticky-header .py-15px { padding-top: 0 !important; padding-bottom: 0 !important; }
.sticky-header.active {
    box-shadow: var(--card-shadow, 0 16px 36px -18px rgba(8,30,86,.6)) !important;
}

.hdr-container { max-width: 1260px !important; }
.hdr-inner { min-height: 70px; }
.hdr-logo-wrap, .hdr-actions-wrap { flex: 0 0 auto; }
@media (min-width: 1024px) {
    .hdr-nav-wrap { display: flex !important; flex: 1 1 auto; justify-content: center; align-items: center !important; }
}

header .site-logo img {
    height: 34px; width: auto; margin-top: 0 !important;
    transition: transform .25s ease, opacity .2s ease, filter .25s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
header .site-logo:hover img { transform: translateY(-1px) scale(1.02); opacity: .96; }

header .nav-list a, header .text-whiteColor { color: #fff !important; }

/* custom.css'teki .nav-list{height:120px} header uls'lerini şişiriyor → içerik yüksekliğine indir */
header .hdr-nav-pill, header .rightmenu { height: auto !important; }

/* Menü — kalıcı arka kutu YOK; parlak beyaz linkler doğrudan mavi header üzerinde
   (yüksek kontrast, okunaklı). Vurgu sadece hover/aktifte. */
.hdr-nav-pill {
    display: inline-flex !important;
    align-self: center;
    align-items: center !important;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 999px;
    padding: 0 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
}
header .nav-list .hdr-link,
header .nav-list .hdr-link span {
    color: #FFFFFF !important;
}
header .nav-list .hdr-link {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--radius, 12px); line-height: 1;
    font-size: 14.5px; font-weight: 600 !important; letter-spacing: .005em;
    white-space: nowrap;
    position: relative;
    text-shadow: 0 1px 2px rgba(4,18,54,.28);
    transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
header .nav-list .hdr-link .hdr-link-ic { font-size: 17px; color: rgba(255,255,255,.82); transition: color .2s ease, transform .2s ease; }
header .nav-list .hdr-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.15);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    transform: translateY(-1px);
}
header .nav-list .hdr-link:hover .hdr-link-ic { color: #FFD36A; transform: translateY(-1px) scale(1.05); }
/* aktif sayfa (JS ile .is-active eklenir) — beyaz pill, koyu okunaklı yazı */
header .nav-list .hdr-link.is-active,
header .nav-list .hdr-link.is-active span {
    color: #0A2A6B !important;
}
header .nav-list .hdr-link.is-active {
    background: #FFFFFF;
    text-shadow: none;
    box-shadow: var(--card-shadow, 0 8px 18px -8px rgba(4,18,54,.45));
}
header .nav-list .hdr-link.is-active .hdr-link-ic { color: #1E5AF0; }

/* Sağ aksiyonlar — dikeyde ortalı, Bootstrap ul alt-boşluğu sıfır */
.hdr-actions-wrap { position: relative; display: flex !important; align-items: center !important; }
header .rightmenu { gap: 8px; align-items: center !important; margin: 0 !important; padding-left: 0 !important; }
/* header'daki tüm ul'lerin varsayılan Bootstrap alt/üst boşluğunu kaldır (pill'in yatay ortalaması korunur) */
header .nav-list { margin-top: 0 !important; margin-bottom: 0 !important; }
/* mobil hamburger — custom.css'teki margin-top:10px'i kaldır (diğer ikonlarla tam hizala).
   display'e DOKUNMA ki lg:hidden masaüstünde onu gizlemeye devam etsin. */
.hamburgermenu { margin: 0 !important; }
.hamburgermenu .open-mobile-menu { margin: 0 !important; }
/* ayraç: menü ile sağ aksiyonlar arası ince dikey çizgi */
@media (min-width: 1024px) {
    .hdr-actions-wrap::before {
        content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
        width: 1px; height: 26px; background: rgba(255,255,255,.16);
    }
}

.icon-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius, 10px);
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    color: #fff !important; font-size: 18px; position: relative;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.icon-btn:hover {
    color: #fff !important; background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.34); transform: translateY(-1px);
}
.icon-btn iconify-icon { display: block; line-height: 0; }
.icon-btn img { display: none !important; }

.basketicon { position: relative; }
.basketicon .badge, .hdr-badge {
    position: absolute !important; top: -5px !important; right: -5px !important;
    min-width: 18px; height: 18px; padding: 0 5px !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important;
    line-height: 1 !important; border-radius: 999px !important;
    background: linear-gradient(135deg, var(--hdr-amber), var(--hdr-amber-2)) !important;
    color: #3a2400 !important; border: 2px solid #fff !important;
    box-shadow: var(--card-shadow, 0 3px 8px -2px rgba(255,138,0,.55)) !important;
}

.hdr-cta {
    display: inline-flex !important; align-items: center; gap: 7px;
    height: 40px; padding: 0 18px; border-radius: var(--radius, 11px);
    font-weight: 800 !important; font-size: 14px; letter-spacing: .015em;
    color: #3a2400 !important; white-space: nowrap; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #FFCB4A 0%, var(--hdr-amber) 45%, var(--hdr-amber-2) 100%);
    box-shadow: var(--card-shadow, 0 8px 20px -6px rgba(255,138,0,.55), inset 0 1px 0 rgba(255,255,255,.45));
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hdr-cta iconify-icon { font-size: 17px; position: relative; z-index: 1; }
.hdr-cta span { position: relative; z-index: 1; }
.hdr-cta::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
    transform: skewX(-18deg);
    animation: ctaSheen 3.2s ease-in-out infinite;
}
@keyframes ctaSheen {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}
.hdr-cta:hover {
    color: #3a2400 !important; transform: translateY(-1px); filter: brightness(1.04);
    box-shadow: 0 12px 26px -6px rgba(255,138,0,.7), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- Hero arama kutusu ---------- */
.faturaodeme input.kurumarama {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-2) !important;
    border-radius: var(--radius, 16px) !important;
    box-shadow: var(--shadow-sm) !important;
    /* açık zemine uygun mavi arama ikonu (inline SVG) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231E5AF0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 28px 50% !important;
    background-size: 24px 24px !important;
}
.faturaodeme input.kurumarama::placeholder { color: var(--faint) !important; }
.faturaodeme input.kurumarama:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(30,90,240,.14), var(--shadow-sm) !important;
}

/* ---------- Sektör kartları (asıl görsel) ---------- */
.sektorler { gap: 20px !important; }
.sektor {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius, 20px) !important;
    color: var(--text) !important;
    box-shadow: var(--card-shadow, var(--shadow-sm)) !important;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease !important;
    position: relative; overflow: hidden;
}
/* İkon rozeti — yumuşak mavi kare; modern çizgi ikonlar currentColor ile mavi */
.sektor > svg {
    color: var(--primary) !important;
    width: 32px !important; height: 32px !important;
    box-sizing: content-box !important;
    padding: 15px !important;
    border-radius: var(--radius, 18px) !important;
    background: linear-gradient(150deg, #EAF1FF 0%, #F3F7FF 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(30,90,240,.10) !important;
    transition: background .3s ease, color .3s ease, transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important;
    overflow: visible !important;
}
.sektor > svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.sektor > svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.sektor span { color: var(--text) !important; font-family: var(--display) !important; letter-spacing: .01em; }
.sektor::before {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: radial-gradient(120% 130% at 50% -25%, rgba(30,90,240,.12), transparent 62%);
    opacity:0; transition:opacity .3s ease;
}
.sektor:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(30,90,240,.4) !important;
    box-shadow: var(--glow-blue) !important;
    color: var(--text) !important;
}
.sektor:hover::before { opacity:1; }
.sektor:hover > svg {
    color: #ffffff !important;
    background: linear-gradient(150deg, #2F7BFF 0%, var(--primary) 55%, var(--primary-dim) 100%) !important;
    box-shadow: 0 16px 28px -10px rgba(30,90,240,.6), inset 0 0 0 1px rgba(255,255,255,.22) !important;
    transform: translateY(-4px) scale(1.08) rotate(-3deg) !important;
}

/* Alt bayi kartı override */
.sektor.sektor-bayi { background: var(--primary-lt) !important; }
.sektor.sektor-bayi:hover { background: var(--primary-lt) !important; }
.sektor.sektor-bayi .sektor-bayi-ad { color: var(--primary-dim) !important; }

/* ---------- Kurum kartları (liste sayfası) ---------- */
.kurum {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius, 14px) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.kurum:hover {
    background: var(--surface) !important;
    border-color: rgba(30,90,240,.35) !important;
    box-shadow: var(--glow-blue) !important;
    color: var(--text) !important;
    transform: translateY(-3px);
}
.kurum span { color: var(--text) !important; }

/* ---------- 4 adım (step / circle) ---------- */
/* Dolu mavi gradient disk — ikonlar beyaza zorlanır (kaynak renk ne olursa olsun görünür) */
.circle {
    background: linear-gradient(150deg, #2F7BFF 0%, var(--primary) 45%, var(--primary-dim) 100%) !important;
    border: 4px solid #FFFFFF !important;
    box-shadow: var(--card-shadow, 0 14px 30px -12px rgba(30,90,240,.55), 0 0 0 1px rgba(30,90,240,.12)) !important;
    position: relative;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.circle:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 22px 44px -14px rgba(30,90,240,.7), 0 0 0 1px rgba(30,90,240,.18) !important;
}
/* adım ikonları siyah-zemin/beyaz-çizgi opak webp → mavi disk üzerinde screen blend:
   siyah zemin kaybolur, beyaz çizgiler görünür */
.circle .img { mix-blend-mode: screen; }
.circle .img img { filter: none !important; max-width: 44px; height:auto; opacity:1; }
.step .d-block, .circle .d-block { color: var(--text) !important; font-family: var(--display) !important; font-weight:600 !important; }

/* adımları birleştiren kesikli çizgi → mavi/mint */
.faturaodemestepcizgi {
    opacity:.6;
    filter: hue-rotate(0deg) saturate(1.2) brightness(1.05);
}

/* ---------- Butonlar ---------- */
.odemebutton, .btn-primary, .cuzdan-login-btn, button.odemebutton {
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dim) 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    font-family: var(--display) !important;
    font-weight: 700 !important;
    border-radius: var(--radius, 12px) !important;
    box-shadow: var(--card-shadow, 0 12px 26px -10px rgba(30,90,240,.55)) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.odemebutton:hover, .btn-primary:hover {
    filter: brightness(1.05) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 36px -10px rgba(30,90,240,.7) !important;
    color: #FFFFFF !important;
}
/* Ödeme/onay CTA'ları için yeşil (başarı) varyant — .btn-success zaten yeşil ama parlatalım */
.btn-success, .odeme-onayla, .btnOde {
    background: linear-gradient(120deg, var(--secondary) 0%, #0AA372 100%) !important;
    border: none !important; color: #04231A !important;
    box-shadow: var(--card-shadow, 0 12px 26px -10px rgba(15,185,129,.5)) !important;
}
.btn-success:hover, .odeme-onayla:hover, .btnOde:hover {
    filter: brightness(1.05); transform: translateY(-2px);
    box-shadow: 0 18px 36px -10px rgba(15,185,129,.65) !important; color:#04231A !important;
}
.btn-outline-primary { border:1px solid var(--primary) !important; color: var(--primary) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--primary-lt) !important; color: var(--primary-dim) !important; }

/* ---------- Genel kart / form / tablo ---------- */
.card, .faturasonuc, .abonenoform, .cuzdan-modal-content, .modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius, 18px) !important;
    box-shadow: var(--shadow) !important;
}
.abonenoform { background: linear-gradient(160deg, var(--surface) 0%, var(--surface-3) 100%) !important; }
.form-control, .form-select, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], textarea, select {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-2) !important;
    border-radius: var(--radius, 12px) !important;
}
.form-control::placeholder { color: var(--faint) !important; }
.form-control:focus, .form-select:focus, textarea:focus, input:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(30,90,240,.14) !important;
    color: var(--text) !important;
}
.table, .table td, .table th { color: var(--text) !important; border-color: var(--border) !important; }
hr { border-color: var(--border) !important; opacity: 1; }

/* Bootstrap yardımcı renk sınıfları açık temaya uyum */
.text-primary, .text-primaryColor { color: var(--primary) !important; }
.text-black-50 { color: var(--muted) !important; }
.bg-primary { background: var(--primary) !important; }

/* ---------- Görsel bantlar (bankalar / güven logoları) ---------- */
/* Renkli logo görselleri temiz beyaz panele otursun */
main img[src*="bankalar"], main img[src*="guven"] {
    background: #FFFFFF;
    border-radius: var(--radius, 18px);
    padding: 20px 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    max-width: 100%;
}

/* ---------- Cüzdan modal ---------- */
.cuzdan-modal-header { border-bottom: 1px solid var(--border) !important; }
.cuzdan-close-btn, .cuzdan-close-btn i { color: #fff !important; }
.icon-frame { background: linear-gradient(145deg, var(--primary), var(--primary-dim)) !important; border-color: rgba(255,255,255,.25) !important; }
.modal-backdrop.show { opacity:.5 !important; background:#0b1b3a; }

/* ---------- Popup overlay ---------- */
.box { background-color: rgba(11,27,58,.45) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- Footer (koyu lacivert — beyaz gövdeyle şık kontrast) ---------- */
footer, .footer-top, .footer-bottom {
    background: #0E1726 !important;
    border-top: 1px solid #1C2942 !important;
    color: #A9B6CC !important;
}
footer h4, .footer-top h4 { color: #FFFFFF !important; font-family: var(--display) !important; }
footer p, .footer-top p, footer li, .footer-top li { color: #A9B6CC !important; }
footer a, .footer-top a { color: #A9B6CC !important; }
footer a:hover, .footer-top a:hover { color: var(--secondary-b) !important; }

/* ---------- Loading gif konteyneri ---------- */
.loading { background: rgba(243,246,252,.85) !important; }

/* ---------- Erişilebilirlik: focus görünürlüğü ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--primary) !important; outline-offset: 2px;
}

/* ============================================================
   THEME ENGINE — Yerleşim tüketim katmanı
   Admin panelindeki button_style / card_style / header_style ayarları
   <html> üzerine data-* attribute olarak basılır; buradaki kurallar uygular.
   Ayar seçilmezse attribute yok → aşağıdaki kurallar devreye girmez, mevcut tasarım kalır.
   (border_radius/--radius ve font_family/--font-family yukarıda ilgili bileşenlerde tüketiliyor.)
   ============================================================ */

/* --- Buton stili --- */
[data-button-style="pill"] .btn,
[data-button-style="pill"] .odemebutton,
[data-button-style="pill"] .btn-primary,
[data-button-style="pill"] .btn-success,
[data-button-style="pill"] .cuzdan-login-btn,
[data-button-style="pill"] .sigorta-btn,
[data-button-style="pill"] .fatura-search-btn,
[data-button-style="pill"] .sigorta-cta-btn { border-radius: 999px !important; }

[data-button-style="outline"] .odemebutton,
[data-button-style="outline"] .btn-primary,
[data-button-style="outline"] .btn-success,
[data-button-style="outline"] .cuzdan-login-btn,
[data-button-style="outline"] .sigorta-btn,
[data-button-style="outline"] .fatura-search-btn {
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: none !important;
}
/* outline: buton içi metin/ikon da primary olsun (aksi halde beyaz yazı şeffaf zeminde kaybolur) */
[data-button-style="outline"] .odemebutton *,
[data-button-style="outline"] .btn-primary *,
[data-button-style="outline"] .cuzdan-login-btn *,
[data-button-style="outline"] .sigorta-btn *,
[data-button-style="outline"] .fatura-search-btn * {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}
[data-button-style="outline"] .odemebutton:hover,
[data-button-style="outline"] .btn-primary:hover,
[data-button-style="outline"] .btn-success:hover,
[data-button-style="outline"] .cuzdan-login-btn:hover,
[data-button-style="outline"] .sigorta-btn:hover,
[data-button-style="outline"] .fatura-search-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
}
[data-button-style="outline"] .sigorta-btn:hover *,
[data-button-style="outline"] .fatura-search-btn:hover * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* --- Kart stili --- (genel .card + ana sayfadaki görünür kart sınıfları) */
[data-card-style="flat"] .card,
[data-card-style="flat"] .faturasonuc,
[data-card-style="flat"] .abonenoform,
[data-card-style="flat"] .sigorta-card,
[data-card-style="flat"] .t-card,
[data-card-style="flat"] .sfb-card,
[data-card-style="flat"] .cuzdan-app-card,
[data-card-style="flat"] .fatura-search-box,
[data-card-style="flat"] .cuzdan-info-box,
[data-card-style="flat"] .sektor,
[data-card-style="flat"] .pop-panel,
[data-card-style="flat"] .hero3-stat,
[data-card-style="flat"] .fatura-how { box-shadow: none !important; border: 1px solid var(--border) !important; }

[data-card-style="elevated"] .card,
[data-card-style="elevated"] .faturasonuc,
[data-card-style="elevated"] .abonenoform,
[data-card-style="elevated"] .sigorta-card,
[data-card-style="elevated"] .t-card,
[data-card-style="elevated"] .sfb-card,
[data-card-style="elevated"] .cuzdan-app-card,
[data-card-style="elevated"] .fatura-search-box,
[data-card-style="elevated"] .cuzdan-info-box,
[data-card-style="elevated"] .sektor,
[data-card-style="elevated"] .pop-panel,
[data-card-style="elevated"] .hero3-stat,
[data-card-style="elevated"] .fatura-how { box-shadow: var(--shadow-lg) !important; }

[data-card-style="glass"] .card,
[data-card-style="glass"] .faturasonuc,
[data-card-style="glass"] .abonenoform,
[data-card-style="glass"] .sigorta-card,
[data-card-style="glass"] .t-card,
[data-card-style="glass"] .sfb-card,
[data-card-style="glass"] .cuzdan-app-card,
[data-card-style="glass"] .fatura-search-box,
[data-card-style="glass"] .cuzdan-info-box,
[data-card-style="glass"] .sektor,
[data-card-style="glass"] .pop-panel,
[data-card-style="glass"] .hero3-stat,
[data-card-style="glass"] .fatura-how {
    background: rgba(255,255,255, var(--glass-opacity, .65)) !important;
    -webkit-backdrop-filter: blur(var(--blur-radius, 14px));
    backdrop-filter: blur(var(--blur-radius, 14px));
    border: 1px solid rgba(255,255,255,.55) !important;
}

/* --- Header stili (gradient = varsayılan) --- */
[data-header-style="solid"] .sticky-header,
[data-header-style="solid"] .sticky-header.active,
[data-header-style="solid"] .pageHeader {
    background: var(--header-bg, var(--primary, #0A388F)) !important;
}
[data-header-style="glass"] .sticky-header,
[data-header-style="glass"] .sticky-header.active,
[data-header-style="glass"] .pageHeader {
    background: linear-gradient(108deg, rgba(10,56,143, var(--glass-opacity, .6)), rgba(30,90,240, var(--glass-opacity, .6))) !important;
    -webkit-backdrop-filter: blur(var(--blur-radius, 12px));
    backdrop-filter: blur(var(--blur-radius, 12px));
}

/* --- Efektler ---
   transition_speed → etkileşimli öğelerin geçiş süresi (--transition-speed).
   hover_scale → butonlarda hover büyümesi (--hover-scale; 1 = etkisiz).
   glass_opacity / blur_radius → yukarıdaki "glass" kart/header stillerinde tüketiliyor. */
a, .btn, .odemebutton, .btn-primary, .btn-success, .cuzdan-login-btn {
    transition-duration: var(--transition-speed, .18s) !important;
}
.odemebutton:hover, .btn-primary:hover, .btn-success:hover, .cuzdan-login-btn:hover {
    transform: translateY(-2px) scale(var(--hover-scale, 1)) !important;
}