*{
  box-sizing:border-box;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* TEMEL TEMA */
:root{
  --bg-color:#050814;
  --text-color:#ffffff;
  --accent:#ffb347;
  --accent-2:#ff7a18;
  --card-bg:rgba(255,255,255,0.08);
  --card-strong-bg:rgba(255,255,255,0.10);
  --stat-bg:rgba(255,255,255,0.06);
  --input-bg:rgba(255,255,255,0.14);
  --badge-bg:#7c5cff;
  --danger:#ff4d4f;
  --success:#2ecc71;
  --muted:#9ca3af;
  --shadow-soft:0 18px 40px rgba(0,0,0,0.6);
  --shadow-strong:0 28px 70px rgba(0,0,0,0.85);
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg-color);
  color:var(--text-color);
}

/* ARKA PLAN GLOW */
.background{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to bottom,
      #7dd3fc 0%,
      #e0f2fe 30%,
      #bbf7d0 55%,
      #4ade80 76%,
      #15803d 100%
    ),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(22,163,74,0.8), transparent 60%),
    radial-gradient(ellipse at 80% 75%, rgba(21,128,61,0.85), transparent 60%);
  background-blend-mode:soft-light, normal;
  filter:brightness(0.95);
}

/* ANA LAYOUT */
.nova-shell{
  max-width:min(1600px, 96vw);
  margin:32px auto 40px;
  padding:0 10px;
  display:flex;
  gap:22px;
  align-items:stretch;
}

/* SOL KOLON: SIDEBAR + USER */
.sidebar-column{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}

/* MINI PILL SIDEBAR (SOLDA) */
.glass-sidebar{
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 10px;
  width:76px;
  border-radius:999px;
  background:rgba(5,8,20,0.6);
  backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 22px 50px rgba(0,0,0,0.8);
  border:1px solid rgba(255,255,255,0.08);

  /* 🔥 CRITICAL satır */
  align-items:center;     /* butonların yuvarlaklarını ORTALAR */
}


/* ORTAK SIDEBAR BUTONU */
.sidebar-btn{
  width:46px;
  height:46px;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0.8;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.sidebar-btn:hover{
  opacity:1;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,0.55);
}

.sidebar-btn.active{
  opacity:1;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 18px 40px rgba(0,0,0,0.85);
}

/* ICONLAR — tam ortalı */
.sidebar-icon{
  display:block;
  font-size:18px;
  line-height:1;
  color:#ffffff;
}

/* USER — ayrı glass kapsayıcı */
.user-glass{
  margin-top:16px;
  width:76px;
  padding:11px 0;
  border-radius:999px;
  background:rgba(5,8,20,0.55);
  backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 20px 45px rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
}

.user-btn{
  opacity:1;
}

/* MOBİL — sidebar yataylaşıyor */
@media (max-width: 768px){
  .sidebar-column{
    flex-direction:row;
    gap:10px;
    align-items:center;
    justify-content:center;
  }

  .user-glass{
    margin-top:0;      /* 🔥 mobilde aşağı kaymayı sıfırlar */
  }
}
@media (max-width: 768px){
  .price-extreme{
    display:none;
  }
}


/* ANA DASHBOARD CARD */
.dashboard{
  flex:1;
  margin:0;
  padding:32px 32px 26px;
  border-radius:30px;
  background:linear-gradient(135deg,
    rgba(10,12,25,0.78),
    rgba(12,16,35,0.82)
  );
  backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 26px 70px rgba(0,0,0,0.75);
  border:1px solid rgba(255,255,255,0.08);
}

/* ÜST BAR */
.dash-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.title-block h1{
  margin:0;
  font-size:22px;
  letter-spacing:.03em;
}

.last-updated{
  margin-top:6px;
  font-size:12px;
  opacity:.75;
}

.header-right{
  display:flex;
  align-items:center;
  gap:16px;
}

/* CONTACT INLINE */
.contact-inline{
  display:flex;
  align-items:center;
  gap:10px;
}

.contact-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  opacity:.75;
}

.contact-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  box-shadow:0 10px 20px rgba(0,0,0,0.4);
  overflow:hidden;
}

.contact-link img{
  width:18px;
  height:18px;
}

/* SEARCH */
.search-row{
  margin:8px 0 16px;
}

.search-row input{
  width:100%;
  border-radius:18px;
  border:none;
  padding:14px 18px;
  font-size:14px;
  background:var(--input-bg);
  color:var(--text-color);
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.search-row input::placeholder{
  color:rgba(255,255,255,0.45);
}

/* VARIANT TOGGLE */
.variant-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

.variant-toggle button{
  border:none;
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,0.08);
  color:var(--text-color);
  cursor:pointer;
  transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.variant-toggle button:hover{
  background:rgba(255,255,255,0.16);
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,0.5);
}

.variant-toggle button.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 12px 26px rgba(0,0,0,0.7);
}

/* STATS */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin:5px 0 22px;
}

.stat{
  padding:18px;
  border-radius:18px;
  background:var(--stat-bg);
  box-shadow:0 16px 30px rgba(0,0,0,0.45);
  font-size:13px;
  color:rgba(255,255,255,0.86);
}

.stat b{
  font-size:16px;
}

/* ANA GRID */
.main.main-full{
  grid-template-columns:1fr;   /* artık tek kolon */
}


/* SOL KOLON */
.left-column{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* PET GRID */
.pet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:14px;
}

.pet-card{
  position:relative;
  padding:14px 12px 12px;
  border-radius:20px;
  background:var(--card-bg);
  box-shadow:0 16px 32px rgba(0,0,0,0.55);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.pet-card:hover{
  transform:translateY(-4px);
  background:var(--card-strong-bg);
  box-shadow:0 24px 40px rgba(0,0,0,0.8);
}

.fav-btn{
  position:absolute;
  top:10px;
  right:10px;
  border:none;
  border-radius:999px;
  width:26px;
  height:26px;
  font-size:13px;
  cursor:pointer;
  background:rgba(0,0,0,0.5);
  color:#fff;
}

.fav-btn.active{
  background:#ff4d8d;
}

.pet-image-box{
  width:80px;
  height:80px;
  border-radius:20px;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
}

.pet-image-box img{
  max-width:100%;
  max-height:100%;
}

.pet-card h3{
  margin:0 0 2px;
  font-size:14px;
}

.pet-card span{
  font-size:11px;
  opacity:.8;
}

.price-display{
  margin:8px 0;
  font-weight:600;
  font-size:14px;
}

/* CHANGE INDICATOR */
.change-indicator{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
}

.change-indicator span:first-child{
  font-size:10px;
}

.change-up{ color:var(--success); }
.change-down{ color:var(--danger); }

/* PAGINATION */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}

.pagination button{
  border:none;
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  background:rgba(255,255,255,0.1);
  color:var(--text-color);
  cursor:pointer;
}

.pagination span{
  font-size:12px;
}

/* SAĞ PANEL */
.side-card{
  padding:16px 16px 14px;
  border-radius:22px;
  background:var(--card-strong-bg);
  box-shadow:0 18px 38px rgba(0,0,0,0.75);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.side-card h3{
  margin:0;
  font-size:15px;
}

.side-card p{
  margin:0;
  font-size:12px;
  opacity:.8;
}

.highlight{
  margin-top:4px;
  padding:8px 10px;
  border-radius:16px;
  background:rgba(0,0,0,0.55);
  font-size:11px;
}

/* HISTORY LIST */
.history-list{
  list-style:none;
  padding:0;
  margin:8px 0 4px;
  max-height:220px;
  overflow:auto;
  font-size:11px;
}

.history-list li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
}

/* OPPORTUNITY RADAR */
.radar-title{
  margin:10px 0 4px;
  font-size:13px;
}

.radar-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:11px;
}

.radar-list li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:5px 0;
}

.radar-drop .pet-price{ color:var(--danger); }
.radar-rise .pet-price{ color:var(--success); }

/* CURRENCY WIDGET */
.currency-widget{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:1000;
  padding:8px 10px;
  border-radius:16px;
  background:rgba(5,8,20,0.6);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(0,0,0,0.8);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}

.currency-label{
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.75;
}

/* ✨ CUSTOM DROPDOWN ✨ */
.currency-dd{
  position:relative;
}

.currency-dd-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px 6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.5);
  background:rgba(255,255,255,0.06);  /* senin istediğin renk */
  color:#e5e7eb;
  font-size:12px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,0.7);
  outline:none;
}

.currency-dd-trigger:hover,
.currency-dd-trigger:focus{
  border-color:rgba(248,250,252,0.9);
  box-shadow:0 14px 30px rgba(0,0,0,0.9);
}

.currency-dd-symbol{
  font-weight:600;
}

.currency-dd-code{
  opacity:.9;
}

.currency-dd-icon{
  font-size:10px;
  transition:transform .15s ease;
}

/* Açıkken oku ters çevir */
.currency-dd.open .currency-dd-icon{
  transform:rotate(180deg);
}


/* Açılır menü */
/* Açılır menü – yukarı doğru açılıyor */
.currency-dd-menu{
  position:absolute;
  left:0;
  right:0;
  bottom:110%;             /* ⬆ yukarı açılması için */
  margin-bottom:6px;
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);   /* trigger ile aynı cam renk */
  backdrop-filter:blur(18px);
  box-shadow:0 18px 40px rgba(0,0,0,0.95);
  display:none;
}

/* Menü sadece wrapper .open iken gözüksün */
.currency-dd.open .currency-dd-menu{
  display:block;
}


.currency-dd-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 8px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:#e5e7eb;
  font-size:12px;
  cursor:pointer;
}

.currency-dd-item span:first-child{
  font-weight:600;
}

.currency-dd-item:hover{
  background:rgba(255,255,255,0.06);
}

/* status */
.currency-status{
  font-size:11px;
  opacity:.8;
}

.currency-status.error{
  color:#f87171;
}

/* RESPONSIVE */
@media (max-width: 1024px){
  .main{
    grid-template-columns:1.6fr 1fr;
  }
}

@media (max-width: 768px){
  .nova-shell{
    flex-direction:column;
    max-width:100%;
    margin:16px auto 90px;
    padding:0 12px;
    gap:18px;
  }

  .dashboard{
    padding:20px 16px 18px;
    border-radius:24px;
  }

  .glass-sidebar{
    flex-direction:row;
    width:auto;
    padding:10px 14px;
    border-radius:999px;
    align-self:center;
    justify-content:center;
    gap:10px;
  }

  .sidebar-btn{
    width:40px;
    height:40px;
  }

  .dash-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .stats{ grid-template-columns:1fr; }
  .main{ grid-template-columns:1fr; }
  .side-card{ order:-1; }

  input, select, textarea{ font-size:16px; }
  .search-row input{ font-size:16px; }
  #currencySelector{ font-size:16px; }
}


/* Anchor kullanılan sidebar butonları da güzel görünsün */
.sidebar-btn{
  text-decoration:none;
  color:inherit;
}

/* PRICE HISTORY PAGE LAYOUT */
/* Anchor kullanılan sidebar butonları link gibi gözükmesin */
.sidebar-btn{
  text-decoration:none;
  color:inherit;
}

/* PRICE HISTORY PAGE LAYOUT */
.history-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap:20px;
}

.history-main-card,
.history-detail-card{
  padding:18px 18px 16px;
  border-radius:24px;
  background:var(--card-bg);
  box-shadow:var(--shadow-strong);
}

.history-main-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.history-pill{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  font-size:11px;
  opacity:.9;
}

/* Sol taraftaki tüm pet listesi */
.history-pet-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:10px;
  max-height:420px;
  overflow:auto;
}

.history-pet-card{
  border:none;
  border-radius:16px;
  padding:10px 12px;
  background:rgba(0,0,0,0.45);
  color:var(--text-color);
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:.9;
  /* hover animasyonu istemiyorsun -> transition yok */
}

.history-pet-card:hover{
  /* hover’da hiçbir şey değişmesin */
  background:rgba(0,0,0,0.45);
  box-shadow:none;
  transform:none;
  opacity:.9;
}

.hpc-name{
  font-size:12px;
  font-weight:600;
}

.hpc-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
}

.hpc-price{
  opacity:.9;
}

.hpc-trend{
  font-size:12px;
}

/* Trend renkleri */
.trend-up   .hpc-trend{ color:var(--success); }
.trend-down .hpc-trend{ color:var(--danger); }
.trend-flat .hpc-trend{ color:var(--muted); }

/* Sağdaki detay listesi history sayfasında biraz daha yüksek olsun */
.history-page .history-list{
  max-height:420px;
}

/* History layout mobilde tek kolon */
@media (max-width: 768px){
  .history-layout{
    grid-template-columns:1fr;
  }

  .history-pet-list{
    max-height:260px;
  }
}


.history-search-row{
  margin-bottom:10px;
}

.history-search-row input{
  width:100%;
  padding:8px 10px;
  border-radius:14px;
  border:none;
  background:var(--input-bg);
  color:var(--text-color);
  font-size:12px;
  outline:none;
}
.history-search-row input::placeholder{
  color:rgba(255,255,255,0.5);
}

/* Firefox için genel ayar */
.history-pet-list,
.history-list{
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,0.85) rgba(15,23,42,0.9);
}

/* Chrome/Safari için */
.history-pet-list::-webkit-scrollbar,
.history-list::-webkit-scrollbar{
  width:6px;
}

.history-pet-list::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track{
  background:rgba(15,23,42,0.9);
  border-radius:999px;
}

.history-pet-list::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:999px;
}

.history-pet-list::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #f59e0b, #ea580c);
}






/* =============== AUTH MODAL (LOGIN / REGISTER) =============== */

/* Sadece modalda kullanılan modern font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

.auth-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.65); /* hafif kararma, blur yok */
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease-out;
}

.auth-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.auth-card{
  width:100%;
  max-width:460px;               /* PC'de biraz daha geniş */
  background:linear-gradient(135deg,
    rgba(15,23,42,0.90),
    rgba(15,23,42,0.82)
  );                             /* yarı saydam cam */
  border-radius:24px;
  padding:24px 26px 22px;
  border:1px solid rgba(148,163,184,0.35);
  box-shadow:0 24px 60px rgba(0,0,0,0.9);
  position:relative;
  transform:translateY(16px) scale(.96);
  opacity:0;
  transition:transform .2s ease-out, opacity .2s ease-out;
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.auth-overlay.show .auth-card{
  transform:translateY(0) scale(1);
  opacity:1;
}

.auth-close{
  position:absolute;
  right:14px;
  top:14px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:none;
  background:rgba(15,23,42,1);
  color:#e5e7eb;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Görünümler */

.auth-view{ display:none; }
.auth-view.active{ display:block; }

.auth-illustration{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}

.auth-illustration img{
  max-width:150px;
  height:auto;
  border-radius:18px;
}

.auth-title-block{
  text-align:center;
  margin-bottom:16px;
}

.auth-subtitle{
  margin:0 0 4px;
  font-size:13px;
  color:#9ca3af;
}

.auth-title{
  margin:0;
  font-size:18px;
  font-weight:600;
}

/* Form ve inputlar */

.auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.auth-field{
  font-size:12px;
}

.auth-field label{
  display:block;
  margin-bottom:4px;
  color:#e5e7eb;
}

.auth-input-wrap{
  position:relative;
  border-radius:14px;
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(55,65,81,0.95);
  display:flex;
  align-items:center;
  padding:0 10px;
  transition:border-color .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
}

.auth-input-wrap input{
  flex:1;
  border:none;
  background:transparent;
  color:#e5e7eb;
  font-size:13px;
  padding:9px 0;
  outline:none;
}

.auth-input-wrap input::placeholder{
  color:#6b7280;
}

.auth-input-wrap:focus-within{
  border-color:var(--accent, #f97316);
  box-shadow:0 0 0 1px rgba(248,250,252,0.05);
  background:rgba(15,23,42,1);
}

/* Hata ikonları */

.auth-input-icon{
  font-size:13px;
  color:#f97373;
  margin-left:6px;
  display:flex;
  align-items:center;
  opacity:0;
  transition:opacity .15s ease-out;
}

.auth-input-icon i{ pointer-events:none; }

.auth-eye-btn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:13px;
  margin-left:6px;
  color:#9ca3af;
  display:flex;
  align-items:center;
}

.auth-eye-btn i{ pointer-events:none; }

.auth-error-text{
  font-size:11px;
  color:#f97373;
  margin-top:4px;
  display:none;
}

.auth-field.has-error .auth-input-wrap{
  border-color:#f97373;
  box-shadow:0 0 0 1px rgba(248,113,113,0.35);
}

.auth-field.has-error .auth-input-icon{
  opacity:1;
}

.auth-field.has-error .auth-error-text{
  display:block;
}

/* Butonlar */

.auth-btn{
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-size:13px;
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.auth-btn-primary{
  background:linear-gradient(135deg, var(--accent,#fb923c), var(--accent-2,#f97316));
  color:#111827;
}

.auth-btn-secondary{
  background:rgba(31,41,55,0.96);
  color:#e5e7eb;
}

.auth-btn-icon-right{
  font-size:14px;
}

.auth-btn-icon-left{
  font-size:14px;
}

/* küçük link satırı */

.auth-links-row{
  display:flex;
  justify-content:flex-end;
  margin-top:-4px;
  margin-bottom:2px;
  font-size:11px;
}

.auth-forgot-btn{
  border:none;
  background:transparent;
  color:#9ca3af;
  cursor:pointer;
  padding:0;
}

/* Divider & social */

.auth-divider{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
  font-size:11px;
  color:#6b7280;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(31,41,55,1);
}

.auth-social-row{
  display:flex;
  gap:10px;
  margin-top:8px;
}

.auth-social-btn{
  flex:1;
  border-radius:999px;
  border:1px solid rgba(55,65,81,0.9);
  background:rgba(15,23,42,0.98);
  color:#e5e7eb;
  font-size:12px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}

.auth-social-btn i{
  font-size:13px;
}

.auth-social-google i{ color:#f97316; }
.auth-social-facebook i{ color:#3b82f6; }

/* Info kutusu & progress (register için) */

.auth-info-box{
  font-size:11px;
  margin:4px 0 2px;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(37,99,235,0.14);
  color:#bfdbfe;
}

.auth-progress{
  height:3px;
  border-radius:999px;
  background:rgba(31,41,55,0.9);
  margin-bottom:14px;
  overflow:hidden;
}

.auth-progress-bar{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#fbbf24,#f97316);
  transition:width .18s ease-out;
}

.auth-progress-bar.step1{ width:35%; }
.auth-progress-bar.step2{ width:80%; }

/* Back butonu */

.auth-back{
  position:absolute;
  left:16px;
  top:16px;
  border:none;
  background:rgba(15,23,42,1);
  border-radius:999px;
  padding:4px 11px;
  color:#e5e7eb;
  cursor:pointer;
  font-size:12px;
}

/* Mobil – panel tüm ekranı kaplasın */

@media (max-width:768px){
  .auth-overlay{
    align-items:flex-start;
  }

  .auth-card{
    max-width:100%;
    height:100vh;
    margin:0;
    border-radius:0;
    padding:20px 18px 18px;
  }

  .auth-illustration img{
    max-width:130px;
  }
}


/* Forgot code input kutuları */

.code-input-row{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.code-input{
  width:40px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(55,65,81,0.95);
  background:rgba(15,23,42,0.96);
  text-align:center;
  font-size:18px;
  color:#e5e7eb;
  outline:none;
  transition:border-color .15s ease-out, box-shadow .15s ease-out;
}

.code-input:focus{
  border-color:var(--accent,#f97316);
  box-shadow:0 0 0 1px rgba(248,250,252,0.06);
}

@media (max-width:768px){
  .code-input{
    flex:1;
  }
}











/* =============== PROFILE PAGE =============== */

.profile-page{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* üst kart */

.pf-top-card{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) auto;
  gap:16px;
  padding:16px 18px;
  border-radius:18px;
  box-shadow:0 14px 28px rgba(0,0,0,0.7);
}

.pf-user{
  display:flex;
  align-items:center;
  gap:12px;
}

.pf-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(248,250,252,0.9);
}

.pf-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pf-user-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.pf-name{
  font-size:18px;
  font-weight:600;
}

.pf-email{
  font-size:13px;
  opacity:.8;
}

.pf-joined{
  font-size:12px;
  opacity:.6;
}

.pf-top-metrics{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.pf-metric{
  padding:8px 10px;
  border-radius:12px;
}

.pf-metric-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.8;
}

.pf-metric-value{
  font-size:16px;
  font-weight:600;
}

.pf-top-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
.pf-modal,
.pf-modal-content,
.pf-modal-container{
  box-shadow:none !important;
}
.pf-modal-overlay{
  background:rgba(0,0,0,0.0) !important; /* sıfır kararma */
  backdrop-filter:blur(8px);              /* sadece blur */
}

/* buttons */
button,
.btn,
.withdraw-btn{
  border:none !important;
}
button,
.btn,
.withdraw-btn{
  outline:none !important;
  box-shadow:none !important;
}


.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#020617;
  box-shadow:0 14px 26px rgba(0,0,0,0.8);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 18px 34px rgba(0,0,0,0.85);
}

.btn-soft{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  font-size:12px;
  cursor:pointer;
}

.btn-soft:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 18px 34px rgba(0,0,0,0.85);
}

/* balances */

.pf-balance-row{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr);
  gap:16px;
}

.pf-balance-card{
  padding:16px 18px;
  border-radius:16px;
  box-shadow:0 14px 28px rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.pf-balance-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.8;
}

.pf-balance-amount{
  font-size:20px;
  font-weight:700;
  margin-top:2px;
}

.pf-balance-sub{
  font-size:12px;
  opacity:.7;
  margin-top:2px;
}

.pf-balance-main .pf-balance-amount{
  color:#22c55e;
}
.pf-balance-secondary .pf-balance-amount{
  color:#eab308;
}

.pf-balance-icon{
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  background:#1f2937;
  border:1px solid rgba(148,163,184,0.5);
}

.btn-primary.is-loading {
  opacity: .6;
  pointer-events: none;
}
/* middle cards */

.pf-middle-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr);
  gap:16px;
}

.pf-card{
  padding:16px 18px;
  border-radius:16px;
  box-shadow:0 14px 28px rgba(0,0,0,0.7);
}

.pf-card-header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.pf-card-header h3{
  margin:0;
  font-size:15px;
}

.pf-card-header p{
  margin:4px 0 0;
  font-size:12px;
  opacity:.75;
}

.pf-tag{
  align-self:flex-start;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  background:rgba(34,197,94,0.1);
  color:#4ade80;
}

/* chart */

.pf-chart-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:110px;
}

.pf-chart-bar{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.pf-chart-fill{
  width:100%;
  border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}

.pf-chart-label{
  font-size:11px;
  opacity:.75;
}

/* reward */

.pf-reward-numbers{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.pf-reward-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.8;
}

.pf-reward-value{
  display:block;
  font-size:16px;
  font-weight:600;
  margin-top:2px;
}

.pf-progress-bg{
  width:100%;
  height:6px;
  border-radius:999px;
  overflow:hidden;
    border:1px solid rgba(148,163,184,0.4);

}

.pf-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.pf-progress-info{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-size:12px;
  opacity:.8;
}

.pf-reward-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
}

.pf-reward-list li{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:flex-start;
  gap:6px;
}

.pf-dot{
  width:8px;
  height:8px;
  border-radius:999px;
}

.pf-dot-1{ background:#60a5fa; }
.pf-dot-2{ background:#a855f7; }
.pf-dot-3{ background:#f97316; }

.pf-reward-name{
  font-weight:600;
}

.pf-reward-desc{
  opacity:.8;
}

/* transactions */

.pf-transactions-card{
  margin-top:4px;
}

.pf-table-wrap{
  margin-top:8px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,0.4);
}

.pf-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}

.pf-table thead{
  background:#020617;
}

.pf-table th,
.pf-table td{
  padding:9px 12px;
  font-size:12px;
  border-bottom:1px solid rgba(148,163,184,0.25);
  text-align:left;
}

.pf-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  opacity:.9;
}

.pf-table tbody tr:hover{
  background:#020617;
}

.pf-table-empty{
  text-align:center;
  padding:14px 0;
  opacity:.75;
}


.pf-modal-overlay{
  position:fixed;         /* tüm sayfa */
  inset:0;                /* top/right/bottom/left = 0 */
  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,0.25);      /* hafif karartma */
  backdrop-filter:blur(14px);       /* BLUR */
  -webkit-backdrop-filter:blur(14px);

  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease-out;
  z-index:9999;            /* HER ŞEYİN ÜSTÜNDE */
}

.pf-modal-overlay.pf-show{
  opacity:1;
  pointer-events:auto;
}


.pf-modal{
  width:100%;
  max-width:440px;
  border-radius:18px;
  background:rgba(5,8,20,0.55);
  box-shadow:0 22px 44px rgba(0,0,0,0.9);
  padding:18px 18px 16px;
  position:relative;
}

.pf-modal-close{
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  border-radius:999px;
  border:none;
  background:#020617;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.pf-modal-header h2{
  margin:0 0 4px;
  font-size:17px;
}

.pf-modal-header p{
  margin:0;
  font-size:12px;
  opacity:.75;
}

.pf-modal-body{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pf-modal-balance{
  display:flex;
  justify-content:space-between;
  font-size:13px;
}

.pf-modal-balance strong{
  font-size:16px;
}

.pf-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
}

.pf-input-wrap{
  border-radius:12px;
  border:1px solid rgb(148 163 184 / 12%);
  background:rgba(255,255,255,0.06);
  padding:7px 9px;
}

.pf-input-wrap input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#e5e7eb;
  font-size:13px;
}

.pf-methods{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pf-method{
  cursor:pointer;
}

.pf-method input{
  display:none;
}

.pf-method-inner{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 9px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.5);
  background:rgba(15,23,42,1);
  font-size:12px;
}

.pf-method-inner i{
  margin-top:2px;
}

.pf-method-name{
  font-weight:600;
}

.pf-method-sub{
  opacity:.8;
}

.pf-method input:checked + .pf-method-inner{
  border-color:var(--accent);
}

.pf-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* responsive */

@media (max-width: 900px){
  .pf-top-card{
    grid-template-columns:1fr;
  }
  .pf-balance-row,
  .pf-middle-row{
    grid-template-columns:1fr;
  }
}

@media (max-width: 600px){
  .dashboard{
    padding:22px 16px 18px;
  }
  .pf-modal{
    max-width:92vw;
  }
}

.pf-select-wrap{
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(15,23,42,1);
  padding:4px 8px;
  flex:1;
}
.pf-select-wrap select{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#e5e7eb;
  font-size:13px;
}
.pf-crypto-row{
  display:flex;
  gap:8px;
  margin-top:6px;
  flex-wrap:wrap;
}


/* ===== PROFILE – MONTHLY REWARD (yeni) ===== */

.pf-reward-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.pf-reward-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.pf-reward-status-badge{
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:500;
  background:rgba(30,64,175,0.22);
  color:#bfdbfe;
}

.pf-reward-status-badge.is-ok{
  background:rgba(34,197,94,0.16);
  color:#4ade80;
}

.pf-reward-status-badge.is-success{
  background:rgba(22,163,74,0.18);
  color:#bbf7d0;
}

.pf-reward-status-badge.is-idle{
  background:rgba(148,163,184,0.18);
  color:#e5e7eb;
}

.pf-reward-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.pf-reward-box{
  padding:10px 12px;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,0.75);
}

.pf-reward-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.8;
}

.pf-reward-value{
  display:block;
  margin-top:4px;
  font-size:16px;
  font-weight:600;
}

/* progress satırı biraz daha kompakt olsun */
.pf-progress-compact .pf-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  font-size:12px;
  opacity:.9;
}

.pf-progress-compact .pf-progress-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
  font-size:11px;
  opacity:.85;
}

.pf-progress-label{
  font-weight:500;
}

.pf-progress-percent{
  font-weight:600;
}

/* reward rules kutusu */
.pf-reward-rules{
  margin-top:4px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.4);
  font-size:11px;
}

.pf-rules-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  font-weight:500;
}

.pf-rules-header i{
  font-size:13px;
  opacity:.85;
}

.pf-reward-rules ul{
  margin:0;
  padding-left:18px;
}

.pf-reward-rules li{
  margin-bottom:3px;
}

/* ===== WITHDRAW – CUSTOM PAYMENT DROPDOWN ===== */

.pm-dd{
  position:relative;
  margin-top:6px;
}

.pm-dd-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  color:#e5e7eb;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(0,0,0,0.85);
}

.pm-dd-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pm-dd-main{
  font-weight:500;
}

.pm-dd-sub{
  font-size:11px;
  opacity:.8;
}

.pm-dd-icon{
  font-size:11px;
  margin-left:8px;
  transition:transform .15s ease;
}

.pm-dd.open .pm-dd-icon{
  transform:rotate(180deg);
}

.pm-dd-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  padding:6px;
  border-radius:14px;

  /* 🔹 Blur + yarı saydam arka plan */
  background:rgba(5, 8, 20, 0.6);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(10px);

  border:1px solid rgba(148,163,184,0.25);
  box-shadow:0 18px 40px rgba(0,0,0,0.6);

  z-index:40;
  display:none;
}

.pm-dd.open .pm-dd-menu{
  display:block;
}

.pm-dd-item{
  width:100%;
  border:none;
  padding:8px 9px;
  border-radius:10px;
  background:transparent;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  font-size:12px;
}

.pm-dd-item:hover{
  background:rgba(30,64,175,0.45);
}

.pm-item-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pm-item-title{
  font-weight:500;
}

.pm-item-sub{
  font-size:11px;
  opacity:.8;
}

/* ===== CRYPTO COIN DROPDOWN ===== */

.coin-dd{
  position:relative;
  width:100%;
  margin-top:6px;
}

.coin-dd-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(255,255,255,0.06);
  color:#e5e7eb;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(0,0,0,0.85);
}

.coin-dd-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.coin-dd-main{
  font-weight:500;
}

.coin-dd-sub{
  font-size:11px;
  opacity:.8;
}

.coin-dd-icon{
  font-size:11px;
  margin-left:8px;
  transition:transform .15s ease;
}

.coin-dd.open .coin-dd-icon{
  transform:rotate(180deg);
}

.coin-dd-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);      /* aşağı doğru açılıyor */
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(15,23,42,1);
  box-shadow:0 18px 40px rgba(0,0,0,0.9);
  z-index:50;
  display:none;
}

.coin-dd.open .coin-dd-menu{
  display:block;
}

.coin-dd-item{
  width:100%;
  border:none;
  padding:8px 9px;
  border-radius:10px;
  background:transparent;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  cursor:pointer;
  font-size:12px;
}

.coin-dd-item + .coin-dd-item{
  margin-top:4px;
}

.coin-dd-item:hover{
  background:rgba(30,64,175,0.45);
}

/* satır içeriği */

.coin-item-main{
  display:flex;
  align-items:center;
}
.coin-item-icon{
  width:26px;                  /* büyüttük */
  height:26px;
  border-radius:999px;         /* yuvarlak mask (sadece köşeleri kırpar) */
  background:transparent;      /* ARKA PLAN YOK */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-right:10px;
  flex-shrink:0;
}

.coin-item-icon img{
  width:95%;                   /* daha büyük ama taşmadan */
  height:95%;
  object-fit:contain;          /* logoyu kırpma */
}


.coin-item-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.coin-item-title{
  font-weight:500;
}

.coin-item-sub{
  font-size:11px;
  opacity:.8;
}


/* ===== WITHDRAW – CUSTOM PAYMENT DROPDOWN ===== */

.pm-dd{
  position:relative;
  margin-top:6px;
}

.pm-dd-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(255,255,255,0.06);
  color:#e5e7eb;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(0,0,0,0.85);
}

.pm-dd-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pm-dd-main{
  font-weight:500;
}

.pm-dd-sub{
  font-size:11px;
  opacity:.8;
}

.pm-dd-icon{
  font-size:11px;
  margin-left:8px;
  transition:transform .15s ease;
}

.pm-dd.open .pm-dd-icon{
  transform:rotate(180deg);
}

.pm-dd-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(15,23,42,1);
  box-shadow:0 18px 40px rgba(0,0,0,0.9);
  z-index:40;
  display:none;
}

.pm-dd.open .pm-dd-menu{
  display:block;
}

.pm-dd-item{
  width:100%;
  border:none;
  padding:8px 9px;
  border-radius:10px;
  background:transparent;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  cursor:pointer;
  font-size:12px;
}

.pm-dd-item + .pm-dd-item{
  margin-top:4px;
}

.pm-dd-item:hover{
  background:rgba(30,64,175,0.45);
}

/* ===== WITHDRAW – PAYMENT DROPDOWN (FULL) ===== */

.pm-dd{
  position:relative;
  margin-top:6px;
}

.pm-dd-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(255,255,255,0.06);
  color:#e5e7eb;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(0,0,0,0.85);
}

.pm-dd-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pm-dd-main{
  font-weight:500;
}

.pm-dd-sub{
  font-size:11px;
  opacity:.8;
}

.pm-dd-icon{
  font-size:11px;
  margin-left:8px;
  transition:transform .15s ease;
}

.pm-dd.open .pm-dd-icon{
  transform:rotate(180deg);
}

.pm-dd-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(15,23,42,1);
  box-shadow:0 18px 40px rgba(0,0,0,0.9);
  z-index:40;
  display:none;
}

.pm-dd.open .pm-dd-menu{
  display:block;
}

.pm-dd-item{
  width:100%;
  border:none;
  padding:8px 9px;
  border-radius:10px;
  background:transparent;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  cursor:pointer;
  font-size:12px;
}

.pm-dd-item + .pm-dd-item{
  margin-top:4px;
}

.pm-dd-item:hover{
  background:rgba(30,64,175,0.45);
}

/* ---- içerik: ikon + metin ---- */

.pm-item-main{
  display:flex;
  align-items:center;
}

.pm-item-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-right:10px;
  flex-shrink:0;
}

.pm-item-icon img{
  width:95%;
  height:95%;
  object-fit:contain;
}

.pm-item-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pm-item-title{
  font-weight:500;
}

.pm-item-sub{
  font-size:11px;
  opacity:.8;
}
/* 🔧 Zorla hizalama – payment dropdown fix */

.pm-dd-menu .pm-dd-item .pm-item-main{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

.pm-dd-menu .pm-dd-item .pm-item-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-right:10px !important;
  width:26px !important;
  height:26px !important;
}

.pm-dd-menu .pm-dd-item .pm-item-text{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.pm-dd-menu .pm-dd-item .pm-item-title,
.pm-dd-menu .pm-dd-item .pm-item-sub{
  display:block !important;
}


/* PROFIL PARA GÖSTERİMLERİNE $ EKLE */
.pf-metric-value,
.pf-balance-amount,
.pf-reward-value {
  position: relative;
}

/* Asıl $ işareti */
.pf-metric-value::before,
.pf-balance-amount::before,
.pf-reward-value::before {
  content: "$";
  margin-right: 3px;
  font-weight: 500;
}


.pf-withdraw-history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pf-wh-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-radius:10px;
}

.pf-wh-main{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.pf-wh-amount{
  font-size:13px;
  font-weight:600;
}

.pf-wh-meta{
  font-size:11px;
  color:#9ca3af;
}

.pf-wh-status{
  display:flex;
  align-items:center;
}

.pf-wh-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:500;
}

.pf-wh-badge--pending{
  background:rgba(250,204,21,0.1);
  color:#facc15; /* turuncu */
}

.pf-wh-badge--paid{
  background:rgba(34,197,94,0.12);
  color:#4ade80; /* yeşil */
}

.pf-wh-badge--refunded{
  background:rgba(248,113,113,0.1);
  color:#f87171; /* kırmızı */
}

.pf-wh-badge--other{
  background:rgba(148,163,184,0.15);
  color:#e5e7eb;
}

.pf-empty-text{
  font-size:13px;
  color:#9ca3af;
}

/* WITHDRAW HISTORY GRID */
.pf-withdraw-history-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.pf-wh-row{
  border-radius:16px;
  padding:10px 11px;
  border: 1px solid rgb(148 163 184 / 4%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:90px;
}

.pf-wh-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.pf-wh-amount{
  font-size:13px;
  font-weight:600;
}

.pf-wh-meta{
  font-size:11px;
  color:#9ca3af;
}

.pf-wh-status{
  margin-top:6px;
  display:flex;
  justify-content:flex-end;
}

.pf-wh-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:500;
}

/* renkler */
.pf-wh-badge--pending{
  background:rgba(250,204,21,0.1);
  color:#facc15;
}

.pf-wh-badge--paid{
  background:rgba(34,197,94,0.12);
  color:#4ade80;
}

.pf-wh-badge--refunded{
  background:rgba(248,113,113,0.1);
  color:#f87171;
}

.pf-wh-badge--other{
  background:rgba(148,163,184,0.15);
  color:#e5e7eb;
}

.pf-empty-text{
  font-size:13px;
  color:#9ca3af;
}

/* Pagination bar */
.pf-wh-pagination{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#9ca3af;
}

.pf-wh-page-btn{
  border:none;
  border-radius:999px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(30,64,175,0.6);
  color:#e5e7eb;
  cursor:pointer;
}

.pf-wh-page-btn[disabled]{
  opacity:0.4;
  cursor:default;
}

.pf-wh-page-info{
  flex:1;
  text-align:center;
}

/* Responsive grid kırılımları */
@media (max-width: 1100px){
  .pf-withdraw-history-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 800px){
  .pf-withdraw-history-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 540px){
  .pf-withdraw-history-list{
    grid-template-columns:1fr;
  }
}


/* History popup daha geniş */
.pf-modal--wide{
  max-width: 980px;
  width: 96%;
}

/* Withdraw history table */
.pf-wh-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.pf-wh-body{
  padding-top:8px;
}

/* Table container */
.pf-wh-table{
  width:100%;
  border-radius:18px;
  overflow:hidden;
}

/* Head row */
.pf-wh-head{
  display:grid;
  grid-template-columns:0.9fr 2fr 1.5fr 1.2fr 1.6fr 1.2fr;
  column-gap:12px;
  padding:8px 20px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#9ca3af;
}

.pf-wh-body-rows{
  max-height:420px;
  overflow-y:auto;
  padding-right:4px;              /* içeriği scrollbardan biraz uzaklaştır */
  scrollbar-width:thin;           /* Firefox için */
  scrollbar-color:#4b5563 transparent;
}

/* Chrome / Edge / Safari */
.pf-wh-body-rows::-webkit-scrollbar{
  width:6px;                      /* ince scrollbar */
}

.pf-wh-body-rows::-webkit-scrollbar-track{
  background:transparent;         /* o beyaz şeridi iptal */
}

.pf-wh-body-rows::-webkit-scrollbar-thumb{
  background:rgba(55,65,81,0.95); /* koyu gri */
  border-radius:999px;
}

.pf-wh-body-rows::-webkit-scrollbar-thumb:hover{
  background:rgba(75,85,99,0.98);
}

.pf-wh-row{
  display:grid;
  grid-template-columns:0.9fr 2fr 1.5fr 1.2fr 1.6fr 1.2fr;
  column-gap:12px;
  padding:9px 20px;
  font-size:12px;
  align-items:center;
}

.pf-wh-row:last-child{
  border-bottom:none;
}

.pf-wh-row:nth-child(odd){
}

.pf-wh-row:nth-child(even){
}

.pf-wh-col{
  display:flex;
  align-items:center;
}

.pf-wh-id{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11px;
  color:#e5e7eb;
}

.pf-wh-wallet{
  font-size:12px;
  color:#d1d5db;
}

.pf-wh-method{
  font-size:12px;
  font-weight:500;
  color:#e5e7eb;
}

.pf-wh-amount{
  font-weight:600;
  color:#e5e7eb;
}

.pf-wh-date{
  font-size:12px;
  color:#9ca3af;
}

.pf-wh-status{
  justify-content:flex-end;
}

/* Status pill */
.pf-wh-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:90px;
  padding:8px 12px;
  border-radius:6px;
  font-size:11px;
  font-weight:500;
}

.pf-wh-pill--success{
  background:rgba(22,163,74,0.16);
  color:#4ade80;
}

.pf-wh-pill--pending{
  background:rgba(250,204,21,0.14);
  color:#facc15;
}

.pf-wh-pill--refunded{
  background:rgba(248,113,113,0.12);
  color:#f97373;
}

.pf-wh-pill--other{
  background:rgba(148,163,184,0.15);
  color:#e5e7eb;
}

/* Pagination */
.pf-wh-pagination{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#9ca3af;
}

.pf-wh-page-btn{
  border:none;
  border-radius:999px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.95);
  border:1px solid rgba(30,64,175,0.7);
  color:#e5e7eb;
  cursor:pointer;
}

.pf-wh-page-btn[disabled]{
  opacity:0.4;
  cursor:default;
}

.pf-wh-page-info{
  flex:1;
  text-align:center;
}

/* Mobile kırılım – kolonları sıkıştır */
@media (max-width: 768px){
  .pf-wh-head,
  .pf-wh-row{
    grid-template-columns:0.8fr 1.7fr 1.4fr 1.2fr 1.7fr 1.2fr;
    padding-inline:12px;
  }

  .pf-wh-table{
    border-radius:14px;
  }
}

@media (max-width: 520px){
  .pf-modal--wide{
    max-width:100%;
  }
  .pf-wh-head,
  .pf-wh-row{
    grid-template-columns:0.9fr 1.4fr 1.3fr 1.1fr 1.5fr 1.3fr;
    font-size:11px;
  }
  .pf-wh-amount{
    font-size:11px;
  }
}

/* ============================================
   MOBILE RESPONSIVE – WITHDRAWAL HISTORY TABLE
   ============================================ */
@media (max-width: 768px) {

  /* Modal genişliği: yanlardan taşmasın, full genişlik gibi olsun */
  .pf-modal.pf-modal--wide {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 24px;
  }

  /* Tabloyu yatay scroll yapılabilir yapıyoruz */
  .pf-wh-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Başlık ve satırlar, masaüstü düzenini korusun diye min-width veriyoruz */
  .pf-wh-head,
  .pf-wh-row {
    min-width: 720px;          /* masaüstü düzenin kadar geniş, mobilde sağa sola kaydırılacak */
  }

  /* İçerik biraz sıkışık görünsün diye font/padding küçültme */
  .pf-wh-head > div {
    font-size: 11px;
    padding: 6px 10px;
  }

  .pf-wh-col {
    font-size: 11px;
    padding: 8px 10px;
  }

  /* Status pill mobilde biraz küçülsün */
  .pf-wh-pill {
    font-size: 11px;
    padding: 4px 12px;
  }
}
