/* Gaya khusus halaman Testimoni (gaya dasar ada di base.css) */
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
.eyebrow{display:block;font-size:11px;margin-bottom:12px}
section{padding:72px 0}
section+section{border-top:1px solid var(--line)}

/* hero */
.hero{background:radial-gradient(700px 360px at 88% 20%,rgba(120,200,160,.28),transparent 70%),linear-gradient(135deg,#143a2b,#215a43);color:#fff}
.hero .wrap{padding-top:72px;padding-bottom:56px}
.hero .eyebrow{color:#a8e6c4}
.hero h1{font-size:clamp(34px,4.6vw,52px);margin-bottom:18px;max-width:640px;color:#fff}
.hero p{color:#dcefe3;font-size:17px;max-width:540px;margin:0}

/* kartu cerita */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px;align-items:start}
.tc{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.tph{aspect-ratio:4/5;background:var(--bg2);overflow:hidden}
.tph img{width:100%;height:100%;object-fit:cover}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tph img{filter:brightness(.92)}}
:root[data-theme="dark"] .tph img{filter:brightness(.92)}
.tb{padding:22px 24px 24px}
.tb h3{font-size:24px;margin-bottom:4px}
.kota{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:14px}
.tb .q{margin:0;color:var(--ink);font-size:15.5px;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.tb .q.open{-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible}
.more{margin-top:12px;padding:0;border:0;background:none;color:var(--brand);font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.more:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ajakan */
#ajak{padding-top:24px}
.ajak{background:linear-gradient(135deg,#143a2b,#215a43);color:#fff;border-radius:28px;padding:56px 40px;text-align:center}
.ajak .eyebrow{color:#a8e6c4}
.ajak h2{color:#fff;font-size:clamp(28px,3.6vw,40px);max-width:640px;margin:0 auto 16px}
.ajak p{color:#dcefe3;font-size:17px;max-width:560px;margin:0 auto 28px}
.ajak .getbtn{display:inline-block;background:#fff;color:#143a2b;font-weight:600;font-size:16px;padding:15px 32px;border-radius:999px;text-decoration:none;transition:transform .15s}
.ajak .getbtn:hover{transform:translateY(-2px)}
.ajak .getbtn:focus-visible{outline:3px solid #a8e6c4;outline-offset:3px}

@media(max-width:1000px){.tcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
section{padding:52px 0}
.hero .wrap{padding-top:44px;padding-bottom:36px}
}
@media(max-width:640px){
.tcards{grid-template-columns:1fr}
.tb{padding:20px}
.ajak{padding:40px 22px;border-radius:22px}
#ajak{padding-top:8px}
}