/* Harita Sayfası CSS — claude.md §7 */
body { margin:0; padding:0; font-family:'-apple-system',BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; display:flex; flex-direction:column; height:100vh; overflow:hidden; background:#f4f4f4; }
#header { background:#2e7d32; color:white; padding:12px 15px; position:relative; z-index:9999; flex:0 0 auto; box-shadow:0 2px 10px rgba(0,0,0,0.3); display:flex; flex-direction:column; }
#header h1 { margin:0; font-size:22px; font-weight:700; }
#header p { margin:4px 0 0; font-size:13px; opacity:0.9; padding-right:30px; }
#menu-btn { position:absolute; top:0; right:0; padding:15px 20px; font-size:26px; cursor:pointer; color:white; z-index:10000; display:flex; align-items:center; height:100%; }
#map { flex:1; width:100%; z-index:1; }
#sidebar { position:fixed; top:0; right:-100%; width:300px; max-width:100%; height:100%; background:white; box-shadow:-5px 0 15px rgba(0,0,0,0.2); transition:right 0.3s; z-index:10001; padding:25px 20px; display:flex; flex-direction:column; }
#sidebar.open { right:0; }
#sidebar h2 { color:#2e7d32; border-bottom:2px solid #e0e0e0; padding-bottom:12px; margin-top:20px; font-size:20px; }
#close-btn { position:absolute; top:15px; right:20px; font-size:32px; cursor:pointer; color:#757575; }
.stat-box { background:#f1f8e9; padding:20px; border-radius:12px; margin-top:15px; text-align:center; border:1px solid #c5e1a5; }
.stat-box h3 { margin:0; color:#555; font-size:15px; text-transform:uppercase; }
.stat-box p { margin:10px 0 0; font-size:38px; font-weight:bold; color:#2e7d32; }
.popup-form { display:flex; flex-direction:column; gap:10px; width:240px; }
.popup-form h4 { margin:0 0 5px; color:#2e7d32; font-size:18px; border-bottom:1px solid #eee; padding-bottom:5px; }
.popup-form input,.popup-form textarea { padding:10px; border:1px solid #bdbdbd; border-radius:6px; font-size:16px; background:#fafafa; }
.popup-form input:focus,.popup-form textarea:focus { outline:none; border-color:#2e7d32; background:white; }
.popup-form button { background:#2e7d32; color:white; border:none; padding:12px; cursor:pointer; border-radius:6px; font-size:16px; font-weight:bold; margin-top:5px; }
.popup-form button:active { background:#1b5e20; }
.tree-info { font-size:15px; width:200px; }
.tree-info h3 { margin:0 0 8px; color:#2e7d32; font-size:18px; }
.tree-info p { margin:5px 0; line-height:1.4; color:#424242; }
.custom-tree-wrapper { background:none; border:none; position:relative; }
.custom-tree-wrapper img.tree-image { width:42px; height:42px; transition:all 0.3s; transform-origin:bottom center; }
.custom-tree-wrapper::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:10px; height:10px; background:#1b5e20; border:2px solid white; border-radius:50%; opacity:0; transition:all 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.4); }
.zoomed-out-map .custom-tree-wrapper img.tree-image { opacity:0; transform:scale(0); }
.zoomed-out-map .custom-tree-wrapper::after { opacity:1; }
#auth-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:20000; justify-content:center; align-items:center; }
#auth-overlay.open { display:flex; }
#auth-box { background:white; border-radius:20px; padding:35px 30px; max-width:360px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
#auth-box h3 { color:#2e7d32; margin:0 0 8px; font-size:22px; }
#auth-box p { color:#757575; font-size:14px; margin:0 0 24px; }
#auth-box .google-btn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:14px; border:1px solid #ddd; border-radius:12px; background:white; font-size:16px; font-weight:700; color:#333; cursor:pointer; }
#auth-box .google-btn:hover { background:#f5f5f5; }
#auth-box .close-auth { margin-top:16px; background:none; border:none; color:#2e7d32; font-weight:700; cursor:pointer; font-size:14px; }
@media(max-width:600px) { #sidebar{width:100%} #header h1{font-size:20px} .leaflet-popup-content{width:260px!important} }