/* ========================================================================
   MODA VITRINI

   TEMEL TEMANIN UZERINE yazilir; temel dosya once yuklenir ve buradaki
   kurallar onu ezer. Tema kendi `layout.blade.php`'sini TASIMAZ - yalnizca
   `home.blade.php`'yi geçersiz kilar; kalan butun sayfalar temelden duser.

   Bu, sozlesmenin gostermek istedigi sey: bir tema iki dosyayla
   (stil + tek sablon) tamamen baska bir kimlik kazanabilir.
   ======================================================================== */

:root {
    /* Siyah-beyaz zemin, tek kuvvetli vurgu. */
    --ana: #111114;
    --ana-koyu: #000000;
    --ana-acik: #8a8a96;

    --vurgu: #e11d48;
    --vurgu-koyu: #9f1239;
    --vurgu-acik: #fb7185;

    --zemin: #ffffff;
    --zemin-2: #f4f4f5;
    --metin: #111114;
    --metin-2: #52525b;
    --cizgi: #e4e4e7;
    --koyu: #111114;

    --yumusak: 4px;
    --kap: 1280px;
}

/* Moda vitrininde kose yumusatma NEREDEYSE YOK: keskin kenar, urunun
   kendisini one cikaran bir cerceve birakir. */
.urun-kart { border-radius: 4px; }
.dugme { border-radius: 4px; }

.marka {
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 1.05rem;
}

/* Vitrin: iki sutun - solda soz, sagda urun alani. */
.vitrin { padding-block: 0; background: var(--zemin-2); }

.vitrin-duzen {
    display: grid;
    align-items: center;
    gap: 2.5rem;
    padding-block: 4rem;
}
@media (min-width: 64rem) {
    .vitrin-duzen { grid-template-columns: 1fr 1fr; padding-block: 5.5rem; }
}

.vitrin h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}

.vitrin .ust-etiket { color: var(--vurgu-koyu); }

/*
    INDIRIM ROZETI. Metin ROZETIN ICINDE yazili - yalnizca renkle
    anlatilsaydi renk koru kullanici icin hicbir sey ifade etmezdi.
*/
.vitrin-rozet {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: var(--vurgu);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

/* Sag taraftaki desen kutusu - fotograf yerine gecen dekoratif alan. */
.vitrin-panel {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--koyu) 4%, transparent) 0 12px,
            transparent 12px 24px),
        var(--zemin);
    border: 1px solid var(--cizgi);
}
.vitrin-panel svg {
    position: absolute;
    inset: 12%;
    width: 76%; height: 76%;
    color: var(--koyu);
    opacity: .16;
}

/* Kategori serdi: dort esit kare, cerceveli. */
.serit-kutular {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.serit-kutu {
    display: block;
    padding: 2.25rem 1.25rem;
    border: 1px solid var(--cizgi);
    background: var(--zemin);
    text-align: center;
    text-decoration: none;
    color: var(--metin);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .86rem;
    transition: border-color .2s ease, transform .2s ease;
}
.serit-kutu:hover { border-color: var(--koyu); color: var(--metin); transform: translateY(-2px); }

/* Bolum basligi ortali ve ince cizgili. */
.bolum-basi-orta { display: block; text-align: center; }
.bolum-basi-orta h2 {
    display: inline-block;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--vurgu);
    font-size: 1.7rem;
    letter-spacing: -.01em;
}
.bolum-basi-orta p { margin: .75rem 0 0; color: var(--metin-2); }