/* Warna Livenews.id: merah #c8102e, biru tua #0a1a2f */

/* =====================  Halaman masuk  ===================== */
body.task-login {
  --ln-red: #c8102e; --ln-navy: #0a1a2f;
  --ln-bg: #fff; --ln-ink: #0f1115; --ln-muted: #5d6169; --ln-line: #d9dbe0; --ln-field: #f6f7f9;
  --ln-ring: rgba(200, 16, 46, .18);
  margin: 0; background: var(--ln-bg); color: var(--ln-ink); text-align: left;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  body.task-login {
    --ln-bg: #0d0e10; --ln-ink: #f1f1ee; --ln-muted: #a8abb2; --ln-line: #34363b; --ln-field: #17181b;
    --ln-ring: rgba(255, 59, 82, .28);
  }
  body.task-login .ln-q { background: #16315a; }
}
body.task-login #layout { position: static; display: block; height: auto; min-height: 100vh; background: var(--ln-bg); }
body.task-login #layout-content {
  position: static; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  width: auto; min-height: 100vh; padding: 0; margin: 0; background: var(--ln-bg); overflow: visible;
}

/* ---- Panel merek (kiri) ---- */
.ln-brand {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; text-align: left;
  padding: clamp(28px, 5vw, 64px);
  background: linear-gradient(135deg, #07121f 0%, #0a1a2f 46%, #5b0f24 78%, #c8102e 120%);
}
.ln-brand::before {            /* kisi halus */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 0, transparent 75%); mask-image: radial-gradient(circle at 30% 30%, #000 0, transparent 75%);
}
.ln-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.ln-blob.b1 { width: 46vmax; height: 46vmax; left: -14vmax; bottom: -18vmax; background: #c8102e; animation: ln-float-a 22s ease-in-out infinite alternate; }
.ln-blob.b2 { width: 34vmax; height: 34vmax; right: -10vmax; top: -12vmax; background: #1d4f91; animation: ln-float-b 28s ease-in-out infinite alternate; }
.ln-blob.b3 { width: 22vmax; height: 22vmax; left: 38%; top: 34%; background: #ff3b52; opacity: .28; animation: ln-float-c 34s ease-in-out infinite alternate; }
@keyframes ln-float-a { to { transform: translate3d(8vmax, -6vmax, 0) scale(1.08); } }
@keyframes ln-float-b { to { transform: translate3d(-7vmax, 8vmax, 0) scale(1.1); } }
@keyframes ln-float-c { to { transform: translate3d(-6vmax, -5vmax, 0) scale(.9); } }
.ln-logo { display: block; width: clamp(190px, 24vw, 300px); height: auto; }
.ln-brand-main { max-width: 30em; }
.ln-live { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px; border-radius: 99px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ln-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b52; box-shadow: 0 0 0 0 rgba(255,59,82,.7); animation: ln-pulse 2s infinite; }
@keyframes ln-pulse { 70% { box-shadow: 0 0 0 9px rgba(255,59,82,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,82,0); } }
.ln-brand h2 { margin: 0 0 14px; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
.ln-brand-main p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.78); }
.ln-copy { margin: 0; font-size: .82rem; color: rgba(255,255,255,.6); }

/* ---- Formulir (kanan) ---- */
body.task-login #login-form {
  position: relative; top: auto; align-self: center; justify-self: center;
  width: min(420px, calc(100% - 48px)); max-width: none; margin: 40px 0; padding: 0;
  background: transparent; border: 0; box-shadow: none; text-align: left;
}
body.task-login #login-form table { display: none; }   /* cadangan bila markup asli masih tampil */
.ln-head { margin: 0 0 28px; }
.ln-title { margin: 0 0 6px; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.015em; font-weight: 800; color: var(--ln-ink); }
.ln-sub { margin: 0; color: var(--ln-muted); font-size: .98rem; line-height: 1.5; }

.ln-field { position: relative; margin: 0 0 14px; }
body.task-login #login-form .ln-field input.form-control {
  display: block; width: 100%; height: 58px; padding: 24px 50px 8px 16px; box-sizing: border-box;
  border: 1.5px solid var(--ln-line); border-radius: 12px; background: var(--ln-field); color: var(--ln-ink);
  font: inherit; font-size: 16px; box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
body.task-login #login-form .ln-field input.form-control::placeholder { color: transparent; }
body.task-login #login-form .ln-field input.form-control:hover { border-color: color-mix(in srgb, var(--ln-ink) 28%, var(--ln-line)); }
body.task-login #login-form .ln-field input.form-control:focus { outline: 0; border-color: var(--ln-red); background: var(--ln-bg); box-shadow: 0 0 0 4px var(--ln-ring); }
.ln-field label {
  position: absolute; left: 17px; top: 19px; margin: 0; max-width: calc(100% - 70px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 16px; line-height: 1.2; color: var(--ln-muted); pointer-events: none; transform-origin: left top;
  transition: transform .16s ease, color .16s ease;
}
.ln-field input:focus ~ label, .ln-field input:not(:placeholder-shown) ~ label, .ln-field.is-filled label { transform: translateY(-11px) scale(.76); }
.ln-field input:focus ~ label { color: var(--ln-red); }
.ln-field input:-webkit-autofill ~ label { transform: translateY(-11px) scale(.76); }
.ln-eye { position: absolute; right: 6px; top: 7px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0 !important; border-radius: 10px; background: transparent !important; box-shadow: none !important; color: var(--ln-muted); cursor: pointer; }
.ln-eye:hover { color: var(--ln-ink); background: rgba(127,127,127,.14) !important; }
.ln-eye:focus-visible { outline: 2px solid var(--ln-red); outline-offset: -2px; }
.ln-eye svg { width: 22px; height: 22px; }
.ln-eye .off { display: none; } .ln-eye[aria-pressed="true"] .on { display: none; } .ln-eye[aria-pressed="true"] .off { display: block; }

/* captcha satu baris + toggle ingat saya */
.ln-extra { margin: 6px 0 0; }
.ln-captcha { margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.ln-q { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 108px; height: 52px; padding: 0 14px; box-sizing: border-box;
  border-radius: 12px; background: var(--ln-navy); color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
body.task-login #login-form .ln-captcha input.form-control {
  flex: 1; min-width: 0; width: auto; height: 52px; padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid var(--ln-line); border-radius: 12px; background: var(--ln-field); color: var(--ln-ink); font: inherit; font-size: 16px; box-shadow: none;
}
body.task-login #login-form .ln-captcha input.form-control:focus { outline: 0; border-color: var(--ln-red); background: var(--ln-bg); box-shadow: 0 0 0 4px var(--ln-ring); }
.ln-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ln-extra .custom-switch, .ln-remember { position: relative; display: flex; align-items: center; min-height: 44px; margin: 8px 0 0 !important; padding: 0 !important; }
.ln-extra .custom-control-input, .ln-remember > input { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; opacity: 0; z-index: 2; cursor: pointer; }
.ln-extra .custom-control-label, .ln-remember { gap: 12px; margin: 0; padding: 0 !important; text-indent: 0; cursor: pointer; color: var(--ln-ink); font-size: .95rem; font-weight: 500; }
.ln-extra .custom-control-label { display: flex; align-items: center; }
.ln-extra .custom-control-label::before, .ln-extra .custom-control-label::after { display: none !important; content: none !important; }
.ln-switch { flex: none; position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--ln-line); transition: background .18s; }
.ln-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s cubic-bezier(.3,.7,.4,1.2); }
.ln-remember > input:checked + .ln-switch, .ln-extra .custom-control-input:checked + .custom-control-label .ln-switch { background: var(--ln-red); }
.ln-remember > input:checked + .ln-switch::after, .ln-extra .custom-control-input:checked + .custom-control-label .ln-switch::after { transform: translateX(18px); }
.ln-remember > input:focus-visible + .ln-switch, .ln-extra .custom-control-input:focus-visible + .custom-control-label .ln-switch { outline: 3px solid var(--ln-ring); outline-offset: 2px; }

/* tombol masuk */
body.task-login #login-form .formbuttons { margin: 22px 0 0; padding: 0; }
body.task-login #login-form button.mainaction {
  position: relative; display: block; width: 100%; height: 54px; padding: 0 20px; border: 0; border-radius: 12px; color: #fff !important;
  background: linear-gradient(180deg, #d9162f, #b30e27) !important; font-size: 16px; font-weight: 700; letter-spacing: .03em; text-transform: none;
  box-shadow: 0 10px 22px -10px rgba(200,16,46,.75), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
body.task-login #login-form button.mainaction:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 26px -10px rgba(200,16,46,.8), inset 0 1px 0 rgba(255,255,255,.18); }
body.task-login #login-form button.mainaction:active { transform: translateY(0) scale(.99); }
body.task-login #login-form button.mainaction:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--ln-ring); }
body.task-login #login-form button.mainaction.is-loading { color: transparent !important; pointer-events: none; }
body.task-login #login-form button.mainaction.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: ln-spin .7s linear infinite;
}
@keyframes ln-spin { to { transform: rotate(360deg); } }

/* kaki: lupa kata sandi */
body.task-login #login-footer { margin: 18px 0 0; padding: 0; text-align: center; font-size: .85rem; color: var(--ln-muted); }
.ln-forgot { margin-top: 6px; }
.ln-forgot summary { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 8px; cursor: pointer; list-style: none; color: var(--ln-red); font-weight: 600; font-size: .95rem; }
.ln-forgot summary::-webkit-details-marker { display: none; }
.ln-forgot summary:focus-visible { outline: 2px solid var(--ln-red); border-radius: 8px; }
.ln-forgot p { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--ln-field); border: 1px solid var(--ln-line); color: var(--ln-muted); text-align: left; line-height: 1.5; }
@media (prefers-color-scheme: dark) { body.task-login .ln-forgot summary { color: #ff6b7d; } }

/* pesan galat */
body.task-login #messagestack { position: fixed; top: 16px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); width: min(92vw, 440px); z-index: 50; }
body.task-login #messagestack > div { border-radius: 12px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); font-size: .95rem; }

/* ---- Ponsel & tablet: satu kolom, panel merek jadi kepala ringkas ---- */
@media (max-width: 899px) {
  body.task-login #layout-content { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ln-brand { flex-direction: column; gap: 14px; padding: 26px 24px 30px; border-radius: 0 0 28px 28px; }
  .ln-logo { width: 172px; }
  .ln-brand h2 { font-size: 1.5rem; margin: 0 0 6px; }
  .ln-brand-main p, .ln-live, .ln-copy { display: none; }
  body.task-login #login-form { align-self: start; margin: 28px 0 36px; width: calc(100% - 40px); max-width: 440px; }
  .ln-title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ln-blob, .ln-live i { animation: none !important; }
  .ln-field label, .ln-switch, .ln-switch::after, body.task-login #login-form button.mainaction { transition: none !important; }
}

/* =====================  Tombol utama & aplikasi  ===================== */
/* ---- Tombol utama & tautan ---- */
.btn.btn-primary, button.mainaction, input.mainaction, a.button.mainaction,
.ui-dialog .ui-dialog-buttonset .mainaction {
  background: #c8102e !important; border-color: #c8102e !important; color: #fff !important;
  border-radius: 8px; font-weight: 600; letter-spacing: .02em;
}
.btn.btn-primary:hover, button.mainaction:hover, input.mainaction:hover, a.button.mainaction:hover {
  background: #a80d26 !important; border-color: #a80d26 !important;
}
a { color: #c8102e; }

/* =====================  Aplikasi webmail (setelah masuk): gaya ala Gmail  ===================== */
html body:not(.task-login) {
  --g-bg: #f6f8fc; --g-surface: #fff; --g-ink: #1f1f1f; --g-muted: #5f6368; --g-line: #e3e7ee;
  --g-hover: #eef2f9; --g-select: #fde3e7; --g-select-ink: #8c0b1f; --g-red: #c8102e;
  font-family: Inter, "Google Sans", Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--g-ink); background: var(--g-bg); -webkit-font-smoothing: antialiased;
}

/* menu kiri */
html body:not(.task-login) #layout-menu { background: var(--g-bg); border: 0; }
html body:not(.task-login) #layout-menu .popover-header { background: transparent; border: 0; }
html body:not(.task-login) #taskmenu a { color: var(--g-muted); border-radius: 18px; margin: 2px 6px; }
html body:not(.task-login) #taskmenu a:before { color: var(--g-muted); }
html body:not(.task-login) #taskmenu a:hover { background: var(--g-hover); color: var(--g-ink); }
html body:not(.task-login) #taskmenu a.selected { background: var(--g-select); color: var(--g-select-ink); font-weight: 600; }
html body:not(.task-login) #taskmenu a.selected:before { color: var(--g-select-ink); }
html body:not(.task-login) #taskmenu a.compose { background: var(--g-red); color: #fff !important; margin: 12px 8px 14px; box-shadow: 0 2px 6px rgba(200,16,46,.35); }
html body:not(.task-login) #taskmenu a.compose:before { color: #fff !important; }
html body:not(.task-login) #taskmenu a.compose:hover { background: #a80d26; }

/* panel folder */
html body:not(.task-login) #layout-sidebar { background: var(--g-bg); border: 0; }
html body:not(.task-login) #layout-sidebar .header { background: transparent; border: 0; color: var(--g-ink); }
html body:not(.task-login) #layout-sidebar .footer { background: transparent; border: 0; }
html body:not(.task-login) #folderlist-content { background: transparent; }
html body:not(.task-login) #mailboxlist li > a { color: var(--g-ink); border-radius: 0 20px 20px 0; margin-right: 10px; background: transparent; }
html body:not(.task-login) #mailboxlist li > a:hover { background: var(--g-hover); }
html body:not(.task-login) #mailboxlist li.selected > a, html body:not(.task-login) #mailboxlist li.selected > a:hover { background: var(--g-select); color: var(--g-select-ink); font-weight: 700; }
html body:not(.task-login) #mailboxlist li.selected > a:before { color: var(--g-select-ink); }
html body:not(.task-login) #mailboxlist li > a:before { color: var(--g-muted); }
html body:not(.task-login) #mailboxlist span.unreadcount { background: transparent; color: var(--g-ink); font-weight: 700; }

/* daftar surat */
html body:not(.task-login) #layout-list { background: var(--g-surface); border: 0; border-radius: 16px 0 0 0; box-shadow: -1px 0 0 var(--g-line); }
html body:not(.task-login) #layout-list .header, html body:not(.task-login) #layout-list .footer { background: var(--g-surface); border-color: var(--g-line); color: var(--g-ink); }
html body:not(.task-login) #layout-list .searchbar { background: #eaf1fb; margin: 8px 12px; border: 0; border-radius: 24px; overflow: hidden; }
html body:not(.task-login) #layout-list .searchbar input, html body:not(.task-login) #layout-list .searchbar input::placeholder { color: var(--g-ink); background: transparent; }
html body:not(.task-login) #messagelist-content { background: var(--g-surface); }
html body:not(.task-login) table.messagelist tr.message td { border-bottom: 1px solid var(--g-line); background: var(--g-surface); color: var(--g-ink); }
html body:not(.task-login) table.messagelist tr.message.unread td { background: #fff; font-weight: 700; }
html body:not(.task-login) table.messagelist tr.message:not(.unread) td { background: #f7f9fc; }
html body:not(.task-login) table.messagelist tr.message:hover td { background: var(--g-hover); box-shadow: 0 1px 3px rgba(60,64,67,.18); position: relative; }
html body:not(.task-login) table.messagelist tr.message.selected td, html body:not(.task-login) table.messagelist tr.message.focused td { background: var(--g-select); color: var(--g-select-ink); }
html body:not(.task-login) table.messagelist tr.message.focused td { box-shadow: inset 3px 0 0 var(--g-red); }
html body:not(.task-login) table.messagelist td.subject span.fromto { color: var(--g-ink); font-weight: 600; }
html body:not(.task-login) table.messagelist tr.message:not(.unread) td.subject span.fromto { font-weight: 500; }
html body:not(.task-login) table.messagelist td.subject span.date, html body:not(.task-login) table.messagelist td.subject span.size { color: var(--g-muted); font-weight: 500; }
html body:not(.task-login) table.messagelist td.subject span.subject a { color: var(--g-ink); }
html body:not(.task-login) table.messagelist tr.message:not(.unread) td.subject span.subject a { color: var(--g-muted); font-weight: 400; }
html body:not(.task-login) table.messagelist span.msgicon.status.unread { background: transparent; color: var(--g-red); }
html body:not(.task-login) .pagenav, html body:not(.task-login) .pagenav * { color: var(--g-muted); }

/* panel baca & bilah alat */
html body:not(.task-login) #layout-content { background: var(--g-surface); }
html body:not(.task-login) #layout-content .header, html body:not(.task-login) #layout-content .footer { background: var(--g-surface); border-color: var(--g-line); }
html body:not(.task-login) .toolbar a { color: var(--g-muted); border-radius: 12px; }
html body:not(.task-login) .toolbar a:hover { background: var(--g-hover); color: var(--g-ink); }
html body:not(.task-login) .toolbar a.disabled { opacity: .4; }
html body:not(.task-login) .iframe-wrapper { background: var(--g-surface); }
html body:not(.task-login) #layout-content .header .toolbar a:before { color: inherit; }
html body:not(.task-login) .popupmenu, html body:not(.task-login) .popover { border-radius: 12px; }

/* tombol & tautan */
html body:not(.task-login) a { color: var(--g-red); }
html body:not(.task-login) .btn.btn-primary, html body:not(.task-login) button.mainaction, html body:not(.task-login) a.button.mainaction, html body:not(.task-login) input.mainaction { border-radius: 20px; padding-left: 20px; padding-right: 20px; }
html body:not(.task-login) .form-check-input:checked { background-color: var(--g-red); border-color: var(--g-red); }

/* menu: bagian atas & bawah transparan, tombol mode gelap disembunyikan (tema selalu terang) */
html body:not(.task-login) #layout-menu .popover-header, html body:not(.task-login) #layout-menu .special-buttons { background: transparent !important; }
html body:not(.task-login) #taskmenu a.theme { display: none !important; }
html body:not(.task-login) #taskmenu .special-buttons a, html body:not(.task-login) #taskmenu .special-buttons a:before { color: var(--g-muted); }
html body:not(.task-login) #taskmenu .special-buttons a.logout, html body:not(.task-login) #taskmenu .special-buttons a.logout:before { color: var(--g-red); }
html body:not(.task-login) table.messagelist span.msgicon.status.unread:before { color: var(--g-red) !important; }