/* ==========================================================================
   RAPORON — Giriş ekranları (ajans + müşteri)
   İki sütun: solda ne olduğunu anlatan koyu panel, sağda form.
   Dar ekranda tek sütuna iner, tanıtım paneli başlığa dönüşür.
   ========================================================================== */

:root{
  color-scheme: light;
  --t-900:#05373c; --t-700:#0b545c; --t-500:#0f6973; --t-400:#488c92;
  --t-300:#80aeb1; --t-200:#bbd3d3; --t-100:#dae7e7; --t-50:#e5f0f0; --t-25:#f2f8f8;
  --p-600:#ec917d; --p-500:#f5a08c; --p-100:#fce3dd; --p-50:#fef6f4;
  --on:#14a08b;
  --bg:#f4f1ef; --card:#fff; --card-2:#faf8f7;
  --line:#e9e4e1; --line-soft:#f0ecea;
  --ink:#12232a; --ink-2:#3d5157; --muted:#54666b; --muted-2:#5f7176;
  --bad:#c85c42; --bad-bg:#fbeae4;
  --good:#0e7d63; --good-bg:#e3f2ee;
}


/* NOT — gri tonlar:
   Eski değerler (#7b8c90 / #a3b0b3) sayfa zemininde 3.1 ve 2.0 kontrast
   veriyordu; okunabilirlik eşiği 4.5 — yani ikisi de kalıyordu.
   Aynı ton ailesinde koyultuldu: muted 5.35, muted-2 4.54.
   Aralarındaki fark korundu ki hiyerarşi kaybolmasın. */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:106%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:.9375rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button{font-family:inherit}

/* ---------- Logo ---------- */
.logo{display:inline-flex; align-items:center; gap:.34em; font-size:1.25rem; line-height:1; user-select:none; text-decoration:none}
.logo .word{font-weight:800; letter-spacing:-.025em; color:var(--t-900)}
.logo .sw{display:inline-flex; align-items:center; gap:.34em; background:var(--on); border-radius:999px; padding:.24em .24em .24em .55em}
.logo .sw b{font-size:.82em; font-weight:800; letter-spacing:.02em; color:#fff}
.logo .sw i{width:.9em; height:.9em; border-radius:50%; background:#fff; display:block; box-shadow:0 1px 2px rgba(0,0,0,.14)}
.logo.on-dark .word{color:#fff}

/* ==========================================================================
   DÜZEN
   ========================================================================== */
.giris{min-height:100%; display:grid; grid-template-columns:1fr}
@media (min-width:60rem){
  .giris{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}

/* ---------- Sol: tanıtım ---------- */
.tanitim{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(110% 80% at 82% 8%, #10606b 0%, transparent 58%),
    radial-gradient(90% 70% at -6% 100%, #0a4a52 0%, transparent 62%),
    var(--t-900);
  padding:2.2rem 1.75rem 2.4rem;
  display:flex; flex-direction:column;
}
.tanitim::after{
  content:""; position:absolute; right:-5rem; bottom:-7rem;
  width:17rem; height:17rem; border-radius:50%;
  background:radial-gradient(circle, rgba(245,160,140,.2), transparent 68%);
}
.tanitim > *{position:relative; z-index:1}
@media (min-width:60rem){
  .tanitim{padding:3.2rem 3.4rem; justify-content:center}
}

.tanitim .ust{margin-bottom:2.6rem}
.tanitim .eyebrow{
  font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--p-500); margin-bottom:.75rem;
}
.tanitim h1{margin:0 0 .75rem; font-size:1.85rem; line-height:1.18; font-weight:800; letter-spacing:-.04em; max-width:16ch}
.tanitim .aciklama{margin:0; font-size:.94rem; line-height:1.68; color:rgba(255,255,255,.68); font-weight:500; max-width:38ch}
@media (min-width:60rem){
  .tanitim h1{font-size:2.5rem}
}

/* Ne bulacaksın listesi */
.ozellik{display:grid; gap:1.05rem; margin-top:2.2rem}
.ozellik .o{display:flex; gap:.85rem; align-items:flex-start}
.ozellik .ik{
  width:2.1rem; height:2.1rem; border-radius:.7rem; flex:0 0 auto;
  background:rgba(255,255,255,.1); display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.ozellik .ik svg{width:1.05rem; height:1.05rem; color:var(--p-500)}
.ozellik .m b{display:block; font-size:.875rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.15rem}
.ozellik .m span{font-size:.81rem; color:rgba(255,255,255,.6); font-weight:500; line-height:1.55}

.tanitim .dip{margin-top:auto; padding-top:2.4rem; font-size:.75rem; color:rgba(255,255,255,.42); font-weight:500}
@media (max-width:59.99rem){ .tanitim .dip{display:none} }

/* ---------- Sağ: form ---------- */
.form-yan{display:grid; place-items:center; padding:2.2rem 1.5rem 3rem}
@media (min-width:60rem){ .form-yan{padding:3rem} }

.form-kutu{width:100%; max-width:23rem}
.form-kutu .logo{margin-bottom:2rem}
@media (min-width:60rem){ .form-kutu .logo{display:none} }

.form-kutu h2{margin:0 0 .35rem; font-size:1.45rem; font-weight:800; letter-spacing:-.035em}
.form-kutu .alt{margin:0 0 1.75rem; font-size:.875rem; color:var(--muted); font-weight:500; line-height:1.6}

/* ==========================================================================
   ALANLAR
   ========================================================================== */
.alan{margin-bottom:1.05rem}
.alan > label{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:-.01em;
  color:var(--ink-2); margin-bottom:.45rem;
}
.girdi{position:relative; display:flex; align-items:center}
.girdi .ikon{
  position:absolute; left:.95rem; width:1.05rem; height:1.05rem;
  color:var(--muted-2); pointer-events:none; transition:color .15s;
}
.girdi input{
  width:100%; font-family:inherit; font-size:.94rem; font-weight:500; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:.95rem;
  padding:.85rem 1rem .85rem 2.85rem; outline:none;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.girdi input::placeholder{color:var(--muted-2); font-weight:400}
.girdi input:hover{border-color:var(--t-200)}
.girdi input:focus{border-color:var(--t-500); box-shadow:0 0 0 4px var(--t-50)}
.girdi input:focus ~ .ikon,
.girdi:focus-within .ikon{color:var(--t-500)}

/* Parolayı göster */
.goz{
  position:absolute; right:.5rem; width:2.15rem; height:2.15rem; border-radius:.65rem;
  background:transparent; border:0; cursor:pointer; color:var(--muted-2);
  display:grid; place-items:center; transition:background-color .15s, color .15s;
}
.goz:hover{background:var(--card-2); color:var(--ink-2)}
.goz svg{width:1.05rem; height:1.05rem}
.goz .kapali{display:none}
.goz.acik .acik-ik{display:none}
.goz.acik .kapali{display:block}
.girdi.parola input{padding-right:3rem}

/* Buton */
.btn-tam{
  width:100%; font-family:inherit; font-size:.94rem; font-weight:700; letter-spacing:-.015em;
  color:#fff; background:var(--t-500); border:0; border-radius:999px;
  padding:.9rem 1rem; cursor:pointer; margin-top:.5rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition:background-color .15s, transform .11s cubic-bezier(.2,.7,.3,1);
}
.btn-tam:hover{background:var(--t-700)}
.btn-tam:active{transform:scale(.985)}
.btn-tam svg{width:.94rem; height:.94rem}

/* Uyarı */
.uyari{
  display:flex; align-items:flex-start; gap:.65rem;
  background:var(--bad-bg); color:var(--bad);
  font-size:.84rem; font-weight:600; line-height:1.55;
  padding:.85rem 1rem; border-radius:.95rem; margin-bottom:1.15rem;
}
.uyari svg{width:1.05rem; height:1.05rem; flex:0 0 auto; margin-top:.12rem}
.bilgi{
  display:flex; align-items:center; gap:.65rem;
  background:var(--good-bg); color:var(--good);
  font-size:.84rem; font-weight:600;
  padding:.85rem 1rem; border-radius:.95rem; margin-bottom:1.15rem;
}
.bilgi svg{width:1.05rem; height:1.05rem; flex:0 0 auto}

/* Alt not */
.dip-not{
  margin:1.6rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.81rem; color:var(--muted); font-weight:500; line-height:1.65;
}
.dip-not a{color:var(--t-500); font-weight:700; text-decoration:none}
.dip-not a:hover{text-decoration:underline}

/* ==========================================================================
   DAR EKRAN
   Tanıtım üstte kalırsa kullanıcı forma ulaşmak için tüm metni geçmek
   zorunda kalıyor. Girmeye gelen kişi önce formu görsün; açıklama altta,
   merak eden aşağı kaysın.
   ========================================================================== */
@media (max-width:59.99rem){
  .giris{display:flex; flex-direction:column; min-height:100%}
  .form-yan{order:1; padding:2.4rem 1.5rem 1.5rem}
  .tanitim{
    order:2; margin-top:auto;
    border-radius:1.75rem 1.75rem 0 0;
    padding:2rem 1.6rem 2.2rem;
  }
  .tanitim .ust{display:none}          /* logo formda zaten var */
  .tanitim h1{font-size:1.4rem; max-width:24ch}
  .tanitim .aciklama{font-size:.875rem}
  .ozellik{margin-top:1.6rem; gap:.9rem}
}

/* Kısa ekranda dikey boşlukları topla */
@media (min-width:60rem) and (max-height:44rem){
  .tanitim{padding:2rem 3.4rem}
  .tanitim h1{font-size:2rem}
  .ozellik{margin-top:1.5rem; gap:.85rem}
  .form-yan{padding:2rem 3rem}
}

/* ==========================================================================
   ERİŞİLEBİLİRLİK
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .btn-tam:active{transform:none}
}
@media (prefers-contrast: more){
  .girdi input{border-color:var(--t-400)}
  .girdi input:focus{border-color:var(--t-900); box-shadow:0 0 0 3px var(--t-200)}
}

/* Müşteri girişinin altında ajans geçişi: ince ayraç, sade bağlantı */
.ajans-gecis{margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line-soft)}

/* ==========================================================================
   AJANS BAŞVURU FORMU — giriş sayfasının düzeni, daha uzun form
   ========================================================================== */
.form-kutu.genis{max-width:29rem}
.iki{display:grid; gap:0 .8rem}
@media (min-width:26rem){ .iki{grid-template-columns:1fr 1fr} }
.girdi select, .girdi textarea{
  width:100%; font-family:inherit; font-size:.94rem; font-weight:500; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:.95rem;
  padding:.85rem 1rem; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.girdi select{
  appearance:none; -webkit-appearance:none; padding-right:2.6rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7176' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; background-size:1rem;
}
.girdi textarea{resize:vertical; min-height:5.2rem; line-height:1.5}
.girdi.duz input{padding-left:1rem}
.girdi select:hover, .girdi textarea:hover{border-color:var(--t-200)}
.girdi select:focus, .girdi textarea:focus{border-color:var(--t-500); box-shadow:0 0 0 4px var(--t-50)}
.alan .yardim{display:block; margin-top:.4rem; font-size:.72rem; color:var(--muted-2); font-weight:500}
.alan.hatali .girdi input, .alan.hatali .girdi select{border-color:var(--bad)}
.alan .hata{display:block; margin-top:.4rem; font-size:.74rem; color:var(--bad); font-weight:600}

.onay{display:flex; gap:.7rem; align-items:flex-start; margin:.4rem 0 .9rem; cursor:pointer; font-size:.8rem; line-height:1.5; color:var(--ink-2); font-weight:500}
.onay input{appearance:none; -webkit-appearance:none; width:1.15rem; height:1.15rem; flex:0 0 auto; margin:.1rem 0 0; border:1.5px solid var(--line); border-radius:.35rem; background:var(--card); cursor:pointer; position:relative; transition:background-color .15s, border-color .15s}
.onay input:checked{background:var(--t-500); border-color:var(--t-500)}
.onay input:checked::after{content:""; position:absolute; left:.33rem; top:.12rem; width:.3rem; height:.55rem; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.onay input:focus-visible{box-shadow:0 0 0 4px var(--t-50)}

/* Bot tuzağı: insan görmez */
.tuzak{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Başvuru alındı */
.tamam{text-align:left}
.tamam .ik{width:3.2rem; height:3.2rem; border-radius:50%; background:var(--good-bg); color:var(--good); display:grid; place-items:center; margin-bottom:1.1rem}
.tamam .ik svg{width:1.5rem; height:1.5rem}
.tamam h2{margin-bottom:.5rem}
.tamam p{margin:0 0 1rem; font-size:.9rem; line-height:1.65; color:var(--muted); font-weight:500}
.tamam .adimlar{margin:1.4rem 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.7rem}
.tamam .adimlar li{display:flex; gap:.75rem; font-size:.86rem; line-height:1.5; color:var(--ink-2); font-weight:500}
.tamam .adimlar i{flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--t-50); color:var(--t-500); font-style:normal; font-weight:800; font-size:.72rem; display:grid; place-items:center}

/* --- Ekip cihaz onayı bekleme --- */
.cihaz-bekle{text-align:center; display:flex; flex-direction:column; align-items:center}
.cihaz-bekle .cb-ik{width:3.4rem; height:3.4rem; border-radius:50%; display:grid; place-items:center; background:var(--p-50, #fef6f4); color:var(--p-600, #ec917d); margin-bottom:.9rem}
.cihaz-bekle .cb-ik svg{width:1.5rem; height:1.5rem}
.cihaz-bekle h2{margin:0 0 .4rem}
.cihaz-bekle .alt{margin-bottom:1rem}
.cb-nabiz{display:flex; gap:.4rem; margin:.2rem 0 1.2rem}
.cb-nabiz i{width:.55rem; height:.55rem; border-radius:50%; background:var(--t-300, #80aeb1); animation:cbnabiz 1.2s ease-in-out infinite}
.cb-nabiz i:nth-child(2){animation-delay:.2s} .cb-nabiz i:nth-child(3){animation-delay:.4s}
@keyframes cbnabiz{0%,80%,100%{transform:scale(.7); opacity:.4} 40%{transform:scale(1); opacity:1}}