/* ============================================================
   MARKETING.CSS — tambahan untuk portofolio Digital Marketing
   (showcase gambar/video, karya pilihan, pengalaman, belajar)
   Memakai variabel warna & font yang sama dari style.css
   ============================================================ */

/* tombol hero dengan ikon */
.btn .btn-ic { width: 16px; height: 16px; margin-right: -2px; }

/* footer kontak */
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
.foot-links a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.foot-links a:hover { border-color: var(--ink); }

/* deret skill di bawah About */
.skill-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.skill-strip span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); }
.skill-strip span:nth-child(-n+6) { background: var(--accent); border-color: transparent; }

/* ---------- karya pilihan (home) ---------- */
.work-section { background: var(--card); border-top: 1px solid var(--line); }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.work-tile { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.work-tile:hover { transform: translateY(-3px); border-color: #BFD6EA; }
.work-thumb { position: relative; display: block; aspect-ratio: 4 / 5; background: #EEF3F8; overflow: hidden; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-thumb img { object-position: top center; }
.work-tile.is-video .work-thumb { background: #0B0D10; }
.work-tile.is-video .work-thumb img { object-fit: contain; object-position: center; }
.work-play { position: absolute; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; }
.work-play svg { width: 16px; height: 16px; fill: currentColor; }
.work-meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.work-meta small { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.work-meta b { font-size: 14.5px; letter-spacing: -.01em; font-weight: 600; line-height: 1.3; }

/* ---------- showcase di halaman area ---------- */
.show-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.show-item { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.show-item.wide { grid-column: 1 / -1; }
.show-frame { background: #F5F8FB; border-bottom: 1px solid var(--line); overflow: hidden; }
.show-frame a { display: block; height: 100%; }
.show-frame img, .show-frame video { width: 100%; height: 100%; display: block; object-fit: contain; background: #F5F8FB; }
.show-frame video { background: #0B0D10; }
.show-item figcaption { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.show-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #2E8BE6; }
.show-item figcaption b { font-size: 16px; letter-spacing: -.02em; }
.show-item figcaption span:last-child { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
body[data-slug="motion-video"] .show-grid { grid-template-columns: 1fr; }
body[data-slug="motion-video"] .show-item { display: grid; grid-template-columns: 1.6fr 1fr; }
body[data-slug="motion-video"] .show-frame { border-bottom: none; border-right: 1px solid var(--line); }
body[data-slug="motion-video"] .show-item figcaption { justify-content: center; padding: 24px 26px; }
body[data-slug="design-helper"] .show-grid { grid-template-columns: repeat(2, 1fr); }

/* cover kasus yang memakai gambar tinggi */
.case-cover img { max-height: 320px; object-fit: cover; object-position: top; }

/* ---------- pengalaman ---------- */
.exp-section { border-top: 1px solid var(--line); }
.exp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.exp-list li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.exp-when { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); padding-top: 3px; }
.exp-list b { display: block; font-size: 17px; letter-spacing: -.02em; }
.exp-list small { display: block; margin-top: 3px; font-size: 13px; color: #2E8BE6; }
.exp-list p { margin: 8px 0 0; font-size: 14.5px; color: #43505C; max-width: 70ch; }

/* ---------- belajar ---------- */
.learn-section { background: var(--card); border-top: 1px solid var(--line); }
.learn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.learn-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.learn-card:first-child { background: #12232d; color: #fff; border-color: #42535d; }
.learn-card:first-child p { color: #C9D3DA; }
.learn-card:first-child .learn-tag { background: var(--accent); color: var(--ink); }
.learn-tag { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: #E6F1FB; color: #1F6FB8; }
.learn-card b { font-size: 16px; letter-spacing: -.02em; line-height: 1.3; }
.learn-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .show-grid, body[data-slug="design-helper"] .show-grid { grid-template-columns: repeat(2, 1fr); }
  body[data-slug="motion-video"] .show-item { grid-template-columns: 1fr; }
  body[data-slug="motion-video"] .show-frame { border-right: none; border-bottom: 1px solid var(--line); }
  .learn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .work-grid { gap: 10px; }
  .work-meta { padding: 10px 12px 12px; }
  .work-meta b { font-size: 13px; }
  .show-grid, body[data-slug="design-helper"] .show-grid { grid-template-columns: 1fr; }
  .learn-grid { grid-template-columns: 1fr; }
  .exp-list li { grid-template-columns: 1fr; gap: 6px; }
}

/* logo: tampilkan utuh, jangan dipotong */
.work-thumb img[src*="logo"], .work-thumb img[src*="centratama"] { object-fit: contain; object-position: center; background: #fff; padding: 12px; }