@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   LOGIN — MOBİL-FIRST, Saate Göre Dinamik Tema
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

/* ——— Canvas yıldız twinkle (sadece gece/akşam, desktop sol panel) ——— */
#bgCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* ============================================================
   TEMALAR
   ============================================================ */
body.tema-sabah .login-left {
  background: linear-gradient(160deg, #FBBF24 0%, #F97316 40%, #FB923C 100%);
}
body.tema-oglen .login-left {
  background: linear-gradient(160deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);
}
body.tema-aksam .login-left {
  background: linear-gradient(160deg, #7C3AED 0%, #C2410C 50%, #F97316 100%);
}
body.tema-gece .login-left {
  background: linear-gradient(160deg, #020617 0%, #0F172A 50%, #1E1B4B 100%);
}

/* ============================================================
   LAYOUT — DESKTOP: yan yana | MOBİL: üst-alt
   ============================================================ */
.login-page {
  display: flex;
  height: 100vh;
  height: 100dvh; /* modern mobile viewport */
  flex-direction: row;
}

/* ——— SOL PANEL (Desktop: flex:1 | Mobil: fixed header şeridi) ——— */
.login-left {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 52px;
  transition: background 0.5s ease;
}

/* Zemin degrade overlay */
.login-left::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25));
  pointer-events: none;
  z-index: 2;
}

/* ——— SAĞ PANEL (Form) ——— */
.login-right {
  width: 420px;
  min-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 36px;
  background: #ffffff;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.login-box {
  width: 100%;
  max-width: 340px;
}

/* ——— Marka alanı (sol panel alt) ——— */
.login-branding {
  position: relative;
  z-index: 3;
  text-align: center;
}

.brand-logo {
  height: 60px;
  margin: 0 auto 14px;
  filter: brightness(0) invert(1);
}

.brand-selam {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
  letter-spacing: 0.01em;
}

/* ——— Mobilde görünen logo (form üstü) ——— */
.top-logo {
  display: none;
  text-align: center;
  margin-bottom: 20px;
}
.top-logo img { height: 48px; margin: 0 auto; }

/* ============================================================
   FORM ELEMENTLERİ
   ============================================================ */
.login-box h3 {
  font-size: 24px;
  font-weight: 800;
  color: #1A202C;
  margin-bottom: 4px;
}

.login-box .subtitle {
  color: #718096;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Alertler */
.login-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.4;
}
.login-alert svg  { width: 16px; height: 16px; flex-shrink: 0; }
.login-alert.success { background: rgba(39,174,96,0.1); border: 1px solid rgba(39,174,96,0.3); color: #1a7a40; }
.login-alert.error   { background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25); color: #C0392B; }

/* Input alanları */
.login-input-wrap {
  position: relative;
  margin-bottom: 14px;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #A0AEC0;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.input-icon svg { width: 18px; height: 18px; }

.login-input {
  width: 100%;
  padding: 13px 14px 13px 44px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* 16px = iOS'ta zoom yok */
  color: #1A202C;
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.login-input:focus {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}

/* Giriş butonu */
.login-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px; /* kolay dokunma hedefi */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.login-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(192,57,43,0.4); }
.login-btn:active { transform: translateY(1px); box-shadow: none; }
.login-btn:disabled { opacity: 0.75; cursor: not-allowed; transform: none; box-shadow: none; }

/* Footer copyright */
.login-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: #CBD5E0;
}

/* ============================================================
   GÖK SAHNELERI
   ============================================================ */
.sky-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ——— GÜNEŞ ——— */
.sun {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
}

.sun-core {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF9C4 20%, #FFD700 60%, #FF8C00 100%);
  box-shadow:
    0 0 0 10px rgba(255,215,0,0.15),
    0 0 40px 20px rgba(255,200,0,0.45),
    0 0 80px 40px rgba(255,140,0,0.25);
  animation: sunPulse 4s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(255,215,0,0.15), 0 0 40px 20px rgba(255,200,0,0.45), 0 0 80px 40px rgba(255,140,0,0.25); }
  50%       { box-shadow: 0 0 0 16px rgba(255,215,0,0.1),  0 0 60px 30px rgba(255,200,0,0.55), 0 0 100px 50px rgba(255,140,0,0.3); }
}

.sun-rays {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,220,0,0.25) 0deg, transparent 18deg,
    rgba(255,220,0,0.25) 36deg, transparent 54deg,
    rgba(255,220,0,0.25) 72deg, transparent 90deg,
    rgba(255,220,0,0.25) 108deg, transparent 126deg,
    rgba(255,220,0,0.25) 144deg, transparent 162deg,
    rgba(255,220,0,0.25) 180deg, transparent 198deg,
    rgba(255,220,0,0.25) 216deg, transparent 234deg,
    rgba(255,220,0,0.25) 252deg, transparent 270deg,
    rgba(255,220,0,0.25) 288deg, transparent 306deg,
    rgba(255,220,0,0.25) 324deg, transparent 342deg,
    rgba(255,220,0,0.25) 360deg
  );
  animation: rotateSlow 16s linear infinite;
}

@keyframes rotateSlow { to { transform: rotate(360deg); } }

/* ——— BULUTLAR ——— */
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.88);
  border-radius: 50px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud-1 {
  width: 110px; height: 32px;
  top: 32%; left: 8%;
  animation: cloudDrift 20s ease-in-out infinite;
}
.cloud-1::before { width: 50px; height: 50px; top: -24px; left: 16px; }
.cloud-1::after  { width: 36px; height: 36px; top: -16px; left: 50px; }

.cloud-2 {
  width: 85px; height: 26px;
  top: 22%; left: 55%;
  opacity: 0.8;
  animation: cloudDrift 28s ease-in-out infinite reverse;
}
.cloud-2::before { width: 38px; height: 38px; top: -19px; left: 12px; }
.cloud-2::after  { width: 28px; height: 28px; top: -13px; left: 38px; }

@keyframes cloudDrift {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(24px); }
}

/* ——— AKŞAM GÜNEŞI ——— */
.sunset-sun {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 65px;
  background: radial-gradient(ellipse at bottom, #FBBF24 0%, #F97316 40%, rgba(249,115,22,0) 80%);
  border-radius: 130px 130px 0 0;
  box-shadow: 0 -20px 80px rgba(249,115,22,0.7);
  animation: sunsetBob 5s ease-in-out infinite alternate;
}

@keyframes sunsetBob {
  0%   { transform: translateX(-50%) translateY(0px); opacity: 0.85; }
  100% { transform: translateX(-50%) translateY(-6px); opacity: 1; }
}

/* ——— AY ——— */
.moon {
  position: absolute;
  top: 13%;
  right: 18%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #FEFCE8, #FDE68A 50%, #D4C27A 100%);
  box-shadow:
    0 0 0 3px rgba(253,230,138,0.2),
    0 0 30px 12px rgba(253,230,138,0.18),
    inset -10px -4px 0 rgba(180,155,70,0.35);
  animation: moonGlow 6s ease-in-out infinite alternate;
}

.moon-rising {
  top: 24%;
  right: 16%;
  width: 54px;
  height: 54px;
  opacity: 0;
  animation: moonRise 2.5s ease-out 0.5s forwards, moonGlow 6s ease-in-out 3s infinite alternate;
}

@keyframes moonRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 0.75; transform: translateY(0); }
}

@keyframes moonGlow {
  0%   { box-shadow: 0 0 20px 8px rgba(253,230,138,0.12); }
  100% { box-shadow: 0 0 45px 18px rgba(253,230,138,0.28); }
}

/* ——— CSS YILDIZLAR (gece & akşam) ——— */
.stars {
  position: absolute;
  inset: 0;
}
.stars::before, .stars::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 65%;
  background-image:
    radial-gradient(1.2px 1.2px at 8%  12%, rgba(255,255,255,0.92), transparent),
    radial-gradient(1px   1px   at 22% 7%,  rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 38% 18%, rgba(255,255,220,0.9),  transparent),
    radial-gradient(1px   1px   at 52% 5%,  rgba(255,255,255,0.65), transparent),
    radial-gradient(1.8px 1.8px at 67% 15%, rgba(255,255,255,0.88), transparent),
    radial-gradient(1px   1px   at 83% 9%,  rgba(255,255,255,0.75), transparent),
    radial-gradient(1px   1px   at 13% 32%, rgba(255,255,255,0.58), transparent),
    radial-gradient(2px   2px   at 44% 28%, rgba(255,255,220,0.82), transparent),
    radial-gradient(1px   1px   at 59% 38%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.2px 1.2px at 78% 26%, rgba(255,255,255,0.7),  transparent),
    radial-gradient(1px   1px   at 28% 44%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 91% 36%, rgba(255,255,255,0.8),  transparent),
    radial-gradient(1px   1px   at 3%  48%, rgba(255,255,255,0.6),  transparent),
    radial-gradient(1.2px 1.2px at 72% 50%, rgba(255,255,255,0.65), transparent);
  animation: starTwinkle 3.5s ease-in-out infinite alternate;
}
.stars::after {
  background-image:
    radial-gradient(1px   1px   at 6%  22%, rgba(255,255,255,0.7),  transparent),
    radial-gradient(1.2px 1.2px at 18% 48%, rgba(255,255,255,0.55), transparent),
    radial-gradient(2px   2px   at 33% 10%, rgba(255,255,220,0.92), transparent),
    radial-gradient(1px   1px   at 48% 42%, rgba(255,255,255,0.62), transparent),
    radial-gradient(1px   1px   at 63% 20%, rgba(255,255,255,0.7),  transparent),
    radial-gradient(1.5px 1.5px at 76% 40%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px   1px   at 93% 14%, rgba(255,255,255,0.68), transparent),
    radial-gradient(1px   1px   at 55% 55%, rgba(255,255,255,0.5),  transparent);
  animation-delay: 1.8s;
}
.stars-dim::before, .stars-dim::after { opacity: 0.35; }

@keyframes starTwinkle {
  0%   { opacity: 0.65; }
  100% { opacity: 1; }
}

/* ——— KAYAN YILDIZLAR ——— */
.shooting-star {
  position: absolute;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
  opacity: 0;
  transform-origin: right center;
}
.s1 { width: 120px; top: 12%; left: 50%; animation: shoot 10s linear 3s infinite; }
.s2 { width: 90px;  top: 28%; left: 35%; animation: shoot 10s linear 7s infinite; }
.s3 { width: 150px; top: 8%;  left: 65%; animation: shoot 10s linear 13s infinite; }

@keyframes shoot {
  0%        { opacity: 0; transform: rotate(-30deg) translateX(0); }
  3%, 8%    { opacity: 1; }
  18%       { opacity: 0; transform: rotate(-30deg) translateX(-300px); }
  100%      { opacity: 0; transform: rotate(-30deg) translateX(-300px); }
}

/* ============================================================
   MOBİL RESPONSIVE — En Kritik Bölüm
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
  .login-right {
    width: 380px;
    min-width: 380px;
    padding: 32px 28px;
  }
}

/* Mobil — tam ekran form, üstte mini gökyüzü şeridi */
@media (max-width: 680px) {
  html, body { overflow: auto; }

  .login-page {
    flex-direction: column;
    height: 100dvh;
    overflow-y: auto;
  }

  /* Sol panel → üstte mini gökyüzü banner */
  .login-left {
    flex: 0 0 auto;
    height: 200px;
    width: 100%;
    padding-bottom: 20px;
    justify-content: flex-end;
    align-items: center;
  }

  /* Mobilde gökyüzü sahnesi görünür ama küçültülmüş */
  .sun { width: 56px; height: 56px; top: 20%; }
  .sun-core { width: 56px; height: 56px; }
  .sun-rays { inset: -12px; }
  .moon { width: 46px; height: 46px; top: 18%; right: 12%; }
  .moon-rising { width: 38px; height: 38px; }
  .sunset-sun { width: 90px; height: 45px; bottom: 48px; }
  .cloud-1 { width: 80px; height: 24px; top: 30%; }
  .cloud-2 { width: 60px; height: 18px; }

  /* Sol panel logo şeridi */
  .brand-logo  { height: 40px; margin-bottom: 8px; }
  .brand-selam { font-size: 18px; }

  /* Sol panel zemin overlay kaldır */
  .login-left::after { height: 60px; }

  /* Sağ panel tam genişlik */
  .login-right {
    width: 100%;
    min-width: 0;
    padding: 28px 20px 32px;
    flex: 1;
  }

  .login-box {
    max-width: 100%;
  }

  /* Mobilde üstte logo gizle (sol panelde zaten var) */
  .top-logo { display: none; }

  /* Daha büyük dokunma hedefleri */
  .login-input {
    font-size: 16px;
    padding: 14px 14px 14px 44px;
    min-height: 50px;
  }

  .login-btn {
    min-height: 52px;
    font-size: 16px;
  }

  .login-box h3 { font-size: 22px; }

  /* Canvas yıldız sol panelde */
  #bgCanvas { width: 100%; height: 200px; }
}

/* Çok küçük ekranlar (320px) */
@media (max-width: 380px) {
  .login-left  { height: 160px; }
  .login-right { padding: 22px 16px 28px; }
  .login-box h3 { font-size: 20px; }
  #bgCanvas { height: 160px; }
}

/* Yatay mobil (landscape) */
@media (max-height: 500px) and (orientation: landscape) {
  .login-page { flex-direction: row; }
  .login-left { flex: 1; height: 100%; padding-bottom: 40px; }
  .login-right { width: 360px; min-width: 0; padding: 24px 24px; overflow-y: auto; }
  .top-logo { display: none; }
  #bgCanvas { width: 100%; height: 100%; }
}