/* ==========================================================
   Hayvan Ekipmanlari - Magaza On Yuzu Bilesenleri
   ========================================================== */

/* ---- Ust Bar ---- */
.ust-bar {
    background: var(--marka-yesil-900);
    color: #cfe0d3;
    font-size: 0.82rem;
}
.ust-bar .icerik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 16px;
    flex-wrap: wrap;
}
.ust-bar a { color: #e9f2ea; }
.ust-bar a:hover { color: var(--marka-amber-500); }
.ust-bar .ayrac { opacity: .4; margin: 0 8px; }

/* ---- Ana Header ---- */
.site-header {
    background: var(--renk-krem);
    border-bottom: 1px solid var(--sinir);
    position: sticky;
    top: 0;
    z-index: 40;
}
.site-header .icerik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.marka {
    display: flex;
    align-items: center;
    gap: 12px;
}
.marka img { height: 44px; width: auto; }
.marka-logo { height: 48px; width: auto; }

/* ---- Koyu (yesil) zeminlerde logoyu okunur kilan acik kart ---- */
.logo-kart-koyu {
    display: inline-flex;
    align-items: center;
    background: var(--renk-krem);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
}
.logo-kart-koyu img { height: 32px; width: auto; display: block; }

.ana-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    font-weight: 600;
    font-size: 0.94rem;
}
.ana-menu a { color: var(--metin-700); }
.ana-menu a:hover { color: var(--marka-yesil-800); }

.header-aksiyonlar { display: flex; align-items: center; gap: 12px; }

/* ---- Header arama kutusu ---- */
.header-arama {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--marka-yesil-50);
    border: 1px solid var(--sinir);
    border-radius: 999px;
    padding: 9px 16px;
    flex: 1;
    max-width: 320px;
    margin: 0 8px;
    color: var(--metin-500);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.header-arama:focus-within { border-color: var(--marka-yesil-600); box-shadow: 0 0 0 3px var(--marka-yesil-100); background: var(--renk-krem); }
.header-arama svg { width: 17px; height: 17px; flex-shrink: 0; }
.header-arama input {
    border: none; background: transparent; outline: none;
    font-family: var(--font-govde); font-size: .88rem; color: var(--metin-900);
    width: 100%;
}
.header-arama input::placeholder { color: var(--metin-500); }
.header-arama-mobil { display: none; flex: none; margin: 0 20px 14px; max-width: none; }

/* ---- Mobil menu dugmesi + off-canvas panel ---- */
.mobil-menu-dugme {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--sinir);
    background: var(--renk-krem);
    cursor: pointer;
    padding: 0;
    align-items: center;
}
.mobil-menu-dugme span { display: block; width: 20px; height: 2px; background: var(--marka-yesil-900); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.mobil-menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobil-menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobil-menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobil-menu-perde {
    position: fixed; inset: 0;
    background: rgba(20, 37, 28, 0.55);
    z-index: 60;
    backdrop-filter: blur(2px);
}
.mobil-menu-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    background: var(--renk-krem);
    z-index: 61;
    display: flex;
    flex-direction: column;
    box-shadow: var(--golge-lg);
    transform: translateX(0);
    animation: mobilMenuGiris .22s ease;
}
/* [hidden] ve .mobil-menu-panel ayni ozguluge sahip oldugundan, gizliyken
   "display:flex" kuralinin hidden'i gecersiz kilmamasi icin acik oncelik: */
.mobil-menu-panel[hidden] { display: none; }
.mobil-menu-perde[hidden] { display: none; }
@keyframes mobilMenuGiris { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mobil-menu-ust {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sinir);
}
.mobil-menu-ust .marka img { height: 32px; }
.mobil-menu-kapat {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid var(--sinir);
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--marka-yesil-900);
}
.mobil-menu-liste { display: flex; flex-direction: column; padding: 10px 8px; overflow-y: auto; flex: 1; }
.mobil-menu-liste a {
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--metin-900);
}
.mobil-menu-liste a:hover, .mobil-menu-liste a:active { background: var(--marka-yesil-50); }
.mobil-menu-alt { padding: 16px 20px 24px; border-top: 1px solid var(--sinir); display: flex; flex-direction: column; gap: 10px; }

/* ---- Hero ---- */
.hero {
    background: linear-gradient(135deg, var(--marka-yesil-900) 0%, var(--marka-yesil-700) 65%, var(--marka-yesil-600) 100%);
    color: var(--renk-krem);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    right: -120px; top: -120px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,154,60,.35), transparent 70%);
}
.hero .icerik { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; position: relative; }
.hero h1 { color: var(--renk-krem); margin-bottom: 0.4em; }
.hero p.aciklama { color: #d7e5da; font-size: 1.08rem; max-width: 520px; }
.hero .buton-grubu { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-panel {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(6px);
}
.hero-panel h3 { color: var(--renk-krem); }
.hero-panel p { color: #cfe0d3; font-size: 0.92rem; }
.hero-rozet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.hero-rozet {
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
}
.hero-rozet strong { display: block; font-family: var(--font-baslik); font-size: 1.3rem; color: var(--marka-amber-500); }
.hero-rozet span { font-size: 0.76rem; color: #cfe0d3; }

/* ---- Guven seridi (hero altinda) ---- */
.guven-seridi { background: var(--renk-krem); border-bottom: 1px solid var(--sinir); }
.guven-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 22px 0;
}
.guven-oge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--metin-700);
    justify-content: center;
    text-align: center;
}
.guven-oge svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--marka-yesil-700); }
@media (max-width: 900px) { .guven-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .guven-izgara { grid-template-columns: 1fr; } }

/* ---- Rol Kartlari (Ana Bayi / Alt Bayi / Alici anlatimi) ---- */
.rol-kartlari {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 64px 0;
}
.rol-karti {
    padding: 30px 26px;
    text-align: left;
}
.rol-karti .simge {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--marka-yesil-100);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    color: var(--marka-yesil-700);
}
.rol-karti.vurgu .simge { background: var(--marka-amber-100); color: var(--marka-amber-700); }
.rol-karti h3 { margin-bottom: 8px; }
.rol-karti p { font-size: 0.92rem; margin-bottom: 0; }

/* ---- Kategori Izgara ---- */
.bolum-baslik { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.bolum-baslik p { margin: 0; max-width: 520px; }

.kategori-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-bottom: 64px;
}
.kategori-karti {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(160deg, var(--marka-yesil-700), var(--marka-yesil-900));
}
.kategori-karti .kategori-icerik {
    position: relative;
    z-index: 2;
    padding: 20px;
    color: var(--renk-krem);
}
.kategori-karti .kategori-icerik span { font-size: 0.78rem; color: var(--marka-amber-500); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kategori-karti .kategori-icerik h3 { color: var(--renk-krem); margin: 4px 0 0; }
.kategori-karti:hover { box-shadow: var(--golge-lg); }

/* ---- Urun Izgara / Kart ---- */
.urun-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    padding: 8px 0 64px;
}
.urun-karti {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.urun-karti:hover { box-shadow: var(--golge-md); transform: translateY(-2px); }
.urun-gorsel {
    aspect-ratio: 1 / 1;
    background: var(--marka-yesil-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--marka-yesil-300, var(--marka-yesil-100));
    border-bottom: 1px solid var(--sinir);
}
.urun-gorsel svg { width: 46%; height: 46%; opacity: .55; }

/* ---- Urun gorsel yer tutucu (gercek fotograf yuklenene kadar) ---- */
.urun-gorsel-yt {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--sinir);
    background:
        repeating-linear-gradient(135deg, rgba(20,37,28,0.05) 0px, rgba(20,37,28,0.05) 1px, transparent 1px, transparent 14px),
        var(--marka-yesil-50);
}
.urun-gorsel-yt.desen-1 {
    background:
        repeating-linear-gradient(45deg, rgba(217,126,26,0.06) 0px, rgba(217,126,26,0.06) 1px, transparent 1px, transparent 14px),
        var(--marka-yesil-50);
}
.urun-gorsel-yt.desen-2 {
    background:
        radial-gradient(circle at 30% 30%, rgba(217,126,26,0.08), transparent 60%),
        repeating-linear-gradient(135deg, rgba(20,37,28,0.05) 0px, rgba(20,37,28,0.05) 1px, transparent 1px, transparent 14px),
        var(--marka-yesil-50);
}
.urun-gorsel-rozet {
    width: 34%;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background: var(--renk-krem);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--golge-sm);
    color: var(--marka-yesil-700);
    transition: transform .18s ease;
}
.urun-gorsel-rozet svg { width: 52%; height: 52%; }
.urun-karti:hover .urun-gorsel-rozet, a:hover > .urun-gorsel-yt .urun-gorsel-rozet { transform: scale(1.06); color: var(--marka-amber-700); }
.urun-govde { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.urun-govde .urun-kategori { font-size: 0.74rem; color: var(--marka-amber-700); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.urun-govde h3 { font-size: 1.02rem; margin: 0; }
.urun-govde .urun-fiyat-satir { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; }
.urun-fiyat { font-family: var(--font-baslik); font-weight: 800; font-size: 1.12rem; color: var(--marka-yesil-900); }
.urun-fiyat small { display: block; font-family: var(--font-govde); font-weight: 500; font-size: 0.7rem; color: var(--metin-500); }
.stok-durumu { font-size: 0.76rem; font-weight: 600; }
.stok-durumu.var { color: var(--basari); }
.stok-durumu.yok { color: var(--tehlike); }

/* ---- Neden Biz seridi ---- */
.avantaj-seridi {
    background: var(--marka-yesil-50);
    border-top: 1px solid var(--sinir);
    border-bottom: 1px solid var(--sinir);
    padding: 56px 0;
}
.avantaj-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.avantaj-oge { text-align: left; }
.avantaj-oge strong { display: block; font-family: var(--font-baslik); color: var(--marka-yesil-900); margin-bottom: 6px; }
.avantaj-oge p { font-size: 0.88rem; margin: 0; }

/* ---- CTA (Bayilik basvurusu) ---- */
.cta-bayilik {
    background: linear-gradient(120deg, var(--marka-amber-600), var(--marka-amber-700));
    border-radius: var(--radius-lg);
    padding: 48px;
    margin: 24px auto 72px;
    color: var(--renk-krem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cta-bayilik h2 { color: var(--renk-krem); margin-bottom: 6px; }
.cta-bayilik p { color: #fbe8cf; margin: 0; max-width: 480px; }
.cta-bayilik .buton-ikincil { background: var(--marka-yesil-900); }

/* ---- Footer ---- */
.site-footer {
    background: var(--marka-yesil-900);
    color: #b9cabd;
    padding: 56px 0 24px;
}
.footer-izgara { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.site-footer h4 { color: var(--renk-krem); font-family: var(--font-baslik); font-size: 0.95rem; margin-bottom: 14px; }
.site-footer a { color: #b9cabd; font-size: 0.9rem; }
.site-footer a:hover { color: var(--marka-amber-500); }
.footer-link-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-alt {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 0.8rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* ---- Giris / Kayit Sayfasi ---- */
.auth-sayfa {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 20px;
}
.auth-kutu {
    width: 100%;
    max-width: 440px;
    padding: 40px 36px;
}
.auth-kutu .auth-ust { text-align: center; margin-bottom: 28px; }
.auth-kutu .auth-ust img { height: 44px; margin: 0 auto 14px; }
.auth-roller-ipucu {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

/* ---- Genel sayfa basligi (kategori / hesabim vb.) ---- */
.sayfa-basligi {
    padding: 40px 0 28px;
    border-bottom: 1px solid var(--sinir);
    margin-bottom: 36px;
}
.gezinme-yolu { font-size: 0.82rem; color: var(--metin-500); margin-bottom: 10px; }
.gezinme-yolu a:hover { color: var(--marka-yesil-800); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
    .hero .icerik { grid-template-columns: 1fr; }
    .rol-kartlari, .kategori-izgara { grid-template-columns: repeat(2, 1fr); }
    .avantaj-izgara { grid-template-columns: repeat(2, 1fr); }
    .footer-izgara { grid-template-columns: 1fr 1fr; }
    .ana-menu, .header-aksiyonlar, .header-arama { display: none; }
    .mobil-menu-dugme { display: flex; }
    .header-arama-mobil { display: flex; }
}
@media (min-width: 981px) {
    .mobil-menu-perde, .mobil-menu-panel, .header-arama-mobil { display: none !important; }
}
@media (min-width: 981px) and (max-width: 1180px) {
    .header-arama { display: none; }
}
@media (max-width: 620px) {
    .rol-kartlari, .kategori-izgara, .avantaj-izgara { grid-template-columns: 1fr; }
    .footer-izgara { grid-template-columns: 1fr; }
    .cta-bayilik { flex-direction: column; text-align: center; }
}