/* Turkish Spa — efekt: derinlikli mozaik bant (M7, K4c). Kullanım ve seçenekler: BENIOKU.md.
   tokens.css'i okur (yoksa yedek renkler). Satır içi stil yok: JS yalnız CSSOM ile konum/transform/opaklık yazar.
   data-kenar: acik (varsayılan) · koyu · acik-koyu (gündüz → gece geçişi) · koyu-acik. */

.efekt-mb,
[data-efekt="mozaik-bant"] {
  --mb-ust: var(--renk-kagit, #F6F1E9);
  --mb-alt: var(--renk-kagit, #F6F1E9);
  --mb-yukseklik: clamp(15rem, 28.75vw, 36rem);
  --mb-gece-renk: 8 24 33;
  position: relative;
  display: block;
  width: 100%;
  height: var(--mb-yukseklik);
  overflow: hidden;
  overflow: clip visible;              /* yatayda kırp (geniş taşıyıcı), dikeyde eğim/hale taşabilsin */
  perspective: 1600px;
  isolation: isolate;
  background-color: var(--mb-alt);
  background-image: linear-gradient(to bottom, var(--mb-ust) 50%, var(--mb-alt) 50%);
}
[data-efekt="mozaik-bant"][data-kenar="koyu"] { --mb-ust: var(--renk-petrol-gece, #0F2A38); --mb-alt: var(--renk-petrol-gece, #0F2A38); }
[data-efekt="mozaik-bant"][data-kenar="acik-koyu"] { --mb-ust: var(--renk-kagit, #F6F1E9); --mb-alt: var(--renk-petrol-gece, #0F2A38); }
[data-efekt="mozaik-bant"][data-kenar="koyu-acik"] { --mb-ust: var(--renk-petrol-gece, #0F2A38); --mb-alt: var(--renk-kagit, #F6F1E9); }

/* Betiksiz: statik mozaik (tarayıcı scripting medya özelliğini biliyorsa) */
@media (scripting: none) {
  [data-efekt="mozaik-bant"] {
    background-image: url(varlik/statik-1600.webp), linear-gradient(to bottom, var(--mb-ust) 50%, var(--mb-alt) 50%);
    background-image: image-set(url(varlik/statik-1600.avif) type("image/avif"), url(varlik/statik-1600.webp) type("image/webp")),
      linear-gradient(to bottom, var(--mb-ust) 50%, var(--mb-alt) 50%);
    background-size: cover, 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
/* Katmanlar yüklenirken küçük yer tutucu (aynı kompozisyon, bulanık) */
.efekt-mb--canli:not(.efekt-mb--hazir) {
  background-image: url(varlik/statik-480.webp), linear-gradient(to bottom, var(--mb-ust) 50%, var(--mb-alt) 50%);
  background-image: image-set(url(varlik/statik-480.avif) type("image/avif"), url(varlik/statik-480.webp) type("image/webp")),
    linear-gradient(to bottom, var(--mb-ust) 50%, var(--mb-alt) 50%);
  background-size: cover, 100% 100%;
  background-position: var(--mb-yer-tutucu-x, 0%) center, 0 0;
  background-repeat: no-repeat;
}

/* Kenar haleleri: bant iki bölümün arasında eşik gibi dursun */
[data-efekt="mozaik-bant"]::before,
[data-efekt="mozaik-bant"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
[data-efekt="mozaik-bant"]::before { bottom: 100%; height: 2.25rem; background: linear-gradient(to top, rgb(43 36 29 / 0.09), transparent); }
[data-efekt="mozaik-bant"]::after { top: 100%; height: 2.25rem; background: linear-gradient(to bottom, rgb(43 36 29 / 0.09), transparent); }
[data-efekt="mozaik-bant"][data-kenar="koyu"]::before { background: radial-gradient(60% 100% at 50% 100%, rgb(212 180 119 / 0.12), transparent 75%); height: 5rem; }
[data-efekt="mozaik-bant"][data-kenar="koyu"]::after,
[data-efekt="mozaik-bant"][data-kenar="acik-koyu"]::after { background: radial-gradient(60% 100% at 50% 0, rgb(212 180 119 / 0.16), transparent 75%); height: 6rem; }
[data-efekt="mozaik-bant"][data-kenar="koyu-acik"]::before { background: radial-gradient(60% 100% at 50% 100%, rgb(212 180 119 / 0.16), transparent 75%); height: 6rem; }

/* Hareket azaltma: JS statik resim kurar */
.efekt-mb__statik,
.efekt-mb__statik img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Canlı katmanlar */
.efekt-mb__eksen {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.efekt-mb__tasiyici {
  position: absolute;
  left: 0;
  overflow: hidden;                    /* zemin kayınca çerçevenin dışına taşmasın */
  will-change: transform;
  opacity: 0;
  transition: opacity 700ms var(--egri, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.efekt-mb--hazir .efekt-mb__tasiyici { opacity: 1; }
.efekt-mb__katman,
.efekt-mb__isilti,
.efekt-mb__gunisigi {
  position: absolute;
  will-change: transform;
  pointer-events: none;
}
.efekt-mb__katman picture,
.efekt-mb__katman img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* figürler zemine çok hafif gölge düşürür (diorama derinliği); hafif sürümde yok */
.efekt-mb:not(.efekt-mb--hafif) .efekt-mb__katman--gemi img,
.efekt-mb:not(.efekt-mb--hafif) .efekt-mb__katman--denizkizi img {
  filter: drop-shadow(0 0.3rem 0.55rem rgb(4 16 24 / 0.34));
}
.efekt-mb:not(.efekt-mb--hafif) .efekt-mb__katman--gunes img {
  filter: drop-shadow(0 0.2rem 0.4rem rgb(4 16 24 / 0.22));
}
/* çerçeveler (dalga bordür) iç kenarda alana gölge düşürür: alan çerçevenin "arkasında" */
.efekt-mb__katman--cerceve-ust { box-shadow: 0 0.35rem 0.6rem -0.2rem rgb(4 16 24 / 0.45); }
.efekt-mb__katman--cerceve-alt { box-shadow: 0 -0.35rem 0.6rem -0.2rem rgb(4 16 24 / 0.45); }

/* Tonoz eğrisi gölgesi (sabit) ve akşam karanlığı (kaydırmayla) */
.efekt-mb__tonoz,
.efekt-mb__gece {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.efekt-mb__tonoz {
  background:
    linear-gradient(to bottom, rgb(4 16 24 / 0.22) 0, transparent 17%, transparent 83%, rgb(4 16 24 / 0.26) 100%),
    radial-gradient(ellipse 80% 160% at 50% 50%, transparent 58%, rgb(4 16 24 / 0.2) 100%);
}
.efekt-mb__gece {
  background: linear-gradient(to bottom, rgb(var(--mb-gece-renk) / 0.62), rgb(var(--mb-gece-renk) / 0.86));
  opacity: 0;
  will-change: opacity;
}
[data-kenar="koyu"] .efekt-mb__gece { opacity: 0.32; }

/* Altın smalti ışıltısı: katmanın altın maskesi + kaydırmayla geçen ışık bandı + boşta yavaş parıltı */
.efekt-mb__tasiyici--isik { mix-blend-mode: normal; }
.efekt-mb__isilti {
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}
.efekt-mb__isilti--gemi { -webkit-mask-image: url(varlik/gemi-altin-m.webp); mask-image: url(varlik/gemi-altin-m.webp); }
.efekt-mb__isilti--denizkizi { -webkit-mask-image: url(varlik/denizkizi-altin-m.webp); mask-image: url(varlik/denizkizi-altin-m.webp); }
.efekt-mb__isilti--gunes { -webkit-mask-image: url(varlik/gunes-altin-m.webp); mask-image: url(varlik/gunes-altin-m.webp); }
.efekt-mb__isilti--cerceve-ust { -webkit-mask-image: url(varlik/cerceve_ust-altin-m.webp); mask-image: url(varlik/cerceve_ust-altin-m.webp); }
.efekt-mb__isilti--cerceve-alt { -webkit-mask-image: url(varlik/cerceve_alt-altin-m.webp); mask-image: url(varlik/cerceve_alt-altin-m.webp); }
.efekt-mb--hafif .efekt-mb__isilti--gunes { -webkit-mask-image: url(varlik/gunes-altin-t.webp); mask-image: url(varlik/gunes-altin-t.webp); }
.efekt-mb--hafif .efekt-mb__isilti--cerceve-ust { -webkit-mask-image: url(varlik/cerceve_ust-altin-t.webp); mask-image: url(varlik/cerceve_ust-altin-t.webp); }
.efekt-mb--hafif .efekt-mb__isilti--cerceve-alt { -webkit-mask-image: url(varlik/cerceve_alt-altin-t.webp); mask-image: url(varlik/cerceve_alt-altin-t.webp); }

.efekt-mb__isik-bandi {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
  background: linear-gradient(100deg,
    rgb(255 205 120 / 0) 0%, rgb(255 205 120 / 0.1) 30%, rgb(255 214 140 / 0.38) 44%,
    rgb(255 232 180 / 0.62) 50%, rgb(255 214 140 / 0.38) 56%, rgb(255 205 120 / 0.1) 70%, rgb(255 205 120 / 0) 100%);
  opacity: var(--mb-isilti, 0.85);
}
[data-kenar="koyu"] .efekt-mb__isik-bandi,
[data-kenar="acik-koyu"] .efekt-mb__isik-bandi,
[data-kenar="koyu-acik"] .efekt-mb__isik-bandi { --mb-isilti: 1; }
.efekt-mb__isilti::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent 0%, rgb(255 222 160 / 0.42) 50%, transparent 100%);
  transform: translateX(-120%);
  animation: efekt-mb-parilti 11s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.efekt-mb__isilti--denizkizi::after { animation-delay: -3.5s; }
.efekt-mb__isilti--gunes::after { animation-delay: -6s; animation-duration: 9s; }
.efekt-mb__isilti--cerceve-alt::after { animation-delay: -1.7s; }
@keyframes efekt-mb-parilti {
  0% { transform: translateX(-120%); }
  38%, 100% { transform: translateX(400%); }
}
.efekt-mb--hafif .efekt-mb__isilti::after { animation: none; display: none; }

/* güneşin gün ışığı parıltısı: akşamla söner */
.efekt-mb__gunisigi {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 236 186 / 0.42), rgb(255 220 150 / 0.16) 45%, rgb(255 220 150 / 0) 100%);
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .efekt-mb__eksen { display: none; }
  .efekt-mb__isilti::after { animation: none; }
}