html,body{margin:0;height:100%;overflow:hidden;background:#0d0f13;font-family:system-ui,sans-serif;color:#e5e9f0}
#app{position:absolute;inset:0}
#ui{position:absolute;inset:0;pointer-events:none}
/* iframe içine gömüldüğünde: tıklayana kadar sayfa kaydırması serbest kalsın */
#embed-gate{display:none;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;cursor:pointer;background:rgba(10,12,16,.35);backdrop-filter:blur(1.5px);transition:background .2s}
#embed-gate:hover{background:rgba(10,12,16,.2)}
#embed-gate .gate-box{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:14px 22px;border-radius:14px;background:rgba(22,25,32,.92);border:1px solid rgba(120,130,160,.2);box-shadow:0 8px 30px rgba(0,0,0,.45)}
#embed-gate b{font-size:15px}
#embed-gate span{font-size:11px;color:rgba(255,255,255,.6)}
#embed-gate .gate-esc{font-size:10px;color:rgba(255,255,255,.38)}
body.embedded #markers{bottom:8px}
.panel{background:rgba(22,25,32,.92);border:1px solid rgba(120,130,160,.15);border-radius:12px;backdrop-filter:blur(10px);pointer-events:auto}
#markers{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px 10px}
#markers button{background:rgba(255,255,255,.08);border:0;border-radius:8px;color:#e5e9f0;padding:4px 10px;font-size:12px;cursor:pointer;transition:transform .15s}
#markers button:hover{transform:scale(1.06);background:rgba(99,102,241,.5)}
#fps-btn{position:absolute;top:12px;right:12px;border:0;color:#e5e9f0;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
#status{position:absolute;bottom:12px;left:12px;padding:4px 10px;font-size:11px;color:rgba(255,255,255,.7)}
.balloon{position:absolute;transform:translate(-50%,-100%);z-index:5}
.balloon .dot{width:28px;height:28px;border-radius:50%;background:rgba(14,165,233,.9);border:0;font-size:13px;cursor:pointer;box-shadow:0 0 12px rgba(14,165,233,.6)}
.balloon .card{width:220px;background:rgba(22,25,32,.95);border:1px solid rgba(120,130,160,.2);border-radius:12px;padding:10px;font-size:12px;animation:fin .25s ease both}
.balloon .card h3{margin:0 0 4px;font-size:13px}
.balloon .card p{margin:4px 0;color:rgba(255,255,255,.7);font-size:11px}
.balloon .card img,.balloon .card video{width:100%;border-radius:8px;margin-top:6px}
.balloon .card a{display:block;text-align:center;background:rgba(14,165,233,.7);border-radius:8px;color:#fff;text-decoration:none;padding:4px;margin-top:6px;font-size:11px}
.balloon .card .close{float:right;background:none;border:0;color:rgba(255,255,255,.6);cursor:pointer}
@keyframes fin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---- Interactive Material Configurator ---- */
#cfg-hud{position:absolute;inset:0;pointer-events:none;z-index:6}
.cfg-info{position:absolute;max-width:260px;padding:12px 14px;background:rgba(22,25,32,.92);border:1px solid rgba(120,130,160,.18);border-radius:14px;backdrop-filter:blur(10px);pointer-events:auto;animation:fin .25s ease both}
.cfg-info.cfg-top-left{top:16px;left:16px}
.cfg-info.cfg-top-right{top:16px;right:16px}
.cfg-info.cfg-bottom-left{bottom:150px;left:16px}
.cfg-cat{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#818cf8}
.cfg-name{font-size:15px;font-weight:700;line-height:1.15;margin-top:2px}
.cfg-mat{font-size:12px;color:rgba(255,255,255,.7);margin-top:2px}
.cfg-desc{font-size:11px;color:rgba(255,255,255,.6);margin:6px 0 0}
.cfg-dim,.cfg-price{font-size:11px;color:rgba(255,255,255,.55);margin-top:4px}
.cfg-price{color:#818cf8;font-weight:600}
.cfg-sku{font-size:9px;color:rgba(255,255,255,.35);margin-top:2px}
.cfg-bar{position:absolute;max-width:92vw;padding:10px 14px;background:rgba(22,25,32,.92);border:1px solid rgba(120,130,160,.18);border-radius:16px;backdrop-filter:blur(10px);pointer-events:auto;animation:fin .25s ease both}
.cfg-bar.cfg-bottom-center{bottom:16px;left:50%;transform:translateX(-50%)}
.cfg-bar.cfg-bottom-left{bottom:16px;left:16px}
.cfg-bar.cfg-bottom-right{bottom:16px;right:16px}
.cfg-bar.cfg-right{right:16px;top:50%;transform:translateY(-50%)}
.cfg-bar.cfg-left{left:16px;top:50%;transform:translateY(-50%)}
.cfg-bar.cfg-floating{bottom:90px;left:50%;transform:translateX(-50%)}
.cfg-bar-title{text-align:center;font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.5);margin-bottom:8px}
.cfg-tabs{display:flex;gap:5px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}
.cfg-tabs button{background:rgba(255,255,255,.08);border:0;border-radius:8px;color:#e5e9f0;padding:3px 10px;font-size:10px;font-weight:600;cursor:pointer}
.cfg-tabs button.active{background:#818cf8;color:#0d0f13}
.cfg-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.cfg-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;cursor:pointer;padding:0;min-width:44px;transition:transform .15s}
.cfg-swatch:hover{transform:translateY(-2px)}
.cfg-swatch.active{transform:scale(1.06)}
.cfg-dot{display:block;overflow:hidden;border:2px solid rgba(255,255,255,.15);background-size:cover}
.cfg-dot.cfg-circle{border-radius:50%}
.cfg-dot.cfg-rounded{border-radius:12px}
.cfg-dot.cfg-square{border-radius:0}
.cfg-dot img{width:100%;height:100%;object-fit:cover;display:block}
.cfg-swatch.active .cfg-dot{box-shadow:0 0 12px rgba(129,140,248,.8)}
.cfg-label{font-size:9px;color:rgba(255,255,255,.75);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-help{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:6px 14px;background:rgba(22,25,32,.9);border-radius:12px;font-size:11px;color:rgba(255,255,255,.7);pointer-events:none;transition:opacity 1s}
@media (max-width:640px){
  .cfg-info{max-width:60vw;padding:9px 11px}
  .cfg-info.cfg-bottom-left{bottom:170px}
  .cfg-bar{left:8px;right:8px;transform:none;max-width:none;border-radius:14px}
  .cfg-bar.cfg-bottom-center,.cfg-bar.cfg-bottom-left,.cfg-bar.cfg-bottom-right{left:8px;right:8px;transform:none}
  .cfg-swatch{min-width:48px}
}