/* ============================================================
 * TABLET / iPad — 481px to 768px
 * Devices: iPad Mini portrait, iPhone Pro Max landscape, small tablets
 *
 * Strategy:
 *   - 2-column layouts where desktop uses 3-4
 *   - Type scale ~70% of desktop
 *   - Hero h1: 64-88px
 *   - Nav: visible with condensed labels OR hamburger (decide next phase)
 *   - Sidebars collapse below main content
 *
 * To activate properly:
 *   Use <meta name="viewport" content="width=device-width, initial-scale=1">
 *   on every page in the next phase.
 * ============================================================ */

@media screen and (min-width: 481px) and (max-width: 768px) {

  :root {
    --u-radius-lg: 18px;
    --u-section-pad: 64px;
  }

  /* === OVERFLOW HARDENING (2026-05-29) ===
     Same guard as mobile.css — clip the horizontal axis so one wide element
     can't shift the whole layout, and keep intrinsic-width media contained. */
  html, body { overflow-x: clip; max-width: 100%; }
  img, video, iframe, table, pre, .stream, .map-card iframe { max-width: 100%; }
  * { min-width: 0; }

  /* === ADSENSE — contained banner on tablet (placeholder on staging) === */
  .uludagadsense { width: 100% !important; max-width: 100% !important; height: 72px !important; }
  .kn-uludagadsense-zone .kn-uludagadsense-box { width: 100% !important; max-width: 100% !important; height: 80px !important; }
  .kn-uludagadsense-mid .kn-uludagadsense-box { height: 140px !important; }

  /* === GLOBAL LAYOUT === */
  .wrap { padding-left: 24px; padding-right: 24px; max-width: 100%; }
  .block { padding: var(--u-section-pad) 0; }
  .section-head { gap: 20px; }
  .section-head h2 { font-size: 40px; line-height: 1.05; }

  /* === HEADER === */
  .site-header .inner { padding: 14px 22px; }
  .nav-v2 { gap: 4px; }
  .nav-v2 .nav-trigger span:not(.chev):not(.trg-ic) { display: none; }   /* icon-only nav */
  .nav-v2 .chev { display: none; }

  /* === HERO === */
  .hero { height: 78vh; min-height: 620px; }
  .hero .inner { padding: 48px 24px 56px; min-height: 620px; }
  .hero-slider h1 { font-size: 72px !important; line-height: 0.92; }
  .hero-slider .sub { font-size: 16px !important; max-width: 480px !important; }
  .hero-slider .live-stats {
    width: 220px; right: 24px;
    top: 50%; transform: translateY(-50%);
    gap: 8px;
  }
  .hero-slider .stat-pill { padding: 12px 14px; min-width: 0; }
  .hero-slider .stat-pill .big { font-size: 24px; }
  .hero-slider .hero-cta-right { padding: 14px 18px; font-size: 14px; }
  .hs-arrow { width: 42px; height: 42px; }
  .hs-dot { padding: 8px 14px; }
  .hs-dot .nm { display: none; }

  /* === HOMEPAGE === */
  .cam-row { grid-template-columns: 1fr; gap: 20px; }
  .events-combined { grid-template-columns: 1fr; height: auto; }
  .events-combined.events-combined-full .left-pane-split { grid-template-columns: 1fr 1fr 1fr; min-height: 320px; }
  /* Stack the two weather cards on tablet — 2-col side-by-side is too cramped at 481-768px. */
  .wx-row, .wx-row.wx-row-2 { grid-template-columns: 1fr; gap: 16px; }
  .wx-card { padding: 22px; }
  .wx-today .big-t { font-size: 108px; }
  .wx-cast .grid5 { grid-template-columns: repeat(5, 1fr); }
  .wx-cast .wx-cast-sub-form { gap: 8px; }
  /* News: keep 3 columns at tablet width to avoid a lonely 3rd card.
     Cards get tighter padding to compensate. */
  .news-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .news-card .body { padding: 16px; gap: 8px; }
  .news-card h3 { font-size: 17px; }
  .news-card p { font-size: 13px; }
  .slope-grid { grid-template-columns: 1fr; }
  .kf-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .kf-hero { grid-column: 1 / -1; grid-row: 1; height: 320px; }
  .kf-side { grid-column: auto; grid-row: auto; }
  .kf-hero h3 { font-size: 52px; }
  .kn-row { grid-template-columns: 1fr; }
  .partners { grid-template-columns: repeat(3, 1fr); }

  /* === PISTLER & LİFTLER === */
  .pl-lift-grid { grid-template-columns: repeat(4, 1fr); }

  /* === LISTING PAGES === */
  .sc-card, .ek-card { grid-template-columns: 240px 1fr; }
  .sc-card .side, .ek-card .side { grid-column: 1 / -1; border-left: 0; border-top: 1.5px dashed #DDDDD4; }
  .hotel-row { grid-template-columns: 1fr; }
  .mk-grid { grid-template-columns: 1fr 1fr; }

  /* === ETKİNLİKLER === */
  .ev-grid { grid-template-columns: 1fr !important; }
  .ev-cards { grid-template-columns: 1fr 1fr; }
  .ev-item .item-ctas { flex-direction: column; gap: 6px; }

  /* === BİLET === */
  .bk-card .bk-head { grid-template-columns: auto 1fr; }
  .bk-card .bk-colhead { grid-template-columns: 1fr 1fr 1fr; }
  .bk-card .bk-row { grid-template-columns: 1fr 1fr 1.2fr; }

  /* === BURSA === */
  .bursa-hero { min-height: 520px; }
  .bursa-hero .inner { padding: 130px 24px 48px; }
  .bursa-hero h1 { font-size: 88px !important; }
  .transport { grid-template-columns: 1fr 1fr; gap: 14px; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .snap { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }

  /* === İLETİŞİM === */
  .il-grid { grid-template-columns: 1fr; }
  .il-social-row { grid-template-columns: 1fr 1fr; }
  .il-map-strip { grid-template-columns: 1fr; }

  /* === SPONSORLUK === */
  .rs-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 400px !important; }
  .rs-tile { grid-column: span 1 !important; }

  /* === FOOTER (Burak 2026-05-18) — mobile ile aynı 4-kart akışı === */
  .site-footer { padding: 40px 0 22px; }
  .site-footer .top {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 26px;
  }
  .site-footer .top > * {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px 22px;
  }
  .site-footer .about-blk { padding-right: 22px; }
  .site-footer .big-brand .mk { width: 56px; height: 56px; }
  .site-footer .big-brand .nm { font-size: 24px; }
  .site-footer .socials { gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .site-footer .socials a { width: 40px; height: 40px; }
  /* 2-kolon link gridi: Hızlı Linkler + Yasal */
  .site-footer .top > div:nth-child(2) ul,
  .site-footer .top > div:nth-child(3) ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }
  /* İletişim & Bülten — tek kolon */
  .site-footer .top > div:nth-child(4) ul { gap: 10px; }
  .site-footer .newsletter .row { flex-direction: column; gap: 8px; }
  .site-footer .newsletter input,
  .site-footer .newsletter .btn { width: 100%; }
  .site-footer .bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* === TYPE === */
  h1 { font-size: 72px; }
  h2 { font-size: 40px; }
  h3 { font-size: 24px; }

}