/* =====================================================================
   PET SHOP - VITRIN
   =====================================================================
   Derin deniz mavisi + sicak kiremit.

   COCUKSU OLMAMALI: satin alan yetiskin ve harcamanin buyuk kismi
   mama, kum ve ilac gibi tekrar eden ihtiyaclar. Pastel ve cok
   yuvarlak bir dil oyuncakci gibi okunur ve ciddi urunlerin fiyatini
   sorgulatir.

   Gorsel ritim ThemeForest "Corano"nun 5. ana sayfasindan alindi
   (politika seridi - one cikanlar - grup sutunlari - firsat bandi);
   HTML'i degil, sablon Bootstrap tabanli ve tema sozlesmesi yardimci
   sinif cercevelerini yasakliyor. Paleti de alinmadi: Corano'nun
   altini `kozmetik-sade`de, 6. sayfa ritmi `cicek-vitrin`de zaten
   kullaniliyor.

   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.02:1, uzerine beyaz metinle de 6.02:1.

        `--ana-acik` 3.27:1 - metin DEGIL ama odak halkasi olabilir.
    */
    --ana: #1d6d73;
    --ana-koyu: #155257;
    --ana-acik: #4a9aa1;

    /*
        Sicak kiremit. IKI ZEMINDE DE metin olabilecek kadar koyu
        secildi (6.05:1 ve 5.37:1): firsat rozetleri `--zemin-2`
        uzerinde duruyor ve daha acik bir ton orada duserdi.
    */
    --vurgu: #9e4b17;
    --vurgu-koyu: #7c3a12;
    --vurgu-acik: #cf7f3e;

    --zemin: #ffffff;
    /* Sicak kum: soguk gri, deniz mavisiyle birlestiginde klinik
       gorunuyordu. */
    --zemin-2: #f4f1ec;
    --metin: #1f2426;
    --metin-2: #586063;
    --cizgi: #e4e0d8;
    --koyu: #141819;

    /*
        14px - yumusak ama cocuksu degil. `kozmetik-vitrin` 22px
        (butik), `kozmetik-sade` 4px (kesin). Pet shop ikisinin
        arasinda durur: samimi ama ciddi.
    */
    --yumusak: 14px;
    --kap: 1200px;
    --golge: 0 14px 30px -22px rgb(31 36 38 / .4);
}

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

/* ---------------------------------------------------------------
   TIPOGRAFI - TEK AILE, SANS
   ---------------------------------------------------------------
   Basliklar da sans: pet shop vitrini editoryal degil PERAKENDE bir
   yer; serif baslik burada mucevherci gibi durur.
   HARICI FONT YOK - sistem yigini.
   --------------------------------------------------------------- */

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

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

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

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

/*
    ARKA PLAN FOTOGRAF DEGIL.

    Vitrine konan bir hayvan fotografi, magazanin satmadigi bir turu
    ya da irki vaat eder - ve "kedi maması satıyor sandım" diye gelen
    ziyaretci geri doner.
*/
.vitrin-leke {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .45;
    pointer-events: none;
}

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

.vitrin-leke-2 {
    width: 18rem; height: 18rem;
    bottom: -7rem; 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: .16em;
    text-transform: uppercase;
    color: var(--ana);
}

.vitrin h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.12;
}

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

/* ---------------------------------------------------------------
   HIZMET SERIDI
   ---------------------------------------------------------------
   Corano'nun politika bandi. Metinler magazanin GERCEKTEN yaptigi
   isi anlatir; "veteriner onaylı" ya da "orijinal ürün garantisi"
   temaya yazilamaz - mama ve ilac saglikla ilgili ve dogrulanmamis
   bir iddia hayvana zarar verebilir.
   --------------------------------------------------------------- */

.hizmet-cizgi {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    padding: 1.3rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    box-shadow: var(--golge);
    margin-top: -2.4rem;
    position: relative;
    z-index: 2;
}

.hizmet-kutu {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

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

.hizmet-baslik {
    margin: 0 0 .15rem;
    font-size: .9rem;
    font-weight: 700;
}

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

/* ---------------------------------------------------------------
   HAYVAN TURLERI
   ---------------------------------------------------------------
   Corano'nun "group product" sutunlari. Kutular URUN DEGIL, urun
   listesine goturur.
   --------------------------------------------------------------- */

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

.tur-kutu {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, background .2s ease;
}

.tur-kutu:hover {
    border-color: var(--ana-acik);
    background: var(--zemin-2);
    color: inherit;
}

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

.tur-ad {
    margin: 0 0 .1rem;
    font-weight: 700;
}

.tur-metin {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--metin-2);
}

/* ---------------------------------------------------------------
   DUZENLI SIPARIS
   ---------------------------------------------------------------
   Pet shop'ta harcamanin buyuk kismi TEKRAR EDEN alimlar. Bu bolum
   bir abonelik VAAT ETMEZ - oyle bir ozellik yok; yalnizca musteriye
   siparisini nasil tekrarlayacagini soyler.
   --------------------------------------------------------------- */

.duzenli {
    display: grid;
    gap: 1.4rem;
    align-items: center;
}

@media (min-width: 48rem) {
    .duzenli { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.duzenli > * { min-width: 0; }

.duzenli-liste {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--metin-2);
    line-height: 1.8;
}

/* ---------------------------------------------------------------
   ODAK
   ---------------------------------------------------------------
   `--vurgu-acik` 3.11: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) {
    .tur-kutu { transition: none; }
}