/* ==========================================================
   TEMA: SICAK
   Krem kâğıt #fdf8f1 · toprak tonları · Playfair Display + Lora
   Karakter farkı: SERİF başlıklar, serif gövde, dağınık yumuşak
   sıcak gölgeler, orta yuvarlaklık (20px kart / 12px buton),
   ürün medyası 3/4, kartlarda kâğıt dokusu hissi veren çift kenar.
   ========================================================== */

:root {
  /* --- Tipografi: serif başlık + serif gövde --- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-scale: 1.03;
  --heading-tracking: 0;
  --heading-transform: none;

  /* --- Renk: toprak --- */
  --primary: #5b3a29;
  --primary-strong: #3b2418;
  --primary-hover: #744c34;
  --primary-focus: #8a5c40;
  --primary-line: #efe2d0;
  --primary-soft: #faf2e7;
  --on-primary: #fffdf9;

  --accent: #a25420;
  --accent-strong: #7f3f18;
  --accent-light: #dd9b62;
  --accent-soft: #fbeadc;
  --on-accent: #fffdf9;

  --title: #3f2a1d;
  --text: #5c4b3f;
  --muted: #7d6754;
  --border: #e8dbc9;
  --border-strong: #d3c0a7;
  /* Etkileşimli denetim kenarlığı (WCAG 1.4.11 ≥3:1) — toprak tonu korunur.
     BU TEMADA ÜÇ AYRI ZEMİN VAR ve en zoru krem --surface: kart #fffdf9 → 3,69:1 ·
     sayfa #fdf8f1 → 3,55:1 · surface #f7efe3 → 3,29:1. Ton krem zemine göre
     seçildi; beyaz zemine göre seçilse surface üstünde 3:1'in altına düşerdi. */
  --control-border: #8f8271;
  --control-border-strong: #6b5f50;
  --surface: #f7efe3;
  --page-bg: #fdf8f1;
  --card-bg: #fffdf9;

  /* --- Biçim: yumuşak --- */
  --radius-sm: 8px;
  --radius: 14px;
  --card-radius: 20px;
  --pill: 999px;
  --btn-radius: 12px;
  --btn-height: 48px;
  --btn-tracking: 0.02em;
  --btn-transform: none;

  --card-shadow: 0 6px 24px rgba(91, 58, 41, 0.07);
  --card-hover-shadow: 0 14px 40px rgba(91, 58, 41, 0.15);
  --shadow-sm: 0 2px 8px rgba(91, 58, 41, 0.08);
  --shadow: 0 10px 30px rgba(91, 58, 41, 0.11);
  --shadow-lg: 0 22px 60px rgba(91, 58, 41, 0.18);

  --container: 1200px;
  --section-space: 68px;
}

/* --- Serif başlıklar biraz daha havadar --- */
h1, h2, h3, h4, h5 { line-height: 1.25; font-weight: 600; }
body { line-height: 1.72; }

/* --- Butonlar: yumuşak dikdörtgen, sıcak gölge --- */
.btn { font-family: var(--font-body); font-weight: 600; }
.btn--gold { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgba(162, 84, 32, 0.28); }
.btn--gold:hover { background: var(--accent-strong); }
.btn--navy { box-shadow: 0 6px 18px rgba(91, 58, 41, 0.22); }
.btn--outline { border-color: var(--control-border); color: var(--primary); }
.btn--outline:hover { background: var(--primary-soft); border-color: var(--primary); }

/* --- Formlar --- */
.field label { font-family: var(--font-heading); font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea, .coupon input, .listbar select { background: var(--card-bg); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(162, 84, 32, 0.2);
}

/* --- Üst bar + header --- */
.topbar { background: var(--primary-strong); color: rgba(255, 253, 249, 0.86); }
.topbar a:hover { color: var(--accent-light); }
.hdr { background: var(--card-bg); border-bottom: 1px solid var(--border); }
.hdr__logo-mark {
  background: var(--primary);
  color: var(--accent-light);
  border-color: var(--accent-light);
  border-radius: 14px;
}
.hdr__logo-text { font-family: var(--font-heading); letter-spacing: 0.06em; }
.search { background: var(--surface); }
.search button { font-family: var(--font-body); }

/* --- Kategori menüsü --- */
.catnav { background: var(--primary); }
.catnav__link { font-family: var(--font-body); font-weight: 500; }
.catnav__sub { background: var(--card-bg); border-radius: 0 0 18px 18px; }

/* --- Hero: krem üstü sıcak degrade --- */
.hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(221, 155, 98, 0.4) 0%, rgba(221, 155, 98, 0) 48%),
    linear-gradient(150deg, #6b452f 0%, #3b2418 100%);
  color: rgba(255, 253, 249, 0.86);
}
.hero h1 { font-weight: 600; letter-spacing: 0; }
.hero__badge {
  background: rgba(221, 155, 98, 0.18);
  border-color: rgba(221, 155, 98, 0.4);
  color: #f4d3b3;
  font-family: var(--font-body);
}
.hero__card { background: rgba(255, 253, 249, 0.09); border-color: rgba(255, 253, 249, 0.16); }
.hero__card-icon { background: rgba(221, 155, 98, 0.22); color: #f4d3b3; }

.trust { background: var(--primary-strong); }
.trust__item { font-family: var(--font-body); color: rgba(255, 253, 249, 0.86); }
.trust__item svg { color: var(--accent-light); }

/* --- Bölüm başlığı: ortalanmış serif his --- */
.section--surface { background: var(--surface); }
.section-head h2 { font-size: calc(32px * var(--font-scale)); }
.eyebrow {
  font-family: var(--font-body);
  color: var(--accent-strong);
  letter-spacing: 0.14em;
  font-style: italic;
  text-transform: none;
  font-size: 14px;
}

/* --- Ürün kartı: kâğıt hissi, çift kenar --- */
.pcard {
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}
.pcard:hover { transform: translateY(-4px); }
.pcard__media { aspect-ratio: 3 / 4; background: var(--surface); }
.pcard__body { padding: 16px 18px 8px; }
.pcard__foot { padding: 0 18px 18px; }
.pcard__brand { font-family: var(--font-body); font-style: italic; text-transform: none; letter-spacing: 0.02em; font-size: 13px; color: var(--accent-strong); }
.pcard__name { font-family: var(--font-heading); font-weight: 600; font-size: calc(17px * var(--font-scale)); }
.pcard__price strong { font-family: var(--font-heading); font-weight: 700; }
.pcard__fav { background: rgba(255, 253, 249, 0.94); color: var(--primary); }
.pcard__stars { color: var(--accent); }

/* --- Kategori kartı --- */
.catcard { background: var(--card-bg); box-shadow: var(--card-shadow); }
.catcard strong { font-family: var(--font-heading); }

/* --- Rozetler --- */
.badge { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.03em; }
.badge--gold { background: var(--accent); color: var(--on-accent); }

/* --- Liste / filtre / sayfalama --- */
.filters { background: var(--card-bg); box-shadow: var(--card-shadow); }
.filters__title { font-family: var(--font-heading); color: var(--accent-strong); letter-spacing: 0.06em; text-transform: none; font-size: 15px; }
.pagination a, .pagination span { background: var(--card-bg); border-radius: 12px; }
.empty { background: var(--surface); border-color: var(--border-strong); }

/* --- Ürün detay --- */
.pinfo h1 { font-weight: 600; }
.pinfo__price strong { font-family: var(--font-heading); font-weight: 700; }
.optlist label { font-family: var(--font-body); border-radius: 12px; }
.optlist label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.qty { border-radius: 12px; }
.tabs__btn { font-family: var(--font-heading); }
.tabs__btn.is-active { border-bottom-color: var(--accent); color: var(--primary); }
.prose { font-size: calc(17px * var(--font-scale)); }

/* --- Sepet / ödeme --- */
.cartlist, .summary, .panel, .accnav, .datatable, .statcard { box-shadow: var(--card-shadow); }
.cartitem__name { font-family: var(--font-heading); }
.radio-card { border-radius: 14px; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.summary__row--total { font-family: var(--font-heading); }
.datatable th { background: var(--surface); font-family: var(--font-body); letter-spacing: 0.06em; }

/* --- Footer --- */
.ftr { background: var(--primary-strong); color: rgba(255, 253, 249, 0.76); }
.ftr h4 { font-family: var(--font-heading); color: var(--accent-light); }
.ftr a:hover { color: var(--accent-light); }
.ftr__badges li { font-family: var(--font-body); border-color: rgba(255, 253, 249, 0.22); }