/* slot — "Kolu çek." oynanabilir demo makine */
.slot{position:relative;isolation:isolate;overflow:hidden;padding:clamp(72px,9vw,150px) 0;background:var(--taban)}
.slot__defs{position:absolute;width:0;height:0}
.slot__foto{position:absolute;inset:0;z-index:-1;pointer-events:none}
.slot__foto img{position:absolute;right:0;top:0;width:68%;height:100%;object-fit:cover;object-position:40% 50%;opacity:.95;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 55%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-composite:intersect}
.slot__foto::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 62% 50%,rgba(5,9,16,0),rgba(5,9,16,.38) 100%)}
.slot__ic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(24px,4vw,64px)}
.slot__metin .buyuk{margin:18px 0 24px;font-size:clamp(48px,7.4vw,112px)}
.slot__not{max-width:26ch;font-size:clamp(16px,1.5vw,20px);color:var(--metin-7);line-height:1.5}
.slot__sahne{display:grid;justify-items:center;gap:18px;--c:134px;--rw:114px}

.makine{position:relative;padding-right:74px}
.kabin{position:relative;background:linear-gradient(180deg,#1b2025,var(--yuzey) 30%,#101316);border-radius:20px 20px 12px 12px;
  padding:0 22px 20px;box-shadow:0 40px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.1)}
.kabin__ust{display:flex;align-items:center;justify-content:center;gap:14px;height:58px;margin:0 -22px 18px;
  border-radius:20px 20px 0 0;border:2px solid var(--kirmizi);border-bottom-width:1px;box-shadow:var(--kirmizi-glow),inset 0 0 14px rgba(254,17,1,.25);
  background:linear-gradient(180deg,#220608,#14181C)}
.kabin__ad{font-weight:700;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:#fff;text-shadow:0 0 8px rgba(254,17,1,.8)}
.kabin__kasa{display:flex;gap:4px}
.kabin__kasa i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E81838,#980018);box-shadow:0 0 6px rgba(254,17,1,.7)}

.cam{position:relative;height:calc(var(--c)*3);border-radius:10px;overflow:hidden;background:#05070b;
  box-shadow:inset 0 0 0 2px #000,inset 0 8px 24px rgba(0,0,0,.95),inset 0 -8px 24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.14)}
.makaralar{display:flex;gap:4px;height:100%;padding:0 6px;background:#000}
.makara{position:relative;width:var(--rw);overflow:hidden;background:linear-gradient(90deg,#0c0f13,#1a1e23 50%,#0c0f13)}
.serit{position:absolute;left:0;right:0;top:0;will-change:transform}
.serit.b1{filter:url(#sl-b1)}.serit.b2{filter:url(#sl-b2)}
.sym{height:var(--c);display:grid;place-items:center;position:relative}
.sym i{display:block;width:60%;aspect-ratio:1;background:#fff;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.sym svg{width:68%;aspect-ratio:1;overflow:visible}
.sym.parla svg{animation:sl-parla .5s ease-in-out infinite alternate;position:relative;z-index:1}
.sym.parla::after{content:"";position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1;margin:-40% 0 0 -40%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(254,17,1,.75),rgba(254,17,1,.35) 55%,transparent);animation:sl-parla-isik .5s ease-in-out infinite alternate}
@keyframes sl-parla-isik{from{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.13)}}
.sym.eslesti i{filter:drop-shadow(0 0 8px rgba(254,17,1,.9));background:#ffd8d4}
@keyframes sl-parla{to{transform:scale(1.13)}}
.cam__golge{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.96) 0,rgba(0,0,0,.5) 14%,rgba(0,0,0,.08) 30%,transparent 38%,transparent 62%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.5) 86%,rgba(0,0,0,.96) 100%)}
.cam__yansima{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.03) 22%,transparent 23%,transparent 46%,rgba(255,255,255,.05) 47%,transparent 62%),linear-gradient(180deg,rgba(255,255,255,.07),transparent 14%)}
.cam__kazanc{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--kirmizi);opacity:.5;pointer-events:none;transition:opacity .3s,box-shadow .3s}
.cam.kazandi .cam__kazanc{opacity:1;box-shadow:var(--kirmizi-glow),0 0 24px rgba(254,17,1,.7);animation:sl-yan .45s ease-in-out 4}
@keyframes sl-yan{50%{opacity:.35}}

.kabin__alt{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.durum{font-size:13px;font-weight:500;color:var(--metin-7);letter-spacing:.02em;min-height:2.6em;display:flex;align-items:center}
.kabin__alt .btn{flex:none;min-width:132px}
.kabin__alt .btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}

/* kol */
.kol{position:absolute;right:0;top:96px;width:70px;height:350px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  --by:90px;--rt:90px;--rh:110px;--bs:1}
.kol.tutuyor{cursor:grabbing}
.kol__taban{position:absolute;left:0;top:166px;width:38px;height:68px;border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,#0b0d10,#3b4148 45%,#15181c);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),4px 6px 14px rgba(0,0,0,.6)}
.kol__cubuk{position:absolute;left:34px;width:15px;margin-left:-5px;top:var(--rt);height:var(--rh);border-radius:6px;
  background:linear-gradient(90deg,#2a2e33,#f4f6f8 35%,#8e969e 60%,#23272b);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.kol__top{position:absolute;left:36px;top:calc(var(--by) - 31px);width:62px;height:62px;margin-left:-31px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff7a70 0,#FE1101 28%,#A80820 70%,#980018 100%);
  box-shadow:0 0 18px rgba(254,17,1,.5),inset -5px -7px 12px rgba(0,0,0,.4);transform:scale(var(--bs))}
.kol::before{content:"";position:absolute;left:30px;top:0;width:12px;height:100%;margin-left:-4px;opacity:0}
.kol:focus-visible{outline:none}

/* jackpot paneli */
.slot__panel{position:absolute;left:0;right:74px;top:50%;z-index:5;padding:34px 28px 28px;text-align:center;display:grid;justify-items:center;gap:14px;
  background:rgba(14,17,20,.96);border-radius:12px;border-top:3px solid var(--kirmizi);box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 60px rgba(254,17,1,.25);
  transform:translateY(-50%);animation:sl-panel .6s var(--ease-cik) both}
.slot__panel[hidden]{display:none}
@keyframes sl-panel{from{opacity:0;transform:translateY(-44%) scale(.94)}}
.slot__panel .orta{font-size:clamp(34px,4.2vw,56px)}
.slot__panel-alt{max-width:30ch;font-size:15px;color:var(--metin-7);margin-bottom:6px}
.slot__tekrar{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--metin-6);min-height:44px;padding:0 12px;text-decoration:underline;text-underline-offset:4px}
.slot__tekrar:hover{color:#fff}
.slot__kapat{position:absolute;right:6px;top:8px;width:44px;height:44px}
.slot__kapat span{position:absolute;left:12px;top:21px;width:20px;height:2px;background:var(--metin-7);transform:rotate(45deg)}
.slot__kapat span+span{transform:rotate(-45deg)}
.slot__kapat:hover span{background:#fff}
.slot__demo{font-size:12px;letter-spacing:.08em;color:var(--metin-5);text-align:center}

@media (max-width:899px){
  .slot{padding:56px 0 72px}
  .slot__ic{grid-template-columns:1fr;gap:36px}
  .slot__sahne{order:-1;--c:84px;--rw:78px}
  .slot__foto img{width:100%;opacity:.4;object-position:60% 50%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
  .makine{padding-right:56px;max-width:100%}
  .kabin{padding:0 14px 16px}.kabin__ust{margin:0 -14px 14px;height:50px}
  .kabin__ad{font-size:12px;letter-spacing:.22em}
  .kol{width:70px;height:350px;top:60px;transform:scale(.7);transform-origin:100% 40%}
  .slot__panel{right:56px;padding:30px 18px 22px}
  .kabin__alt{flex-direction:column;align-items:stretch;gap:10px}
  .durum{justify-content:center;text-align:center;min-height:1.4em}
  .slot__metin{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .sym.parla svg,.sym.parla::after{animation:none}
  .cam.kazandi .cam__kazanc{animation:none}
  .slot__panel{animation:none}
}