/* Palet: overcast #F1F1F2 · warm gray #BCBABE · ice #A1D6E2 · glacier blue #1995AD */
:root{
  --overcast:#F1F1F2; --warmgray:#BCBABE; --ice:#A1D6E2; --glacier:#1995AD;
  --glacier-deep:#0F6173;   /* glacier blue digelapkan untuk teks & hover (kontras AA) */
  --ice-soft:#E3F2F6;       /* ice diencerkan untuk latar sorotan */
  --ink:#1F2A30; --ink-2:#55626A; --line:#D9D8DA; --paper:#FFFFFF;
  --danger:#B3261E; --danger-soft:#FBEAE9; --warn:#8A5A00; --warn-soft:#FFF4DC;
  --r-sm:6px; --r-md:12px;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--overcast);color:var(--ink);font-size:16px;line-height:1.55}
a{color:var(--glacier-deep)}
a:hover{color:var(--glacier)}
:focus-visible{outline:3px solid var(--glacier);outline-offset:2px;border-radius:4px}
img{max-width:100%}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);font-weight:800}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.main{padding-top:28px;padding-bottom:48px;min-height:70vh}
.foot{padding-bottom:28px;color:var(--ink-2);font-size:.85rem}

/* Bilah atas */
.topbar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar-in{display:flex;align-items:center;gap:24px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none;font-size:1.05rem}
.brand-mark{width:22px;height:22px;border-radius:50% 50% 50% 6px;background:linear-gradient(135deg,var(--ice) 0 50%,var(--glacier) 50% 100%)}
.mainnav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.mainnav a{padding:8px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.94rem}
.mainnav a:hover{background:var(--overcast);color:var(--ink)}
.mainnav a[aria-current]{color:var(--glacier-deep);background:var(--ice-soft)}
.who{display:flex;align-items:center;gap:12px;font-size:.9rem}
.who-name{font-weight:600;color:var(--ink);text-decoration:none}
.who-name:hover{color:var(--glacier-deep)}
.who-out{color:var(--ink-2)}

/* Tombol & formulir */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  background:var(--glacier);color:#fff;font:inherit;font-weight:700;padding:10px 18px;border-radius:var(--r-sm);
  cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--glacier-deep);color:#fff}
.btn-quiet{background:var(--paper);color:var(--glacier-deep);border-color:var(--warmgray)}
.btn-quiet:hover{background:var(--ice-soft);color:var(--glacier-deep)}
.btn-danger{background:var(--paper);color:var(--danger);border-color:#E3B6B2}
.btn-danger:hover{background:var(--danger-soft);color:var(--danger)}
.btn-sm{padding:6px 12px;font-size:.875rem}
.btn-zoom{background:var(--glacier);font-size:1.05rem;padding:14px 22px}

label{display:block;font-weight:600;font-size:.92rem;margin:0 0 6px}
.field{margin-bottom:16px}
.hint{font-size:.83rem;color:var(--ink-2);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=datetime-local],input[type=time],input[type=file],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--warmgray);
  border-radius:var(--r-sm);padding:10px 12px}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--glacier);box-shadow:0 0 0 3px var(--ice)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.check{display:flex;gap:8px;align-items:center;font-weight:500}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* Panel & pesan */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.panel + .panel{margin-top:20px}
.flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:18px;font-weight:600;border:1px solid}
.flash-ok{background:var(--ice-soft);border-color:var(--ice);color:var(--glacier-deep)}
.flash-warn{background:var(--warn-soft);border-color:#F1D48E;color:var(--warn)}
.flash-err{background:var(--danger-soft);border-color:#E3B6B2;color:var(--danger)}
.tag{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--overcast);color:var(--ink-2);border:1px solid var(--line)}
.tag-ice{background:var(--ice-soft);color:var(--glacier-deep);border-color:var(--ice)}
.tag-late{background:var(--warn-soft);color:var(--warn);border-color:#F1D48E}
.tag-done{background:#E6F4EA;color:#1E6B34;border-color:#B7DCC2}

.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pagehead p{margin:0}

/* Daftar bergaris (bukan tumpukan kartu) */
.rows{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.rows > li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--line)}
.rows > li:first-child{border-top:0}
.rows .r-main{min-width:0}
.rows .r-title{font-weight:700;color:var(--ink);text-decoration:none}
.rows a.r-title:hover{color:var(--glacier-deep);text-decoration:underline}
.rows .r-meta{font-size:.87rem;color:var(--ink-2)}
.empty{padding:28px 20px;text-align:center;color:var(--ink-2)}

table.tbl{width:100%;border-collapse:collapse;background:var(--paper)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-top:1px solid var(--line);vertical-align:top;font-size:.93rem}
.tbl thead th{border-top:0;background:var(--overcast);font-weight:700;color:var(--ink-2)}

/* ====== Ciri utama: jadwal pekan ini ====== */
.now{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  background:var(--glacier);color:#fff;border-radius:var(--r-md);padding:26px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.now::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:var(--ice);opacity:.28;pointer-events:none}
.now-when{font-weight:600;opacity:.92;margin-bottom:4px}
.now-title{font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem);font-weight:800;margin:0 0 4px}
.now-sub{opacity:.92}
.now > *{position:relative;z-index:1}
.now .btn{background:#fff;color:var(--glacier-deep);position:relative;z-index:1}
.now .btn:hover{background:var(--ice-soft)}
.now-quiet{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.now-quiet .btn{background:var(--paper);color:var(--glacier-deep)}
.now-quiet::after{opacity:.35}

.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:28px}
.day{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);min-height:120px;padding:10px 8px;display:flex;flex-direction:column;gap:6px}
.day-name{font-size:.82rem;font-weight:700;color:var(--ink-2);padding:0 2px 4px;border-bottom:1px solid var(--line)}
.day.today{border-color:var(--glacier);box-shadow:inset 0 3px 0 var(--glacier);background:var(--ice-soft)}
.day.today .day-name{color:var(--glacier-deep)}
.slot{display:block;text-decoration:none;color:var(--ink);background:var(--overcast);border-left:3px solid var(--warmgray);
  border-radius:4px;padding:6px 8px;font-size:.8rem;line-height:1.3}
.slot b{display:block;font-weight:700;overflow-wrap:anywhere;hyphens:auto}
.slot:hover{border-left-color:var(--glacier);color:var(--ink)}
.day.today .slot{background:var(--paper);border-left-color:var(--glacier)}

.two{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.section-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 12px}

/* Halaman mata kuliah */
.course-head{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 28px;margin-bottom:22px;
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border-top:6px solid var(--glacier)}
.course-code{font-weight:700;color:var(--glacier-deep);font-size:.92rem}
.zoom-box{text-align:right}
.zoom-box .small{margin-top:8px}
.ann{border-left:3px solid var(--ice);padding:2px 0 2px 14px;margin:0 0 18px}
.ann-time{font-size:.8rem;color:var(--ink-2)}
.ann-body{white-space:pre-line}

/* Halaman masuk */
.auth{min-height:min(600px,86vh);display:grid;grid-template-columns:1.05fr 1fr;gap:0;max-width:1000px;margin:3vh auto 0;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.auth-art{background:var(--glacier);color:#fff;padding:44px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);max-width:14ch;position:relative;z-index:1}
.auth-art p{max-width:36ch;opacity:.95;position:relative;z-index:1}
.floes{position:absolute;inset:auto -40px -40px auto;width:340px;height:260px;pointer-events:none}
.floes span{position:absolute;display:block;background:var(--ice);border-radius:40% 55% 45% 60%}
.floes span:nth-child(1){width:200px;height:120px;right:40px;bottom:40px;opacity:.55}
.floes span:nth-child(2){width:120px;height:80px;right:200px;bottom:120px;opacity:.35;background:var(--overcast)}
.floes span:nth-child(3){width:90px;height:60px;right:10px;bottom:170px;opacity:.4;background:var(--warmgray)}
.auth-form{padding:44px;display:flex;flex-direction:column;justify-content:center}
.auth-form h2{font-size:1.4rem}
.switch{margin-top:18px;font-size:.92rem}

@media (max-width:860px){
  .two,.auth,.course-head,.now{grid-template-columns:1fr}
  .zoom-box{text-align:left}
  .auth-art{min-height:220px}
  .week{grid-template-columns:1fr;gap:6px}
  .day{min-height:0;flex-direction:row;align-items:flex-start;flex-wrap:wrap}
  .day.is-empty:not(.today){display:none}
  .day-name{border-bottom:0;width:64px;padding-top:6px}
  .slot{flex:1;min-width:160px}
  .topbar-in{gap:6px 16px;padding-top:10px}
  .brand{order:1}
  .who{order:2;margin-left:auto}
  .mainnav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;margin:0 -8px;padding-bottom:6px}
  .mainnav a{white-space:nowrap}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .rows > li{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}