/*
Theme Name: TDN Kampus
Theme URI: https://stietdn.ac.id/
Author: STIE Tri Dharma Nusantara
Author URI: https://stietdn.ac.id/
Description: Tema WordPress custom untuk STIE Tri Dharma Nusantara Makassar. Classic theme (bukan Elementor) dengan skema warna navy & gold, section Berita dinamis dari kategori WordPress standar. Prefix class: tdn-.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tdn-kampus
Tags: education, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ========================================================================
   TDN Kampus - Design tokens
   ======================================================================== */
:root{
  --tdn-navy:#0F2A4A;
  --tdn-navy-dark:#0a1f38;
  --tdn-navy-soft:#1b3a63;
  --tdn-gold:#C9A227;
  --tdn-gold-soft:#e0bc4a;
  --tdn-cream:#F7F5F0;
  --tdn-white:#ffffff;
  --tdn-text:#1f2937;
  --tdn-muted:#5b6472;
  --tdn-border:#e6e2d8;
  --tdn-shadow:0 10px 30px -12px rgba(15,42,74,.18);
  --tdn-radius:10px;
  --tdn-font-heading:'Lora', Georgia, serif;
  --tdn-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tdn-container:1180px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  overflow-x:hidden;
  max-width:100%;
  font-family:var(--tdn-font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--tdn-text);
  background:var(--tdn-white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tdn-navy);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--tdn-gold)}
h1,h2,h3,h4,h5,h6{font-family:var(--tdn-font-heading);color:var(--tdn-navy);margin:0 0 .6em;line-height:1.25;font-weight:600}
p{margin:0 0 1em}

/* Layout */
.tdn-container{max-width:var(--tdn-container);margin:0 auto;padding:0 24px}
.tdn-section{padding:80px 0}
.tdn-section--cream{background:var(--tdn-cream)}
.tdn-section--navy{background:var(--tdn-navy);color:#e8ecf3}
.tdn-section--navy h2,.tdn-section--navy h3{color:#fff}

/* Section heading with gold ribbon */
.tdn-eyebrow{
  display:inline-block;
  font-family:var(--tdn-font-body);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tdn-gold);
  font-weight:600;
  margin-bottom:14px;
  position:relative;
  padding-left:44px;
}
.tdn-eyebrow::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:32px;height:2px;
  background:var(--tdn-gold);
  transform:translateY(-50%);
}
.tdn-section-title{font-size:38px;margin-bottom:14px;position:relative}
.tdn-section-title::after{
  content:"";
  display:block;
  width:60px;height:3px;
  background:var(--tdn-gold);
  margin-top:16px;
  border-radius:2px;
}
.tdn-section-title--center{text-align:center}
.tdn-section-title--center::after{margin-left:auto;margin-right:auto}
.tdn-section-lead{max-width:720px;color:var(--tdn-muted);font-size:17px}
.tdn-section-lead--center{margin-left:auto;margin-right:auto;text-align:center}

/* Buttons */
.tdn-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--tdn-font-body);
  font-weight:600;font-size:15px;
  letter-spacing:.02em;
  cursor:pointer;
  border:2px solid transparent;
  transition:all .25s ease;
  text-decoration:none;
  line-height:1;
}
.tdn-btn--primary{background:var(--tdn-gold);color:#1a1a1a;border-color:var(--tdn-gold)}
.tdn-btn--primary:hover{background:var(--tdn-gold-soft);border-color:var(--tdn-gold-soft);color:#1a1a1a;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(201,162,39,.55)}
.tdn-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.tdn-btn--ghost:hover{background:#fff;color:var(--tdn-navy);border-color:#fff}
.tdn-btn--navy{background:var(--tdn-navy);color:#fff;border-color:var(--tdn-navy)}
.tdn-btn--navy:hover{background:var(--tdn-navy-dark);color:#fff}
.tdn-btn--outline{background:transparent;color:var(--tdn-navy);border-color:var(--tdn-navy)}
.tdn-btn--outline:hover{background:var(--tdn-navy);color:#fff}

/* ========================================================================
   Header / Navigation
   ======================================================================== */
/* ===== Topbar (di atas header navy) ===== */

/* ===== Header (referensi: navy sticky + gold bottom line + logo bulat) ===== */
.tdn-header{
  background:var(--tdn-navy);
  border-bottom:3px solid var(--tdn-gold);
  position:sticky;top:0;z-index:100;
  padding:14px 0;
}
.tdn-header__inner{
  display:flex;align-items:center;gap:16px;
  padding:0;
}
.tdn-brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0;flex-shrink:1}
.tdn-brand__logo{
  width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.tdn-brand__logo img,.tdn-brand__logo .custom-logo{width:100%;height:100%;object-fit:contain;max-height:none}
/* WP custom-logo-link wrapper */
.tdn-brand .custom-logo-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.tdn-brand__text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tdn-brand__name{
  font-family:var(--tdn-font-heading);
  font-weight:600;font-size:16.5px;color:#fff;
  letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tdn-brand__tag{
  font-size:11px;color:#a9bad1;
  letter-spacing:.03em;margin-top:1px;
  text-transform:none;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
/* EDIT: label "STIE" di kolom brand FOOTER dibuat lebih besar & tegas — khusus footer,
   supaya tidak ikut membesarkan tagline di navbar (class-nya sama, konteksnya beda) */
.tdn-footer__brand .tdn-brand__tag{
  font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  white-space:normal;overflow:visible;max-width:none;
}

/* Nav disembunyikan di header, cuma bisa dibuka lewat ikon hamburger — berlaku di SEMUA ukuran layar (desktop & mobile), bukan cuma mobile */
.tdn-nav{
  position:absolute;top:100%;right:0;left:auto;
  min-width:260px;
  background:var(--tdn-navy-dark);
  padding:14px 16px 18px;
  box-shadow:var(--tdn-shadow);
  display:none;margin-left:0;
  border-bottom:3px solid var(--tdn-gold);
  border-radius:0 0 8px 8px;
  z-index:50;
}
.tdn-nav.is-open{display:block}
.tdn-nav ul{flex-direction:column;align-items:stretch;gap:2px}
.tdn-nav li{position:static}
.tdn-nav a{padding:12px 14px;border-radius:4px;font-size:14px;color:#c9d2e0}
.tdn-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.tdn-nav .sub-menu{position:static;box-shadow:none;padding:0 0 6px 14px;border:none;display:block;background:transparent}
.tdn-nav .sub-menu a{color:#a9bad1;padding:8px 12px;font-size:13.5px}
.tdn-nav .sub-menu a:hover{color:var(--tdn-gold);background:transparent}
.tdn-header__inner{position:relative}


/* Ikon hamburger — selalu tampil, ini satu-satunya cara buka menu */
.tdn-nav-toggle{
  display:inline-flex;
  background:transparent;border:1px solid rgba(255,255,255,.15);
  width:40px;height:40px;border-radius:4px;
  cursor:pointer;
  align-items:center;justify-content:center;
  color:#fff;
  flex-shrink:0;
  margin-left:auto; /* FIX: dorong hamburger ke ujung kanan header (dulu nempel ke logo karena nav tersembunyi tidak lagi mengisi ruang setelah tombol Daftar dihapus) */
}
.tdn-nav-toggle svg{width:22px;height:22px}

/* ===== Desktop nav: menu utama sejajar di navbar, submenu muncul saat diklik ===== */
@media (min-width:901px){
  .tdn-nav-toggle{display:none} /* hamburger cuma dipakai di mobile */

  .tdn-nav{
    position:static;
    display:flex;
    align-items:center;
    background:none;
    box-shadow:none;
    padding:0;
    border-bottom:none;
    border-radius:0;
    min-width:0;
    margin-left:auto;
    z-index:auto;
  }
  .tdn-nav > ul{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}
  .tdn-nav > ul > li{position:relative}
  .tdn-nav > ul > li > a{
    display:flex;align-items:center;gap:5px;
    padding:10px 16px;
    border-radius:4px;
    color:#fff;
    font-weight:600;
    font-size:14.5px;
    white-space:nowrap;
  }
  .tdn-nav > ul > li > a:hover{background:rgba(255,255,255,.08);color:#fff}

  /* Panah kecil penanda item yang punya submenu */
  .tdn-nav > ul > li.menu-item-has-children > a::after{
    content:"";
    width:0;height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid currentColor;
    opacity:.7;
    transition:transform .2s ease;
    flex-shrink:0;
  }
  .tdn-nav > ul > li.menu-item-has-children.is-open > a::after{transform:rotate(180deg)}

  /* Submenu: tersembunyi, baru tampil saat parent-nya diklik (class .is-open ditambahkan via JS) */
  .tdn-nav .sub-menu{
    position:absolute;top:100%;left:0;
    min-width:230px;
    background:var(--tdn-navy-dark);
    border-bottom:3px solid var(--tdn-gold);
    border-radius:0 0 8px 8px;
    box-shadow:var(--tdn-shadow);
    padding:8px 0;
    display:none;
    z-index:50;
  }
  /* FIX: submenu item paling kanan dibuka rata kanan (left:auto;right:0) supaya
     tidak kepotong/keluar dari tepi layar — ini penyebab tampilan "kacau" sebelumnya */
  .tdn-nav > ul > li:last-child .sub-menu,
  .tdn-nav > ul > li:nth-last-child(2) .sub-menu{
    left:auto;right:0;
  }
  .tdn-nav li.is-open > .sub-menu{display:block}
  .tdn-nav .sub-menu a{display:block;padding:10px 18px;color:#c9d2e0;font-size:14px;white-space:nowrap}
  .tdn-nav .sub-menu a:hover{background:rgba(255,255,255,.06);color:var(--tdn-gold)}
}

/* ========================================================================
   Hero
   EDIT: hero berupa slider foto full-width (3 gambar bergantian, dari
   Media Library via Customizer — bukan hardcode). Tidak ada judul,
   deskripsi, atau tombol overlay di atasnya.
   REVISI: satu foto per slide dipakai untuk desktop MAUPUN mobile (tidak
   ada lagi upload foto Mobile terpisah). Supaya tidak perlu foto beda
   rasio untuk konten yang sama, mobile tetap landscape (16/9, sama
   seperti desktop) hanya lebih pendek — crop rapi lewat object-fit:cover.
   ======================================================================== */
.tdn-hero{
  position:relative;
  line-height:0; /* hilangkan gap kecil di bawah slider */
}
.tdn-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--tdn-navy-soft);
}
.tdn-slider__track{position:relative;width:100%;height:100%}
.tdn-slider__slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .7s ease;
}
.tdn-slider__slide.is-active{opacity:1;visibility:visible}
.tdn-slider__slide picture{display:block;width:100%;height:100%}
.tdn-slider__slide img{width:100%;height:100%;object-fit:cover;display:block}

/* EDIT: skeleton shimmer + fade-in gambar slider — gambar disembunyikan
   (opacity:0) sampai event "load" selesai (ditandai JS lewat class
   is-img-loaded pada .tdn-slider__slide), supaya tidak kelihatan
   "loading garis per garis". Selama itu, background shimmer abu-abu
   jadi placeholder. Terapkan juga di .tdn-prodi-card__img (lihat bawah). */
.tdn-slider__slide{
  background:linear-gradient(90deg,#e4e7ec 25%,#eef0f3 37%,#e4e7ec 63%);
  background-size:400% 100%;
  animation:tdn-img-shimmer 1.4s ease infinite;
}
.tdn-slider__slide.is-img-loaded{animation:none;background:none}
.tdn-slider__slide img{opacity:0;transition:opacity .5s ease}
.tdn-slider__slide.is-img-loaded img{opacity:1}
.tdn-slider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(15,42,74,.55);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s ease,transform .2s ease;
  z-index:2;
}
.tdn-slider__arrow:hover{background:var(--tdn-gold);border-color:var(--tdn-gold);color:#1a1a1a}
.tdn-slider__arrow--prev{left:14px}
.tdn-slider__arrow--next{right:14px}
.tdn-slider__dots{
  position:absolute;left:0;right:0;bottom:16px;
  display:flex;justify-content:center;gap:8px;z-index:2;
}
.tdn-slider__dots button{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6);
  padding:0;cursor:pointer;transition:background .2s ease,transform .2s ease;
}
.tdn-slider__dots button.is-active{background:var(--tdn-gold);border-color:var(--tdn-gold);transform:scale(1.15)}
@media (max-width:900px){
  /* REVISI: tetap landscape di mobile (bukan 8/9 yang hampir portrait),
     cuma lebih pendek dari desktop supaya proporsional di layar sempit.
     Pakai object-fit:cover jadi foto yang sama otomatis ter-crop rapi. */
  .tdn-slider{aspect-ratio:auto;height:clamp(220px,62vw,320px)}
}
/* EDIT: di desktop, aspect-ratio:16/9 murni bikin hero makin tinggi
   seiring layar makin lebar (di layar 1920px bisa ±1080px, hampir
   satu layar penuh). Dibatasi pakai clamp() supaya tetap proporsional
   di layar sedang tapi tidak membengkak di layar sangat lebar —
   object-fit:cover di gambar tetap menjaga crop-nya rapi. */
@media (min-width:901px){
  .tdn-slider{aspect-ratio:auto;height:clamp(360px,42vw,520px)}
}

/* ========================================================================
   Promo Banner Slider (BARU — section di atas "Berita & Kegiatan Kampus")
   EDIT: pakai markup .tdn-slider yang sama dengan Hero (JS otomatis jalan
   lewat [data-tdn-slider]), tapi modifier .tdn-slider--promo di-override
   di sini supaya PERILAKU TAMPILAN-nya beda dari Hero:
   - object-fit:CONTAIN (bukan cover) — foto banner promosi ini berisi
     teks/desain penuh sampai ke tepi, kalau di-crop teksnya bisa hilang.
     Contain menjamin foto SELALU tampil utuh, berapapun rasio aslinya
     (foto contoh: ada yang ~3:1, ada yang 2:1 — semua tetap muat).
   - background gradasi navy lembut mengisi area "letterbox" yang
     tersisa kiri/kanan atau atas/bawah supaya tidak terlihat kosong.
   - aspect-ratio didesain untuk foto LANDSCAPE (bukan potret seperti
     Hero yang di mobile jadi 8/9) — baik di desktop maupun mobile
     framenya tetap landscape supaya foto promosi ini muat penuh & tetap
     terbaca di layar HP.
   ======================================================================== */
.tdn-promo__head{margin-bottom:28px}
.tdn-promo .tdn-slider--promo{
  aspect-ratio:12/5;
  max-width:1040px;
  margin:0 auto;
  border-radius:16px;
  background:linear-gradient(135deg,#0F2A4A 0%,#1b3a63 100%);
  box-shadow:var(--tdn-shadow);
}
.tdn-slider--promo .tdn-slider__slide img{
  object-fit:contain;
  padding:10px;
  box-sizing:border-box;
}
@media (max-width:900px){
  /* EDIT: tetap landscape di mobile (bukan portrait 8/9 seperti Hero)
     supaya ketiga banner ini tampil penuh, bukan terpotong tinggi. */
  .tdn-promo .tdn-slider--promo{aspect-ratio:4/3;border-radius:12px}
  .tdn-slider--promo .tdn-slider__slide img{padding:6px}
}
@media (max-width:480px){
  /* Layar HP sangat sempit: banner rasio ~3:1 & ~2:1 makin butuh ruang
     vertikal supaya tidak terlalu kecil — dilonggarkan sedikit lagi. */
  .tdn-promo .tdn-slider--promo{aspect-ratio:1/1}
}

/* Section tipis berisi baris shortcut navigasi (di atas Tentang Kami), di bawah hero slider */
.tdn-hero-cta{
  background:var(--tdn-navy);
  border-bottom:3px solid var(--tdn-gold);
}
.tdn-hero-cta__inner{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:22px 24px;
}

/* ------------------------------------------------------------------------
   Shortcut Navigasi (BARU) — baris chip ber-ikon di strip Hero CTA
   (di bawah slider foto utama, di atas "Tentang Kami"), pengganti
   tombol "Lihat Program Studi" yang lama. Dipasang di atas latar NAVY
   (.tdn-hero-cta), jadi style-nya "ghost on dark": border putih tipis,
   isi transparan, teks putih — hover jadi solid putih dengan teks navy
   (senada dengan .tdn-btn--ghost yang sudah ada di tema). Chip terakhir
   ("Daftar Sekarang") dikasih modifier --accent isi emas solid supaya
   tetap paling menonjol sebagai CTA utama.
   ------------------------------------------------------------------------ */
.tdn-shortcuts-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
}
.tdn-shortcut{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px 10px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  font-size:14.5px;font-weight:600;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.tdn-shortcut:hover{
  background:#fff;color:var(--tdn-navy);border-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.35);
}
.tdn-shortcut__icon{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  transition:background .2s ease,color .2s ease;
}
.tdn-shortcut__icon svg{width:16px;height:16px}
.tdn-shortcut:hover .tdn-shortcut__icon{background:var(--tdn-cream);color:var(--tdn-navy)}
.tdn-shortcut--accent{
  background:var(--tdn-gold);
  border-color:var(--tdn-gold);
  color:#1a1a1a;
}
.tdn-shortcut--accent .tdn-shortcut__icon{background:rgba(26,26,26,.12);color:#1a1a1a}
.tdn-shortcut--accent:hover{background:var(--tdn-gold-soft);border-color:var(--tdn-gold-soft);color:#1a1a1a}
.tdn-shortcut--accent:hover .tdn-shortcut__icon{background:rgba(26,26,26,.15);color:#1a1a1a}
@media (max-width:600px){
  .tdn-shortcuts-row{gap:9px}
  .tdn-shortcut{padding:8px 14px 8px 8px;font-size:13.5px}
  .tdn-shortcut__icon{width:26px;height:26px}
  .tdn-shortcut__icon svg{width:14px;height:14px}
}

/* ========================================================================
   Program Studi Cards
   ======================================================================== */
.tdn-prodi__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px}
.tdn-prodi-card{
  background:#fff;
  border:1px solid var(--tdn-border);
  border-radius:14px;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.tdn-prodi-card:hover{transform:translateY(-6px);box-shadow:var(--tdn-shadow);border-color:transparent}
/* EDIT: gambar kartu program studi — ganti lewat Appearance > Customize > TDN Kampus: Gambar Beranda */
.tdn-prodi-card__img{height:200px;overflow:hidden;position:relative}
.tdn-prodi-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,opacity .5s ease}
.tdn-prodi-card:hover .tdn-prodi-card__img img{transform:scale(1.07)}

/* EDIT: skeleton shimmer + fade-in gambar kartu Program Studi — sama
   seperti hero slider di atas. JS akan menambahkan class is-img-loaded
   begitu <img> selesai load (atau gagal load, supaya shimmer tidak
   nyala selamanya kalau gambar rusak). */
.tdn-prodi-card__img{
  background:linear-gradient(90deg,#e4e7ec 25%,#eef0f3 37%,#e4e7ec 63%);
  background-size:400% 100%;
  animation:tdn-img-shimmer 1.4s ease infinite;
}
.tdn-prodi-card__img.is-img-loaded{animation:none;background:none}
.tdn-prodi-card__img img{opacity:0}
.tdn-prodi-card__img.is-img-loaded img{opacity:1}

@keyframes tdn-img-shimmer{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}
@media (prefers-reduced-motion:reduce){
  .tdn-slider__slide,
  .tdn-prodi-card__img{animation:none}
}
.tdn-prodi-card__body{padding:32px 32px 36px;position:relative}
.tdn-prodi-card__body::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--tdn-gold),var(--tdn-gold-soft));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.tdn-prodi-card:hover .tdn-prodi-card__body::before{transform:scaleX(1)}
.tdn-prodi-card__tag{display:inline-block;background:var(--tdn-cream);color:var(--tdn-gold);font-size:11px;letter-spacing:.2em;font-weight:700;padding:6px 12px;border-radius:4px;margin-bottom:16px}
.tdn-prodi-card__title{font-size:26px;margin-bottom:12px}
.tdn-prodi-card__desc{color:var(--tdn-muted);margin-bottom:22px}
.tdn-prodi-card__link{display:inline-flex;align-items:center;gap:6px;color:var(--tdn-navy);font-weight:600;font-size:15px}
.tdn-prodi-card__link:hover{color:var(--tdn-gold)}

/* ========================================================================
   Tentang / About
   ======================================================================== */
/* EDIT: Tentang Kami sekarang satu kolom, full-width & center (bukan
   dua-kolom dengan gambar/kalender di samping) — section ini "menguasai"
   ruangnya sendiri. Teks dibatasi lebar (max-width) supaya tetap enak
   dibaca meski layar desktop lebar. */
.tdn-about--center{max-width:760px;margin:0 auto;text-align:center}
.tdn-about--center .tdn-eyebrow,
.tdn-about--center .tdn-section-title{margin-left:auto;margin-right:auto}
.tdn-about--center p{color:var(--tdn-muted)}
.tdn-about__media--center{max-width:960px;margin:44px auto 0}
.tdn-about__media--center img{width:100%;border-radius:14px;box-shadow:var(--tdn-shadow)}
.tdn-about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.tdn-stat{
  position:relative;
  padding:32px 16px 26px;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--tdn-border);
  text-align:center;
  overflow:hidden;
  box-shadow:0 8px 24px -14px rgba(15,42,74,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tdn-stat::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--tdn-gold),var(--tdn-gold-soft));
}
.tdn-stat:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px -14px rgba(15,42,74,.35);
}
.tdn-stat__icon{
  width:46px;height:46px;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--tdn-cream);
  border-radius:50%;
  color:var(--tdn-gold);
}
.tdn-stat__icon svg{width:22px;height:22px}
.tdn-stat__num{font-family:var(--tdn-font-heading);font-size:30px;color:var(--tdn-navy);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.tdn-stat__label{font-size:12.5px;color:var(--tdn-muted);margin-top:8px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* ========================================================================
   Kelas Karyawan — section di bawah Tentang Kami. Foto gedung transparan
   di sisi kanan, 3 kolom fitur dengan ikon lingkaran navy-gold dipisah
   garis vertikal tipis, ditutup strip navy melengkung berisi trust badges.
   Tanpa tombol CTA (dihapus sesuai permintaan).
   ======================================================================== */
.tdn-kk{
  position:relative;
  background:var(--tdn-cream);
  padding:88px 0 0;
  overflow:hidden;
  isolation:isolate;
}
.tdn-kk::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:260px; height:260px;
  background-image:radial-gradient(var(--tdn-navy) 1.4px, transparent 1.4px);
  background-size:18px 18px;
  opacity:.08;
  z-index:0;
}
.tdn-kk__photo{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:52%;
  z-index:0;
  pointer-events:none;
}
.tdn-kk__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:80% 30%;
  opacity:.16;
  -webkit-mask-image:linear-gradient(to left, black 45%, transparent 92%);
  mask-image:linear-gradient(to left, black 45%, transparent 92%);
}
.tdn-kk__inner{position:relative;z-index:1;text-align:center}
.tdn-kk__eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:13px;font-weight:700;letter-spacing:.22em;
  color:var(--tdn-gold);text-transform:uppercase;
  margin-bottom:22px;
}
.tdn-kk__eyebrow svg{width:20px;height:20px;flex:none}
.tdn-kk__eyebrow .tdn-kk__eyebrow-line{width:34px;height:1px;background:var(--tdn-gold);opacity:.6}
.tdn-kk__title{
  font-family:var(--tdn-font-heading);
  font-weight:700;
  font-size:46px;
  line-height:1.16;
  margin:0;
  color:var(--tdn-navy);
}
.tdn-kk__title .tdn-kk__accent{color:var(--tdn-gold)}
.tdn-kk__underline{
  width:56px;height:3px;border-radius:2px;
  background:var(--tdn-gold);
  margin:24px auto 26px;
}
.tdn-kk__lead{max-width:680px;margin:0 auto;color:var(--tdn-navy);font-size:16.5px;opacity:.85}
.tdn-kk__lead p{margin:0 0 .6em}
.tdn-kk__lead p:last-child{margin-bottom:0}
.tdn-kk__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:900px;
  margin:56px auto 0;
}
.tdn-kk__col{
  text-align:center;
  padding:0 28px;
  border-left:1px solid var(--tdn-border);
}
.tdn-kk__col:first-child{border-left:none}
.tdn-kk__col-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--tdn-navy);
  border:2px solid var(--tdn-gold);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.tdn-kk__col-icon svg{width:26px;height:26px;color:var(--tdn-gold)}
.tdn-kk__col-title{
  font-family:var(--tdn-font-heading);
  font-weight:700;font-size:19px;color:var(--tdn-navy);
  margin:0 0 8px;
}
.tdn-kk__col-desc{font-size:14.5px;color:var(--tdn-muted);margin:0}
.tdn-kk__wave{position:relative;margin-top:56px;line-height:0}
.tdn-kk__wave svg{display:block;width:100%;height:70px}
.tdn-kk__trust{background:var(--tdn-navy);padding:34px 0 38px}
.tdn-kk__trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tdn-kk__trust-item{display:flex;align-items:center;gap:14px}
.tdn-kk__trust-icon{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,162,39,.5);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.tdn-kk__trust-icon svg{width:19px;height:19px;color:var(--tdn-gold)}
.tdn-kk__trust-text{color:#e8ecf3;font-size:14px;line-height:1.35}
.tdn-kk__trust-text strong{display:block;font-weight:600;color:#fff}
@media (max-width:900px){
  .tdn-kk__photo{width:65%}
  .tdn-kk__title{font-size:34px}
  .tdn-kk__cols{grid-template-columns:1fr;max-width:420px;row-gap:36px}
  .tdn-kk__col{border-left:none;padding:0 12px}
  .tdn-kk__trust-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}
}

/* ========================================================================
   Berita / News — layout 2 kolom: list berita (kiri) + sidebar
   Kalender Kegiatan & Pengumuman ditumpuk (kanan)
   ======================================================================== */
.tdn-news__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:0;flex-wrap:wrap}

.tdn-news-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:40px;align-items:start;margin-top:36px}

/* Kolom kiri: Berita Terkini */
.tdn-news-col__head{margin-bottom:22px}
.tdn-news-col__head h3{font-size:20px;position:relative;padding-bottom:12px;margin-bottom:0}
.tdn-news-col__head h3::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;background:var(--tdn-gold);border-radius:2px}

.tdn-news-list{display:flex;flex-direction:column;gap:22px}
.tdn-news-list-item{display:flex;gap:18px;background:#fff;border:1px solid var(--tdn-border);border-radius:14px;overflow:hidden;transition:all .25s ease}
.tdn-news-list-item:hover{box-shadow:var(--tdn-shadow);transform:translateY(-3px);border-color:transparent}
.tdn-news-list-item__thumb{flex:0 0 190px;aspect-ratio:4/3;overflow:hidden;background:var(--tdn-cream)}
.tdn-news-list-item__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tdn-news-list-item__body{padding:16px 18px 16px 0;display:flex;flex-direction:column;gap:8px;min-width:0}
.tdn-news-list-item__title{font-size:17px;line-height:1.4;margin:0}
.tdn-news-list-item__title a{color:var(--tdn-navy)}
.tdn-news-list-item__title a:hover{color:var(--tdn-gold)}
.tdn-news-list-item__meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--tdn-muted)}
.tdn-news-list-item__meta span{display:inline-flex;align-items:center;gap:5px}
.tdn-news-list-item__meta svg{width:13px;height:13px;color:var(--tdn-gold);flex:none}
.tdn-news-list-item__excerpt{font-size:13.5px;color:var(--tdn-muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tdn-news-list-item__more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--tdn-navy);margin-top:2px}
.tdn-news-list-item__more svg{width:13px;height:13px}
.tdn-news-list-item__more:hover{color:var(--tdn-gold)}

.tdn-news-col__more{text-align:center;margin-top:28px}

/* Kolom kanan: sidebar
   EDIT: dibungkus jadi satu "panel" kartu (background putih, border,
   shadow, aksen emas di atas) supaya kolom kanan terasa terpisah
   secara visual dari kolom kiri (Berita Terkini) di mode desktop.
   Di mobile, panel ini diratakan kembali lewat media query di bawah
   supaya tidak menambah padding yang tidak perlu di layar sempit. */
.tdn-news-sidebar{
  display:flex;flex-direction:column;gap:28px;
  background:#fff;
  border:1px solid var(--tdn-border);
  border-top:4px solid var(--tdn-gold);
  border-radius:16px;
  padding:30px 28px;
  box-shadow:0 4px 24px rgba(15,42,74,.06);
}
.tdn-sidebar-block + .tdn-sidebar-block{padding-top:26px;border-top:1px solid var(--tdn-border)}
.tdn-sidebar-block__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.tdn-sidebar-block__head h3{font-size:19px;position:relative;padding-bottom:12px;margin-bottom:0}
.tdn-sidebar-block__head h3::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--tdn-gold);border-radius:2px}
.tdn-info-empty{color:var(--tdn-muted);font-size:13.5px;font-style:italic;margin:0}
.tdn-sidebar-block__more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;font-size:13.5px;color:#fff;background:var(--tdn-navy);padding:9px 18px;border-radius:24px}
.tdn-sidebar-block__more:hover{background:var(--tdn-navy-dark);color:#fff}

/* Kalender Kegiatan */
.tdn-event-list{display:flex;flex-direction:column;gap:6px}
.tdn-event-item{display:flex;gap:14px;align-items:center;padding:8px;border-radius:10px;transition:background .2s ease}
.tdn-event-item:hover{background:var(--tdn-cream)}
.tdn-event-item__thumb{flex:0 0 54px;height:54px;border-radius:8px;overflow:hidden;background:var(--tdn-cream)}
.tdn-event-item__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tdn-event-item__title{display:block;font-size:14px;font-weight:600;color:var(--tdn-navy);line-height:1.35;margin-bottom:4px;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden}
.tdn-event-item__dates{display:block;font-size:12px;color:var(--tdn-muted)}

/* Pengumuman */
.tdn-announce-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.tdn-announce-item__title{display:block;font-size:13.5px;font-weight:600;color:var(--tdn-navy);line-height:1.4;margin-bottom:6px}
.tdn-announce-item__title:hover{color:var(--tdn-gold)}
.tdn-announce-item__date{display:block;font-size:11.5px;color:var(--tdn-muted);font-style:italic;margin-bottom:8px}
.tdn-announce-item__dl{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#fff;background:var(--tdn-gold);padding:5px 12px;border-radius:20px}
.tdn-announce-item__dl:hover{background:var(--tdn-gold-soft);color:#fff}

/* ========================================================================
   Testimoni
   ======================================================================== */
.tdn-testi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.tdn-testi-card{
  background:#fff;padding:32px 28px;border-radius:14px;
  border-top:3px solid var(--tdn-gold);
  box-shadow:0 4px 20px rgba(15,42,74,.05);
  position:relative;
}
.tdn-testi-card__quote{font-family:var(--tdn-font-heading);font-style:italic;font-size:17px;color:var(--tdn-text);line-height:1.6;margin-bottom:20px}
.tdn-testi-card__quote::before{content:"“";position:absolute;top:-6px;right:22px;font-family:var(--tdn-font-heading);font-size:80px;color:var(--tdn-gold);opacity:.25;line-height:1}
.tdn-testi-card__person{display:flex;align-items:center;gap:12px}
.tdn-testi-card__person > div:last-child{min-width:0}
.tdn-testi-card__avatar{width:48px;height:48px;flex:0 0 48px;flex-shrink:0;border-radius:50%;background:var(--tdn-cream) center/cover no-repeat;border:2px solid var(--tdn-gold)}
.tdn-testi-card__name{font-family:var(--tdn-font-heading);font-weight:600;color:var(--tdn-navy);font-size:16px;line-height:1.1}
.tdn-testi-card__role{font-size:12px;color:var(--tdn-muted);letter-spacing:.05em}

/* ========================================================================
   CTA Pendaftaran
   ======================================================================== */
.tdn-cta{background:linear-gradient(135deg,var(--tdn-navy) 0%,var(--tdn-navy-soft) 100%);color:#fff;text-align:center;padding:80px 0;position:relative;overflow:hidden}
.tdn-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(201,162,39,.15),transparent 50%);pointer-events:none}
.tdn-cta__inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.tdn-cta h2{color:#fff;font-size:38px;margin-bottom:14px}
.tdn-cta p{color:#d3dae7;font-size:17px;margin-bottom:28px}

/* ========================================================================
   Footer
   ======================================================================== */
.tdn-footer{background:var(--tdn-navy-dark);color:#c1cad9;padding:70px 0 0}
.tdn-footer a{color:#c1cad9}
.tdn-footer a:hover{color:var(--tdn-gold)}
.tdn-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.tdn-footer__brand p{color:#98a4ba;font-size:14px;margin-top:14px}
.tdn-footer__title{font-family:var(--tdn-font-heading);color:#fff;font-size:16px;margin-bottom:18px;position:relative;padding-bottom:10px}
.tdn-footer__title::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--tdn-gold)}
.tdn-footer ul{list-style:none;padding:0;margin:0}
.tdn-footer li{margin-bottom:10px;font-size:14px}
.tdn-footer__bottom{margin-top:50px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:13px;color:#7f8ba3}

/* ========================================================================
   Inner page (page.php / single.php)
   ======================================================================== */
.tdn-page-banner{background:linear-gradient(135deg,var(--tdn-navy),var(--tdn-navy-soft));color:#fff;padding:70px 0 60px;text-align:center}
.tdn-page-banner h1{color:#fff;font-size:42px;margin:0 0 10px}
.tdn-page-banner h1::after{content:"";display:block;width:60px;height:3px;background:var(--tdn-gold);margin:16px auto 0;border-radius:2px}
.tdn-page-banner__crumbs{color:#c9d2e0;font-size:14px}
.tdn-page-banner__crumbs a{color:var(--tdn-gold)}

.tdn-content{padding:70px 0}
.tdn-content__inner{max-width:820px;margin:0 auto;font-size:16px;line-height:1.75}
.tdn-content__inner h2{font-size:30px;margin-top:1.6em}
.tdn-content__inner h3{font-size:24px;margin-top:1.4em}
.tdn-content__inner img{border-radius:10px;margin:1.5em 0}
.tdn-content__inner blockquote{border-left:4px solid var(--tdn-gold);background:var(--tdn-cream);padding:18px 24px;margin:1.5em 0;font-family:var(--tdn-font-heading);font-style:italic;color:var(--tdn-navy);border-radius:0 8px 8px 0}
.tdn-content__inner ul,.tdn-content__inner ol{padding-left:1.4em}

.tdn-post-meta{color:var(--tdn-muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.tdn-post-meta a{color:var(--tdn-gold)}

/* Tombol share (single post) */
.tdn-share2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;margin:20px 0 28px;padding:14px 0;border-top:1px solid var(--tdn-border);border-bottom:1px solid var(--tdn-border)}
.tdn-share2__label{font-size:12px;font-weight:600;color:var(--tdn-navy);text-transform:uppercase;letter-spacing:.06em;margin-right:2px;font-family:var(--tdn-font-heading)}
.tdn-share2__link{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tdn-navy);flex:0 0 auto;background:var(--tdn-cream);border:1.5px solid var(--tdn-gold);cursor:pointer;padding:0;transition:background .15s,transform .15s}
.tdn-share2__link:hover{background:var(--tdn-gold);color:#fff;transform:translateY(-2px)}
.tdn-share2__link svg{width:16px;height:16px;fill:currentColor;pointer-events:none}
.tdn-share2__toast{position:absolute;right:0;bottom:-6px;transform:translateY(100%);background:var(--tdn-navy);color:#fff;font-size:12px;padding:6px 12px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s}
.tdn-share2__toast.is-visible{opacity:1}

/* Sidebar widgets (fallback) */
.tdn-widget{background:#fff;border:1px solid var(--tdn-border);border-radius:12px;padding:22px;margin-bottom:24px}
.tdn-widget h3,.tdn-widget .widget-title{font-size:16px;font-family:var(--tdn-font-heading);color:var(--tdn-navy);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--tdn-gold);display:inline-block}

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width:900px){
  .tdn-section{padding:60px 0}
  .tdn-section-title{font-size:30px}

  .tdn-prodi__grid,.tdn-news__grid,.tdn-testi__grid{grid-template-columns:1fr;gap:20px}
  .tdn-info-grid{grid-template-columns:1fr;gap:20px;margin-top:32px}

  .tdn-news-layout{grid-template-columns:1fr;gap:32px}
  .tdn-news-list-item{flex-direction:column}
  .tdn-news-list-item__thumb{flex:none;width:100%;aspect-ratio:16/9}
  .tdn-news-list-item__body{padding:14px 16px 16px}
  .tdn-announce-grid{grid-template-columns:1fr}
  .tdn-news-sidebar{
    background:transparent;border:none;border-top:none;
    border-radius:0;padding:0;box-shadow:none;gap:32px;
  }
  .tdn-sidebar-block+.tdn-sidebar-block{padding-top:0;border-top:none}
  .tdn-about--center{text-align:left}
  .tdn-about--center .tdn-eyebrow,
  .tdn-about--center .tdn-section-title{margin-left:0;margin-right:0}
  .tdn-about__stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .tdn-stat{padding:20px 8px 16px}
  .tdn-stat__icon{width:36px;height:36px;margin-bottom:10px}
  .tdn-stat__icon svg{width:18px;height:18px}
  .tdn-stat__num{font-size:20px}
  .tdn-stat__label{font-size:10.5px}

  .tdn-footer__grid{grid-template-columns:1fr 1fr;gap:30px}
  .tdn-page-banner h1{font-size:32px}
}

@media (max-width:480px){
  .tdn-container{padding:0 18px}
  .tdn-section-title{font-size:26px}
  .tdn-section{padding:50px 0}
  .tdn-cta h2{font-size:26px}
  .tdn-footer__grid{grid-template-columns:1fr}
  .tdn-about__stats{grid-template-columns:1fr}
  .tdn-btn{padding:12px 20px;font-size:14px}
  .tdn-brand__name{font-size:15px}
  .tdn-brand__tag{font-size:10px}
  .tdn-brand__logo{width:40px;height:40px}
}

/* WordPress default classes safety */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{display:block;margin:1em auto}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:13px;color:var(--tdn-muted);text-align:center;margin-top:6px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.sticky{}
.bypostauthor{}

/* ===== Elementor compatibility =====
   Homepage/pages built with Elementor render inside these wrappers.
   No max-width / padding so Elementor sections control layout fully. */
.tdn-elementor-front,
.tdn-elementor-fullwidth{width:100%;max-width:none;margin:0;padding:0}
.tdn-elementor-front > .elementor,
.tdn-elementor-fullwidth > .elementor{width:100%}

/* ===== Halaman Program Studi: Profil Lulusan ===== */
.tdn-profil__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:36px;
}
.tdn-profil-card{
  background:var(--tdn-white);
  border:1px solid var(--tdn-border);
  border-radius:var(--tdn-radius);
  box-shadow:var(--tdn-shadow);
  padding:28px;
}
.tdn-profil-card__title{font-size:20px;margin-bottom:14px}
.tdn-profil-card__desc{color:var(--tdn-muted);font-size:15px;line-height:1.65;margin-bottom:16px}
.tdn-profil-card__prospek{
  font-size:14px;
  color:var(--tdn-navy);
  border-top:1px solid var(--tdn-border);
  padding-top:14px;
}
.tdn-profil-card__prospek strong{display:block;margin-bottom:4px;color:var(--tdn-gold-soft);font-family:var(--tdn-font-heading)}

@media (max-width:900px){
  .tdn-profil__grid{grid-template-columns:1fr}
}

/* ===== Halaman Program Studi: Kurikulum (accordion) ===== */
.tdn-accordion{max-width:820px;margin:36px auto 0}
.tdn-accordion__item{
  border:1px solid var(--tdn-border);
  border-radius:var(--tdn-radius);
  margin-bottom:12px;
  overflow:hidden;
  background:var(--tdn-white);
}
.tdn-accordion__head{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  border:0;
  cursor:pointer;
  padding:16px 20px;
  font-family:var(--tdn-font-heading);
  font-size:17px;
  font-weight:600;
  color:var(--tdn-navy);
  text-align:left;
}
.tdn-accordion__arrow{
  display:inline-block;
  color:var(--tdn-gold);
  transition:transform .2s ease;
}
.tdn-accordion__item.is-open .tdn-accordion__arrow{transform:rotate(90deg)}
.tdn-accordion__body{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding:0 20px;
}
.tdn-accordion__item.is-open .tdn-accordion__body{padding:0 20px 18px}
.tdn-accordion__list{margin:0;padding-left:20px;color:var(--tdn-muted);font-size:15px;line-height:1.9}

/* ===== Halaman Program Studi: Kurikulum (tabs konsentrasi) ===== */
.tdn-tabs{max-width:820px;margin:0 auto}
.tdn-tabs__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px}
.tdn-tabs__btn{
  font-family:var(--tdn-font-body);
  font-size:14px;
  font-weight:600;
  color:var(--tdn-navy);
  background:#fff;
  border:1px solid var(--tdn-border);
  border-radius:30px;
  padding:10px 22px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.tdn-tabs__btn:hover{border-color:var(--tdn-gold)}
.tdn-tabs__btn.is-active{background:var(--tdn-navy);border-color:var(--tdn-navy);color:#fff}
.tdn-tabs__panel{display:none;text-align:left;background:#fff;border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);padding:26px 28px}
.tdn-tabs__panel.is-active{display:block}
.tdn-tabs__cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tdn-tabs__col h4{margin:0 0 10px;font-size:15.5px;color:var(--tdn-navy)}

@media (max-width:640px){
  .tdn-tabs__cols{grid-template-columns:1fr}
  .tdn-tabs__btn{font-size:13px;padding:9px 16px}
}

/* ============================================================
   VISI & MISI page template
   ============================================================ */
.tdn-eyebrow--light{color:var(--tdn-gold-soft)}

/* Hero kutipan visi */
.tdn-visi-hero{background:linear-gradient(135deg,var(--tdn-navy) 0%,var(--tdn-navy-dark) 100%);color:#fff;text-align:center;padding:70px 0;position:relative;overflow:hidden}
.tdn-visi-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(201,162,39,.15),transparent 50%);pointer-events:none}
.tdn-visi-hero__inner{position:relative;z-index:1;max-width:880px;margin:0 auto}
.tdn-visi-quote{font-family:var(--tdn-font-heading);font-style:italic;font-weight:600;font-size:clamp(24px,3.4vw,36px);line-height:1.4;color:#fff;margin:0 0 22px;position:relative;padding:0 10px}
.tdn-visi-quote::before,.tdn-visi-quote::after{content:'"';color:var(--tdn-gold);font-size:1.2em;opacity:.7}
.tdn-visi-tagline{display:inline-block;font-family:var(--tdn-font-body);font-size:14px;letter-spacing:.08em;color:var(--tdn-gold-soft);border-top:1px solid rgba(255,255,255,.2);padding-top:18px;margin-top:6px}
.tdn-visi-narrative{max-width:760px;margin:0 auto;color:var(--tdn-muted);font-size:16.5px;text-align:left}
.tdn-visi-narrative p{margin-bottom:16px}

/* Misi cards */
.tdn-misi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:44px;counter-reset:misi;text-align:left}
.tdn-misi-card{background:#fff;border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);padding:34px 32px;position:relative;transition:transform .3s ease,box-shadow .3s ease}
.tdn-misi-card:hover{transform:translateY(-6px);box-shadow:var(--tdn-shadow)}
.tdn-misi-card__num{counter-increment:misi;font-family:var(--tdn-font-heading);font-size:15px;font-weight:700;color:var(--tdn-gold);letter-spacing:.1em;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid var(--tdn-gold);border-radius:50%;margin-bottom:18px}
.tdn-misi-card__num::before{content:"0" counter(misi)}
.tdn-misi-card p{color:var(--tdn-muted);font-size:15.5px;margin:0}

/* Kata kunci visi (cadangan, tidak dipakai saat mode infografis aktif) */
.tdn-kunci-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;text-align:left}
.tdn-kunci-card{background:var(--tdn-cream);border-radius:var(--tdn-radius);padding:28px 26px;border-left:3px solid var(--tdn-gold)}
.tdn-kunci-card__title{font-family:var(--tdn-font-heading);font-weight:600;color:var(--tdn-navy);font-size:18px;margin-bottom:10px}
.tdn-kunci-card p{color:var(--tdn-muted);font-size:14.5px;margin:0;line-height:1.6}

/* Infografis (gambar) — dipakai untuk section Kata Kunci Visi & Core Values BESTIE */
.tdn-infografis{margin-top:44px;border-radius:var(--tdn-radius);overflow:hidden;box-shadow:var(--tdn-shadow);border:1px solid var(--tdn-border)}
.tdn-infografis img{width:100%;height:auto;display:block}
.tdn-infografis--navy{border-color:rgba(255,255,255,.14)}

/* Diferensiasi / keunggulan kompetitif */
.tdn-diff-list{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;text-align:left}
.tdn-diff-item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);padding:24px}
.tdn-diff-item__icon{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--tdn-navy);display:flex;align-items:center;justify-content:center}
.tdn-diff-item__icon svg{width:18px;height:18px;stroke:var(--tdn-gold-soft)}
.tdn-diff-item h4{font-size:16.5px;margin:0 0 6px;color:var(--tdn-navy)}
.tdn-diff-item p{margin:0;color:var(--tdn-muted);font-size:14.5px}

/* Core Values BESTIE */
.tdn-bestie-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.tdn-bestie-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--tdn-radius);padding:26px 18px;text-align:center;transition:background .3s ease, transform .3s ease}
.tdn-bestie-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.tdn-bestie-card__letter{font-family:var(--tdn-font-heading);font-weight:700;font-size:36px;color:var(--tdn-gold-soft);margin-bottom:10px}
.tdn-bestie-card__word{font-weight:600;font-size:14.5px;color:#fff;margin-bottom:8px}
.tdn-bestie-card__desc{font-size:12.5px;color:#c9d2e0;line-height:1.55}
.tdn-bestie-lead{max-width:760px;margin:0 auto;text-align:center;color:#c9d2e0}

/* Tujuan & Sasaran */
.tdn-tujuan-wrap{margin-top:44px;display:flex;flex-direction:column;gap:22px;text-align:left}
.tdn-tujuan-card{background:#fff;border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);overflow:hidden}
.tdn-tujuan-card__head{background:var(--tdn-cream);padding:22px 30px;display:flex;gap:18px;align-items:flex-start}
.tdn-tujuan-card__badge{flex:0 0 auto;background:var(--tdn-navy);color:var(--tdn-gold-soft);font-family:var(--tdn-font-heading);font-weight:700;font-size:13px;letter-spacing:.06em;padding:6px 14px;border-radius:20px}
.tdn-tujuan-card__head p{margin:0;color:var(--tdn-navy);font-weight:600;font-size:16.5px;line-height:1.5}
.tdn-tujuan-card__body{padding:26px 30px 30px}
.tdn-tujuan-card__body p.tdn-tujuan-label{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tdn-gold);font-weight:700}
.tdn-tujuan-card__body ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tdn-tujuan-card__body li{display:flex;gap:12px;align-items:flex-start;color:var(--tdn-text);font-size:15px}
.tdn-tujuan-card__body li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--tdn-gold);margin-top:8px}

/* Responsive: Visi & Misi */
@media (max-width: 900px){
  .tdn-misi-grid{grid-template-columns:1fr}
  .tdn-kunci-grid{grid-template-columns:repeat(2,1fr)}
  .tdn-diff-list{grid-template-columns:1fr}
  .tdn-bestie-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .tdn-visi-hero{padding:50px 0}
  .tdn-kunci-grid{grid-template-columns:1fr}
  .tdn-bestie-grid{grid-template-columns:repeat(2,1fr)}
  .tdn-tujuan-card__head{flex-direction:column;padding:18px 20px}
  .tdn-tujuan-card__body{padding:20px}
}

/* ============================================================
   STRUKTUR ORGANISASI page template
   ============================================================ */
.tdn-chart-card{margin-top:44px;background:#fff;border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);box-shadow:var(--tdn-shadow);padding:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tdn-chart-card img{margin:0 auto;min-width:640px}
.tdn-chart-hint{display:none;text-align:center;font-size:12.5px;color:var(--tdn-muted);margin-top:10px;letter-spacing:.02em}
.tdn-chart-actions{text-align:center;margin-top:18px}
.tdn-chart-actions a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tdn-navy);border:1px solid var(--tdn-border);border-radius:30px;padding:10px 22px;text-decoration:none;transition:.2s ease}
.tdn-chart-actions a:hover{background:var(--tdn-navy);color:#fff;border-color:var(--tdn-navy)}

.tdn-org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;text-align:left}
.tdn-org-card{background:#fff;border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);padding:26px}
.tdn-org-card__title{font-family:var(--tdn-font-heading);font-weight:600;color:var(--tdn-navy);font-size:17px;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--tdn-cream)}
.tdn-org-card ul{margin:0;padding-left:20px;color:var(--tdn-muted);font-size:14.5px;line-height:1.85}
.tdn-org-card ul ul{margin-top:4px;padding-left:18px}
.tdn-org-card--wide{grid-column:span 3}
.tdn-org-card--wide ul{columns:2;column-gap:32px}

@media (max-width: 900px){
  .tdn-org-grid{grid-template-columns:1fr}
  .tdn-org-card--wide{grid-column:span 1}
  .tdn-org-card--wide ul{columns:1}
}
@media (max-width: 640px){
  .tdn-chart-hint{display:block}
}

/* ========================================================================
   TDN Profil — komponen tambahan halaman page-templates/profil.php
   ======================================================================== */

/* Sejarah timeline */
.tdn-timeline{max-width:820px;margin:44px auto 0;position:relative}
.tdn-timeline::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--tdn-border)}
.tdn-timeline__item{position:relative;padding-left:56px;margin-bottom:38px}
.tdn-timeline__item:last-child{margin-bottom:0}
.tdn-timeline__dot{position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:50%;background:var(--tdn-navy);border:3px solid var(--tdn-gold);display:flex;align-items:center;justify-content:center;color:var(--tdn-gold-soft);font-family:var(--tdn-font-heading);font-weight:700;font-size:12px;text-align:center;line-height:1.1}
.tdn-timeline__year{display:block;font-family:var(--tdn-font-heading);font-weight:700;color:var(--tdn-gold);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.tdn-timeline__item h4{font-size:18px;margin:0 0 8px}
.tdn-timeline__item p{margin:0;color:var(--tdn-muted);font-size:15px}

/* Identitas & legalitas grid */
.tdn-identitas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--tdn-border);border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);overflow:hidden;margin-top:40px}
.tdn-identitas-item{background:#fff;padding:22px 26px}
.tdn-identitas-item__label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tdn-gold);font-weight:700;margin-bottom:6px}
.tdn-identitas-item__value{color:var(--tdn-navy);font-weight:600;font-size:15.5px;line-height:1.5}
.tdn-identitas-item__value span{display:block;color:var(--tdn-muted);font-weight:400;font-size:13.5px;margin-top:2px}

/* Landasan hukum */
.tdn-legal-card{background:#fff;border:1px solid var(--tdn-border);border-radius:var(--tdn-radius);padding:30px 34px;max-width:820px;margin:40px auto 0}
.tdn-legal-card ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.tdn-legal-card li{display:flex;gap:12px;align-items:flex-start;color:var(--tdn-text);font-size:15px;text-align:left}
.tdn-legal-card li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--tdn-gold);margin-top:8px}

/* CTA links */
.tdn-cta-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px}

@media (max-width:820px){
  .tdn-identitas-grid{grid-template-columns:1fr}
}

/* ============================================================
   Program Studi Akuntansi — badge akreditasi & catatan info
   ============================================================ */
.tdn-badge-akreditasi{display:inline-flex;align-items:center;gap:8px;background:var(--tdn-cream);color:var(--tdn-navy);font-weight:700;font-size:13.5px;padding:8px 18px;border-radius:30px;margin-top:6px;border:1px solid var(--tdn-border)}
.tdn-badge-akreditasi svg{width:16px;height:16px;color:var(--tdn-gold)}
.tdn-note{max-width:820px;margin:20px auto 0;text-align:center;color:var(--tdn-muted);font-size:13.5px;font-style:italic}

/* ============================================================
   Halaman Fasilitas — Grid Fasilitas Kampus
   Mengikuti pola kartu tema yang sudah ada (radius, shadow,
   aksen gold saat hover) — lihat .tdn-prodi-card / .tdn-stat
   ============================================================ */
.tdn-fasilitas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:44px;
}
.tdn-fasilitas-card{
  position:relative;
  border-radius:var(--tdn-radius);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--tdn-cream);
  box-shadow:0 4px 20px rgba(15,42,74,.08);
  border:1px solid var(--tdn-border);
  transition:transform .3s ease, box-shadow .3s ease;
}
.tdn-fasilitas-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--tdn-shadow);
}
.tdn-fasilitas-card img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.tdn-fasilitas-card:hover img{
  transform:scale(1.08);
}
.tdn-fasilitas-card__placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg, var(--tdn-navy-soft), var(--tdn-navy-soft) 12px, var(--tdn-navy) 12px, var(--tdn-navy) 24px);
  color:rgba(255,255,255,.55);
  font-size:12px;letter-spacing:.05em;text-align:center;
}
.tdn-fasilitas-card__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:20px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(15,42,74,.9) 65%);
  color:#fff;
}
.tdn-fasilitas-card__title{
  font-family:var(--tdn-font-heading);
  font-weight:600;
  font-size:16.5px;
  color:#fff;
  margin:0;
  line-height:1.3;
}
.tdn-fasilitas-card__title::after{
  content:"";
  display:block;
  width:26px;height:2px;
  background:var(--tdn-gold);
  margin-top:8px;
  border-radius:2px;
}
.tdn-fasilitas-card__zoom{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(15,42,74,.55);
  border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity .25s ease;
  pointer-events:none;
}
.tdn-fasilitas-card:hover .tdn-fasilitas-card__zoom{opacity:1}
.tdn-fasilitas-card__zoom svg{width:15px;height:15px}

@media (max-width:900px){
  .tdn-fasilitas-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:560px){
  .tdn-fasilitas-grid{grid-template-columns:1fr}
}

/* ============================================================
   BERITA & KEGIATAN — FEATURED + GRID (auto rotate) & PENGUMUMAN
   (CAROUSEL). EDIT: menggantikan layout 2 kolom "Berita Terkini" +
   sidebar "Kalender Kegiatan"/"Pengumuman" lama. Markup & data
   sekarang ada di front-page.php (query WP_Query real), style ini
   diambil dari preview-featured.html.
   ============================================================ */
.tdn-news__head{margin-bottom:28px}

.tdn-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:stretch;overflow:hidden}

.tdn-feature__big{
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:var(--tdn-navy);
  box-shadow:0 20px 44px -22px rgba(15,42,74,.35);
  /* transisi "masuk" (dipakai saat class is-enter dilepas): geser + scale
     balik ke posisi/ukuran normal. Tanpa opacity — efeknya murni gerakan. */
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.tdn-feature__big .tdn-feature__media{position:relative;height:300px;overflow:hidden;flex-shrink:0;transition:opacity .5s ease}
.tdn-feature__big .tdn-feature__media img{width:100%;height:100%;object-fit:cover;display:block}
.tdn-feature__big .tdn-feature__overlay{
  position:static;padding:24px 32px 28px;color:#fff;background:var(--tdn-navy);
}
.tdn-feature__tag{
  display:inline-block;background:var(--tdn-gold);color:#1a1a1a;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:20px;margin-bottom:16px;
}
.tdn-feature__big .tdn-feature__title{font-size:27px;line-height:1.32;margin-bottom:14px}
.tdn-feature__big .tdn-feature__title a{color:#fff}
.tdn-feature__big .tdn-feature__title a:hover{color:var(--tdn-gold-soft)}
.tdn-feature__meta{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#dfe4ee}

.tdn-feature__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:22px}
.tdn-feature__item{
  display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--tdn-navy);
  box-shadow:0 14px 30px -18px rgba(15,42,74,.3);
  /* sama seperti .tdn-feature__big — transisi arah "masuk", transform saja */
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.tdn-feature__item .tdn-feature__media{position:relative;height:160px;overflow:hidden;flex-shrink:0;transition:opacity .5s ease}
.tdn-feature__item .tdn-feature__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.tdn-feature__item:hover .tdn-feature__media img{transform:scale(1.08)}
.tdn-feature__item .tdn-feature__overlay{
  position:static;flex:1;padding:11px 14px 12px;color:#fff;background:var(--tdn-navy);
}
.tdn-feature__item .tdn-feature__title{
  font-size:12.5px;line-height:1.35;margin-bottom:6px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tdn-feature__item .tdn-feature__title a{color:#fff}
.tdn-feature__item .tdn-feature__title a:hover{color:var(--tdn-gold-soft)}
.tdn-feature__item .tdn-feature__meta{font-size:10.5px;color:#dfe4ee}

.tdn-feature__cta{display:flex;justify-content:flex-end;margin-top:22px}
.tdn-feature__cta a{
  display:inline-flex;align-items:center;gap:8px;background:var(--tdn-navy);color:#fff;
  font-weight:600;font-size:14px;padding:12px 22px;border-radius:26px;transition:background .2s ease,transform .2s ease;
}
.tdn-feature__cta a:hover{background:var(--tdn-navy-dark);transform:translateX(3px);color:#fff}
.tdn-feature__cta svg{width:15px;height:15px}

/* fase animasi ganti konten (dipicu lewat JS): geser horizontal ke kiri saat
   keluar, ke kanan saat masuk. TANPA opacity/fade sama sekali.
   - Kartu BESAR (.tdn-feature__big): geser SEPENUHNYA (100% lebar kartu
     sendiri) sambil mengecil ke 50% — jadi kartu benar-benar "habis"/hilang
     dari posisinya dulu. Konten baru diganti (lewat JS) SETELAH animasi ini
     selesai (durasi setTimeout di JS disamakan dgn durasi transition di sini).
   - Kartu GRID KECIL (.tdn-feature__item): TIDAK mengecil, cuma geser ke
     kiri/kanan — karena ukurannya sudah kecil, geser saja cukup menutupi
     momen swap kontennya. */
.tdn-feature__big.is-out{
  transform:translateX(-100%) scale(.5);
  transition:transform .48s cubic-bezier(.22,.61,.36,1);
}
.tdn-feature__item.is-out{
  transform:translateX(-60px);
  transition:transform .48s cubic-bezier(.22,.61,.36,1);
}
.tdn-feature__big.is-enter{
  transition:none; /* posisi awal masuk diset instan (tanpa transisi), baru dilepas di JS supaya animasi berjalan dari titik ini */
  transform:translateX(100%) scale(.5);
}
.tdn-feature__item.is-enter{
  transition:none;
  transform:translateX(60px);
}

/* ================= Blok judul (Pengumuman) ================= */
.tdn-slider-block{margin-top:52px}
.tdn-slider-block__head{margin-bottom:22px;display:flex;align-items:baseline;justify-content:space-between}
.tdn-slider-block__head h3{font-size:20px;position:relative;padding-bottom:12px;margin-bottom:0}
.tdn-slider-block__head h3::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;background:var(--tdn-gold);border-radius:2px}
/* ================= Slider generik (Pengumuman) ================= */
.tdn-announce-panel{
  background:var(--tdn-navy);
  border-radius:22px;
  padding:34px 30px 30px;
}
.tdn-carousel{position:relative}
.tdn-carousel__viewport{overflow:hidden}
.tdn-carousel__track{display:flex;will-change:transform}
.tdn-carousel__slide{box-sizing:border-box;padding:0 12px}
.tdn-carousel__more{margin-top:26px;text-align:right}

.tdn-announce-card{
  background:#fff;border:1px solid var(--tdn-border);border-radius:16px;overflow:hidden;
  height:100%;box-sizing:border-box;display:flex;flex-direction:column;position:relative;
  transition:box-shadow .3s ease,transform .3s ease;
}
.tdn-announce-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tdn-gold);
}
.tdn-announce-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px -18px rgba(15,42,74,.28)}
.tdn-announce-card__body{padding:22px 22px 20px 24px;display:flex;flex-direction:column;flex:1}
.tdn-announce-card__date{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tdn-muted);margin-bottom:12px}
.tdn-announce-card__title{font-size:15.5px;font-weight:600;line-height:1.45;margin-bottom:20px;flex:1}
.tdn-announce-card__title a{color:var(--tdn-navy)}
.tdn-announce-card__title a:hover{color:var(--tdn-gold)}
.tdn-announce-card__dl{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:#fff;background:var(--tdn-gold);
  padding:8px 17px;border-radius:20px;transition:background .2s ease;
}
.tdn-announce-card__dl:hover{background:var(--tdn-gold-soft);color:#fff}

/* ================= Responsif (Berita/Pengumuman) ================= */
@media (max-width:900px){
  .tdn-feature{grid-template-columns:1fr;gap:18px}
  .tdn-feature__big .tdn-feature__media{height:240px}
  .tdn-feature__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .tdn-feature__item .tdn-feature__media{height:140px}
  .tdn-slider-block{margin-top:38px}
}
@media (max-width:560px){
  /* EDIT: mode mobile — cuma featured besar yang tampil (1 grid),
     4 item grid lainnya disembunyikan total (bukan ditumpuk).
     Mereka tetap "antri" di data pool & tetap ikut rotasi lewat
     .tdn-feature__big setiap 5 detik (lihat main.js), jadi semua
     berita tetap kebagian tampil bergiliran, cuma satu per satu. */
  .tdn-feature__grid{display:none}
  .tdn-feature__big .tdn-feature__media{height:200px}
  .tdn-feature__big .tdn-feature__overlay{padding:20px 20px 22px}
  .tdn-feature__big .tdn-feature__title{font-size:20px;margin-bottom:10px}
}