@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root{
    --bg:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
    --blue:#1976ff; --blue-2:#0b5fff; --link:#0b61ff;
    --card:#ffffff; --shadow:0 10px 30px rgba(0,0,0,.10);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  .text-left {text-align: left !important;}
  /* ------ layout ------ */
  .split{min-height:100dvh; display:grid; grid-template-columns: 1fr 1fr;}
  /* LEFT: Swiper slider */
  .promo{
    position:relative; overflow:hidden; color:#fff;
    background:linear-gradient(180deg,#2b7bff 0%,#0e69ff 70%,#0e69ff 100%);
    border-right:1px solid var(--line);
    background: url(../../assets/images/login-slider/bg.jpg);
      background-repeat: repeat;
      background-size: auto;
    background-repeat: no-repeat;
    background-size: cover;
  }
  /* RIGHT: Form */
  .form-side{padding:28px 40px 40px; display:flex; flex-direction:column;}

  /* ------ top rows ------ */
  .logo-row{
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    gap: 20px;
  }
  .brand{width: 200px;}
  .brand img{width: 100%}
  .signup-tip{
    font-size:15px;
    font-weight: 500;
    display:flex;
    align-items:center;
    gap:8px;
    color: #660099;
  }
  .signup-tip a{color:#0b61ff;font-weight:600;text-decoration:none;}
  .signup-tip a:hover{text-decoration:underline;}
  .thin-line{height:1px;background:var(--line);margin:18px 0 8px;}
  .form-wrap {
    height: 100%;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;   
  }
  h1{font-size:34px;margin:0 0 10px;}
  .lead{color:var(--muted);margin:0 0 28px;}
  .field{margin-bottom:18px;text-align: center;}
  .label{display:block;font-size:12px;letter-spacing:.4px;color:#6b7280;margin-bottom:8px;}
  .input{width:100%;height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;outline:0;
    transition:border-color .15s, box-shadow .15s;}
  .input::placeholder{color:#9ca3af;}
  .input:focus{border-color:#660099;box-shadow:0 0 0 4px rgba(102,0,153,.12);}
  .pass-row{position:relative;}
  .toggle-eye{position:absolute;right:10px;top:50%;transform:translateY(-12%);
    width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;cursor:pointer;}
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:48px;
    padding:0 18px;
    border:0;
    border-radius:10px;
    color:#fff;
    cursor:pointer;
    background: #660099;
    /*background:linear-gradient(90deg,var(--blue),var(--blue-2));*/
    box-shadow:var(--shadow);
    font-weight:700;
  }
  .or{margin:16px 0;display:flex;align-items:center;gap:14px;color:#9ca3af;font-weight:700;letter-spacing:.3px;}
  .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line);}
  .forgot{display:inline-block;border:2px solid #ffd7d7;color:#b91c1c;background:#fff7f7;padding:12px 18px;border-radius:10px;font-weight:800;text-decoration:none;}

  /* ------ Swiper (left) ------ */
  .swiper{width:100%;height:100%;}
  .slide-inner{
    height:100%;
    padding:56px 46px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    text-align:center;
  }
  .slide-inner h2{font-size:30px;margin:22px 0 6px;}
  .slide-inner p{max-width:600px;margin:0 auto 26px;opacity:.95;}
  /* decorative cards */
  .cards{
    position:relative;
    width:min(680px,88%);
    height:320px;
    margin:10px auto 16px;
  }
  .card{
    position:absolute;
    width:240px;
    height:140px;
    background:#fff;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cards img {
    width: 100%;
  }
  .card::before{content:"";width:70%;height:60%;border-radius:12px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);}
  .c1{left:10%;top:8%} .c2{right:10%;top:8%} .c3{left:0;bottom:4%} .c4{right:6%;bottom:4%}

  .center-photo{
  }

  .swiper-pagination-bullets .swiper-pagination-bullet{background:#cde2ff;opacity:.7}
  .swiper-pagination-bullets .swiper-pagination-bullet-active{background:#fff;opacity:1}

  /* ------ responsive ------ */
  /* Mobilde sol sütun (promo/slider) GİZLENİR */
  @media(max-width:991px){
    .split{grid-template-columns:1fr;}
    .form-side{padding:22px 20px 0px;}
    .form-wrap{max-width:640px;margin:0 auto;}
  }
  @media (max-width:520px){
    h1{font-size:28px}
    .slide-inner h2 {display: none}
    .slide-inner p {display: none}
    .cards{height:260px}
    .card{width:200px;height:120px}
    .brand{width: 150px;}
    .signup-tip{width: 150px;font-size: 13px}
    .slide-inner{
      padding:20px 10px;
    }
  }