/* =====================================================================
   BEBEK & COCUK
   =====================================================================
   Tozlu mavi + sicak kil.

   PASTEL OLMAK ZORUNDA DEGIL: satin alan yetiskin, cogu zaman aceleyle
   ve bir hediye icin bakiyor. Pastel ve cok yuvarlak bir dil urunleri
   oyuncak gibi gosterip guvenlik ve beden gibi ciddi bilgileri geri
   plana atiyordu.

   Ritim ThemeForest "Mojuri"nin 7. ana sayfasindan: UC ARDISIK URUN
   SERIDI, aralarinda buyuk bant yok. Bu duzen daha once
   URETILEMIYORDU - ana sayfaya tek urun koleksiyonu geciyordu ve uc
   serit ayni dokuz urunu tekrarlardi.

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

:root {
    --ana: #3a5f8a;
    --ana-koyu: #2b4767;
    --ana-acik: #6d92bd;

    /* Sicak kil: mavi tek basina kalinca sayfa soguk ve kurumsal
       okunuyordu; rozetler de zeminden ayrilmiyordu. */
    --vurgu: #a24f3c;
    --vurgu-koyu: #7f3d2e;
    --vurgu-acik: #c9826f;

    --zemin: #ffffff;
    --zemin-2: #f5f3f0;
    --metin: #232526;
    --metin-2: #5c6063;
    --cizgi: #e6e2dc;
    --koyu: #171819;

    /* 12px - yumusak ama cocuksu degil. */
    --yumusak: 12px;
    --kap: 1200px;
    --golge: 0 12px 28px -20px rgb(35 37 38 / .35);
}

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

/* ---------------------------------------------------------------
   TIPOGRAFI
   ---------------------------------------------------------------
   Basliklar da sans. Serif baslik bu sayfada butik cagristirir ve
   fiyat beklentisini yukseltir. HARICI FONT YOK.
   --------------------------------------------------------------- */

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------
   VITRIN - KISA
   ---------------------------------------------------------------
   Vitrin bilerek alcak: sayfanin isi urun GOSTERMEK ve ilk serit ilk
   ekranda baslamali. Tam ekran bir vitrin, gezinerek karar veren
   aliciyi bir kaydirma boyu bekletirdi.
   --------------------------------------------------------------- */

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

.vitrin-ic {
    position: relative;
    z-index: 1;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    max-width: 42rem;
}

/*
    ARKA PLAN FOTOGRAF DEGIL ve COCUK FOTOGRAFI HIC DEGIL.

    Kimligi belirsiz bir cocugun fotografini satis vitrinine koymak,
    izni alinamayacak bir kullanimdir. Gradyan bu sorunu hic dogurmaz.
*/
.vitrin-leke {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .45;
    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: 16rem; height: 16rem;
    bottom: -6rem; left: -4rem;
    background: radial-gradient(circle, var(--vurgu-acik), transparent 70%);
}

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

.vitrin h1 {
    margin: 0;
    font-size: clamp(1.75rem, 4.2vw, 2.6rem);
    line-height: 1.15;
}

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

/* ---------------------------------------------------------------
   UC SERIT ARKA ARKAYA
   ---------------------------------------------------------------
   Seritler ayni gorunurse sayfa tek bir uzun izgara gibi okunur.
   Ikincisi ikincil zemine oturuyor; ucuncusu tekrar beyaz. Boylece
   goz nerede oldugunu ritimden anliyor.
   --------------------------------------------------------------- */

#cok-satanlar {
    background: var(--zemin-2);
}

.bolum-basi h2 {
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}

/* ---------------------------------------------------------------
   YAS GRUPLARI
   ---------------------------------------------------------------
   Kutular MAGAZANIN STOGUNU VAAT ETMEZ ve hepsi ayni urun listesine
   cikar; ayri kategori adresleri uydurmak, o kategoriyi olusturmamis
   magazada 404 demekti.
   --------------------------------------------------------------- */

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

.yas-kutu {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    text-decoration: none;
    color: inherit;
    /* Dokunma hedefi: kutular telefonda tek elle taniniyor. */
    min-height: 44px;
    transition: border-color .2s ease;
}

.yas-kutu:hover {
    border-color: var(--ana-acik);
    color: inherit;
}

.yas-ad {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.yas-metin {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: var(--metin-2);
}

/* ---------------------------------------------------------------
   GUVEN NOTU
   ---------------------------------------------------------------
   Bir SEY VAAT ETMEZ - magazanin nasil calistigini anlatir. "Organik
   pamuk", "TSE belgeli" gibi iddialar temaya yazilamaz: dogrulanmamis
   bir guvenlik iddiasi ailenin karar dayanagi olur.
   --------------------------------------------------------------- */

.guven-notu {
    border-left: 3px solid var(--vurgu);
    padding-left: 1.1rem;
    max-width: 46rem;
    color: var(--metin-2);
    line-height: 1.8;
}

/* ---------------------------------------------------------------
   ODAK
   ---------------------------------------------------------------
   `--vurgu-acik` 3.04:1 ile sinirda; odakta KULLANILMAZ.
   --------------------------------------------------------------- */

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

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