/* ===== Kusuma Nirmala — gaya bersama slide 1 (index.html) & slide 2 (tim.html) =====
   PALET WARNA (hanya 4 warna ini + teks gelap):
   biru muda #c4e9f2 · biru #7fbbdd · oranye #f58b05 · kuning #ffc22f      */
:root{--sky:#c4e9f2;--sea:#7fbbdd;--orange:#f58b05;--sun:#ffc22f;--ink:#2a4858;--ink2:#3a5a69;--eyebrow:#b85c00}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--sky)}
body{font-family:'Poppins',sans-serif;font-weight:500;color:var(--ink);background:var(--sky);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:500;line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(38px,6vw,64px);margin:14px 0 22px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow)}
.lead{font-size:18px;color:var(--ink2);line-height:1.9;max-width:560px}

/* ----- ikon (tanpa gambar tambahan) ----- */
.i{display:inline-block;width:1em;height:1em;background:currentColor;flex:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-menu{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.i-down{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m7-7-7 7-7-7'/%3E%3C/svg%3E")}
.i-ne{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E")}
.i-right{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E")}
.i-mail{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
.i-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E")}
.i-insta{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E")}

/* ----- kotak foto (placeholder + foto asli) ----- */
.photo{position:relative;overflow:hidden;border-radius:28px;min-height:160px;background:linear-gradient(135deg,var(--sea) 0 42%,var(--sun) 42% 78%,var(--sky) 78%)}
.photo.v2{background:linear-gradient(125deg,var(--sky) 0 38%,var(--sun) 38% 72%,var(--sea) 72%)}
.photo.v3{background:linear-gradient(120deg,var(--sea) 0 36%,var(--orange) 36% 72%,var(--sky) 72%)}
.photo.v4{background:linear-gradient(150deg,var(--sky) 0 25%,var(--sea) 25% 60%,var(--sun) 60%)}
.photo .sun{position:absolute;left:50%;top:30%;width:22%;max-width:90px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--sun);box-shadow:0 0 0 12px rgba(245,139,5,.35)}
.photo .cap{position:absolute;left:5%;right:5%;bottom:5%;padding:14px 18px;border-radius:24px;background:rgba(196,233,242,.88);text-align:center;font-size:14px;line-height:1.4}
.photo .cap::before{content:"";display:block;width:26px;height:26px;margin-bottom:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a4858' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") no-repeat}
.photo .cap::after{content:"Ganti dengan foto lokal Anda";display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* ----- header ----- */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--sea);border-bottom:3px solid var(--sun);transition:background .25s,border-color .25s}
header.over:not(.solid){background:transparent;border-bottom-color:transparent}
header.over:not(.solid) .brand{color:var(--sky)}
.bar{display:flex;align-items:center;justify-content:space-between;height:86px}
.brand{display:flex;align-items:center;gap:20px;font-size:22px;letter-spacing:-.02em}
.logo{position:relative;width:60px;height:56px;border-radius:55% 50% 50% 14%;background:var(--sun);display:grid;place-items:center;font-size:19px;overflow:hidden}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.logo b{font-weight:500}
.menu-btn{display:flex;align-items:center;gap:12px;background:var(--orange);color:var(--ink);border:0;border-radius:16px;padding:14px 22px;font:inherit;font-size:18px;cursor:pointer}
.menu-btn .i{font-size:24px}
#nav{display:none;position:absolute;right:24px;top:84px;background:var(--sky);border:3px solid var(--sun);border-radius:20px;box-shadow:0 12px 40px rgba(42,72,88,.2);padding:10px;min-width:220px}
#nav.open{display:block}
#nav a{display:block;padding:12px 16px;border-radius:12px}
#nav a:hover{background:var(--sun)}

/* ----- tombol ----- */
.btn{display:inline-flex;align-items:center;gap:14px;border-radius:999px;padding:20px 38px;font:inherit;font-size:19px;border:0;cursor:pointer;color:var(--ink)}
.btn-o{background:var(--orange);box-shadow:0 14px 28px rgba(245,139,5,.3)}
.btn-b{background:var(--sea);font-size:17px;padding:16px 26px}
.btn-y{background:var(--sun);font-size:17px;padding:16px 26px}

/* ================= SLIDE 1 ================= */
/* HERO: foto utuh (tidak terpotong) + latar blur dari foto yang sama.
   UBAH TINGGI HERO: ganti angka 4/5 di bawah (4/6 = lebih panjang, 4/4 = lebih pendek) */
.hero{position:relative;aspect-ratio:4/5;display:block;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--sea) 0 40%,var(--sun) 40% 75%,var(--sky) 75%)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%}
.hero-bg .blur{object-fit:cover;filter:blur(18px);transform:scale(1.1)}
.hero-bg .main{object-fit:contain}
.hero-shade{position:absolute;inset:0;background:rgba(42,72,88,.5)}
.hero-in{position:absolute;inset:0;display:grid;place-content:center;padding:90px 24px 24px}
.hero h1{font-size:clamp(44px,9vw,120px);letter-spacing:-.04em;line-height:1;color:var(--sky)}
.hero .sub{margin-top:36px;font-size:clamp(18px,2.6vw,32px);font-style:italic;color:var(--sun)}

.pad{padding:90px 0}
.about{background:var(--sun)}
.about .eyebrow{color:var(--ink)}
.about .lead{color:var(--ink)}
.about .lead+.lead{margin-top:20px}
.about h2{font-size:clamp(46px,7vw,92px);letter-spacing:-.04em;line-height:1}

/* 10 sesi: pita judul + foto di kiri, teks di kanan */
.journey{background:var(--sea)}
.journey-title{background:var(--orange);padding:34px 24px;text-align:center}
.journey-title h2{margin:0;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
.journey-body{padding:56px 0 90px}
.journey .lead.intro{text-align:center;margin:0 auto 56px;color:var(--ink)}
.cards{display:grid;grid-template-columns:1fr;gap:56px}
.card{display:grid;grid-template-columns:1fr;align-content:start}
.card .photo{aspect-ratio:2/3;min-height:0;border-radius:20px;width:100%;max-width:340px}
.card .no{display:flex;align-items:center;gap:20px;margin:24px 0 8px;font-size:14px;letter-spacing:.2em;color:var(--ink)}
.card .no::after{content:"";width:56px;height:3px;background:var(--orange);border-radius:3px}
.card h3{font-size:clamp(26px,2.6vw,32px);letter-spacing:-.02em;margin-bottom:14px}
.card p{color:var(--ink);font-size:17px;line-height:1.8}

/* narahubung */
.contact{background:var(--sky);padding:110px 0 100px;position:relative}
.badge{position:absolute;right:max(24px,calc((100% - 1100px)/2 + 24px));top:-48px;width:112px;height:112px;border-radius:50%;background:var(--orange);display:grid;place-items:center;text-align:center;font-size:13px;line-height:1.3;padding:14px;transform:rotate(8deg)}
.big{font-size:clamp(32px,4.4vw,56px);max-width:820px;margin:0 0 80px;padding-right:90px}
.contact-grid{display:grid;gap:44px;align-items:start}
.contact .eyebrow{color:var(--ink)}
.contact h2.mari{font-size:clamp(46px,7vw,86px)}
.contact .lead{color:var(--ink)}
.frame{border-radius:44px;background:var(--sea);padding:24px 24px 0;overflow:hidden;width:100%;max-width:600px}
.frame .photo{aspect-ratio:16/11;border-radius:32px}
.info{background:var(--sun);margin:24px -24px 0;padding:36px 28px 32px}
.info .eyebrow{color:var(--ink)}
.info h3{font-size:clamp(28px,3.4vw,40px);margin:10px 0 26px;letter-spacing:-.02em}
.row{display:flex;align-items:center;gap:18px;background:var(--sky);border-radius:24px;padding:12px 18px 12px 12px;margin-bottom:14px}
.row .ic{width:56px;height:56px;border-radius:16px;background:var(--orange);display:grid;place-items:center;font-size:26px}
.row small{display:block;font-size:14px;color:var(--ink2);line-height:1.3}
.row b{font-weight:500;font-size:clamp(15px,4.2vw,20px);word-break:break-all;line-height:1.4}
footer.dark{background:var(--ink);color:var(--sky);padding:56px 0 64px}
footer.dark p{margin-bottom:26px;font-size:18px}
footer.dark a{color:var(--sun);font-size:22px;display:inline-flex;align-items:center;gap:10px}

/* ================= SLIDE 2 ================= */
body.tim{background:var(--sky);padding-top:89px}
.tim-head{text-align:center;padding:90px 0 50px}
.tim-head h2{font-size:clamp(42px,6vw,70px);margin:18px auto}
.tim-head .lead{margin:0 auto;font-size:17px;line-height:1.8;max-width:460px}
.arch{position:relative;aspect-ratio:1/1.12;overflow:hidden;background:var(--sea);border:8px solid var(--sea);border-radius:999px 999px 28px 28px;box-shadow:10px 10px 0 var(--sun)}
.arch .photo{position:absolute;inset:0;height:100%;min-height:0;border-radius:0}
.arch .cap{font-size:13px}
.person{text-align:center}
.person .role{font-size:13px;letter-spacing:.2em;color:var(--eyebrow);margin-top:34px}
.person h3{font-size:30px;letter-spacing:-.02em;margin:4px 0}
.person p{color:var(--ink2);font-size:15px}
.dosen{width:min(260px,62%);margin:30px auto 0}
.divider{display:flex;align-items:center;gap:20px;margin:70px 0 44px;font-size:14px;letter-spacing:.2em;color:var(--ink)}
.divider::before,.divider::after{content:"";flex:1;height:3px;background:var(--orange);border-radius:3px}
.grid-tim{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 28px}
.grid-tim .person{width:calc(50% - 14px)}
.grid-tim .person h3{font-size:22px;margin-top:22px}
.ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:70px 0 80px}
.orange{background:var(--orange);padding:46px 0 56px}
.orange h3{font-size:32px;margin-bottom:22px}
.orange a{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:18px}
.orange .i{font-size:24px}

/* ================= LAPTOP ================= */
@media(min-width:760px){
 .hero{aspect-ratio:16/10}
 .grid-tim .person{width:200px}
 .dosen{width:300px}
}
@media(min-width:1000px){
 /* narahubung: teks di kiri, foto + kontak di kanan */
 .contact-grid{grid-template-columns:1fr 1fr;gap:70px}
 .contact-text{position:sticky;top:130px}
 .frame{justify-self:end}
}
@media(min-width:640px){
 .card{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:36px}
 .card .photo{grid-row:1/4;grid-column:1;max-width:none}
 .card .no,.card h3,.card p{grid-column:2}
 .card .no{margin:6px 0 14px}
}
@media(min-width:1000px){.cards{grid-template-columns:repeat(2,1fr);gap:64px 56px}}