/* ══════════════════════════════════════════════════════════════════
   Brew Lab — Coffee Brew Hub tema
   main.css'in üzerine yüklenir (theme.php → theme_headAssets()).
   Strateji: main.css zaten CSS custom property (--clr-*, --ff-*,
   --radius-*) kullanıyor — bunları burada yeniden tanımlamak, tek bir
   dosyayla header/footer/nav/buton/kart gibi tüm siteyi güvenle
   yeniden markalıyor. Ayrıca [hero]/[cta]/[son-yazilar] gibi
   shortcode'lar için shortcode-overrides.php ile özel bileşenler
   ekleniyor (bkz. .bl- ön ekli sınıflar).
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Renk paleti ── */
    --clr-primary:    #C1440E;   /* pas-turuncu — ana vurgu */
    --clr-primary-dk: #9A3509;
    --clr-dark:       #221A12;   /* sıcak espresso-siyahı — metin */
    --clr-dark-2:     #33261A;
    --clr-dark-3:     #4A3A28;
    --clr-gray:       #6B5F4C;
    --clr-light:      #F3ECDC;   /* kağıt tonu — açık zeminler */
    --clr-white:      #FFFDF8;   /* kart zemini */
    --clr-border:     #DED2BA;

    /* Brew Lab'a özel ek tonlar (moss yeşili + koyu espresso zemin) */
    --bl-moss:       #4B5842;
    --bl-moss-soft:  #E4E9DC;
    --bl-espresso:   #2B1E15;
    --bl-espresso-2: #3B2A1D;
    --bl-paper:      #F7F2E9;

    /* ── Tipografi ── */
    --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --ff-body:    'Karla', -apple-system, 'Segoe UI', sans-serif;
    --ff-mono:    'IBM Plex Mono', 'Courier New', monospace;

    /* ── Köşe yuvarlaklığı — pill butonlar + yumuşak kartlar ── */
    --radius-sm: 999px;
    --radius-md: 18px;
    --radius-lg: 26px;
}

body { background: var(--bl-paper); font-family: var(--ff-body); }

/* main.css'te .btn--secondary tanımlı değil (yalnızca --primary/--outline/
   --dark var) — [hero] shortcode'unun ikinci butonu bunu kullanıyor. */
.btn--secondary {
    background: transparent;
    color: var(--clr-dark);
    border: 2px solid var(--clr-dark);
}
.btn--secondary:hover { background: var(--clr-dark); color: var(--bl-paper); }

/* Fraunces geniş harf aralığıyla tasarlanmadı — Bebas Neue için
   ayarlanmış letter-spacing değerlerini sıkılaştır. */
.hero h1,
.section__title,
.cta-banner h2,
.page-banner h1 {
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   Kartlar (.card / .card__*) — [son-yazilar], [one-cikan-yazilar] ve
   kategori/blog listeleme şablonlarının tümünde kullanılıyor; burada
   iyileştirmek siteyi baştan sona kapsar.
   ══════════════════════════════════════════════════════════════════ */
.card {
    border-color: var(--clr-border);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
    transform: translateY(-5px);
    border-color: var(--clr-primary);
    box-shadow: 0 20px 44px -22px rgba(34,26,18,.35);
}
.card__cat {
    display: inline-block;
    font-family: var(--ff-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--bl-paper);
    border: 1px solid var(--clr-border);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 10px !important;
}
.card__title { font-family: var(--ff-display); font-weight: 600; letter-spacing: -.005em; }
.card__more { font-family: var(--ff-mono); font-size: .78rem; font-weight: 500; }

.cat-card { border-color: var(--clr-border); }
.cat-card__icon { color: var(--clr-primary); }

/* ══════════════════════════════════════════════════════════════════
   [hero] override — bkz. shortcode-overrides.php → bl_hero
   ══════════════════════════════════════════════════════════════════ */
.bl-hero { padding: 60px 0 76px; overflow: hidden; }
.bl-hero__grid { display: grid; grid-template-columns: 1.05fr .85fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .bl-hero__grid { grid-template-columns: 1fr; } }

.bl-eyebrow {
    font-family: var(--ff-mono); font-size: .74rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--clr-primary);
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.bl-eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--clr-primary); }

.bl-hero__title {
    font-family: var(--ff-display); font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    font-weight: 600; line-height: 1.05; letter-spacing: -.015em;
    color: var(--clr-dark); margin: 0 0 20px; text-wrap: balance;
}
.bl-hero__sub { font-size: 1.05rem; line-height: 1.65; color: var(--clr-gray); max-width: 46ch; margin: 0 0 30px; }
.bl-hero__ctas { display: flex; gap: 14px; margin-bottom: 34px; flex-wrap: wrap; }

.bl-card {
    background: var(--clr-white); border: 1px solid var(--clr-border);
    border-radius: 22px; padding: 28px 28px 24px; box-shadow: 0 20px 50px -20px rgba(34,26,18,.3);
    transform: rotate(1.2deg); position: relative;
}
.bl-card::before {
    content: 'FIELD NOTES'; position: absolute; top: -11px; left: 24px;
    background: var(--bl-moss); color: #fff; font-family: var(--ff-mono);
    font-size: .62rem; letter-spacing: .12em; padding: 4px 10px; border-radius: 999px;
}
.bl-card__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--clr-border);
}
.bl-card__head .bl-card__title { font-family: var(--ff-display); font-size: 1.1rem; margin: 0; font-weight: 600; color: var(--clr-dark); }
.bl-card__head span { font-family: var(--ff-mono); font-size: .66rem; color: var(--clr-gray); }
.bl-diagram { display: flex; justify-content: center; padding: 4px 0 16px; color: var(--clr-dark); }
.bl-rows { display: grid; gap: 9px; }
.bl-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--ff-mono); font-size: .8rem; }
.bl-row .k { color: var(--clr-gray); }
.bl-row .v { font-weight: 600; color: var(--clr-dark); }
.bl-row .v.rust { color: var(--clr-primary); }
.bl-roast {
    margin-top: 16px; height: 8px; border-radius: 999px; overflow: hidden; position: relative;
    background: linear-gradient(90deg, #E9C79A, #C68B4E, #8A5227, #4E2E17);
}
.bl-roast::after { content: ''; position: absolute; top: -3px; left: 62%; width: 3px; height: 14px; background: var(--clr-dark); border-radius: 2px; }
.bl-roast-lbl { display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: .6rem; color: var(--clr-gray); margin-top: 6px; letter-spacing: .04em; }

/* ══════════════════════════════════════════════════════════════════
   [cta] override — koyu "newsletter" bandı
   ══════════════════════════════════════════════════════════════════ */
.bl-cta {
    background: var(--bl-espresso); color: #F1E7D6; position: relative; overflow: hidden;
    padding: 72px 24px; text-align: center;
}
.bl-cta::before {
    content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background:
        radial-gradient(circle at 12% 20%, rgba(193,68,14,.35), transparent 40%),
        radial-gradient(circle at 88% 80%, rgba(75,88,66,.35), transparent 42%);
}
.bl-cta__inner { position: relative; max-width: 520px; margin: 0 auto; }
.bl-cta h2 { font-family: var(--ff-display); font-size: clamp(1.7rem,3vw,2.2rem); font-weight: 600; margin: 0 0 12px; }
.bl-cta p { color: #C9BBA3; margin: 0 0 28px; font-size: .95rem; }
.bl-cta .btn { border-radius: 999px; }

/* ══════════════════════════════════════════════════════════════════
   Kategori şeridi — [kategoriler] doğal grid'i üstüne ince ayar
   ══════════════════════════════════════════════════════════════════ */
.sc-kategoriler .cat-card { background: var(--clr-white); }