@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&display=swap');
:root{
  --bg:#0b0b0e;
  --panel:#121218;
  --panel-2:#191a21;
  --text:#e7e5ef;
  --muted:#a7a4b3;
  --brand:#ffd24d;
  --accent:#ffb347;
  --success:#9be564;
  --danger:#ff5c7a;
  --shadow: 0 12px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(1200px 700px at 50% 10%, #161625 0%, #0b0b0e 60%, #07070a 100%);color:var(--text);font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow:hidden}
h1, .res-name, .hname {
  font-family: 'Montserrat', sans-serif;
}
.topbar{
  position:fixed; top:0; left:0; right:0; height:72px;
  background:linear-gradient(180deg, rgba(15,15,20,.9), rgba(15,15,20,.75));
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; z-index:10; border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:44px; height:44px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));}
.titles h1{font-size:36px; margin:0; line-height:1;font-family: "Changa One", sans-serif;
  font-weight: 400;
  font-style: normal;}
.subtitle{margin:2px 0 0; color:var(--muted); font-size:12px}
.nav{display:flex; gap:12px}
.navlink{
  padding:8px 12px; border-radius:10px; background:var(--panel-2);
  color:var(--text); text-decoration:none; font-size:13px; border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.navlink:hover{filter:brightness(1.06)}

.stage{position:relative; width:100%; height:100%; padding-top:72px}
.webgl{position:absolute; inset:0; outline:none}

.ui{
  position:absolute; left:50%; bottom:48px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:5;
}
.spin-btn{
  padding:14px 28px; font-weight:700; border-radius:14px; border:0;
  color:#3a2b00; background:linear-gradient(180deg, var(--brand), #f8c521);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 #fff8, inset 0 -2px 0 rgba(0,0,0,.2);
  cursor:pointer; letter-spacing:.5px; font-size:16px;
}
.spin-btn:active{transform:translateY(1px)}
.hint{color:var(--muted); font-size:12px;}

.result-card{
  position:absolute; right:24px; top:96px; display:flex; gap:14px; align-items:center;
  background:var(--panel-2); padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.result-card.hidden{opacity:0; transform:translateX(16px); pointer-events:none}
.result-left{display:grid; place-items:center}
.res-logo{width:80px; height:80px; border-radius:12px; background:#222; object-fit:cover}
.result-mid{min-width:160px}
.res-name{font-weight:700; font-size:16px}
.res-sym{color:var(--muted); font-size:13px; margin-top:2px}
.btn{
  display:inline-block; text-decoration:none; font-weight:700; font-size:12px;
  padding:10px 12px; background:var(--brand); color:#3a2b00; border-radius:12px; border:0;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.btn.small{padding:8px 10px; font-size:12px}
.btn.outline{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16)}

@media (max-width: 860px){
  .result-card{left:50%; right:auto; top:auto; bottom:110px; transform:translate(-50%,10px)}
}


.res-name,.res-sym {
  text-align: center;
}
#resultCard .history-list{
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; width: 100%;
}
#resultCard .hrow{
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2, rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 10px 12px;
  color: var(--text, #eaeaea); text-decoration: none;
  box-shadow: var(--shadow, 0 6px 14px rgba(0,0,0,.2));
  overflow: hidden;  
}
#resultCard .himg{ width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: rgba(255,255,255,.04); }
#resultCard .hcol{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#resultCard .hname{ font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#resultCard .hmeta{ font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#resultCard {
  display: flex;
  flex-direction: column;
}

#resultCard .current-result {
  display: block;
  width: 100%;
  margin-bottom: 12px; 
}

#resultCard .history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}


#resultCard .status-line{
  display:flex; align-items:center; gap:8px;
  width:100%; margin-bottom:8px;
}
#resultCard .badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font-weight:700; font-size:11px; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
#resultCard .badge .dot{ width:8px; height:8px; border-radius:50%; box-shadow: 0 0 10px currentColor; }
#resultCard .badge.online{ color:#c6f6d5; background:rgba(0,180,80,.12); border-color:rgba(0,180,80,.35); }
#resultCard .badge.online .dot{ background:#22c55e; color:#22c55e; }
#resultCard .badge.online.is-off{ color:#ffc0c7; background:rgba(255,0,60,.12); border-color:rgba(255,0,60,.35); }
#resultCard .badge.online.is-off .dot{ background:#ff4d6d; color:#ff4d6d; }
#resultCard .badge.warn{ color:#ffe8a3; background:rgba(255,210,77,.14); border-color:rgba(255,210,77,.35); }
#resultCard .badge.warn .dot{ background:#ffd24d; color:#ffd24d; }
.logo-svg {
  width: 44px;
  height: 44px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.topbar{
  position:fixed; inset:0 auto auto 0; right:0; height:72px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  gap:16px; padding:0 18px; z-index:10;
  background:linear-gradient(180deg, rgba(15,15,20,.9), rgba(15,15,20,.75));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .brand.center{
  justify-self:center; display:flex; align-items:center; gap:12px;
}
.logo-svg{ width:44px; height:44px; display:block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.topbar .titles h1{ margin:0; font-size:36px; line-height:1; text-align: center;}
.topbar .titles .subtitle{ margin:2px 0 0; font-size:12px; color:var(--muted); }

.nav-pill{
  justify-self:start; display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px; text-decoration:none; color:var(--text);
  background: var(--panel-2); border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.nav-pill:last-child{ justify-self:end; }
.nav-pill:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.nav-pill .icon{ display:grid; place-items:center; width:22px; height:22px; color:#cfcfe6; }

@media (max-width: 720px){
  .topbar{ grid-template-columns: 1fr auto 1fr; padding:0 10px; height:68px; }
  .topbar .titles h1{ font-size:18px; }
  .nav-pill{ padding:8px 10px; gap:8px; }
  .nav-pill span:last-child{ font-size:12px; }
}
.modal{ position:fixed; inset:0; display:none; z-index:20; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.modal-dialog{
  position:relative; width:min(720px, 92vw);
  margin:10vh auto; padding:16px 16px 12px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(20,20,28,.92), rgba(20,20,28,.86));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.6));
  color: var(--text);
  animation: modalIn .25s ease-out;
}
@keyframes modalIn{ from{ transform: translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } }

.modal-close{
  position:absolute; right:10px; top:10px;
  width:32px; height:32px; border-radius:10px; border:0;
  background: var(--panel-2); color:var(--text); cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
}
.modal-header h2{ margin:6px 8px 10px; font-size:18px; }
.modal-body{ padding:0 8px 10px; max-height:60vh; overflow:auto; }
.modal-body .blk{ margin:10px 0 14px; }
.modal-body h3{ margin:.3rem 0 .4rem; font-size:14px; color:#ffd24d; }
.modal-body p, .modal-body li{ font-size:13px; color:var(--text); opacity:.95 }
.modal-footer{ display:flex; justify-content:flex-end; gap:8px; padding:8px; }
.nav-pill.disclaimer-btn{
  cursor: pointer;
  background: linear-gradient(180deg, #FFD24D, #f3d77b);
  border: 1px solid rgba(245, 221, 150, 0.6);
  color: #3a2b00;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(61, 51, 20, 0.6), 0 8px 20px rgba(0,0,0,.35);
}
.nav-pill.disclaimer-btn .icon{ color:#3a2b00; }
.nav-pill.disclaimer-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(255,210,77,.8), 0 12px 26px rgba(0,0,0,.45);
}
.nav-pill.pump-btn{
  background: linear-gradient(180deg, #4ade80, #22c55e); 
  border: 1px solid rgba(34,197,94,.6);
  color: #083b22;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(34,197,94,.5), 0 8px 20px rgba(0,0,0,.35);
}
.nav-pill.pump-btn .icon{ color:#083b22; }
.nav-pill.pump-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(34,197,94,.7), 0 12px 26px rgba(0,0,0,.45);
}
.topbar{
  position:fixed; inset:0 0 auto 0; height:72px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; padding:0 18px; z-index:10;
  background:linear-gradient(180deg, rgba(15,15,20,.9), rgba(15,15,20,.75));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.left-group, .right-group{ display:flex; align-items:center; gap:12px; }
.left-group{ justify-self:start; }
.right-group{ justify-self:end; }

.topbar .brand.center{ justify-self:center; display:flex; align-items:center; gap:12px; }
.logo-svg{ width:44px; height:44px; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.topbar .titles h1{ margin:0; font-size:36px; line-height:1; }
.topbar .titles .subtitle{ margin:2px 0 0; font-size:16px; color:var(--muted); text-align: center;}

.nav-pill{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:12px; text-decoration:none; color:var(--text);
  background:var(--panel-2); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.35); white-space:nowrap; }
.nav-pill .icon{ display:grid; place-items:center; width:20px; height:20px; }

.nav-pill.pump-btn{
  background:linear-gradient(180deg,#4ade80,#22c55e);
  border:1px solid rgba(34,197,94,.6);
  color:#083b22; font-weight:700;
  box-shadow:0 0 10px rgba(34,197,94,.5),0 8px 20px rgba(0,0,0,.35);
}
.nav-pill.pump-btn .icon{ color:#083b22; }

.nav-pill.disclaimer-btn{
  background:linear-gradient(180deg,#FFD24D,#f8c521);
  border:1px solid rgba(255,210,77,.6);
  color:#3a2b00; font-weight:700;
  box-shadow:0 0 10px rgba(255,210,77,.6),0 8px 20px rgba(0,0,0,.35);
}
.nav-pill:hover{ transform:translateY(-1px); filter:brightness(1.05); }

@media (max-width: 780px){
  .topbar{ gap:10px; padding:0 10px; height:68px; }
  .left-group, .right-group{ gap:8px; }
  .topbar .titles h1{ font-size:18px; }
  .nav-pill{ padding:8px 10px; gap:8px; }
  .nav-pill span:last-child{ font-size:12px; }
}
.icon img{
  max-height: 16px;
}
#loader {
  position: fixed; inset: 0;
  background: radial-gradient(800px at 50% 30%, #161625, #0b0b0e 80%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.loader-content {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.loader-logo { filter: drop-shadow(0 0 12px rgba(255,210,77,.6)); }
.loader-text {
  font-family: Aleo, system-ui, sans-serif;
  font-size: 16px; letter-spacing: 1px;
  color: var(--muted, #aaa);
}
#loader.fade-out { animation: fadeOut .6s forwards; }
@keyframes fadeOut { to { opacity:0; visibility:hidden; } }
.lever-text{
  font-family: 'Changa One', sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand, #ffd24d);
  text-align: center;
  margin: 24px 0;
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,210,77,.15), rgba(255,210,77,.05));
  box-shadow: 0 0 20px rgba(255,210,77,.3);
  overflow: hidden;
}

.lever-text::after{
  content:"";
  position:absolute;
  top:0; left:-50%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg);
  animation: shine 3s infinite;
}
@keyframes shine{
  0%{ left:-50%; }
  60%{ left:120%; }
  100%{ left:120%; }
}
/* === Enter Gate Overlay === */
#gate{
  position: fixed; inset: 0; z-index: 9998;
  background: radial-gradient(900px at 50% 30%, #161625, #0b0b0e 75%);
  display: flex; align-items: center; justify-content: center;
}
#gate.fade-out{ animation: gateFade .45s ease forwards; pointer-events: none; }
@keyframes gateFade{ to{ opacity:0; visibility:hidden; } }

.gate-inner{ text-align:center; color: var(--text,#e7e5ef); padding: 24px 18px; }
.gate-title{ font-size: 28px; font-weight: 800; letter-spacing:.5px; margin-bottom: 6px; }
.gate-sub{ margin: 0 0 18px; color: var(--muted,#a7a4b3); }

.gate-btn{
  padding: 12px 18px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #FFD24D, #f8c521); color:#3a2b00; font-weight: 800;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 16px rgba(255,210,77,.6);
}
.gate-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.gate-hint{ margin-top:10px; font-size:12px; color: var(--muted,#a7a4b3); }

/* (Opsiyonel) loader’ınız varsa z-index’i 9999, gate 9998; loader kapanınca gate görünür kalır */