/* ==========================================================================
   Kabuk: yan menü, üst çubuk, içerik alanı, mobil alt gezinme
   ========================================================================== */

.kabuk {
  --yan: var(--yan-genislik);
  display: grid;
  grid-template-columns: var(--yan) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--t-yavas) var(--egri);
}
:root[data-menu="dar"] .kabuk { --yan: var(--yan-dar); }
@media (max-width: 1099px) { .kabuk { --yan: var(--yan-dar); } .menu-daralt { display: none !important; } }

/* ---------------- yan menü ---------------- */
.yan {
  container: yan / inline-size;
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--yuzey);   /* Gündüz: beyaz, etiketli sol menü */
  border-right: 1px solid var(--border);
  z-index: 20;
}
.yan-ust { display: flex; align-items: center; height: var(--ust-yukseklik); padding: 0 16px; flex: none; }
.marka { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; border-radius: 10px; }
.marka:hover { color: var(--text); }
/* kurumun kendi adresinde: logo (beyaz zeminde, giriş ekranıyla aynı) ya da baş harf; uzun ad iki satıra kırılır */
.marka.kurum .kurum-logo { height: 34px; max-width: 120px; padding: 4px 6px; border-radius: 9px; box-shadow: 0 0 0 1px var(--border); }
.marka.kurum .marka-ad { font-size: 16px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.marka-harf { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent, #fff); font-weight: 650; font-size: 15px; }
.marka-isaret { flex: none; border-radius: 9px; box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset, 0 2px 6px -2px color-mix(in srgb, var(--accent) 60%, transparent); }
.marka-ad { font-family: var(--font-serif); font-weight: 650; font-size: 21px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.marka-ad em {
  margin-left: 7px;
  font: 650 10px/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--champagne-text);
  vertical-align: 3px;
}

.yan-menu { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 16px; scrollbar-gutter: stable; }
.menu-grup + .menu-grup { margin-top: 6px; }
.menu-grup-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.menu-grup-baslik:hover { color: var(--text-2); }
.menu-grup-ok { transition: transform var(--t-orta) var(--egri); opacity: .7; }
.menu-grup-baslik[aria-expanded="false"] .menu-grup-ok { transform: rotate(-90deg); }
.menu-grup-govde { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-yavas) var(--egri); }
.menu-grup-baslik[aria-expanded="false"] + .menu-grup-govde { grid-template-rows: 0fr; }
.menu-liste { min-height: 0; overflow: hidden; visibility: visible; transition: visibility 0s; }
.menu-grup-baslik[aria-expanded="false"] + .menu-grup-govde .menu-liste { visibility: hidden; transition: visibility 0s var(--t-yavas); }

.menu-oge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 38px;
  margin: 1px 0;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--text-2);
  font-weight: 540;
  text-decoration: none;
  transition: background-color var(--t-hizli) var(--egri), color var(--t-hizli), box-shadow var(--t-hizli);
}
.menu-oge:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
.menu-oge:focus-visible { outline-offset: -2px; }
.menu-oge[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 620;
  box-shadow: 0 1px 0 var(--border), inset 0 0 0 1px var(--border);
}
.menu-oge[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--champagne);
}
.menu-ikon { display: grid; place-items: center; color: var(--text-3); transition: color var(--t-hizli); }
.menu-oge:hover .menu-ikon { color: var(--text-2); }
.menu-oge[aria-current="page"] .menu-ikon { color: var(--accent); }
.menu-ad { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.menu-rozet:empty { display: none; }
.menu-oge[data-ipucu]::after { display: none; }
.menu-bos { padding: 16px 10px; color: var(--text-3); font-size: 13px; }
.menu-bos p { margin: 0 0 4px; font-family: var(--font-serif); font-weight: 650; font-size: 18px; color: var(--text-2); }

.yan-alt { display: flex; align-items: center; gap: 8px; padding: 10px 12px 14px; border-top: 1px solid var(--border); flex: none; }
.menu-daralt { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--text-3); font-size: 13px; }
.menu-daralt:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
.surum { font-size: 11px; color: var(--text-3); padding-right: 6px; }

/* dar yan menü (kullanıcı daralttı ya da tablet) */
@container yan (max-width: 140px) {
  .yan-ust { justify-content: center; padding: 0; }
  .marka-ad { display: none; }
  .yan-menu { padding: 6px 0 16px; scrollbar-gutter: auto; }
  .menu-grup + .menu-grup { margin-top: 0; }
  /* dar menüde grup başlığı yalnız ayraç çizgisi: düğme gizlenir (klavyede adsız, görünmez odak durağı kalmasın) */
  .menu-grup-baslik { display: none; }
  .menu-grup::before { content: ''; display: block; height: 1px; margin: 12px auto; width: 28px; background: var(--border-guclu); }
  .menu-grup-govde { grid-template-rows: 1fr !important; }
  .menu-liste { visibility: visible !important; overflow: visible; }
  .menu-oge { justify-content: center; width: 42px; height: 40px; padding: 0; margin: 2px auto; }
  .menu-oge[aria-current="page"]::before { left: -11px; }
  .menu-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-rozet { position: absolute; top: 5px; right: 5px; }
  .menu-rozet .hap { min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface-2) 48%, var(--bg)); }
  .menu-oge[data-ipucu]::after { display: block; }
  .yan-alt { justify-content: center; padding: 10px 0 14px; }
  .menu-daralt { flex: none; width: 42px; justify-content: center; padding: 0; }
  .menu-daralt .menu-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .surum { display: none; }
  .menu-bos { display: none; }
}

/* ---------------- ana alan ---------------- */
.ana { min-width: 0; display: flex; flex-direction: column; }

.ust {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ust-yukseklik);
  padding: 0 clamp(12px, 2vw, 24px);
  background: color-mix(in srgb, var(--yuzey) 88%, transparent);   /* Gündüz: beyaz üst çubuk */
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}
.ust-bosluk { flex: 1; }
.ust-eylemler { display: flex; align-items: center; gap: 2px; }
.ust-menu-dugme, .ust-ara { display: none !important; }
.site-yeri { min-width: 0; display: flex; }

.site-secici {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 340px;
  height: 42px;
  padding: 0 10px 0 5px;
  border-radius: 11px;
  color: var(--text);
  text-align: left;
  transition: background-color var(--t-hizli);
}
button.site-secici:hover { background: var(--surface-2); }
.site-karo {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-serif); font-weight: 650;
  font-size: 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--champagne) 45%, transparent);
}
.site-metin { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.site-ad { font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: 2px; margin-block: -2px; }   /* padding = -margin: yerleşim aynı, harf kuyrukları kırpılmaz */
.site-alt { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: 2px; margin-block: -2px; }
.site-ok { color: var(--text-3); flex: none; }

/* bölüm seçici (yalnız çok bölümlü kurumda; js/kabuk.js bolumSecici). Geniş üst çubukta radiogroup, dar kalınca açılır menülü düğme:
   iki bölümde (Tümü dahil üç seçenek) 1200 px, üç bölümde 1440 px altında düğme; dört ve daha çok bölümde her zaman düğme.
   Seçici hiçbir genişlikte küçülmez (flex: none): yer daralınca kurum adı kısalır (masaüstünde "…", telefonda sarar). Böylece 1200–1290 px'te yan menü
   açıkken radiogroup'un son seçeneği kırpılmaz, telefonda düğme arama ve zil düğmesinin üstüne binmez. Düğmenin kendisi taşmaya karşı overflow: hidden
   (odak çerçevesi outline olduğu için kırpılmaz). */
.bolum-yeri { display: flex; min-width: 0; flex: none; }
.bolum-yeri[hidden] { display: none; }
.bolum-secici-kap { display: flex; align-items: center; min-width: 0; }
.bolum-secici { display: none; flex: none; }
.bolum-secici .bolumlu-oge { gap: 7px; }
.bolum-secici-ad { white-space: nowrap; }
.bolum-dugme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 44px;
  max-width: 100%;
  overflow: hidden;
  height: 34px;
  padding: 0 8px 0 10px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-guclu);
  color: var(--text);
  font-size: 13px;
  font-weight: 580;
  transition: box-shadow var(--t-hizli);
}
.bolum-dugme:hover { box-shadow: inset 0 0 0 1px var(--border-input); }
.bolum-dugme-nokta { display: inline-flex; flex: none; }
.bolum-dugme-ad { min-width: 3ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bolum-dugme-ad-kisa { display: none; }   /* telefonda görünen kısa ad ("Estetik"); tam ad ekran okuyucuda ve ipucunda kalır */
.bolum-dugme-ok { flex: none; color: var(--text-3); }
@media (min-width: 1200px) {
  .bolum-secici-kap[data-sayi="2"] .bolum-secici { display: inline-flex; }
  .bolum-secici-kap[data-sayi="2"] .bolum-dugme { display: none; }
}
@media (min-width: 1440px) {
  .bolum-secici-kap[data-sayi="3"] .bolum-secici { display: inline-flex; }
  .bolum-secici-kap[data-sayi="3"] .bolum-dugme { display: none; }
}

.palet-tetik {
  display: flex;
  align-items: center;
  gap: 10px;
  width: clamp(220px, 26vw, 340px);
  height: 36px;
  padding: 0 6px 0 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-guclu);
  color: var(--text-3);
  font-size: 13.5px;
  transition: box-shadow var(--t-hizli), color var(--t-hizli);
}
.palet-tetik:hover { box-shadow: inset 0 0 0 1px var(--border-input); color: var(--text-2); }
.palet-tetik-metin { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palet-tus { display: flex; gap: 3px; }

.zil { position: relative; }
.zil-nokta {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 2px var(--bg);
  transform: scale(0);
  transition: transform var(--t-orta) var(--egri-yay);
}
.zil[data-yeni] .zil-nokta { transform: scale(1); }
.zil-bos { margin: 0; padding: 4px 2px 6px; color: var(--text-2); font-size: 13px; max-width: 260px; }

.kullanici-yeri { display: flex; margin-left: 4px; }
.kullanici-dugme { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.kullanici-dugme .avatar { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px color-mix(in srgb, var(--champagne) 70%, transparent); }
.kullanici-dugme:hover .avatar { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--champagne); }
.kullanici-kart { display: flex; align-items: center; gap: 12px; }
.kullanici-kart div { display: flex; flex-direction: column; min-width: 0; }
.kullanici-kart strong { font-weight: 650; }
.kullanici-kart small { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }

/* üst ilerleme çizgisi */
.ilerleme { position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity var(--t-orta); }
.ilerleme::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, var(--champagne), var(--accent));
  animation: ilerleme 1.25s var(--egri) infinite;
}
.ilerleme[data-etkin] { opacity: 1; }
@keyframes ilerleme { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

.cevrimdisi-serit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px clamp(16px, 3vw, 40px);
  background: var(--warning-soft);
  color: var(--text);
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.cevrimdisi-serit .ikon { color: var(--warning); }
.cevrimdisi-serit[hidden] { display: none; }

/* ---------------- içerik ---------------- */
.icerik {
  container: icerik / inline-size;
  flex: 1;
  width: 100%;
  max-width: var(--icerik-azami);
  margin: 0 auto;
  padding: 28px clamp(16px, 3vw, 40px) 72px;
}
.icerik:focus-visible { outline: none; }
.icerik[data-yerlesim="tam"] { max-width: none; padding: 0; display: flex; flex-direction: column; }
.gorunum { animation: gorunum-gir var(--t-orta) var(--egri); min-width: 0; }
.icerik[data-yerlesim="tam"] > .gorunum { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* çok bölüm: gizli modülün ekranı doğrudan adresle açılınca görünümün üstündeki not (js/yonlendirici.js bolumNotu) */
.bolum-not { margin-bottom: 16px; }
.bolum-not .uyari-kutu { align-items: center; flex-wrap: wrap; }
.icerik[data-yerlesim="tam"] > .bolum-not { flex: none; margin: 12px 16px 0; }
@keyframes gorunum-gir { from { opacity: 0; transform: translateY(4px); } }

/* ---------------- mobil ---------------- */
.alt-gezinme { display: none; }

@media (max-width: 759px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .yan { display: none; }
  .ust { gap: 4px; padding: 0 6px 0 4px; }
  .ust-menu-dugme, .ust-ara { display: inline-flex !important; }
  .palet-tetik { display: none; }
  .site-secici { max-width: 52vw; height: 40px; padding-left: 2px; gap: 8px; }
  .site-karo { width: 28px; height: 28px; font-size: 16px; }
  .site-alt { display: none; }
  .kullanici-yeri { margin-left: 0; }
  .icerik { padding: 20px 16px calc(var(--alt-gezinme) + 36px + env(safe-area-inset-bottom)); }
  .icerik[data-yerlesim="tam"] { padding: 0 0 calc(var(--alt-gezinme) + env(safe-area-inset-bottom)); }
  .alt-gezinme {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--alt-gezinme) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid var(--border);
  }
  .alt-oge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 580;
    text-decoration: none;
  }
  .alt-oge[aria-current="page"] { color: var(--accent); }
  .alt-oge[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 2px;
    margin-left: -13px;
    border-radius: 0 0 2px 2px;
    background: var(--champagne);
  }
  .alt-ikon { position: relative; display: grid; }
  .alt-ad { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alt-rozet {
    position: absolute;
    top: -6px;
    left: 14px;
    min-width: 17px;
    width: max-content;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--surface);
  }
}

.mobil-menu-cekmece .cekmece-govde { padding: 8px 12px 16px; gap: 8px; }
.yan-menu.mobil { padding: 0; overflow: visible; }
.mobil-menu-alt { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.mobil-menu-alt .menu-oge { font-weight: 520; }

/* ---------------- mobil (≤759 px): kurum adı ve menü adları "…" ile KESİLMEZ, sarar ---------------- */
@media (max-width: 759px) {
  /* üst çubuk en az 56 px; çok satırlı kurum adı gerekirse çubuğu büyütür (3 satıra kadar 56 px'e sığar) */
  .ust { height: auto; min-height: var(--ust-yukseklik); }
  .ust-menu-dugme, .ust-eylemler { flex: none; }   /* kenardaki düğmeler sıkışıp daralmasın */
  .ust-eylemler { gap: 0; }
  /* üst çubuk düğmeleri en az 44×44 px dokunma alanı (menü, ara, zil, tema, hesap; masaüstünde 36 px aynen) */
  .ust-menu-dugme, .ust-eylemler .ikon-dugme, .kullanici-dugme { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .site-yeri { flex: 0 1 auto; }
  .site-secici { height: auto; min-height: 40px; padding: 2px 4px 2px 2px; gap: 6px; }
  /* çok bölümlü kurum: bölüm düğmesine yer açmak için tema düğmesi gizlenir (tema Profil ve güvenlik'te de seçilir); düğme 44 px dokunma alanı,
     adı kısalırsa "…" ile biter (tam adı title ve ekran okuyucu metninde) */
  .ust[data-bolumlu] .tema-dugme { display: none !important; }
  /* düğme küçülmez (yukarıda flex: none), uzun kurum adı ("Uzm. Dr. Ramazan Ersoy (yerel deneme)") sarar; düğmede kısa ad (tam ad görünmez metinde),
     üst sınırla: 375 px'te kurum adına ~75 px, 320 px'te ~80 px kalır */
  .bolum-dugme { height: 44px; min-height: 44px; padding: 0 6px 0 8px; gap: 5px; }
  .bolum-dugme-ad { max-width: 26vw; }
  .bolum-dugme-ad-tam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bolum-dugme-ad-kisa { display: inline; }
  .site-ad { font-size: 13px; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; padding-block: 0; margin-block: 0; overflow-wrap: anywhere; }
  .kullanici-kart small { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

  /* mobil menü çekmecesi: menü adları ve grup başlıkları sarar; satırlar en az 44 px (Çıkış yap dahil) */
  .mobil-menu-cekmece .menu-oge { height: auto; min-height: 44px; padding-block: 8px; }
  .mobil-menu-cekmece .menu-ad { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
  .mobil-menu-cekmece .menu-ikon, .mobil-menu-cekmece .menu-rozet { flex: none; }
  .mobil-menu-cekmece .menu-grup-baslik { height: auto; min-height: 32px; padding-block: 6px; line-height: 1.3; text-align: left; }
}
/* dar telefon (≤419 px): kurum adına yer açmak için baş harf karosu gizlenir (ad zaten aynı çubukta yazılı) */
@media (max-width: 419px) {
  .site-karo { display: none; }
  /* bölüm düğmesi: aşağı ok gizlenir (düğme çerçeveli kalır, açılır menüdür; ekran okuyucu metni "bölümü değiştir"), ad en çok 20vw.
     375 px'te uzun kurum adı 5 yerine 4 satıra sarar (üst çubuk ~67 px) */
  .bolum-dugme { padding: 0 8px; }
  .bolum-dugme-ok { display: none; }
  .bolum-dugme-ad { max-width: 20vw; }
}
/* 320-359 px telefon: kurum adı 3 satıra sığsın (çubuk 56 px kalsın) diye üst çubuktaki arama düğmesi gizlenir; arama menü çekmecesinde ("Ara ya da komut") durur */
@media (max-width: 359px) {
  .ust-ara { display: none !important; }
  .bolum-dugme-ad { max-width: 18vw; }   /* bölüm düğmesinin adı (ok 419 px'te gizlendi) */
}