/* ==========================================================================
   SezTube :: module/login  (önek: lg-)
   Giriş / kayıt sayfası. Core tasarım değişkenlerini (--st-*) kullanır,
   core.css dışında başka modüle bağımlı değildir.
   ========================================================================== */

.lg-page {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh;
}

/* ---------- Arka plan ---------- */
.lg-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lg-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: lg-drift 16s ease-in-out infinite; }
.lg-orb--a { width: 440px; height: 440px; left: -140px; top: -120px; background: #7c5cff; }
.lg-orb--b { width: 400px; height: 400px; right: -140px; bottom: -140px; background: #ff4d8d; opacity: .36; animation-delay: -7s; }
:root[data-theme="light"] .lg-orb { opacity: .26; }
:root[data-theme="light"] .lg-orb--b { opacity: .2; }
.lg-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(var(--st-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--st-border) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* ---------- Sağ taraf (form) ---------- */
.lg-main {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--st-safe-t) + 22px) calc(14px + var(--st-safe-r)) calc(var(--st-safe-b) + 18px) calc(14px + var(--st-safe-l));
}

.lg-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: lg-rise .6s var(--st-ease) both; }
.lg-brand__logo { width: 58px; height: 58px; filter: drop-shadow(0 14px 28px rgba(124, 92, 255, .55)); }
.lg-brand__name { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.lg-brand__name b, .lg-hero__name b {
  font-weight: 800; background: var(--st-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.lg-brand__tag { font-size: 14px; color: var(--st-text-2); }

.lg-card {
  width: 100%; max-width: 440px; padding: 18px 16px 16px;
  border-radius: 28px; background: var(--st-glass);
  border: 1px solid var(--st-border-strong); box-shadow: var(--st-shadow-lg);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  animation: lg-rise .65s .05s var(--st-ease) both;
}

/* Sekmeler */
.lg-tabs {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr); padding: 4px;
  border-radius: 16px; background: var(--st-surface-2); border: 1px solid var(--st-border);
}
.lg-tabs__ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 12px; background: var(--st-surface-3); box-shadow: var(--st-shadow-sm);
  transform: translateX(calc(var(--lg-i, 0) * 100%));
  transition: transform .4s var(--st-spring);
}
.lg-tab {
  position: relative; z-index: 1; height: 40px; border-radius: 12px; text-align: center;
  font-size: 14px; font-weight: 650; color: var(--st-text-2); transition: color .2s;
}
.lg-tab:hover { color: var(--st-text); }
.lg-tab.is-active { color: var(--st-text); }

.lg-title { margin-top: 20px; font-size: 22px; font-weight: 780; letter-spacing: -.02em; line-height: 1.25; }
.lg-sub { margin-top: 4px; font-size: 14px; color: var(--st-text-2); }
.lg-card > .lg-title:first-child { margin-top: 6px; }

/* Formlar */
.lg-form { display: none; flex-direction: column; gap: 14px; margin-top: 18px; }
.lg-form.is-active { display: flex; animation: lg-swap .42s var(--st-ease) both; }
.lg-form .st-btn { margin-top: 2px; }

.lg-hint { font-size: 12.5px; line-height: 1.4; color: var(--st-text-3); }
.lg-hint:empty { display: none; }
.lg-hint--ok { color: var(--st-success); }
.lg-hint--bad { color: var(--st-danger); }

/* Şifre gücü */
.lg-meter { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 5px; margin-top: 2px; }
.lg-meter i { height: 4px; border-radius: 4px; background: var(--st-surface-3); transition: background .25s; }
.lg-meter span { grid-column: 1 / -1; min-height: 16px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--st-text-3); }
.lg-meter[data-level="1"] i:nth-child(-n+1) { background: var(--st-danger); }
.lg-meter[data-level="2"] i:nth-child(-n+2) { background: var(--st-warning); }
.lg-meter[data-level="3"] i:nth-child(-n+3) { background: var(--st-info); }
.lg-meter[data-level="4"] i:nth-child(-n+4) { background: var(--st-success); }
.lg-meter[data-level="1"] span { color: var(--st-danger); }
.lg-meter[data-level="2"] span { color: var(--st-warning); }
.lg-meter[data-level="3"] span { color: var(--st-info); }
.lg-meter[data-level="4"] span { color: var(--st-success); }

/* Alt bağlantılar */
.lg-alt { text-align: center; font-size: 13.5px; color: var(--st-text-2); }
.lg-link { font-weight: 700; color: var(--st-text); transition: color .2s; }
.lg-link:hover { color: var(--st-accent); }

.lg-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 12px; color: var(--st-text-3); }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--st-border); }

.lg-foot { font-size: 12px; color: var(--st-text-3); }

/* ---------- Sol taraf (tanıtım): sadece geniş ekran ---------- */
.lg-hero { display: none; }

@media (min-width: 480px) {
  .lg-card { padding: 26px 26px 22px; }
  .lg-brand__logo { width: 64px; height: 64px; }
}

@media (min-width: 960px) {
  .lg-page { grid-template-columns: minmax(0, 1.12fr) minmax(440px, .88fr); }
  .lg-brand { display: none; }
  .lg-card { max-width: 460px; padding: 30px 30px 26px; }
  .lg-card > .lg-title:first-child { margin-top: 0; }

  .lg-hero {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    padding: 64px clamp(40px, 6vw, 96px); overflow: hidden;
  }
  .lg-hero__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; }
  .lg-hero__logo { width: 42px; height: 42px; filter: drop-shadow(0 10px 22px rgba(124, 92, 255, .55)); }
  .lg-hero__name { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
  .lg-hero__title { max-width: 560px; font-size: clamp(36px, 4.2vw, 56px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
  .lg-hero__title span { background: var(--st-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  .lg-hero__text { max-width: 460px; margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--st-text-2); }

  .lg-feats { display: grid; gap: 12px; margin-top: 30px; }
  .lg-feats li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 580; color: var(--st-text); }
  .lg-feats li span {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
    background: var(--st-accent-soft); color: var(--st-accent);
  }

  .lg-art { position: relative; height: 240px; max-width: 520px; margin-top: 44px; }
  .lg-float {
    position: absolute; width: 224px; padding: 10px; border-radius: 22px;
    background: var(--st-glass); border: 1px solid var(--st-border-strong); box-shadow: var(--st-shadow-lg);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    animation: lg-bob 7s ease-in-out infinite;
  }
  .lg-float__thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; color: #fff; background: var(--st-grad); }
  .lg-float--b .lg-float__thumb { background: linear-gradient(135deg, #2dd48f, #4da6ff); }
  .lg-float--c .lg-float__thumb { background: linear-gradient(135deg, #ffb547, #ff4d8d); }
  .lg-float__lines { display: grid; gap: 7px; margin: 12px 4px 4px; }
  .lg-float__lines i { display: block; height: 8px; border-radius: 6px; background: var(--st-surface-3); }
  .lg-float__lines i:last-child { width: 62%; }
  .lg-float--a { left: 0; top: 34px; transform: rotate(-5deg); }
  .lg-float--b { left: 148px; top: 0; transform: rotate(3deg); animation-delay: -2.3s; z-index: 2; }
  .lg-float--c { left: 300px; top: 52px; transform: rotate(-2deg); animation-delay: -4.6s; }
}

/* ---------- Animasyonlar ---------- */
@keyframes lg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lg-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lg-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, 36px) scale(1.12); } }
@keyframes lg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }