/* ==========================================================================
   biMARJ — Blog yazı DETAY sayfası
   Yalnızca /blog/{slug}/ sayfasında yüklenir (pageStyles: blog-post).
   Yerleşim önce flexbox ile kurulur (eski motorlar), @supports ile grid'e geçer.
   ========================================================================== */

/* ---- 1. Yerleşim ---------------------------------------------------------
   container 1180px · makale ~828px · sağ kolon 320px · gap 32px          */
.post-layout{
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:start; align-items:flex-start;
  padding-bottom:var(--sp-10, 64px);
}
.post-layout > .post-article{
  -webkit-box-flex:1; flex:1 1 620px;
  width:calc(100% - 340px); min-width:0; box-sizing:border-box;
}
.post-layout > .post-side{
  flex:0 0 312px; width:312px; min-width:312px;
  margin-left:28px; box-sizing:border-box;
}
@supports (display: grid){
  .post-layout{ display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:28px; }
  .post-layout > .post-article,
  .post-layout > .post-side{ width:auto; min-width:0; margin-left:0; flex:none; }
}

/* ---- 1b. Makale paneli --------------------------------------------------
   Desen ile metin arasına hafif bir yüzey koyar; ağır kart görünümü yok. */
.post-panel{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(231,235,239,.9);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,40,56,.03), 0 12px 30px rgba(16,40,56,.045);
  padding:30px 32px 34px;
  margin-bottom:26px;
}
.post-article{ min-width:0; }

/* ---- 2. Başlık alanı ---- */
.post-head{ margin-bottom:26px; }
.post-cat{
  display:inline-block; padding:5px 12px; border-radius:999px;
  background:#e8f5f0; color:var(--green, #008760);
  font-size:12.5px; font-weight:600;
}
.post-cat:hover{ background:var(--green, #008760); color:#fff; }
.post-head h1{
  margin:14px 0 12px;
  font-size:clamp(28px, 3.1vw, 42px);
  line-height:1.22; letter-spacing:-.02em; overflow-wrap:break-word;
}
.post-byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-size:13.5px; color:var(--muted, #5f6d7c);
}
.post-byline > * + *{ position:relative; padding-left:15px; }
.post-byline > * + *::before{
  content:""; position:absolute; left:0; top:50%;
  width:3px; height:3px; margin-top:-1px; border-radius:50%;
  background:currentColor; opacity:.5;
}
.post-byline-author{ font-weight:600; color:var(--ink, #0d1b2a); }
.post-byline-author:hover{ color:var(--green, #008760); }

/* ---- 3. Kısa cevap kutusu ---- */
.post-answer{
  margin:0 0 26px; padding:18px 22px;
  background:linear-gradient(180deg,#eef7f2 0%, #e9f4ee 100%);
  border:1px solid #cfe5d9; border-left:4px solid var(--green, #008760);
  border-radius:0 12px 12px 0;
}
.post-answer-label{
  display:block; margin-bottom:6px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--green, #008760);
}
.post-answer p{ margin:0; font-size:16px; line-height:1.65; color:var(--ink, #0d1b2a); }

.post-figure{ margin:0 0 26px; border-radius:14px; overflow:hidden; }
.post-figure img{ display:block; width:100%; height:auto; }

/* ---- 4. Makale gövdesi ---- */
.post-content{
  max-width:68ch;                 /* ~70-75 karakterlik okuma genişliği */
  font-size:17px; line-height:1.75; color:var(--ink, #0d1b2a);
}
.post-content h2{
  position:relative;
  margin:2.7em 0 .75em; padding-top:1.05em;
  font-size:26px; line-height:1.3; letter-spacing:-.01em;
  scroll-margin-top:96px;
}
/* Bölüm geçişi: başlığın üstünde çok hafif ayırıcı */
.post-content h2::before{
  content:""; position:absolute; left:0; top:0; width:28px; height:2px;
  background:var(--green, #008760); border-radius:2px; opacity:.45;
}
.post-content > h2:first-child{ margin-top:.3em; }
.post-content h3{ margin:1.9em 0 .55em; font-size:20px; line-height:1.35; scroll-margin-top:96px; }
.post-content p{ margin:0 0 1.1em; }
.post-content ul, .post-content ol{ margin:.2em 0 1.35em; padding-left:1.45em; }
.post-content li{ margin-bottom:.55em; }
.post-content li::marker{ color:var(--green, #008760); }
.post-content a{ color:var(--green-dark, #006d50); text-decoration:underline; text-underline-offset:2px; }
.post-content strong{ font-weight:600; }
.post-content img{ max-width:100%; height:auto; border-radius:12px; }
.post-content blockquote{
  margin:1.9em 0; padding:18px 22px;
  background:#fbfaf7; border:1px solid #e6e1d6;
  border-left:4px solid #d9b45a;          /* nötr zemin, hafif amber şerit */
  border-radius:0 12px 12px 0;
  font-size:16.5px; line-height:1.7; color:#3b3a34;
}
.post-content blockquote p:last-child{ margin-bottom:0; }
.post-content pre{
  margin:1.4em 0; padding:14px 16px; border-radius:10px;
  background:#0f1a22; color:#cfd8dd; overflow-x:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13.5px;
}
.post-content code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92em; background:#eef2f0; padding:2px 6px; border-radius:5px;
}
.post-content pre code{ background:none; padding:0; }
/* Tablo kendi içinde kayar; sayfa yatay taşmaz */
.post-content table{
  display:block; width:100%; max-width:100%; overflow-x:auto;
  border-collapse:collapse; font-size:15px; margin:1.5em 0;
}
.post-content th, .post-content td{
  text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--line, #e7ebef); white-space:nowrap;
}
.post-content th{ background:#f7faf9; font-weight:600; }
.post-content hr{ margin:2em 0; border:0; border-top:1px solid var(--line, #e7ebef); }

/* ---- 5. Kaynaklar ---- */
.post-sources{ margin-top:38px; padding-top:26px; border-top:1px solid var(--line, #e7ebef); }
.post-sources h2, .post-tools h2, .post-related h2{
  font-size:21px; margin:0 0 16px; letter-spacing:-.01em;
}
.post-sources ul{ margin:0; padding:0; list-style:none; }
.post-sources li{
  padding:12px 0; border-bottom:1px solid var(--line, #e7ebef);
  font-size:14.5px; line-height:1.55;
}
.post-sources li:last-child{ border-bottom:0; }
.post-sources a{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink, #0d1b2a); }
.post-sources a:hover{ color:var(--green, #008760); }
.post-sources a svg{ width:13px; height:13px; flex:0 0 13px; opacity:.6; }
.post-source-url{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted, #5f6d7c); overflow-wrap:anywhere; }
.post-source-note{ display:block; margin-top:3px; font-size:13px; color:var(--muted, #5f6d7c); }

/* ---- 6. İlgili araçlar (2 kolon) ---- */
.post-tools{ margin-top:44px; }
.post-tool-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.post-tool-grid > *{ flex:1 1 calc(50% - 8px); min-width:240px; box-sizing:border-box; }
@supports (display: grid){
  .post-tool-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  .post-tool-grid > *{ width:auto; min-width:0; }
}
.post-tool-card{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px; border:1px solid var(--line, #e7ebef); border-radius:14px;
  background:#fff; transition:.18s;
}
.post-tool-card:hover{
  border-color:var(--green, #008760);
  box-shadow:0 10px 26px rgba(16,40,56,.08); transform:translateY(-2px);
}
.post-tool-card .icon-badge{ flex:0 0 auto; margin-right:14px; }
@supports (gap: 14px){ .post-tool-card .icon-badge{ margin-right:0; } }
.post-tool-body h3{ margin:0 0 4px; font-size:15.5px; line-height:1.3; color:var(--ink, #0d1b2a); }
.post-tool-body p{ margin:0; font-size:13px; line-height:1.55; color:var(--muted, #5f6d7c); }

/* ---- 7. Etiketler ---- */
.post-tags{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line, #e7ebef);
}
.post-tags-label{
  margin-right:4px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted, #5f6d7c);
}
.post-tag{
  padding:6px 13px; border-radius:999px;
  background:#f2f6f4; color:#24313d; font-size:13px; font-weight:500;
}
.post-tag:hover{ background:var(--green, #008760); color:#fff; }

/* ---- 8. Yazar kartı ---- */
.post-author{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:26px; padding:18px 20px;
  background:#f8fbfa; border:1px solid var(--line, #e7ebef); border-radius:16px;
}
.post-author-avatar{ margin-right:16px;
  flex:0 0 50px; width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(145deg, #00a074 0%, #00704f 100%);
  color:#fff; font-size:21px; font-weight:800;
  box-shadow:0 4px 12px rgba(0,135,96,.28);
}
.post-author-body{ min-width:0; }
.post-author-label{
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--green-dark, #006d50);
}
.post-author h3{ margin:4px 0 3px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.post-author h3 a:hover{ color:var(--green, #008760); }
.post-author-role{ margin:0 0 7px; font-size:12.5px; font-weight:600; color:var(--muted, #5f6d7c); }
.post-author-bio{ margin:0; font-size:13.5px; line-height:1.6; color:#24313d; }

/* ---- 9. İlgili yazılar (3 kolon) ---- */
.post-related{ margin-top:40px; }
.post-related-grid{ display:flex; flex-wrap:wrap; gap:18px; }
.post-related-grid > *{ flex:1 1 calc(33.333% - 12px); min-width:220px; box-sizing:border-box; }
@supports (display: grid){
  .post-related-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
  .post-related-grid > *{ width:auto; min-width:0; }
}
.post-related-card{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  border:1px solid #d6dfe5; border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,40,56,.05), 0 8px 20px rgba(16,40,56,.06);
  transition:.18s;
}
.post-related-body{ flex:1 1 auto; display:flex; flex-direction:column; }
.post-related-card time{ margin-top:auto; }
.post-related-card:hover{
  border-color:var(--green, #008760);
  box-shadow:0 10px 26px rgba(16,40,56,.08); transform:translateY(-2px);
}
/* Oran kutusu padding yöntemiyle: aspect-ratio her motorda desteklenmiyor */
.post-related-cover{
  position:relative; display:block; height:0; padding-top:56.25%;
  overflow:hidden; background:#eef2f0;
}
.post-related-cover img{
  position:absolute; left:0; top:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.post-related-cover.is-empty{
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,.62), transparent 58%),
    linear-gradient(135deg, #bfe0d0 0%, #d8ece1 55%, #e9f4ef 100%);
}
.post-related-fallback{
  position:absolute; left:0; top:0; right:0; bottom:0;
  display:grid; place-items:center;
  font-size:42px; font-weight:800; letter-spacing:-.02em;
  color:var(--green-dark, #006d50); opacity:.8;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.post-related-body{ display:block; padding:14px 16px 16px; }
.post-related-cat{
  display:inline-block; align-self:flex-start; margin-bottom:9px;
  padding:4px 10px; border-radius:999px;
  background:#e1f1ea; border:1px solid #c8e3d6;
  font-size:11px; font-weight:700; letter-spacing:.045em;
  text-transform:uppercase; color:var(--green-dark, #006d50);
}
.post-related-card h3{ margin:0 0 6px; font-size:15.5px; font-weight:600;
  line-height:1.35; color:var(--ink, #0d1b2a); }
.post-related-card p{
  margin:0 0 10px; font-size:13px; line-height:1.55; color:#55636f;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-related-card time{
  font-size:12px; font-weight:500; color:#4f5d69;
  padding-top:9px; border-top:1px solid #eef2f4;
}

/* ---- 10. Sağ kolon ----
   Kolon boyunca gerçek içerik: içindekiler · araçlar · reklam · son yazılar */
.post-side{ min-width:0; }
.side-card{
  padding:18px 20px; margin-bottom:20px;
  background:linear-gradient(180deg,#fbfdfc 0%, #f7faf9 100%);
  border:1px solid #dde5e9; border-radius:14px;
  box-shadow:0 1px 2px rgba(16,40,56,.04), 0 6px 18px rgba(16,40,56,.04);
}
.side-card > h2{
  display:flex; align-items:center; gap:9px;
  margin:0 0 14px; padding-bottom:11px;
  border-bottom:1px solid #dde5e9;
  font-size:12.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink, #0d1b2a);
}
/* Başlık önünde kısa yeşil işaret */
.side-card > h2::before{
  content:""; flex:0 0 3px; width:3px; height:13px;
  background:var(--green, #008760); border-radius:2px;
}
/* Araçlar */
.side-tools{ display:flex; flex-direction:column; gap:10px; }
/* gap desteklemeyen motorlarda aralık kaybolmasın */
.side-tools > * + *{ margin-top:10px; }
@supports (gap: 10px){ .side-tools > * + *{ margin-top:0; } }
.side-tool{
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 12px; border:1px solid #dde5e9;
  border-radius:11px; background:#fff;
  box-shadow:0 1px 2px rgba(16,40,56,.04); transition:.16s;
}
.side-tool + .side-tool{ margin-top:0; }
.side-tool:hover{
  border-color:var(--green, #008760);
  box-shadow:0 6px 16px rgba(16,40,56,.07); transform:translateY(-1px);
}
.side-tool .icon-badge{ flex:0 0 auto; margin-right:11px; }
@supports (gap: 11px){ .side-tool .icon-badge{ margin-right:0; } }
.side-tool-body{ min-width:0; }
.side-tool-body strong{
  display:block; font-size:13.5px; line-height:1.3; color:var(--ink, #0d1b2a);
}
.side-tool-body small{
  display:block; margin-top:3px; font-size:11.5px; line-height:1.45;
  color:var(--muted, #5f6d7c);
}
/* Son yazılar */
.side-posts{ margin:0; padding:0; list-style:none; }
.side-posts li + li{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line, #e7ebef); }
.side-posts a{ display:flex; gap:11px; align-items:flex-start; }
.side-post-thumb{ margin-right:11px; }
@supports (gap: 11px){ .side-post-thumb{ margin-right:0; } }
.side-post-thumb{
  position:relative; flex:0 0 64px; width:64px; height:50px;
  border-radius:9px; overflow:hidden; background:#eef2f0;
  border:1px solid #dde5e9; box-shadow:0 1px 2px rgba(16,40,56,.05);
}
.side-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.side-post-thumb.is-empty{
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 20% 12%, rgba(255,255,255,.7), transparent 62%),
    linear-gradient(135deg,#cfe8dc 0%, #e4f1ea 100%);
  font-size:20px; font-weight:800; color:var(--green-dark, #006d50);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.side-post-body{ min-width:0; }
.side-post-body strong{
  display:block; font-size:13.5px; font-weight:600; line-height:1.4;
  color:var(--ink, #0d1b2a);
}
.side-posts a:hover .side-post-body strong{ color:var(--green, #008760); }
.side-post-body time{ display:block; margin-top:4px; font-size:11.5px; color:var(--muted, #5f6d7c); }
/* Sağ kolondaki reklam alanı */
.post-side .ad-slot{ margin-bottom:18px; }

.post-toc{
  position:-webkit-sticky; position:sticky; top:86px;
  padding:18px 20px; margin-bottom:20px;
  background:linear-gradient(180deg,#fbfdfc 0%, #f7faf9 100%);
  border:1px solid #dde5e9; border-radius:14px;
  box-shadow:0 1px 2px rgba(16,40,56,.04), 0 6px 18px rgba(16,40,56,.04);
}
.post-toc h2{
  display:flex; align-items:center; gap:9px;
  margin:0 0 12px; padding-bottom:11px;
  border-bottom:1px solid #dde5e9;
  font-size:12.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink, #0d1b2a);
}
.post-toc h2::before{
  content:""; flex:0 0 3px; width:3px; height:13px;
  background:var(--green, #008760); border-radius:2px;
}
.post-toc ol{ margin:0; padding:0; list-style:none; }
.post-toc li.is-sub{ padding-left:14px; }
.post-toc a{
  display:block; padding:6px 0 6px 10px; font-size:13.5px; line-height:1.45;
  color:#24313d; border-left:2px solid transparent;
}
.post-toc li.is-sub a{ font-size:13px; color:var(--muted, #5f6d7c); }
.post-toc a:hover{ color:var(--green, #008760); border-left-color:var(--green, #008760); }

/* ---- 11. Duyarlı ---- */
@media (max-width: 1024px){
  .post-layout > .post-article,
  .post-layout > .post-side{ flex:1 1 100%; width:100%; min-width:0; margin-left:0; }
  .post-layout > .post-side{ margin-top:32px; }
  .post-content{ max-width:none; }
  .post-toc{ position:static; }
  .post-related-grid > *{ flex:1 1 calc(50% - 9px); }
  .post-panel{ padding:26px 24px 28px; }
  .side-tools{ display:flex; flex-direction:row; flex-wrap:wrap; }
  .side-tools > *{ flex:1 1 calc(50% - 5px); min-width:200px; }
}
@supports (display: grid){
  @media (max-width: 1024px){
    .post-layout{ grid-template-columns:minmax(0,1fr); }
    .post-related-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
}
@media (max-width: 640px){
  .post-head h1{ font-size:clamp(24px, 7vw, 30px); }
  .post-content{ font-size:16px; }
  .post-content h2{ font-size:22px; }
  .post-content h3{ font-size:18px; }
  .post-answer{ padding:15px 16px; }
  .post-author{ flex-direction:column; gap:12px; padding:18px; }
  .post-tool-grid > *, .post-related-grid > *{ flex:1 1 100%; min-width:0; }
  .post-panel{ padding:20px 16px 24px; border-radius:14px; }
  .side-tools > *{ flex:1 1 100%; min-width:0; }
}
@supports (display: grid){
  @media (max-width: 640px){
    .post-tool-grid, .post-related-grid{ grid-template-columns:minmax(0,1fr); }
  }
}

/* ---- 12. Arka plan deseni --------------------------------------------------
   ÖNCEKİ YAKLAŞIM KALDIRILDI: tüm ekranı kaplayan sabit ::after örtüsü,
   layout.css'teki ".site-header, .footer, .hero{ position:relative }" kuralı
   yüzünden z-index:auto olan FOOTER'IN ÜSTÜNE boyanıyor ve footer'ı
   soluklaştırıyordu (header z-index:40 olduğu için etkilenmiyordu).

   Yeni yaklaşım: desen yalnızca <main> alanında, o alanın kendi yarı saydam
   beyaz zemini ile hafifletilir. Örtü, katman oyunu veya opacity yok; header
   ve footer hiçbir şekilde etkilenmez. */
.page-blog-post > main{
  background:rgba(255,255,255,.62);
}

@supports (gap: 18px){ .post-author-avatar{ margin-right:0; } }