:root{
  --green-deep:#073826;
  --green:#0c5a3e;
  --green-light:#147058;
  --gold:#d5a72e;
  --gold-light:#f0cf72;
  --ink:#12241d;
  --paper:#f7f4ea;
  --white:#fff;
  --muted:#6b7a72;
  --mark:#ffe08a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Segoe UI',Inter,Arial,sans-serif}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:44px 20px 40px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 15% 20%, #ffffff14 0, transparent 40%),
    radial-gradient(circle at 85% 80%, #ffffff10 0, transparent 45%),
    linear-gradient(160deg, var(--green-deep), var(--green) 55%, var(--green-light));
  border-bottom:4px solid var(--gold);
}
.pattern-overlay{
  position:absolute; inset:0;
  opacity:.10;
  background-image:
    linear-gradient(45deg, var(--gold) 1px, transparent 1px),
    linear-gradient(-45deg, var(--gold) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
}
.hero-inner{position:relative;max-width:900px;margin:0 auto}
.logo{height:96px;width:auto;max-width:240px;object-fit:contain;filter:drop-shadow(0 6px 16px #00000055);margin-bottom:10px}
.brand{font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--gold-light)}
.brand span{color:#fff}
.tagline{font-size:12px;letter-spacing:.12em;color:#d8ece3;margin-top:4px;opacity:.85}
.hero h1{margin:16px 0 8px;font-size:clamp(26px,4.6vw,44px);text-shadow:0 2px 8px #00000030}
.hero p{margin:0 auto 26px;max-width:740px;color:#e2f1ea;font-size:16px;line-height:1.55}

.searchbar{display:grid;grid-template-columns:1fr 250px 110px;gap:10px;max-width:960px;margin:auto}
.searchbar input,.searchbar select,.searchbar button{border:0;border-radius:12px;padding:15px;font-size:16px}
.searchbar input{box-shadow:inset 0 0 0 2px #ffffff20}
.searchbar button{background:linear-gradient(135deg,var(--gold-light),var(--gold));font-weight:800;color:#3a2c05;cursor:pointer}
.searchbar button:hover{filter:brightness(1.05)}

.chips{margin-top:16px}
.chips button{margin:4px;padding:8px 14px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff15;color:#fff;cursor:pointer;font-size:13px}
.chips button:hover{background:#ffffff28}

.yt-link{display:inline-block;margin-top:22px;padding:10px 18px;border-radius:999px;background:#ff0033;color:#fff;text-decoration:none;font-weight:700;font-size:13px;box-shadow:0 4px 14px #ff003355}
.yt-link:hover{background:#e6002d}

/* ---------- MAIN / RESULTS ---------- */
main{max-width:1080px;margin:0 auto;padding:30px 20px 50px}
.status{color:var(--muted);margin-bottom:18px;font-weight:600}
.results{display:grid;gap:20px}

.card{background:var(--white);border-radius:16px;padding:24px;box-shadow:0 8px 26px #12241d14;border-left:5px solid var(--gold)}
.card-transkrip{border-left-color:var(--green)}
.topline{display:flex;justify-content:space-between;align-items:center}
.type{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--green);letter-spacing:.08em}
.waktu{font-size:13px;font-weight:700;color:var(--green-deep);background:#eaf5ee;padding:4px 10px;border-radius:999px}
.title{margin:9px 0 8px;font-size:21px;line-height:1.32;color:var(--green-deep)}
.meta{color:var(--muted);font-size:14px;margin-bottom:6px}
.summary{line-height:1.65;color:#33443c}

.konteks{margin:14px 0;padding:16px 18px;background:#fbf9f2;border:1px dashed #cbb98a;border-radius:12px}
.baris{margin:4px 0;line-height:1.6;color:#52605a;font-size:15px}
.ctx-match{background:var(--mark);color:var(--ink);font-weight:700;padding:6px 10px;border-radius:8px;display:inline-block;margin:6px 0;border-left:4px solid var(--green)}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.watch{display:inline-block;padding:10px 16px;border-radius:9px;background:linear-gradient(135deg,var(--green-light),var(--green));color:#fff;text-decoration:none;font-weight:700}
.copy{padding:10px 16px;border-radius:9px;background:#f1ede0;color:var(--green-deep);border:1px solid #d8cda3;font-weight:700;cursor:pointer}
.copy:hover{background:#e8e1cd}
mark{background:var(--gold-light);padding:0 3px;border-radius:3px}

/* ---------- FOOTER ---------- */
.footer{display:flex;align-items:center;gap:14px;justify-content:center;padding:26px 20px 46px;color:var(--muted);font-size:13px;text-align:left}
.footer img{width:38px;height:38px;border-radius:50%}
.footer a{color:var(--green);font-weight:700;text-decoration:none}
.footer a:hover{text-decoration:underline}

@media(max-width:760px){
  .searchbar{grid-template-columns:1fr}
  .hero{padding-top:32px}
  .card{padding:19px}
  .footer{flex-direction:column;text-align:center}
}