/* ==========================================================================
   FOTOĞRAFTAN OKU penceresi — Airbnb "önce → sonra" düzeni (5 Ekim 2026).
   Taslakta A seçildi: solda ekran görüntüsü, ortada pembe ok, sağda parselin
   haritadaki hâli; altında okunan görsel türleri, en altta sabit düğme çubuğu.
   app.css'teki .ocr-* kurallarının ÜSTÜNE yazar; hepsi #ocr altında.
   İşaretleme: views/partials/ocr.php.
   ========================================================================== */

#ocr .ocr-backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Pencere: tutamak + başlık sabit, gövde kayar, düğmeler altta sabit. */
#ocr .ocr-sheet {
    padding: 0; border-radius: 24px 24px 0 0; display: flex; flex-direction: column;
    max-height: 92vh; overflow: hidden; color: #222;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
}
#ocr .ocr-tutamak { display: block; flex: none; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: #DDDDDD; }
#ocr .ocr-head {
    position: relative; flex: none; display: flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 4px 56px 12px; border-bottom: 1px solid #EBEBEB;
}
#ocr .ocr-head h2 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: 0; color: #222; text-align: center; }
#ocr .ocr-close {
    position: absolute; left: 16px; top: 2px; margin: 0; width: 36px; height: 36px;
    border-radius: 50%; background: transparent; color: #222;
}
#ocr .ocr-close:hover { background: #F7F7F7; }
#ocr .ocr-close svg { width: 16px; height: 16px; }

#ocr .ocr-govde {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 20px 24px 18px;
}
#ocr .ocr-giris h3 { margin: 0; font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -.02em; color: #222; }
#ocr .ocr-giris p { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: #6A6A6A; }

/* Önce → sonra. Kutunun tamamı dosya seçtirir (eski örnek kartın görevi). */
#ocr .ocr-drop,
#ocr .ocr-drop:hover {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 18px 0 0; padding: 0;
    border: 0; border-radius: 16px; background: transparent; color: inherit; text-align: left;
}
#ocr .ocr-drop.is-over { background: #F7F7F7; outline: 2px dashed #222; outline-offset: 6px; }
#ocr .ocr-kart { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#ocr .ocr-resim {
    position: relative; display: block; height: 132px; border-radius: 14px; overflow: hidden;
    background: #F7F7F7; box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}
#ocr .ocr-resim img {
    display: block; width: 100%; height: 100%; max-height: none; border-radius: 0;
    object-fit: cover; object-position: 0 100%;
}
#ocr .ocr-ekran { border: 1px solid #EBEBEB; }
#ocr .ocr-harita img { object-position: 50% 50%; }
#ocr .ocr-harita svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#ocr .ocr-harita polygon { fill: rgba(255, 56, 92, .30); stroke: #FF385C; stroke-width: 3; stroke-linejoin: round; }
#ocr .ocr-harita b {
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
    padding: 5px 10px; border-radius: 999px; background: #222; color: #fff;
    font-size: 11px; line-height: 1.2; font-weight: 700; white-space: nowrap;
}
#ocr .ocr-kart small { font-size: 12px; font-weight: 600; color: #6A6A6A; text-align: center; }
#ocr .ocr-ok {
    flex: none; width: 34px; height: 34px; margin-bottom: 24px; border-radius: 50%;
    background-image: var(--ab-grad, linear-gradient(90deg, #E61E4D, #E31C5F, #D70466)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(227, 28, 95, .35);
}
#ocr .ocr-ok svg { width: 16px; height: 16px; }

#ocr .ocr-kaynak { margin-top: 18px; }
#ocr .ocr-kaynak p { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #222; }
#ocr .ocr-kaynak ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#ocr .ocr-kaynak li {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
    border: 1px solid #DDDDDD; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #222;
}
#ocr .ocr-kaynak li svg { width: 14px; height: 14px; flex: none; color: #008A05; }

/* Görsel seçildikten sonra: önce → sonra ve türler kalkar (app.css .ocr.dolu
   örnek kutuyu zaten gizliyor), yüklenen görsel ve durum yazısı görünür. */
#ocr.dolu .ocr-drop,
#ocr.dolu .ocr-kaynak { display: none; }
#ocr .ocr-prev { margin: 18px 0 0; padding: 12px; border: 1px solid #EBEBEB; border-radius: 16px; background: #fff; }
#ocr .ocr-prev img { border-radius: 10px; background: #F7F7F7; }
#ocr .ocr-prev figcaption { color: #222; }
#ocr.is-busy .ocr-prev figcaption:before { border-color: #EBEBEB; border-top-color: #222; }
#ocr .ocr-msg { color: #222; }
#ocr .ocr-msg.err { color: #C13515; }
#ocr .ocr-found { margin-top: 14px; padding: 14px 16px; border: 0; border-radius: 12px; background: #F7F7F7; }

/* Düğme çubuğu: pembe "Galeriden seç" + çerçeveli "Fotoğraf çek". */
#ocr .ocr-cubuk { flex: none; padding: 14px 24px calc(16px + var(--sab, 0px)); border-top: 1px solid #EBEBEB; background: #fff; }
#ocr .ocr-acts { margin: 0; gap: 10px; }
#ocr .ocr-acts .btn { height: 50px; padding: 0 12px; gap: 8px; border-radius: 8px; font-size: 16px; font-weight: 600; }
#ocr .ocr-acts .btn svg { width: 18px; height: 18px; }
#ocr .ocr-alt { margin: 12px 0 0; font-size: 13px; color: #6A6A6A; }
#ocr .ocr-alt a { color: #222; font-weight: 700; text-decoration: underline; }

@media (max-width: 359px) {
    #ocr .ocr-govde { padding-left: 18px; padding-right: 18px; }
    #ocr .ocr-cubuk { padding-left: 18px; padding-right: 18px; }
    #ocr .ocr-resim { height: 112px; }
    #ocr .ocr-acts .btn { font-size: 15px; }
}
@media (min-width: 700px) {
    #ocr .ocr-sheet { padding: 0; width: min(460px, 92vw); max-height: 88vh; border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .28); }
    #ocr .ocr-tutamak { display: none; }
    #ocr .ocr-head { padding-top: 14px; min-height: 60px; }
    #ocr .ocr-close { top: 12px; }
    #ocr .ocr-cubuk { padding-bottom: 18px; }
}