:root{
  --accent: #6366f1;   /* Mor-mavi vurgu */
  --bg: #0f172a;       /* Koyu arka plan */
  --card: #1e293b;     /* Kart rengi */
  --muted: #94a3b8;    /* Soluk yazılar */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:var(--bg);
  color:#f1f5f9; /* Açık yazı */
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:28px;
}

.site-header{ text-align:center; margin-bottom:18px; }
.site-header h1{ font-size:2.2rem; margin:0; color:#e2e8f0; }
.subtitle{ color:var(--muted); margin-top:6px; }

.controls{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  max-width:1060px;
  margin-bottom:20px;
  flex-wrap: wrap;
}

#search{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #334155;
  outline:none;
  font-size:1rem;
  background:#0f172a;
  color:#f1f5f9;
}
#search:focus{ box-shadow:0 0 8px rgba(99,102,241,0.25); border-color:var(--accent); }

/* Ortak dropdown stilleri */
#category,
#author,
#sort,
#previewLen{
  padding:10px;
  border-radius:10px;
  border:1px solid #334155;
  background:#1e293b;
  color:#f1f5f9;
  font-size:1rem;
}
#category:focus,
#author:focus,
#sort:focus,
#previewLen:focus{
  box-shadow:0 0 8px rgba(99,102,241,0.25);
  border-color:var(--accent);
}

#refreshBtn{
  padding:9px 12px;
  background:var(--accent);
  color:white;
  border:none;
  border-radius:10px;
  cursor:pointer;
}
#refreshBtn:hover{ opacity:0.85 }

.grid{
  width:100%;
  max-width:1060px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap:18px;
}

/* Kart */
.blog-card{
  background:var(--card);
  padding:18px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  min-height:160px;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 14px 28px rgba(0,0,0,0.45); }

.blog-card h2{ margin:0 0 8px; font-size:1.1rem; color:#f8fafc; }
.blog-card .meta{ color:var(--muted); font-size:0.9rem; margin-bottom:10px; }
.blog-card p{ margin:0 0 14px; color:#cbd5e1; flex:1; }

.blog-card a.read{
  display:inline-block;
  padding:8px 12px;
  background:var(--accent);
  color:white;
  border-radius:8px;
  text-decoration:none;
  font-size:0.95rem;
}
.blog-card a.read:hover{ background:#4338ca }

/* Detay sayfa */
.detail-container{
  width:100%;
  max-width:840px;
  background:var(--card);
  padding:28px;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
  margin:22px 0;
}
.detail-container h1{ margin-top:0; font-size:1.8rem; color:#f8fafc; }
.detail-container .meta{ color:var(--muted); margin-bottom:16px }
.detail-container p{ line-height:1.7; color:#e2e8f0 }

.footer{ margin-top:18px; color:var(--muted); font-size:0.9rem; }

@media (max-width:640px){
  .controls{ flex-direction:column; align-items:stretch; gap:8px; }
  #previewLen,
  #category,
  #author,
  #sort{ width:100% }
}