/* ============================================
   Dil Seçici (Locale Switcher)
   ============================================

   ── NEDEN AYRI BİR DOSYA ───────────────────────────────────────────────────

   Bu kurallar normalde `resources/css/frontend/03-navigation.css` içine, başlık
   kromunun (`.theme-toggle-btn`, `.navbar-cta-wrap`) yanına yazılırdı ve
   `node scripts/build-css.mjs` ile `main.css` + `main.min.css`'e derlenirdi.

   Derleme SU AN KİLİTLİ ve bu BENDEN ÖNCEKİ bir sapma: betik, yayındaki
   `main.css`'te olup yeni çıktının ÜRETMEDİĞİ 34 seçici bulunca duruyor.
   Bunların bir kısmı hiçbir kaynakta bulunmayan elle yazılmış kurallar
   (`[x-cloak]`, `.navbar-inner-grid`, `.normal-item`) ve şablonlar onları
   KULLANIYOR — `x-cloak` 12 view'da. Derlemeyi zorlamak public başlığı ve
   Alpine'in gizli öğelerini bozardı. (Değişikliğim geri alınarak doğrulandı:
   sapma ben dokunmadan da aynı 34 seçici.)

   Üretilen iki dosyayı elle düzenlemek sapmayı büyütmek olurdu. Bu yüzden
   kurallar, `assets/css/pages/*.css` ile aynı desende ELLE YAZILMIŞ bağımsız
   bir dosyada duruyor ve layout'tan ayrıca yükleniyor.

   ⚠️ Kaynak ağacı onarılıp derleme çalıştığında bu dosya `03-navigation.css`
   içine taşınmalı ve layout'taki `<link>` kaldırılmalıdır.

   Tailwind utility'si KULLANILMIYOR: public CSS ayrı bir Tailwind
   derlemesinden geçiyor ve taranmayan yeni bir utility üretilmez — kural
   sessizce ölür, düzen yapışık görünür.

   Ölçüler `.theme-toggle-btn` ile kasıtlı olarak aynı (38px yükseklik, tam
   yuvarlak kenar, aynı hover rengi): ikisi yan yana duruyor. */

.locale-switcher {
    position: relative;
    display: inline-flex;
}

.locale-switcher-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--border-radius-full, 9999px);
    border: 1px solid var(--theme-border);
    background: transparent;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
}

.locale-switcher-trigger:hover,
.locale-switcher-trigger[aria-expanded="true"] {
    background: rgba(87, 226, 186, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.locale-switcher-code {
    letter-spacing: 0.04em;
}

/* Alpine yüklenene kadar menü GİZLİ kalmalı.
   `[x-cloak]` kuralı `main.css`'te var ama ona güvenmek bu dosyayı oraya
   bağımlı kılardı; kendi kuralı burada duruyor ki dosya tek başına doğru
   çalışsın. */
.locale-switcher-menu[x-cloak] {
    display: none !important;
}

.locale-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    /* Mantıksal özellik: sağa yapışık açılır (CTA alanının sonunda duruyor). */
    inset-inline-end: 0;
    min-width: 170px;
    padding: 6px;
    border-radius: var(--border-radius, 10px);
    border: 1px solid var(--theme-border);
    background: var(--theme-bg-elevated, var(--theme-surface, #fff));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    z-index: 1100;
}

.locale-switcher-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--border-radius-sm, 6px);
    color: var(--theme-text);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.locale-switcher-option:hover {
    background: rgba(87, 226, 186, 0.1);
    color: var(--primary);
}

.locale-switcher-option.is-active {
    color: var(--primary);
    font-weight: 600;
}

.locale-switcher-option .locale-switcher-code,
.locale-switcher-mobile-option .locale-switcher-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* Mobil: açılır katman YOK.
   Çekmecenin içinde ikinci bir açılır katman dokunmatikte kolayca kapanıp
   kullanıcıyı kilitliyor; bu yüzden diller düz bir dizi olarak gösteriliyor. */
.locale-switcher-mobile {
    margin-bottom: 10px;
}

.locale-switcher-mobile-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-secondary);
}

.locale-switcher-mobile-options {
    display: flex;
    gap: 6px;
}

.locale-switcher-mobile-option {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: var(--border-radius, 10px);
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
    text-decoration: none;
    font-size: 0.8125rem;
}

.locale-switcher-mobile-option.is-active {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* Üç dilde yerel adlar sığmıyor; dar ekranda yalnızca dil kodu gösterilir. */
@media (max-width: 400px) {
    .locale-switcher-mobile-option span:not(.locale-switcher-code) {
        display: none;
    }
}