/* ---- ÜST KIRMIZI BAR ---- */
#weather-top-widget{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #e10600; /* kırmızı bar */
    color: #fff;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: transform 0.3s ease;
  }

  /* Sticky olmayan mod */
  #weather-top-widget.non-sticky{
    position: relative;
    box-shadow: none;
  }

  
  /* WordPress admin bar varsa aşağı kaydır */
  #weather-top-widget.with-admin-bar{ top: 32px; }
  @media (max-width: 782px){
    #weather-top-widget.with-admin-bar{ top: 46px; }
  }
  
  /* İç kap */
  #weather-widget{
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  
  /* Sol kısım: sosyal medya */
  #weather-widget .weather-left{
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Orta kısım: finansal veriler */
  #weather-widget .weather-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  /* Sosyal medya bölümü */
  #social-media-section{
    display: flex;
    align-items: center;
  }

  #social-toggle{
    display: none; /* Toggle butonu gizli */
  }

  #social-links{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .social-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    color: inherit;
  }

  .social-link:hover{
    background: rgba(255,255,255,.15);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }

  .social-svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: all 0.2s ease;
  }

  /* Platform özel renkler */
  .social-facebook:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: white !important;
  }

  .social-twitter:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: white !important;
  }

  .social-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
    border-color: #e6683c !important;
    color: white !important;
  }

  .social-linkedin:hover {
    background: #0A66C2 !important;
    border-color: #0A66C2 !important;
    color: white !important;
  }

  .social-youtube:hover {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
    color: white !important;
  }

  /* Finansal veri gösterimi */
  #finance-display{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #fff;
  }

  .finance-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    min-width: 60px;
  }

  .finance-label{
    font-size: 10px;
    opacity: .8;
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
  }

  .finance-value{
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
  }
  
  /* Sağ kısım: seçim + değerler */
  #weather-widget .weather-right{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
  }
  
  /* Select kapsayıcı */
  #weather-widget .weather-selector{ position: relative; }
  
  /* Select görünümü */
  #city-selector{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    color: #000000;
    padding: 8px 40px 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  
  /* Özel ok */
  #weather-widget .weather-selector::after{
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .9;
  }
  
  /* Değerler */
  #weather-display{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
  }
  
  #current-city{
    font-weight: 700;
  }
  
  #current-temp{
    font-size: 18px;
    padding: 4px 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
  }
  
  /* Yükleniyor ikonu */
  #weather-display .loading,
  #finance-display .loading{
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 900ms linear infinite;
  }
  @keyframes spin{
    to{ transform: rotate(360deg); }
  }
  
  /* Finansal veriler için mobil toggle sistemi */
  #finance-toggle{
    display: none; /* Masaüstünde gizli */
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  #finance-toggle:hover{
    background: rgba(255,255,255,.15);
  }

  #finance-toggle .finance-current{
    font-weight: 700;
  }

  #finance-toggle .finance-arrow{
    margin-left: 5px;
    transition: transform 0.2s ease;
  }

  #finance-toggle.open .finance-arrow{
    transform: rotate(180deg);
  }

  /* Mobil finansal dropdown */
  #finance-dropdown{
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.95);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 8px;
    z-index: 10000;
    min-width: 200px;
    margin-top: 5px;
  }

  #finance-dropdown .finance-item{
    margin-bottom: 6px;
    padding: 6px 8px;
    background: rgba(255,255,255,.08);
  }

  #finance-dropdown .finance-item:last-child{
    margin-bottom: 0;
  }

  /* Mobil uyum */
  @media (max-width: 768px){
    #weather-widget{ 
      padding: 8px 12px; 
      gap: 8px; 
      flex-wrap: nowrap;
    }
    #current-temp{ font-size: 16px; }
    #city-selector{ padding: 8px 34px 8px 10px; font-size: 13px; }
    
    /* Finansal veriler mobilde toggle sistemi */
    #finance-display{ 
      display: none; /* Masaüstü versiyonunu gizle */
    }
    
    #finance-toggle{
      display: block; /* Mobil toggle'ı göster */
    }

    /* Orta kısım pozisyon ayarı */
    .weather-center{
      position: relative;
      flex: none;
    }
    
    /* Sosyal medya mobil uyum */
    #social-links{ gap: 6px; }
    .social-link{ width: 32px; height: 32px; }
    .social-svg{ width: 16px; height: 16px; }
  }
  
  @media (max-width: 600px){
    #weather-widget{ 
      padding: 6px 10px; 
      gap: 6px; 
    }
    
    /* Çok küçük ekranlarda sosyal medya */
    #social-links{ gap: 4px; }
    .social-link{ width: 28px; height: 28px; }
    .social-svg{ width: 14px; height: 14px; }

    /* Mobil toggle daha kompakt */
    #finance-toggle{
      padding: 5px 8px;
      font-size: 11px;
    }

    #finance-dropdown{
      min-width: 180px;
    }
  }

  @media (max-width: 480px){
    #weather-widget{
      flex-direction: column;
      gap: 8px;
      padding: 8px;
    }

    .weather-left, .weather-center, .weather-right{
      width: 100%;
      justify-content: center;
    }

    .weather-right{
      flex-direction: row;
      gap: 12px;
    }

    /* Sosyal medya compakt */
    .weather-left{
      order: 3; /* En alta al */
    }

    .weather-center{
      order: 1; /* Üstte */
    }

    .weather-right{
      order: 2; /* Ortada */
    }

    /* Çok küçük ekranlarda spacer yüksekliği artır */
    #weather-spacer{ height: 75px; }
  }

  /* Ekstra küçük ekranlar için */
  @media (max-width: 360px){
    #weather-widget{
      padding: 6px;
      gap: 6px;
    }

    #finance-toggle{
      padding: 4px 6px;
      font-size: 10px;
    }

    #finance-dropdown{
      min-width: 160px;
      padding: 6px;
    }

    #finance-dropdown .finance-item{
      padding: 4px 6px;
      margin-bottom: 4px;
    }

    .finance-label{
      font-size: 9px;
    }

    .finance-value{
      font-size: 10px;
    }

    #current-temp{
      font-size: 14px;
      padding: 3px 6px;
    }

    #city-selector{
      padding: 6px 28px 6px 8px;
      font-size: 12px;
    }

    .social-link{
      width: 26px;
      height: 26px;
    }

    .social-svg{
      width: 12px;
      height: 12px;
    }

    #weather-spacer{ height: 80px; }
  }
  
  /* İçerik çakışmasın diye spacer */
  #weather-spacer{ height: 44px; }
  @media (max-width: 782px){ #weather-spacer{ height: 48px; } }

  /* Non-sticky modda spacer gizle */
  body.weather-non-sticky #weather-spacer{ 
    height: 0px !important; 
  }

  
  /* Kapalıyken: kırmızı bar üzerinde metin beyaz */
#city-selector{
  color: #fff !important; /* kapalı görünüm */
}

/* Açıldığında (open sınıfı): arka plan beyaz, metin siyah */
#city-selector.open{
  background: #fff !important;
  color: #000 !important;
  border-color: rgba(0,0,0,.25) !important;
}

/* Açılır listedeki seçenekler */
#city-selector option,
#city-selector optgroup{
  color: #000 !important;
  background: #fff !important;
}

/* Seçili / hover edilen seçenek */
#city-selector option:checked,
#city-selector option:hover{
  color: #000 !important;
  background: #f1f1f1 !important;
}