/* ==========================================================================
   Tasarım Stüdyosu
   ========================================================================== */
.studyo { display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }
.studyo-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px;
  position: sticky; top: 8px; z-index: 20; }
.studyo-bas h2 { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 6px;
  background: linear-gradient(120deg, var(--color-rose), var(--color-violet) 45%, var(--color-cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.studyo-bas p { color: var(--text-secondary); font-size: .92rem; max-width: 62ch; margin: 0; line-height: 1.5; }
.studyo-kaydet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.studyo-kaydet .glass-button { padding: 10px 20px; font-size: .95rem; }
.studyo-kaydet .glass-button:disabled { opacity: .45; cursor: default; }
.st-durum { font-size: .82rem; color: var(--text-muted); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border-glass); }
.st-durum.kirli { color: var(--color-gold); border-color: rgba(var(--gold-rgb), .5); box-shadow: 0 0 12px rgba(var(--gold-rgb), .25); }
.studyo-kirli #st-kaydet { animation: stKaydetCagir 2.4s ease-in-out infinite; }
@keyframes stKaydetCagir { 0%, 100% { box-shadow: 0 4px 14px rgba(var(--rose-rgb), .25); } 50% { box-shadow: 0 0 0 4px rgba(var(--rose-rgb), .25), 0 0 26px rgba(var(--rose-rgb), .6); } }

.studyo-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.studyo-bolum { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-genis { grid-column: 1 / -1; }
.studyo-bolum h3 { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.studyo-bolum h3 small { font-size: .78rem; font-weight: 400; color: var(--text-muted); }
.studyo-bolum h3.st-alt { margin-top: 6px; }
.st-not { color: var(--text-muted); font-size: .85rem; }

/* hazır temalar */
.st-hazirlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tema-hazir { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, .03); color: var(--text-primary); cursor: pointer; text-align: left; transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s; }
.tema-hazir:hover { border-color: var(--h1); transform: translateY(-3px); }
.th-onizleme { position: relative; height: 70px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 20% 25%, var(--h1) 0, transparent 55%), radial-gradient(circle at 80% 30%, var(--h2) 0, transparent 55%),
              radial-gradient(circle at 60% 90%, var(--h3) 0, transparent 50%), var(--hz); }
.th-onizleme i { position: absolute; bottom: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); }
.th-onizleme i:nth-child(1) { left: 8px; background: var(--h1); } .th-onizleme i:nth-child(2) { left: 24px; background: var(--h2); }
.th-onizleme i:nth-child(3) { left: 40px; background: var(--h3); } .th-onizleme i:nth-child(4) { left: 56px; background: var(--h4); }
.th-ad { font-size: .85rem; font-weight: 600; padding: 0 4px 2px; }

/* paletler */
.st-paletler { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.st-palet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 7px; border-radius: 11px; border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, .03); cursor: pointer; color: var(--text-secondary); transition: border-color .2s, transform .2s; }
.st-palet i { height: 18px; border-radius: 5px; display: block; }
.st-palet span { grid-column: 1 / -1; font-size: .74rem; text-align: center; margin-top: 3px; }
.st-palet:hover { transform: translateY(-2px); }
.st-palet.aktif, .st-desen.aktif, .st-karo.aktif, .st-hareket.aktif {
  border-color: var(--color-rose); background: rgba(var(--rose-rgb), .12);
  box-shadow: 0 0 0 1px var(--color-rose), 0 0 calc(8px + var(--neon) * 18px) rgba(var(--rose-rgb), .35);
}

.st-renkler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.st-renk { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-secondary); cursor: pointer; }
.st-renk input[type=color] { width: 100%; height: 42px; border: 1px solid var(--border-glass); border-radius: 10px; background: none; padding: 3px; cursor: pointer; }
.st-uret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-secondary); }
.st-uret input[type=color] { width: 42px; height: 36px; border: 1px solid var(--border-glass); border-radius: 9px; background: none; padding: 2px; }
.st-uret select { width: auto; padding: 8px 10px; font-size: .85rem; }
.st-uret .glass-button, .st-foto-dugmeler .glass-button, .st-satir .glass-button { padding: 8px 14px; font-size: .85rem; }

/* segment */
.st-segment { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--border-glass); }
.st-segment button { flex: 1 1 auto; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: .86rem; font-weight: 600;
  padding: 9px 12px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.st-segment button.aktif { background: linear-gradient(135deg, var(--color-rose), var(--color-violet)); color: #fff; box-shadow: 0 0 calc(var(--neon) * 18px) rgba(var(--rose-rgb), .5); }

/* kaydırıcı */
.st-kaydirici { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--text-secondary); min-width: 0; flex: 1 1 180px; }
.st-kaydirici > span { display: flex; justify-content: space-between; gap: 10px; }
.st-kaydirici b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.st-kaydirici input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; cursor: pointer;
  background: linear-gradient(90deg, var(--color-rose), var(--color-violet), var(--color-cyan)); outline: none; }
.st-kaydirici input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 3px solid var(--color-rose); box-shadow: 0 0 calc(6px + var(--neon) * 14px) rgba(var(--rose-rgb), .7); }
.st-kaydirici input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--color-rose); }

.st-anahtar { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-secondary); cursor: pointer; user-select: none; }
.st-anahtar input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .12);
  position: relative; cursor: pointer; transition: background .2s; flex: none; border: 1px solid var(--border-glass); }
.st-anahtar input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.st-anahtar input:checked { background: linear-gradient(135deg, var(--color-rose), var(--color-violet)); }
.st-anahtar input:checked::after { transform: translateX(18px); }
.st-satir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.st-satir .st-renk { flex: 0 0 90px; }

/* fotoğraf */
.st-foto { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.st-foto-onizleme { flex: 1 1 160px; min-height: 96px; border-radius: 12px; border: 1px dashed var(--border-glass); background-size: cover; background-position: center;
  display: grid; place-items: center; color: var(--text-muted); font-size: .82rem; }
.st-foto-dugmeler { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.st-dosya { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.st-galeri-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px; }
.st-galeri-oge { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; }
.st-galeri-oge:hover { border-color: var(--color-rose); }

/* desenler */
.st-desenler { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.st-desen { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, .03); color: var(--text-secondary); font-size: .74rem; cursor: pointer; transition: transform .2s, border-color .2s; }
.st-desen:hover { transform: translateY(-2px); }
.st-desen-onizleme { width: 100%; height: 46px; border-radius: 8px; background-repeat: repeat; border: 1px solid rgba(255, 255, 255, .06); }

/* neon örnek */
.st-neon-ornek { display: grid; place-items: center; padding: 16px; border-radius: 12px; background: rgba(0, 0, 0, .35); }
.st-neon-ornek span { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #fff;
  text-shadow: 0 0 calc(2px + var(--neon) * 6px) #fff, 0 0 calc(var(--neon) * 16px) var(--color-rose), 0 0 calc(var(--neon) * 34px) var(--color-rose), 0 0 calc(var(--neon) * 60px) var(--color-violet); }

/* efekt / imleç karoları */
.st-karolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.st-karo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, .03); color: var(--text-secondary); font: inherit; font-size: .78rem; cursor: pointer; transition: transform .2s, border-color .2s; }
.st-karo:hover { transform: translateY(-2px); }
.st-ikon { font-size: 1.35rem; line-height: 1; }

/* hareket kartları */
.st-hareketler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-hareket { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, .03); color: var(--text-primary); font: inherit; cursor: pointer; transition: transform .2s, border-color .2s; }
.st-hareket:hover { transform: translateY(-2px); }
.st-hareket-ikon { font-size: 1.5rem; }
.st-hareket b { font-size: .98rem; }
.st-hareket small { color: var(--text-muted); font-size: .78rem; line-height: 1.4; }

@media (max-width: 1100px) { .studyo-izgara { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .studyo-bas { position: static; padding: 18px; }
  .st-renkler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-hareketler { grid-template-columns: 1fr; }
  .studyo-bolum { padding: 16px; }
}

/* ==========================================================================
   Tasarım Odası: sekmeler, kimin için kaydedildiği, Dünya Kapısı
   ========================================================================== */
.st-dunya-sekmesi .studyo-kaydet { display: none; }
[data-st-panel][hidden] { display: none !important; }
[data-st-panel="renk"] { display: flex; flex-direction: column; gap: 18px; }
.st-sekmeler { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--bg-glass); border: 1px solid var(--border-glass); width: max-content; max-width: 100%; overflow-x: auto; }
.st-sekmeler button { border: 0; background: none; color: var(--text-secondary); font: 600 .95rem var(--font-sans); padding: 10px 18px; border-radius: 12px; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; transition: background .2s, color .2s; }
.st-sekmeler button small { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(var(--rose-rgb), .18); color: var(--color-rose); }
.st-sekmeler button.aktif { background: var(--color-rose); color: #fff; box-shadow: 0 6px 18px rgba(var(--rose-rgb), .35); }
.st-sekmeler button.aktif small { background: rgba(255, 255, 255, .25); color: #fff; }
.st-kapsam { display: flex; flex-wrap: wrap; gap: 8px; }
.st-kapsam:empty { display: none; }
.st-kapsam-cip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-secondary); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-glass); background: var(--bg-glass); }
.st-kapsam-cip b { color: var(--text-primary); font-weight: 600; }
.st-kapsam-cip.ozel { border-color: rgba(var(--gold-rgb), .55); }
.st-kapsam-cip.soluk { opacity: .8; }
.st-kapsam-cip button { border: 0; background: rgba(var(--rose-rgb), .16); color: var(--color-rose); border-radius: 999px; padding: 2px 9px; font: 600 .75rem var(--font-sans); cursor: pointer; }

.st-kapi .st-not { font-size: .9rem; line-height: 1.55; color: var(--text-secondary); }
.st-dunya-grup { margin: 14px 0 8px; font: 700 .72rem var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.st-dunya-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.st-dunya { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px 10px 14px; border-radius: 18px; border: 1px solid var(--border-glass); background: rgba(255, 255, 255, .025);
  color: var(--text-primary); cursor: pointer; transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .2s, box-shadow .3s; font-family: var(--font-sans); }
.st-dunya:hover { transform: translateY(-4px); border-color: rgba(var(--rose-rgb), .45); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.st-dunya.aktif { border-color: var(--color-rose); box-shadow: 0 0 0 2px rgba(var(--rose-rgb), .35), 0 12px 30px rgba(0, 0, 0, .3); }
.st-dunya-ad { font-weight: 700; font-size: .98rem; padding: 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.st-dunya-ad em { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--color-cyan); border: 1px solid rgba(var(--cyan-rgb), .4); border-radius: 999px; padding: 1px 7px; }
.st-dunya-ac { color: var(--text-muted); font-size: .8rem; line-height: 1.4; padding: 0 4px; }
.st-dunya-rozet { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px; min-height: 0; }
.st-dunya-rozet:empty { display: none; }
.st-dunya-rozet i { font-style: normal; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.st-dunya-rozet .sen { background: rgba(var(--rose-rgb), .18); color: var(--color-rose); }
.st-dunya-rozet .o { background: rgba(var(--violet-rgb), .2); color: var(--text-secondary); }
.st-dunya-rozet .dene { background: rgba(var(--gold-rgb), .2); color: var(--color-gold); }

/* küçük önizlemeler */
.st-dunya-on { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #160c26; isolation: isolate; }
.st-dunya-on i { position: absolute; display: block; }
.st-dunya-on b { display: block; }
.o-ust { left: 0; right: 0; top: 0; height: 11%; background: rgba(255, 255, 255, .1); }
.o-sol { left: 4%; top: 17%; bottom: 6%; width: 22%; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.o-sol.gruplu { display: flex; flex-direction: column; gap: 8%; padding: 8% 10%; }
.o-sol.gruplu b { height: 18%; border-radius: 4px; background: rgba(236, 72, 153, .5); }
.o-kart { border-radius: 5px; background: linear-gradient(135deg, #8b5cf6, #ec4899); opacity: .75; }
.o-kart.k1 { left: 30%; top: 17%; width: 31%; height: 36%; } .o-kart.k2 { left: 65%; top: 17%; width: 31%; height: 36%; background: linear-gradient(135deg, #06b6d4, #8b5cf6); }
.o-kart.k3 { left: 30%; top: 58%; width: 31%; height: 36%; background: linear-gradient(135deg, #f59e0b, #ec4899); } .o-kart.k4 { left: 65%; top: 58%; width: 31%; height: 36%; }
.o-hap { left: 28%; right: 28%; top: 16%; height: 10%; border-radius: 99px; background: rgba(255, 255, 255, .22); box-shadow: inset 30% 0 0 rgba(236, 72, 153, .8); }
.o-kart.g1, .o-kart.g2, .o-kart.g3 { top: 32%; height: 28%; width: 28%; } .o-kart.g4, .o-kart.g5, .o-kart.g6 { top: 64%; height: 28%; width: 28%; }
.o-kart.g1, .o-kart.g4 { left: 6%; } .o-kart.g2, .o-kart.g5 { left: 36%; } .o-kart.g3, .o-kart.g6 { left: 66%; }
.o-kart.g2, .o-kart.g6 { background: linear-gradient(135deg, #06b6d4, #8b5cf6); }
.o-dock { left: 22%; right: 22%; bottom: 6%; height: 15%; border-radius: 10px; background: rgba(255, 255, 255, .2); display: flex; align-items: flex-end; justify-content: center; gap: 6%; padding: 2% 4%; }
.o-dock b { width: 12%; aspect-ratio: 1; border-radius: 4px; background: #f9a8d4; } .o-dock b.b { width: 18%; background: #ec4899; transform: translateY(-20%); }
.dock .o-kart, [data-on="dock"] .o-kart { height: 26%; }
[data-on="dock"] .o-kart.g1, [data-on="dock"] .o-kart.g2, [data-on="dock"] .o-kart.g3 { top: 18%; } [data-on="dock"] .o-kart.g4 { top: 48%; left: 6%; }
.o-ray { right: 0; top: 11%; bottom: 0; width: 9%; background: rgba(255, 255, 255, .18); }
.o-kart.r1 { left: 5%; top: 17%; width: 40%; height: 36%; } .o-kart.r2 { left: 49%; top: 17%; width: 40%; height: 36%; background: linear-gradient(135deg, #06b6d4, #8b5cf6); }
.o-kart.r3 { left: 5%; top: 58%; width: 40%; height: 36%; background: linear-gradient(135deg, #f59e0b, #ec4899); } .o-kart.r4 { left: 49%; top: 58%; width: 40%; height: 36%; }
.o-serit { left: 0; right: 0; top: 11%; height: 17%; background: rgba(255, 255, 255, .14); display: flex; gap: 5%; align-items: flex-end; padding: 0 6% 2%; }
.o-serit b { width: 14%; height: 30%; border-radius: 99px; background: rgba(255, 255, 255, .35); } .o-serit b:first-child { background: #ec4899; }
.o-kart.s1 { left: 5%; top: 34%; width: 28%; height: 58%; } .o-kart.s2 { left: 36%; top: 34%; width: 28%; height: 58%; background: linear-gradient(135deg, #06b6d4, #8b5cf6); } .o-kart.s3 { left: 67%; top: 34%; width: 28%; height: 58%; background: linear-gradient(135deg, #f59e0b, #ec4899); }
.o-bento { border-radius: 6px; background: rgba(255, 255, 255, .16); }
.o-bento.b1 { left: 5%; top: 17%; width: 44%; height: 76%; background: linear-gradient(160deg, #8b5cf6, #ec4899); }
.o-bento.b2 { left: 52%; top: 17%; width: 20%; height: 36%; } .o-bento.b3 { left: 75%; top: 17%; width: 20%; height: 36%; background: rgba(6, 182, 212, .45); }
.o-bento.b4 { left: 52%; top: 57%; width: 43%; height: 36%; } .o-bento.b5 { display: none; }
.o-palet { left: 20%; right: 20%; top: 26%; height: 54%; border-radius: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); display: flex; flex-direction: column; gap: 10%; padding: 8% 8%; }
.o-palet b { height: 16%; border-radius: 4px; background: rgba(255, 255, 255, .25); } .o-palet b:first-child { background: rgba(236, 72, 153, .7); }
[data-on="masaustu"] { background: #2a7f7a; }
.o-ms-simge { left: 5%; width: 9%; aspect-ratio: 1; background: #ffe680; border-radius: 2px; box-shadow: 0 0 0 1px #000; }
.o-ms-simge.s1 { top: 8%; } .o-ms-simge.s2 { top: 30%; background: #9fd3ff; } .o-ms-simge.s3 { top: 52%; background: #ffb3c7; }
.o-ms-pencere { left: 24%; top: 10%; width: 62%; height: 64%; background: #c3c3c3; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: inset 0 9px 0 #000080, inset 0 0 0 4px #c3c3c3, inset 0 0 0 40px #1a0f2e; }
.o-ms-gorev { left: 0; right: 0; bottom: 0; height: 10%; background: #c3c3c3; border-top: 2px solid #fff; box-shadow: inset 6px 0 0 4px #c3c3c3, inset 30px 0 0 0 #b0b0b0; }
[data-on="pano"] { background: radial-gradient(circle, rgba(80, 45, 15, .25) 1px, transparent 1.5px) 0 0 / 6px 6px, #c4945c; }
.o-pn { background: #fff; box-shadow: 0 3px 5px rgba(0, 0, 0, .3); }
.o-pn.p1 { left: 8%; top: 12%; width: 22%; height: 40%; transform: rotate(-6deg); box-shadow: inset 0 -8px 0 #fff, inset 0 0 0 4px #fff, inset 0 0 0 60px #d8a07a; }
.o-pn.p2 { left: 68%; top: 10%; width: 22%; height: 32%; background: #ffe56a; transform: rotate(5deg); }
.o-pn.p3 { left: 12%; top: 62%; width: 28%; height: 20%; background: #f7d778; transform: rotate(-4deg); }
.o-pn.p4 { left: 64%; top: 56%; width: 24%; height: 32%; background: #ffadc2; transform: rotate(4deg); }
.o-pn-tahta { left: 36%; top: 36%; width: 30%; height: 22%; background: #2c3a30; border: 3px solid #8b5e34; }
[data-on="oda"] { background: #8a5a39; }
.o-od-duvar { left: 0; right: 0; top: 0; height: 66%; background: repeating-linear-gradient(90deg, #e9c8b4 0 10px, #e2bea9 10px 20px); }
.o-od-pencere { left: 6%; top: 8%; width: 20%; height: 40%; background: linear-gradient(#070d26, #1d2c63); border: 3px solid #f1e3cc; }
.o-od-tv { left: 40%; top: 26%; width: 22%; height: 28%; background: #2a3f6b; border: 3px solid #23232b; box-shadow: 0 0 14px rgba(110, 160, 255, .5); }
.o-od-masa { left: 4%; top: 58%; width: 30%; height: 5%; background: #9a6a45; }
.o-od-yatak { right: 0; bottom: 0; width: 30%; height: 26%; background: #c76b7c; border-radius: 10px 0 0 0; }
[data-on="gazete"] { background: #f3efe4; }
.o-gz-ad { left: 10%; right: 10%; top: 7%; height: 12%; background: #1d1712; -webkit-mask: linear-gradient(90deg, #000 0 100%); border-radius: 2px; opacity: .85; clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%); }
.o-gz-foto { left: 6%; top: 28%; width: 52%; height: 50%; background: linear-gradient(135deg, #8a8a8a, #444); }
.o-gz-satir { left: 63%; width: 31%; height: 5%; background: #1d1712; opacity: .6; }
.o-gz-satir.s1 { top: 30%; } .o-gz-satir.s2 { top: 42%; width: 25%; } .o-gz-satir.s3 { top: 54%; }
[data-on="y2k"] { background: #c6ff3d; }
.o-y2-kayan { left: 0; right: 0; top: 0; height: 12%; background: #120a2a; }
.o-y2-yazi { left: 6%; top: 18%; width: 54%; height: 28%; background: #120a2a; box-shadow: 4px 4px 0 #ff2bd6, 8px 8px 0 #2b6bff; }
.o-y2 { border: 2px solid #120a2a; box-shadow: 3px 3px 0 #120a2a; }
.o-y2.c1 { left: 10%; top: 60%; width: 24%; height: 22%; background: #ff2bd6; transform: rotate(-8deg); }
.o-y2.c2 { left: 44%; top: 62%; width: 22%; height: 20%; background: #fff; transform: rotate(6deg); }
.o-y2.c3 { left: 72%; top: 28%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#ff2bd6, #ffe600, #00e0b8, #2b6bff, #ff2bd6); }
[data-on="liste"] { background: #efece6; }
.o-ls { left: 6%; height: 14%; border-top: 1px solid #141414; }
.o-ls::after { content: ''; position: absolute; left: 8%; top: 25%; height: 50%; background: #141414; border-radius: 2px; }
.o-ls.s1 { top: 12%; right: 6%; } .o-ls.s1::after { width: 46%; } .o-ls.s2 { top: 32%; right: 6%; } .o-ls.s2::after { width: 62%; }
.o-ls.s3 { top: 52%; right: 6%; } .o-ls.s3::after { width: 38%; } .o-ls.s4 { top: 72%; right: 6%; } .o-ls.s4::after { width: 54%; }
.o-ls-foto { left: 58%; top: 26%; width: 26%; height: 32%; background: linear-gradient(135deg, #d8a07a, #b7678a); box-shadow: 0 8px 16px rgba(0, 0, 0, .25); transform: rotate(3deg); }

/* kimin için sorusu */
.st-kapsam-ortu { position: fixed; inset: 0; z-index: 3100; background: rgba(5, 2, 12, .6); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .2s; }
.st-kapsam-ortu.acik { opacity: 1; }
.st-kapsam-kutu { width: min(460px, 100%); background: var(--bg-secondary, #130a22); border: 1px solid var(--border-glass); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px;
  color: var(--text-primary); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); transform: translateY(10px) scale(.97); transition: transform .28s cubic-bezier(.22,1,.36,1); }
.st-kapsam-ortu.acik .st-kapsam-kutu { transform: none; }
.st-kapsam-kutu h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.25rem; }
.st-kapsam-sec { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--border-glass); background: rgba(255, 255, 255, .03); color: var(--text-primary); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.st-kapsam-sec span { grid-row: 1 / 3; font-size: 1.7rem; }
.st-kapsam-sec b { font-size: 1rem; }
.st-kapsam-sec small { color: var(--text-muted); font-size: .8rem; line-height: 1.4; }
.st-kapsam-sec:hover, .st-kapsam-sec:focus-visible { border-color: var(--color-rose); background: rgba(var(--rose-rgb), .1); transform: translateY(-2px); outline: none; }
.st-kapsam-sec.oneri { border-color: rgba(var(--rose-rgb), .55); }
.st-kapsam-vazgec { align-self: center; border: 0; background: none; color: var(--text-muted); padding: 8px 14px; cursor: pointer; font: 500 .9rem var(--font-sans); }

/* dünya denerken alttaki kaydet çubuğu */
.st-onay { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 3050; transform: translate(-50%, 140%); opacity: 0;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); padding: 12px 14px 12px 18px; border-radius: 20px;
  background: #160c26; color: #f8fafc; border: 1px solid rgba(236, 72, 153, .5); box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(236, 72, 153, .3);
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s; font-family: 'Outfit', system-ui, sans-serif; }
.st-onay.acik { transform: translate(-50%, 0); opacity: 1; }
.st-onay-metin { font-size: .92rem; }
.st-onay-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.st-onay button { border: 0; border-radius: 999px; padding: 9px 15px; font: 600 .86rem 'Outfit', system-ui, sans-serif; cursor: pointer; background: #ec4899; color: #fff; white-space: nowrap; }
.st-onay button[data-k="ben"] { background: #8b5cf6; }
.st-onay button.ikincil { background: rgba(255, 255, 255, .1); color: #e2e8f0; }
.st-onay button:hover { filter: brightness(1.12); }
@media (max-width: 600px) { .st-dunya-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .st-dunya-ac { display: none; } .st-onay { left: 10px; right: 10px; transform: translateY(140%); } .st-onay.acik { transform: none; } }