/*
 * Page-scoped styles for /<locale>/bilet — extracted from
 * legacy/uludaginfocom-v1/bilet.html. Two original <style> blocks
 * merged here: the critical-css responsive helper-row tweaks and the
 * full bk-card / bk-bolkart ticket category card system. Bilet-specific
 * class names (`.bk-*`, `.bilet-hero-card`) are page-unique so no
 * data-page scoping is strictly required, but the @media helper-row
 * overrides also fire only when the bilet markup is on the page.
 *
 * Mounted from apps/web/src/app/layout.tsx alongside the other
 * page-styles entries.
 */

/* ===== critical-css (helper-row + responsive root tweaks) ===== */
@media (max-width: 480px) {
  .helper-row {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .helper-card { padding: 20px; }
  .helper-card h3 { font-size: 17px; }
  .helper-card p { font-size: 13.5px; }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    :root {
      --u-shadow: 0 6px 0 var(--u-black);
      --u-radius-lg: 14px;
      --u-section-pad: 48px;
    }
    .wrap { padding-left: 16px; padding-right: 16px; max-width: 100%; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .section-head h2 { font-size: 32px; line-height: 1.05; }
    .section-head p { font-size: 14px; }
    .section-head .right { width: 100%; }
    .site-header .inner { padding: 12px 16px; gap: 12px; }
    .brand img { width: 32px !important; height: 32px !important; }
    .hero-slider .eyebrow { font-size: 10px; padding: 5px 10px; margin-bottom: 12px; }
    h1 { font-size: 40px; }
    h2 { font-size: 28px; }
    h3 { font-size: 20px; }
  }
}

@media (max-width: 768px) {
  .helper-row {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .helper-card { padding: 20px; }
  .helper-card h3 { font-size: 17px; }
  .helper-card p { font-size: 13.5px; }
}

@media (min-width: 481px) and (max-width: 768px) {
  @media screen and (min-width: 481px) and (max-width: 768px) {
    :root {
      --u-radius-lg: 18px;
      --u-section-pad: 64px;
    }
    .wrap { padding-left: 24px; padding-right: 24px; max-width: 100%; }
    .section-head { gap: 20px; }
    .section-head h2 { font-size: 40px; line-height: 1.05; }
    .site-header .inner { padding: 14px 22px; }
    .nav-v2 { gap: 4px; }
    .nav-v2 .nav-trigger span:not(.chev):not(.trg-ic) { display: none; }
    .nav-v2 .chev { display: none; }
    h1 { font-size: 72px; }
    h2 { font-size: 40px; }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    :root { --u-section-pad: 72px; }
    .wrap { padding-left: 32px; padding-right: 32px; max-width: 100%; }
    .section-head h2 { font-size: 48px; }
    .site-header .inner { padding: 14px 28px; }
    .nav-v2 .nav-link,
    .nav-v2 .nav-trigger { padding: 8px 10px; font-size: 13px; }
    .nav-v2 .nav-trigger span:not(.chev):not(.trg-ic) { font-size: 13px; }
    h1 { font-size: 96px; }
    h2 { font-size: 48px; }
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  @media screen and (min-width: 1025px) and (max-width: 1200px) {
    .wrap { padding-left: 40px; padding-right: 40px; max-width: 1180px; }
    .site-header .inner { padding: 16px 40px; }
    .nav-v2 .nav-link,
    .nav-v2 .nav-trigger { padding: 10px 12px; font-size: 13.5px; }
  }
  @media screen and (min-width: 1201px) {
    .wrap { max-width: 1320px; }
  }
}

@media (min-width: 1201px) {
  @media screen and (min-width: 1201px) {
    :root { --u-section-pad: 112px; }
    .wrap {
      padding-left: 48px;
      padding-right: 48px;
      max-width: 1320px;
      margin-left: auto;
      margin-right: auto;
    }
    .section-head h2 { font-size: 64px; }
    .section-head p { font-size: 16px; }
    .site-header .inner { padding: 18px 56px; }
    .nav-v2 .nav-link,
    .nav-v2 .nav-trigger { padding: 12px 14px; font-size: 14px; }
  }
}

/* ============ Bilet Kategorileri ============ */
.bk-stack { display: grid; gap: 22px; margin-top: 28px; }

.bk-card {
  background: #fff; border: 2px solid var(--u-black); border-radius: 22px;
  box-shadow: var(--u-shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.bk-card:hover { transform: translateY(-2px); }

/* Full-width header band — spans across image + content */
.bk-card .bk-head {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 18px;
  padding: 20px 26px;
  background: linear-gradient(135deg, #FAFCFE 0%, #F1F5F9 100%);
  border-bottom: 1.5px dashed #DDDDD4;
}

/* Body: image left + content right */
.bk-card .bk-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 0;
}

.bk-card .bk-media {
  background: linear-gradient(135deg, #FAFCFE 0%, #F1F5F9 100%);
  border-right: 1.5px dashed #DDDDD4;
  padding: 18px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.bk-card .bk-media img {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.16));
}

.bk-card .bk-content {
  display: flex; flex-direction: column;
  min-width: 0;
}

.bk-card .bk-tag {
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 22px; letter-spacing: -0.02em;
  background: var(--u-yellow); color: var(--u-black);
  border: 2px solid var(--u-black); border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 2px 2px 0 var(--u-black);
}
.bk-card .bk-titles h3 {
  font-family: 'Mark Pro'; font-weight: 900; font-size: 28px;
  line-height: 1.1; color: var(--u-black); letter-spacing: -0.018em;
  margin: 0 0 4px;
}
.bk-card .bk-titles p {
  font-family: 'Gotham'; font-size: 13.5px; color: var(--u-slate);
  margin: 0; line-height: 1.5; max-width: 900px;
}

/* Column headers row */
.bk-card .bk-colhead {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
  padding: 16px 26px 8px;
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--u-muted);
  gap: 12px;
}
.bk-card .bk-colhead.bk-colhead-single { grid-template-columns: 1.4fr 1fr 1.5fr; }
.bk-card .bk-colhead span:not(:first-child) { text-align: right; }
.bk-card .bk-colhead span:last-child { text-align: center; }

.bk-card .bk-rows { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.bk-card .bk-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
  align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--u-snow);
  border: 1.5px solid #e5e7eb; border-radius: 14px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.bk-card .bk-row.bk-row-single { grid-template-columns: 1.4fr 1fr 1.5fr; }
.bk-card .bk-row:hover { border-color: var(--u-black); transform: translateX(2px); }

.bk-card .bk-name {
  font-family: 'Mark Pro'; font-weight: 700; font-size: 19px;
  color: var(--u-black); letter-spacing: -0.005em;
  align-self: center;
}

.bk-card .bk-cell.bk-cash,
.bk-card .bk-cell.bk-online {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
}
.bk-card .bk-cash .bk-price {
  color: var(--u-muted);
  font-family: 'Mark Pro'; font-weight: 700; font-size: 22px;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(229,18,109,0.5);
}
.bk-card .bk-cash .bk-price sup { font-size: 11px; opacity: 0.7; margin-right: 2px; }
.bk-card .bk-online .bk-price {
  color: var(--u-fuchsia);
  font-family: 'Mark Pro'; font-weight: 900; font-size: 26px; line-height: 1;
}
.bk-card .bk-online .bk-price sup { font-size: 13px; font-weight: 700; margin-right: 2px; }
.bk-card .bk-online .bk-price.bk-na {
  color: var(--u-muted); font-weight: 700; font-size: 22px;
  text-decoration: none;
}
.bk-card .bk-row-single .bk-online .bk-price { color: var(--u-black); font-size: 28px; }
.bk-card .bk-row-single .bk-online .bk-price sup { color: var(--u-fuchsia); }

/* Buy button column */
.bk-card .bk-cell.bk-action {
  display: flex; align-items: center; justify-content: flex-end;
}
.bk-card .bk-action-na {
  font-family: 'Mark Pro'; font-weight: 700; font-style: italic;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--u-muted);
}
.bk-card .bk-buy {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--u-fuchsia); color: #fff;
  padding: 8px 14px; border-radius: 8px; border: 1.5px solid var(--u-black);
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--u-black);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  white-space: nowrap;
}
.bk-card .bk-buy:hover {
  transform: translate(-1px,-1px); box-shadow: 0 5px 0 var(--u-black);
  background: var(--u-black); color: var(--u-yellow);
}

/* Bolkart special card */
.bk-card.bk-bolkart {
  background: linear-gradient(135deg, #0F1B2D 0%, #1F3854 100%);
  border-color: var(--u-black);
  color: #fff;
}
.bk-card.bk-bolkart .bk-head {
  background: transparent;
  border-bottom: 1.5px solid rgba(255,255,255,0.16);
}
.bk-card.bk-bolkart .bk-media {
  background: rgba(255,255,255,0.06);
  border-right: 1.5px solid rgba(255,255,255,0.16);
}
.bk-card.bk-bolkart .bk-content {
  padding: 24px 26px;
  justify-content: center; align-items: flex-start;
}
.bk-card.bk-bolkart .bk-tag { background: var(--u-fuchsia); color: #fff; border-color: #fff; box-shadow: 2px 2px 0 var(--u-yellow); }
.bk-card.bk-bolkart .bk-titles h3 { color: #fff; }
.bk-card.bk-bolkart .bk-titles p { color: rgba(255,255,255,0.78); }
.bk-card.bk-bolkart .bk-bolkart-cta {
  display: inline-flex; align-items: center;
  background: var(--u-yellow); color: var(--u-black);
  padding: 14px 22px; border-radius: 12px; border: 2px solid #fff;
  font-family: 'Mark Pro'; font-weight: 900; font-style: italic;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 0 var(--u-fuchsia);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  white-space: nowrap;
}
.bk-card.bk-bolkart .bk-bolkart-cta:hover {
  transform: translate(-2px,-2px); box-shadow: 0 8px 0 var(--u-fuchsia);
  background: #fff;
}

/* =========================================================
 * Mobile (Burak 2026-05-18) — 3 fixes:
 * - Drop the skipass card image column from every bilet karti
 *   (`.bk-media` and its layout reservation).
 * - Stack RFID / Grup + Okul / WhatsApp helper cards 1-col.
 * - Stack the "Sikca Sorulanlar" 2-col grid to 1-col.
 * ========================================================= */
@media (max-width: 768px) {
  /* 1) Hide the per-ticket skipass image column and collapse the body grid
     so bk-content stretches to the full card width (Burak 2026-05-18). */
  .bk-card .bk-media { display: none; }
  .bk-card .bk-body { grid-template-columns: 1fr !important; }
  .bk-card .bk-content { width: 100%; min-width: 0; }
  /* Burak 2026-05-18 fix: the entire header strip becomes the yellow band
     and carries both the "01" tag + the category title inline. The
     description drops to a normal white block below. */
  .bk-card .bk-head {
    grid-template-columns: auto 1fr !important;
    background: var(--u-yellow) !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    border-bottom: 2px solid var(--u-black) !important;
    align-items: center;
  }
  .bk-card .bk-head .bk-tag {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 22px !important;
    color: var(--u-black);
  }
  .bk-card .bk-titles {
    min-width: 0;
    display: flex; flex-direction: column;
  }
  .bk-card .bk-titles h3 {
    font-size: 18px !important;
    line-height: 1.1;
    margin: 0 !important;
    color: var(--u-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Description drops below the yellow strip, on a white background */
  .bk-card .bk-titles p {
    display: none;
  }
  /* Bolkart head: keep its dark gradient, just inline tag + title */
  .bk-card.bk-bolkart .bk-head {
    grid-template-columns: auto 1fr !important;
    background: transparent !important;
  }
  .bk-card.bk-bolkart .bk-head .bk-tag {
    background: var(--u-fuchsia) !important;
    color: #fff;
    padding: 4px 10px !important;
    border: 2px solid #fff !important;
  }
  .bk-card.bk-bolkart .bk-titles h3 { color: #fff; }

  /* 2) Helper cards stack 1-col */
  .helper-row {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .helper-card { padding: 20px; }
  .helper-card h3 { font-size: 17px; }
  .helper-card p { font-size: 13.5px; }

  /* 3) FAQ — kill the 1fr 2fr grid; everything stacks */
  .faq {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* =========================================================
   * Burak 2026-05-18: 4-col ticket table must fit phone screen.
   *   Bilet Turu | Kasa | Online | Sat (buy button)
   * Tighten paddings, shrink fonts, abbreviate column headers
   * via content swap, drop hover transform.
   * ========================================================= */
  /* Burak 2026-05-18: tighten bilet turu - kasa - online cluster on the
     left, sat column owns the remaining space on the right. Uniform 10px
     gap keeps the visual bilet/kasa distance equal to online/sat. */
  /* Burak 2026-06-14: drop the 4-column squeeze. On phones each ticket row
     becomes a mini-card — name + note span the full width on top, then a
     labelled KASA / ONLINE / buy line below. The shared column header is
     hidden because each price cell now carries its own inline label. */
  .bk-card .bk-colhead { display: none !important; }

  .bk-card .bk-rows { padding: 0 0 12px !important; gap: 8px !important; }

  .bk-card .bk-row {
    grid-template-columns: auto auto 1fr !important;
    grid-template-areas:
      "name name name"
      "cash online action" !important;
    gap: 10px 16px !important;
    padding: 12px 14px !important;
    border-left: 0 !important; border-right: 0 !important;
    border-radius: 0 !important;
    align-items: end !important;
  }
  .bk-card .bk-row.bk-row-single {
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "name name"
      "online action" !important;
  }
  .bk-card .bk-row:hover { transform: none !important; }

  /* Name + repeated note span the full top row, readable at full width. */
  .bk-card .bk-cell.bk-name {
    grid-area: name;
    align-self: start;
    font-size: 15px !important;
    letter-spacing: -0.01em;
  }
  .bk-card .bk-cell.bk-name small { font-size: 11.5px !important; line-height: 1.35; }

  /* Price cells: left-aligned, each with its own inline label above. */
  .bk-card .bk-cell.bk-cash { grid-area: cash; }
  .bk-card .bk-cell.bk-online { grid-area: online; }
  .bk-card .bk-cell.bk-cash,
  .bk-card .bk-cell.bk-online {
    align-items: flex-start !important;
    gap: 1px !important;
  }
  .bk-card .bk-cell.bk-cash::before,
  .bk-card .bk-cell.bk-online::before {
    font-family: 'Mark Pro', sans-serif;
    font-weight: 800; font-style: italic;
    font-size: 9px; letter-spacing: .08em;
    color: var(--u-muted); text-transform: uppercase;
  }
  .bk-card .bk-cell.bk-cash::before { content: 'KASA'; }
  .bk-card .bk-cell.bk-online::before { content: 'ONLINE'; }
  .bk-card .bk-row-single .bk-cell.bk-online::before { content: 'FİYAT'; }

  .bk-card .bk-cash .bk-price { font-size: 15px !important; }
  .bk-card .bk-cash .bk-price sup { font-size: 9px !important; }
  .bk-card .bk-online .bk-price { font-size: 17px !important; }
  .bk-card .bk-online .bk-price.bk-na { font-size: 13px !important; }
  .bk-card .bk-online .bk-price sup { font-size: 9px !important; }
  .bk-card .bk-row-single .bk-online .bk-price { font-size: 18px !important; }

  /* Buy button hugs the row's bottom-right, sized to its label. */
  .bk-card .bk-cell.bk-action {
    grid-area: action;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    padding-right: 0 !important;
  }
  .bk-card .bk-buy {
    padding: 9px 12px !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    gap: 4px !important;
    box-shadow: 0 2px 0 var(--u-black) !important;
    justify-content: center;
    white-space: nowrap;
    width: auto;
  }
  .bk-card .bk-buy svg { width: 11px; height: 11px; flex-shrink: 0; }
  .bk-card .bk-action-na { display: none !important; }
}