/* =====================================================================
   KITAP & KIRTASIYE
   =====================================================================
   Murekkep lacivert + kagit kremi, tek kirmizi vurgu.

   Kitapci vitrini KAPAK GORSELINE calisir: zemin ne kadar sakinse
   kapaklar o kadar one cikar. Renkli bir zemin, on kitap kapaginin on
   ayri rengiyle carpisirdi.

   Ritim ThemeForest "Corano"nun 3. ana sayfasindan: ust vitrin, urun
   izgarasi, HAKKIMIZDA bandi ve koleksiyon seridi. HTML'i degil -
   sablon Bootstrap tabanli ve tema sozlesmesi yardimci sinif
   cercevelerini yasakliyor.

   Bu dosya temelin USTUNE biner; layout iki ayri <link> basar.
   `@import` KULLANILMAZ (gerekce ShopThemeResolver::stilAdresleri).
   ===================================================================== */

:root {
    /*
        `--ana` COK KOYU secildi (10.39:1). Kitapcida baglanti metni
        cok gecer (yazar, seri, kategori) ve bunlarin gri govde
        metninden acikca ayrilmasi gerekiyor.
    */
    --ana: #274060;
    --ana-koyu: #1b2d44;
    /* 4.22:1 - odak halkasi VE ikincil metin olarak kullanilabilir. */
    --ana-acik: #5d7d9e;

    /*
        Muhur kirmizisi. YALNIZCA indirim ve "yeni" rozetlerinde:
        kitapcida kirmizi az kullanilinca dikkat ceker, cok
        kullanilinca indirim magazasi gibi okunur.
    */
    --vurgu: #9c3131;
    --vurgu-koyu: #7a2626;
    --vurgu-acik: #c1706f;

    /*
        ZEMIN SAF BEYAZ DEGIL - kagit kremi.

        Saf beyaz bir zeminde kapak gorselleri kesilmis gibi duruyordu;
        kremde kapagin kendi beyazi ayirt ediliyor.
    */
    --zemin: #fffdf8;
    --zemin-2: #f3efe5;
    --metin: #20211f;
    --metin-2: #575a55;
    --cizgi: #e4dfd2;
    --koyu: #151614;

    /* 6px - kitap ve defter dikdortgen nesnelerdir; cok yuvarlak bir
       kart, icindeki dik kenarli gorselle celisiyordu. */
    --yumusak: 6px;
    --kap: 1200px;
    --golge: 0 12px 26px -20px rgb(32 33 31 / .35);
}

body {
    background: var(--zemin);
    color: var(--metin);
}

/* ---------------------------------------------------------------
   TIPOGRAFI
   ---------------------------------------------------------------
   Basliklar serif: kitapcida serif, sektorun kendi dilidir. Govde
   sans - uzun urun adlari ve fiyatlar sansla daha okunakli.
   HARICI FONT YOK.
   --------------------------------------------------------------- */

h1, h2, h3 {
    font-family: Iowan Old Style, Palatino, Palatino Linotype, Georgia, serif;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------
   VITRIN
   --------------------------------------------------------------- */

.vitrin {
    position: relative;
    overflow: hidden;
    background: var(--zemin-2);
    border-bottom: 1px solid var(--cizgi);
}

.vitrin-ic {
    position: relative;
    z-index: 1;
    padding-block: clamp(2.8rem, 7vw, 5rem);
    max-width: 44rem;
}

/*
    ARKA PLAN FOTOGRAF DEGIL.

    Raf fotografi, magazanin satmadigi kitaplari vaat eder ve
    okunabilir bir kapak telif sorunu dogurur.
*/
.vitrin-leke {
    position: absolute;
    border-radius: 50%;
    filter: blur(62px);
    opacity: .4;
    pointer-events: none;
}

.vitrin-leke-1 {
    width: 22rem; height: 22rem;
    top: -7rem; right: -5rem;
    background: radial-gradient(circle, var(--ana-acik), transparent 70%);
}

.vitrin-leke-2 {
    width: 15rem; height: 15rem;
    bottom: -6rem; left: -4rem;
    background: radial-gradient(circle, var(--vurgu-acik), transparent 70%);
}

.ust-etiket {
    margin: 0 0 .7rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ana);
}

.vitrin h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    line-height: 1.18;
}

.vitrin .slogan {
    margin: .9rem 0 0;
    max-width: 33rem;
    color: var(--metin-2);
    line-height: 1.75;
}

/* ---------------------------------------------------------------
   RAF NOTU
   ---------------------------------------------------------------
   Bir sey VAAT ETMEZ; siparisin nasil ilerledigini anlatir. "En genis
   secki" ya da "orijinal baski garantisi" temaya yazilamaz - tema
   butun magazalarda ayni metni gosterir.
   --------------------------------------------------------------- */

.raf-notu {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.raf-madde {
    padding-left: 1rem;
    border-left: 2px solid var(--ana-acik);
}

.raf-baslik {
    margin: 0 0 .25rem;
    font-family: Iowan Old Style, Palatino, Georgia, serif;
    font-size: 1.05rem;
}

.raf-metin {
    margin: 0;
    font-size: .87rem;
    line-height: 1.65;
    color: var(--metin-2);
}

/* ---------------------------------------------------------------
   ODAK
   ---------------------------------------------------------------
   `--vurgu-acik` 3.55:1 - metin degil; odakta da `--ana` kullaniliyor
   cunku zeminden en net ayrilan o.
   --------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ana);
    outline-offset: 2px;
}