:root{
  --text:#f5f7ff;
  --muted:#9aa7cb;
  --blue:#24caff;
  --blue2:#4578ff;
  --pink:#ff2bb8;
  --pink2:#d62cff;
  --panel:#071127;
  --panel2:#091021;
  --line:rgba(77,126,255,.28);
  --glow:0 0 24px rgba(37,202,255,.14),0 0 36px rgba(255,43,184,.10);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Fredoka',sans-serif}
html,body{min-height:100%}
body.login-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 15%, rgba(0,131,255,.18), transparent 22%),
    radial-gradient(circle at 83% 14%, rgba(122,46,255,.22), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(255,35,175,.12), transparent 20%),
    linear-gradient(120deg,#02040c 0%,#071026 33%,#0b0f2d 68%,#120f33 100%);
  color:var(--text);
  overflow-x:hidden;
  padding:14px;
  position:relative;
}

.background-anim,.background-noise,#stars-container{position:fixed;inset:0;pointer-events:none}
.background-anim{z-index:-3}
.background-noise{z-index:-2;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at center,black 48%,transparent 95%);-webkit-mask-image:radial-gradient(circle at center,black 48%,transparent 95%)}
#stars-container{z-index:-1}
.star{position:absolute;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 12px rgba(255,255,255,.7);animation:drift linear infinite}
@keyframes drift{from{transform:translateY(0) translateX(0);opacity:0}35%{opacity:.9}to{transform:translateY(-120px) translateX(60px);opacity:0}}

.main-container{width:min(1060px, calc(100vw - 20px));margin:0 auto;position:relative;z-index:2}
.cyber-layout{
  min-height:712px;
  padding:22px 22px 16px;
  border-radius:28px;
  background:linear-gradient(90deg, rgba(4,13,34,.97) 0%, rgba(8,13,36,.98) 64%, rgba(20,13,49,.98) 100%);
  border:1px solid rgba(112,126,255,.16);
  position:relative;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.cyber-layout::before,.cyber-layout::after{content:"";position:absolute;border-radius:999px;filter:blur(65px);opacity:.32;pointer-events:none}
.cyber-layout::before{width:250px;height:250px;left:-70px;top:80px;background:rgba(0,162,255,.22)}
.cyber-layout::after{width:250px;height:250px;right:-80px;bottom:75px;background:rgba(255,32,179,.18)}

.cyber-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;position:relative;z-index:2}
.cyber-brand{display:flex;align-items:center;gap:16px;min-width:310px}
.cyber-brand-icon{width:62px;height:62px;display:grid;place-items:center;font-size:34px;border-radius:18px;background:linear-gradient(145deg, rgba(55,87,255,.28), rgba(255,43,184,.18));border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cyber-brand-text h1{font-size:34px;line-height:.95;letter-spacing:-.03em;font-weight:700}
.cyber-brand-text span{display:flex;align-items:center;gap:14px;margin-top:4px;font-size:13px;letter-spacing:.34em;color:#cdd7f6;text-transform:none}
.cyber-brand-text span::after{content:"";width:72px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--pink),rgba(255,43,184,0))}

.support-bar{
  width:484px;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
  background:linear-gradient(180deg, rgba(7,16,42,.96), rgba(4,10,28,.97));
  border:1px solid rgba(70,105,255,.28);border-radius:18px;
  clip-path:polygon(4% 0,100% 0,100% 71%,97% 100%,0 100%,0 28%);
  box-shadow:var(--glow)
}
.support-item{min-height:60px;display:grid;place-content:center;justify-items:center;gap:1px;color:#fff;text-decoration:none;position:relative}
.support-item:not(:last-child)::after{content:"";position:absolute;right:0;top:12px;bottom:12px;width:1px;background:rgba(104,119,255,.24)}
.support-item i{font-size:18px;color:var(--blue);text-shadow:0 0 14px rgba(36,202,255,.4)}
.support-item:last-child i{color:#bc58ff;text-shadow:0 0 14px rgba(188,88,255,.4)}
.support-item strong{font-size:12px;line-height:1;font-weight:700}
.support-item small{font-size:9px;line-height:1;color:#c0c9e5}

.cyber-main-grid{display:grid;grid-template-columns:302px 256px 432px;gap:0;min-height:584px;position:relative;z-index:2;margin-top:10px}

.cyber-copy-panel{padding-top:28px;padding-right:18px;display:flex;flex-direction:column}
.eyebrow-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid rgba(78,134,255,.26);border-radius:999px;background:rgba(9,13,38,.86);font-size:12px;color:#eef2ff;width:max-content}
.eyebrow-pill span{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px rgba(255,43,184,.12)}
.cyber-copy-panel h2{margin-top:18px;font-size:58px;line-height:.92;letter-spacing:-.04em;font-weight:700}
.cyber-copy-panel h2 em{font-style:normal;background:linear-gradient(180deg,#ffffff 10%, #da6cff 65%, #ff59d5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cyber-copy-panel p{margin-top:16px;max-width:270px;color:var(--muted);font-size:15px;line-height:1.55}

.stat-card{margin-top:22px;padding:16px 18px;min-height:92px;border-radius:18px;background:linear-gradient(90deg, rgba(33,6,66,.82), rgba(18,9,61,.92));border:1px solid rgba(255,47,183,.20);display:flex;align-items:center;gap:14px;box-shadow:var(--glow)}
.stat-icon{width:54px;height:54px;border-radius:16px;background:linear-gradient(180deg, rgba(255,43,184,.22), rgba(255,43,184,.06));display:grid;place-items:center;font-size:26px;color:#ff45c3}
.stat-copy strong{display:block;font-size:27px;line-height:1;color:#ff63d5}
.stat-copy span{display:block;margin-top:5px;font-size:11px;letter-spacing:.14em;color:#d2dcf4}
.stat-wave{margin-left:auto;font-size:27px;color:#54bfff}

.mini-feature-row{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(62,122,255,.18);border-radius:12px;background:rgba(4,10,25,.78);overflow:hidden}
.mini-feature-row span{padding:9px 10px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:1px;align-items:center;border-right:1px solid rgba(62,122,255,.12)}
.mini-feature-row span:last-child{border-right:0}
.mini-feature-row i{grid-row:1/3;font-size:16px;color:var(--blue)}
.mini-feature-row b{font-size:10px;color:#eef2ff}
.mini-feature-row small{font-size:9px;color:#8ea0cb}

.follow-box{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(59,116,255,.16);background:rgba(5,11,28,.62)}
.follow-box span{text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#d6def3}
.follow-icons{display:flex;gap:8px}
.follow-icons a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;background:rgba(11,17,43,.92);border:1px solid rgba(255,43,184,.18)}

.hero-cta-box{margin-top:12px;padding:16px 18px;border-radius:18px;max-width:280px;background:linear-gradient(160deg, rgba(11,14,38,.90), rgba(22,9,46,.72));border:1px solid rgba(255,43,184,.18);box-shadow:var(--glow)}
.hero-cta-box b{display:block;font-size:13px;letter-spacing:.08em;color:#fff}
.hero-cta-box b span{display:block;margin-top:2px;font-size:27px;line-height:.95;background:linear-gradient(180deg,#ffffff 10%, #ea9aff 70%, #ff60d5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta-box small{display:block;margin-top:8px;font-size:12px;color:#a9b6d8;line-height:1.5}

.hero-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-top:18px}
.hero-visual-glow{position:absolute;bottom:82px;left:50%;transform:translateX(-48%);width:210px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(124,47,255,.28) 0%, rgba(11,177,255,.16) 48%, transparent 72%);filter:blur(22px)}
.hero-visual img{position:relative;z-index:1;width:100%;max-width:268px;max-height:498px;object-fit:contain;filter:drop-shadow(0 0 30px rgba(30,177,255,.18)) drop-shadow(0 0 34px rgba(255,43,184,.10));mask-image:linear-gradient(180deg,#000 0%, #000 95%, transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%, #000 95%, transparent 100%)}

.cyber-form-card{display:flex;align-items:flex-start;justify-content:flex-end;padding-top:10px}
.form-shell{width:100%;min-height:480px;padding:28px 28px 24px;background:linear-gradient(180deg, rgba(4,10,27,.96), rgba(4,10,26,.98));border:1px solid rgba(61,131,255,.24);border-radius:26px;position:relative;box-shadow:0 22px 50px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.03), var(--glow);clip-path:polygon(6% 0, 97% 0, 100% 7%, 100% 93%, 96% 100%, 0 100%, 0 6%)}
.form-shell::before{content:"";position:absolute;inset:11px;border-radius:20px;border:1px solid rgba(86,143,255,.10);pointer-events:none}

.alert-box{margin-bottom:12px;padding:10px 12px;border-radius:12px;display:flex;gap:8px;align-items:center;font-size:13px}
.alert-error{background:rgba(219,39,119,.14);border:1px solid rgba(219,39,119,.24);color:#ffd0e6}

.tab-buttons.two-tabs{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid rgba(74,127,255,.16);border-radius:14px;overflow:hidden;margin-bottom:18px}
.tab-btn{height:60px;border:0;background:transparent;color:#eef2ff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.tab-btn + .tab-btn{border-left:1px solid rgba(74,127,255,.16)}
.tab-btn i{font-size:14px;color:#d3ddff}
.tab-btn.active{background:linear-gradient(90deg, rgba(31,190,255,.96), rgba(118,70,255,.92));box-shadow:inset 0 0 20px rgba(255,255,255,.06)}
.tab-btn.active i{color:#fff}

.form-group--spaced{margin-bottom:14px}
.input-wrapper{position:relative}
.cyber-input input{width:100%;height:58px;border-radius:14px;padding:0 18px 0 52px;border:1px solid rgba(45,181,255,.68);background:linear-gradient(180deg, rgba(1,8,21,.98), rgba(4,9,24,.98));color:#fff;font-size:18px;outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 0 18px rgba(28,149,255,.08)}
.cyber-input input::placeholder{color:#7e8bab}
.cyber-input input:focus{border-color:#59d4ff;box-shadow:0 0 0 3px rgba(37,202,255,.10), 0 0 24px rgba(37,202,255,.14)}
.input-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--blue)}

.remember-row{display:flex;align-items:center;gap:8px;min-height:34px;margin:4px 0 16px;color:#97a4ca;cursor:pointer;flex-wrap:wrap}
.remember-row input{position:absolute;opacity:0;pointer-events:none}
.remember-check{width:18px;height:18px;border-radius:999px;border:1px solid rgba(82,160,255,.48);display:grid;place-items:center;background:rgba(5,13,30,.9);color:transparent;transition:.2s;font-size:11px}
.remember-copy b{font-size:11px;font-weight:600;color:#dce4fb;text-transform:none}
.forgot-link{margin-left:auto;color:#a7b2d6;text-decoration:none;font-size:11px}
.remember-row input:checked + .remember-check{background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff;border-color:transparent}

.submit-btn{width:100%;height:66px;border:0;border-radius:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(90deg, rgba(120,51,255,.96), rgba(255,42,181,.92));box-shadow:0 14px 30px rgba(80,112,255,.24), 0 0 32px rgba(255,43,184,.16);margin-bottom:18px}
.submit-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.secondary-action{min-height:56px;border:1px solid rgba(90,126,255,.22);border-radius:16px;background:rgba(8,13,31,.92);display:flex;align-items:center;justify-content:center;gap:10px;color:#eef2ff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.secondary-action:hover{border-color:rgba(37,202,255,.38);transform:translateY(-1px)}
.secondary-action i{font-size:16px;color:#dce4fb}

.legacy-hidden-controls{display:none}
.selection-area,.gender-option,.avatar-option,.spky-pwa-inline-install,.footer-links,.footer-note,.login-feature-strip,.users-card,.register-mini-kicker,.section-kicker,.badge,.users-subtitle{display:none}

.cyber-footer{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid rgba(60,116,255,.16);border-radius:14px;background:rgba(4,10,25,.88);overflow:hidden;position:relative;z-index:2}
.cyber-footer span{min-height:56px;padding:8px 14px;display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:1px;align-content:center;border-right:1px solid rgba(60,116,255,.12)}
.cyber-footer span:last-child{border-right:0}
.cyber-footer i{grid-row:1/3;font-size:18px;color:#6fd2ff;align-self:center}
.cyber-footer b{font-size:18px;color:#f5f7ff}
.cyber-footer small{font-size:10px;color:#9eabd0}

.modal-overlay,.register-mini-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,4,10,.74);backdrop-filter:blur(8px);z-index:50;padding:20px}
.modal-box,.register-mini-box{width:min(760px, 96vw);background:linear-gradient(180deg, rgba(8,14,37,.96), rgba(3,8,22,.96));border:1px solid rgba(72,131,255,.22);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.46), var(--glow);padding:24px;position:relative}
.close-btn,.register-mini-close{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(72,131,255,.22);background:rgba(8,14,37,.96);color:#fff;font-size:26px;cursor:pointer}
.modal-header h3,.register-mini-head h3{font-size:24px;margin-bottom:8px}
.modal-header p,.register-mini-head p{color:var(--muted);font-size:14px;line-height:1.5}
.avatar-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;margin-top:22px}
.avatar-grid li,.avatar-grid .avatar-item{min-height:120px;border-radius:18px;background:rgba(5,11,29,.8);border:1px solid rgba(72,131,255,.18)}
#registerMiniFrame{width:100%;height:70vh;border:0;border-radius:16px;margin-top:18px;background:#fff}

@media (max-width: 980px){
  .main-container{width:min(100%, calc(100vw - 14px))}
  .cyber-layout{min-height:0;padding:18px}
  .cyber-topbar{flex-direction:column}
  .support-bar{width:100%}
  .cyber-main-grid{grid-template-columns:1fr;min-height:0;gap:16px}
  .cyber-copy-panel{padding-top:14px;padding-right:0}
  .cyber-copy-panel p,.hero-cta-box,.stat-card{max-width:none}
  .hero-visual{justify-content:center;padding-top:0}
  .hero-visual img{max-height:420px}
  .cyber-form-card{padding-top:0}
}

@media (max-width: 700px){
  body.login-page{padding:10px}
  .cyber-layout{padding:14px;border-radius:22px}
  .cyber-brand{min-width:0;gap:12px}
  .cyber-brand-icon{width:52px;height:52px;font-size:28px}
  .cyber-brand-text h1{font-size:28px}
  .support-bar{grid-template-columns:repeat(2,1fr);width:100%}
  .cyber-copy-panel h2{font-size:42px}
  .mini-feature-row,.cyber-footer,.secondary-actions{grid-template-columns:1fr 1fr}
  .form-shell{padding:20px 16px;clip-path:none;border-radius:22px;min-height:0}
  .tab-btn{font-size:15px;height:54px}
  .cyber-input input{height:54px;font-size:16px}
  .submit-btn{height:58px;font-size:16px}
  .follow-box,.hero-cta-box{max-width:none}
}

/* 1060 x 740 PC görünümü: taşmadan tek ekrana sığar */
@media (min-width: 981px){
  body.login-page{padding:8px 10px;overflow:hidden}
  .main-container{width:min(1060px,calc(100vw - 18px));height:min(720px,calc(100vh - 16px))}
  .cyber-layout{height:100%;min-height:0;padding:14px 18px 12px;border-radius:22px;display:flex;flex-direction:column}
  .cyber-topbar{min-height:54px;margin:0}
  .cyber-brand{min-width:285px;gap:12px}
  .cyber-brand-icon{width:50px;height:50px;font-size:27px;border-radius:15px}
  .cyber-brand-text h1{font-size:29px}
  .cyber-brand-text span{font-size:11px;letter-spacing:.28em}
  .support-bar{width:465px}
  .support-item{min-height:52px}
  .support-item i{font-size:16px}
  .support-item strong{font-size:10px}
  .support-item small{font-size:8px}

  .cyber-main-grid{grid-template-columns:285px 225px 1fr;min-height:0;height:455px;margin-top:6px}
  .cyber-copy-panel{padding:14px 12px 0 0}
  .eyebrow-pill{padding:6px 11px;font-size:10px}
  .cyber-copy-panel h2{margin-top:12px;font-size:43px;line-height:.91}
  .cyber-copy-panel p{margin-top:10px;font-size:12px;line-height:1.45;max-width:260px}
  .stat-card{margin-top:12px;min-height:70px;padding:10px 12px;border-radius:14px}
  .stat-icon{width:42px;height:42px;font-size:21px;border-radius:12px}
  .stat-copy strong{font-size:24px}
  .stat-copy span{font-size:9px}
  .stat-wave{font-size:22px}
  .mini-feature-row{margin-top:9px}
  .mini-feature-row span{padding:7px 6px;column-gap:5px}
  .mini-feature-row i{font-size:13px}
  .mini-feature-row b{font-size:8px}
  .mini-feature-row small{font-size:7px}
  .follow-box{margin-top:9px;padding:8px 10px}
  .follow-icons a{width:27px;height:27px;font-size:11px}
  .hero-cta-box{margin-top:9px;padding:10px 12px}
  .hero-cta-box b{font-size:10px}
  .hero-cta-box b span{font-size:20px}
  .hero-cta-box small{font-size:9px;margin-top:4px}

  .hero-visual{height:455px;padding:0;align-items:flex-end}
  .hero-visual img{width:215px;max-width:215px;max-height:430px}
  .hero-visual-glow{width:180px;height:220px;bottom:60px}

  .cyber-form-card{padding-top:2px}
  .form-shell{min-height:0;height:445px;padding:19px 20px 16px;border-radius:22px}
  .form-shell::before{inset:8px;border-radius:17px}
  .tab-buttons.two-tabs{margin-bottom:12px;border-radius:12px}
  .tab-btn{height:48px;font-size:14px}
  .form-group--spaced{margin-bottom:10px}
  .cyber-input input{height:48px;border-radius:12px;font-size:15px;padding-left:45px}
  .input-icon{left:15px;font-size:15px}
  .remember-row{margin:1px 0 10px;min-height:25px}
  .remember-check{width:16px;height:16px}
  .remember-copy b,.forgot-link{font-size:9px}
  .submit-btn{height:53px;border-radius:14px;font-size:15px;margin-bottom:11px}
  .secondary-actions{gap:9px}
  .secondary-action{min-height:44px;border-radius:12px;font-size:12px}

  .online-showcase{height:94px;margin-top:7px;padding:8px 10px;border:1px solid rgba(71,132,255,.18);border-radius:15px;background:rgba(4,10,25,.84);display:grid;grid-template-columns:155px 1fr;align-items:center;gap:8px;overflow:hidden}
  .online-showcase-head{height:100%;padding:5px 10px;display:grid;grid-template-columns:auto 1fr auto;align-content:center;column-gap:7px;row-gap:1px;border-right:1px solid rgba(71,132,255,.13)}
  .online-dot{width:8px;height:8px;border-radius:50%;background:#35f28d;box-shadow:0 0 0 4px rgba(53,242,141,.10),0 0 12px rgba(53,242,141,.5)}
  .online-showcase-head strong{font-size:12px}
  .online-showcase-head small{grid-column:2/4;font-size:8px;color:#8ea0c7}
  .online-showcase-head b{font-size:14px;color:#57d5ff}
  .online-showcase-scroll{overflow:hidden}
  .online-showcase-scroll ul{list-style:none;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px 2px}
  .online-showcase-scroll ul::-webkit-scrollbar{display:none}
  .profile-card{position:relative;flex:0 0 66px;height:72px;padding:4px 4px 3px;border-radius:12px;background:linear-gradient(180deg,rgba(12,20,46,.96),rgba(5,10,25,.96));border:1px solid rgba(70,150,255,.20);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .profile-card__shine,.profile-card__orb,.profile-chip,.profile-avatar-halo,.profile-avatar-spark,.profile-avatar-ring{display:none}
  .profile-avatar-wrap{width:42px;height:42px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--blue),var(--pink));box-shadow:0 0 12px rgba(37,202,255,.18)}
  .profile-avatar-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;background:#11182f}
  .u-name{display:block;width:100%;margin-top:3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;font-weight:700;color:#f4f7ff}
  .u-badge{display:none}
  .gallery-empty{font-size:10px;color:#91a0c5;padding:10px}

  .cyber-footer{height:48px;margin-top:7px;border-radius:12px}
  .cyber-footer span{min-height:46px;padding:5px 10px}
  .cyber-footer i{font-size:15px}
  .cyber-footer b{font-size:14px}
  .cyber-footer small{font-size:8px}
}

/* v6 iyileştirmeleri */
.cyber-brand-text span{
  letter-spacing:.04em;
  font-size:12px;
  white-space:nowrap;
  color:#b9c6e7;
}
.cyber-brand-text span::after{width:52px}

/* Kız görseli üzerinde gerçek hareketli yıldızlar */
.hero-stars{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.hero-star{position:absolute;display:block;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff,0 0 14px rgba(85,190,255,.9),0 0 22px rgba(255,62,196,.65);animation:heroTwinkle linear infinite}
@keyframes heroTwinkle{
  0%,100%{opacity:.15;transform:translate3d(0,10px,0) scale(.55)}
  35%{opacity:1;transform:translate3d(4px,-5px,0) scale(1.25)}
  70%{opacity:.4;transform:translate3d(-4px,-16px,0) scale(.8)}
}
.shooting-star{position:absolute;left:-35%;width:90px;height:1px;border-radius:999px;background:linear-gradient(90deg,transparent,#8cecff,#fff,transparent);filter:drop-shadow(0 0 6px #57d5ff);transform:rotate(-18deg);opacity:0;animation:shootStar 9.5s linear infinite}
@keyframes shootStar{0%,62%{opacity:0;transform:translateX(0) translateY(0) rotate(-18deg)}64%{opacity:1}78%{opacity:0;transform:translateX(440px) translateY(95px) rotate(-18deg)}100%{opacity:0}}
.hero-visual img{z-index:2}

/* Kullanıcı mesajları okunaklı slider */
.message-showcase{
  margin-top:12px;
  height:86px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(83,107,255,.22);
  background:linear-gradient(145deg,rgba(13,14,48,.96),rgba(25,10,52,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 20px rgba(115,56,255,.08);
  overflow:hidden;
}
.message-showcase-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.message-showcase-head>span{font-size:9px;font-weight:700;letter-spacing:.03em;color:#dce5ff}
.message-showcase-head i{color:#ff55ca;margin-right:5px}
.message-dots{display:flex;align-items:center;gap:4px;min-height:8px}
.message-dots button{appearance:none;border:0;width:6px;height:6px;padding:0;border-radius:50%;background:#59617e;cursor:pointer;transition:.2s}
.message-dots button.active{width:16px;border-radius:999px;background:linear-gradient(90deg,#35d7ff,#ff3cc6);box-shadow:0 0 8px rgba(61,207,255,.45)}
.message-stage{opacity:.2;transform:translateY(4px);transition:.25s ease}
.message-stage.is-visible{opacity:1;transform:translateY(0)}
.message-card{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;min-width:0}
.message-card>img{width:38px;height:38px;object-fit:cover;border-radius:50%;border:2px solid transparent;background:linear-gradient(#10152d,#10152d) padding-box,linear-gradient(135deg,#33d8ff,#ff38c5) border-box;box-shadow:0 0 12px rgba(53,207,255,.18)}
.message-copy{min-width:0}
.message-copy strong{display:block;font-size:11px;line-height:1.1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message-copy p{margin-top:4px;font-size:9px;line-height:1.35;color:#cdd6f0;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.message-empty{font-size:10px;color:#98a7cd;padding:9px 0}

/* Alt profil kartları otomatik geçiş */
.online-showcase-scroll ul{transition:transform .35s ease}
.profile-card{transition:opacity .35s ease,transform .35s ease}
.profile-card.profile-leaving{opacity:0;transform:translateX(-18px) scale(.92)}

/* Avatar penceresinde kartların birbirine girmesini engeller */
.modal-box{
  width:min(560px,92vw)!important;
  max-height:min(520px,82vh)!important;
  padding:20px 20px 16px!important;
  overflow:hidden!important;
}
.modal-header{padding-right:48px}
.modal-header h3{font-size:20px!important}
.modal-header p{font-size:11px!important}
.avatar-grid{
  width:100%!important;
  max-height:390px!important;
  margin-top:14px!important;
  padding:3px 8px 10px 3px!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-auto-rows:70px!important;
  gap:9px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-items:stretch!important;
}
.avatar-grid li,
.avatar-grid .avatar-item{
  width:100%!important;
  min-width:0!important;
  height:70px!important;
  min-height:70px!important;
  margin:0!important;
  padding:3px!important;
  display:block!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#091127!important;
  border:1px solid rgba(72,145,255,.22)!important;
  position:relative!important;
}
.avatar-grid li img,
.avatar-grid .avatar-item img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  border-radius:9px!important;
  cursor:pointer!important;
  transform:none!important;
}
.avatar-grid li:hover{border-color:#42d6ff!important;box-shadow:0 0 14px rgba(66,214,255,.2)}
.avatar-grid::-webkit-scrollbar{width:7px}
.avatar-grid::-webkit-scrollbar-track{background:#080e22;border-radius:999px}
.avatar-grid::-webkit-scrollbar-thumb{background:linear-gradient(#39cfff,#8d45ff);border-radius:999px}

@media (min-width:981px){
  .form-shell{height:445px;padding-bottom:12px}
  .message-showcase{height:72px;margin-top:8px;padding:7px 10px}
  .message-showcase-head{margin-bottom:4px}
  .message-card{grid-template-columns:32px 1fr;gap:8px}
  .message-card>img{width:32px;height:32px}
  .message-copy strong{font-size:10px}
  .message-copy p{font-size:8px;line-height:1.25}
  .secondary-action{min-height:40px}
  .submit-btn{height:49px;margin-bottom:9px}
  .tab-btn{height:44px}
  .cyber-input input{height:44px}
  .remember-row{margin-bottom:7px}
  .cyber-copy-panel{padding-bottom:0}
  .follow-box{margin-top:auto}
}

@media (max-width:700px){
  .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:64px!important;max-height:360px!important}
  .avatar-grid li,.avatar-grid .avatar-item{height:64px!important;min-height:64px!important}
  .message-showcase{height:auto;min-height:88px}
}

/* v7: daha okunaklı kullanıcı mesajları */
.message-showcase{
  min-height:92px;
  padding:11px 13px;
  background:linear-gradient(135deg,rgba(11,20,52,.96),rgba(31,15,62,.92));
  border:1px solid rgba(103,166,255,.26);
  box-shadow:0 0 22px rgba(46,173,255,.12),inset 0 1px 0 rgba(255,255,255,.04);
}
.message-showcase-head{margin-bottom:8px}
.message-showcase-head>span{font-size:13px;letter-spacing:.055em}
.message-dots button{width:7px;height:7px}
.message-dots button.active{width:19px}
.message-card{grid-template-columns:46px minmax(0,1fr);gap:12px}
.message-card>img{width:46px;height:46px}
.message-copy strong{font-size:15px;line-height:1.15}
.message-copy p{
  margin-top:5px;
  font-size:14px;
  line-height:1.42;
  color:#eef3ff;
  -webkit-line-clamp:2;
  text-shadow:0 1px 7px rgba(0,0,0,.38);
}
.message-empty{font-size:13px}

/* Destek butonları ve popup */
button.support-item{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:0;
  font:inherit;
  cursor:pointer;
}
.support-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,7,22,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.support-modal{
  width:min(430px,94vw);
  padding:28px;
  border-radius:26px;
  position:relative;
  color:#f7f9ff;
  background:linear-gradient(145deg,rgba(23,48,113,.98),rgba(68,31,114,.98));
  border:1px solid rgba(149,213,255,.34);
  box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 38px rgba(75,192,255,.22),0 0 48px rgba(255,72,203,.16);
  animation:supportModalIn .22s ease-out;
}
.support-modal-close{
  position:absolute;
  top:13px;
  right:13px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(5,12,36,.42);
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
.support-modal-icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:20px;
  font-size:29px;
  color:#fff;
  background:linear-gradient(135deg,#24caff,#8c4dff,#ff42bd);
  box-shadow:0 12px 28px rgba(37,175,255,.28);
}
.support-modal-kicker{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9fe8ff;
}
.support-modal-copy h3{font-size:27px;line-height:1.1;margin-bottom:10px}
.support-modal-copy p{font-size:15px;line-height:1.58;color:#dbe6ff}
.support-modal-actions{display:grid;grid-template-columns:1fr auto;gap:11px;margin-top:23px}
.support-modal-primary,.support-modal-secondary{
  min-height:50px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 17px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.support-modal-primary{border:0;color:#fff;background:linear-gradient(90deg,#22bfff,#7a55ff,#f33eb8);box-shadow:0 12px 26px rgba(46,150,255,.23)}
.support-modal-secondary{border:1px solid rgba(255,255,255,.17);color:#eaf0ff;background:rgba(6,13,39,.38)}
body.support-modal-open{overflow:hidden}
@keyframes supportModalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

@media (min-width:981px){
  .message-showcase{height:88px;min-height:88px;margin-top:7px;padding:9px 12px}
  .message-showcase-head{margin-bottom:5px}
  .message-showcase-head>span{font-size:12px}
  .message-card{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .message-card>img{width:40px;height:40px}
  .message-copy strong{font-size:14px}
  .message-copy p{font-size:13px;line-height:1.38;margin-top:3px}
}

@media (max-width:700px){
  .message-copy strong{font-size:13px}
  .message-copy p{font-size:12px}
  .support-modal{padding:24px 20px}
  .support-modal-actions{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  body.login-page,.background-anim{animation:none}
}

/* v9: destek menüsü koyu neon butonlar + mobilde giriş alanı en üstte */
.support-bar{
  background:linear-gradient(180deg,rgba(5,15,42,.98),rgba(3,8,25,.98));
  border-color:rgba(73,142,255,.30);
  box-shadow:0 12px 34px rgba(0,0,0,.24),0 0 24px rgba(47,174,255,.10),inset 0 1px 0 rgba(255,255,255,.035);
}
.support-item,
button.support-item{
  width:100%;
  min-width:0;
  margin:0;
  padding:0 7px;
  color:#f4f8ff;
  background:linear-gradient(180deg,rgba(11,23,55,.96),rgba(5,12,34,.96));
  border:0;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
  outline:0;
  cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.support-item:nth-child(1){background:linear-gradient(180deg,rgba(8,38,73,.96),rgba(5,17,43,.96))}
.support-item:nth-child(2){background:linear-gradient(180deg,rgba(12,31,72,.96),rgba(6,15,42,.96))}
.support-item:nth-child(3){background:linear-gradient(180deg,rgba(24,23,70,.96),rgba(11,12,43,.96))}
.support-item:nth-child(4){background:linear-gradient(180deg,rgba(35,17,70,.96),rgba(17,10,42,.96))}
.support-item:hover,
button.support-item:hover{
  background:linear-gradient(180deg,rgba(23,73,126,.98),rgba(16,25,66,.98));
  box-shadow:inset 0 -2px 0 rgba(55,213,255,.72),inset 0 0 28px rgba(75,162,255,.11);
  transform:translateY(-1px);
}
.support-item:focus-visible,
button.support-item:focus-visible{
  box-shadow:inset 0 0 0 2px #47d8ff,0 0 18px rgba(71,216,255,.28);
}
.support-item i{color:#39d8ff}
.support-item:nth-child(2) i{color:#55c8ff}
.support-item:nth-child(3) i{color:#5fe1ff}
.support-item:nth-child(4) i{color:#d05aff}
.support-item strong{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.42)}
.support-item small{color:#aebddd}

/* Kullanıcı mesajını biraz daha belirgin yap */
.message-copy strong{font-size:15px;font-weight:700}
.message-copy p{font-size:14px;line-height:1.42;color:#f1f5ff}

@media (max-width:980px){
  .cyber-main-grid{
    display:flex;
    flex-direction:column;
  }
  .cyber-form-card{
    order:1;
    width:100%;
    padding-top:0;
  }
  .cyber-copy-panel{order:2}
  .hero-visual{order:3}
  .form-shell{
    max-width:620px;
    margin:0 auto;
  }
}

@media (max-width:700px){
  .cyber-topbar{gap:12px}
  .support-bar{
    grid-template-columns:repeat(2,minmax(0,1fr));
    clip-path:none;
    border-radius:14px;
  }
  .support-item,
  button.support-item{min-height:54px}
  .support-item:nth-child(2)::after{display:none}
  .cyber-main-grid{margin-top:12px}
  .cyber-form-card{order:1}
  .cyber-copy-panel{order:2}
  .hero-visual{order:3}
  .form-shell{width:100%;max-width:none}
  .message-copy strong{font-size:14px}
  .message-copy p{font-size:13px;line-height:1.4}
}