/* ============================================================
   #TanyaHeartologyDulu — styles.css (V1)
   Brand tokens: Heartology Brand Guidelines 2025.
   Interaction shades (--red-hover, --red-deep, tint surfaces) are
   controlled derivations for hover/contrast only — RECOMMENDED
   extensions, not official palette values.
   Breakpoints: 1366 / 1200 / 1024 / 880 / 767 (max-width).
============================================================ */

:root{
  --red:#f06364; --red-2:#f59287; --red-3:#f9bdb2;
  --blue:#164171; --blue-2:#9cbbe2; --blue-3:#c7d4ec;
  --ink:#1a1a1a; --ink-80:#474747; --ink-40:#9a9a9a;
  --red-hover:#e0575a;          /* derived: primary button hover */
  --red-deep:#c9484b;           /* derived: danger button (AA vs white) */
  --tint:#eef3fa;               /* derived: light band surface */
  --line:#dfe8f4;               /* derived: hairline on white */
  --radius:12px; --radius-lg:16px;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --pad-band:clamp(56px,7vw,96px);
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  font-size:1.0625rem;line-height:1.8;background:#fff;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
section[id],footer[id],div[id]{scroll-margin-top:96px}
h1,h2,h3,h4{line-height:1.25;color:var(--blue);margin:0 0 .6em;font-weight:700}
h1{font-size:2.75rem}
h2{font-size:2.125rem}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--blue)}
a:hover{color:var(--red-deep)}
.mt{margin-top:1.25rem}
.center{text-align:center}
.small{font-size:.9375rem}
.hide-sm{display:inline}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.band-blue :focus-visible,.site-footer :focus-visible,.hero-media :focus-visible{outline-color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:32px}

/* ---------- A/B headline variants (CSS-gated, zero flicker) ---------- */
.h1-b{display:none}
html[data-variant="B"] .h1-a{display:none}
html[data-variant="B"] .h1-b{display:inline}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font);font-size:1.1875rem;font-weight:700;line-height:1.2;
  padding:14px 28px;border-radius:var(--radius);border:2px solid transparent;
  min-height:52px;text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-hover);color:#fff}
.btn-secondary{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn-secondary:hover{background:var(--tint);color:var(--blue)}
.btn-inverse{background:#fff;color:var(--blue)}
.btn-inverse:hover{background:var(--blue-3);color:var(--blue)}
.btn-danger{background:var(--red-deep);color:#fff;font-size:1.0625rem}
.btn-danger:hover{background:#b23e41;color:#fff}
.btn-sm{font-size:1rem;padding:10px 18px;min-height:44px;border-radius:10px}
.btn-lg{font-size:1.25rem;padding:16px 34px}
.btn-block{display:flex;width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.btn .ic,.link-emergency .ic{fill:currentColor;stroke:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand img{width:220px;height:auto}
.header-actions{display:flex;align-items:center;gap:22px}
.link-emergency{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;
  font-size:.9375rem;color:var(--blue);text-decoration:none;
}
.link-emergency:hover{color:var(--red-deep)}
.link-emergency .ic{width:18px;height:18px;color:var(--red-deep)}

/* ---------- Hero ---------- */
.hero{padding:clamp(48px,6vw,80px) 0}
.hero-grid{display:grid;grid-template-columns:11fr 9fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-block;background:var(--red-3);color:var(--blue);
  font-weight:600;font-size:.875rem;letter-spacing:.04em;
  padding:6px 16px;border-radius:999px;margin:0 0 20px;
}
h1 em{font-style:normal;color:var(--red)}
.hero-sub{font-size:1.125rem;color:var(--ink-80);max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 18px}
.cta-row.center{justify-content:center}
.hero-tertiary a{font-weight:600}
.hero-note{font-size:.9375rem;color:var(--ink-80);margin-top:14px}
.hero-disclaimer{
  font-size:.875rem;color:var(--ink-80);margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line);max-width:58ch;
}
.hero-media{align-self:stretch}
.media-placeholder{
  height:100%;min-height:440px;aspect-ratio:4/5;max-height:600px;width:100%;
  background:var(--tint);border:1px solid var(--blue-3);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.pulse-art{width:62%;color:var(--blue-2)}
.media-caption{font-size:.8125rem;color:var(--ink-40);margin:0}
.hero-media img,.hero-media picture img{
  width:100%;height:100%;min-height:440px;max-height:600px;
  object-fit:cover;border-radius:var(--radius-lg);
}

/* ---------- Bands ---------- */
.band{padding:var(--pad-band) 0}
.band-tint{background:var(--tint)}
.band-blue{background:var(--blue);color:#fff}
.band-blue h2{color:#fff}
.on-blue{color:var(--blue-3)}
.on-blue a{color:#fff}
.section-intro{max-width:62ch;color:var(--ink-80);margin-bottom:2.25rem}
.section-intro.on-blue{color:var(--blue-3)}

/* ---------- S3 cards ---------- */
.card-grid{display:grid;gap:20px}
.grid-6{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 22px;display:flex;flex-direction:column;
}
.card h3{font-size:1.0625rem;margin:0 0 .5em;line-height:1.6em;}
.card p{font-size:.9375rem;color:var(--ink-80);flex:1}
.card-ic{
  width:52px;height:52px;border-radius:14px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.card-ic svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card-link{font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--blue)}
.card-link:hover{color:var(--red-deep);text-decoration:underline}

/* ---------- S4 two-col + check list ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.check-list{list-style:none;margin:0 0 1.25rem;padding:0}
.check-list li{
  position:relative;padding:9px 0 9px 36px;font-size:1.0625rem;
  border-bottom:1px solid var(--line);
}
.check-list li:last-child{border-bottom:0}
.check-list li::before{
  content:"";position:absolute;left:0;top:12px;width:22px;height:22px;
  border-radius:50%;background:var(--red-3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23164171' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}

/* ---------- S5 journey spine ---------- */
.spine{list-style:none;margin:0;padding:8px 0;position:relative;counter-reset:step}
.spine::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:var(--blue-2);transform:translateX(-50%);
}
.spine-step{position:relative;width:50%;padding:0 56px 36px 0}
.spine-step:nth-child(even){margin-left:50%;padding:0 0 36px 56px}
.spine-step:last-child{padding-bottom:8px}
.spine-dot{
  position:absolute;top:6px;right:-24px;width:48px;height:48px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:700;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;
  border:4px solid var(--blue);z-index:1;
}
.spine-step:nth-child(even) .spine-dot{right:auto;left:-24px}
.spine-card{
  background:#fff;border-radius:var(--radius-lg);padding:22px 26px;
}
.spine-card h3{color:var(--blue);font-size:1.125rem;margin:0 0 .4em;line-height:1.6em;}
.spine-card p{margin:0;font-size:.9375rem;color:var(--ink-80)}
.spine-close{text-align:center;margin-top:40px}
.promise{font-size:1.375rem;font-weight:600;color:#fff;max-width:34ch;margin:0 auto 22px}

/* ---------- S6 pillars ---------- */
.pillar-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-bottom:2.5rem}
.pillar{grid-column:span 3;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px}
.pillar-lg{grid-column:span 4;background:var(--tint);border-color:var(--blue-3)}
.pillar h3{font-size:1.0625rem;line-height:1.6em;}
.pillar h3::before{content:"";display:block;width:34px;height:4px;border-radius:2px;background:var(--red);margin-bottom:14px}
.pillar p{font-size:.9375rem;color:var(--ink-80);margin:0}
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:2rem}
.stat{background:var(--tint);border-radius:var(--radius-lg);padding:24px;text-align:center}
.stat b{display:block;font-size:2rem;color:var(--blue)}
.stat span{font-size:.875rem;color:var(--ink-80)}
.stat-foot{grid-column:1/-1;font-size:.8125rem;color:var(--ink-40);text-align:center;margin:0}
.badge-row{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.badge{
  display:inline-block;border:1px solid var(--blue-3);color:var(--blue);
  font-size:.875rem;font-weight:600;padding:8px 16px;border-radius:999px;background:#fff;
}

/* ---------- Accordions (S7 + FAQ) ---------- */
.acc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;
}
.acc summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:18px 22px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{margin:0;font-size:1.0625rem}
.acc summary::after{
  content:"";flex:none;width:14px;height:14px;
  border-right:2.5px solid var(--red-deep);border-bottom:2.5px solid var(--red-deep);
  transform:rotate(45deg);transition:transform .18s ease;margin-top:-6px;
}
.acc[open] summary::after{transform:rotate(225deg);margin-top:6px}
.acc summary:hover{background:var(--tint)}
.acc-body{padding:16px 22px 20px}
.acc-body p{font-size:1rem;color:var(--ink-80);max-width:72ch}
.catch-all{margin-top:1.75rem;font-size:1.0625rem}
.catch-all a{font-weight:600}

/* ---------- S8 doctors ---------- */
.doctor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.doctor{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;text-align:center;
}
.doctor .avatar{
  width:96px;height:96px;border-radius:50%;margin:0 auto 14px;object-fit:cover;
  background:var(--blue-3);color:var(--blue);font-weight:700;font-size:1.75rem;
  display:flex;align-items:center;justify-content:center;
}
.doctor h3{font-size:1rem;margin-bottom:.25em}
.doctor .cred{font-size:.875rem;color:var(--ink-80);margin:0 0 .4em}
.doctor .exp{font-size:.8125rem;color:var(--blue);font-weight:600;margin:0}

/* ---------- S9 documents ---------- */
.docs-grid{grid-template-columns:7fr 5fr}
.doc-h{font-size:1rem;margin:1.5rem 0 .5rem;color:var(--blue)}
.doc-side{position:sticky;top:100px}
.callout{
  background:#fff;border-left:4px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px;margin-bottom:18px;border-top:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.callout p{margin:0;font-size:1rem}
.doc-note{font-size:.875rem;color:var(--ink-80);margin-top:16px}

/* ---------- S10 conversion ---------- */
.convert-grid{grid-template-columns:5fr 7fr;align-items:start}
.convert-copy .btn{margin:6px 0 14px}
.offer-box{background:#fff;border-radius:var(--radius);padding:18px 22px;margin:14px 0}
.offer-box h3{color:var(--blue);font-size:1rem}
.offer-box p{color:var(--ink-80);font-size:.9375rem;margin:0}
.privacy-list{list-style:none;margin:20px 0 0;padding:0;font-size:.875rem;color:var(--blue-3)}
.privacy-list li{padding:3px 0 3px 22px;position:relative}
.privacy-list li::before{content:"•";position:absolute;left:6px;color:var(--red-2)}
.privacy-list a{color:#fff}

.form-card{
  background:#fff;border-radius:var(--radius-lg);border:2px solid var(--red);
  padding:32px;color:var(--ink);
}
.form-card h3{font-size:1.375rem}
.form-intro{font-size:.9375rem;color:var(--ink-80)}
form label{display:block;font-weight:600;font-size:.9375rem;margin:18px 0 6px;color:var(--ink)}
form input[type=text],form input[type=tel],form select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--blue-3);border-radius:8px;background:#fff;
  min-height:48px;-webkit-appearance:none;appearance:none;
}
form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23164171' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
}
form input:focus,form select:focus{border-color:var(--blue);outline:3px solid rgba(22,65,113,.25);outline-offset:0}
form fieldset{border:0;margin:18px 0 0;padding:0}
form legend{font-weight:600;font-size:.9375rem;padding:0;margin-bottom:8px}
.radio-row{display:flex;flex-wrap:wrap;gap:10px 22px}
.radio-row label,label.stack{display:flex;align-items:flex-start;gap:10px;font-weight:400;margin:0;font-size:1rem;cursor:pointer}
label.stack{margin-bottom:10px}
input[type=radio],input[type=checkbox]{
  width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--blue);cursor:pointer;
}
.field-help{font-size:.8125rem;color:var(--ink-40);margin:6px 0 0}
.field-help.center{text-align:center;margin-top:10px}
.opt{font-weight:400;color:var(--ink-40)}
.consent{display:flex;gap:12px;align-items:flex-start;font-weight:400!important;font-size:.875rem!important;margin-top:22px!important}
.consent span{color:var(--ink-80)}
.fs-emergency{background:var(--tint);border-radius:var(--radius);padding:16px!important;margin-top:22px!important}
.field-invalid{border-color:var(--red-deep)!important;background:#fdf1f1!important}
.form-error{
  background:#fdf1f1;border:1px solid var(--red-2);color:var(--red-deep);
  font-weight:600;font-size:.9375rem;border-radius:8px;padding:12px 16px;margin:18px 0 0;
}
.emergency-panel{
  background:#fdf1f1;border:2px solid var(--red-deep);border-radius:var(--radius);
  padding:20px;margin-top:18px;
}
.emergency-panel h4{color:var(--red-deep);font-size:1.0625rem;margin-bottom:.4em}
.emergency-panel p{font-size:.9375rem;margin-bottom:14px}
.success-panel{
  background:#eef7f0;border:1.5px solid #7dbb8b;border-radius:var(--radius);
  padding:20px;margin-top:18px;
}
.success-panel h4{color:#20603a;font-size:1.0625rem;margin-bottom:.4em}
.success-panel p{font-size:.9375rem;margin:0}
#submitBtn{margin-top:22px}

/* ---------- Final band + footer ---------- */
.final-band{border-top:1px solid var(--line)}
.autonomy{font-size:1.125rem;color:var(--ink-80);max-width:48ch;margin-inline:auto}
.site-footer{background:var(--blue);color:var(--blue-3);padding:56px 0 0;font-size:.9375rem}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-bottom:40px}
.logo-plate{display:inline-block;background:transparent;border-radius:10px;padding:12px 16px;margin-bottom:18px}
.foot-id{margin:0;line-height:1.8}
.foot-h{color:#fff;font-size:1rem;margin-bottom:14px}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{padding:5px 0}
.foot-list a{color:#fff;text-decoration:none}
.foot-list a:hover{color:var(--red-3);text-decoration:underline}
.foot-legal{border-top:1px solid rgba(255,255,255,.18);padding-top:24px;padding-bottom:32px}
.foot-legal p{font-size:.8125rem;color:var(--blue-2);margin-bottom:10px;max-width:90ch}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;
  border-top:1px solid var(--line);padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,16px));
  padding-right:max(16px,env(safe-area-inset-right,16px));
  transform:translateY(110%);transition:transform .2s ease;
}
.sticky-cta.visible{transform:translateY(0)}

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

/* Laptop ≤1366 */
@media (max-width:1366px){
  .container{max-width:1140px}
  h1{font-size:2.5rem}
  h2{font-size:2rem}
  .pillar{grid-column:span 6}
  .pillar-lg{grid-column:span 4}
}

/* Tablet landscape ≤1200 */
@media (max-width:1200px){
  .container{max-width:960px}
  h1{font-size:2.375rem}
  h2{font-size:1.875rem}
  .hero-grid{gap:40px}
  .two-col{gap:40px}
  .doctor-grid{grid-template-columns:repeat(3,1fr)}
}

/* Tablet portrait ≤1024 */
@media (max-width:1024px){
  .container{max-width:900px}
  h1{font-size:2.125rem}
  h2{font-size:1.75rem}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-media{order:2}
  .media-placeholder,.hero-media img{aspect-ratio:16/9;min-height:240px;max-height:420px}
  .grid-6{grid-template-columns:repeat(2,1fr)}
  .two-col,.docs-grid,.convert-grid{grid-template-columns:1fr}
  .doc-side{position:static}
  .pillar,.pillar-lg{grid-column:span 6}
  .doctor-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* Spine → left rail */
  .spine::before{left:23px;transform:none}
  .spine-step,.spine-step:nth-child(even){width:100%;margin-left:0;padding:0 0 28px 68px}
  .spine-dot,.spine-step:nth-child(even) .spine-dot{left:0;right:auto;top:2px;width:46px;height:46px}
}

/* Mobile landscape ≤880 */
@media (max-width:880px){
  .container{padding-inline:20px}
  h1{font-size:2rem}
  h2{font-size:1.625rem}
  .header-inner{min-height:64px}
  .brand img{width:172px}
  .header-actions{gap:14px}
  .hide-sm{display:none}
  .header-actions .btn span{display:none}
  .header-actions .btn{padding:10px;min-width:44px}
  .header-actions .btn .ic{width:22px;height:22px}
  .grid-6{grid-template-columns:1fr}
  .cta-row{flex-wrap:nowrap;gap:10px}
  .cta-row .btn{flex:1 1 0;padding-inline:14px;font-size:1.0625rem}
  .band{--pad-band:clamp(48px,9vw,64px)}
}

/* Mobile portrait ≤767 */
@media (max-width:767px){
  body{font-size:1rem}
  h1{font-size:1.75rem}
  h2{font-size:1.5rem}
  .hero-sub{font-size:1.0625rem}
  .media-placeholder,.hero-media img{aspect-ratio:4/5;max-height:none}
  .btn{width:100%}
  .btn-sm,.header-actions .btn,.btn-danger{width:auto}
  .cta-row{flex-wrap:nowrap;gap:8px}
  .cta-row .btn{width:auto;flex:1 1 0;padding-inline:10px;font-size:.9375rem;white-space:normal;line-height:1.3}
  .form-card{padding:22px 18px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .spine::before{left:19px}
  .spine-step,.spine-step:nth-child(even){padding-left:58px}
  .spine-dot,.spine-step:nth-child(even) .spine-dot{width:38px;height:38px;font-size:1.0625rem;border-width:3px}
  .promise{font-size:1.1875rem}
  /* Doctor cards → snap scroll */
  .doctor-grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:12px;
  }
  .doctor{flex:0 0 78%;scroll-snap-align:start}
}

/* Print */
@media print{
  .site-header .header-actions,.sticky-cta,.form-card,.pulse-art{display:none}
  .band-blue,.site-footer{background:#fff!important;color:#000!important}
  .band-blue h2,.spine-card h3{color:#000!important}
}

/* ============================================================
   S5B TINJAUAN DARING (#daring) + S5C TIM DOKTER (#dokter)
   Built on the page's own tokens — no separate design system.
============================================================ */

/* ---------- S5B Tinjauan Daring ---------- */
.tele-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.tele-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px)}
.tele-steps{list-style:none;margin:0;padding:0;position:relative}
.tele-steps::before{content:"";position:absolute;left:17px;top:12px;bottom:12px;width:2px;background:var(--blue-3)}
.tele-steps li{position:relative;display:flex;gap:18px;padding-bottom:26px}
.tele-steps li:last-child{padding-bottom:0}
.tele-num{position:relative;z-index:1;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center}
.tele-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:2px}
.tele-head h3{font-size:1.0625rem;margin:0;line-height:1.5}
.tele-sla{font-size:.75rem;font-weight:600;color:var(--blue);background:var(--tint);border:1px solid var(--blue-3);border-radius:999px;padding:3px 10px;white-space:nowrap}
.tele-sla[hidden]{display:none}
.tele-steps li p{margin:0;font-size:.9375rem;color:var(--ink-80);max-width:56ch}
.tele-fork{margin-top:26px;padding-top:24px;border-top:1px dashed var(--blue-3)}
.tele-fork-q{font-weight:600;color:var(--blue);margin:0 0 14px}
.tele-fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tele-outcome{background:var(--tint);border-radius:var(--radius);padding:18px 20px}
.tele-outcome p{margin:0;font-size:.875rem;color:var(--ink-80)}
.tele-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0 0 8px}
.tele-tag-red{color:var(--red-deep)}
.tele-aside{display:flex;flex-direction:column;gap:18px}
.tele-panel{background:var(--blue);color:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px)}
.tele-panel h3{color:#fff;font-size:1.125rem;margin:0 0 14px}
.tele-list{list-style:none;margin:0 0 22px;padding:0}
.tele-list li{position:relative;padding:7px 0 7px 22px;font-size:.9375rem;color:var(--blue-3);line-height:1.6}
.tele-list li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.tele-panel .btn{width:100%;text-align:center;justify-content:center}
.tele-caveat{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius);padding:18px 20px}
.tele-caveat p{margin:0 0 10px;font-size:.875rem;color:var(--ink-80)}
.tele-caveat p:last-child{margin:0}
.tele-caveat strong{color:var(--blue)}

/* ---------- S5C Tim Dokter ---------- */
.doc-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.doc-chip{font-family:inherit;cursor:pointer;background:#fff;border:1px solid var(--blue-3);color:var(--blue);font-size:.875rem;font-weight:600;padding:8px 16px;border-radius:999px;transition:background .15s ease,color .15s ease,border-color .15s ease}
.doc-chip:hover{background:var(--tint)}
.doc-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.doc-count{font-size:.875rem;color:var(--ink-40);margin:0 0 22px}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.doc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 22px;display:flex;flex-direction:column}
.doc-card[hidden]{display:none}
.doc-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.doc-avatar{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:14px;background:var(--tint);overflow:hidden;display:flex;align-items:center;justify-content:center}
.doc-avatar svg{width:34px;height:34px;stroke:var(--blue-2)}
.doc-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.doc-top h3{font-size:1rem;margin:0 0 3px;line-height:1.45}
.doc-creds{margin:0 0 8px;font-size:.75rem;color:var(--ink-40);line-height:1.5}
.doc-subsp{display:inline-block;margin:0;font-size:.75rem;font-weight:600;color:var(--blue);background:var(--tint);border-radius:999px;padding:4px 11px;line-height:1.5}
.doc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:4px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:0 0 16px}
.doc-stats div{min-width:0}
.doc-stats dt{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40);margin:0 0 4px;line-height:1.35}
.doc-stats dd{margin:0;font-size:1.1875rem;font-weight:700;color:var(--blue);line-height:1.15}
.doc-stats dd small{display:block;font-size:.71875rem;font-weight:400;color:var(--ink-40);margin-top:3px;line-height:1.35}
.doc-info{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;flex:1}
.doc-row .doc-label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red-deep);margin:0 0 3px}
.doc-row p{margin:0;font-size:.875rem;color:var(--ink-80);line-height:1.6}
.doc-foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.doc-more-wrap{text-align:center;margin-top:28px}
.doc-note{margin:26px auto 0;font-size:.875rem;color:var(--ink-40);max-width:76ch;text-align:center}

/* Fix: author display on .btn overrides UA [hidden]; restore hiding */
.btn[hidden]{display:none}

@media (max-width:1024px){
  .tele-grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .tele-fork-grid{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr}
}

/* ============================================================
   HERO v2 — two-row layout
   Row 1: shallow split (headline + CTA | photo), always balanced.
   Row 2: full-width lead-in → 3 question cards → closing → disclaimer.
   Later rules override the original hero layout above.
============================================================ */
.hero-grid{grid-template-columns:1.15fr .85fr;gap:48px}
.hero-media img,.hero-media picture img{min-height:320px;max-height:460px}
.hero-strip{margin-top:clamp(28px,4vw,44px)}
.hero-lead{font-size:1.125rem;color:var(--ink-80);max-width:62ch;margin:0 0 16px}
.hero-qgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px;padding:0}
.hero-qgrid li{background:var(--tint);border-radius:var(--radius);padding:16px 18px;font-size:1.0625rem;font-weight:600;color:var(--blue);line-height:1.5}
.hero-qmark{display:block;color:var(--red);font-size:1.25rem;font-weight:700;line-height:1;margin-bottom:8px}
.hero-close{font-size:1.0625rem;color:var(--ink-80);max-width:100%;margin:0}

/* Tablet landscape ≤1200 */
@media (max-width:1200px){
  .hero-grid{gap:36px}
  .hero-qgrid{gap:12px}
  .hero-qgrid li{padding:14px 16px;font-size:1rem}
}

/* Tablet portrait ≤1024 — row 1 is shallow enough to stay split */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:32px}
  .hero-media img,.hero-media picture img{min-height:280px;max-height:380px;aspect-ratio:auto}
}

/* Mobile landscape ≤880 — stack row 1; questions go vertical */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-media{order:2}
  .hero-media img,.hero-media picture img{aspect-ratio:16/9;min-height:220px;max-height:360px}
  .hero-qgrid{grid-template-columns:1fr;gap:10px}
  .hero-qgrid li{display:flex;align-items:baseline;gap:10px}
  .hero-qmark{margin:0}
}

/* Mobile portrait ≤767 */
@media (max-width:767px){
  .hero-lead,.hero-close{font-size:1rem}
  .hero-qgrid li{font-size:.9375rem}
}