/* ==== apps/modules/web/3300/04_optik_yukle.php dosyasindan tasindi ==== */
.ou-ust { max-width: 1100px; margin: 0 auto 1rem; padding: 1rem 1rem 0; }
.ou-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; padding: 1.3rem 1rem; cursor: pointer;
    border: 2px dashed #c7d2fe; border-radius: 12px; background: #f8fafc;
    color: #4f46e5; font-weight: 600; text-align: center;
}
.ou-drop:hover, .ou-drop.ou-uzerinde { background: #eef2ff; border-color: #4f46e5; }
.ou-drop i { font-size: 24px; }
.ou-drop small { font-weight: 500; color: #6b7280; font-size: 11.5px; line-height: 1.5; }
.ou-alt-satir { text-align: center; margin-top: .6rem; }
.ou-hepsini-sil {
    background: #dc2626; border: 1px solid #dc2626; color: #fff; cursor: pointer;
    padding: .4rem .9rem; border-radius: 8px; font-size: 12.5px; font-weight: 700;
}
.ou-hepsini-sil:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.ou-hepsini-sil:disabled { opacity: .6; cursor: default; }
.ou-durum { margin-top: .6rem; font-size: 12.5px; color: #6b7280; text-align: center; min-height: 18px; }
.ou-durum.ok   { color: #059669; }
.ou-durum.hata { color: #dc2626; }
.ou-durum b    { color: #111827; }
.ou-sayac { float: right; font-weight: 600; color: #6b7280; text-transform: none; letter-spacing: 0; }

/* Yan listedeki durum noktası — .dw-nokta ile aynı ölçü, kendi renkleri. */
.ou-n-okundu   { background: #10b981; }
.ou-n-eksik    { background: #e5e7eb; }
.ou-n-belirsiz { background: #f59e0b; }
.ou-ogr-rozet { font-size: 11.5px; font-weight: 700; color: #6b7280; white-space: nowrap; }
.ou-ogr.secili .ou-ogr-rozet { color: #1d4ed8; }

/* ── Detay: solda form fotoğrafı, sağda düzeltilebilir şık haritası ──── */
.ou-ikili { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .9rem; margin-top: .8rem; }
.ou-kutu { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; min-width: 0; }
.ou-kutu-baslik {
    font-size: 11.5px; font-weight: 700; color: #475569; background: #f8fafc;
    padding: .45rem .7rem; border-bottom: 1px solid #e5e7eb;
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
/* Form fotoğrafı KUTUYU AŞMASIN: hem genişlik hem YÜKSEKLİK sınırlı, görüntü
   oranını koruyarak içine sığıyor. Sınırsız bırakıldığında uzun bir form
   fotoğrafı sayfayı metrelerce uzatıyordu. Tam boy için tıklanıp yeni
   sekmede açılıyor. */
.ou-kutu-ic { padding: .5rem; text-align: center; }
.ou-gorsel {
    max-width: 100%; max-height: 62vh; width: auto; height: auto;
    object-fit: contain; border-radius: 6px; display: block; margin: 0 auto; cursor: zoom-in;
}
.ou-kutu-bos { color: #9ca3af; font-size: 12.5px; padding: 1.6rem .8rem; }

/* Şık haritası kutusu, form fotoğrafıyla aynı yükseklikte kalsın diye kaydırılabilir. */
.ou-harita-ic { padding: .4rem .5rem; max-height: 62vh; overflow-y: auto; }

.ou-uyari {
    margin-top: .7rem; font-size: 12.5px; color: #92400e;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .5rem .7rem;
}
.ou-ipucu { font-size: 12px; color: #6b7280; margin-top: .5rem; line-height: 1.6; }

/* Bu formdan OKUNAMAYAN ama hücresinde eski bir değer duran satır. Yeşil/
   kırmızı doğru-yanlış rengi yanıltmasın diye kesikli turuncu çerçeve ve
   soluk zemin ekleniyor — renk kaldırılmıyor, üstüne konuluyor. */
.dg-optik-satir.ou-eski {
    border: 1px dashed #f59e0b !important;
    background: #fffbeb !important;
}
.dg-optik-satir.ou-eski .dg-optik-durum { color: #b45309; font-weight: 600; }

@media (max-width: 860px) {
  .ou-ikili { grid-template-columns: 1fr; }
  .ou-gorsel, .ou-harita-ic { max-height: none; }
}