/* ============================================================
   home-hero.css — Ana sayfa giriş vitrini (Editor's Picks)
   Görseller sitenin girişinde, filtre panelinden önce.
   Tokens styles.css'ten miras: --paper, --ink, --acid, --hot, --cobalt
   ============================================================ */
.hero-show {
  margin: 8px 0 28px;
  border: 3px solid var(--ink);
  background: var(--paper-2, #efe9da);
  box-shadow: 8px 8px 0 var(--ink);
  position: relative;
  z-index: 2;
}
.hero-show-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  flex-wrap: wrap;
}
.hero-show-title {
  font-family: var(--display, "Bricolage Grotesque");
  font-weight: 800;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: -0.02em;
}
.hero-show-title .hl { color: var(--acid); }
.hero-show-sub {
  font-family: var(--mono, "Space Mono");
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hero-grid { grid-template-columns: 1fr; } }

.hero-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border-right: 2px solid var(--ink);
  background: var(--paper);
  transition: 200ms cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
}
.hero-card:last-child { border-right: none; }
@media (max-width: 1000px) {
  .hero-card:nth-child(2n) { border-right: none; }
  .hero-card:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
}
@media (max-width: 560px) {
  .hero-card { border-right: none; border-bottom: 2px solid var(--ink); }
  .hero-card:last-child { border-bottom: none; }
}
.hero-card:hover { background: var(--paper-2, #efe9da); }
.hero-card:hover .hero-card-img img { transform: scale(1.07) translateY(-4px); }

.hero-card-badge {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  background: var(--acid);
  color: var(--ink);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.hero-card-badge.b-premium { background: var(--hot, #ff2d2d); color: #fff; }
.hero-card-badge.b-value   { background: var(--acid, #c8ff00); color: var(--ink); }
.hero-card-badge.b-best    { background: var(--cobalt, #2b50ff); color: #fff; }
.hero-card-badge.b-budget  { background: #ffd23f; color: var(--ink); }

.hero-card-img {
  aspect-ratio: 5/4;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.6), transparent 70%),
    var(--paper-3, #e6dfcd);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.hero-card-img img {
  max-width: 82%;
  max-height: 82%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.25));
  transition: transform 400ms cubic-bezier(.34,1.56,.64,1);
}
.hero-card-img .mock-svg { width: 86%; height: 86%; }

.hero-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hero-card-brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2, #555);
}
.hero-card-model {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-card-why {
  font-family: var(--sans, "Inter Tight");
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2, #555);
  margin-top: 2px;
}
.hero-card-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hero-card-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-card-price .cur { font-size: 14px; color: var(--ink-2, #555); margin-right: 1px; }
.hero-card-store {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3, #888);
}
.hero-card-cta {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--cobalt, #2b50ff);
  padding-top: 6px;
}