/* ==========================================================================
   Fiyat endeksi sayfaları — /fiyat, /fiyat/{kategori}, /fiyat/{kategori}/{marka}

   HER ŞEY .fiyat-page ALTINA KAPSANMIŞTIR. Sebep: tema (public/frontend/css)
   `section`, `.accordion` gibi seçicilere `float: left` veriyor. Kapsamsız bir
   kural yazmak temanın diğer sayfalarını bozar; kapsamsız BIRAKMAK ise bu
   sayfayı bozar (03.08.2026: metodoloji kutusu float'lu akordeonun etrafından
   akıp içine girdi). Bu yüzden aşağıda float'lar açıkça sıfırlanıyor.

   Bootstrap accordion KULLANILMIYOR — float'u tema veriyor ve JS'e bağımlı.
   Yerine native <details>/<summary>: JS gerektirmez, klavyeyle çalışır,
   arama motoru içeriği kapalıyken de okur.

   Palet temanın kendi değişkenlerinden türetildi; yeni marka rengi
   uydurulmadı. Vurgu (--fy-signal) YALNIZCA medyan işaretinde kullanılır.
   ========================================================================== */

.fiyat-page {
    --fy-ink: #1d1d1d;
    --fy-mute: #6d6d6d;
    --fy-deep: #265446;
    --fy-signal: #04d193;
    --fy-surface: #f7faf9;
    --fy-hairline: #e6ebe9;
    --fy-rail: #eceff0;

    color: var(--fy-ink);
    text-align: left;
}

/* Tema `section`a float veriyor; sayfa akışını geri alıyoruz. */
.fiyat-page,
.fiyat-page > .container {
    float: none;
}

.fiyat-page .fy-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* --- Ortak etiket: 12px, versal, harf aralıklı. Sayfanın ikinci sesi. ----- */
.fiyat-page .fy-label {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fy-mute);
}

/* --- Başlık bloğu --------------------------------------------------------- */
.fiyat-page .fy-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fy-deep);
    margin-bottom: 10px;
}

.fiyat-page h1.fy-title {
    font-size: clamp(28px, 4.2vw, 46px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
    padding: 0;
}

.fiyat-page h1.fy-title strong {
    font-weight: 700;
}

.fiyat-page .fy-lede {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: #3f3f3f;
    max-width: 62ch;
    margin: 0 0 4px;
    padding: 0;
}

.fiyat-page .fy-lede strong {
    color: var(--fy-ink);
    font-weight: 700;
}

.fiyat-page .fy-stamp {
    font-size: 12px;
    color: var(--fy-mute);
    margin: 10px 0 0;
    padding: 0;
}

/* --- İMZA: fiyat yelpazesi rayı -------------------------------------------
   min ───── p25 ▬▬ MEDYAN ● ▬▬ p75 ───── max
   Tek bir fiyat veremediğimiz için sayfanın çekirdeği bu dağılım.
   Konumlar yüzdeyle hesaplanıp inline style ile veriliyor (değer veriye bağlı).
   -------------------------------------------------------------------------- */
.fiyat-page .fy-spread {
    margin: 30px 0 0;
    max-width: 760px;
}

.fiyat-page .fy-spread-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.fiyat-page .fy-median {
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fy-ink);
    display: block;
    margin-top: 4px;
}

.fiyat-page .fy-median b {
    font-weight: 600;
}

.fiyat-page .fy-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--fy-rail);
}

/* Çeyrekler arası: ilanların yarısının bulunduğu bant */
.fiyat-page .fy-iqr {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    /* Opaklık yerine tam renk: %35 opaklıkta bant griye dönüp raydan
       ayırt edilemiyordu. Bu ton medyan işaretiyle yarışmayacak kadar sakin. */
    background: #7ea99a;
}

.fiyat-page .fy-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--fy-signal);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(38, 84, 70, 0.35);
    transform: translateY(-50%);
}

.fiyat-page .fy-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.fiyat-page .fy-ends span {
    font-size: 12px;
    color: var(--fy-mute);
}

.fiyat-page .fy-ends b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fy-ink);
}

.fiyat-page .fy-ends .fy-e-right {
    text-align: right;
}

.fiyat-page .fy-iqr-note {
    margin: 14px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fy-mute);
}

.fiyat-page .fy-iqr-note b {
    color: var(--fy-ink);
    font-weight: 600;
}

/* --- Künye şeridi: dayanak sayıları --------------------------------------- */
.fiyat-page .fy-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--fy-hairline);
    border: 1px solid var(--fy-hairline);
    border-radius: 12px;
    overflow: hidden;
    margin: 28px 0 0;
    max-width: 760px;
}

.fiyat-page .fy-facts > div {
    background: #fff;
    padding: 14px 16px;
}

.fiyat-page .fy-facts .fy-fact-v {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 4px;
}

.fiyat-page .fy-facts a {
    color: var(--fy-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Bölüm başlıkları ----------------------------------------------------- */
.fiyat-page .fy-section {
    margin-top: 52px;
}

.fiyat-page .fy-h2 {
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    padding: 0;
    color: var(--fy-ink);
}

.fiyat-page .fy-sub {
    font-size: 13px;
    line-height: 1.55;
    color: var(--fy-mute);
    margin: 0 0 16px;
    padding: 0;
    max-width: 62ch;
}

/* --- Tablolar: hairline, tabular, sağa hizalı sayılar --------------------- */
.fiyat-page .fy-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Sayfanın ölçüsü 760-800px; tablo container'a yayılırsa sütunlar
       birbirinden kopuyor ve göz satırı takip edemiyor. */
    max-width: 800px;
}

/* Marka listesi tabloları 5-6 sütunlu; daha geniş ama sınırsız değil —
   1224px'lik container'da sütunlar birbirinden kopuyordu. */
.fiyat-page .fy-table-wrap.is-wide {
    max-width: 1040px;
}

/* Km bandı 3 sütun — dar tutulur. */
.fiyat-page .fy-table-wrap.is-narrow {
    max-width: 560px;
}

.fiyat-page table.fy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 480px;
}

.fiyat-page table.fy-table th,
.fiyat-page table.fy-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--fy-hairline);
    vertical-align: middle;
    text-align: left;
}

.fiyat-page table.fy-table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fy-mute);
    border-bottom: 1px solid #d8e0dd;
    white-space: nowrap;
}

.fiyat-page table.fy-table tbody tr:last-child th,
.fiyat-page table.fy-table tbody tr:last-child td {
    border-bottom: 0;
}

.fiyat-page table.fy-table tbody tr:hover {
    background: var(--fy-surface);
}

.fiyat-page table.fy-table .fy-r {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fiyat-page table.fy-table .fy-strong {
    font-weight: 700;
}

.fiyat-page table.fy-table tbody th {
    font-weight: 600;
}

.fiyat-page table.fy-table a {
    color: var(--fy-ink);
    text-decoration: none;
}

.fiyat-page table.fy-table a:hover {
    color: var(--fy-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Sayı hücresindeki bağlantılar: altı çizili olmazsa düz metin sanılıyor. */
.fiyat-page table.fy-table td a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #c2cfca;
    color: inherit;
}

.fiyat-page table.fy-table td a:hover {
    text-decoration-color: currentColor;
}

/* Km bandı: medyanı orantılı çubukla göster — rayla aynı görsel dil. */
.fiyat-page .fy-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--fy-deep);
    opacity: 0.55;
    min-width: 3px;
    margin-top: 6px;
}

/* --- İlan kartları -------------------------------------------------------- */
.fiyat-page .fy-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fiyat-page .fy-card {
    border: 1px solid var(--fy-hairline);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color 0.18s ease;
}

.fiyat-page .fy-card:hover {
    border-color: #c9d6d1;
}

.fiyat-page .fy-card-img {
    aspect-ratio: 4 / 3;
    background: var(--fy-surface);
    display: block;
    overflow: hidden;
}

.fiyat-page .fy-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fiyat-page .fy-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.fiyat-page .fy-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    padding: 0;
}

.fiyat-page .fy-card-title a {
    color: var(--fy-ink);
    text-decoration: none;
}

.fiyat-page .fy-card-title a:hover {
    color: var(--fy-deep);
}

.fiyat-page .fy-card-foot {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fiyat-page .fy-card-price {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fiyat-page .fy-card-km {
    font-size: 12px;
    color: var(--fy-mute);
    font-variant-numeric: tabular-nums;
}

/* --- Bağlantı satırı ------------------------------------------------------ */
.fiyat-page .fy-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fy-deep);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.fiyat-page .fy-more:hover {
    color: var(--fy-ink);
}

/* --- Editöryel metin ------------------------------------------------------ */
.fiyat-page .fy-prose {
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.7;
    color: #3f3f3f;
}

.fiyat-page .fy-prose h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fy-ink);
    margin: 28px 0 8px;
    padding: 0;
}

.fiyat-page .fy-prose h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fy-ink);
    margin: 22px 0 6px;
    padding: 0;
}

.fiyat-page .fy-prose p {
    margin: 0 0 12px;
    padding: 0;
}

.fiyat-page .fy-prose ul,
.fiyat-page .fy-prose ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.fiyat-page .fy-prose li {
    margin-bottom: 6px;
}

/* --- SSS: native <details>, Bootstrap accordion DEĞİL --------------------- */
.fiyat-page .fy-faq {
    max-width: 800px;
    border-top: 1px solid var(--fy-hairline);
}

.fiyat-page .fy-faq details {
    border-bottom: 1px solid var(--fy-hairline);
}

.fiyat-page .fy-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 40px 16px 0;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fy-ink);
}

.fiyat-page .fy-faq summary::-webkit-details-marker {
    display: none;
}

/* Artı → eksi. İki çizgi, dikey olan açılınca kayboluyor. */
.fiyat-page .fy-faq summary::before,
.fiyat-page .fy-faq summary::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    background: var(--fy-deep);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.fiyat-page .fy-faq summary::before {
    width: 13px;
    height: 1.5px;
    margin-top: -0.75px;
}

.fiyat-page .fy-faq summary::after {
    width: 1.5px;
    height: 13px;
    margin-top: -6.5px;
    margin-right: 5.75px;
}

.fiyat-page .fy-faq details[open] summary::after {
    opacity: 0;
    transform: rotate(90deg);
}

.fiyat-page .fy-faq summary:focus-visible {
    outline: 2px solid var(--fy-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

.fiyat-page .fy-faq .fy-faq-a {
    padding: 0 0 18px;
    font-size: 15px;
    line-height: 1.65;
    color: #3f3f3f;
    max-width: 68ch;
}

/* --- Metodoloji: dipnot, rakip blok değil --------------------------------- */
.fiyat-page .fy-method {
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--fy-hairline);
    max-width: 800px;
}

.fiyat-page .fy-method h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 0;
    color: var(--fy-ink);
}

.fiyat-page .fy-method p,
.fiyat-page .fy-method li {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--fy-mute);
}

.fiyat-page .fy-method p {
    margin: 0 0 10px;
    padding: 0;
}

.fiyat-page .fy-method ul {
    margin: 0;
    padding-left: 18px;
}

.fiyat-page .fy-method li {
    margin-bottom: 5px;
}

.fiyat-page .fy-method strong {
    color: #3f3f3f;
}

/* --- Uyarı kutusu (veri yetersiz) ----------------------------------------- */
.fiyat-page .fy-notice {
    border: 1px solid var(--fy-hairline);
    background: var(--fy-surface);
    border-radius: 14px;
    padding: 18px 20px;
    max-width: 760px;
    margin-top: 24px;
}

.fiyat-page .fy-notice p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3f3f3f;
}

.fiyat-page .fy-notice a {
    color: var(--fy-deep);
    font-weight: 600;
}

/* --- Marka çipleri -------------------------------------------------------- */
.fiyat-page .fy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fiyat-page .fy-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    border: 1px solid var(--fy-hairline);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fy-ink);
    text-decoration: none;
    transition: border-color 0.18s ease;
}

.fiyat-page .fy-chip:hover {
    border-color: var(--fy-deep);
    color: var(--fy-deep);
}

.fiyat-page .fy-chip span {
    font-weight: 400;
    font-size: 12px;
    color: var(--fy-mute);
    font-variant-numeric: tabular-nums;
}

/* --- Duyarlılık ----------------------------------------------------------- */
@media (max-width: 991px) {
    .fiyat-page .fy-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fiyat-page .fy-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fiyat-page .fy-facts {
        grid-template-columns: 1fr;
    }

    /* Mobilde medyan ile "dayanak" alt alta düşüyor; etiket iri rakama
       yapışmasın diye nefes payı. */
    .fiyat-page .fy-spread-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .fiyat-page .fy-table-wrap,
    .fiyat-page .fy-table-wrap.is-narrow {
        max-width: none;
    }

    .fiyat-page .fy-section {
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fiyat-page * {
        transition: none !important;
    }
}