/* ========================================
   MILITARY THEME
   Tema Instansi Militer - Tegas, Disiplin, Profesional
   ======================================== */

/* Color Variables - Military Palette */
:root {
    /* Primary Colors - Military Green & Khaki */
    --military-primary: #2d5016;
    --military-secondary: #4a7c2c;
    --military-accent: #8b7355;
    --military-dark: #1a2f0a;
    --military-light: #6b8e4e;
    
    /* Neutral Colors */
    --military-gray: #4a4a4a;
    --military-gray-light: #7a7a7a;
    --military-beige: #d4c5b0;
    --military-tan: #c9b896;
    
    /* Status Colors */
    --military-gold: #d4af37;
    --military-red: #8b0000;
    --military-blue: #1e3a5f;
    
    /* Background */
    --military-bg: #f5f3ed;
    --military-bg-dark: #2a2a2a;
    
    /* Text */
    --military-text: #2a2a2a;
    --military-text-light: #5a5a5a;
    
    /* Shadows */
    --military-shadow: 0 4px 15px rgba(45, 80, 22, 0.2);
    --military-shadow-hover: 0 8px 25px rgba(45, 80, 22, 0.3);
}

/* Global Military Styling */
body {
    font-family: 'Segoe UI', 'Arial', sans-serif;
    color: var(--military-text);
    background-color: var(--military-bg);
}

/* Header - Military Style */
.header {
    background: linear-gradient(135deg, var(--military-primary) 0%, var(--military-secondary) 100%);
    border-bottom: 3px solid var(--military-gold);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header .logo h1 {
    color: #6b8e23 !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3),
                 0 0 20px rgba(107, 142, 35, 0.4) !important;
}

.header .logo i {
    color: #6b8e23 !important;
}

/* Navigation - Military Style */
.navmenu a {
    color: #f5f3ed !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    border: 1px solid rgba(107, 142, 35, 0.5) !important;
    background: rgba(107, 142, 35, 0.4) !important;
}

.navmenu a::before {
    background: rgba(107, 142, 35, 0.5) !important;
}

.navmenu a:hover {
    color: #f5f3ed !important;
    border-color: rgba(107, 142, 35, 0.8) !important;
    background: rgba(107, 142, 35, 0.6) !important;
}

.navmenu a.active {
    background: linear-gradient(135deg, var(--military-gold) 0%, #c9a02c 100%) !important;
    color: #1a2f0a !important;
    border-color: var(--military-gold) !important;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5);
}

/* Kontak Button - Military Gold */
.navmenu ul li:last-child a {
    background: linear-gradient(135deg, var(--military-gold) 0%, #c9a02c 100%) !important;
    color: #1a2f0a !important;
    border: 2px solid var(--military-gold) !important;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5);
}

.navmenu ul li:last-child a:hover {
    background: linear-gradient(135deg, #c9a02c 0%, #b8941f 100%) !important;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.7);
    color: #1a2f0a !important;
}

/* Mobile Toggle - Military Style */
.mobile-nav-toggle {
    background: linear-gradient(135deg, var(--military-gold) 0%, #c9a02c 100%);
    border: 2px solid var(--military-gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
    color: #1a2f0a;
}

.mobile-nav-toggle:hover {
    background: linear-gradient(135deg, #c9a02c 0%, #b8941f 100%);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.7);
}

/* Offcanvas Mobile - Military Style */
.offcanvas-mobile {
    background: linear-gradient(180deg, var(--military-primary) 0%, var(--military-dark) 100%);
    border-left: 4px solid var(--military-gold);
}

.offcanvas-mobile .offcanvas-title i {
    color: var(--military-gold);
}

.offcanvas-mobile .mobile-menu a::before {
    background: var(--military-gold);
}

.offcanvas-mobile .mobile-menu a:hover i,
.offcanvas-mobile .mobile-menu a.active i {
    background: rgba(212, 175, 55, 0.3);
    color: var(--military-gold);
}

.offcanvas-mobile .mobile-menu a:hover,
.offcanvas-mobile .mobile-menu a.active {
    background: rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--military-gold);
}

.offcanvas-mobile .btn-light {
    background: linear-gradient(135deg, var(--military-gold), #c9a02c);
    border: 2px solid var(--military-gold);
    color: #1a2f0a;
}

/* Hero Slider - Military Style */
.hero-slide {
    background: linear-gradient(135deg, var(--military-primary) 0%, var(--military-secondary) 100%) !important;
}

.hero-content .badge {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    color: white;
    border: 2px solid var(--military-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-content h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-content .lead {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-content .btn-light {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    color: white;
    border: 2px solid var(--military-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.hero-content .btn-light:hover {
    background: linear-gradient(135deg, var(--military-accent), var(--military-gold));
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

.hero-content .btn-outline-light {
    border: 2px solid var(--military-gold);
    color: var(--military-gold);
    background: rgba(212, 175, 55, 0.1);
    font-weight: 700;
    text-transform: uppercase;
}

.hero-content .btn-outline-light:hover {
    background: var(--military-gold);
    color: white;
    border-color: var(--military-gold);
}

/* Swiper Navigation - Military Style */
.swiper-button-next,
.swiper-button-prev {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    color: white;
    border: 2px solid var(--military-gold);
}

.swiper-pagination-bullet {
    background: var(--military-gold);
}

.swiper-pagination-bullet-active {
    background: var(--military-gold);
    box-shadow: 0 0 10px var(--military-gold);
}

/* Stats Section - Military Style */
.stats {
    background: linear-gradient(135deg, var(--military-bg) 0%, var(--military-beige) 100%);
    border-top: 3px solid var(--military-gold);
    border-bottom: 3px solid var(--military-gold);
}

.stat-card {
    background: white;
    border: 2px solid var(--military-gold);
    border-left: 5px solid var(--military-primary);
    box-shadow: var(--military-shadow);
}

.stat-card:hover {
    box-shadow: var(--military-shadow-hover);
    border-left-width: 8px;
}

.stat-card i {
    color: var(--military-primary);
}

.stat-card h3 {
    color: var(--military-primary);
    font-weight: 800;
}

/* Section Title - Military Style */
.section-title h2 {
    color: var(--military-primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-title h2::after {
    background: linear-gradient(90deg, var(--military-gold), var(--military-accent));
    height: 5px;
}

.section-title p {
    color: var(--military-text-light);
    font-weight: 500;
}

/* Cards - Military Style */
.program-card,
.fasilitas-card,
.ekskul-card,
.home-gallery-card,
.guru-card {
    background: white;
    border: 2px solid var(--military-beige);
    border-left: 5px solid var(--military-primary);
    box-shadow: var(--military-shadow);
}

.program-card:hover,
.fasilitas-card:hover,
.ekskul-card:hover,
.home-gallery-card:hover,
.guru-card:hover {
    box-shadow: var(--military-shadow-hover);
    border-left-width: 8px;
    border-left-color: var(--military-gold);
}

.program-card h5,
.fasilitas-card h5,
.ekskul-card h5,
.home-gallery-card h5,
.guru-card h5 {
    color: var(--military-primary);
    font-weight: 700;
    text-transform: uppercase;
}

.program-card .btn,
.ekskul-card .btn {
    background: linear-gradient(135deg, var(--military-primary), var(--military-secondary));
    color: white;
    border: 2px solid var(--military-primary);
    font-weight: 600;
    text-transform: uppercase;
}

.program-card .btn:hover,
.ekskul-card .btn:hover {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    border-color: var(--military-gold);
}

/* Kepala Sekolah Section - Military Style */
.sambutan-card {
    background: white;
    border: 2px solid var(--military-beige);
    border-left: 5px solid var(--military-gold);
    box-shadow: var(--military-shadow);
}

.sambutan-card h3 {
    color: var(--military-primary);
    font-weight: 800;
    text-transform: uppercase;
}

.sambutan-card .quote-icon {
    color: var(--military-gold);
}

/* Guru Badge - Military Rank Style */
.guru-info .badge {
    background: linear-gradient(135deg, var(--military-primary), var(--military-secondary));
    color: white;
    border: 1px solid var(--military-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Gallery - Military Style */
.gallery-category-badge {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    color: white;
    border: 2px solid var(--military-gold);
    font-weight: 700;
    text-transform: uppercase;
}

.gallery-zoom-btn {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    color: white;
    border: 2px solid var(--military-gold);
}

/* CTA Section - Military Style */
.cta-section {
    background: linear-gradient(135deg, var(--military-primary) 0%, var(--military-dark) 100%);
    border-top: 5px solid var(--military-gold);
    border-bottom: 5px solid var(--military-gold);
}

.cta-section h2 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 800;
    text-transform: uppercase;
}

.cta-section .btn {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    color: white;
    border: 3px solid var(--military-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-section .btn:hover {
    background: linear-gradient(135deg, var(--military-accent), var(--military-gold));
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
}

/* Footer - Military Style */
.footer {
    background: linear-gradient(135deg, var(--military-primary) 0%, var(--military-dark) 100%);
    color: rgba(255, 255, 255, 0.9);
    border-top: 5px solid var(--military-gold);
}

.footer h5 {
    color: var(--military-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer a {
    color: rgba(255, 255, 255, 0.8);
}

.footer a:hover {
    color: var(--military-gold);
}

.footer .social-links a {
    border-color: var(--military-gold);
    color: var(--military-gold);
}

.footer .social-links a:hover {
    background: var(--military-gold);
    color: white;
}

/* Scroll Top Button - Military Style */
.scroll-top {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    border: 2px solid var(--military-gold);
}

.scroll-top:hover {
    background: linear-gradient(135deg, var(--military-accent), var(--military-gold));
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
}

/* Buttons - Military Style */
.btn-primary {
    background: linear-gradient(135deg, var(--military-primary), var(--military-secondary));
    border: 2px solid var(--military-primary);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    border-color: var(--military-gold);
}

.btn-success {
    background: linear-gradient(135deg, var(--military-secondary), var(--military-light));
    border: 2px solid var(--military-secondary);
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
    border-color: var(--military-gold);
}

/* Badges - Military Rank Style */
.badge {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: linear-gradient(135deg, var(--military-primary), var(--military-secondary));
    border: 1px solid var(--military-gold);
}

.badge-success {
    background: linear-gradient(135deg, var(--military-secondary), var(--military-light));
}

.badge-warning {
    background: linear-gradient(135deg, var(--military-gold), var(--military-accent));
}

/* Forms - Military Style */
.form-control:focus {
    border-color: var(--military-gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

.form-select:focus {
    border-color: var(--military-gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

/* Tables - Military Style */
.table thead {
    background: linear-gradient(135deg, var(--military-primary), var(--military-secondary));
    color: white;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(45, 80, 22, 0.05);
}

/* Alerts - Military Style */
.alert-success {
    background-color: rgba(74, 124, 44, 0.1);
    border-left: 5px solid var(--military-secondary);
    color: var(--military-primary);
}

.alert-warning {
    background-color: rgba(212, 175, 55, 0.1);
    border-left: 5px solid var(--military-gold);
    color: var(--military-accent);
}

.alert-danger {
    background-color: rgba(139, 0, 0, 0.1);
    border-left: 5px solid var(--military-red);
    color: var(--military-red);
}

/* Military Decorative Elements */
.military-stripe {
    height: 5px;
    background: repeating-linear-gradient(
        45deg,
        var(--military-gold),
        var(--military-gold) 10px,
        var(--military-accent) 10px,
        var(--military-accent) 20px
    );
}

.military-badge-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: transparent var(--military-gold) transparent transparent;
}

/* Text Styles - Military */
.text-military-primary {
    color: var(--military-primary) !important;
}

.text-military-gold {
    color: var(--military-gold) !important;
}

.bg-military-primary {
    background-color: var(--military-primary) !important;
}

.bg-military-gold {
    background-color: var(--military-gold) !important;
}

/* Typography - Military Style */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--military-primary);
}

strong, b {
    font-weight: 700;
    color: var(--military-primary);
}

/* Links - Military Style */
a {
    color: var(--military-primary);
}

a:hover {
    color: var(--military-gold);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .header {
        background: linear-gradient(135deg, var(--military-primary) 0%, var(--military-secondary) 100%);
    }
}

@media (max-width: 767px) {
    .section-title h2 {
        letter-spacing: 1px;
    }
}