@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,700&display=swap');

:root{
  --green:#0d9b6e;
  --green-dark:#087556;
  --navy:#0b3d5c;
  --navy-2:#0a2b44;
  --text:#17324d;
  --muted:#6b8499;
  --line:#e4eef4;
  --bg:#eef6fb;
  --dokter:#1e88e5;
  --perawat:#2e9e6b;
  --bidan:#e0569a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit}
.muted{color:var(--muted)}

.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.green{background:#d9f7e9;color:#087556}
.yellow{background:#fff3cd;color:#946200}
.red{background:#fde2e2;color:#b42318}
.blue{background:#dbeafe;color:#1d4ed8}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;padding:10px 14px;text-decoration:none;cursor:pointer;font-weight:700;font-size:13px;font-family:inherit}
.btn-primary{background:#1d6fe8;color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:#dc3545;color:#fff}
.btn-light{background:#edf2f7;color:#263238}
.btn-green{background:var(--green);color:#fff}

.form-control,select,textarea{width:100%;padding:10px 12px;border:1px solid #cddbe5;border-radius:10px;background:#fff;font:inherit}
label{display:block;margin:0 0 6px;font-size:13px;font-weight:600}

/* ===== PASIEN ===== */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-header-inner{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.brand-lockup{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:240px}
.brand-lockup img{width:42px;height:42px}
.brand-lockup strong{display:block;color:var(--green);font-size:15px;letter-spacing:.2px}
.brand-lockup small{display:block;color:var(--muted);font-size:11px}
.site-nav{display:flex;gap:8px;flex:1}
.site-nav a{text-decoration:none;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#3d5a73}
.site-nav a.active,.site-nav a:hover{background:var(--green);color:#fff}
.header-clock{margin-left:auto;text-align:right;color:var(--muted);font-size:13px;font-weight:600}

.page{max-width:1180px;margin:0 auto;padding:22px 20px 40px}

.hero-banner{display:grid;grid-template-columns:1.15fr .85fr;background:linear-gradient(115deg,#0aa0c4 0%,#1486d6 55%,#1b6ec2 100%);border-radius:22px;overflow:hidden;color:#fff;min-height:230px;box-shadow:0 12px 30px rgba(20,90,140,.18)}
.hero-copy{padding:36px 34px}
.hero-copy h1{margin:0 0 10px;font-size:34px;line-height:1.15;font-weight:800}
.hero-copy p{margin:0;max-width:420px;opacity:.95;font-size:15px}
.hero-photo{position:relative;min-height:230px}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-caption{position:absolute;left:18px;bottom:16px;background:rgba(8,50,90,.72);padding:7px 12px;border-radius:8px;font-weight:800;font-size:13px;letter-spacing:.3px}

.tabs{display:flex;gap:8px;margin:18px 0 16px}
.tabs a{background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;text-decoration:none;font-size:13px;font-weight:700;color:#4a657a}
.tabs a.active{background:#1d6fe8;color:#fff;border-color:#1d6fe8}

.prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prof-card{background:#fff;border-radius:18px;padding:16px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(23,50,77,.05)}
.prof-card.dokter{background:#f3f9ff;border-color:#d6e9fb}
.prof-card.perawat{background:#f1fbf5;border-color:#d4f0e0}
.prof-card.bidan{background:#fdf3f8;border-color:#f5d5e6}
.prof-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.prof-ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px}
.dokter .prof-ico{background:var(--dokter)}
.perawat .prof-ico{background:var(--perawat)}
.bidan .prof-ico{background:var(--bidan)}
.prof-head h2{margin:0;font-size:16px;letter-spacing:.4px}
.prof-head span{font-size:12px;color:var(--muted)}

.staff-row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:10px;border:1px solid rgba(0,0,0,.04)}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 2px #cfe8f5;background:#eef6fb}
.dokter .avatar{box-shadow:0 0 0 2px #b9d8f6}
.perawat .avatar{box-shadow:0 0 0 2px #b7e4c9}
.bidan .avatar{box-shadow:0 0 0 2px #f3c0d8}
.staff-meta{flex:1;min-width:0}
.staff-meta h3{margin:0 0 2px;font-size:15px}
.staff-meta p{margin:0;font-size:12px;color:var(--muted)}

.info-note{margin-top:16px;background:#e8f4ff;border:1px solid #cfe4f8;color:#1d4e78;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font-size:13px}
.page-footer{text-align:center;color:#7b93a6;font-size:12px;margin-top:22px}

.unit-grid,.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.panel{background:#fff;border-radius:18px;padding:20px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(23,50,77,.05)}
.panel h1,.panel h2{margin-top:0}
.about-photo{border-radius:18px;overflow:hidden;min-height:260px}
.about-photo img{width:100%;height:100%;object-fit:cover}

/* ===== ADMIN ===== */
.nav{background:linear-gradient(180deg,#0b3d5c,#082a41);min-height:100vh;width:236px;position:fixed;color:#fff;padding:18px 14px;display:flex;flex-direction:column}
.nav .brand-lockup{color:#fff;min-width:0}
.nav .brand-lockup strong{color:#fff;font-size:13px}
.nav .brand-lockup small{color:#9ec3db}
.nav a{display:flex;align-items:center;gap:8px;color:#d5e6ef;text-decoration:none;padding:10px 11px;border-radius:10px;margin:3px 0;font-size:13px;font-weight:600}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);color:#fff}
.nav .spacer{flex:1}
.admin-main{margin-left:236px;padding:24px}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.admin-top h1{margin:0;font-size:24px}
.card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 6px 24px rgba(20,50,70,.08);margin-bottom:16px;border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{display:flex;gap:12px;align-items:center}
.stat b{font-size:28px}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #e8eef2;text-align:left;font-size:13px;vertical-align:middle}
.table th{background:#f6fafc;font-size:12px;color:#5b7386}
.thumb{width:38px;height:38px;border-radius:50%;object-fit:cover}

.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#0aa0c4,#1b6ec2 50%,#0b3d5c)}
.login-card{width:min(420px,92vw);background:#fff;border-radius:18px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.login-card img{width:48px;height:48px;margin-bottom:8px}

/* ===== DISPLAY TV ===== */
.display{
  background:#0b5a72;
  color:#fff;
  min-height:100vh;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.display-top,.display .top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 28px;
  background:linear-gradient(90deg,#0c6b7a,#0a5670);
  z-index:8;
}
.display .brand-lockup{min-width:0}
.display .brand-lockup strong{color:#fff;font-size:14px}
.display .brand-lockup small{color:#c5e8ef;font-size:11px}
.display .brand-lockup img{width:40px;height:40px;object-fit:contain;border-radius:8px}
.clock-box{text-align:right;font-weight:700;font-size:14px;color:#e7f7fb;white-space:nowrap}

.display .slide{display:none;animation:fade .55s ease;padding:0 0 10px;flex:1}
.display .slide.active{display:flex;flex-direction:column}
@keyframes fade{from{opacity:.2}to{opacity:1}}

/* Welcome: 1 layer overlay, NOT 2-column grid */
.tv-hero{
  position:relative;
  flex:1;
  min-height:calc(100vh - 78px);
  overflow:hidden;
  background:linear-gradient(105deg,#6ec8e6 0%,#5bb8dc 22%,#8fd3c4 62%,#c5e8b8 100%);
}
.tv-hero-photo{
  position:absolute;
  inset:0 0 0 32%;
  z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 10%,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 10%,#000 28%,#000 100%);
}
.tv-hero-photo img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 45%;
}
.tv-hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#6ec8e6 0%,rgba(91,184,220,.55) 12%,rgba(143,211,196,.12) 38%,transparent 58%);
  pointer-events:none;
}
.tv-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:32%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(180,225,175,.5),transparent);
}
.tv-hero-copy{
  position:relative;
  z-index:3;
  width:min(58%, 760px);
  min-height:calc(100vh - 78px);
  padding:64px 56px 80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:none;
}
.tv-hero-copy .brand-lockup img{
  width:70px;
  height:70px;
  background:#fff;
  border-radius:12px;
  padding:4px;
}
.tv-hero-copy .brand-lockup strong{font-size:26px;letter-spacing:.12px}
.tv-hero-copy .brand-lockup small{color:#eef9ff;font-size:13px;font-weight:500}
.tv-hero-copy h1{
  font-family:"Great Vibes", "Playfair Display", cursive;
  font-style:normal;
  font-weight:400;
  font-size:clamp(70px, 7.2vw, 110px);
  margin:28px 0 8px;
  line-height:.95;
  color:#fff;
  text-shadow:0 6px 18px rgba(20,70,90,.18);
}
.tv-hero-sub{
  margin:0;
  font-size:clamp(18px, 2vw, 26px);
  font-weight:600;
  color:#fff;
}
.tv-date-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin-top:28px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);
  font-size:15px;
  font-weight:600;
}
.tv-hero-deco{
  position:absolute;
  left:-40px;
  bottom:-30px;
  width:280px;
  height:220px;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.16) 0 18px, transparent 19px),
    radial-gradient(ellipse at 20% 80%, rgba(90,180,120,.45) 0 70px, transparent 71px),
    radial-gradient(ellipse at 55% 70%, rgba(70,160,110,.38) 0 90px, transparent 91px);
}
.tv-hero-deco::after{
  content:"+";
  position:absolute;
  left:86px;
  bottom:54px;
  font-size:64px;
  font-weight:300;
  color:rgba(255,255,255,.28);
}

.tv-photo{position:relative;overflow:hidden}
.tv-photo img{width:100%;height:100%;object-fit:cover}


/* =========================================================
 SLIDE DOKTER / PERAWAT / BIDAN
 ========================================================= */

.tv-section {
  min-height: calc(100vh - 90px);
  padding: 18px 28px 40px;
}

.tv-section h1 {
  margin: 0 0 18px;

  font-size: 34px;

  display: flex;
  align-items: center;
  gap: 10px;
}


/* KARTU PETUGAS */

.display-grid {
  display: grid;

  grid-template-columns:
      repeat(2, 1fr);

  gap: 18px;
}

.tv-card {
  position: relative;

  background: rgba(255,255,255,.97);

  color: var(--text);

  border-radius: 18px;

  padding: 18px;

  display: flex;

  gap: 16px;

  align-items: center;

  box-shadow:
      0 12px 30px rgba(0,0,0,.12);

  border:
      1px solid rgba(255,255,255,.5);
}

.tv-card img {
  width: 92px;
  height: 92px;

  border-radius: 50%;

  object-fit: cover;

  border: 4px solid #e8f4ff;

  flex-shrink: 0;
}

.tv-card h2 {
  margin: 0 0 4px;

  font-size: 24px;
}

.tv-card p {
  margin: 0;

  color: var(--muted);
}


/* =========================================================
 JADWAL BESOK
 ========================================================= */

.display .slide:has(.tv-tomorrow),
.display .slide:has(.info-slide){
  padding:12px 28px 40px;
}
.tv-tomorrow {
  display: grid;

  grid-template-columns: 220px 1fr;

  gap: 18px;

  background:
      linear-gradient(
          135deg,
          #0e2a44,
          #123e60
      );

  border-radius: 22px;

  padding: 24px;

  min-height: 70vh;

  box-shadow:
      0 15px 40px rgba(0,0,0,.15);
}

.tv-tomorrow h1 {
  margin-top: 0;
}

.chips {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.chip {
  background: rgba(255,255,255,.97);

  color: var(--text);

  border-radius: 14px;

  padding: 10px 12px;

  min-width: 160px;

  box-shadow:
      0 5px 15px rgba(0,0,0,.08);
}


/* =========================================================
 SLIDE INFORMASI
 ========================================================= */

.info-slide {
  display: grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 18px;

  min-height: 72vh;
}

.info-slide .tv-photo {
  min-height: 72vh;
}

.quote {
  background:
      linear-gradient(
          135deg,
          #12385a,
          #0b496d
      );

  border-radius: 18px;

  padding: 28px;

  font-size: 22px;

  line-height: 1.5;

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-shadow:
      0 15px 35px rgba(0,0,0,.12);
}


/* =========================================================
 INDIKATOR SLIDE
 ========================================================= */

.display .dots {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 12;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.display .dots span {
  width: 22px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  transition: all .3s ease;
}
.display .dots span.on {
  background: #fff;
  width: 36px;
}


/* =========================================================
 RESPONSIVE
 ========================================================= */

@media(max-width:900px){
  .site-header-inner,.hero-banner,.prof-grid,.unit-grid,.about-grid,.grid,.row,.tv-tomorrow,.info-slide,.display-grid{grid-template-columns:1fr}
  .site-nav{display:flex;flex-wrap:wrap;width:100%}
  .nav{position:static;width:auto;min-height:auto}
  .admin-main{margin-left:0}
  .hero-copy h1{font-size:26px}
  .page{padding:14px}
  .tv-hero-copy{width:70%;padding:36px 24px;min-height:calc(100vh - 78px)}
  .tv-hero-copy h1{font-size:56px}
  .tv-hero-photo{inset:0 0 0 18%}
  .info-slide .tv-photo{min-height:280px}
}

@media(max-width:600px){
  .display-top,.display .top{padding:10px 12px}
  .clock-box{font-size:11px}
  .tv-hero-copy{width:100%;padding:28px 18px}
  .tv-hero-copy h1{font-size:44px}
  .tv-card{padding:14px}
  .tv-card img{width:70px;height:70px}
  .tv-card h2{font-size:19px}
  .tv-section h1{font-size:25px}
}