/* ================================================================
   CTECH SERVICE PLATFORM — LOGIN.CSS
   Login ekranı: desktop + mobil versiya, about modal, loading overlay
   ================================================================ */

/* ===== LOGIN VIEW ===== */
#loginView {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;
}

.login-bg {
  position: fixed;
  inset: 0;
  background-image: url('../login-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

.login-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240, 247, 255, 0.45);
}

.route-line { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; opacity:.35; z-index:1; }
.wrap { width:100%; max-width:440px; position:relative; z-index:2; }
.brand { text-align:center; margin-bottom:28px; }
.brand-name { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:26px; letter-spacing:3px; color:#12233B; text-transform:uppercase; white-space:nowrap; text-shadow:0 1px 6px rgba(255,255,255,0.8); }
.brand-name span { color:#2F6FED; }
@media(max-width:400px){ .brand-name{font-size:19px;letter-spacing:1.5px;} }

.card { background:rgba(255,255,255,0.92); border:1px solid rgba(225,234,246,0.8); border-radius:22px; position:relative; box-shadow:0 30px 70px rgba(30,68,130,.15); overflow:hidden; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.card-top { padding:38px 34px 36px; }
h1 { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:27px; color:#12233B; margin:0 0 6px; text-align:center; letter-spacing:.3px; white-space:nowrap; }
@media(max-width:400px){ h1{font-size:20px;letter-spacing:.1px;} }

.login-subtitle { text-align:center; font-size:13px; color:#5C7089; margin:0 0 26px; font-weight:500; }

.field-label { font-size:13px; color:#5C7089; margin-bottom:9px; display:block; font-weight:500; }
.input-row { position:relative; margin-bottom:20px; }
.input-row>svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:.6; pointer-events:none; }
.toggle-eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); cursor:pointer; background:#EEF3FB; border:none; border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.toggle-eye:hover { background:#DDE9FB; }
.toggle-eye:active { transform:translateY(-50%) scale(.94); }
#email,#password { width:100%; padding:15px 15px 15px 46px; background:rgba(248,250,253,0.9); border:1.5px solid #DCE6F5; border-radius:12px; font-size:16px; color:#12233B; outline:none; transition:border-color .15s,background .15s; font-family:'Inter',sans-serif; box-sizing:border-box; }
#password { padding-right:52px; }
input::-ms-reveal,input::-ms-clear { display:none; }
#loginView input::placeholder { color:#9AACC4; }
#loginView input:focus { border-color:#4E93FA; background:#FFFFFF; }
button.primary { width:100%; background:linear-gradient(135deg,#4E93FA,#2F6FED); color:#FFFFFF; border:none; padding:17px; border-radius:12px; font-size:16px; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; letter-spacing:.3px; box-shadow:0 12px 28px rgba(47,111,237,.3); transition:transform .05s,box-shadow .15s,opacity .15s; margin-top:6px; }
button.primary:hover { box-shadow:0 14px 32px rgba(47,111,237,.42); }
button.primary:active { transform:scale(.98); }
button.primary:disabled { opacity:.6; cursor:default; }
.remember { display:flex; align-items:center; gap:11px; margin-top:20px; font-size:15px; font-weight:600; color:#2F4C6E; cursor:pointer; user-select:none; }
.remember input { width:22px; height:22px; accent-color:#4E93FA; cursor:pointer; flex-shrink:0; }
.footer-note { text-align:center; margin-top:24px; font-size:12px; color:#4A6080; text-shadow:0 1px 4px rgba(255,255,255,0.7); font-weight:500; }

/* ===== LOADING OVERLAY (login) ===== */
.loading-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(244,248,253,.88); z-index:60; align-items:center; justify-content:center; }
.loading-overlay.open { display:flex !important; }
.loading-box { display:flex; flex-direction:column; align-items:center; gap:16px; }
.spinner { width:56px; height:56px; border:5px solid #DCE6F5; border-top-color:#2F6FED; border-radius:50%; animation:spin .8s linear infinite; }
.result-icon { width:64px; height:64px; border-radius:50%; display:none; align-items:center; justify-content:center; animation:popIn .35s ease; }
.result-icon.show { display:flex; }
.result-icon.success { background:#3FCB78; }
.result-icon.fail { background:#E24B4A; }
.loading-text { font-size:13px; color:#5C7089; font-weight:600; }

/* ===== ABOUT MODAL ===== */
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(18,35,59,.45); z-index:50; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
@media(max-width:768px) { .modal-overlay { padding:16px; align-items:center; } }
.modal-overlay.open { display:flex !important; }
.modal-box { background:#FFFFFF; border-radius:20px; max-width:440px; width:100%; max-height:80vh; overflow-y:auto; padding:28px 26px; box-shadow:0 30px 70px rgba(0,0,0,.25); }
.modal-brand { text-align:center; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid #E1EAF6; }
.modal-brand-text { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:17px; letter-spacing:2px; color:#12233B; text-transform:uppercase; }
.modal-brand-text span { color:#2F6FED; }
.modal-title { font-family:'Inter',sans-serif; font-weight:700; font-size:18px; color:#12233B; margin-bottom:14px; text-align:center; }
.modal-text { font-size:14px; color:#3A4A5E; line-height:1.65; margin-bottom:12px; text-align:justify; text-justify:inter-word; }
.modal-text strong { color:#12233B; }
.modal-subtitle { font-size:13.5px; font-weight:700; color:#12233B; letter-spacing:.1px; margin:18px 0 12px; }
.modal-steps { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.modal-step { display:flex; align-items:flex-start; gap:12px; }
.modal-step-num { width:24px; height:24px; border-radius:8px; background:#E6F1FB; color:#1B4A8A; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.modal-step-text { font-size:14px; color:#3A4A5E; line-height:1.55; padding-top:2px; text-align:justify; text-justify:inter-word; }
.modal-close { margin-top:8px; width:100%; background:#F0F5FC; border:1px solid #E1EAF6; border-radius:12px; padding:13px; font-size:15px; font-weight:600; color:#12233B; cursor:pointer; }

/* Desktop about modal */
.about-modal-box { position:relative; width:780px; max-width:92vw; min-height:480px; border-radius:24px; overflow:hidden; box-shadow:0 40px 90px rgba(18,35,59,.30); display:flex; flex-direction:column; }
.about-modal-bg { position:absolute; inset:0; background-image:url('../about-bg.webp'); background-size:cover; background-position:center center; z-index:0; }
.about-modal-bg::after { content:''; position:absolute; inset:0; background:rgba(240,247,255,0.72); }
.about-modal-close-x { position:absolute; top:16px; right:16px; z-index:10; width:36px; height:36px; border-radius:10px; border:none; background:rgba(255,255,255,0.85); color:#3A4A5E; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 10px rgba(18,35,59,.12); transition:background .15s,transform .1s; }
.about-modal-close-x:hover { background:#fff; }
.about-modal-close-x:active { transform:scale(.93); }
.about-modal-content { position:relative; z-index:2; display:flex; flex-direction:column; height:100%; padding:44px 60px; }
.about-modal-header { text-align:center; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid rgba(225,234,246,0.8); }
.about-modal-title { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:22px; color:#12233B; margin-top:10px; letter-spacing:.3px; }
.about-modal-body { flex:1; }
.about-modal-text { font-size:14px; color:#2F4C6E; line-height:1.7; margin-bottom:14px; text-align:justify; }
.about-modal-text strong { color:#12233B; }
.about-modal-subtitle { font-size:13px; font-weight:700; color:#12233B; letter-spacing:.5px; text-transform:uppercase; margin:20px 0 14px; }
.about-modal-steps { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.about-modal-step { display:flex; align-items:flex-start; gap:10px; background:rgba(255,255,255,0.75); border:1px solid rgba(207,224,247,0.7); border-radius:12px; padding:12px 14px; backdrop-filter:blur(6px); }
.about-modal-step-num { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,#4E93FA,#2F6FED); color:#fff; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.about-modal-step-text { font-size:13px; color:#2F4C6E; line-height:1.5; padding-top:3px; }

/* Mobil about modal */
@media(max-width:768px) {
  .about-modal-box { width:calc(100% - 32px); max-width:440px; margin:0 16px; min-height:unset; max-height:80vh; border-radius:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .about-modal-bg { display:none; }
  .about-modal-close-x { display:none; }
  .about-modal-content { padding:28px 22px 28px; background:#fff; height:auto; }
  .about-modal-steps { grid-template-columns:1fr; }
  .about-modal-step { background:#F0F5FC; border-color:#E1EAF6; backdrop-filter:none; }
  .about-modal-header { border-bottom-color:#E1EAF6; }
  .about-modal-text { color:#3A4A5E; }
  .about-modal-step-text { color:#3A4A5E; }
}

/* ===== LOGİN — MOBİL VERSIYA (≤900px) ===== */
.login-banner{ display:none; }

@media(max-width:900px){
  #loginView{
    min-height:100vh;
    min-height:100dvh;
    padding:0;
    display:block;
    align-items:normal; justify-content:normal;
    width:100%;
  }
  .login-banner{
    display:block; width:100%; height:22vh; object-fit:cover;
  }
  .route-line{ display:none; }

  .wrap{
    width:100%; max-width:100%; box-sizing:border-box;
    display:flex; flex-direction:column;
    padding:0 20px calc(24px + env(safe-area-inset-bottom));
    margin-top:26px;
  }

  .card{ order:1; border-radius:28px; box-shadow:0 24px 60px rgba(30,68,130,.14); }
  .card-top{ padding:34px 26px 30px; }
  h1{ font-size:22px; white-space:normal; letter-spacing:.1px; }

  .field-label{ font-size:13.5px; }
  #email, #password{
    padding:16px 16px 16px 48px; border-radius:14px; font-size:15.5px;
    background:#F8FAFD; border:1.5px solid #E1EAF6;
  }
  .input-row>svg{ left:17px; opacity:.55; }
  .toggle-eye{ width:36px; height:36px; border-radius:10px; }

  button.primary{
    padding:18px; border-radius:14px; font-size:16px;
    box-shadow:0 14px 30px rgba(47,111,237,.32);
  }
  .remember{ justify-content:center; margin-top:22px; }
  .remember input{
    appearance:none; -webkit-appearance:none; width:22px; height:22px; border-radius:6px;
    background:#FFFFFF; border:1.5px solid #C9D8F2; position:relative; margin:0; cursor:pointer;
  }
  .remember input:checked{ background:#2F6FED; border-color:#2F6FED; }
  .remember input:checked::after{
    content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
    border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
  }

  .brand{
    order:2; margin:22px 0 0; text-align:center;
    display:flex; align-items:center; gap:10px;
    background:#FFFFFF; border:1px solid #E7ECF6; border-bottom:none;
    border-radius:16px 16px 0 0; padding:16px 18px 6px;
  }
  .brand::before, .brand::after{
    content:""; flex:1 1 auto; height:1px;
    background-image:linear-gradient(to right,#C7D6F0 45%,transparent 0%);
    background-size:5px 1px; background-repeat:repeat-x;
  }
  .brand-name{ font-size:15px; letter-spacing:1.5px; white-space:nowrap; }

  .footer-note{
    order:3; margin:0 0 20px; padding:2px 18px 16px;
    background:#FFFFFF; border:1px solid #E7ECF6; border-top:none;
    border-radius:0 0 16px 16px;
  }

  body.dark-mode .brand,
  body.dark-mode .footer-note{ background:#141F30; border-color:#2A3B52; }
  body.dark-mode .brand::before, body.dark-mode .brand::after{
    background-image:linear-gradient(to right,#3E5578 45%,transparent 0%);
  }
}

/* ===== DARK MODE — LOGIN ===== */
body.dark-mode .modal-brand { border-bottom-color:#4A6182; }
body.dark-mode .modal-brand-text,
body.dark-mode .modal-title,
body.dark-mode .modal-subtitle { color:#E8EEF5; }
body.dark-mode .modal-text { color:#93A4BC; }
body.dark-mode .modal-text strong { color:#E8EEF5; }
body.dark-mode .modal-step-text { color:#93A4BC; }
body.dark-mode .modal-step-num { background:#1C2A3D; color:#8FB4EA; }
body.dark-mode .modal-close { background:#1C2A3D; border-color:#4A6182; color:#E8EEF5; }
body.dark-mode .modal-box { background:#16212E; border-color:#4A6182; }