:root{
    --bg-dark:#00339a;
    --bg-deep:#0a3367;
    --brand:#24b36b;
    --text:#ffffff;
    --glass:rgba(255,255,255,.12);
    --glass-strong:rgba(255,255,255,.22);
    --shadow:0 10px 30px rgba(0,0,0,.25);
    --muted:#eaf0e7;
    --accent:#d9eef7;
    --header-bg:#f0f6ea;
    --text-scheduled:#0b2b2b;
    --accent-green:#1b8a4a;
    --border:#cfd8c7;
    --shadow-scheduled: 0 2px 6px rgba(0,0,0,0.06);
    --radius:8px;
}
*,html{box-sizing:border-box}
body{margin:0;background:var(--bg-deep);color:var(--text);font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:inherit;text-decoration:none}

/* page background */
.page-wrapper{min-height:100vh;width:100%;background: var(--bg-dark) url('../img/bg_m_rundown4.jpg') center top no-repeat;background-size:contain;position:relative;}
.content_wrapper{padding-top:20rem}
.logo_scg{position:absolute;top:5rem;left:0;display: flex;justify-content: center;align-items: center;width: 100%;}
.logo_scg img{width:100px;}
@media (min-width:768px){
    .page-wrapper{background-image:url('../img/bg_d_rundown4.jpg'); background-size:contain;}
    .content_wrapper{padding-top:22rem}
}

@media (min-width:1320px){
    .page-wrapper{min-height:100vh;width:100%;background: var(--bg-dark) url('../img/bg_d_rundown4.jpg') center top no-repeat;background-size:contain;position:relative;}
    .content_wrapper{padding-top:24rem}
}

@media (min-width:1500px){
    .page-wrapper{min-height:100vh;width:100%;background: var(--bg-dark) url('../img/bg_d_rundown4.jpg') center top no-repeat;background-size:contain;position:relative;}
    .content_wrapper{padding-top:34rem}
}
.overlay-grad{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,34,68,.35) 50%, rgba(0,34,68,.85) 100%);}

/* top bar */
.topbar{position:relative;top:0;z-index:10;display:flex;justify-content:center;align-items:center;padding:8px 24px 16px;}
.btn-register{background:#fff;color:#0c4aa1;font-weight:700;border-radius:10px;padding:10px 18px;box-shadow:var(--shadow);text-transform:uppercase;letter-spacing:.5px}
.counter{display:flex;gap:10px}
.badge-counter{background:#fff;color:var(--accent-green);border-radius:6px;padding:6px 10px;min-width:44px;text-align:center;font-weight:700;box-shadow:var(--shadow)}
.badge-counter .satuan{display:block; text-transform:uppercase; text-align:center;font-size:8px;opacity:.75}
/* event glass card */
.event-card{position:relative;z-index:2;margin:12px auto 10px;max-width:90%;border-radius:16px;background:var(--glass);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);box-shadow:var(--shadow);padding:18px;color:#e9f3ff}
.event-item{display:flex;gap:10px;margin:6px 0;font-size:18px}
.event-label{opacity:.85;min-width:120px}
.event-value{font-weight:700}
@media(min-width:992px){
    /*.event-card{max-width:920px;padding:18px 28px}*/
    .event-card{padding:18px 28px}
    .event-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
    .event-item{margin:0}
}

/* sections */
.section{position:relative;z-index:2;padding:24px 16px}
.section-title{font-weight:800;letter-spacing:.3px;margin-bottom:18px;font-size:26px}
@media(min-width:992px){.section-title{font-size:28px}}

/* people */
.people{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:12px}
.person-card{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#eaf4ff}
.avatar{width:120px;height:120px;border-radius:50%;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:transparent;font-size:0;font-weight:800}
.person-name{margin-top:12px;font-weight:800}
.person-role{opacity:.9;font-size:14px;line-height:1.2}
@media(min-width:768px){.people{grid-template-columns:repeat(4,1fr)}.avatar{width:110px;height:110px}}

/* moderator */
.people.mod{grid-template-columns:1fr}
@media(min-width:768px){.people.mod{grid-template-columns:repeat(5,1fr)}}

/* rundown */
.rundown-card{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:8px}
.rundown-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(180deg,#f9fafc,#ecf1f7);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#2a3f6c;font-weight:700}
@media(min-width:992px){.rundown-placeholder{aspect-ratio:16/10}}

/* spacing helper */
.container-max{max-width:1140px;margin:0 auto}


/* TABLE scheduled */
.schedule-card{
    max-width:1100px;
    margin:36px auto;
    background:white;
    border-radius:var(--radius);
    box-shadow:var(--shadow-scheduled);
    overflow:hidden;
    border:1px solid var(--border);
}

.table-header{
    display:flex;
    gap:0;
    background:var(--header-bg);
    padding:14px 18px;
    align-items:center;
    border-bottom:1px solid var(--border);
    font-weight:700;
    letter-spacing:0.2px;
}

/* new schedule columns (7 cols) */
.col-no{ width:6%; }
.col-start{ width:11%; }
.col-end{ width:11%; }
.col-dur{ width:10%; }
.col-activity{ width:20%; }
.col-description{ width:26%; }
.col-keypreset{ width:16%; text-align:left; }

/* Table body */
.schedule-body{
    width:100%;
    border-collapse:collapse;
}

.row{
    display:flex;
    padding:12px 18px;
    border-bottom:1px solid #eef2ea;
    align-items:flex-start;
    gap:0;
}

.cell{
    padding:6px 12px;
    line-height:1.25;
}

.cell.no{ width:6%; font-weight:600; color:#1a3b2b; }
.cell.start{ width:11%; font-weight:600; color:#1a3b2b; }
.cell.end{ width:11%; font-weight:600; color:#1a3b2b; }
.cell.dur{ width:10%; }
.cell.activity{ width:20%; font-weight:600; color:#163a2f; }
.cell.description{ width:26%; }
.cell.keypreset{ width:16%; }

/* Merged single-column rows */
.row-merged{ display:flex; align-items:center; justify-content:center; padding:14px 18px; }
.cell-merged{ width:100%; text-align:center; font-weight:700; }

/* Highlighted rows (blue/green blocks similar to image) */
.block-blue{ background:var(--accent); }
.block-green{ background:var(--muted); }

/* Small section title row */
.schedule-card .section{
    display:flex;
    gap:0;
    padding:10px 18px;
    background:linear-gradient(90deg, rgba(24,128,80,0.06), rgba(24,128,80,0.03));
    border-bottom:1px dashed #cfe7d7;
    color:var(--accent-green);
    font-weight:700;
}

/* Responsive */
@media (max-width:880px){
    .table-header { display: none; }
    .table-header, .row, .section { flex-direction:row; align-items:stretch;}
    .col-no, .cell.no{ width:auto; display: none; }
    .col-start, .cell.start{ width:auto; }
    .col-end, .cell.end{ width:auto; }
    .col-dur, .cell.dur{ width:auto; }
    .col-activity, .cell.activity{ width:auto; }
    .col-description, .cell.description{ width:auto; }
    .col-keypreset, .cell.keypreset{ width:auto; text-align:left; margin-top:6px; }
    /*body{ padding:12px; }*/
    .schedule-card{ width:100%; }
}
/* floating register button (bottom-center, fixed) */
.btn-register--float{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    z-index:1000;
    padding:14px 22px;
    font-size:16px;
    border-radius:10px;
    box-shadow:0 10px 20px rgba(0,0,0,.25);
    white-space:nowrap;
}
/* ensure enough space at bottom so content isn't hidden under the floating button */
.content_wrapper{ padding-bottom:96px; }
@media (min-width:992px){
    .person-card {width:20%;}
    .btn-register--float{ bottom:24px; }
}

/* Speaker modal styles */
.speaker-backdrop[aria-hidden="true"] { display: none; }
.speaker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; transition: opacity .2s ease; }
.speaker-backdrop.show { opacity: 1; }
.speaker-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); background: #fff; width: min(920px, 92vw); max-height: 88vh; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); overflow-y: scroll; transition: transform .2s ease; }
.speaker-backdrop.show .speaker-dialog { transform: translate(-50%, -50%) scale(1); }
.speaker-backdrop.closing .speaker-dialog { transform: translate(-50%, -50%) scale(.98); }
.speaker-close { position: absolute; right: 10px; top: 8px; background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #666;z-index: 1001; }
.speaker-content { display: flex; gap: 24px; padding: 24px; }
.speaker-left { flex: 0 0 36%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.speaker-photo-wrap { width: 220px; height: 220px; border-radius: 12px; background: #f3f5f7; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.speaker-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.speaker-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 64px; color: #455a64; }
.speaker-name { margin-top: 14px; font-size: 20px; font-weight: 700; color: #1f2937; }
.speaker-company { margin-top: 6px; font-size: 14px; color: #4b5563; }
.speaker-right { flex: 1 1 auto; overflow: auto; padding-right: 6px; }
.speaker-profile { line-height: 1.6; color: #111827; font-size: 15px; }
.speaker-profile p { margin: 0 0 12px; }

/* Responsive */
@media (max-width: 768px) {
  .speaker-content { flex-direction: column; padding: 16px; }
  .speaker-left { flex-basis: auto; }
  .speaker-photo-wrap { width: 100%; max-width: 360px; height: 200px; }
  .speaker-right { text-align:justify; margin-bottom: 16px; }
}

/* Prevent page scroll when modal open */
.no-scroll { overflow: hidden !important; }

/* Make cards clickable */
.people .person-card { cursor: pointer; }


/* Avatar photo support for speaker cards */
.people .person-card .avatar {
  position: relative;
  overflow: hidden;
}
.people .person-card .avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.people .person-card .avatar-initials {
  display: inline-block;
}