/* Halaman masuk & daftar — tema desa nelayan, senada landing page.
   HP: pemandangan laut senja jadi header pendek, form dalam kartu di bawahnya.
   Laptop (>= 900px): dua kolom — pemandangan di kiri, form di kanan. */
body.dd-auth { padding: 0; min-height: 100vh; background: var(--dd-bg); display: flex; flex-direction: column; }

.dd-scene {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--langit-atas) 0%, color-mix(in srgb, var(--langit-atas) 55%, var(--langit-tengah)) 40%, var(--langit-tengah) 66%, color-mix(in srgb, var(--langit-bawah) 75%, var(--dd-karang)) 92%, var(--langit-bawah) 100%);
  padding: 18px 20px 86px; min-height: 250px;
}
.dd-scene .kembali { color: #fff; text-decoration: none; font-size: .85rem; opacity: .9; display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 4; }
.dd-scene .kembali:hover { opacity: 1; }
.dd-scene .merek { position: relative; z-index: 4; display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.dd-scene .merek .logo { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--dd-primary); font-size: 1.5rem; flex: none; overflow: hidden; }
.dd-scene .merek .logo img { width: 100%; height: 100%; object-fit: contain; }
.dd-scene .merek b { display: block; font-family: var(--dd-font-judul); font-size: 1.5rem; line-height: 1.1; }
.dd-scene .merek small { display: block; font-size: .8rem; opacity: .85; }
.dd-scene .kalimat { position: relative; z-index: 4; display: none; }
.dd-scene .mthr { position: absolute; right: -14px; top: 40px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--dd-matahari) 45%, #fff) 0%, var(--dd-matahari) 55%, transparent 72%); opacity: .85; }
.dd-scene .prh { position: absolute; right: 14%; bottom: 60px; width: 84px; z-index: 2; animation: dd-ayun 5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes dd-ayun { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.dd-scene .omb { position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; z-index: 3; }
.dd-scene .omb svg { position: absolute; bottom: 0; width: 200%; height: 100%; }
.dd-scene .omb .a { animation: dd-geser 14s linear infinite; opacity: .5; }
.dd-scene .omb .b { bottom: -14px; }
@keyframes dd-geser { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.dd-form-wrap { flex: 1; display: flex; justify-content: center; padding: 0 16px 32px; margin-top: -54px; position: relative; z-index: 5; }
.dd-form-card { width: 100%; max-width: 420px; background: var(--dd-card-bg, #fff); border-radius: 20px; box-shadow: 0 14px 40px rgba(11,46,74,.14); padding: 26px 22px; align-self: flex-start; }
.dd-form-card h1 { font-family: var(--dd-font-judul); font-size: 1.6rem; color: var(--dd-primary-dark); margin: 0 0 4px; }
.dd-form-card .sub { color: var(--dd-text-muted); font-size: .9rem; margin: 0 0 20px; }
.dd-form-card .tautan-bawah { text-align: center; margin: 16px 0 0; font-size: .9rem; color: var(--dd-text-muted); }
.dd-form-card .tautan-bawah a { color: var(--dd-primary); font-weight: 600; text-decoration: none; }
.dd-input-ikon { position: relative; }
.dd-input-ikon > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--dd-text-muted); pointer-events: none; }
.dd-input-ikon input { padding-left: 38px !important; }
.dd-input-ikon .intip { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--dd-text-muted); font-size: 1.1rem; padding: 6px 8px; cursor: pointer; }
.dd-input-ikon.dengan-intip input { padding-right: 42px !important; }
.dd-pemisah { display: flex; align-items: center; gap: 10px; color: var(--dd-text-muted); font-size: .8rem; margin: 18px 0 12px; }
.dd-pemisah::before, .dd-pemisah::after { content: ''; flex: 1; height: 1px; background: var(--dd-border); }
.dd-btn-garis-laut { background: var(--dd-card-bg, #fff); color: var(--dd-primary); border: 1.5px solid var(--dd-border); }
.dd-btn-garis-laut:hover { border-color: var(--dd-toska); }

@media (min-width: 900px) {
  body.dd-auth { flex-direction: row; }
  .dd-scene { width: 46%; min-height: 100vh; padding: 36px 48px; display: flex; flex-direction: column; position: sticky; top: 0; }
  .dd-scene .merek { margin-top: 42px; }
  .dd-scene .kalimat { display: block; margin-top: auto; margin-bottom: 190px; max-width: 420px; }
  .dd-scene .kalimat h2 { font-family: var(--dd-font-judul); font-size: 2.3rem; line-height: 1.15; margin: 0 0 12px; }
  .dd-scene .kalimat h2 em { color: var(--dd-matahari); }
  .dd-scene .kalimat p { opacity: .9; margin: 0; }
  .dd-scene .mthr { width: 200px; height: 200px; top: auto; bottom: 150px; right: 10%; }
  .dd-scene .prh { width: 150px; bottom: 96px; right: 24%; }
  .dd-scene .omb { height: 150px; }
  .dd-form-wrap { margin-top: 0; align-items: center; padding: 40px; }
  .dd-form-card { align-self: center; padding: 36px 34px; box-shadow: 0 14px 40px rgba(11,46,74,.10); }
}

@media (prefers-reduced-motion: reduce) {
  .dd-scene .prh, .dd-scene .omb .a { animation: none; }
}

/* Mode gelap: kartu form gelap, judul terang; tombol mode di pojok pemandangan */
html.mode-gelap .dd-form-card { box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
html.mode-gelap .dd-form-card h1 { color: var(--teks-aksen); }
.dd-scene .tombol-mode { position: absolute; top: 14px; right: 16px; z-index: 5; border: 0; border-radius: 999px; width: 38px; height: 38px;
  background: rgba(255, 255, 255, .2); color: inherit; font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(4px); }
@media (min-width: 900px) { .dd-scene .tombol-mode { top: 30px; right: 30px; } }