@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Manrope:wght@500;700;800&display=swap');:root{--ink:#172b36;--muted:#647783;--blue:#176b73;--line:#dce7e5;--paper:#f8faf9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'DM Sans',sans-serif}a{color:inherit}header.hero{background:radial-gradient(ellipse at 85% 10%,#316f75,transparent 40%),linear-gradient(125deg,#102d3b,#1c4e58 70%,#2c6669);color:white;padding:0 6vw 64px}nav{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 0;border-bottom:1px solid #ffffff2e}nav a{text-decoration:none;color:#d4e8e5}.brand{font:800 1.1rem Manrope,sans-serif;color:white}.brand span{font-size:.72em;color:#b9d9d5}.hero-content{max-width:1200px;margin:60px auto 0}.eyebrow{font-size:.72rem;letter-spacing:.18em;font-weight:700;color:#4e9292;margin:0 0 12px}.hero .eyebrow{color:#a8d8cf}h1{font:800 clamp(2.5rem,6vw,5rem)/1.08 Manrope,sans-serif;letter-spacing:-.05em;margin:0}h1 span{color:#a8d8cf}.intro{max-width:700px;color:#d0e0e2;font-size:1.1rem;margin:22px 0 28px}.search{display:flex;max-width:690px;background:white;border-radius:12px;padding:6px;gap:6px}.search input{flex:1;min-width:0;border:0;padding:13px;font:inherit}.search button,.btn{background:#d0ece4;border:0;border-radius:8px;padding:12px 18px;color:#17484d;font-weight:700;cursor:pointer}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.chips button{background:#ffffff13;border:1px solid #ffffff40;color:white;border-radius:100px;padding:7px 13px;cursor:pointer}main{max-width:1200px;margin:auto;padding:0 28px}.section{padding:65px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}h2{font:800 clamp(1.7rem,3vw,2.5rem)/1.2 Manrope,sans-serif;letter-spacing:-.035em;margin:0 0 12px}.muted{color:var(--muted);max-width:520px;font-size:.94rem}.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.video-card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 30px #193a3c08}.embed,.search-visual{position:relative;aspect-ratio:16/9;background:#173b48}.embed iframe{position:absolute;width:100%;height:100%;border:0;inset:0}.card-body{padding:22px}.tag{font-size:.68rem;font-weight:700;letter-spacing:.07em;color:var(--blue);background:#eaf4f2;padding:5px 8px;border-radius:4px}.card-body h3{font:700 1.15rem/1.35 Manrope,sans-serif;margin:12px 0 8px}.card-body p{font-size:.92rem;color:var(--muted);margin:0 0 16px}.card-body a,.source span{font-weight:700;color:var(--blue);font-size:.9rem;text-decoration:none}.search-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#193d4a,#528b89);color:#e7f5f1}.search-visual b{border:1px solid #ffffff65;border-radius:50%;padding:12px 19px;background:#ffffff25;font-size:1.4rem}.search-visual span{font-size:.72rem;letter-spacing:.15em}.tone2{background:linear-gradient(135deg,#384d61,#8b9f99)}.tone3{background:linear-gradient(135deg,#244c52,#7b9d88)}.search-panel{background:#eaf3f1;border:1px solid #d9e9e5;border-radius:20px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:.85fr 1.15fr;gap:44px}.search-links{display:grid;gap:8px}.search-links>a{display:flex;align-items:center;gap:16px;background:#ffffffb8;border:1px solid #d7e5e2;padding:15px 17px;border-radius:10px;text-decoration:none}.search-links>a>span{color:#5e9290;font-weight:800}.search-links>a div{flex:1}.search-links b,.search-links small{display:block}.search-links small{color:var(--muted)}.source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:24px}.source{display:flex;flex-direction:column;gap:10px;background:white;border:1px solid var(--line);padding:21px;border-radius:12px;text-decoration:none;min-height:160px}.source small{color:var(--blue);font-weight:700}.source b{font:700 1rem/1.4 Manrope,sans-serif;flex:1}.notice{margin:0 0 60px;padding:20px 24px;border-left:4px solid #6ba8a1;background:#edf4f3;border-radius:0 10px 10px 0}.notice p{margin:5px 0 0;color:#536c74;font-size:.9rem}.ad-slot{margin:34px 0;padding:18px;border:1px solid #e2e9e8;border-radius:10px;background:white;text-align:center;min-height:90px}.ad-slot[hidden]{display:none!important}.ad-label{font-size:.65rem;color:#8a999d;letter-spacing:.15em;margin-bottom:8px}footer{background:#102d3b;color:#d5e6e3;padding:28px 6vw;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}footer p{font-size:.82rem;color:#a9c2c2}footer a{font-size:.86rem;color:#a8d8cf;text-decoration:none}@media(max-width:760px){header.hero{padding:0 22px 42px}.hero-content{margin-top:42px}.intro{font-size:1rem}.search{flex-direction:column}.section{padding:45px 20}.section-heading{display:block}.video-grid,.source-grid{grid-template-columns:1fr}.search-panel{grid-template-columns:1fr;gap:24px;padding:24px}main{padding:0 20px}footer{padding:24px 22px;display:block}}
/* ===== Fix video gallery alignment ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.videos-section {
  width: calc(100% - 48px);
  max-width: 1120px;
  margin: 40px auto;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin: 24px auto;
  align-items: start;
}

.video-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.video-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-details {
  padding: 14px 16px;
}

.video-details h3 {
  margin: 0 0 8px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.video-channel {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Tablets */
@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Mobile phones */
@media (max-width: 600px) {
  .videos-section {
    width: calc(100% - 28px);
  }

  .video-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* Sejajarkan bagian referensi berita dengan galeri video */
#sumber {
  width: calc(100% - 48px);
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding: 65px 0;
}

/* Tampilan tablet dan ponsel */
@media (max-width: 760px) {
  #sumber {
    width: 100%;
    padding: 45px 0;
  }
}
