/* ==========================================================================
   Gaya bersama empat halaman baru: Berita Terkini, Promosi & Event,
   Lowongan Pekerjaan, dan Aplikasi Iplus.

   Satu berkas untuk empat halaman karena tata letaknya memang sekeluarga
   (daftar kartu, penyaring kategori, keadaan kosong). Melengkapi gaya bawaan
   halaman publik (.container, .hero, .fade-up) yang sudah ada, jadi di sini
   hanya ditulis yang benar-benar baru.
   ========================================================================== */

/* ===== Penyaring kategori ===== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}

.filter-chip:hover {
  color: #0f172a;
  border-color: #bae6fd;
}

.filter-chip.active {
  color: #ffffff;
  background: #0284c7;
  border-color: #0284c7;
}

.filter-chip .n {
  font-size: 12px;
  opacity: .75;
}

/* ===== Daftar kartu ===== */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.post-card {
  display: flex;
  flex-direction: column;
  /* Seluruh kartu memang sebuah tautan, jadi garis bawah bawaannya harus dimatikan di
     sini. Tidak semua halaman publik menyetel `a { text-decoration: none }` secara
     global, dan tanpa baris ini judul beserta ringkasannya tergaris bawah semua. */
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s, border-color .22s;
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: #bae6fd;
  box-shadow: 0 14px 34px rgba(15,23,42,.09);
}

.post-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #e0f2fe, #f1f5f9);
  overflow: hidden;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kartu tanpa gambar tetap punya bidang berwarna dengan ikon, supaya deretan
   kartu tidak terlihat pincang saat sebagian beritanya belum diberi gambar. */
.post-thumb-kosong {
  display: grid;
  place-items: center;
  color: #0284c7;
  font-size: 34px;
  opacity: .32;
}

.post-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 17px 18px 19px;
  flex: 1;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #64748b;
}

.post-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  text-wrap: balance;
}

.post-excerpt {
  font-size: 13.8px;
  line-height: 1.6;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-foot {
  margin-top: auto;
  padding-top: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0284c7;
}

.post-card:hover .post-foot i {
  transform: translateX(3px);
}

.post-foot i { transition: transform .2s; }

/* ===== Label ===== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(2,132,199,.1);
  color: #0284c7;
}

.tag-warn    { background: rgba(245,158,11,.12); color: #b45309; }
.tag-danger  { background: rgba(239,68,68,.1);  color: #dc2626; }
.tag-success { background: rgba(16,185,129,.1); color: #059669; }
.tag-muted   { background: rgba(100,116,139,.1); color: #475569; }

/* ===== Keadaan kosong ===== */

/* Keadaan kosong dibuat setara kartu isi, bukan sebaris teks abu-abu, karena
   inilah yang akan dilihat pengunjung selama klien belum mengisi apa pun. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  padding: 58px 28px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
}

.empty-state .ico {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(2,132,199,.09);
  color: #0284c7;
  font-size: 25px;
}

.empty-state h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: #0f172a;
}

.empty-state p {
  max-width: 460px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #64748b;
}

/* ===== Rangka pemuatan ===== */

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.skeleton-card {
  height: 320px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(100deg, #f8fafc 30%, #eef2f7 50%, #f8fafc 70%);
  background-size: 220% 100%;
  animation: skel 1.3s ease-in-out infinite;
}

@keyframes skel {
  from { background-position: 180% 0; }
  to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card { animation-duration: 0.01ms; }
  .post-card:hover { transform: none; }
}

/* ===== Bagian isi halaman ===== */

.list-section {
  padding: 50px 0 80px;
}

@media (max-width: 640px) {
  .post-grid, .skeleton-grid { grid-template-columns: 1fr; }
  .list-section { padding: 36px 0 60px; }
  .empty-state { padding: 44px 20px; }
}

/* ===== Halaman detail satu tulisan ===== */

.detail-artikel {
  max-width: 760px;
  margin: 0 auto;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 14px;
}

.detail-judul {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  color: #0f172a;
  text-wrap: balance;
  margin-bottom: 14px;
}

.detail-masa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  margin-bottom: 22px;
  font-size: 13.5px;
  color: #475569;
  background: rgba(2,132,199,.06);
  border: 1px solid rgba(2,132,199,.18);
  border-radius: 10px;
}

.detail-gambar {
  margin: 0 0 26px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.detail-gambar img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lebar baris dijaga sekitar 65 karakter supaya mata tidak kehilangan baris saat
   berpindah ke kiri, yang jadi masalah nyata pada pengumuman yang panjang. */
.detail-isi p {
  font-size: 16px;
  line-height: 1.78;
  color: #334155;
  margin-bottom: 17px;
}

.detail-isi p:last-child { margin-bottom: 0; }

.detail-kembali {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid #e2e8f0;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #0284c7;
}

.detail-lainnya {
  max-width: 1100px;
  margin: 64px auto 0;
  padding-top: 40px;
  border-top: 1px solid #e2e8f0;
}

.detail-lainnya h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .detail-lainnya { margin-top: 44px; padding-top: 30px; }
}

/* ===== Lowongan Pekerjaan ===== */

/* Kartu lowongan tidak punya gambar, jadi bidang isinya yang diberi ruang lebih. */
.job-card .post-body { padding: 20px 20px 22px; gap: 11px; }

.job-rinci {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  font-size: 13px;
  color: #475569;
}

.job-rinci span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.job-rinci i { color: #0284c7; font-size: 12px; }

/* Ringkasan fakta di halaman detail. Ditaruh paling atas karena inilah yang dicari
   pelamar lebih dulu: lokasi, gaji, dan batas waktunya. */
.job-fakta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px;
  margin: 22px 0 30px;
  padding: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.job-fakta-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 11px;
}

.job-fakta-item i {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(2,132,199,.1);
  color: #0284c7;
  font-size: 13px;
}

.job-fakta-item small {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 1px;
}

.job-fakta-item b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.job-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 30px 0 13px;
}

.detail-isi > .job-sub:first-child { margin-top: 0; }

.job-list {
  margin: 0 0 6px;
  padding-left: 0;
  list-style: none;
}

.job-list li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.68;
  color: #334155;
}

.job-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
  color: #0284c7;
}

/* ===== Formulir lamaran ===== */

.lamar-box {
  max-width: 760px;
  margin: 46px auto 0;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
}

.lamar-box h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 5px;
}

.lamar-box .lamar-sub {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 22px;
}

.lamar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lamar-grid .penuh { grid-column: 1 / -1; }

.lamar-box label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.lamar-box label .wajib { color: #dc2626; }

.lamar-box input,
.lamar-box textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14.5px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color .2s, background .2s;
}

.lamar-box textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.lamar-box input:focus,
.lamar-box textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: #0284c7;
}

.lamar-box .ket {
  font-size: 12px;
  color: #64748b;
  margin-top: 5px;
  line-height: 1.5;
}

.lamar-box button[type="submit"] {
  margin-top: 20px;
  width: 100%;
  padding: 13px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: #0284c7;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s;
}

.lamar-box button[type="submit"]:hover:not(:disabled) { background: #0369a1; }
.lamar-box button[type="submit"]:disabled { opacity: .65; cursor: default; }

.form-kabar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  margin-bottom: 18px;
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.55;
}

.form-kabar.sukses {
  background: rgba(16,185,129,.09);
  border: 1px solid rgba(16,185,129,.28);
  color: #047857;
}

.form-kabar.galat {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  color: #b91c1c;
}

/* Jalur lain bagi yang lebih suka bertanya langsung daripada mengisi formulir. */
.lamar-alt {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
  font-size: 14px;
  color: #475569;
  line-height: 1.65;
}

.lamar-alt a { color: #0284c7; font-weight: 600; }

@media (max-width: 640px) {
  .lamar-grid { grid-template-columns: 1fr; }
  .lamar-box { padding: 22px 18px; margin-top: 34px; }
  .job-fakta { grid-template-columns: 1fr; }
}

/* ===== Halaman Aplikasi Iplus ===== */

.app-hero {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
}

.app-ikon {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 24px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

.app-ikon.kosong {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e0f2fe, #f1f5f9);
  color: #0284c7;
  font-size: 38px;
}

.app-hero-teks { flex: 1; min-width: 0; }

.app-hero-teks h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.app-slogan {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
}

.app-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

/* ===== Tombol unduh ===== */

.unduh-baris {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.unduh-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 13px;
  text-decoration: none;
  color: #ffffff;
  background: #0f172a;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, background .18s;
}

.unduh-btn i { font-size: 25px; }

.unduh-btn span { display: block; line-height: 1.25; }
.unduh-btn small { display: block; font-size: 11px; opacity: .78; }
.unduh-btn b { display: block; font-size: 16px; font-weight: 600; }

.unduh-btn em {
  margin-left: 6px;
  padding: 3px 9px;
  font-style: normal;
  font-size: 11.5px;
  border-radius: 999px;
  background: rgba(255,255,255,.17);
}

.unduh-btn.android:hover,
.unduh-btn.ios:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15,23,42,.22);
}

.unduh-btn.android { background: #0f8a3c; }
.unduh-btn.android:hover { background: #0a7533; }

/* Tombol platform yang belum tersedia TETAP ditampilkan, bukan disembunyikan: pengunjung
   iOS perlu tahu aplikasinya memang belum ada, bukan mengira halamannya rusak. */
.unduh-btn.mati {
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px dashed #cbd5e1;
  cursor: not-allowed;
}

/* ===== Bagian isi ===== */

/* Tiap halaman publik punya aturan `section { padding: 80px 0 }`, dan bagian-bagian di
   halaman ini memang elemen <section>. Tanpa penolan itu, jarak antarbagian menjadi
   160px dan halaman terasa bolong di antara judulnya. */
.app-bagian {
  padding: 0;
  margin-top: 48px;
}

.app-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 18px;
}

.app-ss {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.app-ss img {
  flex: none;
  width: 215px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  scroll-snap-align: start;
}

.app-dok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
}

.app-dok-item {
  display: flex;
  gap: 14px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

.app-dok-ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(2,132,199,.1);
  color: #0284c7;
  font-size: 15px;
}

.app-dok-item h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.app-dok-item p {
  font-size: 14.5px;
  line-height: 1.68;
  color: #475569;
  margin-bottom: 9px;
}

.app-dok-item p:last-child { margin-bottom: 0; }

/* Tiap butir diberi garisnya sendiri, BUKAN dengan trik gap 1px di atas latar berwarna.
   Jumlah spesifikasi jarang pas membagi jumlah kolom, dan dengan trik itu sisa kolom
   terakhir menyisakan kotak abu-abu kosong yang terlihat seperti kerusakan. */
.app-spek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.app-spek > div {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.app-spek dt {
  flex: none;
  width: 140px;
  font-size: 13.5px;
  color: #64748b;
}

.app-spek dd {
  font-size: 14.5px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .app-hero { flex-direction: column; align-items: center; text-align: center; padding: 24px 18px; }
  .app-chip { justify-content: center; }
  .unduh-baris { justify-content: center; }
  .unduh-btn { flex: 1 1 100%; justify-content: center; }
  .app-spek dt { width: 110px; }
  .app-bagian { margin-top: 38px; }
}