/* ============================================================
   MERMAK MASTER CSS - V12 (TÜM SAYFALAR DAHİL - TAM SÜRÜM)
   Kapsam: Menü, Sorgu, Kargo Giriş ve Ürün Kataloğu
   ============================================================ */

:root {
    --primary: #ff6a00; /* Mermak Turuncusu */
    --primary-light: #fff0e6;
    --secondary: #1e293b;
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #1e293b;
    --text-light: #64748b;
    --danger: #e84118;
    --success: #2E7D32;
    --warning: #f59e0b;
    --border: #e2e8f0;
    --overlay-dark: rgba(0, 0, 0, 0.85);
}

/* --- 1. GENEL AYARLAR & SIFIRLAMA --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}
.hidden { display: none !important; }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }

/* --- 2. ÜST PANELLER & NAVİGASYON --- */
/* Yönetim Paneli Üst Barı */
.top-bar { 
    background: var(--card); padding: 15px; position: sticky; top: 0; z-index: 100; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-bottom: 1px solid #eaeaea; 
}
.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.header-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--primary); }

/* Ürün Kataloğu (Anasayfa) Header */
.minimal-header {
    background: white; padding: 25px 0; text-align: center;
    border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    position: sticky; top: 0; z-index: 1000;
}
.logo-box img { height: 55px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); }
.simple-nav { margin-top: 15px; display: flex; justify-content: center; gap: 20px; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }
.simple-nav a { text-decoration: none; color: var(--text-light); transition: 0.3s; }
.simple-nav a:hover, .simple-nav a.active { color: var(--primary); }

/* --- 3. MENÜ SAYFASI (menu.html) ÖZEL --- */
.menu-container { width: 100%; max-width: 1200px; padding: 40px 20px; margin: 0 auto; text-align: center; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.menu-card { 
    text-decoration: none; padding: 35px 25px; border-radius: 20px; color: white; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); display: flex; flex-direction: column; 
    align-items: center; justify-content: center; transition: 0.3s;
}
.menu-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }

/* Menü Kart Renkleri (Gradients) */
.card-pro { background: linear-gradient(135deg, #6A1B9A 0%, #4A148C 100%); }
.card-giris { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.card-sorgu { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.card-detay { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.card-teklif { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.card-hesap { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.card-iade { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.card-yonetim { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); }
.card-db-tsoft { background: linear-gradient(135deg, #107c41 0%, #0b5a2e 100%); }
.card-db-kargo { background: linear-gradient(135deg, #d35400 0%, #c23616 100%); }
.card-yedek { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); opacity: 0.7; }

/* --- 4. SORGU SAYFASI (sorgu.html) ÖZEL --- */
.results-container { padding: 15px; }
.card { 
    background: var(--card); border-radius: 12px; padding: 15px; margin-bottom: 15px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.04); border: 1px solid #f1f2f6; position: relative; overflow: hidden; 
}
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--primary); }
.barcode { font-size: 18px; font-weight: 800; color: #2f3640; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.badge { background: var(--primary-light); color: var(--primary); padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: bold; }
.gallery, .expected-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.img-box { flex: 0 0 160px; height: 160px; border-radius: 10px; overflow: hidden; border: 1px solid #eee; background: #f5f6fa; cursor: pointer; }
.img-box img { width: 100%; height: 100%; object-fit: cover; }

/* --- 5. KARGO GİRİŞ SAYFASI ÖZEL --- */
.btn-giant {
    width: 100%; height: 180px; font-size: 24px; font-weight: 900;
    border: none; border-radius: 20px; cursor: pointer; color: white;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-slot { 
    aspect-ratio: 1/1; background-color: #f1f5f9; border: 2px dashed #cbd5e1; 
    border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.photo-slot.active { border-color: var(--primary); background-color: #fff0e6; }
.photo-slot.filled { border: 2px solid var(--success); background-color: #fff; }

/* --- 6. ÜRÜN KATALOĞU (GRID) --- */
.product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; padding: 40px 0;
}
.product-card {
    background: white; border-radius: 16px; border: 1px solid var(--border);
    padding: 25px; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--primary); }
.product-img-wrapper { height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.product-img-wrapper img { max-width: 95%; max-height: 95%; object-fit: contain; transition: transform 0.5s ease; }
.product-card:hover .product-img-wrapper img { transform: scale(1.05); }
.product-title { font-size: 15px; font-weight: 700; height: 42px; overflow: hidden; margin-bottom: 12px; color: var(--text); }
.product-price { font-size: 22px; font-weight: 900; color: var(--primary); margin-top: auto; }
.product-btn { background: var(--primary); color: white; padding: 12px; border-radius: 10px; font-weight: 700; text-align: center; margin-top: 15px; }

/* --- 7. FORM ELEMANLARI & MODALLAR --- */
input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; outline: none; box-sizing: border-box; }
.btn-sync { background: var(--primary-light); color: var(--primary); border: 1px solid #ffccbc; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 5px; }

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s; }
.overlay.active { opacity: 1; visibility: visible; }
.overlay-dark { background: var(--overlay-dark); backdrop-filter: blur(5px); }
.modal-box { background: white; width: 90%; max-width: 500px; padding: 30px; border-radius: 20px; text-align: center; }

/* --- 8. LOADER --- */
.loader-box { padding: 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.spinner { width: 40px; height: 40px; border: 4px solid #f1f5f9; border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- 9. MASAÜSTÜ (RESPONSIVE) DÜZENLEMELER --- */
@media (min-width: 992px) {
    /* Kargo Ekranı Dev Butonlar */
    #step1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; }
    .btn-giant { height: 200px; }
    
    /* Kargo Ekranı Adım 2: Sol Panel ve Sağ Foto Alanı */
    .step2-layout { display: grid; grid-template-columns: 350px 1fr; gap: 20px; padding: 20px; }
    .photo-grid { grid-template-columns: repeat(5, 1fr); }
    
    /* Katalog Gridi */
    .product-grid { grid-template-columns: repeat(4, 1fr); }

    /* Sorgu Ekranı Filtreler */
    .search-inputs { display: flex !important; flex-direction: row !important; align-items: flex-end; gap: 15px; }
}