UasSIGWebgis/sosial/style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { 
    --primary: #2563eb; 
    --primary-hover: #1d4ed8;
    --dark: #0f172a; 
    --dark-grad: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --success: #10b981; 
    --success-hover: #059669;
    --danger: #ef4444; 
    --danger-hover: #dc2626;
    --warning: #f59e0b; 
    --bg-light: #f8fafc;
    --border: #e2e8f0;
}

body { 
    margin: 0; padding: 0; 
    font-family: 'Inter', sans-serif; 
    overflow: hidden; display: flex; 
    background: #e2e8f0;
}

#map { width: 100vw; height: 100vh; z-index: 1; }

/* Custom Sleek Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* SEARCH & MENU */
.search-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1100; width: 380px; }
.search-box { 
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px);
    border-radius: 50px; display: flex; align-items: center; padding: 5px 20px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.5); 
    transition: 0.3s ease;
}
.search-box:focus-within { box-shadow: 0 10px 30px rgba(37,99,235,0.2); border-color: var(--primary); }
.search-box i { color: #64748b; font-size: 1.1rem; }
.search-box input[type="text"] { 
    border: none !important; outline: none; padding: 12px 10px; margin: 0; 
    width: 100%; background: transparent !important; font-size: 0.95rem; 
    color: var(--dark); font-weight: 500; box-shadow: none !important;
}
.search-box input::placeholder { color: #94a3b8; }

.menu-toggle { 
    position: absolute; bottom: 30px; left: 20px; z-index: 1200; 
    background: var(--dark-grad); color: white; border: none; 
    width: 55px; height: 55px; border-radius: 50%; cursor: pointer; 
    box-shadow: 0 10px 25px rgba(15,23,42,0.4); font-size: 1.4rem; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle:hover { transform: scale(1.1) rotate(5deg); }
.menu-toggle:active { transform: scale(0.95); }

/* SIDEBAR */
#sidebar { 
    width: 360px; height: 100vh; background: white; border-right: 1px solid var(--border); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    z-index: 1150; position: absolute; left: 0; transform: translateX(-100%); 
    display: flex; flex-direction: column; box-shadow: 5px 0 25px rgba(0,0,0,0.05);
}
#sidebar.active { transform: translateX(0); }
.sidebar-header { padding: 25px 20px; background: var(--dark-grad); color: white; border-bottom: 3px solid var(--primary); }
.sidebar-header h3 { margin: 0 0 5px 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; }
.sidebar-header small { color: #cbd5e1; font-weight: 500; font-size: 0.85rem;}
.sidebar-content { padding: 20px; overflow-y: auto; flex: 1; background: var(--bg-light); }

/* PANEL INPUT */
.panel-input { 
    position: absolute; top: 20px; right: 20px; width: 320px; 
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
    border-radius: 16px; padding: 25px 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.12); 
    z-index: 1000; max-height: 85vh; overflow-y: auto; border: 1px solid rgba(255,255,255,0.6);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    transform-origin: top right;
}
.panel-input.collapsed {
    transform: scale(0.9) translateX(150%);
    opacity: 0;
    pointer-events: none;
}
.panel-input h4 { color: var(--dark); font-size: 1.1rem; font-weight: 700; border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-top: 0; }

/* RADIUS SLIDER */
.radius-box { 
    background: #eff6ff; padding: 15px; border-radius: 12px; margin-bottom: 20px; 
    border: 1px solid #bfdbfe; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.radius-box label { font-size: 0.85rem; font-weight: 700; color: var(--primary); display: block; margin-bottom: 8px;}
input[type=range] { width: 100%; cursor: pointer; accent-color: var(--primary); }

/* UI HELPERS */
input[type=text], input[type=number], input[type=date], select, textarea { 
    width: 100%; padding: 12px 15px; margin: 0 0 15px; 
    border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; 
    transition: all 0.3s ease; font-family: 'Inter', sans-serif; font-size: 0.9rem;
    background: #f8fafc; color: var(--dark);
}
input:focus, select:focus, textarea:focus { 
    border-color: var(--primary); outline: none; background: white;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.15); transform: translateY(-1px);
}
select { cursor: pointer; font-weight: 500; }
textarea { resize: vertical; min-height: 80px; }

/* CARDS IN SIDEBAR */
.card { 
    background: #ffffff; padding: 15px; border-radius: 12px; margin-bottom: 12px; 
    border: 1px solid var(--border); font-size: 0.85rem; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative; overflow: hidden;
}
.card::before { content:''; position:absolute; left:0; top:0; width:4px; height:100%; background: var(--primary); opacity: 0; transition: 0.3s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px rgba(0,0,0,0.06); border-color: #cbd5e1; }
.card:hover::before { opacity: 1; }
.card b { color: var(--dark); display: block; font-size: 0.95rem; margin-bottom: 4px; font-weight: 700;}

.hidden { display: none !important; }

/* BUTTONS */
.btn-save { 
    background: var(--success); color: white; border: none; padding: 14px; 
    border-radius: 10px; font-weight: 700; cursor: pointer; width: 100%; 
    font-size: 1rem; transition: all 0.3s ease; 
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-save:hover { background: var(--success-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4); }
.btn-save:active { transform: translateY(0); }

.btn-del { 
    background: #fee2e2; color: var(--danger); border: none; padding: 5px 10px; 
    border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.2s; 
}
.btn-del:hover { background: var(--danger); color: white; }

.badge { 
    display: inline-block; padding: 4px 8px; border-radius: 6px; 
    font-size: 0.7rem; font-weight: 700; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.5px;
}

.section-title { 
    font-size: 1rem; font-weight: 700; color: var(--dark); 
    margin: 20px 0 12px 0; border-bottom: 2px solid var(--border); 
    padding-bottom: 8px; display: flex; align-items: center; gap: 8px;
}