/* ==========================================
   DETAIL BERITA
========================================== */

.detail-page{
  background:#fff;
  padding:30px 18px 70px;
}

.detail-container{
  max-width:1200px;
  margin:0 auto;
}


/* ==========================================
   BREADCRUMB
========================================== */

.detail-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;

  margin-bottom:25px;

  font-size:13px;
  color:#64748b;
}

.detail-breadcrumb a{
  color:#2563eb;
  text-decoration:none;
  font-weight:600;
}

.detail-breadcrumb a:hover{
  text-decoration:underline;
}


/* ==========================================
   LAYOUT
========================================== */

.detail-layout{
  display:grid;

  grid-template-columns:
    minmax(0, 1fr)
    340px;

  gap:40px;

  align-items:start;
}


/* ==========================================
   ARTIKEL
========================================== */

.detail-article{
  min-width:0;
}


/* ==========================================
   CATEGORY
========================================== */

.detail-category{
  display:inline-flex;

  align-items:center;

  padding:6px 12px;

  border-radius:999px;

  background:rgba(37,99,235,.10);

  color:#2563eb;

  font-size:12px;

  font-weight:800;

  letter-spacing:.5px;

  margin-bottom:14px;
}


/* ==========================================
   TITLE
========================================== */

.detail-title{
  margin:0;

  max-width:900px;

  font-size:42px;

  line-height:1.2;

  font-weight:800;

  color:#0f172a;

  letter-spacing:-.5px;
}


/* ==========================================
   DATE
========================================== */

.detail-date{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;

  margin-top:15px;

  margin-bottom:25px;

  font-size:14px;

  color:#64748b;

  font-weight:600;
}

.detail-calendar{
  color:#2563eb;
}

.detail-separator{
  color:#cbd5e1;
}


/* ==========================================
   IMAGE
========================================== */

.detail-image-wrapper{
  width:100%;

  overflow:hidden;

  border-radius:24px;

  background:#f1f5f9;

  box-shadow:
    0 20px 45px rgba(2,6,23,.08);
}

.detail-image{
  width:100%;

  max-height:550px;

  object-fit:cover;

  display:block;
}


.detail-no-image{
  width:100%;

  min-height:400px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      #f1f5f9,
      #e2e8f0
    );

  color:#64748b;

  font-weight:800;

  letter-spacing:1px;
}


/* ==========================================
   SHARE
========================================== */

.detail-share{
  margin-top:25px;

  padding:20px;

  border:1px solid rgba(2,6,23,.08);

  border-radius:20px;

  background:#fff;

  box-shadow:
    0 12px 35px rgba(2,6,23,.05);
}


.detail-share-title{
  margin-bottom:13px;

  font-size:15px;

  font-weight:800;

  color:#0f172a;
}


.detail-share-buttons{
  display:flex;

  flex-wrap:wrap;

  gap:10px;
}


.share-btn{
  min-height:42px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:8px 13px;

  border-radius:12px;

  border:1px solid rgba(2,6,23,.08);

  background:#fff;

  color:#0f172a;

  text-decoration:none;

  cursor:pointer;

  font-family:inherit;

  font-size:13px;

  font-weight:700;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.share-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 8px 20px rgba(2,6,23,.08);
}


.share-icon{
  width:25px;
  height:25px;

  display:flex;

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

  border-radius:7px;

  font-size:11px;

  font-weight:900;
}


/* WhatsApp */

.share-wa .share-icon{
  background:#dcfce7;
  color:#16a34a;
}


/* Facebook */

.share-facebook .share-icon{
  background:#dbeafe;
  color:#2563eb;

  font-size:16px;
}


/* X */

.share-twitter .share-icon{
  background:#e2e8f0;
  color:#0f172a;
}


/* Instagram */

.share-instagram .share-icon{
  background:#fce7f3;
  color:#db2777;

  font-size:17px;
}


/* Copy */

.share-copy .share-icon{
  background:#f1f5f9;
  color:#475569;

  font-size:13px;
}


/* ==========================================
   ISI BERITA
========================================== */

.detail-content {
  margin-top: 32px;
  color: #334155;
  font-size: 16px;
  line-height: 1.9;
  text-align: justify;
}

/* PARAGRAF */
.detail-content p {
  display: block;
  margin: 0 0 24px !important;
  padding: 0;
  line-height: 1.9;
  text-align: justify;
}

/* Paragraf terakhir tidak perlu jarak bawah */
.detail-content p:last-child {
  margin-bottom: 0 !important;
}

/* HEADING */
.detail-content h2 {
  margin: 34px 0 16px;
  font-size: 26px;
  line-height: 1.3;
  color: #0f172a;
  text-align: left;
}

.detail-content h3 {
  margin: 28px 0 14px;
  font-size: 21px;
  line-height: 1.4;
  color: #0f172a;
  text-align: left;
}

/* GAMBAR DALAM ARTIKEL */
.detail-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 28px auto;
  border-radius: 16px;
}

/* LINK */
.detail-content a {
  color: #2563eb;
  font-weight: 600;
}

/* LIST */
.detail-content ul,
.detail-content ol {
  margin: 0 0 24px;
  padding-left: 25px;
  text-align: justify;
}

.detail-content li {
  margin-bottom: 8px;
}

/* BLOCKQUOTE */
.detail-content blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 4px solid #2563eb;
  background: #f8fafc;
  border-radius: 0 12px 12px 0;
  color: #475569;
  font-style: italic;
  text-align: justify;
}


/* ==========================================
   SHARE BAWAH
========================================== */

.detail-bottom-share{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  margin-top:35px;

  padding-top:22px;

  border-top:1px solid rgba(2,6,23,.08);

  font-size:13px;

  color:#64748b;

  font-weight:700;
}


.bottom-share{
  padding:7px 12px;

  border-radius:9px;

  border:0;

  background:#f1f5f9;

  color:#334155;

  text-decoration:none;

  cursor:pointer;

  font-family:inherit;

  font-size:12px;

  font-weight:700;
}

.bottom-share:hover{
  background:#e2e8f0;
}


/* ==========================================
   SIDEBAR
========================================== */

.detail-sidebar{
  position:sticky;

  top:100px;
}


.sidebar-box{
  padding:22px;

  background:#fff;

  border:1px solid rgba(2,6,23,.08);

  border-radius:22px;

  box-shadow:
    0 18px 40px rgba(2,6,23,.06);
}


/* ==========================================
   SIDEBAR HEADING
========================================== */

.sidebar-heading{
  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:20px;
}


.sidebar-heading-line{
  width:4px;

  height:25px;

  border-radius:999px;

  background:#2563eb;
}


.sidebar-heading h2{
  margin:0;

  font-size:20px;

  color:#0f172a;

  font-weight:800;
}


/* ==========================================
   SIDEBAR NEWS
========================================== */

.sidebar-news-list{
  display:flex;

  flex-direction:column;

  gap:16px;
}


.sidebar-news{
  display:grid;

  grid-template-columns:95px minmax(0,1fr);

  gap:12px;

  text-decoration:none;

  padding-bottom:16px;

  border-bottom:1px solid rgba(2,6,23,.07);
}


.sidebar-news:last-child{
  padding-bottom:0;

  border-bottom:0;
}


/* Image */

.sidebar-news-image{
  width:95px;

  height:72px;

  overflow:hidden;

  border-radius:12px;

  background:#f1f5f9;
}


.sidebar-news-image img{
  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .3s ease;
}


.sidebar-news:hover
.sidebar-news-image img{
  transform:scale(1.06);
}


/* No image */

.sidebar-no-image{
  width:100%;

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:12px;

  font-weight:800;

  color:#64748b;
}


/* Info */

.sidebar-news-info{
  min-width:0;
}


.sidebar-news-info h3{
  margin:0;

  display:-webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient:vertical;

  overflow:hidden;

  font-size:14px;

  line-height:1.45;

  font-weight:800;

  color:#0f172a;
}


.sidebar-news:hover
.sidebar-news-info h3{
  color:#2563eb;
}


.sidebar-news-info p{
  margin:7px 0 0;

  font-size:12px;

  color:#94a3b8;

  font-weight:600;
}


/* ==========================================
   SIDEBAR ALL NEWS
========================================== */

.sidebar-all-news{
  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-top:20px;

  padding:12px 14px;

  border-radius:12px;

  background:#f8fafc;

  color:#2563eb;

  text-decoration:none;

  font-size:13px;

  font-weight:800;

  transition:
    background .2s ease,
    transform .2s ease;
}


.sidebar-all-news:hover{
  background:#eff6ff;

  transform:translateY(-1px);
}


.sidebar-all-news span{
  font-size:18px;
}


/* ==========================================
   EMPTY SIDEBAR
========================================== */

.sidebar-empty{
  margin:0;

  padding:20px 0;

  text-align:center;

  font-size:13px;

  color:#94a3b8;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width:950px){

  .detail-layout{
    grid-template-columns:
      minmax(0,1fr)
      290px;

    gap:25px;
  }


  .detail-title{
    font-size:34px;
  }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:820px){

  .detail-page{
    padding:
      20px 12px 50px;
  }


  .detail-breadcrumb{
    margin-bottom:20px;

    font-size:12px;
  }


  .detail-layout{
    display:flex;

    flex-direction:column;

    gap:35px;
  }


  .detail-title{
    font-size:30px;

    line-height:1.25;
  }


  .detail-date{
    font-size:13px;

    margin-bottom:20px;
  }


  .detail-image-wrapper{
    border-radius:18px;
  }


  .detail-image{
    max-height:400px;
  }


  .detail-no-image{
    min-height:250px;
  }


  .detail-share{
    padding:16px;

    border-radius:18px;
  }


  .detail-share-buttons{
    gap:8px;
  }


  .share-btn{
    flex:1 1 auto;

    min-width:120px;
  }


  .detail-content{
    margin-top:25px;

    font-size:15px;

    line-height:1.8;
  }


  .detail-sidebar{
    position:static;

    width:100%;
  }


  .sidebar-box{
    padding:18px;

    border-radius:18px;
  }


  .sidebar-news{
    grid-template-columns:100px minmax(0,1fr);
  }


  .sidebar-news-image{
    width:100px;

    height:75px;
  }

}


/* ==========================================
   HP KECIL
========================================== */

@media (max-width:480px){

  .detail-title{
    font-size:26px;
  }


  .detail-category{
    font-size:11px;
  }


  .detail-share-buttons{
    display:grid;

    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .share-btn{
    width:100%;

    min-width:0;
  }


  .share-label{
    font-size:12px;
  }


  .detail-bottom-share{
    gap:7px;
  }


  .bottom-share{
    font-size:11px;

    padding:7px 9px;
  }


  .sidebar-news{
    grid-template-columns:90px minmax(0,1fr);
  }


  .sidebar-news-image{
    width:90px;

    height:70px;
  }

}