/* Ortak baslik — tum sayfalarda ayni. Bkz. header.js */
.ch {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.ch-in {
  max-width: 1140px; margin-inline: auto;
  padding: 13px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; gap: 14px;
}
.ch-brand { text-decoration: none; flex: none; }
.ch-spacer { flex: 1; }
.ch-act { display: flex; align-items: center; gap: 8px; flex: none; }
.ch-icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink-2); cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.ch-icon:hover { color: var(--ink); border-color: var(--line-strong); }

/* Bayrakli dil secici — ana sayfadakiyle ayni gorunum. */
.caw-lang {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.caw-lang button {
  width: 34px; height: 34px; padding: 0;
  border: 0; background: transparent; border-radius: 999px;
  display: grid; place-items: center; position: relative; cursor: pointer;
}
.caw-lang img {
  width: 26px; height: 26px; border-radius: 999px; object-fit: cover; display: block;
  opacity: .3; filter: grayscale(1);
  transition: opacity 320ms, filter 320ms;
}
.caw-lang button[aria-pressed="true"] img { opacity: 1; filter: none; }
.caw-lang button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px var(--surface-2);
}
.caw-lang button:hover img { opacity: .75; filter: grayscale(.3); }

/* Ortak baslik, ANA SAYFADAKI olculerle birebir: ayni genislik, ayni
   ic bosluk, ayni marka boyutu. Fark yalnizca temada — burada acik/koyu
   secilebilir, ana sayfada baslik her zaman koyu. */
.ch-in { max-width: var(--wrap, 1140px); padding: 14px var(--gutter, clamp(20px, 5vw, 48px)); }

/* Gezinti: ana sayfadaki .nav ile ayni. site.css alt sayfalarda
   yuklenmedigi icin kurallar burada tekrarlanmak zorunda; degerler
   site.css'teki .nav ile birebir ayni tutulur. */
.ch .nav { display: flex; gap: 4px; margin-left: 18px; }
.ch .nav a {
  padding: 8px 13px; border-radius: 9px;
  font-size: .94rem; color: var(--ink-2); text-decoration: none;
  transition: color 220ms, background 220ms;
}
.ch .nav a:hover { color: var(--ink); background: var(--surface-2); }
@media (max-width: 780px) { .ch .nav { display: none; } }
/* ============================================================
   Dar ekranda baslik — dil secici tasiyordu
   ============================================================
   320px'te marka + tema dugmesi + iki bayrakli secici yan yana
   sigmiyordu; secicinin sag kenari ekrani 22px asiyordu.
   Cozum gizlemek degil KUCULTMEK: bayraklar ve dugmeler
   kuculuyor, boslular daraliyor, hepsi ekranda kaliyor.
   ============================================================ */
@media (max-width: 400px) {
  .hdr-in, .ch-in { padding-inline: 14px; gap: 8px; }
  .wordmark { font-size: 1.16rem; }
  .hdr-act, .ch-act { gap: 5px; }
  .icon-btn, .ch-icon { width: 32px; height: 32px; border-radius: 8px; }
  .caw-lang { padding: 3px; gap: 2px; }
  .caw-lang button { width: 27px; height: 27px; }
  .caw-lang img { width: 21px; height: 21px; }
}
@media (max-width: 340px) {
  .wordmark { font-size: 1.02rem; }
  .caw-lang button { width: 24px; height: 24px; }
  .caw-lang img { width: 19px; height: 19px; }