/* Nayla Syifa Efendi, portofolio
   Langit pastel, kaca buram, serif italic. Satu aktor: kupu-kupu yang pindah mengikuti scroll. */

@font-face{font-family:"Bodoni Moda";src:url(../assets/fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2");font-style:italic;font-weight:400 900;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-style:normal;font-weight:200 800;font-display:swap}

:root{
  --langit:#b7d5df;
  --langit-muda:#d9eaee;
  --kabut:#8fb4c2;
  --tinta:#12344a;
  --tinta-2:#2b5166;
  --kelopak:#fbd0e2;
  --magenta:#c43a83;
  --asap:rgba(47,92,112,.6);
  --kaca:rgba(255,255,255,.42);
  --garis:rgba(255,255,255,.72);
  --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--tinta);background:var(--langit);font-size:clamp(15px,1.02vw + 3px,17px);line-height:1.62;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none;padding:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:zoom-in}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:6px}

.skip{position:fixed;left:16px;top:-60px;z-index:50;background:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{top:12px}

/* Langit */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(60% 50% at 18% 88%,rgba(150,214,180,.55),transparent 70%),
    radial-gradient(50% 45% at 86% 12%,rgba(238,190,226,.5),transparent 70%),
    linear-gradient(165deg,var(--langit-muda),var(--langit) 55%,#a9cbd7)}
.float{position:absolute;filter:blur(7px);opacity:.62;will-change:transform}
.float--book{width:24vw;left:6vw;top:50vh;rotate:-14deg}
.float--pencil{width:15vw;left:26vw;top:62vh;rotate:6deg}
.float--cube{width:13vw;right:30vw;top:66vh;rotate:12deg;opacity:.5}
.float--bubble{width:17vw;left:9vw;top:13vh;rotate:-8deg;opacity:.45}
.float--plane{width:9vw;left:30vw;top:82vh;rotate:-6deg}
.float--blob{width:20vw;right:-5vw;top:30vh;opacity:.32;filter:blur(30px)}

/* Bilah atas */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gutter)}
.pill{background:var(--kelopak);color:#7a1d52;font-weight:700;font-size:.82rem;text-decoration:none;padding:7px 18px;border-radius:99px;box-shadow:0 0 0 1px rgba(255,255,255,.7) inset}
.bar nav{display:flex;gap:clamp(14px,2.4vw,34px);padding:7px 18px;border-radius:99px;background:rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar nav a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--tinta-2)}
.bar nav a:hover,.bar nav a[aria-current=true]{color:var(--tinta);font-weight:700}

/* Halaman */
.page{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:96px var(--gutter) 64px}
.page__in{width:100%;max-width:1220px;margin-inline:auto;position:relative;will-change:opacity,filter}
@media (min-width:1000px) and (min-height:680px){html{scroll-snap-type:y proximity}.page{scroll-snap-align:start}}
.folio{position:absolute;left:var(--gutter);bottom:20px;font-size:.78rem;font-weight:600;color:var(--tinta-2)}

h2,h3{font-weight:inherit}
.plate{position:relative;display:inline-block;font-family:var(--serif);font-style:italic;font-weight:500;color:#fff;font-size:clamp(2.5rem,5.2vw,4.7rem);line-height:1.08;padding:.2em .5em .24em;border-radius:22px;background:var(--asap);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-bottom:22px;text-shadow:0 1px 14px rgba(18,52,74,.25)}
.perch{position:absolute;right:-14px;top:-30px;width:1px;height:1px}

.pane{background:var(--kaca);border:1px solid var(--garis);border-radius:22px;padding:clamp(18px,2.2vw,28px);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pane p+p{margin-top:.8em}
.pane__label{font-weight:700;color:var(--tinta)}
.lead{font-family:var(--serif);font-style:italic;font-size:1.65em;line-height:1.2;font-weight:600}
.tag{display:table;background:var(--kelopak);color:#7a1d52;font-weight:600;font-size:.84rem;padding:3px 14px;border-radius:99px;margin-bottom:14px}

.dots li{position:relative;padding-left:20px;margin-top:.4em}
.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--magenta);opacity:.75}
.dots--wide{max-width:58ch;margin-top:14px}

/* Kotak-kotak */
.checker{position:absolute;width:150px;height:44px;--c:rgba(255,255,255,.9);
  background:conic-gradient(var(--c) 25%,transparent 0 50%,var(--c) 0 75%,transparent 0) 0 0/22px 22px;
  -webkit-mask:linear-gradient(90deg,#000 30%,transparent);mask:linear-gradient(90deg,#000 30%,transparent)}
.checker--tl{left:0;top:84px}
.checker--tr{right:0;top:84px;transform:scaleX(-1)}
.checker--bl{left:0;bottom:44px}
.checker--br{right:0;bottom:44px;transform:scaleX(-1)}

/* Hati */
.heart{position:absolute;fill:rgba(255,255,255,.62);width:30px}

/* Beranda */
.page--hero{padding-bottom:40px}
.hero{position:relative;display:grid}
.hero__glass{position:relative;border-radius:34px;border:1.5px solid var(--garis);background:linear-gradient(140deg,rgba(47,92,112,.56),rgba(70,120,142,.3));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);padding:clamp(34px,5vw,64px) 30% clamp(36px,5vw,62px) clamp(20px,5vw,68px);text-align:center;min-height:min(62vh,540px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero__title{font-family:var(--serif);font-style:italic;font-weight:500;color:#fff;font-size:clamp(4rem,12.4vw,10.8rem);line-height:1;letter-spacing:-.015em;text-shadow:0 2px 26px rgba(30,80,104,.5),0 1px 2px rgba(30,80,104,.35)}
.hero__name{margin-top:.5em;font-weight:700;font-size:clamp(1.1rem,2.1vw,1.7rem);color:#fff;background:var(--magenta);padding:.14em .8em .18em;border-radius:99px}
.hero__figure{position:absolute;right:clamp(0px,3vw,48px);bottom:0;height:calc(100% + 54px);width:auto;max-width:none;filter:drop-shadow(0 16px 26px rgba(18,52,74,.28))}
.perch--hero{right:30%;top:20px}
.heart--hero{right:33%;bottom:34px}
.contactline{display:flex;flex-wrap:wrap;gap:6px clamp(18px,3vw,44px);justify-content:center;margin-top:20px;font-weight:600;font-size:.92rem;color:var(--tinta)}
.contactline a{text-underline-offset:3px}

/* Tentang */
.grid-about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center}
.about__text .pane p:not(.lead){max-width:66ch}
.about__photo{position:relative;rotate:2.5deg}
.about__photo::before{content:"";position:absolute;inset:-12px -14px;border-radius:30px;background:rgba(255,255,255,.4);border:1px solid var(--garis);rotate:-4deg}
.about__photo img{position:relative;border-radius:24px;width:100%;object-fit:cover}

/* Pendidikan */
.grid-edu{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:center}
.edu__uni{font-weight:800;font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.25}
.edu__major{color:var(--tinta-2);font-weight:500;margin-top:4px}
.edu__facts{display:flex;gap:clamp(28px,5vw,64px);margin-top:26px}
.edu__facts dt{font-weight:600;font-size:.9rem;color:var(--tinta-2)}
.edu__facts dd{margin:0;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1}
.edu__facts small{font-family:var(--sans);font-style:normal;font-size:1rem;font-weight:500}
.edu__round{position:relative;justify-self:center;width:min(100%,440px)}
.edu__round img{border-radius:50%;border:8px solid rgba(255,255,255,.7);width:100%}
.heart--a{right:-6px;top:30px;width:44px}
.heart--b{left:4px;bottom:26px}

/* Sertifikasi */
.grid-cert{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(28px,6vw,84px);align-items:center}
.cert{position:relative;display:block;justify-self:center;width:min(100%,370px);rotate:-3deg;transition:rotate .35s ease,scale .35s ease}
.cert:hover{rotate:-1deg;scale:1.02}
.cert img{position:relative;border-radius:10px;box-shadow:0 18px 40px rgba(18,52,74,.25)}
.cert__sheet{position:absolute;inset:0;background:rgba(255,255,255,.55);border:1px solid var(--garis);border-radius:10px;rotate:7deg}

/* Keahlian */
.skills{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(14px,2vw,24px)}
.skills__col{background:var(--kaca);border:1px solid var(--garis);border-radius:22px;padding:clamp(16px,2vw,24px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.skills__col h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.2;margin-bottom:14px}
.skills__col ul{display:flex;flex-wrap:wrap;gap:10px}
.skills__col li{background:rgba(255,255,255,.6);border:1px solid var(--garis);border-radius:99px;padding:8px 18px;font-weight:600;line-height:1.3}
.skills__col:nth-child(2) li{background:rgba(251,208,226,.62)}

/* Magang */
.grid-intern{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center}
.collage{position:relative;aspect-ratio:1/.8}
.c{position:absolute}
.c button{display:block;width:100%}
.c img{width:100%;border-radius:12px;border:5px solid rgba(255,255,255,.82);box-shadow:0 12px 26px rgba(18,52,74,.2);aspect-ratio:var(--ar,auto);object-fit:cover;transition:scale .25s ease}
.c button:hover img{scale:1.03}
.c--1{left:0;top:0;width:68%;rotate:-2deg;z-index:2}
.c--2{right:0;top:7%;width:37%;rotate:3deg;z-index:3}
.c--3{left:2%;bottom:1%;width:42%;rotate:2deg;z-index:3}
.c--4{left:39%;bottom:-3%;width:32%;rotate:-3deg;z-index:4}
.c--5{right:0;bottom:5%;width:33%;rotate:4deg;z-index:3}

/* Pelatihan */
.certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.certs li{display:flex;flex-direction:column}
.certs__img{display:flex;align-items:center;justify-content:center;height:clamp(230px,36vh,330px);margin-bottom:16px}
.certs__img img{max-height:100%;width:auto;max-width:100%;border-radius:6px;box-shadow:0 10px 24px rgba(18,52,74,.22);rotate:-1.5deg;transition:rotate .25s ease,scale .25s ease}
.certs__img:hover img{rotate:0deg;scale:1.03}
.certs h3{font-weight:800;font-size:1.02rem;line-height:1.35}
.certs .pane p+p,.certs p+p{margin-top:0}
.certs__meta{font-size:.88rem;color:var(--tinta-2)}

/* Organisasi */
.orgline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:20px}
.orgline time{display:block;font-weight:700;font-size:.95rem;color:var(--magenta);margin-bottom:6px}
.orgline strong{display:block;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2}
.orgline span{color:var(--tinta-2)}

/* Modul */
.grid-modul{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.covers{position:relative;aspect-ratio:1/.98}
.cover{position:absolute;width:56%;transition:rotate .3s ease,scale .3s ease}
.cover img{border-radius:8px;box-shadow:0 18px 38px rgba(18,52,74,.28)}
.cover--a{left:0;top:0;rotate:-5deg;z-index:2}
.cover--b{right:0;bottom:0;rotate:4deg}
.cover:hover{scale:1.03;z-index:3}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.links--center{justify-content:center}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.92rem;padding:10px 20px;border-radius:99px;background:rgba(255,255,255,.62);border:1px solid #fff}
.btn:hover{background:#fff}
.btn--solid{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.btn--solid:hover{background:#a92c6e}

/* Kurikulum */
.kur__intro{max-width:70ch}
.addie{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:26px}
.addie li{position:relative;background:var(--kaca);border:1px solid var(--garis);border-radius:18px;padding:12px 16px 18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.addie li:nth-child(even){translate:0 16px}
.addie__l{display:block;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(3rem,6.6vw,5.4rem);line-height:1.05;color:var(--magenta)}
.addie h3{font-weight:800;font-size:1rem}
.addie p{font-size:.9rem;line-height:1.5;margin-top:4px;color:var(--tinta-2)}

/* Modul: daftar judul */
.modules{margin-top:14px;display:grid;gap:10px}
.modules strong{display:block;line-height:1.35}
.modules span{color:var(--tinta-2);font-size:.95em}

/* eARth */
.grid-earth{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:center}
.deck{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}
.deck button{display:block;width:100%;cursor:pointer;text-align:center}
.deck img{width:100%;border-radius:8px;border:3px solid transparent;transition:translate .2s ease}
.deck button:hover img{translate:0 -4px}
.deck button[aria-pressed=true] img{border-color:var(--magenta)}
.deck span{display:block;margin-top:6px;font-size:.8rem;font-weight:600;line-height:1.25}
.deck button[aria-pressed=true] span{font-weight:800}
.flip{justify-self:center;width:min(100%,340px)}
.flip__card{display:block;width:100%;aspect-ratio:709/1004;perspective:1400px;cursor:pointer;rotate:2deg}
.flip__inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease-in-out}
.flip__card[aria-pressed=true] .flip__inner{transform:rotateY(180deg)}
.flip__face{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 38px rgba(18,52,74,.28)}
.flip__face--back{transform:rotateY(180deg);visibility:hidden}
/* Sisi kartu ditukar tepat saat kartu tegak lurus: Safari tidak selalu menyembunyikan sisi belakang */
.flip__face{transition:visibility 0s .3s}
.flip__card[aria-pressed=true] .flip__face{visibility:hidden}
.flip__card[aria-pressed=true] .flip__face--back{visibility:visible}
.flip__hint{margin-top:14px;text-align:center;font-size:.86rem;font-weight:600;color:var(--tinta-2)}

/* Kontak */
.contact{text-align:center}
.plate--xl{font-size:clamp(3.6rem,10vw,8rem)}
.contact__lead{max-width:44ch;margin:6px auto 0;font-size:1.14em;font-weight:500}
.contact__where{margin-top:18px;font-weight:600;color:var(--tinta-2)}

/* Kupu-kupu */
.fly{position:fixed;left:0;top:0;width:64px;z-index:15;pointer-events:none;will-change:transform;filter:drop-shadow(0 0 12px rgba(240,120,185,.55));opacity:0}
.fly.is-on{opacity:1;transition:opacity .4s}
.wing{transform-box:fill-box}
.wing--l{transform-origin:100% 50%}
.wing--r{transform-origin:0 50%}
.fly.is-moving .wing--l{animation:flapL .22s ease-in-out infinite alternate}
.fly.is-moving .wing--r{animation:flapR .22s ease-in-out infinite alternate}
@keyframes flapL{to{transform:scaleX(.45)}}
@keyframes flapR{to{transform:scaleX(.45)}}

/* Tablet: foto mengikuti lebar kartu supaya judul tidak tertutup */
@media (min-width:761px) and (max-width:1240px){
  .hero__glass{padding-right:38%}
  .hero__title{font-size:clamp(3.5rem,11vw,7.5rem)}
  .hero__figure{right:0;height:min(calc(100% + 30px),62vw)}
  .perch--hero{right:40%}
}
/* Pembukaan: satu urutan saat halaman dimuat */
.js .hero__title{animation:focusIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.js .hero__figure{animation:figureIn .9s .15s ease-out backwards}
@keyframes focusIn{from{opacity:0;filter:blur(16px)}}
/* Foto hanya memudar: Safari di iPhone bisa macet di blur bila filter-nya dianimasikan */
@keyframes figureIn{from{opacity:0}to{opacity:1}}

/* Pratinjau */
.zoom{border:0;padding:0;background:none;margin:auto;max-width:92vw;max-height:92vh;overflow:visible}
.zoom::backdrop{background:rgba(18,52,74,.72);backdrop-filter:blur(6px)}
.zoom img{max-width:92vw;max-height:86vh;width:auto;border-radius:10px}
.zoom__close{display:block;margin:0 0 10px auto;background:#fff;padding:6px 16px;border-radius:99px;font-weight:700;font-size:.88rem;cursor:pointer}

/* Layar sedang */
@media (max-width:999px){
  .addie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .addie li:nth-child(even){translate:none}
  .addie li:last-child{grid-column:1/-1}
  .float--bubble{width:30vw}.float--book{width:38vw}.float--pencil{width:24vw}.float--cube{width:22vw}.float--plane{width:16vw}
}

/* Ponsel */
@media (max-width:760px){
  body{font-size:15.5px}
  .bar{padding:12px 14px}
  .pill{display:none}
  .bar nav{width:100%;justify-content:space-between;gap:6px;padding:7px 14px}
  .bar nav a{font-size:.8rem}
  .page{padding:84px 20px 56px;min-height:auto}
  .page--hero{min-height:100svh;padding-bottom:28px}
  .grid-about,.grid-edu,.grid-cert,.grid-intern,.grid-modul,.grid-earth,.skills,.orgline,.certs{grid-template-columns:minmax(0,1fr)}
  .certs__img{height:auto;max-height:340px}
  .certs__img img{max-height:340px}
  .flip{width:min(82%,300px);margin-top:4px}
  .deck{gap:6px}
  .deck span{font-size:.68rem}
  .hero__glass{padding:26px 14px 296px;min-height:0}
  .hero__figure{right:50%;translate:50% 0;bottom:0;height:282px;filter:none}
  .perch--hero{right:24px;top:16px}
  .heart--hero{right:26px;bottom:30px}
  .about__photo{max-width:78%;justify-self:center;order:-1;margin-top:8px}
  .edu__round{width:min(70%,260px)}
  .cert{width:min(74%,280px);margin:10px auto 18px}
  .collage{margin-top:12px}
  .covers{width:100%;max-width:330px;margin:0 auto 8px}
  .checker{width:100px;height:33px;background-size:16.5px 16.5px}
  .checker--bl,.checker--br{display:none}
  .plate{font-size:clamp(2.2rem,11vw,3rem);border-radius:18px}
  .perch{right:4px}
  .fly{width:44px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fly{display:none}
}
@media print{.sky,.fly,.bar{display:none}.page{min-height:0;break-inside:avoid}}