/* ============== Kamera detay page-scoped styles ==============
 * Extracted from legacy/uludaginfocom-v1/kamera-detay.html inline
 * <style> block. Loaded via apps/web/src/app/layout.tsx so V1's exact
 * CSS rules apply on /tr/webcam/[slug].
 *
 * Selectors live behind detail-specific class names (`.cd-hero`,
 * `.cd-card-wrap`, `.cd-card`, `.cd-info-section`, `.cd-others`) so
 * they are page-scoped without any ancestor selector.
 *//* ===== Detail page ===== */
/* The standardized hero rule (styles.css) forces .crumbs to
   position:absolute !important — it assumes a flex justify-end hero with
   large top padding (like .cmphero). The kamera-detay hero is a simple
   top-aligned stack, so the absolute crumbs landed on top of the h1
   (top:18px is measured from .inner, while the h1 sits at .inner's top).
   Restore normal flow so crumbs -> h1 -> sub stack cleanly. Loaded after
   styles.css, so this !important wins the source-order tiebreak. */

/* Featured-style card */
.cd-card-wrap {
  max-width: 1320px; margin: 36px auto 0; padding: 0 40px;
  position: relative; z-index: 5;
}
.cd-card {
  background: #fff; border: 2px solid var(--u-black); border-radius: 22px;
  overflow: hidden; box-shadow: 0 20px 40px -18px rgba(0,0,0,0.3);
  display: grid; grid-template-columns: 2.2fr 1fr;
  margin-bottom: -38px;
}
.cd-card .stream {
  position: relative; aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  background-color: #0A1622; border-right: 2px solid var(--u-black);
  cursor: pointer;
}
.cd-card .stream::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55) 100%);
  transition: opacity 200ms ease;
}
.cd-card .stream.playing::before { opacity: 0; }
.cd-card .stream video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #0A1622;
}
.cd-card .live-badge {
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; gap: 8px; align-items: center;
  background: var(--u-fuchsia); color: #fff;
  padding: 7px 14px; border-radius: 999px; border: 2px solid #fff;
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 12px; letter-spacing: 0.18em;
  z-index: 3;
}
.cd-card .live-badge.offline { background: var(--u-muted); }
.cd-card .live-badge .d {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; animation: pulse 1.5s infinite;
}
.cd-card .live-badge.offline .d { animation: none; }
.cd-card .nm-overlay {
  position: absolute; bottom: 22px; left: 22px; right: 22px;
  color: #fff; z-index: 3;
  transition: opacity 200ms ease;
}
.cd-card .stream.playing .nm-overlay { opacity: 0; }
.cd-card .nm-overlay .nm1 {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 44px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  text-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.cd-card .nm-overlay .nm2 {
  margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap;
  font-family: 'Mark Pro'; font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.cd-card .offline-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(10,22,34,0.55);
  color: #fff;
}
.cd-card .offline-overlay .msg {
  background: rgba(0,0,0,0.7); border: 2px solid #fff;
  padding: 14px 22px; border-radius: 999px;
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* Info side panel */
.cd-card .info {
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.cd-card .info .ttl {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 11px; letter-spacing: 0.22em; color: var(--u-fuchsia);
}
.cd-card .info h2 {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 28px; color: var(--u-black); line-height: 1.05;
  letter-spacing: -0.02em; margin: -6px 0 0;
}
.cd-card .info .desc { font-size: 14px; color: var(--u-slate); line-height: 1.55; }
.cd-card .info .kvgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px; background: var(--u-snow); border-radius: 12px; border: 1.5px solid #ECEAE0;
}
.cd-card .info .kvgrid div { display: flex; flex-direction: column; gap: 2px; }
.cd-card .info .kvgrid .k {
  font-family: 'Mark Pro'; font-weight: 500; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--u-muted);
}
.cd-card .info .kvgrid .v {
  font-family: 'Mark Pro'; font-weight: 900; font-size: 16px;
  color: var(--u-black); letter-spacing: -0.01em;
}

/* ===== Info section ===== */
.cd-info-section {
  background: var(--u-snow); padding: 80px 0 60px;
}
.cd-info-section .wrap-inner {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; align-items: start;
}
.cd-info-section .lead-block {
  position: sticky; top: 90px;
}
.cd-info-section .lead-eyebrow {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 11px; letter-spacing: 0.22em; color: var(--u-fuchsia);
  text-transform: uppercase;
}
.cd-info-section h3.zone-title {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 48px; color: var(--u-black); line-height: 0.95;
  letter-spacing: -0.025em; text-transform: uppercase;
  margin: 12px 0 18px;
}
.cd-info-section .zone-intro {
  font-family: 'Gotham'; font-size: 15px; color: var(--u-slate);
  line-height: 1.6;
}
.cd-info-section .info-blocks {
  display: flex; flex-direction: column; gap: 22px;
}
.cd-info-section .ib {
  background: #fff; border: 2px solid var(--u-black); border-radius: 16px;
  padding: 24px 26px; box-shadow: var(--u-shadow);
  position: relative;
}
.cd-info-section .ib .num {
  position: absolute; top: -14px; left: 22px;
  background: var(--u-yellow); color: var(--u-black);
  border: 2px solid var(--u-black);
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 13px; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: 999px;
}
.cd-info-section .ib h4 {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 22px; color: var(--u-black); margin: 4px 0 10px;
  letter-spacing: -0.01em;
}
.cd-info-section .ib p {
  font-family: 'Gotham'; font-size: 14px; color: var(--u-slate);
  line-height: 1.62; margin: 0;
}

/* ===== Markdown body (bodyContent → real HTML) ===== */
/* Shared by the zone-intro (general info) and the numbered .ib detail cards.
   Renders parseWebcamBody() blocks: paragraphs, bullet lists, spec tables. */
.cd-md-body > * + * { margin-top: 12px; }
.cd-md-body p {
  font-family: 'Gotham'; font-size: 14px; color: var(--u-slate);
  line-height: 1.62; margin: 0;
}
.cd-md-body strong { color: var(--u-black); font-weight: 700; }
.cd-md-body .cd-md-ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.cd-md-body .cd-md-ul li {
  position: relative; padding-left: 20px;
  font-family: 'Gotham'; font-size: 14px; color: var(--u-slate); line-height: 1.55;
}
.cd-md-body .cd-md-ul li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--u-yellow); border: 1.5px solid var(--u-black);
}
.cd-md-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cd-md-table {
  width: 100%; border-collapse: collapse;
  border: 2px solid var(--u-black); border-radius: 12px; overflow: hidden;
  font-family: 'Gotham'; font-size: 13.5px;
}
.cd-md-table thead th {
  background: var(--u-black); color: #fff; text-align: left;
  font-weight: 700; padding: 9px 14px; letter-spacing: 0.01em;
}
.cd-md-table tbody td {
  padding: 9px 14px; color: var(--u-slate);
  border-top: 1px solid rgba(0,0,0,0.1);
}
.cd-md-table tbody tr:nth-child(even) td { background: #f7f9fc; }
.cd-md-table tbody td:first-child { color: var(--u-black); font-weight: 600; }

/* ===== Other cams section ===== */
.cd-others {
  background: #fff; padding: 70px 0 100px; border-top: 2px solid var(--u-black);
}
.cd-others .head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 30px; gap: 20px;
}
.cd-others .head .lead-eyebrow {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 11px; letter-spacing: 0.22em; color: var(--u-fuchsia);
  text-transform: uppercase;
}
.cd-others h2 {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 56px; color: var(--u-black); line-height: 0.92;
  letter-spacing: -0.025em; text-transform: uppercase; margin: 10px 0 0;
}
.cd-others h2 em { color: var(--u-fuchsia); font-style: italic; }
.cd-others .all-link {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 12px; letter-spacing: 0.18em; color: var(--u-black);
  text-decoration: none; padding: 12px 18px;
  border: 2px solid var(--u-black); border-radius: 999px;
  background: #fff; transition: background 160ms ease;
}
.cd-others .all-link:hover { background: var(--u-yellow); }

.cd-others .grid3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.cd-others .other-card {
  background: #fff; border: 2px solid var(--u-black); border-radius: 18px;
  overflow: hidden; box-shadow: var(--u-shadow); cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
  text-decoration: none; color: inherit;
}
.cd-others .other-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(0,0,0,0.22);
}
.cd-others .other-card .poster {
  position: relative; aspect-ratio: 16/10;
  background-size: cover; background-position: center; background-color: #0A1622;
  border-bottom: 2px solid var(--u-black);
}
.cd-others .other-card .poster::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.65) 100%);
}
.cd-others .other-card .live {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--u-fuchsia); color: #fff; padding: 4px 10px;
  border-radius: 999px; border: 1.5px solid #fff;
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 10px; letter-spacing: 0.18em;
}
.cd-others .other-card.offline .live { background: var(--u-muted); }
.cd-others .other-card .live .d {
  width: 7px; height: 7px; background: #fff; border-radius: 50%;
  animation: pulse 1.5s infinite;
}
.cd-others .other-card .alt-badge {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--u-black); color: var(--u-yellow);
  padding: 4px 9px; border-radius: 999px;
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 10px; letter-spacing: 0.14em;
}
.cd-others .other-card .arrow {
  position: absolute; bottom: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--u-yellow); color: var(--u-black);
  border: 2px solid var(--u-black);
  display: grid; place-items: center;
  transition: transform 200ms ease;
}
.cd-others .other-card:hover .arrow {
  transform: translateX(4px); background: var(--u-fuchsia); color: #fff;
}
.cd-others .other-card .body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.cd-others .other-card .nm {
  font-family: 'Mark Pro'; font-weight: 900; font-size: 19px;
  color: var(--u-black); line-height: 1.1; letter-spacing: -0.01em;
}
.cd-others .other-card .zone-tag {
  font-family: 'Mark Pro'; font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--u-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.cd-others .other-card .desc {
  font-family: 'Gotham'; font-size: 13px; color: var(--u-slate);
  line-height: 1.5; margin-top: 4px;
}

@media (max-width: 1024px) {
  .cd-info-section .wrap-inner { grid-template-columns: 1fr; gap: 30px; }
  .cd-info-section .lead-block { position: static; }
  .cd-others .grid3 { grid-template-columns: repeat(2, 1fr); }
  .cd-card { grid-template-columns: 1fr; }
  .cd-card .stream { border-right: 0; border-bottom: 2px solid var(--u-black); }
}
@media (max-width: 768px) {
  .cd-card-wrap { padding: 0 20px; }
  .cd-card .nm-overlay .nm1 { font-size: 30px; }
  .cd-info-section { padding: 60px 0 40px; }
  .cd-info-section h3.zone-title { font-size: 36px; }
  .cd-others { padding: 50px 0 70px; }
  .cd-others h2 { font-size: 36px; }
  .cd-others .head { flex-direction: column; align-items: flex-start; }
  .cd-others .grid3 { grid-template-columns: 1fr; }
}