/* =====================================================================
   CICEK - VITRIN
   =====================================================================
   Bahce yesili + derin gul. Cicekci vitrini iki seyi ayni anda
   soylemeli: TAZELIK (yesil, acik zemin, bol nefes) ve ARMAGAN (gul
   tonu, ince serif baslik). Tek renkli kalsaydi ya bir peyzaj
   sirketine ya bir kozmetik markasina benzerdi.

   Gorsel ritim ThemeForest "Corano"nun 6. ana sayfasindan alindi;
   HTML'i degil - sablon Bootstrap tabanli ve tema sozlesmesi yardimci
   sinif cercevelerini yasakliyor. Paleti de alinmadi: Corano'nun
   altini `kozmetik-sade` temasinda zaten kullaniliyor ve iki tema
   vitrinde ayirt edilemez olurdu.

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

:root {
    /*
        `--ana` hem dugme zemini hem baglanti metni: beyaz uzerinde
        6.34:1, uzerine beyaz metinle de 6.34:1.

        `--ana-acik` 3.29:1 - METIN DEGIL ama odak halkasi ve denetim
        cercevesi olarak kullanilabilir (3:1 esigi).
    */
    --ana: #2f6b46;
    --ana-koyu: #235135;
    --ana-acik: #5f9a78;

    /* Derin gul: rozet ve etiketleri yesilden ayirir. Cicekcide en
       cok satan sey armagan ve armaganin rengi yesil degildir. */
    --vurgu: #a83a5b;
    --vurgu-koyu: #832c47;
    --vurgu-acik: #c87e96;

    --zemin: #ffffff;
    /* Sicak kagit: soguk gri, yesille birlestiginde hastane
       cagristiriyordu. */
    --zemin-2: #f6f4ef;
    --metin: #23281f;
    --metin-2: #5a6154;
    --cizgi: #e6e3da;
    --koyu: #1a1f17;

    /*
        10px - orta yol. `kozmetik-sade` 4px (kesin, duzenli),
        `kozmetik-vitrin` 22px (yumusak, butik). Cicekcide ikisi de
        yanlis: kesin kose soguk, cok yuvarlak kose cocuksu.
    */
    --yumusak: 10px;
    --kap: 1200px;
    --golge: 0 14px 32px -22px rgb(35 40 31 / .35);
}

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

/* ---------------------------------------------------------------
   TIPOGRAFI
   ---------------------------------------------------------------
   Basliklar serif, govde sans. HARICI FONT YOK: sistem yigini ayni
   editoryal etkiyi ucuncu bir tarafa istek gondermeden veriyor.
   --------------------------------------------------------------- */

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

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

.vitrin {
    position: relative;
    overflow: hidden;
    background: var(--zemin-2);
}

.vitrin-ic {
    position: relative;
    z-index: 1;
    /* Nefes payi ekran genisligiyle acilir: dar ekranda sikismasin,
       genis ekranda sayfa "bos" degil "ferah" gorunsun. */
    padding-block: clamp(3.5rem, 9vw, 7rem);
    max-width: 46rem;
}

/*
    ARKA PLAN FOTOGRAF DEGIL.

    Vitrine konan her stok fotograf, musterinin satmadigi bir buketi
    vaat etme riski tasir. Katmanli gradyan hicbir sey vaat etmez ve
    her magazada dogru kalir.
*/
.vitrin-leke {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
}

.vitrin-leke-1 {
    width: 26rem; height: 26rem;
    top: -8rem; right: -6rem;
    background: radial-gradient(circle, var(--ana-acik), transparent 68%);
}

.vitrin-leke-2 {
    width: 20rem; height: 20rem;
    bottom: -8rem; left: -5rem;
    background: radial-gradient(circle, var(--vurgu-acik), transparent 68%);
}

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

.vitrin h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.15;
}

.vitrin .slogan {
    margin: 1rem 0 0;
    max-width: 34rem;
    color: var(--metin-2);
    line-height: 1.7;
}

/* ---------------------------------------------------------------
   TESLIMAT SERIDI
   ---------------------------------------------------------------
   Corano'nun politika bandinin karsiligi. Metinler magazanin
   GERCEKTEN yaptigi isi anlatir; "ayni gun teslimat" gibi bir soz
   temaya yazilamaz - cicekcide tutulamayan bir teslimat sozu bir
   dogum gununu kacirtir.
   --------------------------------------------------------------- */

.teslimat-cizgi {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    padding: 1.4rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    box-shadow: var(--golge);
    /* Serit vitrinin uzerine BINER: iki bolum arasindaki gecisi
       yumusatir ve sayfanin ilk ekranina bilgi tasir. */
    margin-top: -2.5rem;
    position: relative;
    z-index: 2;
}

.teslimat-kutu {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}

.teslimat-kutu svg {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--ana);
}

.teslimat-baslik {
    margin: 0 0 .15rem;
    font-size: .92rem;
    font-weight: 600;
}

.teslimat-metin {
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--metin-2);
}

/* ---------------------------------------------------------------
   KOLEKSIYON SERIDI
   ---------------------------------------------------------------
   Corano'nun "collection" izgarasi. Kutular URUN DEGIL: magazanin
   kendi kategorilerine goturur. Urun gibi gorunselerdi ziyaretci
   fiyat arar ve bulamazdi.
   --------------------------------------------------------------- */

.koleksiyon-izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.koleksiyon-kutu {
    display: block;
    padding: 1.6rem 1.4rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin-2);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease;
}

.koleksiyon-kutu:hover {
    border-color: var(--ana-acik);
    transform: translateY(-2px);
    color: inherit;
}

.koleksiyon-ad {
    margin: 0 0 .3rem;
    font-family: Iowan Old Style, Palatino, Georgia, serif;
    font-size: 1.15rem;
}

.koleksiyon-metin {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--metin-2);
}

/* ---------------------------------------------------------------
   SIPARIS AKISI
   --------------------------------------------------------------- */

.akis-izgara {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    counter-reset: adim;
}

.akis-adim {
    position: relative;
    padding-top: 2.4rem;
}

/*
    NUMARA CSS'TEN, ISARETLEMEDEN DEGIL.

    Sayilar isaretlemeye yazilsaydi ekran okuyucu "1 Seçin" diye
    okurdu; burada dekoratif ve `aria-hidden` gerektirmeyecek sekilde
    icerik disinda kaliyor.
*/
.akis-adim::before {
    counter-increment: adim;
    content: counter(adim);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--ana);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

.akis-baslik {
    margin: 0 0 .3rem;
    font-weight: 600;
}

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

/* ---------------------------------------------------------------
   ODAK
   ---------------------------------------------------------------
   Halka `--ana-acik` (3.29:1): zeminden ayrilmasi icin 3:1 sart.
   `--vurgu-acik` 3.05:1 ile sinirda oldugu icin odakta KULLANILMAZ.
   --------------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
    .koleksiyon-kutu { transition: none; }
    .koleksiyon-kutu:hover { transform: none; }
}