/* Sosyal katman: profil kartı, VIP çerçeveleri ve isim renkleri, arkadaşlar, özel mesaj, hediye, radyo.
   Hem lobide hem masada kullanılır; kendi değişkenleriyle çalışır. */
:root{
  --s-bg:#10151d; --s-bg2:#171e29; --s-line:rgba(255,255,255,.08); --s-text:#eef1f6; --s-muted:#9aa3b2;
  --s-gold:#e8c35a; --s-gold2:#f6dc8a; --s-ok:#3cc463; --s-bad:#e2534a;
}
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sspin{to{--sa:360deg}}
@keyframes sshine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes spop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* ---------- yüz: fotoğraf ya da çizim avatar, VIP çerçevesiyle ---------- */
.sface{position:relative;display:inline-grid;place-items:center;border-radius:50%;flex:none;aspect-ratio:1;
  width:var(--sz,48px);background:#0b0f15;overflow:visible}
.sface > .in{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:end center;background:radial-gradient(circle at 50% 35%,#2a3446,#141a24)}
.sface > .in img{width:100%;height:100%;object-fit:cover;display:block}
.sface > .in svg{width:92%;height:auto;display:block}
.sface[class*='fr-']{padding:calc(var(--sz,48px) * .07)}
.sface.fr-silver{background:linear-gradient(135deg,#f4f6f9,#9aa3b2 40%,#e6e9ef 60%,#7b8494)}
.sface.fr-gold{background:linear-gradient(135deg,#fff3c4,#e8c35a 40%,#a7791c 70%,#f6dc8a)}
.sface.fr-emerald{background:linear-gradient(135deg,#b9ffd9,#1fae6a 45%,#0b5d37 75%,#7cf0b4);box-shadow:0 0 14px rgba(31,174,106,.55)}
.sface.fr-ruby{background:linear-gradient(135deg,#ffc2c8,#d3203a 45%,#7a0c1d 75%,#ff7a8a);box-shadow:0 0 14px rgba(211,32,58,.55)}
.sface.fr-diamond{background:linear-gradient(110deg,#e8f7ff,#8fd3ff 25%,#ffffff 40%,#7ab8ff 60%,#e8f7ff 80%,#b9e6ff);background-size:200% 100%;
  animation:sshine 3.2s linear infinite;box-shadow:0 0 16px rgba(143,211,255,.65)}
.sface.fr-royal{background:conic-gradient(from var(--sa),#e8c35a,#7a3cff,#ff4f9a,#e8c35a,#3cc4ff,#e8c35a);animation:sspin 4s linear infinite;box-shadow:0 0 22px rgba(232,195,90,.55)}
.sface .scrown{position:absolute;left:50%;top:calc(var(--sz,48px) * -.3);transform:translateX(-50%);width:calc(var(--sz,48px) * .5);pointer-events:none}
.sface .online{position:absolute;right:2%;bottom:2%;width:22%;height:22%;min-width:9px;min-height:9px;border-radius:50%;background:#3cc463;box-shadow:0 0 0 2px #0b0f15}

/* ---------- isim renkleri ---------- */
.nc-gold{color:#f6d36b!important}
.nc-ice{color:#9fe3ff!important}
.nc-rose{color:#ff8fb1!important}
.nc-lime{color:#b6f36a!important}
.nc-violet{color:#c59bff!important}
.nc-sunset,.nc-rainbow,.nc-royalgold{-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent}
.nc-sunset{background-image:linear-gradient(90deg,#ffb347,#ff5f6d,#ffc371)}
.nc-rainbow{background-image:linear-gradient(90deg,#ff5f6d,#ffc371,#b6f36a,#5ad1ff,#c59bff,#ff5f6d);background-size:200% 100%;animation:sshine 3s linear infinite}
.nc-royalgold{background-image:linear-gradient(90deg,#a7791c,#fff3c4,#e8c35a,#fff3c4,#a7791c);background-size:200% 100%;animation:sshine 2.4s linear infinite}

/* ---------- VIP rozeti ---------- */
.svip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-weight:900;font-size:10px;line-height:1.4;letter-spacing:.08em;vertical-align:middle;white-space:nowrap}
.svip.t1{background:linear-gradient(135deg,#e6e9ef,#9aa3b2);color:#1c222c}
.svip.t2{background:linear-gradient(135deg,#fff3c4,#e8c35a);color:#3a2a06}
.svip.t3{background:linear-gradient(135deg,#7cf0b4,#1fae6a);color:#062b18}
.svip.t4{background:linear-gradient(110deg,#e8f7ff,#8fd3ff,#fff,#c59bff);background-size:200% 100%;animation:sshine 3s linear infinite;color:#1a1640}

/* ---------- pencere ---------- */
.s-ov{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(4,6,10,.62);backdrop-filter:blur(4px)}
.s-ov[hidden]{display:none}
.s-sheet{position:relative;width:min(460px,100%);max-height:min(88vh,760px);overflow:auto;border-radius:18px;padding:22px;color:var(--s-text);
  background:linear-gradient(180deg,var(--s-bg2),var(--s-bg));box-shadow:0 0 0 1px var(--s-line),0 30px 80px -20px #000;animation:spop .22s ease-out;font-family:inherit}
.s-sheet.wide{width:min(720px,100%)}
.s-sheet h2{font-size:20px;font-weight:800;margin:0 0 4px}
.s-sheet h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--s-muted);margin:18px 0 8px}
.s-sheet p{color:var(--s-muted);font-size:14px;line-height:1.5;margin:0 0 10px}
.s-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--s-muted);background:rgba(255,255,255,.05);border:0;cursor:pointer}
.s-x:hover{color:var(--s-text);background:rgba(255,255,255,.1)}
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;font-size:14px;color:var(--s-text);background:rgba(255,255,255,.08);font-family:inherit}
.s-btn:hover{background:rgba(255,255,255,.14)}
.s-btn:disabled{opacity:.45;cursor:not-allowed}
.s-btn.gold{background:linear-gradient(180deg,#f6dc8a,#d9a93a);color:#2a1d04}
.s-btn.green{background:linear-gradient(180deg,#46d474,#239447);color:#04170b}
.s-btn.danger{background:rgba(226,83,74,.16);color:#ffb0a8}
.s-btn.sm{height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.s-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.s-input{width:100%;height:40px;border-radius:10px;border:1px solid var(--s-line);background:#0b0f15;color:var(--s-text);padding:0 12px;font-weight:500;font-size:14px;font-family:inherit}
.s-input:focus{outline:2px solid var(--s-gold);outline-offset:0}
.s-empty{color:var(--s-muted);font-size:14px;text-align:center;padding:18px 0}
.s-muted{color:var(--s-muted)}

/* ---------- profil kartı ---------- */
.s-prof{display:grid;justify-items:center;text-align:center;gap:6px;padding-top:8px}
.s-prof .nm{font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.s-prof .sub{color:var(--s-muted);font-size:13px}
.s-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:10px 0 4px}
.s-stats span{display:grid;gap:2px;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.04);font-size:12px;color:var(--s-muted)}
.s-stats b{font-size:18px;color:var(--s-text)}
.s-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:8px}
.s-acts .s-btn{width:100%}
.s-acts .full{grid-column:1/-1}
.s-gift-hint{font-size:12px;color:var(--s-muted)}

/* ---------- sekmeler ve liste ---------- */
.s-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);margin:12px 0}
.s-tabs button{flex:1;height:34px;border:0;border-radius:9px;background:none;color:var(--s-muted);font-weight:700;font-size:13px;cursor:pointer;position:relative;font-family:inherit}
.s-tabs button[aria-selected='true']{background:rgba(255,255,255,.1);color:var(--s-text)}
.s-tabs .b{position:absolute;right:6px;top:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--s-bad);color:#fff;font-size:10px;line-height:16px}
.s-list{display:grid;gap:6px}
.s-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;border:0;color:inherit;text-align:left;width:100%;font-family:inherit}
.s-item:hover{background:rgba(255,255,255,.07)}
.s-item .t{flex:1;min-width:0;display:grid;gap:2px}
.s-item .t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-item .t small{font-size:12px;color:var(--s-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-item .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--s-bad);color:#fff;font-weight:800;font-size:11px;line-height:20px;text-align:center}
.s-item .blur{filter:blur(3.5px)}

/* ---------- sohbet ---------- */
.s-chat{display:grid;grid-template-rows:auto 1fr auto;height:min(78vh,640px);gap:10px}
.s-chat .hd{display:flex;align-items:center;gap:10px;padding-right:36px}
.s-chat .hd b{font-size:16px}
.s-msgs{overflow:auto;display:flex;flex-direction:column;gap:6px;padding:6px 2px}
.dm{max-width:80%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap;background:rgba(255,255,255,.07);align-self:flex-start;position:relative}
.dm.mine{align-self:flex-end;background:linear-gradient(180deg,#1f6b44,#185437)}
.dm .at{display:block;font-size:10.5px;color:var(--s-muted);margin-top:3px;text-align:right}
.dm.gift{align-self:center;max-width:92%;text-align:center;background:linear-gradient(135deg,rgba(232,195,90,.22),rgba(122,60,255,.18));box-shadow:0 0 0 1px rgba(232,195,90,.4)}
.dm.locked .txt{filter:blur(6px);user-select:none;-webkit-user-select:none;pointer-events:none}
.s-lockbar{display:grid;gap:8px;justify-items:center;text-align:center;padding:12px;border-radius:14px;background:linear-gradient(135deg,rgba(232,195,90,.14),rgba(122,60,255,.14));box-shadow:0 0 0 1px rgba(232,195,90,.3)}
.s-lockbar b{font-size:15px}
.s-compose{display:flex;gap:8px}
.s-compose textarea{flex:1;resize:none;height:44px;border-radius:12px;border:1px solid var(--s-line);background:#0b0f15;color:var(--s-text);padding:11px 12px;font-weight:500;font-size:14px;line-height:1.4;font-family:inherit}

/* ---------- VIP seçenekleri ---------- */
.s-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.s-plan{display:grid;gap:6px;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--s-line);text-align:center}
.s-plan .p{font-size:13px;color:var(--s-muted)}
.s-plan.dis{opacity:.45}
.s-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.s-look{display:grid;justify-items:center;gap:6px;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.04);border:0;color:inherit;cursor:pointer;font-weight:600;font-size:12px;font-family:inherit;position:relative}
.s-look[aria-pressed='true']{box-shadow:0 0 0 2px var(--s-gold);background:rgba(232,195,90,.1)}
.s-look:disabled{cursor:not-allowed}
.s-look:disabled > *:not(.lk){opacity:.4}
.s-look .lk{position:absolute;top:6px;right:6px;font-size:10px;font-weight:800;color:var(--s-gold2)}
.s-look .sw{font-size:16px;font-weight:900}

/* ---------- bildirim ---------- */
#s-toasts{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:260;display:grid;gap:8px;pointer-events:none;width:min(420px,calc(100% - 24px))}
.s-toast{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(16,21,29,.96);color:var(--s-text);box-shadow:0 0 0 1px var(--s-line),0 18px 40px -12px #000;font-size:14px;pointer-events:auto;cursor:pointer;animation:spop .25s ease-out}
.s-toast.gift{box-shadow:0 0 0 1px rgba(232,195,90,.5),0 0 30px rgba(232,195,90,.3),0 18px 40px -12px #000}
.s-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--s-bad);color:#fff;font:800 10.5px/17px system-ui,sans-serif;text-align:center;pointer-events:none}
.s-badge[hidden]{display:none}

/* ---------- hediye gösterisi ---------- */
.s-giftfx{position:fixed;inset:0;z-index:250;display:grid;place-items:center;pointer-events:none}
.s-giftfx .box{display:grid;justify-items:center;gap:6px;padding:22px 30px;border-radius:20px;text-align:center;
  background:radial-gradient(ellipse at 50% 20%,rgba(70,50,10,.97),rgba(14,10,4,.95));box-shadow:0 0 0 2px #e8c35a,0 0 60px rgba(232,195,90,.5);
  animation:spop .4s cubic-bezier(.2,1.3,.3,1) both,sfade .5s ease-in 3.2s forwards;color:#fff3d6}
.s-giftfx .ic{font-size:54px;line-height:1;animation:sbounce 1s ease-in-out infinite alternate}
.s-giftfx .k{font-size:12px;font-weight:900;letter-spacing:.3em;color:#f6dc8a}
.s-giftfx .v{font-size:20px;font-weight:800}
@keyframes sfade{to{opacity:0;transform:translateY(-10px)}}
@keyframes sbounce{to{transform:translateY(-8px) rotate(-6deg)}}

/* ---------- radyo ---------- */
.s-radio{display:grid;gap:10px}
.s-radio .now{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:linear-gradient(135deg,rgba(60,196,99,.14),rgba(232,195,90,.1))}
.s-radio .eq{display:flex;align-items:flex-end;gap:3px;height:22px;width:26px}
.s-radio .eq i{flex:1;background:var(--s-ok);border-radius:2px;height:30%}
.s-radio.playing .eq i{animation:seq .9s ease-in-out infinite alternate}
.s-radio.playing .eq i:nth-child(2){animation-delay:-.3s}.s-radio.playing .eq i:nth-child(3){animation-delay:-.6s}.s-radio.playing .eq i:nth-child(4){animation-delay:-.15s}
@keyframes seq{0%{height:20%}100%{height:100%}}
.s-radio .st{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.s-radio .st button{display:grid;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:0;background:rgba(255,255,255,.05);color:inherit;cursor:pointer;font-weight:700;font-size:14px;font-family:inherit}
.s-radio .st button small{font-weight:500;font-size:11.5px;color:var(--s-muted)}
.s-radio .st button[aria-pressed='true']{background:rgba(60,196,99,.2);box-shadow:inset 0 0 0 1px rgba(60,196,99,.6)}
.s-radio input[type=range]{width:100%;accent-color:var(--s-gold)}
@media (prefers-reduced-motion:reduce){.sface.fr-royal,.sface.fr-diamond,.nc-rainbow,.nc-royalgold,.svip.t4{animation:none}}

/* Telefon dik tutulup masa yan çevrildiğinde (html.rot) pencereler de yan döner */
html.rot .s-ov{inset:auto;left:var(--vw,100vw);top:0;width:var(--vh,100vh);height:var(--vw,100vw);transform-origin:0 0;transform:rotate(90deg)}
html.rot #s-toasts{left:calc(var(--vw,100vw) - 40px);top:50%;transform:translate(-50%,-50%) rotate(90deg)}
html.rot .s-giftfx .box{rotate:90deg}
html.rot .s-sheet{max-height:calc(var(--vw,100vw) - 24px)}
html.rot .s-chat{height:calc(var(--vw,100vw) - 70px)}
@media (max-height:500px){.s-sheet{max-height:calc(100vh - 24px);padding:16px 18px}.s-chat{height:calc(100vh - 70px)}.s-prof .sface{--sz:72px!important}}
html.rotpage .s-sheet{max-height:calc(var(--ph) - 24px)}
html.rotpage .s-chat{height:calc(var(--ph) - 70px)}

/* ---------- mağaza ---------- */
.shop-note{font-size:12.5px;color:#cfe3ff;padding:9px 12px;border-radius:10px;background:rgba(90,150,230,.12);box-shadow:inset 0 0 0 1px rgba(90,150,230,.3);margin:6px 0 4px}
.shop-tabs button{font-size:14px;height:40px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pack-card{position:relative;display:grid;justify-items:center;gap:6px;padding:16px 10px 12px;border-radius:16px;text-align:center;
  background:radial-gradient(120px 80px at 50% 20%,rgba(232,195,90,.18),transparent 70%),linear-gradient(180deg,#1c2330,#121720);box-shadow:inset 0 0 0 1px var(--s-line)}
.pack-card.hl{box-shadow:inset 0 0 0 2px var(--s-gold),0 0 24px -6px rgba(232,195,90,.6)}
.pack-card .s-btn{width:100%;margin-top:4px}
.pk-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:999px;white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:.08em;
  background:linear-gradient(135deg,#ff6b6b,#e2534a);color:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.pk-badge.cur{background:linear-gradient(135deg,#46d474,#239447)}
.pk-amt{font-size:26px;font-weight:900;color:var(--s-gold2);letter-spacing:-.01em}
.pk-sub{font-size:12px;color:var(--s-muted);min-height:16px}
.pk-sub s{opacity:.6}.pk-sub b{color:#7fe0b2}
.coins{display:flex;align-items:flex-end;justify-content:center;height:44px}
.coins i{width:30px;height:30px;margin:0 -7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#e8c35a 45%,#a7791c);box-shadow:inset 0 0 0 2px rgba(120,80,10,.45),0 3px 6px rgba(0,0,0,.5)}
.coins i:nth-child(2){transform:translateY(-8px)}.coins i:nth-child(3){transform:translateY(-14px)}.coins i:nth-child(4){transform:translateY(-8px)}
.vip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.vip-card{position:relative;display:grid;gap:10px;align-content:start;padding:16px;border-radius:18px;background:linear-gradient(180deg,#1c2330,#11161e);box-shadow:inset 0 0 0 1px var(--s-line)}
.vip-card.t2{box-shadow:inset 0 0 0 1px rgba(232,195,90,.35)}
.vip-card.t3{box-shadow:inset 0 0 0 1px rgba(31,174,106,.45);background:radial-gradient(200px 120px at 0% 0%,rgba(31,174,106,.14),transparent 70%),linear-gradient(180deg,#1c2330,#11161e)}
.vip-card.t4{box-shadow:inset 0 0 0 2px rgba(197,155,255,.55),0 0 30px -8px rgba(197,155,255,.5);background:radial-gradient(240px 140px at 100% 0%,rgba(197,155,255,.18),transparent 70%),radial-gradient(200px 120px at 0% 100%,rgba(232,195,90,.14),transparent 70%),linear-gradient(180deg,#1f1a30,#11101a)}
.vip-card.cur{box-shadow:inset 0 0 0 2px #46d474}
.vip-card.dis{opacity:.5}
.vc-head{display:flex;align-items:center;gap:12px;padding-top:4px}
.vc-name{font-size:18px;font-weight:900;margin-top:4px}
.vc-perks{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13px;line-height:1.35}
.vc-perks li{position:relative;padding-left:20px;color:var(--s-text)}
.vc-perks li::before{content:'✓';position:absolute;left:0;top:0;color:#7fe0b2;font-weight:900}
.vc-btns{display:grid;gap:6px;margin-top:auto}
.vc-btns .s-btn{height:auto;min-height:40px;padding:6px 12px;display:grid;gap:1px}
.vc-btns .save{font-size:11px;font-weight:800;color:#0b3d1f;background:#7fe0b2;border-radius:6px;padding:1px 6px;justify-self:center}