/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

/* TOKENS */
:root {
  --bg: #0c0d12;
  --bg2: #0f1222;
  --ink: #f6f7ff;
  --muted: #cfd3e8;

  --royal: #7a8cff;
  --vio: #b795ff;
  --aqua: #1fe6c8;
  --gold: #ffd76a;
  --rose: #ff3b7a;

  --stroke: rgba(255, 255, 255, .14);
  --glass: rgba(255, 255, 255, .06);
  --sh-sm: 0 10px 28px rgba(0, 0, 0, .28);
  --sh-md: 0 18px 44px rgba(0, 0, 0, .38);
  --sh-lg: 0 32px 80px rgba(0, 0, 0, .55);

  --r: 20px;
}

/* BASE */
html {
  scroll-behavior: smooth
}

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 10% -10%, #2a2160 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 0%, #1a2b5c 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height: 100vh;
  overflow-x: hidden; /* yatay taşmayı kesin kapat */
}

.wrap {
  width: min(1200px, 92%);
  margin-inline: auto
}

/* BACKDROP FX */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden
}

.bg__mesh {
  position: absolute;
  inset: -20%;
  background:
    url("/assets/bg.jpg") center/cover no-repeat fixed,
    radial-gradient(600px 400px at 10% 10%, rgba(122, 140, 255, .25), transparent 60%),
    radial-gradient(600px 420px at 90% 0%, rgba(31, 230, 200, .18), transparent 60%);
  filter: blur(24px);
}

.bg__beam {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 30%;
  height: 220px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 106, .15), transparent);
  transform: skewY(-6deg);
  filter: blur(18px);
  opacity: .6;
}

.bg__noise {
  position: absolute;
  inset: -10%;
  background: url("/assets/noise.png") repeat;
  opacity:.10;
backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke)
}

.shell__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px
}

.brand h1 {
  font-family: "Unbounded", system-ui;
  letter-spacing: .5px;
  font-size: clamp(20px, 2.2vw, 28px)
}

.brand__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--aqua), var(--royal), var(--rose), var(--aqua));
  box-shadow: 0 0 0 4px #ffffff12
}

.quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  color: #0b0a16;
  background: linear-gradient(90deg, #c7fff2, #e6d8ff);
  border: 1px solid #ffffff24;
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .25s, filter .2s
}

.pill--accent {
  background: linear-gradient(90deg, #ffd6e6, #ffeabf)
}

.pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  filter: saturate(1.06)
}

.rail {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0 14px
}

.rail a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #0f1328;
  border: 1px solid #ffffff14;
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .25s, filter .2s
}

.rail a:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--sh-md);
  filter: saturate(1.1)
}

.rail img {
  width: 18px;
  height: 18px;
  filter: invert(1)
}

/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  padding: 28px 0
}

@media (max-width:960px) {
  .hero {
    grid-template-columns: 1fr
  }
}

.hero__left h2 {
  font-family: "Unbounded";
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(22px, 3.2vw, 40px);
  text-shadow: 0 2px 22px rgba(154, 130, 255, .4)
}

.hero__right {
  position: relative;
  min-height: 260px;
  padding: 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: linear-gradient(180deg, #161a3a, #0f1228);
  box-shadow: var(--sh-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.hero__right .badge {
  align-self: flex-start;
  background: linear-gradient(90deg, #eaf1ff, #e5dcff);
  color: #111;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid #ffffff30
}

.halo {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 60% 70%, rgba(255, 215, 106, .25), transparent 60%);
  filter: blur(22px)
}

/* HERO SPOT (Tophillbet içeride) */
.spot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--sh-sm);
}

@media (max-width:560px) {
  .spot {
    grid-template-columns: 1fr
  }
}

.spot__media {
  display: grid;
  place-items: center;
  height: 110px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .15));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
}

.spot__media img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  filter: none;
}

.spot__body h3 {
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 8px
}

.spot__body .btn {
  display: inline-block
}

/* BUTTONS (artık görünmeyecek, tam-kart linki olacak) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 12px 22px;
  border-radius: 14px;
  color: #0b0a16;
  text-decoration: none;
  font-weight: 900;
  background: linear-gradient(45deg, #e8f9ff, #efe7ff);
  box-shadow: 0 14px 32px rgba(154, 130, 255, .35);
  transition: transform .15s, box-shadow .25s;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(154, 130, 255, .5)
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #ffffffa0, transparent);
  transform: skewX(-20deg);
  transition: left .6s
}

.btn:hover::after {
  left: 140%
}

.btn--gold {
  background: linear-gradient(45deg, #fff2c4, #ffe39c);
  color: #231b33;
  box-shadow: 0 14px 32px rgba(255, 214, 104, .35)
}

/* SECTION HEAD */
.sec {
  margin-top: 22px
}

.sec__head {
  display: flex;
  justify-content: center;
  margin-bottom: 12px
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  color: #0c0b18;
  background: #f3f6ff;
  border: 1px solid #ffffff30;
  box-shadow: var(--sh-sm)
}

.tag--royal {
  background: linear-gradient(90deg, #e9f1ff, #e8e5ff)
}

.tag--gold {
  background: linear-gradient(90deg, #fff5cf, #ffe7a8)
}

.tag--violet {
  background: linear-gradient(90deg, #e9dcff, #f0eaff)
}

/* TICKETS (Ödeme Garantili) */
.tickets {
  display: grid;
  gap: 16px
}

.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px dashed #ffffff2a;
  background: linear-gradient(180deg, #121639, #0e1228);
  border-radius: 22px;
  box-shadow: var(--sh-sm);
  padding: 14px
}

@media (max-width:760px) {
  .ticket {
    grid-template-columns: 1fr
  }
}

.ticket__crown {
  position: absolute;
  right: -18px;
  top: -18px;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5))
}

.ticket__left {
  display: grid;
  place-items: center;
  height: 120px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff10, #ffffff04);
  border: 1px solid #ffffff18
}

.ticket__logo {
  height: 96px;
  object-fit: contain
}

.ticket__mid h4 {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 6px
}

.ticket__mid p {
  color: var(--muted);
  font-size: 14px
}

/* VIP RUNWAY */
.runway-sec {
  position: relative
}

.runway {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: stretch;
  padding: 8px 0 28px
}

.runway__light {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 80%;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(255, 215, 106, .28), transparent 60%);
  filter: blur(20px);
  pointer-events: none
}

.vipcard {
  position: relative
}

.vipcard__crown {
  position: absolute;
  right: -20px;
  top: -22px;
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5))
}

.vipcard__frame {
  border: 1px solid rgba(255, 215, 106, .3);
  border-radius: 22px;
  background: linear-gradient(180deg, #1a1e48, #10142e);
  box-shadow: 0 16px 46px rgba(255, 215, 106, .18);
  padding: 16px;
  text-align: center
}

.vipcard__media {
  display: grid;
  place-items: center;
  height: 160px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff9 0, #fff1 100%);
  border: 1px solid rgba(255, 215, 106, .28);
  margin-bottom: 8px
}

.vipcard__logo {
  height: 110px;
  object-fit: contain
}

.vipcard h4 {
  font-weight: 800;
  font-size: 20px;
  margin: 8px 0 4px
}

.vipcard p {
  color: #e8d9a6;
  margin-bottom: 12px
}

/* DECK (Popüler) */
.deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px
}

.card {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, #171b3a, #2b2f66);
  box-shadow: var(--sh-sm);
  padding: 14px;
  transform-style: preserve-3d;
  transition: transform .25s, box-shadow .25s, filter .25s
}

.card:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: var(--sh-lg);
  filter: saturate(1.06)
}

.card__crown {
  position: absolute;
  right: -18px;
  top: -18px;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5))
}

.card__media {
  display: grid;
  place-items: center;
  height: 140px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff10, #ffffff04);
  border: 1px solid #ffffff18;
  margin-bottom: 8px
}

.card__logo {
  height: 100px;
  object-fit: contain
}

.card h4 {
  font-weight: 800;
  font-size: 18px;
  margin: 6px 0 2px
}

.card p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px
}

/* LEGAL & FOOT */
.legal {
  margin: 26px 0 10px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: #0f1328;
  box-shadow: var(--sh-sm);
  padding: 18px;
  color: var(--muted);
  line-height: 1.6
}

.foot {
  padding: 20px 0;
  border-top: 1px solid var(--stroke);
  text-align: center;
  color: #cfd3e8
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important
  }
}

/* ============================================================
   OVERRIDES — TEK SATIR GRID + TAM-KART TIKLANABİLİR
   ============================================================ */

/* düzen token’ları */
:root{
  --logo-col: clamp(64px, 22vw, 120px);
  --gap-x: 14px;
}

/* Ödeme Garantili kartları yatay grid */
.ticket{
  display:grid !important;
  grid-template-columns: var(--logo-col) minmax(0,1fr); /* buton kolonu kaldırıldı */
  align-items:center;
  gap: var(--gap-x);
  text-align:left;
  position: relative; /* kaplama link için */
}
.ticket__left{ grid-column:1; grid-row:1 / span 2; height:auto; background:transparent; border:none; }
.ticket__logo{ height:64px; }
.ticket__mid{ grid-column:2; min-width:0; }

/* VIP ve Popüler kartlar aynı düzen */
.vipcard__frame,
.card{
  display:grid !important;
  grid-template-columns: var(--logo-col) minmax(0,1fr); /* 2 kolon */
  align-items:center;
  gap: var(--gap-x);
  text-align:left;
  padding-right:16px;
  position: relative; /* kaplama link için */
}

.vipcard__media, .card__media{
  grid-column:1; grid-row:1 / span 2;
  height:auto; margin:0;
  border-radius:12px; background:transparent; border:none;
}
.vipcard__logo, .card__logo{ height:64px; object-fit:contain; }

.vipcard h4, .card h4, .ticket__mid h4{
  grid-column:2;
  margin:0 0 4px;
  font-size: clamp(14px, 3.8vw, 18px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vipcard p, .card p, .ticket__mid p{
  grid-column:2;
  margin:0;
  color: var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size: clamp(11px, 3.2vw, 14px);
  min-width:0;
}

/* Eski butonu görünmez-TAM KART kaplama linke çevir */
.ticket .btn,
.vipcard__frame .btn,
.card .btn{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  opacity:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  z-index:5 !important;
  pointer-events:auto !important; /* tıklanabilirlik */
}

/* Taçları mobilde gizleyip nefes aç */
@media (max-width:560px){
  .ticket__crown, .vipcard__crown, .card__crown{ display:none; }

  :root{ --logo-col: 72px; }

  .vipcard h4, .card h4, .ticket__mid h4{ font-size:14px; }
  .vipcard p, .card p, .ticket__mid p{ font-size:11px; }
}

/* Çok dar telefonlar */
@media (max-width:360px){
  .vipcard h4, .card h4, .ticket__mid h4{ font-size:13px; }
  .vipcard p, .card p, .ticket__mid p{ font-size:10.5px; }
}

/* Hover sadeleÅŸsin (dokunmatik) */
@media (hover:none){
  .card:hover{ transform:none; box-shadow:var(--sh-sm); filter:none; }
}
/* Papi-boy style banners */
.sec__head{margin-bottom:14px;}
.sec__banner{
  display:block;
  width:100%;
  max-width:980px;
  margin:0 auto 14px;
  border-radius:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
@media (max-width:720px){
  .sec__banner{border-radius:14px;}
}


/* PAPI FIX v2 — banner oturtma + sicak palet */

:root{
  --bg: #07070a;
  --bg2:#0b0a10;
}

body{
  background:
    radial-gradient(900px 520px at 14% -10%, rgba(255, 191, 105, .22) 0%, transparent 62%),
    radial-gradient(980px 620px at 88% 0%, rgba(255, 92, 77, .18) 0%, transparent 60%),
    radial-gradient(760px 520px at 40% 120%, rgba(255, 214, 104, .10) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.bg__mesh{
  filter: blur(18px) saturate(1.08);
  background:
    url("/assets/bg.jpg") center/cover no-repeat fixed,
    radial-gradient(520px 360px at 18% 10%, rgba(255, 214, 104, .22), transparent 60%),
    radial-gradient(560px 380px at 88% 0%, rgba(255, 92, 77, .16), transparent 60%),
    radial-gradient(620px 440px at 70% 75%, rgba(122, 140, 255, .08), transparent 62%);
}

.bg__beam{
  background: linear-gradient(90deg, transparent, rgba(255, 214, 104, .18), transparent);
  opacity:.75;
}

.bg__noise{
  opacity:.08;
}

/* Bannerlar tam otursun */
.sec__head{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sec__head::before{
  content:"";
  position:absolute;
  top: 22px;
  width: min(980px, 100%);
  height: 140px;
  background: radial-gradient(closest-side, rgba(255, 214, 104, .22), rgba(255, 92, 77, .10), transparent 70%);
  filter: blur(22px);
  opacity: .9;
  z-index: -1;
  pointer-events:none;
}

.sec__banner{
  width: min(980px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* Kart arka planlari bannerlarla daha uyumlu olsun */
.ticket{
  background: linear-gradient(180deg, rgba(28,16,14,.92), rgba(14,12,18,.92));
  border: 1px dashed rgba(255, 214, 104, .22);
}

.vipcard__frame,
.card{
  background: linear-gradient(180deg, rgba(22,14,16,.86), rgba(12,12,18,.86)) !important;
  border-color: rgba(255, 214, 104, .18) !important;
}

/* Tag’ler bannerin altinda daha temiz dursun */
.tag{
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
/* SECTION BANNER SIZE FIX */
.sec__head--banner{
  margin: 14px 0 12px;
}

.sec__banner{
  width: 100%;
  height: auto;
  max-height: 130px;      /* <-- asıl ayar */
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Mobilde daha da küçült */
@media (max-width: 560px){
  .sec__banner{
    max-height: 92px;
    border-radius: 14px;
  }
}
.sec__banner{
  filter: saturate(1.05) contrast(1.05);
}
/* ============================================================
   FINAL WARM THEME — kartlar & paneller bg/banner ile uyumlu
   (lacivert tonlari tamamen ezilir)
   ============================================================ */

:root{
  /* sayfa zemini zaten sicak; burasi panel/kart tonlari */
  --panel-1: rgba(22, 12, 8, .86);   /* koyu kahve-cam */
  --panel-2: rgba(12,  9, 12, .86);  /* koyu morumsu-siyah */
  --panel-stroke: rgba(255, 200, 120, .18);
  --panel-dash:   rgba(255, 200, 120, .22);
  --panel-glow:   rgba(255, 140,  40, .18);

  --navy-killer: rgba(0,0,0,0); /* sadece isim: okusun diye */
}

/* Kartlar: Odeme Garantili + VIP + Populer */
.ticket{
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
  border: 1px dashed var(--panel-dash) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,190,90,.06),
    0 0 90px var(--panel-glow) !important;
}

.vipcard__frame,
.card{
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2)) !important;
  border-color: var(--panel-stroke) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,190,90,.06),
    0 0 90px var(--panel-glow) !important;
}

/* Kart icindeki logo kutulari (lacivert hissini alir) */
.ticket__left,
.vipcard__media,
.card__media,
.spot,
.hero__right{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-color: rgba(255, 200, 120, .18) !important;
}

/* Ust ikon rail kutulari */
.rail a{
  background: rgba(22, 12, 8, .55) !important;
  border-color: rgba(255, 200, 120, .14) !important;
}

/* Legal kutusu / foot ustu panel */
.legal{
  background: rgba(22, 12, 8, .55) !important;
  border-color: rgba(255, 200, 120, .16) !important;
}

/* Metin uyumu */
.ticket__mid p,
.card p,
.vipcard p,
.legal,
.foot{
  color: rgba(255,255,255,.74) !important;
}

/* Bannerlar: contain kullaninca yan bosluk olmasin (goruntu zaten 1400x360) */
.sec__banner{
  object-fit: cover !important;
  max-height: 120px; /* bir tik daha derli toplu */
}

@media (max-width: 560px){
  .sec__banner{ max-height: 88px; }
}

/* =========================================================
   FINAL POLISH: GOLD SHINE + TELEGRAM PILL BUTTONS
   ========================================================= */

/* ---- Logo / media shine (Papi-boy glow) ---- */
.ticket__left,
.vipcard__media,
.card__media{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,190,90,.10), rgba(0,0,0,0));
  border: 1px solid rgba(255,190,90,.22);
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,190,90,.06),
    0 0 60px rgba(255,160,60,.10);
}

/* Keep the logo nicely centered */
.ticket__logo,
.vipcard__logo,
.card__logo{
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* Shimmer layer */
.ticket__left::before,
.vipcard__media::before,
.card__media::before{
  content: "";
  position: absolute;
  inset: -40% -60%;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 38%,
      rgba(255,235,200,.55) 48%,
      rgba(255,255,255,0) 58%);
  transform: translateX(-35%) rotate(8deg);
  opacity: .55;
  pointer-events: none;
  transition: transform .65s ease, opacity .65s ease;
  z-index: 1;
}

/* Soft highlight */
.ticket__left::after,
.vipcard__media::after,
.card__media::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: radial-gradient(600px 180px at 20% 10%, rgba(255,210,140,.18), transparent 60%);
  opacity: 1;
  pointer-events:none;
  z-index: 0;
}

.ticket:hover .ticket__left::before,
.vipcard:hover .vipcard__media::before,
.card:hover .card__media::before{
  transform: translateX(35%) rotate(8deg);
  opacity: .85;
}

/* ---- VIP card frame extra glow ---- */
.vipcard__frame{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,190,90,.24) !important;
  box-shadow:
    0 18px 70px rgba(0,0,0,.55),
    0 0 120px rgba(255,140,40,.14) !important;
}
.vipcard__frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(900px 240px at 50% 0%, rgba(255,210,140,.14), transparent 60%);
  pointer-events:none;
}

/* ---- Telegram buttons (class="pill" / "pill pill--accent") ---- */
.pill{
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 10px 14px;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92) !important;

  background: linear-gradient(180deg, rgba(25,12,6,.55), rgba(25,12,6,.35)) !important;
  border: 1px solid rgba(255,190,90,.20) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,190,90,.06),
    0 0 70px rgba(255,140,40,.10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.pill::before{
  content:"";
  position:absolute;
  inset:-120% -80%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 40%,
    rgba(255,235,200,.55) 50%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-40%) rotate(8deg);
  opacity: .45;
  pointer-events:none;
  transition: transform .55s ease, opacity .55s ease;
}

.pill:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(0,0,0,.52),
    0 0 110px rgba(255,140,40,.16);
  filter: saturate(1.06) contrast(1.03);
}
.pill:hover::before{
  transform: translateX(40%) rotate(8deg);
  opacity: .75;
}

/* Accent (Telegram Sohbet) */
.pill--accent{
  color: #1a0f06 !important;
  background: linear-gradient(90deg, #ffd6a6, #ffbf6b, #ff9b3f) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 120px rgba(255,140,40,.20) !important;
}
.pill--accent::before{
  opacity: .35;
}
.pill--accent:hover{
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 150px rgba(255,140,40,.26) !important;
}

/* Make pills sit nicer on small screens */
@media (max-width: 560px){
  .pill{ padding: 9px 12px; font-size: 12px; }
}