/* Otomatik Okul Ders Programı — Öğretmenler Odası Network. TEST293.
   Tüm seçiciler .oon-dd ön ekiyle sınırlıdır; sitenin başka bölümlerini etkilemez.
   Telefon öncelikli: geniş tablolar ve ızgaralar küçük ekranda kaydırılabilir. */

.oon-view-ddagitim,
.oon-dd {
  --dd-navy: #241b4e;
  --dd-mor: #6b3fa0;
  --dd-mor-acik: #f1eaf9;
  --dd-krem: #faf8f3;
  --dd-ink: #241b33;
  --dd-soluk: #675f78;
  --dd-cizgi: #ddd3ea;
  --dd-yesil: #1e6b3a;
  --dd-yesil-bg: #ddf2e3;
  --dd-amber: #8a5a00;
  --dd-amber-bg: #fff1cc;
  --dd-kirmizi: #9b1c1c;
  --dd-kirmizi-bg: #fbe0dd;
  color: var(--dd-ink);
}
.oon-dd { max-width: 1180px; margin: 0 auto; padding: 0 16px 56px; }
.oon-dd *, .oon-dd *::before, .oon-dd *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- başlıklar */
.oon-dd-baslik { margin: 20px 0 14px; }
.oon-dd-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--dd-mor); }
.oon-dd-baslik h1 { margin: 0 0 6px; font-size: clamp(22px, 5vw, 30px); line-height: 1.22; color: var(--dd-navy); }
.oon-dd-lead { margin: 0; color: var(--dd-soluk); font-size: 15px; line-height: 1.6; max-width: 72ch; }
.oon-dd-h2 { margin: 26px 0 10px; font-size: 18px; color: var(--dd-navy); }
.oon-dd-h3 { margin: 18px 0 8px; font-size: 15px; color: var(--dd-navy); }
.oon-dd-kucuk-not { margin: 6px 0; font-size: 13px; line-height: 1.55; color: var(--dd-soluk); }

/* --------------------------------------------------------------- üst şerit */
.oon-dd-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 6px; }
.oon-dd-geri { font-size: 14px; color: var(--dd-mor); text-decoration: none; font-weight: 600; }
.oon-dd-geri:hover { text-decoration: underline; }
.oon-dd-ust__ad { font-size: 14px; color: var(--dd-soluk); font-weight: 600; }

/* -------------------------------------------------------------- düğmeler */
.oon-dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px;
  background: var(--dd-navy); color: #fff; border: 1px solid var(--dd-navy); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.3; transition: filter .15s ease; }
.oon-dd-btn:hover { filter: brightness(1.15); color: #fff; }
.oon-dd-btn--buyuk { padding: 13px 22px; font-size: 15px; }
.oon-dd-btn--kilitli { opacity: .6; }
.oon-dd-mini { padding: 5px 10px; border-radius: 7px; background: var(--dd-mor-acik); color: var(--dd-navy); border: 1px solid var(--dd-cizgi);
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.oon-dd-mini--ekle { background: var(--dd-yesil-bg); color: var(--dd-yesil); }
.oon-dd-mini--sil { background: var(--dd-kirmizi-bg); color: var(--dd-kirmizi); }

/* -------------------------------------------------------------------- kutu */
.oon-dd-kutu { margin: 16px 0; padding: 16px 18px; border-radius: 12px; background: var(--dd-krem); border: 1px solid var(--dd-cizgi); }
.oon-dd-kutu h2 { margin: 0 0 6px; font-size: 16px; color: var(--dd-navy); }
.oon-dd-kutu p { margin: 4px 0; font-size: 14px; line-height: 1.55; }
.oon-dd-kutu--uyari { background: var(--dd-amber-bg); border-color: #f0dba3; color: var(--dd-amber); }
.oon-dd-kutu--basari { background: var(--dd-yesil-bg); border-color: #bfe4cb; color: var(--dd-yesil); }
.oon-dd-kutu--bilgi { background: #fff; }
.oon-dd-kutu--cta { background: var(--dd-mor-acik); border-color: #d9c6ee; }

/* ------------------------------------------------------------------ sekmeler */
.oon-dd-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; padding-bottom: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.oon-dd-sekme { padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--dd-cizgi); font-size: 13px;
  color: var(--dd-soluk); cursor: pointer; font-family: inherit; white-space: nowrap; }
.oon-dd-sekme--aktif { background: var(--dd-navy); border-color: var(--dd-navy); color: #fff; font-weight: 600; }
.oon-dd-app { position: relative; min-height: 120px; }
.oon-dd-panel { display: none; }
.oon-dd-panel--aktif { display: block; }
.oon-dd-yukleniyor { color: var(--dd-soluk); font-size: 14px; padding: 24px 0; }

/* -------------------------------------------------------------------- kart */
.oon-dd-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.oon-dd-kart { padding: 16px; border-radius: 12px; border: 1px solid var(--dd-cizgi); background: #fff; }
.oon-dd-kart h3 { margin: 0 0 4px; font-size: 15px; color: var(--dd-navy); }
.oon-dd-kart__alt { margin: 0 0 8px; font-size: 13px; color: var(--dd-soluk); }

/* ------------------------------------------------------------------- form */
.oon-dd-form { margin: 14px 0; }
.oon-dd-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.oon-dd-genis { grid-column: 1 / -1; }
.oon-dd-alanlar label, .oon-dd-genis { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--dd-navy); }
.oon-dd-alanlar input[type="text"], .oon-dd-alanlar input[type="number"], .oon-dd-alanlar select {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--dd-cizgi); font-size: 14px; font-family: inherit; background: #fff; }
.oon-dd-onay { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; display: inline-flex; margin: 4px 12px 0 0; }
fieldset.oon-dd-genis { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
fieldset.oon-dd-genis legend { font-size: 13px; font-weight: 700; color: var(--dd-navy); padding: 0 0 6px; width: 100%; }
.oon-dd-kayit-durum { margin-left: 10px; font-size: 13px; color: var(--dd-yesil); }

/* ------------------------------------------------------------------ tablo */
.oon-dd-tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.oon-dd-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
.oon-dd-tablo th, .oon-dd-tablo td { padding: 7px 9px; border: 1px solid var(--dd-cizgi); text-align: left; vertical-align: middle; }
.oon-dd-tablo thead th { background: var(--dd-mor-acik); color: var(--dd-navy); font-size: 12.5px; }
.oon-dd-tablo--form input, .oon-dd-tablo--form select { width: 100%; padding: 6px 7px; border-radius: 6px; border: 1px solid var(--dd-cizgi); font-size: 13px; font-family: inherit; }
.oon-dd-tablo--form input[type="checkbox"] { width: auto; }
.oon-dd-tablo--form input[type="color"] { padding: 2px; height: 30px; }
.oon-dd-alt-blok { margin: 20px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--dd-cizgi); background: #fff; }
.oon-dd-alt-blok h3 { margin: 0 0 6px; font-size: 14px; color: var(--dd-navy); }

/* ------------------------------------------------------------------ ızgara */
.oon-dd-izgara-panel { margin: 10px 0 18px; padding: 12px; border-radius: 10px; background: var(--dd-mor-acik); border: 1px solid var(--dd-cizgi); }
.oon-dd-izgara { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.oon-dd-izgara th, .oon-dd-izgara td { border: 1px solid var(--dd-cizgi); padding: 3px; text-align: center; }
.oon-dd-izgara thead th { background: #fff; color: var(--dd-navy); }
.oon-dd-hgo { width: 100%; min-height: 30px; border-radius: 6px; border: 1px solid var(--dd-cizgi); background: #fff; cursor: pointer;
  font-size: 11px; font-family: inherit; color: var(--dd-soluk); padding: 4px 2px; line-height: 1.2; }
.oon-dd-hgo--kapali { background: var(--dd-kirmizi-bg); color: var(--dd-kirmizi); border-color: #edb9b3; font-weight: 600; }
.oon-dd-hgo--ogle { background: #eee; color: #888; cursor: not-allowed; }
.oon-dd-hgo--program { background: #fff; }
.oon-dd-hgo--kilit { background: var(--dd-amber-bg); border-color: #eecf8c; }

/* -------------------------------------------------------------- hücre popover
   TEST293 — hücreye tıklayınca açılan küçük seçim paneli; window.prompt()
   yerine geçer, tıklanan hücrenin hemen altında konumlanır. document.body'ye
   eklendiği için .oon-dd'nin CSS değişkenlerini miras almayabilir; bu yüzden
   renkler burada sabit (değişkensiz) yazılmıştır. */
.oon-dd-popover { position: absolute; z-index: 9999; min-width: 230px; max-width: min(320px, calc(100vw - 24px));
  background: #fff; border: 1px solid #ddd3ea; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(36,27,78,.2); padding: 10px; font-size: 13px; font-family: inherit; }
.oon-dd-popover-ic { display: flex; flex-direction: column; gap: 8px; }
.oon-dd-popover-baslik { margin: 0; font-size: 12.5px; font-weight: 700; color: #241b4e; }
.oon-dd-popover-sel { width: 100%; padding: 7px 8px; border-radius: 7px; border: 1px solid #ddd3ea;
  font-size: 13px; font-family: inherit; background: #fff; color: #241b33; }
.oon-dd-popover-btnler { display: flex; gap: 6px; justify-content: flex-end; }
.oon-dd-popover-buton { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; border: 1px solid transparent; }
.oon-dd-popover-buton--tamam { background: #241b4e; color: #fff; border-color: #241b4e; }
.oon-dd-popover-buton--tamam:hover { filter: brightness(1.15); }
.oon-dd-popover-buton--iptal { background: #f1eaf9; color: #241b4e; border-color: #ddd3ea; }
.oon-dd-popover-buton--iptal:hover { background: #e7daf3; }

/* ------------------------------------------------------------- ilerleme çubuğu */
.oon-dd-ilerleme { margin: 14px 0; }
.oon-dd-ilerleme__cubuk { height: 10px; border-radius: 999px; background: var(--dd-mor); width: 0%; transition: width .25s ease; }
.oon-dd-ilerleme { background: var(--dd-cizgi); border-radius: 999px; overflow: hidden; height: 10px; }
.oon-dd-ilerleme p { margin: 6px 0 0; font-size: 13px; color: var(--dd-soluk); }

/* ------------------------------------------------------------ program seçim */
.oon-dd-program-secim { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0; font-size: 13px; }
.oon-dd-program-secim select { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--dd-cizgi); font-family: inherit; }

/* -------------------------------------------------------------------- misafir demo */
.oon-dd-demo-etiket { display: inline-block; margin: 8px 0 4px; padding: 5px 12px; border-radius: 999px; background: var(--dd-mor-acik);
  color: var(--dd-mor); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.oon-dd-ozellik { margin: 22px 0; padding: 16px 18px; border-radius: 12px; background: var(--dd-krem); border: 1px solid var(--dd-cizgi); }
.oon-dd-ozellik h2 { margin: 0 0 8px; font-size: 15px; color: var(--dd-navy); }
.oon-dd-ozellik p { margin: 6px 0; font-size: 13.5px; line-height: 1.6; color: var(--dd-ink); }

/* ------------------------------------------------------------------ yazdırma
   Raporlar sekmesindeki gömülü önizleme yerine assets/ddagitim-rapor.js
   tarafından oluşturulan, sayfadan ayrı bir A4 yazdırma kapsayıcısı kullanılır. */
.oon-dd-print { display: none; }
/* 1.5.0 — Yazdırma. Katman ekranda hiç görünmez; yazdırırken sayfadaki
   her şey gizlenir ve yalnız katman basılır. (Önceki sürümde katman
   ekran dışına itildiği için kâğıda boş sayfa çıkıyordu.) Her sınıf/öğretmen
   bir A4 yatay sayfayı tam doldurur: başlık, tablo, toplam, imzalar. */
.oon-dd-print-katman { display: none; }
@media print {
  @page { size: A4 landscape; margin: 9mm 10mm; }
  html.oon-dd-yazdiriliyor, html.oon-dd-yazdiriliyor body, html.oon-dd-yazdiriliyor body[class] { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  html.oon-dd-yazdiriliyor .oon-dd-print-katman, .oon-dd-yz-sayfa { background: #fff !important; }
  html.oon-dd-yazdiriliyor body > *:not(.oon-dd-print-katman) { display: none !important; }
  html.oon-dd-yazdiriliyor .oon-dd-print-katman { display: block !important; position: static !important; }
  .oon-dd-yz-sayfa { box-sizing: border-box; height: 191mm; display: flex; flex-direction: column; page-break-after: always; break-after: page;
    font-family: "Calibri", "Segoe UI", Arial, sans-serif; color: #241b33; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .oon-dd-yz-sayfa:last-child { page-break-after: auto; break-after: auto; }
  .oon-dd-yz-ust { text-align: center; margin-bottom: 3mm; }
  .oon-dd-yz-okul { font-size: 17pt; font-weight: 700; color: #241b4e; letter-spacing: .01em; }
  .oon-dd-yz-baslik { font-size: 13.5pt; font-weight: 700; margin-top: 1mm; }
  .oon-dd-yz-bilgi { font-size: 10pt; color: #675f78; margin-top: .8mm; }
  .oon-dd-yz-tablo { width: 100%; flex: 1 1 auto; border-collapse: collapse; table-layout: fixed; }
  .oon-dd-yz-saatkol { width: 21mm; }
  .oon-dd-yz-tablo th, .oon-dd-yz-tablo td { border: .3mm solid #9a8fb3; text-align: center; vertical-align: middle; padding: 1.2mm 1.5mm; }
  .oon-dd-yz-tablo thead th { background: #241b4e; color: #fff; font-size: 11.5pt; font-weight: 700; height: 9mm; }
  .oon-dd-yz-tablo tbody th { background: #f1eaf9; color: #241b4e; font-size: 10.5pt; font-weight: 700; }
  .oon-dd-yz-tablo td b { display: block; font-size: 11.5pt; line-height: 1.2; }
  .oon-dd-yz-tablo td span { display: block; font-size: 10pt; margin-top: .6mm; line-height: 1.2; }
  .oon-dd-yz-tablo td i { display: block; font-size: 8.5pt; color: #675f78; margin-top: .4mm; }
  .oon-dd-yz-ogle td { background: #f4f1ea; color: #675f78; font-size: 9pt; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; height: 5mm; padding: .5mm; }
  .oon-dd-yz-ozet { font-size: 10.5pt; margin: 2.5mm 0 0; text-align: left; }
  .oon-dd-yz-imzalar { display: flex; justify-content: space-between; margin-top: 3mm; padding: 0 12mm; }
  .oon-dd-yz-imza { width: 70mm; text-align: center; font-size: 10.5pt; line-height: 1.5; }
  .oon-dd-yz-imza-ust { font-weight: 700; }
  .oon-dd-yz-tarih { color: #675f78; }
  .oon-dd-yz-ad { margin-top: 6mm; }
  .oon-dd-yz-alt { margin-top: auto; padding-top: 1.5mm; border-top: .2mm solid #d6cfe3; font-size: 7.5pt; color: #8a829a; text-align: center; }
}
}

/* --------------------------------------------------------------------- telefon */
@media (max-width: 640px) {
  .oon-dd-alanlar { grid-template-columns: 1fr; }
  .oon-dd-sekmeler { flex-wrap: nowrap; }
}

@media (prefers-color-scheme: dark) {
  .oon-view-ddagitim, .oon-dd { color: #ece7f5; }
}

/* 1.2.0 — öğle arası şeridi (o saatten SONRA) */
.oon-dd-izgara .oon-dd-ogle-satir th { background: #f4f1ea; color: var(--dd-soluk); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 2px; }

/* 1.3.0 — "neden yerleşmedi?" açıklaması */
.oon-dd-neden { margin: 4px 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--dd-ink); list-style: disc; }
.oon-dd-neden li { margin: 2px 0; line-height: 1.45; }

/* 1.4.0 — Excel'den aktar */
.oon-dd-aktar-adimlar { margin: 0 0 8px; padding-left: 20px; }
.oon-dd-aktar-adimlar li { margin: 0 0 12px; line-height: 1.5; }
.oon-dd-aktar textarea { display: block; width: 100%; margin: 6px 0; padding: 8px; border: 1px solid var(--dd-cizgi); border-radius: 8px; font: 13px/1.4 monospace; box-sizing: border-box; }
.oon-dd-aktar input[type="file"] { margin: 6px 0; }
.oon-dd-aktar-ozet { margin: 14px 0 6px; font-size: 14px; }
.oon-dd-aktar-tablo td, .oon-dd-aktar-tablo th { font-size: 12.5px; }
.oon-dd-aktar--yeni td:first-child { color: var(--dd-yesil); font-weight: 600; }
.oon-dd-aktar--guncelle td:first-child { color: var(--dd-mor); font-weight: 600; }
.oon-dd-aktar--var td { color: var(--dd-soluk); }
.oon-dd-aktar--hata td { background: var(--dd-kirmizi-bg); }
.oon-dd-aktar--hata td:first-child { color: var(--dd-kirmizi); font-weight: 600; }

/* 1.4.0 — plan kartı düğmeleri, kopyala */
.oon-dd-kart__eylem { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.oon-dd-kopyala-form { display: inline; margin: 0; }
.oon-dd-btn--ikincil { background: var(--dd-mor-acik); color: var(--dd-navy); border: 1px solid var(--dd-cizgi); }
.oon-dd-btn--ikincil:hover { filter: brightness(.97); }
.oon-dd-btn--ikincil:hover { color: var(--dd-navy); }

/* 1.4.0 — Düzeltme: sitenin genel ".oon-portal a" bağlantı rengi, bağlantı
   biçimindeki düğmelerin (Aç, Yeni okul programı oluştur…) beyaz yazısını
   ezip lacivert üstüne yeşil yapıyordu; okunmuyordu. */
.oon-dd a.oon-dd-btn, .oon-dd a.oon-dd-btn:visited, .oon-dd a.oon-dd-btn:hover, .oon-dd a.oon-dd-btn:focus { color: #fff; text-decoration: none; }
.oon-dd a.oon-dd-btn--ikincil, .oon-dd a.oon-dd-btn--ikincil:visited, .oon-dd a.oon-dd-btn--ikincil:hover { color: var(--dd-navy); }

/* 1.5.0 — plan silme düğmesi */
.oon-dd-btn--sil { background: #fff; color: var(--dd-kirmizi); border: 1px solid #efc4bf; }
.oon-dd-btn--sil:hover { background: var(--dd-kirmizi-bg); color: var(--dd-kirmizi); filter: none; }


/* 1.6.0 — Ders renkleri yazdırmada da görünsün */
.oon-dd-print-katman, .oon-dd-print-katman * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.oon-dd-hazir-kutu { margin: 0 0 16px; }
.oon-dd-hazir-kutu summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.oon-dd-hazir-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; margin: 8px 0 12px; }
.oon-dd-hazir-liste label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.oon-dd-hazir-liste select { padding: 2px 4px; font-size: 12px; }
.oon-dd-bildirim { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: #e7f6ee; border: 1px solid #b7e0c8; font-size: 13.5px; }

/* 1.7.0 — sınıf saat sayacı ve ders kopyalama */
.oon-dd-saat-ozet { margin: 4px 0 10px; font-size: 13px; }
.oon-dd-saat-cubuk { height: 8px; border-radius: 999px; background: #e9e3f2; overflow: hidden; margin-top: 4px; }
.oon-dd-saat-cubuk > span { display: block; height: 100%; border-radius: 999px; background: #e4a11b; }
.oon-dd-saat-ozet--tam .oon-dd-saat-cubuk > span { background: #2fa36b; }
.oon-dd-saat-ozet--fazla .oon-dd-saat-cubuk > span { background: #d13d3d; }
.oon-dd-saat-ozet--fazla strong { color: #b32626; }
.oon-dd-kopya { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 13px; }
.oon-dd-kopya select { padding: 5px 7px; border-radius: 7px; border: 1px solid #ddd3ea; font-family: inherit; }

/* 1.9.0 */
.oon-dd-atanmis-tablo select { max-width: 200px; padding: 4px 6px; border-radius: 7px; border: 1px solid #ddd3ea; font-family: inherit; font-size: 13px; }
.oon-dd-kapali-durum { min-height: 1.2em; font-size: 13px; font-weight: 600; color: #1d7a4d; margin: 6px 0; }
.oon-dd-kapali-durum--uyari { color: #b32626; }

/* 1.10.0 — sürükle-bırak eşleştirme tahtası */
.oon-dd-esl { margin: 0 0 18px; padding: 12px; border-radius: 12px; background: var(--dd-mor-acik, #f6f1fc); border: 1px solid var(--dd-cizgi, #ddd3ea); }
.oon-dd-esl > summary { cursor: pointer; font-size: 15px; }
.oon-dd-esl-tahta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; }
@media (max-width: 760px) { .oon-dd-esl-tahta { grid-template-columns: minmax(0, 1fr); } }
.oon-dd-esl-baslik { margin: 0 0 8px; font-size: 13.5px; color: #241b4e; }
.oon-dd-esl-grup { margin: 0 0 10px; padding: 6px 8px; background: #fff; border-radius: 10px; border: 1px solid #e5dcf1; border-left: 5px solid #9b8cc4; }
.oon-dd-esl-chipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.oon-dd-esl-kart { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; background: #fff; border: 1px solid #cfc3e6; font-size: 13px; cursor: grab; user-select: none; -webkit-user-select: none; }
.oon-dd-esl-kart--grup { display: flex; width: 100%; box-sizing: border-box; background: #f3edfb; }
.oon-dd-esl-kart:hover { border-color: #7b4fc9; }
.oon-dd-esl-secili { outline: 3px solid #7b4fc9; background: #efe6ff; }
.oon-dd-tut { display: inline-block; padding: 2px 5px; font-size: 16px; line-height: 1; color: #7b4fc9; touch-action: none; cursor: grab; }
.oon-dd-esl-hayalet { position: fixed; z-index: 99999; pointer-events: none; opacity: .92; box-shadow: 0 8px 22px rgba(36,27,78,.3); transform: rotate(-2deg); }
.oon-dd-esl-ogrler { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.oon-dd-esl-ogr { padding: 8px 10px; border-radius: 10px; background: #fff; border: 2px solid #e5dcf1; transition: border-color .12s, box-shadow .12s, background .12s; }
.oon-dd-esl-ogr-ust { display: flex; flex-direction: column; gap: 1px; }
.oon-dd-esl-yuk { margin: 4px 0; font-size: 12.5px; color: #4f4768; }
.oon-dd-esl-yuk--fazla { color: #b32626; font-weight: 700; }
.oon-dd-esl-ogr summary { cursor: pointer; font-size: 12px; color: #675f78; }
.oon-dd-esl--suruklenen .oon-dd-esl-ogr { border-style: dashed; }
.oon-dd-esl-uyumlu { border-color: #2fa36b; box-shadow: 0 0 0 3px rgba(47,163,107,.25); }
.oon-dd-esl-uzerinde { border-color: #7b4fc9 !important; background: #f1e9ff; box-shadow: 0 0 0 4px rgba(123,79,201,.28); }
.oon-dd-esl-geri { margin-top: 10px; padding: 12px; border-radius: 10px; border: 2px dashed #c9a2a2; background: #fff6f6; color: #8a3b3b; font-size: 13px; text-align: center; }
.oon-dd-esl-geri.oon-dd-esl-uzerinde { background: #ffe9e9; border-color: #d13d3d !important; box-shadow: none; }
.oon-dd-esl-bitti { padding: 14px; border-radius: 10px; background: #e7f6ee; border: 1px solid #b7e0c8; font-weight: 700; text-align: center; }
@keyframes oon-dd-parla { 0% { box-shadow: 0 0 0 0 rgba(47,163,107,.7); background: #dff5e8; } 100% { box-shadow: 0 0 0 14px rgba(47,163,107,0); background: #fff; } }
.oon-dd-esl-parla { animation: oon-dd-parla .9s ease-out 1; border-color: #2fa36b; }