/* Blog dosyası: panel style.css yüklenir, burası sadece blog düzeni.
   Böylece renk/font diliniz %100 panelle aynı kalır. */

/* ===== Blog Theme Tokens (Panel ile Uyumlu) =====
   Bu dosya eski isimleri KORUR: --border, --bgGlass, --card (aksi halde hatlar kaybolur).
   Panel tarafında aynı isimler varsa otomatik devralır; yoksa fallback çalışır. */
:root{
  --accent: var(--accent, #4cc3ff);

  /* Eski değişken isimleri (Kritik) */
  --border: var(--border, rgba(30,42,70,.65));
  --bgGlass: var(--bgGlass, rgba(8,18,32,.60));
  --card: var(--card, rgba(16,27,48,.62));

  /* Ortak yüzey (input/select/chip) */
  --soft: var(--soft, rgba(0,0,0,.10));
}

/* OS Light tema: otomatik beyaza uyum */
@media (prefers-color-scheme: light){
  :root{
    --accent: var(--accent, #0b63ff);

    --border: rgba(10,25,47,.18);
    --bgGlass: rgba(255,255,255,.72);
    --card: rgba(255,255,255,.78);

    --soft: rgba(10,25,47,.06);
  }
}

/* Manuel light tetikleri (en yaygın varyantlar) */
html.theme-light, body.theme-light,
html.light, body.light,
html[data-theme="light"], body[data-theme="light"]{
  --accent: var(--accent, #0b63ff);

  --border: rgba(10,25,47,.18);
  --bgGlass: rgba(255,255,255,.72);
  --card: rgba(255,255,255,.78);

  --soft: rgba(10,25,47,.06);
}

*{box-sizing:border-box}
.blog-wrap{width:min(1200px, calc(100% - 32px)); margin:0 auto}

/* Topbar */
.blog-topbar{
  position:sticky; top:0; z-index:50;
  background: var(--blog-bgGlass);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blog-border);
}
.blog-topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.blog-brand{display:flex; align-items:center; gap:12px}
.blog-dot{
  width:14px; height:14px; border-radius:999px;
  background: var(--accent, #4cc3ff);
  box-shadow: 0 0 0 4px rgba(76,195,255,.14);
}
.blog-brand-title{font-weight:900; letter-spacing:.3px}
.blog-brand-sub{font-size:12px; opacity:.8}

.blog-nav{display:flex; gap:10px}
.blog-navlink{
  text-decoration:none;
  font-size:14px;
  padding:8px 12px;
  border:1px solid var(--blog-border);
  border-radius:999px;
  opacity:.85;
}
.blog-navlink:hover{opacity:1}
.blog-navlink.active{
  border-color: rgba(76,195,255,.65);
  box-shadow: 0 0 0 4px rgba(76,195,255,.10);
  opacity:1;
}

/* Hero */
.blog-hero{
  display:flex; gap:16px; justify-content:space-between; align-items:stretch;
  margin: 18px 0 10px;
}
.blog-hero-left,
.blog-hero-right{
  border:1px solid var(--blog-border);
  border-radius: 16px;
  background: var(--blog-card);
}
.blog-hero-left{flex:1; padding:18px}
.blog-hero-right{width:min(520px, 100%); padding:18px; display:flex; flex-direction:column; gap:12px}

.blog-h1{margin:0 0 6px; font-size:28px}
.blog-h2{margin:0; font-size:18px}
.blog-muted{opacity:.75; margin:0; line-height:1.45}

.blog-search{display:flex; gap:10px}
.blog-search input{
  flex:1;
  padding: 12px 12px;
  border-radius: 12px;
  border:1px solid var(--blog-border);
  background: var(--soft);
  color: inherit;
  outline:none;
}
.blog-search input:focus{
  border-color: rgba(76,195,255,.65);
  box-shadow: 0 0 0 4px rgba(76,195,255,.10);
}
.blog-filters{display:flex; gap:10px; flex-wrap:wrap}
.blog-filters select{
  flex:1; min-width: 160px;
  padding: 10px 10px;
  border-radius: 12px;
  border:1px solid var(--blog-border);
  background: var(--soft);
  color: inherit;
  outline:none;
}
.blog-filters select:focus{
  border-color: rgba(76,195,255,.65);
  box-shadow: 0 0 0 4px rgba(76,195,255,.10);
}

.blog-meta{display:flex; gap:12px; align-items:center; margin: 10px 0 14px}
.blog-pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--blog-border);
  background: var(--soft);
  font-weight:900;
  font-size:13px;
}

/* Grid cards */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-bottom: 8px;
}
.blog-card{
  border:1px solid var(--blog-border);
  background: var(--blog-card);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 240px;
}
.blog-cover{
  height:120px;
  background: linear-gradient(135deg, rgba(76,195,255,.18), rgba(23,194,122,.12));
  border-bottom:1px solid var(--blog-border);
  background-size: cover;
  background-position:center;
}
.blog-card-body{padding:14px; display:flex; flex-direction:column; gap:10px; flex:1}

.blog-title{
  margin:0;
  font-weight: 950;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing:.2px;
}
.blog-subtitle{
  margin: 0;
  opacity: .80;
  font-size: 13.5px;
  line-height: 1.35;

  /* 2 satır kilidi */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}

.blog-metaRow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  opacity:.78; font-size:12px;
}
.blog-badge{
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--blog-border);
  background: var(--soft);
}
.blog-badge.accent{
  border-color: rgba(76,195,255,.55);
  opacity:1;
}

.blog-actions{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto;
}
.blog-read{
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(76,195,255,.55);
  border-radius:12px;
  padding:10px 12px;
  background: rgba(76,195,255,.12);
}
.blog-read:hover{background: rgba(76,195,255,.18)}
.blog-mutedlink{opacity:.78; text-decoration:none}
.blog-mutedlink:hover{opacity:1}

/* Pager */
.blog-pager{
  display:flex; justify-content:center; align-items:center; gap:12px;
  margin: 14px 0 30px;
}
.blog-pageinfo{opacity:.75; font-size:13px}
.blog-btn{
  border:1px solid var(--blog-border);
  background: var(--soft);
  color: inherit;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}
.blog-btn:hover{border-color: rgba(76,195,255,.55)}
.blog-btn.ghost{opacity:.85}

/* Post */
.blog-backlink{
  display:inline-block;
  margin: 18px 0 12px;
  opacity:.78;
  text-decoration:none;
}
.blog-backlink:hover{opacity:1}

.blog-post{
  border:1px solid var(--blog-border);
  background: var(--blog-card);
  border-radius:16px;
  overflow:hidden;
}
.blog-post-cover{
  height:220px;
  background-size: cover;
  background-position:center;
  border-bottom:1px solid var(--blog-border);
}
.blog-post-head{padding:18px}
.blog-post-title{margin:0 0 8px; font-size:30px; line-height:1.15}
.blog-post-meta{opacity:.78; font-size:13px; display:flex; gap:10px; flex-wrap:wrap}
.blog-post-tags{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.blog-tag{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--blog-border);
  background: var(--soft);
  opacity:.85;
  font-size:12px;
}
.blog-post-body{
  padding: 0 18px 18px;
  line-height: 1.75;
}
.blog-post-body pre{
  border:1px solid var(--blog-border);
  background: var(--soft);
  padding:12px;
  border-radius:12px;
  overflow:auto;
}
.blog-post-body code{
  border:1px solid var(--blog-border);
  background: var(--soft);
  padding:2px 6px;
  border-radius:8px;
}

/* Related */
.blog-related{margin-top:16px}
.blog-related-head{display:flex; justify-content:space-between; align-items:end; gap:12px}
.blog-related-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}
.blog-related-item{
  border:1px solid var(--blog-border);
  background: var(--soft);
  border-radius:14px;
  padding:12px;
}
.blog-related-item a{text-decoration:none; font-weight:950}
.blog-related-item .small{opacity:.78; font-size:12px; margin-top:6px}

/* Footer */
.blog-footer{
  border-top:1px solid var(--blog-border);
  background: var(--blog-bgGlass);
  margin-top: 30px;
}
.blog-footer-inner{
  padding: 16px 0;
  opacity:.78;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.blog-footer a{text-decoration:none; opacity:.85}
.blog-footer a:hover{opacity:1}
.blog-dotsep{opacity:.6}

@media (max-width: 980px){
  .blog-hero{flex-direction:column}
  .blog-hero-right{width:100%}
  .blog-grid{grid-template-columns: repeat(2, 1fr)}
  .blog-related-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 560px){
  .blog-grid{grid-template-columns: 1fr}
  .blog-related-grid{grid-template-columns: 1fr}
  .blog-post-title{font-size:24px}
}
/* Blog Atölyesi – Slogan boşluk ayarı */
.blog-slogan{
  margin-top: 18px;
}