/* ==== apps/modules/web/3300/03_sihirbaz.php dosyasindan tasindi ==== */
/* ── Başlık: 3301/3302 ile BİREBİR aynı ölçü ve renk ─────────────────── */
.dw-header {
  position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 30;
  background: linear-gradient(135deg,#0f2a52,#1a3a6e);
  border-bottom: 1px solid rgba(56,189,248,.22);
  display: flex; align-items: center;
}
.dw-geri { width: 40px; height: 40px; background: rgba(255,255,255,.10); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-left: 6px; flex-shrink: 0; }
.dw-geri:hover { background: rgba(56,189,248,.25); }
.dw-baslik {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
  color: #e2e8f0; font-size: 14px; font-weight: 600; padding: 0 60px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Adım sekmeleri ──────────────────────────────────────────────────
   Görünüm ul.sv-tabs'tan (class.soruview.css) geliyor; burada yalnızca
   sihirbaza özgü konumlandırma var. sv-tabs'ın kendi alt boşluğunu (12px)
   sıfırlıyoruz, yoksa sabit şerit ile gövde arasında boşluk kalıyor. */
.dw-sekmeler {
  position: fixed; top: 50px; left: 0; right: 0; z-index: 29;
  background: #fff; padding: 0 .75rem;
}
.dw-sekmeler ul.sv-tabs { margin-bottom: 0; }
/* PASİF sekme gri. sv-tabs'ın kendi rengi #475569 (koyu slate) ve aktif
   sekmeden yeterince ayrışmıyordu.
   DİKKAT — spesifiklik: class.soruview.css'teki `ul.sv-tabs li.sv-active a`
   ile bu kural aynı ağırlıkta (2 sınıf + 3 element). Bizim <style> sayfada
   sonra geldiği için aktif sekmeyi de gri yapardı; bu yüzden aktif rengi
   AÇIKÇA yeniden yazılıyor (aşağıda 3 sınıf → net üstünlük). */
.dw-sekmeler ul.sv-tabs li a { color: #9ca3af; cursor: pointer; }
.dw-sekmeler ul.sv-tabs li a:hover { color: #1e3a8a; }
.dw-sekmeler ul.sv-tabs li.sv-active a { color: #1d4ed8; }
/* Değerlendirme sürerken sekme değişimi kapalı (JS de engelliyor). */
.dw-sekmeler.dw-kilit ul.sv-tabs li a { pointer-events: none; opacity: .55; }

.dw-govde {
  /* top JS'te govdeHizala ile ölçülüyor (bkz. orada), buradaki 43px yalnızca
     JS çalışmadan ÖNCEKİ ilk an için kaba bir başlangıç değeri. DİKKAT:
     .dw-govde position:absolute, kapsayıcısı .page_outer — o KENDİSİ zaten
     position:fixed;top:50px (bkz. mystyles.css, sitenin genel üst çubuğu
     için). Yani viewport'un 50px'i .page_outer'ın kendi ofsetinde BİR KEZ
     sayılıyor; buraya ikinci kez 50 eklemek (eskiden top:93px = 50+43 idi)
     gövdeyi görsel olarak 50px fazladan aşağı itiyordu — sekme şeridi
     fixed olduğu için viewport'a göre kalıyor ama gövde .page_outer'a göre
     kayıyordu, aradaki fark gereksiz boşluk olarak görünüyordu (kullanıcı
     bulgusu, ekran görüntüsüyle doğrulandı). */
  position: absolute; top: 43px; bottom: 0; left: 0; right: 0;
  overflow: auto; background: #f1f5f9;
}
/* Ödevde sekme çubuğu yok → gövde uyarı şeridinin altından başlar
   (yükseklik JS'te govdeHizala ile ölçülüyor, buradaki değer başlangıç).
   0: yukarıdaki nottaki aynı sebep — .page_outer'ın kendi 50px'i yetiyor. */
.dw-govde-tek { top: 0; }

/* Ödev uyarısı — başlığın hemen altında sabit şerit. Sola yaslı metin +
   sağda kapatma düğmesi (kullanıcı kararı, 2026-08-28 — eskiden ortalı
   duruyordu, X yoktu). */
.dw-odev-uyari {
  position: fixed; top: 50px; left: 0; right: 0; z-index: 28;
  background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e;
  padding: .6rem 1rem; font-size: 12px; line-height: 1.55;
  text-align: left; display: flex; align-items: flex-start; gap: .6rem;
}
.dw-odev-uyari-govde { flex: 1; min-width: 0; }
.dw-odev-uyari-govde i { margin-right: .35rem; }
.dw-odev-uyari-alt { display: block; margin-top: .25rem; color: #b45309; }
.dw-odev-uyari-kapat {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: #92400e; font-size: 14px; line-height: 1; padding: .1rem .25rem;
  opacity: .65;
}
.dw-odev-uyari-kapat:hover { opacity: 1; }

.dw-adim { display: none; }

/* ── Gömülü 3302 ─────────────────────────────────────────────────────
   O ekran tek başına tam sayfa çalışacak şekilde yazılmış: kendi fixed
   başlığı ve absolute (top:0;bottom:0) gövdesi var. Sihirbazın içinde
   bunlar kendi başlığımızı örtüyor ve iki kaydırma alanı oluşturuyordu.
   Akışa geri alıyoruz. */
.dw-govde .kg-header { display: none !important; }
.dw-govde .kg-govde {
  position: static !important; top: auto !important; bottom: auto !important;
  left: auto !important; right: auto !important;
  overflow: visible !important; background: transparent !important;
  padding: 1rem !important; padding-bottom: 1rem !important;
}
.dw-adim1-alt { padding: 0 1rem 1.5rem; text-align: right; }

/* ── Üst şerit — İKİNCİ yeniden tasarım (kullanıcı kararı, 2026-08-28:
   ilk modern/degrade/ikonlu deneme de beğenilmedi — "hepsi, en baştan farklı
   bir yön dene"). Bu kez TAM TERSİ yönde: renkli/degrade/gölgeli kart
   görünümü yerine düz, nötr, minimal bir "durum çubuğu" — beyaz zemin,
   ikon-pill yerine küçük renkli NOKTA göstergeler, kutulu not yerine sade
   gri metin, degrade buton yerine düz koyu (neredeyse siyah) katı buton.
   JS'in ürettiği .dw-chip/.dw-chip-uyari/.dw-chip-ok sınıf adları YİNE
   AYNEN korunuyor — hiçbir JS/HTML değişmedi, yalnızca görünüm. ── */
.dw-serit {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid #e5e7eb; padding: .9rem 1.25rem;
}
.dw-serit-sol { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.dw-serit-sag { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.dw-ozet { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
/* Renkli daire + düz metin — pill/kutu yok, mümkün olduğunca sade. */
/* Renkli, dolgu arka planlı çipler — kullanıcı kararı, 2026-08-28: noktalı
   sade hâl yeterince belirgin değildi, "görsel olarak daha belirgin olsun". */
.dw-chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; font-weight: 700;
  color: #3730a3; background: #e0e7ff; border: 1px solid #c7d2fe;
  padding: .32rem .7rem; border-radius: 999px;
}
.dw-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4f46e5; flex-shrink: 0; }
.dw-chip-uyari { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.dw-chip-uyari::before { background: #d97706; }
.dw-chip-ok { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.dw-chip-ok::before { background: #16a34a; }
/* İpucu: kutu/şerit yok, sadece soluk gri, ikincil planda bir not. */
.dw-ipucu {
  display: flex; align-items: center; gap: .4rem;
  font-size: 11.5px; color: #9ca3af; line-height: 1.4; max-width: 58ch;
}
.dw-ipucu i { color: #d1d5db; }
.dw-ipucu b { color: #6b7280; font-weight: 600; }

.dw-btn {
  border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer;
  border-radius: 7px; padding: .5rem .75rem; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; transition: background .12s, border-color .12s;
}
.dw-btn:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; }
.dw-btn:disabled { opacity: .5; cursor: not-allowed; }
.dw-btn-birincil { background: #111827; border-color: #111827; color: #fff; }
.dw-btn-birincil:hover:not(:disabled) { background: #1f2937; border-color: #1f2937; }

/* ── Çalışıyor bandı ─────────────────────────────────────────────────── */
.dw-calisiyor {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #eef2ff; border-bottom: 1px solid #e0e7ff;
  padding: .6rem 1rem; font-size: 12.5px; color: #3730a3;
}
.dw-calisiyor > i { font-size: 15px; }
.dw-calisiyor-metin { font-weight: 800; }
.dw-calisiyor-alt { font-weight: 700; }
.dw-calisiyor-not { font-size: 11px; color: #6366f1; }
.dw-bar { flex: 1; min-width: 120px; height: 6px; background: #dbeafe; border-radius: 99px; overflow: hidden; }
.dw-bar-ic { height: 100%; background: linear-gradient(90deg,#6366f1,#4f46e5); transition: width .3s; }

/* ── Master-detail ───────────────────────────────────────────────────── */
.dw-md { display: grid; grid-template-columns: 268px 1fr; gap: 0; align-items: start; }
/* Şerit çizgisi: sv-tabs'ın `border-bottom: 2px solid #e2e8f0` kuralının
   dikey karşılığı. Zemin şeffaf kalıyor ki seçili öğrencinin beyazı öne çıksın. */
.dw-yan {
  border-right: 2px solid #e2e8f0; background: transparent;
  position: sticky; top: 0; max-height: calc(100vh - 150px); overflow: auto;
  padding-left: .5rem; padding-top: .3rem;
}
.dw-yan-baslik {
  font-size: 11px; font-weight: 800; color: #6b7280; text-transform: uppercase;
  letter-spacing: .3px; padding: .4rem .9rem .5rem;
}
/* Öğrenci listesi = DİKEY sekme şeridi. Üstteki adım sekmeleriyle aynı dil:
   pasif gri yazı, aktif beyaz zemin + mavi yazı + kenarlık, hover açık mavi.
   sv-tabs yatay olduğu için sınıfı doğrudan kullanamıyoruz; ölçüler ve
   renkler oradan (class.soruview.css) birebir alındı, yalnızca kenarlık ve
   köşe yuvarlaması dikey eksene çevrildi. */
/* .ou-ogr = optik adımının (04_optik_yukle.php) öğrenci düğmesi. Görünüm
   BİLEREK ortak: iki adım aynı master-detail düzeni kullanıyor, ikinci bir
   görünüm yazmak ayrışmaya davetiye. Sınıf adı ayrı çünkü .dw-ogr'ye bu
   dosyanın kendi tıklama işleyicisi bağlı — aynı sınıfı verirsek optik
   listesine tıklamak değerlendirme adımının seçimini de bozuyor. */
.ou-ogr {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  cursor: pointer; text-align: left; font: inherit;
  padding: 10px 14px; font-size: 13px; font-weight: 700;
  color: #9ca3af; background: transparent;
  border: 1.5px solid transparent; border-right: none;
  border-radius: 6px 0 0 6px; margin-right: -2px;
  transition: all .15s ease-in-out;
}
.ou-ogr:hover { color: #1e3a8a; background: rgba(219,234,254,.5); }
.ou-ogr.secili {
  color: #1d4ed8; background: #fff;
  border-color: #cbd5e1 transparent #cbd5e1 #cbd5e1;
}
.dw-ogr-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-ogr-puan { font-size: 12.5px; font-weight: 800; color: #4338ca; white-space: nowrap; }
/* Payda daha soluk: gözün aradığı sayı alınan puan. */
.dw-ogr-puan small { font-size: 10px; font-weight: 700; color: #9ca3af; }

/* Öğrenci listesi ARTIK TABLO (kullanıcı kararı, 2026-08-28: Okul No |
   Ad Soyad | Puan, sütun başlığına tıklayınca sıralama — diğer ekranlardaki
   AYNI desen). Satırlar (.dw-ogr) hâlâ TIKLANABİLİR — mevcut click.dw3303
   delegesi (data-ogr) tag'den bağımsız çalışıyor, değişmedi. */
.dw-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dw-tablo th {
  position: sticky; top: 0; background: #f9fafb; text-align: left; padding: .45rem .5rem;
  font-size: 10px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: .3px;
  cursor: pointer; user-select: none; border-bottom: 1px solid #e5e7eb; white-space: nowrap;
}
.dw-tablo th:hover { background: #eef2ff; }
.dw-tablo td { padding: .5rem; border-bottom: 1px solid #f3f4f6; }
.dw-tablo tr.dw-ogr { cursor: pointer; color: #374151; }
.dw-tablo tr.dw-ogr:hover { background: rgba(219,234,254,.5); }
.dw-tablo tr.dw-ogr.secili { background: #eff6ff; }
.dw-tablo tr.dw-ogr.secili td, .dw-tablo tr.dw-ogr.secili .dw-ogr-puan { color: #1d4ed8; }
.dw-tablo tr.dw-ogr.secili .dw-ogr-ad { color: #1d4ed8; font-weight: 800; }
.dw-tablo tr.dw-ogr.isleniyor { background: #fef3c7; }
.dw-ogr-puan-yok { color: #d1d5db; }
.kl-sort-pasif { color: #d1d5db; }
.dw-nokta { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dw-n-hazir   { background: #f59e0b; }   /* onay bekliyor */
.dw-n-onayli  { background: #059669; }
.dw-n-hata    { background: #dc2626; }
.dw-n-sirada  { background: #6366f1; }
.dw-n-yok     { background: #d1d5db; }

.dw-detay { padding: 1rem; min-width: 0; }
/* İki satır: kimlik/durum/eylemler ve puan/kırılım (kullanıcı kararı,
   2026-08-28 — tek satırda hepsi sıkışıyordu). */
.dw-detay-ust {
  display: flex; flex-direction: column; gap: .5rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: .8rem 1rem; margin-bottom: .8rem;
}
.dw-detay-satir1, .dw-detay-satir2 {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.dw-detay-ad { font-size: 15px; font-weight: 800; color: #111827; flex: 1; min-width: 140px; }
/* Taslak toplam — öğretmenin aradığı sayı bu, kırılımdan büyük gösteriliyor. */
.dw-taslak-puan { font-size: 16px; font-weight: 800; color: #4338ca; }
.dw-bos { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 2.5rem 1rem; text-align: center; color: #9ca3af; font-size: 13px; }
.dw-bos-kucuk { padding: 1rem .9rem; color: #9ca3af; font-size: 12px; }

/* Soru kartları */
.dg-rozet { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.dg-rz-yok    { background: #f3f4f6; color: #6b7280; }
.dg-rz-hazir  { background: #dbeafe; color: #1e40af; }
.dg-rz-bekler { background: #fef3c7; color: #92400e; }
.dg-rz-onayli { background: #d1fae5; color: #065f46; }
.dg-rz-test   { background: #ede9fe; color: #5b21b6; }
.dg-meta { font-size: 11px; color: #6b7280; }
.dg-soru { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .7rem .9rem; margin-bottom: .5rem; }
.dg-soru-ust { display: flex; align-items: center; gap: .45rem; font-size: 11.5px; flex-wrap: wrap; }
.dg-soru-no { font-weight: 800; color: #4338ca; }
.dg-soru-ust .ok  { color: #059669; font-weight: 800; }
.dg-soru-ust .yok { color: #dc2626; font-weight: 800; }
.dg-test-sik { font-size: 11.5px; color: #374151; }
.dg-test-sik b { font-size: 13px; color: #111827; }
.dg-puan-input {
  width: 52px; padding: .2rem .3rem; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 12px; font-weight: 700; text-align: center; box-sizing: border-box;
}
/* ── Test satırı: OPTİK FORM ─────────────────────────────────────────
   Ölçüler ve renkler öğrenci tarafındaki optik formdan (3400) alındı;
   öğretmen kağıttaki forma bakarak düzelttiği için ekrandaki biçim ona
   benzedikçe karşılaştırma hatası azalıyor. */
.dg-optik-satir .dg-soru-ust { gap: .5rem; }
.dg-optik-no {
  width: 28px; flex-shrink: 0; text-align: right;
  font-size: 12.5px; font-weight: 700; color: #6b7280;
}
.dg-optik-secenekler { display: flex; gap: .35rem; }
.dg-optik-secenek {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #d1d5db; background: #fff;
  font-size: 12.5px; font-weight: 700; color: #9ca3af;
  cursor: pointer; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.dg-optik-secenek:hover:not(:disabled) { border-color: #4f46e5; color: #4f46e5; }
.dg-optik-secili { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.dg-optik-secenek:disabled { cursor: default; opacity: .75; }
/* Doğru şık, öğrenci başkasını işaretlediyse halka ile gösterilir. */
.dg-optik-halka { border-color: #059669; color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,.22); }
.dg-optik-dogru  .dg-optik-secili { background: #059669; border-color: #059669; }
.dg-optik-yanlis .dg-optik-secili { background: #dc2626; border-color: #dc2626; }
/* Sorunun cevap anahtarı (sorular.cevap) boş — doğru/yanlış kıyaslanamıyor.
   Bu durumu varsayılan mavi "seçili" rengiyle karıştırmamak için amber. */
.dg-optik-cevapsiz .dg-optik-secili { background: #d97706; border-color: #d97706; }
.dg-optik-sil {
  background: none; border: none; color: #d1d5db; cursor: pointer;
  font-size: 13px; padding: 0 .3rem;
}
.dg-optik-sil:hover:not(:disabled) { color: #dc2626; }
.dg-optik-sil:disabled { cursor: default; opacity: .4; }
.dg-optik-durum { font-size: 11px; font-weight: 700; margin-left: .3rem; }
.dg-optik-dogru    .dg-optik-durum { color: #059669; }
.dg-optik-yanlis   .dg-optik-durum { color: #dc2626; }
.dg-optik-bos      .dg-optik-durum { color: #9ca3af; }
.dg-optik-cevapsiz .dg-optik-durum { color: #d97706; }
/* Kaydedilirken satır soluyor — tıklamanın işlendiği belli olsun. */
.dg-optik-kaydediyor { opacity: .55; pointer-events: none; }

/* ── Ödev optik formu (salt okunur) ──────────────────────────────────
   Şıklar <span>, <button> değil: tıklanabilir görünmemeli. */
.dw-optik-kutu {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: .8rem .9rem; margin-bottom: .9rem;
}
.dw-optik-baslik {
  display: flex; align-items: center; gap: .5rem;
  font-size: 12px; font-weight: 800; color: #374151;
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: .4rem;
}
.dw-optik-not {
  font-size: 11.5px; color: #6b7280; line-height: 1.5; margin-bottom: .6rem;
  background: #f9fafb; border-radius: 8px; padding: .45rem .6rem;
}
.dw-optik-kilitli { border: none; padding: .25rem .3rem; margin-bottom: 2px; }
.dw-optik-kilitli:nth-child(even) { background: #f9fafb; }
.dw-optik-kilitli .dg-optik-secenek { cursor: default; }
.dg-adim { font-size: 11px; color: #4b5563; margin-left: 1rem; line-height: 1.6; margin-top: .3rem; text-align: left; }
.dg-adim .ok  { color: #059669; font-weight: 700; }
.dg-adim .yok { color: #dc2626; font-weight: 700; }
.dg-uyari-satir { font-size: 11px; color: #92400e; margin-top: .4rem;
  background: #fffbeb; border-radius: 6px; padding: .35rem .5rem; }

/* ── Kağıt görüntüleyici ─────────────────────────────────────────────── */
#dw-kagit-katman {
  display: none; position: fixed; inset: 0; z-index: 10040;
  background: rgba(15,23,42,.72); align-items: center; justify-content: center;
  padding: 1rem;
}
.dw-kagit-kutu {
  background: #fff; border-radius: 14px; width: min(900px, 96vw);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
.dw-kagit-ust {
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem;
  border-bottom: 1px solid #e5e7eb; font-size: 14px; font-weight: 700; color: #111827;
}
.dw-kagit-ust span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dw-kagit-kapat {
  border: none; background: #f3f4f6; color: #374151; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 14px; flex-shrink: 0;
}
#dw-kagit-kapat:hover { background: #e5e7eb; }
.dw-kagit-govde { overflow: auto; padding: 1rem; background: #f8fafc; }
.dw-kagit-sayfa { margin: 0 0 1rem; }
.dw-kagit-sayfa img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid #e5e7eb; background: #fff;
}
.dw-kagit-sayfa figcaption { font-size: 11.5px; color: #6b7280; margin-top: .3rem; text-align: center; }
.dw-kagit-pdf {
  display: block; padding: .8rem 1rem; margin-bottom: .7rem; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 10px; font-size: 12.5px;
  font-weight: 700; color: #b91c1c; text-decoration: none;
}
.dw-kagit-pdf:hover { background: #fef2f2; }

/* Dar ekran: sidebar üste geçer. .dw-yan artık bir TABLO barındırıyor
   (kullanıcı kararı, 2026-08-28) — eski yatay kaydırmalı "şerit" düğme
   düzeni tabloya uymadığı için kaldırıldı, tablo dikey kaydırmalı kısa bir
   şerit olarak kalıyor (.ou-ogr'nin şerit görünümü 04_optik_yukle.php için
   AYNEN korunuyor). */
@media (max-width: 820px) {
  .dw-md { grid-template-columns: 1fr; }
  .dw-yan {
    border-right: none; border-bottom: 2px solid #e2e8f0;
    position: static; max-height: 220px; overflow-y: auto;
    padding-left: 0;
  }
  .ou-ogr {
    width: auto; flex-shrink: 0; white-space: nowrap;
    border: 1.5px solid transparent; border-bottom: none;
    border-radius: 6px 6px 0 0; margin-right: 4px; margin-bottom: -2px;
  }
  .ou-ogr.secili { border-color: #cbd5e1 #cbd5e1 transparent #cbd5e1; }
}