/* ============================================================
   PICATIVE — PicaOS PANELİ (tek stil dosyası)
   Panel her müşteride aynı görünür; sitenin renklerinden bağımsızdır.

   Sözleşme: PANEL-TASARIM-DILI.md — token öneki --po-, sınıf öneki po-.
   İ4'te eski admin.css ile iskelet.css bu dosyada birleşti; iskelet.css
   kalktı. Eski --p-* değişkenleri ve takma adları (--navy, --gold …) yok.

   Koyu mod: bu dosyada yalnız açık değerler durur. Koyu değerler
   assets/panel/koyu.css'te (yalnız :root token'ları); kabuk onu media
   niteliğiyle bağlar (Sistem · Açık · Koyu). Burada sabit renk yazılmaz —
   her renk bir --po- token'ından gelir (istisna: şema çizimleri).

   Bölümler
     0. Yazı tipi (yerel IBM Plex, "PicaOS Sans/Mono" adıyla)
     1. Token'lar
     2. Temel
     3. Kabuk — sol menü, marka, firma kartı, kullanıcı, üst yol şeridi
     4. PicaOS bileşenleri (po-*) — ortak liste/düzenleme ekranı (+ genişliğe göre)
     5. Eski ekranların bileşenleri — yeni token'larla yeniden boyandı
     6. Eski ekranlar — giriş ekranı, genişliğe göre
     7. Kabuk — genişliğe göre (çekmece <1024, mobil <768)
     8. Hareket azaltma (EN SONDA durur)
   ============================================================ */

/* ---------------------------------------------------------- 0. yazı tipi
   Dosyalar: assets/panel/fonts/ibm-plex-{sans,mono}-{400,500,600}.woff2 (+ OFL.txt).
   Dış istek yok. Dosya yoksa --po-yazi yığınındaki sistem yazısı kullanılır.
   Klasör bilerek assets/panel/: assets/fonts/ temaların kendi yazı tiplerine
   ayrılmış olabilir; çekirdek dağıtımı (rsync --delete) onu silmesin. */
@font-face { font-family: "PicaOS Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../panel/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "PicaOS Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../panel/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "PicaOS Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../panel/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "PicaOS Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../panel/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "PicaOS Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../panel/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ---------------------------------------------------------- 1. token'lar */
:root {
  /* Açık tema. Koyu mod aynı token'ları assets/panel/koyu.css'te ezer. */
  color-scheme: light;

  /* yüzeyler ve çizgiler */
  --po-zemin: #F4F3EF;
  --po-yuzey: #FFFFFF;
  --po-yuzey-2: #FBFAF7;
  --po-hover: #EFEDE7;
  --po-etkin: #E6E3DA;
  --po-ic-zemin: #F1EFEA;
  --po-avatar: #EAE7DF;
  --po-avatar-koyu: #DCD8CD;
  --po-satir-hover: #FAF9F6;
  --po-secili: #F1F4FC;
  --po-bilgi-zemin: #EEF1FA;
  --po-cizgi: #E3E1DA;
  --po-cizgi-kontrol: #D6D3CA;
  --po-cizgi-ic: #EEECE6;
  --po-cizgi-satir: #F1EFEA;
  --po-cizgi-kesikli: #CFCBC0;

  /* metin ve anlam */
  --po-murekkep: #17191C;
  --po-birincil-hover: #33363B;
  --po-metin-koyu: #44474D;
  --po-metin-2: #5E6168;
  --po-metin-3: #6B6E75;
  --po-ikon-soluk: #8A8D93;
  --po-baglanti: #2449B8;
  --po-baglanti-hover: #1A3690;
  --po-yayinda: #1F7A4D;
  --po-yayinda-zemin: #E6F2EB;
  --po-taslak: #8A5200;
  --po-taslak-zemin: #FBF0DC;
  --po-taslak-koyu: #6B4000;
  --po-tehlike: #9B2C22;
  --po-tehlike-koyu: #7A2E26;
  --po-tehlike-zemin: #FBEDEB;
  --po-cop: #6B6E75;
  --po-kirli-nokta: #E6A23C;
  --po-basari-ikon: #7FD1A6;
  --po-sabit: #C98A1B;
  --po-soluk-acik: #CFCBC0;
  --po-anahtar-kapali: #8A8D93;

  /* dolgu rolleri (koyu mod için ayrıldı; açık değerler eskisiyle birebir aynı).
     Açıkta mürekkep hem metin hem koyu dolgu; koyuda metin açılır, dolgu açılamaz.
     Bu yüzden her dolgu kendi token'ını taşır. Koyu değerler: assets/panel/koyu.css */
  --po-birincil: #17191C;
  --po-birincil-basili: #0B0C0E;
  --po-dolgu-metin: #FFFFFF;
  --po-baglanti-dolgu: #2449B8;
  --po-cubuk: #17191C;
  --po-cubuk-metin: #FFFFFF;
  --po-cubuk-cerceve: transparent;
  --po-cubuk-dugme-cizgi: #44474D;
  --po-cubuk-hover: rgba(255,255,255,.08);
  --po-ters-zemin: #FFFFFF;
  --po-ters-metin: #17191C;
  --po-ters-hover: #F4F3EF;
  --po-kontrol: #FFFFFF;
  --po-kontrol-hover: #F4F3EF;
  --po-topuz: #FFFFFF;
  --po-topuz-hale: rgba(23,25,28,.06);
  --po-anahtar-acik: #1F7A4D;
  --po-taslak-dolgu: #6B4000;
  --po-taslak-dolgu-hover: #553300;
  --po-taslak-dolgu-metin: #FFFFFF;
  --po-tehlike-dolgu: #9B2C22;
  --po-tehlike-koyu-hover: #8C352C;
  --po-bolumlu-hover: rgba(255,255,255,.5);
  --po-bolumlu-secili: #FFFFFF;
  --po-gorsel-perde: rgba(23,25,28,.72);
  --po-numune-cerceve: rgba(0,0,0,.08);

  /* odak, gölge, hareket */
  --po-odak: 2px solid #2449B8;
  --po-odak-bosluk: 2px;
  --po-odak-bosluk-girdi: -1px;
  --po-odak-koyu: 2px solid #FFFFFF;
  --po-golge-kutucuk: 0 1px 0 rgba(23,25,28,.04), 0 4px 14px rgba(23,25,28,.06);
  --po-golge-bildirim: 0 8px 24px rgba(23,25,28,.18);
  --po-golge-cubuk: 0 10px 30px rgba(23,25,28,.22);
  --po-golge-cekmece: 12px 0 40px rgba(23,25,28,.18);
  --po-perde: rgba(23,25,28,.40);
  --po-sure-kisa: 150ms;
  --po-sure-orta: 180ms;
  --po-sure-uzun: 240ms;
  --po-egri: cubic-bezier(.2,.6,.3,1);

  /* yazı */
  /* Aile adı bilerek "PicaOS …": dosyalar IBM Plex'tir ama bilgisayarda yarım
     kurulu bir "IBM Plex Sans" (ör. yalnız ince eğik yüz) varsa ve woff2
     yüklenemezse tarayıcı ona düşer, panel eğik ve soluk görünür. Ayrı adla
     yüklenince sistemdeki kurulum hiç devreye girmez; dosya yoksa sistem yazısı. */
  --po-yazi: "PicaOS Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --po-yazi-mono: "PicaOS Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --po-y-11: 11px/14px;
  --po-y-12: 12px/16px;
  --po-y-13: 13px/18px;
  --po-y-14: 14px/20px;
  --po-y-14-uzun: 14px/22px;
  --po-y-15: 15px/20px;
  --po-y-24: 24px/30px;
  --po-y-26: 26px/32px;

  /* boşluk */
  --po-b-2: 2px;  --po-b-4: 4px;  --po-b-6: 6px;  --po-b-8: 8px;
  --po-b-10: 10px; --po-b-12: 12px; --po-b-14: 14px; --po-b-16: 16px;
  --po-b-20: 20px; --po-b-24: 24px; --po-b-28: 28px; --po-b-32: 32px;
  --po-b-40: 40px;

  /* köşe */
  --po-r-4: 4px; --po-r-6: 6px; --po-r-7: 7px; --po-r-8: 8px; --po-r-10: 10px;
  --po-r-tam: 999px;

  /* kontrol yükseklikleri */
  --po-h-30: 30px; --po-h-34: 34px; --po-h-38: 38px; --po-h-40: 40px;
  --po-h-44: 44px; --po-h-52: 52px; --po-h-56: 56px; --po-h-60: 60px;

  /* düzen */
  --po-menu-genislik: 244px;
  --po-yan-kolon: 300px;
}

/* ============================================================
   2. TEMEL
   ============================================================ */
* { box-sizing: border-box; }
/* html'e zemin verilmez: body zemini (--po-zemin) tuvale yayılır, esnetilerek
   kaydırmada kenar zaten sayfa rengindedir — koyu modda da. html'e zemin vermek
   açık temada ikon kenar yumuşatmasını değiştiriyordu (ekran görüntüsüyle ölçüldü). */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--po-zemin);
  color: var(--po-murekkep);
  font: 400 var(--po-y-14) var(--po-yazi);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
b, strong { font-weight: 600; }

:focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }

.po-ikon { flex-shrink: 0; display: block; }
.po-gizli {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "İçeriğe geç" — klavyeyle ilk odakta görünür, menüyü atlatır */
.po-atla {
  position: absolute; left: var(--po-b-12); top: -80px; z-index: 100;
  padding: var(--po-b-10) var(--po-b-16);
  border-radius: var(--po-r-8);
  background: var(--po-cubuk); color: var(--po-cubuk-metin);
  font: 500 var(--po-y-14) var(--po-yazi);
}
.po-atla:focus { top: var(--po-b-12); outline: var(--po-odak-koyu); outline-offset: var(--po-odak-bosluk); }

/* ============================================================
   3. KABUK — sol menü, marka, firma kartı, kullanıcı, üst şerit
   ============================================================ */
.admin-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--po-menu-genislik);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--po-b-12);
  padding: var(--po-b-14) var(--po-b-12);
  background: var(--po-yuzey-2);
  border-right: 1px solid var(--po-cizgi);
  color: var(--po-murekkep);
  overflow-x: hidden;
  transition: width var(--po-sure-orta) var(--po-egri), padding var(--po-sure-orta) var(--po-egri);
}

.sidebar-brand { display: flex; flex-direction: column; gap: var(--po-b-10); }

/* PicaOS marka satırı (app/views/admin/_marka.php) */
.po-marka { display: flex; align-items: center; gap: var(--po-b-8); padding: 2px var(--po-b-8); min-width: 0; }
.po-marka__isaret { width: 26px; height: 26px; border-radius: var(--po-r-7); flex-shrink: 0; display: block; box-shadow: 0 0 0 1px var(--po-marka-cerceve, transparent); }
.po-marka__ad { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 20px; letter-spacing: -.02em; white-space: nowrap; }
.po-marka__ad b { font-weight: 600; }
.po-marka__ad span { font-weight: 400; color: var(--po-metin-2); }
.po-rozet--surum {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font: 400 var(--po-y-11) var(--po-yazi-mono);
  padding: 1px 6px; border: 1px solid var(--po-cizgi); border-radius: var(--po-r-4);
  color: var(--po-metin-3);
}

/* Firma kartı — o an yönetilen site (ayarlardan okunur) */
.po-firma-kart {
  display: flex; align-items: center; gap: var(--po-b-10);
  min-width: 0; padding: var(--po-b-8);
  border: 1px solid var(--po-cizgi); border-radius: var(--po-r-10);
  background: var(--po-yuzey); color: var(--po-murekkep);
  transition: border-color var(--po-sure-kisa) var(--po-egri);
}
a.po-firma-kart:hover { border-color: var(--po-cizgi-kesikli); }
a.po-firma-kart:hover .po-firma-kart__alan { color: var(--po-baglanti); }
.po-firma-kart__logo {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--po-r-7); background: var(--po-hover);
  font: 600 var(--po-y-12) var(--po-yazi); color: var(--po-murekkep);
}
/* Logo/favicon koyu modda açık kutuya oturur (koyu logo kaybolmasın); açıkta bugünkü zemin. */
.po-firma-kart__logo:has(img) { background: var(--po-logo-zemin, var(--po-hover)); }
.po-firma-kart__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.po-firma-kart__metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.po-firma-kart__ad,
.po-firma-kart__alan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-firma-kart__ad { font: 600 14px/18px var(--po-yazi); }
.po-firma-kart__alan { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-3); }
.po-firma-kart > .po-ikon { color: var(--po-metin-3); }
/* Firma adı girilmemişse: nötr bağlantı + "Siteyi aç" */
.po-firma-kart--bos { flex-direction: column; align-items: stretch; gap: var(--po-b-4); padding: var(--po-b-8) var(--po-b-10); }
.po-firma-kart__bos { font: 500 var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-firma-kart__bos:hover { color: var(--po-murekkep); text-decoration: underline; }
.po-firma-kart__ac { display: inline-flex; align-items: center; gap: var(--po-b-6); font: 500 var(--po-y-12) var(--po-yazi); color: var(--po-baglanti); }
.po-firma-kart__ac:hover { color: var(--po-baglanti-hover); }

/* Menü maddeleri */
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column; gap: var(--po-b-12);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--po-kaydirma, var(--po-cizgi)); border-radius: 4px; }

.nav-group { display: flex; flex-direction: column; gap: var(--po-b-2); }
.nav-section {
  display: flex; align-items: center; justify-content: space-between; gap: var(--po-b-8);
  padding: var(--po-b-6) var(--po-b-10);
  font: 600 var(--po-y-11) var(--po-yazi);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--po-metin-3);
  white-space: nowrap;
}
.nav-section .po-rozet--yonetici { text-transform: none; letter-spacing: .02em; }

.sidebar-nav a {
  position: relative;
  display: flex; align-items: center; gap: var(--po-b-10);
  height: var(--po-h-30); padding: 0 var(--po-b-10);
  border-radius: var(--po-r-7);
  font: 400 var(--po-y-14) var(--po-yazi);
  color: var(--po-metin-koyu);
  white-space: nowrap;
  transition: background-color var(--po-sure-kisa) var(--po-egri), color var(--po-sure-kisa) var(--po-egri);
}
/* Başlıksız ilk grup (Genel Bakış) üst düzey maddedir: 34px */
.nav-group:first-child:not(:has(.nav-section)) a { height: var(--po-h-34); }
.sidebar-nav a > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav a:hover { background: var(--po-hover); color: var(--po-murekkep); }
.sidebar-nav a.is-active { background: var(--po-etkin); color: var(--po-murekkep); font-weight: 600; }

/* Okunmamış sayacı */
.sidebar-nav .badge {
  flex-shrink: 0;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--po-r-tam);
  background: var(--po-baglanti-dolgu); color: var(--po-dolgu-metin);
  font: 600 var(--po-y-12) var(--po-yazi);
  font-variant-numeric: tabular-nums;
}

/* Menü altı: kullanıcı, Hesabım, Çıkış, daraltma */
.sidebar-foot {
  display: flex; flex-direction: column; gap: var(--po-b-2);
  padding-top: var(--po-b-12);
  border-top: 1px solid var(--po-cizgi);
}
.po-kullanici { display: flex; align-items: center; gap: var(--po-b-10); padding: 0 var(--po-b-8) var(--po-b-8); min-width: 0; }
.po-kullanici__avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--po-r-tam); background: var(--po-avatar-koyu);
  font: 600 var(--po-y-12) var(--po-yazi); color: var(--po-murekkep);
}
.po-kullanici__metin { display: flex; flex-direction: column; min-width: 0; }
.po-kullanici__ad { font: 500 var(--po-y-13) var(--po-yazi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-kullanici__rol { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-3); }

.sidebar-foot a,
.sidebar-foot .logout,
.sidebar-collapse {
  display: flex; align-items: center; gap: var(--po-b-10);
  width: 100%; height: var(--po-h-30); padding: 0 var(--po-b-10);
  border: 0; border-radius: var(--po-r-7);
  background: transparent; color: var(--po-metin-koyu);
  font: 400 var(--po-y-13) var(--po-yazi);
  text-align: left; white-space: nowrap; cursor: pointer;
  transition: background-color var(--po-sure-kisa) var(--po-egri), color var(--po-sure-kisa) var(--po-egri);
}
.sidebar-foot a:hover,
.sidebar-foot .logout:hover,
.sidebar-collapse:hover { background: var(--po-hover); color: var(--po-murekkep); }
/* Çıkış bir form düğmesi (POST + CSRF); kabı görünmez, düğme bağlantı gibi durur. */
.po-cikis { margin: 0; padding: 0; }
.sidebar-foot .logout:focus-visible { outline: var(--po-odak); outline-offset: 0; }
.sidebar-foot a.is-active { background: var(--po-etkin); color: var(--po-murekkep); font-weight: 600; }
.sidebar-collapse .po-ikon { transition: transform var(--po-sure-orta) var(--po-egri); }

/* Görünüm seçici (Sistem · Açık · Koyu) — kullanıcı kartının altı, Hesabım'ın üstü.
   Kişisel tercih; renk geçiş animasyonu yok. Dar menüde gizli (ayar Hesabım'da). */
.po-tema-secici {
  display: flex; align-items: center; justify-content: space-between; gap: var(--po-b-10);
  min-height: var(--po-h-30); padding: 0 var(--po-b-10); margin: 0 0 var(--po-b-2);
}
.po-tema-secici__ad { font: 400 var(--po-y-13) var(--po-yazi); color: var(--po-metin-koyu); }
.po-tema-secici__parca {
  width: 26px; height: 24px; padding: 0; border: 0; border-radius: var(--po-r-6);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--po-metin-3); cursor: pointer;
}
.po-tema-secici__parca:hover { background: var(--po-bolumlu-hover); }
.po-tema-secici__parca[aria-pressed="true"] { background: var(--po-bolumlu-secili); color: var(--po-murekkep); }
.po-tema-secici__parca:focus-visible { outline: var(--po-odak); outline-offset: 0; }
.po-gorunum-karti [hidden] { display: none; }

/* Dar menüde beliren ipucu balonu (gövdeye bağlı tek öğe — admin.js) */
.nav-tooltip {
  position: fixed; z-index: 70; left: 0; top: 0;
  padding: var(--po-b-6) var(--po-b-10);
  border-radius: var(--po-r-6);
  background: var(--po-cubuk); color: var(--po-cubuk-metin);
  font: 500 var(--po-y-12) var(--po-yazi);
  white-space: nowrap; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--po-cubuk-cerceve), var(--po-golge-bildirim);
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.nav-tooltip.is-open { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Dar menü — yalnızca masaüstünde (≥1024). <html class="menu-dar"> sunucuda basılır. */
@media (min-width: 1024px) {
  .menu-dar .sidebar { width: 60px; padding: var(--po-b-14) var(--po-b-10); }

  .menu-dar .po-marka__ad,
  .menu-dar .po-marka .po-rozet--surum,
  .menu-dar .po-firma-kart__metin,
  .menu-dar .po-firma-kart > .po-ikon,
  .menu-dar .po-firma-kart__bos,
  .menu-dar .po-firma-kart__ac span,
  .menu-dar .nav-section,
  .menu-dar .sidebar-nav a > span,
  .menu-dar .po-kullanici__metin,
  .menu-dar .sidebar-foot a > span,
  .menu-dar .sidebar-foot .logout > span,
  .menu-dar .sidebar-collapse span,
  .menu-dar .po-tema-secici { display: none; }

  .menu-dar .po-marka { justify-content: center; padding: 2px 0; }
  .menu-dar .po-firma-kart { justify-content: center; padding: 3px; }
  .menu-dar .po-firma-kart--bos { align-items: center; }
  .menu-dar .nav-group + .nav-group { padding-top: var(--po-b-10); border-top: 1px solid var(--po-cizgi); }
  .menu-dar .sidebar-nav a,
  .menu-dar .sidebar-foot a,
  .menu-dar .sidebar-foot .logout,
  .menu-dar .sidebar-collapse { width: 40px; height: var(--po-h-34); padding: 0; margin: 0 auto; justify-content: center; }
  .menu-dar .po-kullanici { justify-content: center; padding: 0 0 var(--po-b-8); }
  .menu-dar .sidebar-collapse .po-ikon { transform: rotate(180deg); }

  /* Rozet, ikonun sağ üstünde noktaya döner */
  .menu-dar .sidebar-nav .badge {
    position: absolute; top: 0; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border: 2px solid var(--po-yuzey-2);
    font-size: 10px; line-height: 12px;
  }
}

/* Ana alan: üst yol şeridi + gövde */
.admin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.po-ust {
  height: var(--po-h-56); flex-shrink: 0;
  display: flex; align-items: center; gap: var(--po-b-8);
  padding: 0 var(--po-b-32);
  background: var(--po-yuzey-2);
  border-bottom: 1px solid var(--po-cizgi);
}
.po-yol {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--po-b-8);
  font: var(--po-y-14) var(--po-yazi); color: var(--po-metin-2);
  white-space: nowrap; overflow: hidden;
}
.po-yol a { color: var(--po-metin-2); display: inline-flex; align-items: center; gap: var(--po-b-4); }
.po-yol a:hover { color: var(--po-murekkep); }
.po-yol__ayrac { display: flex; color: var(--po-metin-3); flex-shrink: 0; }
.po-yol__parca { flex-shrink: 0; }
.po-yol__son { color: var(--po-murekkep); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.po-yol .po-yol__geri { display: none; }

/* Menü düğmesi: yalnızca çekmece modunda (<1024) görünür */
.sidebar-toggle {
  display: none;
  align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--po-h-44); height: var(--po-h-44); margin-left: calc(-1 * var(--po-b-10));
  padding: 0; border: 0; border-radius: var(--po-r-8);
  background: transparent; color: var(--po-murekkep); cursor: pointer;
}
.sidebar-toggle:hover { background: var(--po-hover); }

.po-perde { position: fixed; inset: 0; z-index: 55; background: var(--po-perde); }
.po-perde[hidden] { display: none; }

.po-govde { flex: 1 1 auto; min-width: 0; padding: var(--po-b-28) var(--po-b-32) 64px; }
.po-govde:focus { outline: none; }

/* Kabuğun sayfa başlığı (eski ekranlar; ortak içerik ekranları kendisi basar) */
.admin-head { margin-bottom: var(--po-b-24); }
.admin-head .po-sayfa-basi__aciklama { max-width: 720px; }
/* Kabuk seviyesindeki uyarılar */
.po-govde > .po-uyari { margin-bottom: var(--po-b-16); }

/* ============================================================
   4. PicaOS BİLEŞENLERİ (po-*)
   İ2-İ3 iskeletinden geldi. Kök (.po-sayfa) kuralları ekranı kapsar;
   bileşen kuralları İ4'ten beri her ekranda geçerlidir.
   ============================================================ */
/* ---------------------------------------------------------- 2. temel */
.po-sayfa {
  font-family: var(--po-yazi);
  font: 400 var(--po-y-14) var(--po-yazi);
  color: var(--po-murekkep);
  font-synthesis: none;
  display: flex;
  flex-direction: column;
  gap: var(--po-b-16);
}
.po-sayfa *, .po-sayfa *::before, .po-sayfa *::after { box-sizing: border-box; }
.po-sayfa :where(button, input, select, textarea) { font: inherit; color: inherit; }
.po-sayfa :where(p, h2, ol, ul, figure, fieldset) { margin: 0; }
.po-sayfa :where(fieldset) { padding: 0; border: 0; min-width: 0; }
.po-sayfa :where(ol, ul) { padding: 0; list-style: none; }
.po-sayfa :where(a) { color: var(--po-baglanti); }
.po-sayfa :where(a:hover) { color: var(--po-baglanti-hover); }
.po-sayfa [hidden] { display: none !important; }
.po-sayfa :focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }


/* ---------------------------------------------------------- 3. yol, sayfa başlığı */
/* Yol şeridi kabukta: bkz. 3. KABUK (.po-ust, .po-yol). */

.po-sayfa-basi { display: flex; align-items: flex-end; gap: var(--po-b-12); }
.po-sayfa-basi__metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--po-b-4); }
.po-sayfa-basi__baslik { font: 600 var(--po-y-26) var(--po-yazi); letter-spacing: -.01em; margin: 0; }
.po-sayfa-basi__aciklama { font: var(--po-y-14) var(--po-yazi); color: var(--po-metin-2); }
.po-sayfa-basi__eylemler { display: flex; align-items: center; gap: var(--po-b-12); flex-shrink: 0; }
.po-sayfa-basi--duzenle { align-items: center; padding-bottom: var(--po-b-14); }
.po-sayfa-basi--duzenle .po-sayfa-basi__metin { flex-direction: row; align-items: center; gap: var(--po-b-12); }

/* ---------------------------------------------------------- 4. sekmeler */
.po-sekmeler {
  display: flex; gap: var(--po-b-24);
  border-bottom: 1px solid var(--po-cizgi);
  overflow-x: auto; scrollbar-width: none;
}
.po-sekmeler::-webkit-scrollbar { display: none; }
.po-sekme {
  position: relative;
  height: var(--po-h-40); padding: 0; border: 0; background: transparent;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--po-b-6);
  font: 400 var(--po-y-14) var(--po-yazi); color: var(--po-metin-2);
  cursor: pointer; white-space: nowrap; text-decoration: none; flex-shrink: 0;
}
/* Kalınlık kayması önlenir: etkin ağırlıkla genişlik baştan ayrılır */
.po-sekme::after {
  content: attr(data-ad); font-weight: 600; height: 0; visibility: hidden; overflow: hidden;
  position: absolute; pointer-events: none; user-select: none;
}
.po-sekme:hover { color: var(--po-murekkep); }
.po-sekme:focus-visible { outline-offset: -2px; }
.po-sekme[aria-selected="true"],
.po-sekme[aria-current="page"] {
  color: var(--po-murekkep); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--po-murekkep);
}
.po-sekme__ek { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-3); font-weight: 400; }
.po-sekme.is-hatali::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--po-r-tam);
  background: var(--po-tehlike); order: 2;
}

.po-arac-satiri {
  display: flex; align-items: center; gap: var(--po-b-12);
  border-bottom: 1px solid var(--po-cizgi);
}
.po-durum-sekmeleri { display: flex; gap: var(--po-b-24); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.po-durum-sekmeleri .po-sekme { color: var(--po-metin-2); }
.po-durum-sekmeleri .po-sekme[aria-current="page"] { color: var(--po-murekkep); }
.po-sayi {
  font: 400 var(--po-y-12) var(--po-yazi-mono);
  padding: 1px 7px; border-radius: var(--po-r-tam);
  background: var(--po-hover); color: inherit;
  font-variant-numeric: tabular-nums;
}
.po-sekme[aria-current="page"] .po-sayi { background: var(--po-etkin); }

.po-arama-formu { display: flex; align-items: center; gap: var(--po-b-8); margin-bottom: var(--po-b-6); }
.po-arama {
  display: flex; align-items: center; gap: var(--po-b-8);
  width: 240px; height: var(--po-h-34); padding: 0 var(--po-b-10);
  border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-8);
  background: var(--po-kontrol); color: var(--po-metin-3);
}
.po-arama:focus-within { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk-girdi); border-color: var(--po-baglanti); }
.po-arama input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font: var(--po-y-14) var(--po-yazi); color: var(--po-murekkep); padding: 0; height: 100%;
}
.po-arama input::placeholder { color: var(--po-metin-3); }
.po-secim {
  height: var(--po-h-34); padding: 0 var(--po-b-10);
  border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-8);
  background: var(--po-kontrol); font: var(--po-y-14) var(--po-yazi); color: var(--po-murekkep);
}

/* ---------------------------------------------------------- 5. tablo */
.po-tablo-kutu {
  background: var(--po-yuzey);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  overflow: hidden;
}
.po-tablo { width: 100%; border-collapse: collapse; table-layout: fixed; }
.po-tablo__k-sec { width: 46px; }
.po-tablo__k-sira { width: 116px; }
.po-tablo__k-gorsel { width: 70px; }
.po-tablo__k-kategori { width: 14%; }
.po-tablo__k-durum { width: 22%; }
.po-tablo__k-son { width: 15%; }
.po-tablo__k-eylem { width: 132px; }
.po-tablo th,
.po-tablo td { padding: 0 7px; text-align: left; vertical-align: middle; }
.po-tablo th:first-child,
.po-tablo td:first-child { padding-left: var(--po-b-16); }
.po-tablo th:last-child,
.po-tablo td:last-child { padding-right: var(--po-b-16); }
.po-tablo thead th {
  height: var(--po-h-40);
  font: 400 var(--po-y-12) var(--po-yazi); color: var(--po-metin-2);
  background: var(--po-yuzey-2);
  border-bottom: 1px solid var(--po-cizgi-ic);
  white-space: nowrap;
}
.po-tablo tbody tr { height: var(--po-h-60); background: var(--po-yuzey); }
.po-tablo tbody td { border-bottom: 1px solid var(--po-cizgi-satir); }
.po-tablo tbody tr:hover { background: var(--po-satir-hover); }
.po-tablo tbody tr.is-secili { background: var(--po-secili); }
.po-tablo tbody tr.is-suruklenen {
  background: var(--po-secili);
  box-shadow: inset 3px 0 0 var(--po-baglanti);
}
.po-sayfa [data-siralanabilir].is-kilitli { opacity: .6; pointer-events: none; }
.po-tablo input[type="checkbox"],
.po-tumunu-sec input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; accent-color: var(--po-birincil); cursor: pointer; display: block;
}
.po-tablo input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
.po-tablo__gorsel {
  width: 56px; height: 40px; border-radius: var(--po-r-6);
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  background: var(--po-hover);
}
.po-tablo__gorsel--bos { color: var(--po-metin-3); }
.po-tablo__baslik-hucre { min-width: 0; }
.po-tablo__baslik {
  display: block; font: 600 var(--po-y-14) var(--po-yazi); color: var(--po-murekkep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.po-tablo__baslik:hover { color: var(--po-baglanti); }
.po-tablo__ozet {
  display: block; margin-top: var(--po-b-2);
  font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-tablo__kat-mobil { display: none; }
.po-tablo__ikincil {
  font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.po-tablo__kategori.po-tablo__ikincil { color: var(--po-metin-koyu); }
.po-tablo__durum { display: flex; align-items: center; gap: var(--po-b-10); min-width: 0; }
.po-tablo__durum form { display: contents; }
.po-tablo__eylemler { text-align: right; white-space: nowrap; font-size: 0; }
.po-tablo__eylemler > *,
.po-tablo__eylemler form { display: inline-flex; align-items: center; vertical-align: middle; margin-left: var(--po-b-4); }

.po-tablo-alt {
  min-height: var(--po-h-44); padding: 0 var(--po-b-16);
  display: flex; align-items: center; gap: var(--po-b-16); justify-content: space-between;
  background: var(--po-yuzey-2);
  font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2);
}
.po-sayfalama { display: flex; align-items: center; gap: var(--po-b-6); }
.po-tumunu-sec { display: none; }

/* ---------------------------------------------------------- 6. anahtar, durum metni */
.po-anahtar-formu { display: contents; }
.po-anahtar {
  position: relative; flex-shrink: 0;
  width: 36px; height: 22px; padding: 0; border: 0;
  border-radius: var(--po-r-tam);
  background: var(--po-anahtar-kapali);
  cursor: pointer;
  transition: background-color var(--po-sure-kisa) var(--po-egri);
}
.po-anahtar[aria-checked="true"] { background: var(--po-anahtar-acik); }
.po-anahtar__topuz {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: var(--po-r-tam);
  background: var(--po-topuz);
  transition: transform var(--po-sure-kisa) var(--po-egri), box-shadow var(--po-sure-kisa) var(--po-egri);
}
.po-anahtar[aria-checked="true"] .po-anahtar__topuz { transform: translateX(14px); }
.po-anahtar:hover .po-anahtar__topuz { box-shadow: 0 0 0 4px var(--po-topuz-hale); }
.po-anahtar:disabled,
.po-anahtar.is-bekliyor { opacity: .45; cursor: not-allowed; }

.po-durum-metni { font: 500 var(--po-y-13) var(--po-yazi); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-durum-metni--yayinda { color: var(--po-yayinda); }
.po-durum-metni--taslak { color: var(--po-taslak); }
.po-durum-metni--cop { color: var(--po-cop); white-space: normal; }

/* Form içindeki anahtar satırı (onay kutusu anahtar görünümünde; JS gerekmez) */
.po-anahtar-satiri {
  display: flex; align-items: center; gap: var(--po-b-14);
  padding-top: var(--po-b-16); border-top: 1px solid var(--po-cizgi-satir);
}
.po-anahtar-satiri__metin { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--po-b-2); min-width: 0; }
.po-anahtar-girdi {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  position: relative; width: 40px; height: 24px; border-radius: var(--po-r-tam);
  background: var(--po-anahtar-kapali); cursor: pointer;
  transition: background-color var(--po-sure-kisa) var(--po-egri);
}
.po-anahtar-girdi::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--po-r-tam); background: var(--po-topuz);
  transition: transform var(--po-sure-kisa) var(--po-egri);
}
.po-anahtar-girdi:checked { background: var(--po-anahtar-acik); }
.po-anahtar-girdi:checked::before { transform: translateX(16px); }
.po-anahtar-girdi:hover::before { box-shadow: 0 0 0 4px var(--po-topuz-hale); }
.po-anahtar-girdi:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------- 7. toplu çubuk, sıralama bandı */
.po-toplu {
  position: sticky; top: 12px; z-index: 5;
  display: flex; align-items: center; gap: var(--po-b-10);
  min-height: var(--po-h-44); padding: var(--po-b-6) var(--po-b-8) var(--po-b-6) var(--po-b-16);
  border-radius: var(--po-r-10);
  background: var(--po-cubuk); color: var(--po-cubuk-metin);
  font: var(--po-y-14) var(--po-yazi);
  box-shadow: inset 0 0 0 1px var(--po-cubuk-cerceve);
}
.po-toplu__sayi { flex: 1 1 auto; font-weight: 500; min-width: 0; }
.po-toplu :focus-visible { outline: var(--po-odak-koyu); }

.po-sirala-bandi {
  display: flex; align-items: center; gap: var(--po-b-12);
  min-height: var(--po-h-44); padding: var(--po-b-6) var(--po-b-8) var(--po-b-6) var(--po-b-16);
  border-radius: var(--po-r-10);
  background: var(--po-taslak-zemin); color: var(--po-taslak-koyu);
  font: var(--po-y-14) var(--po-yazi);
}
.po-sirala-bandi__metin { flex: 1 1 auto; min-width: 0; }
.po-sirala-bandi__bitti {
  display: inline-flex; align-items: center; height: var(--po-h-30); padding: 0 var(--po-b-14);
  border-radius: var(--po-r-6); background: var(--po-taslak-dolgu); color: var(--po-taslak-dolgu-metin);
  font: 500 var(--po-y-13) var(--po-yazi); text-decoration: none; flex-shrink: 0;
}
.po-sirala-bandi__bitti:hover { background: var(--po-taslak-dolgu-hover); color: var(--po-taslak-dolgu-metin); }
.po-sira-oklar,
.po-sira-oklar form { display: flex; align-items: center; gap: var(--po-b-2); }
.po-sira-tutamac { color: var(--po-ikon-soluk); cursor: grab; touch-action: none; }
.po-sayfa .is-surukleniyor .po-sira-tutamac,
html.siralama-aktif .po-sira-tutamac { cursor: grabbing; }

/* ---------------------------------------------------------- 8. rozetler */
.po-rozet { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.po-rozet--yayinda,
.po-rozet--taslak,
.po-rozet--cop { font: 500 var(--po-y-12) var(--po-yazi); padding: 3px 9px; border-radius: var(--po-r-6); }
.po-rozet--yayinda { background: var(--po-yayinda-zemin); color: var(--po-yayinda); }
.po-rozet--taslak { background: var(--po-taslak-zemin); color: var(--po-taslak); }
.po-rozet--cop { background: var(--po-hover); color: var(--po-metin-2); }
.po-rozet--etiket { font: 400 var(--po-y-12) var(--po-yazi); padding: 2px 8px; border-radius: var(--po-r-6); background: var(--po-ic-zemin); color: var(--po-metin-koyu); }
.po-rozet--yonetici { font: 500 var(--po-y-11) var(--po-yazi); padding: 1px 6px; border-radius: var(--po-r-4); background: var(--po-avatar); color: var(--po-metin-koyu); }
.po-rozet--kapak { font: 600 var(--po-y-11) var(--po-yazi); padding: 2px 7px; border-radius: var(--po-r-4); background: var(--po-cubuk); color: var(--po-cubuk-metin); }

/* ---------------------------------------------------------- 9. düğmeler */
.po-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--po-b-8);
  height: var(--po-h-38); padding: 0 var(--po-b-14);
  border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-8);
  background: var(--po-kontrol); color: var(--po-murekkep);
  font: 500 var(--po-y-14) var(--po-yazi);
  text-decoration: none; white-space: nowrap; cursor: pointer; flex-shrink: 0;
  transition: background-color var(--po-sure-kisa) var(--po-egri), border-color var(--po-sure-kisa) var(--po-egri);
}
.po-dugme:hover { background: var(--po-kontrol-hover); color: var(--po-murekkep); }
.po-dugme[aria-pressed="true"],
.po-dugme[data-acik] { background: var(--po-hover); }
.po-dugme:disabled,
.po-dugme[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.po-dugme:disabled:hover { background: var(--po-kontrol); }

.po-dugme--birincil { background: var(--po-birincil); border-color: transparent; color: var(--po-dolgu-metin); padding: 0 var(--po-b-16); }
.po-dugme--birincil:hover { background: var(--po-birincil-hover); color: var(--po-dolgu-metin); }
.po-dugme--birincil:active { background: var(--po-birincil-basili); }
.po-sayfa button.po-dugme--birincil:not(:has(svg)) { padding: 0 18px; }

.po-dugme--kucuk { height: var(--po-h-34); padding: 0 var(--po-b-12); border-color: var(--po-cizgi); border-radius: var(--po-r-7); font: 500 var(--po-y-13) var(--po-yazi); }
.po-dugme--satir { height: var(--po-h-30); padding: 0 var(--po-b-10); border-color: transparent; background: transparent; border-radius: var(--po-r-6); font: 500 var(--po-y-13) var(--po-yazi); }
.po-dugme--satir:hover { background: var(--po-hover); }
.po-dugme--cerceveli { border-color: var(--po-cizgi-kontrol); background: var(--po-kontrol); }
.po-dugme--satir-tehlike { color: var(--po-tehlike); }
.po-dugme--satir-tehlike:hover { background: var(--po-tehlike-zemin); color: var(--po-tehlike); }
.po-dugme--tehlike { color: var(--po-tehlike); }
.po-dugme--tehlike:hover { background: var(--po-tehlike-zemin); color: var(--po-tehlike); }
.po-dugme--kesikli { height: var(--po-h-34); padding: 0 var(--po-b-12); border: 1px dashed var(--po-cizgi-kesikli); background: transparent; color: var(--po-metin-koyu); font: 500 var(--po-y-13) var(--po-yazi); }
.po-dugme--kesikli:hover { border-color: var(--po-metin-3); background: var(--po-yuzey-2); }

.po-dugme--koyu,
.po-dugme--koyu-tehlike,
.po-dugme--koyu-sade { height: var(--po-h-30); padding: 0 var(--po-b-12); border-radius: var(--po-r-6); font: 400 var(--po-y-13) var(--po-yazi); color: var(--po-cubuk-metin); }
.po-dugme--koyu { border-color: var(--po-cubuk-dugme-cizgi); background: transparent; }
.po-dugme--koyu:hover { background: var(--po-cubuk-hover); color: var(--po-cubuk-metin); }
.po-dugme--koyu-tehlike { border-color: var(--po-tehlike-koyu); background: var(--po-tehlike-koyu); }
.po-dugme--koyu-tehlike:hover { background: var(--po-tehlike-koyu-hover); border-color: var(--po-tehlike-koyu-hover); color: var(--po-dolgu-metin); }
.po-dugme--koyu-sade { border-color: transparent; background: transparent; color: var(--po-soluk-acik); }
.po-dugme--koyu-sade:hover { background: var(--po-cubuk-hover); color: var(--po-cubuk-metin); }
.po-dugme--koyu-sade .po-ikon { display: none; }
.po-kaydet-cubugu .po-dugme--koyu { height: var(--po-h-34); padding: 0 var(--po-b-14); border-radius: var(--po-r-7); }

.po-dugme--ters { height: var(--po-h-34); padding: 0 var(--po-b-16); border: 0; border-radius: var(--po-r-7); background: var(--po-ters-zemin); color: var(--po-ters-metin); font: 600 var(--po-y-13) var(--po-yazi); }
.po-dugme--ters:hover { background: var(--po-ters-hover); }
.po-dugme.is-bekliyor { opacity: .45; cursor: not-allowed; }

.po-ikon-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--po-h-30); height: var(--po-h-30); padding: 0; border: 0;
  border-radius: var(--po-r-6); background: transparent; color: var(--po-metin-3);
  cursor: pointer; flex-shrink: 0;
}
.po-ikon-dugme:hover { background: var(--po-hover); color: var(--po-murekkep); }
.po-ikon-dugme:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
.po-ikon-dugme--34 { width: var(--po-h-34); height: var(--po-h-34); border-radius: var(--po-r-7); }

.po-baglanti-dugme {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--po-y-13) var(--po-yazi); color: var(--po-baglanti); text-decoration: none; text-align: left;
}
.po-baglanti-dugme:hover { color: var(--po-baglanti-hover); text-decoration: underline; }

/* ---------------------------------------------------------- 10. kaydet çubuğu, bildirim, uyarı, boş */
.po-kaydet-cubugu {
  position: sticky; bottom: 20px; z-index: 6;
  display: flex; align-items: center; gap: var(--po-b-12);
  height: var(--po-h-52); padding: 0 var(--po-b-10) 0 18px; margin-top: var(--po-b-20);
  border-radius: var(--po-r-10);
  background: var(--po-cubuk); color: var(--po-cubuk-metin);
  font: var(--po-y-14) var(--po-yazi);
  box-shadow: inset 0 0 0 1px var(--po-cubuk-cerceve), var(--po-golge-cubuk);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--po-sure-orta) var(--po-egri), transform var(--po-sure-orta) var(--po-egri);
}
.po-kaydet-cubugu.is-acik { opacity: 1; transform: none; }
.po-kaydet-cubugu__nokta { width: 8px; height: 8px; border-radius: var(--po-r-tam); background: var(--po-kirli-nokta); flex-shrink: 0; }
.po-kaydet-cubugu:not(.is-acik) .po-kaydet-cubugu__nokta { display: none; }
.po-kaydet-cubugu__metin { flex: 1 1 auto; min-width: 0; }
.po-kaydet-cubugu:not(.is-acik) .po-kaydet-cubugu__metin { color: var(--po-soluk-acik); }
.po-kaydet-cubugu :focus-visible { outline: var(--po-odak-koyu); }
.po-sayfa.is-bildirim-acik .po-kaydet-cubugu:not(.is-mobil) { visibility: hidden; }

.po-bildirim {
  position: fixed; left: 50%; bottom: 28px; z-index: 90;
  display: flex; align-items: center; gap: var(--po-b-10);
  min-height: var(--po-h-44); max-width: calc(100vw - 32px); padding: var(--po-b-10) var(--po-b-16);
  border-radius: var(--po-r-10);
  background: var(--po-cubuk); color: var(--po-cubuk-metin);
  font: var(--po-y-14) var(--po-yazi);
  box-shadow: inset 0 0 0 1px var(--po-cubuk-cerceve), var(--po-golge-bildirim);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity var(--po-sure-orta) var(--po-egri), transform var(--po-sure-orta) var(--po-egri), visibility 0s linear var(--po-sure-orta);
  pointer-events: none;
}
.po-bildirim::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  background: var(--po-basari-ikon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.po-bildirim.is-open {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity var(--po-sure-orta) var(--po-egri), transform var(--po-sure-orta) var(--po-egri), visibility 0s;
}
.po-bildirim.is-hata { background: var(--po-tehlike-dolgu); color: var(--po-dolgu-metin); }
.po-bildirim.is-hata::before {
  background: var(--po-dolgu-metin);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}
/* Sunucudan gelen başarı bildirimi JavaScript olmadan da 2,4 sn sonra kaybolur */
.po-bildirim.is-sunucu { animation: po-bildirim-kapan var(--po-sure-orta) var(--po-egri) 2400ms forwards; }
@keyframes po-bildirim-kapan {
  to { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); }
}

.po-uyari {
  display: flex; align-items: flex-start; gap: var(--po-b-10);
  min-height: var(--po-h-44); padding: var(--po-b-12) var(--po-b-16);
  border-radius: var(--po-r-8);
  font: var(--po-y-14) var(--po-yazi);
}
.po-uyari > .po-ikon { margin-top: 2px; }
.po-uyari > span { flex: 1 1 auto; min-width: 0; }
.po-uyari--hata { background: var(--po-tehlike-zemin); color: var(--po-tehlike); }
.po-uyari--taslak { background: var(--po-taslak-zemin); color: var(--po-taslak-koyu); }
.po-uyari--taslak .po-baglanti-dugme { color: var(--po-taslak-koyu); text-decoration: underline; font-size: 14px; margin-left: var(--po-b-6); }
.po-uyari--bilgi { background: var(--po-yuzey-2); border: 1px solid var(--po-cizgi); color: var(--po-metin-koyu); align-items: center; }
.po-uyari__eylem { flex-shrink: 0; }

.po-bos {
  padding: var(--po-b-40) var(--po-b-16);
  display: flex; flex-direction: column; align-items: center; gap: var(--po-b-12);
  text-align: center; font: var(--po-y-14) var(--po-yazi); color: var(--po-metin-2);
}

/* ---------------------------------------------------------- 11. form */
.po-kart {
  background: var(--po-yuzey); border: 1px solid var(--po-cizgi); border-radius: var(--po-r-10);
  padding: var(--po-b-20) var(--po-b-24);
  display: flex; flex-direction: column; gap: var(--po-b-20);
}
.po-kart__bas { display: flex; align-items: baseline; gap: var(--po-b-12); }
.po-kart__bas h2 { flex: 1 1 auto; font: 600 var(--po-y-15) var(--po-yazi); margin: 0; }
.po-kart__not { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }

.po-alan { display: flex; flex-direction: column; gap: var(--po-b-6); min-width: 0; }
.po-alan__ust { display: flex; align-items: baseline; gap: var(--po-b-8); }
.po-alan__etiket { flex: 1 1 auto; font: 600 var(--po-y-14) var(--po-yazi); color: var(--po-murekkep); padding: 0; }
.po-alan__zorunlu { font: 400 var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-sayac { font: 400 var(--po-y-12) var(--po-yazi-mono); color: var(--po-metin-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.po-sayac.is-asti { color: var(--po-tehlike); }
.po-alan__hata { display: flex; align-items: center; gap: var(--po-b-6); font: 500 var(--po-y-13) var(--po-yazi); color: var(--po-tehlike); }
.po-alan__yardim { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-alan__yer { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-alan__yer b { font-weight: 600; color: var(--po-metin-koyu); }

.po-girdi {
  width: 100%; height: var(--po-h-40); padding: 0 var(--po-b-12);
  border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-8);
  background: var(--po-kontrol); color: var(--po-murekkep);
  font: var(--po-y-14) var(--po-yazi);
}
.po-girdi:hover { border-color: var(--po-metin-3); }
.po-girdi:focus,
.po-girdi:focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk-girdi); border-color: var(--po-baglanti); }
.po-girdi[aria-invalid="true"] { border-color: var(--po-tehlike); }
.po-girdi[aria-invalid="true"]:focus { border-color: var(--po-baglanti); }
.po-girdi:disabled,
.po-girdi[readonly] { background: var(--po-zemin); color: var(--po-metin-2); cursor: not-allowed; }
.po-girdi::placeholder { color: var(--po-metin-3); }
.po-girdi--buyuk { height: var(--po-h-44); font: var(--po-y-15) var(--po-yazi); }
.po-girdi--cok { height: auto; padding: var(--po-b-10) var(--po-b-12); font: var(--po-y-14-uzun) var(--po-yazi); resize: vertical; }
.po-girdi--secim { height: var(--po-h-38); padding: 0 var(--po-b-10); }
.po-girdi--tekrar { height: var(--po-h-38); flex: 1 1 auto; }
.po-girdi--mono { font: var(--po-y-13) var(--po-yazi-mono); }

.po-onek {
  display: flex; align-items: stretch; height: var(--po-h-40);
  border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-8); overflow: hidden; background: var(--po-kontrol);
}
.po-onek:focus-within { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk-girdi); border-color: var(--po-baglanti); }
.po-onek__metin {
  display: flex; align-items: center; padding: 0 var(--po-b-10);
  background: var(--po-zemin); border-right: 1px solid var(--po-cizgi-kontrol);
  font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); white-space: nowrap;
  max-width: 50%; overflow: hidden; text-overflow: ellipsis;
}
.po-onek .po-girdi { border: 0; border-radius: 0; height: 100%; }
.po-onek .po-girdi:focus { outline: none; }

/* tekrarlı alan */
.po-tekrar { display: flex; flex-direction: column; gap: var(--po-b-8); }
.po-tekrar > legend { float: left; width: 100%; margin-bottom: var(--po-b-8); }
.po-tekrar__not { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-tekrar__satirlar { display: flex; flex-direction: column; gap: var(--po-b-8); clear: both; }
.po-tekrar__satir { display: flex; align-items: center; gap: var(--po-b-8); }
.po-tekrar__tutamac { color: var(--po-ikon-soluk); display: flex; }
.po-tekrar__alt { display: flex; align-items: center; gap: var(--po-b-10); }
.po-tekrar__sinir { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }

/* görsel ızgarası */
.po-gorseller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--po-b-12); }
.po-gorsel { position: relative; aspect-ratio: 16 / 10; border-radius: var(--po-r-8); overflow: hidden; background: var(--po-hover); }
.po-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-gorsel .po-rozet--kapak { position: absolute; top: 8px; left: 8px; }
.po-gorsel__kaldir {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--po-h-30); height: var(--po-h-30); border-radius: var(--po-r-6);
  background: color-mix(in srgb, var(--po-yuzey) 92%, transparent); color: var(--po-murekkep); cursor: pointer;
  opacity: 0; transition: opacity var(--po-sure-kisa) var(--po-egri);
}
.po-gorsel:hover .po-gorsel__kaldir,
.po-gorsel:focus-within .po-gorsel__kaldir,
.po-gorsel__kaldir:has(:checked) { opacity: 1; }
.po-gorsel__kaldir:has(:focus-visible) { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }
.po-gorsel__kaldir:has(:checked) { background: var(--po-tehlike-dolgu); color: var(--po-dolgu-metin); }
.po-gorsel__kaldirilacak {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--po-b-6) var(--po-b-8);
  background: color-mix(in srgb, var(--po-tehlike-dolgu) 92%, transparent); color: var(--po-dolgu-metin); font: 500 var(--po-y-12) var(--po-yazi);
  display: none;
}
.po-gorsel:has(.po-gorsel__kaldir :checked) img { opacity: .45; }
.po-gorsel:has(.po-gorsel__kaldir :checked) .po-gorsel__kaldirilacak { display: block; }
.po-gorsel-ekle {
  aspect-ratio: 16 / 10; border-radius: var(--po-r-8);
  border: 1px dashed var(--po-cizgi-kesikli); background: var(--po-yuzey-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--po-b-6);
  color: var(--po-metin-koyu); cursor: pointer; text-align: center; padding: var(--po-b-8);
  transition: border-color var(--po-sure-kisa) var(--po-egri);
}
.po-gorsel-ekle:hover { border-color: var(--po-metin-3); }
.po-gorsel-ekle:focus-within { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }
.po-gorsel-ekle.is-uzerinde { border: 1px solid var(--po-baglanti); background: var(--po-bilgi-zemin); }
.po-gorsel-ekle__baslik { font: 500 var(--po-y-13) var(--po-yazi); }
.po-gorsel-ekle__not { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-3); overflow-wrap: anywhere; }
.po-gorsel-ekle .file-chosen { display: none; } /* admin.js'in genel notu yerine kendi önizlememiz */

/* ---------------------------------------------------------- 12. düzenleme yerleşimi */
.po-sayfa--duzenle { gap: var(--po-b-12); }
.po-form { display: flex; flex-direction: column; }
.po-duzen { display: flex; align-items: flex-start; gap: var(--po-b-24); padding-top: var(--po-b-20); }
.po-duzen__ana { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--po-b-20); }
.po-duzen__yan {
  width: var(--po-yan-kolon); flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--po-b-14);
  position: sticky; top: 20px;
}
.po-sekme-paneli:focus { outline: none; }

.po-yan-kart {
  background: var(--po-yuzey); border: 1px solid var(--po-cizgi); border-radius: var(--po-r-10);
  padding: var(--po-b-16); display: flex; flex-direction: column; gap: var(--po-b-10); min-width: 0;
}
.po-yan-kart__baslik { font: 600 var(--po-y-13) var(--po-yazi); color: var(--po-murekkep); }
.po-yan-kart__not { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-yan-kart--alan .po-alan__etiket { font: 600 var(--po-y-13) var(--po-yazi); }
.po-yan-kart--alan .po-girdi { height: var(--po-h-38); }
.po-yan-kart--alan .po-sayac { display: none; }
.po-yan-kart--bilgi { background: none; padding: var(--po-b-14) var(--po-b-16); gap: var(--po-b-6); font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-yan-kart--bilgi .po-baglanti-dugme { align-self: flex-start; }
.po-yan-kart__kapak {
  height: 150px; border-radius: var(--po-r-8); overflow: hidden; background: var(--po-hover);
  display: flex; align-items: center; justify-content: center; color: var(--po-metin-3);
}
.po-yan-kart__kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Saydam görsel (logo, SVG) koyu modda açık kutuda durur (K.7); fotoğraf kutuyu
   zaten doldurur, etkilenmez. Açık temada yedek değer bugünkü zemindir. */
.po-gorsel:has(> img),
.po-yan-kart__kapak:has(> img),
img.po-tablo__gorsel { background: var(--po-logo-zemin, var(--po-hover)); }
.po-yan-kart__dugmeler { display: flex; gap: var(--po-b-8); }
.po-yan-kart__dugmeler > * { flex: 1 1 0; }

/* bölümlü seçim (Yayında / Taslak) — radyo düğmesiyle, JS gerekmez */
.po-bolumlu { display: flex; gap: 3px; padding: 3px; border-radius: var(--po-r-8); background: var(--po-hover); }
.po-bolumlu__secenek { flex: 1 1 0; position: relative; }
.po-bolumlu__secenek input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.po-bolumlu__secenek span {
  display: flex; align-items: center; justify-content: center; height: 32px;
  border-radius: var(--po-r-6); font: 400 var(--po-y-13) var(--po-yazi); color: var(--po-murekkep); cursor: pointer;
}
.po-bolumlu__secenek:hover span { background: var(--po-bolumlu-hover); }
.po-bolumlu__secenek input:checked + span { background: var(--po-bolumlu-secili); font-weight: 600; }
.po-bolumlu__secenek input:focus-visible + span { outline: var(--po-odak); outline-offset: 0; }
.po-yan-kart:has(input[value="yayinda"]:checked) .po-yan-kart__not--taslak,
.po-yan-kart:has(input[value="taslak"]:checked) .po-yan-kart__not--yayinda { display: none; }

/* Geçmiş */
.po-kart--liste { padding: 0; gap: 0; overflow: hidden; }
.po-gecmis .po-kart__bas { padding: 18px var(--po-b-24) var(--po-b-12); }
.po-gecmis__satir {
  display: flex; align-items: center; gap: var(--po-b-14);
  padding: var(--po-b-14) var(--po-b-24); border-top: 1px solid var(--po-cizgi-satir);
}
.po-gecmis__satir[aria-current="true"] { background: var(--po-taslak-zemin); }
.po-gecmis__avatar {
  width: 28px; height: 28px; border-radius: var(--po-r-tam); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--po-avatar); font: 600 var(--po-y-11) var(--po-yazi); color: var(--po-murekkep);
}
.po-gecmis__metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--po-b-2); font: var(--po-y-14) var(--po-yazi); }
.po-gecmis__metin b { font-weight: 600; }
.po-gecmis__zaman { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-gecmis .po-bos { border-top: 1px solid var(--po-cizgi-satir); }

/* ---------------------------------------------------------- 13. JavaScript'siz davranış */
/* Betik yokken sekme satırı gizlenir, paneller alt alta açık kalır. */
.po-sayfa:not(.po-js) [data-po-sekmeler] { display: none; }
.po-sayfa.po-js [data-po-js-gizle] { display: none !important; }
/* Betik yokken toplu çubuk her zaman görünür ("Seçilenlere uygula:"); betik
   onu seçim olana kadar gizler (hidden). */

/* ---------------------------------------------------------- 14. genişliğe göre */
@media (max-width: 1199px) {
  .po-tablo__k-son,
  .po-tablo .po-tablo__son { display: none; }
  .po-duzen { flex-direction: column; align-items: stretch; }
  .po-duzen__yan {
    width: auto; position: static;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--po-b-14);
  }
  .po-gorseller { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .po-tablo__k-kategori,
  .po-tablo .po-tablo__kategori { display: none; }
  .po-tablo__kat-mobil { display: inline-flex; margin-top: var(--po-b-4); }
}

@media (max-width: 767px) {
  .po-sayfa { gap: var(--po-b-12); }

  /* başlık satırı */
  .po-sayfa-basi { flex-direction: column; align-items: stretch; }
  .po-sayfa-basi__eylemler { width: 100%; }
  .po-sayfa--liste .po-sayfa-basi__eylemler .po-dugme--birincil { flex: 1 1 auto; height: var(--po-h-44); }
  .po-dugme--sirala { width: var(--po-h-44); height: var(--po-h-44); padding: 0; }
  .po-dugme--sirala .po-dugme__metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .po-sayfa-basi--duzenle { flex-direction: row; align-items: center; padding-bottom: 0; }
  .po-sayfa-basi--duzenle .po-sayfa-basi__eylemler { width: auto; }
  .po-sayfa-basi--duzenle .po-dugme--kaydet { display: none; }
  .po-dugme--sitede { width: var(--po-h-44); height: var(--po-h-44); padding: 0; }
  .po-dugme--sitede .po-dugme__metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* araç satırı */
  .po-arac-satiri { flex-direction: column; align-items: stretch; gap: var(--po-b-8); border-bottom: 0; }
  .po-durum-sekmeleri { border-bottom: 1px solid var(--po-cizgi); gap: var(--po-b-20); }
  .po-sekme { height: var(--po-h-44); }
  .po-arama-formu { margin-bottom: 0; }
  .po-arama { flex: 1 1 auto; width: auto; height: var(--po-h-44); }
  .po-secim { height: var(--po-h-44); max-width: 45%; }
  .po-arama input,
  .po-secim,
  .po-girdi,
  .po-girdi--mono { font-size: 16px; }

  /* tablo → kart */
  .po-tablo, .po-tablo tbody { display: block; }
  .po-tablo colgroup, .po-tablo thead { display: none; }
  .po-tumunu-sec {
    display: flex; align-items: center; gap: var(--po-b-12);
    min-height: var(--po-h-44); padding: 0 var(--po-b-14);
    border-bottom: 1px solid var(--po-cizgi-satir); background: var(--po-yuzey-2);
    font: var(--po-y-14) var(--po-yazi); cursor: pointer;
  }
  .po-tumunu-sec[hidden] { display: none !important; }
  .po-tablo tbody tr {
    display: grid; grid-template-columns: 44px 64px minmax(0, 1fr) auto;
    grid-template-areas: "sec gorsel baslik baslik" "sec gorsel durum eylem";
    column-gap: var(--po-b-8); row-gap: var(--po-b-6);
    height: auto; padding: var(--po-b-12) var(--po-b-12) var(--po-b-12) var(--po-b-4);
    border-bottom: 1px solid var(--po-cizgi-satir);
  }
  .po-tablo tbody td { display: block; padding: 0 !important; border: 0; min-width: 0; }
  .po-tablo td.po-tablo__sec { grid-area: sec; display: flex; align-items: center; justify-content: center; position: relative; }
  .po-tablo td.po-tablo__sec input { position: relative; }
  .po-tablo td.po-tablo__sec input::before { content: ""; position: absolute; inset: -14px; }
  .po-tablo td.po-tablo__gorsel-hucre { grid-area: gorsel; }
  .po-tablo .po-tablo__gorsel { width: 64px; height: 48px; }
  .po-tablo td.po-tablo__baslik-hucre { grid-area: baslik; }
  .po-tablo__baslik { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .po-tablo td.po-tablo__durum-hucre { grid-area: durum; align-self: center; }
  .po-tablo td.po-tablo__eylemler { grid-area: eylem; display: flex; }
  .po-tablo .po-tablo__duzenle { display: none; }
  .po-tablo .po-tablo__son,
  .po-tablo .po-tablo__kategori { display: none; }
  .po-tablo tbody tr:not(:has(.po-tablo__gorsel-hucre)) {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "sec baslik baslik" "sec durum eylem";
  }
  .po-ikon-dugme { width: var(--po-h-44); height: var(--po-h-44); }
  .po-anahtar { position: relative; }
  .po-anahtar::before { content: ""; position: absolute; inset: -11px -4px; }
  .po-dugme--satir { min-height: var(--po-h-44); }
  /* sıralama modunda oklar kartın sağ üstüne */
  .po-sayfa .is-sirala .po-tablo tbody tr {
    grid-template-columns: 44px 64px minmax(0, 1fr) auto;
    grid-template-areas: "sec gorsel baslik sira" "sec gorsel durum sira";
  }
  .po-sayfa .is-sirala .po-tablo tbody tr:not(:has(.po-tablo__gorsel-hucre)) {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "sec baslik sira" "sec durum sira";
  }
  .po-sayfa .is-sirala .po-tablo td.po-sira-sutun { grid-area: sira; display: flex; align-items: center; }
  .po-sayfa .is-sirala .po-tablo td.po-tablo__eylemler { display: none; }
  .po-sira-tutamac { display: none !important; }
  .po-tablo-alt { flex-wrap: wrap; padding: var(--po-b-10) var(--po-b-16); gap: var(--po-b-6) var(--po-b-16); }

  /* toplu çubuk: yüzen, altta */
  .po-toplu {
    position: fixed; left: 12px; right: 12px; top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
    flex-wrap: wrap;
  }
  .po-toplu .po-dugme { height: var(--po-h-44); }
  .po-toplu__sayi { flex-basis: 100%; padding-top: var(--po-b-4); }
  .po-toplu [data-po-secimi-kaldir] { margin-left: auto; }
  .po-dugme--koyu-sade { width: var(--po-h-44); padding: 0; }
  .po-dugme--koyu-sade .po-ikon { display: block; }
  .po-dugme--koyu-sade .po-dugme__metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* düzenleme */
  .po-duzen__yan { grid-template-columns: minmax(0, 1fr); }
  .po-kart { padding: var(--po-b-16); }
  .po-gorseller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-gorsel__kaldir { opacity: 1; width: var(--po-h-44); height: var(--po-h-44); }
  .po-gorsel-ekle__not { display: none; }
  .po-dugme--kucuk { min-height: var(--po-h-44); }
  .po-bolumlu__secenek span { height: 40px; }
  .po-gecmis__satir { flex-wrap: wrap; padding: var(--po-b-12) var(--po-b-16); }
  .po-gecmis .po-kart__bas { padding: var(--po-b-16) var(--po-b-16) var(--po-b-12); }
  .po-sayfa--duzenle .po-form { padding-bottom: calc(var(--po-h-60) + 16px); }

  /* kaydet çubuğu: altta sabit, her zaman görünür (başlıktaki Kaydet gizli) */
  .po-kaydet-cubugu,
  .po-kaydet-cubugu[hidden] {
    display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
    height: auto; min-height: var(--po-h-60);
    padding: var(--po-b-8) var(--po-b-12) calc(var(--po-b-8) + env(safe-area-inset-bottom)) var(--po-b-16);
    border-radius: 0; opacity: 1; transform: none; z-index: 40;
  }
  .po-kaydet-cubugu:not(.is-acik) [data-po-vazgec] { display: none; }
  .po-kaydet-cubugu .po-dugme { height: var(--po-h-44); }
  .po-sayfa.is-bildirim-acik .po-kaydet-cubugu { visibility: visible; }

  /* bildirim */
  .po-bildirim { left: 16px; right: 16px; transform: translateY(8px); max-width: none; }
  .po-bildirim.is-open { transform: none; }
  .po-sayfa--duzenle .po-bildirim { bottom: calc(var(--po-h-60) + 12px + env(safe-area-inset-bottom)); }
  @keyframes po-bildirim-kapan-mobil { to { opacity: 0; visibility: hidden; transform: translateY(8px); } }
  .po-bildirim.is-sunucu { animation-name: po-bildirim-kapan-mobil; }
}

/* ============================================================
   5. ESKİ EKRANLARIN BİLEŞENLERİ — yeni token'larla yeniden boyandı
   Ayarlar, menü, talepler, duyurular, projeler, ürünler, SEO, yedek,
   kullanıcılar bu sınıflarla çizilir. Ekranlar iskelete taşındıkça
   karşılıkları po- bileşenlerine döner (PANEL-TASARIM-DILI.md §6).
   ============================================================ */

/* --- Bildirim (eski ekranlarda satır içi; kabuk artık po-bildirim / po-uyari basar) --- */
.note {
  display: flex; align-items: center; gap: var(--po-b-10);
  min-height: var(--po-h-44);
  padding: var(--po-b-12) var(--po-b-16);
  margin-bottom: var(--po-b-16);
  border-radius: var(--po-r-8);
  font: var(--po-y-14) var(--po-yazi);
  background: var(--po-yuzey-2); border: 1px solid var(--po-cizgi); color: var(--po-metin-koyu);
}
.note-success { background: var(--po-yayinda-zemin); border-color: transparent; color: var(--po-yayinda); }
.note-error   { background: var(--po-tehlike-zemin); border-color: transparent; color: var(--po-tehlike); }

/* --- Kartlar (gölgesiz; çerçeve çizgisi) --- */
.card {
  background: var(--po-yuzey);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  padding: var(--po-b-20) var(--po-b-24);
  margin-bottom: var(--po-b-16);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--po-b-16);
  margin-bottom: var(--po-b-14);
}
.card-head h2 { font: 600 var(--po-y-15) var(--po-yazi); letter-spacing: 0; }
.card-head .count {
  display: inline-flex; align-items: center;
  margin-left: var(--po-b-6);
  padding: 1px 7px;
  border-radius: var(--po-r-tam);
  background: var(--po-hover); color: var(--po-metin-2);
  font: 400 var(--po-y-12) var(--po-yazi-mono);
  font-variant-numeric: tabular-nums;
}
.card-note { color: var(--po-metin-2); font: var(--po-y-14) var(--po-yazi); margin-bottom: var(--po-b-16); max-width: 720px; }

.panel-columns { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--po-b-16); align-items: start; }
.stack { display: grid; gap: var(--po-b-14); }

/* Bilgi kutusu → .po-uyari--bilgi görünümü */
.info-box {
  background: var(--po-yuzey-2);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  padding: var(--po-b-12) var(--po-b-16);
  color: var(--po-metin-koyu);
}
.info-box b { display: block; font: 600 var(--po-y-14) var(--po-yazi); margin-bottom: var(--po-b-4); color: var(--po-murekkep); }
.info-box p { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-koyu); }
.info-box code { background: var(--po-hover); padding: 1px 6px; border-radius: var(--po-r-4); font: var(--po-y-12) var(--po-yazi-mono); }

/* Boş durum → .po-bos görünümü */
.empty { color: var(--po-metin-2); font: var(--po-y-14) var(--po-yazi); padding: var(--po-b-16) 0; }
.empty-state { text-align: center; padding: var(--po-b-40) var(--po-b-16); }
.empty-state h2 { font: 600 var(--po-y-15) var(--po-yazi); margin-bottom: var(--po-b-6); }
.empty-state p { color: var(--po-metin-2); font: var(--po-y-14) var(--po-yazi); max-width: 460px; margin: 0 auto var(--po-b-16); }

/* --- Özet kutuları (Genel Bakış, SEO) — İ5'te durum şeridi ve kutucuklara döner --- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--po-b-14); margin-bottom: var(--po-b-20); }
.stat-card {
  display: block;
  background: var(--po-yuzey);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  padding: var(--po-b-16) 18px;
  transition: border-color var(--po-sure-kisa) var(--po-egri), box-shadow var(--po-sure-kisa) var(--po-egri);
}
a.stat-card:hover { border-color: var(--po-cizgi-kesikli); box-shadow: var(--po-golge-kutucuk); }
.stat-card small { display: block; font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-2); }
.stat-card strong {
  display: block; margin: var(--po-b-4) 0 var(--po-b-2);
  font: 500 26px/32px var(--po-yazi-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat-card span { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.stat-card.highlight strong { color: var(--po-baglanti); }

.quick-links { display: grid; gap: var(--po-b-8); }
.quick-links a {
  display: block;
  padding: var(--po-b-12) var(--po-b-14);
  background: var(--po-yuzey-2);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  transition: border-color var(--po-sure-kisa) var(--po-egri), background-color var(--po-sure-kisa) var(--po-egri);
}
.quick-links a:hover { border-color: var(--po-cizgi-kesikli); background: var(--po-yuzey); }
.quick-links b { display: block; font: 600 var(--po-y-14) var(--po-yazi); }
.quick-links span { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-2); }

.status-list { list-style: none; padding: 0; margin: 0; }
.status-list li {
  display: flex; justify-content: space-between; gap: var(--po-b-14);
  padding: var(--po-b-10) 0;
  border-bottom: 1px solid var(--po-cizgi-satir);
  font: var(--po-y-14) var(--po-yazi);
}
.status-list li:last-child { border-bottom: 0; }
.status-list span { color: var(--po-metin-2); }
.status-list b { font-weight: 600; text-align: right; word-break: break-word; }

/* --- Tablolar (talepler, kullanıcılar, SEO, eski listeler) — .po-tablo ölçüleriyle --- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  height: var(--po-h-40);
  padding: 0 var(--po-b-12);
  text-align: left;
  font: 400 var(--po-y-12) var(--po-yazi);
  color: var(--po-metin-2);
  border-bottom: 1px solid var(--po-cizgi-ic);
  white-space: nowrap;
}
.data-table td {
  padding: var(--po-b-12);
  border-bottom: 1px solid var(--po-cizgi-satir);
  vertical-align: middle;
  font: var(--po-y-14) var(--po-yazi);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color var(--po-sure-kisa) var(--po-egri); }
.data-table tbody tr:hover { background: var(--po-satir-hover); }
.data-table td small { display: block; color: var(--po-metin-2); font: var(--po-y-13) var(--po-yazi); margin-top: var(--po-b-2); }
.data-table.compact td { padding: var(--po-b-8) var(--po-b-12); font: var(--po-y-13) var(--po-yazi); }
.data-table .right { text-align: right; }
.data-table .nowrap { white-space: nowrap; }
.data-table .muted { color: var(--po-metin-2); font: var(--po-y-13) var(--po-yazi); }
.data-table tr.is-new td { background: var(--po-secili); }
.data-table tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--po-baglanti); }
.data-table tr.is-hidden-row td { opacity: .55; }

.row-title { font: 600 var(--po-y-14) var(--po-yazi); color: var(--po-murekkep); }
.row-title:hover { color: var(--po-baglanti); }

.thumb {
  width: 56px; height: 40px;
  object-fit: cover;
  border-radius: var(--po-r-6);
  display: block;
  background: var(--po-hover);
}
.thumb-empty { display: grid; place-items: center; color: var(--po-metin-3); font: var(--po-y-12) var(--po-yazi); }

/* Hap rozetler → .po-rozet görünümü */
.pill {
  display: inline-flex; align-items: center;
  margin-left: var(--po-b-6);
  padding: 2px 8px;
  border-radius: var(--po-r-6);
  background: var(--po-ic-zemin); color: var(--po-metin-koyu);
  font: 500 var(--po-y-12) var(--po-yazi);
  vertical-align: middle; white-space: nowrap;
}
.pill-new  { background: var(--po-baglanti-dolgu); color: var(--po-dolgu-metin); }
.pill-gold { background: var(--po-avatar); color: var(--po-metin-koyu); }

/* --- Araç satırı ve sekmeler (hap → alt çizgi, .po-durum-sekmeleri görünümü) --- */
.toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--po-b-16);
  margin-bottom: var(--po-b-16);
  flex-wrap: wrap;
}
.tabs {
  display: flex; gap: var(--po-b-24); flex-wrap: wrap;
  border-bottom: 1px solid var(--po-cizgi);
}
.toolbar .tabs { flex: 1 1 auto; min-width: 0; }
.tabs-standalone { margin-bottom: var(--po-b-16); }
.tabs a {
  display: inline-flex; align-items: center; gap: var(--po-b-6);
  height: var(--po-h-40);
  font: 400 var(--po-y-14) var(--po-yazi);
  color: var(--po-metin-2);
  white-space: nowrap;
}
.tabs a b {
  font: 400 var(--po-y-12) var(--po-yazi-mono);
  padding: 1px 7px;
  border-radius: var(--po-r-tam);
  background: var(--po-hover); color: inherit;
  font-variant-numeric: tabular-nums;
}
.tabs a:hover { color: var(--po-murekkep); }
.tabs a.is-active { color: var(--po-murekkep); font-weight: 600; box-shadow: inset 0 -2px 0 var(--po-murekkep); }
.tabs a.is-active b { background: var(--po-etkin); font-weight: 400; }

/* --- Formlar (Form.php çıktısı → .po-alan görünümü) --- */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--po-b-16); }
.col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; } .col-10 { grid-column: span 10; }
.col-12 { grid-column: span 12; }
.form-grid > .form-row:not([class*="col-"]) { grid-column: span 12; }

.form-row { margin-bottom: var(--po-b-20); min-width: 0; }
.form-row > label {
  display: block;
  font: 600 var(--po-y-14) var(--po-yazi);
  color: var(--po-murekkep);
  margin-bottom: var(--po-b-6);
}
/* Zorunlu işareti: kırmızı yıldız yerine " zorunlu" sözcüğü (tasarım dili 3.15) */
.form-row .req { font-size: 0; }
.form-row .req::after { content: "zorunlu"; margin-left: var(--po-b-4); font: 400 var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.form-row small { display: block; font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); margin-top: var(--po-b-6); }

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="search"],
.form-row input[type="date"],
.form-row input[type="number"],
.form-row input[type="time"],
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: var(--po-h-40);
  padding: 0 var(--po-b-12);
  border: 1px solid var(--po-cizgi-kontrol);
  border-radius: var(--po-r-8);
  background: var(--po-kontrol);
  font: var(--po-y-14) var(--po-yazi);
  color: var(--po-murekkep);
  transition: border-color var(--po-sure-kisa) var(--po-egri);
}
.form-row select { height: var(--po-h-40); padding: 0 var(--po-b-10); }
.form-row textarea { padding: var(--po-b-10) var(--po-b-12); font: var(--po-y-14-uzun) var(--po-yazi); resize: vertical; }
.form-row input:hover,
.form-row select:hover,
.form-row textarea:hover { border-color: var(--po-metin-3); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: var(--po-odak);
  outline-offset: var(--po-odak-bosluk-girdi);
  border-color: var(--po-baglanti);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--po-metin-3); }
.form-row input[readonly],
.form-row input:disabled,
.form-row textarea:disabled { background: var(--po-zemin); color: var(--po-metin-2); cursor: not-allowed; }
.form-row input[type="file"] {
  width: 100%;
  padding: var(--po-b-10);
  border: 1px dashed var(--po-cizgi-kesikli);
  border-radius: var(--po-r-8);
  background: var(--po-yuzey-2);
  font: var(--po-y-13) var(--po-yazi);
  color: var(--po-metin-koyu);
  cursor: pointer;
}
.form-row input[type="file"]:hover { border-color: var(--po-metin-3); }
.form-row input[type="file"]::file-selector-button {
  margin-right: var(--po-b-10);
  height: var(--po-h-30); padding: 0 var(--po-b-12);
  border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-6);
  background: var(--po-kontrol); color: var(--po-murekkep);
  font: 500 var(--po-y-13) var(--po-yazi); cursor: pointer;
}
.file-chosen { display: block; margin-top: var(--po-b-6); font: var(--po-y-13) var(--po-yazi); color: var(--po-taslak); }
.heading-input { min-height: var(--po-h-44) !important; font: var(--po-y-15) var(--po-yazi) !important; }

.form-check label { display: flex; align-items: center; gap: var(--po-b-10); font: 500 var(--po-y-14) var(--po-yazi); cursor: pointer; }
.form-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--po-birincil); cursor: pointer; }

.image-preview {
  display: flex; align-items: center; gap: var(--po-b-14);
  padding: var(--po-b-10);
  margin-bottom: var(--po-b-10);
  background: var(--po-yuzey-2);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
}
.image-preview img { width: 92px; height: 68px; object-fit: contain; border-radius: var(--po-r-6); background: var(--po-logo-zemin, var(--po-yuzey)); }
.remove-image { display: flex; align-items: center; gap: var(--po-b-8); font: 500 var(--po-y-13) var(--po-yazi); color: var(--po-tehlike); cursor: pointer; }
.remove-image input { accent-color: var(--po-tehlike); }

.form-actions { display: flex; gap: var(--po-b-10); flex-wrap: wrap; align-items: center; margin-top: var(--po-b-6); }
/* Ayar ekranlarının alt kaydet satırı: sayfanın altına yapışır, içerik üstünden kayar */
.sticky-actions {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 0;
  padding: var(--po-b-12) 0;
  background: var(--po-zemin); /* düz zemin — cam efekti yok (tasarım dili §0.6) */
  border-top: 1px solid var(--po-cizgi);
}
.inline-form { display: inline-block; }

/* --- Düğmeler (.btn → .po-dugme görünümü; gradyan, gölge ve kalkma yok) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--po-b-8);
  height: var(--po-h-38); padding: 0 var(--po-b-14);
  border: 1px solid var(--po-cizgi-kontrol);
  border-radius: var(--po-r-8);
  background: var(--po-kontrol); color: var(--po-murekkep);
  font: 500 var(--po-y-14) var(--po-yazi);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--po-sure-kisa) var(--po-egri), border-color var(--po-sure-kisa) var(--po-egri), color var(--po-sure-kisa) var(--po-egri);
}
.btn:hover { background: var(--po-kontrol-hover); }
.btn-primary { background: var(--po-birincil); border-color: transparent; color: var(--po-dolgu-metin); padding: 0 var(--po-b-16); }
.btn-primary:hover { background: var(--po-birincil-hover); color: var(--po-dolgu-metin); }
.btn-primary:active { background: var(--po-birincil-basili); }
.btn-ghost { background: var(--po-kontrol); }
.btn-danger { color: var(--po-tehlike); }
.btn-danger:hover { background: var(--po-tehlike-zemin); color: var(--po-tehlike); }
.btn-small { height: var(--po-h-34); padding: 0 var(--po-b-12); border-radius: var(--po-r-7); font: 500 var(--po-y-13) var(--po-yazi); }
.btn-primary.btn-small { padding: 0 var(--po-b-12); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn.is-bekliyor { opacity: .45; cursor: not-allowed; }

/* Yayın/gizli düğmesi (eski listeler) → renkli durum rozeti; metin anlamı taşır */
.toggle {
  display: inline-flex; align-items: center;
  height: var(--po-h-30); padding: 0 var(--po-b-10);
  border: 1px solid transparent;
  border-radius: var(--po-r-6);
  font: 500 var(--po-y-12) var(--po-yazi);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--po-sure-kisa) var(--po-egri);
}
.toggle:hover { border-color: currentColor; }
.toggle.on  { color: var(--po-yayinda); background: var(--po-yayinda-zemin); }
.toggle.off { color: var(--po-taslak); background: var(--po-taslak-zemin); }

.link-button {
  display: block;
  background: none; border: 0; padding: var(--po-b-4) 0 0;
  font: var(--po-y-13) var(--po-yazi);
  color: var(--po-baglanti);
  cursor: pointer; text-align: left;
}
.link-button:hover { color: var(--po-baglanti-hover); text-decoration: underline; }

.status-select {
  width: 100%;
  height: var(--po-h-34); padding: 0 var(--po-b-10);
  border: 1px solid var(--po-cizgi-kontrol);
  border-radius: var(--po-r-8);
  background: var(--po-kontrol);
  font: var(--po-y-13) var(--po-yazi); color: var(--po-murekkep);
  cursor: pointer;
}
.status-select:hover { border-color: var(--po-metin-3); }

/* ============================
   AYAR BÖLÜMÜ KARTI
   ----------------------------
   Ayarlar sekiz ayrı ekrana bölündükten sonra bölümler arası gezinme şeridi
   kalktı (her ekranda en fazla iki kart var). Çapalar yaşıyor: eski
   bağlantılar bir bölüme işaret ettiğinde kart hem kendine kaydırılır hem
   sol kenarından işaretlenir.
   ============================ */

.ayar-bolum { scroll-margin-top: 62px; }
/* .card.yonetici-kart ile aynı kenarı boyar; seçici bilerek daha güçlü. */
.card.ayar-bolum:target { border-left: 3px solid var(--po-baglanti); }

.card.yonetici-kart { border-left: 3px solid var(--po-cizgi); }
.serp-preview { margin-top: var(--po-b-8); }
.serp-preview > small { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
/* Google ön izlemesi → .po-serp görünümü */
.serp {
  border: 1px solid var(--po-cizgi-ic);
  border-radius: var(--po-r-8);
  padding: var(--po-b-14) var(--po-b-16);
  margin-top: var(--po-b-8);
  background: var(--po-yuzey-2);
  max-width: 620px;
}
.serp b { display: block; color: var(--po-baglanti-hover); font: 500 18px/24px var(--po-yazi); }
.serp span { display: block; color: var(--po-yayinda); font: var(--po-y-13) var(--po-yazi); margin: 2px 0 4px; }
.serp p { color: var(--po-metin-2); font: var(--po-y-13) var(--po-yazi); }

/* ============================
   SATIR KARTLARI
   ============================ */
.row-card { display: flex; gap: 22px; align-items: flex-start; }
.row-card.is-dim { opacity: .6; }
.row-form { flex: 1; min-width: 0; }
.row-actions { margin-top: 2px; }
.row-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
  padding-left: 22px;
  border-left: 1px solid var(--po-cizgi-satir);
}

/* ============================
   GALERİ YÖNETİMİ
   ============================ */
.gallery-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.gallery-admin-item {
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  overflow: hidden;
  background: var(--po-yuzey);
  transition: box-shadow .18s;
}
.gallery-admin-item:hover { box-shadow: var(--po-golge-kutucuk); }
.gallery-admin-item img { width: 100%; height: 130px; object-fit: cover; display: block; }
.gallery-admin-item input {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--po-cizgi-satir);
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
}
.gallery-admin-item input:focus { outline: var(--po-odak); outline-offset: -2px; background: var(--po-yuzey-2); }
.gallery-admin-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 8px 10px;
  border-top: 1px solid var(--po-cizgi-satir);
}

/* ============================
   TALEPLER
   ============================ */
.lead-detail { }

.lead-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--po-cizgi-satir);
  border-bottom: 1px solid var(--po-cizgi-satir);
  margin-bottom: 18px;
}
.lead-facts small {
  display: block;
  font: var(--po-y-12) var(--po-yazi);
  color: var(--po-metin-2);
  margin-bottom: 3px;
}
.lead-facts b { font-size: 15px; font-weight: 600; }
.lead-facts a:hover { color: var(--po-baglanti); }
.lead-message {
  background: var(--po-yuzey-2);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 20px;
  white-space: pre-line;
}

/* ============================
   ŞEMALAR
   ============================ */
.card-split { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; }
.card-split .card-note { flex: 1; min-width: 240px; margin-bottom: 0; }
.card-split .form-grid { flex: 1; min-width: 260px; }

.diagram { margin: 0; flex-shrink: 0; width: 260px; }
.diagram svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  background: var(--po-yuzey);
}
.diagram figcaption { font-size: 12px; line-height: 1.5; color: var(--po-metin-2); margin-top: 7px; text-align: center; }

.diagram .d-page { fill: #1b1e2b; }
.diagram .d-page.light { fill: #f1f3f9; }
.diagram .d-dim { fill: rgba(255, 255, 255, .22); }
.diagram .d-line { fill: rgba(255, 255, 255, .15); }
.diagram .d-hot { fill: var(--po-baglanti); }
.diagram .d-green { fill: #2f8a4f; }
.diagram .d-rule { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.diagram .d-label { fill: rgba(255, 255, 255, .5); font-size: 9px; font-family: var(--po-yazi); }
.diagram .d-label.light { fill: rgba(26, 29, 38, .45); }
.diagram .d-page.light ~ .d-dim,
.diagram .d-page.light ~ g .d-dim { fill: rgba(26, 29, 38, .16); }
.diagram .d-page.light ~ .d-line,
.diagram .d-page.light ~ g .d-line { fill: rgba(26, 29, 38, .12); }
.diagram .d-page.light ~ .d-rule { stroke: rgba(26, 29, 38, .16); }


/* ============================
   TEKRAR EDEN ALT GRUPLAR
   ----------------------------
   Bir kartta birbirinin aynısı görünen alanlar olduğunda ("1. rakam",
   "2. rakam") her grup kendi şemasını taşır; şema o grubun sitede nereye
   denk geldiğini işaretler. Alan adları da sadeleşir: "1. rakam" değil
   sadece "Rakam".
   ============================ */
.altgrup-satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.altgrup {
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  background: var(--po-cizgi-satir);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.altgrup > .diagram { width: 100%; }
.altgrup .altgrup-basi { display: flex; align-items: center; gap: 9px; }
.altgrup .altgrup-basi .no {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: var(--po-hover);
  color: var(--po-murekkep);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.altgrup .altgrup-basi .ad { font-size: 13.5px; font-weight: 600; color: var(--po-murekkep); }
.altgrup .form-row { margin-bottom: 0; }

/* Şemasız kullanım için ince ayırıcı şerit. */
.alt-baslik {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
}
.alt-baslik::after { content: ""; flex: 1; height: 1px; background: var(--po-cizgi); }
.alt-baslik .no {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--po-hover);
  color: var(--po-murekkep);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.alt-baslik .ad {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--po-metin-2);
}

/* ============================
   ÇİZİMLİ SEÇENEK KARTLARI
   ----------------------------
   Form::secenekKartlari() — adı tek başına anlaşılmayan seçenekler için
   açılır listenin yerine geçer. Radyo düğmesidir, JavaScript gerektirmez.
   ============================ */
.secenek-grubu { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.secenek-grubu > legend {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--po-murekkep);
  margin-bottom: 8px;
  padding: 0;
}
.secenekler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.secenek {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1.5px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  background: var(--po-yuzey);
  padding: 13px;
  cursor: pointer;
}
.secenek input { position: absolute; opacity: 0; pointer-events: none; }
.secenek:hover { border-color: var(--po-metin-2); }
.secenek:has(input:checked) { border-color: var(--po-murekkep); background: var(--po-hover); }
.secenek:focus-within { outline: 2px solid var(--po-baglanti); outline-offset: 2px; }
.secenek svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  background: var(--po-yuzey);
}
.secenek .secenek-ad { font-size: 14px; font-weight: 600; color: var(--po-murekkep); }
.secenek .secenek-not { font-size: 12.5px; line-height: 1.45; color: var(--po-metin-2); }

/* KOMPAKT SEÇENEK GRUBU
   Çizim ve açıklama basılmaz; seçenekler tek satırda küçük düğmeler olur.
   Sık dokunulan ayarlar için — dört çizimli kart aynı formda ekran dolusu
   yer kaplıyor ve her ayar için kaydırmak gerekiyordu. */
.secenek-grubu--kompakt { margin-bottom: 12px; }
.secenek-grubu--kompakt > legend { font-size: 12.5px; margin-bottom: 6px; }
.secenek-grubu--kompakt .secenekler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.secenek-grubu--kompakt .secenek {
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 7px 13px;
  border-radius: var(--po-r-7);
  border-width: 1px;
}
.secenek-grubu--kompakt .secenek .secenek-ad { font-size: 13px; font-weight: 600; }
.secenek-grubu--kompakt .secenek:has(input:checked) { border-width: 1.5px; }

/* Şema sınıfları .diagram altında tanımlı; kartlarda da geçerli olmalı. */
.secenek .d-page { fill: #1b1e2b; }
.secenek .d-page.light { fill: #f1f3f9; }
.secenek .d-dim { fill: rgba(255, 255, 255, .22); }
.secenek .d-line { fill: rgba(255, 255, 255, .15); }
.secenek .d-hot { fill: var(--po-baglanti); }
.secenek .d-rule { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.secenek .d-label { fill: rgba(255, 255, 255, .5); font-size: 9px; font-family: var(--po-yazi); }

/* ============================
   İKON SEÇİCİ
   Gömülü ikon setinden tek ikon seçilir. Radyo tabanlıdır (JS yok),
   .secenek gibi çalışır ama kartlar küçük kare ızgaradır: ikonun adı değil
   kendisi tanıtır, o yüzden ad yalnızca ekran okuyucuya bırakılır.
   ============================ */
.ikon-secici { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.ikon-secici > legend {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--po-murekkep);
  margin-bottom: 8px;
  padding: 0;
}
/* Arama satırı: kutu + kaç sonuç bulunduğu. */
.ikon-arama {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.ikon-arama-kutu {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  background: var(--po-yuzey);
  color: var(--po-murekkep);
  font: inherit;
  font-size: 14px;
}
.ikon-arama-kutu:focus {
  outline: 2px solid var(--po-baglanti);
  outline-offset: 1px;
  border-color: var(--po-baglanti);
}
.ikon-arama-sayi { font-size: 12px; color: var(--po-metin-2); white-space: nowrap; }

/* Izgara sabit yükseklikte kaydırılır: 200 sonuç geldiğinde form aşağıya
   doğru uzayıp altındaki alanları ekrandan itmesin. */
.ikon-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  max-height: 232px;
  overflow-y: auto;
  padding: 3px;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  background: var(--po-yuzey-2);
}
.ikon-secenek {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1.5px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  background: var(--po-yuzey);
  color: var(--po-murekkep);
  cursor: pointer;
}
.ikon-secenek input { position: absolute; opacity: 0; pointer-events: none; }
.ikon-secenek:hover { border-color: var(--po-metin-2); }
.ikon-secenek:has(input:checked) {
  border-color: var(--po-murekkep);
  background: var(--po-hover);
  color: var(--po-murekkep);
}
.ikon-secenek:focus-within { outline: 2px solid var(--po-baglanti); outline-offset: 2px; }
.ikon-secenek .ikon-kutu { display: flex; align-items: center; justify-content: center; }
.ikon-secenek svg { display: block; }

/* İkonun adı görsel olarak gizlenir ama ekran okuyucuda kalır; fareyle
   bekleyince title niteliğinden görünür. Izgarada yazı yer kaplasaydı
   40 ikon ekrana sığmazdı. */
.ikon-secenek .ikon-ad {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ikon-secenek--bos .ikon-kutu { font-size: 18px; color: var(--po-metin-2); }

/* ============================
   YETKİ GÖSTERGELERİ
   ============================ */
/* "yalnız yönetici" etiketi → .po-rozet--yonetici görünümü */
.admin-only-tag {
  display: inline-block;
  font: 500 var(--po-y-11) var(--po-yazi);
  padding: 1px 6px;
  border-radius: var(--po-r-4);
  background: var(--po-avatar);
  color: var(--po-metin-koyu);
  white-space: nowrap;
}
.admin-only-box {
  margin-top: 18px;
  padding: 18px 18px 4px;
  border: 1px dashed var(--po-cizgi-kesikli);
  border-radius: var(--po-r-10);
  background: var(--po-yuzey-2);
}
.admin-only-box .admin-only-tag { margin-bottom: 12px; }

/* ============================
   KULLANICI YÖNETİMİ
   ============================ */
.inline-details { display: inline-block; position: relative; }
.inline-details summary { list-style: none; cursor: pointer; }
.inline-details summary::-webkit-details-marker { display: none; }
.pw-form {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 6px);
  display: flex;
  gap: 8px;
  background: var(--po-yuzey);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  padding: 12px;
  box-shadow: var(--po-golge-bildirim);
}
.pw-form input {
  width: 210px;
  padding: 9px 12px;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  font-family: inherit;
  font-size: 14px;
}

/* ============================
   TASARIM EKRANI
   ============================ */
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type="color"] {
  width: 52px; height: 42px;
  padding: 3px;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  background: var(--po-yuzey);
  cursor: pointer;
  flex-shrink: 0;
}
.color-field input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  text-transform: lowercase;
}

.preset-row { display: flex; gap: 12px; flex-wrap: wrap; }
.preset {
  display: block;
  border: 2px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
  padding: 12px;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
  min-width: 150px;
}
.preset:hover { border-color: var(--po-cizgi-kesikli); }
.preset input { position: absolute; opacity: 0; pointer-events: none; }
.preset:has(input:checked) { border-color: var(--po-murekkep); background: var(--po-hover); }
.preset-chips { display: flex; gap: 4px; margin-bottom: 9px; }
.preset-chips i { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--po-numune-cerceve); display: block; }
.preset b { font-size: 13px; font-weight: 600; display: block; }

input[type="range"] { width: 100%; accent-color: var(--po-birincil); margin: 6px 0 2px; }
.range-note { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--po-metin-2); }
.range-note b { font: 500 var(--po-y-14) var(--po-yazi-mono); color: var(--po-murekkep); }

/* ============================
   SÜRÜKLE-BIRAK SIRALAMA
   admin.js → data-siralanabilir. Tutamaç JS yoksa gizli kalır (hidden);
   o durumda ↑ ↓ düğmeleri çalışmaya devam eder.
   ============================ */
.data-table .sira-tutamac-sutun { width: 34px; padding-left: 6px; padding-right: 0; }
.sira-tutamac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--po-r-8);
  background: transparent;
  color: var(--po-ikon-soluk);
  cursor: grab;
  touch-action: none;           /* dokunmatikte sayfa kaydırması sürüklemeyi çalmasın */
  -webkit-user-select: none;
  user-select: none;
  transition: color .14s, background .14s;
}
.sira-tutamac[hidden] { display: none; }
.sira-tutamac:hover,
.sira-tutamac:focus-visible { color: var(--po-baglanti); background: var(--po-secili); }

.siralama-aktif,
.siralama-aktif * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

.data-table tbody tr.is-suruklenen,
.data-table tbody tr.is-suruklenen:hover { background: var(--po-secili); }
.data-table tbody tr.is-suruklenen td:first-child { box-shadow: inset 3px 0 0 var(--po-baglanti); }
.data-table tbody tr.is-suruklenen .sira-tutamac { color: var(--po-baglanti); }
[data-siralanabilir].is-kilitli { pointer-events: none; opacity: .6; }

/* ============================
   ARAMA MOTORLARI & İŞLETME (Ayarlar)
   Çalışma saati çiftleri ve alan grubu notu — kompakt, tek satır.
   ============================ */
.form-grid > .alan-notu {
  grid-column: 1 / -1;
  margin: -8px 0 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--po-metin-2);
}
.saat-grubu { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.saat-grubu > legend {
  display: block;
  padding: 0;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--po-murekkep);
}
.saat-cifti { display: flex; align-items: center; gap: 8px; }
.saat-cifti > span { color: var(--po-metin-2); }
.form-row input[type="time"] {
  flex: 1;
  min-width: 0;
  padding: 10px 10px;
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-8);
  background: var(--po-yuzey);
  font-family: inherit;
  font-size: 15px;
  color: var(--po-murekkep);
  transition: border-color .16s, box-shadow .16s;
}
.form-row input[type="time"]:focus {
  border-color: var(--po-baglanti);
  box-shadow: 0 0 0 3px var(--po-hover);
  outline: none;
}

/* ============================
   PROJELER — GOOGLE'DA GÖRÜNÜM (SEO)
   Liste satırındaki "SEO açıklaması yok" işareti, SEO kartındaki
   karakter sayacı (admin.js → data-seo-onizleme) ve boş önizleme.
   ============================ */
a.pill-seo-eksik {
  background: var(--po-taslak-zemin);
  color: var(--po-taslak);
  text-decoration: none;
  white-space: nowrap;
}
a.pill-seo-eksik:hover,
a.pill-seo-eksik:focus-visible { box-shadow: inset 0 0 0 1px var(--po-taslak); }
.seo-sayac {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--po-metin-2);
}
.seo-sayac.is-iyi  { color: var(--po-yayinda); }
.seo-sayac.is-uzun { color: var(--po-taslak); }
.serp p.is-bos { font-style: italic; color: var(--po-metin-2); }

/* ============================
   SEO DENETİM EKRANI
   Özet şeridi, puan rozeti, eksik etiketleri ve satır ayrıntısı.
   Yalnızca yönetici görür (app/admin/seo.php).
   ============================ */
.seo-arac { align-items: flex-end; }
.seo-zaman { font-size: 14px; color: var(--po-metin-koyu); }
.seo-zaman b { font-weight: 600; color: var(--po-murekkep); }
.seo-zaman .muted { color: var(--po-metin-2); }

.seo-ozet strong.is-iyi   { color: var(--po-yayinda); }
.seo-ozet strong.is-uyari { color: var(--po-taslak); }
.seo-ozet strong.is-hata  { color: var(--po-tehlike); }
.seo-dosya-durum { display: flex; flex-wrap: wrap; gap: 5px; }

/* Eksik etiketi: satırda tek bakışta okunan kısa rozet. */
.seo-etiket {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.seo-etiket.is-iyi   { background: var(--po-yayinda-zemin); color: var(--po-yayinda); }
.seo-etiket.is-uyari { background: var(--po-taslak-zemin); color: var(--po-taslak); }
.seo-etiket.is-hata  { background: var(--po-tehlike-zemin);   color: var(--po-tehlike); }
.seo-etiket.is-bilgi { background: var(--po-cizgi-satir);   color: var(--po-metin-2); }

/* Puan: 100'den başlar, her eksik kendi ağırlığınca düşer. */
.seo-puan {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 2px solid currentColor;
}
.seo-puan.is-iyi   { color: var(--po-yayinda); background: var(--po-yayinda-zemin); }
.seo-puan.is-uyari { color: var(--po-taslak); background: var(--po-taslak-zemin); }
.seo-puan.is-hata  { color: var(--po-tehlike);   background: var(--po-tehlike-zemin); }
/* Sitede gizli kayıt: puanlanmaz, tireyle geçilir. */
.seo-puan.is-bilgi { color: var(--po-metin-2); background: var(--po-cizgi-satir); }

.seo-tablo td { vertical-align: top; }
.seo-tablo tbody:last-child > tr > td { border-bottom: 0; }
/* Ortak .link-button "display: block" olduğu için "Ayrıntı" ile "Düzenle"
   alt alta düşüyordu. Kural yalnızca bu tabloya kapsanır; .link-button'ın
   kendisi başka ekranlarda aynı kalır. */
.seo-tablo .seo-ac {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin-right: 10px;
  font-size: 13px;
}

.seo-detay > td { background: var(--po-yuzey-2); border-top: 0; padding-top: 0; }
.seo-detay-govde {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 4px 2px 10px;
}
.seo-detay-govde h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--po-metin-2);
  margin-bottom: 10px;
}

.seo-bulgu-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.seo-bulgu-liste li {
  padding: 8px 12px;
  border-radius: var(--po-r-8);
  border-left: 3px solid var(--po-cizgi);
  background: var(--po-yuzey);
  font-size: 13.5px;
}
.seo-bulgu-liste li.is-hata  { border-left-color: var(--po-tehlike); }
.seo-bulgu-liste li.is-uyari { border-left-color: var(--po-taslak); }
.seo-bulgu-liste li.is-bilgi { border-left-color: var(--po-cizgi); }
.seo-bulgu-liste b { font-weight: 600; }
.seo-bulgu-liste small { display: block; color: var(--po-metin-2); font-size: 12.5px; margin-top: 3px; }
.seo-ceza {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--po-metin-2);
  font-variant-numeric: tabular-nums;
}

.seo-olcum {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 6px 14px;
  margin: 0 0 14px;
  font-size: 13.5px;
}
.seo-olcum dt { color: var(--po-metin-2); font-size: 12.5px; padding-top: 1px; }
.seo-olcum dd { margin: 0; word-break: break-word; }
.seo-olcum dd i { color: var(--po-metin-2); }
.seo-olcum dd .muted { display: block; color: var(--po-metin-2); font-size: 12px; }

.seo-aciklama { margin-top: 14px; }

@media (max-width: 900px) {
  /* Ortak tablo kuralı nowrap yapıyor; ayrıntı metni sığsın diye geri alınır. */
  .card > .seo-tablo { white-space: normal; }
  .seo-detay-govde { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Dar ekranda tablo yatay kaymaz; her kayıt alt alta kart gibi okunur. */
  .card > .seo-tablo { display: block; overflow-x: visible; }
  .seo-tablo > thead { display: none; }
  .seo-tablo tbody { display: block; border-bottom: 1px solid var(--po-cizgi-satir); padding: 12px 0; }
  .seo-tablo tbody:last-child { border-bottom: 0; }
  .seo-tablo tr { display: block; }
  /* "display: block" tarayıcının hidden kuralını ezdiği için ayrıntı satırları
     dar ekranda hep açık geliyordu. Gizli satır gizli kalmalı; betik kapalıyken
     ayrıntıyı geri açan kural seo.php içindeki <noscript> bloğundadır. */
  .seo-tablo tr[hidden] { display: none; }
  .seo-tablo td { display: block; padding: 3px 0; border-bottom: 0; }
  .seo-tablo td.right { text-align: left; }
  .seo-detay > td { background: none; padding-top: 8px; }
  .seo-olcum { grid-template-columns: 1fr; gap: 2px; }
  .seo-olcum dt { margin-top: 7px; }
}

/* ---------------------------------------------------------------------------
   "Sitede:" satırı — alanın sitede nerede göründüğü (Form 'yer' seçeneği).
   Sıra: etiket → kutu → Sitede: … → ipucu. İpucu rengindedir, ikon yoktur.
   --------------------------------------------------------------------------- */
.form-row small.alan-yeri,
.secenek-grubu small.alan-yeri,
.ikon-secici small.alan-yeri { display: block; font-size: 13px; color: var(--po-metin-2); margin-top: 4px; line-height: 1.5; }
.alan-yeri b { font-weight: 600; }
/* ============================
   GİRİŞ EKRANI (layout-giris.php)
   Düz zemin, çerçeveli beyaz kutu, üstte PicaOS marka satırı.
   ============================ */
.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--po-b-24);
  background: var(--po-zemin);
}
.login-box {
  width: 100%;
  max-width: 400px;
  padding: var(--po-b-28) var(--po-b-28) var(--po-b-24);
  background: var(--po-yuzey);
  border: 1px solid var(--po-cizgi);
  border-radius: var(--po-r-10);
}
.login-box .po-marka { padding: 0 0 var(--po-b-20); }
.login-brand { margin-bottom: var(--po-b-20); }
.login-brand h1, .login-brand strong { display: block; margin: 0; font: 600 var(--po-y-24) var(--po-yazi); letter-spacing: -.01em; }
.login-brand span { display: block; margin-top: var(--po-b-4); font: var(--po-y-14) var(--po-yazi); color: var(--po-metin-2); }
.login-form { margin-bottom: var(--po-b-16); }
.login-form .btn { margin-top: var(--po-b-4); height: var(--po-h-44); }
.login-note { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); text-align: center; }

/* ============================
   ESKİ EKRANLAR — GENİŞLİĞE GÖRE
   ============================ */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .form-grid > [class*="col-"] { grid-column: span 12; }
  .row-card { flex-direction: column; }
  .row-side {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
    border-left: 0;
    padding-top: var(--po-b-14);
    border-top: 1px solid var(--po-cizgi-satir);
    width: 100%;
    justify-content: flex-start;
  }
  .card-split { flex-direction: column; }
  .diagram { width: 100%; max-width: 300px; }
  .pw-form { position: static; flex-direction: column; box-shadow: none; margin-top: var(--po-b-8); }
  .pw-form input { width: 100%; }

  /* Geniş tablolar kartın içinde yatay kayar; sayfa kaymaz */
  .card > .data-table,
  .card > form > .data-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 767px) {
  .card { padding: var(--po-b-16); }
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .btn, .form-actions .btn { width: 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--po-b-20); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { height: var(--po-h-44); flex-shrink: 0; }
  .gallery-admin { grid-template-columns: 1fr 1fr; }
  .gallery-admin-item img { height: 100px; }
  .btn { min-height: var(--po-h-44); }
  .toggle { min-height: var(--po-h-44); min-width: var(--po-h-44); }
  /* iOS Safari 16px altındaki girdide yakınlaştırır */
  .form-row input, .form-row select, .form-row textarea,
  .ikon-arama-kutu, .pw-form input, .color-field input[type="text"] { font-size: 16px; }
  .login-box { padding: var(--po-b-24) var(--po-b-16) var(--po-b-20); }
}

/* ============================================================
   7. KABUK — GENİŞLİĞE GÖRE
   <1024: sol menü çekmeceye döner (tasarım dili 4.2; eski 900 sınırı 1024 oldu).
   <768 : mobil — gövde boşluğu 16px, yol şeridi tek geri bağlantısı.
   ============================================================ */
@media (max-width: 1023px) {
  .sidebar-toggle { display: inline-flex; }
  .sidebar-collapse { display: none; }

  .sidebar {
    position: fixed; z-index: 60;
    left: 0; top: 0; bottom: 0;
    height: auto;
    width: min(280px, 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--po-sure-uzun) var(--po-egri), visibility 0s linear var(--po-sure-uzun);
  }
  .sidebar.open {
    transform: none;
    visibility: visible;
    box-shadow: var(--po-golge-cekmece);
    transition: transform var(--po-sure-uzun) var(--po-egri), visibility 0s;
  }
  /* Çekmecede dokunma hedefi 44px */
  .sidebar-nav a,
  .nav-group:first-child:not(:has(.nav-section)) a,
  .sidebar-foot a,
  .sidebar-foot .logout { height: var(--po-h-44); }
  .po-firma-kart { min-height: var(--po-h-44); }
  .po-tema-secici { min-height: var(--po-h-44); }
  .po-tema-secici__parca { width: 40px; height: 38px; }

  /* Çekmece açıkken arka sayfa kaymaz */
  body.po-cekmece-acik { overflow: hidden; }

  .po-ust { padding: 0 var(--po-b-16) 0 var(--po-b-16); }
}

@media (max-width: 767px) {
  .po-govde { padding: var(--po-b-16) var(--po-b-16) 48px; }

  /* Yol: yalnızca bir üst parça, "‹ Hizmetler" biçiminde geri bağlantısı */
  .po-yol .po-yol__geri { display: inline-flex; min-height: var(--po-h-44); }
  .po-yol .po-yol__parca,
  .po-yol .po-yol__ayrac,
  .po-yol .po-yol__geri ~ .po-yol__son { display: none; }

  .po-sayfa-basi__baslik { font-size: 22px; line-height: 28px; }
  .admin-head { margin-bottom: var(--po-b-16); }
}

/* ============================================================
   8. HAREKET AZALTMA
   En sonda durur: yukarıdaki genişlik kuralları geçişleri geri açmasın.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sidebar,
  .sidebar.open,
  .sidebar-nav a,
  .sidebar-foot a,
  .sidebar-foot .logout,
  .sidebar-collapse,
  .sidebar-collapse .po-ikon,
  .po-firma-kart,
  .nav-tooltip,
  .btn,
  .toggle,
  .stat-card,
  .quick-links a,
  .data-table tbody tr,
  .form-row input,
  .form-row select,
  .form-row textarea,
  .sira-tutamac { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .po-anahtar,
  .po-anahtar__topuz,
  .po-anahtar-girdi,
  .po-anahtar-girdi::before,
  .po-dugme,
  .po-gorsel__kaldir,
  .po-gorsel-ekle { transition: none; }
  .po-kaydet-cubugu,
  .po-bildirim,
  .po-bildirim.is-open { transition: opacity 0ms, visibility 0s; transform: translate(-50%, 0); }
  .po-kaydet-cubugu { transform: none; }
  .po-bildirim.is-sunucu { animation-duration: 0ms; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .po-bildirim,
  .po-bildirim.is-open { transform: none; }
}

/* ==========================================================================
   İ3b — düzenleme ekranı: sabit beş sekme (Duzenle.dc.html birebir)
   Galeri · biçimli metin · yayın · Google önizlemesi · kategori kartı
   ========================================================================== */
.po-sekme__ek[hidden] { display: none; }

/* galeri: sıralanabilir ızgara, ilk görsel kapak */
.po-galeri { list-style: none; margin: 0; padding: 0; }
.po-galeri .po-rozet--kapak { display: none; }
.po-galeri > .po-galeri__oge:first-child .po-rozet--kapak { display: inline-flex; }
.po-galeri__ekle { display: flex; }
.po-galeri__ekle .po-gorsel-ekle { flex: 1 1 auto; }
.po-gorsel__tutamac {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--po-h-30); height: var(--po-h-30); padding: 0; border: 0; border-radius: var(--po-r-6);
  background: color-mix(in srgb, var(--po-yuzey) 92%, transparent); color: var(--po-murekkep); cursor: grab; touch-action: none;
  opacity: 0; transition: opacity var(--po-sure-kisa) var(--po-egri);
}
.po-gorsel:hover .po-gorsel__tutamac,
.po-gorsel:focus-within .po-gorsel__tutamac { opacity: 1; }
.po-gorsel__tutamac:focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }
button.po-gorsel__kaldir { border: 0; padding: 0; }
.po-gorsel__yeni-not {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--po-b-6) var(--po-b-8) var(--po-b-6) 44px;
  background: var(--po-gorsel-perde); color: var(--po-dolgu-metin); font: 500 var(--po-y-12) var(--po-yazi);
}
.po-gorsel.is-yeni { outline: 2px dashed var(--po-baglanti); outline-offset: -2px; }
[data-po-yerel-sirala] > .is-suruklenen { opacity: .55; }
[data-po-yerel-sirala].is-surukleniyor,
[data-po-yerel-sirala].is-surukleniyor * { cursor: grabbing !important; user-select: none; }
@media (hover: none) {
  .po-gorsel__tutamac, .po-gorsel__kaldir { opacity: 1; }
}

/* tekrarlı alan tutamacı: düğme (betikle görünür, ok tuşlarıyla da taşır) */
button.po-tekrar__tutamac {
  width: 22px; height: 34px; padding: 0; border: 0; border-radius: var(--po-r-6);
  background: transparent; cursor: grab; touch-action: none; align-items: center; justify-content: center;
}
button.po-tekrar__tutamac:hover { background: var(--po-hover); color: var(--po-murekkep); }
button.po-tekrar__tutamac[hidden] { display: none; }

/* biçimli metin (Detay metni): araç çubuğu + metin kutusu tek çerçeve */
.po-bicimli { border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-8); overflow: hidden; background: var(--po-kontrol); }
.po-bicimli:focus-within { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk-girdi); border-color: var(--po-baglanti); }
.po-bicimli.is-hatali { border-color: var(--po-tehlike); }
.po-bicimli__arac {
  display: flex; gap: 2px; padding: 5px 6px;
  border-bottom: 1px solid var(--po-cizgi-satir); background: var(--po-yuzey-2);
}
.po-bicimli__arac[hidden] { display: none; }
.po-bicimli__dugme {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--po-metin-koyu); cursor: pointer;
  font: 400 var(--po-y-14) var(--po-yazi);
}
.po-bicimli__dugme:hover { background: var(--po-hover); color: var(--po-murekkep); }
.po-bicimli__dugme:focus-visible { outline: var(--po-odak); outline-offset: 0; }
.po-bicimli__dugme--yazi { padding: 0 8px; font: 600 var(--po-y-13) var(--po-yazi); }
.po-bicimli__dugme--kalin { font-weight: 700; }
.po-bicimli__dugme--italik { font: italic 15px Georgia, serif; }
.po-bicimli__metin.po-girdi { border: 0; border-radius: 0; display: block; }
.po-bicimli__metin.po-girdi:focus { outline: none; }
.po-sayfa.po-js .po-bicimli__ipucu { display: none; }

/* yayın: iki sütunlu tarih satırı */
.po-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--po-b-16); }
.po-ikili__not { margin-top: calc(-1 * var(--po-b-8)); }

/* Google önizlemesi */
.po-serp {
  display: flex; flex-direction: column; gap: var(--po-b-4);
  padding: var(--po-b-14) var(--po-b-16); border: 1px solid var(--po-cizgi-satir); border-radius: var(--po-r-8);
  background: var(--po-yuzey-2); min-width: 0;
}
.po-serp__yol { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-koyu); overflow-wrap: anywhere; }
.po-serp__baslik { font: 500 18px/1.35 var(--po-yazi); color: var(--po-baglanti-hover); overflow-wrap: anywhere; }
.po-serp__aciklama { font: var(--po-y-13) var(--po-yazi); line-height: 19px; color: var(--po-metin-koyu); overflow-wrap: anywhere; }
.po-serp__aciklama.is-bos { color: var(--po-metin-3); font-style: italic; }

/* kendi sayfası olmayan türde SEO sekmesi */
.po-bos--sakin { padding: var(--po-b-24) var(--po-b-16); border: 1px dashed var(--po-cizgi); border-radius: var(--po-r-8); background: var(--po-yuzey-2); color: var(--po-metin-2); }
.po-bos--sakin p { margin: 0; }

/* sağ kolon kategori kartı: betik varken yeni kategori kutusu yalnız seçilince */
.po-kategori-yeni { display: flex; flex-direction: column; gap: var(--po-b-6); }
.po-sayfa.po-js [data-po-kategori]:not(.is-yeni) .po-kategori-yeni { display: none; }
.po-yan-kart__dugmeler > a.po-dugme,
.po-yan-kart__dugmeler > label.po-dugme { text-align: center; }

@media (max-width: 767px) {
  .po-ikili { grid-template-columns: minmax(0, 1fr); }
  .po-gorseller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-serp__baslik { font-size: 16px; }
  .po-bicimli__dugme { min-width: 36px; height: 36px; }
}
/* tekrarlı alan başlığı: ad solda, "sitede nerede" notu sağda (demo) */
.po-tekrar > legend.po-tekrar__bas { display: flex; align-items: baseline; gap: var(--po-b-12); padding: 0; }
.po-tekrar__bas .po-alan__etiket { flex: 1 1 auto; }
.po-tekrar__bas .po-tekrar__not { text-align: right; }
.po-onek__metin { max-width: 62%; }
@media (max-width: 767px) {
  .po-tekrar > legend.po-tekrar__bas { flex-direction: column; gap: var(--po-b-2); }
  .po-tekrar__bas .po-tekrar__not { text-align: left; }
  .po-onek__metin { max-width: 45%; }
}
/* Listede mobil kategori rozeti: .po-rozet'in inline-flex'i onu genişte de açıyordu */
.po-rozet.po-tablo__kat-mobil { display: none; }
@media (max-width: 1023px) {
  .po-rozet.po-tablo__kat-mobil { display: inline-flex; }
}
@media (max-width: 767px) {
  /* kategori süzgeci dar ekranda satırı taşırmasın */
  .po-arama-formu { min-width: 0; max-width: 100%; }
  .po-arama-formu .po-arama { min-width: 0; }
  .po-arama-formu .po-secim { min-width: 0; flex: 0 1 auto; width: 45%; }
}

/* ---------------------------------------------------------------- İ5a
   Sayfa adresi ön eki: uzun alan adında SOLDAN kısalır, son yol parçası
   ("/hizmetler/") hep görünür. Alan adı parçası rtl yönüyle taşar; alan
   adındaki karakterler (harf, rakam, nokta, iki nokta) yönden etkilenmez. */
.po-onek__metin { min-width: 0; flex: 0 1 auto; }
/* Girdi kalan yeri alır ama ön eki doğal genişliğinden (en fazla %62) itmez */
.po-onek .po-girdi { flex: 1 1 0; width: auto; min-width: 7rem; }
.po-onek__alan {
  direction: rtl; text-align: left; min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-onek__yol { flex: 0 0 auto; white-space: nowrap; }

/* Öne çıkan maddeler (tekrarlı alan) dokunmatik sıralama: dar ekranda tutamaç
   görünür ve dokunarak sürüklenir; yanında yukarı/aşağı düğmeleri. */
.po-tekrar__ok { display: none; }
@media (max-width: 767px) {
  button.po-tekrar__tutamac { flex: 0 0 28px; width: 28px; height: var(--po-h-44); }
  .po-tekrar__satir .po-ikon-dugme { flex: 0 0 auto; }
  .po-tekrar__ok:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: var(--po-h-44); }
  .po-tekrar__ok[disabled] { opacity: .35; }
  .po-tekrar__satir { gap: var(--po-b-4); }
}

/* ---------------------------------------------------------------- İ5b
   Genel Bakış v2 ve Tüm içerik (tasarım dili 3.19; demo Main, Icerik).
   Eski .stat-grid / .quick-links SEO Raporu ve Ayarlar listesinde hâlâ
   kullanıldığı için silinmedi; Genel Bakış artık bunları kullanmıyor. */

.po-sayfa--genel,
.po-sayfa--tum { gap: var(--po-b-20); }
.po-sayfa--tum { gap: var(--po-b-24); }

/* Başlıktaki "Yeni içerik" seçimi: <details>, betik gerekmez */
.po-acilir { position: relative; }
.po-acilir > summary { list-style: none; }
.po-acilir > summary::-webkit-details-marker { display: none; }
.po-acilir__liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 220px; padding: var(--po-b-6);
  background: var(--po-yuzey); border: 1px solid var(--po-cizgi); border-radius: var(--po-r-10);
  box-shadow: var(--po-golge-kutucuk);
  display: flex; flex-direction: column; gap: var(--po-b-2);
}
.po-acilir__liste a {
  display: flex; align-items: center; gap: var(--po-b-10);
  min-height: var(--po-h-34); padding: 0 var(--po-b-10); border-radius: var(--po-r-7);
  font: 500 var(--po-y-14) var(--po-yazi); color: var(--po-murekkep); text-decoration: none; white-space: nowrap;
}
.po-acilir__liste a:hover { background: var(--po-hover); color: var(--po-murekkep); }
.po-acilir__liste .po-ikon { color: var(--po-metin-koyu); flex-shrink: 0; }

/* Durum şeridi: tek kart, eşit sütunlar; verisi olmayan hücre basılmaz, kalanlar genişler */
.po-serit {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--po-yuzey); border: 1px solid var(--po-cizgi); border-radius: var(--po-r-10);
}
.po-serit__hucre {
  display: flex; flex-direction: column; justify-content: center; gap: var(--po-b-4);
  min-width: 0; padding: var(--po-b-14) 18px;
  border-right: 1px solid var(--po-cizgi-ic);
}
.po-serit__hucre:last-child { border-right: 0; }
.po-serit__hucre--anahtar { flex-direction: row; align-items: center; gap: var(--po-b-12); }
.po-serit__metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--po-b-4); }
.po-serit__hucre form { margin: 0; display: flex; }
.po-serit__etiket { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-2); }
.po-serit__deger {
  display: flex; align-items: center; gap: var(--po-b-8); flex-wrap: wrap;
  font: 600 var(--po-y-15) var(--po-yazi); color: var(--po-murekkep);
}
.po-serit__deger--taslak { color: var(--po-taslak); }
.po-serit__deger--tehlike { color: var(--po-tehlike); }
.po-serit__ek { font-weight: 400; color: var(--po-metin-2); }
.po-serit__nokta { width: 8px; height: 8px; border-radius: var(--po-r-tam); background: var(--po-yayinda); flex-shrink: 0; }

/* Büyük anahtar (şeritte; demo 40×24) */
.po-anahtar--buyuk { width: 40px; height: 24px; }
.po-anahtar--buyuk .po-anahtar__topuz { width: 18px; height: 18px; }
.po-anahtar--buyuk[aria-checked="true"] .po-anahtar__topuz { transform: translateX(16px); }
.po-anahtar:focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }

/* İki kolonlu bloklar (1.5 : 1). Tek blok kalırsa tam genişlik. */
.po-genel-izgara { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--po-b-20); align-items: start; }
.po-genel-izgara > :only-child { grid-column: 1 / -1; }
.po-genel-izgara:empty { display: none; }

/* Blok: beyaz kart, başlık + satırlar (Genel Bakış) */
.po-blok {
  min-width: 0;
  background: var(--po-yuzey); border: 1px solid var(--po-cizgi); border-radius: var(--po-r-10);
  display: flex; flex-direction: column; overflow: hidden;
}
.po-blok__bas { display: flex; align-items: center; gap: var(--po-b-12); padding: var(--po-b-16) var(--po-b-20) var(--po-b-10); }
.po-blok__bas h2 { flex: 1 1 auto; margin: 0; font: 600 var(--po-y-15) var(--po-yazi); }
.po-blok__bas a { font: var(--po-y-13) var(--po-yazi); color: var(--po-baglanti); text-decoration: none; white-space: nowrap; }
.po-blok__bas a:hover { color: var(--po-baglanti-hover); text-decoration: underline; }
.po-blok__bos { padding: var(--po-b-12) var(--po-b-20) var(--po-b-20); font: var(--po-y-14) var(--po-yazi); color: var(--po-metin-2); }
.po-sayfa--tum > .po-blok__bos { padding: 0; }

/* İçerik durumu tablosu */
.po-durum-tablo__bas,
.po-durum-tablo__satir {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.3fr) 44px;
  padding: 0 var(--po-b-20);
}
.po-durum-tablo__bas { padding-top: var(--po-b-8); padding-bottom: var(--po-b-8); font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-2); border-bottom: 1px solid var(--po-cizgi-ic); }
.po-durum-tablo__satir { min-height: 46px; border-bottom: 1px solid var(--po-cizgi-satir); font: var(--po-y-14) var(--po-yazi); }
.po-durum-tablo__satir:last-child { border-bottom: 0; }
.po-durum-tablo__satir:hover { background: var(--po-satir-hover); }
.po-durum-tablo__ad { display: flex; align-items: center; gap: var(--po-b-6); min-width: 0; flex-wrap: wrap; }
.po-durum-tablo__ad a { font-weight: 500; color: var(--po-murekkep); text-decoration: none; }
.po-durum-tablo__ad a:hover { color: var(--po-baglanti); }
.po-durum-tablo__sayi { font: 400 var(--po-y-13) var(--po-yazi-mono); font-variant-numeric: tabular-nums; }
.po-durum-tablo__sayi.is-soluk { color: var(--po-metin-2); }
.po-durum-tablo__sayi.is-var { color: var(--po-yayinda); }
.po-durum-tablo__son { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-durum-tablo__yeni { display: flex; justify-content: flex-end; }
.po-durum-tablo__mobil { display: none; }
.po-ikon-dugme--cerceve { border: 1px solid var(--po-cizgi); border-radius: var(--po-r-7); color: var(--po-murekkep); }
.po-sabit-isaret { display: inline-flex; color: var(--po-sabit); }
.po-sabit-isaret .po-ikon,
.po-menu-sabit .po-ikon { fill: currentColor; }

/* Sizi bekleyenler */
.po-bekleyen {
  display: flex; align-items: center; gap: var(--po-b-14);
  padding: var(--po-b-14) var(--po-b-20); border-top: 1px solid var(--po-cizgi-satir);
  color: var(--po-murekkep); text-decoration: none;
}
.po-sayfa .po-bekleyen:hover { background: var(--po-satir-hover); color: var(--po-murekkep); }
.po-bekleyen > .po-ikon { color: var(--po-metin-3); flex-shrink: 0; }
.po-bekleyen__sayi { width: 36px; flex-shrink: 0; font: 500 22px/28px var(--po-yazi-mono); font-variant-numeric: tabular-nums; }
.po-bekleyen__sayi--bilgi { color: var(--po-baglanti); }
.po-bekleyen__sayi--taslak { color: var(--po-taslak); }
.po-bekleyen__sayi--soluk { color: var(--po-metin-2); }
.po-bekleyen__metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--po-b-2); }
.po-bekleyen__ad { font: 500 var(--po-y-14) var(--po-yazi); }
.po-bekleyen__not { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Son talepler (talepler modülünün bloğu) */
.po-talep {
  display: flex; align-items: center; gap: var(--po-b-14);
  min-height: 52px; padding: var(--po-b-8) var(--po-b-20); border-top: 1px solid var(--po-cizgi-satir);
  color: var(--po-murekkep); text-decoration: none;
}
.po-sayfa .po-talep:hover { background: var(--po-satir-hover); color: var(--po-murekkep); }
.po-talep__nokta { width: 8px; height: 8px; border-radius: var(--po-r-tam); flex-shrink: 0; background: transparent; }
.po-talep.is-yeni .po-talep__nokta { background: var(--po-baglanti); }
.po-talep__ad { width: 150px; flex-shrink: 0; font: 400 var(--po-y-14) var(--po-yazi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-talep.is-yeni .po-talep__ad { font-weight: 600; }
.po-talep__konu { width: 110px; flex-shrink: 0; min-width: 0; overflow: hidden; }
.po-talep__konu .po-rozet { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.po-talep__mesaj { flex: 1 1 auto; min-width: 0; font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-talep__zaman { margin-left: auto; flex-shrink: 0; font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-2); }

/* Son işlemler */
.po-islem { display: flex; align-items: flex-start; gap: var(--po-b-12); padding: var(--po-b-10) var(--po-b-20); border-top: 1px solid var(--po-cizgi-satir); }
.po-islem__avatar {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--po-r-tam);
  background: var(--po-avatar); display: flex; align-items: center; justify-content: center;
  font: 600 var(--po-y-11) var(--po-yazi); color: var(--po-murekkep);
}
.po-islem__metin { flex: 1 1 auto; min-width: 0; font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-koyu); overflow-wrap: anywhere; }
.po-islem__metin b { font-weight: 600; color: var(--po-murekkep); }
.po-islem__zaman { flex-shrink: 0; font: var(--po-y-12) var(--po-yazi); line-height: 18px; color: var(--po-metin-2); }

/* Tüm içerik: bölüm başlığı + kutucuk ızgarası (4 → 3 → 2 → 1) */
.po-tur-bolumu { display: flex; flex-direction: column; gap: var(--po-b-12); }
.po-bolum-bas { display: flex; align-items: baseline; gap: var(--po-b-10); flex-wrap: wrap; }
.po-bolum-bas h2 { margin: 0; font: 600 var(--po-y-13) var(--po-yazi); letter-spacing: .04em; text-transform: uppercase; color: var(--po-metin-koyu); }
.po-bolum-bas span { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-kutucuklar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--po-b-14); }
.po-kutucuklar--yonetim { gap: var(--po-b-12); }
.po-kutucuklar > li { min-width: 0; display: flex; }
.po-kutucuklar > li > .po-kutucuk { flex: 1 1 auto; }
.po-kutucuk {
  min-width: 0;
  background: var(--po-yuzey); border: 1px solid var(--po-cizgi); border-radius: var(--po-r-10);
  padding: var(--po-b-16); display: flex; flex-direction: column; gap: var(--po-b-14);
  color: var(--po-murekkep); text-decoration: none;
  transition: border-color var(--po-sure-kisa) var(--po-egri), box-shadow var(--po-sure-kisa) var(--po-egri);
}
.po-kutucuk:hover { border-color: var(--po-cizgi-kesikli); box-shadow: var(--po-golge-kutucuk); }
.po-sayfa a.po-kutucuk:hover { color: var(--po-murekkep); }
.po-kutucuk:target { border-color: var(--po-baglanti); }
.po-kutucuk__ust { display: flex; align-items: center; gap: var(--po-b-12); }
.po-kutucuk__ust form { margin: 0; display: flex; }
.po-kutucuk__ikon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--po-r-8);
  background: var(--po-hover); display: flex; align-items: center; justify-content: center; color: var(--po-murekkep);
}
.po-kutucuk__metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--po-b-2); }
.po-kutucuk__ad { font: 600 var(--po-y-15) var(--po-yazi); overflow-wrap: anywhere; }
.po-kutucuk__ozet { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-kutucuk__vurgu { font-weight: 600; color: var(--po-baglanti); }
.po-kutucuk__alt { display: flex; gap: var(--po-b-8); margin-top: auto; }
.po-kutucuk__alt .po-dugme { flex: 1 1 0; gap: var(--po-b-6); }
.po-kutucuk--gelen { flex-direction: row; align-items: center; gap: var(--po-b-12); }
.po-kutucuk--yonetim { flex-direction: row; align-items: center; gap: var(--po-b-12); padding: var(--po-b-12) var(--po-b-14); background: var(--po-yuzey-2); }
.po-kutucuk--yonetim > .po-ikon { color: var(--po-metin-koyu); flex-shrink: 0; }
.po-kutucuk--yonetim .po-kutucuk__ad { font-size: 14px; }
.po-kutucuk--yonetim .po-kutucuk__ozet { font-size: 12px; line-height: 16px; }

/* Sabitle (yıldız) */
.po-sabitle {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--po-r-7);
  background: transparent; color: var(--po-ikon-soluk); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.po-sabitle:hover { background: var(--po-kontrol-hover); color: var(--po-murekkep); }
.po-sabitle[aria-pressed="true"] { color: var(--po-sabit); }
.po-sabitle[aria-pressed="true"] .po-ikon { fill: currentColor; }

/* Sol menüde sabitlenen türün yıldızı */
.po-menu-sabit { margin-left: auto; display: inline-flex; color: var(--po-sabit); flex-shrink: 0; }
.po-menu-sabit + .badge { margin-left: 0; }

.po-arama--tur { width: 280px; height: var(--po-h-38); }

@media (max-width: 1199px) {
  .po-kutucuklar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-serit { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-serit { overflow: hidden; }
  .po-serit__hucre { border-bottom: 1px solid var(--po-cizgi-ic); margin-bottom: -1px; }
}
@media (max-width: 1023px) {
  .po-kutucuklar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-genel-izgara { grid-template-columns: minmax(0, 1fr); }
  .po-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .po-kutucuklar { grid-template-columns: minmax(0, 1fr); }
  .po-serit__hucre { padding: var(--po-b-12) var(--po-b-14); }
  .po-arama--tur { width: 100%; height: var(--po-h-44); }
  .po-sayfa--genel .po-sayfa-basi__eylemler { flex-wrap: wrap; }
  .po-sayfa--genel .po-sayfa-basi__eylemler > * { flex: 1 1 auto; }
  .po-sayfa--genel .po-sayfa-basi__eylemler .po-dugme { width: 100%; height: var(--po-h-44); }
  .po-acilir__liste { left: 0; right: 0; min-width: 0; }
  .po-acilir__liste a { min-height: var(--po-h-44); }

  /* tablo: ad + özet satırı, sayı sütunları gizli */
  .po-durum-tablo__bas { display: none; }
  .po-durum-tablo__satir { grid-template-columns: minmax(0, 1fr) 44px; padding: var(--po-b-8) var(--po-b-16); }
  .po-durum-tablo__sayi,
  .po-durum-tablo__son { display: none; }
  .po-durum-tablo__mobil { display: block; flex-basis: 100%; font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
  .po-ikon-dugme--cerceve { width: var(--po-h-44); height: var(--po-h-44); }

  .po-blok__bas { padding: var(--po-b-14) var(--po-b-16) var(--po-b-8); }
  .po-blok__bos { padding: var(--po-b-8) var(--po-b-16) var(--po-b-16); }
  .po-bekleyen,
  .po-islem { padding-left: var(--po-b-16); padding-right: var(--po-b-16); }
  .po-talep { flex-wrap: wrap; gap: var(--po-b-4) var(--po-b-10); padding: var(--po-b-10) var(--po-b-16); }
  .po-talep__ad { width: auto; flex: 1 1 auto; }
  .po-talep__konu { display: none; }
  .po-talep__mesaj { order: 5; flex-basis: 100%; padding-left: 18px; }
  .po-sabitle { width: var(--po-h-44); height: var(--po-h-44); }
  .po-kutucuk__alt .po-dugme { height: var(--po-h-44); }
}

/* ==========================================================================
   İ7a — ortak liste: durum sekmeleri ('grup'), satır rozetleri;
   galeri: görsel açıklaması. Yalnız token (açık ve koyu mod aynı kuralla).
   ========================================================================== */

/* durum sekmeleri: yayın sekmelerinin altında hap biçimli ikinci satır */
.po-grup-sekmeleri {
  display: flex; gap: var(--po-b-6); padding: var(--po-b-12) 0 0;
  overflow-x: auto; scrollbar-width: none;
}
.po-grup-sekmeleri::-webkit-scrollbar { display: none; }
.po-grup-sekmesi {
  display: inline-flex; align-items: center; gap: var(--po-b-6); flex-shrink: 0;
  height: var(--po-h-30); padding: 0 var(--po-b-10);
  border: 1px solid var(--po-cizgi-kontrol); border-radius: var(--po-r-6);
  font: 400 var(--po-y-13) var(--po-yazi); color: var(--po-metin-2);
  text-decoration: none; white-space: nowrap;
}
.po-grup-sekmesi:hover { background: var(--po-hover); color: var(--po-murekkep); }
.po-grup-sekmesi:focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }
.po-grup-sekmesi[aria-current="page"] {
  background: var(--po-etkin); border-color: transparent; color: var(--po-murekkep); font-weight: 600;
}
.po-grup-sekmesi .po-sayi { padding: 0 6px; }
.po-grup-sekmesi[aria-current="page"] .po-sayi { background: var(--po-yuzey); }

/* satır rozetleri: durum, "Ana sayfada", "SEO eksik" (başlığın altında tek satır) */
.po-tablo__rozetler { display: flex; flex-wrap: wrap; gap: var(--po-b-4); margin-top: var(--po-b-4); }
a.po-rozet { text-decoration: none; }
a.po-rozet:hover { text-decoration: underline; }
a.po-rozet:focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }

/* açıklamalı galeri öğesi: görsel kutusu üstte, açıklama kutusu altta */
.po-galeri__oge--aciklamali { display: flex; flex-direction: column; gap: var(--po-b-6); min-width: 0; }
/* yükleme kutusu satırın yüksekliğini alır; oranı genişliği taşırmasın */
.po-galeri--aciklamali .po-galeri__ekle .po-gorsel-ekle { aspect-ratio: auto; min-height: 0; }
.po-galeri__aciklama.po-girdi { height: var(--po-h-34); font: var(--po-y-13) var(--po-yazi); padding: 0 var(--po-b-8); }
.po-galeri__oge--aciklamali:has(.po-gorsel__kaldir :checked) .po-galeri__aciklama { opacity: .45; }
[data-po-yerel-sirala] > .po-galeri__oge--aciklamali.is-suruklenen { opacity: .55; }

@media (max-width: 767px) {
  .po-grup-sekmesi { height: var(--po-h-44); padding: 0 var(--po-b-12); font: 400 var(--po-y-14) var(--po-yazi); }
  .po-galeri__aciklama.po-girdi { height: var(--po-h-44); font-size: 16px; }
}

/* ============================================================
   İ7b — tek görselli tür (galeri sınırı 1: ör. duyuru görseli)
   Tek görselde "Kapak" rozeti anlamsız: basılmaz.
   ============================================================ */
.po-galeri--tek .po-rozet--kapak,
.po-galeri--tek > .po-galeri__oge:first-child .po-rozet--kapak { display: none; }

/* ============================================================
   İ7c — tekrarlı alt kayıt (IcerikTekrar): çok alanlı satır.
   Satır = çerçeveli kutu: baş satırı (tutamaç · "Özellik 2" ·
   Sitede görünsün · ↑ ↓ · ✕), altında iki sütunlu alanlar.
   Liste ekranında türün genel listesi (ör. renk seçenekleri) kendi
   kartında. Yalnız token (açık ve koyu mod aynı kuralla).
   ============================================================ */
.po-tekrar--kayit { min-width: 0; }
.po-tekrar--kayit .po-tekrar__satirlar { gap: var(--po-b-10); }
.po-tekrar__satir.po-tekrar__kayit {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--po-b-10);
  padding: var(--po-b-10) var(--po-b-14) var(--po-b-14);
  border: 1px solid var(--po-cizgi); border-radius: var(--po-r-8); background: var(--po-yuzey-2);
  min-width: 0;
}
.po-tekrar__kayit-bas { display: flex; align-items: center; gap: var(--po-b-6); min-height: var(--po-h-34); }
.po-tekrar__no { flex: 1 1 auto; font: 600 var(--po-y-13) var(--po-yazi); color: var(--po-metin-koyu); min-width: 0; }
.po-tekrar__gorunur {
  display: inline-flex; align-items: center; gap: var(--po-b-8); margin-right: var(--po-b-4);
  font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); cursor: pointer; white-space: nowrap;
}
.po-tekrar__kaldir { display: inline-flex; align-items: center; gap: var(--po-b-6); font: var(--po-y-13) var(--po-yazi); color: var(--po-tehlike); }
.po-tekrar__alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--po-b-14) var(--po-b-16); }
.po-tekrar__alanlar .po-alan { min-width: 0; }
.po-tekrar__alanlar .po-alan--genis { grid-column: 1 / -1; }
.po-tekrar__alanlar .po-girdi { background: var(--po-kontrol); }
.po-tekrar__kayit.is-gizli .po-tekrar__alanlar { opacity: .6; }
.po-tekrar__kayit:has(.po-tekrar__kaldir :checked) .po-tekrar__alanlar { opacity: .45; }
[data-po-yerel-sirala] > .po-tekrar__kayit.is-suruklenen { opacity: .55; }
.po-tekrar--kayit.is-hatali .po-tekrar__satirlar { outline: 1px solid var(--po-tehlike); outline-offset: var(--po-b-4); border-radius: var(--po-r-8); }

/* satırdaki görsel: küçük önizleme + yükleme kutusu yan yana */
.po-tekrar__gorsel { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: var(--po-b-12); }
.po-tekrar__gorsel .po-gorsel-ekle { aspect-ratio: 16 / 10; }

/* renk seçici: renk kutusu + kodu */
.po-renk-secici { display: inline-flex; align-items: center; gap: var(--po-b-10); }
.po-girdi.po-girdi--renk { width: 56px; height: var(--po-h-40); padding: var(--po-b-4); cursor: pointer; }
.po-renk-secici__kod { font: var(--po-y-13) var(--po-yazi-mono); color: var(--po-metin-2); }

/* liste ekranındaki genel liste kartı */
.po-tekrar-karti { display: flex; flex-direction: column; gap: var(--po-b-16); }
.po-tekrar-karti > form { display: flex; flex-direction: column; gap: var(--po-b-16); }
.po-tekrar-karti .po-kart__bas h2 { display: inline-flex; align-items: center; gap: var(--po-b-8); }
.po-tekrar-karti__alt { display: flex; justify-content: flex-end; }

@media (max-width: 767px) {
  .po-tekrar__alanlar { grid-template-columns: minmax(0, 1fr); }
  .po-tekrar__satir.po-tekrar__kayit { padding: var(--po-b-8) var(--po-b-10) var(--po-b-12); }
  .po-tekrar__kayit-bas { flex-wrap: wrap; }
  .po-tekrar__no { flex-basis: 40%; }
  .po-tekrar__gorunur { order: 5; flex-basis: 100%; }
  .po-tekrar__gorsel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-tekrar-karti__alt .po-dugme { width: 100%; justify-content: center; }
}

/* sık düzen (yalnız tek satırlık alanlar, ör. renk seçenekleri): satır tek çizgi —
   tutamaç · alanlar · görünürlük · ↑ ↓ · ✕. Alan adları ve "Seçenek 2" ekran
   okuyucuda kalır, görünmez (yer tutucu alan adını gösterir). */
.po-tekrar--sik .po-tekrar__satirlar { gap: var(--po-b-8); }
.po-tekrar--sik .po-tekrar__satir.po-tekrar__kayit {
  position: relative; flex-direction: row; align-items: center; gap: var(--po-b-8);
  padding: var(--po-b-6) var(--po-b-8);
}
.po-tekrar--sik .po-tekrar__kayit-bas { display: contents; }
.po-tekrar--sik .po-tekrar__no,
.po-tekrar--sik .po-tekrar__alanlar .po-alan__etiket,
.po-tekrar--sik .po-tekrar__gorunur > span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.po-tekrar--sik .po-tekrar__alanlar { order: 1; flex: 1 1 auto; display: flex; align-items: center; gap: var(--po-b-8); min-width: 0; }
.po-tekrar--sik .po-tekrar__alanlar .po-alan { flex: 1 1 auto; gap: 0; }
.po-tekrar--sik .po-tekrar__alanlar .po-alan:has(.po-renk-secici) { flex: 0 0 auto; }
.po-tekrar--sik .po-tekrar__alanlar .po-girdi:not(.po-girdi--renk) { height: var(--po-h-38); }
.po-tekrar--sik .po-tekrar__gorunur { order: 2; margin: 0 var(--po-b-4); }
.po-tekrar--sik .po-tekrar__ok,
.po-tekrar--sik [data-po-tekrar-sil],
.po-tekrar--sik .po-tekrar__kaldir { order: 3; }
@media (max-width: 767px) {
  .po-tekrar--sik .po-tekrar__satir.po-tekrar__kayit { flex-wrap: wrap; padding: var(--po-b-8); }
  .po-tekrar--sik .po-tekrar__alanlar { flex-basis: 100%; order: 0; }
  .po-tekrar--sik .po-tekrar__tutamac { order: 1; }
  .po-tekrar--sik .po-tekrar__gorunur { margin-right: auto; }
}
/* tekrarlı bölüm kendi kartında: sekmedeki kartlar arası boşluk; alanlar üstten hizalı */
.po-sekme-paneli > .po-kart + .po-kart { margin-top: var(--po-b-16); }
.po-tekrar__alanlar { align-items: start; }
.po-tekrar__alanlar .po-alan > .po-alan__etiket { flex: 0 0 auto; }

/* ============================================================
   İ7d — Menüler (ağaç ekranı, modül ekranı: moduller/menu/panel).
   Ortak liste ekranına taşınmadı (ağaç, düz liste değil); kabuğun
   bileşenleriyle çizilir. Site şeması = konum seçimi, ağaç kartı,
   site sayfaları havuzu, düzenleme ekranındaki seçim parçaları.
   Yalnız token (açık ve koyu mod aynı kuralla).
   ============================================================ */
/* site şeması: sitenin yukarıdan aşağı resmi, her kat bir konum */
.po-menu-sema { display: flex; flex-direction: column; gap: var(--po-b-6); }
.po-menu-sema__kat {
  display: flex; align-items: center; gap: var(--po-b-12);
  min-height: var(--po-h-44); padding: var(--po-b-8) var(--po-b-14);
  background: var(--po-yuzey); color: var(--po-murekkep); text-decoration: none;
  border: 1px solid var(--po-cizgi); border-left: 3px solid transparent; border-radius: var(--po-r-10);
  transition: background-color var(--po-sure-kisa) var(--po-egri), border-color var(--po-sure-kisa) var(--po-egri);
}
.po-menu-sema__kat:hover { background: var(--po-yuzey-2); color: var(--po-murekkep); }
.po-menu-sema__kat:focus-visible { outline: var(--po-odak); outline-offset: var(--po-odak-bosluk); }
.po-menu-sema__kat[aria-current="page"] { background: var(--po-yuzey-2); border-left-color: var(--po-baglanti); }
.po-menu-sema__kat[aria-current="page"] .po-sayi { background: var(--po-etkin); }
.po-menu-sema__ad { flex: 0 0 150px; font: 600 var(--po-y-13) var(--po-yazi); }
.po-menu-sema__ogeler { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--po-b-10); }
.po-menu-sema__oge { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-koyu); white-space: nowrap; }
.po-menu-sema__oge small { margin-left: 3px; font: var(--po-y-11) var(--po-yazi); color: var(--po-metin-2); }
.po-menu-sema__oge.is-gizli { color: var(--po-metin-3); text-decoration: line-through; }
.po-menu-sema__fazla { color: var(--po-metin-2); }
.po-menu-sema__bos { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-menu-sema__govde {
  display: flex; align-items: center; justify-content: center; min-height: 28px;
  border: 1px dashed var(--po-cizgi-kesikli); border-radius: var(--po-r-10);
  font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-3);
}

/* ağaç kartı */
.po-menu-kart__bas { padding: 18px var(--po-b-24) var(--po-b-6); flex-wrap: wrap; }
.po-menu-kart__ipucu { margin: 0; padding: 0 var(--po-b-24) var(--po-b-12); font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-menu-agac { list-style: none; margin: 0; padding: 0; }
.po-menu-agac--alt { padding-left: var(--po-b-24); }
.po-menu-agac--alt:empty { display: none; }
.po-menu-oge__satir {
  display: flex; align-items: center; gap: var(--po-b-10);
  min-height: 56px; padding: var(--po-b-8) var(--po-b-16) var(--po-b-8) var(--po-b-12);
  border-top: 1px solid var(--po-cizgi-satir); background: var(--po-yuzey);
}
.po-menu-agac--alt .po-menu-oge__satir { border-left: 2px solid var(--po-cizgi); }
.po-menu-oge__satir:hover { background: var(--po-yuzey-2); }
.po-menu-oge__tutamac { color: var(--po-ikon-soluk); cursor: grab; touch-action: none; }
.po-menu-agac.is-surukleniyor .po-menu-oge__tutamac { cursor: grabbing; }
.po-menu-oge.is-suruklenen > .po-menu-oge__satir { opacity: .55; }
.po-menu-oge__ikon { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; color: var(--po-metin-koyu); }
.po-menu-oge__metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.po-menu-oge__bas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--po-b-6); }
.po-menu-oge__ad { font: 600 var(--po-y-14) var(--po-yazi); color: var(--po-murekkep); text-decoration: none; }
.po-menu-oge__ad:hover { color: var(--po-baglanti); text-decoration: underline; }
.po-menu-oge__hedef { font: var(--po-y-12) var(--po-yazi); color: var(--po-metin-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-menu-oge__adres { font-family: var(--po-yazi-mono); }
.po-menu-oge__satir.is-gizli .po-menu-oge__ad,
.po-menu-oge__satir.is-gizli .po-menu-oge__ikon { color: var(--po-metin-3); }
.po-menu-oge__eylemler { display: flex; align-items: center; gap: var(--po-b-2); flex-shrink: 0; }
.po-menu-oge__eylemler .po-anahtar { margin: 0 var(--po-b-8) 0 var(--po-b-6); }
.po-menu-oge__eylemler .po-dugme--kucuk { margin-right: var(--po-b-2); gap: var(--po-b-6); }
.po-menu-oge__sil:hover { background: var(--po-tehlike-zemin); color: var(--po-tehlike); }

/* site sayfaları havuzu */
.po-menu-havuz__liste { list-style: none; margin: 0; padding: 0; }
.po-menu-havuz__satir {
  display: flex; align-items: center; gap: var(--po-b-12);
  min-height: 52px; padding: var(--po-b-8) var(--po-b-24); border-top: 1px solid var(--po-cizgi-satir);
}
.po-menu-havuz__ad { flex: 0 0 220px; font: 500 var(--po-y-14) var(--po-yazi); color: var(--po-murekkep); }
.po-menu-havuz__yer { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--po-b-6); min-width: 0; }
.po-menu-havuz__not { font: var(--po-y-13) var(--po-yazi); color: var(--po-metin-2); }
.po-menu-havuz__eylem { flex-shrink: 0; }

/* düzenleme ekranı */
.po-menu-duzen .po-kart > .po-alan + .po-alan,
.po-menu-duzen .po-kart > .po-alan + .po-menu-ikiz,
.po-menu-duzen .po-kart > .po-menu-ikiz + .po-alan { margin-top: 0; }
.po-menu-ikiz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--po-b-20) var(--po-b-16); }
/* fieldset'te flex düzeni tarayıcıdan tarayıcıya kayıyor: blok + elle aralık */
.po-menu-duzen fieldset.po-alan { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.po-menu-duzen fieldset.po-alan > legend { display: block; width: 100%; margin: 0 0 var(--po-b-6); }
.po-menu-duzen fieldset.po-alan > .po-alan__yardim { margin: var(--po-b-6) 0 0; }
.po-menu-duzen .po-bolumlu__secenek span { padding: 0 var(--po-b-8); text-align: center; }
.po-menu-duzen .po-anahtar-satiri--ilk { padding-top: 0; border-top: 0; }
/* bağlantı tipine göre alanlar: yalnız seçilen tipin alanı görünür */
.po-menu-duzen:has(input[name="tip"][value="sayfa"]:checked) [data-po-menu-tip]:not([data-po-menu-tip~="sayfa"]),
.po-menu-duzen:has(input[name="tip"][value="url"]:checked) [data-po-menu-tip]:not([data-po-menu-tip~="url"]),
.po-menu-duzen:has(input[name="tip"][value="capa"]:checked) [data-po-menu-tip]:not([data-po-menu-tip~="capa"]) { display: none; }
/* "Bir başlığın altında" seçili değilse üst öğe listesi gizli */
.po-menu-duzen:has(input[name="ust_secim"][value="0"]:checked) [data-po-menu-ust] { display: none; }
/* ikon seçici (ortak bileşen) kart içinde: alt boşluğu kartın aralığı verir */
.po-menu-duzen .ikon-secici { margin: 0; }
.po-menu-duzen .po-yan-kart .po-girdi--secim { width: 100%; }
.po-menu-sil { align-self: flex-start; color: var(--po-tehlike); }
.po-menu-sil:hover { color: var(--po-tehlike); }

@media (max-width: 1023px) {
  .po-menu-oge__satir { flex-wrap: wrap; row-gap: var(--po-b-6); }
  .po-menu-oge__metin { flex: 1 1 0; }
  .po-menu-oge__eylemler { flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .po-menu-sema__kat { flex-wrap: wrap; row-gap: var(--po-b-4); }
  .po-menu-sema__ad { flex: 1 1 auto; }
  .po-menu-sema__ogeler { order: 3; flex-basis: 100%; }
  .po-menu-sema__oge:nth-child(n+4) { display: none; }
  .po-menu-kart__bas { padding: var(--po-b-16) var(--po-b-16) var(--po-b-6); }
  .po-menu-kart__ipucu { padding: 0 var(--po-b-16) var(--po-b-12); }
  .po-menu-agac--alt { padding-left: var(--po-b-10); }
  .po-menu-oge__satir { padding: var(--po-b-8); gap: var(--po-b-6); }
  .po-menu-oge__metin { flex: 1 1 0; }
  .po-menu-oge__ikon:empty { display: none; }
  .po-menu-oge__eylemler { justify-content: flex-start; gap: 0; flex-wrap: nowrap; }
  /* dar ekranda silme düzenleme ekranında ("Menüden sil"); satır tek sıra kalır */
  .po-menu-oge__sil { display: none; }
  .po-menu-oge__eylemler .po-anahtar { margin: 0 var(--po-b-6); }
  /* dar ekranda Düzenle kalem simgesine iner (ad da düzenlemeyi açar) */
  .po-menu-oge__duzenle { width: var(--po-h-44); padding: 0; margin-left: auto; border-color: transparent; background: transparent; }
  .po-menu-oge__duzenle .po-dugme__metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .po-menu-havuz__satir { flex-wrap: wrap; padding: var(--po-b-10) var(--po-b-16); }
  .po-menu-havuz__ad { flex: 1 1 100%; }
  .po-menu-ikiz { grid-template-columns: minmax(0, 1fr); }
  /* altta sabit kaydet çubuğu son satırları örtmesin */
  .po-menu:has(.po-kaydet-cubugu) { padding-bottom: calc(var(--po-h-60) + 16px); }
}