*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg1:#0f0f1a; --bg2:#1b1b2e;
  --accent:#a970ff; --accent-soft:rgba(169,112,255,.35);
  --panel:rgba(30,30,47,.55); --text:#fff;
  --good:#10b981;
}
body{
  font-family:'Poppins',sans-serif; color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction: column;        
  justify-content:center;        
  align-items:center;            
  gap: 18px;                    
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(82,34,184,.35) 0%, transparent 60%),
    radial-gradient(700px 400px at 120% 110%, rgba(14,165,233,.35) 0%, transparent 60%),
    linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg1));
  overflow:hidden; position:relative;
}

.scanline{position:fixed; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 2px 4px);
  mix-blend-mode:overlay; pointer-events:none; z-index:1;
}
.glow{position:fixed; inset:-10%;
  background:
    radial-gradient(900px 600px at 70% 30%, rgba(169,112,255,.12), transparent 60%),
    radial-gradient(700px 500px at 30% 80%, rgba(56,189,248,.12), transparent 60%);
  filter:blur(20px); z-index:0; pointer-events:none;
}

.container{
  position:relative; z-index:3;
  width:100%; max-width:720px;
  background:var(--panel); border:1px solid var(--accent-soft);
  border-radius:24px; padding:28px; backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.6); animation:fadeIn .7s ease;
}


@keyframes fadeIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
  flex-wrap:wrap;
}
h1{font-size:26px; color:var(--accent); display:flex; align-items:center; gap:10px; text-shadow:0 4px 18px rgba(169,112,255,.35)}
.right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:6px 10px; border-radius:999px; font-size:12px;
}
.gear-btn{
  border:1px solid var(--accent-soft); background:rgba(255,255,255,.06);
  color:var(--text); border-radius:12px; padding:10px 14px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:.2s;
}
.gear-btn:hover{box-shadow:0 0 0 4px rgba(169,112,255,.12); border-color:#c49cff}

.input-container{position:relative;margin:6px 0 14px}
input[type="text"]{
  padding:18px 18px 18px 52px; width:100%; border-radius:16px; border:1px solid var(--accent);
  background-color:rgba(17,17,28,.9); color:#fff; font-size:18px; transition:.25s;
}
input:focus{outline:none;border-color:#c49cff;box-shadow:0 0 10px rgba(169,112,255,.45)}
input::placeholder{color:#cfcfe6}
.input-container i{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:20px}

.results{
  margin-top:6px; background:rgba(169,112,255,.10);
  border:1px solid var(--accent-soft); border-radius:16px; padding:18px;
  display:grid; gap:10px;
}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:16px}
.row span.val{font-weight:600; font-size:18px; color:var(--accent)}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.60);
  display:grid; place-items:center; z-index:10; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
.modal{
  width:min(980px,92vw); background:#121222; color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.65);
  transform:translateY(16px) scale(.98); opacity:.0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.modal-backdrop.open .modal{transform:translateY(0) scale(1); opacity:1;}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.modal-title{font-weight:600; font-size:18px; display:flex; align-items:center; gap:10px}
.close-x{cursor:pointer; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06)}

.section{
  margin-top:8px; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px;
  background:#0f0f1a;
}
.section h3{font-size:14px; opacity:.9; margin-bottom:10px; letter-spacing:.2px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.card{
  background:#0f0f1a; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px; cursor:pointer;
  transition:.2s; position:relative; min-height:92px;
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.fee-badge{
  position:absolute; top:10px; left:10px; font-size:12px; color:#0b1220;
  background:#dbeafe; border:1px solid #bfdbfe; padding:4px 8px; border-radius:10px; font-weight:600;
}
.card .title{display:flex; align-items:center; gap:10px; font-weight:600; margin-top:26px}
.brand{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px; background:#111827; border:1px solid rgba(255,255,255,.1)}
.sel{outline:2px solid var(--accent); box-shadow:0 0 0 6px rgba(169,112,255,.15)}

.modal-footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:16px
}

/* ===== Toggle (Single Source of Truth) ===== */
.toggle{
  /* boyut değişkenleri */
  --w: 68px;       /* toplam genişlik */
  --h: 32px;       /* toplam yükseklik */
  --pad: 3px;      /* iç boşluk */
  --knob: 26px;    /* knob çapı */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--w);
  height: var(--h);
  padding: var(--pad);
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  overflow: hidden;  /* glow taşmasın */
  background: linear-gradient(180deg,#111,#181825);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.4);
}

.toggle input{
  position:absolute; inset:0;
  opacity:0; margin:0; cursor:pointer;
}

.knob{
  position: relative;             /* absolute değil */
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background:#1f2937;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.3);
  transform: translateX(0);       /* başlangıç */
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.toggle input:checked + .knob{
  /* (genişlik - padding*2 - knob) kadar sağa kaydır */
  transform: translateX(calc(var(--w) - (var(--pad) * 2) - var(--knob)));
  background: var(--good);
  border-color:#34d399;
  box-shadow:0 0 18px rgba(16,185,129,.65), inset 0 0 0 2px rgba(0,0,0,.2);
}

/* Mobilde kompakt ölçüler */
@media (max-width: 480px){
  .toggle{
    --w: 58px;
    --h: 30px;
    --pad: 3px;
    --knob: 24px;
  }
}

.note{font-size:12px; opacity:.85}
.save-btn{
  padding:10px 14px; border-radius:12px; cursor:pointer;
  background:var(--accent); color:#0b0b14; font-weight:700; border:none; transition:.2s;
}
.save-btn:hover{filter:brightness(1.05)}
.ghost-btn{
  padding:10px 14px; border-radius:12px; cursor:pointer;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.18)
}


.topbar.pro{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-wrap: wrap;              
}

.topbar.pro .brand{
  display:flex; align-items:center; gap:14px; min-width:0;
  flex: 1 1 360px;             
}

.topbar.pro .toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:flex-end;
  flex: 1 1 320px;                
}

.topbar.pro .logo-badge{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; font-size:18px;
  color:#e9ddff;
  background: radial-gradient(120% 120% at 30% 20%, rgba(169,112,255,.35), rgba(169,112,255,.12) 50%, rgba(255,255,255,.06) 60%);
  border:1px solid rgba(169,112,255,.45);
  box-shadow:0 6px 22px rgba(169,112,255,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}

.topbar.pro .titles{
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.topbar.pro .titles h1{
  margin:0;
  font-size:24px; font-weight:700; letter-spacing:.2px;
  color:#d8c3ff; text-shadow: 0 6px 26px rgba(169,112,255,.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar.pro .subtitle{
  margin:0; font-size:12px; opacity:.82; color:#cfcfe6;
  white-space:normal;              
  word-break:keep-all;            
  hyphens:auto;                   
  max-width: 100%;
}

.topbar.pro .chip span{max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (max-width: 720px){
  .topbar.pro .brand{flex:1 1 100%;}
  .topbar.pro .toolbar{flex:1 1 100%; justify-content:flex-start;}
  .topbar.pro .titles h1{font-size:20px}
  .topbar.pro .chip span{max-width: 160px}
}

@media (max-width: 420px){
  .topbar.pro .subtitle{display:none}
}

.topbar.pro .brand,
.topbar.pro .titles,
.topbar.pro .subtitle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.topbar.pro { position: relative; z-index: 3; }
.hairline   { position: relative; z-index: 2; }
.input-container { position: relative; z-index: 1; }

.container::before { content: none !important; }

.sig{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 5;
  text-align:center;
  pointer-events: none;         
}
.sig-by{
  display:block;
  font-size:12px;
  color:#cfcfe6;
  opacity:.75;
  margin-bottom:6px;
  letter-spacing:.2px;
}
.sig-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);       
  border:1px solid rgba(169,112,255,.28);  
  box-shadow: 0 8px 24px rgba(0,0,0,.25);  
}
.sig-text{
  font-weight:800;
  font-size:16px;
  letter-spacing:.4px;
  line-height:1;
  background-image: linear-gradient(90deg,#d9c7ff,#b28aff,#7f5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:none;
}
.sig-re{
  background-image: linear-gradient(90deg,#79e8ff,#a970ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.signature .brand:hover{
  filter: brightness(1.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.25);
  transform: translateY(-1px);
  transition: .2s ease;
}

.note-disclaimer{
  margin-top:14px;
  font-size:12px;
  line-height:1.4;
  color:#cfcfe6;
  opacity:.55;     
  text-align:center;
}


.modal{
  width:min(980px,92vw);
  max-height: 90vh;       
  overflow-y: auto;     
  background:#121222; 
  color:#fff;
  border:1px solid rgba(255,255,255,.12); 
  border-radius:20px; 
  padding:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.65);
  transform:translateY(16px) scale(.98); 
  opacity:.0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.modal::-webkit-scrollbar {
  width: 6px;
}
.modal::-webkit-scrollbar-thumb {
  background: rgba(169,112,255,.35);
  border-radius: 10px;
}

.online-badge{
  position: fixed;
  top: 10px; left: 12px;
  z-index: 9999;
  font-size: 12px;
  line-height: 1;
  color: #e9ddff;
  opacity: .80;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17,17,28,.70);
  border: 1px solid rgba(169,112,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  pointer-events: none; /* tıklamayı engelle, “çok belirgin olmasın” */
}
@media (max-width: 480px){
  .online-badge{ font-size: 11px; padding: 5px 9px; top: 8px; left: 8px; }
}

.sig{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 5;
  text-align:center;
  pointer-events: none;         
}
.sig-by{
  display:block;
  font-size:12px;
  color:#cfcfe6;
  opacity:.75;
  margin-bottom:6px;
  letter-spacing:.2px;
}
.sig-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);       
  border:1px solid rgba(169,112,255,.28);  
  box-shadow: 0 8px 24px rgba(0,0,0,.25);  
}

/* === SigmaReSeller Secret Trigger === */

.sig-brand{
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}

.sig-brand:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Tıklandıktan sonra kısa neon glow */
.sig-brand.sigma-glow{
  box-shadow:
    0 0 0 1px rgba(129,230,217,.85),
    0 0 18px rgba(129,230,217,1),
    0 10px 30px rgba(0,0,0,.7);
}

/* Secret mode aktifken container hafif yeşil vurgu alsın */
body.sigma-mode .container{
  border-color: rgba(129,230,217,.7);
  box-shadow:
    0 0 0 1px rgba(129,230,217,.35),
    0 10px 40px rgba(0,0,0,.85);
}