/* ========================================================
   PAYCARD V7.11
   STOCK MARKET + VADE + GLOBAL RESPONSIVE
   ======================================================== */


/* ========================================================
   GLOBAL SAFETY
   ======================================================== */

html {
  max-width:100%;
  overflow-x:hidden;
}


body {
  max-width:100%;
  overflow-x:hidden;
}


*,
*::before,
*::after {
  box-sizing:border-box;
}


img,
svg,
video,
canvas {
  max-width:100%;
}


input,
select,
textarea,
button {
  max-width:100%;
}


/* ========================================================
   MAIN CONTENT
   ======================================================== */

main {
  width:100%;
  max-width:100%;
}


.page {
  width:100%;
  max-width:100%;
}


.v711-market-legacy {
  display:none !important;
}


/* ========================================================
   STOCK MARKET
   ======================================================== */

.v711-market {
  width:100%;
}


.v711-market-head {
  margin-bottom:28px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:30px;
}


.v711-eyebrow {
  margin-bottom:8px;

  color:var(--primary);

  font-size:11px;
  font-weight:900;

  letter-spacing:.16em;
}


.v711-market-head h1 {
  margin:0;

  color:#111827;

  font-size:48px;
  line-height:1.05;

  letter-spacing:-.04em;
}


.v711-market-head p {
  max-width:620px;

  margin:12px 0 0;

  color:#718096;

  font-size:15px;
  line-height:1.6;
}


.v711-market-status {
  display:flex;

  align-items:center;

  gap:12px;
}


.v711-market-status > div {
  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:4px;
}


.v711-market-status span {
  color:#8a95a2;

  font-size:10px;
}


.v711-market-status strong {
  color:#08745d;

  font-size:11px;
}


.v711-market-status button {
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  color:#08745d;

  background:#eaf8f3;

  border:0;

  border-radius:10px;

  cursor:pointer;

  font-size:20px;
}


/* ========================================================
   ASSET TABS
   ======================================================== */

.v711-asset-tabs {
  margin-bottom:26px;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.v711-asset-tabs button {
  min-width:0;
  min-height:76px;

  padding:14px 16px;

  display:flex;

  align-items:center;

  gap:13px;

  color:#2f3b49;

  background:#fff;

  border:
    1px solid #e1e7eb;

  border-radius:14px;

  cursor:pointer;

  text-align:left;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


.v711-asset-tabs button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 30px
    rgba(15,30,45,.06);
}


.v711-asset-tabs button.active {
  border-color:
    var(--primary);

  background:
    linear-gradient(
      135deg,
      #f1fbf7,
      #ffffff
    );

  box-shadow:
    0 10px 30px
    rgba(0,140,115,.08);
}


.v711-tab-icon {
  width:42px;
  height:42px;

  flex:
    0 0 42px;

  display:grid;

  place-items:center;

  color:#fff;

  border-radius:50%;

  font-size:21px;

  font-weight:900;
}


.v711-tab-icon.btc {
  background:#f7931a;
}


.v711-tab-icon.eth {
  background:#627eea;
}


.v711-tab-icon.usdt {
  background:#26a17b;
}


.v711-tab-icon.gold {
  color:#6c5200;

  background:#f4c542;
}


.v711-asset-tabs button > span:last-child {
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:2px;
}


.v711-asset-tabs strong {
  color:#18212f;

  font-size:14px;
}


.v711-asset-tabs small {
  color:#85919e;

  font-size:9px;
}


/* ========================================================
   ASSET SECTION
   ======================================================== */

.v711-asset-section {
  display:grid;

  gap:18px;
}


.v711-asset-title {
  display:flex;

  align-items:center;

  gap:14px;
}


.v711-big-icon {
  width:48px;
  height:48px;

  flex:
    0 0 48px;

  display:grid;

  place-items:center;

  color:#fff;

  border-radius:50%;

  font-size:25px;

  font-weight:900;
}


.v711-big-icon.btc {
  background:#f7931a;
}


.v711-big-icon.eth {
  background:#627eea;
}


.v711-big-icon.usdt {
  background:#26a17b;
}


.v711-big-icon.gold {
  color:#654d00;

  background:#f4c542;
}


.v711-asset-title span {
  color:var(--primary);

  font-size:9px;

  font-weight:900;

  letter-spacing:.11em;
}


.v711-asset-title h2 {
  margin:2px 0 0;

  color:#151e2b;

  font-size:24px;
}


/* ========================================================
   PRICE CARDS
   ======================================================== */

.v711-price-grid {
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;
}


.v711-price-card {
  min-width:0;

  padding:20px;

  background:#fff;

  border:
    1px solid #e0e7eb;

  border-radius:14px;
}


.v711-price-card span {
  display:block;

  margin-bottom:7px;

  color:#7e8a97;

  font-size:10px;
}


.v711-price-card strong {
  display:block;

  color:#101827;

  font-size:25px;

  line-height:1.2;

  overflow-wrap:anywhere;
}


.v711-price-card small {
  display:block;

  margin-top:7px;

  color:#8b96a1;

  font-size:9px;
}


.v711-price-card.source-count {
  background:
    linear-gradient(
      135deg,
      #f0faf6,
      #ffffff
    );
}


.v711-price-card.source-count strong {
  color:var(--primary);
}


/* ========================================================
   SOURCE CARD
   ======================================================== */

.v711-source-card {
  overflow:hidden;

  background:#fff;

  border:
    1px solid #dfe6ea;

  border-radius:15px;
}


.v711-source-head {
  padding:18px 20px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  border-bottom:
    1px solid #e7ecef;
}


.v711-source-head span {
  color:var(--primary);

  font-size:8px;

  font-weight:900;

  letter-spacing:.12em;
}


.v711-source-head h3 {
  margin:4px 0 0;

  font-size:16px;
}


.v711-source-head > small {
  color:#85919d;

  font-size:9px;
}


.v711-source-list {
  display:grid;
}


.v711-source-row {
  min-width:0;

  padding:15px 20px;

  display:grid;

  grid-template-columns:
    minmax(150px,1.3fr)
    repeat(3,minmax(110px,1fr))
    minmax(150px,1fr);

  align-items:center;

  gap:16px;

  border-bottom:
    1px solid #edf1f3;
}


.v711-source-row:last-child {
  border-bottom:0;
}


.v711-source-main,
.v711-source-value,
.v711-source-update {
  min-width:0;
}


.v711-source-main strong {
  display:block;

  color:#17202d;

  font-size:11px;
}


.v711-source-main span {
  display:block;

  margin-top:3px;

  color:#7c8792;

  font-size:9px;
}


.v711-source-value span,
.v711-source-update span {
  display:block;

  margin-bottom:4px;

  color:#89949e;

  font-size:8px;
}


.v711-source-value strong {
  color:#1a2430;

  font-size:11px;

  overflow-wrap:anywhere;
}


.v711-source-value.price strong {
  font-weight:900;
}


.v711-source-update strong {
  color:#596675;

  font-size:9px;

  font-weight:600;
}


.v711-loading,
.v711-error,
.v711-empty {
  padding:32px;

  color:#7d8995;

  background:#fff;

  border:
    1px solid #e1e7ea;

  border-radius:14px;

  text-align:center;

  font-size:12px;
}


.v711-error {
  color:#b42318;

  background:#fff4f3;
}


/* ========================================================
   VADE / BANK COMPARE REPAIR
   ======================================================== */

/*
 * Banka kartı dışına taşan custom-rate alanını
 * normal document flow içine geri al.
 */

.bank-cards {
  width:100%;

  display:grid;

  gap:16px;
}


.bank-card,
.bank-cards > article,
.bank-cards > div {
  min-width:0;
  max-width:100%;
}


.bank-card {
  overflow:hidden !important;

  position:relative !important;
}


.bank-custom-rate,
.custom-rate-box,
.custom-rate-panel,
.bank-special-rate,
.bank-card-custom-rate {
  position:relative !important;

  inset:auto !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  width:100% !important;
  max-width:100% !important;

  margin-top:16px !important;

  transform:none !important;

  float:none !important;
}


.custom-rate-grid {
  width:100%;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:12px !important;
}


.custom-rate-grid > * {
  min-width:0 !important;
}


.bank-card input,
.bank-card select,
.bank-cards input,
.bank-cards select {
  width:100% !important;

  min-width:0 !important;

  max-width:100% !important;
}


.bank-card .field,
.bank-cards .field {
  min-width:0;
}


.bank-card .deposit-result-grid,
.bank-cards .deposit-result-grid,
.bank-card .custom-rate-results,
.bank-cards .custom-rate-results {
  width:100%;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:8px;
}


.bank-card .deposit-result-grid > *,
.bank-cards .deposit-result-grid > *,
.bank-card .custom-rate-results > *,
.bank-cards .custom-rate-results > * {
  min-width:0;
}


/*
 * Bank comparison cards desktop layout.
 */
.bank-cards > article,
.bank-cards > .bank-card {
  padding:24px !important;

  border-radius:16px !important;
}


.bank-result-summary {
  max-width:100%;
}


/* ========================================================
   MODALS
   ======================================================== */

.modal-backdrop,
.v78-modal-backdrop,
.v710-admin-modal-backdrop {
  max-width:100vw;
}


.currency-modal,
.order-modal,
.v78-modal,
.v710-admin-modal {
  max-width:
    calc(100vw - 32px) !important;
}


/* ========================================================
   TABLE SAFETY
   ======================================================== */

.market-grid,
table {
  max-width:100%;
}


table {
  border-collapse:collapse;
}


/* ========================================================
   TABLET
   ======================================================== */

@media(max-width:1050px) {

  .v711-market-head h1 {
    font-size:40px;
  }


  .v711-asset-tabs {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .v711-price-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .v711-price-card.source-count {
    grid-column:
      1 / -1;
  }


  .v711-source-row {
    grid-template-columns:
      minmax(140px,1.4fr)
      repeat(3,minmax(100px,1fr));

    gap:12px;
  }


  .v711-source-update {
    grid-column:
      1 / -1;

    padding-top:8px;

    border-top:
      1px dashed #e3e8eb;
  }


  .bank-card .deposit-result-grid,
  .bank-cards .deposit-result-grid,
  .bank-card .custom-rate-results,
  .bank-cards .custom-rate-results {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* ========================================================
   MOBILE
   ======================================================== */

@media(max-width:700px) {

  /*
   * Header yatay taşmasın.
   */
  header,
  .site-header,
  .topbar {
    max-width:100vw;
  }


  nav,
  .main-nav {
    max-width:100%;

    overflow-x:auto;

    scrollbar-width:none;
  }


  nav::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar {
    display:none;
  }


  .page {
    padding-left:16px !important;
    padding-right:16px !important;
  }


  /* STOCK MARKET */

  .v711-market-head {
    margin-bottom:20px;

    flex-direction:column;

    gap:15px;
  }


  .v711-market-head h1 {
    font-size:34px;
  }


  .v711-market-head p {
    font-size:13px;
  }


  .v711-market-status {
    width:100%;

    justify-content:space-between;
  }


  .v711-market-status > div {
    align-items:flex-start;
  }


  .v711-asset-tabs {
    grid-template-columns:
      1fr 1fr;

    gap:8px;
  }


  .v711-asset-tabs button {
    min-height:64px;

    padding:10px;
  }


  .v711-tab-icon {
    width:36px;
    height:36px;

    flex:
      0 0 36px;

    font-size:18px;
  }


  .v711-asset-tabs strong {
    font-size:12px;
  }


  .v711-asset-title h2 {
    font-size:20px;
  }


  .v711-price-grid {
    grid-template-columns:1fr;
  }


  .v711-price-card.source-count {
    grid-column:auto;
  }


  .v711-price-card {
    padding:16px;
  }


  .v711-price-card strong {
    font-size:22px;
  }


  .v711-source-head {
    padding:15px;

    align-items:flex-start;

    flex-direction:column;

    gap:5px;
  }


  .v711-source-row {
    padding:15px;

    grid-template-columns:
      1fr 1fr;

    gap:13px 10px;
  }


  .v711-source-main {
    grid-column:
      1 / -1;

    padding-bottom:9px;

    border-bottom:
      1px dashed #e4e9ec;
  }


  .v711-source-value.price {
    grid-column:
      1 / -1;

    padding:10px;

    background:#f7faf9;

    border-radius:8px;
  }


  .v711-source-update {
    grid-column:
      1 / -1;
  }


  /*
   * VADE
   */

  .deposit-v5-grid {
    width:100%;

    grid-template-columns:
      1fr !important;
  }


  .deposit-results-head {
    width:100%;

    align-items:flex-start !important;

    flex-direction:column !important;
  }


  .bank-result-summary {
    width:100% !important;
  }


  .bank-cards {
    width:100%;

    gap:12px;
  }


  .bank-cards > article,
  .bank-cards > .bank-card {
    width:100% !important;

    padding:17px !important;

    overflow:hidden !important;
  }


  .bank-card-header,
  .bank-card-head,
  .bank-result-head {
    width:100%;

    display:grid !important;

    grid-template-columns:1fr !important;

    gap:10px !important;
  }


  .custom-rate-grid {
    grid-template-columns:
      1fr !important;
  }


  .bank-card .deposit-result-grid,
  .bank-cards .deposit-result-grid,
  .bank-card .custom-rate-results,
  .bank-cards .custom-rate-results {
    grid-template-columns:
      1fr 1fr !important;
  }


  .bank-card input,
  .bank-card select,
  .bank-cards input,
  .bank-cards select {
    font-size:16px !important;
  }


  /*
   * Generic forms
   */

  .form-grid {
    grid-template-columns:
      1fr !important;
  }


  /*
   * Modal
   */

  .modal-backdrop,
  .v78-modal-backdrop,
  .v710-admin-modal-backdrop {
    padding:10px !important;

    align-items:center !important;
  }


  .currency-modal,
  .order-modal,
  .v78-modal,
  .v710-admin-modal {
    width:100% !important;

    max-width:100% !important;

    max-height:
      calc(100vh - 20px) !important;

    overflow-y:auto !important;

    border-radius:16px !important;
  }

}


/* ========================================================
   SMALL MOBILE
   ======================================================== */

@media(max-width:430px) {

  .page {
    padding-left:12px !important;
    padding-right:12px !important;
  }


  .v711-market-head h1 {
    font-size:30px;
  }


  .v711-asset-tabs {
    display:flex;

    overflow-x:auto;

    padding-bottom:4px;

    scroll-snap-type:
      x mandatory;
  }


  .v711-asset-tabs::-webkit-scrollbar {
    display:none;
  }


  .v711-asset-tabs button {
    min-width:145px;

    flex:
      0 0 145px;

    scroll-snap-align:start;
  }


  .v711-source-row {
    grid-template-columns:1fr;
  }


  .v711-source-main,
  .v711-source-value.price,
  .v711-source-update {
    grid-column:auto;
  }


  .v711-source-value {
    padding-bottom:7px;

    border-bottom:
      1px solid #edf1f3;
  }


  .bank-card .deposit-result-grid,
  .bank-cards .deposit-result-grid,
  .bank-card .custom-rate-results,
  .bank-cards .custom-rate-results {
    grid-template-columns:
      1fr !important;
  }

}


/* ========================================================
   PAYCARD V7.11.1
   HARD DEPOSIT / BANK CARD FIX
   ======================================================== */


/*
 * Banka sonuç kartları:
 * desktopta üst bilgi satırı + aşağıda tam genişlik özel oran.
 */

#bankCards,
.bank-cards {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;

  width:100% !important;
  max-width:100% !important;
}


/*
 * Dinamik üretilen her doğrudan sonuç kartını normalize et.
 */
#bankCards > *,
.bank-cards > * {
  width:100% !important;
  max-width:100% !important;

  min-width:0 !important;

  margin:0 !important;

  padding:22px !important;

  position:relative !important;

  display:grid !important;

  grid-template-columns:
    52px
    minmax(180px,1.45fr)
    repeat(4,minmax(130px,1fr)) !important;

  grid-auto-flow:row !important;
  grid-auto-rows:auto !important;

  align-items:start !important;

  column-gap:26px !important;
  row-gap:14px !important;

  overflow:hidden !important;

  background:#fff !important;

  border:
    1px solid #dde5ea !important;

  border-radius:16px !important;

  box-shadow:none !important;
}


/*
 * Kart içindeki sıra / ranking balonu
 */
#bankCards > * > :first-child,
.bank-cards > * > :first-child {
  min-width:0;
}


/*
 * ABSOLUTE / FLOAT / TRANSFORM KULLANAN ALT ELEMANLARI
 * normal flow'a geri çek.
 */
#bankCards [style*="position: absolute"],
.bank-cards [style*="position: absolute"] {
  position:relative !important;

  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;

  transform:none !important;
}


#bankCards [style*="float:"],
.bank-cards [style*="float:"] {
  float:none !important;
}


/* ========================================================
   CUSTOM / SPECIAL RATE
   ======================================================== */

#bankCards .bank-custom-rate,
#bankCards .custom-rate-box,
#bankCards .custom-rate-panel,
#bankCards .bank-special-rate,
#bankCards .bank-card-custom-rate,
.bank-cards .bank-custom-rate,
.bank-cards .custom-rate-box,
.bank-cards .custom-rate-panel,
.bank-cards .bank-special-rate,
.bank-cards .bank-card-custom-rate {
  grid-column:
    1 / -1 !important;

  width:100% !important;
  max-width:100% !important;

  min-width:0 !important;

  margin:
    4px 0 0 !important;

  padding:
    16px !important;

  position:relative !important;

  inset:auto !important;

  display:block !important;

  float:none !important;

  transform:none !important;

  background:#f8fafb !important;

  border:
    1px solid #e3e9ed !important;

  border-radius:12px !important;
}


/*
 * Bazı sürümlerde wrapper class farklıysa:
 * metin içeren alanları da geniş tut.
 */
#bankCards [class*="custom-rate"],
#bankCards [class*="special-rate"],
.bank-cards [class*="custom-rate"],
.bank-cards [class*="special-rate"] {
  min-width:0 !important;
  max-width:100% !important;
}


/* ========================================================
   CUSTOM RATE HEADER
   ======================================================== */

#bankCards .custom-rate-head,
#bankCards .bank-custom-rate-head,
.bank-cards .custom-rate-head,
.bank-cards .bank-custom-rate-head {
  width:100% !important;

  margin-bottom:12px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:12px !important;
}


/* ========================================================
   CUSTOM RATE INPUTS
   ======================================================== */

#bankCards .custom-rate-grid,
.bank-cards .custom-rate-grid {
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:12px !important;
}


#bankCards .custom-rate-grid > *,
.bank-cards .custom-rate-grid > * {
  min-width:0 !important;
  width:100% !important;
}


#bankCards .custom-rate-grid input,
#bankCards .custom-rate-grid select,
.bank-cards .custom-rate-grid input,
.bank-cards .custom-rate-grid select {
  width:100% !important;
  max-width:100% !important;

  min-width:0 !important;

  height:44px !important;

  padding:
    0 12px !important;

  background:#fff !important;

  border:
    1px solid #d7e0e6 !important;

  border-radius:9px !important;

  font-size:14px !important;
}


/* ========================================================
   CUSTOM CALC RESULTS
   ======================================================== */

#bankCards .custom-rate-results,
#bankCards .deposit-result-grid,
.bank-cards .custom-rate-results,
.bank-cards .deposit-result-grid {
  width:100% !important;

  margin-top:12px !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:8px !important;
}


#bankCards .custom-rate-results > *,
#bankCards .deposit-result-grid > *,
.bank-cards .custom-rate-results > *,
.bank-cards .deposit-result-grid > * {
  width:100% !important;

  min-width:0 !important;

  padding:11px !important;

  background:#fff !important;

  border:
    1px solid #e1e7eb !important;

  border-radius:9px !important;
}


/* ========================================================
   METRIC CELLS
   ======================================================== */

#bankCards .bank-metric,
.bank-cards .bank-metric {
  min-width:0 !important;

  width:auto !important;
}


#bankCards strong,
.bank-cards strong {
  overflow-wrap:anywhere;
}


/* ========================================================
   TABLET
   ======================================================== */

@media(max-width:1100px) {

  #bankCards > *,
  .bank-cards > * {
    grid-template-columns:
      46px
      minmax(170px,1.4fr)
      repeat(2,minmax(130px,1fr)) !important;
  }


  #bankCards .custom-rate-results,
  #bankCards .deposit-result-grid,
  .bank-cards .custom-rate-results,
  .bank-cards .deposit-result-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* ========================================================
   MOBILE
   ======================================================== */

@media(max-width:700px) {

  #bankCards > *,
  .bank-cards > * {
    padding:16px !important;

    grid-template-columns:
      1fr !important;

    column-gap:0 !important;
    row-gap:12px !important;
  }


  /*
   * Kart içindeki bütün metrik bloklarını doğal sıraya al.
   */
  #bankCards > * > *,
  .bank-cards > * > * {
    min-width:0 !important;

    width:100% !important;

    grid-column:auto !important;
  }


  #bankCards .bank-custom-rate,
  #bankCards .custom-rate-box,
  #bankCards .custom-rate-panel,
  #bankCards .bank-special-rate,
  #bankCards .bank-card-custom-rate,
  .bank-cards .bank-custom-rate,
  .bank-cards .custom-rate-box,
  .bank-cards .custom-rate-panel,
  .bank-cards .bank-special-rate,
  .bank-cards .bank-card-custom-rate {
    grid-column:auto !important;

    margin-top:6px !important;

    padding:14px !important;
  }


  #bankCards .custom-rate-grid,
  .bank-cards .custom-rate-grid {
    grid-template-columns:
      1fr !important;
  }


  #bankCards .custom-rate-results,
  #bankCards .deposit-result-grid,
  .bank-cards .custom-rate-results,
  .bank-cards .deposit-result-grid {
    grid-template-columns:
      1fr 1fr !important;
  }


  #bankCards input,
  #bankCards select,
  .bank-cards input,
  .bank-cards select {
    font-size:16px !important;
  }

}


@media(max-width:430px) {

  #bankCards .custom-rate-results,
  #bankCards .deposit-result-grid,
  .bank-cards .custom-rate-results,
  .bank-cards .deposit-result-grid {
    grid-template-columns:
      1fr !important;
  }

}


/* ========================================================
   V7.11.2 MARKET COMPATIBILITY
   Eski JS hedefleri DOM'da kalır fakat görünmez.
   ======================================================== */

#page-market > .v711-market-legacy,
#marketCards.v711-market-legacy {
  display:none !important;
}


#page-market > #v711Market {
  display:block !important;
}