/* ============================================================================
   ERES-THEME: MÜŞTERİ PORTALI GİRİŞ SKIN (0.35.0) — TAM REPLACE marka ayağı.
   Yüzey: müşteri (client area) auth sayfaları — /authentication/login +
   forgot_password + reset_password (+ register, kapalı). Çekirdek müşteri
   temasından AYRI yüzey. Tasarım hedefi (TEK DOĞRULUK):
   modules/eres_crm/docs/mockup/eres-crm-musteri-v2.html → EKRAN 1 (Giriş).

   YERLEŞİM: masaüstünde İKİ SÜTUN — solda KOYU marka paneli (hook ile enjekte,
   .eres-brandpanel), sağda AYDINLIK form kartı. Form tarafı hep aydınlık
   (Yılmaz "koyu olmasın" ilkesi form yüzeyinde korunur; koyu yalnız yan marka
   sütunudur). Dar ekranda marka paneli düşer → aydınlık ortalanmış kart.

   Mekanizma: core tema view'larına SIFIR dokunuş. Tek CSS + çekirdeğin resmi
   `app_customers_head` (link) ve `clients_login_form_start` (marka paneli HTML)
   hook'ları. Hook YALNIZ Authentication auth metotlarında basar → oturum-açık
   portal sayfaları etkilenmez; `body.customers` kapsamı auth-güvenlidir.
   Kill-switch: eres_crm_portal_login_skin_enabled=0 → link+panel basılmaz,
   stok müşteri girişi aynen döner. Fontlar YEREL (eres-crm-fonts.css); dış
   istek YOK.
   ========================================================================== */
body.customers{
  --pl-primary:#4a5df9; --pl-deep:#3243e0; --pl-soft:#eef0ff; --pl-signal:#2fd6c3;
  --pl-ink:#0d1024; --pl-ink2:#161a38; --pl-paper:#f5f6fb; --pl-surface:#ffffff;
  --pl-line:#e6e9f5; --pl-line-strong:#d7dbef; --pl-text:#22263d; --pl-muted:#6b7191;
  --pl-faint:#9aa0bf; --pl-danger:#e2494f; --pl-success:#17a673;
  --pl-grad:linear-gradient(135deg,#4a5df9,#2fd6c3);
  --pl-disp:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pl-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pl-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- GÖVDE: aydınlık paper zemin ---- */
body.customers{
  min-height:100vh; margin:0; font-family:var(--pl-body);
  -webkit-font-smoothing:antialiased; color:var(--pl-text);
  background:var(--pl-paper);}
body.customers #wrapper, body.customers #content{background:transparent !important;}
body.customers ::selection{background:rgba(74,93,249,.2);}

/* ---- NAVBAR: aydınlık (blur), marka logosu, indigo Giriş pill'i ----
   (Masaüstü giriş'te gizlenir — marka paneli logoyu taşır; forgot/reset ve
   mobil giriş'te görünür kalır.) */
body.customers .navbar-default.header{
  background:rgba(255,255,255,.84) !important; backdrop-filter:saturate(180%) blur(10px);
  border:0 !important; border-bottom:1px solid var(--pl-line) !important;
  box-shadow:0 1px 20px -14px rgba(20,22,40,.5); margin-bottom:8px;}
body.customers .navbar-brand.logo{padding:12px 0; margin:0; display:inline-flex; align-items:center; background:transparent; box-shadow:none;}
body.customers .navbar-brand.logo img{max-height:30px; width:auto;}
body.customers .navbar-default .navbar-nav>li>a{
  color:var(--pl-muted); font-weight:600; font-size:13.5px; transition:color .15s ease;}
body.customers .navbar-default .navbar-nav>li>a:hover,
body.customers .navbar-default .navbar-nav>li>a:focus{color:var(--pl-text); background:transparent;}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a,
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a:active,
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a:hover{
  background:linear-gradient(135deg,var(--pl-primary),var(--pl-deep)) !important;
  color:#fff !important; border-radius:10px !important; font-weight:700;
  box-shadow:0 12px 24px -12px rgba(74,93,249,.7);}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a:hover{filter:brightness(.93);}
body.customers .navbar-toggle .icon-bar{background:var(--pl-muted) !important;}
body.customers .navbar-toggle{border-color:var(--pl-line);}
body.customers .navbar-collapse{border-color:var(--pl-line); box-shadow:none;}

/* ---- BAŞLIK ----
   GİRİŞ: başlık kartın İÇİNDE (.eres-cardhead — hook enjekte, CSS order ile en
   üstte); çekirdek h1.login-heading kolonu login'de GİZLENİR (başlık kart dışında
   kalmaz). forgot/reset: çekirdek başlık taban stille kalır (kart üstünde). */
body.customers .login-heading,
body.customers .forgot-password-heading h1,
body.customers #content h1.login-heading{
  color:var(--pl-ink) !important; font-family:var(--pl-disp);
  font-weight:800; letter-spacing:-.02em; font-size:23px; line-height:1.2;
  margin:2px 0 10px !important;}
body.customers .col-md-4.text-center:has(.login-heading){text-align:left;}
/* giriş: çekirdek başlık kolonu gizli (başlık karta taşındı) */
body.customers_login .col-md-4.text-center:has(.login-heading){display:none;}
/* kart içi başlık bloğu (mockup .eres-auth başlığı) */
body.customers_login .eres-cardhead{order:-10; margin:0 0 4px;}
body.customers_login .eres-cardhead__eyebrow{
  display:block; font-family:var(--pl-mono); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pl-primary);}
body.customers_login .eres-cardhead__h1{
  margin:10px 0 5px; font-family:var(--pl-disp); font-weight:800; font-size:22px;
  line-height:1.25; letter-spacing:-.02em; color:var(--pl-ink);}
body.customers_login .eres-cardhead__sub{
  margin:0 0 16px; color:var(--pl-muted); font-size:14px; line-height:1.55;}

/* ---- KART: beyaz Eres kartı, tepe indigo→teal aksan ---- */
body.customers .panel_s{
  background:var(--pl-surface); border:none; border-radius:18px;
  position:relative; overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(20,22,45,.5), 0 0 0 1px var(--pl-line);}
body.customers .panel_s::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--pl-grad); z-index:2;}
body.customers .panel_s .panel-body{padding:26px 28px 22px;}

/* ---- FORM ---- */
body.customers .panel_s .form-group{margin-bottom:14px;}
body.customers .panel_s label, body.customers .panel_s .control-label{
  font-size:13px; font-weight:600; color:var(--pl-text); margin-bottom:6px;}
body.customers .panel_s .form-control{
  height:auto; padding:16px 16px; font-size:14px; color:var(--pl-text);
  border:1px solid var(--pl-line-strong); border-radius:12px; background:#f8f9fe;
  box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;}
body.customers .panel_s .form-control:hover{border-color:#c8cde6;}
body.customers .panel_s .form-control:focus{
  border-color:var(--pl-primary); background:#fff; outline:none;
  box-shadow:0 0 0 3.5px rgba(74,93,249,.16);}
body.customers .panel_s .form-control::placeholder{color:var(--pl-faint);}

/* Dil seçici (bootstrap-select) — girdilerle aynı dile getirilir */
body.customers .panel_s .bootstrap-select>.dropdown-toggle,
body.customers .panel_s .bootstrap-select>.btn{
  height:auto; padding:11px 14px; font-size:14px; color:var(--pl-text);
  border:1px solid var(--pl-line-strong) !important; border-radius:12px !important;
  background:#f8f9fe !important; box-shadow:none !important;}
body.customers .panel_s .bootstrap-select.open>.dropdown-toggle{
  border-color:var(--pl-primary) !important; box-shadow:0 0 0 3.5px rgba(74,93,249,.16) !important;}
body.customers .panel_s .bootstrap-select .dropdown-menu{
  border:1px solid var(--pl-line); border-radius:12px; box-shadow:0 18px 44px -14px rgba(0,0,0,.28);}
body.customers .panel_s .bootstrap-select .dropdown-menu li.selected>a,
body.customers .panel_s .bootstrap-select .dropdown-menu li>a:hover{
  background:rgba(74,93,249,.1); color:var(--pl-deep);}

/* Beni hatırla — özel kutu görünümü */
body.customers .panel_s .checkbox{margin:6px 0 4px;}
body.customers .panel_s .checkbox input[type=checkbox]{
  accent-color:var(--pl-primary); width:16px; height:16px; margin-top:2px;}
body.customers .panel_s .checkbox label{font-size:13.5px; font-weight:500; color:var(--pl-text);}

/* ---- BUTON: indigo degrade ---- */
body.customers .panel_s .btn-primary{
  padding:16px 32px; font-family:var(--pl-disp); font-size:15px; font-weight:700;
  letter-spacing:.01em; color:#fff; border:none; border-radius:12px;
  background:var(--pl-primary);
  box-shadow:0 14px 26px -12px rgba(74,93,249,.6);
  transition:filter .15s ease, transform .15s ease, background .15s ease;}
body.customers .panel_s .btn-primary:hover,
body.customers .panel_s .btn-primary:focus{color:#fff; background:var(--pl-deep); transform:translateY(-1px);}
body.customers .panel_s .btn-primary:active{transform:translateY(0);}
/* İkincil (kayıt) buton — kayıt kapalı ama gelirse nötr çerçeve */
body.customers .panel_s .btn-default{
  margin-top:10px; padding:12px 16px; font-size:14px; font-weight:600;
  color:var(--pl-deep); background:#fff;
  border:1px solid var(--pl-line-strong); border-radius:12px;}
body.customers .panel_s .btn-default:hover{background:#fbfcff; border-color:var(--pl-primary); color:var(--pl-deep);}

/* Şifremi unuttum linki — host-kaskad dersi: hover/underline açıkça */
body.customers .tw-text-center{margin-top:14px;}
body.customers a.text-muted{color:var(--pl-deep); font-size:13px; font-weight:600; text-decoration:none;}
body.customers a.text-muted:hover, body.customers a.text-muted:focus{
  color:var(--pl-primary); text-decoration:underline !important;}

/* ---- UYARILAR ---- */
body.customers .alert{border-radius:12px; font-size:13px; padding:11px 14px; border:1px solid transparent;}
body.customers .alert-danger{background:#fdf1f1; color:#b3383d; border-color:rgba(226,73,79,.32);}
body.customers .alert-success{background:#effaf4; color:#15794f; border-color:rgba(23,166,115,.32);}
body.customers .panel_s .text-danger, body.customers .panel_s .form-error{
  color:var(--pl-danger); font-size:12.5px; margin-top:5px; display:block;}

/* ---- Footer: aydınlık zeminde nötr şerit ---- */
body.customers footer{
  background:transparent !important; border-top:1px solid var(--pl-line) !important;
  color:var(--pl-muted); font-size:12px;}
body.customers footer a{color:var(--pl-muted);}

/* ============================================================================
   GİRİŞ FORM KOMPOZİSYONU (mockup EKRAN 1) — yalnız giriş (body.customers_login)
   panel-body flex-column → sıralama; dil mini sağ-üst; şifremi-unuttum "beni
   hatırla" satırına; ipucu + alt not (hook enjekte). forgot/reset etkilenmez.
   ========================================================================== */
body.customers_login .panel_s .panel-body{display:flex; flex-direction:column;}
/* dil form-group KARTTAN kaldırıldı → sidetop şeridine taşındı. Native select
   DOM'da kalır (display:none) → JS vekil eder, form davranışı bozulmaz. */
body.customers_login .panel_s .form-group:has(select[name=language]),
body.customers_login .panel_s .form-group:has(.bootstrap-select){display:none;}
/* alan sıralaması */
body.customers_login .panel_s .form-group:has(#email){order:1;}
body.customers_login .panel_s .form-group:has(#password){order:2;}
body.customers_login .panel_s .checkbox{order:3; margin:6px 0 0; padding-right:150px;}
/* şifremi-unuttum → beni-hatırla satırına (sağ). z-index: flex item stacking
   context → linki checkbox'ın (order:3, negatif-margin bindirme bölgesinde
   tıklamayı yutuyordu) ÜSTÜNE alır; aksi halde "beni hatırla" kutusu forgot
   linkinin hit-test'ini çalıyordu (0.40.8 headless: elementFromPoint=DIV.checkbox). */
body.customers_login .panel_s .tw-text-center{
  order:4; align-self:flex-end; text-align:right; margin:-28px 0 0;
  position:relative; z-index:3;}
body.customers_login .panel_s .eres-hintline{order:5;}
body.customers_login .panel_s .form-group.tw-mt-6{order:6; margin-top:2px;}
body.customers_login .panel_s .eres-authfoot{order:7;}

/* ipucu satırı (hook enjekte) */
body.customers_login .panel_s .eres-hintline{
  display:flex; gap:7px; align-items:flex-start; margin:10px 0 15px;
  font-size:12.5px; line-height:1.5; color:var(--pl-faint);}
body.customers_login .panel_s .eres-hint-ic::before{
  content:"\f05a"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:12px; margin-top:1px;}
/* alt not: "hesabınız yok mu?" (hook enjekte) */
body.customers_login .panel_s .eres-authfoot{
  margin:14px 0 0; text-align:center; font-size:13px; color:var(--pl-muted);}
body.customers_login .panel_s .eres-authfoot-em{color:var(--pl-deep); font-weight:600;}
/* 0.40.8: alt not artık GERÇEK link (tel:) → link davranışı açıkça */
body.customers_login .panel_s a.eres-authfoot-em{text-decoration:none; cursor:pointer;}
body.customers_login .panel_s a.eres-authfoot-em:hover,
body.customers_login .panel_s a.eres-authfoot-em:focus{color:var(--pl-primary); text-decoration:underline;}

/* ============================================================================
   SIDETOP ŞERİDİ (mockup EKRAN 1) — sağ sütun tepesi: solda mini dil seçici,
   sağda "Bilgi Merkezi →". form_start ile enjekte → kartın ÜSTÜNDE akışta.
   ========================================================================== */
body.customers_login .eres-sidetop{
  width:100%; max-width:442px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 6px 10px;}
body.customers_login .eres-sidetop__spacer{flex:0 0 auto;}
body.customers_login .eres-sidetop__kb{
  display:inline-flex; align-items:center; gap:7px; padding:6px 4px;
  font-family:var(--pl-body); font-size:13.5px; font-weight:600;
  color:var(--pl-muted); text-decoration:none; cursor:pointer; transition:color .15s ease;}
body.customers_login .eres-sidetop__kb:hover,
body.customers_login .eres-sidetop__kb:focus{color:var(--pl-primary); text-decoration:none;}
body.customers_login .eres-sidetop__kb .fa-book{font-size:13px;}
body.customers_login .eres-sidetop__kb .fa-arrow-right{font-size:11px; opacity:.7;}

/* özel dil dropdown (mockup .eres-dd / .eres-dd--mini) — FA ikonlarıyla */
body.customers_login .eres-dd{position:relative;}
body.customers_login .eres-dd__btn{
  display:flex; align-items:center; gap:10px; height:46px; padding:0 14px; cursor:pointer;
  border:1px solid var(--pl-line-strong); border-radius:12px; background:#f8f9fe;
  font:500 14.5px var(--pl-body); color:var(--pl-text); transition:.16s;}
body.customers_login .eres-dd__btn .gl{color:var(--pl-muted); display:grid;}
body.customers_login .eres-dd__btn .chev{margin-left:auto; color:var(--pl-faint); display:grid; transition:transform .18s ease;}
body.customers_login .eres-dd.open .eres-dd__btn{background:#fff; border-color:var(--pl-primary); box-shadow:0 0 0 3.5px rgba(74,93,249,.16);}
body.customers_login .eres-dd.open .chev{transform:rotate(180deg);}
body.customers_login .eres-dd__menu{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; display:none;
  padding:6px; background:#fff; border:1px solid var(--pl-line); border-radius:12px;
  box-shadow:0 18px 38px -16px rgba(17,20,58,.28);}
body.customers_login .eres-dd.open .eres-dd__menu{display:block;}
body.customers_login .eres-dd__opt{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px; cursor:pointer;
  border:none; border-radius:9px; background:none; font:500 14px var(--pl-body); color:var(--pl-text); text-align:left;}
body.customers_login .eres-dd__opt:hover{background:#f3f4fd;}
body.customers_login .eres-dd__opt .ok{margin-left:auto; color:var(--pl-primary); opacity:0; display:grid;}
body.customers_login .eres-dd__opt[aria-selected="true"] .ok{opacity:1;}
/* mini varyant — sidetop dil seçici */
body.customers_login .eres-dd--mini .eres-dd__btn{
  height:36px; padding:0 11px; gap:8px; border-radius:10px;
  background:transparent; border-color:transparent; color:var(--pl-muted); font-size:13.5px;}
body.customers_login .eres-dd--mini .eres-dd__btn:hover{background:#eceefa; color:var(--pl-text);}
body.customers_login .eres-dd--mini.open .eres-dd__btn{background:#fff; border-color:var(--pl-primary); box-shadow:0 0 0 3px rgba(74,93,249,.14); color:var(--pl-text);}
body.customers_login .eres-dd--mini .eres-dd__menu{left:0; right:auto; min-width:172px; max-height:280px; overflow-y:auto;}

/* parola göster/gizle (mockup .eres-peek) — JS #password'ü .eres-peek-wrap'e sarar */
body.customers_login .eres-peek-wrap{position:relative;}
body.customers_login .panel_s #password.eres-has-peek{padding-right:46px;}
body.customers_login .eres-peek{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  background:none; border:none; border-radius:8px; color:var(--pl-faint); cursor:pointer;}
body.customers_login .eres-peek:hover{color:var(--pl-text); background:#eef0fa;}
body.customers_login .eres-peek i{font-size:15px;}

/* ============================================================================
   MARKA PANELİ (.eres-brandpanel) — hook ile enjekte edilir.
   Varsayılan GİZLİ; yalnız MASAÜSTÜ GİRİŞ'te (aşağıdaki min-width bloğu)
   görünür → forgot/reset ve mobil hiç göstermez.
   ========================================================================== */
body.customers .eres-brandpanel{display:none;}
.eres-brandpanel{
  position:fixed; top:0; left:0; bottom:0; width:44vw; z-index:40;
  flex-direction:column; justify-content:space-between; gap:36px;
  padding:46px 4vw; overflow:hidden; color:#fff; box-sizing:border-box;
  background:var(--pl-ink);
  font-family:var(--pl-body);}
/* dekor katmanları (glow/dots) AKIŞA GİRMESİN → :not() ile hariç tut, yoksa
   içeriği aşağı iterler (mockup satır 94 düzeltmesi). */
.eres-brandpanel>*:not(.ebp-glow):not(.ebp-dots){position:relative; z-index:1;}
.ebp-glow{position:absolute; width:440px; height:440px; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;}
.ebp-glow-a{background:#4a5df9; top:-130px; left:-90px; opacity:.6;}
.ebp-glow-b{background:#2fd6c3; bottom:-160px; right:-110px; opacity:.32;}
.ebp-dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);}
/* logo */
.ebp-logo{display:inline-flex; align-items:center; gap:10px;}
.ebp-ring{width:34px; height:34px; border-radius:50%; padding:2px; background:var(--pl-grad); flex:none;}
.ebp-mark{width:100%; height:100%; border-radius:50%; background:var(--pl-ink); color:#fff;
  display:grid; place-items:center; font-family:var(--pl-disp); font-weight:800; font-size:16px; padding-bottom:2px;}
.ebp-word{font-family:var(--pl-disp); font-weight:500; font-size:19px; letter-spacing:-.02em; color:#fff;}
.ebp-word b{font-weight:800;}
/* 0.40.5: gerçek şirket logosu (SVG) — koyu panelde beyaz-yazılı company_logo */
.ebp-logo-img{height:30px; width:auto; max-width:210px; display:block;}
/* orta blok */
.ebp-eyebrow{font-family:var(--pl-mono); font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--pl-signal);}
.ebp-mid h2{margin:14px 0 12px; font-family:var(--pl-disp); font-weight:800;
  font-size:clamp(26px,2.8vw,36px); line-height:1.16; letter-spacing:-.03em; max-width:440px;}
.ebp-grad{background:var(--pl-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.ebp-mid p{margin:0 0 26px; max-width:410px; color:#b9bedb; font-size:15px; line-height:1.65;}
.ebp-feat{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.ebp-feat li{display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:500; color:#dfe2f4;}
.ebp-tick{flex:none; width:22px; height:22px; border-radius:50%; background:var(--pl-grad);
  display:grid; place-items:center; color:#fff; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px;}
.ebp-tick::before{content:"\f00c";}
.ebp-foot{font-family:var(--pl-mono); font-size:10.5px; font-weight:600; letter-spacing:.26em; color:#7d84ad;}

/* ============================================================================
   MASAÜSTÜ İKİ-SÜTUN GİRİŞ (yalnız login sayfası, ≥ 921px)
   ========================================================================== */
@media (min-width:921px){
  body.customers_login .eres-brandpanel{display:flex;}
  /* navbar + footer gizlenir (marka paneli logoyu taşır) */
  body.customers_login .navbar-default.header,
  body.customers_login footer{display:none !important;}
  /* içerik alanı sağ yarıya kayar, dikey ortalanır */
  body.customers_login #content{
    margin-left:44vw; min-height:100vh; display:flex; flex-direction:column;
    justify-content:center; background:var(--pl-paper);}
  body.customers_login #wrapper{background:var(--pl-paper);}
  body.customers_login #content > .container{width:100%; max-width:none;}
  body.customers_login .mtop40{
    margin:0; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:24px 5vw;}
  body.customers_login .mtop40 > [class*=col-]{
    float:none !important; width:100% !important; max-width:442px; margin:0 !important; padding:0;}
}

/* ============================================================================
   DAR EKRAN (≤ 920px) — marka paneli düşer, aydınlık ortalanmış kart
   (navbar + footer görünür kalır: logo + telif). Zaten mobil-öncelikli
   varsayılan bu; ek düzenleme gerekmiyor.
   ========================================================================== */
@media (max-width:920px){
  body.customers .eres-brandpanel{display:none !important;}
  body.customers .col-md-4.text-center:has(.login-heading){text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  body.customers *{transition:none !important;}
}