/* /kredi-hesaplama — Esnaf Kefalet mevzuatına uygun detaylı hesaplama aracı.
 * Tasarım site temasını (--background, --foreground, --primary, --accent, --secondary)
 * referans alır ve koyu/açık tema arasında otomatik geçer.
 *
 * Tüm interaktif davranış (slider, anlık hesaplama, ödeme planı toggle, PDF) JS
 * tarafında işlenir; bu dosya yalnızca görünüm sağlar.
 */

.khesap-page {
    --khesap-accent: var(--accent, #06b6d4);
    --khesap-primary: var(--primary, #4f46e5);
    --khesap-secondary: var(--secondary, #00a8a5);
    --khesap-fg: var(--foreground, #0a0a0a);
    --khesap-bg: var(--background, #fff);
    --khesap-fg-soft: color-mix(in srgb, var(--khesap-fg) 70%, transparent);
    --khesap-fg-mute: color-mix(in srgb, var(--khesap-fg) 55%, transparent);
    --khesap-border: color-mix(in srgb, var(--khesap-fg) 12%, transparent);
    --khesap-border-strong: color-mix(in srgb, var(--khesap-fg) 18%, transparent);
    --khesap-surface: color-mix(in srgb, var(--khesap-fg) 4%, var(--khesap-bg));
    --khesap-surface-2: color-mix(in srgb, var(--khesap-fg) 7%, var(--khesap-bg));
    --khesap-elev: 0 25px 60px -22px color-mix(in srgb, var(--khesap-fg) 35%, transparent);
    --khesap-radius-xl: 1.75rem;
    --khesap-radius-lg: 1.25rem;
    --khesap-radius-md: 0.85rem;

    position: relative;
    margin: 0 auto;
    padding: 0 0 4rem;
    max-width: 1240px;
}

/* .page-kredi base'i 900px'lik dar bir yerleşim veriyor; hesaplama aracının
 * iki sütunlu grid'i için override ediyoruz. */
.page-kredi.khesap-page {
    max-width: 1240px;
}

/* Başlık boyutu kredi-cesitleri sayfası ile aynı: clamp(1.75rem, 4vw, 2.35rem)
 * `.page-kredi .kredi-hero h1` selektörü zaten theme.css'te tanımlı olduğu
 * için ekstra override gerekmiyor — burada yalnızca gradient için renk
 * tonunu, kredi-cesitleri ile birebir eşleşecek şekilde garantiliyoruz. */

/* ---- Ana grid ---- */
.khesap-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.75rem;
    padding: 1rem 0 0;
}
@media (max-width: 960px) {
    .khesap-main { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Panel (form ve sonuç kartları için ortak çerçeve) ---- */
.khesap-panel {
    position: relative;
    background: var(--khesap-surface);
    border: 1px solid var(--khesap-border);
    border-radius: var(--khesap-radius-xl);
    padding: 2rem;
    overflow: hidden;
}
.khesap-panel--form::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--khesap-accent), var(--khesap-primary), var(--khesap-accent));
}
.khesap-panel__title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--khesap-fg);
}
.khesap-panel__title-icon { color: var(--khesap-accent); width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.khesap-panel__title-icon--soft { color: var(--khesap-fg-mute); }

/* ---- Form grup başlıkları ---- */
.khesap-field-label {
    display: block;
    margin: 0 0 0.55rem;
    color: var(--khesap-fg-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---- Kredi türü seçimi ---- */
.khesap-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}
.khesap-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 0.55rem;
    background: var(--khesap-bg);
    color: var(--khesap-fg-mute);
    border: 1px solid var(--khesap-border-strong);
    border-radius: var(--khesap-radius-md);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 160ms ease;
}
.khesap-type-btn svg { width: 18px; height: 18px; }
.khesap-type-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--khesap-fg) 35%, transparent);
    color: var(--khesap-fg);
}
.khesap-type-btn[aria-pressed="true"] {
    background: var(--khesap-active-bg, var(--khesap-accent));
    border-color: var(--khesap-active-bg, var(--khesap-accent));
    color: #fff;
    box-shadow: 0 8px 26px -10px var(--khesap-active-bg, var(--khesap-accent));
}
.khesap-type-btn--business[aria-pressed="true"] { --khesap-active-bg: var(--khesap-accent); }
.khesap-type-btn--building[aria-pressed="true"] { --khesap-active-bg: var(--khesap-primary); }
.khesap-type-btn--vehicle[aria-pressed="true"] { --khesap-active-bg: var(--khesap-secondary); }

/* ---- Tutar & tarih satırı ---- */
.khesap-row-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 1.25rem;
}
@media (max-width: 480px) {
    .khesap-row-2 { grid-template-columns: minmax(0, 1fr); }
}
.khesap-input-wrap { position: relative; }
.khesap-input-prefix {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--khesap-fg-mute);
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
}
.khesap-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: color-mix(in srgb, var(--khesap-bg) 75%, transparent);
    color: var(--khesap-fg);
    border: 1px solid var(--khesap-border-strong);
    border-radius: var(--khesap-radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.khesap-input:focus {
    outline: none;
    border-color: var(--khesap-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--khesap-accent) 22%, transparent);
}
.khesap-input--amount {
    padding-left: 1.7rem;
    color: var(--khesap-accent);
    text-align: right;
}
.khesap-input--date {
    color-scheme: light dark;
}

/* ---- Range slider ---- */
.khesap-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: color-mix(in srgb, var(--khesap-fg) 18%, transparent);
    border-radius: 999px;
    cursor: pointer;
    outline: none;
    margin: 0;
}
.khesap-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--khesap-range-color, var(--khesap-accent));
    border: 3px solid var(--khesap-bg);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--khesap-fg) 30%, transparent);
    cursor: pointer;
    transition: transform 120ms ease;
}
.khesap-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--khesap-range-color, var(--khesap-accent));
    border: 3px solid var(--khesap-bg);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--khesap-fg) 30%, transparent);
    cursor: pointer;
}
.khesap-range:focus::-webkit-slider-thumb { transform: scale(1.1); }
.khesap-range--amount { --khesap-range-color: var(--khesap-accent); }
.khesap-range--term { --khesap-range-color: var(--khesap-primary); margin-bottom: 0.25rem; }

.khesap-range-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.4rem;
}
.khesap-range-row .khesap-field-label { margin: 0; }
.khesap-range-value {
    color: var(--khesap-primary);
    font-weight: 800;
    font-size: 0.9rem;
}

.khesap-section-group { margin-bottom: 1.25rem; }
.khesap-section-group:last-child { margin-bottom: 0; }

/* ---- Ödeme sıklığı butonları ---- */
.khesap-freq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.khesap-freq-btn {
    padding: 0.6rem 0.5rem;
    background: var(--khesap-bg);
    color: var(--khesap-fg-mute);
    border: 1px solid var(--khesap-border-strong);
    border-radius: var(--khesap-radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 140ms ease;
}
.khesap-freq-btn:hover {
    border-color: color-mix(in srgb, var(--khesap-fg) 35%, transparent);
    color: var(--khesap-fg);
}
.khesap-freq-btn[aria-pressed="true"] {
    background: var(--khesap-accent);
    border-color: var(--khesap-accent);
    color: #fff;
}

/* ---- Bilgi şeridi ---- */
.khesap-info {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--khesap-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--khesap-primary) 28%, transparent);
    border-radius: var(--khesap-radius-md);
}
.khesap-info svg { color: var(--khesap-primary); flex-shrink: 0; margin-top: 0.15rem; }
.khesap-info p { margin: 0; color: var(--khesap-fg-soft); font-size: 0.78rem; line-height: 1.55; }

/* ---- Sağ panel: özet kartları ---- */
.khesap-result-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}
.khesap-summary-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 600px) {
    .khesap-summary-cards { grid-template-columns: minmax(0, 1fr); }
}
.khesap-card {
    position: relative;
    padding: 1.6rem 1.4rem;
    border-radius: var(--khesap-radius-xl);
    overflow: hidden;
    background: var(--khesap-surface-2);
    border: 1px solid var(--khesap-border);
}
.khesap-card--accent {
    background: linear-gradient(155deg, color-mix(in srgb, var(--khesap-accent) 22%, transparent), color-mix(in srgb, var(--khesap-bg) 80%, transparent));
    border-color: color-mix(in srgb, var(--khesap-accent) 35%, transparent);
}
.khesap-card--primary {
    background: linear-gradient(155deg, color-mix(in srgb, var(--khesap-primary) 22%, transparent), color-mix(in srgb, var(--khesap-bg) 80%, transparent));
    border-color: color-mix(in srgb, var(--khesap-primary) 35%, transparent);
}
.khesap-card__label {
    margin: 0 0 0.4rem;
    color: var(--khesap-fg-mute);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.khesap-card__value {
    margin: 0 0 0.85rem;
    color: var(--khesap-fg);
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.khesap-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}
.khesap-card--accent .khesap-card__pill {
    color: var(--khesap-accent);
    background: color-mix(in srgb, var(--khesap-accent) 18%, transparent);
}
.khesap-card--primary .khesap-card__pill {
    color: var(--khesap-primary);
    background: color-mix(in srgb, var(--khesap-primary) 18%, transparent);
}

/* ---- Döküm panelleri (kesinti / geri ödeme özeti) ---- */
.khesap-detail {
    background: var(--khesap-surface);
    border: 1px solid var(--khesap-border);
    border-radius: var(--khesap-radius-xl);
    padding: 1.5rem 1.5rem 1.25rem;
}
.khesap-detail__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.95rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--khesap-border);
    color: var(--khesap-fg);
    font-size: 1rem;
    font-weight: 700;
}
.khesap-detail__title svg { width: 1rem; height: 1rem; color: var(--khesap-fg-mute); }

.khesap-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.5rem;
}
@media (max-width: 520px) {
    .khesap-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
.khesap-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.khesap-detail-row__k { color: var(--khesap-fg-mute); }
.khesap-detail-row__v { color: var(--khesap-fg-soft); font-weight: 600; }
.khesap-detail-row--span {
    grid-column: 1 / -1;
    padding-top: 0.6rem;
    border-top: 1px solid var(--khesap-border);
    margin-top: 0.2rem;
}
.khesap-detail-row--total {
    grid-column: 1 / -1;
    font-size: 0.95rem;
    font-weight: 800;
}
.khesap-detail-row--total-deduction { color: #ef4444; }
.khesap-detail-row--total-deduction .khesap-detail-row__v { color: inherit; }

.khesap-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.khesap-summary-list .khesap-detail-row { font-size: 0.82rem; }
.khesap-summary-list .khesap-detail-row--total {
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--khesap-border);
    color: var(--khesap-accent);
    font-size: 0.95rem;
}
.khesap-summary-list .khesap-detail-row--total .khesap-detail-row__v { color: inherit; }

/* ---- Plan toggle ---- */
.khesap-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--khesap-fg) 8%, transparent);
    color: var(--khesap-fg);
    border: 1px solid var(--khesap-border);
    border-radius: var(--khesap-radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.khesap-toggle-btn:hover {
    background: color-mix(in srgb, var(--khesap-fg) 14%, transparent);
}
.khesap-toggle-btn svg { width: 1.1rem; height: 1.1rem; }

/* ---- Tablo + aksiyonlar ---- */
.khesap-schedule {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    padding: 0;
    transition: max-height 600ms ease, opacity 320ms ease, margin-top 320ms ease;
    overflow: hidden;
    scroll-margin-top: 140px;
}
.khesap-schedule[hidden] {
    display: block !important;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}
.khesap-schedule:not([hidden]) {
    max-height: 8000px;
    opacity: 1;
}

.khesap-schedule__shell {
    background: var(--khesap-surface);
    border: 1px solid var(--khesap-border);
    border-radius: var(--khesap-radius-xl);
    overflow: hidden;
}
.khesap-schedule__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: color-mix(in srgb, var(--khesap-bg) 55%, transparent);
    border-bottom: 1px solid var(--khesap-border);
}
.khesap-schedule__title {
    margin: 0;
    color: var(--khesap-fg);
    font-size: 1.15rem;
    font-weight: 700;
}
.khesap-schedule__actions { display: inline-flex; gap: 0.6rem; }

.khesap-btn-secondary,
.khesap-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: var(--khesap-radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
    border: 1px solid transparent;
}
.khesap-btn-secondary {
    background: color-mix(in srgb, var(--khesap-fg) 8%, transparent);
    color: var(--khesap-fg);
    border-color: var(--khesap-border);
}
.khesap-btn-secondary:hover { background: color-mix(in srgb, var(--khesap-fg) 14%, transparent); }
.khesap-btn-primary {
    background: var(--khesap-primary);
    color: #fff;
    box-shadow: 0 12px 28px -14px var(--khesap-primary);
}
.khesap-btn-primary:hover { transform: translateY(-1px); }
.khesap-btn-primary:disabled,
.khesap-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.khesap-spin {
    animation: khesap-spin 700ms linear infinite;
    width: 14px;
    height: 14px;
}
@keyframes khesap-spin { to { transform: rotate(360deg); } }

/* HTML5 `[hidden]` user-agent stilini SVG elementleri almıyor (SVG namespace
 * dışında olduğu için); bu nedenle yazdır/paylaş spinner SVG'leri ve chevron
 * ikonları "hidden" attribute'una rağmen ekranda kalıp dönüyordu. Bu kural
 * `hidden` attribute'unun SVG dahil tüm öğeleri gizlemesini garantiler. */
.khesap-page [hidden] { display: none !important; }

.khesap-table-wrap {
    overflow-x: auto;
}
.khesap-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--khesap-fg-soft);
    font-size: 0.85rem;
}
.khesap-table thead th {
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--khesap-bg) 35%, transparent);
    color: var(--khesap-fg-mute);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--khesap-border);
    white-space: nowrap;
}
.khesap-table tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--khesap-border);
    white-space: nowrap;
}
.khesap-table tbody tr:hover td { background: color-mix(in srgb, var(--khesap-fg) 4%, transparent); }
.khesap-table tbody td:first-child { color: var(--khesap-fg); font-weight: 600; }
.khesap-table .khesap-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.khesap-table .khesap-cell-total { color: var(--khesap-accent); font-weight: 700; }
.khesap-table tfoot td {
    padding: 0.85rem 1rem;
    background: var(--khesap-surface);
    color: var(--khesap-fg);
    font-weight: 800;
    border-top: 1px solid var(--khesap-border-strong);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}
.khesap-table tfoot td.khesap-cell-num { font-size: 0.85rem; }
.khesap-table tfoot td.khesap-cell-total { color: var(--khesap-accent); }

/* Mobile typografi düşürme */
@media (max-width: 640px) {
    .khesap-panel { padding: 1.5rem; }
}

/* Dark theme override (renk-mix yeteneği olmayan tarayıcılar için fallback yumuşatması) */
html[data-theme="dark"] .khesap-input {
    background: rgba(15, 23, 42, 0.55);
}
html[data-theme="dark"] .khesap-type-btn,
html[data-theme="dark"] .khesap-freq-btn {
    background: rgba(15, 23, 42, 0.55);
}
html[data-theme="dark"] .khesap-detail-row--total-deduction { color: #f87171; }