/* ProstaClear Indonesia | v1.0.0 | prostaclear.id | Prostate Health Blog */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --indigo:  #1E1B4B;
  --indigo2: #312E81;
  --indigo3: #4338CA;
  --cyan:    #06B6D4;
  --cyan2:   #0891B2;
  --cyan3:   #E0F7FA;
  --cream:   #FFFFFF;
  --bg:      #F8FAFF;
  --card:    #FFFFFF;
  --text:    #111827;
  --muted:   #6B7280;
  --lt:      #EEF2FF;
  --brd:     #C7D2FE;
  --r:12px;
  --sh:0 2px 16px rgba(30,27,75,0.08);
  --sh-lg:0 16px 56px rgba(30,27,75,0.14);
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Source Sans 3',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}

/* ── Top bar ── */
.topbar{background:var(--indigo);padding:8px 40px;display:flex;justify-content:space-between;align-items:center}
.topbar-disc{font-size:0.69rem;color:rgba(255,255,255,0.55)}
.topbar-disc strong{color:#A5B4FC}
.topbar-rt{font-size:0.69rem;color:rgba(255,255,255,0.45)}

/* ── Header ── */
.hdr{background:var(--cream);border-bottom:1px solid #E5E7EB}
.hdr-in{max-width:1360px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{text-decoration:none;display:flex;align-items:center;gap:13px}
.logo-pill{background:linear-gradient(135deg,var(--indigo),var(--indigo2));color:#fff;font-family:'Libre Baskerville',serif;font-size:1.05rem;font-weight:700;padding:8px 18px;border-radius:8px;letter-spacing:-0.01em}
.logo-pill span{color:var(--cyan)}
.logo-meta{display:flex;flex-direction:column}
.logo-nm{font-family:'Libre Baskerville',serif;font-size:1.35rem;color:var(--indigo);letter-spacing:-0.02em;font-weight:700}
.logo-nm span{color:var(--cyan2)}
.logo-sg{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);margin-top:1px}
.hdr-nav{display:flex;align-items:center;gap:2px}
.hn{color:var(--muted);text-decoration:none;font-size:0.875rem;font-weight:600;padding:7px 14px;border-radius:7px;transition:all 0.2s}
.hn:hover{color:var(--indigo);background:var(--lt)}
.hn.on{color:var(--indigo);font-weight:700}
.btn-hdr{background:var(--indigo);color:#fff;padding:9px 22px;border-radius:8px;font-size:0.83rem;font-weight:700;text-decoration:none;margin-left:12px;transition:all 0.2s}
.btn-hdr:hover{background:var(--indigo2);transform:translateY(-1px)}

/* ── CATEGORY NAV ── */
.cat-bar{background:var(--indigo2);border-bottom:1px solid rgba(255,255,255,0.1)}
.cat-bar-in{max-width:1360px;margin:auto;padding:0 40px;display:flex;gap:0;overflow-x:auto}
.cb-lnk{color:rgba(255,255,255,0.6);text-decoration:none;font-size:0.8rem;font-weight:600;padding:11px 18px;transition:all 0.2s;white-space:nowrap;border-bottom:2px solid transparent}
.cb-lnk:hover{color:#fff;border-bottom-color:rgba(255,255,255,0.4)}
.cb-lnk.act{color:#fff;border-bottom-color:var(--cyan)}

/* ── HERO: News-paper split ── */
.hero{background:var(--indigo);padding:0;overflow:hidden}
.hero-in{max-width:1360px;margin:auto;padding:48px 40px;display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.hero-main{}
.hero-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
.htag{background:var(--cyan);color:var(--indigo);font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:4px 12px;border-radius:4px}
.hnew{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:4px 10px;border-radius:4px}
.hero-h{font-family:'Libre Baskerville',serif;font-size:clamp(2rem,3.5vw,3.2rem);color:#fff;line-height:1.15;margin-bottom:16px;letter-spacing:-0.025em}
.hero-h em{color:var(--cyan);font-style:normal}
.hero-p{color:rgba(255,255,255,0.65);font-size:1rem;line-height:1.8;margin-bottom:28px;max-width:560px}
.hero-img-main{width:100%;height:280px;object-fit:cover;border-radius:10px;margin-bottom:20px;display:block;box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-cyan{background:var(--cyan);color:var(--indigo);padding:13px 28px;border-radius:8px;font-size:0.9rem;font-weight:700;text-decoration:none;transition:all 0.2s}
.btn-cyan:hover{background:var(--cyan2);color:#fff;transform:translateY(-1px)}
.btn-out{border:1.5px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.85);padding:13px 28px;border-radius:8px;font-size:0.9rem;font-weight:600;text-decoration:none;transition:all 0.2s}
.btn-out:hover{border-color:rgba(255,255,255,0.6);color:#fff}
/* Hero sidebar */
.hero-side{}
.hs-hd{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.13em;color:rgba(255,255,255,0.4);border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:10px;margin-bottom:16px}
.hs-item{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.07);text-decoration:none;transition:all 0.2s}
.hs-item:last-child{border:none}
.hs-item:hover .hs-title{color:var(--cyan)}
.hs-img{width:90px;height:64px;object-fit:cover;border-radius:6px}
.hs-meta{display:flex;flex-direction:column;justify-content:center;gap:5px}
.hs-cat{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--cyan)}
.hs-title{font-family:'Libre Baskerville',serif;font-size:0.9rem;color:rgba(255,255,255,0.85);line-height:1.35}

/* ── CONTENT LAYOUT ── */
.w{max-width:1360px;margin:0 auto;padding:0 40px}
.sp{padding:72px 0}
.two-col{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.main-col{}
.side-col{}
.sec-kk{font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--cyan2);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sec-kk::before{content:'';width:20px;height:2px;background:var(--cyan2)}
.sec-h{font-family:'Libre Baskerville',serif;font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--indigo);letter-spacing:-0.02em;line-height:1.2;margin-bottom:28px}
.sec-h-sm{font-family:'Libre Baskerville',serif;font-size:1rem;color:var(--indigo);line-height:1.3;margin-bottom:6px}

/* ── NEWS-STYLE ARTICLE CARDS ── */
.news-list{display:flex;flex-direction:column;gap:0}
.news-item{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid #E5E7EB;text-decoration:none;transition:all 0.2s}
.news-item:last-child{border:none}
.news-item:hover .ni-h{color:var(--cyan2)}
.ni-img-w{overflow:hidden;border-radius:8px}
.ni-img{width:140px;height:96px;object-fit:cover;display:block;transition:transform 0.3s}
.news-item:hover .ni-img{transform:scale(1.05)}
.ni-body{display:flex;flex-direction:column;justify-content:center}
.ni-cat{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--cyan2);margin-bottom:6px}
.ni-h{font-family:'Libre Baskerville',serif;font-size:1rem;color:var(--text);line-height:1.35;margin-bottom:6px;transition:color 0.2s}
.ni-ex{color:var(--muted);font-size:0.84rem;line-height:1.6}
.ni-dt{font-size:0.73rem;color:#9CA3AF;margin-top:8px}

/* ── SIDEBAR WIDGETS ── */
.widget{background:var(--card);border-radius:var(--r);border:1px solid #E5E7EB;margin-bottom:24px;overflow:hidden;box-shadow:var(--sh)}
.w-hd{background:var(--indigo);color:#fff;font-family:'Libre Baskerville',serif;font-size:0.92rem;padding:14px 18px;font-weight:700}
.w-body{padding:18px}
.w-li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #F3F4F6;text-decoration:none;transition:all 0.2s}
.w-li:last-child{border:none}
.w-li:hover .w-lt{color:var(--cyan2)}
.w-thumb{width:56px;height:42px;object-fit:cover;border-radius:5px;flex-shrink:0}
.w-lt{font-family:'Libre Baskerville',serif;font-size:0.82rem;color:var(--text);line-height:1.35;transition:color 0.2s}
.w-lc{font-size:0.62rem;color:var(--cyan2);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px}
/* Tip widget */
.tip-w-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #F3F4F6}
.tip-w-item:last-child{border:none}
.tip-ico{color:var(--cyan2);font-size:0.9rem;flex-shrink:0;margin-top:2px}
.tip-tx{font-size:0.84rem;color:var(--text);line-height:1.5}
/* Disc widget */
.disc-widget{background:var(--lt);border:1px solid var(--brd);border-left:4px solid var(--indigo2);border-radius:var(--r);padding:16px 18px;margin-bottom:24px}
.dw-l{font-size:0.63rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--indigo2);margin-bottom:8px}
.dw-t{font-size:0.82rem;color:var(--indigo);line-height:1.6}

/* ── CYAN BAND SECTION ── */
.cyan-band{background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo2) 100%);padding:72px 0;position:relative;overflow:hidden}
.cyan-band::before{content:'';position:absolute;right:-80px;top:-80px;width:400px;height:400px;border-radius:50%;background:rgba(6,182,212,0.08)}
.cb-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
.cb-img{width:100%;height:380px;object-fit:cover;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.cb-content{}
.cb-kk{font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--cyan);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cb-kk::before{content:'';width:18px;height:2px;background:var(--cyan)}
.cb-h{font-family:'Libre Baskerville',serif;font-size:1.9rem;color:#fff;margin-bottom:16px;line-height:1.2;letter-spacing:-0.02em}
.cb-txt{color:rgba(255,255,255,0.7);font-size:0.95rem;line-height:1.8;margin-bottom:14px}
.cb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.cb-box{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:16px}
.cb-box-n{font-family:'Libre Baskerville',serif;font-size:1.6rem;color:var(--cyan);line-height:1}
.cb-box-l{font-size:0.78rem;color:rgba(255,255,255,0.6);margin-top:4px;line-height:1.4}
.disc-cyan{background:rgba(6,182,212,0.08);border:1px solid rgba(6,182,212,0.2);border-left:3px solid var(--cyan);border-radius:8px;padding:14px 16px;font-size:0.74rem;color:#67E8F9;line-height:1.65}

/* ── 3-COL FEATURE CARDS ── */
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fc{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid #E5E7EB;box-shadow:var(--sh);text-decoration:none;display:flex;flex-direction:column;transition:transform 0.3s cubic-bezier(.34,1.56,.64,1),box-shadow 0.3s}
.fc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.fc-img-w{overflow:hidden}
.fc-img{width:100%;height:190px;object-fit:cover;display:block;transition:transform 0.35s}
.fc:hover .fc-img{transform:scale(1.06)}
.fc-body{padding:22px;flex:1;display:flex;flex-direction:column}
.fc-cat{font-size:0.63rem;font-weight:700;text-transform:uppercase;letter-spacing:0.11em;color:var(--cyan2);margin-bottom:9px}
.fc-h{font-family:'Libre Baskerville',serif;font-size:1.05rem;color:var(--text);line-height:1.35;margin-bottom:8px}
.fc-ex{color:var(--muted);font-size:0.86rem;line-height:1.65;flex:1}
.fc-rd{font-size:0.78rem;font-weight:700;color:var(--cyan2);margin-top:14px}
.fc:hover .fc-rd{color:var(--indigo2)}

/* ── NEWSLETTER ── */
.nl{background:var(--indigo);padding:60px 40px}
.nl-in{max-width:520px;margin:auto;text-align:center}
.nl-h{font-family:'Libre Baskerville',serif;font-size:2rem;color:#fff;margin-bottom:8px}
.nl-s{color:rgba(255,255,255,0.55);margin-bottom:26px}
.nl-f{display:flex;gap:10px}
.nl-i{flex:1;padding:13px 18px;border-radius:8px;border:2px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.08);color:#fff;font-size:0.9rem;outline:none;font-family:inherit;transition:border-color 0.2s}
.nl-i::placeholder{color:rgba(255,255,255,0.35)}
.nl-i:focus{border-color:var(--cyan)}
.nl-b{background:var(--cyan);color:var(--indigo);padding:13px 22px;border-radius:8px;border:none;font-size:0.9rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.2s}
.nl-b:hover{background:var(--cyan2);color:#fff}

/* ── FOOTER ── */
.ftr{background:#0A0920;color:#374151;padding:56px 0 30px}
.ftr-in{max-width:1360px;margin:auto;padding:0 40px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.04)}
.f-logo{font-family:'Libre Baskerville',serif;font-size:1.4rem;color:#fff;margin-bottom:12px}
.f-logo span{color:var(--cyan)}
.f-desc{font-size:0.87rem;line-height:1.75;max-width:300px;margin-bottom:16px}
.f-disc{background:rgba(6,182,212,0.07);border:1px solid rgba(6,182,212,0.15);border-radius:8px;padding:11px 13px;font-size:0.69rem;color:#22D3EE;line-height:1.65}
.fh{color:#6B7280;font-size:0.73rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:14px}
.fl{list-style:none}
.fl li{margin-bottom:10px}
.fl a{color:#1F2937;text-decoration:none;font-size:0.875rem;transition:color 0.2s}
.fl a:hover{color:#67E8F9}
.f-bot{display:flex;justify-content:space-between;align-items:center;font-size:0.77rem;flex-wrap:wrap;gap:10px}
.f-leg{display:flex;gap:18px}
.f-leg a{color:#1F2937;text-decoration:none;transition:color 0.2s}
.f-leg a:hover{color:#67E8F9}

/* ── ARTICLE ── */
.art-pg{max-width:820px;margin:0 auto;padding:60px 40px}
.back-b{display:inline-flex;align-items:center;gap:6px;background:var(--lt);color:var(--indigo2);font-size:0.82rem;font-weight:700;text-decoration:none;padding:8px 18px;border-radius:6px;margin-bottom:30px;border:1px solid var(--brd);transition:all 0.2s}
.back-b:hover{background:var(--brd)}
.a-m{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.a-c{background:var(--cyan3);color:var(--cyan2);font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:4px 12px;border-radius:4px}
.a-d{font-size:0.79rem;color:var(--muted)}
.art-t{font-family:'Libre Baskerville',serif;font-size:clamp(2rem,3.5vw,2.9rem);color:var(--indigo);line-height:1.18;margin-bottom:20px;letter-spacing:-0.02em}
.art-l{font-size:1.15rem;color:var(--muted);line-height:1.8;border-left:4px solid var(--cyan);padding-left:20px;margin-bottom:32px;font-style:italic}
.a-img{width:100%;height:440px;object-fit:cover;border-radius:12px;margin-bottom:40px;box-shadow:var(--sh-lg);display:block}
.ac p{font-size:1rem;line-height:1.9;margin-bottom:20px;color:#374151}
.ac h2{font-family:'Libre Baskerville',serif;font-size:1.55rem;color:var(--indigo);margin:40px 0 14px}
.ac h3{font-family:'Libre Baskerville',serif;font-size:1.2rem;color:var(--indigo);margin:28px 0 10px}
.ac ul,.ac ol{padding-left:22px;margin-bottom:20px}
.ac li{margin-bottom:10px;line-height:1.75;color:#374151}
/* Bordered call-out boxes */
.ib{background:var(--lt);border:1px solid var(--brd);border-left:4px solid var(--indigo2);border-radius:10px;padding:20px 22px;margin:28px 0}
.ib-l{font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--indigo2);margin-bottom:8px}
.ib p{font-size:0.92rem;margin-bottom:0!important;line-height:1.7;color:var(--indigo)}
.wb{background:#FFFBEB;border:1px solid #FDE68A;border-left:4px solid #F59E0B;border-radius:10px;padding:20px 22px;margin:28px 0}
.wb-l{font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#B45309;margin-bottom:8px}
.wb p{font-size:0.92rem;margin-bottom:0!important;line-height:1.7;color:#78350F}
/* Inline data highlight */
.data-hl{background:var(--indigo);border-radius:12px;padding:22px 24px;margin:28px 0;display:flex;align-items:center;gap:20px}
.dh-n{font-family:'Libre Baskerville',serif;font-size:2.8rem;color:var(--cyan);line-height:1;flex-shrink:0}
.dh-t{color:rgba(255,255,255,0.8);font-size:0.9rem;line-height:1.6}

/* ── Page Hero ── */
.ph{background:var(--indigo);padding:52px 40px;border-bottom:3px solid var(--cyan)}
.ph-in{max-width:1360px;margin:auto}
.ph-kk{font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--cyan);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ph-kk::before{content:'';width:18px;height:2px;background:var(--cyan)}
.ph-h{font-family:'Libre Baskerville',serif;font-size:clamp(1.8rem,3.2vw,2.9rem);color:#fff;max-width:760px;line-height:1.2;letter-spacing:-0.02em}

/* ── Contact ── */
.ct{max-width:1100px;margin:0 auto;padding:72px 40px;display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start}
.cf-card{background:var(--card);border:1px solid #E5E7EB;border-radius:16px;padding:44px;box-shadow:var(--sh-lg)}
.cf-h{font-family:'Libre Baskerville',serif;font-size:1.7rem;color:var(--indigo);margin-bottom:26px}
.fgg{margin-bottom:18px}
.fl-lbl{font-size:0.84rem;font-weight:600;color:var(--text);margin-bottom:7px;display:block}
.fld{width:100%;padding:12px 16px;border-radius:8px;border:2px solid #E5E7EB;font-size:0.9rem;outline:none;background:var(--bg);font-family:inherit;color:var(--text);transition:border-color 0.2s}
.fld:focus{border-color:var(--indigo2);box-shadow:0 0 0 4px rgba(67,56,202,0.1)}
textarea.fld{resize:vertical;min-height:120px}
.btn-sub{background:var(--indigo);color:#fff;padding:14px 32px;border-radius:9px;border:none;font-size:0.95rem;font-weight:700;cursor:pointer;width:100%;font-family:inherit;transition:all 0.2s}
.btn-sub:hover{background:var(--indigo2);transform:translateY(-1px)}
.ci-s{padding-top:4px}
.ci-h{font-family:'Libre Baskerville',serif;font-size:1.7rem;color:var(--indigo);margin-bottom:10px}
.ci-sub{color:var(--muted);margin-bottom:32px;line-height:1.75;font-size:0.95rem}
.ci-r{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.ci-ico{width:44px;height:44px;background:var(--lt);border:1px solid var(--brd);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.ci-lb{font-size:0.69rem;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:var(--muted);margin-bottom:3px}
.ci-vl{font-size:0.93rem;color:var(--text);font-weight:500;line-height:1.55}

/* ── Policy ── */
.pol{max-width:800px;margin:0 auto;padding:64px 40px}
.pol-h{font-family:'Libre Baskerville',serif;font-size:2.4rem;color:var(--indigo);margin-bottom:6px}
.pol-d{color:var(--muted);font-size:0.85rem;margin-bottom:44px}
.pol h2{font-family:'Libre Baskerville',serif;font-size:1.3rem;color:var(--indigo);margin:36px 0 12px}
.pol p{font-size:0.95rem;line-height:1.85;color:#4B5563;margin-bottom:14px}
.pol ul{padding-left:20px;margin-bottom:14px}
.pol li{font-size:0.95rem;line-height:1.75;color:#4B5563;margin-bottom:8px}

@media(max-width:1100px){
  .hero-in{grid-template-columns:1fr}
  .hero-side{display:none}
  .two-col{grid-template-columns:1fr}
  .feat3{grid-template-columns:1fr 1fr}
  .cb-inner{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .ct{grid-template-columns:1fr;padding:48px 16px}
}
@media(max-width:768px){
  .topbar,.cat-bar{display:none}
  .hdr-in{padding:0 16px}.hdr-nav{display:none}
  .w{padding:0 16px}.sp{padding:52px 0}
  .feat3{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .art-pg{padding:40px 16px}
  .a-img{height:260px}
  .ph{padding:44px 16px}
  .nl-f{flex-direction:column}
  .nl{padding:52px 20px}
}