:root{
    --gold:#FEB706;

    /* yüzeyler */
    --panel:#0f0f11;
    --panel2:#0b0b0d;

    /* çizgiler / metinler */
    --border:rgba(255,255,255,.10);
    --borderSoft:rgba(255,255,255,.08);
    --muted:#94a3b8;
}

/* sayfa arkaplan */
body{ background-color:#000000; }

/* panel */
.glass-panel{
    position:relative;
    background: rgba(15,15,17,.95);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(0,0,0,.85);
    border-radius: 1.75rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.25rem;
    min-height: 420px;
}
@media(min-width:768px){
    .glass-panel{ padding:2rem; }
}

/* HERO */
.hero-wrap{ margin-bottom:2.25rem; }
.hero-title{
    font-size:2.25rem;
    font-weight:900;
    color:#fff;
    line-height:1.05;
    letter-spacing:-.02em;
}
@media(min-width:768px){ .hero-title{ font-size:3.25rem; } }
.hero-sub{ margin-top:.85rem; display:flex; align-items:center; gap:1rem; }
.hero-line{ width:4rem; height:.25rem; background:var(--gold); border-radius:999px; }
.hero-text{ color:var(--muted); font-size:1rem; }

/* STEP BAR */
.step-bar{ margin: 0 auto 2rem auto; max-width: 56rem; }
.step-ind{ display:flex; flex-direction:column; align-items:center; }
.step-dot{
    width:2.35rem; height:2.35rem; border-radius:.75rem;
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:.95rem;
    transition:all .25s ease;
}
.step-lab{
    margin-top:.5rem;
    font-size:.68rem; font-weight:900;
    text-transform:uppercase; letter-spacing:.08em;
    transition:all .25s ease;
}
.step-line{
    flex:1; height:2px;
    background:#1f2937;
    margin:0 .6rem;
    border-radius:999px;
    overflow:hidden;
}
.step-fill{
    height:100%;
    width:0%;
    background:var(--gold);
    transition:width .4s ease;
}

/* step content */
.step-content{ display:none; opacity:0; transition:opacity .22s ease; }
.step-content.active{ display:block; opacity:1; }

/* loader */
#global-loader{
    display:none;
    position:absolute; inset:0;
    background:rgba(0,0,0,.60);
    backdrop-filter: blur(4px);
    border-radius: 1.75rem;
    z-index:50;
    align-items:center; justify-content:center; flex-direction:column;
}
#global-loader.show{ display:flex; }

/* notify */
.gorkeu-notify{
    display:none;
    align-items:flex-start;
    gap:.75rem;
    padding:.85rem 1rem;
    border-radius: 1rem;
    background: rgba(254,183,6,.08);
    border:1px solid rgba(254,183,6,.20);
    color:#fde68a;
    margin-bottom:1rem;
}
.gorkeu-notify.show{ display:flex; }
.gorkeu-notify .ttl{ font-weight:900; color:#fcd34d; font-size:.9rem; }
.gorkeu-notify .txt{ color:#cbd5e1; font-size:.88rem; line-height:1.35; }

.field-err{
    border-color: rgba(254,183,6,.60) !important;
    box-shadow: 0 0 0 2px rgba(254,183,6,.12) !important;
}

/* inputs */
.vip-input{
    background: rgba(0,0,0,.26);
    border:1px solid rgba(255,255,255,.10);
    color:#e5e7eb;
    font-size:.95rem;
    transition: all .18s ease;
    border-radius: .85rem;
    width:100%;
    padding:.75rem 1rem;
}
.vip-input::placeholder{ color:#6b7280; }
.vip-input:focus{
    border-color: rgba(254,183,6,.55);
    box-shadow: 0 0 0 2px rgba(254,183,6,.10);
    outline:none;
}
.vip-input[readonly]{ opacity:.85; }

/* buttons */
.btn-main{
    width:100%;
    border:none;
    border-radius:.9rem;
    padding:.85rem 1rem;
    background: var(--gold);
    color:#000;
    font-weight:900;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    cursor:pointer;
    text-decoration:none;
}
.btn-main:hover{ filter: brightness(1.06); }

.btn-soft{
    width:100%;
    border-radius:.9rem;
    padding:.85rem 1rem;
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-weight:900;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    cursor:pointer;
}
.btn-soft:hover{ background: rgba(255,255,255,.05); }

.btn-back{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.45rem .9rem;
    border-radius:999px;
    background: rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.12);
    color:#94a3b8;
    font-weight:900; font-size:.78rem;
    margin-bottom:1.25rem;
    cursor:pointer;
}
.btn-back:hover{ border-color: rgba(254,183,6,.55); color:#fcd34d; }

/* grid: mobil 2, desktop max 3 */
.vip-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
@media(min-width:1024px){
    .vip-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* exchange card */
.exchange-card{
    border-radius:1.15rem;
    background: rgba(12,12,15,.96);
    border: 1px solid rgba(255,255,255,.08);
    padding: .85rem;
    transition: all .2s ease;
    user-select:none;
    display: flex;
    flex-direction: column;
}
.exchange-card.clickable{ cursor:pointer; }
.exchange-card.clickable:hover{
    border-color: rgba(254,183,6,.30);
    background: rgba(15,15,18,.99);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.50);
}
.exchange-card.locked{ cursor:default; opacity:.84; }

/* badges */
.badge{
    display:inline-flex; align-items:center; gap:.28rem;
    padding:.18rem .5rem; border-radius:999px;
    font-size:.62rem; font-weight:900;
    border:1px solid rgba(255,255,255,.10);
    color:#cbd5e1; background: rgba(0,0,0,.25);
}
.badge.ok{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.18); color:#34d399; }
.badge.wait{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.18); color:#93c5fd; }
.badge.no{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.18); color:#fca5a5; }
.badge.prio{ background: var(--gold); color:#000; border-color: transparent; font-size:.58rem; }

.ex-top{ display:flex; justify-content:space-between; gap:.35rem; align-items:flex-start; margin-bottom:.6rem; min-height:1.4rem; }
.ex-mid{ display:flex; align-items:center; gap:.65rem; margin-bottom:.6rem; }
.ex-logo{
    width:42px; height:42px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.30);
    transition: border-color .2s;
}
.exchange-card.clickable:hover .ex-logo{ border-color: rgba(254,183,6,.30); }
.ex-name{ color:#fff; font-weight:900; font-size:.9rem; line-height:1.15; }
.ex-min{
    margin-top:.28rem;
    display:inline-flex; align-items:center; gap:.28rem;
    padding:.18rem .45rem; border-radius:.55rem;
    background: rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.07);
    color:#94a3b8;
    font-size:.62rem; font-weight:800;
}
.ex-min i{ color:rgba(254,183,6,.55); font-size:.58rem; }

.ex-foot{
    margin-top: auto;
    padding-top:.6rem;
    border-top:1px solid rgba(255,255,255,.07);
    display:flex; align-items:center; justify-content:space-between;
    color:#64748b; font-size:.62rem; font-weight:700;
}
.pill-ico{
    width:28px; height:28px;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.07);
}

/* kampanya şeridi */
.camp{
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    margin-bottom: .5rem;
    padding: .38rem .55rem;
    border-radius: .75rem;
    background: rgba(254,183,6,.07);
    border: 1px solid rgba(254,183,6,.18);
}
.camp .left{
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.camp .tag{
    display:inline-flex; align-items:center; gap:.28rem;
    font-weight:900; font-size:.6rem;
    color:#fcd34d;
    margin-bottom:.1rem;
}
.camp .desc{
    color:#c9aa6a; font-weight:700; font-size:.63rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1.2;
}
.camp a{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: rgba(254,183,6,.14);
    border: 1px solid rgba(254,183,6,.28);
    color: #fcd34d;
    font-weight: 900;
    font-size: .6rem;
    padding: .22rem .48rem;
    border-radius: .5rem;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.camp a:hover{
    background: rgba(254,183,6,.24);
    border-color: rgba(254,183,6,.45);
    color: #fde68a;
}

/* ✅ FIX: Kampanyalı kartlarda tıklama kartın onclick'ine gitsin, sadece "İncele" ayrı kalsın */
.exchange-card.clickable .camp{ pointer-events: none; }
.exchange-card.clickable .camp a{ pointer-events: auto; }

/* step4 */
.vip-divider{ width:100%; height:1px; background: rgba(255,255,255,.08); margin: 1.6rem 0 1.35rem 0; }
.vip-result-actions{ display:flex; justify-content:center; margin-bottom:1.25rem; }

.tg-cta{
    display:inline-flex; align-items:center; gap:.75rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: linear-gradient(to right,#0088cc,#2299dd);
    color:#fff;
    font-weight:900;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.12);
    transition: transform .18s ease, filter .18s ease;
}
.tg-cta:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.tg-cta:active{ transform: translateY(0); }

.temp-pass-box{
    margin-top:1.1rem;
    text-align:left;
    max-width: 560px;
    margin-left:auto;
    margin-right:auto;
    background: rgba(6,78,59,.22);
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 1rem;
    padding: 1rem;
}
.temp-pass-title{ color:#34d399; font-weight:900; margin-bottom:.35rem; }
.temp-pass-row{ color:#cbd5e1; font-size:.92rem; }
.temp-pass-val{
    padding:.15rem .5rem;
    border-radius:.35rem;
    background: rgba(0,0,0,.25);
    color:#fff;
    font-family: ui-monospace, Menlo, monospace;
    margin-left:.35rem;
}
.temp-pass-note{ color:#94a3b8; font-size:.78rem; margin-top:.5rem; }

/* sosyal grid */
.vip-social-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    max-width: 760px;
    margin: 0 auto;
    text-align:left;
}
@media(min-width:768px){ .vip-social-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vip-social-card{
    display:flex; align-items:center; gap:.75rem;
    padding:.85rem .9rem;
    border-radius: 1rem;
    background: rgba(15,15,17,.92);
    border: 1px solid rgba(255,255,255,.08);
    text-decoration:none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.vip-social-card:hover{
    transform: translateY(-1px);
    background: rgba(15,15,17,.98);
    border-color: rgba(254,183,6,.22);
}
.vip-social-ico{
    width:40px; height:40px;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.25);
    color:#e5e7eb;
    flex-shrink:0;
}
.vip-social-ico[data-ico="tg"]{ background: rgba(56,189,248,.10); color:#60a5fa; border-color: rgba(56,189,248,.18); }
.vip-social-ico[data-ico="yt"]{ background: rgba(239,68,68,.10); color:#f87171; border-color: rgba(239,68,68,.18); }
.vip-social-ico[data-ico="ig"]{ background: rgba(236,72,153,.10); color:#f472b6; border-color: rgba(236,72,153,.18); }
.vip-social-ico[data-ico="news"]{ background: rgba(59,130,246,.10); color:#93c5fd; border-color: rgba(59,130,246,.18); }
.vip-social-ico[data-ico="trade"]{ background: rgba(16,185,129,.10); color:#34d399; border-color: rgba(16,185,129,.18); }

.vip-social-meta{ display:flex; flex-direction:column; min-width:0; }
.vip-social-top{ color:#64748b; font-size:.68rem; font-weight:900; }
.vip-social-main{
    color:#fff; font-size:.85rem; font-weight:900;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* howto */
.howto-card{
    margin-top: 2.25rem;
    background: rgba(15,15,17,.95);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1.5rem;
    padding: 1.5rem;
}
@media(min-width:768px){ .howto-card{ padding:2rem; } }

.howto-grid{ display:grid; gap:1rem; margin-top:1.25rem; }
@media(min-width:768px){ .howto-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(min-width:1024px){ .howto-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.howto-step{
    position:relative;
    background: rgba(15,15,17,.92);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.25rem;
    padding: 1.25rem;
    transition: all .18s ease;
}
.howto-step:hover{
    border-color: rgba(254,183,6,.22);
    background: rgba(15,15,17,.98);
    transform: translateY(-1px);
}
.howto-num{
    position:absolute; top:.9rem; right:.9rem;
    font-size:2.6rem; font-weight:900;
    color: rgba(255,255,255,.03);
    line-height:1;
}
.howto-step:hover .howto-num{ color: rgba(254,183,6,.10); }
.howto-ico{
    width:40px; height:40px;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(254,183,6,.10);
    border: 1px solid rgba(254,183,6,.18);
    color: var(--gold);
    margin-bottom:.85rem;
}
.howto-ttl{ color:#fff; font-weight:900; font-size:1rem; margin-bottom:.35rem; }
.howto-txt{ color:#94a3b8; font-size:.88rem; line-height:1.55; }

/* STEP 2 kampanya kutusu - MOR tema */
.s2-camp{
  border-color: rgba(168, 85, 247, .35) !important;   /* purple */
  background: rgba(168, 85, 247, .08) !important;
}
.s2-camp > div:first-child{
  background: rgba(168, 85, 247, .14) !important;
  border-bottom-color: rgba(168, 85, 247, .22) !important;
}
.s2-camp > div:first-child i{
  color: rgba(216, 180, 254, 1) !important;
}
.s2-camp > div:first-child span{
  color: rgba(233, 213, 255, 1) !important;
}
#s2-camp-url{
  background: rgba(168, 85, 247, .16) !important;
  border-color: rgba(168, 85, 247, .32) !important;
  color: rgba(233, 213, 255, 1) !important;
}
#s2-camp-url:hover{
  background: rgba(168, 85, 247, .26) !important;
  border-color: rgba(168, 85, 247, .48) !important;
}

/* Min bakiye: mobil minimal, desktop hafif chip */
.ex-min{
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  color: rgba(148,163,184,.95);
  font-size: .68rem;
  font-weight: 800;
}
.ex-min i{
  color: rgba(148,163,184,.85);
  font-size: .62rem;
}

/* Desktop'ta hafif chip görünümü (minimal) */
@media(min-width:1024px){
  .ex-min{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.22rem .5rem;
    border-radius:.6rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    color:#cbd5e1;
    font-size:.64rem;
  }
  .ex-min i{ color: rgba(254,183,6,.65); }
}

/* ÖNERİLEN badge: mobil minimal outline */
.badge.prio{
  background: transparent;
  border: 1px solid rgba(254,183,6,.35);
  color: rgba(254,183,6,.95);
  font-size: .56rem;
  padding: .14rem .45rem;
  letter-spacing: .06em;
}

/* Desktop'ta daha farklı tarz: köşede küçük "tag" */
@media(min-width:1024px){
  .ex-top{ position: relative; }

  .badge.prio{
    position: absolute;
    right: .1rem;
    top: -.45rem;
    background: rgba(254,183,6,.12);
    border: 1px solid rgba(254,183,6,.28);
    color: #fde68a;
    padding: .2rem .55rem;
    border-radius: .75rem;
    font-size: .55rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}