/*
 * Ghost editorunun urettigi yapilar icin ek stiller.
 *
 * Sitenin kendi CSS'i (built/site.css) blog-post-content icindeki h2, p, ul,
 * pre, blockquote gibi ogeleri zaten stillendiriyor. Burada yalnizca Ghost'a
 * ozgu kg-* kart sinifları ve temanin kendi ekledigi birkac oge var.
 * Site token'lari (--navy-*, --blue-*, --shadow-*) built/site.css icinden gelir.
 */

/* --- Editor kartlari icin ortak bosluk --- */
.blog-post-content .kg-card {
  margin: 32px 0;
}

.blog-post-content .kg-card:first-child {
  margin-top: 0;
}

/* --- Gorsel kartlari --- */
.blog-post-content figure,
.blog-post-content .kg-image-card {
  margin: 32px 0;
}

.blog-post-content figure img,
.blog-post-content .kg-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  display: block;
}

.blog-post-content figcaption,
.blog-post-content .kg-card figcaption {
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.5;
}

/* Genis ve tam genislik kartlar. Icerik sutunu 900px ile sinirli oldugu icin
   tasma negatif margin ile veriliyor, dar ekranda kapatiliyor. */
.blog-post-content .kg-width-wide {
  margin-inline: -40px;
}

.blog-post-content .kg-width-full {
  margin-inline: -40px;
}

@media (max-width: 900px) {
  .blog-post-content .kg-width-wide,
  .blog-post-content .kg-width-full {
    margin-inline: 0;
  }
}

/* --- Bilgi kutusu (callout) --- */
.blog-post-content .kg-callout-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.blog-post-content .kg-callout-emoji {
  font-size: 1.25rem;
  line-height: 1.5;
}

.blog-post-content .kg-callout-text {
  margin: 0;
  color: var(--text-secondary);
}

.blog-post-content .kg-callout-card-blue { background: var(--blue-50); border-color: var(--blue-100); }
.blog-post-content .kg-callout-card-green { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.2); }
.blog-post-content .kg-callout-card-yellow { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.22); }
.blog-post-content .kg-callout-card-red { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.2); }

/* --- Kod kartlari --- */
.blog-post-content .kg-code-card pre {
  margin: 0;
}

/* --- Yer imi karti (link onizleme) --- */
.blog-post-content .kg-bookmark-card a.kg-bookmark-container {
  display: flex;
  text-decoration: none;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-post-content .kg-bookmark-card a.kg-bookmark-container:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}

.blog-post-content .kg-bookmark-content {
  padding: 18px 20px;
  flex: 1 1 auto;
  min-width: 0;
}

.blog-post-content .kg-bookmark-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.blog-post-content .kg-bookmark-description {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-post-content .kg-bookmark-metadata {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-post-content .kg-bookmark-icon {
  width: 18px;
  height: 18px;
}

.blog-post-content .kg-bookmark-thumbnail {
  flex: 0 0 200px;
  max-width: 200px;
}

.blog-post-content .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 700px) {
  .blog-post-content .kg-bookmark-card a.kg-bookmark-container { flex-direction: column-reverse; }
  .blog-post-content .kg-bookmark-thumbnail { flex-basis: auto; max-width: none; height: 180px; }
}

/* --- Katlanir icerik (toggle) --- */
.blog-post-content .kg-toggle-card {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px 20px;
  background: var(--surface-card);
}

.blog-post-content .kg-toggle-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.blog-post-content .kg-toggle-heading-text {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

.blog-post-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content {
  display: none;
}

.blog-post-content .kg-toggle-card-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: transform 0.2s ease;
}

.blog-post-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon {
  transform: rotate(180deg);
}

/* --- Buton karti --- */
.blog-post-content .kg-button-card {
  display: flex;
  justify-content: center;
}

.blog-post-content .kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  background: var(--navy-900);
  color: var(--text-inverse);
  box-shadow: var(--shadow-btn-primary);
}

.blog-post-content .kg-btn:hover {
  background: var(--navy-800);
}

/* --- Yatay ayrac --- */
.blog-post-content hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: 36px 0;
}

/* --- Ust gorsel --- */
.blog-post-figure {
  margin: 0;
}

.blog-post-figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  display: block;
}

.blog-post-figure figcaption {
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--text-tertiary);
  text-align: center;
}

/* --- Sayfalama --- */
.article-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.article-pagination-info {
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

/* Icindekiler govdeden uretilene kadar gizli durur */
.article-toc[hidden] {
  display: none;
}

/* --- Galeri karti ---
   Galeri kartini editorde kullanmiyoruz ama Ghost tema dogrulamasi bu
   siniflarin tanimli olmasini istiyor, yoksa kurulumda uyari veriyor. */
.blog-post-content .kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-post-content .kg-gallery-row {
  display: flex;
  gap: 8px;
}

.blog-post-content .kg-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

/* --- Kategori filtresi ---
   Statik sitede bunlar <button> idi, temada <a> oldu (etiket sayfalarina
   gidiyorlar). Baglanti olarak dogru gorunmeleri icin birkac ek gerekiyor. */
a.blog-category-btn {
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;
}

a.blog-category-btn.active:hover {
  color: #fff;
}

/* Ekran okuyucular icin baslik, gorsel olarak gizli.
   site.css icinde bu ad ile bir sinif yok, temaya ozel tanimlaniyor. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Blog ana sayfasindaki hero alti bilgi satiri. blog-post-meta yazi
   sayfasinda sola yaslı; burada hero ortali oldugu icin ortalaniyor. */
.blog-index-meta {
  justify-content: center;
  margin-top: 8px;
}

.blog-index-meta a {
  color: var(--link-color);
  text-decoration: none;
}

.blog-index-meta a:hover {
  text-decoration: underline;
}

/* --- Etiket renkleri ---
   Kart rozetinin rengi etiketin slug'ından geliyor. site.css içinde sekiz
   slug için renk tanımlı; ajans yeni etiket açtığında slug tanımsız kalıp
   rozet nötr görünüyordu. Aşağısı muhtemel konular için renk ekliyor,
   Türkçe adla açılan etiketlerin slug karşılıkları da dahil.
   Buraya da uymayan bir slug gelirse site.css'teki nötr görünüm geçerli olur,
   bozulma yaşanmaz. */
.blog-card-tag.network,
.blog-card-tag.ag,
.blog-card-tag.networking     { background: rgba(13, 148, 136, 0.18); color: #0f766e; }

.blog-card-tag.storage,
.blog-card-tag.depolama       { background: rgba(245, 158, 11, 0.18); color: #b45309; }

.blog-card-tag.backup,
.blog-card-tag.yedekleme      { background: rgba(99, 102, 241, 0.18); color: #4f46e5; }

.blog-card-tag.database,
.blog-card-tag.veritabani     { background: rgba(236, 72, 153, 0.16); color: #be185d; }

.blog-card-tag.compliance,
.blog-card-tag.uyumluluk,
.blog-card-tag.kvkk           { background: rgba(71, 85, 105, 0.16); color: #334155; }

.blog-card-tag.ai,
.blog-card-tag.yapay-zeka     { background: rgba(168, 85, 247, 0.18); color: #7e22ce; }

.blog-card-tag.linux,
.blog-card-tag.sunucu         { background: rgba(202, 138, 4, 0.18); color: #a16207; }

.blog-card-tag.container,
.blog-card-tag.docker         { background: rgba(6, 182, 212, 0.18); color: #0e7490; }

.blog-card-tag.guvenlik       { background: rgba(239, 68, 68, 0.2); color: #dc2626; }
.blog-card-tag.bulut          { background: rgba(59, 130, 246, 0.2); color: #2563eb; }
.blog-card-tag.maliyet        { background: rgba(249, 115, 22, 0.18); color: #ea580c; }
.blog-card-tag.izleme         { background: rgba(14, 165, 233, 0.18); color: #0284c7; }