/* =====================================================================
   OYUNCAK - VITRIN
   =====================================================================
   Orman yesili + turuncu.

   Oyuncakcida gokkusagi paleti beklenir ama ONE CIKAN URUN OLMALIDIR:
   oyuncaklarin kendisi zaten cok renkli ve renkli bir tema onlarla
   yarisir. Iki renk yeter - biri sakinlestirir, biri dikkat ceker.

   Ritim ThemeForest "Mojuri"nin 8. ana sayfasindan: ana sayfa tek
   buyuk izgaradan degil, HER BIRI KENDI BASLIGI OLAN kisa seritlerden
   kuruluyor.

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

:root {
    --ana: #1f6b57;
    --ana-koyu: #175040;
    /* 3.30:1 - odak halkasi icin yeterli, metin degil. */
    --ana-acik: #4f9b85;

    --vurgu: #c2410c;
    --vurgu-koyu: #9a330a;
    /* 2.64:1 - YALNIZCA dekor; cizgi olarak bile kullanilmaz. */
    --vurgu-acik: #e08a5a;

    --zemin: #ffffff;
    /* Cok hafif yesile calan gri: notr gri, yesille birlikte soguk
       duruyordu. */
    --zemin-2: #f4f6f4;
    --metin: #1c211f;
    --metin-2: #565c59;
    --cizgi: #e2e7e3;
    --koyu: #131715;

    /* 16px - oyuncakta yuvarlak kose dogru cagrisim; ama 22px'e
       cikildiginda kartlar birbirine yapisik balonlar gibi
       gorunuyordu. */
    --yumusak: 16px;
    --kap: 1200px;
    --golge: 0 14px 30px -22px rgb(28 33 31 / .35);
}

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

/* ---------------------------------------------------------------
   TIPOGRAFI
   ---------------------------------------------------------------
   HARICI FONT YOK. Oyuncakcida el yazisi ya da "eglenceli" bir font
   beklenir; sistem yigininda oyle bir aile yok ve harici font
   getirmek ziyaretcinin adresini ucuncu bir tarafa gondermek demekti.
   Karakter fonttan degil AGIRLIK ve BOYUTTAN geliyor.
   --------------------------------------------------------------- */

h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

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

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

.vitrin-ic {
    position: relative;
    z-index: 1;
    /* Alcak: sayfanin isi seritleri gostermek, ilk serit ilk ekranda
       baslamali. */
    padding-block: clamp(2.4rem, 6vw, 4.2rem);
    max-width: 42rem;
}

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

    Kimligi belirsiz bir cocugun fotografini satis vitrinine koymak,
    izni alinamayacak bir kullanimdir.
*/
.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: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ana);
}

.vitrin h1 {
    margin: 0;
    font-size: clamp(1.8rem, 4.4vw, 2.8rem);
    line-height: 1.1;
}

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

/* ---------------------------------------------------------------
   SERITLER
   ---------------------------------------------------------------
   Seritler ayni gorunurse sayfa tek uzun izgara gibi okunur. Cift
   sirali seritler ikincil zemine oturuyor; goz nerede oldugunu
   ritimden anliyor.
   --------------------------------------------------------------- */

.bolum:nth-of-type(even) {
    background: var(--zemin-2);
}

.bolum-basi h2 {
    font-size: clamp(1.15rem, 2.3vw, 1.55rem);
}

/* ---------------------------------------------------------------
   YAS UYARISI
   ---------------------------------------------------------------
   Oyuncakta yas uyarisi bir pazarlama metni degil GUVENLIK
   bilgisidir. Tema bir yas ARALIGI YAZAMAZ - o bilgi urune ozgudur.
   --------------------------------------------------------------- */

.yas-uyarisi {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    max-width: 54ch;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vurgu);
    border-radius: var(--yumusak);
}

.yas-uyarisi svg {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--vurgu);
}

.yas-uyarisi p {
    margin: 0;
    line-height: 1.7;
    color: var(--metin-2);
}

/* ---------------------------------------------------------------
   ODAK
   --------------------------------------------------------------- */

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