/* --- HERO PROFIL DESA --- */
.page-header { padding: 8.5rem 0 2.5rem; background: transparent !important; }
.profile-hero {
    position: relative; overflow: hidden; border: 1px solid rgba(46,125,87,.12);
    border-radius: 30px; padding: 3.2rem 3.4rem;
    background: radial-gradient(circle at 88% 20%, rgba(93,174,139,.18), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,252,249,.78));
    box-shadow: 0 18px 50px rgba(31,86,62,.07); opacity: 0; transform: translateY(28px);
    animation: fadeUp .8s cubic-bezier(.22,1,.36,1) .08s forwards;
}
.profile-hero::after { content:''; position:absolute; width:230px; height:230px; right:-70px; bottom:-90px; border:34px solid rgba(46,125,87,.05); border-radius:50%; pointer-events:none; }
.page-header h1 { font-size:clamp(2.25rem,5vw,3.6rem); line-height:1.08; letter-spacing:-.04em; font-weight:800; max-width:680px; margin:.55rem 0 1rem; }
.page-header h1 span {
    background: linear-gradient(135deg, #2E7D57, #5DAE8B, #1A56DB, #3B82F6);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientMove 5s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite;
}
@keyframes gradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(46, 125, 87, 0.2)); }
    50% { filter: drop-shadow(0 0 25px rgba(26, 86, 219, 0.5)); }
}
.page-header p { color:var(--pd-text-muted); max-width:700px; margin:0; line-height:1.8; font-size:1rem; }
.hero-orbit { width:190px; height:190px; margin-left:auto; position:relative; display:grid; place-items:center; }
.hero-orbit .main-icon { width:92px; height:92px; border-radius:28px; display:grid; place-items:center; background:linear-gradient(145deg,#2E7D57,#489A72); color:#fff; font-size:2.2rem; box-shadow:0 18px 35px rgba(46,125,87,.22); animation:floatIcon 4s ease-in-out infinite; z-index:2; }
.hero-orbit .orbit-ring { position:absolute; inset:7px; border:1px dashed rgba(46,125,87,.25); border-radius:50%; animation:spinSlow 18s linear infinite; }
.hero-orbit .mini-icon { position:absolute; width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.96); border:1px solid rgba(46,125,87,.12); color:#2E7D57; display:grid; place-items:center; box-shadow:0 10px 25px rgba(31,86,62,.09); }
.hero-orbit .mini-icon.one { top:6px; left:22px; animation:floatSmall 3.8s ease-in-out infinite; }
.hero-orbit .mini-icon.two { right:0; bottom:34px; animation:floatSmall 4.4s ease-in-out infinite .5s; }
.hero-orbit .mini-icon.three { left:6px; bottom:14px; animation:floatSmall 4.1s ease-in-out infinite 1s; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes floatIcon { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-9px) rotate(-2deg); } }
@keyframes floatSmall { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes spinSlow { to { transform:rotate(360deg); } }
/* --- SECTION & CARD PROFIL --- */
.profile-section { padding:1.2rem 0 2rem; }
.section-heading { margin-bottom:1.35rem; opacity:0; transform:translateY(20px); }
.section-heading.reveal-visible { animation:fadeUp .7s cubic-bezier(.22,1,.36,1) forwards; }
.section-heading h2 { margin:.35rem 0; font-size:clamp(1.65rem,3vw,2.15rem); font-weight:800; letter-spacing:-.03em; color:var(--pd-heading); }
.section-heading p { color:var(--pd-text-muted); margin:0; max-width:680px; line-height:1.7; }
.gradient-text {
    background: linear-gradient(135deg, #2E7D57, #5DAE8B, #1A56DB, #3B82F6);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientMove 5s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite;
    display: inline-block;
}
.content-card {
    background:rgba(255,255,255,.78); border:1px solid rgba(46,125,87,.10);
    border-radius:24px; padding:2rem 2.2rem; box-shadow:0 10px 35px rgba(30,84,60,.05);
    transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
    opacity:0; transform:translateY(24px); height:100%; position:relative; overflow:hidden;
}
.content-card.reveal-visible { animation:fadeUp .75s cubic-bezier(.22,1,.36,1) forwards; }
.content-card::after {
    content:''; position:absolute; left:-30%; bottom:-45px; width:160%; height:70px;
    background:linear-gradient(90deg,transparent,rgba(46,125,87,.035),rgba(59,130,246,.055),transparent);
    transform:translateX(-18%); transition:transform .7s ease; pointer-events:none;
}
.content-card:hover {
    transform:translateY(-7px); box-shadow:0 20px 48px rgba(46,125,87,.11),0 8px 28px rgba(26,86,219,.05);
    border-color:rgba(46,125,87,.22);
}
.content-card:hover::after { transform:translateX(18%); }
.card-icon { width:54px; height:54px; border-radius:17px; display:inline-grid; place-items:center; margin-bottom:1rem; font-size:1.35rem; background:rgba(46,125,87,.10); color:#2E7D57; transition:transform .35s ease, background .35s ease; }
.content-card:hover .card-icon { transform:translateY(-3px) rotate(-4deg) scale(1.04); background:rgba(46,125,87,.16); }
.content-card h5,
.content-card .h5 { font-size:1.15rem; font-weight:800; margin-bottom:.8rem; color:var(--pd-heading); }
.content-card p,.content-card li { color:var(--pd-text-muted); font-size:.95rem; line-height:1.8; }
/* --- SEJARAH --- */
.history-card {
    padding:0;
    background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(239,250,246,.78),rgba(235,243,255,.78));
    border-color:rgba(46,125,87,.13);
}
.history-grid { display:grid; grid-template-columns:220px 1fr; min-height:285px; }
.history-year {
    background:linear-gradient(145deg,#2E7D57 0%,#398D72 42%,#3B82B8 76%,#1A56DB 100%);
    background-size:220% 220%;
    animation:historyGradient 8s ease-in-out infinite;
    color:#fff; padding:2.2rem; display:flex; flex-direction:column;
    justify-content:space-between; position:relative; overflow:hidden;
}
@keyframes historyGradient {
    0%,100% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
}
.history-year::before {
    content:''; position:absolute; width:190px; height:190px; border-radius:50%;
    border:1px solid rgba(255,255,255,.18); right:-75px; top:-80px;
    box-shadow:0 0 0 22px rgba(255,255,255,.04),0 0 0 44px rgba(255,255,255,.025);
    animation:historyOrbit 7s linear infinite;
}
.history-year::after {
    content:''; position:absolute; width:135px; height:135px; border-radius:50%;
    border:25px solid rgba(255,255,255,.08); right:-60px; bottom:-50px;
    animation:historyPulse 4s ease-in-out infinite;
}
@keyframes historyOrbit { to { transform:rotate(360deg); } }
@keyframes historyPulse { 0%,100%{transform:scale(.9);opacity:.5} 50%{transform:scale(1.12);opacity:1} }
.history-year .year-label { font-size:.72rem; letter-spacing:.14em; font-weight:700; opacity:.82; text-transform:uppercase; position:relative;z-index:2; }
.history-year .year-number {
    font-size:3.35rem; font-weight:800; letter-spacing:-.05em; line-height:1;
    position:relative;z-index:2; text-shadow:0 8px 25px rgba(0,0,0,.12);
    animation:yearFloat 4s ease-in-out infinite;
}
@keyframes yearFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.history-year .year-icon { font-size:1.45rem; opacity:.9; position:relative;z-index:2; }
.history-copy {
    padding:2.4rem 2.7rem; display:flex; flex-direction:column; justify-content:center;
    position:relative;
}
.history-copy::before { display: none; }
.history-card:hover .history-copy::before { display: none; }
.history-copy h3::after { display: none; }
.history-copy h3 {
    font-size:1.55rem; font-weight:800; margin-bottom:.8rem; color:var(--pd-heading);
    position:relative;
}
/* BATASI TINGGI TEKS SEJARAH DENGAN SCROLL */
.history-copy p {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 8px;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(46,125,87,0.3) transparent;
}
.history-copy p::-webkit-scrollbar {
    width: 5px;
}
.history-copy p::-webkit-scrollbar-track {
    background: transparent;
}
.history-copy p::-webkit-scrollbar-thumb {
    background: rgba(46,125,87,0.3);
    border-radius: 8px;
}
.history-copy p::-webkit-scrollbar-thumb:hover {
    background: rgba(46,125,87,0.5);
}
.history-copy p { margin:0; }
.history-card:hover .history-year { box-shadow:inset -12px 0 35px rgba(26,86,219,.08); }
.history-card:hover .year-icon { transform:translateY(-3px) rotate(-6deg); transition:transform .35s ease; }
/* --- VISI --- */
.vision-card {
    background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(238,249,244,.82),rgba(235,243,255,.76));
}
.vision-card::before {
    content:'“'; position:absolute; right:20px; top:-32px; font-size:9rem; line-height:1;
    font-weight:800; color:rgba(46,125,87,.07); font-family:Georgia,serif;
    transition:transform .6s ease,color .6s ease;
}
.vision-card::after {
    content:''; position:absolute; width:170px; height:170px; border-radius:50%;
    right:-80px; bottom:-90px;
    background:radial-gradient(circle,rgba(59,130,246,.16),transparent 68%);
    transition:transform .7s ease;
}
.vision-card:hover::before { transform:translate(-8px,8px) rotate(-5deg); color:rgba(59,130,246,.10); }
.vision-card:hover::after { transform:scale(1.45); }
.vision-text {
    font-size:1.08rem !important; font-weight:600; color:var(--pd-heading) !important;
    line-height:1.85 !important; position:relative; z-index:2;
}
.mission-list { list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.8rem; position:relative;z-index:2; }
.mission-item { display:grid; grid-template-columns:42px 1fr; gap:.8rem; align-items:start; margin:0 !important; }
.mission-number {
    width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg,rgba(46,125,87,.10),rgba(59,130,246,.12));
    color:#2E7D57; font-size:.72rem; font-weight:800;
    transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease;
}
.mission-item:hover .mission-number {
    transform:translateY(-3px) scale(1.08); background:linear-gradient(135deg,#2E7D57,#1A56DB);
    color:#fff; box-shadow:0 8px 18px rgba(46,125,87,.18);
}
.mission-item span:last-child { padding-top:.35rem; color:var(--pd-text-muted); line-height:1.7; transition:transform .3s ease,color .3s ease; }
.mission-item:hover span:last-child { transform:translateX(4px); color:var(--pd-heading); }
.content-card.delay-1 { animation-delay:.08s; }
.content-card.delay-2 { animation-delay:.16s; }
/* --- TABEL STRUKTUR --- */
.table-struktur {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0 6px;
}
.table-struktur thead th {
    background: rgba(46, 125, 87, 0.08);
    color: var(--pd-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 10px 10px 0 0;
}
.table-struktur tbody tr {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 10px;
    cursor: default;
}
.table-struktur tbody tr:hover {
    background: rgba(46, 125, 87, 0.08);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(46, 125, 87, 0.06);
}
.table-struktur tbody td {
    padding: 0.7rem 1rem;
    border: none;
    vertical-align: middle;
    color: var(--pd-text);
    font-size: 0.92rem;
    background: transparent;
    border-radius: 0;
}
.table-struktur tbody tr td:first-child {
    border-radius: 10px 0 0 10px;
}
.table-struktur tbody tr td:last-child {
    border-radius: 0 10px 10px 0;
}
.table-struktur tbody td strong {
    color: var(--pd-heading);
    font-weight: 600;
}
.badge-struktur {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.8rem;
    border-radius: 40px;
    background: rgba(46, 125, 87, 0.10);
    color: #2E7D57;
    transition: all 0.3s ease;
    display: inline-block;
}
.table-struktur tbody tr:hover .badge-struktur {
    background: #2E7D57;
    color: #fff;
    transform: scale(1.05);
}
.table-struktur tbody td:first-child {
    font-weight: 700;
    color: #9CA3AF;
    font-size: 0.8rem;
}
.table-struktur tbody tr:hover td:first-child {
    color: #2E7D57;
}
.structure-card { padding:2.2rem; }
.structure-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.structure-title-wrap { display:flex; gap:.95rem; align-items:center; }
.structure-title-wrap .card-icon { margin:0; flex:0 0 auto; background:rgba(139,92,246,.10); color:#8B5CF6; }
.structure-title-wrap h5,
.structure-title-wrap .h5 { margin:0 0 .25rem; }
.structure-title-wrap p { margin:0; font-size:.9rem; }
.structure-count { white-space:nowrap; padding:.55rem .9rem; border-radius:999px; background:rgba(46,125,87,.08); color:#2E7D57; font-size:.76rem; font-weight:800; }
.jabatan-wrap { display:flex; align-items:center; gap:.7rem; }
.jabatan-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(46,125,87,.08); color:#2E7D57; font-size:.82rem; transition:transform .3s ease,background .3s ease,color .3s ease; }
.table-struktur tbody tr:hover .jabatan-icon { transform:rotate(-5deg) scale(1.08); background:#2E7D57; color:#fff; }
.structure-card .table-responsive { border-radius:16px; }
/* --- FOOTER --- */
.pd-footer {
    background:transparent; padding:2rem 0 1.5rem; margin-top:1rem;
    border-top:1px solid rgba(46,125,87,.08);
}
.pd-footer-brand {
    display:inline-flex; align-items:center; gap:.7rem; text-decoration:none;
    position:relative; transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.pd-footer-brand:hover { transform:translateY(-3px) scale(1.02); }
.pd-footer-icon {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,rgba(46,125,87,.12),rgba(59,130,246,.10));
    color:#2E7D57; font-size:.9rem; animation:footerIconFloat 4s ease-in-out infinite;
}
.pd-footer-icon i { position:relative; z-index:2; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.pd-footer-brand:hover .pd-footer-icon i { transform:scale(1.15) rotate(-8deg); }
@keyframes footerIconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.pd-footer-ring {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    border-radius:50%; pointer-events:none; will-change:transform,opacity;
}
.pd-footer-ring.ring-1 {
    width:calc(100% + 8px); height:calc(100% + 8px);
    border:1.5px solid rgba(46,125,87,.15); animation:footerPulse 2.8s ease-in-out infinite;
}
.pd-footer-ring.ring-2 {
    width:calc(100% + 16px); height:calc(100% + 16px);
    border:1px solid rgba(59,130,246,.10); animation:footerPulse 3.6s ease-in-out infinite .6s;
}
.pd-footer-ring.ring-3 {
    width:calc(100% + 26px); height:calc(100% + 26px);
    border:1px solid rgba(26,86,219,.06); animation:footerPulse 4.4s ease-in-out infinite 1.2s;
}
@keyframes footerPulse {
    0%{transform:translate(-50%,-50%) scale(.85);opacity:.6}
    50%{transform:translate(-50%,-50%) scale(1.15);opacity:.2}
    100%{transform:translate(-50%,-50%) scale(.85);opacity:.6}
}
.pd-footer-brand:hover .ring-1 { border-color:rgba(46,125,87,.35); animation-duration:1.8s; }
.pd-footer-brand:hover .ring-2 { border-color:rgba(59,130,246,.25); }
.pd-footer-brand:hover .ring-3 { border-color:rgba(26,86,219,.14); }
.pd-footer-brand-text {
    font-weight:700; font-size:.95rem; letter-spacing:-.01em;
    background:linear-gradient(135deg,#1E2A20,#2E7D57,#1A56DB,#2E7D57,#1E2A20);
    background-size:300% 300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; animation:footerTextShimmer 5s ease-in-out infinite;
    transition:filter .4s ease;
}
@keyframes footerTextShimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.pd-footer-brand:hover .pd-footer-brand-text { filter:drop-shadow(0 0 12px rgba(46,125,87,.25)); animation-duration:2.5s; }
.pd-footer-copy { display:inline-block; font-weight:600; font-size:.85rem; letter-spacing:.02em; color:#6B7A73; }
.pd-footer-copy .copy-text {
    display:inline-block; background:linear-gradient(135deg,#6B7A73,#2E7D57,#1A56DB,#6B7A73);
    background-size:300% 300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; animation:footerCopyrightShine 6s ease-in-out infinite; font-weight:700;
    transition:filter .4s ease;
}
@keyframes footerCopyrightShine { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.pd-footer-copy:hover .copy-text {
    filter:drop-shadow(0 0 18px rgba(46,125,87,.5)) drop-shadow(0 0 35px rgba(26,86,219,.25));
    animation-duration:2s;
}
/* --- Responsive --- */
@media (max-width: 991.98px) {
    .content-card { padding: 1.5rem; }
    .table-struktur thead th { font-size: 0.7rem; padding: 0.6rem 0.8rem; }
    .table-struktur tbody td { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
}
@media (max-width: 767.98px) {
    .page-header { text-align: center; }
    .page-header p { margin: 0.5rem auto 0; }
    .page-header h1 { font-size: 2rem; }
    .profile-hero { padding:2rem 1.4rem; }
    .history-grid { grid-template-columns:1fr; }
    .history-year { min-height:180px; }
    .history-copy { padding:1.6rem; }
    .content-card { padding:1.35rem; }
    .structure-head { flex-direction:column; }
    .structure-count { align-self:flex-start; }
    .pd-footer { padding-top:1.6rem; }
    .pd-footer-copy { font-size:.76rem; }
    .pd-footer-brand-text { font-size:.88rem; }
    .table-struktur thead th { font-size: 0.6rem; padding: 0.4rem 0.5rem; }
    .table-struktur tbody td { padding: 0.4rem 0.5rem; font-size: 0.78rem; }
    .badge-struktur { font-size: 0.5rem; padding: 0.15rem 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}