/* ═══════════════════════════════════════════════════════════
   NET SEÇİM — BLOG ORTAK STİLİ (blog.css)
   Blog ana sayfası (blog.html) ve blog yazıları (blog-post.html)
   bu dosyayı kullanır. Renk ya da punto değiştirmek için
   sadece burayı düzenle.
   Sitenin geri kalanı (ana sayfa, ürünler) koyu kalır.
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. RENKLER ─────────────────────────────────────────── */
:root, body {
  --c-bg:#fbfaf7; --c-surface:#ffffff; --c-surface2:#f3f1ec;
  --c-border:#e7e3da; --c-border2:#d9d4c8;
  --c-text:#1a1a1a; --c-muted:#5f5f5f;
  --c-accent:#9a6b00;            /* sarı beyazda okunmaz: yazılarda koyu altın */
}
body { background:#fbfaf7; color:#1a1a1a }

/* Marka sarısı: butonlarda ve rozetlerde kalır */
.post-hero-badge, .nl-box button, .content-cta-btn, .nl-btn, .nl-btn-main,
.post-layout .ns-icerik a.ns-btn, .pc-badge { background:#ffd000; color:#111 }

/* ─── 2. ÜST MENÜ ────────────────────────────────────────── */
.nav { background:rgba(251,250,247,.92); border-bottom:1px solid #e7e3da;
       backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
.nav .logo { color:#1a1a1a }
.nav .logo-dot { color:#e6b400 }
.nav .nav-links a { color:#4a4a4a }
.nav .nav-links a:hover, .nav .nav-links a.active { color:#1a1a1a; background:#f0ede6 }
.nav-hamburger span { background:#1a1a1a }
.nav-mobile-menu { background:#fbfaf7; border-color:#e7e3da }
.nav-mobile-menu a { color:#1a1a1a; border-color:#e7e3da }
.btn-search { background:#ffffff; border-color:#e7e3da; color:#1a1a1a }
.search-bar { background:#ffffff; border-color:#e7e3da }

/* ─── 3. ALT KISIM ───────────────────────────────────────── */
.nl-section { background:#ffffff }
.footer-new, .ns-footer { background:#f4f2ec }
.social-btn { color:#5f5f5f }

/* ─── 4. YAZI TİPİ KURALLARI ─────────────────────────────────
   Syne (karakterli): logo, sayfanın büyük başlığı, bölüm başlıkları.
   DM Sans (okunaklı): geri kalan her şey.                      */

/* Büyük başlıklar — Syne, bir kademe ince (800 çok geniş duruyor) */
.blog-hero-h1, .post-hero-title { font-weight:700; letter-spacing:-0.8px; color:#1a1a1a }
.blog-hero-h1 span { color:#1a1a1a;
  background:linear-gradient(transparent 60%, #ffd000 60%, #ffd000 92%, transparent 92%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 4px }
.blog-hero-desc, .post-hero-excerpt { font-size:16px; line-height:1.6 }

/* Kart ve liste başlıkları — DM Sans */
.pc-title, .oneri-title { font-family:var(--font-body); font-weight:600; letter-spacing:0 }
.pc-title { font-size:14.5px; line-height:1.4 }
.oneri-title { font-size:13.5px; line-height:1.4 }
.pop-num { font-family:var(--font-body); font-weight:700; font-size:14px }
.pop-title, .popular-info-title, .related-title { font-size:13px; line-height:1.45 }

/* Küçük kutu etiketleri (İÇİNDEKİLER, İLGİLİ YAZILAR, footer başlıkları) — DM Sans */
.toc-header, .popular-header, .related-header, .social-embeds-header, .fn-col h4,
.nl-box h4, .social-follow-box h4 { font-family:var(--font-body); font-weight:700 }

/* ─── 5. YAZI GÖVDESİ (blog-post) ────────────────────────────
   Teknoloji sitelerinde yaygın ölçüler: metin 17px, satır aralığı 1,7,
   ara başlık metnin ~1,4 katı.                                 */
.post-content { font-size:17px; line-height:1.7; color:#1a1a1a }
.post-content p, .post-content ul, .post-content ol { color:#2b2b2b }
.post-content p { margin-bottom:20px }
.post-content li { line-height:1.65 }
.post-content h2 { font-family:var(--font-body); font-size:24px; font-weight:700;
                   letter-spacing:-0.3px; line-height:1.3; margin:40px 0 14px }
.post-content h3 { font-family:var(--font-body); font-size:19px; font-weight:700;
                   line-height:1.35; margin:28px 0 10px }
.post-content a { color:#8a5f00; border-bottom-color:rgba(138,95,0,.35) }
.post-content a:hover { border-bottom-color:#8a5f00 }
.post-content blockquote { background:#fff8e0; font-size:17px }
.post-content .ns-yorum { background:#fff8e0; border-color:#f0dc8a }
.post-content .ns-yorum-title { font-family:var(--font-body) }
.post-content .ns-yorum p { font-size:16px }

@media (max-width:768px) {
  .post-content { font-size:16.5px }
  .post-content h2 { font-size:22px; margin-top:34px }
  .post-content h3 { font-size:18px }
  .blog-hero-desc, .post-hero-excerpt { font-size:15px }
}

/* Yazı içi kutular (blog-ekstra.js) */
.post-layout .ns-icerik .ns-kisaca { background:#fff8d6; border-color:#f0dc8a; border-left-color:#ffd000 }
.post-layout .ns-icerik .ns-tablo tr.ns-fark td { background:#fff6cf }
.post-layout .ns-icerik .ns-kutu img,
.post-layout .ns-icerik .ns-liste-satir img { border:1px solid #eee }

/* ─── 6. SAYFA PARÇALARI ─────────────────────────────────── */
/* Blog yazısı */
.post-hero-wrap { background:#fbfaf7 }
.popular-item:hover, .related-item:hover { background:rgba(0,0,0,.03) }
.toc-link:hover, .toc-link.active { background:rgba(154,107,0,.06) }

/* Blog ana sayfası */
.blog-hero { background:#fbfaf7 }
.filter-bar-wrap { background:#ffffff }
.bhf-icon { background:#fff3c4; border-color:#f0dc8a }
.post-card, .oneri-card, .sidebar-block { box-shadow:0 1px 2px rgba(0,0,0,.04) }
.post-card:hover, .oneri-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.08) }
.bs-link:hover { background:#fff8e0 }

/* ─── 7. MOBİL DÜZELTMELER ───────────────────────────────── */
@media (max-width:768px) {
  /* "Net Seçim'i takip et" butonları dar ekranda taşmasın */
  .social-cta-inner { padding:14px 16px; gap:12px }
  .social-cta-btns { flex-shrink:1; width:100%; flex-wrap:wrap; gap:6px }
  .social-cta-btn { flex:1 1 0; justify-content:center; padding:8px 6px; min-width:0 }
  /* Uzun kelime/link ve tablolar sayfayı genişletmesin */
  .post-content { overflow-wrap:anywhere }
  .post-layout, .blog-main { padding-left:16px; padding-right:16px }
  .post-hero-inner, .blog-hero-inner, .social-cta-banner { padding-left:16px; padding-right:16px }
}