/* ==========================================================================
   tentang-page.css — "Cerita & Struktur" motion layer for Tentang Kami.
   Scoped entirely to #tentang-page. Does NOT touch :root, admin, or other
   public pages. Mirrors the reveal-on-scroll pattern used on the homepage
   (home-premium.css) but with its own class names (tp-*) to stay isolated.
   ========================================================================== */

#tentang-page{ overflow-x:clip; }

/* ---------- scroll reveal ---------- */
#tentang-page .tp-reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,.8,.28,1), transform .8s cubic-bezier(.16,.8,.28,1); }
#tentang-page .tp-reveal.in-view{ opacity:1; transform:none; }
#tentang-page .tp-reveal-scale{ opacity:0; transform:translateY(18px) scale(.96); transition:opacity 1s cubic-bezier(.16,.8,.28,1), transform 1s cubic-bezier(.16,.8,.28,1); }
#tentang-page .tp-reveal-scale.in-view{ opacity:1; transform:none; }

/* ---------- section shell ---------- */
#tentang-page .tp-section{ max-width:1100px; margin:0 auto; padding:88px 24px; }
#tentang-page .tp-section-head{ text-align:center; max-width:640px; margin:0 auto 46px; }
#tentang-page .tp-eyebrow{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px; }
#tentang-page .tp-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(28px,3.6vw,40px); color:var(--herbal); margin:0 0 12px; line-height:1.15; }
#tentang-page .tp-desc{ color:var(--muted); font-size:15px; line-height:1.75; margin:0; }
#tentang-page .tp-motto{ font-family:'Cormorant Garamond',serif; font-style:italic; }

/* ---------- hero intro — honeycomb glass ---------- */
#tentang-page .tp-hero{
  position:relative; overflow:hidden; padding:70px 24px 62px; color:#e8efe9;
  background:
    radial-gradient(900px 520px at 80% -15%, rgba(130,98,42,.38), transparent 62%),
    radial-gradient(600px 420px at 55% 105%, rgba(90,130,60,.18), transparent 65%),
    linear-gradient(160deg, #163a19 0%, #0e2a12 55%, #0a2410 100%);
}
#tentang-page .tp-hero-hex{
  position:absolute; left:-40px; top:-40px; width:640px; max-width:60%; height:auto; opacity:.95; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg, black 28%, rgba(0,0,0,.55) 52%, transparent 76%);
  mask-image:linear-gradient(100deg, black 28%, rgba(0,0,0,.55) 52%, transparent 76%);
}
#tentang-page .tp-hero-leaves-tr{ position:absolute; right:-60px; top:-60px; width:420px; max-width:46%; height:auto; opacity:.95; z-index:0; pointer-events:none; }
#tentang-page .tp-hero-leaves-bl{ position:absolute; left:-50px; bottom:-60px; width:280px; max-width:36%; height:auto; opacity:.9; z-index:0; pointer-events:none; }
#tentang-page .tp-hero-sparkle{ position:absolute; z-index:0; border-radius:50%; background:radial-gradient(circle, #ffe9bf 0%, rgba(255,220,150,0) 72%); pointer-events:none; }
#tentang-page .tp-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
#tentang-page .tp-hero-eyebrow{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:12px; }
#tentang-page .tp-hero-h1{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(32px,4.6vw,48px); line-height:1.15; margin:0 0 16px; color:#f3efe4; }
#tentang-page .tp-hero-h1 em{ font-style:italic; color:var(--gold); }
#tentang-page .tp-hero-p{ color:#c9d4cc; font-size:15px; line-height:1.8; margin:0 auto; max-width:600px; }
#tentang-page .tp-hero-p strong{ color:#f3efe4; }
#tentang-page .tp-hero-stats{ display:flex; gap:16px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
#tentang-page .tp-hero-stat{
  position:relative; min-width:148px; padding:16px 24px; border-radius:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.01));
  border:1px solid rgba(233,196,140,.5);
  box-shadow:0 0 0 1px rgba(233,196,140,.1), 0 14px 32px rgba(0,0,0,.38), 0 0 30px rgba(216,168,90,.2);
  transition:transform .3s cubic-bezier(.16,.8,.28,1), box-shadow .3s ease;
}
#tentang-page .tp-hero-stat:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(233,196,140,.16), 0 18px 36px rgba(0,0,0,.4), 0 0 36px rgba(216,168,90,.3); }
#tentang-page .tp-hero-stat-num{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:25px; color:var(--gold); line-height:1.1; }
#tentang-page .tp-hero-stat-label{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:#cdd8cf; margin-top:4px; font-weight:600; }
@media (max-width:640px){
  #tentang-page .tp-hero{ padding:56px 18px 48px; }
  #tentang-page .tp-hero-hex{ width:440px; max-width:78%; opacity:.7; }
  #tentang-page .tp-hero-leaves-tr{ width:280px; max-width:56%; }
  #tentang-page .tp-hero-leaves-bl{ display:none; }
  #tentang-page .tp-hero-stat{ min-width:120px; padding:14px 18px; }
}
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-hero-stat{ transition:none; }
}

/* ---------- motto strip ---------- */
#tentang-page .tp-motto-strip{ background:#0a2410; padding:26px 24px; text-align:center; position:relative; overflow:hidden; }
#tentang-page .tp-motto-strip-inner{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; color:#f3efe4; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(16px,2.4vw,22px); letter-spacing:.03em; position:relative; }
#tentang-page .tp-motto-strip-inner span{ color:var(--gold); }
#tentang-page .tp-motto-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.7; flex:0 0 auto; }

/* ---------- cerita kami / book frame ---------- */
#tentang-page .tp-book-frame{ position:relative; border-radius:20px; overflow:hidden; box-shadow:0 26px 54px rgba(31,95,33,.18); transform:rotate(-1.2deg); transition:transform .5s cubic-bezier(.16,.8,.28,1), box-shadow .5s ease; }
#tentang-page .tp-book-frame:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:0 34px 64px rgba(31,95,33,.24); }
#tentang-page .tp-book-frame img{ width:100%; display:block; }
#tentang-page .tp-book-badge{ position:absolute; bottom:14px; left:14px; right:14px; background:rgba(22,63,23,.82); backdrop-filter:blur(6px); color:#f3efe4; font-size:11.5px; padding:10px 14px; border-radius:12px; line-height:1.5; }
#tentang-page .tp-book-badge strong{ color:var(--gold); }

/* ---------- Visi & Misi ---------- */
#tentang-page .tp-vismis-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:28px; }
@media(max-width:820px){ #tentang-page .tp-vismis-grid{ grid-template-columns:1fr; } }
#tentang-page .tp-vismis-card{ background:#fff; border:1px solid var(--border); border-radius:22px; padding:34px 30px; box-shadow:0 8px 24px rgba(31,95,33,.06); transition:transform .4s cubic-bezier(.16,.8,.28,1), box-shadow .4s ease; }
#tentang-page .tp-vismis-card:not(.tp-vismis-card-visi):hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(31,95,33,.12); }
#tentang-page .tp-vismis-card-visi{ background:linear-gradient(160deg,var(--herbal-deep),var(--herbal)); color:#e8efe9; border:none; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
#tentang-page .tp-vismis-card-visi:hover{ transform:translateY(-5px); box-shadow:0 26px 52px rgba(22,63,23,.28); }
#tentang-page .tp-vismis-card-visi::before,
#tentang-page .tp-vismis-card-visi::after{ content:''; position:absolute; border-radius:50%; filter:blur(4px); pointer-events:none; }
#tentang-page .tp-vismis-card-visi::before{ width:220px; height:220px; top:-70px; right:-70px; background:radial-gradient(circle, rgba(200,155,74,.28), transparent 70%); animation:tpFloatBlob 9s ease-in-out infinite; }
#tentang-page .tp-vismis-card-visi::after{ width:180px; height:180px; bottom:-60px; left:-50px; background:radial-gradient(circle, rgba(61,174,71,.22), transparent 70%); animation:tpFloatBlob 11s ease-in-out infinite reverse; }
#tentang-page .tp-vismis-card-visi > *{ position:relative; z-index:1; }
@keyframes tpFloatBlob{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(12px,-16px); } }
#tentang-page .tp-vismis-icon{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
#tentang-page .tp-vismis-card-visi .tp-vismis-icon{ background:rgba(200,155,74,.18); color:var(--gold); animation:tpGlowPulse 2.6s ease-in-out infinite; }
#tentang-page .tp-vismis-card:not(.tp-vismis-card-visi) .tp-vismis-icon{ background:var(--gold-soft); color:#8a6d3a; }
@keyframes tpGlowPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(200,155,74,.4); } 50%{ box-shadow:0 0 0 9px rgba(200,155,74,0); } }
#tentang-page .tp-vismis-label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; opacity:.75; margin-bottom:8px; }
#tentang-page .tp-vismis-card-visi .tp-vismis-label{ color:var(--gold); opacity:1; }
#tentang-page .tp-vismis-card:not(.tp-vismis-card-visi) .tp-vismis-label{ color:var(--green); }
#tentang-page .tp-vismis-card h3{ font-family:'Cormorant Garamond',serif; font-size:21px; margin:0 0 10px; }
#tentang-page .tp-vismis-card-visi h3{ color:#f3efe4; }
#tentang-page .tp-vismis-card:not(.tp-vismis-card-visi) h3{ color:var(--herbal); }
#tentang-page .tp-vismis-card-visi p{ font-size:14.5px; line-height:1.85; color:#c9d4cc; margin:0; }
#tentang-page .tp-misi-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; position:relative; }
#tentang-page .tp-misi-list::before{ content:''; position:absolute; left:13px; top:2px; bottom:2px; width:1px; background:linear-gradient(var(--border), transparent 95%); }
#tentang-page .tp-misi-list li{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.7; color:var(--muted); position:relative; z-index:1; transition:transform .3s ease; }
#tentang-page .tp-misi-list li:hover{ transform:translateX(5px); color:var(--ink); }
#tentang-page .tp-misi-num{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--green-soft); color:var(--herbal); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Karla',sans-serif; transition:background .3s ease, color .3s ease, transform .3s ease; }
#tentang-page .tp-misi-list li:hover .tp-misi-num{ background:var(--herbal); color:#f3efe4; transform:scale(1.14); }
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-vismis-card-visi::before, #tentang-page .tp-vismis-card-visi::after, #tentang-page .tp-vismis-card-visi .tp-vismis-icon{ animation:none; }
}

/* ---------- Nilai Kami — premium botanical section ---------- */
/* Local palette, scoped only to this section — does not touch :root. */
#tentang-page .tp-nilai-section{
  --nk-deep:#08261C; --nk-forest:#164C36; --nk-ivory:#F4F0E6; --nk-gold:#C89B4A; --nk-muted-green:#6F967F;
  position:relative; overflow:hidden; padding:280px 24px 96px; background:var(--nk-deep);
}
#tentang-page .tp-nilai-bg{
  position:absolute; top:0; left:0; right:0; height:440px; z-index:0; pointer-events:none;
  background-image:var(--nk-bg-url); background-size:cover; background-position:70% 30%; background-repeat:no-repeat;
}
#tentang-page .tp-nilai-overlay{
  position:absolute; top:0; left:0; right:0; height:440px; z-index:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,38,28,.94) 0%, rgba(8,38,28,.82) 32%, rgba(8,38,28,.4) 60%, rgba(8,38,28,.55) 100%),
    linear-gradient(180deg, transparent 55%, var(--nk-deep) 100%),
    radial-gradient(closest-side, rgba(200,155,74,.18), transparent 70%) top right / 55% 55% no-repeat;
}
#tentang-page .tp-nilai-inner{ position:relative; z-index:1; max-width:1140px; margin:0 auto; }
#tentang-page .tp-nilai-head{ text-align:center; max-width:620px; margin:0 auto 56px; }
#tentang-page .tp-nilai-eyebrow{ font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--nk-gold); font-weight:700; margin-bottom:14px; }
#tentang-page .tp-nilai-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(28px,3.4vw,38px); color:var(--nk-ivory); margin:0 0 14px; line-height:1.2; }
#tentang-page .tp-nilai-desc{ font-family:'Karla',sans-serif; font-style:italic; color:rgba(244,240,230,.72); font-size:15px; line-height:1.75; margin:0; }
#tentang-page .tp-nilai-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 26px; }
#tentang-page .tp-nilai-card{
  background:linear-gradient(155deg, rgba(244,240,230,.1), rgba(244,240,230,.04));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(244,240,230,.14); border-radius:22px; padding:34px 28px 30px;
  text-align:left; position:relative; overflow:hidden;
  box-shadow:0 18px 40px rgba(3,15,10,.28);
  transition:transform .45s cubic-bezier(.16,.8,.28,1), box-shadow .45s ease, border-color .45s ease, background .45s ease;
}
#tentang-page .tp-nilai-card:hover{
  transform:translateY(-6px);
  border-color:rgba(200,155,74,.55);
  background:linear-gradient(155deg, rgba(244,240,230,.16), rgba(244,240,230,.06));
  box-shadow:0 26px 54px rgba(3,15,10,.36);
}
#tentang-page .tp-nilai-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; position:relative; z-index:1; }
#tentang-page .tp-nilai-icon-wrap{ position:relative; width:46px; height:46px; flex:0 0 auto; transition:transform .45s cubic-bezier(.16,.8,.28,1); }
#tentang-page .tp-nilai-card:hover .tp-nilai-icon-wrap{ transform:translateY(-2px) rotate(-4deg); }
#tentang-page .tp-nilai-icon-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(200,155,74,.4); background:none; }
#tentang-page .tp-nilai-icon{ position:absolute; inset:8px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--nk-gold); }
#tentang-page .tp-nilai-card h4{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:19px; color:var(--nk-ivory); margin:0; white-space:nowrap; }
#tentang-page .tp-nilai-line{ flex:1; height:1px; background:rgba(244,240,230,.2); min-width:14px; }
#tentang-page .tp-nilai-num{ font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600; color:var(--nk-gold); opacity:.85; flex:0 0 auto; }
#tentang-page .tp-nilai-card p{ font-family:'Karla',sans-serif; font-size:13px; line-height:1.8; color:rgba(244,240,230,.68); margin:0; position:relative; z-index:1; }
#tentang-page .tp-nilai-corner{ position:absolute; right:-10px; bottom:-12px; width:78px; height:78px; color:var(--nk-muted-green); opacity:.14; transform:rotate(-6deg); pointer-events:none; }
@media (min-width:981px){
  #tentang-page .tp-nilai-bg{ background-attachment:fixed; }
}
@media (max-width:980px){
  #tentang-page .tp-nilai-grid{ grid-template-columns:repeat(2,1fr); }
  #tentang-page .tp-nilai-section{ padding:240px 20px 88px; }
  #tentang-page .tp-nilai-bg{ background-position:75% 25%; background-attachment:scroll; }
}
@media (max-width:620px){
  #tentang-page .tp-nilai-grid{ grid-template-columns:1fr; gap:18px; }
  #tentang-page .tp-nilai-section{ padding:200px 18px 64px; }
  #tentang-page .tp-nilai-bg, #tentang-page .tp-nilai-overlay{ height:340px; }
  #tentang-page .tp-nilai-card{ padding:26px 22px 24px; }
}
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-nilai-card, #tentang-page .tp-nilai-icon-wrap{ transition:none; }
}

/* ---------- Tujuan Kami — dark glass showcase (disederhanakan, tanpa animasi loop & blur berat) ---------- */
#tentang-page .tp-tujuan-section{
  position:relative; overflow:hidden; padding:110px 24px 100px;
  background:radial-gradient(900px 500px at 82% 8%, rgba(61,174,71,.20), transparent 60%), linear-gradient(165deg,var(--herbal-deep) 0%,#0d2810 72%,#0a2109 100%);
}
#tentang-page .tp-tujuan-glow{ position:absolute; border-radius:50%; filter:blur(46px); pointer-events:none; z-index:0; }
#tentang-page .tp-tujuan-glow-a{ width:360px; height:360px; right:-140px; top:-160px; background:radial-gradient(circle,rgba(184,148,90,.24),transparent 70%); }
#tentang-page .tp-tujuan-glow-b{ width:280px; height:280px; left:-120px; bottom:-140px; background:radial-gradient(circle,rgba(61,174,71,.22),transparent 70%); }
#tentang-page .tp-tujuan-streak{ display:none; }
#tentang-page .tp-tujuan-leaf{ position:absolute; z-index:0; pointer-events:none; opacity:.14; filter:brightness(0) invert(1); }
#tentang-page .tp-tujuan-leaf-a{ width:220px; left:-40px; bottom:-30px; transform:rotate(-8deg); }
#tentang-page .tp-tujuan-leaf-b{ width:150px; left:60px; bottom:40px; transform:rotate(10deg) scaleX(-1); opacity:.1; }
#tentang-page .tp-tujuan-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }
#tentang-page .tp-tujuan-head{ text-align:center; margin-bottom:64px; }
#tentang-page .tp-tujuan-badge{
  display:inline-block; font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  color:var(--gold); background:rgba(255,255,255,.06); border:1px solid rgba(184,148,90,.45);
  padding:8px 20px; border-radius:999px; margin-bottom:20px;
}
#tentang-page .tp-tujuan-heading{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(30px,4.2vw,46px); color:#f3efe4; line-height:1.15; margin:0; }
#tentang-page .tp-tujuan-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:26px; }
#tentang-page .tp-tujuan-card{
  position:relative; width:240px; min-height:300px; padding:34px 22px 28px; border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  border:1px solid rgba(255,224,160,.38);
  box-shadow:0 20px 40px rgba(0,0,0,.3), 0 0 22px rgba(216,168,90,.14), inset 0 1px 0 rgba(255,255,255,.22);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
#tentang-page .tp-tujuan-card-offset{ margin-top:56px; }
#tentang-page .tp-tujuan-card:hover{ transform:translateY(-6px); box-shadow:0 26px 48px rgba(0,0,0,.34), 0 0 30px rgba(216,168,90,.22), inset 0 1px 0 rgba(255,255,255,.28); }
#tentang-page .tp-tujuan-card-bevel{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%); width:64px; height:8px; border-radius:6px;
  background:linear-gradient(90deg,#8a6a34,#e9d9b6,#8a6a34);
}
#tentang-page .tp-tujuan-card-top{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:22px; }
#tentang-page .tp-tujuan-card-icon{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(233,217,182,.5); color:#e9d9b6;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
#tentang-page .tp-tujuan-card-check{
  width:22px; height:22px; border-radius:50%; border:1px solid rgba(233,217,182,.5); color:#e9d9b6;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
#tentang-page .tp-tujuan-card-num{
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:64px; line-height:1;
  background:linear-gradient(160deg,#f3e2b8,var(--gold) 60%,#8a6a34); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:16px;
}
#tentang-page .tp-tujuan-card-rule{ display:block; width:30px; height:2px; background:var(--gold); border-radius:2px; margin-bottom:18px; }
#tentang-page .tp-tujuan-card-text{ font-size:15px; font-weight:600; color:#f3efe4; line-height:1.55; }
@media (max-width:980px){
  #tentang-page .tp-tujuan-card-offset{ margin-top:0; }
  #tentang-page .tp-tujuan-grid{ max-width:560px; margin:0 auto; }
}
@media (max-width:640px){
  #tentang-page .tp-tujuan-section{ padding:80px 18px; }
  #tentang-page .tp-tujuan-card{ width:100%; max-width:320px; min-height:auto; }
}
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-tujuan-card{ transition:none; }
}

/* ---------- Pesan Direktur ---------- */
#tentang-page .tp-direktur-section{ position:relative; overflow:hidden; padding:90px 24px; background:var(--cream); }
#tentang-page .tp-direktur-honeycomb{
  position:absolute; right:-60px; top:-40px; width:420px; max-width:46%; height:auto; opacity:.16; z-index:0; pointer-events:none;
  transform:scaleX(-1);
}
#tentang-page .tp-direktur-inner{
  position:relative; z-index:1; max-width:1140px; margin:0 auto; display:grid;
  grid-template-columns:280px 1fr auto; gap:44px; align-items:center;
}
#tentang-page .tp-direktur-photo-wrap{ position:relative; width:280px; }
#tentang-page .tp-direktur-photo-backdrop{
  position:absolute; left:-18px; top:20px; width:100%; height:100%; border-radius:20px;
  background:linear-gradient(160deg,var(--herbal-deep),var(--herbal)); z-index:0;
}
#tentang-page .tp-direktur-photo-frame{
  position:relative; z-index:1; border-radius:20px; overflow:hidden; box-shadow:0 18px 38px rgba(22,63,23,.22);
  aspect-ratio:3/4;
}
#tentang-page .tp-direktur-photo-frame img{ width:100%; height:100%; object-fit:cover; object-position:center 8%; display:block; }
#tentang-page .tp-direktur-quote-card{
  position:absolute; left:-58px; bottom:-22px; z-index:2; width:180px; background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:18px 16px 16px; box-shadow:0 14px 30px rgba(22,63,23,.14);
}
#tentang-page .tp-direktur-quote-mark{ font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:700; color:var(--gold); line-height:1; display:block; margin-bottom:2px; }
#tentang-page .tp-direktur-quote-card p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13.5px; line-height:1.5; color:var(--herbal); margin:0 0 10px; }
#tentang-page .tp-direktur-quote-rule{ display:block; width:26px; height:2px; background:var(--gold); border-radius:2px; }
#tentang-page .tp-direktur-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(24px,3vw,32px); color:var(--herbal-deep); line-height:1.22; margin:0 0 14px; }
#tentang-page .tp-direktur-desc{ font-size:14px; line-height:1.75; color:var(--muted); margin:0 0 22px; max-width:480px; }
#tentang-page .tp-direktur-rule{ display:block; width:40px; height:2px; background:var(--gold); border-radius:2px; margin-bottom:14px; }
#tentang-page .tp-direktur-name{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:19px; color:var(--herbal); }
#tentang-page .tp-direktur-role{ font-size:12.5px; color:var(--muted); margin-top:2px; }
#tentang-page .tp-direktur-tagline{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; color:var(--gold); font-size:15px; line-height:1.5;
  text-align:right; opacity:.85; max-width:180px; transform:rotate(-1.5deg);
}
@media (max-width:980px){
  #tentang-page .tp-direktur-inner{ grid-template-columns:260px 1fr; }
  #tentang-page .tp-direktur-tagline{ display:none; }
}
@media (max-width:720px){
  #tentang-page .tp-direktur-section{ padding:70px 20px; }
  #tentang-page .tp-direktur-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:56px; }
  #tentang-page .tp-direktur-photo-wrap{ margin:0 auto; }
  #tentang-page .tp-direktur-quote-card{ left:50%; transform:translateX(-72%); bottom:-30px; }
  #tentang-page .tp-direktur-desc{ margin-left:auto; margin-right:auto; }
  #tentang-page .tp-direktur-rule{ margin-left:auto; margin-right:auto; }
}

/* ---------- Struktur Organisasi ---------- */
#tentang-page .tp-org{ display:flex; flex-direction:column; align-items:center; gap:0; }
#tentang-page .tp-org-node{ background:var(--herbal); color:#f3efe4; border-radius:14px; padding:14px 22px; text-align:center; font-size:13px; box-shadow:0 8px 20px rgba(31,95,33,.18); }
#tentang-page .tp-org-node strong{ display:block; font-family:'Cormorant Garamond',serif; font-size:16px; margin-bottom:2px; }
#tentang-page .tp-org-node-alt{ background:#fff; color:var(--herbal); border:1px solid var(--border); }
#tentang-page .tp-org-line{ width:2px; height:26px; background:var(--border); }
#tentang-page .tp-org-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding-top:20px; margin-top:0; position:relative; }
#tentang-page .tp-org-row::before{ content:''; position:absolute; top:0; left:14%; right:14%; height:2px; background:var(--border); }
#tentang-page .tp-org-manager{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 16px; font-size:11.5px; font-weight:600; color:var(--herbal); text-align:center; min-width:130px; box-shadow:0 4px 12px rgba(31,95,33,.05); position:relative; }
#tentang-page .tp-org-manager::before{ content:''; position:absolute; top:-20px; left:50%; width:2px; height:20px; background:var(--border); }
#tentang-page .tp-org-field{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:34px; }
#tentang-page .tp-org-field-node{ background:var(--gold-soft); color:#8a6d3a; border-radius:999px; padding:9px 18px; font-size:12px; font-weight:700; }
#tentang-page .tp-org-arrow{ color:var(--muted); font-size:14px; }

/* ---------- Roadmap 5 Tahun (tab / stepper) ---------- */
#tentang-page .tp-roadmap-tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
#tentang-page .tp-roadmap-tab{ font-family:'Karla',sans-serif; font-weight:700; font-size:13px; padding:10px 18px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; transition:all .3s ease; }
#tentang-page .tp-roadmap-tab.active{ background:var(--herbal); border-color:var(--herbal); color:#f3efe4; box-shadow:0 8px 18px rgba(31,95,33,.2); }
#tentang-page .tp-roadmap-progress{ height:4px; background:var(--border); border-radius:999px; margin:0 0 36px; overflow:hidden; }
#tentang-page .tp-roadmap-progress-bar{ height:100%; background:linear-gradient(90deg,var(--gold),var(--herbal)); border-radius:999px; transition:width .5s cubic-bezier(.16,.8,.28,1); }
#tentang-page .tp-roadmap-panel{ display:none; }
#tentang-page .tp-roadmap-panel.active{ display:block; animation:tpFadeIn .5s ease; }
@keyframes tpFadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
#tentang-page .tp-roadmap-body{ display:grid; grid-template-columns:1fr 1.4fr; gap:30px; align-items:center; }
@media(max-width:760px){ #tentang-page .tp-roadmap-body{ grid-template-columns:1fr; } }
#tentang-page .tp-roadmap-visual{ background:linear-gradient(160deg,var(--herbal-deep),var(--herbal)); border-radius:22px; padding:34px; color:#f3efe4; text-align:center; }
#tentang-page .tp-roadmap-year{ font-family:'Cormorant Garamond',serif; font-size:52px; font-weight:700; color:var(--gold); line-height:1; }
#tentang-page .tp-roadmap-label{ font-size:14px; margin-top:8px; font-weight:600; }
#tentang-page .tp-roadmap-sub{ font-size:12px; color:#c9d4cc; margin-top:4px; }
#tentang-page .tp-roadmap-target{ margin-top:22px; background:rgba(200,155,74,.14); border-radius:12px; padding:12px 14px; font-size:11.5px; line-height:1.6; }
#tentang-page .tp-roadmap-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
#tentang-page .tp-roadmap-list li{ display:flex; gap:10px; font-size:13.5px; line-height:1.7; color:var(--muted); }
#tentang-page .tp-roadmap-list li::before{ content:''; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-top:7px; }

/* ---------- Hybrid Distribution tabs ---------- */
#tentang-page .tp-hybrid-tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
#tentang-page .tp-hybrid-tab{ font-family:'Karla',sans-serif; font-weight:700; font-size:12.5px; padding:11px 20px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--herbal); cursor:pointer; transition:all .3s ease; }
#tentang-page .tp-hybrid-tab.active{ background:var(--gold); border-color:var(--gold); color:#1a2e25; }
#tentang-page .tp-hybrid-panel{ display:none; }
#tentang-page .tp-hybrid-panel.active{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; animation:tpFadeIn .5s ease; }
#tentang-page .tp-hybrid-item{ background:var(--cream); border:1px solid var(--border); border-radius:14px; padding:18px; }
#tentang-page .tp-hybrid-item strong{ display:block; color:var(--herbal); font-size:13.5px; margin-bottom:4px; }
#tentang-page .tp-hybrid-item span{ font-size:12px; color:var(--muted); line-height:1.6; }

/* ---------- Filosofi Logo ---------- */
#tentang-page .tp-filosofi-wrap{ display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center; }
@media(max-width:760px){ #tentang-page .tp-filosofi-wrap{ grid-template-columns:1fr; } }
#tentang-page .tp-filosofi-col{ display:flex; flex-direction:column; gap:18px; }
#tentang-page .tp-filosofi-item{ display:flex; gap:12px; }
#tentang-page .tp-filosofi-item-icon{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--green-soft); color:var(--herbal); display:flex; align-items:center; justify-content:center; }
#tentang-page .tp-filosofi-item h5{ font-family:'Cormorant Garamond',serif; font-size:15.5px; color:var(--herbal); margin:0 0 4px; }
#tentang-page .tp-filosofi-item p{ font-size:12.5px; color:var(--muted); line-height:1.65; margin:0; }
#tentang-page .tp-filosofi-center{ width:180px; height:180px; border-radius:50%; overflow:hidden; box-shadow:0 20px 44px rgba(31,95,33,.16); border:5px solid #fff; }
#tentang-page .tp-filosofi-center img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Gallery / lightbox ---------- */
#tentang-page .tp-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
#tentang-page .tp-gallery-item{ position:relative; border-radius:14px; overflow:hidden; cursor:zoom-in; box-shadow:0 6px 16px rgba(31,95,33,.08); aspect-ratio:3/4; }
#tentang-page .tp-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,.8,.28,1); }
#tentang-page .tp-gallery-item:hover img{ transform:scale(1.08); }
#tentang-page .tp-gallery-item-label{ position:absolute; inset:auto 0 0 0; background:linear-gradient(0deg,rgba(22,63,23,.85),transparent); color:#f3efe4; font-size:10.5px; font-weight:600; padding:20px 10px 8px; line-height:1.4; }
#tentang-page .tp-lightbox{ position:fixed; inset:0; background:rgba(15,26,18,.92); display:none; align-items:center; justify-content:center; z-index:200; padding:32px; backdrop-filter:blur(4px); }
#tentang-page .tp-lightbox.active{ display:flex; }
#tentang-page .tp-lightbox img{ max-width:min(720px,92vw); max-height:88vh; border-radius:14px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
#tentang-page .tp-lightbox-close{ position:absolute; top:22px; right:26px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); color:#f3efe4; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ---- Legalitas: dokumen PDF (izin edar BPOM, sertifikat halal) ---- */
#tentang-page .tp-legal-doc{
  display:block; text-decoration:none; border-radius:20px; overflow:hidden;
  background:#fff; border:1px solid rgba(31,95,33,.10);
  box-shadow:0 14px 34px rgba(31,95,33,.10);
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease, border-color .35s ease;
}
#tentang-page .tp-legal-doc:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 56px rgba(31,95,33,.18);
  border-color:rgba(200,155,74,.55);
}
#tentang-page .tp-legal-doc-thumb{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#f3efe4; }
#tentang-page .tp-legal-doc-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .55s cubic-bezier(.16,.8,.28,1);
}
#tentang-page .tp-legal-doc:hover .tp-legal-doc-thumb img{ transform:scale(1.05); }
#tentang-page .tp-legal-doc-thumb::after{
  content:'Lihat Dokumen  \2197';
  position:absolute; inset:auto 0 0 0; padding:54px 18px 18px;
  font-size:14px; font-weight:700; letter-spacing:.04em; color:#f3efe4; text-align:center;
  background:linear-gradient(0deg, rgba(22,63,23,.94), transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
#tentang-page .tp-legal-doc:hover .tp-legal-doc-thumb::after{ opacity:1; transform:translateY(0); }
#tentang-page .tp-legal-doc-label{ padding:22px 20px 26px; text-align:center; }
#tentang-page .tp-legal-doc-label strong{ display:block; font-size:19px; color:var(--herbal); font-weight:700; margin-bottom:5px; }
#tentang-page .tp-legal-doc-label span{ display:block; font-size:13.5px; color:var(--muted); letter-spacing:.02em; }

@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-reveal, #tentang-page .tp-reveal-scale{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   REDESIGN ENHANCEMENT — Cinematic gold glow + particles + swoosh
   Scoped to #tentang-page, safe override of existing styles
   ============================================================ */

/* ---- Hero: honeycomb more dramatic + floating glow ---- */
#tentang-page .tp-hero-hex{
  width:780px; max-width:68%; opacity:1;
  filter:drop-shadow(0 0 30px rgba(216,168,90,.35)) drop-shadow(0 0 80px rgba(61,174,71,.25));
  animation:tpHexFloat 9s ease-in-out infinite;
}
@keyframes tpHexFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(14px,-10px) scale(1.03); } }

/* ---- Hero: sparkles twinkle + drift ---- */
#tentang-page .tp-hero-sparkle{ animation:tpTwinkle 3.2s ease-in-out infinite; }
#tentang-page .tp-hero-sparkle:nth-child(odd){ animation-duration:4.6s; animation-delay:.8s; }
#tentang-page .tp-hero-sparkle:nth-child(3n){ animation-duration:5.4s; animation-delay:1.6s; }
@keyframes tpTwinkle{
  0%,100%{ opacity:.25; transform:scale(.7) translateY(0); }
  50%{ opacity:1; transform:scale(1.3) translateY(-6px); }
}

/* ---- Hero: particle canvas layer ---- */
#tentang-page .tp-gold-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ---- Hero: golden swoosh light trail behind stat cards ---- */
#tentang-page .tp-hero-stats{ position:relative; }
#tentang-page .tp-hero-stats::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:120%; height:220%; pointer-events:none; z-index:-1; opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23d8a85a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23ffe0a0' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23d8a85a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M20 140 C 200 40, 600 40, 780 140' fill='none' stroke='url(%23g)' stroke-width='3' filter='url(%23b)'/%3E%3Cpath d='M20 140 C 200 40, 600 40, 780 140' fill='none' stroke='%23fff3d0' stroke-width='1.2' opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:tpSwooshPulse 5s ease-in-out infinite;
}
@keyframes tpSwooshPulse{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scaleX(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scaleX(1.04); } }

/* ---- Hero: stat cards — stronger gold glow + animated shine sweep ---- */
#tentang-page .tp-hero-stat{
  border:1px solid rgba(255,224,160,.65);
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  box-shadow:0 0 0 1px rgba(233,196,140,.18), 0 16px 40px rgba(0,0,0,.42), 0 0 44px rgba(216,168,90,.35), inset 0 1px 0 rgba(255,255,255,.28);
  overflow:hidden;
  animation:tpStatGlow 4s ease-in-out infinite;
}
#tentang-page .tp-hero-stat:nth-child(2){ animation-delay:.7s; }
#tentang-page .tp-hero-stat:nth-child(3){ animation-delay:1.4s; }
@keyframes tpStatGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(233,196,140,.18), 0 16px 40px rgba(0,0,0,.42), 0 0 30px rgba(216,168,90,.28), inset 0 1px 0 rgba(255,255,255,.28); } 50%{ box-shadow:0 0 0 1px rgba(255,224,160,.35), 0 16px 40px rgba(0,0,0,.42), 0 0 60px rgba(255,200,110,.55), inset 0 1px 0 rgba(255,255,255,.35); } }
#tentang-page .tp-hero-stat::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,240,200,.35), transparent);
  transform:skewX(-18deg); animation:tpShine 5.5s ease-in-out infinite;
}
#tentang-page .tp-hero-stat:nth-child(2)::after{ animation-delay:1.2s; }
#tentang-page .tp-hero-stat:nth-child(3)::after{ animation-delay:2.4s; }
@keyframes tpShine{ 0%{ left:-80%; } 45%,100%{ left:130%; } }
#tentang-page .tp-hero-stat-num{
  font-size:30px;
  background:linear-gradient(160deg,#fff3d0,var(--gold) 55%,#b8893c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(216,168,90,.4);
}
#tentang-page .tp-hero-stat:hover{ transform:translateY(-5px) scale(1.03); }

/* ---- Motto strip: subtle gold glow line ---- */
#tentang-page .tp-motto-strip::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:60%; height:1px; background:linear-gradient(90deg,transparent,rgba(216,168,90,.7),transparent);
}

@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-hero-hex, #tentang-page .tp-hero-sparkle, #tentang-page .tp-hero-stat,
  #tentang-page .tp-hero-stat::after, #tentang-page .tp-hero-stats::before{
    animation:none !important;
  }
}

/* ============================================================
   REDESIGN ENHANCEMENT PART 2 — Other sections (Roadmap, Gallery,
   Nilai, Feature cards, Hybrid, CTA) — same cinematic gold language
   ============================================================ */

/* ---- Section headings: gold accent line + subtle glow ---- */
#tentang-page .tp-eyebrow{ text-shadow:0 0 18px rgba(216,168,90,.45); }
#tentang-page .tp-title{ position:relative; display:inline-block; }
#tentang-page .tp-section-head{ position:relative; }
#tentang-page .tp-section-head::after{
  content:''; display:block; width:64px; height:3px; margin:18px auto 0; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 12px rgba(216,168,90,.6);
}

/* ---- Cerita Kami: book frame gold glow ---- */
#tentang-page .tp-book-frame{
  border-radius:18px; overflow:hidden; position:relative;
  box-shadow:0 24px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(216,168,90,.35), 0 0 40px rgba(216,168,90,.2);
  transition:transform .4s ease, box-shadow .4s ease;
}
#tentang-page .tp-book-frame:hover{ transform:translateY(-4px) scale(1.01); box-shadow:0 30px 60px rgba(0,0,0,.32), 0 0 0 1px rgba(255,224,160,.6), 0 0 60px rgba(216,168,90,.45); }
#tentang-page .tp-book-badge{
  background:linear-gradient(90deg,rgba(20,50,25,.92),rgba(30,70,35,.92)) !important;
  border-top:1px solid rgba(216,168,90,.5) !important;
  color:#f3efe4 !important;
}

/* ---- Kenapa Pilih Kami: feature cards hover gold glow (cream bg) ---- */
#tentang-page .feature-card{
  position:relative; overflow:hidden; border-radius:18px;
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease;
  border:1px solid rgba(216,168,90,.18);
}
#tentang-page .feature-card::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(216,168,90,.18), transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
#tentang-page .feature-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(31,95,33,.16), 0 0 0 1px rgba(216,168,90,.5), 0 0 30px rgba(216,168,90,.25); }
#tentang-page .feature-card:hover::after{ left:130%; }
#tentang-page .feature-card-icon{ transition:transform .35s ease, box-shadow .35s ease; }
#tentang-page .feature-card:hover .feature-card-icon{ transform:scale(1.1) rotate(-4deg); box-shadow:0 8px 20px rgba(216,168,90,.35); }

/* ---- Nilai-Nilai cards: gold glow + shine ---- */
#tentang-page .tp-nilai-card{
  position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease, border-color .35s ease;
  border:1px solid rgba(233,196,140,.35) !important;
}
#tentang-page .tp-nilai-card::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,240,200,.25), transparent);
  transform:skewX(-18deg); animation:tpShine 7s ease-in-out infinite;
}
#tentang-page .tp-nilai-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.35), 0 0 40px rgba(216,168,90,.4); border-color:rgba(255,224,160,.7) !important; }
#tentang-page .tp-nilai-icon-ring{ box-shadow:0 0 14px rgba(216,168,90,.6); }

/* ---- Roadmap: visual card gold glow + progress bar shimmer + tabs ---- */
#tentang-page .tp-roadmap-visual{
  position:relative; overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(216,168,90,.4), 0 0 40px rgba(216,168,90,.3);
  border:1px solid rgba(255,224,160,.3);
}
#tentang-page .tp-roadmap-visual::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,240,200,.22), transparent);
  transform:skewX(-18deg); animation:tpShine 6s ease-in-out infinite;
}
#tentang-page .tp-roadmap-year{ text-shadow:0 0 24px rgba(216,168,90,.6); }
#tentang-page .tp-roadmap-tab.active{ box-shadow:0 0 18px rgba(216,168,90,.5), 0 6px 16px rgba(31,95,33,.25); border-color:var(--gold) !important; }
#tentang-page .tp-roadmap-progress-bar{ position:relative; overflow:hidden; }
#tentang-page .tp-roadmap-progress-bar::after{
  content:''; position:absolute; top:0; left:0; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation:tpBarShimmer 2.2s linear infinite;
}
@keyframes tpBarShimmer{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); } }

/* ---- Hybrid Distribution: tabs + items gold accent ---- */
#tentang-page .tp-hybrid-tab.active{ box-shadow:0 0 16px rgba(216,168,90,.45); border-color:var(--gold) !important; }
#tentang-page .tp-hybrid-item{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; overflow:hidden; }
#tentang-page .tp-hybrid-item:hover{ transform:translateX(4px); box-shadow:0 8px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(216,168,90,.4); border-color:rgba(216,168,90,.5) !important; }

/* ---- Gallery: gold glow border on hover + zoom ---- */
#tentang-page .tp-gallery-item{
  position:relative; overflow:hidden; border-radius:14px;
  border:1px solid rgba(216,168,90,.25);
  transition:transform .4s cubic-bezier(.16,.8,.28,1), box-shadow .4s ease, border-color .4s ease;
}
#tentang-page .tp-gallery-item img{ transition:transform .6s cubic-bezier(.16,.8,.28,1); }
#tentang-page .tp-gallery-item:hover{ transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,224,160,.7), 0 0 40px rgba(216,168,90,.45); border-color:rgba(255,224,160,.8); }
#tentang-page .tp-gallery-item:hover img{ transform:scale(1.08); }
#tentang-page .tp-gallery-item-label{
  background:linear-gradient(0deg, rgba(10,36,16,.92), rgba(10,36,16,.6)) !important;
  border-top:1px solid rgba(216,168,90,.4) !important;
}

/* ---- Closing CTA: button gold glow pulse ---- */
#tentang-page .btn-herbal{
  position:relative; overflow:hidden;
  animation:tpBtnGlow 3.5s ease-in-out infinite;
  transition:transform .3s ease;
}
#tentang-page .btn-herbal::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); animation:tpShine 4.5s ease-in-out infinite;
}
#tentang-page .btn-herbal:hover{ transform:translateY(-2px) scale(1.03); }
@keyframes tpBtnGlow{ 0%,100%{ box-shadow:0 10px 26px rgba(31,95,33,.35), 0 0 0 0 rgba(216,168,90,.4); } 50%{ box-shadow:0 10px 26px rgba(31,95,33,.35), 0 0 0 6px rgba(216,168,90,0), 0 0 24px rgba(216,168,90,.5); } }
#tentang-page .btn-ghost{ transition:all .3s ease; }
#tentang-page .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 18px rgba(216,168,90,.3); }

@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-nilai-card::after, #tentang-page .tp-roadmap-visual::after,
  #tentang-page .tp-roadmap-progress-bar::after, #tentang-page .btn-herbal,
  #tentang-page .btn-herbal::after{ animation:none !important; }
}

/* ============================================================
   REDESIGN ENHANCEMENT PART 3 — Visi & Misi 3D overlapping cards
   with click-to-stand interaction (Opsi 2)
   ============================================================ */
#tentang-page .tp-vismis-grid.tp-vismis-3d{ display:block; position:relative; perspective:1600px; max-width:980px; margin:0 auto; }
#tentang-page .tp-vm-scene{ position:relative; width:100%; min-height:620px; transform-style:preserve-3d; display:block; }
#tentang-page .tp-vismis-3d .tp-vismis-card{
  position:absolute; top:20px; width:44%; min-height:auto; cursor:pointer;
  transform-style:preserve-3d; overflow:hidden;
  transition:transform .7s cubic-bezier(.16,.8,.28,1), left .7s cubic-bezier(.16,.8,.28,1),
             right .7s cubic-bezier(.16,.8,.28,1), top .7s cubic-bezier(.16,.8,.28,1),
             box-shadow .5s ease, opacity .5s ease, filter .5s ease;
  will-change:transform;
}
#tentang-page .tp-vismis-3d .tp-vismis-card-visi{
  left:5%; transform:rotateY(-10deg) rotateX(4deg) translateZ(0); z-index:1;
  border:1px solid rgba(255,224,160,.55) !important;
  box-shadow:0 30px 60px rgba(0,0,0,.35), 0 0 40px rgba(216,168,90,.3), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#tentang-page .tp-vismis-3d .tp-vismis-card:not(.tp-vismis-card-visi){
  left:50%; right:auto; transform:rotateY(10deg) rotateX(-4deg) translateZ(20px); z-index:2;
  border:1px solid rgba(216,168,90,.5) !important;
  box-shadow:0 30px 60px rgba(0,0,0,.22), 0 0 30px rgba(216,168,90,.22) !important;
}
#tentang-page .tp-vismis-3d .tp-vismis-card::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,240,200,.28), transparent);
  transform:skewX(-18deg); animation:tpShine 6s ease-in-out infinite; pointer-events:none;
}
#tentang-page .tp-vismis-3d .tp-vismis-card-visi::after{ animation-delay:1.5s; }
#tentang-page .tp-vismis-3d .tp-vismis-card:hover{ filter:brightness(1.05); }
#tentang-page .tp-vismis-3d .tp-vismis-card-visi:hover{ transform:rotateY(-10deg) rotateX(4deg) translateZ(0) translateY(-6px); }
#tentang-page .tp-vismis-3d .tp-vismis-card:not(.tp-vismis-card-visi):hover{ transform:rotateY(10deg) rotateX(-4deg) translateZ(20px) translateY(-6px); }
#tentang-page .tp-vm-click-hint{
  display:inline-block; margin-top:18px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); opacity:.75; font-weight:700;
}
#tentang-page .tp-vismis-card-visi .tp-vm-click-hint{ color:#e9c48c; }
#tentang-page .tp-vm-hint{
  text-align:center; margin-top:26px; font-size:12.5px; color:var(--muted); font-style:italic;
}
#tentang-page .tp-vm-hint::before, #tentang-page .tp-vm-hint::after{
  content:''; display:inline-block; width:28px; height:1px; vertical-align:middle; margin:0 10px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
#tentang-page .tp-vm-hint::after{ background:linear-gradient(90deg,var(--gold),transparent); }

/* Standing state (clicked) — card stands upright, centers, comes forward */
#tentang-page .tp-vismis-3d .tp-vismis-card.is-standing{
  left:28% !important; right:28% !important; top:0 !important; width:44% !important;
  transform:rotateY(0) rotateX(0) translateZ(80px) scale(1.06) !important;
  z-index:10 !important; cursor:pointer;
  box-shadow:0 44px 90px rgba(0,0,0,.42), 0 0 70px rgba(255,200,110,.55), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
#tentang-page .tp-vismis-3d.has-standing .tp-vismis-card:not(.is-standing){
  opacity:.45; filter:blur(1.5px) brightness(.85); transform:scale(.94) !important;
}
#tentang-page .tp-vismis-3d .tp-vismis-card.is-standing .tp-vm-click-hint{ opacity:1; }
#tentang-page .tp-vismis-3d .tp-vismis-card.is-standing .tp-vm-click-hint::after{ content:' — klik lagi untuk kembali'; }

/* Misi number pills gold style */
#tentang-page .tp-vismis-3d .tp-misi-num{
  background:linear-gradient(160deg,#f3e2b8,var(--gold)) !important; color:#3a2a10 !important;
  box-shadow:0 0 12px rgba(216,168,90,.5) !important; font-weight:800 !important;
}

@media (max-width:860px){
  #tentang-page .tp-vm-scene{ min-height:auto; }
  #tentang-page .tp-vismis-3d .tp-vismis-card,
  #tentang-page .tp-vismis-3d .tp-vismis-card-visi,
  #tentang-page .tp-vismis-3d .tp-vismis-card:not(.tp-vismis-card-visi){
    position:relative; left:auto !important; right:auto !important; top:auto !important;
    width:100% !important; max-width:480px; margin:0 auto 24px; min-height:auto;
    transform:none !important;
  }
  #tentang-page .tp-vismis-3d .tp-vismis-card.is-standing{
    position:relative !important; left:auto !important; right:auto !important; top:auto !important;
    width:100% !important; max-width:480px; margin:0 auto 24px; min-height:auto;
    transform:scale(1.02) !important; box-shadow:0 20px 40px rgba(0,0,0,.25) !important;
  }
  #tentang-page .tp-vm-hint{ display:none; }
  #tentang-page .tp-vm-click-hint{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-vismis-3d .tp-vismis-card,
  #tentang-page .tp-vismis-3d .tp-vismis-card::after{ transition:none !important; animation:none !important; }
}




/* ==========================================================================
   ROADMAP VERTICAL TIMELINE — Opsi 2 Redesign
   Timeline vertikal dengan node di kiri, kartu di kanan
   ========================================================================== */
#tentang-page .tp-roadmap-vtl{
  position:relative;
  max-width:820px;
  margin:0 auto 50px;
  padding:10px 0 10px 120px;
}
/* Garis vertikal utama */
#tentang-page .tp-roadmap-vtl-line{
  position:absolute;
  left:34px;
  top:0;
  bottom:0;
  width:3px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
#tentang-page .tp-roadmap-vtl-line-fill{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--herbal),var(--gold));
  transform-origin:top;
  transform:scaleY(.4);
  transition:transform .6s cubic-bezier(.16,.8,.28,1);
}
/* Item timeline */
#tentang-page .tp-roadmap-vtl-item{
  position:relative;
  display:block;
  width:100%;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
  padding:0 0 28px 0;
  outline:none;
  transition:transform .3s ease;
}
#tentang-page .tp-roadmap-vtl-item:last-child{ padding-bottom:0; }
#tentang-page .tp-roadmap-vtl-item:hover{ transform:translateX(4px); }
#tentang-page .tp-roadmap-vtl-item:focus-visible .tp-roadmap-vtl-card{
  box-shadow:0 0 0 3px rgba(200,155,74,.35), 0 14px 36px rgba(22,63,23,.16);
}

/* Node lingkaran */
#tentang-page .tp-roadmap-vtl-node{
  position:absolute;
  left:-98px;
  top:18px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#tentang-page .tp-roadmap-vtl-dot{
  position:relative;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--herbal);
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--border);
  z-index:2;
  transition:all .35s ease;
}
#tentang-page .tp-roadmap-vtl-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--border);
  transition:all .35s ease;
}
/* Pulse effect untuk node aktif */
#tentang-page .tp-roadmap-vtl-pulse{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid var(--gold);
  opacity:.6;
  animation:vtlPulse 2s ease-out infinite;
  pointer-events:none;
}
@keyframes vtlPulse{
  0%{ transform:scale(.8); opacity:.7; }
  100%{ transform:scale(1.6); opacity:0; }
}
/* State aktif */
#tentang-page .tp-roadmap-vtl-item[aria-selected="true"] .tp-roadmap-vtl-dot{
  background:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 0 18px rgba(216,168,90,.55);
  transform:scale(1.2);
}
#tentang-page .tp-roadmap-vtl-item[aria-selected="true"] .tp-roadmap-vtl-ring{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(216,168,90,.3);
}

/* Garis konektor dari node ke kartu */
#tentang-page .tp-roadmap-vtl-connector{
  position:absolute;
  left:-58px;
  top:36px;
  width:58px;
  height:2px;
  background:linear-gradient(90deg,var(--border),rgba(128,128,128,0));
  transition:background .3s ease;
}
#tentang-page .tp-roadmap-vtl-item[aria-selected="true"] .tp-roadmap-vtl-connector{
  background:linear-gradient(90deg,var(--gold),rgba(216,168,90,0));
  height:3px;
}

/* Kartu preview */
#tentang-page .tp-roadmap-vtl-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 20px;
  box-shadow:0 4px 14px rgba(31,95,33,.06);
  transition:all .35s cubic-bezier(.16,.8,.28,1);
}
#tentang-page .tp-roadmap-vtl-item:hover .tp-roadmap-vtl-card{
  border-color:rgba(200,155,74,.4);
  box-shadow:0 10px 28px rgba(31,95,33,.1);
  transform:translateY(-2px);
}
#tentang-page .tp-roadmap-vtl-item[aria-selected="true"] .tp-roadmap-vtl-card{
  background:linear-gradient(160deg,var(--herbal-deep),var(--herbal));
  border-color:transparent;
  box-shadow:0 14px 36px rgba(22,63,23,.28), 0 0 0 1px rgba(200,155,74,.3);
}
#tentang-page .tp-roadmap-vtl-year{
  font-family:'Cormorant Garamond',serif;
  font-size:32px;
  font-weight:700;
  color:var(--herbal);
  line-height:1;
  min-width:42px;
  text-align:center;
  transition:color .3s ease;
}
#tentang-page .tp-roadmap-vtl-item[aria-selected="true"] .tp-roadmap-vtl-year{
  color:var(--gold);
  text-shadow:0 0 16px rgba(216,168,90,.5);
}
#tentang-page .tp-roadmap-vtl-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--herbal);
  line-height:1.3;
  transition:color .3s ease;
}
#tentang-page .tp-roadmap-vtl-item[aria-selected="true"] .tp-roadmap-vtl-label{
  color:#f3efe4;
}
#tentang-page .tp-roadmap-vtl-theme{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  margin-top:3px;
  letter-spacing:.02em;
  transition:color .3s ease;
}
#tentang-page .tp-roadmap-vtl-item[aria-selected="true"] .tp-roadmap-vtl-theme{
  color:#c9d4cc;
}

/* Panel Detail */
#tentang-page .tp-roadmap-vtl-detail-wrap{
  max-width:780px;
  margin:30px auto 0;
  padding-left:120px;
  min-height:260px;
}
#tentang-page .tp-roadmap-vtl-panel{
  display:none;
  animation:tpFadeIn .5s ease;
}
#tentang-page .tp-roadmap-vtl-panel.active{
  display:block;
}
#tentang-page .tp-roadmap-vtl-detail{
  background:linear-gradient(160deg,var(--herbal-deep),var(--herbal));
  border-radius:22px;
  padding:30px 34px;
  color:#f3efe4;
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(22,63,23,.28);
}
#tentang-page .tp-roadmap-vtl-detail::before{
  content:'';
  position:absolute;
  width:260px;
  height:260px;
  top:-100px;
  right:-80px;
  background:radial-gradient(circle,rgba(200,155,74,.22),transparent 70%);
  pointer-events:none;
}
#tentang-page .tp-roadmap-vtl-detail-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  position:relative;
  z-index:1;
}
#tentang-page .tp-roadmap-vtl-detail-year{
  font-family:'Cormorant Garamond',serif;
  font-size:52px;
  font-weight:700;
  color:var(--gold);
  line-height:1;
  text-shadow:0 0 24px rgba(216,168,90,.5);
  min-width:66px;
  text-align:center;
}
#tentang-page .tp-roadmap-vtl-detail-label{
  font-family:'Cormorant Garamond',serif;
  font-size:23px;
  font-weight:600;
  color:#f3efe4;
  line-height:1.2;
}
#tentang-page .tp-roadmap-vtl-detail-sub{
  font-size:13px;
  color:#c9d4cc;
  margin-top:3px;
  letter-spacing:.03em;
}
#tentang-page .tp-roadmap-vtl-detail-target{
  position:relative;
  z-index:1;
  background:rgba(200,155,74,.14);
  border:1px solid rgba(200,155,74,.25);
  border-radius:12px;
  padding:12px 16px;
  font-size:12.5px;
  line-height:1.6;
  color:#f3efe4;
  margin-bottom:18px;
}
#tentang-page .tp-roadmap-vtl-detail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:1;
}
#tentang-page .tp-roadmap-vtl-detail-list li{
  display:flex;
  gap:10px;
  font-size:13.5px;
  line-height:1.7;
  color:#e8efe9;
  align-items:flex-start;
}
#tentang-page .tp-roadmap-vtl-detail-list li::before{
  content:'';
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  margin-top:8px;
  box-shadow:0 0 8px rgba(216,168,90,.5);
}

/* Responsive */
@media(max-width:720px){
  #tentang-page .tp-roadmap-vtl{
    padding-left:90px;
  }
  #tentang-page .tp-roadmap-vtl-line{ left:26px; }
  #tentang-page .tp-roadmap-vtl-node{ left:-76px; top:16px; width:32px; height:32px; }
  #tentang-page .tp-roadmap-vtl-connector{ left:-44px; width:44px; top:31px; }
  #tentang-page .tp-roadmap-vtl-year{ font-size:26px; min-width:34px; }
  #tentang-page .tp-roadmap-vtl-label{ font-size:13px; }
  #tentang-page .tp-roadmap-vtl-theme{ font-size:10.5px; }
  #tentang-page .tp-roadmap-vtl-card{ padding:14px 16px; gap:12px; }
  #tentang-page .tp-roadmap-vtl-detail-wrap{ padding-left:90px; }
  #tentang-page .tp-roadmap-vtl-detail{ padding:24px 20px; }
  #tentang-page .tp-roadmap-vtl-detail-year{ font-size:42px; min-width:54px; }
  #tentang-page .tp-roadmap-vtl-detail-label{ font-size:20px; }
}
@media(max-width:520px){
  #tentang-page .tp-roadmap-vtl{
    padding-left:56px;
  }
  #tentang-page .tp-roadmap-vtl-line{ left:14px; width:2px; }
  #tentang-page .tp-roadmap-vtl-node{ left:-48px; top:14px; width:28px; height:28px; }
  #tentang-page .tp-roadmap-vtl-dot{ width:12px; height:12px; border-width:2px; }
  #tentang-page .tp-roadmap-vtl-connector{ display:none; }
  #tentang-page .tp-roadmap-vtl-card{
    flex-direction:row;
    align-items:flex-start;
    padding:12px 14px;
    gap:10px;
  }
  #tentang-page .tp-roadmap-vtl-year{ font-size:22px; min-width:28px; padding-top:2px; }
  #tentang-page .tp-roadmap-vtl-label{ font-size:12px; }
  #tentang-page .tp-roadmap-vtl-theme{ font-size:10px; }
  #tentang-page .tp-roadmap-vtl-detail-wrap{ padding-left:0; margin-top:20px; }
  #tentang-page .tp-roadmap-vtl-detail-head{ gap:10px; }
  #tentang-page .tp-roadmap-vtl-detail-year{ font-size:36px; min-width:44px; }
  #tentang-page .tp-roadmap-vtl-detail-label{ font-size:18px; }
}
@media(prefers-reduced-motion:reduce){
  #tentang-page .tp-roadmap-vtl-item,
  #tentang-page .tp-roadmap-vtl-card,
  #tentang-page .tp-roadmap-vtl-dot,
  #tentang-page .tp-roadmap-vtl-ring,
  #tentang-page .tp-roadmap-vtl-line-fill{ transition:none; }
  #tentang-page .tp-roadmap-vtl-pulse{ animation:none; }
}


/* ==========================================================================
   HYBRID DISTRIBUTION — 3 KOLOM SEJAJAR (OPSI B)
   ========================================================================== */
#tentang-page .tp-hybrid-3col{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:10px;
}
#tentang-page .tp-hybrid-col{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 24px 24px;
  box-shadow:0 4px 16px rgba(31,95,33,.06);
  transition:transform .4s cubic-bezier(.16,.8,.28,1), box-shadow .4s ease, border-color .4s ease;
}
#tentang-page .tp-hybrid-col:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(31,95,33,.12);
  border-color:rgba(200,155,74,.35);
}
/* Kolom unggulan B2P */
#tentang-page .tp-hybrid-col--featured{
  background:linear-gradient(165deg,var(--herbal-deep) 0%,var(--herbal) 100%);
  border-color:transparent;
  box-shadow:0 18px 44px rgba(22,63,23,.28), 0 0 0 1px rgba(200,155,74,.2);
  transform:translateY(-6px);
}
#tentang-page .tp-hybrid-col--featured:hover{
  transform:translateY(-11px);
  box-shadow:0 26px 56px rgba(22,63,23,.36), 0 0 0 1px rgba(200,155,74,.35);
}
/* Pita unggulan */
#tentang-page .tp-hybrid-col-ribbon{
  position:absolute;
  top:16px;
  right:-6px;
  background:var(--gold);
  color:var(--herbal-deep);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 14px 5px 12px;
  border-radius:6px 0 0 6px;
  box-shadow:0 4px 12px rgba(200,155,74,.35);
  z-index:2;
}
#tentang-page .tp-hybrid-col-ribbon::after{
  content:'';
  position:absolute;
  right:0;
  bottom:-6px;
  width:6px;
  height:6px;
  background:#8a6d2a;
  clip-path:polygon(0 0,100% 0,0 100%);
}
/* Header kolom */
#tentang-page .tp-hybrid-col-head{
  text-align:center;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--border);
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-head{
  border-bottom-color:rgba(200,155,74,.25);
}
#tentang-page .tp-hybrid-col-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  background:linear-gradient(150deg,var(--green-soft),#fff);
  color:var(--herbal);
  transition:transform .35s ease;
}
#tentang-page .tp-hybrid-col:hover .tp-hybrid-col-icon{
  transform:scale(1.1) rotate(-4deg);
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-icon{
  background:rgba(200,155,74,.18);
  color:var(--gold);
}
#tentang-page .tp-hybrid-col-code{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  font-weight:700;
  color:var(--herbal);
  line-height:1;
  margin-bottom:4px;
  letter-spacing:.02em;
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-code{
  color:var(--gold);
  text-shadow:0 0 14px rgba(216,168,90,.4);
}
#tentang-page .tp-hybrid-col-title{
  font-size:13px;
  font-weight:700;
  color:var(--herbal);
  letter-spacing:.02em;
  margin-bottom:8px;
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-title{
  color:#f3efe4;
}
#tentang-page .tp-hybrid-col-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-desc{
  color:#c9d4cc;
}
/* Daftar item */
#tentang-page .tp-hybrid-col-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#tentang-page .tp-hybrid-col-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12.5px;
  line-height:1.55;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(13,150,105,.04);
  transition:background .25s ease, transform .25s ease;
}
#tentang-page .tp-hybrid-col-list li:hover{
  background:rgba(13,150,105,.08);
  transform:translateX(3px);
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-list li{
  background:rgba(255,255,255,.06);
  color:#e8efe9;
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-list li:hover{
  background:rgba(200,155,74,.12);
}
#tentang-page .tp-hybrid-col-bullet{
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  margin-top:7px;
  box-shadow:0 0 6px rgba(216,168,90,.4);
}
#tentang-page .tp-hybrid-col-list li strong{
  display:block;
  color:var(--herbal);
  font-weight:700;
  font-size:13px;
  margin-bottom:1px;
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-list li strong{
  color:var(--gold);
}
#tentang-page .tp-hybrid-col-list li span{
  display:block;
  color:var(--muted);
  font-size:11.5px;
}
#tentang-page .tp-hybrid-col--featured .tp-hybrid-col-list li span{
  color:#c9d4cc;
}

/* Responsive */
@media(max-width:960px){
  #tentang-page .tp-hybrid-3col{
    grid-template-columns:1fr;
    max-width:440px;
    margin-left:auto;
    margin-right:auto;
    gap:20px;
  }
  #tentang-page .tp-hybrid-col--featured{
    transform:none;
  }
  #tentang-page .tp-hybrid-col--featured:hover{
    transform:translateY(-5px);
  }
}
@media(prefers-reduced-motion:reduce){
  #tentang-page .tp-hybrid-col,
  #tentang-page .tp-hybrid-col-icon,
  #tentang-page .tp-hybrid-col-list li{ transition:none; }
}


/* ==========================================================================
   CERITA KAMI — OVERLAP CREATIVE (OPSI B)
   ========================================================================== */
#tentang-page .tp-cerita-overlap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:20px 0 40px;
}
/* Ornamen daun background */
#tentang-page .tp-cerita-leaf{
  position:absolute;
  color:var(--herbal);
  pointer-events:none;
  z-index:0;
}
#tentang-page .tp-cerita-leaf--1{
  top:-20px;
  left:-40px;
  transform:rotate(-25deg);
}
#tentang-page .tp-cerita-leaf--2{
  bottom:0;
  right:-20px;
  transform:rotate(140deg);
}
/* Inner container */
#tentang-page .tp-cerita-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,420px) 1fr;
  gap:0;
  align-items:center;
  z-index:1;
}
/* Wrapper gambar buku */
#tentang-page .tp-cerita-book-wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:400px;
  margin-right:-50px;
  margin-left:auto;
  transform:rotate(-1.5deg);
  transition:transform .5s cubic-bezier(.16,.8,.28,1);
}
#tentang-page .tp-cerita-book-wrap:hover{
  transform:rotate(0deg) translateY(-4px);
}
/* Override book frame untuk sedikit lebih besar */
#tentang-page .tp-cerita-book-wrap .tp-book-frame{
  transform:none !important;
  box-shadow:0 30px 60px rgba(22,63,23,.28), 0 0 0 1px rgba(216,168,90,.3), 0 0 50px rgba(216,168,90,.15) !important;
}
#tentang-page .tp-cerita-book-wrap .tp-book-frame:hover{
  transform:translateY(-4px) scale(1.01) !important;
}
/* Ornamen sudut emas */
#tentang-page .tp-cerita-corner{
  position:absolute;
  width:36px;
  height:36px;
  z-index:3;
  pointer-events:none;
}
#tentang-page .tp-cerita-corner::before,
#tentang-page .tp-cerita-corner::after{
  content:'';
  position:absolute;
  background:var(--gold);
  box-shadow:0 0 8px rgba(216,168,90,.5);
}
#tentang-page .tp-cerita-corner--tl{
  top:-8px;
  left:-8px;
}
#tentang-page .tp-cerita-corner--tl::before{
  top:0; left:0; width:100%; height:3px; border-radius:2px;
}
#tentang-page .tp-cerita-corner--tl::after{
  top:0; left:0; width:3px; height:100%; border-radius:2px;
}
#tentang-page .tp-cerita-corner--br{
  bottom:-8px;
  right:-8px;
}
#tentang-page .tp-cerita-corner--br::before{
  bottom:0; right:0; width:100%; height:3px; border-radius:2px;
}
#tentang-page .tp-cerita-corner--br::after{
  bottom:0; right:0; width:3px; height:100%; border-radius:2px;
}
/* Lencana emas */
#tentang-page .tp-cerita-badge-gold{
  position:absolute;
  top:-10px;
  right:-10px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(145deg,#e8c87a,#b8892a);
  box-shadow:0 6px 18px rgba(184,137,42,.45), 0 0 0 3px #fff, 0 0 0 5px rgba(216,168,90,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  animation:tpCeritaFloat 4s ease-in-out infinite;
}
#tentang-page .tp-cerita-badge-inner{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--herbal-deep);
}
@keyframes tpCeritaFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-5px) rotate(3deg); }
}
/* Area teks */
#tentang-page .tp-cerita-text{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:32px 28px 32px 70px;
  margin-left:-20px;
  box-shadow:0 12px 36px rgba(31,95,33,.08);
  z-index:1;
}
#tentang-page .tp-cerita-eyebrow{
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:700;
  margin-bottom:10px;
}
#tentang-page .tp-cerita-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:clamp(22px,2.6vw,30px);
  color:var(--herbal);
  margin:0 0 12px;
  line-height:1.2;
}
/* Pembatas emas dekoratif */
#tentang-page .tp-cerita-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
#tentang-page .tp-cerita-divider-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,155,74,.5),transparent);
  max-width:80px;
}
#tentang-page .tp-cerita-divider-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px rgba(216,168,90,.5);
}
#tentang-page .tp-cerita-desc{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.75;
  margin:0 0 12px;
}
#tentang-page .tp-cerita-desc:last-child{
  margin-bottom:0;
}
#tentang-page .tp-cerita-desc strong{
  color:var(--herbal);
  font-weight:700;
}

/* Responsive */
@media(max-width:900px){
  #tentang-page .tp-cerita-inner{
    grid-template-columns:1fr;
    gap:0;
  }
  #tentang-page .tp-cerita-book-wrap{
    margin-right:0;
    margin-bottom:-30px;
    max-width:280px;
    margin-left:auto;
    margin-right:auto;
    transform:rotate(-1deg);
  }
  #tentang-page .tp-cerita-text{
    margin-left:0;
    padding:44px 20px 22px;
    text-align:center;
  }
  #tentang-page .tp-cerita-divider{
    justify-content:center;
  }
  #tentang-page .tp-cerita-leaf--1{ left:-20px; top:-10px; opacity:.7; }
  #tentang-page .tp-cerita-leaf--2{ right:-10px; bottom:20px; opacity:.7; }
}
@media(max-width:520px){
  #tentang-page .tp-cerita-text{
    padding:50px 18px 24px;
    border-radius:18px;
  }
  #tentang-page .tp-cerita-badge-gold{
    width:44px;
    height:44px;
    top:-10px;
    right:-10px;
  }
  #tentang-page .tp-cerita-badge-inner{
    width:32px;
    height:32px;
  }
  #tentang-page .tp-cerita-corner{ width:28px; height:28px; }
}
@media(prefers-reduced-motion:reduce){
  #tentang-page .tp-cerita-book-wrap,
  #tentang-page .tp-cerita-badge-gold{ transition:none; animation:none; }
}


/* ==========================================================================
   PRODUSEN & DISTRIBUTOR — Section di bawah hero
   ========================================================================== */
#tentang-page .tp-produsen-section{
  background:var(--cream);
  padding:56px 24px 48px;
  border-top:1px solid rgba(200,155,74,.15);
  border-bottom:1px solid rgba(200,155,74,.15);
}
#tentang-page .tp-produsen-inner{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:stretch;
}
#tentang-page .tp-produsen-card{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 24px;
  border-radius:16px;
  transition:transform .4s cubic-bezier(.16,.8,.28,1), box-shadow .4s ease;
}
#tentang-page .tp-produsen-card:hover{
  transform:translateY(-4px);
}
/* Kartu Produsen (kiri) — background krem */
#tentang-page .tp-produsen-card--producer{
  background:#fff;
  border:1px solid rgba(200,155,74,.25);
  box-shadow:0 6px 20px rgba(31,95,33,.06);
}
#tentang-page .tp-produsen-card--producer:hover{
  box-shadow:0 14px 36px rgba(31,95,33,.12), 0 0 0 1px rgba(200,155,74,.4);
}
#tentang-page .tp-produsen-card--producer .tp-produsen-icon{
  background:linear-gradient(145deg,var(--green-soft),#fff);
  color:var(--herbal);
  border:1px solid rgba(200,155,74,.3);
}
#tentang-page .tp-produsen-card--producer .tp-produsen-label{
  color:var(--gold);
}
#tentang-page .tp-produsen-card--producer .tp-produsen-name{
  color:var(--herbal);
}
#tentang-page .tp-produsen-card--producer .tp-produsen-desc{
  color:var(--muted);
}
/* Kartu Distributor (kanan) — background hijau */
#tentang-page .tp-produsen-card--distributor{
  background:linear-gradient(135deg,var(--herbal-deep),var(--herbal));
  border:1px solid rgba(200,155,74,.35);
  box-shadow:0 8px 24px rgba(10,36,16,.2);
}
#tentang-page .tp-produsen-card--distributor:hover{
  box-shadow:0 16px 40px rgba(10,36,16,.32), 0 0 0 1px rgba(200,155,74,.55);
}
#tentang-page .tp-produsen-card--distributor .tp-produsen-icon{
  background:rgba(255,255,255,.1);
  color:var(--gold);
  border:1px solid rgba(200,155,74,.4);
}
#tentang-page .tp-produsen-card--distributor .tp-produsen-label{
  color:rgba(200,155,74,.85);
}
#tentang-page .tp-produsen-card--distributor .tp-produsen-name{
  color:#f3efe4;
}
#tentang-page .tp-produsen-card--distributor .tp-produsen-desc{
  color:rgba(243,239,228,.7);
}
/* Ikon bulat */
#tentang-page .tp-produsen-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
#tentang-page .tp-produsen-card:hover .tp-produsen-icon{
  transform:scale(1.1) rotate(-4deg);
}
#tentang-page .tp-produsen-card--producer:hover .tp-produsen-icon{
  box-shadow:0 6px 16px rgba(200,155,74,.3);
}
#tentang-page .tp-produsen-card--distributor:hover .tp-produsen-icon{
  box-shadow:0 6px 16px rgba(200,155,74,.45);
}
/* Body teks */
#tentang-page .tp-produsen-body{
  flex:1;
  min-width:0;
}
#tentang-page .tp-produsen-label{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:4px;
}
#tentang-page .tp-produsen-name{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size:clamp(17px,2vw,22px);
  line-height:1.25;
  margin-bottom:6px;
}
#tentang-page .tp-produsen-desc{
  font-size:12px;
  line-height:1.6;
  margin:0;
}
/* Responsive */
@media(max-width:768px){
  #tentang-page .tp-produsen-section{
    padding:40px 20px 32px;
  }
  #tentang-page .tp-produsen-inner{
    grid-template-columns:1fr;
    gap:14px;
  }
  #tentang-page .tp-produsen-card{
    padding:18px 20px;
    gap:14px;
  }
  #tentang-page .tp-produsen-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
  }
  #tentang-page .tp-produsen-icon svg{
    width:22px;
    height:22px;
  }
}
@media(prefers-reduced-motion:reduce){
  #tentang-page .tp-produsen-card,
  #tentang-page .tp-produsen-icon{ transition:none; }
}

/* ============================================================
   PESAN DIREKTUR ENHANCEMENT — cinematic gold glow (matches image)
   ============================================================ */
#tentang-page .tp-direktur-section{ background:linear-gradient(180deg, var(--cream) 0%, #f0ebdd 100%); }
#tentang-page .tp-direktur-honeycomb{
  opacity:.22; filter:drop-shadow(0 0 20px rgba(216,168,90,.3));
  animation:tpDirHexFloat 10s ease-in-out infinite;
}
@keyframes tpDirHexFloat{ 0%,100%{ transform:scaleX(-1) translate(0,0); } 50%{ transform:scaleX(-1) translate(-12px,10px); } }
#tentang-page .tp-direktur-photo-backdrop{
  background:linear-gradient(160deg,var(--herbal-deep),var(--herbal)) !important;
  box-shadow:0 0 0 1px rgba(216,168,90,.4), 0 0 40px rgba(216,168,90,.25);
}
#tentang-page .tp-direktur-photo-frame{
  box-shadow:0 24px 50px rgba(22,63,23,.3), 0 0 0 1px rgba(216,168,90,.5), 0 0 30px rgba(216,168,90,.3);
  transition:transform .5s cubic-bezier(.16,.8,.28,1), box-shadow .5s ease;
  overflow:hidden; position:relative;
}
#tentang-page .tp-direktur-photo-frame::after{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,240,200,.3), transparent);
  transform:skewX(-18deg); animation:tpShine 6s ease-in-out infinite; pointer-events:none; z-index:2;
}
#tentang-page .tp-direktur-photo-wrap:hover .tp-direktur-photo-frame{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 30px 60px rgba(22,63,23,.35), 0 0 0 1px rgba(255,224,160,.7), 0 0 50px rgba(216,168,90,.5);
}
#tentang-page .tp-direktur-quote-card{
  border:1px solid rgba(216,168,90,.5) !important;
  box-shadow:0 16px 36px rgba(22,63,23,.18), 0 0 24px rgba(216,168,90,.3) !important;
  transition:transform .4s ease, box-shadow .4s ease;
}
#tentang-page .tp-direktur-photo-wrap:hover .tp-direktur-quote-card{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(22,63,23,.22), 0 0 34px rgba(216,168,90,.45) !important;
}
#tentang-page .tp-direktur-quote-mark{ text-shadow:0 0 14px rgba(216,168,90,.5); }
#tentang-page .tp-direktur-title{
  background:linear-gradient(160deg, var(--herbal-deep), #1d4a22);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#tentang-page .tp-direktur-rule{
  width:56px !important; height:3px !important;
  background:linear-gradient(90deg, var(--gold), #f3e2b8) !important;
  box-shadow:0 0 10px rgba(216,168,90,.6);
}
#tentang-page .tp-direktur-name{
  font-size:21px !important;
  background:linear-gradient(160deg, #8a6d3a, var(--gold) 60%, #b8893c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(216,168,90,.3);
}
#tentang-page .tp-direktur-tagline{
  opacity:1 !important;
  text-shadow:0 0 16px rgba(216,168,90,.4);
  font-size:17px !important;
}
@keyframes tpShine{ 0%{ left:-80%; } 45%,100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-direktur-honeycomb, #tentang-page .tp-direktur-photo-frame::after{ animation:none !important; }
}

/* ---- Pesan Direktur: extra dynamic layer (canvas, orbs, swoosh, tilt) ---- */
#tentang-page .tp-dir-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#tentang-page .tp-dir-orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(30px); opacity:.5; }
#tentang-page .tp-dir-orb-1{ width:280px; height:280px; top:-60px; right:8%; background:radial-gradient(circle, rgba(216,168,90,.5), transparent 70%); animation:tpDirOrbFloat 9s ease-in-out infinite; }
#tentang-page .tp-dir-orb-2{ width:220px; height:220px; bottom:-40px; left:6%; background:radial-gradient(circle, rgba(61,174,71,.35), transparent 70%); animation:tpDirOrbFloat 12s ease-in-out infinite reverse; }
@keyframes tpDirOrbFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(20px,-18px) scale(1.08); } }
#tentang-page .tp-direktur-inner{ position:relative; z-index:2; }
#tentang-page .tp-direktur-photo-wrap{ perspective:1000px; }
#tentang-page .tp-direktur-photo-frame{ transform-style:preserve-3d; transition:transform .2s ease-out, box-shadow .5s ease; will-change:transform; }
#tentang-page .tp-direktur-photo-frame.is-tilting{ transition:transform .1s ease-out; }
#tentang-page .tp-direktur-section::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:90%; height:140%; pointer-events:none; z-index:0; opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cdefs%3E%3ClinearGradient id='gd' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23d8a85a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23ffe0a0' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23d8a85a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='bd'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M20 160 C 220 40, 580 40, 780 160' fill='none' stroke='url(%23gd)' stroke-width='2.5' filter='url(%23bd)'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:tpDirSwoosh 6s ease-in-out infinite;
}
@keyframes tpDirSwoosh{ 0%,100%{ opacity:.45; transform:translate(-50%,-50%) scaleX(1); } 50%{ opacity:.85; transform:translate(-50%,-50%) scaleX(1.05); } }
#tentang-page .tp-direktur-quote-card{ animation:tpDirCardFloat 7s ease-in-out infinite; }
@keyframes tpDirCardFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
#tentang-page .tp-direktur-tagline{ animation:tpDirTaglineGlow 4s ease-in-out infinite; }
@keyframes tpDirTaglineGlow{ 0%,100%{ text-shadow:0 0 12px rgba(216,168,90,.3); } 50%{ text-shadow:0 0 24px rgba(255,200,110,.7); } }
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-dir-orb, #tentang-page .tp-direktur-section::before,
  #tentang-page .tp-direktur-quote-card, #tentang-page .tp-direktur-tagline{ animation:none !important; }
  #tentang-page .tp-dir-canvas{ display:none; }
}

/* ---- Pesan Direktur: SPECIAL DARK BACKGROUND (cinematic, stands out) ---- */
#tentang-page .tp-direktur-section{
  background:radial-gradient(ellipse at 20% 20%, rgba(216,168,90,.12), transparent 50%),
             radial-gradient(ellipse at 85% 80%, rgba(61,174,71,.18), transparent 55%),
             linear-gradient(160deg, #081f0d 0%, var(--herbal-deep) 45%, #0a2611 100%) !important;
}
#tentang-page .tp-direktur-section::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.07;
  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 0 56 16v34L28 66 0 50V16z' fill='none' stroke='%23d8a85a' stroke-width='1'/%3E%3Cpath d='M28 66 56 82v18H0V82z' fill='none' stroke='%23d8a85a' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 100px;
}
#tentang-page .tp-direktur-honeycomb{ opacity:.18 !important; filter:drop-shadow(0 0 30px rgba(216,168,90,.4)); }
#tentang-page .tp-direktur-title{
  background:linear-gradient(160deg, #fff8e8, #f3efe4 60%, #e9c48c) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
#tentang-page .tp-direktur-desc{ color:#c4d2c9 !important; }
#tentang-page .tp-direktur-role{ color:#9fb3a7 !important; }
#tentang-page .tp-direktur-rule{ box-shadow:0 0 14px rgba(255,200,110,.8) !important; }
#tentang-page .tp-direktur-quote-card{
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 30px rgba(216,168,90,.4) !important;
}
#tentang-page .tp-direktur-photo-backdrop{
  box-shadow:0 0 0 1px rgba(255,224,160,.5), 0 0 50px rgba(216,168,90,.35) !important;
}
#tentang-page .tp-direktur-photo-frame{
  box-shadow:0 28px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,224,160,.6), 0 0 40px rgba(216,168,90,.4) !important;
}
#tentang-page .tp-dir-orb-1{ opacity:.6 !important; }
#tentang-page .tp-dir-orb-2{ opacity:.4 !important; }
@media (max-width:720px){
  #tentang-page .tp-direktur-title{ -webkit-text-fill-color:#f3efe4 !important; }
}

/* ---- Tagline: closer to text + more slanted ---- */
#tentang-page .tp-direktur-inner{ gap:30px; }
#tentang-page .tp-direktur-tagline{
  margin-left:-50px;
  transform:rotate(-5deg) !important;
  max-width:210px;
  font-size:18px !important;
}

/* ==========================================================================
   ROADMAP — layout KIRI (timeline) & KANAN (detail) di desktop.
   Di layar <= 960px tetap menumpuk (timeline di atas, detail di bawah).
   ========================================================================== */
@media(min-width:961px){
  #tentang-page .tp-roadmap-split{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:32px;
    align-items:start;
  }
  #tentang-page .tp-roadmap-split .tp-roadmap-vtl{ max-width:none; margin:0; }
  #tentang-page .tp-roadmap-split .tp-roadmap-vtl-detail-wrap{
    max-width:none; margin:0; padding-left:0; min-height:0;
    position:sticky; top:110px; /* ikut turun saat scroll, tidak lepas dari timeline */
  }
}

/* ==========================================================================
   TIM KAMI — dynamic team cards (Motivator, Medical Advisor, Legal)
   ========================================================================== */
#tentang-page .tp-team-section{
  position:relative; overflow:hidden; padding:96px 24px 100px;
  background:linear-gradient(180deg, var(--cream) 0%, #fbf8ef 100%);
}
#tentang-page .tp-team-glow{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
#tentang-page .tp-team-glow-a{ width:420px; height:420px; top:-160px; left:-120px; background:radial-gradient(circle, rgba(200,155,74,.16), transparent 70%); }
#tentang-page .tp-team-glow-b{ width:360px; height:360px; bottom:-140px; right:-100px; background:radial-gradient(circle, rgba(61,174,71,.14), transparent 70%); }
#tentang-page .tp-team-inner{ position:relative; z-index:1; max-width:1140px; margin:0 auto; }

#tentang-page .tp-team-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;
}
@media (max-width:900px){ #tentang-page .tp-team-grid{ grid-template-columns:1fr; max-width:400px; margin:0 auto; } }

#tentang-page .tp-team-card{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden;
  box-shadow:0 14px 36px rgba(31,95,33,.08);
  transition:transform .45s cubic-bezier(.16,.8,.28,1), box-shadow .45s ease, border-color .45s ease;
}
#tentang-page .tp-team-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(31,95,33,.16), 0 0 0 1px rgba(200,155,74,.25);
  border-color:transparent;
}

#tentang-page .tp-team-photo{ position:relative; aspect-ratio:3/3.7; overflow:hidden; background:#0e2a12; }
#tentang-page .tp-team-photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .7s cubic-bezier(.16,.8,.28,1), filter .7s ease;
  filter:saturate(1.02);
}
#tentang-page .tp-team-card:hover .tp-team-photo img{ transform:scale(1.07); }
#tentang-page .tp-team-photo-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, transparent 45%, rgba(8,38,28,.06) 70%, rgba(8,38,28,.14) 100%);
}
#tentang-page .tp-team-photo::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:46%; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.94) 92%, #fff 100%);
}

#tentang-page .tp-team-body{ position:relative; padding:6px 26px 30px; text-align:center; margin-top:-34px; }
#tentang-page .tp-team-role{
  display:inline-block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:#8a6d3a; background:var(--gold-soft); border-radius:999px; padding:6px 14px; margin-bottom:12px;
}
#tentang-page .tp-team-name{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:23px; color:var(--herbal); margin:0 0 4px; line-height:1.2;
}
#tentang-page .tp-team-cred{ font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:2px; }
#tentang-page .tp-team-org{ font-size:12.5px; color:var(--gold); font-weight:700; letter-spacing:.02em; margin-bottom:16px; }
#tentang-page .tp-team-tags{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
#tentang-page .tp-team-tags span{
  font-size:11px; font-weight:600; color:var(--herbal); background:var(--green-soft);
  border-radius:999px; padding:5px 11px; line-height:1.4; transition:background .3s ease, color .3s ease, transform .3s ease;
}
#tentang-page .tp-team-card:hover .tp-team-tags span{ transform:translateY(-1px); }
#tentang-page .tp-team-card:hover .tp-team-tags span:nth-child(1){ background:var(--herbal); color:#f3efe4; }

@media (max-width:640px){
  #tentang-page .tp-team-section{ padding:72px 18px 80px; }
  #tentang-page .tp-team-photo{ aspect-ratio:3/3.3; }
}
@media (prefers-reduced-motion: reduce){
  #tentang-page .tp-team-card, #tentang-page .tp-team-photo img, #tentang-page .tp-team-tags span{ transition:none; }
}