/* Shared art direction for the Turkish and English product directory. */
.showcase-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  align-items: center;
  gap: clamp(26px, 5vw, 64px);
  max-width: none;
  padding: 52px 0 40px;
}
.showcase-hero h1 { max-width: 720px; }
.showcase-hero .hero-copy { min-width: 0; }
.showcase-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.showcase-hero .hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff08;
  font-size: .83rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.showcase-hero .hero-link:hover { transform: translateY(-1px); border-color: var(--mint); background: #72d7c214; }
.showcase-hero .hero-feature-art {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1.42 / 1;
  border: 1px solid #ffffff24;
  border-radius: 24px;
  background: #0a1724;
  box-shadow: 0 24px 72px #0008, inset 0 1px #ffffff18;
  isolation: isolate;
}
.showcase-hero .hero-feature-art::after {
  position: absolute;
  inset: 30% 0 0;
  z-index: 0;
  background: linear-gradient(0deg, #06111ee8, transparent);
  content: "";
  pointer-events: none;
}
.hero-feature-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-art-caption {
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 15px;
  left: 15px;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid #ffffff24;
  border-radius: 14px;
  background: #07101bc9;
  color: #f2f7fb;
  backdrop-filter: blur(14px);
}
.hero-art-caption span { color: #9be7d8; font-size: .62rem; font-weight: 850; letter-spacing: .15em; }
.hero-art-caption strong { font-size: 1rem; }
.hero-art-caption small { color: #b8c7d4; font-size: .75rem; }
.directory-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.directory-jumps a {
  padding: 8px 11px;
  border: 1px solid #ffffff20;
  border-radius: 999px;
  background: #ffffff08;
  color: #deebf4;
  font-size: .74rem;
  font-weight: 750;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.directory-jumps a:hover { transform: translateY(-2px); border-color: #72d7c288; background: #72d7c216; }
.showcase-card { overflow: hidden; }
.card-art {
  position: relative;
  display: block;
  width: calc(100% + 24px);
  margin: -12px -12px 16px;
  overflow: hidden;
  aspect-ratio: 1.92 / 1;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  background: #0a1724;
}
.card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.25,1); }
.card:hover .card-art img { transform: scale(1.045); }
.card-art::after { position: absolute; inset: 55% 0 0; background: linear-gradient(0deg,#07101b88,transparent); content: ""; pointer-events: none; }
.card-art--icon { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #15384b 0, #09131f 70%); }
.card-art--icon img { width: min(35%, 128px); height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 22px; box-shadow: 0 10px 35px #0009; }
.card-art--icon::after { inset: 0; background: linear-gradient(135deg,#ffffff08,transparent 48%,#72d7c20d); }
.card-art-label {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 9px;
  padding: 4px 8px;
  border: 1px solid #ffffff2b;
  border-radius: 999px;
  background: #07101bbd;
  color: #f2f7fb;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  backdrop-filter: blur(9px);
}
.art-notice { margin: 12px 0 0; color: #9baebe; font-size: .76rem; }
@media (max-width: 860px) {
  .showcase-hero { grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr); gap: 25px; }
  .showcase-hero .hero-feature-art { border-radius: 19px; }
}
@media (max-width: 650px) {
  .showcase-hero { grid-template-columns: 1fr; gap: 22px; padding-top: 34px; }
  .showcase-hero .hero-copy { grid-row: 1; }
  .showcase-hero .hero-feature-art { grid-row: 2; aspect-ratio: 1.92 / 1; }
}
@media (max-width: 580px) {
  .showcase-hero { padding-bottom: 27px; }
  .card-art { width: calc(100% + 18px); margin: -9px -9px 13px; aspect-ratio: 2.05 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .directory-jumps a, .card-art img { transition: none; }
}