/* ==========================================================================
   Meridyen — blog.css  (single + arşiv/liste; blog bağlamlarında yüklenir)
   ========================================================================== */
@layer components{

  /* ---- Başlık bandı (arşiv + single) ---- */
  .page-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-700) 100%);color:#fff;padding:clamp(1.75rem,4vw,3rem) 0;margin-bottom:var(--sp-6)}
  .page-hero__breadcrumb{font-size:.85rem;color:#cdd4f0;margin-bottom:.6rem}
  .page-hero__breadcrumb a{color:#fff}
  .page-hero__breadcrumb a:hover{color:var(--yellow)}
  .page-hero__title{font-size:var(--fs-900);font-weight:900;line-height:1.06;color:#fff}
  .page-hero__title strong{color:var(--yellow)}
  .page-hero__desc{margin-top:.6rem;color:#dfe4fb;max-width:760px}
  .page-hero__meta{margin-top:.6rem;font-size:.9rem;color:#cdd4f0}
  .page-hero__meta a{color:#fff}
  .page-hero__meta a:hover{color:var(--yellow)}

  /* ---- Single ---- */
  .single__cover{margin-bottom:var(--sp-6)}
  .single__cover img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
  .single__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(1.5rem,4vw,3rem);align-items:start;padding-top:clamp(1.75rem,3.5vw,2.75rem);padding-bottom:var(--sp-7)}
  .single__main{min-width:0}
  .single__main :is(h2,h3)[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
  .single__tags{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:.4rem}
  .single__tags a{background:var(--navy-50);color:var(--navy);font-size:.82rem;font-weight:600;padding:.35rem .7rem;border-radius:var(--radius-pill)}
  .single__tags a:hover{background:var(--navy);color:#fff}

  /* ---- İçindekiler (TOC) ---- */
  .toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5)}
  .toc__title{font-weight:700;color:var(--navy);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin:.3rem .6rem .65rem}
  .toc ul{display:grid;gap:0;list-style:none;padding:0;margin:0}
  /* Sol ray: satırlar bitişik → sol kenarda kesintisiz ince gri dikey çizgi. */
  .toc__item>a{display:block;padding:.42rem .2rem .42rem .85rem;color:var(--ink);font-size:.92rem;line-height:1.4;
    border-left:2px solid var(--line);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
  .toc__item>a:hover{color:var(--navy);border-left-color:var(--navy-50)}
  /* Aktif (okunan) başlık → rayın o segmenti kırmızıya döner + metin kırmızı/kalın. */
  .toc__item.is-active>a{color:var(--red);font-weight:700;border-left-color:var(--red);box-shadow:inset 1px 0 0 var(--red)}
  .toc__item--h3>a{padding-left:1.55rem;font-size:.86rem;color:var(--muted)}
  .toc__item--h3>a::before{content:"–";margin-right:.4rem;color:var(--line);font-weight:700}
  .toc__item--h3>a:hover{color:var(--navy)}
  .toc__item--h3.is-active>a,.toc__item--h3.is-active>a::before{color:var(--red)}
  /* single.php: İçindekiler'i modern aside-box kartına benzet (yalnız burada). */
  .single__main .toc{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.15rem 1.15rem 1.25rem;box-shadow:var(--shadow-sm);margin-bottom:var(--sp-6)}
  .single__main .toc__title{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-500);color:var(--navy);font-weight:800;letter-spacing:0;text-transform:none;margin:0 0 var(--sp-3);padding-bottom:.7rem;border-bottom:1px solid var(--line)}
  .single__main .toc__title::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--red);flex:none}

  /* ---- Yan menü (modern kart) ---- */
  .single__aside{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:var(--sp-5)}
  .aside-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.15rem 1.15rem 1.25rem;box-shadow:var(--shadow-sm)}
  .aside-box__title{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-500);color:var(--navy);font-weight:800;margin:0 0 var(--sp-3);padding-bottom:.7rem;border-bottom:1px solid var(--line)}
  .aside-box__title::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--red);flex:none}
  .aside-list{display:grid;gap:.25rem;list-style:none;padding:0;margin:0}
  .aside-item a{display:grid;grid-template-columns:64px 1fr;gap:.75rem;align-items:center;padding:.5rem;margin:0 -.5rem;border-radius:12px;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .aside-item a:hover{background:var(--bg-soft)}
  .aside-item__media img{width:64px;height:56px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-sm);display:block;transition:transform var(--dur) var(--ease)}
  .aside-item a:hover .aside-item__media img{transform:scale(1.05)}
  .aside-item__title{font-weight:600;font-size:.88rem;color:var(--ink);line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .aside-item a:hover .aside-item__title{color:var(--red)}

  /* ---- Cover altı kategori menüsü (gidenler-anlatiyor / blog) ---- */
  /* Tek satır: sığdığında yan yana; sığmadığında (mobil) yatay kaydırılır. */
  .cat-menu{margin-top:var(--sp-4);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cat-menu::-webkit-scrollbar{display:none}
  .cat-menu__list{display:flex;flex-wrap:nowrap;gap:.5rem;list-style:none;margin:0;padding:0}
  .cat-menu__list>li{flex:0 0 auto}
  .cat-menu__list a{display:inline-block;white-space:nowrap;padding:.5rem 1rem;border:1px solid var(--line);border-radius:var(--radius-pill);font-weight:600;font-size:.9rem;color:var(--navy);background:#fff;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
  .cat-menu__list a:hover{border-color:var(--navy);color:var(--red)}
  .cat-menu__list .current-menu-item>a,.cat-menu__list .current-cat>a,.cat-menu__list .current-category-ancestor>a,.cat-menu__list .current-menu-parent>a{background:var(--navy);color:#fff;border-color:var(--navy)}
}

/* Web (≥768px): kategori menüsü tek satıra sığmasa da yatay kaydırma yerine ALT
   SATIRA sarsın → tümü görünür, scroll gerekmez. Mobilde (<768px) kaydırma kalır. */
@media (min-width:768px){
  .cat-menu{overflow-x:visible}
  .cat-menu__list{flex-wrap:wrap}
}

@media (max-width:900px){
  .single__grid{grid-template-columns:1fr}
  .single__aside{position:static}
}