.mena-network {
    padding: 100px 20px;
    background: #0a0a0a;
    position: relative;
}

.mena-container {
    max-width: 1400px;
    margin: 0 auto;
}

.mena-header {
    text-align: center;
    margin-bottom: 60px;
}

.mena-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 183, 45, 0.1);
    border: 1px solid rgba(255, 183, 45, 0.3);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: #ffb72d;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.mena-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.mena-gradient {
    background: linear-gradient(135deg, #ffb72d 0%, #ff8c00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mena-subtitle {
    font-size: 18px;
    color: #888;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.mena-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    margin-top: 60px;
}

.mena-map-container {
    background: #111;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #222;
    height: 600px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

.mena-quick-select {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 10;
}

.country-btn {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.country-btn:hover {
    background: rgba(255, 183, 45, 0.1);
    border-color: #ffb72d;
    color: #ffb72d;
}

.country-btn.active {
    background: #ffb72d;
    border-color: #ffb72d;
    color: #000;
}

.mena-info-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    height: 600px;
    overflow-y: auto;
}

.info-panel-content {
    animation: fadeIn 0.3s ease;
}

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

.panel-country-name {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px 0;
}

.panel-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.panel-stat-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.stat-active { color: #10b981; }
.stat-optimal { color: #3b82f6; }
.stat-growing { color: #84cc16; }

.panel-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #aaa;
    margin-bottom: 32px;
    padding-left: 16px;
    border-left: 2px solid #333;
}

.panel-routes {
    margin-top: 32px;
}

.routes-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.routes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.route-item {
    padding: 8px 16px;
    background: rgba(255, 183, 45, 0.1);
    border: 1px solid rgba(255, 183, 45, 0.2);
    border-radius: 8px;
    font-size: 13px;
    color: #ffb72d;
    font-weight: 500;
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    .mena-network { padding: 40px 16px; }
    .mena-title { font-size: 28px; }
    .mena-subtitle { font-size: 14px; }
    .mena-grid { grid-template-columns: 1fr; gap: 20px; }
    .mena-map-container { height: 300px; border-radius: 12px; }
    .mena-info-panel { padding: 20px; height: auto; }
    .panel-country-name { font-size: 20px; }
    .panel-stats { grid-template-columns: 1fr; gap: 12px; }
    .stat-label { font-size: 10px; }
    .stat-value { font-size: 16px; }
    .panel-desc { font-size: 13px; }
    .route-item { font-size: 11px; padding: 6px 12px; }
    .country-btn { font-size: 10px; padding: 6px 12px; }
}

/* Medium Mobile (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .mena-network { padding: 50px 20px; }
    .mena-title { font-size: 32px; }
    .mena-subtitle { font-size: 15px; }
    .mena-grid { grid-template-columns: 1fr; gap: 24px; }
    .mena-map-container { height: 350px; }
    .mena-info-panel { padding: 24px; height: auto; }
    .panel-country-name { font-size: 22px; }
    .panel-stats { grid-template-columns: 1fr; }
}

/* Large Mobile (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .mena-network { padding: 60px 24px; }
    .mena-title { font-size: 38px; }
    .mena-grid { grid-template-columns: 1fr; gap: 30px; }
    .mena-map-container { height: 400px; }
    .mena-info-panel { padding: 28px; height: auto; }
    .panel-country-name { font-size: 26px; }
}

/* Small Tablets (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .mena-network { padding: 80px 32px; }
    .mena-title { font-size: 42px; }
    .mena-grid { grid-template-columns: 1fr 0.8fr; gap: 32px; }
    .mena-map-container { height: 500px; }
    .mena-info-panel { padding: 32px; height: 500px; }
}

/* Medium Tablets (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
    .mena-network { padding: 90px 40px; }
    .mena-title { font-size: 46px; }
    .mena-grid { grid-template-columns: 1.1fr 1fr; gap: 36px; }
    .mena-map-container { height: 550px; }
    .mena-info-panel { padding: 36px; height: 550px; }
}

/* Large Tablets & Small Laptops (1440px - 1679px) */
@media (min-width: 1440px) and (max-width: 1679px) {
    .mena-network { padding: 100px 40px; }
    .mena-title { font-size: 50px; }
    .mena-grid { grid-template-columns: 1.2fr 1fr; gap: 40px; }
    .mena-map-container { height: 600px; }
    .mena-info-panel { padding: 40px; height: 600px; }
}

/* Medium Laptops (1680px - 1919px) */
@media (min-width: 1680px) and (max-width: 1919px) {
    .mena-container { max-width: 1600px; }
    .mena-title { font-size: 54px; }
    .mena-map-container { height: 650px; }
    .mena-info-panel { height: 650px; }
}

/* Large Laptops & Small Monitors (1920px - 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .mena-container { max-width: 1800px; }
    .mena-title { font-size: 58px; }
    .mena-map-container { height: 700px; }
    .mena-info-panel { height: 700px; padding: 48px; }
    .panel-country-name { font-size: 36px; }
    .stat-value { font-size: 20px; }
}

/* Medium Monitors (2560px - 3439px) */
@media (min-width: 2560px) and (max-width: 3439px) {
    .mena-container { max-width: 2200px; }
    .mena-title { font-size: 64px; }
    .mena-subtitle { font-size: 20px; }
    .mena-map-container { height: 800px; }
    .mena-info-panel { height: 800px; padding: 56px; }
    .panel-country-name { font-size: 40px; }
    .stat-value { font-size: 22px; }
    .panel-desc { font-size: 17px; }
}

/* Large Monitors (3440px+) */
@media (min-width: 3440px) {
    .mena-container { max-width: 2800px; }
    .mena-title { font-size: 72px; }
    .mena-subtitle { font-size: 22px; }
    .mena-map-container { height: 900px; }
    .mena-info-panel { height: 900px; padding: 64px; }
    .panel-country-name { font-size: 48px; }
    .stat-value { font-size: 24px; }
    .panel-desc { font-size: 18px; }
    .route-item { font-size: 15px; padding: 10px 20px; }
}

/* 49" Odyssey OLED G9 (5120x1440) */
@media (min-width: 5120px) and (max-height: 1440px) {
    .mena-container { max-width: 4800px; }
    .mena-grid { grid-template-columns: 1.5fr 1fr; gap: 60px; }
    .mena-title { font-size: 68px; }
    .mena-map-container { height: 800px; }
    .mena-info-panel { height: 800px; }
}

/* 57" Odyssey Neo G9 (7680x2160) */
@media (min-width: 7680px) {
    .mena-container { max-width: 7000px; }
    .mena-grid { grid-template-columns: 1.8fr 1fr; gap: 80px; }
    .mena-title { font-size: 96px; }
    .mena-subtitle { font-size: 28px; }
    .mena-map-container { height: 1200px; }
    .mena-info-panel { height: 1200px; padding: 80px; }
    .panel-country-name { font-size: 64px; }
    .stat-value { font-size: 32px; }
    .panel-desc { font-size: 24px; }
}

/* Vertical Monitors (Portrait) */
@media (orientation: portrait) and (min-width: 768px) {
    .mena-grid { grid-template-columns: 1fr; }
    .mena-map-container { height: 50vh; }
    .mena-info-panel { height: auto; min-height: 400px; }
}

/* Horizontal Ultra-Wide */
@media (min-aspect-ratio: 21/9) {
    .mena-grid { grid-template-columns: 1.5fr 1fr; }
    .mena-map-container { height: 70vh; }
    .mena-info-panel { height: 70vh; }
}