/* 🛠️ TIKIRTIKIR PRO V6.0 - MOBİL RESİM & GALERİ FİX */

:root {
    --ana-renk: #ed8936;
    --arka-plan: #000000;
    --panel-bg: #0f0f0f;
    --border-renk: #222222;
    --metin: #e0e0e0;
    --gri: #888888;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--arka-plan);
    color: var(--metin);
    font-family: 'Segoe UI', Roboto, sans-serif;
    margin: 0; padding: 0;
    display: flex; min-height: 100vh;
}

/* 🚀 NAVIGASYON */
.side-nav {
    width: 70px; height: 100vh; background: #0a0a0a;
    position: fixed; left: 0; top: 0;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 20px; border-right: 1px solid var(--border-renk); z-index: 1000;
}

.mini-btn {
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: #181818; margin-bottom: 15px;
    cursor: pointer; font-size: 20px; color: var(--gri); text-decoration: none;
}

/* 🏢 ANA İÇERİK */
.main-content { margin-left: 70px; padding: 25px; width: calc(100% - 70px); }

/* 📝 FORM DÜZENİ */
.form-konteyner {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px;
    background: #0a0a0a; padding: 20px; border-radius: 15px;
}

.form-konteyner input:not(.genis-input), .form-konteyner select {
    flex: 1 1 150px; height: 45px; background: #1a1a1a;
    border: 1px solid var(--border-renk); color: white; padding: 0 12px; border-radius: 8px;
}

.form-konteyner .genis-input {
    flex: 1 0 100% !important; height: 80px !important; font-size: 18px !important;
    padding: 15px !important; background: #ffffff !important; color: #000 !important;
    border-radius: 10px; border: 2px solid var(--ana-renk);
}

/* 🖼️ RESİM GALERİSİ (MOBİLDE DE KÜÇÜK KALACAK) */
.resim-galerisi {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}

.is-resim-onizleme {
    width: 80px !important; height: 60px !important;
    object-fit: cover !important; border-radius: 6px;
    border: 1px solid #333; cursor: pointer;
}

/* 💬 NOT/YORUM ALANI */
.not-alani { margin-top: 15px; background: #050505; border-radius: 10px; padding: 10px; border: 1px solid #1a1a1a; }
.not-item { font-size: 13px; color: #aaa; border-bottom: 1px solid #222; padding: 5px 0; }
.not-input-group { display: flex; gap: 5px; margin-top: 10px; }
.not-input-group input { flex: 1; background: #111; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 5px; }

/* 🕵️ İŞ KARTI */
.is-karti { background: var(--panel-bg); border: 1px solid var(--border-renk); border-radius: 15px; padding: 20px; margin-bottom: 15px; }

/* 🌑 MODAL (KAYDIRMALI) */
.modal {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.98); flex-direction: column; align-items: center; justify-content: center;
}
.modal-content { max-width: 95vw; max-height: 75vh; object-fit: contain; }
.modal-nav { display: flex; gap: 20px; margin-top: 20px; align-items: center; }
.nav-btn { background: var(--ana-renk); color: #000; border: none; padding: 12px 20px; border-radius: 50px; font-weight: 900; cursor: pointer; }

/* 📱 MOBİL FİX - RESİMLERİ BURADA DİZGİNLİYORUZ */
@media screen and (max-width: 768px) {
    .side-nav { width: 100%; height: 60px; flex-direction: row; top: auto; bottom: 0; padding: 0; justify-content: space-around; }
    .main-content { margin-left: 0; margin-bottom: 80px; padding: 12px; }
    
    /* Mobilde de resimler devasa olmasın, küçük kutucuk kalsın */
    .is-resim-onizleme {
        width: 70px !important;
        height: 55px !important;
    }
    
    .form-konteyner input:not(.genis-input) { flex: 1 1 45% !important; }
}