/* ========================================================
   PAYCARD V7.12.1
   MOBILE SIDEBAR + GOLD FIRST
   ======================================================== */


/*
 * Desktop
 */

.v7121-mobile-menu-button,
.v7121-mobile-nav,
.v7121-mobile-overlay {
  display:none;
}


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

@media(max-width:760px) {

  body.v7121-menu-open {
    overflow:hidden !important;
  }


  /*
   * Eski masaüstü navigation mobilde gizlenir.
   * Artık kesilip yalnız "Kripto" görünmesi yok.
   */
  .v7121-desktop-navigation {
    display:none !important;
  }


  /*
   * Header
   */
  header,
  .site-header,
  .topbar {
    position:relative;

    min-height:62px;

    overflow:visible !important;
  }


  header > *,
  .site-header > *,
  .topbar > * {
    min-width:0;
  }


  /*
   * Hamburger
   */
  .v7121-mobile-menu-button {
    width:42px;
    height:42px;

    flex:
      0 0 42px;

    padding:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin-right:10px;

    color:#14202b;

    background:#fff;

    border:
      1px solid #dfe6ea;

    border-radius:11px;

    cursor:pointer;

    box-shadow:
      0 4px 15px
      rgba(10,30,40,.05);
  }


  .v7121-mobile-menu-button span {
    width:18px;
    height:2px;

    display:block;

    background:#25313d;

    border-radius:2px;
  }


  /*
   * Overlay
   */
  .v7121-mobile-overlay {
    position:fixed;

    inset:0;

    z-index:999990;

    display:block;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    background:
      rgba(5,15,22,.56);

    backdrop-filter:
      blur(3px);

    transition:
      opacity .2s ease,
      visibility .2s ease;
  }


  .v7121-mobile-overlay.open {
    visibility:visible;

    opacity:1;

    pointer-events:auto;
  }


  /*
   * Sidebar
   */
  .v7121-mobile-nav {
    position:fixed;

    top:0;
    left:0;
    bottom:0;

    z-index:999999;

    width:
      min(
        86vw,
        340px
      );

    display:flex;

    flex-direction:column;

    transform:
      translateX(-102%);

    background:#fff;

    box-shadow:
      20px 0 60px
      rgba(0,0,0,.18);

    transition:
      transform .23s
      cubic-bezier(
        .22,.61,.36,1
      );
  }


  .v7121-mobile-nav.open {
    transform:
      translateX(0);
  }


  /*
   * Sidebar head
   */
  .v7121-mobile-head {
    min-height:78px;

    padding:
      17px 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-bottom:
      1px solid #e8ecef;
  }


  .v7121-mobile-head > div {
    min-width:0;
  }


  .v7121-mobile-head span {
    display:block;

    color:var(--primary);

    font-size:8px;

    font-weight:900;

    letter-spacing:.16em;
  }


  .v7121-mobile-head strong {
    display:block;

    margin-top:3px;

    color:#15202b;

    font-size:20px;
  }


  #v7121MobileClose {
    width:38px;
    height:38px;

    flex:
      0 0 38px;

    display:grid;

    place-items:center;

    color:#64717e;

    background:#f3f6f7;

    border:0;

    border-radius:50%;

    cursor:pointer;

    font-size:23px;

    line-height:1;
  }


  /*
   * Links
   */
  .v7121-mobile-links {
    min-height:0;

    flex:1;

    padding:
      14px;

    display:grid;

    align-content:start;

    gap:7px;

    overflow-y:auto;

    overscroll-behavior:
      contain;
  }


  .v7121-mobile-link {
    width:100%;

    min-height:67px;

    padding:
      10px 11px;

    display:grid;

    grid-template-columns:
      42px
      minmax(0,1fr)
      20px;

    align-items:center;

    gap:11px;

    color:#1c2834;

    background:#fff;

    border:
      1px solid #e5eaed;

    border-radius:12px;

    cursor:pointer;

    text-align:left;
  }


  /*
   * Altın ilk item ve biraz vurgulu.
   */
  .v7121-mobile-link:first-child {
    background:
      linear-gradient(
        135deg,
        #fffbeb,
        #fff
      );

    border-color:#ead994;
  }


  .v7121-mobile-icon {
    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    color:var(--primary);

    background:#e9f7f2;

    border-radius:10px;

    font-size:18px;

    font-weight:900;
  }


  .v7121-mobile-link:first-child
  .v7121-mobile-icon {
    color:#705400;

    background:#f5d96c;
  }


  .v7121-mobile-label {
    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;
  }


  .v7121-mobile-label strong {
    color:#17232e;

    font-size:13px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
  }


  .v7121-mobile-label small {
    color:#84909b;

    font-size:9px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
  }


  .v7121-mobile-arrow {
    color:#9aa5ae;

    font-size:22px;

    text-align:center;
  }


  /*
   * Footer + language
   */
  .v7121-mobile-footer {
    padding:14px;

    border-top:
      1px solid #e7ecef;

    background:#fafbfc;
  }


  .v7121-mobile-language {
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:7px;
  }


  .v7121-mobile-language button {
    min-height:39px;

    color:#667380;

    background:#fff;

    border:
      1px solid #dfe5e9;

    border-radius:8px;

    cursor:pointer;

    font-size:10px;

    font-weight:900;
  }


  .v7121-mobile-language button.active {
    color:#fff;

    background:var(--primary);

    border-color:
      var(--primary);
  }


  /*
   * Page content
   */
  main {
    width:100% !important;

    max-width:100% !important;
  }


  .page {
    width:100% !important;

    max-width:100% !important;

    overflow-x:hidden;
  }


  /*
   * Gold page mobile safety
   */
  #page-gold {
    width:100% !important;

    max-width:100% !important;
  }


  #page-gold .form-grid,
  #page-gold .calculator-grid,
  #page-gold .gold-grid {
    grid-template-columns:
      1fr !important;
  }


  /*
   * Crypto page mobile safety
   */
  #page-crypto {
    width:100% !important;

    max-width:100% !important;
  }


  /*
   * Existing V7.12 desktop TR/EN is not needed in
   * mobile header; sidebar contains language control.
   */
  #v712Language {
    display:none !important;
  }

}


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

@media(max-width:390px) {

  .v7121-mobile-nav {
    width:90vw;
  }


  .v7121-mobile-links {
    padding:11px;
  }


  .v7121-mobile-link {
    min-height:62px;

    grid-template-columns:
      38px
      minmax(0,1fr)
      17px;

    gap:9px;
  }


  .v7121-mobile-icon {
    width:38px;
    height:38px;

    font-size:16px;
  }


  .v7121-mobile-label strong {
    font-size:12px;
  }

}