/* MTA Stüdyo — Şablon Pazarı "3B gez" (v7.34.102). 3B görünümün kuralları stp.css'teki .stp-3b-* ile aynıdır;
   stp.css bu sayfaya yüklenmez (Stüdyo sayfasının tam ekran kurallarını taşır). Biri değişirse öbürü de değişir. */
.sb-3b { --kenar: var(--border,#e2e8f0); --metin: var(--text,#0f172a); --soluk: var(--text-muted,#64748b); --koyu: #0f172a; }
.sb-3b-alan { position: relative; margin-top: 12px; }
.sb-3b-alan[hidden] { display: none; }
.sb-3b-kap { position: relative; height: min(72vh, 600px); min-height: 360px; border-radius: 12px; overflow: hidden; background: #eef2f6; border: 1px solid var(--kenar); }
.sb-3b-katlar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sb-3b-katlar[hidden] { display: none; }
.sb-3b-katlar button { border: 1px solid var(--kenar); background: #fff; color: var(--metin); padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sb-3b-katlar button.is-on { background: var(--koyu); color: #fff; border-color: var(--koyu); }
.sb-3b-tost { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; background: rgba(15,23,42,.9); color: #fff; padding: 8px 13px; border-radius: 10px; font-size: 13px; font-weight: 600; max-width: 90%; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sb-3b-tost.is-on { opacity: 1; }
.sb-3b-kap .stp-3b-tuval { position: absolute; inset: 0; touch-action: none; }
.sb-3b-kap .stp-3b-tuval canvas { display: block; width: 100%; height: 100%; outline: none; }
.sb-3b-kap .stp-3b-arac { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.96); border: 1px solid var(--kenar); border-radius: 12px; padding: 5px; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.sb-3b-kap .stp-3b-arac[hidden] { display: none; }
.sb-3b-kap .stp-3b-arac button { border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: #334155; cursor: pointer; text-align: left; white-space: nowrap; font-family: inherit; }
.sb-3b-kap .stp-3b-arac button.is-on { background: var(--koyu); color: #fff; }
.sb-3b-kap .stp-3b-bilgi { position: absolute; left: 10px; bottom: 10px; z-index: 3; max-width: 380px; background: rgba(255,255,255,.97); border: 1px solid var(--kenar); border-radius: 12px; padding: 10px 34px 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--metin); box-shadow: 0 2px 10px rgba(15,23,42,.08); }
.sb-3b-kap .stp-3b-bilgi[hidden] { display: none; }
.sb-3b-kap .stp-3b-bilgi ul { margin: 6px 0; padding-left: 0; list-style: none; }
.sb-3b-kap .stp-3b-bilgi li { margin: 3px 0; }
.sb-3b-kap .stp-3b-bilgi p { margin: 6px 0 0; color: var(--soluk); }
.sb-3b-kap .stp-3b-kapat { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--soluk); padding: 4px 6px; }
.sb-3b-kap .stp-3b-renk { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.sb-3b-kap .stp-3b-renk.koyu { background: #7b8794; }
.sb-3b-kap .stp-3b-renk.saydam { background: rgba(148,163,184,.35); border: 1px solid #94a3b8; }
.sb-3b-kap .stp-3b-mesaj { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-weight: 700; color: var(--soluk); pointer-events: none; z-index: 2; }
.sb-3b-kap .stp-3b-mesaj[hidden] { display: none; }
.sb-3b-kap .stp-3b-oda { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 220px); box-sizing: border-box; background: var(--koyu); color: #fff; padding: 8px 10px; border-radius: 12px; box-shadow: 0 4px 14px rgba(15,23,42,.25); font-size: 13px; line-height: 1.35; }
.sb-3b-kap .stp-3b-oda[hidden] { display: none; }
.sb-3b-kap .stp-3b-oda button { border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; padding: 7px 12px; border-radius: 8px; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; }
.sb-3b-kap .stp-3b-oda button.ana { background: #fff; color: var(--koyu); border-color: #fff; }
@media (max-width: 760px) {
  .sb-3b-kap .stp-3b-arac { left: 10px; right: 10px; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .sb-3b-kap .stp-3b-bilgi { top: 58px; bottom: auto; right: 10px; max-width: none; }
  .sb-3b-kap .stp-3b-oda { top: auto; bottom: 56px; left: 10px; right: 10px; transform: none; max-width: none; }
}