:root{
  --bg:#0a0f14;
  --accent:#23e08a;
  --panel:#131c25;
  --panel-2:#18232e;
  --line:#22303d;
  --metin:#e9f0f6;
  --sonuk:#8ea3b5;
  --altin:#f5c451;
  --radius:16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--metin);
  font-family:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.45;overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* hareketli arka plan */
.aura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aura span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:suzul 22s ease-in-out infinite}
.aura span:nth-child(1){width:620px;height:620px;top:-260px;left:50%;margin-left:-310px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent), transparent 70%)}
.aura span:nth-child(2){width:480px;height:480px;top:24%;left:-180px;animation-delay:-7s;opacity:.28;
  background:radial-gradient(circle, color-mix(in srgb, var(--altin) 45%, transparent), transparent 70%)}
.aura span:nth-child(3){width:520px;height:520px;bottom:-200px;right:-160px;animation-delay:-14s;opacity:.3;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%)}
@keyframes suzul{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(40px,34px,0) scale(1.08)}
  66%{transform:translate3d(-32px,18px,0) scale(.95)}
}

/* üst banner şeridi */
.banner-serit{display:flex;gap:10px;padding:10px;overflow-x:auto;scrollbar-width:none;
  background:rgba(0,0,0,.3);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.banner-serit::-webkit-scrollbar{display:none}
.banner{flex:0 0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s}
.banner:hover{transform:scale(1.03);border-color:var(--accent)}
.banner img{height:86px;width:auto}

/* başlık */
.ust{text-align:center;padding:44px 18px 26px}
.marka{display:inline-block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding:6px 16px;border-radius:999px;margin-bottom:16px;
  animation:bel .8s cubic-bezier(.2,.9,.3,1) both, nefes 3.6s ease-in-out 1s infinite}
@keyframes nefes{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 32%, transparent)}
  50%{box-shadow:0 0 22px 2px color-mix(in srgb, var(--accent) 24%, transparent)}
}
.ust h1{margin:0;font-size:clamp(25px,5.4vw,44px);letter-spacing:-.03em;font-weight:800;
  background:linear-gradient(100deg,var(--metin) 20%,var(--accent) 42%,var(--altin) 58%,var(--metin) 80%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bel .9s .08s cubic-bezier(.2,.9,.3,1) both, kayan 7s linear 1s infinite}
@keyframes kayan{to{background-position:-250% 0}}
.alt-yazi{margin:12px auto 0;max-width:640px;color:var(--sonuk);font-size:14.5px;
  animation:bel .9s .16s cubic-bezier(.2,.9,.3,1) both}
@keyframes bel{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.kabuk{max-width:1180px;margin:0 auto;padding:8px 14px 54px;position:relative}

/* kart ızgarası */
.izgara{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@property --aci{syntax:'<angle>';initial-value:0deg;inherits:false}
.kart{position:relative;display:flex;flex-direction:column;isolation:isolate;
  background:linear-gradient(168deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 15px 15px;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
  animation:kartGel .65s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(var(--i,0) * 65ms + .2s)}
@keyframes kartGel{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.kart::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:0;
  background:conic-gradient(from var(--aci), transparent 0deg, var(--accent) 60deg, var(--altin) 130deg, transparent 220deg);
  transition:opacity .3s ease}
.kart::after{content:"";position:absolute;inset:1px;border-radius:calc(var(--radius) - 1px);z-index:-1;
  background:linear-gradient(168deg,var(--panel-2),var(--panel))}
.kart:hover,.kart:focus-visible{transform:translateY(-6px);
  box-shadow:0 20px 44px -20px color-mix(in srgb, var(--accent) 85%, transparent)}
.kart:hover::before,.kart:focus-visible::before{opacity:1;animation:don 3s linear infinite}
@keyframes don{to{--aci:360deg}}
.kart:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.rozet{position:absolute;top:10px;left:10px;z-index:2;
  font-size:10px;font-weight:800;letter-spacing:.1em;padding:4px 9px;border-radius:999px;
  background:var(--accent);color:#07120f;
  animation:rozetPat .5s cubic-bezier(.3,1.5,.5,1) both;
  animation-delay:calc(var(--i,0) * 65ms + .45s)}
.rozet::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 currentColor;opacity:.45;animation:dalga 2.6s ease-out infinite}
@keyframes rozetPat{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes dalga{0%{box-shadow:0 0 0 0 currentColor;opacity:.45}70%,100%{box-shadow:0 0 0 9px currentColor;opacity:0}}
.rozet-1{background:var(--altin);color:#241a00}
.rozet-2{background:#ff5470;color:#2a0008}
.rozet-3{background:#59b8ff;color:#001a2c}

.kart-gorsel{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.kart:hover .kart-gorsel{transform:scale(1.07)}
.kart-gorsel img{max-height:64px;width:auto;object-fit:contain}
.gorsel-yok{font-weight:800;font-size:19px;letter-spacing:-.02em;text-align:center;line-height:1.15;
  background:linear-gradient(120deg,var(--metin),var(--sonuk));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.kart-govde{flex:1;text-align:center;position:relative;z-index:1}
.marka-adi{font-size:14px;font-weight:700;color:var(--metin)}
.tutar{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:3px;
  background:linear-gradient(100deg,var(--accent),var(--altin),var(--accent));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:kayan 5.5s linear infinite}
.bonus{font-size:12px;color:var(--sonuk);margin-top:3px;min-height:16px}
.kod{margin-top:10px;font-size:11px;letter-spacing:.06em;color:var(--altin);
  border:1px dashed color-mix(in srgb, var(--altin) 45%, transparent);border-radius:9px;padding:5px 6px;
  transition:background .25s,border-color .25s}
.kart:hover .kod{background:color-mix(in srgb, var(--altin) 12%, transparent);border-color:var(--altin)}
.kod b{letter-spacing:.12em}

.cta{position:relative;overflow:hidden;margin-top:14px;text-align:center;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 62%, var(--altin)));
  color:#06130d;font-weight:800;font-size:13px;letter-spacing:.1em;padding:11px;border-radius:11px}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.kart:hover .cta::after{animation:parla .85s ease-out}
@keyframes parla{to{left:130%}}

.bos{text-align:center;color:var(--sonuk);padding:60px 0}

/* kanallar */
.bolum-basligi{margin:52px 0 16px;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sonuk);font-weight:700;display:flex;align-items:center;gap:14px}
.bolum-basligi::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.kanallar{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kanal{display:flex;align-items:center;gap:13px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s,background .25s}
.kanal:hover{transform:translateX(5px);background:var(--panel-2);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
.kanal img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.kanal .simge{width:44px;height:44px;border-radius:12px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.kanal b{display:block;font-size:14px}
.kanal small{color:var(--sonuk);font-size:12px}

/* alt */
.alt{border-top:1px solid var(--line);padding:26px 18px 44px;text-align:center;color:var(--sonuk);font-size:13px}
.alt .kucuk{font-size:11px;opacity:.7;margin-bottom:0}

/* açılır pencere */
.pencere{position:fixed;inset:0;background:rgba(3,7,10,.86);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:18px;z-index:50;
  animation:solGel .3s ease both}
@keyframes solGel{from{opacity:0}to{opacity:1}}
.pencere[hidden]{display:none}
.pencere-ic{position:relative;max-width:520px;width:100%;
  animation:pencereGel .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes pencereGel{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.pencere-liste{display:grid;gap:10px;max-height:78vh;overflow-y:auto}
.pencere-liste img{border-radius:12px;width:100%}
.kapat{position:absolute;top:-14px;right:-6px;z-index:2;width:36px;height:36px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--metin);font-size:21px;line-height:1;
  cursor:pointer;transition:transform .2s,border-color .2s}
.kapat:hover{transform:rotate(90deg);border-color:var(--accent)}

@media (max-width:520px){
  .izgara{grid-template-columns:repeat(2,1fr);gap:10px}
  .kart{padding:15px 11px 12px}
  .tutar{font-size:20px}
  .banner img{height:64px}
  .ust{padding:32px 16px 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .kart,.marka,.ust h1,.alt-yazi,.rozet{opacity:1 !important;transform:none !important}
  .ust h1{-webkit-text-fill-color:var(--metin);color:var(--metin)}
  .tutar{-webkit-text-fill-color:var(--accent);color:var(--accent)}
}