/*
  File Atölyesi Yönetim paneli - kabuk.
  Açık, ferah tema: site zemini (#F4F7F2) üstünde beyaz kartlar, koyu petrol yeşili yazı, fıstık yeşili yalnızca dolgu
  (seçili menü öğesi, "hazır" rozeti). Sol menü açık yeşil, üst çubuk beyaz. Tek tema, bilgisayarın ayarından bağımsız.
  Bu dosya: token'lar, temel yazı, kabuk (yan menü, üst çubuk, perde, içerik) ve kırılma noktaları.
  Bileşenler bilesenler.css'te, sayfaya özel kurallar sayfalar.css'te. Tasarım notları: YONETIM_PANELI.md.
*/

@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }

:root {
  /* yüzeyler */
  --zemin: #F4F7F2;
  --yuzey: #FFFFFF;
  --dolgu: #EDF2EA;
  --dolgu-koyu: #E1E9DE;
  --satir-ustu: #F9FBF8;
  --cizgi: #E2E8DF;
  --cizgi-guclu: #C9D3C6;
  --perde: rgb(0 54 49 / .35);
  /* yazı */
  --yazi: #0E2A28;
  --yazi-2: #3F5552;
  --yazi-3: #5B6B66;
  --sus: #9AA5A0;          /* yalnızca süs: pasif simge, ayraç; metin olarak kullanılmaz (beyazda 2,5:1) */
  --yazi-ters: #FFFFFF;
  /* marka ve vurgu */
  --marka: #003631;
  --marka-2: #003032;
  --fistik: #C2E093;       /* yalnızca dolgu; üstüne --marka yazı (9,2:1) */
  --vurgu: #2C9A58;        /* simge, aktif çubuk, nokta, grafik; metin olarak yalnızca büyük/kalın */
  --vurgu-koyu: #1F7A46;   /* birincil düğme zemini, bağlantı, başarı yazısı (beyazda 5,3:1) */
  --vurgu-koyu-2: #176238;
  --vurgu-acik: #E7F4EC;
  --vurgu-yuzey: #F0F7F1;
  --vurgu-cizgi: #CFE4D5;
  --odak: 0 0 0 3px rgb(44 154 88 / .35);
  /* durum tonları: yazı / zemin (hepsi zeminde en az 4,5:1) */
  --hazir: #003631;  --hazir-z: #C2E093;
  --basari: #1F7A46; --basari-z: #E3F3E8;
  --bilgi: #0B6B6E;  --bilgi-z: #E3F2F2;
  --bekle: #2F5F9E;  --bekle-z: #E8F0FA;
  --uyari: #8A5A00;  --uyari-z: #FCF3DC;
  --hata: #B42318;   --hata-z: #FDEEEC;
  --hata-canli: #D13438;
  --pasif: #5B6B66;  --pasif-z: #ECF0EC;
  /* eski panelin (panel.css) adları: kopyalanan bileşen kuralları bunları okur */
  --onay: var(--uyari); --onay-z: var(--uyari-z);
  --kuyruk: var(--bilgi); --kuyruk-z: var(--bilgi-z);
  --ok: var(--basari); --ok-z: var(--basari-z);
  --murekkep: var(--yazi); --murekkep-2: var(--yazi-2); --soluk: var(--yazi-3); --ters: var(--yazi-ters);
  --birincil: var(--vurgu-koyu); --birincil-2: var(--vurgu-koyu-2); --birincil-yazi: #FFFFFF;
  --ikincil: var(--vurgu-acik); --ikincil-2: var(--dolgu-koyu); --secili: var(--vurgu-yuzey);
  --yuzey-2: var(--dolgu); --ust-zemin: var(--yuzey);
  /* kanallar: grafik/nokta rengi (beyazda ≥ 3:1) ve yazı rengi (≥ 4,5:1) */
  --k-trendyol: #CC7118;    --k-trendyol-yazi: #9A4E06;
  --k-hepsiburada: #C94A22; --k-hepsiburada-yazi: #A8391A;
  --k-site: #2C9A58;        --k-site-yazi: #1F7A46;
  --k-toptan: #2F7FB8;      --k-toptan-yazi: #255F8C;
  --k-demo: #9AA5A0;        --k-demo-yazi: #5B6B66;
  --grafik: var(--vurgu);
  /* sol menü */
  --menu-zemin: #E9F1E1;
  --menu-ust: #DDE9D3;
  --menu-secili: #C2E093;
  --menu-secili-yazi: #003631;
  --menu-cizgi: #D8E4D2;
  --menu-cizgi-guclu: #B9CCB2;
  --menu-kutu: #FFFFFF;
  --menu-baslik: #003631;
  --menu-yazi: #1E3A36;
  --menu-yazi-2: #4C625D;
  --menu-yazi-3: #5B6B66;
  --menu-vurgu: #2C9A58;
  /* gölge, köşe, ölçü */
  --golge-1: 0 1px 2px rgb(0 54 49 / .06);
  --golge-2: 0 10px 30px rgb(0 54 49 / .12);
  --k-1: 6px; --k-2: 8px; --k-3: 12px;
  --r: 12px; --r-orta: 10px; --r-kucuk: 8px;
  --yan-genislik: 248px;
  --yan-dar: 72px;
  --ust: 60px;
  --icerik-genislik: 1600px;
  --icerik-kenar: 32px;
  --kenar: 16px;
  --genislik: 1600px;
  --alt-menu: 0px;
  --dugme: 104px;
  --gecis: 150ms ease;
  --sans: "Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

/* ------------------------------------------------------------ temel */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--zemin); color: var(--yazi);
  font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--vurgu-koyu); text-decoration: underline; text-decoration-color: var(--vurgu-cizgi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--marka); text-wrap: balance; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: 13.5px; font-weight: 600; color: var(--yazi-2); }
small, .soluk { color: var(--yazi-3); }
small { font-size: 13px; }
.mono, .sabit { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font: 13px/1.5 var(--mono); background: var(--dolgu); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
pre { margin: 0; font: 12px/1.6 var(--mono); background: var(--dolgu); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); padding: 14px; overflow: auto; max-height: 420px; }
:focus-visible { outline: none; box-shadow: var(--odak); }
.gizli, .gizli-metin { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--marka); color: #fff; padding: 10px 14px; border-radius: var(--r-kucuk); font-weight: 600; }
.atla:focus { top: 10px; }
.ikon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.hata-yazi { color: var(--hata); }
svg.ikon-kucuk { width: 16px; height: 16px; }

/* ------------------------------------------------------------ kabuk: sol menü | üst çubuk + içerik */
.kabuk { min-height: 100dvh; display: grid; grid-template-columns: var(--yan-genislik) minmax(0, 1fr); }
.dar-menu .kabuk { grid-template-columns: var(--yan-dar) minmax(0, 1fr); }  /* sınıf <html>'de: ilk boyamadan önce uygulanır */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .kabuk { transition: grid-template-columns .22s ease; }
}

/* Yan menü ekran boyunda sabit: üstte marka, ortada kayan liste, altta daraltma düğmesi. */
.yan-menu {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 12px 12px; background: var(--menu-zemin); color: var(--menu-yazi); overflow: visible clip;
  border-right: 1px solid var(--menu-cizgi);
}
.yan-menu :focus-visible { box-shadow: 0 0 0 2px var(--menu-vurgu); }
.marka { display: flex; align-items: center; gap: 10px; padding: 2px 4px; color: var(--menu-baslik); text-decoration: none; min-width: 0; }
.marka-isaret {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--marka); color: var(--fistik);
}
.marka-isaret svg { width: 22px; height: 15px; fill: currentColor; }
.marka-yazi { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.marka-yazi b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marka-yazi span { font-size: 12px; color: var(--menu-yazi-2); }
.daralinca-goster { display: none; }

.menu {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain;
  margin-inline: -12px; padding: 2px 12px; scrollbar-width: thin; scrollbar-color: var(--menu-cizgi-guclu) transparent;
}
.menu-grup { display: flex; flex-direction: column; gap: 2px; }
.menu-grup-adi {
  position: sticky; top: -2px; z-index: 1; padding: 6px 10px 4px; background: var(--menu-zemin);
  font-size: 12px; font-weight: 600; color: var(--menu-yazi-3); text-transform: uppercase; letter-spacing: .06em;
}
.menu-oge {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: var(--k-2);
  text-decoration: none; color: var(--menu-yazi); font-weight: 500; font-size: 14px; line-height: 1.3;
  transition: background-color var(--gecis), color var(--gecis);
}
.menu-oge > .ikon { width: 18px; height: 18px; color: var(--menu-yazi-2); }
.menu-oge:hover { background: var(--menu-ust); color: var(--menu-baslik); }
.menu-oge[aria-current="page"] { background: var(--menu-secili); color: var(--menu-secili-yazi); }
.menu-oge[aria-current="page"] > .ikon { color: var(--menu-secili-yazi); }
.menu-oge[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--menu-vurgu);
}
.menu-oge-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-sayac {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 600; line-height: 20px; background: var(--vurgu-koyu); color: #fff; font-variant-numeric: tabular-nums;
}
.menu-sayac.uyari { background: var(--uyari); color: #fff; }
.menu-sayac.hata { background: var(--hata-canli); color: #fff; }
/* kanal ve yazıcı durumu: menü öğesinin sağında nokta */
.menu-nokta { flex: none; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--sus); }
.menu-nokta.acik { background: var(--vurgu); }
.menu-nokta.hata { background: var(--hata-canli); }
.menu-nokta.uyari { background: var(--uyari); }
.menu-oge .pazaryeri-harf.yan-boy, .menu-oge img.pazaryeri-logo.yan-boy { width: 20px; height: 20px; border-radius: 6px; font-size: 11.5px; }
.menu-oge.pasif:not([aria-current]) { color: var(--menu-yazi-2); }  /* logo tam renkli kalır; bağlı olmayan kanalı gri nokta söyler */

/* bölüm (ağaç): üst öğe + ok düğmesi, altında girintili alt öğeler */
.agac { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.agac-baslik { display: flex; align-items: stretch; gap: 2px; }
.agac-baslik > .menu-oge { flex: 1; min-width: 0; }
/* ok düğmesi olmayan öğelerde aynı genişlik boş bırakılır: sayaçlar ve noktalar tek sütunda alt alta durur */
html:not(.dar-menu) .agac li:not(.agac-oge) > .menu-oge { padding-right: 40px; }
.agac-ok-dugme {
  flex: none; width: 28px; border: none; border-radius: var(--k-1); background: none; color: var(--menu-yazi-2); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.agac-ok-dugme:hover { background: var(--menu-ust); color: var(--menu-baslik); }
.agac-ok-dugme .ikon { width: 14px; height: 14px; transition: transform var(--gecis); }
.agac-ok-dugme[aria-expanded="false"] .ikon { transform: rotate(-90deg); }
.agac-alt { list-style: none; margin: 2px 0 6px 19px; padding: 0 0 0 8px; border-left: 1px solid var(--menu-cizgi-guclu); display: flex; flex-direction: column; gap: 1px; }
.agac-alt[hidden] { display: none; }
.agac-alt .menu-oge { min-height: 32px; padding: 5px 10px; font-size: 13.5px; }
.agac-alt .menu-oge[aria-current="page"]::before { left: -9px; top: 6px; bottom: 6px; }

/* menünün altı: daraltma düğmesi */
.yan-alt { display: flex; align-items: center; justify-content: flex-end; padding: 10px 2px 0; border-top: 1px solid var(--menu-cizgi); }
.menu-daralt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--k-2);
  border: 1px solid transparent; background: none; color: var(--menu-yazi-2); font: inherit; font-size: 13px; cursor: pointer;
}
.menu-daralt:hover { background: var(--menu-ust); color: var(--menu-baslik); }
.menu-daralt .ikon { width: 16px; height: 16px; }

/* uçan alt menü (daraltılmış menüde üstüne gelince) */
.ucan-menu {
  display: none; position: fixed; z-index: 50; min-width: 200px; padding: 6px; background: var(--yuzey); color: var(--yazi);
  border: 1px solid var(--cizgi); border-radius: var(--k-3); box-shadow: var(--golge-2);
}
.ucan-menu.acik { display: flex; flex-direction: column; gap: 2px; }
.ucan-menu .ucan-baslik { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--yazi-3); text-transform: uppercase; letter-spacing: .04em; }
.ucan-menu .menu-oge { color: var(--yazi); }
.ucan-menu .menu-oge:hover { background: var(--dolgu); color: var(--yazi); }
.ucan-menu .menu-oge[aria-current="page"] { background: var(--vurgu-acik); color: var(--vurgu-koyu-2); }
.ucan-menu .menu-oge[aria-current="page"]::before { content: none; }

/* daraltılmış menü (yalnızca geniş ekranda): simgeler ve logolar; yazılar ekran okuyucuda kalır */
@media (min-width: 961px) {
  .dar-menu .yan-menu { padding-inline: 10px; }
  .dar-menu .menu { margin-inline: -10px; padding-inline: 10px; }
  .dar-menu .daralinca-gizle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dar-menu .daralinca-goster { display: inline-grid; }
  .dar-menu .marka { justify-content: center; padding: 2px 0; }
  .dar-menu .menu-grup-adi { height: 1px; padding: 0; margin: 2px 6px 6px; background: var(--menu-cizgi-guclu); font-size: 0; }
  .dar-menu .menu-oge { justify-content: center; padding: 9px; }
  .dar-menu .menu-oge[aria-current="page"]::before { left: -10px; }
  .dar-menu .menu-sayac, .dar-menu .menu-nokta { position: absolute; top: 3px; right: 3px; margin: 0; }
  .dar-menu .menu-sayac { min-width: 16px; padding: 0 4px; line-height: 16px; font-size: 11.5px; }
  .dar-menu .agac-ok-dugme, .dar-menu .agac-alt { display: none; }
  .dar-menu .yan-alt { justify-content: center; margin-inline: -10px; }
  .dar-menu .menu-daralt { width: 36px; padding: 0; }
}

.perde { display: none; }
/* telefon perdesini açan düğme: geniş ekranda yok (.ust-dugme kuralı sonra geldiği için iki sınıfla) */
.menu-ac, .ust-dugme.menu-ac { display: none; }

/* ------------------------------------------------------------ sağ taraf: üst çubuk + içerik */
.sag { min-width: 0; display: flex; flex-direction: column; }
.ust-cubuk { position: sticky; top: 0; z-index: 20; height: var(--ust); background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.ust-ic {
  width: 100%; max-width: var(--icerik-genislik); height: 100%; margin: 0 auto; padding: 0 var(--icerik-kenar);
  display: flex; align-items: center; gap: 10px;
}
.ust-cubuk .marka { display: none; }
.ust-baslik { min-width: 0; font-size: 14px; font-weight: 500; color: var(--yazi-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ust-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 8px;
  border: none; border-radius: var(--k-2); background: none; color: var(--yazi-2); font: inherit; cursor: pointer; text-decoration: none;
}
.ust-dugme:hover { background: var(--dolgu); color: var(--yazi); }
.test-rozeti { font: 600 11.5px/1 var(--sans); background: var(--uyari-z); color: var(--uyari); padding: 5px 9px; border-radius: 8px; letter-spacing: .04em; }

/* sistem pastili: Çalışıyor / Dikkat gerekiyor / Duraklatıldı */
.sistem {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid var(--vurgu-cizgi); background: var(--vurgu-yuzey); color: var(--vurgu-koyu-2); font-size: 13px; font-weight: 500; text-decoration: none;
}
.sistem:hover { background: var(--vurgu-acik); }
.sistem .durum-isareti { width: 8px; height: 8px; border-radius: 50%; background: var(--vurgu); }
.sistem.sorun { border-color: #F2D8B4; background: var(--uyari-z); color: var(--uyari); }
.sistem.sorun .durum-isareti { background: var(--uyari); }
.sistem.durdu { border-color: var(--cizgi-guclu); background: var(--dolgu); color: var(--yazi-2); }
.sistem.durdu .durum-isareti { background: var(--sus); }
.sistem .yazici-bilgi { display: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--yazi-3); font-weight: 400; }
@media (min-width: 1280px) { .sistem .yazici-bilgi { display: inline; } }

/* zil ve hesap: details ile açılır kutular */
details.zil, details.hesap-menu { position: relative; }
details.zil > summary, details.hesap-menu > summary { list-style: none; cursor: pointer; }
details.zil > summary::-webkit-details-marker, details.hesap-menu > summary::-webkit-details-marker { display: none; }
details.zil > summary {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--k-2); color: var(--yazi-2);
}
details.zil > summary:hover, details.zil[open] > summary { background: var(--dolgu); color: var(--yazi); }
.zil-sayi {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--uyari); color: #fff; font: 600 11.5px/17px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--yuzey);
}
.zil-sayi.hata { background: var(--hata-canli); }
.zil-panel, .hesap-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--yuzey); color: var(--yazi);
  border: 1px solid var(--cizgi); border-radius: var(--k-3); box-shadow: var(--golge-2);
}
.zil-panel { width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; }
.zil-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); font-size: 14px; }
.zil-baslik a { font-size: 13px; }
details.hesap-menu > summary {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 4px; border-radius: 999px; color: var(--yazi);
}
details.hesap-menu > summary:hover, details.hesap-menu[open] > summary { background: var(--dolgu); }
.bas-harf {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fistik); color: var(--marka); font-weight: 600; font-size: 13px;
}
.bas-harf.buyuk { width: 40px; height: 40px; font-size: 16px; }
details.hesap-menu > summary .ad { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
details.hesap-menu > summary .ok-isareti { width: 14px; height: 14px; color: var(--yazi-3); }
.hesap-panel { width: min(280px, calc(100vw - 24px)); padding: 8px; }
.hesap-kimlik { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid var(--cizgi); margin-bottom: 8px; }
.hesap-kimlik > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.hesap-kimlik small { font-size: 12px; }
.hesap-kimlik b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesap-kimlik span { font-size: 13px; color: var(--yazi-3); }
.hesap-panel form button { width: 100%; justify-content: center; }

/* içerik sütunu */
.icerik, .sayfa {
  width: 100%; max-width: var(--icerik-genislik); margin: 0 auto; padding: 24px var(--icerik-kenar) 48px;
  display: flex; flex-direction: column; gap: 20px;
}
.sayfa-basi { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sayfa-basi > div { min-width: 0; }
.alt-baslik { margin-top: 4px; color: var(--yazi-2); max-width: 70ch; font-size: 14px; }
.baslik-satiri { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eylem-satiri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.geri { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--yazi-3); text-decoration: none; }
.geri:hover { color: var(--yazi); }
.geri .ikon { width: 16px; height: 16px; }
.bildirimler { display: flex; flex-direction: column; gap: 8px; }
/* İşlem sonrası mesaj: sayfa kaydırılmış olsa da üst çubuğun altında görünür kalır (kaydırma konumu korunur) */
.icerik > .bildirimler { position: sticky; top: calc(var(--ust) + 8px); z-index: 5; }
.icerik > .bildirimler .mesaj { box-shadow: var(--golge-2); transition: opacity .4s; }
.icerik > .bildirimler .mesaj.soluyor { opacity: 0; }
.mesaj { padding: 12px 14px; border-radius: var(--r-kucuk); border: 1px solid var(--cizgi); background: var(--yuzey); font-size: 14px; }
.mesaj.ok { background: var(--basari-z); color: var(--basari); border-color: #CFE8D8; }
.mesaj.hata { background: var(--hata-z); color: var(--hata); border-color: #F3C7C2; }

/* ------------------------------------------------------------ dar ekran: sol menü perdeye döner */
@media (max-width: 1200px) {
  :root { --icerik-kenar: 24px; }
}
@media (max-width: 960px) {
  :root { --ust: 56px; --icerik-kenar: 20px; }
  .kabuk, .dar-menu .kabuk { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
  .ust-ic { padding: 0 12px; }
  .ust-cubuk .marka { display: flex; padding: 0; color: var(--marka); }
  .ust-cubuk .marka-isaret { width: 30px; height: 30px; border-radius: 8px; }
  .ust-cubuk .marka-isaret svg { width: 19px; height: 13px; }
  .ust-cubuk .marka-yazi span { color: var(--yazi-3); }
  .ust-baslik { display: none; }
  .ust-dugme.menu-ac { display: inline-grid; }
  .menu-daralt { display: none; }
  .yan-menu {
    position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: min(var(--yan-genislik), 86vw);
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: none;
  }
  .yan-menu .marka { padding-right: 36px; }
  .kabuk.menu-acik .yan-menu { transform: none; box-shadow: var(--golge-2); }
  .kabuk.menu-acik .perde { display: block; position: fixed; inset: 0; z-index: 30; background: var(--perde); }
  .menu-kapat { position: absolute; top: 12px; right: 10px; }
  .sistem .durum-metni { display: none; }
  .sistem { padding: 0 10px; }
}
@media (min-width: 961px) { .menu-kapat { display: none; } }
@media (max-width: 680px) {
  :root { --icerik-kenar: 16px; }
  .ust-ic { padding: 0 8px; gap: 6px; }
  .ust-sag .zil-panel, .ust-sag .hesap-panel { position: fixed; top: calc(var(--ust) + 4px); right: 12px; }
  .sayfa-basi { flex-direction: column; align-items: stretch; }
  details.hesap-menu > summary .ad, details.hesap-menu > summary .ok-isareti { display: none; }
  details.hesap-menu > summary { padding: 0 4px; }
}
@media (max-width: 520px) {
  .ust-cubuk .marka-yazi { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kabuk, .yan-menu, .menu-oge, .agac-ok-dugme .ikon { transition: none; }
}

/* ---- sayfalar arası yumuşak geçiş (Chrome/Edge): içerik kısa bir solma ve kaymayla değişir, sol menü ve üst çubuk
   yerinde kalır. Hareket azaltma tercihinde kapalı. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.yan-menu { view-transition-name: yan-menu; }
.ust-cubuk { view-transition-name: ust-cubuk; }
::view-transition-group(yan-menu), ::view-transition-group(ust-cubuk) { animation-duration: 0s; }
::view-transition-old(root) { animation: .12s ease-in both sayfa-cik; }
::view-transition-new(root) { animation: .22s ease-out both sayfa-gir; }
@keyframes sayfa-cik { to { opacity: 0; } }
@keyframes sayfa-gir { from { opacity: 0; transform: translateY(6px); } }