@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
:root{--gold:#ffd36b;--gold2:#c58a2b;--goldd:#7a4c12;--red:#b3121b;--panel:#0b0f12;--line:#c9922f;--ink:#f6ecd6}
*{box-sizing:border-box}
html{background:#050304}
body{margin:0;color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:14px;
 background:
  radial-gradient(ellipse 60% 35% at 50% 100%,rgba(255,110,20,.45),transparent 70%),
  radial-gradient(ellipse 40% 50% at 0% 60%,rgba(190,30,20,.35),transparent 70%),
  radial-gradient(ellipse 40% 50% at 100% 60%,rgba(190,30,20,.35),transparent 70%),
  linear-gradient(#1a0508,#0a0406 40%,#160805);background-attachment:fixed}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}.hidden{display:none!important}
.page{max-width:1540px;margin:0 auto;padding:0 10px 0}

/* ---------- üst menü ---------- */
.topbar{display:flex;align-items:center;gap:18px;height:62px;padding:0 18px;margin-top:8px;position:relative;
 background:linear-gradient(#1b0d0c,#0a0505);border:1px solid var(--line);border-radius:6px;box-shadow:0 0 0 2px #2a0f08,0 6px 24px #000a,inset 0 0 24px #000}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-emblem{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:900 30px Cinzel,serif;color:#ffe39a;
 background:radial-gradient(#5a1a12,#14070a 70%);border:3px double var(--gold);box-shadow:0 0 14px #ff9c2699,inset 0 0 10px #000;text-shadow:0 0 10px #ff9c26}
.logo-text b{display:block;font:800 26px/1 Cinzel,serif;color:var(--gold);letter-spacing:1px;text-shadow:0 2px #4a2200,0 0 12px #e0801c}
.logo-text b em{font-style:normal;font-size:.8em;color:#ffe9b0}
.logo-text small{font:600 9px Inter;letter-spacing:1px;color:#f0c46a}
.menu{display:flex;list-style:none;margin:0 auto;padding:0;height:100%}
.menu a{display:flex;align-items:center;height:100%;padding:0 18px;color:#f1e4c8;text-decoration:none;font:700 11px Inter;text-transform:uppercase;letter-spacing:.3px}
.menu a:hover{color:#fff;background:#ffffff0d}
.menu .active a{color:#fff;background:linear-gradient(#a3141a,#5d0a10);box-shadow:inset 0 -3px var(--gold),0 0 18px #d92b2b88}
.forum-btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;color:var(--gold);font:800 14px Cinzel,serif;padding:10px 20px;border:2px solid var(--gold2);border-radius:30px;
 background:linear-gradient(#2a1608,#0d0705);box-shadow:0 0 14px #e0971f55,inset 0 0 12px #000}
.forum-btn:hover{filter:brightness(1.25)}.forum-btn.small{font-size:12px;padding:10px 16px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--gold);font-size:20px;border-radius:4px;padding:3px 10px}

/* ---------- hero ---------- */
.hero{position:relative;height:175px;margin-top:6px;overflow:hidden;
 background:radial-gradient(ellipse 50% 100% at 50% 100%,#ff9a2c 0,#b04412 35%,transparent 72%),linear-gradient(#2a0a0c,#531a10 75%,#2a0c08);
 border-radius:4px}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 70%,#ffc15a55 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,#ffc15a55 0 2px,transparent 3px);background-size:90px 70px}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:95px}
.flag{position:absolute;top:-8px;width:56px;height:150px;background:linear-gradient(#c01820,#6d0910);clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);border-top:5px solid var(--gold)}
.flag:after{content:"S";position:absolute;inset:34px 0 auto;text-align:center;font:900 30px Cinzel;color:var(--gold);opacity:.85}
.f1{left:3%}.f2{left:14%;height:120px;opacity:.7}.f3{right:14%;height:120px;opacity:.7}.f4{right:3%}
.title-ribbon{position:relative;z-index:2;text-align:center;padding-top:6px}
.crown{font-size:30px;line-height:1;color:var(--gold);text-shadow:0 0 14px #ff9c26;margin-bottom:-6px}
.hero h1{margin:0;font:900 clamp(40px,6.4vw,76px)/1.05 Cinzel,serif;letter-spacing:3px;
 background:linear-gradient(#fff6c4 10%,#ffd25e 45%,#b8691a 72%,#ffe9a2);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 3px 0 #4a2000) drop-shadow(0 0 14px #ff9c26)}
.sub{margin:0;font:700 14px Cinzel;letter-spacing:7px;color:#ffe9b8;text-shadow:0 2px 4px #000}
.tagline{display:inline-block;margin-top:8px;padding:6px 42px;font:800 16px Inter;color:#ffe9b0;background:linear-gradient(90deg,transparent,#8f1017 14%,#b3121b 50%,#8f1017 86%,transparent);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);text-shadow:0 2px #000}

/* ---------- ızgara ---------- */
.layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(420px,1.5fr) minmax(280px,.9fr);gap:14px;margin-top:10px;align-items:start}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- paneller ---------- */
.panel{position:relative;padding:16px 18px 18px;border:2px solid var(--line);border-radius:6px;
 background:linear-gradient(160deg,rgba(14,19,23,.97),rgba(5,8,11,.98));box-shadow:0 0 0 2px #26100a,0 0 24px #e0801c33,inset 0 0 30px #000}
.panel:before{content:"";position:absolute;inset:4px;border:1px solid #6d4a1a;border-radius:3px;pointer-events:none}
.panel:after{content:"";position:absolute;inset:-4px;pointer-events:none;border-radius:8px;
 background:linear-gradient(var(--gold),var(--gold)) 0 0/16px 3px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/3px 16px no-repeat,
 linear-gradient(var(--gold),var(--gold)) 100% 0/16px 3px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 0/3px 16px no-repeat,
 linear-gradient(var(--gold),var(--gold)) 0 100%/16px 3px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/3px 16px no-repeat,
 linear-gradient(var(--gold),var(--gold)) 100% 100%/16px 3px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/3px 16px no-repeat}
.panel h2{margin:0 0 14px;display:flex;align-items:center;gap:10px;font:800 17px Cinzel,serif;color:#fff1c6;letter-spacing:.3px;text-shadow:0 2px #000}
.ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:17px;color:var(--gold);background:radial-gradient(#4a2a0c,#120a05);border:2px solid var(--gold2);box-shadow:0 0 8px #e0971f66}
.hint{font-size:11px;line-height:1.6;color:#a9a8a2;margin:10px 0 0}
input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]),textarea{width:100%;background:#0a1015;border:1px solid #3d4a52;color:#f6efe0;border-radius:5px;padding:11px 12px;outline:none}
input:focus,textarea:focus{border-color:var(--gold)}
input[type=file]{width:100%;padding:10px;border:1px dashed #6d5a2f;border-radius:5px;background:#0a1015}
textarea{resize:vertical;min-height:130px;margin-top:10px}

/* butonlar */
.red-btn,.gold-btn,.blue-btn,.green-btn,.brown-btn{border-radius:5px;padding:11px 14px;font-weight:800;font-size:13px;color:#fff;border:1px solid transparent;text-shadow:0 1px 2px #0008;transition:filter .15s}
.red-btn:hover,.gold-btn:hover,.blue-btn:hover,.green-btn:hover,.brown-btn:hover{filter:brightness(1.18)}
.red-btn{background:linear-gradient(#e0262b,#7d0a10);border-color:#ff6a55;box-shadow:inset 0 1px #ff9b8a}
.blue-btn{background:linear-gradient(#2f87d8,#0d3e7a);border-color:#6ab3f0;box-shadow:inset 0 1px #9cd0ff}
.green-btn{background:linear-gradient(#35c23b,#0f6b17);border-color:#7ef083;box-shadow:inset 0 1px #b4ffb7}
.brown-btn{background:linear-gradient(#c58a2b,#6b4210);border-color:#ffd36b;box-shadow:inset 0 1px #ffe9a8}
.gold-btn{background:linear-gradient(#ffd96f,#c98a1f 50%,#7a4509);border:2px solid #ffe699;color:#2a1403;text-shadow:0 1px #fff0b0;font:800 16px Inter;padding:14px;box-shadow:inset 0 1px #fff4c0,0 0 14px #e0971f66}
.full{width:100%;margin-top:10px}button:disabled{opacity:.6;cursor:wait}

/* sekmeler */
.tabs{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:0;margin-bottom:12px;border:1px solid #3a2a18;border-radius:5px;overflow:hidden}
.tab{background:#0d1317;border:0;border-right:1px solid #2c3338;color:#d9d2c0;padding:11px 3px;font-size:11px;font-weight:600}
.tab:last-child{border-right:0}
.tab.active{background:linear-gradient(#e0262b,#8a0b12);color:#fff;box-shadow:inset 0 0 12px #ff6a5566}
.entry-row{display:flex;gap:9px}.entry-row .red-btn{white-space:nowrap}

/* ayarlar */
.set-label{font-weight:600;font-size:14px;color:#f2e8d0}
.swatches{display:flex;gap:10px;align-items:center;margin:12px 0 18px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;padding:0;position:relative;overflow:hidden;border:2px solid #cfa24e;background:var(--c);box-shadow:inset 0 0 6px #0009}
.sw.active{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 12px var(--gold)}
.sw input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.set-row{display:flex;align-items:center;gap:12px;margin:14px 0}.set-row .set-label{flex:0 0 118px}
.tcolors{display:flex;gap:16px;margin-left:auto;margin-right:60px}
.tc{width:32px;height:32px;border-radius:50%;background:var(--c);border:2px solid #7d6840}.tc.active{outline:3px solid var(--gold);outline-offset:2px}
input[type=range]{flex:1;accent-color:var(--gold);height:6px}
output{background:#0a1015;border:1px solid #3d4a52;border-radius:5px;padding:6px 14px;font-size:13px;color:#e7dfcc}
.settings{margin:10px 0 14px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #222a2e;cursor:pointer}
.toggle span{font-size:12px;color:#d9d2c0}.toggle input{position:absolute;opacity:0}
.toggle i{width:36px;height:20px;border-radius:15px;background:#464e52;position:relative;flex-shrink:0}
.toggle i:after{content:"";position:absolute;width:16px;height:16px;top:2px;left:2px;background:#eee;border-radius:50%;transition:.2s}
.toggle input:checked+i{background:#17a35e}.toggle input:checked+i:after{left:18px}

/* çark */
.col-mid{align-items:center;position:relative}
.wheel-area{position:relative;width:100%;max-width:700px;margin:-4px auto 0;padding-top:34px}
.wheel-area:before{content:"";position:absolute;inset:10% 4% 0;border-radius:50%;background:radial-gradient(circle,#ffa83a77,#e3481133 55%,transparent 70%);filter:blur(22px)}
.gem{position:absolute;z-index:5;left:50%;top:0;width:46px;height:64px;transform:translateX(-50%);
 background:linear-gradient(135deg,#ff6b6b,#d3121f 45%,#7d0610);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);filter:drop-shadow(0 0 10px #ff4040)}
.gem:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fff6 0 24%,transparent 25%);}
.wheel-wrap{position:relative;z-index:2;width:100%;aspect-ratio:1;display:grid;place-items:center;filter:drop-shadow(0 8px 14px #000c)}
#wheelCanvas{width:100%;height:100%;display:block}
.wheel-center{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;border:4px double #ffd36b;background:radial-gradient(#4b160f,#120709 70%);
 display:grid;place-content:center;text-align:center;box-shadow:0 0 0 4px #5d3410,0 0 24px #ff9c26,inset 0 0 16px #000;transition:transform .15s}
.wheel-center:hover{transform:scale(1.05);box-shadow:0 0 0 4px #5d3410,0 0 36px #ffbc4a,inset 0 0 16px #000}
.wheel-center .s{font:900 clamp(30px,5.5vw,56px)/1 Cinzel;color:#ffd36b;text-shadow:0 0 14px #ff9c26,0 2px #4a2000}
.wheel-center small{font:700 clamp(6px,1.1vw,10px) Cinzel;color:#ffe9b0;letter-spacing:.4px}

/* kazanan penceresi */
.winner-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 45%,rgba(120,40,10,.55),rgba(0,0,0,.88));backdrop-filter:blur(3px);animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-20px;width:9px;height:16px;border-radius:2px;opacity:.9;animation:fall linear infinite}
@keyframes fall{to{top:105%;margin-left:40px;rotate:540deg}}
.winner-panel{position:relative;width:min(94vw,520px);padding:26px 30px 24px;text-align:center;border:3px solid var(--gold);border-radius:10px;overflow:visible;
 background:radial-gradient(ellipse at 50% 0,#5a1d12,#1a0908 55%,#070304);box-shadow:0 0 0 3px #2a0f08,0 0 0 5px var(--gold2),0 0 70px #ff9c2699,inset 0 0 50px #000}
.winner-panel:before{content:"";position:absolute;inset:6px;border:1px solid #8d5f1e;border-radius:6px;pointer-events:none}
.rays{position:absolute;left:50%;top:128px;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;opacity:.35;
 background:repeating-conic-gradient(from 0deg,#ffd36b 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 68%);mask:radial-gradient(circle,#000 0,transparent 68%);animation:spinr 24s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
.w-title{position:relative;font:900 clamp(34px,8vw,52px)/1 Cinzel,serif;letter-spacing:4px;background:linear-gradient(#fff6c4,#ffcf55 52%,#b8691a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #3a1c00) drop-shadow(0 0 16px #ff9c26)}
.w-title span{font-size:.5em;color:var(--gold);-webkit-text-fill-color:var(--gold);vertical-align:middle}
.w-sub{position:relative;margin-top:6px;font-size:12px;letter-spacing:1px;color:#f3d994;text-transform:uppercase}
.avatar{position:relative;width:112px;height:112px;margin:16px auto 0;border-radius:50%;overflow:hidden;background:linear-gradient(#e6e8ed,#b9bec8);border:5px solid var(--gold);box-shadow:0 0 0 3px #5d3410,0 0 30px #ffb445}
.avatar svg{width:100%;height:100%}
.w-ribbon{position:relative;z-index:2;margin:18px -22px 0;padding:14px 56px;background:linear-gradient(#e2282f,#8a0b12 55%,#5e060b);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);border-top:2px solid #ff9a8a;box-shadow:0 8px 20px #000}
.w-ribbon strong{display:block;font:900 clamp(26px,7vw,42px)/1.15 Cinzel,serif;color:#fff;overflow-wrap:anywhere;text-shadow:0 3px 6px #000,0 0 18px #ff8a7a}
.winner-actions{position:relative;display:flex;gap:14px;justify-content:center;margin-top:22px;flex-wrap:wrap}.winner-actions button{min-width:150px;padding:13px 16px;font-size:14px}
.winner-panel.pop{animation:pop .7s cubic-bezier(.2,1.4,.4,1)}.winner-panel.pop .w-ribbon strong{animation:glow 1.1s ease 3}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes glow{50%{text-shadow:0 0 28px #ffd36b,0 0 10px #fff}}
body.spinning .wheel-center{animation:pulse 1s ease infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px #5d3410,0 0 44px #ffbc4a,inset 0 0 16px #000}}

/* liste */
.search{position:relative}.search span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#bfb7a2;font-size:18px}
.search input{padding-left:36px!important}
.name-list{margin-top:10px;height:272px;overflow:auto;border-radius:4px;scrollbar-color:#8a6a2c #0a0f12}
.name-row{display:flex;align-items:center;gap:12px;padding:0 4px 0 10px;height:34px;font-size:14px;border-bottom:1px solid #1b2327}
.name-row:nth-child(even){background:#0e1519}.name-row .no{width:22px;color:#c8c4b8;text-align:left}
.name-row span.n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.delete-entry{border:1px solid #ff6a55;border-radius:4px;background:linear-gradient(#e0262b,#8a0b12);color:#fff;width:26px;height:24px;font-size:12px;padding:0}
.list-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.list-actions button{padding:12px 6px}
.recent-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid #20282c;font-size:14px}
.recent-row:last-child{border:0}
.medal{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 13px Inter;color:#2a1403;border:2px solid #fff3;background:radial-gradient(#ffe38a,#b9791a)}
.recent-row:nth-child(2) .medal{background:radial-gradient(#f1f1f1,#8f9399)}
.recent-row:nth-child(n+3) .medal{background:radial-gradient(#f0a060,#a24a12);color:#fff}
.recent-row b{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-row small{color:#bdb7a6;font-size:12px}

/* alt */
.foot{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:26px;margin-top:14px;padding:18px 26px;border-top:2px solid var(--line);background:linear-gradient(#150806,#070405);border-radius:6px 6px 0 0}
.foot p{margin:0;text-align:center;font-size:12px;line-height:1.7;color:#d8d0bc}
.domain{font-weight:600;color:#f0e4c8;text-align:center;align-self:end}
.foot .forum-btn{grid-column:3}

/* ---------- mobil ---------- */
@media(max-width:1180px){
 .layout{grid-template-columns:1fr 1fr}.col-mid{grid-column:1/-1;order:-1}
 .menu a{padding:0 10px}.forum-btn{font-size:12px;padding:8px 12px}
}
@media(max-width:860px){
 .topbar{flex-wrap:wrap;height:auto;padding:8px 12px}.nav-toggle{display:block;margin-left:auto}
 .menu{display:none;flex-direction:column;width:100%;height:auto;order:5}.menu.open{display:flex}.menu a{height:42px}
 .topbar>.forum-btn{display:none}
 .hero{height:150px}.flag{display:none}.tagline{font-size:12px;padding:5px 18px}.sub{letter-spacing:4px;font-size:11px}
 .layout{grid-template-columns:1fr}
 .foot{grid-template-columns:1fr;text-align:center;justify-items:center}.foot .forum-btn{grid-column:auto}
 
}

/* Ses efektleri kontrol paneli */
.sound-settings{display:grid;grid-template-columns:1fr auto;gap:9px 12px;align-items:center;margin:12px 0;padding:12px;border:1px solid #8c641f;border-radius:10px;background:linear-gradient(135deg,rgba(42,25,12,.88),rgba(10,12,14,.94));box-shadow:inset 0 0 14px #0008}
.sound-settings .toggle{grid-column:1/-1;margin:0}
.sound-select-label{font-size:13px;color:#f3d58a;font-weight:700}
.sound-select{width:100%;min-width:0;padding:9px 10px;border:1px solid #99702b;border-radius:7px;background:#15100c;color:#ffe8ad;outline:none}
.sound-select:focus{box-shadow:0 0 0 2px #e9b94c55}
.sound-test{grid-column:1/-1;padding:9px 12px;border:1px solid #d6a442;border-radius:7px;background:linear-gradient(#6e4314,#2b1708);color:#ffe5a0;font-weight:700}
.sound-test:hover{filter:brightness(1.2);box-shadow:0 0 14px #ffbf4a55}




/* Wheel visibility safeguard */
.wheel-area { display:block !important; visibility:visible !important; opacity:1 !important; }
.wheel-wrap { display:grid !important; visibility:visible !important; opacity:1 !important; min-width:260px; min-height:260px; }
#wheelCanvas { display:block !important; visibility:visible !important; opacity:1 !important; width:100% !important; height:100% !important; min-width:260px; min-height:260px; }
.wheel-center { z-index:5; visibility:visible !important; }