/* teman-bicara.id — halaman profil (lebih tenang dari motif studio; motif studio hanya di body.studio) */

/* Tipografi lebih kalem di luar Member Area */
body:not(.studio) main h1{font-size:clamp(2.2rem,4.8vw,3.4rem);line-height:1.08}
body:not(.studio) main h2{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.12}
body:not(.studio) .band{padding:80px 0}
body:not(.studio) main .h3{font-size:1.3rem;line-height:1.2}

/* ---------- Header & navigasi ---------- */
.site-top .wrap{height:68px}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.93rem;padding:.5em .7em;border-radius:8px;white-space:nowrap}
.site-nav a:hover{color:var(--violet);background:var(--wash)}
.site-nav a[aria-current=page]{color:var(--violet);box-shadow:inset 0 -2px 0 var(--violet);border-radius:0}
.site-nav .nav-cta{margin-left:10px;padding:.8em 1.2em;font-size:.92rem;color:#fff;border-radius:999px}
.site-nav .nav-cta:hover{color:#fff;background:var(--violet-deep)}
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){
  .menu-btn{display:flex}
  .site-nav{position:fixed;inset:68px 0 auto 0;max-height:calc(100dvh - 68px);overflow:auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 16px 20px;box-shadow:0 24px 40px -24px rgba(47,29,71,.35);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility 0s .18s}
  .site-nav.open{transform:none;opacity:1;visibility:visible;transition:opacity .18s,transform .18s}
  .site-nav a{padding:14px 6px;border-bottom:1px solid var(--line);border-radius:0;font-size:1.02rem}
  .site-nav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--violet);padding-left:14px}
  .site-nav .nav-cta{margin:16px 0 0;justify-content:center;border-bottom:0;border-radius:999px;padding:1em}
  .no-js .site-nav{position:static;opacity:1;visibility:visible;transform:none}
  .no-js .menu-btn{display:none}
}
@media (max-width:480px){.site-top .brand small{display:none}}

/* ---------- Layout umum ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:24px}}
.band--wash{background:linear-gradient(180deg,#F2F0FA,#F7F1F4)}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.head-row h2{margin:0}
.kicker{color:var(--mauve-ink);margin:0 0 16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.more{display:inline-flex;align-items:center;gap:.45em;font-weight:600;text-decoration:none;color:var(--violet)}
.more svg{width:1em;height:1em;transition:transform .15s}
.more:hover svg{transform:translateX(3px)}
.statement{font:500 clamp(1.3rem,2.6vw,1.8rem)/1.35 var(--f-display);letter-spacing:-.01em;max-width:34em;margin:0}

/* ---------- Hero ---------- */
.home-hero,.phero{position:relative;overflow:hidden}
.home-hero{padding:64px 0 80px}
.home-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.home-hero h1{max-width:14em}
.slogan{font:500 clamp(1.15rem,2vw,1.4rem)/1.3 var(--f-display);color:var(--orchid);margin:-4px 0 18px;font-style:italic}
.home-hero .lead{font-size:1.1rem}
.doors{display:grid;gap:12px}
.doors a{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;transition:border-color .15s,transform .15s,box-shadow .15s}
.doors a:hover{border-color:var(--orchid);transform:translateY(-2px);box-shadow:var(--shadow)}
.doors .mono{color:var(--mauve-ink);display:block;margin-bottom:6px}
.doors b{display:block;font:700 1.2rem/1.2 var(--f-display)}
.doors small{display:block;color:var(--ink-2);font-size:.9rem;margin-top:4px}
@media (max-width:900px){.home-hero{padding:40px 0 56px}.home-hero .wrap{grid-template-columns:1fr;gap:32px}}

.phero{padding:56px 0 60px;border-bottom:1px solid var(--line)}
.phero .wrap{position:relative;z-index:1}
.phero h1{max-width:18em}
.phero .lead{margin-bottom:0}
.phero--article{padding-bottom:40px}
.phero--article h1{max-width:22em;font-size:clamp(1.9rem,4vw,2.9rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;color:var(--ink-2);margin-bottom:26px;font-size:.72rem}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--violet);text-decoration:underline}
.motto{font:italic 500 1.2rem/1.3 var(--f-display);color:var(--orchid);margin:14px 0 0}
.byline{color:var(--ink-2);margin:0;font-size:.95rem}

/* ---------- Kartu & poin ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
.band--paper .card{background:#fff}
.card h3{font-size:1.3rem;margin-bottom:10px}
.card p{color:var(--ink-2)}
.card .more,.card .btn{margin-top:auto;align-self:flex-start}
.tag{color:var(--mauve-ink);margin:0 0 12px}
.benefit{font-size:.95rem;border-top:1px dashed var(--line);padding-top:12px}
.point>b{display:block;font:700 1.1rem/1.3 var(--f-display);margin-bottom:6px}
.point p{color:var(--ink-2);margin:0}
.issues{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.issues li{padding:18px 0;border-bottom:1px solid var(--line)}
.issues li>b{display:block;font:700 1.15rem/1.3 var(--f-display);margin-bottom:4px}
.issues span{color:var(--ink-2)}
.numbered{list-style:none;margin:0;padding:0;counter-reset:n;display:grid;gap:22px}
.numbered li{counter-increment:n;position:relative;padding-left:48px}
.numbered li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:2px;font:600 .8rem/1 var(--f-mono);color:var(--violet);background:var(--wash);border-radius:8px;padding:6px 7px}
.numbered li>b{display:block;font:700 1.08rem/1.35 var(--f-display);margin-bottom:4px}
.numbered p{color:var(--ink-2);margin:0}
.numbered.grid{display:grid}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{position:relative;padding-left:30px;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.checks b{color:var(--ink)}
.limit a{font-weight:600}

/* 5-R */
.r5{list-style:none;margin:36px 0 28px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:r}
.r5 li{counter-increment:r;position:relative;padding:22px 20px 22px 0;border-top:2px solid var(--violet)}
.r5 li::before{content:"R" counter(r);font:600 .72rem/1 var(--f-mono);letter-spacing:.1em;color:var(--mauve-ink);display:block;margin-bottom:10px}
.r5 li:last-child::before{content:"UP"}
.r5 li::after{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--violet)}
.r5 li>b{display:block;font:700 1.3rem/1.2 var(--f-display);margin-bottom:6px;color:var(--violet)}
.r5 span{color:var(--ink-2);font-size:.95rem}
@media (max-width:900px){
  .r5{grid-template-columns:1fr;border-left:2px solid var(--violet);margin-left:6px}
  .r5 li{border-top:0;padding:4px 0 22px 26px}
  .r5 li::after{top:6px;left:-7px}
}

/* Profil */
.profile{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}
.monogram-lg{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--wash) 70%);border:1px solid var(--line);display:grid;place-items:center}
.monogram-lg img{width:110px;height:110px}
.monogram-lg span{font:700 3.6rem/1 var(--f-display);color:var(--violet);letter-spacing:-.04em}
.creds{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.creds li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.4em .9em;font-size:.9rem}
.sub-cred{color:var(--mauve-ink);margin:-4px 0 20px;line-height:1.6}
.profile h3{margin-top:26px}
@media (max-width:760px){.profile{grid-template-columns:1fr;gap:20px}.monogram-lg{width:120px;height:120px}.monogram-lg img{width:68px;height:68px}.monogram-lg span{font-size:2.2rem}}

/* Program */
.program{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column}
.program h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0}
.program .motto{margin:6px 0 16px}
.program > p:not(.motto):not(.tag){color:var(--ink-2)}
.program .btn{margin-top:auto;align-self:flex-start}
.specs{display:grid;gap:0;margin:8px 0 24px;border-top:1px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.specs dt{font:500 .74rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mauve-ink)}
.specs dd{margin:0;font-weight:600;text-align:right}
.specs--row{display:flex;flex-wrap:wrap;gap:10px;border:0;margin:22px 0 0}
.specs--row div{flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.specs--row dd{text-align:left}
.sessions{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sessions li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.sessions .mono{color:var(--mauve-ink);display:block;margin-bottom:8px}
.sessions li>b{display:block;font:700 1.02rem/1.3 var(--f-display);margin-bottom:6px}
.sessions p{color:var(--ink-2);font-size:.92rem;margin:0}
@media (max-width:1000px){.sessions{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sessions{grid-template-columns:1fr}}
.mix{display:flex;height:46px;border-radius:12px;overflow:hidden;margin:28px 0 18px;font:600 .85rem/46px var(--f-mono)}
.mix span{text-align:center;color:#fff}
.mix span:nth-child(1){background:var(--lavender);color:var(--ink)}
.mix span:nth-child(2){background:var(--violet)}
.mix span:nth-child(3){background:var(--mauve)}

/* Klinik */
.quote{margin:0;font:500 clamp(1.3rem,2.4vw,1.7rem)/1.35 var(--f-display);color:var(--ink);border-left:4px solid var(--mauve);padding-left:22px}
.quote p{margin:0 0 14px}
.quote cite{font:500 .78rem/1.4 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--mauve-ink)}
.tier{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;padding:30px 0;border-top:1px solid var(--line)}
.tier:first-of-type{margin-top:28px}
.tier-head h3{margin-bottom:6px}
.tier-head p{color:var(--ink-2);font-size:.95rem;margin:0}
.ptable{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ptable [role=row]{display:grid;grid-template-columns:1.5fr 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.ptable .ptable-head{border-top:0;background:var(--cream);font:500 .7rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mauve-ink);padding-block:10px}
.ptable small{display:block;color:var(--ink-2);font-size:.85rem}
.ptable .dur{color:var(--ink-2);font-size:.93rem}
.price-cell{font:700 1.08rem/1.2 var(--f-display);color:var(--violet);text-align:right;white-space:nowrap}
.ptable-head span:last-child{text-align:right}
@media (max-width:860px){.tier{grid-template-columns:1fr;gap:14px}}
@media (max-width:520px){
  .ptable .ptable-head{display:none}
  .ptable [role=row]{grid-template-columns:1fr auto;border-top:1px solid var(--line)}
  .ptable [role=row]:nth-child(2){border-top:0}
  .ptable .dur{grid-column:1;grid-row:2;margin-top:-8px;font-size:.85rem}
  .price-cell{grid-row:1/3;grid-column:2}
}
.extra{margin-top:32px}
.extra .point{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px}
.addr{font-style:normal;margin-top:18px;color:var(--ink-2);line-height:1.6}
.addr b{color:var(--ink)}
.acct{font-size:.95rem;background:#fff;border:1px solid var(--line);padding:2px 8px;border-radius:6px;color:var(--ink);text-transform:none}

/* Artikel */
.acard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.band--paper .acard{background:#fff}
.acard .mono{color:var(--mauve-ink);margin:0 0 10px;font-size:.7rem}
.acard h3{font-size:1.2rem;line-height:1.25}
.acard h3 a{color:var(--ink);text-decoration:none}
.acard h3 a:hover{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.acard p:last-child{color:var(--ink-2);font-size:.95rem;margin:0}
.article-body{max-width:760px;padding:40px 0 72px}
.tldr{background:var(--wash);border-radius:var(--r);padding:20px 24px;margin-bottom:36px}
.tldr .mono{color:var(--violet);margin:0 0 8px}
.tldr p:last-child{margin:0}
.prose{font-size:1.06rem;line-height:1.75}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.75rem);margin:1.8em 0 .6em;line-height:1.2}
.prose h3{font-size:1.2rem;margin:1.6em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--orchid)}
.prose strong{color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose blockquote{margin:1.4em 0;padding:14px 20px;border-left:4px solid var(--mauve);background:var(--wash-2);border-radius:0 12px 12px 0}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.96rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:500 .72rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mauve-ink);background:var(--cream)}
.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--wash);padding:1px 5px;border-radius:4px}
.flow{list-style:none;padding:0 !important;margin:1.4em 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flow li{margin:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45em 1em;font-size:.93rem;font-weight:600;position:relative}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--orchid);font-weight:400}
.flow li{margin-right:12px}
.art-cta{margin:40px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.art-cta b{display:block;font:700 1.3rem/1.25 var(--f-display);margin-bottom:6px}
.art-cta p{color:var(--ink-2)}

/* CTA band */
.cta-band{background:var(--ink);color:#EDE6F6}
body:not(.studio) .cta-band{padding:72px 0}
.cta-band .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.cta-band h2{color:#fff}
.cta-band .lead{color:#D6CCE6;margin:0}
.cta-band .cta-row{margin:0;justify-content:flex-end}
.cta-band .btn{--bg:#fff;color:var(--ink);box-shadow:none}
.cta-band .btn:hover{--bg:var(--wash)}
.cta-band .btn--ghost{--bg:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.cta-band .btn--ghost:hover{--bg:rgba(255,255,255,.1)}
@media (max-width:860px){.cta-band .wrap{grid-template-columns:1fr;gap:20px}.cta-band .cta-row{justify-content:flex-start}}

/* Kontak & form */
.contacts .card{background:#fff}
.clist{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.clist li{display:grid;gap:1px;font-size:.96rem}
.clist span{font:500 .7rem/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mauve-ink)}
.clist a{font-weight:600;text-decoration:none}
.form-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.form-intro{position:sticky;top:96px}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr;gap:24px}.form-intro{position:static}}
.wform,.wdone{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.wform fieldset{border:0;padding:0;margin:0 0 28px;display:grid;gap:16px}
.wform legend{font:700 1.15rem/1.3 var(--f-display);margin-bottom:16px;padding:0}
.wform label{display:grid;gap:6px;font-weight:600;font-size:.94rem}
.wform input:not([type=checkbox]),.wform select,.wform textarea{font:400 1rem/1.4 var(--f-body);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.75em .9em;width:100%}
.wform textarea{resize:vertical}
.wform input:focus,.wform select:focus,.wform textarea:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px rgba(70,50,140,.15)}
.wform [aria-invalid=true]{border-color:var(--onair-ink) !important}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row--2-1{grid-template-columns:2fr 1fr}
@media (max-width:600px){.row,.row--2-1{grid-template-columns:1fr}.wform,.wdone{padding:20px}}
.group{display:grid;gap:8px}
.glabel{font-weight:600;font-size:.94rem;margin:0}
.wform .check{display:flex;align-items:flex-start;gap:10px;font-weight:500;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.7em .9em;cursor:pointer}
.wform .check:has(input:checked){border-color:var(--violet);background:#F7F5FC}
.wform .check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--violet);flex:none}
.wform .check small{display:block;color:var(--ink-2);font-weight:400}
.hp-field{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--onair-ink);font-weight:600;min-height:1.2em}
.err a{color:inherit}
.wdone{text-align:center}
.wdone:focus{outline:none}
.tick{width:60px;height:60px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:1.8rem;margin:0 auto 14px}
.wdone .btn{margin-top:8px;--bg:#1F7A4D}
.wdone .btn:hover{--bg:#18603C}

/* Footer 4 kolom */
footer .grid.grid-4{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
footer p{color:#CFC4E0}
.footer-slogan{font:500 .72rem/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lavender)}
@media (max-width:980px){footer .grid.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .grid.grid-4{grid-template-columns:1fr}}

/* Member Area: body.studio memakai site.css apa adanya */
body.nav-open{overflow:hidden}
@media (min-width:1101px){body.nav-open{overflow:auto}}
.contact-main{background:#fff}
.contact-main .clist a{font-size:1.1rem}