/* ============================================================
   posting.css  —  KHUSUS halaman Posting Kebutuhan
   Form, preview feed, tips, modal sukses.
   ============================================================ */

/* ---------- Judul halaman ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:20px 0 0}
.crumbs a{color:var(--blue)}
.phead{padding:8px 0 4px}
.phead h2{font-size:30px;margin:0 0 6px;font-weight:800;letter-spacing:-.5px}
.phead p{margin:0;color:#475569;font-size:15.5px}
.free-badge{display:inline-flex;align-items:center;gap:6px;background:var(--green-tint);color:#15803d;border:1px solid var(--green-line);font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* ---------- Layout ---------- */
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;padding:22px 0 44px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(2,6,23,.04)}

/* ---------- Form ---------- */
.form{padding:24px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.field label .req{color:#ef4444}
.field .hint{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:4px}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea{resize:vertical;min-height:90px}
.cat-pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;color:#334155;transition:.15s}
.pill:hover{border-color:#cbd5e1}
.pill.active{border-color:var(--blue);background:#eff6ff;color:var(--blue)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inp-money{position:relative}
.inp-money .rp{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;font-weight:600}
.inp-money input{padding-left:34px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#475569;margin-top:10px;cursor:pointer}
.check input{width:auto}
.note{display:flex;gap:10px;background:#eff6ff;border:1px solid #dbeafe;border-radius:12px;padding:12px 14px;font-size:13px;color:#1e40af;margin-top:4px}
.note .ni{font-size:16px}
.submit{width:100%;background:var(--orange);color:#fff;border:none;border-radius:14px;padding:15px;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 12px 26px rgba(249,115,22,.3);margin-top:6px}
.submit:hover{background:var(--orange-d)}
.err{color:#ef4444;font-size:12.5px;margin-top:6px;display:none}

/* ---------- Preview & tips ---------- */
.side{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.prev-card{padding:18px}
.prev-card .pt{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px}
.prev-item{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px}
.pi-ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:#eef2ff}
.pi-main{flex:1;min-width:0}
.pi-main .ti{font-weight:700;font-size:15px}
.pi-main .loc{font-size:12.5px;color:var(--muted);margin-top:3px}
.pi-meta{font-size:11.5px;color:#94a3b8;margin-top:5px}
.pi-budget{font-size:13px;font-weight:700;color:#15803d;margin-top:6px}
.prev-wa{margin-top:14px;background:var(--wa);color:#fff;border:none;border-radius:12px;padding:11px;width:100%;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:default;opacity:.95}
.tips{padding:18px;background:var(--green-tint);border:1px solid var(--green-line);border-radius:18px}
.tips h4{margin:0 0 10px;font-size:15px;color:#166534}
.tips .tip{display:flex;gap:9px;font-size:13px;color:#166534;margin-bottom:8px}
.tips .tip .c{color:#16a34a;font-weight:800}

/* ---------- Modal sukses ---------- */
.modal-card{background:#fff;border-radius:20px;width:100%;max-width:420px;overflow:hidden;box-shadow:0 30px 70px rgba(2,6,23,.4);text-align:center;padding:28px 24px}
.modal-card .big{font-size:46px;margin-bottom:8px}
.modal-card h3{margin:0 0 8px;font-size:20px}
.modal-card p{margin:0 0 20px;color:#475569;font-size:14.5px;line-height:1.5}
.modal-actions{display:flex;gap:10px}
.btn-mini.primary{background:var(--orange);color:#fff;border-color:transparent}
.btn-mini.primary:hover{background:var(--orange-d)}

/* ---------- Responsif (posting) ---------- */
@media (max-width:980px){
	.grid{grid-template-columns:1fr}
	.side{position:static}
}