/* ===========================================================================
   css/dil.css — Dil seçici görünümü
   2026-08-18. includes/dil-secici.php ile birlikte çalışır.

   Kurumsal (kt) dile uygun: hap düğme, 640 ağırlık, BÜYÜK HARF YOK, renkli
   parıltı yok. Kendi jetonlarını `--dl-` önekiyle taşır ve İKİ MODDA da
   tanımlar — tek değer verilen açık griler koyu modda parlıyor.

   GERİ ALMA: bu dosyanın <link> satırını sil. Seçici stilsiz ama çalışır
   halde kalır (native <details>).
   =========================================================================== */

:root {
    --dl-zemin:    rgba(255, 255, 255, .10);
    --dl-zemin-h:  rgba(255, 255, 255, .18);
    --dl-metin:    rgba(255, 255, 255, .92);
    --dl-panel:    #ffffff;
    --dl-panel-m:  #101014;
    --dl-panel-h:  #f4f4f6;
    --dl-cizgi:    #e4e4ea;
    --dl-etkin:    #0a5ecb;
    --dl-golge:    0 12px 30px rgba(8, 8, 12, .16), 0 2px 6px rgba(8, 8, 12, .08);
    --dl-hiz:      .2s cubic-bezier(.3, .1, .25, 1);
}

html[data-theme="dark"] {
    --dl-zemin:    rgba(255, 255, 255, .08);
    --dl-zemin-h:  rgba(255, 255, 255, .14);
    --dl-metin:    rgba(255, 255, 255, .88);
    --dl-panel:    #17171c;
    --dl-panel-m:  #ececf1;
    --dl-panel-h:  #22222a;
    --dl-cizgi:    #2e2e38;
    --dl-etkin:    #6faaf0;
    --dl-golge:    0 12px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}

/* --- Tetik ------------------------------------------------------------- */
.dil-sec {
    position: relative;
    display: inline-block;
}

.dil-sec > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--dl-zemin);
    color: var(--dl-metin);
    font-size: 12px;
    font-weight: 640;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--dl-hiz);
}

/* Tarayıcının varsayılan üçgen işaretini kaldır (kendi okumuz var). */
.dil-sec > summary::-webkit-details-marker { display: none; }
.dil-sec > summary::marker { content: ""; }

.dil-sec > summary:hover { background: var(--dl-zemin-h); }

/* Kurumsal iskelet (/hizmetler/, /blog/, /bolgeler): üst çubuk AÇIK renk.
   Yukarıdaki --dl-metin BEYAZ — mağazanın koyu çubuğu için. Olduğu gibi
   kalsaydı beyaz üstüne beyaz çıkıp tetik görünmez olurdu.

   Jetonlar :root'ta değil ELEMENTİN üstünde eziliyor: bu sayfalar tema
   betiğini taşıyor (data-theme="dark" yazılabiliyor) ama karanlık CSS'leri
   yok — çubuk her hâlükârda açık kalıyor. Element seviyesindeki tanım
   html[data-theme="dark"] bloğunu her zaman yener, seçici de çubukla
   birlikte açık kalır.

   Renk üst menü bağlantılarıyla aynı ton (#475569). */
.dil-sec--kurumsal {
    --dl-zemin:   rgba(15, 23, 42, .06);
    --dl-zemin-h: rgba(15, 23, 42, .11);
    --dl-metin:   #475569;
}

.dil-sec > summary:focus-visible {
    outline: 2px solid var(--dl-etkin);
    outline-offset: 2px;
}

.dil-sec-ok {
    font-size: 9px;
    opacity: .7;
    transition: transform var(--dl-hiz);
}

.dil-sec[open] .dil-sec-ok { transform: rotate(180deg); }

/* --- Açılır liste ------------------------------------------------------- */
.dil-sec-liste {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 178px;
    padding: 6px;
    border: 1px solid var(--dl-cizgi);
    border-radius: 14px;
    background: var(--dl-panel);
    box-shadow: var(--dl-golge);
}

/* ÖZGÜLLÜK NOTU — bu bölüm neden bu kadar uzun seçicilerle yazıldı:
   Seçici koyu üst çubuğun İÇİNDE duruyor ve store.css / magaza-kurumsal.css
   oradaki TÜM bağlantıları beyaz yapıyor:
       .magaza-body .magaza-topbar .sag a { color: rgba(255,255,255,.62) }  → (0,3,1)
   Açılır liste ise BEYAZ panel. Kısa `.dil-sec-liste a` (0,1,1) yazınca beyaz
   zeminde beyaz yazı çıkıyordu: bayraklar görünüyor, dil adları görünmüyordu.
   Bu yüzden üst çubuk içindeki hâli aynı özgüllükte (0,3,1) yazılıp bu dosya
   sonra yüklenerek kazandırılıyor. Kısa kural, seçicinin başka yerlerde
   (kurumsal başlık vb.) kullanıldığı durum için taban olarak duruyor. */
.dil-sec-liste a,
.magaza-body .magaza-topbar .dil-sec-liste a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--dl-panel-m);
    font-size: 13.5px;
    font-weight: 560;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dl-hiz);
}

.dil-sec-liste a:hover,
.magaza-body .magaza-topbar .dil-sec-liste a:hover {
    background: var(--dl-panel-h);
    color: var(--dl-panel-m);
}

.dil-sec-liste a.etkin,
.magaza-body .magaza-topbar .dil-sec-liste a.etkin {
    color: var(--dl-etkin);
    font-weight: 660;
}

/* Onay işareti sağa yaslanır; bayrak ve ad solda hizalı kalır.
   Rengi ayrıca yazılıyor: `.magaza-body .magaza-topbar i` ikonları beyaza
   boyuyor, beyaz panelde onay işareti kaybolurdu. */
.dil-sec-liste a .fa-check,
.magaza-body .magaza-topbar .dil-sec-liste a .fa-check {
    margin-left: auto;
    font-size: 10px;
    color: var(--dl-etkin);
}

.dil-sec-bayrak {
    font-size: 15px;
    line-height: 1;
}

/* Dar ekranda üst çubuk zaten sıkışık: seçici kalır ama liste sağdan taşmasın. */
@media (max-width: 480px) {
    .dil-sec-liste {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dil-sec > summary,
    .dil-sec-ok,
    .dil-sec-liste a { transition: none; }
    .dil-sec[open] .dil-sec-ok { transform: none; }
}

/* ===========================================================================
   CSS İÇİNDEKİ METİNLER — 2026-08-24
   ---------------------------------------------------------------------------
   NEDEN: Bazı etiketler HTML'de değil, CSS `content:` içinde duruyor
   (ürün kartı "Stok:" ön eki ve "Sepete Ekle" düğme yazısı). Sunucudaki
   çıktı katmanı HTML metin düğümlerini çevirir; CSS'e ulaşamaz. Bu yüzden
   Almanca/İngilizce sayfada bu iki yazı Türkçe kalıyordu.

   ÇÖZÜM: <html lang="..."> zaten dil katmanı tarafından doğru basılıyor.
   Aynı kuralı dile göre ezmek yeterli — JS gerekmez, Türkçe hiç etkilenmez.

   YENİ CSS METNİ EKLERSEN buraya da karşılığını eklemeyi unutma; store.css
   içine `content: "..."` yazmak dilde eksik doğurur.
   =========================================================================== */

html[lang="en"] .pcard-stokline::before { content: "Stock:"; }
html[lang="en"] .pcard-btn::after       { content: "Add to Cart"; }
html[lang="en"] .pcard-btn.ara::after   { content: "Call for Stock"; }

html[lang="de"] .pcard-stokline::before { content: "Lager:"; }
html[lang="de"] .pcard-btn::after       { content: "In den Warenkorb"; }
html[lang="de"] .pcard-btn.ara::after   { content: "Wegen Lager anrufen"; }