@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/* ================= VAR ================= */
:root{
  --primary:#0aa6a6;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --card:#fff;
  --shadow:0 3px 10px rgba(0,0,0,.06);
}

/* ================= CONTAINER ================= */
.container{
  max-width:1200px;
  margin:auto;
  padding:24px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--text);
}

/* ================= SEARCH ================= */
.search-top{
  margin-bottom:28px;
  max-width:520px;
}

.search-top input{
  width:100%;
  padding:14px 16px;
  font-size:15px;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.search-top input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(10,166,166,.15);
}

/* ================= GRID 3 KOLOM ================= */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

/* ================= CARD ================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.card-top{
  display:flex;
  gap:16px;
  padding:16px;
  align-items:flex-start;
}

.card-photo{
  align-self:flex-start;
  width:96px;
  height:96px;
  border-radius:14px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
  flex-shrink:0;
}

.card-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:top center;
}

.card-info .name{
  font-weight:700;
  font-size:16px;
}

.card-info .spec{
  color:var(--primary);
  font-weight:600;
  font-size:14px;
}

.card-info .rs{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* ================= ACTIONS ================= */
.actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--border);
}

.actions a{
  text-align:center;
  padding:10px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--primary);
  font-size:13px;
}

.btn-outline{
  background:#fff;
  color:var(--primary);
}

.btn-primary{
  background:var(--primary);
  color:#fff;
}

/* ================= LOADING ================= */
.loading{
  grid-column:1/-1;
  text-align:center;
  padding:60px;
  color:#666;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1100px){
  .grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:640px){
  .grid{
    grid-template-columns:1fr;
  }

  .card-top{
    flex-direction:column;
    text-align:center;
  }

  .search-top{
    max-width:100%;
  }
}



/* =========================
   MOBILE STYLE (HP)
   ========================= */
@media (max-width: 576px) {

  /* container lebih rapat */
  .container {
    padding: 12px;
  }

  h1 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* grid jadi 1 kolom */
  .grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* card lebih flat & app-like */
  .card {
    border-radius: 16px;
  }
  
  .card-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;  /* ⬅️ INI FIX UTAMA */
    gap: 12px;
    padding: 14px;
  }

  /* FORCE left alignment (defensive) */
  .card-info,
  .card-info * {
    margin-top: 2px;
    text-align: left !important;
  }

  /* FOTO KECIL BULAT */
  .card-photo {
    width: 64px;
    height: 64px;
    border-radius: 10%;
    flex-shrink: 0;
  }

  .card-photo img {
    border-radius: 10%;
  }

  /* TEXT */
  .name {
    font-size: 14px;
    font-weight: 700;
  }

  .spec {
    font-size: 13px;
  }

  .rs {
    font-size: 12px;
    margin-top: 2px;
    text-align: left;
  }

  .actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
  }

  /* LIHAT PROFIL → 90% */
  .actions .btn-outline {
    flex: 1 1 90%;
    font-size: 13px;
    padding: 12px;
    border-radius: 12px;
  }

  /* BUAT JANJI → 10% ICON */
  .actions .btn-primary {
    margin-top: 4px;
    flex: 0 0 44px;        /* ⬅️ fixed icon width */
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0;         /* sembunyikan teks */
    padding: 0;
    border-radius: 50%;
  }

  /* ICON KALENDER (FontAwesome) */
  .actions .btn-primary::before {
    content: "\f073";     /* unicode calendar */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
  }


}