/* Kaynak: eski global.css -> tools/css-split.mjs (banner-grid kovasi). */
/* NOT: eskiden burada `.stone-bg { padding: 1rem 0 }` vardi. Ust/Alt Bosluk kaydiricisi 0'a cekildiginde
   index.tsx inline dolguyu hic yazmadigi icin bu sabit geri geliyor ve bosluk 16px'te takili kaliyordu.
   Dolgu artik her zaman inline yaziliyor (varsayilani 16), bu yuzden sabit kural kaldirildi. */

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-grid {
  display: grid;
  grid-template-columns: repeat(var(--stone-bg-cols-mobile, 2), 1fr);
  gap: var(--stone-bg-gap, 16px);
}

@media screen and (min-width: 750px) {
  .cc_NpWopmv8tT_u91VYGvC9A .stone-bg-grid {
    grid-template-columns: repeat(var(--stone-bg-cols-desktop, 4), 1fr);
  }
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-item {
  position: relative;
  overflow: hidden;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-media {
  position: relative;
  overflow: hidden;
  background-color: var(--stone-c-surface);
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Varsayilan cover (bugunku gorunum). --stone-bg-fit bolumun "Kirpmadan Sigdir" anahtarindan iner;
     bir banner kendi anahtarini acarsa ayni degiskeni kendi uzerinde ezer. */
  -o-object-fit: var(--stone-bg-fit, cover);
     object-fit: var(--stone-bg-fit, cover);
  transition: transform 0.4s ease;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--hover-zoom .stone-bg-link:hover .stone-bg-image {
  transform: scale(1.03);
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 3vw, 48px);
  gap: 12px;
  color: var(--stone-bg-overlay-text, var(--stone-c-on-dark));
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-title {
  margin: 0;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-subtitle {
  margin: 0;
  opacity: 0.85;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: transparent;
  color: inherit;
  border: none;
  text-decoration: underline;
  text-underline-offset: 6px;
  min-height: 44px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-btn:hover {
  opacity: 0.75;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-empty {
  border: 1px dashed var(--stone-c-border);
  opacity: 0.4;
  min-height: 200px;
}

/* Studio: alt bilesen ust bolumun prop'unu okuyamadigi icin oran CSS degiskeniyle iniyor
   (eski temada her ogeye inline aspect-ratio veriliyordu). */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-media {
  aspect-ratio: var(--stone-bg-ratio, 3 / 4);
}
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--hover-zoom .stone-bg-item:hover .stone-bg-image {
  transform: scale(1.03);
}

/* "Dogal (orantisiz)" orani: kutu oran dayatmaz, yuksekligi gorselin kendisi belirler.
   Gorsel position:absolute kaldigi surece kutu sifir yukseklige coker, bu yuzden akisa aliniyor.
   Sinif ust bolumde; renderer ogeleri ust bolumun DOM'una bastigi icin kurallar ogeye de gecer. */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--natural .stone-bg-media {
  aspect-ratio: auto;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--natural .stone-bg-visual > picture {
  display: block;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--natural .stone-bg-image {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: initial;
     object-fit: initial;
}

/* --- Bos banner (canli magaza) ---
   Gorselsiz StoneBannerItem canlida null donuyor ama ikas'in oge sarmalayicisi DOM'da kaliyor;
   izgarada bos hucre birakmasin. Yalnizca renderer'in DOGRUDAN cocuklari: `div:empty` editordeki
   yer tutucu kutuyu (.stone-bg-empty, kendisi de bos bir div) da gizlerdi. */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-items > :empty {
  display: none !important;
}

/* Tum ogeler gorselsizse bolum (ust/alt bosluguyla birlikte) hic gorunmesin. Editordeki yer tutucu
   .stone-bg-item tasidigi icin bolum orada secilebilir kalir; oge doldurulunca tarayici :has'i
   kendisi yeniden degerlendirir. */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg:not(:has(.stone-bg-item)) {
  display: none;
}

/* --- Bolum basligi (bos birakilinca hic basilmaz) --- */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-section-title {
  margin: 0 auto 40px;
  max-width: 560px;
  padding-inline: 24px;
  text-align: center;
  color: inherit;
}

/* --- Banner basina oran ---
   Oge bir oran secmezse hicbir sinif eklenmez ve bolumun orani gecerli kalir (bugunku gorunum). */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-item--ratio .stone-bg-media {
  aspect-ratio: var(--stone-bg-item-ratio, 3 / 4);
}

/* Bolum "Dogal" secili olsa bile oge kendi oranini sectiyse gorsel yine kutuyu doldurur. */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--natural .stone-bg-item--ratio .stone-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: var(--stone-bg-fit, cover);
     object-fit: var(--stone-bg-fit, cover);
}

/* Oge "Dogal" sectiyse kutu oran dayatmaz, yuksekligi gorselin kendisi belirler (bolum ayarindan
   bagimsiz). Gorsel mutlak konumlu kalirsa kutu sifir yukseklige coker, bu yuzden akisa aliniyor. */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-item--natural .stone-bg-media {
  aspect-ratio: auto;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-item--natural .stone-bg-visual > picture {
  display: block;
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-item--natural .stone-bg-image {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: initial;
     object-fit: initial;
}

/* --- Karartma yogunlugu: mobil / masaustu ayri ---
   Iki degiskeni de StoneBannerItem her zaman yaziyor; mobil deger verilmemisse ikisi esit. */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-overlay {
  opacity: var(--stone-bg-ov-op, 0.3);
}

@media screen and (min-width: 750px) {
  .cc_NpWopmv8tT_u91VYGvC9A .stone-bg-overlay {
    opacity: var(--stone-bg-ov-op-d, 0.3);
  }
}

@layer stone-typography {.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-title {
  font-size: var(--stone-type-prose);
  font-weight: var(--stone-font-weight-semibold);
  line-height: var(--stone-line-heading);
}

@media screen and (min-width: 750px) {
  .cc_NpWopmv8tT_u91VYGvC9A .stone-bg-title {
    font-size: var(--stone-type-h3);
  }
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-subtitle {
  font-size: var(--stone-type-eyebrow);
  letter-spacing: var(--stone-letter-meta);
  text-transform: var(--stone-transform-meta);
}

.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-btn {
  font-size: var(--stone-type-small);
  font-weight: var(--stone-font-weight-medium);
  letter-spacing: var(--stone-letter-button);
}
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-section-title {
  font-size: var(--stone-type-h3);
  font-weight: var(--stone-font-weight-semibold);
  letter-spacing: var(--stone-letter-heading);
  line-height: var(--stone-line-heading);
}

@media screen and (min-width: 750px) {
  .cc_NpWopmv8tT_u91VYGvC9A .stone-bg-section-title {
    font-size: var(--stone-type-h2);
  }
}
}

/* Discovery cards keep the image and caption in the same link hit area. */
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg-visual { display: contents; }
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-media { overflow: visible; aspect-ratio: auto; background: transparent; }
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-visual { display: block; position: relative; overflow: hidden; }
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-image, .cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-item--ratio .stone-bg-image { position: static; display: block; width: 100%; height: auto; aspect-ratio: var(--stone-bg-item-ratio, var(--stone-bg-ratio, 3 / 4)); object-fit: var(--stone-bg-fit, cover); }
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-item--natural .stone-bg-image { aspect-ratio: auto; }
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-content { position: static; padding: 20px 12px 0; color: var(--stone-c-foreground); gap: 4px; }
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-btn { padding: 8px 0; }
.cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-item { padding-bottom: 8px; }
@media screen and (max-width: 749px) {
  .cc_NpWopmv8tT_u91VYGvC9A .stone-bg-section-title { margin-bottom: 28px; }
  .cc_NpWopmv8tT_u91VYGvC9A .stone-bg--captions-below .stone-bg-content { padding: 14px 8px 0; }
}
@media (prefers-reduced-motion: reduce) { .cc_NpWopmv8tT_u91VYGvC9A .stone-bg-image { transition: none; } }