/*
  CIWIDEY OUTBOUND — OUTBOUND SEKOLAH V2.0
  Visual refresh: typografi lebih besar, palette sage/cream/blue,
  floating WhatsApp CS Adi + Kang Jo seperti homepage.
  CSS tambahan: dibaca SETELAH outbound-sekolah.css (V1).
*/
:root {
  --ink: #142b3e;
  --ink2: #183a49;
  --blue: #0668cf;
  --blue2: #075ab5;
  --muted: #496575;
  --line: #d8e7e3;
  --sage: #d8eee2;
  --cream: #fff1d9;
  --deep-teal: #0d625b;
  --paper: #fffcf6;
  --shadow: 0 18px 50px rgba(9,65,71,.12);
}
html {scroll-padding-top: 100px;}
body {background:var(--paper);font-size:17px;line-height:1.7;}
p {line-height:1.78;}
.container {width:min(1220px,calc(100% - 52px));}

/* Header identity: sama-sama biru/navy seperti homepage */
.topline {background:#12334c;color:#e8f5ef;font-size:12px;letter-spacing:.065em;}
.topline .dot {background:#96ecb6;width:8px;height:8px;}
.topline-right {color:#d0e5e3;font-size:12px;}
.site-header {background:#fffefa;border-bottom-color:#dce9e5;}
.brand-name {font-size:18px;}
.nav {gap:22px;}
.nav > a {font-size:14px;color:#25495c;}
.nav .nav-cta {background:#0968c9;font-size:14px;}

/* Hero lebih berkarakter: sage, sky dan krem yang tetap senada brand */
.hero {
  background:
    radial-gradient(circle at 8% 8%,rgba(255,251,219,.94) 0 8%,transparent 35%),
    radial-gradient(circle at 95% 12%,rgba(154,212,225,.52) 0,transparent 45%),
    linear-gradient(118deg,#e0f2e7 0%,#f3f8ed 44%,#fff0d5 100%);
}
.hero:before {border-color:#ffffffba;opacity:.9;}
.hero-glow-a {background:#8bd7cd;opacity:.47;filter:blur(78px);}
.hero-glow-b {background:#ffd18b;opacity:.53;filter:blur(70px);}
.hero-grid {min-height:690px;gap:52px;padding-top:82px;padding-bottom:93px;}
.eyebrow,.section-kicker {font-size:13px;color:#0b625f;letter-spacing:.105em;}
.eyebrow-icon {background:#c1e8cf;color:#135c51;}
.hero h1 {font-size:clamp(44px,4.5vw,70px);line-height:1.09;margin:26px 0 24px;color:#112f3e;}
.hero h1 .blue-text {color:#096ac2;}
.hero h1 .amp,.hero h1 .period {color:#1f9a7d;}
.hero-desc {font-size:18px;font-weight:500;line-height:1.8;color:#3b5866;max-width:580px;}
.btn {font-size:15px;font-weight:800;min-height:52px;padding:15px 22px;}
.btn-primary {background:#096ac9;box-shadow:0 10px 26px rgba(6,104,207,.18);}
.btn-secondary {background:#fffdfa;border-color:#b8d8cf;}
.hero-micro {gap:18px;margin-top:33px;}
.hero-micro span {font-size:13px;color:#3c6265;}
.hero-micro b {color:#006f65;}
.photo-main {border-color:#fffefb;box-shadow:0 25px 70px #1e7a682e;}
.stamp {background:#0c675f;}
.stamp span,.stamp small {font-size:9px;}
.stamp strong {font-size:22px;}
.float-panel {background:#fffefa;border:1px solid #deeee6;}
.float-panel strong {font-size:15px;}
.float-panel small {font-size:12px;color:#50726f;}
.hero-bottom-line {height:7px;background:linear-gradient(90deg,#0879bf 0%,#39af94 51%,#eabf6a 100%);}

/* Benefit dan program: grid visual dengan jarak baca lebih lega */
.trust-strip {background:#f8fcf8;border-bottom-color:#d3e6e0;}
.trust-grid {padding:25px 0;}
.trust-icon {font-size:15px;width:48px;height:48px;background:#d6eee3;color:#105d54;}
.trust-grid strong {font-size:16px;}
.trust-grid small {font-size:13px;color:#4f6b71;}
.section {padding:100px 0;}
.section h2 {font-size:clamp(34px,3.8vw,52px);line-height:1.18;}
.section h2 span {color:#127f78;}
.intro {background:linear-gradient(180deg,#fffbf2 0%,#fffefb 100%);}
.intro-grid p,.section-head > p {font-size:17px;line-height:1.8;color:#405a68;}
.text-link {font-size:15px;}
.benefit {background:#fff;border:1px solid #cfe5de;padding:31px 25px;border-radius:19px;box-shadow:0 12px 27px rgba(30,85,79,.04);}
.benefit:nth-child(even) {background:#f0f9f5;}
.benefit-number {font-size:12px;color:#37756c;}
.benefit-symbol {color:#077f8e;font-size:39px;}
.benefit h3 {font-size:20px;color:#123e47;}
.benefit p {font-size:16px;color:#456375;line-height:1.7;}
.programs {background:linear-gradient(135deg,#d6efe6 0%,#e9f7f1 50%,#eaf6fc 100%);}
.program-card {border:1px solid #c0e0d9;border-radius:22px;box-shadow:0 12px 37px rgba(22,96,93,.095);}
.program-img {height:232px;}
.photo-tag {background:#fffaf1;color:#125b58;font-size:11px;padding:10px 13px;}
.program-body {padding:28px 27px 31px;}
.program-label {font-size:12px;color:#086f6b;}
.program-body h3 {font-size:23px;letter-spacing:-.035em;}
.program-body p {font-size:16px;line-height:1.73;color:#48616f;min-height:0;}
.program-body a {font-size:15px;color:#065d9e;}

/* Area jenjang & alur */
.audience {background:#fff9ec;}
.audience-content > p {font-size:17px;color:#476070;}
.audience-ribbon {font-size:15px;}
.audience-ribbon b {font-size:21px;}
.stage-list > div {padding:22px 0;border-top-color:#d6e2d6;}
.stage-list > div:last-child {border-bottom-color:#d6e2d6;}
.stage-list span {font-size:20px;color:#087a73;min-width:55px;}
.stage-list strong {font-size:18px;}
.stage-list small {font-size:16px;line-height:1.7;color:#536d76;}
.audience-content .muted-note {font-size:14px;color:#537068;}
.process {background:linear-gradient(135deg,#0d354c 0%,#0b5c5a 100%);}
.process h2 span {color:#9ee1cb;}
.process .section-kicker {color:#c6f3ce;}
.process .section-head > p {color:#e0efe9;}
.process-grid .step {color:#afe7c4;font-size:30px;}
.process-grid i {background:#72a4a2;}
.process-grid h3 {font-size:20px;}
.process-grid p {font-size:16px;color:#d5e7e6;line-height:1.73;}
.process-note {background:#124a58;border-color:#558c88;}
.process-note p {font-size:17px;color:#e0eee9;}
.process-note > a {font-size:15px;color:#b9f3e3;}
.location {background:linear-gradient(155deg,#f9fcf5 0%,#fff0d6 100%);}
.location-grid p {font-size:18px;color:#465f6d;line-height:1.78;}
.location-pills span {font-size:14px;background:#e2f5e9;border-color:#b4d8cd;color:#125c56;}
.location-tag {font-size:13px;}

/* FAQ terbaca jelas */
.faq-section {background:#e7f3ef;}
.faq-grid > div:first-child > p {font-size:17px;color:#4a6467;}
.faq-list {border-top-color:#b9d6ca;}
.faq-list details {border-bottom-color:#b9d6ca;}
.faq-list summary {font-size:17px;line-height:1.65;padding:23px 4px;}
.faq-list details p {font-size:16px;color:#476274;line-height:1.78;}
.faq-list summary span {background:#d0e8dd;color:#086d64;}

/* Kontak & formulir: ukuran input optimal juga untuk ponsel */
.reservation {background:linear-gradient(145deg,#0f3149 0%,#145c5b 100%);}
.reservation-copy h2 {font-size:clamp(36px,4vw,56px);}
.reservation-copy h2 span {color:#a9e6d7;}
.reservation-copy > p {font-size:18px;color:#e3f3ee;line-height:1.76;}
.contact-points {font-size:16px;color:#e5f4ec;}
.mini-brand > span {font-size:17px;}
.mini-brand small {font-size:13px;color:#bddfd6;}
.reservation-card {background:#fffdfa;border:1px solid #d4e9df;}
.form-head h3 {font-size:23px;}
.form-head p {font-size:15px;color:#48636c;}
.reservation-card label {font-size:15px;color:#2b4655;gap:9px;}
.reservation-card label span {color:#59717b;}
.reservation-card input,
.reservation-card select,
.reservation-card textarea {background:#fff;color:#142f45;font-size:16px;padding:15px 14px;border-color:#b9d3d1;min-height:51px;}
.reservation-card textarea {min-height:116px;}
.reservation-card input::placeholder,
.reservation-card textarea::placeholder {color:#627985;}
.form-actions .btn {font-size:15px;min-height:54px;}
.form-note {font-size:13px;color:#4c646f;line-height:1.7;}

.footer {background:#0a293c;}
.footer-main > div:first-child > p {font-size:15px;color:#c0d7dc;}
.footer-label {font-size:12px;color:#a6dccc;}
.footer-main > div:not(:first-child) > a {font-size:15px;}
.footer-bottom {font-size:13px;color:#b3cbd3;}
.footer-brand .brand-name {font-size:18px;}

/* Identik dalam perilaku dengan tombol hijau di homepage, dua CS di kanan bawah */
.whatsapp-widget {
  position:fixed;
  left:auto;
  right:18px;
  bottom:18px;
  z-index:13000;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}
.whatsapp-widget .whatsapp-link {
  min-height:47px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:14px;
  background:#16964d;
  color:#fff;
  padding:10px 15px;
  font-family:Montserrat,Arial,sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:0 9px 25px rgba(12,98,47,.25);
  transition:transform .2s,background-color .2s,box-shadow .2s;
}
.whatsapp-widget .whatsapp-link img {width:22px;height:22px;flex:0 0 22px;}
.whatsapp-widget .whatsapp-link:hover {background:#12763e;transform:translateY(-2px);box-shadow:0 12px 27px rgba(12,98,47,.3);}
.whatsapp-widget .whatsapp-link:focus-visible {outline:3px solid #ffdb7a;outline-offset:3px;}

@media(max-width:1100px){
  .hero-grid {gap:30px;}
  .hero h1 {font-size:clamp(42px,4.7vw,61px);}
  .nav {gap:13px;}
  .nav > a {font-size:13px;}
  .benefit {padding:25px 18px;}
}
@media(max-width:900px){
  .hero-grid {padding:70px 0;}
  .hero-desc {font-size:17px;}
  .section {padding:77px 0;}
  .reservation-grid {gap:30px;}
  .reservation-card {padding:25px;}
  .field-grid {grid-template-columns:1fr;}
  .program-body {padding:23px;}
}
@media(max-width:700px){
  .container {width:min(calc(100% - 34px),1220px);}
  .topline {font-size:10px;}
  .topline-inner {min-height:38px;}
  .site-header {height:72px;}
  .brand-name {font-size:16px;}
  .nav {top:72px;gap:0;}
  .nav > a {font-size:15px;padding:14px 11px;}
  .nav .nav-cta {font-size:15px;}
  .hero-grid {padding:56px 0 72px;gap:39px;}
  .eyebrow {font-size:11px;white-space:normal;}
  .hero h1 {font-size:clamp(38px,9.2vw,58px);line-height:1.11;}
  .hero-desc {font-size:17px;line-height:1.75;}
  .btn {font-size:14px;min-height:50px;white-space:normal;}
  .hero-micro span {font-size:12px;}
  .hero-visual {height:350px;}
  .float-panel strong {font-size:13px;}
  .float-panel small {font-size:11px;}
  .trust-grid strong {font-size:15px;}
  .trust-grid small {font-size:13px;}
  .section {padding:74px 0;}
  .section h2 {font-size:clamp(33px,7vw,43px);}
  .intro-grid p,.section-head > p {font-size:17px;}
  .benefit {padding:23px 19px;}
  .benefit h3 {font-size:18px;}
  .benefit p {font-size:15px;}
  .program-img {height:245px;}
  .program-body h3 {font-size:23px;}
  .program-body p {font-size:16px;}
  .stage-list strong {font-size:17px;}
  .stage-list small {font-size:15px;}
  .audience-content > p {font-size:17px;}
  .process-grid {gap:26px 19px;}
  .process-grid .step {font-size:27px;}
  .process-grid h3 {font-size:17px;}
  .process-grid p {font-size:15px;}
  .process-note p {font-size:16px;}
  .location-grid p {font-size:17px;}
  .faq-list summary {font-size:16px;}
  .faq-list details p {font-size:16px;}
  .reservation-copy > p {font-size:17px;}
  .form-actions {grid-template-columns:1fr 1fr;}
  .form-head h3 {font-size:21px;}
  .reservation-card label {font-size:15px;}
  .reservation-card input,.reservation-card select,.reservation-card textarea {font-size:16px;}
  .footer-bottom {padding-bottom:125px;}
  /* Hindari tabrakan antara CTA bawah V1 dan 2 tombol WhatsApp tetap */
  .mobile-cta {display:none;}
  .whatsapp-widget {right:13px;bottom:15px;gap:8px;}
  .whatsapp-widget .whatsapp-link {min-height:46px;font-size:12px;padding:10px 13px;}
  .whatsapp-widget .whatsapp-link img {width:20px;height:20px;flex-basis:20px;}
}
@media(max-width:445px){
  .hero h1 {font-size:clamp(38px,9.4vw,45px);}
  .hero-micro span {font-size:11px;}
  .hero-visual {height:300px;}
  .benefits {grid-template-columns:1fr;}
  .benefit {padding:24px 22px;}
  .benefit h3 {font-size:19px;}
  .benefit p {font-size:16px;}
  .process-grid {grid-template-columns:1fr;}
  .form-actions {grid-template-columns:1fr;}
  .whatsapp-widget {bottom:12px;right:12px;}
}
@media(prefers-reduced-motion:reduce){
  .whatsapp-widget .whatsapp-link {transition:none;}
}