/* ================================================================
   MUQOBIL ENERGIYA SAHIFASI — CSS
   Oddiy: OQ fon | Tun rejimi: TO'Q fon
   ================================================================ */

:root {
    --primary:   #1566B7;
    --primary-d: #0d47a1;
    --gold:      #FFD54F;
    --text:      #2c3e50;
    --muted:     #5f738c;
    --dark-bg:   #0e1a2b;
}

body { font-family: 'Source Serif 4', Georgia, serif; }

/* ══════════════════════════════
   TUN REJIMI
══════════════════════════════ */
body.dark {
    background: #0e1a2b;
    color: #e2e8f0;
}

/* Header — oddiy: och ko'k gradient | tun: to'q */
.energy-header {
    background: linear-gradient(135deg, var(--primary-d) 0%, var(--primary) 100%);
    padding: 64px 0 48px;
    position: relative;
    overflow: hidden;
}
body.dark .energy-header {
    background: linear-gradient(135deg, #060c18 0%, #0a1628 100%);
}

/* Photo section */
.photo-section {
    background: #fff;
    width: 70%;
    margin: 0 auto; /* gorizontal markazlashtirish */
    /* agar vertical markazlash ham kerak bo'lsa: */
    display: block;
}
.photo-section > .container {
    padding-top: 0;
    padding-bottom: 0;
}
body.dark .photo-section {
    background: #060c18;
}

.photo-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    /*height: 100px;*/
    background: linear-gradient(to bottom, var(--primary-d), transparent);
    z-index: 2;
    pointer-events: none;
}
body.dark .photo-frame::before {
    background: linear-gradient(to bottom, #060c18, transparent);
}

.photo-frame::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    /*height: 180px;*/
    background: linear-gradient(to top, var(--primary-d), transparent);
    z-index: 2;
    pointer-events: none;
}
body.dark .photo-frame::after {
    background: linear-gradient(to top, #060c18, transparent);
}

.photo-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    padding: 28px 40px;
    background: linear-gradient(to top,
    rgba(13,71,161,0.92) 0%,
    rgba(13,71,161,0.5)  55%,
    transparent 100%);
}
body.dark .photo-caption {
    background: linear-gradient(to top,
    rgba(6,12,24,0.97) 0%,
    rgba(6,12,24,0.5)  55%,
    transparent 100%);
}

/* Video section — oddiy: ko'k gradient | tun: to'q */
.video-section {
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
body.dark .video-section {
    background: linear-gradient(135deg, #060c18 0%, #091520 100%);
}

/* ══════════════════════════════
   HEADER ICHKI ELEMENTLAR
══════════════════════════════ */
.energy-header::before {
    content: '';
    position: absolute;
    left: -60px; bottom: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}
.energy-header::after {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

.particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
    position: absolute;
    left: var(--x); top: var(--y);
    width: var(--s); height: var(--s);
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.35;
    animation: particleFloat var(--d) ease-in-out infinite alternate;
}
@keyframes particleFloat {
    from { transform: translateY(0) scale(1);       opacity: 0.15; }
    to   { transform: translateY(-18px) scale(1.3); opacity: 0.5;  }
}

.energy-header-inner { position: relative; z-index: 2; }

.energy-header .breadcrumb { background: none; padding: 0; margin: 0 0 20px; }
.energy-header .breadcrumb-item,
.energy-header .breadcrumb-item a {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    text-decoration: none;
    font-family: sans-serif;
}
.energy-header .breadcrumb-item a:hover  { color: var(--gold); }
.energy-header .breadcrumb-item.active   { color: rgba(255,255,255,0.95); }
.energy-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255,213,79,0.12);
    border: 1px solid rgba(255,213,79,0.25);
    padding: 5px 16px;
    border-radius: 30px;
    margin-bottom: 20px;
    font-family: sans-serif;
    animation: fadeUp 0.8s 0.2s ease both;
}
.header-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

.energy-header h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
    animation: fadeUp 0.9s 0.4s ease both;
}
.energy-header h2 em { font-style: italic; color: var(--gold); }

.header-subtitle {
    font-size: 16px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
    max-width: 720px;
    margin: 0;
    padding: 28px 0 40px;
    display: block;
}
body.dark .header-subtitle { color: rgba(255,255,255,0.65); }

.header-scroll-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    animation: fadeUp 0.9s 0.8s ease both;
}
.header-scroll-hint span {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    font-family: sans-serif;
}
.scroll-line {
    width: 56px; height: 1px;
    background: rgba(255,213,79,0.3);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute;
    left: -100%; top: 0;
    width: 100%; height: 100%;
    background: var(--gold);
    animation: scanLine 2.2s ease-in-out infinite;
}
@keyframes scanLine {
    0%   { left: -100%; }
    100% { left: 100%; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════
   PHOTO
══════════════════════════════ */
.photo-frame {
    position: relative;
    overflow: hidden;
}
.photo-main {
    width: 100%;
    /*height: 660px;*/
    object-fit: cover;
    display: block;
    filter: brightness(0.72) saturate(0.85);
    transition: filter 0.5s ease;
}
.photo-frame:hover .photo-main {
    filter: brightness(0.82) saturate(1.05);
}
.photo-caption-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}
.caption-icon { font-size: 26px; flex-shrink: 0; }
.caption-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.caption-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
    font-family: sans-serif;
}

/* ══════════════════════════════
   VIDEO
══════════════════════════════ */
.video-section::before {
    content: '';
    position: absolute;
    top: -200px; left: -200px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: rgba(21,102,183,0.04);
    pointer-events: none;
}
.video-section::after {
    content: '';
    position: absolute;
    bottom: -100px; right: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(21,102,183,0.03);
    pointer-events: none;
}

.video-section-header {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 56px;
}

.video-section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 14px;
}
body.dark .video-section-header h2 { color: #fff; }
.video-section-header h2 em { font-style: italic; color: var(--primary); }
body.dark .video-section-header h2 em { color: var(--gold); }
.vs-desc {
    font-size: 15px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.75;
    font-family: sans-serif;
}
body.dark .vs-desc { color: rgba(255,255,255,0.55); }

.video-frame-wrap {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}
.video-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 120%;
    background: radial-gradient(ellipse, rgba(255,213,79,0.1), transparent 70%);
    filter: blur(32px);
    pointer-events: none;
}
.video-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
            0 0 0 1px rgba(255,213,79,0.08),
            0 28px 72px rgba(0,0,0,0.4);
}
.video-frame iframe,
.video-frame video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    border: none;
}
.video-decoration-left,
.video-decoration-right {
    position: absolute;
    width: 64px; height: 64px;
    pointer-events: none;
}
.video-decoration-left {
    top: -10px; left: -10px;
    border-top:  2px solid rgba(255,213,79,0.45);
    border-left: 2px solid rgba(255,213,79,0.45);
    border-radius: 4px 0 0 0;
}
.video-decoration-right {
    bottom: -10px; right: -10px;
    border-bottom: 2px solid rgba(255,213,79,0.45);
    border-right:  2px solid rgba(255,213,79,0.45);
    border-radius: 0 0 4px 0;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
    .energy-header { padding: 48px 0 36px; }
    .photo-main { height: 420px; }
    .photo-caption { padding: 20px; }
    .video-section { padding: 64px 0; }
    .video-frame { border-radius: 12px; }
    .video-decoration-left,
    .video-decoration-right { display: none; }
}
@media (max-width: 480px) {
    .photo-main { height: 260px; }
    .energy-header h2 { font-size: 30px; }
}