:root{--knkc-dark:#2c2421;--knkc-accent:#d2b48c;--knkc-background:#f9f8f6}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:90px}body{background:var(--knkc-background)}
button,a,[role=button]{-webkit-tap-highlight-color:transparent}button,[role=button]{cursor:pointer}
:focus-visible{outline:3px solid var(--knkc-accent);outline-offset:5px}
.knkc-skip{position:fixed;left:12px;top:-100px;z-index:10000;padding:12px 20px;background:#fff;color:#222}.knkc-skip:focus{top:12px}
body.admin-bar nav.fixed{top:32px}
#knk-mobile-menu{position:absolute;top:100%;left:0;right:0;padding:24px;background:#fff;box-shadow:0 14px 24px #0001}
#knk-mobile-menu a{display:block;padding:14px 10px;font-size:13px;letter-spacing:.15em;font-weight:700}
#knk-mobile-menu[hidden]{display:none!important}
img[src=""]{visibility:hidden}
[data-knk-slide]{transition:transform .45s ease,opacity .45s ease;touch-action:pan-y!important}
.knkc-document{width:min(900px,92%);margin:70px auto;min-height:75vh;line-height:1.8}.knkc-document h1{font-size:2.4rem;margin:1em 0;font-family:var(--font-serif)}.knkc-document p{margin:1em 0}.knkc-document a{text-decoration:underline}.knkc-document article{margin-bottom:3rem}
@media(max-width:782px){body.admin-bar nav.fixed{top:46px}}
@media(max-width:600px){body.admin-bar nav.fixed{position:absolute}}
@media(min-width:768px){#knk-mobile-menu{display:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* 1.1 — shared Studio palette, mobile composition and motion. */
:root{--knkc-surface:#fff;--knkc-nav:#fff;--knkc-footer:#42372c;--knkc-footer-text:#f1ece5;--knkc-services:#463b33;--knkc-button:#2c2421;--knkc-button-text:#fff;--knkc-image-border:#fff;--knkc-logo-width:120px;--knkc-logo-mobile:84px}
html,body{max-width:100%;overflow-x:clip}#knkc-content{min-width:0;width:100%}
nav[data-knk-nav]{background:color-mix(in srgb,var(--knkc-nav) 94%,transparent);transition:box-shadow .35s ease,background .35s ease}
nav.knkc-scrolled{box-shadow:0 5px 30px #00000012}
[data-knk-image=logo]{width:var(--knkc-logo-width)!important;height:auto!important;max-height:64px;object-fit:contain;flex-shrink:0}
#knk-mobile-menu{background:var(--knkc-nav);color:var(--knkc-dark)}
.bg-white{background-color:var(--knkc-surface)}
.bg-white\/50{background-color:color-mix(in srgb,var(--knkc-surface) 50%,transparent)}
.bg-white\/90{background-color:color-mix(in srgb,var(--knkc-surface) 90%,transparent)}
#layanan>div:last-child>div{background:var(--knkc-services)}
#layanan .bg-\[\#f8f9fa\]{background:var(--knkc-surface)}
#knkc-content footer>div:last-child{background:var(--knkc-footer);color:var(--knkc-footer-text)}
#knkc-content footer>div:last-child :is(p,h3,h4,a){color:var(--knkc-footer-text)}
#knkc-content footer>div:last-child a.bg-white{background:var(--knkc-surface);color:var(--knkc-footer)}
#beranda button>span:last-child,#lokasi a>span:last-child,footer>div:first-child a>span:last-child{background:var(--knkc-button);color:var(--knkc-button-text)}
#beranda button:hover>span:last-child,#lokasi a:hover>span:last-child,footer>div:first-child a:hover>span:last-child{background:var(--knkc-accent);color:var(--knkc-dark)}
[data-knk-slide],#lokasi>div>div:last-child{border-color:var(--knkc-image-border)}
#testimoni h2{color:var(--knkc-dark)}
.knkc-gallery-controls{position:absolute;z-index:10;bottom:-50px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:8px;white-space:nowrap}
.knkc-gallery-controls button{min-width:36px;min-height:36px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--knkc-dark) 18%,transparent);border-radius:30px;background:var(--knkc-surface);color:var(--knkc-dark);font-size:12px;box-shadow:0 3px 12px #00000009}
.knkc-gallery-controls button:hover{background:var(--knkc-accent)}
.knkc-gallery-status{font-size:11px;letter-spacing:.12em;color:var(--knkc-dark)}
.knkc-motion :is(a,button,.knkc-interactive){transition:translate .3s ease,box-shadow .3s ease,background-color .3s ease,color .3s ease,filter .3s ease}
.knkc-motion .knkc-photo{transition:scale .65s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.knkc-motion .knkc-interactive:hover{translate:0 -5px;box-shadow:0 16px 36px #00000014}.knkc-motion .knkc-photo:hover{scale:1.035}.knkc-motion a:hover,.knkc-motion button:hover{filter:brightness(1.04)}}
.knkc-motion button:active{scale:.97}
.knkc-no-motion *, .knkc-no-motion *::before,.knkc-no-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.knkc-no-motion{scroll-behavior:auto}
@media(max-width:767px){
 section[id]{scroll-margin-top:80px}
 nav[data-knk-nav]{padding:14px 0}
 nav[data-knk-nav]>div{padding-left:18px;padding-right:18px;gap:12px}
 [data-knk-image=logo]{width:var(--knkc-logo-mobile)!important;max-height:44px}
 nav[data-knk-nav]>div>a{min-width:0;gap:7px}
 nav[data-knk-nav]>div>a>div{padding-left:8px}
 nav[data-knk-nav]>div>a>div span{font-size:7px;letter-spacing:.09em}
 #knk-menu-toggle{min-width:40px;min-height:40px;display:grid;place-items:center;flex-shrink:0}
 #beranda{min-height:0;padding:112px 0 62px}
 #beranda>div{padding:0 24px;gap:34px;flex-direction:column}
 #beranda>div>div:first-child{width:100%;margin-top:0}
 #beranda h1{font-size:clamp(30px,8.2vw,38px);line-height:1.12;margin-bottom:20px;text-wrap:balance}
 #beranda p{font-size:13px;line-height:1.85;max-width:360px;margin-bottom:26px}
 #beranda>div>div:last-child{width:100%;height:395px;padding-bottom:44px}
 #beranda :has(>[data-knk-slide]){width:min(76vw,280px);height:350px;max-width:280px;aspect-ratio:4/5}
 #beranda [data-knk-slide]{border-width:6px;border-radius:28px}
 #beranda button[data-knk-consult]{min-height:50px;width:100%}
 #beranda button[data-knk-consult]>span:last-child{font-size:10px;padding-left:18px;padding-right:18px}
 #tentang{padding-top:64px;padding-bottom:40px}
 #tentang>div{padding-left:20px;padding-right:20px}
 #tentang>div>div:first-child{margin-bottom:110px}
 #tentang>div>div:first-child h4{font-size:19px;margin-bottom:22px}
 #tentang>div>div:first-child h2{font-size:clamp(24px,6.6vw,30px);line-height:1.32;max-width:340px;margin:0 auto 14px;text-wrap:balance}
 #tentang>div>div:first-child p{line-height:1.85}
 #tentang>div>div:first-child p:last-child{font-size:15px;max-width:350px;margin:0 auto 28px}
 #tentang :has(>[data-knk-image=doctor]){height:420px;border-radius:28px}
 #tentang :has(>[data-knk-image=doctor])+div{left:0;bottom:-24px;padding:22px;max-width:265px}
 #tentang :has(>[data-knk-image=doctor])+div p{font-size:11px!important;margin-bottom:16px!important}
 #tentang>div>div:last-child{margin-top:110px}
 #tentang>div>div:last-child>div:first-child{margin-bottom:48px}
 #tentang>div>div:last-child>div:first-child h2{font-size:31px;line-height:1.25;text-wrap:balance}
 #tentang>div>div:last-child>div:first-child p{font-size:14px;line-height:1.8}
 #tentang .line-clamp-2{-webkit-line-clamp:unset;display:block;overflow:visible}
 #tentang>div>div:last-child>div:last-child>div:not(:first-child){margin-bottom:32px}
 [data-knk-section=section_2]{margin-bottom:24px}
 [data-knk-section=section_2]>div{padding:0 16px}
 [data-knk-section=section_2] h3{font-size:44px}
 #testimoni{padding:80px 16px 56px;height:auto;min-height:0;overflow:visible}
 #testimoni>div:first-child{position:relative;top:auto;left:auto;transform:none;translate:none;padding:0;width:100%}
 #testimoni h2{font-size:clamp(31px,8.8vw,40px);line-height:1.15;text-wrap:balance}
 #testimoni>div:last-child{height:auto;margin-top:30px;padding:0;gap:12px;align-items:flex-start}
 #testimoni>div:last-child>div{width:calc(50% - 6px);min-width:0;margin-top:0}
 #testimoni>div:last-child>div:last-child{margin-top:18px}
 #testimoni>div:last-child>div>div{padding:13px 10px;border-radius:18px}
 #testimoni p{font-size:11px;line-height:1.65;overflow-wrap:anywhere}
 #testimoni img{width:27px;height:27px}
 #layanan{padding:68px 0}
 #layanan>div:first-child{padding:0 24px;margin-bottom:36px}
 #layanan h2{font-size:32px;line-height:1.22;text-wrap:balance}
 #layanan>div:first-child p{font-size:14px;line-height:1.8}
 #layanan>div:last-child{padding:0 16px}
 #layanan>div:last-child>div{padding:20px 16px;gap:24px;border-radius:14px}
 #layanan .rounded-3xl{padding:18px;border-radius:20px}
 #layanan .grid-cols-2{gap:10px;margin-bottom:22px}
 #layanan .grid-cols-2>div{height:145px;border-radius:12px}
 #layanan h3{font-size:28px;line-height:1.18}
 #layanan p{font-size:13px;line-height:1.8}
 #layanan .flex-wrap span{font-size:9px;letter-spacing:.04em;padding:8px 10px;white-space:normal}
 [data-knk-section=section_5]>div:first-child{height:340px}
 [data-knk-section=section_5]>div:first-child>div{padding:0 24px}
 [data-knk-section=section_5]>div:first-child h2{font-size:54px}
 [data-knk-section=section_5]>div:first-child p{font-size:9px}
 [data-knk-section=section_5]>div:last-child{padding:70px 16px}
 [data-knk-section=section_5]>div:last-child>div:first-child>div{margin-bottom:36px}
 [data-knk-section=section_5] h3{font-size:31px;line-height:1.4;text-wrap:balance}
 :has(>[data-knk-image=lobby]){height:350px}
 :has(>[data-knk-image=room]){height:240px}
 #lokasi{padding:12px 0 32px}
 #lokasi>div{padding:0 16px}
 #lokasi>div>div:first-child{margin-bottom:30px}
 #lokasi h2{font-size:36px}
 #lokasi>div>div:last-child{height:465px;border-radius:28px;border-width:5px}
 #lokasi :has(>[data-knk-image=map])>div{left:12px;right:12px;bottom:16px;padding:20px;border-radius:22px}
 #lokasi :has(>[data-knk-image=map]) p{font-size:12px;line-height:1.7}
 footer{padding-top:56px!important;margin-top:12px!important}
 footer>div:first-child{margin-bottom:60px;padding:0 24px}
 footer>div:first-child h2{font-size:35px;line-height:1.15;text-wrap:balance}
 footer>div:first-child p{font-size:14px;line-height:1.8}
 footer>div:last-child{padding-top:44px;padding-bottom:30px}
 footer .w-max{max-width:100%;overflow-wrap:anywhere;white-space:normal}
 [data-knk-consult][aria-label]{width:54px;height:54px}
}
@media(max-width:359px){#beranda>div{padding:0 18px}#beranda h1{font-size:29px}#tentang :has(>[data-knk-image=doctor]){height:365px}#layanan .rounded-3xl{padding:14px}#layanan .grid-cols-2>div{height:120px}#testimoni>div:last-child{flex-direction:column}#testimoni>div:last-child>div{width:100%}#testimoni p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.knkc-motion .knkc-photo:hover{scale:1}.knkc-motion .knkc-interactive:hover{translate:0 0}}
nav[data-knk-nav]>div>a>div{border-color:color-mix(in srgb,var(--knkc-accent) 45%,transparent)}
nav[data-knk-nav]>div>a>div span{color:color-mix(in srgb,var(--knkc-dark) 75%,var(--knkc-accent))}
#testimoni .knkc-interactive{color:var(--knkc-dark)}
#testimoni .knkc-interactive p{color:color-mix(in srgb,var(--knkc-dark) 85%,transparent)}
footer>div:first-child :is(h2,p){color:var(--knkc-dark)}
@media(max-width:767px){[data-knk-image=logo]{max-width:28vw}nav[data-knk-nav]>div>a>div{min-width:0}nav[data-knk-nav]>div>a>div span{overflow-wrap:anywhere}}
/* 1.2 — transparent at the top, solid after scrolling; normal-flow testimonials. */
nav[data-knk-nav]:not(.knkc-scrolled){background:transparent;backdrop-filter:none;box-shadow:none}
nav[data-knk-nav].knkc-scrolled{background:color-mix(in srgb,var(--knkc-nav) 96%,transparent);backdrop-filter:blur(16px);box-shadow:0 5px 28px #0000000d}
#testimoni{padding:100px 24px 80px;min-height:0;height:auto;display:block;overflow:visible}
#testimoni>div:first-child{position:relative;top:auto;left:auto;transform:none;translate:none;width:100%;padding:0}
#testimoni h2{max-width:880px;margin:0 auto;font-size:clamp(34px,5vw,64px);line-height:1.15;text-wrap:balance}
#testimoni>div:last-child{position:relative;height:auto;min-height:0;margin:42px auto 0;max-width:900px;padding:0;gap:24px;align-items:stretch}
#testimoni>div:last-child>div{flex:1;min-width:0;width:auto;margin-top:0}
#testimoni>div:last-child>div>div{width:100%;height:100%;max-width:none;padding:24px;border-radius:22px}
#testimoni .truncate{white-space:normal;overflow:visible;text-overflow:clip}
#testimoni p{font-size:14px;line-height:1.8;overflow-wrap:break-word}
#testimoni>div:last-child>div>div>div:first-child>div:first-child{min-width:0}
#tentang>div>div:first-child h2{max-width:850px;margin-left:auto;margin-right:auto;text-wrap:balance}
#tentang .line-clamp-2{-webkit-line-clamp:unset;display:block;overflow:visible}
#layanan .flex-wrap{row-gap:10px}
#layanan .flex-wrap span{white-space:normal}
#lokasi h3{line-height:1.3}
#lokasi p{overflow-wrap:break-word}
#beranda h1{text-wrap:balance}
@media(min-width:768px){#beranda{padding-top:118px;padding-bottom:76px}#tentang>div>div:last-child>div:last-child>div:not(:first-child){margin-bottom:48px}}
@media(max-width:767px){#testimoni{padding:70px 20px 56px}#testimoni h2{font-size:34px}#testimoni>div:last-child{margin-top:28px;gap:16px;flex-direction:column}#testimoni>div:last-child>div,#testimoni>div:last-child>div:last-child{width:100%;margin-top:0}#testimoni>div:last-child>div>div{padding:20px}#testimoni p{font-size:13px}#testimoni img{width:36px;height:36px}#layanan .grid-cols-2>div{min-width:0}#tentang>div>div:first-child h2{font-size:30px}}
