/* ==========================================================================
   CSKPEDIA — dil seçimi (assets/js/dil.js) bütün müşteri ekranlarında
   Sağ üstte her zaman görünen düğme, menü, ilk açılış şeridi, masa için
   büyük seçici ve "çevrilmemiş metin" notu. Koyu taş zemin, pirinç vurgu.
   ========================================================================== */
/* dil-erken.js: sayfa seçili dile çevrilene kadar gövde gizli (Türkçe bir an görünmesin) */
html.dil-bekle body{ opacity: 0 }
.dil-yeri{ display: flex; align-items: center; flex: none }
.dil-dugme{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 10px;
  border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  font: 600 14px var(--font-marka, "Outfit", sans-serif); color: #EFEAE0;
  box-shadow: inset 0 0 0 1px rgba(233,207,138,.4);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.dil-dugme svg, .arac-dil svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.dil-dugme:active{ transform: scale(.97) }
.dil-dugme:focus-visible, .dil-secenek:focus-visible, .dil-ilk button:focus-visible, .dil-buyuk-secenek:focus-visible{ outline: 3px solid #E9CF8A; outline-offset: 2px }
@media (hover: hover) and (pointer: fine){ .dil-dugme:hover{ background: rgba(233,207,138,.1) } }
.dil-dugme .arac-ad{ font-size: 13px; color: #CFC8BA }
@media (max-width: 640px){ .dil-dugme .arac-ad{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) } .dil-dugme{ padding: 0 10px } }
.arac-dil{ position: relative }
.dil-kod{ font: 700 11px var(--font-marka, "Outfit", sans-serif); letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; color: #1B1405; background: rgba(233,207,138,.92) }
@media (max-width: 1180px){ .arac-dil svg{ display: none } .arac-dil .dil-kod{ font-size: 12px } }

/* açılır menü */
.dil-menu{
  position: fixed; z-index: 80; min-width: 200px; padding: 6px; display: grid; gap: 2px; border-radius: 14px;
  background: #0E1730; box-shadow: inset 0 0 0 1px rgba(233,207,138,.35), 0 24px 50px -20px #000;
}
.dil-menu[hidden]{ display: none }
.dil-secenek{
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; text-align: start; cursor: pointer;
  font: 600 15px var(--font-marka, "Outfit", sans-serif); color: #F4EFE4; background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dil-secenek[aria-pressed="true"]::after{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E9CF8A; flex: none }
.dil-secenek:hover{ background: rgba(233,207,138,.12) }

/* ilk açılış: belirgin "Dil / Language" şeridi */
.dil-ilk{
  position: relative; z-index: 30; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 10px max(16px, calc((100% - 1240px) / 2)); background: #0E1730; color: #F4EFE4;
  border-bottom: 1px solid rgba(233,207,138,.3);
  font-family: var(--font-marka, "Outfit", sans-serif);
}
.dil-ilk-baslik{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .06em; color: #E9CF8A }
.dil-ilk-baslik svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.dil-ilk-diller{ display: flex; flex-wrap: wrap; gap: 6px }
.dil-ilk-secenek{
  min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(244,239,228,.22); background: transparent; color: #F4EFE4; font: 600 14px var(--font-marka, "Outfit", sans-serif);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.dil-ilk-secenek[aria-pressed="true"]{ border-color: rgba(233,207,138,.7); color: #E9CF8A }
.dil-ilk-secenek:hover{ background: rgba(233,207,138,.1) }
.dil-ilk-kapat{
  margin-inline-start: auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(244,239,228,.22); background: transparent; color: #F4EFE4; font-size: 15px;
}
@media (max-width: 640px){
  .dil-ilk{ flex-wrap: nowrap; padding-inline: 12px; gap: 10px }
  .dil-ilk-baslik{ font-size: 0 } .dil-ilk-baslik svg{ width: 20px; height: 20px }
  .dil-ilk-diller{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0 }
  .dil-ilk-diller::-webkit-scrollbar{ display: none }
  .dil-ilk-secenek{ flex: none }
  .dil-ilk-kapat{ flex: none; margin: 0 }
}

/* çevrilmemiş metin notu (kontrollü dönüş) */
.dil-not{
  position: relative; z-index: 25;
  margin: 12px max(16px, calc((100% - 1240px) / 2)) 4px; padding: 12px 16px; border-radius: 12px;
  font: 500 14.5px/1.55 var(--font-govde, "Manrope", sans-serif); color: #EFEAE0;
  background: rgba(159,212,242,.08); border: 1px solid rgba(159,212,242,.3);
}

/* masanın ilk ekranı: büyük seçici */
.dil-buyuk{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px }
.dil-buyuk-secenek{
  min-height: 64px; padding: 0 16px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(233,207,138,.3); background: rgba(244,239,228,.04); color: #F4EFE4;
  font: 700 20px var(--font-marka, "Outfit", sans-serif);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.dil-buyuk-secenek:active{ transform: scale(.97) }
.dil-buyuk-secenek[aria-pressed="true"]{ background: linear-gradient(180deg, #F3DFA6 0%, #D6B45E 38%, #B88E36 72%, #9C7628 100%); color: #1B1405; border-color: transparent }

/* Arapça (sağdan sola): çevrilmemiş Türkçe paragraflar kendi yönünde kalır */
[dir="rtl"] .dil-secenek, [dir="rtl"] .dil-ilk{ text-align: right }
html[dir="rtl"] body{ font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", var(--font-govde, "Manrope"), sans-serif }
html[dir="rtl"] [lang="ar"]{ font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", sans-serif; letter-spacing: 0; text-transform: none }
/* sağdan sola: ileri/geri okları da yön değiştirir */
html[dir="rtl"] svg:has(> path[d="M4 10h11M11 5l5 5-5 5"]),
html[dir="rtl"] svg:has(> path[d="M5 14h17M16 8l6 6-6 6"]),
html[dir="rtl"] svg:has(> path[d="M15 9H3M8 4 3 9l5 5"]),
html[dir="rtl"] .satir-ok, html[dir="rtl"] .ok-ok{ transform: scaleX(-1) }