/*
 * Ozgun Ceyiz - modern responsive interface
 * Bu dosyayi mevcut tum CSS dosyalarindan SONRA yukleyin.
 * Yalnizca gorunumu degistirir; HTML, form adlari ve JavaScript isleyisi korunur.
 */

:root {
  --oc-brand: #16836f;
  --oc-brand-dark: #0f6657;
  --oc-brand-soft: #e9f7f3;
  --oc-ink: #172536;
  --oc-muted: #687386;
  --oc-line: #e2e8f0;
  --oc-surface: #ffffff;
  --oc-page: #f3f7fa;
  --oc-success: #16794b;
  --oc-radius: 18px;
  --oc-shadow: 0 20px 55px rgba(15, 35, 55, .10);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--oc-page) !important;
  color: var(--oc-ink) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  padding-bottom: 28px !important;
}

/* Header */
.header_area {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(17, 24, 39, .07);
  box-shadow: 0 5px 22px rgba(17, 24, 39, .05);
  position: relative;
  z-index: 50;
}

.header_middle.middle_two {
  background: transparent !important;
}

.header_middle .logo img {
  display: block;
  height: auto;
  max-height: 54px;
  max-width: 180px;
  object-fit: contain;
}

.canvas_open a,
.canvas_close a {
  align-items: center;
  background: #f4f4f5;
  border-radius: 12px;
  color: var(--oc-ink) !important;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
  width: 42px;
}

.canvas_open a:active,
.canvas_close a:active {
  background: var(--oc-brand-soft);
  transform: scale(.96);
}

.Offcanvas_menu_wrapper {
  background: #fff !important;
  box-shadow: 16px 0 50px rgba(0, 0, 0, .14);
}

.offcanvas_main_menu > li,
.Offcanvas_menu_wrapper .top_right > ul > li {
  border-bottom: 1px solid var(--oc-line) !important;
}

.offcanvas_main_menu a,
.Offcanvas_menu_wrapper .top_right a {
  color: var(--oc-ink) !important;
  font-size: 15px !important;
  font-weight: 600;
  min-height: 48px;
}

/* Forms shared by login, member and payment screens */
.account_form,
.cercevess,
#bankalarpos .bg1 {
  background: var(--oc-surface) !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: var(--oc-radius) !important;
  box-shadow: var(--oc-shadow) !important;
  color: var(--oc-ink) !important;
}

.account_form h2,
#bankalarpos legend {
  color: var(--oc-ink) !important;
  font-weight: 750 !important;
  letter-spacing: -.02em;
}

.account_form label,
#bankalarpos .control-label {
  color: #3f3f46 !important;
  font-weight: 650 !important;
}

.account_form .form-control,
#bankalarpos .form-control {
  appearance: none;
  background-color: #fff !important;
  border: 1px solid #d6d8dc !important;
  border-radius: 11px !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .03) !important;
  color: var(--oc-ink) !important;
  font-size: 16px !important;
  height: 50px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  outline: none;
  padding: 12px 14px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.account_form .form-control::placeholder,
#bankalarpos .form-control::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.account_form .form-control:focus,
#bankalarpos .form-control:focus {
  border-color: var(--oc-brand) !important;
  box-shadow: 0 0 0 4px rgba(22, 131, 111, .12) !important;
}

#bankalarpos select.form-control {
  background-image: linear-gradient(45deg, transparent 50%, #71717a 50%), linear-gradient(135deg, #71717a 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 38px !important;
}

.uyegirisbtn,
.kayitolbtn,
.bankalarposbtn {
  background: var(--oc-brand) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(22, 131, 111, .22) !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 15px !important;
  font-weight: 700 !important;
  height: 50px !important;
  letter-spacing: .01em;
  padding: 0 22px !important;
  text-transform: none !important;
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}

.uyegirisbtn:hover,
.kayitolbtn:hover,
.bankalarposbtn:hover {
  background: var(--oc-brand-dark) !important;
  box-shadow: 0 10px 24px rgba(15, 102, 87, .28) !important;
}

.uyegirisbtn:active,
.kayitolbtn:active,
.bankalarposbtn:active {
  transform: translateY(1px);
}

.uyegirisbtn:disabled,
.kayitolbtn:disabled,
.bankalarposbtn:disabled {
  cursor: wait;
  opacity: .7;
}

.footer_paymen {
  align-items: center;
  background: #fafafa;
  border: 1px solid var(--oc-line);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  padding: 15px !important;
}

.footer_paymen img {
  filter: saturate(.92);
  height: 25px !important;
  max-width: 76px;
  object-fit: contain;
  width: auto;
}

.footer_area,
footer {
  background: transparent !important;
  color: var(--oc-muted) !important;
}

.footer_area a,
footer a {
  color: var(--oc-brand-dark) !important;
  font-weight: 650;
}

/* Mobile-first improvements without changing desktop grid behavior */
@media only screen and (max-width: 767px) {
  body {
    overflow-x: hidden;
    padding-bottom: 84px !important;
  }

  .header_top.top_two {
    display: none !important;
  }

  .header_area {
    position: sticky;
    top: 0;
  }

  .header_middle.middle_two {
    padding: 11px 0 !important;
  }

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

  .header_middle .row {
    min-height: 54px;
    position: relative;
  }

  .header_middle .row > .col-2 {
    align-items: center;
    display: flex;
    flex: 0 0 54px;
    max-width: 54px;
    padding: 0;
    z-index: 2;
  }

  .header_middle .row > .col-4 {
    align-items: center;
    display: flex;
    justify-content: center;
    left: 50%;
    max-width: calc(100% - 120px);
    padding: 0;
    position: absolute;
    transform: translateX(-50%);
    width: auto;
  }

  .header_middle .logo img {
    max-height: 43px;
    max-width: 154px;
  }

  .header_middle .row > .col-6 {
    margin-left: auto;
    max-width: 54px;
    min-height: 42px;
    padding: 0;
  }

  .Offcanvas_menu .container,
  .Offcanvas_menu .col-12 {
    padding: 0 !important;
  }

  .Offcanvas_menu_wrapper {
    padding: 24px 20px !important;
    width: min(88vw, 350px) !important;
  }

  body > .container {
    max-width: 560px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body > .container > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #bankalarpos {
    margin: 18px auto 0;
  }

  #bankalarpos .cercevess,
  #bankalarpos .bg1 {
    overflow: hidden;
    padding: 0 !important;
  }

  #bankalarpos fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 22px 18px 20px;
  }

  #bankalarpos fieldset > .col-sm-9 {
    float: none !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #bankalarpos fieldset > .col-sm-9::before {
    color: var(--oc-ink);
    content: "Güvenli Ödeme";
    display: block;
    font-size: 22px;
    font-weight: 760;
    letter-spacing: -.03em;
    line-height: 1.2;
    margin: 0 0 5px;
  }

  #bankalarpos fieldset > .col-sm-9::after {
    color: var(--oc-muted);
    content: "Kart bilgilerinizi girerek ödemenizi tamamlayın.";
    display: block;
    font-size: 13px;
    line-height: 1.45;
    margin: -3px 0 22px;
  }

  #bankalarpos .form-group {
    margin: 0 0 17px !important;
  }

  #bankalarpos .control-label,
  #bankalarpos .form-group > label {
    display: block;
    float: none !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #bankalarpos .siparisform {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #bankalarpos .form-group > .col-sm-8 {
    float: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  #bankalarpos .form-control {
    max-width: none !important;
    width: 100% !important;
  }

  #bankalarpos input[name="amount"] {
    max-width: calc(100% - 50px) !important;
  }

  #bankalarpos input[name="amount"] + div {
    align-items: center;
    color: var(--oc-muted);
    display: flex;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    line-height: 1 !important;
    margin-left: 12px !important;
  }

  #bankalarpos input[name="cv2"] {
    max-width: 145px !important;
  }

  #bankalarpos .form-group:has(select[name="Ecom_Payment_Card_ExpDate_Month"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
  }

  #bankalarpos .form-group:has(select[name="Ecom_Payment_Card_ExpDate_Month"]) > label {
    flex: 0 0 100%;
  }

  #bankalarpos .form-group:has(select[name="Ecom_Payment_Card_ExpDate_Month"]) > .col-6 {
    flex: 1 1 0;
    max-width: none !important;
    width: auto !important;
  }

  .bankalarposbtn {
    display: block !important;
    margin: 22px 0 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .footer_paymen {
    gap: 10px 13px;
    margin: 3px 0 0 !important;
    padding: 14px 10px !important;
  }

  .footer_paymen img {
    height: 22px !important;
    max-width: 68px;
  }

  .account_form {
    border-radius: var(--oc-radius) !important;
    margin: 18px 0 !important;
    min-height: 0 !important;
    padding: 22px 18px !important;
  }

  .account_form h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 0 0 18px !important;
  }

  .account_form .form-control {
    display: block !important;
    margin-bottom: 14px !important;
    max-width: none !important;
    width: 100% !important;
  }

  .account_form .uyegirisbtn,
  .account_form .kayitolbtn {
    margin-top: 6px !important;
    max-width: none !important;
    width: 100% !important;
  }

  .footer_area,
  footer {
    font-size: 12px !important;
    line-height: 1.7 !important;
    padding: 18px 14px 6px !important;
    text-align: center !important;
  }

  /* Existing fixed WhatsApp icon: lift it above browser safe-area. */
  a[href*="api.whatsapp.com"] img,
  a[href*="web.whatsapp.com"] img {
    background: #fff;
    border: 3px solid #fff !important;
    border-radius: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    height: 54px !important;
    left: 16px !important;
    max-width: 54px !important;
  }
}

@media only screen and (max-width: 374px) {
  #bankalarpos fieldset {
    padding-left: 14px;
    padding-right: 14px;
  }

  .header_middle .logo img {
    max-width: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   V2 - login/register layout and off-canvas repair
   These selectors are intentionally stronger than the old
   inline rules that are printed after this stylesheet.
   ========================================================= */

html body .account_form {
  background: #ffffff !important;
  border: 1px solid rgba(23, 37, 54, .08) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 60px rgba(15, 35, 55, .12) !important;
  color: var(--oc-ink) !important;
  line-height: 1.5 !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 32px !important;
  position: relative;
}

html body .account_form::before {
  background: linear-gradient(135deg, var(--oc-brand), #48b49f);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

html body .account_form h2 {
  color: var(--oc-ink) !important;
  font-size: 28px !important;
  font-weight: 780 !important;
  letter-spacing: -.035em;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
}

html body .account_form h2::after {
  color: var(--oc-muted);
  content: "Hesabınıza güvenli şekilde giriş yapın";
  display: block;
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 7px;
}

html body .account_form > img[src*="cizgi"],
html body .account_form .login_submit > img[src*="cizgi"] {
  display: none !important;
}

html body .account_form form {
  margin-top: 26px;
}

html body .account_form form > .col-md-4 {
  color: #3b4656 !important;
  float: none !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.35 !important;
  margin: 0 0 8px;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

html body .account_form form > .col-md-4 i {
  color: var(--oc-brand) !important;
  font-size: 15px !important;
  margin-right: 7px !important;
}

html body .account_form form > p.col-md-8 {
  float: none !important;
  margin: 0 0 18px !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

html body .account_form .form-control {
  background: #f8fafc !important;
  border: 1px solid #dbe3eb !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  color: var(--oc-ink) !important;
  display: block !important;
  font-size: 16px !important;
  height: 52px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 13px 15px !important;
  width: 100% !important;
}

html body .account_form .form-control:focus {
  background: #fff !important;
  border-color: var(--oc-brand) !important;
  box-shadow: 0 0 0 4px rgba(22, 131, 111, .12) !important;
}

html body .account_form .login_submit .col-md-12 {
  display: grid;
  float: none !important;
  gap: 11px;
  grid-template-columns: 1fr;
  margin: 4px 0 0 !important;
  max-width: none !important;
  padding: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

html body .account_form .uyegirisbtn {
  background: linear-gradient(135deg, var(--oc-brand), #1d9a82) !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 24px rgba(22, 131, 111, .24) !important;
  color: #fff !important;
  float: none !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  height: 52px !important;
  line-height: 52px !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 20px !important;
  text-align: center;
  width: 100% !important;
}

html body .account_form .login_submit a.gbtn {
  align-items: center;
  background: #eef3f7 !important;
  border: 1px solid #dce4eb !important;
  border-radius: 13px !important;
  color: #314154 !important;
  display: flex !important;
  float: none !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  height: 48px !important;
  justify-content: center;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 18px !important;
  text-decoration: none !important;
  width: 100% !important;
}

html body .account_form .login_submit > a[href*="sifremiunuttum"] {
  color: var(--oc-brand-dark) !important;
  display: block;
  font-size: 13px;
  font-weight: 650;
  margin-top: 15px;
  text-align: center;
  text-decoration: none;
}

html body .account_form .login_submit > a[href*="sifremiunuttum"]:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  /* Fix: old theme hides only 300 px; a wider drawer left a visible strip. */
  html body .Offcanvas_menu_wrapper {
    bottom: 0 !important;
    left: 0 !important;
    max-width: 340px !important;
    overflow-y: auto !important;
    position: fixed !important;
    top: 0 !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform .28s ease !important;
    width: 86vw !important;
    z-index: 9999 !important;
  }

  html body .Offcanvas_menu_wrapper.active {
    transform: translate3d(0, 0, 0) !important;
  }

  html body .off_canvars_overlay {
    background: rgba(15, 29, 43, .48) !important;
    inset: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    transition: opacity .25s ease !important;
    visibility: hidden !important;
    z-index: 9998 !important;
  }

  html body .off_canvars_overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* Login/register is a focused flow: hide menu and decorative banner. */
  body:has(.account_form) .canvas_open,
  body:has(.account_form) .Offcanvas_menu,
  body:has(.account_form) .off_canvars_overlay {
    display: none !important;
  }

  body:has(.account_form) .header_middle .row > .col-2,
  body:has(.account_form) .header_middle .row > .col-6 {
    display: none !important;
  }

  body:has(.account_form) .header_middle .row > .col-4 {
    left: auto !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
  }

  body:has(.account_form) > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:has(.account_form) > .container > .row > .col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body:has(.account_form) > .container > .row > .col-lg-7 {
    display: none !important;
  }

  html body .account_form {
    border-radius: 20px !important;
    margin: 22px 0 18px !important;
    padding: 27px 20px 24px !important;
    width: 100% !important;
  }

  html body .account_form h2 {
    font-size: 25px !important;
  }

  html body .account_form form {
    margin-top: 23px;
  }

  html body .account_form form > .col-md-4 {
    display: none !important;
  }

  html body .account_form form > p.col-md-8 {
    margin-bottom: 14px !important;
  }

  html body .account_form .form-control {
    height: 54px !important;
  }

  body:has(.account_form) .footer_paymen .bankalogolar {
    display: grid !important;
    gap: 10px 16px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.account_form) .footer_paymen .bankalogolar li {
    align-items: center;
    display: flex !important;
    justify-content: center;
    margin: 0 !important;
    min-height: 28px;
  }

  body:has(.account_form) .footer_paymen .bankalogolar li:nth-child(n+9) {
    display: none !important;
  }

  body:has(.account_form) footer {
    margin-top: 3px !important;
  }

  body:has(.account_form) .copyright_area p {
    margin: 0 !important;
  }
}