/* =========================
   HappsPlan Volt Overrides
   ========================= */

/* 1) Renk paleti (Bootstrap CSS variable override) */
:root {
    /* Brand */
    --bs-primary: #1e3a8a; /* lacivert */
    --bs-secondary: #64748b; /* gri */
    --bs-success: #22c55e; /* yeşil */
    --bs-info: #0ea5e9; /* mavi */
    --bs-warning: #f59e0b; /* sarı */
    --bs-danger: #ef4444; /* kırmızı */
    --bs-light: #f8fafc;
    --bs-dark: #0f172a;
    /* Metin/link tonları */
    --hp-text-muted: #6b7280;
}

/* 2) Yardımcı sınıflar */
.bg-brand-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
}

.text-brand {
    color: var(--bs-primary) !important;
}

.border-brand {
    border-color: var(--bs-primary) !important;
}

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #1b3580;
    --bs-btn-hover-border-color: #1b3580;
    --bs-btn-focus-shadow-rgb: 30,58,138;
}

.auth-wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 992px) {
    .auth-wrapper {
        grid-template-columns: 1fr;
    }
}

.auth-side {
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.auth-hero {
    padding: 3rem 2rem;
    color: #fff;
}

.card-auth {
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.logo-img {
    display: block;
    margin-inline: auto;
    height: 36px;
}

.small-muted {
    color: var(--hp-text-muted);
}

/* Form iyileştirme */
.form-floating > label {
    color: #6b7280;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(30,58,138,.15);
}

/* Payment Login Logo */
.payment-logo {
    max-height: 100px;
    transition: transform 0.2s ease-in-out;
}

    .payment-logo:hover {
        transform: scale(1.05);
    }

/* Card Style */
.card {
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.card-body {
    padding: 2rem;
}

.brand-heading {
    font-family: var(--heading-font); /* Volt'un heading fontu */
    font-weight: 600; /* Heading'lerdeki kalınlığı korumak için */
}

/* Trust panel layout */
.trust-wrap {
    max-width: 560px;
    padding: 3rem 2rem;
}

.trust-card-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: 14px;
    align-items: center;
}

.trust-logo {
    width: 100%;
    max-width: 90px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)) brightness(1.05);
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
}

/* Badges: 3D Secure / SSL / PCI */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

    .trust-badge img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

/* Bullet list on gradient */
.trust-list {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255,255,255,.9);
}

    .trust-list li {
        margin-bottom: .4rem;
    }

    .trust-list strong {
        color: #fff;
    }

/* Responsive tweaks */
@media (max-width: 1200px) {
    .trust-card-logos {
        grid-template-columns: repeat(4, 1fr);
    }
}

.payment-strip {
    background: #fff;
    padding: 14px 0;
    width: 100%;
    margin-bottom: 30px; /* Şeridi yukarı çeker */
}

.payment-logo-strip {
    height: 32px;
    max-width: 70px;
    object-fit: contain;
    filter: grayscale(20%);
    transition: transform 0.2s ease, filter 0.2s ease;
}

    .payment-logo-strip:hover {
        transform: scale(1.05);
        filter: grayscale(0%);
    }

/* ===== Checkout look & feel ===== */
.hp-nav {
    background: linear-gradient(90deg, #1e3a8a 0%, #0ea5e9 100%);
}

.hp-card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.nav-pills .nav-link {
    color: #fff;
    opacity: .8;
}

    .nav-pills .nav-link.active,
    .nav-pills .nav-link:hover {
        color: #fff;
        opacity: 1;
        background: rgba(255,255,255,.15);
    }

/* inputs */
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(30,58,138,.15);
}

/* payment brand marks */
.paymark {
    height: 26px;
    object-fit: contain;
    filter: grayscale(10%);
}

.navbar-brand img {
    background-color: transparent !important;
    border-radius: 0; /* köşeler düz kalsın */
}

/* ==== Credit Card Preview ==== */
.hp-card-preview {
    position: relative;
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
    box-shadow: 0 10px 28px rgba(15,23,42,.15);
    min-height: 160px;
    overflow: hidden;
}

.hp-card-chip {
    width: 42px;
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(180deg, #e6c97b, #caa548);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

.hp-card-brand {
    position: absolute;
    top: 16px;
    right: 16px;
}

    .hp-card-brand img {
        height: 30px;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
    }

.hp-card-program {
    position: absolute;
    top: 58px;
    right: 16px;
    font-weight: 600;
    opacity: .9;
}

.hp-card-number {
    margin-top: 22px;
    font-size: 1.25rem;
    letter-spacing: .06em;
    font-weight: 600;
}

.hp-card-label {
    font-size: .7rem;
    text-transform: uppercase;
    opacity: .8;
}

.hp-card-value {
    font-weight: 600;
    letter-spacing: .04em;
}

/* Sağ özet paneli sabitle */
.sticky-right {
    position: sticky;
    top: 88px;
}

@media (max-width: 991.98px) {
    .sticky-right {
        position: static;
    }
}

/* Sayfayı daralt (desktop) */
.checkout-narrow {
    max-width: 1180px;
}

/* Sağ panel sticky */
.sticky-right {
    position: sticky;
    top: 88px;
}

@media (max-width: 991.98px) {
    .sticky-right {
        position: static;
    }
}

/* Daha kompakt inputlar */
.compact-inputs .form-control, .compact-inputs .form-select {
    height: 2.6rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

/* Kart preview küçültme */
.hp-card-preview--sm {
    min-height: 140px;
    padding: 16px;
}

    .hp-card-preview--sm .hp-card-number {
        font-size: 1.1rem;
    }

    .hp-card-preview--sm .hp-card-brand img {
        height: 26px;
    }

    .hp-card-preview--sm .hp-card-chip {
        width: 38px;
        height: 28px;
    }

/* Taksit tablo stili */
.inst-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border: 1px solid rgba(2,6,23,.06);
    border-radius: 12px;
    margin-bottom: 10px;
    background: #fff;
}

    .inst-row:hover {
        box-shadow: 0 6px 18px rgba(15,23,42,.06);
    }

.inst-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

    .inst-brand img {
        height: 22px;
        object-fit: contain;
    }

    .inst-brand span {
        font-weight: 600;
    }

.inst-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inst-chip {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem;
}

    .inst-chip.active,
    .inst-chip:hover {
        background: #1e3a8a;
        color: #fff;
        border-color: #1e3a8a;
    }

.inst-amount {
    margin-left: auto;
    text-align: right;
    min-width: 110px;
}

/* Üstteki taksit board'u biraz daha ferah */
.inst-board .nav-tabs .nav-link {
    font-weight: 600;
}

.inst-board .inst-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
    border: 1px solid rgba(2,6,23,.06);
    border-radius: 14px;
    margin-bottom: 12px;
    background: #fff;
    transition: box-shadow .15s ease;
}

    .inst-board .inst-row:hover {
        box-shadow: 0 10px 26px rgba(15,23,42,.06);
    }

/* Program logo oranları */
.inst-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

    .inst-brand img {
        height: 26px;
        max-width: 110px;
        width: auto;
        object-fit: contain;
    }

    .inst-brand span {
        font-weight: 700;
        font-size: 1.05rem;
    }

/* Taksit chip'leri */
.inst-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inst-chip {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
}

    .inst-chip.active, .inst-chip:hover {
        background: #1e3a8a;
        color: #fff;
        border-color: #1e3a8a;
    }

.inst-amount {
    margin-left: auto;
    text-align: right;
    min-width: 140px;
}

    .inst-amount .fw-semibold {
        font-size: 1.05rem;
    }

/* Sayfayı daralt (orta bölüm) */
.checkout-narrow {
    max-width: 1180px;
}

/* Sağ panel sticky */
.sticky-right {
    position: sticky;
    top: 88px;
}

@media (max-width: 991.98px) {
    .sticky-right {
        position: static;
    }
}

/* Daha kompakt inputlar */
.compact-inputs .form-control, .compact-inputs .form-select {
    height: 2.6rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

/* Kart preview küçültme */
.hp-card-preview--sm {
    min-height: 140px;
    padding: 16px;
}

    .hp-card-preview--sm .hp-card-number {
        font-size: 1.1rem;
    }

    .hp-card-preview--sm .hp-card-brand img {
        height: 26px;
    }

    .hp-card-preview--sm .hp-card-chip {
        width: 38px;
        height: 28px;
    }

/* Ödeme marka ikonları */
.paymark {
    height: 26px;
    object-fit: contain;
    filter: grayscale(10%);
}

/* Sayfa genişliği */
.checkout-narrow {
    max-width: 1180px;
}

/* Sağ panel sticky */
.sticky-right {
    position: sticky;
    top: 88px;
}

@media (max-width: 991.98px) {
    .sticky-right {
        position: static;
    }
}

/* Kompakt inputlar */
.compact-inputs .form-control, .compact-inputs .form-select {
    height: 2.6rem;
    padding: .45rem .75rem;
}

/* Kart preview küçük ve orantılı */
.hp-card-preview--sm {
    min-height: 168px;
    padding: 16px;
}

    .hp-card-preview--sm .hp-card-number {
        font-size: 1.1rem;
    }

    .hp-card-preview--sm .hp-card-brand img {
        height: 26px;
    }

    .hp-card-preview--sm .hp-card-chip {
        width: 38px;
        height: 28px;
    }

/* Inst board (altta), sadece logolu */
.inst-board .inst-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(2,6,23,.06);
    border-radius: 14px;
    margin-bottom: 12px;
    background: #fff;
    transition: box-shadow .15s ease;
}

    .inst-board .inst-row:hover {
        box-shadow: 0 10px 26px rgba(15,23,42,.06);
    }

.inst-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 120px;
}

    .inst-brand img {
        height: 26px;
        max-width: 110px;
        width: auto;
        object-fit: contain;
    }

.inst-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inst-chip {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
}

    .inst-chip.active, .inst-chip:hover {
        background: #1e3a8a;
        color: #fff;
        border-color: #1e3a8a;
    }

.inst-amount {
    margin-left: auto;
    text-align: right;
    min-width: 160px;
}

    .inst-amount .fw-semibold {
        font-size: 1.05rem;
    }

/* Ödeme marka ikonları */
.paymark {
    height: 26px;
    object-fit: contain;
    filter: grayscale(10%);
}

/* Preview sabit yükseklik */
.hp-card-preview--fixed {
    height: 210px; /* sabit */
    padding: 16px;
    display: flex;
    flex-direction: column;
}

    .hp-card-preview--fixed .hp-card-number {
        font-size: 1.05rem;
    }

    .hp-card-preview--fixed .hp-card-brand img {
        height: 26px;
    }

/* Özet marka rozeti */
.brand-badge {
    height: 22px;
    object-fit: contain;
}

/* Matris tablo */
.inst-matrix .matrix-logo {
    height: 24px;
    object-fit: contain;
}

.inst-matrix .matrix-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.inst-matrix input[type="radio"] {
    accent-color: #1e3a8a;
}

.inst-matrix td.selected {
    background: #eef2ff;
    border-radius: 10px;
}

.inst-matrix-card .table > :not(caption) > * > * {
    padding: .6rem .5rem;
}

/* === Kredi Kartı Görseli (sol panel) === */
.hp-card-visual {
    position: relative;
    width: 100%;
    max-width: 360px; /* genişliği fazla kaçmasın */
    height: 210px; /* SABİT yükseklik: ekran görüntüsüne yakın */
    border-radius: 18px;
    padding: 18px 20px;
    color: #fff;
    background: radial-gradient(120% 120% at 0% 0%, #2563eb 0%, #1e40af 55%, #0b225f 100%);
    box-shadow: 0 16px 30px rgba(2, 6, 23, .18);
    overflow: hidden;
}

    /* Hafif doku ve parıltı */
    .hp-card-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(60% 60% at 80% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
        pointer-events: none;
    }

/* Çip */
.hp-card-visual__chip {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg,#ffd98e,#f6b22c);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25);
}

/* Şema logosu (sağ üst, yarı saydam damga gibi) */
.hp-card-visual__scheme {
    position: absolute;
    right: 14px;
    top: 14px;
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
    opacity: .9;
}

/* Kart numarası */
.hp-card-visual__number {
    margin-top: 22px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: .15em;
    font-size: 1.12rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Alt bölüm: isim & SKT */
.hp-card-visual__footer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.hp-card-visual__label {
    font-size: .65rem;
    letter-spacing: .12em;
    opacity: .85;
}

.hp-card-visual__value {
    margin-top: 2px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
}

/* Program adı (Axess/Bonus vs) – sol alt köşe */
.hp-card-visual__program {
    position: absolute;
    left: 20px;
    bottom: 72px;
    font-weight: 600;
    font-size: .85rem;
    opacity: .9;
}

/* Küçük ekranlarda genişle */
@media (max-width: 991.98px) {
    .hp-card-visual {
        max-width: 100%;
    }
}

/* — Kart görseli (sol panel) — */
.hp-card-visual {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 210px; /* sabit yükseklik: görseldeki gibi */
    border-radius: 18px;
    padding: 18px 20px;
    color: #fff;
    background: radial-gradient(120% 120% at 0% 0%, #2563eb 0%, #1e40af 55%, #0b225f 100%);
    box-shadow: 0 16px 30px rgba(2, 6, 23, .18);
    overflow: hidden;
}

    .hp-card-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(60% 60% at 80% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
        pointer-events: none;
    }

.hp-card-visual__chip {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg,#ffd98e,#f6b22c);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25);
}

.hp-card-visual__scheme {
    position: absolute;
    right: 14px;
    top: 14px;
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
    opacity: .9;
}

.hp-card-visual__number {
    margin-top: 22px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: .15em;
    font-size: 1.12rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.hp-card-visual__footer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.hp-card-visual__label {
    font-size: .65rem;
    letter-spacing: .12em;
    opacity: .85;
}

.hp-card-visual__value {
    margin-top: 2px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
}

.hp-card-visual__program {
    position: absolute;
    left: 20px;
    bottom: 72px;
    font-weight: 600;
    font-size: .85rem;
    opacity: .9;
}

@media (max-width: 991.98px) {
    .hp-card-visual {
        max-width: 100%;
    }
}

/* === Checkout Grid (A|D kolonları, 3 satır) === */
.hp-checkout-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(420px, 1fr); /* A | D */
    grid-template-areas:
        "card amount" /* Satır-1 */
        "card name" /* Satır-2 */
        "pan  exp"; /* Satır-3 */
    column-gap: 28px;
    row-gap: 18px;
}

    /* Grid alan eşlemesi */
    .hp-checkout-grid .grid-card {
        grid-area: card;
    }

    .hp-checkout-grid .grid-amount {
        grid-area: amount;
    }

    .hp-checkout-grid .grid-name {
        grid-area: name;
    }

    .hp-checkout-grid .grid-pan {
        grid-area: pan;
    }

    .hp-checkout-grid .grid-exp {
        grid-area: exp;
    }

/* Kart görseli sabit yükseklik (daha önce verdiğimiz stillerle uyumlu) */
.hp-card-visual {
    max-width: 100%;
    height: 210px;
}

/* Responsive: md ve altı tek kolon */
@media (max-width: 991.98px) {
    .hp-checkout-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "card"
            "amount"
            "name"
            "pan"
            "exp";
    }
}

@media (min-width: 992px) {
    .hp-checkout-grid {
        padding-right: 20px; /* sağda 20px boşluk */
    }
}

/* === Sol taraf grid kolonları: A (card) | D (form) === */
.hp-checkout-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) 420px; /* sağ kolon sabit 420px */
    grid-template-areas:
        "card amount"
        "card name"
        "pan  exp";
    column-gap: 24px;
    row-gap: 14px;
}

    /* grid alanları */
    .hp-checkout-grid .grid-card {
        grid-area: card;
    }

    .hp-checkout-grid .grid-amount {
        grid-area: amount;
    }

    .hp-checkout-grid .grid-name {
        grid-area: name;
    }

    .hp-checkout-grid .grid-pan {
        grid-area: pan;
    }

    .hp-checkout-grid .grid-exp {
        grid-area: exp;
    }

/* Sol kart görseli (sabit ve kompakt) */
.hp-card-visual {
    max-width: 100%;
    height: 210px;
}

/* Formu kompaktlaştır */
.compact-inputs .form-control {
    padding: .55rem .75rem;
    font-size: .95rem;
}

/* Sağ panel: dar, kompakt, aynı 420px kolon genişliği */
.summary-panel {
    max-width: 420px;
    margin-left: auto;
}

    .summary-panel .card.hp-card .card-body {
        padding: 16px 18px;
    }

    .summary-panel .fs-amount {
        font-size: 1.6rem;
    }
    /* önceki fs-3 yerini alır */
    .summary-panel .btn {
        padding: .8rem 1rem;
        font-size: 1rem;
    }

    .summary-panel .paymark {
        height: 24px;
    }

/* Masaüstünde solda sağ boşluk – yapışmayı engeller */
@media (min-width: 992px) {
    .hp-checkout-grid {
        padding-right: 8px;
    }

    .sticky-right {
        margin-top: 6px;
        position: sticky;
        top: 84px;
    }
}

/* Mobilde tek kolon */
@media (max-width: 991.98px) {
    .hp-checkout-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "card" "amount" "name" "pan" "exp";
    }

    .summary-panel {
        max-width: 100%;
    }
}

/* === TEK ORTAK GENİŞLİK & HİZALAMA === */
.hp-checkout-wrap {
    /* 1200px tavan, ekran daralınca 92vw'e kadar, en az 980px */
    max-width: clamp(980px, 92vw, 1200px);
    margin-inline: auto;
    padding-inline: 16px; /* kart iç paddingleriyle uyumlu bir kenar boşluğu */
}

/* Sol grid: sağ kolon sabit; sağ panel ile tam aynı */
.hp-checkout-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) 420px; /* A | D(=420px) */
    grid-template-areas:
        "card amount"
        "card name"
        "pan  exp";
    column-gap: 24px;
    row-gap: 14px;
    padding-right: 8px; /* sağ panelle “nefes alanı” */
}

/* Sağ özet panel genişliği, soldaki D kolonu ile aynı */
.summary-panel {
    max-width: 420px;
    margin-left: auto;
}

    .summary-panel .card.hp-card .card-body {
        padding: 16px 18px;
    }

    .summary-panel .fs-amount {
        font-size: 1.6rem;
    }

    .summary-panel .btn {
        padding: .8rem 1rem;
        font-size: 1rem;
    }

    .summary-panel .paymark {
        height: 24px;
    }

/* Kart görseli kompakt */
.hp-card-visual {
    max-width: 100%;
    height: 210px;
}

/* Formu kompaktlaştır */
.compact-inputs .form-control {
    padding: .55rem .75rem;
    font-size: .95rem;
}

/* Sağ panelin yapışkan davranışı ve hizası */
@media (min-width:992px) {
    .sticky-right {
        position: sticky;
        top: 84px;
        margin-top: 6px;
    }
}

/* Mobilde tek kolon */
@media (max-width:991.98px) {
    .hp-checkout-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "card" "amount" "name" "pan" "exp";
        padding-right: 0;
    }

    .summary-panel {
        max-width: 100%;
    }
}

/* === Ortak sarmalayıcı: 3 blok aynı hizaya otursun === */
.hp-checkout-wrap{
  max-width: 1180px;     /* taksit tablosu ile aynı hat */
  margin-inline: auto;
  padding-inline: 8px;
}

/* Sağ özet panel genişliği ve taşma engeli */
.summary-panel{
  position: sticky;
  top: 84px;             /* navbar yüksekliğine göre ayarla */
  max-width: 420px;      /* sabit üst sınır: taşıp sola girmesin */
  width: 100%;
  margin-left: auto;     /* sağa yasla */
  z-index: 1;            /* formun üstüne çıkmasın */
}

/* Soldaki formun mantıklı genişlikleri */
.hp-checkout-grid .form-control{
  max-width: 560px;      /* Tutar ve İsim alanları için üst sınır */
}

/* Kart numarası full-lane ama yine de bir üst sınır koy */
.grid-pan .form-control{
  max-width: 640px;
}

/* SKT Ay / Yıl / CVV: sabit ve hizalı */
.grid-exp .form-control{ max-width: 140px; }  /* Ay/Yıl/CVV */
#cvv{ max-width: 120px; }

/* Kart görseli: sabit ölçü (soldaki kartın taşmaması için) */
.hp-card-visual{
  width: 360px;
  height: 225px;
  min-width: 340px;
}

/* Büyük ekranlarda kolonlar arası aralık biraz artsın */
@media (min-width: 992px){
  .col-lg-7.pe-lg-4{ padding-right: 1.75rem !important; }
}

/* Küçük ekran: her şey tek kolona iner, genişlikler serbest */
@media (max-width: 991.98px){
  .hp-checkout-grid .form-control,
  .grid-pan .form-control,
  .grid-exp .form-control{ max-width: 100%; }
  .hp-card-visual{ width: 100%; height: 210px; min-width: 0; }
  .summary-panel{ position: static; max-width: none; }
}

/* Özet rakamını biraz kompaktlaştır (çok büyükse) */
.fs-amount{
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);   /* responsive */
  line-height: 1.2;
}

.grid-amount .form-control {
    max-width: 120px; /* Tutar alanı */
}

.grid-name .form-control {
    max-width: 200px; /* Kart üzerindeki isim */
}

.inst-matrix .matrix-logo {
    height: 24px;
    object-fit: contain
}

.inst-matrix .matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.inst-matrix input[type="radio"] {
    accent-color: #1e3a8a
}

.inst-matrix td {
    vertical-align: middle
}

.inst-matrix th {
    white-space: nowrap;
    background-color: transparent !important;
}

/* === Installment Matrix: masaüstü düzeni === */
.inst-matrix-wrap {
    position: relative;
    overflow-x: auto; /* genişse yatay kaydır */
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(2,6,23,.06);
    border-radius: 14px;
    background: #fff;
}

.inst-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .inst-matrix thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
        font-weight: 700;
        padding: .7rem .6rem;
        border-bottom: 1px solid rgba(2,6,23,.08);
    }

    .inst-matrix tbody th {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        font-weight: 600;
        white-space: nowrap;
        padding: .6rem .6rem;
        border-right: 1px solid rgba(2,6,23,.06);
    }

    .inst-matrix td {
        padding: .6rem .5rem;
        border-bottom: 1px solid rgba(2,6,23,.06);
    }

/* Hücre içeriği: logo + fiyat + radio */
.matrix-cell {
    display: grid;
    grid-template-columns: 56px 1fr auto; /* logo | fiyat | radio */
    align-items: center;
    gap: 8px;
}

/* Logo kutusu: sabit alan + ortalama */
.logo-box {
    width: 56px;
    height: 28px; /* tek yükseklik standardı */
    display: grid;
    place-items: center;
    background: #fff;
}

.matrix-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%; /* HEPSİ aynı yüksekliğe oturur */
    object-fit: contain;
    filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* net kalsın */
}

/* Rakam görünümü */
.cell-amount {
    font-weight: 600;
    letter-spacing: .01em;
}

/* Seçili hücre vurgusu */
.inst-matrix td.selected {
    background: #eef2ff;
    border-radius: 10px;
}

/* Radio görünümü */
.inst-matrix input[type="radio"] {
    accent-color: #1e3a8a;
}

/* === Küçük ekran: stacked kart görünümü === */
@media (max-width: 768px) {
    .inst-matrix-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .inst-matrix, .inst-matrix thead, .inst-matrix tbody, .inst-matrix tr, .inst-matrix th, .inst-matrix td {
        display: block;
        width: 100%;
    }

        .inst-matrix thead {
            display: none;
        }

    .inst-card {
        border: 1px solid rgba(2,6,23,.08);
        border-radius: 12px;
        background: #fff;
        padding: .6rem .75rem;
        margin-bottom: .75rem;
    }

    .inst-card__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .35rem;
        font-weight: 700;
    }

    .inst-card__grid {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        align-items: center;
        gap: 8px;
        padding: .35rem 0;
    }

    .inst-card input[type="radio"] {
        margin-left: 6px;
    }
}

/* --- Matris tablosu: masaüstü görünüm --- */
.inst-matrix-card .matrix-logo {
    height: 26px;
    width: auto;
    object-fit: contain;
}

.inst-matrix-card .matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.inst-matrix-card input[type="radio"] {
    accent-color: var(--bs-primary);
    width: 18px;
    height: 18px;
}

/* Hücre padding’lerini biraz sıkı tut */
.inst-matrix-card > :not(caption) > * > * {
    padding: .6rem .5rem;
}

/* --- Mobil uyarlama (xs) --- */
@media (max-width: 576.98px) {
    /* başlığı gizle, satırları kartlaştır */
    .inst-matrix-card thead {
        display: none;
    }

    .inst-matrix-card tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 sütun */
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(2,6,23,.08);
        border-radius: 12px;
        margin-bottom: 12px;
        background: #fff;
    }

        /* Satır etiketini (sol başlık) tam genişlikte tut */
        .inst-matrix-card tbody tr > th {
            grid-column: 1 / -1;
            text-align: left;
            padding: 0 .25rem .25rem .25rem;
            font-weight: 600;
        }

    .inst-matrix-card tbody td {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: .35rem .25rem;
    }

    /* Hücre içeriği: logo üstte, fiyat altta */
    .inst-matrix-card .matrix-cell {
        flex-direction: column;
        gap: 6px;
    }

    .inst-matrix-card .matrix-logo {
        height: 22px; /* mobilde biraz küçült */
    }

    /* Dokunmatik hedefleri büyüt */
    .inst-matrix-card input[type="radio"] {
        width: 22px;
        height: 22px;
    }
}

/* --- Küçük-orta cihazlarda (sm-md), yatay kaydırma aktif kalsın --- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Taksit matrisi: tutarları aynı hizaya getir */
.inst-matrix [data-calc],
.inst-matrix td .text-muted { /* '—' olan hücreler de aynı genişlikte kalsın */
    display: inline-block;
    min-width: 10.5ch; /* sütun genişliği: gerekirse 9.5–11ch arası ayarlayabilirsin */
    text-align: right; /* rakamlar sağa hizalı */
    font-variant-numeric: tabular-nums; /* her rakam aynı genişlikte */
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0; /* olası font tracking farklarını sıfırla */
}

/* Radyo + tutar hizası stabil olsun */
.inst-matrix .matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: .6rem; /* radyo ile tutar arası */
}

/* Mobilde biraz daralt */
@media (max-width: 576px) {
    .inst-matrix [data-calc],
    .inst-matrix td .text-muted {
        min-width: 9.5ch;
    }
}

/* 1) Tutarlar: sabit genişlik + SOLDAN hizalı + numaralar eş genişlik */
.inst-matrix [data-calc],
.inst-matrix td .text-muted {
    display: inline-block;
    min-width: 10ch; /* 9–11ch arası dengeleyebilirsin */
    white-space: nowrap;
    text-align: left !important; /* önceki right'ı geçersiz kıl */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0;
}

/* 2) Radyo ile tutar arasındaki boşluğu küçült */
.inst-matrix .matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: .4rem !important; /* önceki .6rem’i daralt */
}

    /* Radyo input’un ekstra marginlerini sıfırla (tarayıcı farklarını azaltır) */
    .inst-matrix .matrix-cell input[type="radio"] {
        margin: 0;
    }

/* 3) SVG logo oranlarını sabitle (başlıktaki bankalar) */
.inst-matrix .matrix-logo {
    display: inline-block;
    height: 24px !important; /* tek yükseklik */
    width: auto !important;
    max-width: 120px;
    object-fit: contain;
    vertical-align: middle;
}

/* ------ Matrix header: bank logos left-aligned & consistent ------ */
.inst-matrix thead th.bank-head {
    text-align: left !important; /* soldan hizala */
    vertical-align: bottom;
    padding-left: 10px; /* çok az iç boşluk */
}

/* Tüm logo’lar için ortak kutu – oranlar sabit, okunaklı */
.inst-matrix .matrix-logo {
    display: block;
    height: 28px; /* tek boy: masaüstü */
    width: auto; /* orana göre genişlesin */
    object-fit: contain;
    filter: none; /* önceki grayscale vs. kalmasın */
    image-rendering: -webkit-optimize-contrast; /* ince çizgiler daha net */
}

/* Farklı en-boy oranlarını dengeler */
.inst-matrix .bank-head {
    min-width: 220px; /* sütun genişliği stabilize */
}

/* Mobilde biraz küçült */
@media (max-width: 768px) {
    .inst-matrix .matrix-logo {
        height: 22px;
    }

    .inst-matrix .bank-head {
        min-width: 160px;
    }
}

/* Tablonun sütun düzeni sabit kalsın */
.inst-matrix-card {
    table-layout: fixed;
}

    /* Banka kolonlarının sabit ve birbirine yakın genişliği */
    .inst-matrix-card col.matrix-col {
        width: 240px; /* desktop */
    }

@media (max-width: 1400px) {
    .inst-matrix-card col.matrix-col {
        width: 220px;
    }
}

@media (max-width: 1200px) {
    .inst-matrix-card col.matrix-col {
        width: 200px;
    }
}

/* Başlıktaki logo hücresi: soldan hizalı, gereksiz min-width KALDIRILDI */
.inst-matrix thead th.bank-head {
    text-align: left !important;
    vertical-align: bottom;
    padding-left: 6px;
}

/* Logo oran standardı */
.inst-matrix .matrix-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: none;
}

/* Radio + tutar boşluğunu küçült */
.inst-matrix .matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* önce 12/16 ise küçüldü */
}

    /* Radio ile metin hizası */
    .inst-matrix .matrix-cell input[type="radio"] {
        margin: 0;
        transform: translateY(1px);
    }

    /* Tutar metni soldan hizalı (sağdan değildi) */
    .inst-matrix td,
    .inst-matrix .matrix-cell span {
        text-align: left;
    }

/* Mobilde zaten stacked görünüme geçiyorsak genişlikleri serbest bırak */
@media (max-width: 768px) {
    .inst-matrix-card col.matrix-col {
        width: auto;
    }

    .inst-matrix .matrix-logo {
        height: 22px;
    }
}

/* === Button Hover Fix === */
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
    font-weight: 500; /* ekstra bold yapma */
    color: #fff; /* sabit beyaz metin */
    background-color: #1b3580; /* mevcut hover bg rengin */
    border-color: #1b3580;
}

.card-auth .btn.btn-brand:hover,
.card-auth .btn.btn-brand:focus,
.card-auth .btn.btn-brand:active {
    font-weight: 600 !important;
}

/* === Installment table: scroll only on phones === */

/* Sadece telefonlarda min-width tutup yatay kaydırma aktif kalsın */
@media (max-width: 575.98px) {
    .inst-matrix {
        min-width: 720px !important;
    }
}

/* >= sm: kaydırmayı kapat, tablo containera sığsın */
@media (min-width: 576px) {
    .table-responsive-sm {
        overflow-x: visible;
    }
    /* varsayılanı netleştir */
    .inst-matrix {
        min-width: 0 !important;
        width: 100%;
    }
}

/* ==== Installment matrix: fit-to-container (desktop) ==== */

/* Masaüstünde tablo genişliği: ilk sütun sabit, brand sütunları eşit paylaşılsın */
.inst-matrix--fit {
    table-layout: fixed;
    width: 100%;
    --first-col: 150px; /* gerekirse 140–170 arası deneyebilirsin */
}

    .inst-matrix--fit col.first-col {
        width: var(--first-col);
    }

    .inst-matrix--fit col.matrix-col {
        width: calc((100% - var(--first-col)) / var(--brand-count));
    }

/* Masaüstünde kompaktlaştırma: padding / font / boşluklar */
@media (min-width: 576px) {
    .inst-matrix--fit thead th,
    .inst-matrix--fit tbody th,
    .inst-matrix--fit tbody td {
        padding: .45rem .4rem;
    }

    .inst-matrix--fit .matrix-cell {
        gap: .35rem;
    }

    .inst-matrix--fit .matrix-logo {
        height: 22px; /* 20–24 px arası mantıklı */
        max-width: 110px;
    }

    .inst-matrix--fit input[type="radio"] {
        width: 16px;
        height: 16px;
        margin: 0;
        transform: translateY(1px);
    }

    .inst-matrix--fit [data-calc] {
        min-width: auto;
        font-size: .93rem; /* azıcık küçüldü */
        font-variant-numeric: tabular-nums;
    }

    /* Başlık hücresi biraz sıkılsın */
    .inst-matrix--fit thead th.bank-head {
        padding-left: .35rem;
    }
}

/* 7+ sütunda daha da sıkılaştır (opsiyonel) */
@media (min-width: 576px) {
    .inst-matrix--fit[data-brands="7"] .matrix-logo {
        height: 20px;
    }

    .inst-matrix--fit[data-brands="8"] .matrix-logo {
        height: 18px;
    }

    .inst-matrix--fit[data-brands="8"] [data-calc] {
        font-size: .9rem;
    }
}

/* Telefon: yatay kaydırma ve geniş tablo korunsun */
@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
    }

    .inst-matrix {
        min-width: 720px;
    }
    /* zaten vardı; kalsın */
}

/* === Taksit matrisi – masaüstüne sığdır (override) === */

/* Bu sınıfı matrisi saran .tab-content'e veriyoruz (matriste var): inst-matrix-tight */
.inst-matrix-tight .inst-matrix {
    min-width: 0 !important; /* Eski 720px min-width'i iptal et */
}

.inst-matrix-tight .inst-matrix-card {
    table-layout: fixed; /* Sütunları mevcut genişliğe eşit dağıt */
}

    /* Daha önce sabitlenen genişlikleri iptal et */
    .inst-matrix-tight .inst-matrix-card col.matrix-col {
        width: auto !important;
    }

/* Sol “Tek Çekim / x Taksit” kolonunu daralt */
.inst-matrix-tight col[style*="width:180px"] {
    width: 140px !important;
}

/* Başlık hücrelerindeki gereksiz minimumları kaldır */
.inst-matrix-tight .bank-head {
    min-width: auto !important;
    padding-left: 4px;
}

/* Logo boylarını küçült (okunaklı kalacak aralık) */
.inst-matrix-tight .matrix-logo {
    height: 22px !important;
    max-width: 92px !important;
    width: auto !important;
}

/* Hücre iç boşluklarını sıkılaştır */
.inst-matrix-tight .inst-matrix-card > :not(caption) > * > * {
    padding: .45rem .35rem !important;
}

/* Radyo + tutar aralığını küçült */
.inst-matrix-tight .matrix-cell {
    gap: .35rem !important;
}

    .inst-matrix-tight .matrix-cell input[type="radio"] {
        margin: 0;
        transform: translateY(1px) scale(.95); /* ufak küçültme */
    }

/* Tutarlar: daha dar sabit genişlik */
.inst-matrix-tight [data-calc],
.inst-matrix-tight td .text-muted {
    display: inline-block;
    min-width: 7.5ch; /* önceki 9–11ch’leri küçült */
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Header çizgilerini de sıkı tutalım */
.inst-matrix-tight thead th {
    padding: .55rem .4rem !important;
}

/* === Checkout konteyner genişliği (kartın sığması için) === */
.checkout-narrow,
.hp-checkout-wrap {
    /* 980px altına düşmesin; ekranda %95’e kadar açılsın; tepe 1400px */
    max-width: clamp(980px, 95vw, 1400px) !important;
}

    /* Kart iç pad’ini hafif kıs: daha çok alan */
    .checkout-narrow .card.hp-card .card-body {
        padding: 1rem 1.25rem !important;
    }


/* --- Tablo daha kompakt olsun (opsiyonel, taşma kalırsa) --- */
.inst-matrix-tight .matrix-logo {
    height: 20px !important;
    max-width: 84px !important;
}

.inst-matrix-tight col[style*="width:180px"] {
    width: 120px !important; /* "Tek Çekim / x Taksit" kolonu */
}

.inst-matrix-tight .inst-matrix-card > :not(caption) > * > * {
    padding: .4rem .35rem !important;
}

.inst-matrix-tight .matrix-cell {
    gap: .3rem !important;
}

.inst-matrix-tight [data-calc],
.inst-matrix-tight td .text-muted {
    min-width: 7ch !important;
}

/* --- Taksit tablosu card içine tam otursun --- */
.inst-matrix-card {
    width: 100% !important;
    table-layout: fixed; /* sütunlar eşit dağılır */
    border-collapse: collapse; /* çizgiler taşmaz */
}

    /* Hücre çizgilerini card içine kilitle */
    .inst-matrix-card th,
    .inst-matrix-card td {
        border: 1px solid rgba(0,0,0,.06);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* taşarsa üç nokta */
    }

/* Tablo card’ın kenarına dayanmasın */
.checkout-narrow .card.hp-card .card-body {
    padding: 1rem; /* iç boşluğu eşitle */
}

/* Mobilde gerekirse kaydırılabilir */
@media (max-width: 768px) {
    .inst-matrix-card {
        min-width: 720px; /* dar ekranda scroll */
    }

    .table-responsive-sm {
        overflow-x: auto;
    }
}

/* Tabloyu kartın içinde kırp (rounded köşelerle uyumlu) */
.matrix-clip {
    border-radius: 12px; /* kart radius’üne yakın */
    overflow: hidden; /* dışarı taşan çizgileri kes */
}

/* Taksit tablosu çizgi ve genişlik stabilizasyonu */
.inst-matrix-card {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: separate; /* separate + border-spacing=0 -> çizgiler net */
    border-spacing: 0;
    box-sizing: border-box; /* 1px overflow ihtimalini engeller */
}

    .inst-matrix-card th,
    .inst-matrix-card td {
        border-right: 1px solid rgba(2,6,23,.08);
        border-bottom: 1px solid rgba(2,6,23,.08);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* sol kenarda da çizgi olsun istiyorsan: */
        .inst-matrix-card th:first-child,
        .inst-matrix-card td:first-child {
            border-left: 1px solid rgba(2,6,23,.08);
        }

        /* en sağ kenarda taşmayı yapan çizgiyi kaldır */
        .inst-matrix-card th:last-child,
        .inst-matrix-card td:last-child {
            border-right: 0;
        }

    /* son satırın alt çizgisi olmasın (isteğe bağlı) */
    .inst-matrix-card tr:last-child > th,
    .inst-matrix-card tr:last-child > td {
        border-bottom: 0;
    }

/* Mobilde yine yatay kaydırılabilir kalsın */
@media (max-width: 768px) {
    .table-responsive-sm {
        overflow-x: auto;
    }
}

/* === Taksit tablosu minimal görünüm === */
.inst-matrix-card {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse; /* çizgileri kapatıyoruz */
    border-spacing: 0;
}

    /* tablo hücre çizgilerini kaldır */
    .inst-matrix-card th,
    .inst-matrix-card td {
        border: none !important;
    }

    /* başlık hücreleri */
    .inst-matrix-card th {
        font-weight: 600;
        color: #111827; /* koyu gri */
        padding: .6rem .5rem;
        white-space: nowrap;
    }

    /* ilk sütun (Tek Çekim / X Taksit) daralt */
    .inst-matrix-card col:first-child {
        width: 110px; /* gerekirse 100–120px arası oynatabilirsin */
    }

    /* her satırın arasına hafif gölge (opsiyonel, daha ferah görünüm) */
    .inst-matrix-card tr {
        border-bottom: 1px solid rgba(0,0,0,.04);
    }

        .inst-matrix-card tr:last-child {
            border-bottom: none;
        }




/* Masaüstünde scroll gizle; mobilde tablo genişliği kadar kaydır */
@media (min-width: 992px) {
    .inst-scroll {
        overflow-x: visible;
    }
}

/* Tablo aynı görünümde kalsın; genişlik büyükse scrolle taşsın */
.inst-scroll > .inst-matrix-card {
    min-width: 1100px; /* gereksinime göre 1000–1200px arası ayarlayabilirsin */
    width: max(100%, 1100px);
}

/* Bootstrap’ın ya da eski CSS’in “stack” kurallarını etkisizleştir */
@media (max-width: 991.98px) {
    .inst-matrix,
    .inst-matrix thead,
    .inst-matrix tbody,
    .inst-matrix tr,
    .inst-matrix th,
    .inst-matrix td {
        display: table !important;
        width: auto !important;
    }

        .inst-matrix thead {
            display: table-header-group !important;
        }

        .inst-matrix tbody {
            display: table-row-group !important;
        }
}

/* (Önceden verdiğimiz) minimal görünüm + ilk sütunu daraltma devam etsin */
.inst-matrix-card {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

    .inst-matrix-card th, .inst-matrix-card td {
        border: none !important;
    }

    .inst-matrix-card col:first-child {
        width: 110px;
    }
    /* “Tek Çekim / X Taksit” dar */
    .inst-matrix-card tr {
        border-bottom: 1px solid rgba(0,0,0,.04);
    }

        .inst-matrix-card tr:last-child {
            border-bottom: none;
        }

/* Logo’lar küçülünce daha iyi sığsın */
.inst-matrix .matrix-logo {
    height: 24px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
}

/* === Kart içinde yatay scroll === */
.inst-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
    .inst-scroll {
        overflow-x: visible;
    }
}

/* Tablo her zaman tablo kalsın; mobilde parçalanmasın */
.inst-matrix-card {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    /* masaüstünde çizgi minimal kalsın (isterseniz kaldırabilirsiniz) */
}

    .inst-matrix-card th,
    .inst-matrix-card td {
        border: none !important;
        white-space: nowrap;
    }

/* — Mobil stack kurallarını kesin olarak devre dışı bırak — */
@media (max-width: 991.98px) {
    .inst-matrix,
    .inst-matrix-card,
    .inst-matrix-card thead,
    .inst-matrix-card tbody,
    .inst-matrix-card tr,
    .inst-matrix-card th,
    .inst-matrix-card td {
        display: table !important;
        width: auto !important;
    }

        .inst-matrix-card thead {
            display: table-header-group !important;
        }

        .inst-matrix-card tbody {
            display: table-row-group !important;
        }

        .inst-matrix-card tr {
            display: table-row !important;
        }

        .inst-matrix-card th,
        .inst-matrix-card td {
            display: table-cell !important;
        }
}

/* Tablonun en az genişliği — mobilde kaydırma oluşsun */
.inst-scroll > .inst-matrix-card {
    min-width: 1200px; /* 1100–1280 arası deneyebilirsiniz */
    width: max(100%, 1200px);
}

/* İlk sütunu daralt (Tek Çekim / X Taksit) */
.inst-matrix-card col:first-child {
    width: 110px;
}

/* Logolar küçük ekranda daha kompakt dursun */
.inst-matrix .matrix-logo {
    height: 22px;
    max-width: 110px;
    width: auto;
    object-fit: contain;
}

/* Her ihtimale karşı parent kart içi clip olmasın */
.card .card-body {
    overflow: visible;
}

/* Yatay scroll SADECE tablo kabında olsun */
.inst-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sayfa düzeyinde yatay kaymayı tamamen kapat */
html, body {
    overflow-x: hidden;
}

/* Tablo her zaman tablo kalsın; mobilde parçalanmasın */
.inst-matrix-card {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: none;
}

/* Kart başlığı (markalar) görünsün; hücre içi logolar mobilde gizlensin.
   Böylece "logo çoğalması" olmaz */
@media (max-width: 991.98px) {
    .inst-matrix .matrix-cell .matrix-logo {
        display: none !important;
    }

    .inst-matrix thead .matrix-logo {
        display: inline !important;
    }
}

/* Tablo genişliği: min-width ver, geniş ekran dışında sayfayı taşırma */
.inst-scroll > .inst-matrix-card {
    min-width: 1200px; /* 1100–1280 arası deneyebilirsiniz */
    /* width: max(100%, 1200px) SATIRINI KALDIRIN/ KULLANMAYIN */
}

/* İlk sütunu daralt (Tek Çekim / X Taksit) */
.inst-matrix-card col:first-child {
    width: 110px;
}

/* Hücre sınırlarını istemiyorsanız: */
.inst-matrix-card th,
.inst-matrix-card td {
    border: none !important;
    white-space: nowrap;
}

/* Güvenlik: daha önce eklediğimiz "stack" görünümü devre dışı kalsın */
@media (max-width: 991.98px) {
    .inst-matrix,
    .inst-matrix-card,
    .inst-matrix-card thead,
    .inst-matrix-card tbody,
    .inst-matrix-card tr,
    .inst-matrix-card th,
    .inst-matrix-card td {
        display: table !important;
        width: auto !important;
    }

        .inst-matrix-card thead {
            display: table-header-group !important;
        }

        .inst-matrix-card tbody {
            display: table-row-group !important;
        }

        .inst-matrix-card tr {
            display: table-row !important;
        }
         
        .inst-matrix-card td {
            display: table-cell !important;
        }
}

/* ——— Mobil/Tablet için: kart içinde yatay scroll ——— */
@media (max-width: 1199.98px) {

    /* 1) Eski “block-table” hacklerini kesin olarak geri al */
    .inst-matrix-card {
        display: table !important;
        width: auto;
    }

        .inst-matrix-card thead {
            display: table-header-group !important;
        }

        .inst-matrix-card tbody {
            display: table-row-group !important;
        }

        .inst-matrix-card tr {
            display: table-row !important;
        }

        .inst-matrix-card th,
        .inst-matrix-card td {
            display: table-cell !important;
            white-space: nowrap;
        }



    /* 4) İlk sütunu (Tek Çekim / n Taksit) daraltarak yer aç */
    .inst-matrix-card col:first-child {
        width: 110px;
    }

    /* 5) Hücre içi kırpmayı önle, başlık logolar yatayda kalsın */
    .inst-matrix thead th.bank-head {
        text-align: left;
    }

    .inst-matrix .matrix-logo {
        height: 24px;
        width: auto;
        object-fit: contain;
    }

    /* Sayfa genelinde yatay kaydırmayı kapat; yalnız kart kayar */
    html, body {
        overflow-x: hidden;
    }
}

/* (opsiyonel) çizgileri istemiyorsan sadece tabloda kaldır */
@media (max-width: 1199.98px) {
    .inst-matrix-card > :not(caption) > * > * {
        border: 0;
    }
}

/* (opsiyonel) '—' hizası temiz dursun */
.dash {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    opacity: .55;
    line-height: 1;
}

    .dash::before {
        content: "—";
    }
/* === Mobil/Tablet: taksit tablosu kart İÇİNDE yatay kaydırılsın === */
@media (max-width: 1199.98px) {

    /* 1) Scroll konteyneri: kartın içinde yatay kaydırma */
    .inst-scroll {
        overflow: hidden;
    }

        .inst-scroll .matrix-clip {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch; /* iOS akışkan scroll */
            touch-action: pan-x; /* yatay sürüklemeyi açık tut */
            padding-bottom: 8px;
            /* kart gövdesi padding’i varsa scroll barı kesmesin */
            margin-inline: -12px;
            padding-inline: 12px;
        }

        /* 2) Tablo genişlesin ki scroll oluşsun */
        .inst-scroll .inst-matrix-card {
            display: inline-table !important; /* table davranışı korunur, inline genişler */
            width: auto !important; /* kapsayıcıya sığmaya çalışma */
            min-width: 1080px; /* marka sayısına göre 900–1200 arası oynatabilirsin */
            table-layout: fixed;
        }

    /* 3) İlk sütunu daralt (Tek Çekim / n Taksit kolonu fazla yer kaplamasın) */
    .inst-matrix-card col:first-child {
        width: 110px !important;
    }

    /* 4) Başlık/hucreler yine tablo gibi davransın; stacking’i engelle */
    .inst-matrix-card thead {
        display: table-header-group !important;
    }

    .inst-matrix-card tbody {
        display: table-row-group !important;
    }

    .inst-matrix-card tr {
        display: table-row !important;
    }

    .inst-matrix-card th,
    .inst-matrix-card td {
        display: table-cell !important;
        white-space: nowrap;
    }

    /* 5) Görsel ufak rötuşlar */
    .inst-matrix thead th.bank-head {
        text-align: left;
    }

    .inst-matrix .matrix-logo {
        height: 24px;
        width: auto;
        object-fit: contain;
    }

    /* Sayfanın tamamında yatay scroll’u kilitle; sadece kart kayar */
    html, body {
        overflow-x: hidden;
    }
}

/* === PAYMENTS MATRIX: FINAL FIT RULESET (drop-in overrides) === */
.inst-matrix-tight .inst-matrix-card,
.inst-matrix-card.inst-matrix--fit {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
}

/* ilk sütun dar, diğerleri eşit paylaşılsın */
.inst-matrix-card col:first-child {
    width: 120px !important;
}

.inst-matrix-card col.matrix-col {
    width: auto !important;
}

/* masaüstünde kart içi scroll kapalı; telefonda açık */
.inst-scroll {
    overflow-x: visible;
}

@media (max-width: 575.98px) {
    .inst-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .inst-scroll .inst-matrix-card {
            min-width: 720px !important;
            width: auto !important;
        }
}

/* başlık ve hücreler kompakt */
.inst-matrix thead th.bank-head {
    text-align: left !important;
    padding-left: .35rem !important;
    white-space: nowrap;
}

.inst-matrix-card > :not(caption) > * > * {
    padding: .45rem .4rem !important;
}

.matrix-clip {
    border-radius: 12px;
    overflow: hidden;
}

/* hücre içi: küçük boşluklar + küçük radio */
.inst-matrix .matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: .35rem !important;
}

    .inst-matrix .matrix-cell input[type="radio"] {
        width: 16px;
        height: 16px;
        margin: 0;
        transform: translateY(1px);
    }

/* logolar küçültülüp orantılanır */
.inst-matrix .matrix-logo {
    height: clamp(16px, 2.2vw, 22px) !important;
    max-width: 92px !important;
    width: auto !important;
    object-fit: contain;
}

/* tutarlar dar ama okunaklı */
.inst-matrix [data-calc], .inst-matrix td .text-muted {
    display: inline-block;
    min-width: 7ch !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    text-align: left !important;
}

/* önceki dosyadaki min-width ve sabit genişlikleri etkisiz bırak */
.inst-scroll > .inst-matrix-card,
.inst-matrix-card {
    min-width: 0 !important;
    max-width: none !important;
}

@media (min-width: 576px) {
    .inst-matrix-card col.matrix-col {
        width: auto !important;
    }
}

/* tek satırda kalsın, taşarsa üç nokta */
.inst-matrix-card th, .inst-matrix-card td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none !important;
}

/* === Checkout Matrix FINAL overrides (page-bottom) === */
/* Masaüstünde tablo tam sığsın; telefonlarda scroll */
.inst-scroll {
    overflow-x: visible !important;
}

@media (max-width: 575.98px) {
    .inst-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Daha önce verilmiş min-width genişletmelerini iptal et */
.inst-scroll > .inst-matrix-card,
.inst-matrix-card {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Sütun paylaştırma: ilk sütun sabit, diğerleri eşit (—brand-count HTML’den geliyor) */
.inst-matrix--fit {
    --first-col: 120px;
    width: 100% !important;
}

    .inst-matrix--fit col.first-col {
        width: var(--first-col) !important;
    }

    .inst-matrix--fit col.matrix-col {
        width: calc((100% - var(--first-col)) / var(--brand-count)) !important;
    }

/* Başlık ve hücreleri sıkılaştır → 7-8 marka rahat sığsın */
.inst-matrix thead th.bank-head {
    min-width: 0 !important;
    padding-left: .35rem !important;
    text-align: left !important;
}

.inst-matrix-card > :not(caption) > * > * {
    padding: .45rem .4rem !important;
}

/* Logo boyutlarını kompakt tut (7+ marka için) */
.inst-matrix .matrix-logo {
    height: clamp(16px, 2.2vw, 22px) !important;
    max-width: 92px !important;
    width: auto !important;
}

/* Radio + tutar boşluğunu en aza indir */
.inst-matrix .matrix-cell {
    gap: .35rem !important;
}

    .inst-matrix .matrix-cell input[type="radio"] {
        width: 16px;
        height: 16px;
        margin: 0;
        transform: translateY(1px);
    }

/* Tutar metnini dar ama okunaklı yap; hizayı bozma */
.inst-matrix [data-calc], .inst-matrix td .text-muted {
    display: inline-block;
    min-width: 7ch !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1,"lnum" 1;
    text-align: left !important;
}

/* Küçük-orta ekranlarda (sm/md) eski “stack” görünümleri devre dışı */
@media (max-width: 991.98px) {
    .inst-matrix, .inst-matrix-card, .inst-matrix-card thead, .inst-matrix-card tbody,
    .inst-matrix-card tr, .inst-matrix-card th, .inst-matrix-card td {
        display: table !important;
        width: auto !important;
    }
}

/* === 991 ve altinda: tablo yatay kaydirilsin, sayfa genisligi zorlanmasin === */

/* 1) Scroll kapsayici: 0–991px araliginda yatay scroll HER ZAMAN acik */
.inst-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
    .inst-scroll {
        overflow-x: visible !important;
    }
    /* masaüstünde kapat */
}

/* 2) Sayfa/genel kapsayici 980px'e kilitlenmesin (mobil/tablet) */
@media (max-width: 991.98px) {
    .hp-checkout-wrap,
    .checkout-narrow {
        max-width: 100% !important; /* clamp(980px,...) kuralini geçersiz kil */
    }
}

/* 3) Tablo min-genisligi: marka sayisina gore genislesin (scroll olussun) */
.inst-matrix--fit {
    --first-col: 120px;
    --col-min: 120px;
}
/* gerekirse 110–128 dene */
.inst-matrix-card {
    table-layout: fixed !important;
    width: max(100%, calc(var(--first-col) + var(--brand-count) * var(--col-min))) !important;
    min-width: calc(var(--first-col) + var(--brand-count) * var(--col-min)) !important;
}

/* 4) 576–991 araligi icin daha once eklenmis "stack/gizle" kurallarini etkisiz kil */
@media (max-width: 991.98px) {
    .inst-matrix,
    .inst-matrix-card,
    .inst-matrix-card thead,
    .inst-matrix-card tbody,
    .inst-matrix-card tr,
    .inst-matrix-card th,
    .inst-matrix-card td {
        display: table !important;
        width: auto !important;
    }

        .inst-matrix-card thead {
            display: table-header-group !important;
        }

        .inst-matrix-card tbody {
            display: table-row-group !important;
        }
}

@media (max-width: 991.98px) {
    .checkout-narrow, .hp-checkout-wrap {
        max-width: 100% !important;
    }
}

.inst-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
    .inst-scroll {
        overflow-x: visible !important;
    }
}

/* === LG altı (≤991px) kesin düzeltme === */
@media (max-width: 991.98px) {
    /* a) Kapsayıcı genişliği serbest bırak: clamp(980px,...) etkisiz */
    .checkout-narrow, .hp-checkout-wrap {
        max-width: 100% !important;
    }

    /* b) Bootstrap scroll çalışsın */
    .table-responsive-lg {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* c) Eski “stack/block” kurallarını ID seviyesinde iptal et */
    #tbl-individual, #tbl-commercial {
        display: table !important;
        table-layout: fixed !important;
    }

        #tbl-individual thead, #tbl-commercial thead {
            display: table-header-group !important;
        }

        #tbl-individual tbody, #tbl-commercial tbody {
            display: table-row-group !important;
        }

        #tbl-individual tr, #tbl-commercial tr {
            display: table-row !important;
        }

        #tbl-individual th, #tbl-individual td,
        #tbl-commercial th, #tbl-commercial td {
            display: table-cell !important;
            width: auto !important;
        }

    /* d) Hücre/padding/Logo kompakt */
    .inst-matrix-card > :not(caption) > * > * {
        padding: .36rem .30rem !important;
    }

    .inst-matrix .matrix-cell {
        gap: .26rem !important;
    }

    .inst-matrix .matrix-logo {
        height: 16px !important;
        max-width: 64px !important;
        width: auto !important;
    }

    .inst-matrix [data-calc] {
        min-width: 5.8ch !important;
        white-space: nowrap;
    }

    /* e) Min-genişliği marka sayısından üret → tablo genişse scroll */
    .inst-matrix--fit {
        --first-col: 110px;
        --col-min: 110px;
    }

    #tbl-individual, #tbl-commercial {
        min-width: calc(var(--first-col) + var(--brand-count) * var(--col-min)) !important;
        width: max(100%, calc(var(--first-col) + var(--brand-count) * var(--col-min))) !important;
    }
}

/* ≥992px masaüstü davranışı aynen kalsın (scroll kapalı) */
@media (min-width: 992px) {
    .table-responsive-lg {
        overflow: visible !important;
    }
}

/* ===== HP MATRIX — MOBILE SCROLL FIX (<=991px) ===== */
.hp-matrix .inst-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

@media (min-width:992px) {
    .hp-matrix .inst-scroll {
        overflow-x: visible !important;
    }
}

/* matrix-clip artık yok; olası kalıntıları etkisizleştir */
.hp-matrix .matrix-clip {
    overflow: visible !important;
}

/* Tablo genişliği: yer yetmezse scroll açılsın */
.hp-matrix .inst-matrix-card {
    table-layout: fixed !important;
    min-width: calc(var(--first-col,120px) + var(--brand-count,1)*var(--col-min,120px)) !important;
    width: max(100%, calc(var(--first-col,120px) + var(--brand-count,1)*var(--col-min,120px))) !important;
}

.hp-matrix .inst-matrix--fit col.first-col {
    width: var(--first-col,120px) !important;
}

.hp-matrix .inst-matrix--fit col.matrix-col {
    min-width: var(--col-min,120px) !important;
}

/* === HP Matrix: kesin override (en sonda dursun) === */
.hp-matrix .inst-scroll {
    overflow-x: auto !important; /* mobil/tablet scroll AÇIK */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

@media (min-width: 992px) {
    .hp-matrix .inst-scroll {
        overflow-x: visible !important;
    }
    /* masaüstünde görünürde scroll yok */
}

/* inst-scroll’u öldüren eski kuralları etkisizleştir */
@media (max-width: 1199.98px) {
    .hp-matrix .inst-scroll {
        overflow: visible !important;
    }
    /* overflow:hidden’i geçersiz kıl */
}

/* Tablo genişliği: marka sayısı kadar mecburi genişlesin ki scroll doğsun */
.hp-matrix .inst-matrix-card {
    table-layout: fixed !important;
    border-collapse: collapse !important;
    min-width: calc(var(--first-col,120px) + var(--brand-count,1) * var(--col-min,120px)) !important;
    width: max(100%, calc(var(--first-col,120px) + var(--brand-count,1) * var(--col-min,120px))) !important;
}

.hp-matrix .inst-matrix--fit col.first-col {
    width: var(--first-col,120px) !important;
}

.hp-matrix .inst-matrix--fit col.matrix-col {
    width: calc((100% - var(--first-col,120px)) / var(--brand-count,1)) !important;
    min-width: var(--col-min,120px) !important;
}

/* Yalnız checkout matrisi için: üst klipleri kaldır */
.hp-matrix, .hp-matrix .card, .hp-matrix .card-body, .hp-matrix .tab-content {
    overflow: visible !important;
}

/*========= */
/*========= */
/*========= */
/*========= */
/*========= */

/* HAPPSPAY – MATRIX V2 (minimal)  */
/* Amaç: kart içi yatay scroll + sticky ilk kolon */
.hp-matrix-v2 {
    --first-col: 120px; /* sol sabit kolon genişliği */
    --col-min: 120px; /* her banka sütunu min genişlik */
}

/* üst kapsayıcılar kırpmasın */
.hp-matrix-v2,
.hp-matrix-v2 .card,
.hp-matrix-v2 .card-body,
.hp-matrix-v2 .tab-content {
    overflow: visible !important;
}

    /* scroll portu (kartın içinde) */
    .hp-matrix-v2 .hp-mx {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    /* genişliği taşıyan iç kutu (tabloyu içerik kadar genişletir) */
    .hp-matrix-v2 .hp-mx-inner {
        display: inline-block;
        /* Razor inline min-width verdiyseniz o geçerli olur;
     yine de fallback olarak CSS değişkeniyle hesap bırakıyoruz. */
        min-width: calc(var(--first-col) + var(--brand-count,1) * var(--col-min)) !important;
    }

    /* tablo: genişlik içerikten gelsin, “table” olarak kalsın */
    .hp-matrix-v2 .hp-mx-table {
        border-collapse: collapse;
        table-layout: fixed;
        width: auto !important; /* %100 yapma */
        min-width: unset !important; /* min'i .hp-mx-inner belirler */
        display: table !important;
    }

        .hp-matrix-v2 .hp-mx-table thead {
            display: table-header-group !important;
        }

        .hp-matrix-v2 .hp-mx-table tbody {
            display: table-row-group !important;
        }

        .hp-matrix-v2 .hp-mx-table tr {
            display: table-row !important;
        }

        .hp-matrix-v2 .hp-mx-table th,
        .hp-matrix-v2 .hp-mx-table td {
            display: table-cell !important;
            vertical-align: middle;
        }

    /* colgroup: sabit ilk kolon + banka sütunları için min-width */
    .hp-matrix-v2 .inst-matrix--fit col.first-col {
        width: var(--first-col) !important;
    }

    .hp-matrix-v2 .inst-matrix--fit col.matrix-col {
        min-width: var(--col-min) !important;
    }

    /* sticky ilk kolon (thead ve tbody) */
    .hp-matrix-v2 .inst-matrix-card th:first-child,
    .hp-matrix-v2 .inst-matrix-card td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--bs-card-bg,#fff);
        width: var(--first-col);
        min-width: var(--first-col);
        max-width: var(--first-col);
        box-shadow: inset -1px 0 0 rgba(0,0,0,.06);
    }

    .hp-matrix-v2 .inst-matrix-card thead th:first-child {
        z-index: 3;
    }

/* =========================================================
   HAPPSPAY – MATRIX V2 (tamamen izole; çakışmaları bypass eder)
   Scope: .hp-matrix-v2
   ========================================================= */
.hp-matrix-v2 {
    --first-col: 120px;
    --col-min: 120px;
    --logo-h: 20px;
}

    /* Üst kapsayıcıların olası kliplerini kapat */
    .hp-matrix-v2, .hp-matrix-v2 .card, .hp-matrix-v2 .card-body, .hp-matrix-v2 .tab-content {
        overflow: visible !important;
    }

        /* ---------- Yeni scroll kabı ---------- */
        .hp-matrix-v2 .hp-mx {
            position: relative;
            display: block;
            width: 100%;
            max-width: 100%;
            overflow-x: auto !important; /* yatay kaydırma */
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
            overscroll-behavior-x: contain;
            scrollbar-gutter: stable both-edges; /* tarayıcı destekliyorsa titreşimi azaltır */
        }
/* Masaüstünde görünürde scrollbar istemiyorsan: */
@media (min-width: 992px) {
    .hp-matrix-v2 .hp-mx {
        overflow-x: visible !important;
    }
}

/* ---------- Tablo genişliği: marka sayısından türet ---------- */
.hp-matrix-v2 .hp-mx-table {
    border-collapse: collapse;
    table-layout: fixed;
    /* first-col + (brand-count * col-min) → içerik sığmazsa scroll doğar */
    min-width: calc(var(--first-col) + var(--brand-count,1) * var(--col-min)) !important;
    width: max(100%, calc(var(--first-col) + var(--brand-count,1) * var(--col-min))) !important;
    /* Eski düzenlerden gelebilecek “stack/block” kurallarını iptal et */
    display: table !important;
}

    .hp-matrix-v2 .hp-mx-table thead {
        display: table-header-group !important;
    }

    .hp-matrix-v2 .hp-mx-table tbody {
        display: table-row-group !important;
    }

    .hp-matrix-v2 .hp-mx-table tr {
        display: table-row !important;
    }

    .hp-matrix-v2 .hp-mx-table th,
    .hp-matrix-v2 .hp-mx-table td {
        display: table-cell !important;
        width: auto !important;
        vertical-align: middle;
    }

/* Kolon paylaştırma (genişken) + min genişlik (daralınca scroll) */
.hp-matrix-v2 .inst-matrix--fit col.first-col {
    width: var(--first-col) !important;
}

.hp-matrix-v2 .inst-matrix--fit col.matrix-col {
    width: calc((100% - var(--first-col)) / var(--brand-count,1)) !important;
    min-width: var(--col-min) !important;
}

/* ---------- Görsel/boşluk: kompakt + kararlı ---------- */
.hp-matrix-v2 .bank-head {
    padding: .6rem 0;
    white-space: nowrap;
}

.hp-matrix-v2 .hp-mx-table > :not(caption) > * > * {
    padding: .40rem .34rem;
}

.hp-matrix-v2 .matrix-logo {
    height: var(--logo-h);
    max-width: 88px;
    width: auto;
    object-fit: contain;
    object-position: center;
}

.hp-matrix-v2 .matrix-cell {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}

    .hp-matrix-v2 .matrix-cell input[type="radio"] {
        width: 15px;
        height: 15px;
        margin: 0;
        transform: translateY(1px);
    }

.hp-matrix-v2 [data-calc] {
    min-width: 6.6ch;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* ---------- Çok marka gelince otomatik sıkılaştırma (opsiyonel) ---------- */
.hp-matrix-v2 .inst-matrix--fit[data-brands="9"] {
    --first-col: 110px;
    --col-min: 112px;
    --logo-h: 18px;
}

.hp-matrix-v2 .inst-matrix--fit[data-brands="10"] {
    --first-col: 104px;
    --col-min: 108px;
    --logo-h: 16px;
}

/* === MATRIX V2 – “ölçüm kutusu” ile kesin kaydırma === */
.hp-matrix-v2 {
    --first-col: 120px;
    --col-min: 120px;
}

    /* Scroll portu (zaten vardı, yine dursun) */
    .hp-matrix-v2 .hp-mx {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    /* ÖLÇÜM KUTUSU: inline-block → gerçek genişlik kadar uzar ve parent’a overflow üretir */
    .hp-matrix-v2 .hp-mx-inner {
        display: inline-block; /* kritik */
        min-width: calc(var(--first-col) + var(--brand-count,1) * var(--col-min)) !important;
    }

    /* Tabloyu “içerik kadar” yap: genişliği ölçüm kutusu belirlesin */
    .hp-matrix-v2 .hp-mx-table {
        border-collapse: collapse;
        table-layout: fixed;
        width: auto !important; /* kritik: %100 yapma */
        min-width: unset !important;
        display: table !important;
    }

        .hp-matrix-v2 .hp-mx-table thead {
            display: table-header-group !important;
        }

        .hp-matrix-v2 .hp-mx-table tbody {
            display: table-row-group !important;
        }

        .hp-matrix-v2 .hp-mx-table tr {
            display: table-row !important;
        }

        .hp-matrix-v2 .hp-mx-table th, .hp-matrix-v2 .hp-mx-table td {
            display: table-cell !important;
        }

    /* Kolon paylaştırma (geniş ekranda) */
    .hp-matrix-v2 .inst-matrix--fit col.first-col {
        width: var(--first-col) !important;
    }

    .hp-matrix-v2 .inst-matrix--fit col.matrix-col {
        width: calc((100% - var(--first-col)) / var(--brand-count,1)) !important;
        min-width: var(--col-min) !important;
    }

    /* ===============================
   MATRIX V2 – full-bleed + scroll
   =============================== */

    /* 0) Üst kapsayıcılarda klip yok */
    .hp-matrix-v2, .hp-matrix-v2 .card, .hp-matrix-v2 .card-body, .hp-matrix-v2 .tab-content {
        overflow: visible !important;
    }

        /* 1) Scroll portu */
        .hp-matrix-v2 .hp-mx {
            display: block;
            position: relative;
            max-width: 100%;
            overflow-x: auto !important;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
            overscroll-behavior-x: contain;
        }

        /* 2) Ölçüm kutusu: içerik kadar genişlesin */
        .hp-matrix-v2 .hp-mx-inner {
            display: inline-block;
            /* min-width'i Razor’da inline verdin; yine de bir alt sınır dursun */
            min-width: 240px;
        }

/* 3) Masaüstünde scroll gerekmez */
@media (min-width:992px) {
    .hp-matrix-v2 .hp-mx {
        overflow-x: visible !important;
    }
}

/* 4) MOBILE/TABLET (<=991): container sınırlarını kır ve viewport genişliğine otur
      Böylece dış genişlik ~ cihaz genişliği olur; iç 1200px > dış → scroll DOĞAR. */
@media (max-width: 991.98px) {
    /* kartı container'dan "full-bleed" çıkar */
    .hp-matrix-v2 {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
        /* scroll portu da viewport kadar olsun */
        .hp-matrix-v2 .hp-mx {
            width: 100vw !important;
            max-width: 100vw !important;
        }
}

/* 5) Tablo: table layout sabit, genişlik içerikten gelsin */
.hp-matrix-v2 .hp-mx-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: auto !important; /* içerik kadar */
    min-width: unset !important; /* min'i inner belirliyor */
    display: table !important;
}

    .hp-matrix-v2 .hp-mx-table thead {
        display: table-header-group !important;
    }

    .hp-matrix-v2 .hp-mx-table tbody {
        display: table-row-group !important;
    }

    .hp-matrix-v2 .hp-mx-table tr {
        display: table-row !important;
    }

    .hp-matrix-v2 .hp-mx-table th,
    .hp-matrix-v2 .hp-mx-table td {
        display: table-cell !important;
    }

/* 6) Kolon paylaştırma (genişken) */
.hp-matrix-v2 .inst-matrix--fit col.first-col {
    width: 120px !important;
}

.hp-matrix-v2 .inst-matrix--fit col.matrix-col {
    width: calc((100% - 120px)/var(--brand-count,1)) !important;
    min-width: 120px !important;
}

/* ==== MATRIX V2 — ilk kolonu sticky, scroll kart içinde ==== */

/* scroll portu kartın içinde kalsın (emin olmak için) */
.hp-matrix-v2 .card-body,
.hp-matrix-v2 .hp-mx {
    overflow: visible !important; /* parentler kırpmasın */
}

.hp-matrix-v2 .hp-mx {
    overflow-x: auto !important; /* yatay scroll açık */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ➊ Sol ilk kolonu sabitle (thead ve tbody) */
.hp-matrix-v2 .inst-matrix-card th:first-child,
.hp-matrix-v2 .inst-matrix-card td:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* diğer hücrelerin üstünde */
    background: var(--bs-card-bg, #fff); /* kart zeminiyle aynı */
    min-width: var(--first-col,120px);
    max-width: var(--first-col,120px);
    width: var(--first-col,120px);
    box-shadow: inset -1px 0 0 rgba(0,0,0,.06); /* sağ kenarda ince ayraç */
}
/* thead’daki ilk hücre bir tık daha üste */
.hp-matrix-v2 .inst-matrix-card thead th:first-child {
    z-index: 3;
}

/* ==== MATRIX V2 — ilk kolonu sticky, scroll kart içinde ==== */

/* scroll portu kartın içinde kalsın (emin olmak için) */
.hp-matrix-v2 .card-body,
.hp-matrix-v2 .hp-mx {
    overflow: visible !important; /* parentler kırpmasın */
}

.hp-matrix-v2 .hp-mx {
    overflow-x: auto !important; /* yatay scroll açık */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ➊ Sol ilk kolonu sabitle (thead ve tbody) */
.hp-matrix-v2 .inst-matrix-card th:first-child,
.hp-matrix-v2 .inst-matrix-card td:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* diğer hücrelerin üstünde */
    background: var(--bs-card-bg, #fff); /* kart zeminiyle aynı */
    min-width: var(--first-col,120px);
    max-width: var(--first-col,120px);
    width: var(--first-col,120px);
    box-shadow: inset -1px 0 0 rgba(0,0,0,.06); /* sağ kenarda ince ayraç */
}
/* thead’daki ilk hücre bir tık daha üste */
.hp-matrix-v2 .inst-matrix-card thead th:first-child {
    z-index: 3;
}

/* Kartın dışına taşan kısmı kes; scroll zaten .hp-mx üzerinde */
.hp-matrix-v2 .card,
.hp-matrix-v2 .card-body {
    overflow: hidden !important; /* radius içinde kalsın */
}

/* Sticky kolon: beyaz zemin + yüksek z-index */
.hp-matrix-v2 .inst-matrix-card th:first-child,
.hp-matrix-v2 .inst-matrix-card td:first-child {
    background: #fff !important; /* şeffaflık yok */
    z-index: 20 !important; /* kayan hücrelerin üstünde */
    position: sticky; /* mevcut */
    left: 0; /* mevcut */
}

/* Sağ kenara beyaz maske (altından geçiyormuş gibi görünmesin) */
.hp-matrix-v2 .inst-matrix-card th:first-child,
.hp-matrix-v2 .inst-matrix-card td:first-child {
    position: sticky;
    left: 0; /* zaten vardı, pekiştirme */
}

    .hp-matrix-v2 .inst-matrix-card th:first-child::after,
    .hp-matrix-v2 .inst-matrix-card td:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;
        bottom: 0; /* sticky kolonun SAĞINA 10px’lik perde */
        width: 10px;
        background: linear-gradient(to right, #fff 70%, rgba(255,255,255,0));
        pointer-events: none;
    }

/* Scroll alanının SONUNDA küçük bir pay bırak */
.hp-matrix-v2 .hp-mx-inner::after {
    content: "";
    display: inline-block;
    width: 16px; /* istersen 20px yapabilirsin */
    height: 1px;
}