:root { --p: #4834d4; --s: #00b894; --dark: #2d3436; }
body { background: #f4f7f6; font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; }
.mp-main-container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.mp-header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }

.btn-toggle-form { background: var(--p); color: #fff; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.mp-form-card { background: #fff; border-radius: 15px; padding: 25px; display: none; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.mp-form-card.active { display: block; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.mp-form-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.mp-upload-zone { height: 250px; background: #f9f9f9; border: 2px dashed #ccc; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.mp-upload-zone img { width: 100%; height: 100%; object-fit: cover; }
.mp-form-inputs input, .mp-form-inputs textarea { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }
.mp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }
.ad-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); cursor: pointer; transition: 0.3s; position: relative; }
.ad-card:hover { transform: translateY(-5px); }
.ad-card img { width: 100%; height: 180px; object-fit: cover; }
.ad-card-body { padding: 15px; }
.ad-card-desc-short { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem; color: #666; margin: 10px 0; }

/* Modal & Scroll */
.modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; z-index:1000; align-items:center; justify-content:center; padding: 20px; box-sizing: border-box;}
.modal-content { background:#fff; width:100%; max-width:900px; max-height:90vh; border-radius:20px; padding:30px; position:relative; overflow-y:auto; }
.modal-body { display:grid; grid-template-columns: 1fr 1fr; gap:30px; }
@media (max-width: 768px) { .modal-body { grid-template-columns: 1fr; } }

.modal-desc-scroll { max-height: 180px; overflow-y: auto; background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid var(--p); line-height: 1.6; }
.modal-img-box img { width:100%; border-radius:12px; cursor:zoom-in; transition: 0.3s; }
.modal-img-box img.full-view { position:fixed; top:0; left:0; width:100vw; height:100vh; object-fit:contain; background:black; z-index:2000; border-radius:0; cursor:zoom-out; }
.close-modal { position:absolute; right:20px; top:15px; font-size:30px; cursor:pointer; }
.btn-call-final { display:block; text-align:center; background:var(--s); color:#fff; padding:15px; border-radius:10px; text-decoration:none; font-weight:bold; }