/* ================================================================
   view_kepengurusan.php — extracted styles
   Source: views/view_kepengurusan.php
   ================================================================ */

.periode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.periode-card {
    background: linear-gradient(160deg,#f8f0dc,#eed8a8);
    border: 1px solid rgba(201,168,76,.45);
    border-top: 3px solid #0077aa;
    border-radius: 4px;
    padding: 32px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.periode-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg,rgba(0,95,138,.06),rgba(0,119,170,.1));
    opacity: 0;
    transition: opacity 0.25s;
}
/* Parchment noise */
.periode-card::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: .6; mix-blend-mode: multiply; pointer-events: none;
}
.periode-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,95,138,.15); border-color: rgba(0,119,170,.6); }
.periode-card:hover::before { opacity: 1; }
.periode-icon  { font-size: 36px; margin-bottom: 12px; position: relative; opacity:.7; }
.periode-label { font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #8b5a10; position: relative; font-family:'Cinzel',serif; z-index: 1; }
.periode-tahun { font-family: 'Cinzel', serif; font-size: 26px; font-weight: 700; color: var(--biru-laut-dark, #002a57); margin: 8px 0; position: relative; z-index: 1; }
.periode-arrow { font-size: 12px; color: #0077aa; font-weight: 700; position: relative; margin-top: 8px; font-family:'Cinzel',serif; letter-spacing:.3px; z-index: 1; }