/* ==========================================================================
   Blog (Haberler) — bespoke blog sayfaları (Gülmar Yapı)
   Tasarım dili: cnc/gext ile uyumlu "Editorial" — sıcak kırık beyaz, amber
   (#f2a100) vurgu, kart ızgarası, okunabilir makale tipografisi. Namespace .bl-.
   Self-contained: yalnızca header-pill.css (global .lp-btn) + style.min'e dayanır.
   ========================================================================== */

:root {
    --bl-accent: #f2a100;
    --bl-accent-2: #ffb71f;
    --bl-ink: #15161a;
    --bl-muted: #6b6b6b;
    --bl-line: #e6e0d6;
    --bl-soft: #f6f3ee;
    --bl-card: #ffffff;
    --bl-graphite: #101216;
    --bl-radius: 22px;
    --bl-radius-sm: 14px;
    --bl-shadow: 0 22px 55px rgba(20, 22, 26, 0.09);
    --bl-shadow-hover: 0 34px 80px rgba(20, 22, 26, 0.18);
}

/* ---- breadcrumb (.pp-crumb global değil; burada tanımlanır) ---- */
.pp-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 18px;
}
.bl-crumb a { color: var(--bl-muted); text-decoration: none; transition: color .2s; }
.bl-crumb a:hover { color: var(--bl-ink); }
.bl-crumb i { font-size: 11px; opacity: .6; }
.bl-crumb .is-current { color: var(--bl-accent); font-weight: 600; }

/* ---- genel bölüm ---- */
.bl-section { position: relative; padding: clamp(54px, 7vw, 96px) 0; background: var(--bl-card); overflow: hidden; }
.bl-section--soft { background: var(--bl-soft); }
.bl-h2 {
    margin: 12px 0 0; font-family: "Poppins", sans-serif;
    font-size: clamp(24px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.02em;
    font-weight: 800; color: var(--bl-ink); text-wrap: balance;
}
.bl-tagline {
    display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--bl-accent);
}
.bl-tagline::before { content: ""; width: 22px; height: 1px; background: var(--bl-accent); }

/* ==========================================================================
   HERO (liste)
   ========================================================================== */
.bl-hero {
    position: relative; margin-top: -96px;
    padding: clamp(140px, 16vw, 210px) 0 clamp(48px, 6vw, 80px);
    background:
        radial-gradient(120% 90% at 82% -10%, rgba(242, 161, 0, 0.12), transparent 55%),
        linear-gradient(165deg, #fbf9f5 0%, var(--bl-soft) 60%, #efe9df 100%);
    color: var(--bl-ink); overflow: hidden; isolation: isolate;
}
.bl-hero-grid {
    position: absolute; inset: -2px;
    background-image:
        linear-gradient(rgba(20, 22, 26, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 22, 26, 0.04) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 76%);
            mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 76%);
    z-index: -2;
}
.bl-hero-glow { position: absolute; right: -120px; top: -80px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(242, 161, 0, 0.22), transparent 70%); z-index: -1; }
.bl-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--bl-accent); }
.bl-hero-title {
    margin: 12px 0 0; font-family: "Poppins", sans-serif; font-weight: 800;
    font-size: clamp(32px, 5vw, 60px); line-height: 1.15; letter-spacing: -0.025em;
    color: var(--bl-ink); text-wrap: balance;
}
.bl-hero-tag { margin: 18px 0 0; max-width: 680px; font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.7; color: var(--bl-muted); }

/* ---- kategori çipleri ---- */
.bl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.bl-chip {
    display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--bl-line); background: rgba(255, 255, 255, 0.6);
    font-size: 13.5px; font-weight: 600; color: var(--bl-ink); text-decoration: none;
    transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.bl-chip:hover { border-color: var(--bl-accent); transform: translateY(-1px); color: var(--bl-ink); }
.bl-chip.is-active { background: var(--bl-ink); border-color: var(--bl-ink); color: #fff; }

/* ==========================================================================
   KART IZGARASI
   ========================================================================== */
.bl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(22px, 3vw, 36px); }
.bl-card {
    background: var(--bl-card); border: 1px solid var(--bl-line); border-radius: var(--bl-radius);
    overflow: hidden; box-shadow: var(--bl-shadow); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bl-card:hover { transform: translateY(-4px); box-shadow: var(--bl-shadow-hover); border-color: transparent; }
.bl-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.bl-card-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bl-soft); }
.bl-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bl-card:hover .bl-card-cover img { transform: scale(1.05); }
.bl-card-cover--ph {
    background: radial-gradient(120% 120% at 20% 0%, rgba(242, 161, 0, 0.22), transparent 60%),
        linear-gradient(150deg, #1b1d22, var(--bl-graphite));
    display: flex; align-items: center; justify-content: center;
}
.bl-card-mark { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 64px;
    color: rgba(255, 255, 255, 0.14); line-height: 1; }
.bl-card-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); flex: 1; }
.bl-card-meta { display: grid; gap: 7px; }
.bl-card-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bl-accent); }
.bl-card-read {
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bl-soft);
    border: 1px solid var(--bl-line);
    color: var(--bl-muted);
    font-size: 12px;
    font-weight: 700;
}
.bl-card-title { margin: 0; font-family: "Poppins", sans-serif; font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.28; font-weight: 700; color: var(--bl-ink); }
.bl-card-excerpt { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--bl-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.bl-card-tags span {
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(242, 161, 0, .1);
    color: #9b6607;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.bl-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 700; color: var(--bl-ink); }
.bl-card-more i { color: var(--bl-accent); transition: transform .2s; }
.bl-card:hover .bl-card-more i { transform: translateX(4px); }
.bl-empty { text-align: center; color: var(--bl-muted); padding: 40px 0; }

/* ==========================================================================
   YAZI (detay)
   ========================================================================== */
.bl-post-hero {
    position: relative; margin-top: -96px;
    padding: clamp(140px, 16vw, 200px) 0 clamp(36px, 4vw, 56px);
    background: linear-gradient(165deg, #fbf9f5 0%, var(--bl-soft) 70%, #efe9df 100%);
    color: var(--bl-ink); overflow: hidden; isolation: isolate;
}
.bl-post-hero--ph {
    background:
        radial-gradient(120% 90% at 82% -10%, rgba(242, 161, 0, 0.18), transparent 55%),
        linear-gradient(160deg, #1b1d22 0%, var(--bl-graphite) 60%, #0c0d10 100%);
    color: #fff;
}
.bl-post-hero--ph .bl-crumb a { color: rgba(255, 255, 255, 0.7); }
.bl-post-hero--ph .bl-crumb a:hover { color: #fff; }
.bl-post-hero--ph .bl-post-title { color: #fff; }
.bl-post-hero--ph .bl-post-meta { color: rgba(255, 255, 255, 0.72); }
.bl-post-cat {
    display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--bl-accent);
    color: #1b1b1b; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none;
}
.bl-post-title {
    margin: 16px 0 0; max-width: 900px; font-family: "Poppins", sans-serif; font-weight: 800;
    font-size: clamp(28px, 4.4vw, 52px); line-height: 1.15; letter-spacing: -0.025em; color: var(--bl-ink); text-wrap: balance;
}
.bl-post-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; color: var(--bl-muted); }
.bl-post-meta i { color: var(--bl-accent); margin-right: 5px; }

.bl-post-cover { background: var(--bl-card); }
.bl-post-cover .container { margin-top: clamp(-40px, -4vw, -20px); }
.bl-post-cover img { width: 100%; border-radius: var(--bl-radius); box-shadow: var(--bl-shadow); display: block; }

/* ---- makale gövdesi ---- */
.bl-section--article { padding-top: clamp(40px, 5vw, 64px); }
.bl-article { max-width: 760px; margin: 0 auto; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.8; color: #2b2c30; }
.bl-article > h2 {
    margin: 1.7em 0 .55em; font-family: "Poppins", sans-serif; font-weight: 800;
    font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.015em; color: var(--bl-ink);
}
.bl-article > h3 { margin: 1.4em 0 .5em; font-weight: 700; font-size: clamp(18px, 2vw, 22px); color: var(--bl-ink); }
.bl-article p { margin: 0 0 1.15em; }
.bl-article a { color: #b5740a; text-decoration: underline; text-underline-offset: 3px; }
.bl-article a:hover { color: var(--bl-accent); }
.bl-article ul, .bl-article ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.bl-article li { margin: 0 0 .5em; }
.bl-article ul li::marker { color: var(--bl-accent); }
.bl-article img { max-width: 100%; height: auto; border-radius: var(--bl-radius-sm); margin: 1.4em 0; }
.bl-article blockquote {
    margin: 1.6em 0; padding: 16px 22px; border-left: 4px solid var(--bl-accent);
    background: var(--bl-soft); border-radius: 0 var(--bl-radius-sm) var(--bl-radius-sm) 0; color: var(--bl-ink);
}
/* makale içi karşılaştırma tablosu */
.bl-article .bl-table-wrap { margin: 1.6em 0; overflow-x: auto; border-radius: var(--bl-radius-sm); border: 1px solid var(--bl-line); }
.bl-article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bl-article th, .bl-article td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--bl-line); vertical-align: top; }
.bl-article thead th { background: var(--bl-ink); color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .01em; }
.bl-article tbody tr:nth-child(even) { background: var(--bl-soft); }
.bl-article tbody th { font-weight: 700; color: var(--bl-ink); white-space: nowrap; }
.bl-article tr:last-child td, .bl-article tr:last-child th { border-bottom: 0; }

/* SSS — açılır/kapanır akordeon (makale altı, FAQPage schema'lı) */
.bl-faqwrap { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; }
.bl-faq-h { margin-bottom: .6em !important; font-size: clamp(22px, 2.6vw, 30px); }
.bl-faq { margin: 1em 0 0; display: grid; gap: 12px; }
.bl-faq-item {
    background: var(--bl-card); border: 1px solid var(--bl-line); border-radius: var(--bl-radius-sm);
    overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease;
}
.bl-faq-item.is-open { border-color: rgba(242, 161, 0, 0.5); box-shadow: var(--bl-shadow); }
.bl-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 26px);
    margin: 0; background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: "Poppins", sans-serif; font-size: clamp(15.5px, 1.3vw, 17.5px); font-weight: 700;
    color: var(--bl-ink); line-height: 1.4;
}
.bl-faq-plus { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.bl-faq-plus::before, .bl-faq-plus::after {
    content: ""; position: absolute; background: var(--bl-accent); border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}
.bl-faq-plus::before { top: 9px; left: 0; width: 20px; height: 2px; }
.bl-faq-plus::after { left: 9px; top: 0; width: 2px; height: 20px; }
.bl-faq-item.is-open .bl-faq-plus::after { transform: rotate(90deg); opacity: 0; }
.bl-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1); }
.bl-faq-item.is-open .bl-faq-a { grid-template-rows: 1fr; }
.bl-faq-a > p { overflow: hidden; margin: 0; padding: 0 clamp(18px, 2.2vw, 26px); color: #2b2c30; line-height: 1.75; transition: padding .35s ease; }
.bl-faq-item.is-open .bl-faq-a > p { padding-bottom: clamp(18px, 2vw, 24px); }

.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.2em; padding-top: 1.4em; border-top: 1px solid var(--bl-line); }
.bl-tag { font-size: 12.5px; color: var(--bl-muted); background: var(--bl-soft); border: 1px solid var(--bl-line); padding: 5px 12px; border-radius: 999px; }

.bl-rel-head { max-width: 760px; margin: 0 auto clamp(28px, 3vw, 40px); text-align: center; }
.bl-rel-head .bl-tagline { justify-content: center; }

/* ==========================================================================
   CTA (koyu) — global h2{color:#333} koyu zeminde okunmaz; açıkça beyaz
   ========================================================================== */
.bl-section--cta { background: var(--bl-graphite); }
.bl-cta { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.bl-section--cta h2 { color: #fff; font-family: "Poppins", sans-serif; font-weight: 800;
    font-size: clamp(24px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.bl-cta p { margin: 16px auto 0; max-width: 560px; color: rgba(255, 255, 255, 0.7); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; }
.bl-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.bl-btn, .bl-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 30px; border-radius: 999px; font-size: 15px; font-weight: 600;
    text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bl-btn { background: var(--bl-accent); color: #15161a; box-shadow: 0 14px 30px rgba(242, 161, 0, 0.28); }
.bl-btn:hover { background: var(--bl-accent-2); color: #15161a; transform: translateY(-2px); box-shadow: 0 20px 38px rgba(242, 161, 0, 0.36); }
.bl-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.bl-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.6); transform: translateY(-2px); }

/* ==========================================================================
   Scroll-reveal (yalnızca JS varken; blog.js html'e .bl-js ekler)
   ========================================================================== */
.bl-js [data-bl-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.bl-js [data-bl-reveal].is-in { opacity: 1; transform: none; }
.bl-js [data-bl-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.bl-js [data-bl-stagger].is-in > * { opacity: 1; transform: none; }
.bl-js [data-bl-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
.bl-js [data-bl-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
.bl-js [data-bl-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
.bl-js [data-bl-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
.bl-js [data-bl-stagger].is-in > *:nth-child(n+6) { transition-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
    .bl-js [data-bl-reveal], .bl-js [data-bl-stagger] > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .bl-hero, .bl-post-hero { margin-top: -70px; }
}
@media (max-width: 575px) {
    .bl-cards { grid-template-columns: 1fr; }
    .bl-post-meta { gap: 14px; }
}