/* MTEX Mobile v5 - Final Premium Design */

/* ========== HAMBURGER ========== */
.mtex-hamburger{
  display:none;
  position:fixed !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  z-index:2147483647 !important;
  width:46px;height:46px;
  background:linear-gradient(135deg,#1a2138 0%,#0a0e1a 100%);
  border:1.5px solid rgba(240,180,41,.55);
  border-radius:13px;
  cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:11px;margin:0;
  box-shadow:0 4px 18px rgba(0,0,0,.6),0 0 0 1px rgba(240,180,41,.15),inset 0 1px 0 rgba(255,255,255,.06);
  transition:all .25s cubic-bezier(.4,0,.2,1);
  outline:none;
  -webkit-tap-highlight-color:transparent
}
.mtex-hamburger:active{transform:scale(.92)}
.mtex-hamburger:hover{border-color:#f0b429;box-shadow:0 6px 24px rgba(240,180,41,.3)}
.mtex-hamburger span{
  display:block;width:22px;height:2.5px;
  background:linear-gradient(90deg,#f0b429,#fbd34d);
  border-radius:3px;
  transition:all .3s cubic-bezier(.68,-.55,.27,1.55);
  pointer-events:none;
  box-shadow:0 0 4px rgba(240,180,41,.4)
}
.mtex-hamburger.active{background:linear-gradient(135deg,#f0b429 0%,#d97706 100%);border-color:#fbd34d}
.mtex-hamburger.active span{background:#0a0e1a;box-shadow:none}
.mtex-hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mtex-hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.mtex-hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ========== OVERLAY ========== */
.mtex-drawer-overlay{
  display:none;
  position:fixed !important;
  top:0;left:0;right:0;bottom:0;
  background:radial-gradient(circle at 30% 50%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.8) 100%);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  z-index:2147483645 !important;
  opacity:0;
  transition:opacity .3s ease
}
.mtex-drawer-overlay.active{opacity:1;display:block}

/* ========== DRAWER ========== */
.mtex-drawer{
  display:none;
  position:fixed !important;
  top:0 !important;
  left:-360px !important;
  right:auto !important;
  width:320px;max-width:88vw;height:100vh;
  background:linear-gradient(165deg,#0a0e1a 0%,#0f1421 50%,#141927 100%);
  z-index:2147483646 !important;
  box-shadow:6px 0 40px rgba(0,0,0,.7),inset -1px 0 0 rgba(240,180,41,.12);
  transition:left .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overflow-x:hidden;
  border-right:2px solid rgba(240,180,41,.4)
}
.mtex-drawer.active{left:0 !important;display:block}

.mtex-drawer-head{
  position:relative;
  padding:30px 24px 22px;
  background:linear-gradient(135deg,rgba(240,180,41,.14) 0%,transparent 70%);
  border-bottom:1px solid rgba(240,180,41,.22);
  overflow:hidden
}
.mtex-drawer-head::before{
  content:'';position:absolute;
  top:-30px;right:-30px;
  width:110px;height:110px;
  background:radial-gradient(circle,rgba(240,180,41,.18) 0%,transparent 70%);
  border-radius:50%;
  pointer-events:none
}
.mtex-drawer-head::after{
  content:'';position:absolute;
  bottom:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,#f0b429,transparent)
}
.mtex-drawer-logo{
  display:flex;align-items:center;gap:13px;position:relative
}
.mtex-drawer-logo-icon{
  width:44px;height:44px;
  background:linear-gradient(135deg,#f0b429 0%,#d97706 100%);
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:21px;color:#0a0e1a;
  box-shadow:0 4px 14px rgba(240,180,41,.45),inset 0 1px 0 rgba(255,255,255,.3);
  letter-spacing:-1px
}
.mtex-drawer-head h3{
  margin:0;color:#f0b429;font-size:22px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(135deg,#f0b429 0%,#fbd34d 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text
}
.mtex-drawer-head p{margin:4px 0 0;color:#a0aec0;font-size:12px;font-weight:500;letter-spacing:.3px}

/* Nav links */
.mtex-drawer-nav{padding:18px 0 8px}
.mtex-drawer-nav a{
  display:flex !important;
  align-items:center;gap:14px;
  padding:14px 22px;
  color:#cbd5e0;
  text-decoration:none;
  font-size:14.5px;font-weight:600;
  border-left:3px solid transparent;
  transition:all .2s ease;
  position:relative;
  letter-spacing:.2px
}
.mtex-drawer-nav a::before{
  content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:0;height:60%;
  background:linear-gradient(180deg,#f0b429,#d97706);
  border-radius:0 4px 4px 0;
  transition:width .25s
}
.mtex-drawer-nav a:hover{
  background:linear-gradient(90deg,rgba(240,180,41,.1) 0%,transparent 100%);
  color:#fff;
  transform:translateX(4px)
}
.mtex-drawer-nav a:hover::before{width:3px}
.mtex-drawer-nav a.active{
  background:linear-gradient(90deg,rgba(240,180,41,.18) 0%,rgba(240,180,41,.03) 100%);
  color:#f0b429
}
.mtex-drawer-nav a.active::before{width:3px}
.mtex-drawer-nav a.active::after{
  content:'';position:absolute;right:18px;
  width:6px;height:6px;border-radius:50%;
  background:#f0b429;
  box-shadow:0 0 8px #f0b429;
  animation:mtex-pulse 1.5s infinite
}
@keyframes mtex-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.mtex-drawer-nav a .ico{
  font-size:18px;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:rgba(240,180,41,.1);
  border-radius:9px;
  transition:all .25s
}
.mtex-drawer-nav a:hover .ico,.mtex-drawer-nav a.active .ico{
  background:rgba(240,180,41,.22);
  transform:scale(1.08)
}

/* Footer */
.mtex-drawer-foot{
  padding:18px 24px 26px;
  border-top:1px solid rgba(240,180,41,.14);
  margin-top:14px;
  background:linear-gradient(180deg,transparent 0%,rgba(240,180,41,.04) 100%)
}
.mtex-drawer-foot .badge{
  display:inline-block;
  padding:4px 11px;
  background:linear-gradient(135deg,rgba(240,180,41,.18) 0%,rgba(240,180,41,.05) 100%);
  border:1px solid rgba(240,180,41,.3);
  border-radius:20px;
  color:#f0b429;
  font-size:10px;font-weight:700;letter-spacing:1px;
  margin-bottom:8px;
  text-transform:uppercase
}
.mtex-drawer-foot small{color:#718096;font-size:11px;line-height:1.6;display:block}

/* ========== KARSILAMA MESAJI - Mobilde ========== */
.mtex-welcome{display:none}

/* ========== MOBILE BREAKPOINT ========== */
@media (max-width:768px){
  .mtex-hamburger{display:flex !important}
  header.hdr nav.nav,header nav.nav,nav.nav{display:none !important}
  body{padding-top:62px}
  
  /* Logo'yu hamburger'in yanindan biraz ic koy */
  header.hdr .logo,header .logo{margin-left:60px !important}
  
  .container,.wrap,main{padding-left:12px !important;padding-right:12px !important}
  .fab-grid,.fab-cards,.cards-grid{grid-template-columns:1fr !important}
  table{font-size:13px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  
  /* MOBILDE: Haberleri yukari al (compact-prices'tan once) */
  .col-main{display:flex !important;flex-direction:column !important}
  .col-main .bx-news{order:1 !important}
  .col-main .compact-prices{order:2 !important}
  .col-main > section:nth-of-type(3){order:3 !important}
  .col-main > section:nth-of-type(4){order:4 !important}
  .col-main > section:nth-of-type(5){order:5 !important}
  .col-main > section:nth-of-type(6){order:6 !important}
  .col-main > section:nth-of-type(7){order:7 !important}
  .col-main > section:nth-of-type(8){order:8 !important}
  
  /* Karsilama mesaji mobilde gorunsun */
  .mtex-welcome{
    display:block !important;
    margin:0 0 14px;
    padding:18px 16px;
    background:linear-gradient(135deg,rgba(240,180,41,.12) 0%,rgba(240,180,41,.03) 100%);
    border:1px solid rgba(240,180,41,.25);
    border-left:4px solid #f0b429;
    border-radius:12px;
    box-shadow:0 2px 12px rgba(0,0,0,.2)
  }
  .mtex-welcome h2{
    margin:0 0 4px;
    color:#f0b429;
    font-size:16px;font-weight:800;
    letter-spacing:.3px
  }
  .mtex-welcome p{
    margin:0;
    color:#cbd5e0;
    font-size:13px;line-height:1.5
  }
  .mtex-welcome .wave{
    display:inline-block;
    animation:mtex-wave 2s ease-in-out infinite;
    transform-origin:70% 70%
  }
  @keyframes mtex-wave{
    0%,60%,100%{transform:rotate(0)}
    10%,30%{transform:rotate(14deg)}
    20%{transform:rotate(-8deg)}
    40%{transform:rotate(-4deg)}
    50%{transform:rotate(10deg)}
  }
}

@media (max-width:480px){
  .mtex-drawer{width:300px}
  .mtex-hamburger{top:10px;left:10px;width:42px;height:42px}
  header.hdr .logo,header .logo{margin-left:56px !important;font-size:14px !important}
}

@media (hover:none){
  .mtex-drawer-nav a{padding:16px 22px}
}