/* - modX Platform Theme - CSS Custom  */
:root{
  --radius: 12px;
  --radius-lg: 16px;
  --blur: 16px;
  --speed: .25s;
  --speed-slow: .4s;
  --focus: 0 0 0 2px #001b22, 0 0 0 4px var(--accent);
  --bg: #000000;
  --fg: #e5f9ff;
  --accent: #06b6d4;
  --accent-light: #38d9ff;
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --card-bg: rgba(6,182,212,.1);
  --border: rgba(6,182,212,.3);
  --glow: rgba(6,182,212,.5);

  /* iOS/Android webview güvenli alanlar */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* helpers */
.done .live-indicator{ filter:drop-shadow(0 0 6px #00e0ff); }
.animate-pulse{ animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
.mini-bounce{ animation:bounce 1.2s infinite; display:inline-block }
@keyframes bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:where(a,button,input,.btn,[role="button"]):focus-visible{
  outline:none; box-shadow:var(--focus); border-color:var(--accent);
}

/* Reset */
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:'Inter',sans-serif;
  background:var(--bg); color:var(--fg);
  line-height:1.6; overflow-x:hidden;
  padding-left: var(--safe-left); padding-right: var(--safe-right);
}

/* container */
.container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

/* Typography */
h1,h2,h3,h4{ font-family:'Orbitron',monospace; font-weight:700; }
.title{ color:var(--accent-light); text-shadow:0 0 10px var(--glow); }

/* Utils */
.hidden{ display:none !important; }
.text-center{ text-align:center; }

/* Loading */
.loading-screen{
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.loading-content{ text-align:center; }
.loading-spinner{
  width:50px; height:50px; border:3px solid var(--border); border-top:3px solid var(--accent);
  border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 1rem;
}
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeInDown{ from{opacity:0; transform:translateY(-30px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:translateY(0)} }
@keyframes glow{ 0%,100%{box-shadow:0 0 20px var(--glow)} 50%{box-shadow:0 0 30px var(--accent),0 0 40px var(--accent-light)} }

/* ===== Header (fixed) ===== */
.header{
  position:fixed; inset:0 0 auto 0; width:100%;
  background:rgba(0,0,0,.95); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(6,182,212,.2);
  z-index:1000;

  /* üstte boşluk bırakmamak için güvenli alan + kompakt padding */
  padding-top: max(.5rem, var(--safe-top));
  padding-bottom: .5rem;
  padding-left: max(1rem, var(--safe-left));
  padding-right: max(1rem, var(--safe-right));

  min-height: 56px; /* kompakt */
}
.header-content{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; max-width:1400px; margin:0 auto;
}

/* Logo + başlık */
.logo-section{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.logo{ width:28px; height:28px; border-radius:4px; object-fit:contain; flex-shrink:0; }
.title{
  margin:0; font-weight:700;
  font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Sağ blok: network + wallet + menü */
.header .wallet-section{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; flex:1 1 auto; min-width:0; justify-content:flex-end;
}

/* Network badge */
.network-status{
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  padding:6px 10px; border:1px solid rgba(56,217,255,.35);
  background:rgba(56,217,255,.06); border-radius:999px;
  color:#e5f9ff; font-weight:800; flex:0 0 auto;
}
.network-status .network-indicator{
  width:8px; height:8px; border-radius:50%;
  background:#38d9ff; box-shadow:0 0 8px #38d9ff;
}
.network-status .network-text{ opacity:.9; white-space:nowrap; }

/* Üç nokta menü */
.net-tools{ position:relative; z-index:10000; flex:0 0 auto; }
#net-menu.btn{ padding:6px 10px; min-width:38px; line-height:1; }
.net-tools .menu{
  position:absolute; right:0; top:36px; min-width:220px; padding:6px;
  background:rgba(0,0,0,.95); border:1px solid rgba(56,217,255,.35);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  transform-origin:top right; transform:scale(.98);
  opacity:0; pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.net-tools .menu:not(.hidden){ opacity:1; transform:scale(1); pointer-events:auto; }
.net-tools .menu button{
  display:block; width:100%; text-align:left; padding:8px 10px;
  background:transparent; color:#e5f9ff; border:0; border-radius:8px; cursor:pointer; font-weight:700;
}
.net-tools .menu button:hover{ background:rgba(56,217,255,.08); }

/* Wallet kısa kart */
.wallet-info{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(6,182,212,.05); border:1px solid rgba(6,182,212,.2);
  border-radius:12px; padding:.45rem .75rem; min-width:0; flex:0 1 60%;
}
.wallet-details{ display:flex; gap:.35rem; min-width:0; align-items:center; }
.wallet-address{
  font-family:'Courier New',monospace; font-size:.72rem; color:var(--accent);
  opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44vw;
}
.wallet-balance{ font-weight:700; color:var(--accent-light); font-size:.82rem; white-space:nowrap; }

/* Buttons */
.btn{
  padding:.7rem 1.1rem; border:1px solid transparent; border-radius:var(--radius);
  font-weight:700; cursor:pointer;
  transition:transform var(--speed), box-shadow var(--speed), background var(--speed), color var(--speed);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-size:.9rem;
  will-change:transform,box-shadow;
}
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:linear-gradient(45deg,var(--accent),var(--accent-light)); color:var(--bg); box-shadow:0 0 0 0 rgba(56,217,255,0); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(56,217,255,.25); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-secondary{ background:rgba(255,255,255,.02); color:var(--fg); border:1px solid var(--border); padding:.5rem 1rem; font-size:.8rem; border-radius:var(--radius); }
.btn-secondary:hover{ background:var(--card-bg); border-color:var(--accent); color:var(--accent); }
.btn-outline{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-outline:hover{ background:var(--accent); color:var(--bg); }
.btn-large{ padding:1rem 1.75rem; font-size:1rem; }
.btn-spinner{ width:16px; height:16px; border:2px solid transparent; border-top:2px solid currentColor; border-radius:50%; animation:spin 1s linear infinite; }

/* App shell */
.app{ padding-top:0; min-height:100vh; }
@supports(height: 100svh){ .app{ min-height:100svh; } }

/* ===== Hero ===== */
.hero{
  padding: 4rem 0; text-align:center;
 background: none !important;
}
.hero-content{ max-width:600px; margin:0 auto; }
.status-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem;
  background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.4);
  border-radius:25px; margin-bottom:2rem; backdrop-filter:blur(10px);
}
.live-indicator{ color:var(--success); font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; position:relative; }
.live-indicator::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background:var(--success); border-radius:50%; animation:pulse 2s ease-in-out infinite;
}
.status-text{ color:var(--fg); font-weight:500; font-size:.9rem; }
.hero-title{
  font-size:3rem; margin-bottom:1rem;
  background:linear-gradient(45deg,var(--accent),var(--accent-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-description{ font-size:1.25rem; margin-bottom:2rem; opacity:.8; }
.ico-info{ display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; }
.info-item{ display:flex; flex-direction:column; gap:.25rem; }
.label{ font-size:.875rem; opacity:.7; }
.value{ font-family:'Orbitron',monospace; font-weight:700; color:var(--accent-light); }

/* ===== Buy ===== */
.buy-section{ padding:4rem 0; }
.buy-card{
  max-width:500px; margin:0 auto;
  background:linear-gradient(180deg,var(--card-bg),rgba(0,0,0,.35));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem;
  backdrop-filter:blur(10px); box-shadow:0 0 30px rgba(6,182,212,.2);
}
.buy-card h3{ text-align:center; margin-bottom:2rem; color:var(--accent-light); }
.buy-form{ display:flex; flex-direction:column; gap:1.5rem; }
.gradient-border{
  position:relative; border:1px solid transparent; border-radius:var(--radius-lg);
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
             linear-gradient(120deg,var(--accent),var(--accent-light)) border-box;
}
.input-group{ position:relative; }
.input-group label{ display:block; margin-bottom:.5rem; font-weight:500; }
.input-group input{
  width:100%; padding:1rem 3.25rem 1rem 1rem; background:rgba(0,0,0,.5);
  border:1px solid var(--border); border-radius:9px; color:var(--fg); font-size:1rem;
  transition:border-color var(--speed), box-shadow var(--speed), transform var(--speed);
}
.input-group input:hover{ border-color:var(--accent); }
.input-group input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(56,217,255,.12), 0 0 14px var(--glow); }
.input-suffix{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--accent); font-weight:600; }
.conversion-info{ text-align:center; padding:1rem; background:rgba(6,182,212,.05); border-radius:8px; border:1px solid var(--border); }



/* ===== UI FIX PACK (append to the end of your CSS) ===== */

/* 1) Number input polish (no spinners, placeholder color) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.input-group input::placeholder { color: rgba(229,249,255,.45); }

/* 2) BNB suffix alignment + click-through */
.input-group { position: relative; }
.input-group .input-suffix {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .2px;
  pointer-events: none;               /* tıklamayı engelleme */
  user-select: none;
  opacity: .9;
}
.input-group input { padding-right: 3.9rem; } /* “BNB” için alan */

/* 3) Quick amount chips — normalize (works for button OR input[type=button]) */
.quick-amounts { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.quick-amounts button,
.quick-amounts .quick-btn,
.quick-amounts input[type="button"],
.quick-amounts .chip {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem .75rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(6,182,212,.10);
  color: var(--accent);
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed),
              color var(--speed), box-shadow var(--speed), transform var(--speed);
}
.quick-amounts button:hover,
.quick-amounts .quick-btn:hover,
.quick-amounts input[type="button"]:hover,
.quick-amounts .chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(56,217,255,.22);
}
.quick-amounts button:active,
.quick-amounts .quick-btn:active,
.quick-amounts input[type="button"]:active,
.quick-amounts .chip:active { transform: translateY(0); }
.quick-amounts button:focus-visible,
.quick-amounts .quick-btn:focus-visible,
.quick-amounts input[type="button"]:focus-visible,
.quick-amounts .chip:focus-visible { outline: none; box-shadow: var(--focus); }

/* 4) Estimate panel readability */
.conversion-info {
  background: rgba(6,182,212,.07);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.conversion-info .label,
.conversion-info small { opacity: .75; }

/* 5) Primary/secondary buttons: disabled & full-width inside swap card */
.buy-card .btn { width: 100%; }
.btn:disabled, .btn[disabled] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(.05);
}

/* 6) Input field hover/focus clarity (keeps your theme) */
.input-group input:hover { border-color: var(--accent); }
.input-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(56,217,255,.12), 0 0 14px var(--glow);
}

/* 7) Small screens: make chips comfortable & keep input readable */
@media (max-width: 420px) {
  .quick-amounts { gap: .4rem; }
  .quick-amounts button,
  .quick-amounts .quick-btn,
  .quick-amounts input[type="button"],
  .quick-amounts .chip { padding: .4rem .7rem; font-size: .84rem; }
  .input-group input { font-size: 1rem; padding-right: 3.9rem; }
}

/* 8) Cosmetic: swap card header spacing (prevents crowding) */
.buy-card h3 { margin-top: .25rem; margin-bottom: 1.25rem; }

/* ===== Grids & Cards ===== */
.contracts-grid,.steps-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:768px){ .contracts-grid,.steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .contracts-grid,.steps-grid{ grid-template-columns:repeat(4,1fr); } }

.contract-card,.step-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
  padding:1.5rem; text-align:center; transition:all .3s ease; backdrop-filter:blur(10px);
}
.contract-card:hover,.step-card:hover{
  transform:translateY(-5px); box-shadow:0 10px 30px rgba(6,182,212,.3); border-color:var(--accent);
}
.contract-address{
  display:block; background:rgba(0,0,0,.5); padding:.75rem; border-radius:6px;
  font-family:'Courier New',monospace; font-size:.75rem; word-break:break-all; margin:1rem 0; border:1px solid var(--border);
}
.step-number{
  width:50px; height:50px; background:linear-gradient(45deg,var(--accent),var(--accent-light));
  color:var(--bg); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.25rem; margin:0 auto 1rem;
}

/* Sections */
.contracts-section,.steps-section{ padding:4rem 0; }
.section-title{ text-align:center; margin-bottom:3rem; font-size:2rem; color:var(--accent-light); }

/* Footer */
.footer{ padding:3rem 0; border-top:1px solid var(--border); text-align:center; }
.footer-content{ display:flex; flex-direction:column; gap:1rem; align-items:center; }
.social-links{ display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; }
.social-link{ color:var(--accent); text-decoration:none; transition:color .3s ease; }
.social-link:hover{ color:var(--accent-light); }
.footer-text{ opacity:.7; font-style:italic; }

/* Toasts */
.toast-container{
  position:fixed; top:80px; right:1rem; z-index:10000;
  display:flex; flex-direction:column; gap:.5rem;
}
.toast{
  padding:1rem 1.5rem; border-radius:8px; color:#fff; font-weight:500;
  max-width:350px; animation:fadeInDown .3s ease-out; box-shadow:0 5px 15px rgba(0,0,0,.3);
}
.toast-success{ background:var(--success); }
.toast-error{ background:var(--error); }
.toast-warning{ background:var(--warning); }
.toast-info{ background:var(--accent); }

/* ===== Selection & scrollbars ===== */
::selection{ background:rgba(56,217,255,.35); color:#eaffff; }
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent),var(--accent-light)); border-radius:8px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); }

/* ===== Responsive tweaks for ALL phones ===== */

/* Uzun RPC/latency rozetlerini tablet ve küçüğünde gizle */
@media (max-width:1200px){
  #rpc-badge, .rpc-badge{ display:none !important; }
}

/* iPhone XR/Plus sınıfı (≤430px) — başlık ve rozetleri ufalt */
@media (max-width:430px){
  .title{ font-size: clamp(.96rem, 1.1vw + .6rem, 1.15rem); }
  .network-status{ padding:.34rem .6rem; gap:.4rem; font-size:.74rem; }
}

/* iPhone 12/14 Pro/Pixel 7/S20U genişlikleri (≤414/412) */
@media (max-width:414px){
  .wallet-info{ max-width:64vw; }
  .wallet-address{ max-width:40vw; }
}

/* Küçük telefonlar, Z Fold 5 dar yüz ve SE (≤390px) */
@media (max-width:390px){
  .logo{ width:26px; height:26px; }
  .header-content{ gap:.5rem; }
  .header .wallet-section{ gap:6px; }
  .wallet-info{ padding:6px 10px; max-width:60vw; }
  .wallet-address{ max-width:36vw; font-size:.7rem; }
  .wallet-balance{ font-size:.8rem; }
  .network-status .network-text{ display:none; } /* sadece mavi nokta */
}

/* En küçük cihazlar / eski SE (≤360px) */
@media (max-width:360px){
  .title{ font-size:.95rem; }
  .wallet-info{ max-width:56vw; }
  .network-status{ padding:.28rem .5rem; }
  #net-menu.btn{ min-width:32px; }
}

/* Grid: inline style ezmesi */
@media (max-width:900px){
  .games-section .container > div[style*="grid"]{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    width:100% !important;
    max-width:620px !important;
    margin:0 auto !important;
  }
}
@media (max-width:480px){
  .games-section .container > div[style*="grid"]{ max-width:94vw !important; gap:12px !important; }
  .hero{ padding:3rem 0 2rem; }
  .hero-title{ font-size:clamp(1.8rem,6vw,2.2rem); }
  .hero-description{ font-size:1rem; margin-bottom:1.2rem; }
  .ico-info{ gap:1rem; }
}

/* Kart estetiği */
.games-section .container > div[style*="grid"] > div{
  border:1px solid var(--border); border-radius:12px; backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(6,182,212,.18); padding:16px;
}
.games-section h3.section-title{ font-size:clamp(1.6rem,4.5vw,2.2rem); margin-bottom:1rem; }
.games-section h4{ font-size:1.15rem; line-height:1.2; margin-bottom:.35rem; }
.games-section p{
  font-size:.95rem; line-height:1.45; opacity:.9; margin:0 auto .75rem; max-width:30ch;
}
.games-section a[href^="https://modfxmarket.com/"]{
  display:inline-block; width:100%; text-align:center; padding:.65rem 1rem !important; border-radius:10px !important; font-weight:800;
}
@media (max-width:390px){
  .games-section a[href^="https://modfxmarket.com/"]{ padding:.7rem .9rem !important; font-size:.95rem; }
}

/* Mobil ortak düzenlemeler */
@media (max-width:768px){
  .hero-title{ font-size:2rem; }
  .ico-info{ flex-direction:column; gap:1rem; }
  .social-links{ flex-direction:column; gap:1rem; }
  .button-group{ display:flex; flex-direction:column; gap:1rem; }
  .button-group .btn{ width:100%; }
  .quick-amounts{ justify-content:center; }
  .buy-section{ padding:2.5rem 0; }
}