/* ============================================================
   ALINA — sifirdan tema (v8)
   ui-ux-pro-max: Soft UI Evolution + beauty paleti, koyu sahne
   Palet: primary #EC4899 • soft #F9A8D4 • accent #8B5CF6 • ring #EC4899
   Yazi: Bricolage Grotesque (display) + Inter (arayuz)
   ============================================================ */
:root{
  --bg0:#0a0614;
  --bg1:#140927;
  --purple:#8b5cf6;
  --pink:#ec4899;
  --pink-soft:#f9a8d4;
  --gold:#ffd66b;
  --ink:#f8f3fc;
  --muted:#cbb9d4;
  --line:rgba(249,168,212,.16);
  --card:linear-gradient(155deg,rgba(54,25,76,.92),rgba(14,8,24,.97));
  --ring:rgba(236,72,153,.4);
  --shadow-soft:0 20px 55px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);
  --shadow-glow:0 10px 36px rgba(236,72,153,.45),inset 0 1px 0 rgba(255,255,255,.28);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --font-display:'Bricolage Grotesque','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-press:cubic-bezier(.34,1.56,.64,1);
}

/* ---- Zemin ve tipografi ---- */
body{background:radial-gradient(circle at 85% -5%,rgba(236,72,153,.1),transparent 45%),radial-gradient(circle at 5% 20%,rgba(139,92,246,.12),transparent 40%),var(--bg0);color:var(--ink)}
h1,.page-title h1,.login-card h2,.panel-title{font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.page-title h1{font-size:clamp(28px,3.4vw,42px);margin:0 0 6px}
.page-title p{color:var(--muted);margin:0 0 18px}
[onclick]{cursor:pointer}
::selection{background:rgba(236,72,153,.45);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0614}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:8px}

/* ---- Header ve navigasyon ---- */
.header{background:rgba(10,6,20,.82);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);border-bottom:1px solid var(--line)}
.brand-title{font-family:var(--font-display);letter-spacing:.02em}
.brand-sub{color:var(--pink-soft);opacity:.75}
.nav button{border:1px solid transparent;border-radius:13px;color:#cdbcd6;font-weight:800}
.nav button.active{background:linear-gradient(135deg,rgba(236,72,153,.4),rgba(139,92,246,.4));color:#fff;border-color:rgba(236,72,153,.4);box-shadow:0 6px 20px rgba(236,72,153,.25)}
.landing-nav a{color:#cdbcd6}
.landing-nav a:hover{color:#fff;background:rgba(236,72,153,.16)}

/* ---- Butonlar ---- */
.btn{border-radius:15px;font-weight:850;transition:transform .18s var(--ease-press),box-shadow .25s ease,filter .25s ease,background-color .25s ease}
.btn.primary{background:linear-gradient(135deg,#ec4899,#8b5cf6);border:0;color:#fff;box-shadow:var(--shadow-glow)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.primary:active{transform:scale(.94);box-shadow:0 0 0 7px rgba(236,72,153,.22)}
.btn.secondary{background:rgba(236,72,153,.09);border:1px solid rgba(236,72,153,.4);color:#fff}
.btn.secondary:active{transform:scale(.94)}
.small-btn{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:13px;color:#e9dcf1;font-weight:800;transition:transform .18s var(--ease-press),background-color .25s ease,border-color .25s ease}
.small-btn:active{transform:scale(.9);border-color:var(--pink)}
.admin-tab{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:13px;color:#e9dcf1;font-weight:800;transition:transform .18s var(--ease-press),background-color .25s ease}
.admin-tab.active{background:linear-gradient(135deg,#ec4899,#8b5cf6);border:0;color:#fff;box-shadow:var(--shadow-glow)}
.admin-tab:active{transform:scale(.94)}

/* ---- Hero sahne (tam ekran video) ---- */
.hero-stage{position:relative;min-height:88vh;display:flex;align-items:flex-end;border-radius:28px;overflow:hidden;border:1px solid rgba(249,168,212,.18);box-shadow:var(--shadow-soft);isolation:isolate;margin-top:18px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-bg::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(76deg,rgba(7,4,16,.95) 20%,rgba(7,4,16,.55) 52%,rgba(7,4,16,.12) 82%),linear-gradient(0deg,rgba(7,4,16,.92),transparent 46%)}
.hero-content{padding:clamp(24px,5vw,64px);max-width:760px;animation:alinaHeroIn .85s var(--ease-out) both}
@keyframes alinaHeroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-content h1{font-size:clamp(46px,7.2vw,96px);line-height:.98;font-weight:800;margin:0 0 16px;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.hero-content .lead{color:#e4d5ec;font-size:clamp(15px,1.8vw,18px);max-width:56ch;margin:0 0 24px}
.hero-live{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:26px;color:var(--muted);font-size:14px}
.hero-live b{color:#fff;font-family:var(--font-display);font-size:17px;margin-right:5px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 14px #4ade80;animation:alinaPulse 1.6s ease-in-out infinite}
@keyframes alinaPulse{50%{opacity:.35}}

/* ---- Kayar serit ---- */
.marquee{overflow:hidden;white-space:nowrap;margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:inline-flex;gap:26px;align-items:center;animation:alinaMarquee 26s linear infinite;font-family:var(--font-display);font-weight:700;letter-spacing:.06em;color:var(--pink-soft);font-size:15px}
.marquee-track i{color:var(--pink);font-style:normal}
@keyframes alinaMarquee{to{transform:translateX(-50%)}}

/* ---- Bolumler, kartlar, vitrin ---- */
.landing-section{margin-top:30px}
.panel,.stat,.feature,.step,.sultan-card,.login-card{background:var(--card);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.stat{padding:22px}
.stat-label{color:var(--pink-soft);opacity:.85;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.stat-value{font-family:var(--font-display);font-size:30px;margin-top:6px}
.feature{padding:24px}
.feature h3{font-family:var(--font-display);margin:12px 0 6px;font-size:18px}
.feature p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.step-num{background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 6px 18px rgba(236,72,153,.4)}
.vitrin-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px;margin-top:16px}
.vitrin{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);position:relative;background:#16091e}
.vitrin img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.vitrin:hover img{transform:scale(1.04)}
.vitrin figcaption{position:absolute;left:12px;bottom:12px;padding:8px 14px;border-radius:999px;background:rgba(7,4,16,.72);backdrop-filter:blur(8px);font-size:13px;font-weight:800;border:1px solid var(--line)}
.landing-footer{border-top:1px solid var(--line);color:var(--muted)}
.landing-footer a{color:var(--pink-soft)}

/* ---- Sultanlar Ligi ---- */
.sultan-hero{border:1px solid rgba(255,215,102,.3);background:linear-gradient(140deg,rgba(84,42,8,.5),rgba(14,8,24,.96) 65%),radial-gradient(circle at 85% 15%,rgba(255,214,107,.16),transparent 45%)}
.sultan-card{transition:transform .25s ease,border-color .25s ease}
.sultan-card:hover{transform:translateY(-3px);border-color:rgba(236,72,153,.45)}
.sultan-badge{border:1px solid rgba(255,214,107,.4)}

/* ---- Tablolar ---- */
table{border-collapse:separate;border-spacing:0;width:100%}
table thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-soft);border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
table tbody td{border-bottom:1px solid rgba(255,255,255,.06);padding:12px 10px}
table tbody tr:last-child td{border-bottom:0}
table tbody tr:active{background:rgba(236,72,153,.07)}

/* ---- Formlar ---- */
.field label{color:var(--pink-soft);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
input,select,textarea{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;border-radius:13px;transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--ring);outline:none}
input::placeholder,textarea::placeholder{color:#8d7a97}

/* ---- Giris kartlari ---- */
.login-card{border:1px solid rgba(236,72,153,.28);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 55px rgba(236,72,153,.13)}
.login-logo svg{width:54px;height:54px;color:var(--pink-soft)}
.form-error{border:1px solid rgba(255,77,109,.55);background:rgba(255,77,109,.1);color:#ffc2cd}

/* ---- Rozetler, bildirim, toast ---- */
.badge{background:linear-gradient(135deg,rgba(139,92,246,.5),rgba(236,72,153,.42));border:1px solid rgba(236,72,153,.42)}
.notif-btn svg{width:17px;height:17px;vertical-align:-3px;margin-right:5px}
.toast{background:linear-gradient(135deg,#2b123f,#12081f);border:1px solid rgba(236,72,153,.4);border-radius:14px}

/* ---- Mobil ---- */
.mobile-nav{background:rgba(10,6,20,.9);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.mobile-nav button{position:relative;color:#b9a8c4;min-height:58px}
.mobile-nav button.active{color:#fff;background:linear-gradient(135deg,rgba(236,72,153,.42),rgba(139,92,246,.42))}
.mobile-nav button.active::after{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,#ec4899,#8b5cf6)}
@media(max-width:900px){
  .hero-stage{min-height:82vh;border-radius:24px}
  .hero-content h1{font-size:clamp(42px,12vw,60px)}
  .vitrin-grid{grid-template-columns:1fr}
  .vitrin img{min-height:220px}
  .small-btn{min-height:44px;min-width:44px}
  .landing-ctas{flex-direction:column}
  .landing-ctas .btn{width:100%;text-align:center}
}
/* ---- Yonetici mobil uyum (ui-ux-pro-max: tablo kaydirma + sigdirma) ---- */
.table-scroll{scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.table-scroll table:has(thead){min-width:600px}
.modal>*{max-width:100%;min-width:0}
@media(max-width:800px){
  .toast{bottom:96px;max-width:calc(100vw - 32px);text-align:center}
  .small-btn.keep-m{display:inline-flex!important}
}
@media(max-width:640px){
  .invite-box{flex-direction:column;align-items:stretch}
  .invite-box .btn{width:100%}
  .hero-actions .btn{flex:1 1 100%}
  .login-card{padding:22px 18px}
  .stat-value{font-size:22px}
  .qty{flex-wrap:wrap}
}
/* ---- PWA kurulum bandi ---- */
.pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:2500;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(64,22,90,.97),rgba(14,7,24,.97));border:1px solid rgba(236,72,153,.45);box-shadow:0 18px 50px rgba(0,0,0,.55);animation:alinaHeroIn .4s var(--ease-out) both}
.pwa-banner img{width:44px;height:44px;border-radius:12px}
.pwa-banner div{flex:1;min-width:0}
.pwa-banner b{display:block;font-size:14px}
.pwa-banner small{color:var(--muted);font-size:12px}
.pwa-banner .btn{padding:10px 18px;white-space:nowrap}
.pwa-close{border:0;background:transparent;color:#cbb9d4;font-size:16px;padding:10px;min-width:44px;min-height:44px}
@media(min-width:901px){.pwa-banner{left:auto;right:20px;bottom:20px;max-width:390px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .marquee-track{animation:none}
  .hero-content{animation:none}
}