/*
  Cycology Sec — tema publik.
  Mengikuti sistem visual playerzero.ai: kontainer bergaris penuh, seksi
  dipisah garis atas, hairline 0.8px, tipografi Geist, aksen oranye.
*/

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,p,figure,blockquote{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg,canvas{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px;}

.cyco-skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  padding:10px 16px;background:var(--ink);color:#fff;border-radius:0 0 var(--r) 0;
}
.cyco-skip:focus{left:0;}

/* ---------------------------------------------------------------- kerangka */
.cyco-shell{
  max-width:var(--shell);
  margin:0 auto;
  border-left:var(--hair) solid var(--line);
  border-right:var(--hair) solid var(--line);
  min-height:100vh;
}

/* -------------------------------------------------------------- navigasi */
.cyco-nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:8px;
  height:64px;
  padding:0 max(24px, calc((100% - var(--shell)) / 2));
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:var(--hair) solid var(--line);
}

.cyco-logo{
  display:flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:500;letter-spacing:-.28px;text-transform:uppercase;
  white-space:nowrap;
}
.cyco-logo b{font-weight:600;color:var(--acc-deep);}
.cyco-mark{
  width:24px;height:24px;flex:none;object-fit:contain;display:block;
}
.cyco-logo b + *{margin-left:0;}

.cyco-nav-links{display:flex;align-items:center;gap:0;margin-left:16px;}
/* Setiap butir nav memakai bantalan pil yang sama, termasuk yang sedang tidak
   terpilih. Ukurannya jadi tetap, sehingga pil gelap pada menu yang terbuka
   hanya menutup butir itu tanpa menggeser butir di sebelahnya.

   `overflow:hidden` memotong label pil yang sedang meluncur naik dari bawah,
   jadi pilnya tampak muncul dari dalam butir, bukan melayang di atasnya. */
.cyco-nav-links a,
.cyco-menu-wrap summary{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;
  padding:8px 13px;border-radius:var(--r-pill);
}
.cyco-nav-links a{
  font-size:14px;font-weight:400;letter-spacing:normal;color:var(--muted);
}
.cyco-nav-links a[aria-current="page"] .cyco-nav-t{color:var(--ink);font-weight:500;}

/* Dua lapis label, meniru nuxaudio.id. Lapis polos (`.cyco-nav-t`) adalah teks
   yang terlihat sehari-hari. Lapis pil (`.cyco-nav-p`) memuat teks yang sama di
   atas bidang gelap, dan menunggu di bawah butir dalam keadaan mengecil lalu
   meluncur naik saat hover, menu terbuka, atau butirnya jadi halaman aktif.

   Karena butirnya `display:inline-flex`, lapis polos yang menentukan tinggi;
   lapis pil duduk di atasnya lewat posisi absolat, jadi ukuran butir tidak
   berubah sedikit pun ketika pil muncul. */
.cyco-nav-t,
.cyco-nav-p{
  align-items:center;gap:6px;
  transition:transform var(--dur-dup) var(--ease-dup),opacity var(--dur-dup) var(--ease-dup);
}
.cyco-nav-t{position:relative;z-index:1;display:inline-flex;}
.cyco-nav-p{
  position:absolute;inset:0;z-index:2;
  display:inline-flex;justify-content:center;
  background:var(--ink);color:#fff;font-weight:500;
  border-radius:inherit;
  opacity:0;transform:translateY(100%) scale(.6);
}
.cyco-nav-p .cyco-chev{border-color:#fff;}

.cyco-chev{
  width:5px;height:5px;flex:none;margin-top:-2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--dur) var(--ease-out);
}

/* ------------------------------------------------- dropdown nav (chevron) */
/* Butirnya sengaja tidak dijadikan acuan posisi; panel lebarnya ditambatkan
   pada bilah nav supaya bisa melebar penuh. */
.cyco-menu-wrap{position:static;}
.cyco-menu-wrap summary{
  font-size:14px;font-weight:400;letter-spacing:normal;
  color:var(--muted);cursor:pointer;list-style:none;
}
.cyco-menu-wrap summary::-webkit-details-marker{display:none;}

/* Hover pada peranti berpenunjuk: teks polos mengecil dan naik lalu hilang,
   pil gelapnya naik mengisi butir. Hanya saat ada kursor sungguhan, supaya
   layar sentuh tidak terjebak pada keadaan hover yang menempel. */
@media (hover:hover){
  .cyco-nav-links a:hover .cyco-nav-t,
  .cyco-menu-wrap summary:hover .cyco-nav-t{opacity:0;transform:translateY(-10%) scale(.6);}
  .cyco-nav-links a:hover .cyco-nav-p,
  .cyco-menu-wrap summary:hover .cyco-nav-p{opacity:1;transform:none;}
}
/* Menu yang sedang terbuka memakai penanda yang sama, sehingga keadaan terbuka
   tetap terbaca ketika dibuka lewat papan ketik atau sentuhan tanpa hover. */
.cyco-menu-wrap[open] .cyco-nav-t{opacity:0;transform:translateY(-10%) scale(.6);}
.cyco-menu-wrap[open] .cyco-nav-p{opacity:1;transform:none;}
.cyco-menu-wrap[open] summary .cyco-chev{transform:rotate(-135deg);}

/* Pendaran fokus tetap terlihat pada butir yang memakai pil, sebab hover tidak
   lagi mengubah latar menjadi abu muda. */
.cyco-nav-links a:focus-visible,
.cyco-menu-wrap summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
/* Panel memakai lembar penuh lebar bilah nav, mengikuti mega-menu NUX. Ia
   ditambatkan pada bilah nav, bukan pada butirnya, jadi `.cyco-menu-wrap`
   dibuat statis agar bilah nav yang jadi acuan posisi. Isinya tetap
   disejajarkan ke lebar shell halaman lewat bantalan mendatar, sehingga
   kolomnya lurus dengan konten di bawahnya. */
@keyframes cycoMenuIn{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}
/* Butir masuk dengan geser dari kanan lalu berhenti, seperti butir panel NUX.
   Kurvanya menyapu cepat di awal lalu melambat panjang di ujung. */
@keyframes cycoMenuItemIn{
  from{opacity:0;transform:translateX(28px);}
  to{opacity:1;transform:none;}
}
.cyco-menu{
  position:absolute;top:100%;left:0;right:0;
  z-index:50;overflow:hidden;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;
  padding:16px max(24px, calc((100% - var(--shell)) / 2)) 20px;
  background:var(--bg);
  /* Hanya sisi bawah yang bergaris; sisi atas sudah ditutup garis bawah bilah
     nav, jadi tidak ada dua garis yang menumpuk jadi satu garis tebal. */
  border-bottom:var(--hair) solid var(--line);
  box-shadow:0 24px 48px -24px rgba(26,24,23,.28);
}
.cyco-menu-wrap[open] .cyco-menu{animation:cycoMenuIn var(--dur-drop) var(--ease-out) both;}
/* Tiap butir menyusul dengan jeda bertahap; `--i` diisi urutan butir dari
   markup. `both` dipakai supaya keadaan awalnya sudah berlaku sebelum animasi
   berjalan, jadi tidak ada kedipan satu bingkai. */
.cyco-menu-wrap[open] .cyco-menu > *{
  animation:cycoMenuItemIn var(--dur-item) var(--ease-item) both;
  animation-delay:calc(var(--i, 0) * 40ms + 60ms);
}
.cyco-menu.is-3col{grid-template-columns:repeat(3,minmax(0,1fr));}
/* Daftar polos: satu baris teks per butir, tanpa baris keterangan kedua. */
.cyco-menu a{
  display:flex;align-items:center;padding:9px 12px;
  border-radius:var(--r-sm);font-size:15px;color:var(--ink);
}
.cyco-menu a:hover{background:var(--muted-2);}
.cyco-menu-all{
  grid-column:1 / -1;margin-top:6px;padding-top:9px;
  border-top:var(--hair) solid var(--line);
}
/* gap dipakai untuk memisahkan tanda panah; di dalam kontainer flex spasi
   putih pada markup dibuang, jadi jaraknya harus datang dari gap. */
.cyco-menu-all a{
  gap:7px;padding:9px 12px;color:var(--acc-deep);font-weight:500;
}
.cyco-menu-all a:hover{background:var(--muted-2);}

.cyco-nav-end{display:flex;align-items:center;gap:16px;margin-left:auto;}

/* Ajakan utama hanya muncul di dalam menu saat layar sempit, supaya bilah
   atas cukup memuat logo, bahasa, dan tombol menu dalam satu baris. */
.cyco-nav-cta{display:none;}

/* Pengalih bahasa: dua huruf, satu aktif ditandai garis bawah aksen. */
.cyco-lang{display:inline-flex;align-items:center;gap:2px;font-family:var(--mono);font-size:12px;}
.cyco-lang a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:26px;padding:0 7px;
  color:var(--dim);letter-spacing:.06em;border-radius:var(--r-sm);
  transition:color var(--dur-fast);
}
.cyco-lang a:hover{color:var(--ink);}
/* Penanda bahasa aktif memakai garis bawah teks, bukan inset box-shadow:
   box-shadow ikut melengkung mengikuti border-radius sehingga tampak seperti
   busur. */
.cyco-lang a.is-active{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
  text-decoration-thickness:2px;text-underline-offset:4px;
}

.cyco-burger{display:none;width:40px;height:40px;border:var(--hair) solid var(--line);
  border-radius:var(--r-sm);place-items:center;}
.cyco-burger span,.cyco-burger span::before,.cyco-burger span::after{
  content:"";display:block;width:15px;height:1.5px;background:var(--ink);position:relative;
  transition:transform var(--dur) var(--ease);
}
.cyco-burger span::before{position:absolute;top:-5px;}
.cyco-burger span::after{position:absolute;top:5px;}

/* ------------------------------------------------------------------ hero */
.cyco-hero{
  padding:48px 0 0;
  border-bottom:var(--hair) solid var(--line);
}
.cyco-hero-copy{max-width:640px;padding:0 24px 32px;}
.cyco-ic{fill:none;stroke:currentColor;}
.cyco-hero h1{
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  font-weight:400;
  color:var(--ink);
  text-wrap:balance;
}
.cyco-lede{
  margin-top:22px;max-width:520px;
  font-size:var(--fs-lead);line-height:1.62;letter-spacing:-.2px;color:var(--muted);
  font-weight:400;
}
.cyco-hero .cyco-btn{margin-top:28px;}

.cyco-hero-copy h1{max-width:820px;}

/* --------------------------------------------------------- panggung kota */
.pz-city{margin:0;overflow:hidden;}
.pz-stage{
  position:relative;margin:0 auto;max-width:1400px;padding:0 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.pz-stage canvas{display:block;width:100%;}
.pz-grain{
  position:absolute;inset:-40px 0 0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pz-fallback{display:none;width:100%;height:auto;color:var(--dim);}
.pz-city.is-gl .pz-fallback{display:none;}
.pz-city:not(.is-gl) canvas{display:none;}
.pz-city:not(.is-gl) .pz-fallback{display:block;}
.pz-city.is-off{display:none;}

/* --------------------------------------------------------------- tombol */
.cyco-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 24px;
  background:var(--acc-btn);color:#fff;
  border:var(--hair) solid var(--acc-btn);
  border-radius:var(--r);
  font-size:14px;font-weight:500;letter-spacing:-.35px;line-height:1;
  white-space:nowrap;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.cyco-btn:hover{background:var(--acc-deep);border-color:var(--acc-deep);}
.cyco-btn:active{transform:translateY(1px);}
.cyco-arw{font-size:14px;line-height:1.3;transition:transform var(--dur) var(--ease);}
.cyco-btn:hover .cyco-arw{transform:translateX(3px);}

.cyco-btn.is-ghost{background:transparent;color:var(--acc-deep);border-color:var(--acc-soft);}
.cyco-btn.is-ghost:hover{background:var(--acc-wash);border-color:var(--acc-deep);}

/* ------------------------------------------------------------- seksi */
.cyco-block{
  padding:var(--sec-y) var(--pad-x);
  border-top:var(--hair) solid var(--line);
}
.cyco-block:first-of-type{border-top:0;}

.cyco-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:32px 56px;align-items:start;
}
.cyco-head h2{
  font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--tr-head);
  font-weight:400;color:var(--ink);max-width:620px;text-wrap:balance;
}
.cyco-sub{
  margin-top:16px;max-width:560px;
  font-size:16px;line-height:1.6;letter-spacing:-.1px;color:var(--muted);
}

.cyco-eyebrow{
  font-size:var(--fs-label);font-weight:500;line-height:1.45;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--dim);
  padding-top:4px;
}

/* -------------------------------------------------------------- kartu */
.cyco-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:52px;
  border:var(--hair) solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg);
}
.cyco-cards > *{
  border-top:var(--hair) solid var(--line);border-left:var(--hair) solid var(--line);
}
.cyco-cards > *:nth-child(3n+1){border-left:0;}
.cyco-cards > *:nth-child(-n+3){border-top:0;}
.cyco-card{
  display:flex;flex-direction:column;
  padding:28px;background:var(--bg);
  transition:background var(--dur) var(--ease);
}
.cyco-card:hover{background:var(--tertiary);}
.cyco-ic{width:22px;height:22px;color:var(--ink);stroke-width:1.5;}
.cyco-tag{
  margin-top:20px;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.45;color:var(--dim);
}
.cyco-card h3{
  margin-top:10px;font-size:var(--fs-h3);line-height:1.34;letter-spacing:-.3px;
  font-weight:500;color:var(--ink);
}
.cyco-card > p:not(.cyco-tag):not(.cyco-face){margin-top:12px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted);flex:1;}
.cyco-card > p + p{margin-top:0;}
.cyco-more{
  margin-top:20px;font-size:13.5px;font-weight:500;letter-spacing:-.2px;color:var(--acc-deep);
  transition:gap var(--dur) var(--ease);
}
.cyco-more:hover{text-decoration:underline;text-underline-offset:3px;}

/* -------------------------------------------------------------- angka */
.cyco-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line);
}
.cyco-stats > div{padding:34px var(--pad-x);border-left:var(--hair) solid var(--line);}
.cyco-stats > div:first-child{border-left:0;}
.cyco-stats b{
  display:block;font-size:38px;line-height:1.16;letter-spacing:-1.1px;font-weight:400;color:var(--ink);
}
.cyco-stats span{
  display:block;margin-top:8px;font-size:var(--fs-small);line-height:1.5;color:var(--muted);max-width:230px;
}

/* -------------------------------------------------------------- langkah */
.cyco-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:52px;border:var(--hair) solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg);}
.cyco-steps > article{display:flex;flex-direction:column;padding:28px;background:var(--bg);
  border-top:var(--hair) solid var(--line);border-left:var(--hair) solid var(--line);}
.cyco-steps > article:nth-child(3n+1){border-left:0;}
.cyco-steps > article:nth-child(-n+3){border-top:0;}
.cyco-no{
  margin-top:22px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;
  line-height:1.45;color:var(--acc-deep);
}
.cyco-steps h3{margin-top:10px;font-size:var(--fs-h3);line-height:1.34;letter-spacing:-.3px;font-weight:500;}
.cyco-steps > article > p{margin-top:12px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted);flex:1;}

/* ------------------------------------------------------------- orang */
.cyco-lead{
  display:flex;align-items:center;gap:28px;margin-top:52px;padding:28px;
  border:var(--hair) solid var(--line);border-radius:var(--r-lg);background:var(--bg);
}
.cyco-lead-fig{
  flex:none;width:104px;height:104px;border-radius:var(--r);overflow:hidden;
  display:grid;place-items:center;
  background-color:var(--tertiary);background-size:cover;background-position:center;
  font-family:var(--mono);font-size:22px;letter-spacing:.04em;color:var(--dim);
}
.cyco-lead-copy h3{font-size:22px;line-height:1.25;letter-spacing:-.5px;font-weight:500;}
.cyco-lead-copy p{margin-top:8px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted);}
.cyco-lead-copy .cyco-tag{margin-top:0;margin-bottom:8px;}

/* Foto tim dimuat sebagai background supaya URL yang mati tidak memunculkan
   ikon gambar rusak; inisial di bawahnya tetap terlihat. */
.cyco-face{
  width:64px;height:64px;border-radius:var(--r-sm);margin-bottom:20px;
  display:grid;place-items:center;overflow:hidden;
  background-color:var(--tertiary);background-size:cover;background-position:center;
  font-family:var(--mono);font-size:17px;letter-spacing:.04em;color:var(--dim);
}
.cyco-role{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);}
.cyco-social{margin-top:14px;display:flex;gap:16px;font-size:13px;}
.cyco-social a{color:var(--acc-deep);}
.cyco-social a:hover{text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------------------------------------- faq */
.cyco-faq{margin-top:52px;border-top:var(--hair) solid var(--line);}
.cyco-faq-item{border-bottom:var(--hair) solid var(--line);}
.cyco-faq-item summary{
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:17px;line-height:1.35;letter-spacing:-.3px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.cyco-faq-item summary::-webkit-details-marker{display:none;}
.cyco-faq-item summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:4px;
  border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg);transition:transform var(--dur-drop) var(--ease-out);
}
.cyco-faq-item[open] summary::after{transform:rotate(-135deg);}
.cyco-faq-item summary:hover{color:var(--acc-deep);}
.cyco-faq-item p{
  padding:0 0 24px;max-width:760px;
  font-size:15px;line-height:1.68;color:var(--muted);
}
.cyco-faq-item p a{color:var(--acc-deep);text-decoration:underline;text-underline-offset:3px;}

/* Jawaban memudar sambil turun sedikit, memakai durasi dan easing yang sama
   dengan dropdown nav supaya semua panel di situs bergerak seirama.

   Hanya berlaku setelah atribut data-anim dipasang skrip saat pengguna
   membuka sendiri. Tanpa syarat itu, item yang sudah terbuka dari peladen
   ikut beranimasi ketika halaman dimuat dan teksnya sempat redup di bawah
   ambang kontras. */
@keyframes cycoReveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.cyco-faq-item[data-anim][open] p{animation:cycoReveal var(--dur-drop) var(--ease-out) both;}

/* -------------------------------------------------------------- prosa */
.cyco-prose{max-width:720px;padding:var(--sec-y) var(--pad-x);}
.cyco-prose h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-weight:400;}
.cyco-prose h3{margin-top:36px;font-size:19px;line-height:1.36;letter-spacing:-.3px;font-weight:500;}
.cyco-prose p{margin-top:16px;font-size:16px;line-height:1.68;color:var(--muted);}
.cyco-prose ul{margin:16px 0 0;padding-left:20px;color:var(--muted);}
.cyco-prose li{margin-top:8px;line-height:1.62;}
.cyco-updated{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--dim);}

/* -------------------------------------------------------------- kontak */
.cyco-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin-top:44px;border:var(--hair) solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);}
.cyco-contact > *{padding:26px;background:var(--bg);
  border-top:var(--hair) solid var(--line);border-left:var(--hair) solid var(--line);}
.cyco-contact > *:nth-child(2n+1){border-left:0;}
.cyco-contact > *:nth-child(-n+2){border-top:0;}
.cyco-contact dt,.cyco-contact .cyco-tag{margin:0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);line-height:1.45;}
.cyco-contact dd,.cyco-contact a{margin:10px 0 0;color:var(--ink);word-break:break-word;}
.cyco-contact a:hover{color:var(--acc-deep);}

/* ---------------------------------------------------------------- cta */
.cyco-cta{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin:0 var(--pad-x);padding:44px;
  background:var(--tertiary-2);border-radius:var(--r-xl);
}
.cyco-cta h2{font-size:clamp(22px,2.3vw,28px);line-height:1.2;letter-spacing:-.6px;font-weight:400;max-width:520px;}

/* -------------------------------------------------------------- footer */
.cyco-footer{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding:32px var(--pad-x) 40px;
  border-top:var(--hair) solid var(--line);margin-top:44px;
  font-size:13px;line-height:1.5;color:var(--dim);
}
.cyco-foot-links{display:flex;gap:20px;flex-wrap:wrap;}
.cyco-foot-links a{color:var(--dim);transition:color var(--dur-fast);}
.cyco-foot-links a:hover{color:var(--ink);}

/* ---------------------------------------------------------- gerak masuk */
@keyframes cycoRise{from{transform:translateY(14px);}to{transform:none;}}
.cyco-hero-copy > *{animation:cycoRise 620ms var(--ease) both;}
.cyco-hero-copy > *:nth-child(2){animation-delay:70ms;}
.cyco-hero-copy > *:nth-child(3){animation-delay:140ms;}

/* ------------------------------------------------------- lebar adaptif */
@media (max-width:1080px){
  .cyco-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cyco-cards > *{border-left:var(--hair) solid var(--line);border-top:var(--hair) solid var(--line);}
  .cyco-cards > *:nth-child(2n+1){border-left:0;}
  .cyco-cards > *:nth-child(-n+2){border-top:0;}
  .cyco-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cyco-stats > div:nth-child(odd){border-left:0;}
  .cyco-stats > div:nth-child(n+3){border-top:var(--hair) solid var(--line);}
  .cyco-head{grid-template-columns:1fr;gap:14px;}
  .cyco-eyebrow{padding-top:0;}
}

@media (max-width:920px){
  /* Nav tumbuh mengikuti menu yang terbuka agar latar putih menutup
     seluruh panel, bukan hanya bilah 58px. */
  .cyco-nav{height:auto;min-height:58px;flex-wrap:wrap;align-content:flex-start;row-gap:0;}
  .cyco-nav.is-open{background:var(--bg);}
  .cyco-logo{min-height:58px;}
  .cyco-burger{display:grid;margin-left:auto;align-self:center;}
  .cyco-nav-end .cyco-btn{display:none;}
  .cyco-nav-links a.cyco-nav-cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:10px;height:44px;padding:0 4px;border-radius:var(--r);
    background:var(--acc-btn);color:#fff;font-size:15px;font-weight:500;
  }
  .cyco-nav-links a.cyco-nav-cta:hover{background:var(--acc-deep);color:#fff;}
  .cyco-nav-links{
    order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;margin:0;
    width:100%;padding:0;max-height:0;overflow:hidden;
    transition:max-height var(--dur) var(--ease),padding var(--dur) var(--ease);
  }
  .cyco-nav.is-open .cyco-nav-links{max-height:1400px;padding:8px 0 14px;}
  .cyco-nav-links a{padding:11px 12px;font-size:15px;border-radius:var(--r-sm);}
  .cyco-nav-links a:hover{background:transparent;}
  .cyco-nav-links a[aria-current="page"] .cyco-nav-t{color:var(--acc-deep);}
  /* Di layar sempit butir nav jadi baris akordeon, bukan pil yang meluncur,
     jadi lapis pilnya dimatikan dan label polosnya selalu terlihat. Chevron
     didorong ke ujung kanan supaya tetap lurus dengan chevron menu lain. */
  .cyco-nav-p{display:none;}
  /* Aturan keadaan terbuka di berkas ini menyembunyikan label polos demi
     menampilkan pilnya. Di layar sempit pilnya sudah dimatikan, jadi label
     polos harus dikembalikan atau butir yang terbuka jadi tanpa teks. */
  .cyco-nav-t,
  .cyco-menu-wrap[open] .cyco-nav-t{opacity:1;transform:none;}
  .cyco-nav-links a .cyco-nav-t{flex:1;}
  .cyco-menu-wrap{width:100%;}
  /* Bantalan kiri-kanan tetap 12px baik terbuka maupun tertutup, jadi teksnya
     tidak bergeser saat bidang gelap muncul. */
  .cyco-menu-wrap summary{
    width:100%;padding:11px 12px;font-size:15px;
  }
  .cyco-menu-wrap summary .cyco-nav-t{justify-content:space-between;width:100%;}
  .cyco-menu-wrap[open] summary{border-radius:var(--r-sm);}
  .cyco-menu{
    position:static;transform:none;min-width:0;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;
    padding:2px 0 6px 12px;margin:0 0 4px;
  }
  /* Di layar sempit menu melebar penuh di dalam bilah, bukan mengambang, jadi
     animasi masuk yang mengandalkan posisi absolat tidak berlaku lagi. */
  .cyco-menu-wrap[open] .cyco-menu,
  .cyco-menu-wrap[open] .cyco-menu > *{animation:none;}
  .cyco-menu,
  .cyco-menu.is-2col,
  .cyco-menu.is-3col{grid-template-columns:1fr;min-width:0;}
  .cyco-menu a{padding:9px 4px;font-size:14px;}
  .cyco-menu a:hover{background:transparent;}
  .cyco-menu-all a{padding:9px 4px;}
  .cyco-hero{padding-top:36px;}
  .pz-city{margin-top:0;}
}

@media (max-width:760px){
  .cyco-cards,.cyco-steps,.cyco-contact{grid-template-columns:1fr;}
  .cyco-cards > *,.cyco-steps > article,.cyco-contact > *{
    border-left:0;border-top:var(--hair) solid var(--line);
  }
  .cyco-cards > *:first-child,.cyco-steps > article:first-child,.cyco-contact > *:first-child{border-top:0;}
  .cyco-stats{grid-template-columns:1fr;}
  .cyco-stats > div{border-left:0;}
  .cyco-stats > div + div{border-top:var(--hair) solid var(--line);}
  .cyco-stats > div{padding:24px var(--pad-x);}
  .cyco-stats b{font-size:32px;}
  .cyco-cta{padding:32px 24px;margin:0 var(--pad-x);border-radius:var(--r-lg);}
  .cyco-cta .cyco-btn{width:100%;justify-content:center;}
  .cyco-footer{flex-direction:column;align-items:flex-start;gap:12px;}
  .cyco-card,.cyco-steps > article{padding:24px 20px;}
  .cyco-prose{max-width:none;}
}

@media (max-width:520px){
  .cyco-logo{font-size:13.5px;}
  .cyco-btn{height:38px;padding:0 18px;font-size:13.5px;}
}

/* --------------------------------------------------- gerak dikurangi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .cyco-hero-copy > *{animation:none !important;transform:none !important;}
}

/* ------------------------------------------------------------- cetak */
@media print{
  .cyco-nav,.cyco-cta,.pz-city{display:none !important;}
  .cyco-shell{border:0;}
}