/* ==========================================================
   Tafsir Mimpi - front.css
   ========================================================== */

/* ---------- 1. Asas ---------- */
.tm-app{max-width:980px;margin:35px auto;padding:0 18px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17202a}
.tm-app *{box-sizing:border-box}
.tm-kicker{display:inline-block;font-size:11px;letter-spacing:2px;font-weight:800;opacity:.78}

/* ---------- 2. Hero & borang carian ---------- */
.tm-hero{position:relative;overflow:hidden;padding:52px 46px;border-radius:28px;background:linear-gradient(135deg,#172554,#312e81 55%,#6d28d9);color:#fff;box-shadow:0 18px 55px rgba(49,46,129,.22)}
.tm-orb{position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.09)}
.tm-hero h2{margin:12px 0 14px;font-size:40px;font-size:clamp(30px,5vw,48px);line-height:1.05;letter-spacing:-1px;color:#facc15}.tm-hero p{max-width:650px;margin:0 0 28px;font-size:16px;color:rgba(255,255,255,.82)}

.tm-search{position:relative;z-index:2;padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tm-fields{display:grid;grid-template-columns:180px 1fr auto;gap:10px;align-items:flex-end}
.tm-fields label{display:block}
.tm-fields label span{display:block;margin:0 0 6px;font-size:11px;font-weight:700;color:rgba(255,255,255,.8)}
.tm-fields input{width:100%;padding:13px 14px;border:0;border-radius:11px;font-size:14px;background:#fff;color:#111827}
.tm-fields button{height:45px;padding:0 18px;border:0;border-radius:11px;background:#f8fafc;color:#312e81;font-weight:800;cursor:pointer}
.tm-fields button span{margin-left:8px}

/* ---------- 3. Tajuk hasil ---------- */
.tm-results{margin-top:24px}
.tm-result-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 3px 16px}
.tm-result-head .tm-kicker{color:#6366f1}
.tm-result-head h3{margin:6px 0 0;font-size:25px;line-height:1.25}
.tm-result-head em{font-style:normal;color:#4f46e5}
.tm-count{padding:7px 12px;border-radius:99px;background:#eef2ff;color:#4338ca;font-size:12px;font-weight:800;white-space:nowrap}

/* ---------- 4. Kad hasil ---------- */
.tm-result{display:grid;grid-template-columns:48px 1fr;gap:18px;margin:12px 0;padding:22px;background:#fff;border:1px solid #e7e9f0;border-radius:18px;box-shadow:0 7px 22px rgba(15,23,42,.05)}
.tm-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:#eef2ff;color:#4338ca;font-weight:900}
.tm-result h4{margin:0 0 8px;font-size:19px;font-weight:800}
.tm-result p{margin:0;font-size:14px;line-height:1.75;color:#4b5563}

/* Sorotan perkataan carian */
.tm-hl{padding:0 2px;border-radius:3px;background:rgba(255,213,79,.35);font-weight:700;color:#111827}

/* Tag alias */
.tm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tm-tags span{padding:5px 8px;border-radius:99px;background:#f3f4f6;font-size:11px;color:#6b7280}

/* Butang WhatsApp */
.tm-result .tm-wa{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 16px;border-radius:999px;background:#25D366;color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s}
.tm-result .tm-wa:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,211,102,.35)}

/* ---------- 5. Kosong, nota & footer ---------- */
.tm-empty,.tm-note{padding:24px;background:#fff;border:1px solid #e7e9f0;border-radius:18px}
.tm-empty p{margin-bottom:0;color:#6b7280}
.tm-note{margin-top:16px;background:#f8fafc;font-size:12px;line-height:1.6;color:#64748b}
.tm-footer-note{margin:25px 0;text-align:center;font-size:11px;color:#94a3b8}

/* ---------- 6. Mudah alih ---------- */
@media(max-width:720px){
  .tm-hero{padding:34px 22px;border-radius:20px}
  .tm-fields{grid-template-columns:1fr}
.tm-result-head{flex-direction:column;align-items:flex-start}
.tm-result{grid-template-columns:38px 1fr;padding:17px}
  .tm-badge{width:36px;height:36px;border-radius:10px}
  .tm-wa{display:flex;justify-content:center;width:100%}
}

.tm-public-stats{margin-top:10px;font-size:13px;color:rgba(255,255,255,.75);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tm-public-stats strong{color:#fff;font-weight:700}
.tm-public-stats .tm-dot{opacity:.5}

.tm-hero{position:relative}
.tm-bell-wrap{position:absolute;top:16px;right:16px}

.tm-bell-btn{
 position:relative;
 background:rgba(255,255,255,.15);
 border:none;
 color:#fff;
 width:36px;
 height:36px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer
}