/* ============================================================
   Garanti Barter — Responsive Overrides (Mobile-first)
   ------------------------------------------------------------
   Bu dosya legacy Bootstrap 3 + Clip-One temasının ÜZERİNE
   yüklenir. Mevcut sayfa/marker HTML'lerini değiştirmeden
   küçük/orta ekranlarda kullanılabilirliği toparlar.
   ============================================================ */

/* ---------- Global temeller ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(0,108,173,0.08); }
img, svg, video { max-width: 100%; height: auto; }

/* iOS'ta input zoom'unu engellemek için 16px taban font */
input, select, textarea, button {
  font-size: 16px;
}
@media (min-width: 768px) {
  input, select, textarea { font-size: 13px; }
}

/* Mobil drawer açıkken body kilidi */
body.gb-nav-open { overflow: hidden !important; }

/* ---------- 1) Yatay scroll kaçağı yok ---------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ---------- 2) Header / Navbar ---------- */
@media (max-width: 991px) {
  .navbar.navbar-fixed-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    min-height: 56px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }
  .navbar > .container {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .navbar-brand { padding: 8px 12px !important; }
  .navbar-brand img { max-height: 36px; width: auto !important; }

  /* Sağ üst kullanıcı: mobilde sadece avatar göster */
  .navbar-tools .username,
  .navbar-tools .dropdown-toggle .clip-chevron-down {
    display: none !important;
  }
  .navbar-tools .nav.navbar-right { float: right; margin-right: 4px; }
  .navbar-tools .current-user > a { padding: 8px 10px !important; }
  .navbar-tools .current-user .circle-img {
    width: 36px !important; height: 36px;
  }

  /* Hamburger - daha büyük dokunma alanı */
  .navbar-toggle {
    display: inline-block !important;
    min-width: 44px; min-height: 44px;
    margin: 6px 0 6px 0 !important;
    padding: 10px !important;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
  }
  .navbar-toggle .clip-list-2 {
    font-size: 22px;
    color: #1f2937;
  }
}

/* ---------- 3) Mobil drawer ---------- */
@media (max-width: 991px) {
  .main-container { margin-top: 56px; }

  .navbar-content {
    position: fixed;
    top: 0; left: 0;
    width: 84vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 2px 0 16px rgba(0,0,0,.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.gb-nav-open .navbar-content {
    transform: translateX(0);
  }

  .main-navigation,
  .main-navigation.navbar-collapse,
  .main-navigation.navbar-collapse.collapse {
    /* Bootstrap 3 .collapse default'u display:none — drawer için override */
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 56px 0 24px 0 !important; /* üstte close için boşluk */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #ffffff !important;
    border: none !important;
  }
  /* Mobilde sub-menu'leri açık tut (tıklama ile aç/kapa yerine) */
  ul.main-navigation-menu .sub-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    background: #f8fafc !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  ul.main-navigation-menu > li > a > .icon-arrow {
    display: none !important;
  }

  ul.main-navigation-menu { padding: 0; margin: 0; }
  ul.main-navigation-menu > li > a {
    padding: 14px 18px !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    border-top: 1px solid #f1f5f9;
  }
  ul.main-navigation-menu > li > a > i,
  ul.main-navigation-menu > li > a > img {
    font-size: 18px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
  }
  ul.main-navigation-menu .icon-arrow {
    margin-left: auto;
  }
  ul.main-navigation-menu > li > ul.sub-menu > li > a {
    padding: 12px 18px 12px 48px !important;
    min-height: 44px;
    font-size: 14px;
  }
  ul.main-navigation-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    padding-left: 64px !important;
  }
  .navigation-toggler { display: none !important; }

  /* Backdrop */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms;
    z-index: 1090;
    pointer-events: none;
  }
  body.gb-nav-open::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Drawer içine kapatma butonu (JS ile inject) */
  .gb-drawer-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #334155;
    font-size: 22px;
    line-height: 1;
    z-index: 2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gb-drawer-close:hover { background: #f1f5f9; }
}

/* Tablet (768-991): drawer behavior aynı kalsın, ama icon-only sidebar opsiyonelse de bypass et */
@media (min-width: 768px) and (max-width: 991px) {
  .main-content { margin-left: 0 !important; }
}

/* ---------- 4) Main content padding ---------- */
@media (max-width: 991px) {
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
  }
  .main-content > .container,
  .main-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-left: none !important;
    border-right: none !important;
    min-height: auto !important;
  }
  .breadcrumb { padding: 8px 12px !important; font-size: 12px; }
}

/* ---------- 5) Tablolar ---------- */
@media (max-width: 991px) {
  .table-responsive,
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  /* Bootstrap 3 table.dataTable bazen wrapper'sız geliyor; her tabloyu kuşat */
  .main-content table.table,
  .main-content table.dataTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100% !important;
  }
  .main-content table.table thead,
  .main-content table.dataTable thead,
  .main-content table.table tbody,
  .main-content table.dataTable tbody,
  .main-content table.table tfoot,
  .main-content table.dataTable tfoot {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .main-content table.table th,
  .main-content table.table td,
  .main-content table.dataTable th,
  .main-content table.dataTable td {
    white-space: nowrap;
    font-size: 12.5px;
    padding: 8px 10px !important;
  }

  .dataTables_filter, .dataTables_length {
    float: none !important;
    text-align: left !important;
    margin-bottom: 8px;
  }
  .dataTables_filter input { width: 100% !important; max-width: 280px; }
  .dataTables_paginate { float: none !important; text-align: center !important; }
}

/* ---------- 6) Modal — mobilde tam ekran ---------- */
@media (max-width: 767px) {
  .modal {
    padding: 0 !important;
  }
  .modal.fade.in,
  .modal.in {
    display: block !important;
  }
  .modal .modal-dialog,
  #modal, #modalSmall, #modalMedium, #modalBig, #modalVeryBig {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
  }
  .modal .modal-content {
    height: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
  }
  .modal .modal-header {
    flex-shrink: 0;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e5e7eb;
  }
  .modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
  }
  .modal .modal-footer {
    flex-shrink: 0;
    padding: 12px 16px !important;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
  }
  .modal-backdrop.in { opacity: 0.5; }
}

/* Tablette modallar genişlik kısıtlı kalsın */
@media (min-width: 768px) and (max-width: 991px) {
  #modalBig, #modalVeryBig {
    width: 92vw !important;
    max-width: 920px !important;
    left: 50% !important;
    margin-left: -46vw !important;
  }
}

/* ---------- 7) Formlar ---------- */
@media (max-width: 767px) {
  .form-horizontal .control-label {
    text-align: left !important;
    padding-top: 0 !important;
    margin-bottom: 4px;
    font-size: 13px;
    color: #334155;
  }
  .form-horizontal .form-group { margin-bottom: 12px; }
  .form-horizontal .form-group > [class*="col-"] {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  .form-control, .input-group, .select2-container {
    width: 100% !important;
  }
  .form-control {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 16px;
    border-radius: 6px;
  }
  select.form-control { height: 44px; }
  textarea.form-control { min-height: 88px; }

  /* Buton grupları yığılsın */
  .btn { min-height: 40px; padding: 8px 14px !important; }
  .btn + .btn { margin-left: 6px; }
  .btn-block-mobile { display: block; width: 100%; margin-left: 0 !important; margin-bottom: 8px; }
  .btn-group > .btn { min-height: 40px; }

  /* Pull-right toolbarlar mobilde sola */
  .pull-right { float: none !important; }
}

/* ---------- 8) Card / panel başlıkları ---------- */
@media (max-width: 767px) {
  .panel-heading, .widget-header {
    padding: 10px 12px !important;
  }
  .widget-header h2, .panel-heading h3, .panel-heading h4 {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .widget-body, .panel-body { padding: 12px !important; }

  /* Bootstrap col-x'leri mobilde tek kolon (kasıtlı col-xs hariç) */
  .row [class*="col-md-"]:not([class*="col-xs-"]),
  .row [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-md-"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* col-md-offset-* offset'leri mobilde sıfırla */
  [class*="col-md-offset-"],
  [class*="col-lg-offset-"] {
    margin-left: 0 !important;
  }

  /* .row inline display:flex olsa bile mobilde yığılsın */
  form.row,
  .row[style*="flex"],
  form[style*="flex"] {
    display: block !important;
    flex-wrap: wrap !important;
  }
  /* Page-header — mobilde küçült */
  .page-header {
    padding: 8px 0 !important;
    margin: 8px 0 12px 0 !important;
    border-bottom: 1px solid #e5e7eb;
  }
  .page-header h1, .page-header h2, .page-header h3 {
    font-size: 20px !important;
    margin: 0 !important;
  }
}

/* ---------- 9) DataTables / Select2 toolbar ---------- */
@media (max-width: 767px) {
  .dataTables_wrapper .row > div { width: 100% !important; }
  .dataTables_wrapper .row { margin: 0; }
  .DTTT_container { float: none !important; margin-bottom: 8px; }
  .select2-container { font-size: 14px; }
  .select2-drop, .select2-drop-active { z-index: 1200 !important; }
}

/* ---------- 10) Footer ---------- */
@media (max-width: 767px) {
  .footer.clearfix {
    padding: 8px 12px !important;
    text-align: center;
    font-size: 11px;
  }
  .footer-fixed .footer { position: static !important; }
  .footer-items .go-top {
    width: 38px; height: 38px;
    line-height: 38px;
    bottom: 12px; right: 12px;
    position: fixed;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
  }
}

/* ---------- 11) Login ekranı ---------- */
@media (max-width: 767px) {
  body.login { padding: 0 !important; }
  .main-login {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    float: none !important;
    left: 0 !important;
  }
  .main-login .box-login {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 22px 18px !important;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  .main-login .logo img { width: 160px !important; height: auto; }
  .main-login .form-actions {
    text-align: center;
  }
  .main-login br { display: none; }
  .main-login .copyright { text-align: center; margin-top: 16px; font-size: 12px; }
  /* Tabs */
  .main-login .nav-tabs { display: flex; }
  .main-login .nav-tabs > li { flex: 1; }
  .main-login .nav-tabs > li > a { text-align: center; padding: 10px 8px !important; }
}

/* Tablet boyutu için login */
@media (min-width: 768px) and (max-width: 991px) {
  .main-login {
    width: 70% !important;
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    left: 0 !important;
  }
}

/* ---------- 11b) input-icon — mobilde ikon ve "Şifremi Unuttum" çakışması ---------- */
@media (max-width: 767px) {
  /* İkonlu input: solda yeterli padding bırak ki metin ikona binmesin.
     Form-control'un 10px/12px padding override'ı ile çakışıyordu — burada
     daha spesifik selector ile geri alıyoruz.
     `body` prefix'i specificity'yi yükseltir (max-width:767 .form-control
     override'ından kesin galip gelir). */
  body span.input-icon > input,
  body span.input-icon > input.form-control,
  body span.input-icon > .form-control {
    padding-left: 38px !important;
    padding-right: 12px !important;
  }
  body span.input-icon.input-icon-right > input,
  body span.input-icon.input-icon-right > input.form-control,
  body span.input-icon.input-icon-right > .form-control {
    padding-left: 12px !important;
    padding-right: 38px !important;
  }
  /* İkonu dikey ortala — line-height yerine flex davranışı */
  body span.input-icon > [class*="fa-"],
  body span.input-icon > [class*="clip-"] {
    line-height: 44px !important;
    font-size: 16px !important;
    left: 10px !important;
  }
  body span.input-icon.input-icon-right > [class*="fa-"],
  body span.input-icon.input-icon-right > [class*="clip-"] {
    left: auto !important;
    right: 10px !important;
  }

  /* "Şifremi Unuttum" linki — mobilde input'un sağına sığmıyor.
     Absolute pozisyondan çıkarıp input'un altına, sağa hizalı koy. */
  body.login a.forgot,
  span.input-icon > a.forgot {
    position: static !important;
    display: block;
    text-align: right;
    margin-top: 6px;
    font-size: 12px;
    padding: 4px 2px;
  }
  /* .password input'a verilmiş 130px padding-right artık gerekli değil */
  body.login input.password {
    padding-right: 38px !important;
  }

  /* Login form-group margin daha kompakt */
  body.login .form-group { margin-bottom: 10px; }

  /* form-actions: inline display:flex ile butonlar yanyana sıkışıyor
     (CustomerOtp: "Geri dön" + "Doğrula ve Giriş Yap" mobilde taşıyor).
     Mobilde wrap eklenir, butonlar full genişlik. */
  .form-actions[style*="flex"],
  .form-actions[style*="display: flex"],
  .form-actions[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: stretch !important;
  }
  .form-actions[style*="flex"] > .btn,
  .form-actions[style*="display: flex"] > .btn,
  .form-actions[style*="display:flex"] > .btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
  /* Login formlarında SMS Kodu Gönder / Login butonu mobilde full width */
  body.login .form-actions .btn-primary,
  body.login .btn.btn-primary.pull-right {
    float: none !important;
    width: 100%;
    margin-top: 4px;
  }
}

/* ---------- 12) Borsa sayfası — body.borsa-body için ---------- */
@media (max-width: 991px) {
  body.borsa-body .navbar,
  body.borsa-body .footer,
  body.borsa-body .navbar-content,
  body.borsa-body .main-container { display: contents !important; }
}

/* ---------- 13) Dropdown menüler ---------- */
@media (max-width: 767px) {
  .navbar-tools .dropdown-menu {
    position: fixed !important;
    top: 56px !important;
    right: 8px !important;
    left: auto !important;
    width: calc(100vw - 16px);
    max-width: 320px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
  }
}

/* ---------- 14) Erişilebilirlik & touch ---------- */
@media (max-width: 991px) {
  a, button, [role="button"] {
    -webkit-touch-callout: none;
  }
  .btn, a.btn, button {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Safe area (iPhone notch) */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer { padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
  .footer-items .go-top {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  body.gb-nav-open .navbar-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---------- 15) Çok büyük ekranlar (1600px+) ---------- */
@media (min-width: 1600px) {
  .main-content > .container {
    max-width: 1480px;
  }
}

/* ---------- 16) Print için ---------- */
@media print {
  .navbar, .navbar-content, .footer, .navigation-toggler { display: none !important; }
  .main-content { margin-left: 0 !important; }
}

/* ---------- 17) Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .navbar-content { transition: none !important; }
}