/* ==========================================================
   Hayvan Ekipmanlari - Marka Temasi
   Konsept: "Guvenilir + Modern Agri-Tech"
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Marka renkleri — logomuzdaki gercek renklerden turetildi
       ("Hayvan" yazisi ve yaprak: koyu-orta yesil, "Ekipmanlari" yazisi: neredeyse siyah) */
    --marka-yesil-900: #06331a;
    --marka-yesil-800: #0a4623;
    --marka-yesil-700: #0a6c24;
    --marka-yesil-600: #17903a;
    --marka-yesil-100: #e1f2e4;
    --marka-yesil-50:  #f3f9f4;

    /* Vurgu (ikincil aksiyon) rengi: logonun yaprak degradesindeki acik/canli yesil tonu */
    --marka-amber-700: #3f7a1a;
    --marka-amber-600: #5ea329;
    --marka-amber-500: #7dbd45;
    --marka-amber-100: #ecf6e1;

    --renk-bej: #f7f4ec;
    --renk-krem: #fffdf8;
    --renk-beyaz: #ffffff;

    --metin-900: #181c1e;
    --metin-700: #3c453f;
    --metin-500: #6b756e;
    --metin-300: #a9b0aa;

    --sinir: #e3ddcd;
    --sinir-koyu: #cfc6ad;

    --basari: #2f7d4f;
    --tehlike: #c1391f;
    --bilgi: #2f6d9c;

    /* Tipografi */
    --font-baslik: 'Sora', 'Segoe UI', sans-serif;
    --font-govde: 'Inter', 'Segoe UI', sans-serif;

    /* Olcek */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --golge-sm: 0 1px 2px rgba(20, 37, 28, 0.06), 0 1px 1px rgba(20,37,28,0.04);
    --golge-md: 0 8px 24px rgba(20, 37, 28, 0.10);
    --golge-lg: 0 20px 48px rgba(20, 37, 28, 0.16);

    --icerik-genislik: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-govde);
    color: var(--metin-900);
    background: var(--renk-bej);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-baslik);
    color: var(--marka-yesil-900);
    line-height: 1.15;
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--metin-700); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* ---- Erisilebilirlik: klavye odak gostergesi ---- */
:focus-visible {
    outline: 2px solid var(--marka-yesil-600);
    outline-offset: 2px;
    border-radius: 4px;
}
.buton:focus-visible, .kategori-karti:focus-visible, .urun-karti:focus-visible {
    outline-offset: 3px;
}
::selection { background: var(--marka-yesil-100); color: var(--marka-yesil-900); }

.icerik {
    max-width: var(--icerik-genislik);
    margin: 0 auto;
    padding: 0 24px;
}

.etiket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--marka-yesil-100);
    color: var(--marka-yesil-700);
}
.etiket.amber { background: var(--marka-amber-100); color: var(--marka-amber-700); }

.buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-family: var(--font-govde);
    font-weight: 600;
    font-size: 0.96rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.buton:active { transform: translateY(1px); }

.buton-birincil {
    background: var(--marka-amber-600);
    color: var(--renk-krem);
    box-shadow: var(--golge-sm);
}
.buton-birincil:hover { background: var(--marka-amber-700); box-shadow: var(--golge-md); }

.buton-ikincil {
    background: var(--marka-yesil-900);
    color: var(--renk-krem);
}
.buton-ikincil:hover { background: var(--marka-yesil-800); }

.buton-hat {
    background: transparent;
    border-color: var(--sinir-koyu);
    color: var(--marka-yesil-900);
}
.buton-hat:hover { border-color: var(--marka-yesil-700); background: var(--marka-yesil-50); }

.kart {
    background: var(--renk-krem);
    border: 1px solid var(--sinir);
    border-radius: var(--radius-md);
    box-shadow: var(--golge-sm);
}

.form-alan { margin-bottom: 18px; }
.form-alan label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--metin-700);
    margin-bottom: 6px;
}
.form-alan input, .form-alan select, .form-alan textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sinir-koyu);
    border-radius: var(--radius-sm);
    font-family: var(--font-govde);
    font-size: 0.96rem;
    background: var(--renk-krem);
    color: var(--metin-900);
}
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus {
    outline: none;
    border-color: var(--marka-yesil-600);
    box-shadow: 0 0 0 3px var(--marka-yesil-100);
}

.uyari {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 0.92rem;
    border: 1px solid transparent;
}
.uyari.basarili { background: #eaf6ee; color: var(--basari); border-color: #c7e8d2; }
.uyari.hata { background: #fdeeea; color: var(--tehlike); border-color: #f6d2c6; }
.uyari.bilgi { background: #eaf3fa; color: var(--bilgi); border-color: #cde3f2; }