/* ══════════════════════════════════════════════════════════════════════
   Komisyon Oranları (/hizmet-bedellerimiz)
   ----------------------------------------------------------------------
   Paydaşların yayımladığı "Hizmet Bedellerini Sabitledik!" görselinin
   sayfa hâli. Görseldeki sıra korunur: yeşil üst satır, iki pembe başlık,
   beyaz çizgili pembe tarife tablosu, "+KDV'dir." satırı, geçerlilik notu
   ve sloganlı logo. Yazılar resim değil metin olduğu için her ekranda
   keskin kalır ve aranabilir.

   Kart kendi genişliğine göre ölçeklenir (container query, cqi): tablo dar
   ekranda da görseldeki oranını korur. Desteklemeyen tarayıcı her kuralın
   önündeki sabit değere düşer.

   Hareket: başlık ve tablo yumuşakça belirir, satırlar sırayla soldan
   kayarak gelir; ardından birkaç saniyede bir tablonun üzerinden soldan
   sağa bir ışık geçer (araç detayındaki ci-cta-sheen ile aynı eğri).
   Hareket azaltma tercihinde hiçbiri çalışmaz.
   ══════════════════════════════════════════════════════════════════════ */

.service-fees-page {
    --sf-pink: var(--brand-primary);
    --sf-pink-deep: #dc2f8b;
    --sf-green: #17924a;
    --sf-line: rgba(255, 255, 255, .95);
}

/* ── Kart ──────────────────────────────────────────────────────────── */
.sf-card {
    position: relative;
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 40px 44px 30px;
    padding: clamp(26px, 5vw, 46px) clamp(10px, 3.2vw, 44px) clamp(20px, 3.6vw, 32px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(70% 42% at 50% 0%, rgba(var(--brand-rgb), .07) 0%, rgba(var(--brand-rgb), 0) 72%),
        var(--surface-card);
    box-shadow: var(--shadow-raised);
    container-type: inline-size;
}

/* ── Başlık ────────────────────────────────────────────────────────── */
.sf-head { text-align: center; }

.sf-head .sf-kicker {
    margin: 0;
    color: var(--sf-green);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 21px;
    font-size: clamp(15px, 3cqi, 22px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.sf-head .sf-title,
.sf-head .sf-subtitle {
    margin: 0;
    color: var(--sf-pink);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 32px;
    font-size: clamp(22px, 4.7cqi, 34px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.sf-head .sf-title { margin-top: 6px; }

/* ── Tablo ─────────────────────────────────────────────────────────── */
.sf-table-wrap {
    --sf-rule: 3px;
    position: relative;
    overflow: hidden;
    margin-top: 28px;
    margin-top: clamp(20px, 4.2cqi, 32px);
    border-radius: 26px;
    border-radius: clamp(16px, 3.6cqi, 28px);
    background: linear-gradient(165deg, #f04ba4 0%, var(--sf-pink) 42%, var(--sf-pink-deep) 100%);
    box-shadow:
        0 18px 30px -20px rgba(var(--brand-rgb), .6),
        0 12px 22px -14px rgba(13, 21, 38, .32);
}

/* Değişkenin değeri kullanıldığı yerde çözülür; cqi'yi tanımayan tarayıcıda
   çizgi hiç çizilmesin diye dar ekran inceltmesi yalnızca destek varken. */
@supports (width: 1cqi) {
    .sf-table-wrap { --sf-rule: clamp(2px, .42cqi, 3px); }
}

/* Işık: yarı saydam beyaz, eğik bir bant. Yazılar beyaz olduğu için bandın
   üstte durması metni bozmaz, yalnızca pembe zemini aydınlatır. */
.sf-table-wrap::after {
    position: absolute;
    inset: -10% auto -10% 0;
    width: 38%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 32%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .12) 68%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-140%) skewX(-18deg);
    pointer-events: none;
    content: "";
}

.sf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #fff;
}

/* Dar kartta aralık sütunu biraz daha geniş: en uzun aralık
   ("1.000.000 – 1.499.999 TL") 360 px'lik telefonda da tek satırda kalır.
   Genişlikte görseldeki orana döner. */
.sf-table__col-range { width: 58%; }

@container (min-width: 560px) {
    .sf-table__col-range { width: 55%; }
}

.sf-table th,
.sf-table td {
    padding: 0;
    border: 0;
    vertical-align: middle;
}

/* Satır çizgileri hücrelerde: her hücre kendi çizgisini taşıdığı için
   satırlar kayarak gelirken çizgiler de satırla birlikte hareket eder.
   Dikey çizgi başlıktan dipnota kadar kesintisiz iner. */
.sf-table tbody > tr > *,
.sf-table tfoot > tr > * { border-top: var(--sf-rule) solid var(--sf-line); }

.sf-table tr > :nth-child(2) { border-left: var(--sf-rule) solid var(--sf-line); }

.sf-table thead th {
    padding: 34px 12px;
    padding: clamp(16px, 4.8cqi, 40px) clamp(6px, 1.8cqi, 14px);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 34px;
    font-size: clamp(17px, 5.4cqi, 36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-align: center;
}

.sf-table tbody th,
.sf-table tbody td {
    padding: 11px 32px;
    padding: clamp(8px, 1.9cqi, 14px) clamp(8px, 4.4cqi, 36px);
    font-size: 23px;
    font-size: clamp(12px, 4cqi, 24px);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    transition: background var(--dur-base) var(--ease);
}

/* Aralık metni sola yaslı; sağındaki boşluk yalnızca satır kırılmasını
   etkilediği için dar tutulur. */
.sf-table tbody th {
    padding-right: 12px;
    padding-right: clamp(6px, 1.6cqi, 12px);
    font-weight: 600;
    text-align: left;
    text-wrap: balance;
}

.sf-table tbody td {
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.sf-table tbody tr:hover > * { background: rgba(255, 255, 255, .09); }

.sf-table tfoot td {
    padding: 12px;
    padding: clamp(9px, 2.2cqi, 16px) clamp(8px, 2cqi, 14px);
    font-size: 16px;
    font-size: clamp(12px, 2.4cqi, 17px);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.sf-table tfoot strong { font-weight: 800; }

/* ── Dipnot ve logo ────────────────────────────────────────────────── */
.sf-foot {
    display: grid;
    justify-items: center;
    gap: 26px;
    gap: clamp(18px, 3.8cqi, 30px);
    margin-top: 16px;
    margin-top: clamp(12px, 2.4cqi, 18px);
}

.sf-foot .sf-note {
    justify-self: start;
    margin: 0;
    padding-left: 4px;
    color: var(--brand-primary-active);
    font-size: 14px;
    font-size: clamp(12px, 2cqi, 15px);
    font-weight: 700;
    line-height: 1.4;
}

.sf-note > span { margin-right: 12px; }

.sf-foot .sf-logo {
    display: block;
    width: 220px;
    width: clamp(170px, 30cqi, 236px);
    max-width: 100%;
    height: auto;
}

.sf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Hareket ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .sf-head > * { animation: sf-rise .6s var(--ease) both; }
    .sf-head > :nth-child(2) { animation-delay: .08s; }
    .sf-head > :nth-child(3) { animation-delay: .16s; }

    .sf-table-wrap { animation: sf-rise .6s var(--ease) .22s both; }

    .sf-table tbody tr,
    .sf-table tfoot tr { animation: sf-slide-in .55s var(--ease) both; }
    .sf-table tbody tr:nth-child(1) { animation-delay: .42s; }
    .sf-table tbody tr:nth-child(2) { animation-delay: .49s; }
    .sf-table tbody tr:nth-child(3) { animation-delay: .56s; }
    .sf-table tbody tr:nth-child(4) { animation-delay: .63s; }
    .sf-table tbody tr:nth-child(5) { animation-delay: .70s; }
    .sf-table tbody tr:nth-child(6) { animation-delay: .77s; }
    .sf-table tfoot tr { animation-delay: .84s; }

    .sf-foot { animation: sf-rise .6s var(--ease) .9s both; }

    /* İlk geçiş satırlar yerleştikten sonra; sonra her 5,6 saniyede bir. */
    .sf-table-wrap::after { animation: sf-sheen 5.6s cubic-bezier(.45, 0, .2, 1) 1.5s infinite; }
}

@keyframes sf-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes sf-slide-in {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: none; }
}

@keyframes sf-sheen {
    0% { transform: translateX(-140%) skewX(-18deg); }
    34%, 100% { transform: translateX(310%) skewX(-18deg); }
}

/* Yazdırırken pembe zemin ve beyaz çizgiler korunur; ışık basılmaz. */
@media print {
    .sf-card { border: 0; box-shadow: none; }
    .sf-table-wrap {
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .sf-table-wrap::after { display: none; }
}