/* =====================================================================
   HOME — Fakultas Farmasi UMI · desain khas "Herbal Precision"
   Identitas: kefarmasian (kapsul, molekul/heksagon, daun herbal, mortar)
   Dipakai hanya di halaman beranda (di-load via section 'styles').
   ===================================================================== */

:root{
  --f-primary:#0e8f7e; --f-dark:#0a5b50; --f-darker:#06342d; --f-light:#35b39d;
  --f-mint:#eafaf5; --f-mint-2:#d6f3ea; --f-gold:#f5b301; --f-herbal:#3fc79a;
  --f-ink:#123; --f-muted:#5f7d76;
}

/* Motif heksagon (molekul) sebagai lapisan latar */
.fx-hex{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0l28 16v33L28 66 0 49V16z' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E");
  background-size:56px 100px;
}

/* ============================ HERO ============================ */
.f-hero{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(1200px 600px at 82% -10%, #12a58e 0%, var(--f-dark) 55%, var(--f-darker) 100%); }
.f-hero::before{ content:""; position:absolute; inset:0; opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0l28 16v33L28 66 0 49V16z' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E");
  background-size:56px 100px; }
.f-hero .container{ position:relative; z-index:2; }
.f-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center;
  padding:4.2rem 0 3.4rem; }
.f-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#bff3e6;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:.4rem .85rem; border-radius:50px; }
.f-eyebrow i{ color:var(--f-gold); }
.f-hero .hero-title{ font-family:'Poppins',sans-serif; font-weight:800; line-height:1.05;
  font-size:clamp(2.3rem,4.6vw,3.7rem); margin:1.1rem 0 .5rem; letter-spacing:-.02em; }
.f-hero .hero-title .accent{ color:var(--f-gold);
  background:linear-gradient(transparent 60%, rgba(245,179,1,.25) 0); }
.f-hero .lead{ color:#d7efe8; font-size:1.06rem; max-width:34rem; margin-bottom:1.6rem; }
.f-hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.7rem; }
.f-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:50px;
  padding:.8rem 1.5rem; transition:.22s; border:2px solid transparent; text-decoration:none; }
.f-btn-gold{ background:var(--f-gold); color:#3a2a00; }
.f-btn-gold:hover{ background:#ffc42e; transform:translateY(-2px); color:#3a2a00; box-shadow:0 12px 26px rgba(245,179,1,.35); }
.f-btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.f-btn-ghost:hover{ background: var(--farmasi-surface); color:var(--f-dark); transform:translateY(-2px); }
.f-trust{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; }
.f-trust span{ display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; color:#c8ece2; }
.f-trust i{ color:var(--f-gold); font-size:1.05rem; }

/* Visual kanan: kapsul + molekul + daun (murni CSS/SVG, ringan) */
.f-hero-art{ position:relative; aspect-ratio:1; max-width:440px; margin-inline:auto; }
.f-orb{ position:absolute; inset:8%; border-radius:50%;
  background:conic-gradient(from 210deg, rgba(63,199,154,.25), rgba(255,255,255,.05), rgba(63,199,154,.25));
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(2px); }
.f-orb::after{ content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px dashed rgba(255,255,255,.22); }
.f-capsule{ position:absolute; top:50%; left:50%; width:210px; height:96px;
  transform:translate(-50%,-50%) rotate(-32deg); border-radius:60px; overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.35); animation:f-float 6s ease-in-out infinite; }
.f-capsule i{ position:absolute; inset:0; }
.f-capsule .cap-a{ left:0; width:50%; background:linear-gradient(180deg,#ffffff,#e9fbf5); }
.f-capsule .cap-b{ right:0; width:50%; background:linear-gradient(180deg,var(--f-gold),#e29b00); }
.f-capsule .cap-line{ left:50%; width:3px; background:rgba(0,0,0,.08); transform:translateX(-1px); }
.f-leaf{ position:absolute; width:56px; height:56px; color:var(--f-herbal); opacity:.95;
  animation:f-float 5s ease-in-out infinite; }
.f-leaf.l1{ top:6%; right:14%; animation-delay:.4s; }
.f-leaf.l2{ bottom:10%; left:8%; color:#bff3e6; animation-delay:1.1s; }
.f-dot{ position:absolute; border-radius:50%; background:var(--f-gold); box-shadow:0 0 0 6px rgba(245,179,1,.15); }
.f-dot.d1{ width:14px; height:14px; top:18%; left:16%; }
.f-dot.d2{ width:10px; height:10px; bottom:22%; right:20%; background: var(--farmasi-surface); box-shadow:0 0 0 6px rgba(255,255,255,.14); }

/* Statistik hero (kartu kaca) */
.f-hero-stats{ position:relative; z-index:6; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14);
  border-radius:18px; overflow:hidden; margin-bottom:-1.4rem; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.f-hero-stats .hs{ background:rgba(6,52,45,.55); backdrop-filter:blur(6px); padding:1.75rem 1rem; text-align:center;
  color:#fff; text-decoration:none; transition:.2s; }
.f-hero-stats .hs:hover{ background:rgba(14,143,126,.65); }
.f-hero-stats .n{ font-family:'Poppins'; font-weight:800; font-size:2rem; line-height:1; color:var(--f-gold); }
.f-hero-stats .l{ font-size:.78rem; color:#cfeee6; margin-top:.55rem; letter-spacing:.02em; }

/* ============ Section shell ============ */
.f-sec{ padding:5rem 0; }
.f-sec.tight{ padding:3.4rem 0; }
.f-head{ max-width:44rem; margin:0 auto 2.6rem; text-align:center; }
.f-kicker{ font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--f-primary); display:inline-flex; align-items:center; gap:.5rem; }
.f-kicker::before,.f-kicker::after{ content:""; width:26px; height:2px; background:var(--f-gold); display:inline-block; }
.f-head h2{ font-family:'Poppins'; font-weight:800; color:var(--f-darker); font-size:clamp(1.7rem,3vw,2.3rem);
  margin:.6rem 0 .5rem; letter-spacing:-.01em; }
.f-head p{ color:var(--f-muted); margin:0; }

/* ============ Pilar (Catur Dharma) ============ */
.f-pillars{ margin-top:1.2rem; position:relative; z-index:3; }
.f-pillar{ background: var(--farmasi-surface); border:1px solid #e2efe9; border-radius:18px; padding:1.6rem 1.35rem; height:100%;
  box-shadow:0 10px 30px rgba(10,91,80,.06); transition:.25s; position:relative; overflow:hidden; }
.f-pillar:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(10,91,80,.14); border-color:var(--f-light); }
.f-hex-ic{ width:58px; height:64px; display:grid; place-items:center; color:#fff; font-size:1.5rem;
  margin-bottom:1rem; background:linear-gradient(160deg,var(--f-primary),var(--f-dark));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.f-pillar:nth-child(2) .f-hex-ic{ background:linear-gradient(160deg,var(--f-herbal),var(--f-primary)); }
.f-pillar:nth-child(3) .f-hex-ic{ background:linear-gradient(160deg,#1aa7d0,#0e7c9e); }
.f-pillar:nth-child(4) .f-hex-ic{ background:linear-gradient(160deg,var(--f-gold),#d99a00); }
.f-pillar h3{ font-size:1.08rem; font-weight:700; color:var(--f-darker); margin-bottom:.35rem; }
.f-pillar p{ font-size:.9rem; color:var(--f-muted); margin:0; }

/* ============ Program Studi ============ */
.f-prodi{ background:linear-gradient(180deg,#e7f1ed, #dcf1e9); }
.f-prodi-card{ position:relative; background: var(--farmasi-surface); border:1px solid #e2efe9; border-radius:20px;
  padding:1.9rem 1.6rem 1.6rem; height:100%; overflow:hidden; transition:.25s; }
.f-prodi-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--f-primary),var(--f-gold)); }
.f-prodi-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(10,91,80,.15); }
.f-prodi-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.f-cap-ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.4rem;
  background:var(--f-mint-2); color:var(--f-primary); }
.f-level{ font-size:.72rem; font-weight:700; letter-spacing:.1em; color:#fff; background:var(--f-primary);
  padding:.35rem .7rem; border-radius:50px; }
.f-prodi-card h3{ font-size:1.2rem; font-weight:700; color:var(--f-darker); margin-bottom:.5rem; }
.f-prodi-card h3 a{ color:inherit; text-decoration:none; }
.f-badge-akr{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600;
  padding:.3rem .7rem; border-radius:50px; background:var(--f-mint-2); color:var(--f-dark); margin-bottom:.8rem; }
.f-badge-akr i{ color:var(--f-primary); }
.f-prodi-card p{ color:var(--f-muted); font-size:.92rem; }
.f-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.9rem 0 1.1rem; }
.f-chip{ font-size:.76rem; color:var(--f-dark); background:var(--f-mint); border:1px solid var(--f-mint-2);
  padding:.28rem .65rem; border-radius:50px; }
.f-prodi-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--f-primary);
  text-decoration:none; }
.f-prodi-link:hover{ gap:.65rem; color:var(--f-dark); }

/* ============ Laboratorium (khas Farmasi) ============ */
.f-labs{ background:var(--f-darker); color:#fff; position:relative; overflow:hidden; }
.f-labs .f-head h2{ color:#fff; } .f-labs .f-head p{ color:#a9d6cb; }
.f-labs .f-kicker{ color:var(--f-herbal); }
.f-lab{ display:flex; gap:1rem; align-items:flex-start; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1.2rem; height:100%; transition:.22s; }
.f-lab:hover{ background:rgba(255,255,255,.08); transform:translateY(-4px); border-color:var(--f-herbal); }
.f-lab-ic{ flex:none; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--f-herbal),var(--f-primary)); color:#fff; font-size:1.3rem; }
.f-lab h3{ font-size:1rem; font-weight:700; margin-bottom:.25rem; color:#fff; }
.f-lab p{ font-size:.83rem; color:#a9d6cb; margin:0; }

/* ============ Riset Herbal band ============ */
.f-riset{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(900px 500px at 15% 20%, #14a58e, var(--f-dark) 70%); }
.f-riset .row{ position:relative; z-index:2; align-items:center; }
.f-riset h2{ font-family:'Poppins'; font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); }
.f-riset p{ color:#d7efe8; }
.f-riset-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.f-riset-stat{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:1.2rem; text-align:center; }
.f-riset-stat .n{ font-family:'Poppins'; font-weight:800; font-size:2rem; color:var(--f-gold); }
.f-riset-stat .l{ font-size:.82rem; color:#cfeee6; }

/* ============ Pimpinan ============ */
.f-pimp{ background:var(--f-mint); }
.f-pimp-card{ background: var(--farmasi-surface); border:1px solid #e2efe9; border-radius:16px; overflow:hidden; height:100%;
  text-align:center; text-decoration:none; display:block; transition:.25s; }
.f-pimp-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(10,91,80,.16); border-color:var(--f-light); }
.f-pimp-photo{ aspect-ratio:1/1; overflow:hidden; background:var(--f-mint-2); }
.f-pimp-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:.4s; }
.f-pimp-card:hover .f-pimp-photo img{ transform:scale(1.05); }
.f-pimp-b{ padding:.9rem .6rem 1.1rem; }
.f-pimp-b strong{ display:block; font-size:.9rem; color:var(--f-darker); line-height:1.25; }
.f-pimp-b small{ color:var(--f-muted); font-size:.76rem; }

/* ============ Berita ============ */
.f-news-card{ background: var(--farmasi-surface); border:1px solid #e6efec; border-radius:18px; overflow:hidden; height:100%;
  transition:.25s; display:flex; flex-direction:column; }
.f-news-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(10,91,80,.14); }
.f-news-thumb{ aspect-ratio:16/10; overflow:hidden; display:block; }
.f-news-thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.f-news-card:hover .f-news-thumb img{ transform:scale(1.06); }
.f-news-b{ padding:1.1rem 1.2rem 1.3rem; flex:1; display:flex; flex-direction:column; }
.f-news-cat{ align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--f-primary); background:var(--f-mint); padding:.25rem .6rem; border-radius:50px; margin-bottom:.6rem; }
.f-news-b h3{ font-size:1.02rem; font-weight:700; line-height:1.35; margin-bottom:.5rem; }
.f-news-b h3 a{ color:var(--f-darker); text-decoration:none; }
.f-news-b h3 a:hover{ color:var(--f-primary); }
.f-news-meta{ margin-top:auto; font-size:.8rem; color:var(--f-muted); display:flex; gap:.9rem; }

/* ============ CTA ============ */
.f-cta{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,var(--f-darker),var(--f-primary)); }
.f-cta .container{ position:relative; z-index:2; }
.f-cta h2{ font-family:'Poppins'; font-weight:800; font-size:clamp(1.6rem,2.6vw,2.2rem); }

/* ============ Animations & responsive ============ */
@keyframes f-float{ 0%,100%{ transform:translate(-50%,-50%) rotate(-32deg) translateY(0); }
  50%{ transform:translate(-50%,-50%) rotate(-32deg) translateY(-14px); } }
.f-leaf{ animation-name:f-leaf-float; }
@keyframes f-leaf-float{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-12px) rotate(8deg); } }

@media (max-width:991px){
  .f-hero-grid{ grid-template-columns:1fr; gap:1.5rem; padding:3rem 0 2.4rem; text-align:center; }
  .f-hero-cta,.f-trust{ justify-content:center; }
  .f-hero-art{ max-width:320px; order:-1; }
  .f-hero-stats{ grid-template-columns:repeat(2,1fr); margin-bottom:-2rem; }
}
@media (max-width:575px){
  .f-hero-stats{ grid-template-columns:repeat(2,1fr); }
  .f-sec{ padding:3.4rem 0; }
}
@media (prefers-reduced-motion:reduce){ .f-capsule,.f-leaf{ animation:none; } }

/* ============ HERO CAROUSEL (modern, khas Farmasi) ============ */
.f-hero-car{ position:relative; }
.f-hero-car .carousel-inner{ overflow:visible; min-height:260px; }
.f-hero-car .carousel-item{ transition:opacity .7s ease, transform .7s ease; }
.f-hero-car .carousel-item h1{ margin-top:.2rem; }
/* Indikator kapsul-pill */
.f-hero-dots{ display:flex; gap:.5rem; margin:.2rem 0 1.4rem; }
.f-hero-dots button{ width:26px; height:7px; border-radius:50px; border:0; padding:0;
  background:rgba(255,255,255,.28); transition:.3s; cursor:pointer; }
.f-hero-dots button:hover{ background:rgba(255,255,255,.5); }
.f-hero-dots button.active{ width:42px; background:var(--f-gold); }
@media (max-width:991px){
  .f-hero-car .carousel-inner{ min-height:0; }
  .f-hero-dots{ justify-content:center; }
}

/* ============ TANYA JAWAB (Q&A) ============ */
.f-faq{ background:linear-gradient(180deg,#e7f1ed,#dcf1e9); }
.f-faq-title{ font-family:'Poppins'; font-weight:800; color:var(--f-darker);
  font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.12; margin:.6rem 0 .8rem; }
.f-faq-sub{ color:var(--f-muted); margin-bottom:1.5rem; }
.f-faq-help{ display:flex; gap:.9rem; align-items:center; background: var(--farmasi-surface); border:1px solid #e2efe9;
  border-radius:16px; padding:1rem 1.1rem; box-shadow:0 10px 26px rgba(10,91,80,.07); }
.f-faq-help-ic{ flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--f-primary),var(--f-dark)); color:#fff; font-size:1.25rem; }
.f-faq-help strong{ display:block; color:var(--f-darker); font-size:.95rem; }
.f-faq-help a{ color:var(--f-primary); font-weight:600; font-size:.9rem; text-decoration:none; }
.f-faq-help a:hover{ color:var(--f-dark); }

/* Accordion distinctif */
.f-faq-acc .accordion-item{ background: var(--farmasi-surface); border:1px solid #e2efe9; border-radius:14px !important;
  margin-bottom:.75rem; overflow:hidden; box-shadow:0 6px 18px rgba(10,91,80,.05); }
.f-faq-acc .accordion-button{ font-family:'Poppins'; font-weight:600; color:var(--f-darker);
  font-size:1rem; padding:1.05rem 1.2rem; background: var(--farmasi-surface); box-shadow:none; gap:.85rem; }
.f-faq-acc .accordion-button:not(.collapsed){ color:var(--f-primary); background:var(--f-mint); }
.f-faq-acc .accordion-button:focus{ box-shadow:none; border-color:transparent; }
.f-faq-num{ flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-size:.85rem; font-weight:700; background:var(--f-mint-2); color:var(--f-primary); transition:.25s; }
.f-faq-acc .accordion-button:not(.collapsed) .f-faq-num{ background:var(--f-primary); color:#fff; }
.f-faq-acc .accordion-button::after{ background-size:1.1rem; }
.f-faq-acc .accordion-body{ color:var(--f-muted); padding:0 1.2rem 1.2rem 4rem; line-height:1.7; }
@media (max-width:575px){ .f-faq-acc .accordion-body{ padding-left:1.2rem; } }

/* =====================================================================
   POLISH PASS — transisi panel membulat, hero art, kartu premium
   ===================================================================== */

/* ---- Transisi "stacked panel": section naik & sudut atas membulat ---- */
.f-labs, .f-pimp, .f-faq, .f-cta{ position:relative; margin-top:-2.6rem;
  border-radius:2.6rem 2.6rem 0 0; }
.f-labs{ padding-top:calc(5rem + 2.6rem); z-index:2; }
.f-pimp{ padding-top:calc(5rem + 2.6rem); z-index:3; }
.f-faq{ padding-top:calc(5rem + 2.6rem); z-index:4; }
.f-cta{ padding-top:calc(3.4rem + 2.6rem); z-index:5; }
/* garis kilau tipis di bibir panel */
.f-labs::after, .f-pimp::after, .f-faq::after, .f-cta::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60px; height:5px; border-radius:50px; background:var(--f-gold); opacity:.9; margin-top:1.1rem; }
.f-riset{ position:relative; z-index:1; }

/* ---- Hero art: glow + orbit ganda + kilau kapsul ---- */
.f-glow{ position:absolute; top:50%; left:50%; width:70%; height:70%;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(63,199,154,.55), rgba(63,199,154,0) 68%); filter:blur(6px); }
.f-orb2{ position:absolute; inset:20%; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  animation:f-spin 24s linear infinite; }
.f-orb2::before{ content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px;
  border-radius:50%; background:var(--f-gold); transform:translateX(-50%); box-shadow:0 0 0 5px rgba(245,179,1,.18); }
.f-capsule .cap-shine{ position:absolute; left:10%; top:14%; width:34%; height:26%;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); border-radius:50%; filter:blur(1px); }
@keyframes f-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .f-orb2{ animation:none; } }

/* ---- Kartu lebih premium: border gradient halus + shadow lembut ---- */
.f-pillar, .f-prodi-card, .f-news-card, .f-pimp-card{ box-shadow:0 8px 26px rgba(10,91,80,.07); }
.f-pillar:hover, .f-prodi-card:hover, .f-news-card:hover{ box-shadow:0 24px 50px rgba(10,91,80,.16); }
.f-lab{ backdrop-filter:saturate(1.1); }

/* ---- Section head: garis aksen di bawah judul ---- */
.f-head h2{ position:relative; display:inline-block; }
.f-head h2::after{ content:""; display:block; width:54px; height:4px; border-radius:50px;
  background:linear-gradient(90deg,var(--f-primary),var(--f-gold)); margin:.7rem auto 0; }
.f-labs .f-head h2::after{ background:linear-gradient(90deg,var(--f-herbal),var(--f-gold)); }

/* Kartu lab sebagai tautan → tanpa garis bawah */
a.f-lab{ text-decoration:none; color:inherit; }

/* =====================================================================
   HERO ART — Logo Farmasi + animasi (mengambang, glow, orbit elektron)
   ===================================================================== */
.f-logo-art{ position:relative; aspect-ratio:1; max-width:460px; margin-inline:auto; }

/* Glow berdenyut di belakang logo */
.f-logo-art .f-glow{ position:absolute; inset:14%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(63,199,154,.55), rgba(63,199,154,0) 66%);
  filter:blur(10px); animation:f-pulse 4.5s ease-in-out infinite; }

/* Cincin orbit */
.f-ring{ position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,.20); }
.f-ring1{ inset:2%;  animation:f-spin 22s linear infinite; }
.f-ring2{ inset:15%; border-style:solid; border-color:rgba(255,255,255,.10);
  animation:f-spin 16s linear infinite reverse; }
.f-ring3{ inset:28%; border-color:rgba(255,255,255,.08); animation:f-spin 30s linear infinite; }

/* Elektron (titik) yang mengorbit di bibir cincin */
.f-electron{ position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:var(--f-gold); box-shadow:0 0 12px 3px rgba(245,179,1,.55); }
.f-ring2 .f-electron{ width:9px; height:9px; margin-left:-4.5px; top:-4.5px;
  background: var(--farmasi-surface); box-shadow:0 0 10px 2px rgba(255,255,255,.6); }

/* Logo: mengambang + bernapas + drop-shadow bercahaya */
.f-logo-hero{ position:absolute; top:50%; left:50%; width:60%; height:auto;
  transform:translate(-50%,-50%); transform-origin:center;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(63,199,154,.45));
  animation:f-hover 6s ease-in-out infinite; will-change:transform; }

/* Daun herbal */
.f-logo-art .f-leaf{ position:absolute; width:52px; height:52px; color:var(--f-herbal); opacity:.95; }
.f-logo-art .f-leaf.l1{ top:4%; right:12%; }
.f-logo-art .f-leaf.l2{ bottom:8%; left:6%; color:#bff3e6; }

@keyframes f-hover{ 0%,100%{ transform:translate(-50%,-50%) translateY(0) rotate(-1.5deg); }
  50%{ transform:translate(-50%,-50%) translateY(-16px) rotate(1.5deg); } }
@keyframes f-pulse{ 0%,100%{ transform:scale(.92); opacity:.75; } 50%{ transform:scale(1.06); opacity:1; } }
@keyframes f-spin{ to{ transform:rotate(360deg); } }

@media (max-width:991px){ .f-logo-art{ max-width:300px; } }
@media (prefers-reduced-motion:reduce){
  .f-logo-hero,.f-glow,.f-ring,.f-electron{ animation:none !important; }
}

/* =====================================================================
   PIMPINAN cards — versi modern (badge peran, scrim, hover reveal)
   ===================================================================== */
.f-pimp-card{ position:relative; display:block; height:100%; text-decoration:none;
  background: var(--farmasi-surface); border:1px solid #e2efe9; border-radius:20px; overflow:hidden;
  box-shadow:0 10px 30px rgba(10,91,80,.08); transition:transform .28s, box-shadow .28s, border-color .28s; }
.f-pimp-card:hover{ transform:translateY(-8px); box-shadow:0 28px 56px rgba(10,91,80,.20); border-color:var(--f-primary); }
.f-pimp-card.is-dekan{ border-color:var(--f-gold); box-shadow:0 12px 34px rgba(245,179,1,.18); }

.f-pimp-photo{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(180deg,#ffffff,var(--f-mint)); }
.f-pimp-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .5s ease; }
.f-pimp-card:hover .f-pimp-photo img{ transform:scale(1.06); }

/* Badge peran (kiri atas) */
.f-pimp-tag{ position:absolute; top:.7rem; left:.7rem; z-index:3; display:inline-flex; align-items:center;
  gap:.3rem; font-size:.68rem; font-weight:700; letter-spacing:.03em; color:#fff;
  background:rgba(14,143,126,.92); backdrop-filter:blur(2px); padding:.32rem .6rem; border-radius:50px;
  box-shadow:0 4px 12px rgba(6,52,45,.25); }
.f-pimp-tag.tag-dekan{ background:linear-gradient(135deg,#f5b301,#e29b00); color:#3a2a00; }
.f-pimp-tag.tag-dekan i{ color:#fff; }

/* Scrim gelap di bawah foto + tombol reveal */
.f-pimp-scrim{ position:absolute; inset:auto 0 0 0; height:45%; z-index:2;
  background:linear-gradient(180deg, rgba(6,52,45,0), rgba(6,52,45,.72));
  opacity:0; transition:opacity .3s; }
.f-pimp-card:hover .f-pimp-scrim{ opacity:1; }
.f-pimp-more{ position:absolute; left:0; right:0; bottom:.9rem; z-index:3; text-align:center;
  color:#fff; font-weight:600; font-size:.86rem; opacity:0; transform:translateY(8px);
  transition:opacity .3s, transform .3s; }
.f-pimp-card:hover .f-pimp-more{ opacity:1; transform:translateY(0); }

/* Footer nama */
.f-pimp-b{ display:block; padding:.95rem .7rem 1.15rem; text-align:center; position:relative; }
.f-pimp-b::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34px; height:3px; border-radius:50px; background:var(--f-gold); }
.f-pimp-card.is-dekan .f-pimp-b::before{ width:50px; }
.f-pimp-b .pimp-name{ display:block; color:var(--f-darker); font-weight:700; font-size:.92rem;
  line-height:1.28; margin-top:.5rem; }
@media (min-width:992px){ .f-pimp-b .pimp-name{ min-height:2.6em; } }

/* FIX: judul section harus di baris sendiri (kicker di atas, bukan sebaris) */
.f-head h2{ display:block; }

/* =====================================================================
   DARK MODE (home.css) — override token --f-* & elemen hardcoded.
   Selaras dgn [data-theme="dark"] pada <html>.
   ===================================================================== */
:root[data-theme="dark"]{
  --f-mint:#172621;      /* latar mint terang -> permukaan gelap */
  --f-mint-2:#22322c;
  --f-muted:#9db0aa;     /* teks sekunder -> terang */
}
/* Seksi dgn gradien putih hardcoded -> gelap */
:root[data-theme="dark"] .f-prodi{ background:linear-gradient(180deg,#0e1512,#131d19); }
:root[data-theme="dark"] .f-faq{ background:linear-gradient(180deg,#0e1512,#131d19); }
/* Judul/nama yg pakai --f-darker/--f-dark -> terang */
:root[data-theme="dark"] .f-head h2,
:root[data-theme="dark"] .f-pillar h3,
:root[data-theme="dark"] .f-prodi-card h3,
:root[data-theme="dark"] .f-pimp-b strong,
:root[data-theme="dark"] .f-pimp-b .pimp-name,
:root[data-theme="dark"] .f-news-b h3 a,
:root[data-theme="dark"] .f-faq-title,
:root[data-theme="dark"] .f-faq-help strong,
:root[data-theme="dark"] .f-faq-acc .accordion-button{ color:#e7efec; }
/* Badge/chip teks gelap -> terang */
:root[data-theme="dark"] .f-chip,
:root[data-theme="dark"] .f-badge-akr{ color:#bfe0d8; }
/* Border kartu hardcoded terang -> gelap */
:root[data-theme="dark"] .f-pillar,
:root[data-theme="dark"] .f-prodi-card,
:root[data-theme="dark"] .f-pimp-card,
:root[data-theme="dark"] .f-news-card,
:root[data-theme="dark"] .f-faq-help,
:root[data-theme="dark"] .f-faq-acc .accordion-item{ border-color:var(--farmasi-line); }

/* Slider kartu mobile dipindah ke theme.css sebagai utilitas reusable
   `.mobile-slider` (dipakai homepage & halaman Dosen). */