/* ===== 3D Render Galerisi (sayfa özel) ===== */

/* Hero (açık temada hafif gri, koyuda koyu) */
.render-hero{
  background: color-mix(in oklab, var(--bg) 85%, white 15%);
  border-bottom: 1px solid var(--border);
}
.theme-dark .render-hero{
  background: color-mix(in oklab, var(--bg) 90%, black 10%);
}

/* Tipografi */
.render-hero .eyebrow{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--muted); margin-bottom:.35rem; display:block;
}
.render-hero h1{
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  font-weight: 700;
}
.render-hero .lede{
  margin-top:.6rem; color: var(--muted); max-width: 48ch;
}
.render-hero .tools{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

/* Chip (filtre) — blog.css’teki chip’le aynı karakter */
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  padding:.45rem .75rem; border:1px solid var(--border); border-radius:999px;
  background: var(--card); color: var(--text);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.chip:hover{ background: color-mix(in oklab, var(--accent) 12%, var(--card) 88%); }
.chip-active{ background: var(--accent); color: var(--accentText); border-color: var(--accent); }

/* Grid */
.render-grid{
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 1rem;
}
@media (min-width:640px){ .render-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .render-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width:1280px){ .render-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Kart */
.render-card{
  position: relative;
  border:1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: zoom-in;
}
.render-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  border-color: color-mix(in oklab, var(--accent) 18%, var(--border) 82%);
}

.render-card .media{ aspect-ratio: 4/3; overflow: hidden; }
.render-card img{
  width:100%; height:100%; object-fit: cover; display:block;
  transition: transform .6s ease;
}
.render-card:hover img{ transform: scale(1.05); }

.render-card .caption{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  padding:.65rem .8rem;
  font-size:.92rem;
  color: var(--muted);
}
.render-card .badge{
  display:inline-block; font-size:.72rem; padding:.18rem .5rem; border-radius:999px;
  background: color-mix(in oklab, var(--accent) 22%, var(--card) 78%);
  color: var(--accentText);
}
.render-card .title{ color: var(--text); font-weight: 500; }

/* Lightbox */
.lb{
  position: fixed; inset:0; z-index: 10050;
  display:grid; place-items: center;
}
.lb.hidden{ display:none; }

.lb__backdrop{
  position: absolute; inset:0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}

.lb__figure{
  position: relative;
  width: min(96vw, 1200px);     /* genişliği zorunlu kıldık */
  height: 90vh;                 /* yüksekliği de sabitledik */
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex; flex-direction: column;
}
.lb__figure model-viewer{
  flex: 1 1 auto;
  width: 100%;
  height: calc(100% - 52px); /* figcaption ~52px */
}
@media (max-width: 640px){
  .lb__figure{ width:96vw; height:85vh; }
}
.lb__figure img{
  width:100%; height:auto; max-height: 72vh; object-fit: contain; background: #000;
}
.lb__figure figcaption{
  padding:.75rem .9rem; font-size:.95rem; color: var(--muted);
  border-top:1px solid var(--border);
}

.lb__nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.25); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}
.lb__nav:hover{ background: rgba(0,0,0,.4); }
.lb__nav--prev{ left:.6rem; }
.lb__nav--next{ right:.6rem; }

.lb__close{
  position:absolute; top:.6rem; right:.6rem;
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.25); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.lb__close:hover{ background: rgba(0,0,0,.4); }

/* Açık temada bölüm zeminini hafif gri yap */
body:not(.theme-dark) .render-hero{ background: var(--sectionBgLight, #f2f3f5); }

/* ==== Etkileşimli 3D kartı ==== */
.mv-card{
  border:1px solid var(--border);
  border-radius:1rem;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.mv-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; padding:1rem 1rem .5rem 1rem;
}
.mv-eyebrow{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.mv-title{ font-weight:700; font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top:.1rem; }
.mv-lede{ color:var(--muted); margin-top:.25rem; }

.mv-actions{ display:flex; gap:.5rem; align-items:center; }
.mv-btn{
  padding:.45rem .8rem; border:1px solid var(--border); border-radius:.8rem;
  background: var(--card); color: var(--text);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  cursor:pointer; font-size:.92rem;
}
.mv-btn:hover{ background: color-mix(in oklab, var(--accent) 12%, var(--card) 88%); }
.mv-btn[aria-pressed="true"]{ background: var(--accent); color: var(--accentText); border-color: var(--accent); }

.mv-loading{ display:grid; place-items:center; width:100%; height:100%; color:var(--muted); }

.mv-foot{
  display:flex; align-items:center; gap:.75rem; justify-content:space-between;
  padding:.65rem 1rem; border-top:1px solid var(--border);
}
.mv-caption{ color: var(--muted); font-size:.92rem; }

/* Model-viewer içindeki gölge zemini çok koyu olmasın */
model-viewer::part(default-progress-bar){ --progress-bar-color: var(--accent); }

@media (max-width: 640px){
  .mv-head{ flex-direction: column; }
  .mv-actions{ justify-content:flex-start; }
}