/* BALLOP Jurnal pages, on top of style.css + site.css */
.blog-top { background: rgba(245, 246, 248, .8); }
.blog-brand img { height: 34px; width: auto; }
.small-btn { padding: 9px 16px; font-size: 13px; }
.blog { min-height: 70vh; padding-top: var(--header-h); }
[data-reveal] { opacity: 1; transform: none; }

.b-hero { position: relative; overflow: hidden; padding: clamp(50px, 8vw, 110px) var(--gutter) clamp(30px, 4vw, 50px); max-width: 1400px; margin: 0 auto; }
.b-hero .b1 { width: 40vmax; height: 40vmax; right: -10vmax; top: -16vmax; background: radial-gradient(closest-side, rgba(91, 155, 213, .3), transparent); animation: drift2 18s ease-in-out infinite alternate; }
.b-hero .b2 { width: 30vmax; height: 30vmax; right: 20%; top: 0; background: radial-gradient(closest-side, rgba(232, 85, 43, .18), transparent); animation: drift1 21s ease-in-out infinite alternate; }
.b-hero > * { position: relative; }
.b-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.b-search { min-width: min(320px, 100%); padding: 12px 18px; border-radius: 99px; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.b-search:focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 3px rgba(47, 127, 211, .25); }
.b-grid { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter) clamp(70px, 9vw, 120px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.b-grid .post-card { animation: copyIn .8s var(--ease-out) both; }
.b-grid .post-card:nth-child(2) { animation-delay: .06s; }
.b-grid .post-card:nth-child(3) { animation-delay: .12s; }
.b-grid .post-card:nth-child(n + 4) { animation-delay: .18s; }
.b-grid .post-card.big { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
.b-grid .post-card.big .pc-cover { aspect-ratio: auto; min-height: 340px; }
.b-grid .post-card.big .pc-body { justify-content: center; padding: clamp(24px, 3vw, 44px); }
.b-grid .post-card.big h3 { font-size: clamp(26px, 3vw, 42px); }

.b-post { max-width: 820px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) var(--gutter) 40px; animation: copyIn .7s var(--ease-out) both; }
.b-back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; transition: transform .35s var(--spring); }
.b-back:hover { transform: translateX(-3px); }
.b-head { margin: 28px 0 26px; }
.b-head .pc-meta time { margin-left: 0; }
.b-head h1 { font-size: clamp(30px, 5vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -.025em; margin: 14px 0; }
.b-ex { font-size: clamp(16px, 1.6vw, 20px); color: var(--ink-2); line-height: 1.55; margin: 0; }
.b-by { color: var(--muted); font-size: 13px; font-weight: 700; margin: 12px 0 0; }
.b-cover { border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 9; background: radial-gradient(70% 70% at 50% 60%, #dfe9f6, #eef2f7); box-shadow: var(--shadow); margin-bottom: 34px; }
.b-cover img { width: 100%; height: 100%; object-fit: cover; }
.b-cover img.contain { object-fit: contain; padding: 7% 10%; filter: drop-shadow(0 24px 20px rgba(17, 19, 24, .2)); }

.b-body { font-size: 17px; line-height: 1.8; color: var(--ink-2); }
.b-body h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--ink); font-weight: 900; line-height: 1.2; margin: 1.8em 0 .5em; letter-spacing: -.01em; }
.b-body h3 { font-size: 20px; color: var(--ink); font-weight: 900; margin: 1.6em 0 .4em; }
.b-body p { margin: 0 0 1.1em; }
.b-body strong { color: var(--ink); }
.b-body a { color: var(--blue); text-underline-offset: 3px; }
.b-body ul, .b-body ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.b-body li { margin: .35em 0; }
.b-body li::marker { color: var(--orange); }
.b-body blockquote { margin: 1.4em 0; padding: 18px 24px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); border-left: 4px solid var(--orange); font-size: 20px; font-weight: 700; color: var(--ink); }
.b-body figure { margin: 1.6em 0; }
.b-body img { max-width: 100%; border-radius: 18px; box-shadow: var(--shadow); }
.b-body figcaption { color: var(--muted); font-size: 13px; text-align: center; margin-top: 8px; }
.b-body code { background: #eef1f5; padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.b-body hr { border: 0; height: 1px; background: var(--line); margin: 2em 0; }
.b-body .embed { position: relative; aspect-ratio: 16 / 9; margin: 1.6em 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.b-body .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.b-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.b-related { margin-top: 70px; }
.b-related h2 { font-size: 24px; font-weight: 900; margin: 0 0 20px; }
.b-related .b-grid { padding: 0; }

::view-transition-old(cover), ::view-transition-new(cover) { animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 900px) {
  .blog-top .links { display: none; }
  .blog-top .small-btn { margin-left: auto; }
  .b-grid .post-card.big { grid-template-columns: 1fr; }
  .b-grid .post-card.big .pc-cover { min-height: 0; aspect-ratio: 16 / 10; }
  .b-body { font-size: 16px; }
}