/* ============================================================================
   Herbal — Design System (sıfırdan, modern · temiz · ferah)
   "Anatolian Apothecary": sıcak-nötr yüzeyler, tek yeşil aksan, editöryel serif
   başlıklar + humanist sans gövde. Düz; derinlik tonlama ve hover ile gelir.
   Renkler OKLCH; nötrler yeşile doğru hafif tonlu. #000/#fff yok.
   ============================================================================ */

/* ---- Fontlar (latin-ext: Türkçe diakritikler) ----
   Web fontları artık functions.php'de doğrudan <link rel="stylesheet"> + preconnect ile
   yükleniyor (eski @import render-blocking zincir oluşturup sayfalar arası flash yaratıyordu). */

:root {
    /* — Yüzeyler (sıcak-nötr, yeşile mikro-tonlu) — */
    --bg:            oklch(0.985 0.004 130);   /* sayfa zemini, sıcak fildişi */
    --surface:       oklch(1     0.002 130);   /* beyaz kart */
    --surface-2:     oklch(0.972 0.005 130);   /* hafif gömük yüzey */
    --surface-3:     oklch(0.955 0.006 130);   /* chip / disabled */
    --line:          oklch(0.918 0.006 130);   /* hairline / kenar */
    --line-strong:   oklch(0.86  0.008 135);

    /* — Metin — */
    --ink:           oklch(0.255 0.012 150);   /* gövde + başlık */
    --ink-2:         oklch(0.44  0.012 150);   /* ikincil — AA (~6.2:1) */
    --ink-3:         oklch(0.535 0.010 150);   /* meta / placeholder — AA (~4.6:1) */

    /* — Yeşil aksan (tek doygun renk) — */
    --green:         oklch(0.505 0.135 152);   /* ~#006b11 CTA/fiyat/link */
    --green-600:     oklch(0.55  0.14  152);
    --green-700:     oklch(0.435 0.12  152);   /* hover */
    --green-soft:    oklch(0.93  0.05  152);   /* zemin tonu */
    --green-softer:  oklch(0.965 0.025 152);

    /* — Durum — */
    --sale:          oklch(0.62  0.19  25);    /* indirim kırmızısı */
    --sale-soft:     oklch(0.95  0.04  25);
    --error:         oklch(0.55  0.18  27);
    --star:          oklch(0.78  0.14  85);

    /* — Tipografi — */
    --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* — Yarıçap — */
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

    /* — Aralık ritmi — */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

    /* — Gölge (yalnızca hover/sticky) — */
    --lift:    0 10px 30px -12px oklch(0.4 0.03 150 / 0.18);
    --lift-sm: 0 4px 14px -8px  oklch(0.4 0.03 150 / 0.16);
    --sticky:  0 1px 0 oklch(0.4 0.03 150 / 0.06), 0 8px 24px -20px oklch(0.4 0.03 150 / 0.25);

    --container: 1240px;
    --header-h: 76px;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: 16px; line-height: 1.6; color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
/* Focus ring yalnızca gerçekten etkileşimli öğelerde (başıboş yeşil halka yok). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--green); outline-offset: 2px;
}
/* Mouse/touch ile tıklamada halka gösterme (yalnızca klavye). */
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--green-soft); }

/* ---- Tipografi ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.display { font-size: clamp(2.2rem, 4vw + 1rem, 4rem); line-height: 1.04; }
h1, .h1 { font-size: clamp(1.9rem, 2.4vw + 1rem, 2.9rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); }
h3, .h3 { font-size: 1.25rem; }
.eyebrow {
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
    display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--green); border-radius: 2px; }
.lede { font-size: 1.075rem; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.section { padding-block: clamp(48px, 7vw, 96px); }
.section-tight { padding-block: clamp(32px, 4vw, 56px); }
.stack > * + * { margin-top: var(--s-4); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); flex-wrap: wrap; }
.section-head .title-group { display: grid; gap: var(--s-3); }
.section-head h2 { margin: 0; }
.link-more { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--green); display: inline-flex; align-items: center; gap: 6px; transition: gap .25s cubic-bezier(.22,1,.36,1); }
.link-more:hover { gap: 11px; }

/* ---- Butonlar ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; line-height: 1;
    min-height: 44px; padding: 13px 26px; border-radius: var(--r-pill); cursor: pointer;
    transition: background .2s, color .2s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s;
    border: 1px solid transparent; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--green); color: var(--surface); }
.btn-primary:hover { background: var(--green-700); transform: translateY(-1px); box-shadow: var(--lift-sm); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-soft { background: var(--green-soft); color: var(--green-700); }
.btn-soft:hover { background: var(--green-softer); }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; padding: 16px 32px; font-size: 1rem; }
.btn-sm { min-height: 38px; padding: 9px 18px; font-size: 0.85rem; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
    background: var(--surface-3); color: var(--ink-3); border-color: transparent;
    cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }

/* ---- Chip / badge ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600;
    padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); }
.chip-ingredient { background: var(--green-softer); color: var(--green-700); }
.badge-sale { background: oklch(0.52 0.18 25); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); }
.badge-new  { background: var(--green); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); }

/* ---- Form alanları ---- */
.field { display: grid; gap: 7px; }
.field label { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], textarea, select {
    width: 100%; min-height: 44px; background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-md); padding: 12px 15px; font-size: 0.95rem; color: var(--ink);
    transition: border-color .18s, box-shadow .18s; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-softer); }
input:disabled, textarea:disabled, select:disabled { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; }
textarea { min-height: 120px; resize: vertical; }

/* ---- Yıldız puanı ---- */
.stars { --pct: 0%; display: inline-block; position: relative; font-size: 0.9rem; line-height: 1; letter-spacing: 2px;
    background: linear-gradient(90deg, var(--star) var(--pct), var(--line-strong) var(--pct)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars::before { content: "★★★★★"; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }