/* Temel: akışkan tipografi ve alanlar */
:root{
  --gap: 16px;
  --radius: 16px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  height: 100%;
  width: 100%;
  overflow-x: hidden;           /* yatay taşmayı engelle */
  background:#f5f5f5;
}

/* 100vh mobil bug için dvh kullan */
.content {
  display: flex;
  min-height: 100dvh;
}

/* Sol bölüm hafif büyük ama akışkan */
.content-left {
  flex: 1.05 1 0;              /* büyüyebilir/küçülebilir */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  background:#f5f5f5;
}

/* Sağ bölüm görsel alan; sabit yükseklik yok */
.content-right {
  flex: 0.95 1 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url('./download.png') no-repeat center center / cover;
  padding: clamp(16px, 4vw, 48px);
  text-align: center;
  overflow: hidden;            /* içerik kutusu yönetir */
}

/* Sağ taraftaki şeffaf kutu */
.content-right-subcontent {
  margin: auto;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: clamp(12px, 2.4vw, 24px);
  border-radius: 15px;
  color: #fff;
  max-width: min(900px, 90%);
  font-size: clamp(16px, 1.6vw, 17px); /* biraz daha büyük */
  line-height: 1.3;                    /* okunabilirliği artırır */
}

/* Form kutusu: genişlik ve iç boşluk akışkan */
.form-wrapper {
  background: linear-gradient(135deg, #ffffff, #f0f4f8);
  padding: clamp(14px, 2.2vw, 28px);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  width: clamp(300px, 42vw, 520px);   /* ana kaldıraç */
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 12px);
  margin: clamp(8px, 2vh, 24px) auto;
  height: auto;
  min-height: fit-content;
}

.logo img {
  width: clamp(160px, 28vw, 300px);
  display:block;
  margin: clamp(16px, 4vh, 40px) auto clamp(10px, 2vh, 20px) auto;
}

.text-title{
  text-align:center;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  margin: 5px 0 14px 0;
  color:#222;
}

.field-group { margin-bottom: clamp(8px, 1.4vw, 12px); position:relative; }
.field-group label { display:block; margin-bottom: 6px; font-weight: 600; font-size: clamp(13px, 1.6vw, 14px); }

.input{
  width: 100%;
  padding: clamp(10px, 1.6vw, 12px) clamp(14px, 2.4vw, 45px) clamp(10px, 1.6vw, 12px) 14px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  font-size: clamp(14px, 1.8vw, 15px);
  outline: none;
  box-sizing: border-box;
  background:#fff;
}
.input:focus { border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,0.18); }

.btn-submit{
  width:100%;
  padding: clamp(10px, 1.8vw, 12px);
  background: linear-gradient(135deg, #10cfc9, #00a8a3);
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  font-size: clamp(14px, 1.8vw, 16px);
}
.btn-submit:hover { transform: translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,0.18); }

.password-group .toggle-password{
  position:absolute;
  top: calc(50% + 11px);        /* input orta hizası */
  right: 12px;
  transform: translateY(-50%);
  cursor:pointer;
  display:flex; align-items:center; height: 24px;
}

.eye.is--show, .eye-off.is--show { display:inline-block; }
.eye.is--hide, .eye-off.is--hide { display:none; }

/* Checkbox satırı düzgün ortalansın */
.checkbox-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-size: clamp(13px, 1.6vw, 14px);
  margin: 0 auto;
  width: 100%;
  text-align:center;
}
.checkbox-label input{ accent-color:#4f46e5; width:16px; height:16px; }
.checkbox-checkmark::after { display:block; }

/* Popup: her cihazda taşmayan, scroll edilebilir */
#popup-container{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#popup-background{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#popup-content{
  position: relative;
  background:#fff;
  padding: clamp(16px, 3vw, 40px);
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  width: min(92vw, 1000px);
  max-height: min(92vh, 900px);   /* kritik: büyük ekranlarda da küçüklerde de taşma yok */
  overflow: auto;                 /* içerik kayabilir */
  text-align:center;
  z-index:10;
}
#popup-content img{
  width: 100%;
  height: auto;
  border-radius:10px;
  display:block;
  margin-top: clamp(12px, 2vh, 20px);
}
#popup-content a{
  display:inline-block;
  margin-top: 18px;
  padding:10px 20px;
  background: linear-gradient(135deg, #10cfc9, #00a8a3);
  color:#fff; border-radius:8px; text-decoration:none;
  font-weight:600;
}
#popup-content a:hover{ opacity:0.9; }
#popup-container:not(.active){ display:none; }

.text-center{ text-align:center; margin-top: -8px; }
.text-center a{ font-size: clamp(13px, 1.6vw, 14px); font-weight:600; color:#10cfc9; text-decoration:none; }
.text-center a:hover{ text-decoration:underline; }

/* Kırılımlar */
@media (max-width: 1200px){
  .content{ gap: 0; }
}
/* Mobil ve küçük ekranlar: sadece form göster */
@media (max-width: 1024px) {
  .content-right {
    display: none;        /* Sağ kısmı gizle */
  }
  .content-left {
    flex: 1 1 100%;       /* Form tam genişlikte */
    min-height: 100dvh;   /* Ekran boyuna yayılır */
  }
}

/* Daha büyük ekranlarda sağ taraf tekrar gelsin */
@media (min-width: 1025px) {
  .content-right {
    display: flex;
  }
}