:root{
  --bg0:#07060b;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);

  --glass:rgba(25, 22, 36, .56);
  --glass2:rgba(18, 16, 26, .42);
  --stroke:rgba(255,255,255,.10);

  --p1: rgba(171, 120, 255, .50);
  --p2: rgba(255, 105, 220, .28);

  --shadow: 0 34px 120px rgba(0,0,0,.75);
  --r: 26px;
  --r2: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg0);
  color: var(--text);
  overflow-x:hidden;
}

/* background */
.bg{ position:fixed; inset:0; z-index:-5; }
.bgImg{
  position:absolute; inset:-16px;
  background: url("bg.webp") center/cover no-repeat;
  filter: blur(8px) saturate(1.08);
  transform: scale(1.06);
  opacity:.72;
}
.bgGlow{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 16%, rgba(171,120,255,.28), transparent 60%),
    radial-gradient(860px 520px at 80% 18%, rgba(255,105,220,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.78));
}

.primaryBtn, .ghostBtn, .aboutBtn, .navPill{
  font-family: Manrope, Inter, system-ui, sans-serif;
}
.primaryBtn, .ghostBtn{
  letter-spacing: .2px;
  font-weight: 800;
}

/* layout */
.shell{
  width:min(1220px, 100%);
  margin:0 auto;
  padding: 26px 18px 40px;
  min-height: 100vh;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 18px 18px;
  border-radius: var(--r);
  background: rgba(25, 22, 36, .40);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
  position:relative;
  z-index: 80;
}

.leftPill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, rgba(171,120,255,.9), rgba(255,105,220,.8));
  box-shadow: 0 0 0 6px rgba(171,120,255,.12);
}
.pillText{
  font-weight:800;
  letter-spacing:.6px;
  font-size:12px;
  color: rgba(255,255,255,.78);
}

/* desktop nav pills */
.navPills{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}
.navIndicator{ display:none !important; }
.navPill{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.70);

  height: 42px;
  padding: 0 16px;
  border-radius: 999px;

  font-weight: 800;
  line-height: 1;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: background .18s ease, color .18s ease, transform .16s ease;
}
.navPill.isActive{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  box-shadow:none;
}
.navPill:active{ transform: scale(.985); }

.aboutBtn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.86);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight:800;
  cursor:pointer;
}
.aboutBtn:hover{
  border-color: rgba(171,120,255,.28);
  box-shadow: 0 0 0 6px rgba(171,120,255,.10);
}

/* MOBILE CUSTOM DROPDOWN */
.navMobile{ display:none; position:relative; }
.navMenuBtn{
  height:42px;
  padding: 0 14px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.navMenuBtn svg{ width:18px; height:18px; opacity:.9; }
.navMenu{
  position:absolute;
  top: 52px;
  left:0;
  right:0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,8,14,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
  padding: 8px;
  z-index: 9999;
}
.navMenu[hidden]{ display:none !important; }
.navMenuItem{
  width:100%;
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.86);
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding: 0 12px;
  gap:10px;
}
.navMenuItem svg{ width:18px;height:18px; opacity:.9; }
.navMenuItem + .navMenuItem{ margin-top:8px; }
.navMenuItem.isActive{
  border-color: rgba(171,120,255,.40);
  box-shadow: 0 0 0 7px rgba(171,120,255,.10);
}

/* grid */
.grid{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap:18px;
  margin-top:16px;
  align-items: stretch;
}

/* card */
.card{
  position:relative;
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 12% 10%, rgba(171,120,255,.18), transparent 62%),
    radial-gradient(520px 260px at 86% 12%, rgba(255,105,220,.14), transparent 60%);
  pointer-events:none;
}
.card > *{ position:relative; }

.brandRow{
  padding: 18px 18px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.brandTitle{ display:flex; align-items:center; gap:14px; }
.logo{
  width:48px;height:48px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.logoImg{ width:34px; height:34px; object-fit:cover; border-radius: 12px; }

.title{
  margin:0;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-.8px;
}
.builtBy{
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

.miniBadges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.miniBadge{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.66);
  font-size:13px;
}

.inputBlock{ padding: 10px 18px 10px; }
.label{
  display:block;
  font-size:13px;
  color: rgba(255,255,255,.66);
  margin-bottom:8px;
}
.inputWrap{ position:relative; }
.prefix{
  position:absolute; left:14px; top:50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.60);
  font-weight:800;
}
.input{
  width:100%;
  height:54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,16,26,.55);
  color: rgba(255,255,255,.92);
  padding: 0 46px 0 34px;
  font-size:16px;
  outline:none;
}
.input:focus{
  border-color: rgba(171,120,255,.35);
  box-shadow: 0 0 0 7px rgba(171,120,255,.12);
}
.clearBtn{
  position:absolute; right:10px; top:50%;
  transform: translateY(-50%);
  width:34px;height:34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  cursor:pointer;
}
.hint{
  margin-top:8px;
  font-size:12px;
  color: rgba(255,255,255,.55);
}
.hint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
}
.error{
  margin-top:10px;
  font-size:13px;
  color: rgba(255,120,150,.95);
}

/* results */
.results{
  padding: 10px 18px 18px;
  display:grid;
  gap:10px;
}
.resultRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
}
.rLabel{
  color: rgba(255,255,255,.64);
  font-size:13px;
  font-weight:700;
}
.rValue{
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
}
.rValue.big{
  font-size:30px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(171,120,255,.92), rgba(255,105,220,.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metaLine{
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,.58);
}

.footerRow{
  padding: 0 18px 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.primaryBtn, .ghostBtn{
  height:46px;
  border-radius: 16px;
  font-weight:900;
  cursor:pointer;
}
.primaryBtn{
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(171,120,255,.32), rgba(255,105,220,.18));
  color: rgba(255,255,255,.90);
  padding: 0 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.40);
}
.primaryBtn:active{ transform: translateY(1px); }

.ghostBtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  padding: 0 14px;
}
.ghostBtn:hover{
  border-color: rgba(171,120,255,.25);
  box-shadow: 0 0 0 7px rgba(171,120,255,.10);
}

/* right big card */
.bigCard{
  padding: 18px;
  min-height: 480px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.bigHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.bigTitle{
  font-weight:900;
  letter-spacing:2px;
  font-size:14px;
  color: rgba(255,255,255,.70);
}
.bigSub{
  font-size:12px;
  color: rgba(255,255,255,.55);
}
.bigTime{
  text-align:center;
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  letter-spacing: 2px;
  margin: 20px 0 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(171,120,255,.92), rgba(255,105,220,.72));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.smallGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.smallCard{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.smallLabel{
  font-size:12px;
  color: rgba(255,255,255,.58);
  margin-bottom:6px;
  font-weight:700;
}
.smallValue{
  font-size:16px;
  font-weight:900;
  color: rgba(255,255,255,.88);
}

/* HISTORY TAB */
.feesHead{
  padding: 18px 18px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.sectionTitle{
  font-weight: 900;
  font-size: 18px;
  letter-spacing:.2px;
}
.sectionSub{
  margin-top:6px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.historyCard{
  display:flex;
  flex-direction:column;
}

/* ✅ asıl fix: 5-6 item sonra scroll (kart uzamasın) */
.historyScroll{
  padding: 10px 18px 18px;
  display:grid;
  gap:10px;

  max-height: 420px;   /* 5-6 satır -> istersen 360px yap */
  overflow:auto;
  overscroll-behavior: contain;
  min-height: 0;
}

/* Scrollbar */
.historyScroll::-webkit-scrollbar{ width: 10px; }
.historyScroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.22);
  border-radius: 999px;
}
.historyScroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}
.historyScroll{ scrollbar-color: rgba(0,0,0,.60) rgba(0,0,0,.22); scrollbar-width: thin; }

.historyFooter{
  margin-top:auto;
  padding: 10px 14px 14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.historyRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
}
.historyLeft{ min-width:0; }
.historyTitle{
  font-weight:900;
  font-size:14px;
  color: rgba(255,255,255,.90);
}
.historySub{
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,.56);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.historyRight{ text-align:right; white-space:nowrap; }
.historyFinal{
  font-weight:900;
  font-size:16px;
  color: rgba(255,255,255,.92);
}
.historyMeta{
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,.58);
}
.historyEmpty{
  padding: 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.62);
  font-size: 13px;
  text-align:center;
}

/* Tab panels */
.tabPanel{ display:none; }
.tabPanel.isActive{ display:grid; }

/* ✅ eski hissiyat: kart boyları eşit */
.tabPanel{ min-height: 560px; }
.grid > .card{ min-height: 520px; }

@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .bigTime{ font-size: 60px; }
  .cards{ grid-template-columns: 1fr; }
  .customGrid{ grid-template-columns: 1fr; }

  .grid > .card{ min-height: auto; }
  .tabPanel{ min-height: auto; }
}

@media (max-width: 720px){
  .leftPill{ display:none; }
  .navPills{ display:none; }
  .navMobile{ display:block; }

  .aboutBtn{ padding: 10px 12px; }

  /* modal full screen-ish */
  .modal{
    left:12px;
    right:12px;
    top:12px;
    transform:none;
    width:auto;
    max-height: calc(100vh - 24px);
  }
  .modal.open{ transform:none; }
  .modalBody{ max-height: calc(100vh - 190px); }

  /* custom pop */
  .customPop{
    left: 12px;
    right: 12px;
    top: 12px;
    transform: none;
    width: auto;
  }
  .customPop.open{ transform:none; }
}

/* MODAL (Settings) */
.modalBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  z-index:1000;
  opacity:0;
  transition: opacity .18s ease;
}
.modalBackdrop.open{ opacity:1; }

.modal{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -46%) scale(.985);
  width: min(940px, calc(100% - 24px));
  border-radius: var(--r);
  background: rgba(14, 12, 20, .90);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  z-index:1001;
  overflow:hidden;
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
}
.modal.open{
  opacity:1;
  transform: translate(-50%, -50%) scale(1);
}
.modal.closing{
  opacity:0;
  transform: translate(-50%, -46%) scale(.985);
}

.modalHead{
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modalTitle{ font-weight: 900; font-size:16px; }
.modalSub{ color: rgba(255,255,255,.56); font-size:12px; margin-top:4px; }
.xBtn{
  width:42px;height:42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.82);
  cursor:pointer;
}

.modalBody{
  padding: 16px 18px;
  max-height: calc(100vh - 220px);
  overflow:auto;
}
.modalBody::-webkit-scrollbar{ width: 10px; }
.modalBody::-webkit-scrollbar-track{ background: rgba(0,0,0,.22); border-radius:999px; }
.modalBody::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius:999px;
}

.blockTitle{
  font-weight: 900;
  color: rgba(255,255,255,.74);
  font-size:12px;
  letter-spacing:1.2px;
  margin-bottom:10px;
}
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.optCard{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  cursor:pointer;
  user-select:none;
  min-height: 72px;
}
.optCard:hover{
  border-color: rgba(171,120,255,.26);
  box-shadow: 0 0 0 7px rgba(171,120,255,.10);
}
.optCard.isSel{
  border-color: rgba(171,120,255,.40);
  box-shadow: 0 0 0 7px rgba(171,120,255,.12);
}
.optTop{ font-weight: 900; color: rgba(255,255,255,.90); }
.optSub{ margin-top:6px; color: rgba(255,255,255,.58); font-size:12px; }

.toggleRow{
  margin-top: 16px;
  display:flex;
  align-items:center;
  gap:14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.toggle{ position:relative; width:52px; height:30px; }
.toggle input{ display:none; }
.slider{
  position:absolute; inset:0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
  transition: .2s ease;
    cursor: pointer;

}
.slider::after{
  content:"";
  position:absolute;
  top:50%; left:4px;
  transform: translateY(-50%);
  width:22px; height:22px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  transition: .2s ease;
}
.toggle input:checked + .slider{
  background: linear-gradient(135deg, rgba(171,120,255,.45), rgba(255,105,220,.22));
}
.toggle input:checked + .slider::after{ left: 26px; }
.toggleTop{ font-weight:900; }
.toggleSub{ font-size:12px; color: rgba(255,255,255,.55); margin-top:4px; }

.modalFoot{
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* CUSTOM POPUP */
.customPopBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  z-index: 2000;
  opacity: 0;
  transition: opacity .18s ease;
}
.customPopBackdrop.open{ opacity: 1; }

.customPop{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(.985);
  width: min(720px, calc(100% - 24px));
  border-radius: var(--r);
  background: rgba(14, 12, 20, .92);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  z-index: 2001;
  overflow: hidden;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.customPop.open{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.customPopHead{
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.customPopTitle{ font-weight: 900; font-size:16px; }
.customPopSub{ color: rgba(255,255,255,.56); font-size:12px; margin-top:4px; }
.customPopBody{ padding: 16px 18px; }
.customPopFoot{
  padding: 14px 18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.customGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.customField label{
  display:block;
  font-size:12px;
  color: rgba(255,255,255,.62);
  margin-bottom:8px;
  font-weight:800;
}
.customField input{
  width:100%;
  height:46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,16,26,.55);
  color: rgba(255,255,255,.92);
  padding: 0 12px;
  outline:none;
  font-weight:900;
}
.customField input:focus{
  border-color: rgba(171,120,255,.35);
  box-shadow: 0 0 0 7px rgba(171,120,255,.12);
}
.customHint{
  margin-top:10px;
  font-size:12px;
  color: rgba(255,255,255,.56);
}
/* =========================
   BUTTON BAR: tüm tablarda sağ alt sabit
   - kart flex column
   - buton satırı en alta
   - içerik uzarsa üst kısım scroll olur
   ========================= */

/* Bu tabların içindeki KARTLAR column olsun ki footer alta itilsin */
#tab-calc .card,
#tab-fees .card,
#tab-payout .card{
  display:flex;
  flex-direction:column;
}

/* Calculator / Payout buton satırı: sağ altta */
#tab-calc .footerRow,
#tab-payout .footerRow{
  margin-top:auto;              /* en alta iter */
  justify-content:flex-end;     /* sağa iter */
  padding: 12px 18px 18px;
}

/* History’deki footer zaten ayrı class: sağ altta */
#tab-fees .historyFooter{
  margin-top:auto;
  justify-content:flex-end;
  padding: 12px 18px 18px;
}

/* Eğer üst içerik uzayıp butonları itiyorsa:
   kart içindeki içerik alanlarını scroll yap */
#tab-fees .historyScroll{
  /* senin istediğin 5-6 satır */
  max-height: 400px;
  overflow:auto;
}

/* Calculator'da içerik uzarsa (bazı cihazlarda):
   sonuç alanı scroll olsun, buton sabit kalsın */
#tab-calc .results{
  overflow:auto;
  min-height: 0;
}

/* Payout'ta da içerik uzarsa */
#tab-payout .results{
  overflow:auto;
  min-height: 0;
}

.oldVerBtn{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height: 44px;
  padding: 0 14px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.86);

  font-family: Manrope, Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;

  text-decoration:none;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.oldVerBtn:hover{
  border-color: rgba(171,120,255,.30);
  box-shadow: 0 0 0 7px rgba(171,120,255,.10), 0 18px 70px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
.oldVerBtn:active{ transform: translateY(0); }



/* =========================
   ACTIVE POPUP (Clean mini)
========================= */

/* Dot tıklanabilir his */
.leftPill .dot#activeDot{
  cursor: pointer;
  position: relative;
}
.leftPill .dot#activeDot:hover{
  box-shadow: 0 0 0 6px rgba(171,120,255,.14);
}
.leftPill .dot#activeDot:active{
  transform: scale(.96);
}

/* Active modal compact */
.modal.activePop{
  width: min(360px, calc(100vw - 22px));
  border-radius: 20px;
}

/* header compact */
.modal.activePop .modalHead{
  padding: 12px 12px;
}
.modal.activePop .modalTitle{
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .9;
}
.modal.activePop .modalSub{
  font-size: 12px;
  opacity: .65;
  margin-top: 6px;
}

/* body */
.modal.activePop .modalBody{
  padding: 10px 12px 14px;
}

/* number: not huge, clean */
#activePopCount{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  font-size: 38px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.92);
}

/* hint smaller */
.modal.activePop .activeHint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .65;
}

/* footer only OK */
.modal.activePop .modalFoot{
  padding: 12px 12px 12px;
}
.modal.activePop .primaryBtn{
  width: 100%;
  height: 44px;
  border-radius: 14px;
}

/* backdrop focus */
#activePopBackdrop.modalBackdrop.open{
  background: rgba(0,0,0,.60);
}



/* =========================
   PAYOUT RIGHT CARD (Withdraw Methods)
   ========================= */
#tab-payout .payoutRight .methodsWrap{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#tab-payout .methodsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  #tab-payout .methodsGrid{ grid-template-columns: 1fr; }
}

/* method cards generated by JS: .mCard, .mCard.isActive */
#tab-payout .mCard{
      /* button default siyah yazıyı düzelt */
  color: rgba(255,255,255,.92);
  font-family: Manrope, Inter, system-ui, sans-serif;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 14px 14px 12px;
  cursor: pointer;
  transition: .18s ease;
  position: relative;
  overflow: hidden;
}
#tab-payout .mCard:hover{
  border-color: rgba(171,120,255,.35);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
#tab-payout .mCard.isActive{
  border-color: rgba(171,120,255,.55);
  box-shadow: 0 0 0 2px rgba(171,120,255,.14) inset;
}
#tab-payout .mTitle{
  font-weight: 800;
  letter-spacing: -0.02em;
}
#tab-payout .mSub{
  margin-top: 6px;
  opacity: .75;
  font-size: 13px;
}
#tab-payout .smallHint{
  margin-top: 6px;
  font-size: 12px;
  opacity: .55;
}
#tab-payout .muted{ opacity:.55; font-weight:600; }


/* =========================
   Payout Results Style (same as Results section)
   ========================= */
#tab-payout .kv{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

#tab-payout .kvRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.15));
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

#tab-payout .kvRow .k{
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,.78);
}

#tab-payout .kvRow .v{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .3px;
  color: #c8b8ff;
}

/* Payout results: same spacing as main Results block */
#tab-payout .payoutResults{
  margin-top: 14px;
}

/* Eğer Results bloğunda içeride ekstra padding varsa bunu da aynı yap */
#tab-payout .payoutResults .resultRow{
  margin: 0; /* bazı temalarda row margin bırakıyor */
}

/* Accent value like "After withdraw" */
#tab-payout .payoutResults .resultValue.isAccent{
  font-size: 32px;
  font-weight: 900;
  color: rgba(184, 150, 255, .95);
  text-shadow: 0 10px 30px rgba(170,120,255,.25);
}
/* Payout meta line padding fix (kenara yapışmasın) */
#tab-payout #payoutMeta{
  margin-top: 10px;
  padding: 0 18px;          /* Results satırlarıyla aynı iç boşluk */
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
  line-height: 1.35;
}
#tab-payout .hideInPayout{ display:none; }


/* Payout sağ kart büyümesin: içerik içeride scroll olsun */
#tab-payout .payoutRight{
  height: 520px;          /* burası calculator görünümünle aynı olacak şekilde */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Üst başlık sabit kalsın */
#tab-payout .payoutRight .bigHead{
  flex: 0 0 auto;
}

/* Methods kısmı uzarsa burada scroll olsun */
#tab-payout .payoutRight .methodsWrap{
  flex: 1 1 auto;
  min-height: 0;          /* önemli: scroll çalışsın diye */
  overflow: auto;
  padding-right: 6px;     /* scrollbar içeriğe girmesin */
}

/* Alttaki rate kartları da sabit kalsın */
#tab-payout .payoutRight .payoutRatesGrid{
  flex: 0 0 auto;
}

/* =========================
   PAYOUT: sağ kartı (Withdraw Methods) daha kompakt yap
   - scroll yok, uzama azalır
   - yapıyı bozmaz (sadece sıkıştırır)
   ========================= */

/* başlık alanını incelt */
#tab-payout .payoutRight .bigHead{
  padding-bottom: 10px;
  margin-bottom: 6px;
}
#tab-payout .payoutRight .bigSub{
  display:none; /* "Choose how you cash out" satırı yükseklik yiyor */
}

/* methods bloğu daha sıkı */
#tab-payout .payoutRight .methodsWrap{
  margin-top: 10px;
  gap: 10px;
}

/* "Methods" başlığı gereksiz uzunluk veriyorsa küçült */
#tab-payout .payoutRight .blockTitle{
  font-size: 12px;
  opacity: .7;
  margin-bottom: -2px;
}

/* DESKTOP: 3 kolon -> yükseklik düşer */
#tab-payout .methodsGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* laptop/orta ekranlarda 2 kolon kalsın */
@media (max-width: 1100px){
  #tab-payout .methodsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobilde zaten 1 kolona düşüyor (sende var), aynı kalsın */
@media (max-width: 980px){
  #tab-payout .methodsGrid{ grid-template-columns: 1fr; }
}

/* method kartlarını incelt */
#tab-payout .mCard{
  padding: 10px 12px 10px;
  border-radius: 14px;
}
#tab-payout .mTitle{
  font-size: 13px;
}
#tab-payout .mSub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .72;
}

/* toggle satırını kompaktlaştır */
#tab-payout .payoutRight .toggleRow{
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 14px;
}
#tab-payout .payoutRight .toggleTop{
  font-size: 12.5px;
}
#tab-payout .payoutRight .toggleSub{
  display:none; 
}

/* alt rate kartlarını sıkıştır */
#tab-payout .payoutRatesGrid{
  margin-top: 12px !important;
  gap: 10px;
}
#tab-payout .payoutRatesGrid .smallCard{
  padding: 10px 12px;
  border-radius: 14px;
}
#tab-payout .payoutRatesGrid .smallLabel{
  font-size: 11.5px;
}
#tab-payout .payoutRatesGrid .smallValue{
  font-size: 14px;
}