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

.sejarah-intro { margin-bottom: 44px; }
.sejarah-body  { position: relative; padding-left: 36px; }
.sejarah-body::before {
    content: '';
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, #0077aa, #c9a84c 50%, #0077aa);
}
.sejarah-block { position: relative; margin-bottom: 48px; }
.sejarah-marker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.marker-dot {
    position: absolute; left: -32px;
    width: 16px; height: 16px;
    background: #0077aa;
    border: 3px solid #faf4e4;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0,119,170,.5);
    flex-shrink: 0;
}
.marker-dot--active {
    background: #c9a84c;
    box-shadow: 0 0 0 3px rgba(201,168,76,.5);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(201,168,76,.4); }
    50%      { box-shadow: 0 0 0 8px rgba(201,168,76,.15); }
}
.marker-year { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8b4a10; font-family:'Cinzel',serif; }
.sejarah-content h3 {
    font-family: 'Cinzel', serif;
    font-size: 20px; color: var(--dark);
    margin-bottom: 12px; font-weight: 700;
}
.sejarah-content p {
    color: var(--muted); line-height: 1.9; margin-bottom: 12px; font-size: 15px;
    font-family: 'IM Fell English', Georgia, serif; font-style: italic;
}
.sejarah-content--highlight {
    background: linear-gradient(160deg, #f8f0dc, #eed8a8);
    border-radius: 4px; padding: 24px 28px;
    border-left: 3px solid #0077aa;
    box-shadow: 0 2px 12px rgba(0,95,138,.06);
    position: relative; overflow: hidden;
}
.sejarah-content--highlight::before {
    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: .5; mix-blend-mode: multiply; pointer-events: none;
}