/* ========================================
   BLOG HERO - mikro.com.tr tarzı
   ======================================== */
.blog-hero {
  background: transparent;
  padding: var(--space-10) 0 var(--space-6);
  text-align: center;
  margin-top: var(--header-height);
}
.blog-hero h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-1);
}
.blog-hero p {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.blog-hero-search {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.blog-hero-search input {
  flex: 1;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  outline: none;
}
.blog-hero-search input::placeholder { color: var(--color-text-muted); }
.blog-hero-search button {
  padding: 12px 18px;
  background: #e30613;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex; align-items: center;
}
.blog-hero-search button:hover { background: #cc0000; }

/* ========================================
   LAYOUT: Sol yazılar + Sağ sidebar
   ======================================== */
.blog-section { padding-top: var(--space-6); }

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: start;
}
.blog-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--header-height);
  padding-top: var(--space-4);
}

/* ========================================
   SIDEBAR (sağ taraf)
   ======================================== */
.blog-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-3)); }
.sidebar-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.sidebar-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-primary);
}

/* Kategoriler */
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li { margin-bottom: 2px; }
.category-list li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none;
  font-size: var(--font-size-sm); transition: all var(--transition-fast);
}
.category-list li a:hover, .category-list li a.active {
  background: var(--color-primary); color: #fff;
}
.category-count {
  background: var(--color-bg); padding: 2px 8px;
  border-radius: var(--radius-full); font-size: var(--font-size-xs);
  color: var(--color-text-muted); min-width: 24px; text-align: center;
}
.category-list li a:hover .category-count,
.category-list li a.active .category-count {
  background: rgba(255,255,255,.2); color: #fff;
}

/* En Çok Okunanlar */
.popular-list { list-style: none; padding: 0; margin: 0; counter-reset: popular; }
.popular-list li {
  counter-increment: popular;
  padding: 10px 0 10px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: flex-start; gap: 10px;
}
.popular-list li:last-child { border-bottom: none; }
.popular-list li::before {
  content: counter(popular);
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius-full); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold); flex-shrink: 0; margin-top: 2px;
}
.popular-list li a {
  text-decoration: none; color: var(--color-text);
  font-size: var(--font-size-sm); line-height: var(--line-height-tight);
  transition: color var(--transition-fast);
}
.popular-list li a:hover { color: var(--color-primary); }
.popular-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 3px; }

/* Son Yazılar */
.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list li { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.recent-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.recent-list li a { text-decoration: none; color: var(--color-text); font-size: var(--font-size-sm); line-height: var(--line-height-tight); display: block; transition: color var(--transition-fast); }
.recent-list li a:hover { color: var(--color-primary); }
.recent-date { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 4px; display: block; }

/* ========================================
   BLOG GRID & CARDS - mikro.com.tr tarzı
   ======================================== */
.blog-main { min-width: 0; }
.blog-grid { display: flex; flex-direction: column; gap: var(--space-4); }

.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex; flex-direction: row;
}
.blog-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.blog-card-link {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: row; width: 100%;
}
.blog-card-img-wrapper {
  position: relative; width: 260px; min-height: 180px;
  flex-shrink: 0; overflow: hidden; background: var(--color-bg-light);
  margin: var(--space-2); border-radius: var(--radius-lg);
}
.blog-card-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); }
.blog-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-gradient); opacity: .12;
}
.blog-card-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; justify-content: center; }
.blog-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-1); }
.blog-card-tag {
  background: #e30613;
  color: #fff; padding: 3px 10px;
  border-radius: var(--radius-full); font-size: 11px;
  font-weight: var(--font-weight-medium);
}
.blog-card-tag.tag-category { background: #e30613; }
.blog-card-title {
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
  color: var(--color-text-heading); margin-bottom: 6px;
  line-height: var(--line-height-tight);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-meta {
  font-size: var(--font-size-xs); color: var(--color-text-muted);
  margin-bottom: var(--space-1); display: flex; align-items: center;
  gap: var(--space-2); flex-wrap: wrap;
}
.blog-card-meta svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.blog-card-excerpt {
  font-size: var(--font-size-sm); color: var(--color-text);
  line-height: var(--line-height-normal);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-readmore {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-primary); margin-top: auto; padding-top: 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
.blog-card-readmore svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.blog-card:hover .blog-card-readmore svg { transform: translateX(4px); }
.blog-empty { text-align: center; padding: var(--space-8) 0; color: var(--color-text-muted); font-size: var(--font-size-lg); }

/* Filter info */
.blog-filter-info {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text);
}
.filter-clear-btn {
  background: none; border: 1px solid var(--color-primary);
  color: var(--color-primary); cursor: pointer; font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); padding: 4px 12px;
  border-radius: var(--radius-full); transition: all var(--transition-fast);
}
.filter-clear-btn:hover { background: var(--color-primary); color: #fff; }

/* ========================================
   PAGINATION
   ======================================== */
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: var(--space-5); flex-wrap: wrap; }
.page-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--font-size-sm); cursor: pointer;
  transition: all var(--transition-fast); text-decoration: none;
}
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-btn.disabled { opacity: .4; pointer-events: none; }
.page-dots { color: var(--color-text-muted); padding: 0 4px; }

/* ========================================
   BLOG POST (Tekil Yazı) - SEO uyumlu
   ======================================== */
.blog-post { max-width: 100%; }
.blog-post-breadcrumb {
  display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
  font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.blog-post-breadcrumb a { color: var(--color-primary); text-decoration: none; }
.blog-post-breadcrumb a:hover { text-decoration: underline; }
.blog-post-breadcrumb .sep { color: var(--color-text-muted); margin: 0 2px; }
.blog-post h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-2); line-height: var(--line-height-tight); }
.blog-post-meta {
  font-size: var(--font-size-sm); color: var(--color-text-muted);
  margin-bottom: var(--space-4); display: flex; gap: var(--space-3);
  align-items: center; flex-wrap: wrap;
}
.blog-post-meta-item { display: flex; align-items: center; gap: 6px; }
.blog-post-meta svg { width: 16px; height: 16px; }
.blog-post-img { width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: var(--space-4); display: block; }
.blog-post-content { font-size: var(--font-size-base); line-height: 1.85; color: var(--color-text); }
.blog-post-content p { margin-bottom: var(--space-3); }
.blog-post-content strong { color: var(--color-text-heading); font-weight: var(--font-weight-bold); }
.blog-post-content h2 { font-size: var(--font-size-xl); color: var(--color-text-heading); margin: var(--space-5) 0 var(--space-2); }
.blog-post-content ul, .blog-post-content ol { margin: var(--space-2) 0; padding-left: var(--space-4); }
.blog-post-content li { margin-bottom: var(--space-1); }

/* Tags + Share footer */
.blog-post-footer {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.blog-post-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blog-post-tags span { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-heading); }
.post-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 14px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text); transition: all var(--transition-fast);
}
.post-tag:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg); }
.blog-post-share { display: flex; align-items: center; gap: var(--space-1); }
.blog-post-share > span { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-heading); margin-right: 4px; }
.share-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
  transition: all var(--transition-fast); text-decoration: none;
}
.share-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.share-btn svg { width: 16px; height: 16px; }
.blog-not-found { text-align: center; padding: var(--space-8) 0; color: var(--color-text-muted); font-size: var(--font-size-lg); }

/* ========================================
   ADMIN (login, bar, stats, layout, form, list, preview, toast)
   Aynen mevcut - admin stilleri
   ======================================== */
.admin-login-overlay { min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; justify-content: center; padding: var(--space-4); margin-top: var(--header-height); }
.admin-login-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); width: 100%; max-width: 400px; text-align: center; }
.admin-login-icon { margin-bottom: var(--space-3); color: var(--color-primary); }
.admin-login-card h2 { font-size: var(--font-size-xl); color: var(--color-text-heading); margin-bottom: var(--space-1); }
.admin-login-card > p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.admin-login-form .form-group { text-align: left; margin-bottom: var(--space-3); }
.admin-login-form .form-group label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-1); }
.btn-full { width: 100%; }
.login-error { color: var(--color-error); font-size: var(--font-size-sm); margin-top: var(--space-2); }
.admin-login-back { display: inline-block; margin-top: var(--space-3); color: var(--color-primary); font-size: var(--font-size-sm); text-decoration: none; }
.admin-login-back:hover { text-decoration: underline; }
.admin-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; margin-top: var(--header-height); }
.admin-bar-inner { display: flex; align-items: center; justify-content: space-between; }
.admin-bar h2 { font-size: var(--font-size-lg); color: var(--color-text-heading); }
.admin-bar-actions { display: flex; gap: var(--space-1); align-items: center; }
.admin-stats { padding: var(--space-4) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); text-align: center; }
.stat-number { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.admin-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.admin-form-panel, .admin-list-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.admin-panel-header { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.admin-panel-header h3 { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-text-heading); white-space: nowrap; }
.admin-search { max-width: 200px; padding: 6px 12px !important; font-size: var(--font-size-xs) !important; }
.admin-form { padding: var(--space-3); }
.admin-form .form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.admin-form .form-group label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.admin-editor { min-height: 250px; font-family: var(--font-family); line-height: 1.6; resize: vertical; border-top-left-radius: 0; border-top-right-radius: 0; }
.form-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 4px; }
.form-actions { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.editor-toolbar { display: flex; gap: 2px; background: var(--color-bg); border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 4px; }
.editor-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; font-size: var(--font-size-sm); transition: all var(--transition-fast); }
.editor-btn:hover { background: var(--color-surface-hover); color: var(--color-primary); }
.admin-posts-list { max-height: 600px; overflow-y: auto; padding: var(--space-2); }
.admin-post-item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); transition: border-color var(--transition-fast); }
.admin-post-item:hover { border-color: var(--color-primary); }
.admin-post-info { flex: 1; min-width: 0; }
.admin-post-title { font-weight: var(--font-weight-medium); color: var(--color-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-sm); }
.admin-post-date { font-size: var(--font-size-xs); color: var(--color-text-muted); display: flex; gap: var(--space-1); align-items: center; margin-top: 2px; }
.admin-post-category-tag { display: inline-block; background: var(--color-primary); color: #fff; padding: 1px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: var(--font-weight-medium); }
.admin-post-actions { display: flex; gap: 4px; flex-shrink: 0; }
.admin-post-actions .btn { padding: 5px 12px; font-size: var(--font-size-xs); }
.btn-sm { padding: 6px 14px; font-size: var(--font-size-xs); }
.btn-danger { background: var(--color-error); color: #fff; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
.btn-danger:hover { opacity: .85; }
.btn-edit { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
.btn-edit:hover { opacity: .85; }
.preview-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.preview-modal-content { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); width: 100%; max-width: 800px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.preview-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.preview-modal-header h3 { font-size: var(--font-size-base); color: var(--color-text-heading); }
.preview-close { background: none; border: none; font-size: var(--font-size-xl); color: var(--color-text-muted); cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); transition: all var(--transition-fast); }
.preview-close:hover { background: var(--color-surface); color: var(--color-text); }
.preview-body { padding: var(--space-4); overflow-y: auto; line-height: 1.8; color: var(--color-text); }
.preview-body h1 { font-size: var(--font-size-2xl); margin-bottom: var(--space-2); }
.preview-body .preview-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.blog-post-category-tag { display: inline-block; background: #e30613; color: #fff; padding: 4px 16px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); }
.toast { position: fixed; bottom: var(--space-4); right: var(--space-4); background: var(--color-success); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); z-index: 10001; transform: translateY(100px); opacity: 0; transition: all var(--transition-base); box-shadow: var(--shadow-md); }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--color-error); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
  .blog-layout, .blog-detail-layout { grid-template-columns: 1fr 260px; gap: var(--space-3); }
  .blog-card-img-wrapper { width: 220px; }
  .admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .blog-hero { padding: var(--space-6) 0 var(--space-4); }
  .blog-hero h1 { font-size: var(--font-size-2xl); }
  .blog-layout, .blog-detail-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; order: 2; }
  .blog-card { flex-direction: column; }
  .blog-card-img-wrapper { width: 100%; min-height: 180px; }
  .form-row { grid-template-columns: 1fr; }
  .admin-post-item { flex-direction: column; align-items: flex-start; }
  .admin-post-actions { width: 100%; justify-content: flex-end; }
  .admin-bar-inner { flex-direction: column; gap: var(--space-1); text-align: center; }
  .blog-post-footer { flex-direction: column; align-items: flex-start; }
  .stats-grid { gap: var(--space-2); }
  .stat-number { font-size: var(--font-size-xl); }
}
@media (max-width: 480px) {
  .blog-hero-search { flex-direction: column; border-radius: var(--radius-lg); }
  .blog-hero-search button { justify-content: center; }
  .page-btn { min-width: 34px; height: 34px; font-size: var(--font-size-xs); }
}