/* Mood Küresi (views/mood_globe/index.php + js/mood-globe-v1.js) */
/* Üst boşluk mood/tür sayfalarıyla aynı: içerik menünün hemen altında */
.vqg{--g-color:#a78bfa;padding-top:50px;padding-bottom:40px}
@media (max-width:900px){.vqg{padding-top:36px}}
.vqg *{box-sizing:border-box}
.vqg-head{max-width:720px;margin:0 0 18px}
.vqg-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#c4b5fd;font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.vqg-head h1{margin:10px 0 8px;font-size:clamp(28px,4vw,48px);font-weight:900;line-height:1.05;letter-spacing:-.03em;color:#f7f4fb}
.vqg-head h1 em{font-style:normal;background:linear-gradient(90deg,var(--g-color),#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent;transition:background .4s}
.vqg-head p{margin:0;color:#9aa3b8;font-size:14px;line-height:1.55}

.vqg-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:stretch}
.vqg-canvas{position:relative;min-height:560px;border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--g-color) 14%,transparent),transparent 70%),radial-gradient(120% 90% at 50% 0,#121a2e,#070a13 70%);transition:background .6s}
.vqg-canvas canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab}
.vqg-canvas canvas:active{cursor:grabbing}
.vqg-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(7,10,19,.7);border:1px solid rgba(255,255,255,.1);color:#cbd2e1;font-size:12px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .4s}
.vqg.is-ready .vqg-hint{opacity:1;animation:vqgHint 4.5s ease 1.2s forwards}
@keyframes vqgHint{80%{opacity:1}to{opacity:0}}
.vqg-loading{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s}
.vqg-loading span{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(196,181,253,.25),rgba(139,92,246,.08) 55%,transparent 70%);box-shadow:0 0 80px rgba(139,92,246,.25);animation:vqgPulse 1.6s ease-in-out infinite}
@keyframes vqgPulse{50%{transform:scale(1.06);opacity:.7}}
.vqg.is-ready .vqg-loading,.vqg.is-flat .vqg-loading{opacity:0;pointer-events:none}
.vqg.is-flat .vqg-canvas{display:none}
.vqg.is-flat .vqg-stage{grid-template-columns:minmax(0,1fr)}

.vqg-panel{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:28px;background:radial-gradient(400px 220px at 100% 0,color-mix(in srgb,var(--g-color) 16%,transparent),transparent 65%),linear-gradient(180deg,#101828,#0b111c);min-width:0}
.vqg-panel.is-swap>*{animation:vqgIn .4s ease}
@keyframes vqgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vqg-panel-head{display:flex;align-items:center;gap:12px}
.vqg-dot{width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:var(--g-color);box-shadow:0 0 18px var(--g-color)}
.vqg-panel-head small{display:block;color:#8f9bb3;font-size:10px;font-weight:900;letter-spacing:.14em}
.vqg-panel-head h2{margin:2px 0 0;color:#fff;font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.vqg-desc{margin:0;color:#9aa3b8;font-size:13px;line-height:1.55}
.vqg-list{display:flex;flex-direction:column;gap:6px}
.vqg-item{display:flex;align-items:center;gap:12px;padding:7px;border-radius:14px;border:1px solid transparent;color:#fff!important;text-decoration:none!important;transition:background .15s,border-color .15s}
.vqg-item:hover{background:rgba(255,255,255,.05);border-color:color-mix(in srgb,var(--g-color) 30%,transparent)}
.vqg-item img{width:38px;height:57px;flex:0 0 38px;border-radius:8px;object-fit:cover;background:#1a2234}
.vqg-item span{flex:1;min-width:0}
.vqg-item b{display:block;font-size:13px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vqg-item small{display:block;margin-top:2px;color:#7c86a0;font-size:11px}
.vqg-item em{font-style:normal;color:#fbbf24;font-size:12px;font-weight:800}
.vqg-all{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#6d35ee);color:#fff!important;font-size:14px;font-weight:900;text-decoration:none!important;box-shadow:0 10px 26px rgba(109,53,238,.3)}

.vqg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.vqg-chip{--c:#a78bfa;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);color:#cbd2e1;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.vqg-chip i{color:var(--c);font-size:12px}
.vqg-chip:hover{background:rgba(255,255,255,.07);color:#fff}
.vqg-chip[aria-pressed="true"]{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 16%,transparent);color:#fff}

@media (max-width:1000px){
  .vqg-stage{grid-template-columns:minmax(0,1fr)}
  .vqg-canvas{min-height:440px}
  .vqg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .vqg-canvas{min-height:min(118vw,460px);border-radius:22px}
  .vqg-panel{padding:18px;border-radius:22px}
  .vqg-list{grid-template-columns:minmax(0,1fr)}
  .vqg-chips{flex-wrap:nowrap;overflow-x:auto;margin:16px -16px 0;padding:0 16px 6px;scrollbar-width:none}
  .vqg-chips::-webkit-scrollbar{display:none}
  .vqg-chip{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.vqg *{animation:none!important;transition:none!important}}