/* SIMETRA — Materyal Rehberi page (materyal-rehberi.html) styles
   Category index for now — bold headings + item tags. Each card is built to
   later become clickable and open a detail panel (Nedir, kullanım alanları,
   avantaj/dezavantaj, Premium/Deluxe/Standart, marka, doku, proje fotoğrafları). */

.materials-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--s4); margin-top:var(--s6);
}
@media (max-width:980px){ .materials-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .materials-grid{ grid-template-columns:1fr; } }

.material-card{
  position:relative;
  background:#fbf9f4; border:1px solid rgba(14,13,12,0.08); border-radius:8px;
  padding:var(--s4) var(--s4) var(--s5);
  opacity:0; transform:translateY(24px);
  transition:opacity 2.2s cubic-bezier(.16,1,.3,1), transform 2.2s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.material-card.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.material-card::after{
  content:'';
  position:absolute; inset:0; border-radius:inherit;
  border:1px solid var(--brass-dim);
  box-shadow:0 1px 2px rgba(14,13,12,0.05), 0 10px 24px rgba(14,13,12,0.08), 0 24px 48px rgba(169,131,91,0.12);
  opacity:0; transition:opacity .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.material-card:hover::after{ opacity:1; }
.material-card:hover{ transform:translateY(-3px); }

.material-card .num{
  display:block; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:14px; color:var(--brass); letter-spacing:.02em; margin-bottom:10px;
}
.material-card h3{
  font-family:var(--display); font-weight:500; font-size:22px; color:var(--ink);
  margin-bottom:var(--s3); line-height:1.25;
}
.material-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.material-tags span{
  font-size:12.5px; line-height:1.4; padding:6px 13px; border-radius:20px;
  background:rgba(169,131,91,0.07); border:1px solid rgba(169,131,91,0.16);
  color:#544f43; white-space:nowrap;
}

.materials-note{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid rgba(14,13,12,0.08);
  font-size:13px; font-style:italic; color:#a89f8d; max-width:64ch;
}