/* Project-specific visual atmospheres. Keep the existing Yula palette, but give each surface a purpose. */
body.project-gezi,
body.project-mp3,
body.project-games,
body.project-katalog,
body.project-png {
  position: relative;
  isolation: isolate;
  background-attachment: fixed;
}

body.project-gezi::before,
body.project-mp3::before,
body.project-games::before,
body.project-katalog::before,
body.project-png::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .72;
}

.project-atmosphere-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: .9;
}
.project-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  height: 3px;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.project-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--project-accent), var(--project-hot));
  box-shadow: 0 0 14px var(--project-glow);
}
.project-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.project-reveal-visible { opacity: 1; transform: translateY(0); }
body.project-gezi .hero-media img,
body.project-mp3 .hero-media img,
body.project-games .hero-media img,
body.project-katalog .hero-media img,
body.project-png .hero-media img { transition: transform .18s ease-out; will-change: transform; }

/* Shared project chrome: each surface gets its own accent contract. */
body.project-gezi { --project-accent: #2dd4bf; --project-hot: #fbbf24; --project-glow: rgba(45,212,191,.24); }
body.project-mp3 { --project-accent: #00f2fe; --project-hot: #a855f7; --project-glow: rgba(168,85,247,.28); }
body.project-games { --project-accent: #a78bfa; --project-hot: #f97316; --project-glow: rgba(126,34,206,.28); }
body.project-katalog { --project-accent: #34d399; --project-hot: #fbbf24; --project-glow: rgba(16,185,129,.24); }
body.project-png { --project-accent: #f59e0b; --project-hot: #38bdf8; --project-glow: rgba(245,158,11,.28); }

body.project-gezi .page-nav,
body.project-mp3 .page-nav,
body.project-games .page-nav,
body.project-katalog .page-nav,
body.project-png .page-nav {
  border-bottom-color: color-mix(in srgb, var(--project-accent) 32%, transparent);
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}
body.project-gezi .hero,
body.project-mp3 .hero,
body.project-games .hero,
body.project-katalog .hero,
body.project-png .hero {
  position: relative;
  overflow: hidden;
}
body.project-gezi .hero::after,
body.project-mp3 .hero::after,
body.project-games .hero::after,
body.project-katalog .hero::after,
body.project-png .hero::after {
  content: "";
  position: absolute;
  width: min(48vw, 620px);
  height: min(48vw, 620px);
  right: -12vw;
  top: -28vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--project-glow), transparent 68%);
  pointer-events: none;
  filter: blur(4px);
}
body.project-gezi .hero-media,
body.project-mp3 .hero-media,
body.project-games .hero-media,
body.project-katalog .hero-media,
body.project-png .hero-media {
  border-color: color-mix(in srgb, var(--project-accent) 48%, transparent) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.48), 0 0 44px var(--project-glow) !important;
}
body.project-gezi .button.primary,
body.project-mp3 .button.primary,
body.project-games .button.primary,
body.project-katalog .button.primary,
body.project-png .button.primary {
  background: linear-gradient(135deg, var(--project-accent), var(--project-hot));
  box-shadow: 0 10px 28px var(--project-glow);
}
body.project-gezi .section-head .eyebrow,
body.project-mp3 .section-head .eyebrow,
body.project-games .section-head .eyebrow,
body.project-katalog .section-head .eyebrow,
body.project-png .section-head .eyebrow {
  color: var(--project-accent);
}
body.project-gezi .gezi-planner,
body.project-mp3 .audio-tool-box,
body.project-games .game-demo-container,
body.project-katalog .card,
body.project-png .png-tool-box {
  border-color: color-mix(in srgb, var(--project-accent) 32%, rgba(255,255,255,.1));
  box-shadow: 0 24px 70px rgba(0,0,0,.34), 0 0 34px var(--project-glow);
}

/* YulaGezi: a quiet atlas/night-map field with warm route beacons. */
body.project-gezi {
  background:
    linear-gradient(180deg, rgba(5,14,20,.52) 0%, rgba(5,9,14,.88) 62%, #05080c 100%),
    url("bg_gezi_v2.webp") center top / cover fixed,
    radial-gradient(circle at 50% -10%, rgba(14,116,144,.30), transparent 42%),
    linear-gradient(180deg, #07141b 0%, #091017 46%, #05080c 100%) !important;
}
body.project-gezi::before {
  opacity: .34;
  background:
    repeating-radial-gradient(ellipse at 15% 35%, transparent 0 42px, rgba(45,212,191,.12) 43px 44px, transparent 45px 88px),
    radial-gradient(circle at 78% 20%, rgba(251,191,36,.18), transparent 22%),
    linear-gradient(115deg, transparent 0 47%, rgba(45,212,191,.08) 48%, transparent 49% 100%);
  animation: geziAtmosphere 26s ease-in-out infinite alternate;
}

/* YulaMP3: a restrained listening-room field, like low-frequency light around a player. */
body.project-mp3 {
  background:
    linear-gradient(180deg, rgba(8,7,13,.48) 0%, rgba(6,8,14,.90) 66%, #05070c 100%),
    url("bg_mp3_v3.webp") center top / cover fixed,
    radial-gradient(circle at 50% -12%, rgba(168,85,247,.28), transparent 38%),
    radial-gradient(circle at 8% 64%, rgba(0,242,254,.12), transparent 28%),
    linear-gradient(180deg, #100d19 0%, #080a12 48%, #05070c 100%) !important;
}
body.project-mp3::before {
  opacity: .26;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(0,242,254,.10) 39px 40px, transparent 41px 78px),
    radial-gradient(ellipse at 50% 12%, transparent 0 16%, rgba(168,85,247,.18) 17%, transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(255,122,0,.14), transparent 24%);
  animation: mp3Atmosphere 18s ease-in-out infinite alternate;
}

/* Games: mythic ember and midnight indigo, kept behind the play surface. */
body.project-games {
  background: linear-gradient(180deg, rgba(7,6,15,.40) 0%, rgba(7,8,16,.90) 68%, #050609 100%),
    url("bg_games_v2.webp") center top / cover fixed,
    radial-gradient(circle at 50% -8%, rgba(126,34,206,.24), transparent 38%),
    linear-gradient(180deg, #0d0a18 0%, #080910 54%, #050609 100%) !important;
}
body.project-games::before {
  opacity: .24;
  background: radial-gradient(circle at 18% 22%, rgba(239,68,68,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 32%, rgba(251,191,36,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 78%, rgba(168,85,247,.16) 0 1px, transparent 2px);
  background-size: 96px 96px, 140px 140px, 180px 180px;
}

/* Katalog: product-studio charcoal with a restrained emerald paper glow. */
body.project-katalog {
  background: linear-gradient(180deg, rgba(5,12,11,.54) 0%, rgba(7,11,12,.92) 70%, #050707 100%),
    url("bg_katalog_v2.webp") center top / cover fixed,
    radial-gradient(circle at 80% 0%, rgba(16,185,129,.18), transparent 35%),
    linear-gradient(180deg, #071311 0%, #080c0d 48%, #050707 100%) !important;
}
body.project-katalog::before {
  opacity: .22;
  background: linear-gradient(115deg, transparent 0 35%, rgba(16,185,129,.12) 36%, transparent 37% 100%),
    radial-gradient(circle at 12% 74%, rgba(251,191,36,.14), transparent 25%);
}

/* PNG: creative studio charcoal with amber & sky blue prism light. */
body.project-png {
  background:
    linear-gradient(180deg, rgba(8,10,16,.65) 0%, rgba(6,8,14,.92) 65%, #05070a 100%),
    url("bg_png_v2.webp") center top / cover fixed,
    radial-gradient(circle at 50% -10%, rgba(245,158,11,.22), transparent 45%),
    radial-gradient(circle at 90% 40%, rgba(56,189,248,.15), transparent 35%),
    linear-gradient(180deg, #100e18 0%, #080912 50%, #05070a 100%) !important;
}
body.project-png::before {
  opacity: .32;
  background:
    radial-gradient(circle at 20% 30%, rgba(245,158,11,.18), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(56,189,248,.16), transparent 28%),
    linear-gradient(135deg, transparent 0 48%, rgba(245,158,11,.06) 49%, transparent 51% 100%);
  animation: pngAtmosphere 22s ease-in-out infinite alternate;
}

@keyframes geziAtmosphere { from { transform: translate3d(-1%, -1%, 0) scale(1); } to { transform: translate3d(1%, 1%, 0) scale(1.04); } }
@keyframes mp3Atmosphere { from { transform: translateX(-1%) scale(1); } to { transform: translateX(1%) scale(1.035); } }
@keyframes pngAtmosphere { from { transform: translate3d(-1%, 1%, 0) scale(1); } to { transform: translate3d(1%, -1%, 0) scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  body.project-gezi::before, body.project-mp3::before, body.project-games::before, body.project-katalog::before, body.project-png::before { animation: none; }
  .project-atmosphere-canvas { display: none; }
  .project-reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 768px) {
  body.project-gezi, body.project-mp3, body.project-games, body.project-katalog, body.project-png { background-attachment: scroll; }
  body.project-gezi::before, body.project-mp3::before, body.project-games::before, body.project-katalog::before, body.project-png::before { opacity: .18; }
}

/* === DEEP VISUAL SYSTEM v2: clearer reading layers, calmer contrast === */
body.project-gezi,
body.project-mp3,
body.project-games,
body.project-katalog,
body.project-png {
  --project-panel: rgba(9, 14, 25, 0.78);
  --project-panel-strong: rgba(9, 14, 25, 0.94);
  background-size: auto, min(1480px, 100%) auto, auto, auto !important;
  background-repeat: no-repeat;
}

body.project-gezi::after,
body.project-mp3::after,
body.project-games::after,
body.project-katalog::after,
body.project-png::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 5, 12, .62), transparent 28%, transparent 72%, rgba(2, 5, 12, .42)),
    linear-gradient(180deg, rgba(2, 5, 12, .18), transparent 34%, rgba(2, 5, 12, .72));
}

body.project-mp3 {
  --project-panel: rgba(11, 12, 27, .82);
  --project-panel-strong: rgba(9, 10, 21, .96);
}
body.project-katalog {
  --project-panel: rgba(11, 20, 20, .84);
  --project-panel-strong: rgba(7, 13, 14, .96);
}

body.project-mp3 .audio-tool-box,
body.project-katalog .katalog-builder {
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 32%),
    var(--project-panel) !important;
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

body.project-mp3 .audio-tool-box > div,
body.project-katalog .katalog-builder > div {
  min-width: 0;
}

body.project-mp3 .studio-tabs-container {
  position: sticky;
  top: 64px;
  z-index: 30;
  padding-block: 8px;
  background: linear-gradient(180deg, rgba(7,8,17,.92), rgba(7,8,17,0));
}

body.project-mp3 .studio-tabs-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
body.project-mp3 .studio-tab-btn {
  min-width: 0;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
body.project-mp3 .studio-tab-btn span {
  min-width: 0;
  white-space: normal;
}

body.project-katalog .product-list {
  align-items: stretch;
}
body.project-katalog .product-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 42%),
    rgba(12, 20, 24, .88);
  border-color: rgba(52, 211, 153, .18);
}
body.project-katalog .product-card:focus-within,
body.project-mp3 .audio-tool-box:focus-within {
  border-color: color-mix(in srgb, var(--project-accent) 72%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 38px var(--project-glow);
}

@media (max-width: 760px) {
  body.project-mp3 .studio-tabs-container { top: 56px; }
  body.project-mp3 .studio-tabs-nav {
    display: flex;
    align-items: stretch;
  }
  body.project-mp3 .studio-tab-btn {
    flex: 0 0 min(74vw, 250px);
  }
  body.project-gezi::after,
  body.project-mp3::after,
  body.project-games::after,
  body.project-katalog::after,
  body.project-png::after { background: linear-gradient(180deg, rgba(2,5,12,.2), rgba(2,5,12,.72)); }
}

@media (prefers-reduced-data: reduce) {
  body.project-gezi,
  body.project-mp3,
  body.project-games,
  body.project-katalog,
  body.project-png { background-image: linear-gradient(180deg, #07101c, #05070c) !important; }
  body.project-gezi::after,
  body.project-mp3::after,
  body.project-games::after,
  body.project-katalog::after,
  body.project-png::after { display: none; }
}

/* === UNIVERSAL STUDIO TABS COMPONENT (FOR YULAMP3 & YULAPNG) === */
.studio-tabs-container {
  margin: 28px 0 20px;
}

.studio-tabs-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 16, 26, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.studio-tabs-nav::-webkit-scrollbar { display: none; }

.studio-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.studio-tab-btn i {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.studio-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.studio-tab-btn.active {
  color: #fff;
  background: var(--project-accent, #ff7a00);
  border-color: var(--project-accent, #ff7a00);
  box-shadow: 0 4px 20px var(--project-glow, rgba(255, 122, 0, 0.35));
}
body.project-mp3 .studio-tab-btn.active {
  background: linear-gradient(135deg, #00f2fe, #a855f7) !important;
  color: #000 !important;
  border-color: #00f2fe !important;
  box-shadow: 0 4px 22px rgba(0, 242, 254, 0.4) !important;
}
body.project-png .studio-tab-btn.active {
  background: linear-gradient(135deg, #f59e0b, #38bdf8) !important;
  color: #000 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 22px rgba(245, 158, 11, 0.4) !important;
}

.studio-tab-btn.active i {
  transform: scale(1.1);
}

.studio-tab-pane {
  display: none;
  animation: studioPaneFadeIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-tab-pane.active {
  display: block;
}

@keyframes studioPaneFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}