/* =============================================================================
   STORLANT — ANA SAYFA PREMIUM SATIŞ ALANI
   =============================================================================
   Yalnız ana sayfada yüklenir (index.php, tema.css'ten sonra).
   Renkler tema.css tokenlarından gelir; gündüz ve gece temasında çalışır.
   Bileşenler: .sp-teklif (teklif bandı), .sp-bolum (vitrin başlığı),
   .sp-izgara (ızgara), .sp-rail (kaydırmalı şerit), .sp-kart (ürün kartı)
   ============================================================================= */

:root {
    --sp-bosluk: 22px;
    --sp-r-kart: 18px;
    --sp-r-panel: 22px;
    --sp-koyu-1: #1B1A22;
    --sp-koyu-2: #0E0E13;
    --sp-koyu-yazi: #F5EFE3;
    --sp-altin-1: #DDB94F;
    --sp-altin-2: #B48C1E;
    --sp-altin-acik: #E8CB78;
    --sp-cam: rgba(255, 255, 255, .9);
    --sp-cam-yazi: #16151A;
    --sp-egri: cubic-bezier(.2, .8, .3, 1);
}

[data-tema="gece"] {
    --sp-koyu-1: #1D1C24;
    --sp-koyu-2: #111116;
    --sp-cam: rgba(20, 20, 24, .86);
    --sp-cam-yazi: #F3F0EA;
}

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

/* -----------------------------------------------------------------------------
   Düğmeler
   ----------------------------------------------------------------------------- */
.sp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700; font-size: 14px; letter-spacing: .02em;
    text-decoration: none;
    transition: transform var(--sx-gecis), box-shadow var(--sx-gecis), background var(--sx-gecis), color var(--sx-gecis), border-color var(--sx-gecis);
}
.sp-btn i { font-size: 16px; transition: transform var(--sx-gecis); }
.sp-btn:hover i { transform: translateX(3px); }

.sp-btn--altin {
    background: linear-gradient(135deg, var(--sp-altin-1), var(--sp-altin-2));
    color: #16151A;
    box-shadow: 0 10px 24px -12px rgba(180, 140, 30, .7);
}
.sp-btn--altin:hover { color: #16151A; transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(180, 140, 30, .85); }

.sp-btn--cizgi {
    border: 1px solid var(--sx-kenar-guclu);
    color: var(--sx-yazi);
    background: var(--sx-yuzey);
}
.sp-btn--cizgi:hover { border-color: var(--sx-yazi); background: var(--sx-yazi); color: var(--sx-yuzey); }

/* -----------------------------------------------------------------------------
   Teklif bandı: günün seçimi + 3 taksit
   ----------------------------------------------------------------------------- */
.sp-teklif { padding: 26px 0 6px; }

.sp-teklif__izgara {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: var(--sp-bosluk);
}
.sp-teklif__izgara--tek { grid-template-columns: 1fr; }

.sp-teklif__gun {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    padding: 36px 40px;
    border-radius: var(--sp-r-panel);
    color: var(--sp-koyu-yazi);
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(221, 185, 79, .24), transparent 55%),
        radial-gradient(60% 90% at 0% 100%, rgba(221, 185, 79, .10), transparent 60%),
        linear-gradient(135deg, var(--sp-koyu-1), var(--sp-koyu-2));
    border: 1px solid rgba(221, 185, 79, .28);
    box-shadow: var(--sx-golge-o);
}
.sp-teklif__gun::after {
    content: "";
    position: absolute; left: 40px; right: 40px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 203, 120, .7), transparent);
}
.sp-teklif__gun-metin { max-width: 540px; }
.sp-teklif__gun h2 {
    margin: 10px 0 8px;
    font-family: var(--sx-baslik-yazi);
    font-size: 36px; font-weight: 600; line-height: 1.1;
    color: #FFFFFF;
}
.sp-teklif__gun p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(245, 239, 227, .74); }

.sp-teklif__ust {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--sp-altin-acik);
}
.sp-teklif__ust i { font-size: 15px; }

.sp-sayac { flex-shrink: 0; text-align: center; }
.sp-sayac__ust {
    display: block; margin-bottom: 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(245, 239, 227, .6);
}
.sp-sayac__kutular { display: flex; align-items: center; gap: 8px; }
.sp-sayac__kutular > i { font-style: normal; font-size: 26px; color: rgba(232, 203, 120, .55); margin-top: -18px; }
.sp-sayac__kutular div {
    min-width: 78px; padding: 12px 8px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(232, 203, 120, .3);
    backdrop-filter: blur(4px);
}
.sp-sayac__kutular b {
    display: block;
    font-family: var(--sx-baslik-yazi);
    font-size: 38px; font-weight: 700; line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    color: var(--sp-altin-acik);
}
.sp-sayac__kutular span {
    display: block; margin-top: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(245, 239, 227, .6);
}

.sp-teklif__taksit {
    display: flex; flex-direction: column; gap: 6px;
    padding: 30px 30px 26px;
    border-radius: var(--sp-r-panel);
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(201, 162, 39, .14), transparent 60%),
        var(--sx-vurgu-zayif);
    border: 1px solid var(--sx-kenar);
    color: var(--sx-yazi);
    text-decoration: none;
    transition: transform .35s var(--sp-egri), box-shadow .35s var(--sp-egri), border-color .35s;
}
.sp-teklif__taksit:hover { color: var(--sx-yazi); transform: translateY(-3px); box-shadow: var(--sx-altin-parilti); border-color: transparent; }
.sp-teklif__taksit .sp-teklif__ust { color: var(--sx-vurgu); margin-top: 4px; }
.sp-teklif__ikon {
    width: 52px; height: 52px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sx-yuzey); color: var(--sx-vurgu);
    font-size: 26px;
    box-shadow: var(--sx-golge-s);
    margin-bottom: 8px;
}
.sp-teklif__taksit strong {
    font-family: var(--sx-baslik-yazi);
    font-size: 30px; font-weight: 700; line-height: 1.1;
}
.sp-teklif__acik { font-size: 14px; line-height: 1.6; color: var(--sx-yazi-soluk); }
.sp-teklif__link {
    margin-top: auto; padding-top: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 14px; color: var(--sx-vurgu);
}
.sp-teklif__taksit:hover .sp-teklif__link i { transform: translateX(3px); }
.sp-teklif__link i { transition: transform var(--sx-gecis); }

/* -----------------------------------------------------------------------------
   Vitrin bölümü ve başlık
   ----------------------------------------------------------------------------- */
.sp-bolum { padding: 56px 0 18px; }

.sp-bolum__bas {
    position: relative;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    margin-bottom: 28px; padding-bottom: 20px;
    border-bottom: 1px solid var(--sx-kenar);
}
.sp-bolum__bas::after {
    content: "";
    position: absolute; left: 0; bottom: -1px;
    width: 72px; height: 2px;
    background: linear-gradient(90deg, var(--sx-vurgu), var(--sx-vurgu-parlak));
}
.sp-bolum__ust {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--sx-vurgu);
}
.sp-bolum__ust::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.sp-bolum__baslik {
    margin: 10px 0 0;
    font-family: var(--sx-baslik-yazi);
    font-size: 42px; font-weight: 600; line-height: 1.08;
    color: var(--sx-yazi);
}
.sp-bolum__alt { margin: 10px 0 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--sx-yazi-soluk); }

.sp-bolum__tumu {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--sx-kenar-guclu);
    font-size: 14px; font-weight: 700;
    color: var(--sx-yazi);
    text-decoration: none;
    transition: background var(--sx-gecis), color var(--sx-gecis), border-color var(--sx-gecis);
}
.sp-bolum__tumu:hover { background: var(--sx-yazi); color: var(--sx-yuzey); border-color: var(--sx-yazi); }
.sp-bolum__tumu i { transition: transform var(--sx-gecis); }
.sp-bolum__tumu:hover i { transform: translateX(3px); }

.sp-bolum__alt-cta { display: flex; justify-content: center; margin-top: 34px; }

/* -----------------------------------------------------------------------------
   Izgara — her kırılımda yalnız tam satır gösterilir
   ----------------------------------------------------------------------------- */
.sp-izgara {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-bosluk);
}
.sp-izgara > .sp-kart:nth-child(n+11) { display: none; }

/* -----------------------------------------------------------------------------
   Kaydırmalı şerit
   ----------------------------------------------------------------------------- */
.sp-serit--afisli {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--sp-bosluk);
    align-items: stretch;
}

.sp-afis {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--sp-r-kart);
    background: var(--sx-yuzey2);
    margin-bottom: 18px;
}
.sp-afis img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1s var(--sp-egri);
}
.sp-afis:hover img { transform: scale(1.04); }

.sp-rail { position: relative; min-width: 0; }
.sp-rail__iz {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * var(--sp-bosluk)) / 5);
    gap: var(--sp-bosluk);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 2px 18px;
    margin: -6px -2px 0;
}
.sp-rail__iz::-webkit-scrollbar { display: none; }
.sp-rail__iz:focus-visible { outline: 2px solid var(--sx-vurgu); outline-offset: 4px; border-radius: var(--sp-r-kart); }
.sp-serit--afisli .sp-rail__iz { grid-auto-columns: calc((100% - 3 * var(--sp-bosluk)) / 4); }
.sp-rail__oge { scroll-snap-align: start; min-width: 0; display: flex; }
.sp-rail__oge > .sp-kart { width: 100%; }

.sp-rail__ok {
    position: absolute; top: 36%; z-index: 3;
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sx-kenar);
    background: var(--sx-yuzey);
    color: var(--sx-yazi);
    font-size: 22px;
    box-shadow: var(--sx-golge-o);
    cursor: pointer;
    transition: opacity var(--sx-gecis), transform var(--sx-gecis), background var(--sx-gecis), color var(--sx-gecis);
}
.sp-rail__ok:hover { background: var(--sx-yazi); color: var(--sx-yuzey); }
.sp-rail__ok--geri { left: -18px; }
.sp-rail__ok--ileri { right: -18px; }
.sp-rail__ok:disabled { opacity: 0; pointer-events: none; }
.sp-rail--kaymaz .sp-rail__ok { display: none; }

/* -----------------------------------------------------------------------------
   Ürün kartı
   ----------------------------------------------------------------------------- */
.sp-kart {
    position: relative;
    display: flex; flex-direction: column;
    height: 100%; min-width: 0;
    background: var(--sx-yuzey);
    border: 1px solid var(--sx-kenar);
    border-radius: var(--sp-r-kart);
    overflow: hidden;
    transition: transform .4s var(--sp-egri), box-shadow .4s var(--sp-egri), border-color .4s;
}

.sp-kart__medya {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sx-yuzey2);
}
.sp-kart__gorsel { position: absolute; inset: 0; display: block; }
.sp-kart__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .55s ease, transform 1.1s var(--sp-egri);
}
.sp-kart__img--2 { opacity: 0; }

.sp-kart__sticker {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    width: 48px; height: 48px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18));
    transition: opacity .3s;
}

.sp-kart__rozetler {
    position: absolute; top: 12px; left: 12px; right: 58px; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 6px;
    pointer-events: none;
}
.sp-rozet {
    display: inline-flex; align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    line-height: 1.2;
    background: var(--sp-cam);
    color: var(--sp-cam-yazi);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3);
}
.sp-rozet--indirim { background: var(--sx-hata-dolgu); color: #FFFFFF; }
.sp-rozet--sicak { background: var(--sp-koyu-1); color: var(--sp-altin-acik); }
.sp-rozet--avantaj { background: linear-gradient(135deg, var(--sp-altin-1), var(--sp-altin-2)); color: #16151A; }

.sp-kart__fav {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: var(--sp-cam);
    color: var(--sp-cam-yazi);
    font-size: 16px; line-height: 1;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform var(--sx-gecis), background var(--sx-gecis), color var(--sx-gecis);
}
.sp-kart__fav i { display: flex; }
.sp-kart__fav:hover { transform: scale(1.08); background: var(--sx-hata-dolgu); color: #FFFFFF; }

.sp-kart__hizli {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgba(22, 21, 26, .92);
    color: #FFFFFF;
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transform: translateY(calc(100% + 16px));
    opacity: 0;
    transition: transform .45s var(--sp-egri), opacity .3s, background var(--sx-gecis);
}
.sp-kart__hizli:hover { background: linear-gradient(135deg, var(--sp-altin-1), var(--sp-altin-2)); color: #16151A; }

.sp-kart__govde {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 16px 18px;
}
.sp-kart__baslik {
    margin: 0;
    font-family: inherit;
    font-size: 15px; font-weight: 600; line-height: 1.38;
    min-height: calc(2 * 1.38em);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-kart__baslik a { color: var(--sx-yazi); text-decoration: none; transition: color var(--sx-gecis); }
.sp-kart__baslik a:hover { color: var(--sx-vurgu); }

.sp-kart__puan {
    display: flex; align-items: center; gap: 6px;
    min-height: 18px;
    font-size: 12.5px; color: var(--sx-yazi-silik);
}
.sp-kart__puan b { color: var(--sx-yazi); font-weight: 700; }
.sp-yildiz {
    position: relative; display: inline-block;
    font-size: 13px; line-height: 1; letter-spacing: 1px;
}
.sp-yildiz::before { content: "★★★★★"; color: var(--sx-kenar-guclu); }
.sp-yildiz > span {
    position: absolute; left: 0; top: 0; bottom: 0;
    overflow: hidden; white-space: nowrap;
}
.sp-yildiz > span::before { content: "★★★★★"; color: var(--sx-vurgu-parlak); }
.sp-yeni {
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sx-vurgu);
}

.sp-kart__fiyat {
    margin-top: auto;
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0;
}
.sp-kart__eski {
    order: 2;
    font-size: 13px;
    color: var(--sx-eski-fiyat);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.sp-kart__yeni {
    order: 1;
    font-family: var(--sx-baslik-yazi);
    font-size: 28px; font-weight: 700; line-height: 1.1;
    color: var(--sx-yazi);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
.sp-kart__yeni small {
    margin-left: 3px;
    font-family: "Lato", sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--sx-yazi-soluk);
}
.sp-kart__kazanc {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sx-basari-zemin);
    color: var(--sx-basari);
    font-size: 12px; font-weight: 700;
}
.sp-kart__cta {
    display: none;
    margin-top: 4px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--sx-yazi);
    color: var(--sx-yuzey);
    text-align: center;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-decoration: none;
}
.sp-kart__cta:hover { color: var(--sx-yuzey); }

/* Fareli cihazlarda hover efektleri; dokunmatikte CTA her zaman görünür */
@media (hover: hover) and (pointer: fine) {
    .sp-kart:hover {
        transform: translateY(-5px);
        border-color: transparent;
        box-shadow: var(--sx-golge-b), var(--sx-altin-parilti);
    }
    .sp-kart:hover .sp-kart__img { transform: scale(1.05); }
    .sp-kart--cift:hover .sp-kart__img--2 { opacity: 1; }
    .sp-kart:hover .sp-kart__hizli,
    .sp-kart:focus-within .sp-kart__hizli { transform: translateY(0); opacity: 1; }
    .sp-kart:hover .sp-kart__sticker { opacity: 0; }
}
@media (hover: none), (pointer: coarse) {
    .sp-kart__hizli { display: none; }
    .sp-kart__cta { display: block; }
    .sp-rail__ok { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-kart, .sp-kart__img, .sp-kart__hizli, .sp-afis img, .sp-teklif__taksit { transition: none !important; }
    .sp-rail__iz { scroll-behavior: auto; }
}

/* -----------------------------------------------------------------------------
   Kırılımlar
   ----------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .sp-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sp-izgara > .sp-kart:nth-child(n+9) { display: none; }
    .sp-rail__iz { grid-auto-columns: calc((100% - 3 * var(--sp-bosluk)) / 4); }
    .sp-serit--afisli { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .sp-serit--afisli .sp-rail__iz { grid-auto-columns: calc((100% - 2 * var(--sp-bosluk)) / 3); }
    .sp-teklif__gun { padding: 30px 30px; }
    .sp-teklif__gun h2 { font-size: 30px; }
    .sp-sayac__kutular div { min-width: 66px; }
    .sp-sayac__kutular b { font-size: 32px; }
}

@media (max-width: 991.98px) {
    :root { --sp-bosluk: 16px; }
    .sp-teklif__izgara { grid-template-columns: 1fr; }
    .sp-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-izgara > .sp-kart:nth-child(n+9) { display: flex; }
    .sp-izgara > .sp-kart:nth-child(n+10) { display: none; }
    .sp-serit--afisli { display: block; }
    .sp-afis { display: none; }
    .sp-rail__iz,
    .sp-serit--afisli .sp-rail__iz { grid-auto-columns: 40%; }
    .sp-bolum { padding: 44px 0 10px; }
    .sp-bolum__baslik { font-size: 34px; }
}

@media (max-width: 767.98px) {
    .sp-teklif__gun { flex-direction: column; align-items: flex-start; gap: 22px; padding: 26px 22px; }
    .sp-teklif__gun h2 { font-size: 28px; }
    .sp-sayac { text-align: left; }
    .sp-teklif__taksit { padding: 24px 22px; }
    .sp-teklif__taksit strong { font-size: 26px; }
    .sp-bolum__bas { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sp-bolum__tumu { padding: 8px 16px; font-size: 13px; }
}

@media (max-width: 575.98px) {
    :root { --sp-bosluk: 12px; --sp-r-kart: 14px; }
    .sp-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-izgara > .sp-kart:nth-child(n+10) { display: flex; }
    .sp-izgara > .sp-kart:nth-child(n+11) { display: none; }
    .sp-rail__iz,
    .sp-serit--afisli .sp-rail__iz { grid-auto-columns: 62%; }
    .sp-bolum { padding: 36px 0 6px; }
    .sp-bolum__baslik { font-size: 30px; }
    .sp-bolum__alt { font-size: 14px; }
    .sp-kart__govde { padding: 12px 12px 14px; gap: 6px; }
    .sp-kart__baslik { font-size: 13.5px; }
    .sp-kart__yeni { font-size: 23px; }
    .sp-kart__yeni small { font-size: 11.5px; }
    .sp-kart__eski { font-size: 12px; }
    .sp-kart__kazanc { font-size: 11px; padding: 3px 8px; }
    .sp-kart__cta { padding: 10px 8px; font-size: 12px; }
    .sp-kart__rozetler { top: 8px; left: 8px; right: 50px; gap: 4px; }
    .sp-rozet { font-size: 9.5px; padding: 4px 8px; }
    .sp-kart__fav { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 14px; }
    .sp-kart__sticker { width: 38px; height: 38px; left: 8px; bottom: 8px; }
    .sp-sayac__kutular div { min-width: 60px; padding: 10px 6px 8px; }
    .sp-sayac__kutular b { font-size: 28px; }
}