/* ============================================================
* MOBILE — 320px to 480px
* Devices: iPhone SE, iPhone 8/X/13/14/15 portrait, Galaxy S, Pixel
*
* Strategy:
* - Single-column stacks for ALL multi-column sections
* - Type scale shrinks ~40-50% from desktop
* - Hero h1: 40-56px, body 14-15px
* - Touch targets ≥ 44px
* - Hide secondary chrome (eyebrow strips, decorative SVGs, hover badges)
* - Convert horizontal scrollers to vertical stacks where it helps
*
* To activate properly:
* Replace with
*
* on every page in the next phase.
* ============================================================ */
@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;
}
/* === OVERFLOW HARDENING (2026-05-29) ===
A single element wider than the viewport pushes past 100vw, and
every centered / full-width box then renders shifted — which reads as
"boxes not aligned". Clip the horizontal axis (clip, NOT hidden, so the
sticky header keeps working) and cap intrinsic-width media. */
html, body { overflow-x: clip; max-width: 100%; }
img, video, iframe, table, pre, .stream, .map-card iframe { max-width: 100%; }
* { min-width: 0; } /* let flex/grid children shrink instead of overflowing */
/* === ADSENSE — responsive, never overflow or dominate the fold ===
Staging shows dashed placeholders (real AdSense disabled). Cap height
and force full-width so they sit as a slim banner, not a giant empty box. */
.uludagadsense {
width: 100% !important; max-width: 100% !important; height: 56px !important;
font-size: 10px; letter-spacing: 0.12em;
}
.kn-uludagadsense-zone { padding: 16px 0 !important; }
.kn-uludagadsense-zone .kn-uludagadsense-box { width: 100% !important; max-width: 100% !important; height: 64px !important; padding: 10px 14px !important; }
.kn-uludagadsense-mid .kn-uludagadsense-box { height: 96px !important; }
/* === GLOBAL LAYOUT === */
.wrap { padding-left: 16px; padding-right: 16px; max-width: 100%; }
.block { padding: var(--u-section-pad) 0; }
.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%; }
/* === HEADER === */
/* .nav-v2 is hidden + .hamburger-btn shown centrally in styles.css (max-width: 1024px). */
.site-header .inner { padding: 12px 16px; gap: 12px; }
.brand img { width: 32px !important; height: 32px !important; }
/* === HERO (home slider) === */
.hero { height: auto; min-height: 540px; }
.hero .inner { padding: 40px 16px 200px; min-height: 540px; }
.hero-slider h1 { font-size: 52px !important; line-height: 0.95; }
.hero-slider .sub { font-size: 14px !important; max-width: none !important; }
.hero-slider .eyebrow { font-size: 10px; padding: 5px 10px; margin-bottom: 12px; }
/* Suppress the 8.5MB video on mobile — the poster image background still shows. */
.hero-slider .hs-video { display: none; }
/* Pin live-stats to the bottom of the hero so they stay visible without
fighting the headline. Horizontal scroll-snap for the 3 condition pills,
Skipass CTA breaks below as a full-width button. */
.hero-slider .live-stats {
position: absolute; top: auto; left: 0; right: 0; bottom: 76px;
width: auto; transform: none;
flex-direction: row; flex-wrap: nowrap;
gap: 8px; padding: 0 16px;
overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
align-items: stretch;
}
.hero-slider .live-stats::-webkit-scrollbar { display: none; }
.hero-slider .stat-pill {
min-width: 150px; padding: 10px 12px;
scroll-snap-align: start; flex-shrink: 0;
}
.hero-slider .stat-pill .big { font-size: 22px; }
.hero-slider .hero-cta-right {
order: 99;
flex-basis: 100%;
margin-top: 0;
padding: 12px 16px;
font-size: 14px;
}
/* Bottom slider controls — tighter for thumb-reach */
.hs-controls { bottom: 14px; gap: 6px; }
.hs-arrow { width: 38px; height: 38px; }
.hs-dot { padding: 7px 12px; }
.hs-dot .nm { display: none; }
.scroll-cue { display: none; }
/* === HOMEPAGE BLOCKS === */
.cam-row { grid-template-columns: 1fr; gap: 16px; }
.events-combined { height: auto; grid-template-columns: 1fr; }
.events-combined .left-pane-split { grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr 1fr; }
.events-combined.events-combined-full .left-pane-split .el-slice { border-right: 0 !important; border-bottom: 1.5px solid var(--u-black) !important; min-height: 140px; }
.wx-row, .wx-row.wx-row-2 { grid-template-columns: 1fr; gap: 14px; }
.wx-card { padding: 20px; }
.wx-today .big-t { font-size: 96px; line-height: 0.9; }
.wx-today .meta { gap: 10px; }
.wx-today .meta .v { font-size: 18px; }
/* 5-day forecast: horizontal scroll-snap on mobile so each day card stays readable. */
.wx-cast .grid5 {
grid-template-columns: repeat(5, minmax(82px, 1fr));
overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* BUGÜN kartına soldan birkaç px nefes (padding-left 20→28; scroll-padding
snap'in de bu inset'e oturmasını sağlar). Bug Report 04.06. */
margin-left: -20px; margin-right: -20px; padding: 0 20px 0 28px;
scroll-padding-left: 28px;
}
.wx-cast .grid5::-webkit-scrollbar { display: none; }
.wx-cast .day { scroll-snap-align: start; }
.wx-cast .wx-cast-title { font-size: 20px; }
.wx-cast .wx-cast-attest { font-size: 9px; padding: 5px 8px; }
.wx-cast .wx-cast-foot { font-size: 11px; }
.wx-cast .wx-cast-sub-form { flex-direction: column; gap: 10px; }
.wx-cast .wx-cast-sub-form input,
.wx-cast .wx-cast-sub-form .btn { width: 100%; }
.news-grid { grid-template-columns: 1fr; }
.slope-grid { grid-template-columns: 1fr; }
.kf-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
.kf-hero { grid-column: 1; grid-row: auto; }
.kf-side { grid-column: 1; grid-row: auto; }
.kf-hero h3 { font-size: 44px; }
.kn-row { grid-template-columns: 1fr; }
.kn-tile { height: 360px; }
.kn-tile .top-block h2 { font-size: 38px; }
.partners { grid-template-columns: repeat(2, 1fr); }
.act-row { grid-auto-columns: 78vw; }
/* Activities scroller arrows stay visible + tappable on mobile.
Shrunk from the 68px desktop circle to a 44px touch target, pulled
slightly onto the row edges so they overlap the cards without
covering the centre content. */
.act-arrow {
display: grid;
width: 44px; height: 44px;
box-shadow: 0 4px 0 var(--u-black), 0 8px 18px -8px rgba(0,0,0,0.45);
}
.act-arrow svg { width: 22px; height: 22px; }
.act-arrow-left { left: 2px; }
.act-arrow-right { right: 2px; }
/* === PISTLER & LİFTLER === */
.pl-card { padding: 18px; }
.pl-title { font-size: 20px; }
.pl-lift-grid { grid-template-columns: repeat(2, 1fr); }
.pl-piste .pl-skier { width: 140px; height: 140px; }
/* === LISTING PAGES (kayak-okullari, ekipman-kiralama) === */
.sc-card, .ek-card { grid-template-columns: 1fr; }
.sc-card .cover-stack, .ek-card .cover-stack { border-right: 0; border-bottom: 2px solid var(--u-black); }
.sc-card .body, .ek-card .body { padding: 18px; }
.sc-card .body .nm, .ek-card .body .nm { font-size: 22px; }
.sc-card .side, .ek-card .side { border-left: 0; border-top: 1.5px dashed #DDDDD4; padding: 18px; }
/* === KONAKLAMA / MEKANLAR === */
.hotel-row { grid-template-columns: 1fr; }
.mk-grid { grid-template-columns: 1fr; }
.lp-toolbar .ctrls { flex-direction: column; align-items: stretch; gap: 12px; }
.lp-toolbar .seg { flex-wrap: wrap; }
/* === ETKİNLİKLER === */
.ev-grid { grid-template-columns: 1fr !important; }
.ev-cards { grid-template-columns: 1fr; }
.ev-item { grid-template-columns: 60px 1fr !important; }
.ev-item .item-ctas { grid-column: 1 / -1; }
/* === BİLET === */
.bk-card .bk-head { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
.bk-card .bk-colhead { display: none; }
.bk-card .bk-row { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
.bk-card .bk-row.bk-row-single { grid-template-columns: 1fr; }
.bk-card .bk-cell.bk-cash, .bk-card .bk-cell.bk-online { align-items: flex-start; text-align: left; }
.bk-card .bk-titles h3 { font-size: 22px; }
/* === BURSA === */
.bursa-hero { min-height: 420px; }
.bursa-hero .inner { padding: 110px 16px 32px; }
.bursa-hero h1 { font-size: 56px !important; }
.bursa-hero .sub { font-size: 14px; }
.bursa-hero .meta-row { flex-direction: column; gap: 8px; }
.transport { grid-template-columns: 1fr 1fr; gap: 10px; }
.bento { grid-template-columns: 1fr; }
.snap { grid-template-columns: 1fr; gap: 24px; padding: 48px 0; }
/* === İLETİŞİM === */
.il-grid { grid-template-columns: 1fr; gap: 18px; }
.il-social-row { grid-template-columns: 1fr 1fr; }
.il-map-strip { grid-template-columns: 1fr; }
.il-form { grid-template-columns: 1fr; }
/* === SPONSORLUK === */
.rs-grid { grid-template-columns: 1fr !important; grid-auto-rows: 340px !important; }
.rs-tile { grid-column: span 1 !important; }
/* === FOOTER (Burak 2026-05-18) ===
Tek kolonda 4 kart:
1. about (logo + açıklama + sosyal ikonlar)
2. Hızlı Linkler — ul 2-col
3. Yasal — ul 2-col
4. İletişim & Bülten — ul 1-col + newsletter
*/
.site-footer { padding: 36px 0 18px; }
.site-footer .top {
grid-template-columns: 1fr;
gap: 14px;
padding-bottom: 22px;
}
.site-footer .top > * {
background: rgba(255,255,255,0.04);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 22px 20px;
}
.site-footer .about-blk { padding-right: 20px; padding: 24px 20px; }
.site-footer .big-brand { margin-bottom: 14px; }
.site-footer .big-brand .mk { width: 48px; height: 48px; }
.site-footer .big-brand .nm { font-size: 22px; }
.site-footer .big-brand .nm small { font-size: 11px; }
.site-footer p { font-size: 13px; line-height: 1.55; }
.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 (2. div) + Yasal (3. div) */
.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 14px;
}
.site-footer .top > div:nth-child(2) ul a,
.site-footer .top > div:nth-child(3) ul a {
font-size: 13px;
}
/* İletişim & Bülten — tek kolon (default ul flex-column zaten) */
.site-footer .top > div:nth-child(4) ul { gap: 10px; }
.site-footer .top > div:nth-child(4) ul a { font-size: 13.5px; }
.site-footer .newsletter { margin-top: 18px; }
.site-footer .newsletter .row { flex-direction: column; gap: 8px; }
.site-footer .newsletter input { width: 100%; }
.site-footer .newsletter .btn { width: 100%; }
.site-footer .bottom { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 11.5px; }
.site-footer .disclosure { font-size: 10.5px; padding: 14px 0; }
/* === BUTTONS / TYPE === */
.btn { padding: 12px 18px; font-size: 12px; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
}