/* ==========================================================================
   Blog liste ve yazı sayfaları — home.css hero dilinin devamı.
   Kart görselleri kategoriye göre otomatik gelir (Models/BlogImages.cs).
   ========================================================================== */

/* --- Liste hero ----------------------------------------------------------- */
.b-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.b-hero .crumbs, .b-hero .crumbs a, .p-hero .crumbs, .p-hero .crumbs a { color: #a9a3d1; }
.b-hero .h-ring { width: min(760px, 100vw); right: -18%; top: 40%; opacity: .4; }
.b-hero__inner { display: grid; gap: 22px; justify-items: start; }
.b-hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5rem); line-height: 1; letter-spacing: -.045em; max-width: 16ch; }
.b-hero .h-hero__lead { max-width: 60ch; }

.b-search { position: relative; width: min(620px, 100%); margin-top: 6px; }
.b-search svg { position: absolute; z-index: 1; left: 20px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: #a9a3d1; pointer-events: none; }
.b-search input {
  width: 100%; min-height: 60px; padding: 0 110px 0 54px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass); color: #fff; font: inherit;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.b-search input::placeholder { color: #a9a3d1; }
.b-search input:focus { outline: none; border-color: #d9ccff; background: rgba(255, 255, 255, .1); }
.b-search__count { position: absolute; z-index: 1; right: 20px; top: 50%; translate: 0 -50%; font-family: var(--font-mono); font-size: var(--fs-xs); color: #a9a3d1; pointer-events: none; }
.b-search__count b { color: #fff; font-weight: 500; }

/* --- Kategori çubuğu ------------------------------------------------------ */
.b-cats { background: var(--paper); border-bottom: 1px solid var(--line); }
.b-cats .wrap { padding-block: clamp(20px, 3vw, 32px) 6px; }
.b-cats__list { display: flex; gap: 8px; padding-block: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.b-cats__list::-webkit-scrollbar { display: none; }
.b-cats__list li { flex: none; scroll-snap-align: start; }
.b-cats__list a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.b-cats__list a span { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.b-cats__list a:hover { border-color: var(--accent); }
.b-grid[aria-busy="true"] { opacity: .55; transition: opacity .2s ease; }
.b-cats__list a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.b-cats__list a[aria-current="page"] span { color: #d9ccff; }

/* --- Kart ızgarası ------------------------------------------------------- */
.b-list { padding-block: clamp(40px, 5vw, 64px) clamp(64px, 8vw, 112px); }
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.b-card { min-width: 0; }
.b-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.b-card__link:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 0 0 1.5px var(--violet), 0 30px 60px -30px rgba(91, 43, 255, .45); }
.b-card__media { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--ink); }
.b-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.b-card__link:hover .b-card__media img { transform: scale(1.05); }
.b-chip {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: rgba(11, 8, 34, .7); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.b-card__media .b-chip { position: absolute; left: 14px; top: 14px; }
.b-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 24px; }
.b-card__meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.b-card__title { font-size: var(--fs-lg); line-height: 1.28; letter-spacing: -.02em; }
.b-card__excerpt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-card .link-arrow { margin-top: auto; padding-top: 6px; font-size: var(--fs-sm); }

/* Öne çıkan yazı: tam genişlik, yatay */
.b-card--featured { grid-column: 1 / -1; }
.b-card--featured .b-card__link { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.b-card--featured .b-card__media { aspect-ratio: auto; min-height: 100%; }
.b-card--featured .b-card__media img { position: absolute; inset: 0; }
.b-card--featured .b-card__body { justify-content: center; gap: 16px; padding: clamp(28px, 4vw, 56px); }
.b-card--featured .b-card__title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.1; letter-spacing: -.035em; }
.b-card--featured .b-card__excerpt { -webkit-line-clamp: 3; font-size: var(--fs-md); }
.b-card--featured .link-arrow { margin-top: 8px; }

/* Son satırda boş hücre kalmasın: tek başına/eksik kalan son kart satırı doldurur (3 sütun) */
#blogGrid > .b-card:last-of-type:nth-child(3n+2) { grid-column: span 2; }
#blogGrid > .b-card--featured ~ .b-card:last-of-type:nth-child(3n) { grid-column: span 2; }

.b-empty { grid-column: 1 / -1; padding: 56px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 24px; }

/* --- Yazı sayfası -------------------------------------------------------- */
.p-hero { padding-bottom: clamp(140px, 16vw, 230px); }
.p-hero__inner { display: grid; gap: 18px; justify-items: start; max-width: calc(1040px + var(--gutter) * 2); }
.p-hero h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.05; letter-spacing: -.035em; }
.p-hero__lead { color: #c6c1e6; font-size: var(--fs-lg); line-height: 1.55; max-width: 62ch; }
.b-chip--link { background: var(--gradient); border-color: transparent; }
.b-chip--link:hover { filter: brightness(1.1); }
.p-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: var(--fs-xs); color: #a9a3d1; }
.p-meta span + span::before { content: "·"; margin-right: 18px; opacity: .6; }

.p-cover-wrap { position: relative; z-index: 2; margin-top: clamp(-200px, -14vw, -110px); max-width: calc(1240px + var(--gutter) * 2); }
.p-cover { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; background: var(--ink); box-shadow: 0 50px 100px -50px rgba(16, 12, 46, .6); }
.p-cover img { width: 100%; height: 100%; object-fit: cover; }

.p-body { padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 112px); }
.p-layout { display: grid; grid-template-columns: 170px minmax(0, 900px); justify-content: center; gap: 56px; max-width: calc(1240px + var(--gutter) * 2); }
.p-share { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: grid; gap: 8px; }
.p-share > span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.p-share__btn {
  display: inline-flex; justify-content: center; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: 500 var(--fs-xs)/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.p-share__btn:hover { border-color: var(--accent); color: var(--accent); }

.p-related .b-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Yazı sayfası beyaz zeminde; ilgili yazılar ayrışsın diye açık lila */
body.is-article { background: var(--surface); }
.is-article .p-related { background: var(--paper); }
.is-article .p-share__btn { background: var(--paper); }

/* --- Duyarlı ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .b-grid, .p-related .b-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2 sütunda: 3 sütun kuralları iptal, yalnız tek kalan son kart genişler */
  #blogGrid > .b-card:last-of-type:nth-child(n), #blogGrid > .b-card--featured ~ .b-card:last-of-type:nth-child(n) { grid-column: auto; }
  #blogGrid > .b-card:last-of-type:nth-child(odd) { grid-column: span 2; }
  #blogGrid > .b-card--featured ~ .b-card:last-of-type:nth-child(odd) { grid-column: auto; }
  #blogGrid > .b-card--featured ~ .b-card:last-of-type:nth-child(even) { grid-column: span 2; }
}
@media (max-width: 900px) {
  .b-card--featured .b-card__link { grid-template-columns: minmax(0, 1fr); }
  .b-card--featured .b-card__media { aspect-ratio: 16 / 9; }
  .b-card--featured .b-card__media img { position: static; }
  .p-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .p-share { position: static; display: flex; flex-wrap: wrap; align-items: center; }
  .p-share > span { margin: 0 6px 0 0; }
  .b-hero .h-ring { opacity: .22; top: 18%; }
}
@media (max-width: 640px) {
  .b-grid, .p-related .b-grid--related { grid-template-columns: minmax(0, 1fr); }
  #blogGrid > .b-card:last-of-type { grid-column: auto !important; }
  .b-search input { padding-right: 20px; }
  .b-search__count { display: none; }
  .p-cover { border-radius: 18px; }
  .p-meta span + span::before { margin-right: 8px; }
}