@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root {
    --font: 'Outfit', sans-serif;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --mono: 'DM Mono', monospace;
    --ease: cubic-bezier(.4,0,.2,1);
    --salmon:       #f06c54;
    --salmon-dark:  #d45543;
    --salmon-glow:  rgba(240,108,84,.24);

    /* HavaDurumu paletinden türetilen, daha aydınlık koyu tema */
    --bg:           #17353d;
    --bg2:          #1e4148;
    --bg3:          #28515a;
    --border:       #42666c;
    --border2:      #5a7b7f;
    --text:         #f7faf6;
    --text2:        #c3d4cf;
    --text3:        #89a29c;
    --accent:       var(--salmon);
    --accent-dim:   var(--salmon-dark);
    --accent-glow:  var(--salmon-glow);
    --accent2:      #ffb45f;
    --red:          hsl(0, 70%, 62%);

    /* Hava Sesi'nden uyarlanan plak paleti */
    --vinyl-ink:    #10282f;
    --vinyl-groove: #17353d;
    --vinyl-mist:   #edf5f1;
    --vinyl-sun:    #ffb45f;
    --vinyl-coral:  var(--salmon);
    --record-label: var(--vinyl-sun);

    --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
}

/* ════════════════════════════════════════════════
   HAVA DURUMU TEMAları
════════════════════════════════════════════════ */

/* ☀️ GÜNEŞLI */
body[data-theme="dark"][data-weather="clear"] {
    --record-label:#ffb45f;
    --bg:#17353d; --bg2:#1e4148; --bg3:#28515a;
    --border:#42666c; --border2:#5a7b7f;
    --text:#f7faf6; --text2:#c3d4cf; --text3:#89a29c;
    --accent:#ffb45f; --accent-dim:#d88936;
    --accent-glow:rgba(255,180,95,.25); --accent2:#d87462;
}

/* â›… BULUTLU */
body[data-theme="dark"][data-weather="clouds"] {
    --record-label:#8fb8b2;
    --bg:#29454b; --bg2:#35555b; --bg3:#416369;
    --border:#55747a; --border2:#6d898d;
    --text:#f7faf6; --text2:#d5e1dd; --text3:#a4b7b2;
    --accent:#b6d6ce; --accent-dim:#6c9f93;
    --accent-glow:rgba(182,214,206,.2); --accent2:#ffb45f;
}

/* 🌧️ YAĞMURLU */
body[data-theme="dark"][data-weather="rain"] {
    --record-label:#6d7dd7;
    --bg:#22374d; --bg2:#2b435b; --bg3:#365068;
    --border:#4b6378; --border2:#63798c;
    --text:#f4f7fb; --text2:#c8d3df; --text3:#94a7ba;
    --accent:#91a8eb; --accent-dim:#6379c9;
    --accent-glow:rgba(109,125,215,.26); --accent2:#d87462;
}

/* 🌦️ ÇİSELEYEN */
body[data-theme="dark"][data-weather="drizzle"] {
    --record-label:#79b7bd;
    --bg:#25464e; --bg2:#30555d; --bg3:#3b646b;
    --border:#52777d; --border2:#6a8d91;
    --text:#f5faf9; --text2:#cce0dd; --text3:#9db8b4;
    --accent:#8fcbd0; --accent-dim:#5a9ea5;
    --accent-glow:rgba(121,183,189,.25); --accent2:#ffb45f;
}

/* ⛈️ FIRTINA */
body[data-theme="dark"][data-weather="thunderstorm"] {
    --record-label:#d87462;
    --bg:#263747; --bg2:#304658; --bg3:#3b5567;
    --border:#516a7a; --border2:#6b8290;
    --text:#f8f6f1; --text2:#d3d8dc; --text3:#a1adb4;
    --accent:#ffc47f; --accent-dim:#d98d3d;
    --accent-glow:rgba(255,180,95,.25); --accent2:#e78775;
}

/* ❄️ KARLI */
body[data-theme="dark"][data-weather="snow"] {
    --record-label:#dce9e5;
    --bg:#345260; --bg2:#40626f; --bg3:#4d7280;
    --border:#648590; --border2:#7e9ca5;
    --text:#fbfdfc; --text2:#dbe8e5; --text3:#b3c8c3;
    --accent:#e6f1ee; --accent-dim:#94bdb5;
    --accent-glow:rgba(220,233,229,.28); --accent2:#ffb45f;
}

/* 🌫️ SİSLİ */
body[data-theme="dark"][data-weather="mist"],
body[data-theme="dark"][data-weather="haze"],
body[data-theme="dark"][data-weather="fog"] {
    --record-label:#a8b9ba;
    --bg:#3a5054; --bg2:#465d61; --bg3:#536c70;
    --border:#698084; --border2:#81969a;
    --text:#f6f9f8; --text2:#d8e1df; --text3:#adbdb9;
    --accent:#bfd1ce; --accent-dim:#829f9a;
    --accent-glow:rgba(168,185,186,.22); --accent2:#ffb45f;
}

/* Hava paletleri arka planı değiştirir; marka rengi her durumda somon kalır. */
body[data-theme][data-weather] {
    --accent:var(--salmon);
    --accent-dim:var(--salmon-dark);
    --accent-glow:var(--salmon-glow);
}

/* ════════════════════════════════════════════════
   CANLI ARKA PLAN ANÄ°MASYONLARI
════════════════════════════════════════════════ */

/* Ortak canvas katmanı */
#weather-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

/* Gradient arka plan her hava için */
body { background: var(--bg); transition: background 1s ease; }

body[data-weather="clear"]::before {
    background:
        radial-gradient(ellipse 80% 60% at 80% -10%, hsla(45,95%,55%,.22), transparent),
        radial-gradient(ellipse 60% 40% at 20% 100%, hsla(25,80%,45%,.12), transparent),
        radial-gradient(ellipse 40% 30% at 50% 50%, hsla(42,60%,30%,.08), transparent);
}
body[data-weather="clouds"]::before {
    background:
        radial-gradient(ellipse 90% 45% at 50% -18%, hsla(197,25%,48%,.14), transparent),
        radial-gradient(ellipse 60% 36% at 88% 88%, hsla(188,18%,38%,.08), transparent);
}

body[data-weather="clouds"] .weather-card.live {
    border-color:var(--border2);
    box-shadow:0 18px 48px rgba(0,0,0,.34), 0 0 0 1px hsla(193,28%,58%,.08);
}
body[data-weather="rain"]::before {
    background:
        radial-gradient(ellipse 80% 60% at 30% 0%, hsla(210,60%,35%,.2), transparent),
        radial-gradient(ellipse 60% 50% at 70% 100%, hsla(220,50%,25%,.15), transparent);
}
body[data-weather="thunderstorm"]::before {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, hsla(215,55%,30%,.25), transparent),
        radial-gradient(ellipse 50% 40% at 20% 80%, hsla(43,45%,24%,.14), transparent);
}
body[data-weather="snow"]::before {
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%, hsla(210,40%,50%,.18), transparent),
        radial-gradient(ellipse 60% 40% at 80% 90%, hsla(200,35%,45%,.12), transparent);
}
body[data-weather="mist"]::before,
body[data-weather="haze"]::before,
body[data-weather="fog"]::before {
    background:
        radial-gradient(ellipse 100% 70% at 50% 30%, hsla(200,20%,30%,.2), transparent);
}

/* ════════════════════════════════════════════════
   TEMEL STILLER
════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:clip; }

body {
    font-family: var(--font);
    color: var(--text);
    color-scheme: dark;
    min-height: 100vh;
    padding-top: 61px;
    overflow-x: hidden;
    transition: color .8s ease;
}
button,input,select,textarea { font:inherit; }
h1,h2,h3,h4,h5,h6 { font-family:var(--serif); font-weight:700; }
body::before {
    content:'';
    position:fixed; inset:0;
    pointer-events:none; z-index:0;
    transition: background 1.2s ease;
}

/* ── Navbar ── */
.navbar {
    background: hsla(0,0%,0%,.55) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding:.7rem 0;
    position:fixed; top:0; left:0; right:0; z-index:1000;
    transition: border-color .8s ease;
}
.navbar-brand {
    font-family:var(--serif); font-weight:700; font-size:1.85rem; line-height:1;
    letter-spacing:-.045em;
    color: var(--salmon);
    transition: color 1s ease;
    display:inline-flex; align-items:center;
}
.navbar-brand:hover,.navbar-brand:focus { color:var(--salmon-dark); }
.navbar-toggler { border-color:color-mix(in srgb,var(--text) 28%,transparent); }
body[data-theme="dark"] .navbar-toggler-icon {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.brand-record-mark {
    position:relative;
    display:inline-block;
    width:27px; height:27px;
    margin-right:.48rem;
    flex:0 0 27px;
    border-radius:50%;
}
.brand-record-mark::before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        conic-gradient(from 30deg,transparent 0 18%,rgba(255,255,255,.18) 22%,transparent 28% 64%,rgba(255,255,255,.1) 68%,transparent 73%),
        radial-gradient(circle,var(--salmon) 0 19%,#17353d 20% 39%,#48656a 40% 42%,#17353d 43% 63%,#48656a 64% 66%,#17353d 67%);
    box-shadow:0 4px 10px rgba(23,53,61,.16);
    animation:brandRecordSpin 10s linear infinite;
}
.brand-record-mark::after {
    content:'';
    position:absolute;
    left:50%; top:50%;
    width:3px; height:3px;
    border-radius:50%;
    background:#17353d;
    transform:translate(-50%,-50%);
    z-index:2;
}
.brand-record-mark i {
    position:absolute;
    right:-3px; top:0;
    width:3px; height:19px;
    border-radius:99px;
    background:var(--salmon);
    transform:rotate(-18deg);
    transform-origin:top;
    z-index:3;
}
@keyframes brandRecordSpin { to { transform:rotate(360deg); } }
.nav-link { color:var(--text2)!important; font-weight:500; transition:color .2s; font-size:.88rem; }
.nav-link:hover { color:var(--accent)!important; }

/* ── Saat ── */
.clock-wrap {
    background: var(--bg2); border:1px solid var(--border);
    border-radius:100px; padding:.4rem 1.1rem;
    display:flex; align-items:center; gap:.8rem;
    transition: background .8s, border-color .8s;
}
.clock-time { font-family:var(--mono); font-size:1rem; font-weight:500; color:var(--accent); letter-spacing:.04em; }
.clock-date { font-size:.72rem; color:var(--text3); }

/* ── Hero ── */
.hero {position:relative;z-index: 2;padding:4.5rem 0 3rem;}
.hero-editorial {
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(430px,1.12fr);
    gap:clamp(2rem,5vw,5.5rem);
    align-items:center;
    min-height:510px;
}
.city-suggestion-item span {
    text-align: left;
}
.hero-copy { position:relative; z-index:2; padding-left:.15rem; }
.hero-kicker {
    margin:0 0 1.2rem;
    color:var(--text2);
    font-family:var(--mono);
    font-size:.74rem;
    font-weight:500;
    letter-spacing:.18em;
}
.editorial-title {
    margin:0 0 1.35rem;
    color:var(--text);
    font-family:var(--serif);
    font-size:clamp(4.6rem,7.6vw,7.8rem);
    font-weight:600;
    line-height: 0.9;
    letter-spacing:-.055em;
}
.editorial-title em {
    display:inline-block;
    margin-left:clamp(1.7rem,5vw,5rem);
    color:#f06c54;
    font-weight:600;
}
.hero-sub { color:var(--text2); font-size:1.03rem; max-width:530px; margin:0 0 1.2rem; line-height:1.65; }
.greeting { color:var(--text3); font-family:var(--mono); font-size:1rem; letter-spacing:.08em; display:block; }

/* Referanstaki plak, güneş ve bulut kompozisyonu */
.hero-art { position:relative; min-height:500px; isolation:isolate; }
.hero-art::before,
.hero-orbit {
    content:'';
    position:absolute;
    left:50%; top:50%;
    width:min(470px,38vw); aspect-ratio:1;
    border:1px solid color-mix(in srgb,var(--border2) 70%,transparent);
    border-radius:50%;
    transform:translate(-50%,-50%);
}
.hero-orbit { width:min(360px,30vw); border-style:dashed; opacity:.55; }
.hero-orbit::before,.hero-orbit::after {
    content:''; position:absolute; top:50%; width:9px; height:9px; border-radius:50%; background:var(--text);
}
.hero-orbit::before { left:-5px; }
.hero-orbit::after { right:-5px; }
.hero-art-label,.hero-art-weather {
    position:absolute; z-index:8;
    color:var(--text2); font-family:var(--mono); font-size:.65rem; letter-spacing:.15em;
}
.hero-art-label { right:2%; top:4%; }
.hero-art-label::before { content:''; display:inline-block; width:7px; height:7px; margin-right:.55rem; border-radius:50%; background:#f06c54; box-shadow:0 0 0 5px rgba(240,108,84,.12); }
.hero-art-weather { left:50%; bottom:2%; transform:translateX(-50%); white-space:nowrap; }
.hero-vinyl {
    position:absolute; z-index:4;
    left:50%; top:52%;
    display:grid; place-items:center;
    width:min(320px,27vw); aspect-ratio:1;
    overflow:hidden; border-radius:50%;
    background:
        repeating-radial-gradient(circle,transparent 0 8px,rgba(247,250,246,.08) 9px 10px),
        radial-gradient(circle,#28515a 0 16%,#10282f 16.5% 69%,#17353d 100%);
    box-shadow:0 34px 60px rgba(23,53,61,.2),inset 0 0 0 1px rgba(247,250,246,.12);
    transform:translate(-50%,-50%);
    animation:heroVinylSpin 20s linear infinite;
}
.hero-vinyl::after { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 50deg,transparent 0 14%,rgba(255,255,255,.12) 17%,transparent 22% 58%,rgba(255,255,255,.08) 62%,transparent 68%); }
.hero-vinyl-label {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:34%; aspect-ratio:1; border-radius:50%; background:#ffb45f; color:#17353d;
    font-family:var(--mono); font-size:.5rem; letter-spacing:.12em;
}
.hero-vinyl-label strong { font-family:var(--serif); font-size:1.55rem; line-height:.8; letter-spacing:-.05em; }
.hero-vinyl-label i { width:8px; height:8px; margin-top:6px; border-radius:50%; background:#17353d; }
.hero-tonearm {
    position:absolute; z-index:7;
    right:8%; top:16%; width:13px; height:235px;
    border-radius:99px; background:#f06c54;
    box-shadow:inset -3px 0 rgba(23,53,61,.13);
    transform:rotate(-24deg); transform-origin:top center;
    animation:heroTonearm 4.5s ease-in-out infinite;
}
.hero-tonearm::before { content:''; position:absolute; left:-12px; top:-12px; width:37px; height:37px; border-radius:50%; background:#17353d; box-shadow:inset 0 0 0 10px #f06c54; }
.hero-tonearm span { position:absolute; left:-7px; bottom:-15px; width:28px; height:43px; border-radius:6px; background:#17353d; }
.hero-sun {
    position:absolute; z-index:5; left:13%; top:15%;
    width:138px; aspect-ratio:1; border-radius:50%;
    background:#ffb45f; box-shadow:0 0 0 20px rgba(255,180,95,.16);
    animation:heroWeatherFloat 4s ease-in-out infinite;
}
.hero-cloud {
    position:absolute; z-index:6;
    width:155px; height:58px; border-radius:999px;
    background:rgba(247,250,246,.92); box-shadow:0 16px 30px rgba(23,53,61,.1);
    animation:heroWeatherFloat 4.8s ease-in-out infinite;
}
.hero-cloud::before,.hero-cloud::after { content:''; position:absolute; bottom:14px; border-radius:50%; background:inherit; }
.hero-cloud::before { left:22px; width:70px; height:70px; }
.hero-cloud::after { right:18px; width:86px; height:86px; }
.hero-cloud-one { left:6%; top:42%; }
.hero-cloud-two { right:3%; bottom:14%; transform:scale(1.18); animation-delay:-2.1s; }
@keyframes heroVinylSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes heroTonearm { 0%,100%{transform:rotate(-24deg)} 50%{transform:rotate(-17deg)} }
@keyframes heroWeatherFloat { 0%,100%{translate:0 0} 50%{translate:0 -10px} }

/* ── Arama ── */
.search-card {
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:32px;
    padding:2rem clamp(1.25rem,4vw,3.5rem) 1.45rem;
    max-width:1040px;
    margin:1.3rem auto 0;
    box-shadow:0 26px 65px rgba(23,53,61,.12);
    transition: background .8s, border-color .8s;
    text-align:center;
    z-index: 99;
    position: relative;
}
.search-card-heading { margin-bottom:1.2rem; }
.search-eyebrow { display:block; margin-bottom:.15rem; color:var(--text3); font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; }
.search-card-heading h2 { margin:0; color:var(--text); font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.55rem); font-weight:700; letter-spacing:-.04em; }
.search-card-heading h2 i { margin-right:.7rem; color:#f06c54; font-family:initial; font-size:.72em; }
.search-row {
    display:flex; align-items:center; gap:.5rem;
    min-height:72px; padding:.42rem .45rem .42rem 1.35rem;
    border:1.5px solid var(--border2); border-radius:999px;
    background:color-mix(in srgb,var(--bg2) 78%,transparent);
}
.search-leading-icon { color:var(--text); font-size:1.15rem; }
.search-input {
    flex:1; min-width:0; background:transparent!important; border:0;
    border-radius:0; color:var(--text);
    padding:.85rem .65rem; font-family:var(--font); font-size:1.05rem; font-weight:400;
    outline:none; transition:border-color .2s, box-shadow .2s, background .8s;
}
.search-input:focus { border-color:transparent; box-shadow:none; }
.search-input::placeholder { color:var(--text3); }
.btn-ara {
    background:var(--salmon);
    border:none; border-radius:999px; color:#fff;
    min-height:56px; padding:.8rem 2rem; font-family:var(--font); font-weight:700; font-size:.92rem;
    cursor:pointer; white-space:nowrap;
    transition:transform .2s, box-shadow .2s, background .8s;
    box-shadow:0 4px 20px var(--accent-glow);
}
.btn-ara:hover { background:var(--salmon-dark); transform:translateY(-2px); box-shadow:0 8px 30px var(--salmon-glow); }
.btn-ara:active { transform:none; }
.btn-ara:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.search-hint { display:none; }

/* ── Şehir önerileri (Nominatim autocomplete) ──
   Arama kutusunun ÜSTÜNDE açılır (bottom:100%), böylece iniş ekranındaki
   body overflow-y:hidden kilidiyle aşağı doğru çakışmaz. */
.search-combo {position:relative;}
.city-suggestions {
    position:absolute;
    left:.5rem;
    right:.5rem;
    bottom: auto;
    margin:0;
    padding:.4rem;
    list-style:none;
    background:var(--bg2);
    border:1.5px solid var(--border2);
    border-radius:20px;
    box-shadow:0 -16px 45px rgba(23,53,61,.18);
    max-height: 120px;
    overflow-y:auto;
    z-index:40;
    top: auto;
}
.search-row.home-row .city-suggestions {
    top: auto;
}

.search-row.home-row + .city-suggestions {
    bottom: auto;
}
.city-suggestion-item {
    display:flex; align-items:center; gap:.65rem;
    padding:.62rem .85rem; border-radius:14px; cursor:pointer;
    color:var(--text); font-size:.92rem; line-height:1.25;
}
.city-suggestion-item i { color:var(--text3); font-size:1rem; flex:none; }
.city-suggestion-item .city-suggestion-sub { display:block; color:var(--text3); font-size:.78rem; margin-top:.1rem; }
.city-suggestion-item:hover,
.city-suggestion-item.is-active { background:color-mix(in srgb,var(--salmon) 14%,transparent); color:var(--text); }
.city-suggestion-empty {
    padding:.7rem .9rem; color:var(--text3); font-size:.88rem; text-align:center;
}

/* İlk ekranı masaüstünde tek viewport içinde tutar; sonuçlar açılınca normal akış geri gelir. */
@media (min-width:1101px) {
    body:not([data-weather]) {
        height:100svh;
        min-height:0;
        overflow-y:hidden;
    }
    body:not([data-weather]) .hero {
        height:calc(100svh - 61px);
        min-height:0;
        padding:clamp(.55rem,1.4vh,.9rem) 0;
        overflow:hidden;
    }
    body:not([data-weather]) .hero > .container {
        display:grid;
        grid-template-rows:minmax(0,1fr) auto auto;
        align-content:center;
        height:100%;
    }
    body:not([data-weather]) .hero-editorial {
        min-height:0;
        height:clamp(330px,53vh,430px);
        padding-top: 100px;
    }
    body:not([data-weather]) .hero-art { min-height:100%; }
    body:not([data-weather]) .hero-art::before { width:min(430px,34vw,56vh); }
    body:not([data-weather]) .hero-orbit { width:min(330px,27vw,44vh); }
    body:not([data-weather]) .hero-vinyl { width:min(300px,24vw,40vh); }
    body:not([data-weather]) .hero-sun { width:min(120px,16vh); }
    body:not([data-weather]) .hero-tonearm { height:min(210px,29vh); }
    body:not([data-weather]) .editorial-title {
        margin-bottom: 50px;
        font-size:clamp(4rem,min(7.2vw,13vh),6.8rem);
    }
    body:not([data-weather]) .hero-sub { margin-bottom:.65rem; line-height:1.5; }
    body:not([data-weather]) .search-card {
        width:min(920px,100%);
        max-width:920px;
        margin-top: 0;
        padding:.72rem 2rem .5rem;
        border-radius:26px;
        margin-bottom: 90px;
    }
    body:not([data-weather]) .search-card-heading { margin-bottom:.4rem; }
    body:not([data-weather]) .search-eyebrow { margin-bottom:0; font-size:.58rem; }
    body:not([data-weather]) .search-card-heading h2 { font-size:clamp(2rem,3vw,2.5rem); }
    body:not([data-weather]) .search-row { min-height:56px; padding:.28rem .35rem .28rem 1.1rem; }
    body:not([data-weather]) .search-input { padding:.55rem; font-size:.96rem; }
    body:not([data-weather]) .btn-ara { min-height:46px; padding:.6rem 1.65rem; }
    body:not([data-weather]) .btn-map-pick { margin-top:.38rem; padding:.24rem .1rem; }
    body:not([data-weather]) .location-status { min-height:0; margin-top:.12rem; }
    body:not([data-weather]) #quick-cities { margin-top:.35rem!important; }
}

body[data-weather] .hero-editorial { display:none; }
body[data-weather] .hero { padding:1.25rem 0 .35rem; }
body[data-weather] .search-card {
    max-width:900px;
    margin-top:0;
    padding:1rem 1.4rem .8rem;
    border-radius:24px;
    background:color-mix(in srgb,var(--bg2) 84%,transparent);
    backdrop-filter:blur(9px) saturate(1.16);
}
body[data-weather] .search-card-heading { margin-bottom:.65rem; }
body[data-weather] .search-card-heading h2 { font-size:clamp(2rem,3vw,2.65rem); }
body[data-weather] .search-row { min-height:58px; }
body[data-weather] .btn-ara { min-height:46px; }
body[data-weather] .btn-map-pick { margin-top:.55rem; }

/* Sonuç kartlarından önce canvas animasyonuna nefes alanı bırakır. */
.weather-atmosphere-stage {
    position:relative;
    display:grid;
    place-items:center;
    min-height:clamp(150px,19vh,220px);
    margin:.25rem auto 1rem;
    overflow:hidden;
    color:rgba(247,250,246,.92);
    text-align:center;
    text-shadow:0 2px 18px rgba(16,40,47,.45);
}
.weather-atmosphere-stage::before,
.weather-atmosphere-stage::after {
    content:'';
    position:absolute;
    left:50%; top:50%;
    border:1px solid rgba(247,250,246,.25);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:weatherStagePulse 5s ease-in-out infinite;
}
.weather-atmosphere-stage::before { width:260px; height:260px; }
.weather-atmosphere-stage::after { width:390px; height:390px; animation-delay:-2.5s; }
.weather-stage-kicker {
    position:absolute;
    top:20%;
    font-family:var(--mono);
    font-size:.62rem;
    letter-spacing:.18em;
}
.weather-stage-kicker i {
    display:inline-block;
    width:7px; height:7px;
    margin-right:.55rem;
    border-radius:50%;
    background:var(--accent2);
    box-shadow:0 0 0 6px color-mix(in srgb,var(--accent2) 18%,transparent);
    animation:weatherStageDot 1.4s ease-in-out infinite;
}
.weather-stage-title {
    position:relative;
    z-index:1;
    font-family:var(--serif);
    font-size:clamp(2.6rem,5vw,4.8rem);
    font-weight:600;
    letter-spacing:-.045em;
}
.weather-stage-line {
    position:absolute;
    bottom:16%;
    width:76px; height:1px;
    background:rgba(247,250,246,.55);
}
@keyframes weatherStagePulse {
    0%,100% { opacity:.28; transform:translate(-50%,-50%) scale(.92); }
    50% { opacity:.7; transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes weatherStageDot { 50% { opacity:.4; transform:scale(.72); } }

/* ── Hava Kartı ── */
.weather-music-layout {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem;
    align-items:stretch;
}
.weather-card {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:var(--r-lg); padding:1.75rem;
    animation:up .4s var(--ease);
    transition: all .8s ease;
}
.weather-card.live {
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent), 0 20px 50px rgba(0,0,0,.4), 0 0 40px var(--accent-glow);
}
.w-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.25rem; }
.w-icon {
    width:72px; height:72px; border-radius:var(--r-md);
    background:var(--bg3); display:flex; align-items:center; justify-content:center;
    font-size:2.5rem; flex-shrink:0; transition:background .8s;
}
.w-temp { font-weight:900; font-size:2.8rem; line-height:1; color:var(--accent); transition:color .8s; }
.w-city { font-family:var(--serif); font-weight:700; font-size:1.55rem; line-height:1.05; }
.w-desc { color:var(--text2); font-size:.85rem; text-transform:capitalize; margin-top:.1rem; }
.w-stats { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.w-stat-label { font-size:.68rem; color:var(--text3); text-transform:uppercase; letter-spacing:.07em; }
.w-stat-val { font-weight:700; font-size:.95rem; margin-top:.1rem; }

/* ── Hava Sesi plağı: tek güçlü hareket ── */
.weather-record-stage {
    position:relative;
    width:132px;
    height:126px;
    flex:0 0 132px;
    filter:drop-shadow(0 20px 20px rgba(0,0,0,.25));
}
.weather-record {
    position:absolute;
    left:0; top:5px;
    display:grid;
    place-items:center;
    width:116px;
    aspect-ratio:1;
    overflow:hidden;
    border-radius:50%;
    background:
        repeating-radial-gradient(circle, transparent 0 4px, rgba(255,255,255,.045) 5px 6px),
        radial-gradient(circle, #213e45 0 15%, #0d2227 15.5% 66%, #17353d 100%);
    box-shadow:inset 0 0 0 1px rgba(237,245,241,.08);
    animation:weatherRecordSpin 18s linear infinite;
    will-change:transform;
}
.weather-record::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(from 60deg,transparent 0 13%,rgba(255,255,255,.1) 16%,transparent 20% 58%,rgba(255,255,255,.07) 62%,transparent 67%);
}
.weather-record-label {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:40%;
    aspect-ratio:1;
    border-radius:50%;
    color:var(--vinyl-ink);
    background:var(--record-label);
    font-family:var(--mono);
    font-size:.42rem;
    font-weight:500;
    letter-spacing:.12em;
    line-height:1;
    transition:background .8s ease;
}
.weather-record-label::after {
    content:'';
    width:5px; height:5px;
    margin-top:2px;
    border-radius:50%;
    background:var(--vinyl-ink);
}
.weather-record-label .w-temp {
    margin:.12rem 0;
    color:var(--vinyl-ink);
    font-family:var(--font);
    font-size:1.18rem;
    letter-spacing:-.06em;
}
.weather-tonearm {
    position:absolute;
    z-index:4;
    top:8px; right:7px;
    width:8px;
    height:76px;
    border-radius:999px;
    background:var(--vinyl-coral);
    box-shadow:inset -2px 0 rgba(16,40,47,.2);
    transform:rotate(-24deg);
    transform-origin:top center;
    transition:transform .45s var(--ease);
    cursor:grab;
    touch-action:none;
    user-select:none;
}
.weather-tonearm::before {
    content:'';
    position:absolute;
    top:-8px; left:-7px;
    width:22px; height:22px;
    border-radius:50%;
    background:var(--vinyl-ink);
    box-shadow:inset 0 0 0 6px var(--vinyl-coral);
}
.weather-tonearm span {
    position:absolute;
    bottom:-7px; left:-4px;
    width:17px; height:24px;
    border-radius:4px;
    background:var(--vinyl-mist);
    box-shadow:inset 0 0 0 3px var(--vinyl-ink);
}
body.music-playing .weather-record { animation-duration:5.5s; }
body.music-playing .weather-tonearm { transform:rotate(-13deg); }
.weather-tonearm.is-dragging {
    transform:rotate(var(--tonearm-drag-angle,-24deg));
    transition:none;
    cursor:grabbing;
}
.weather-tonearm:focus-visible {
    outline:3px solid var(--vinyl-coral);
    outline-offset:6px;
}
@keyframes weatherRecordSpin { to { transform:rotate(360deg); } }

/* ── Hava durumuna göre kıyafet önerisi ── */
.outfit-advice {
    margin-top:1.5rem;
    padding-top:1.5rem;
    border-top:1px solid var(--border);
}
.outfit-heading { display:flex; align-items:flex-start; gap:.9rem; }
.outfit-heading-icon {
    width:44px; height:44px; flex:0 0 44px;
    display:grid; place-items:center;
    border-radius:14px;
    background:var(--bg3);
    font-size:1.35rem;
}
.outfit-title { margin:0; color:var(--text); font-family:var(--serif); font-size:1.35rem; font-weight:700; }
.outfit-summary { margin:.25rem 0 0; color:var(--text2); font-size:.84rem; line-height:1.55; }
.outfit-profile {
    margin-top:1rem;
    padding:.75rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:color-mix(in srgb,var(--bg3) 72%,transparent);
}
.outfit-profile-label {
    display:block;
    margin-bottom:.55rem;
    color:var(--text3);
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.outfit-profile-controls { display:flex; flex-wrap:wrap; gap:.55rem; }
.outfit-segment { display:inline-flex; gap:.25rem; padding:.2rem; border:1px solid var(--border); border-radius:11px; background:var(--bg2); }
.outfit-profile-btn {
    min-height:32px;
    padding:.38rem .68rem;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text2);
    font:inherit;
    font-size:.73rem;
    font-weight:700;
    transition:background .2s,color .2s,box-shadow .2s;
}
.outfit-profile-btn:hover { color:var(--accent); }
.outfit-profile-btn.is-active { background:var(--accent); color:#fff; box-shadow:0 5px 14px var(--accent-glow); }
.outfit-columns {
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
    margin-top:1.15rem;
}
.outfit-label {
    margin-bottom:.5rem;
    color:var(--text3);
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.outfit-chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.outfit-chip {
    display:inline-flex; align-items:center; gap:.38rem;
    min-height:34px;
    padding:.4rem .65rem;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--bg3);
    color:var(--text2);
    font-size:.77rem;
    font-weight:600;
}
.outfit-shop {
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
    margin-top:1.25rem;
    padding-top:1rem;
    border-top:1px dashed var(--border);
}
.outfit-shop > .outfit-label { margin:0 0 .5rem; }
.outfit-shop-links { display:grid; gap:.5rem; }
.outfit-shop-item {
    display:grid;
    grid-template-columns:minmax(130px,1fr) auto;
    align-items:center;
    gap:.75rem;
    padding:.55rem .65rem;
    border:1px solid var(--border);
    border-radius:12px;
    background:color-mix(in srgb,var(--bg3) 72%,transparent);
}
.outfit-shop-item-name { color:var(--text2); font-size:.76rem; font-weight:700; }
.outfit-shop-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; }
.outfit-shop-link {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.48rem .72rem;
    border:1px solid var(--border2);
    border-radius:10px;
    color:var(--accent);
    font-size:.75rem;
    font-weight:700;
    text-decoration:none;
    transition:border-color .2s, background .2s, color .2s;
}
.outfit-shop-link:hover { border-color:var(--accent); background:var(--accent-glow); color:var(--text); }
@media(max-width:560px) {
    .outfit-shop-item { grid-template-columns:1fr; }
    .outfit-shop-actions { justify-content:flex-start; }
}
.outfit-disclaimer {
    grid-column:1;
    display:block;
    margin-top:.45rem;
    color:var(--text3);
    font-size:.65rem;
}

/* ── Section ── */
.music-source-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
    padding:.75rem .8rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:color-mix(in srgb,var(--bg3) 72%,transparent);
}
.music-source-bar > div:first-child { min-width:0; text-align:left; }
.music-source-kicker {
    display:block;
    color:var(--accent);
    font-family:var(--mono);
    font-size:.57rem;
    font-weight:700;
    letter-spacing:.12em;
}
.music-source-bar strong {
    display:block;
    margin-top:.2rem;
    color:var(--text2);
    font-size:.78rem;
    font-weight:600;
}
.spotify-source-mark {
    display:inline-flex;
    align-items:center;
    gap:.42rem;
    flex:0 0 auto;
    padding:.48rem .72rem;
    border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
    border-radius:999px;
    background:var(--accent-glow);
    color:#1ed760;
    font-size:.72rem;
    font-weight:700;
}
.spotify-source-mark i { font-size:1rem; }
.atmosphere-insight {
    margin-bottom:1rem;
    padding:1rem;
    border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));
    border-radius:18px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent-glow) 72%,transparent),color-mix(in srgb,var(--bg3) 88%,transparent));
}
.atmosphere-insight[hidden] { display:none!important; }
.atmosphere-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.atmosphere-kicker { display:block; color:var(--accent); font-family:var(--mono); font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.atmosphere-head h3 { margin:.35rem 0 0; color:var(--text); font-family:var(--serif); font-size:1.05rem; line-height:1.25; }
.atmosphere-basis { flex:0 0 auto; max-width:140px; color:var(--text3); font-size:.61rem; line-height:1.35; text-align:right; }
.atmosphere-scores { display:grid; gap:.5rem; margin-top:.9rem; }
.atmosphere-score { display:grid; grid-template-columns:minmax(105px,1fr) minmax(80px,1.25fr) 38px; align-items:center; gap:.55rem; }
.atmosphere-score-name { overflow:hidden; color:var(--text2); font-size:.7rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.atmosphere-score-bar { height:6px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--text3) 18%,transparent); }
.atmosphere-score-bar i { display:block; width:var(--score); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--vinyl-coral)); transform-origin:left; animation:score-in .65s var(--ease) both; }
.atmosphere-score-value { color:var(--accent); font-family:var(--mono); font-size:.65rem; font-weight:800; text-align:right; }
.atmosphere-queries { margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--border); }
.atmosphere-queries summary { color:var(--text3); font-family:var(--mono); font-size:.62rem; cursor:pointer; }
.atmosphere-queries div { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.atmosphere-query { padding:.3rem .48rem; border:1px solid var(--border); border-radius:9px; background:color-mix(in srgb,var(--bg) 64%,transparent); color:var(--text3); font-size:.6rem; line-height:1.35; }
@keyframes score-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.spotify-player-shell {
    margin-bottom:1rem;
    padding:.65rem;
    border:1px solid color-mix(in srgb,#1ed760 38%,var(--border));
    border-radius:16px;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
}
.spotify-player-shell[hidden] { display:none!important; }
.spotify-player-shell iframe { display:block; width:100%; border:0; border-radius:12px; }
.spotify-player-shell p {
    display:flex; align-items:center; gap:.4rem;
    margin:.5rem .2rem 0;
    color:var(--text3); font-size:.66rem;
}
.music-panel {
    max-height:min(760px, calc(100vh - 190px));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:1.35rem;
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    background:color-mix(in srgb, var(--bg2) 94%, transparent);
    box-shadow:0 20px 50px rgba(0,0,0,.22);
    animation:up .4s var(--ease);
}
@media(max-width:560px) {
    .music-source-bar { align-items:flex-start; flex-direction:column; }
    .atmosphere-head { flex-direction:column; }
    .atmosphere-basis { max-width:none; text-align:left; }
    .atmosphere-score { grid-template-columns:minmax(90px,1fr) minmax(65px,1fr) 34px; }
    .outfit-profile-controls { align-items:flex-start; flex-direction:column; }
}
.music-panel .track { background:var(--bg3); }
.music-panel .track:hover { background:color-mix(in srgb, var(--bg3) 84%, var(--accent) 16%); }
.sec-title { font-family:var(--serif); font-weight:700; font-size:1.5rem; display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.sec-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); transition:background .8s; display:inline-block; }

.g-badge {
    display:inline-block; background:hsla(0,0%,100%,.06); border:1px solid var(--border2);
    color:var(--accent); padding:.28rem .85rem; border-radius:100px;
    font-size:.75rem; font-weight:600; cursor:pointer; margin:.18rem;
    transition:all .2s;
}
.g-badge:hover,.g-badge.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }

.track {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:var(--r-md); padding:.85rem 1rem;
    display:flex; align-items:center; gap:.85rem;
    cursor:pointer; transition:all .2s var(--ease);
    animation:up .35s var(--ease) both; margin-bottom:.45rem;
}
.track:hover { background:var(--bg3); border-color:var(--border2); transform:translateX(4px); }
.track.on { background:hsla(0,0%,100%,.06); border-color:var(--accent); box-shadow:0 0 20px var(--accent-glow); }
.track-artwork { width:48px; height:48px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
.track-artwork-placeholder { width:48px; height:48px; border-radius:var(--r-sm); background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.track-info { flex:1; min-width:0; }
.track-title { font-family:var(--serif); font-weight:700; font-size:1.04rem; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-artist { font-size:.77rem; color:var(--text2); margin-top:.1rem; }
.track-genre-tag { font-size:.67rem; color:var(--text3); background:var(--bg3); padding:.1rem .45rem; border-radius:100px; display:inline-block; margin-top:.2rem; }
.track-dur {font-family:var(--mono);font-size:.73rem;color:var(--text3);white-space:nowrap;display: none;}
.btn-play-track { background:none; border:none; color:var(--text3); font-size:1.2rem; cursor:pointer; padding:.2rem .3rem; transition:all .2s; line-height:1; flex-shrink:0; }
.btn-play-track:hover { color:var(--accent); transform:scale(1.2); }
.track.on .btn-play-track { color:var(--accent); }
.btn-fav { background:none; border:none; color:var(--text3); font-size:1rem; cursor:pointer; padding:.2rem .3rem; transition:all .2s; line-height:1; flex-shrink:0; }
.btn-fav:hover,.btn-fav.on { color:var(--red); transform:scale(1.25); }

.player {
    position:fixed; bottom:0; left:0; right:0;
    background:hsla(0,0%,0%,.88); backdrop-filter:blur(24px);
    border-top:1px solid var(--border); z-index:999;
    transform:translateY(100%); transition:transform .35s var(--ease);
}
.player.show { transform:translateY(0); }
.player-progress { width:100%; height:3px; background:var(--border2); cursor:pointer; }
.player-progress-fill { height:100%; background:var(--vinyl-coral); width:0%; transition:width .5s linear; }
.player-body { padding:.65rem 0; }
.player-inner { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.player-artwork { width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
.player-artwork-placeholder { width:44px; height:44px; border-radius:var(--r-sm); background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.player-info { flex:1; min-width:0; }
.player-title { font-family:var(--serif); font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-artist { font-size:.73rem; color:var(--text2); }
.player-time { font-family:var(--mono); font-size:.72rem; color:var(--text3); white-space:nowrap; }
.now-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--vinyl-coral); animation:pulse 1.2s infinite; margin-right:.3rem; vertical-align:middle; }
.p-controls { display:flex; align-items:center; gap:.3rem; }
.p-btn { background:none; border:none; color:var(--text); font-size:1.05rem; cursor:pointer; padding:.35rem; border-radius:var(--r-sm); transition:all .2s; line-height:1; }
.p-btn:hover { color:var(--accent); background:var(--bg2); }
.p-btn-play { background:var(--vinyl-coral); color:#fff9f4; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:background .2s,color .2s; }
.p-btn-play:hover { background:var(--vinyl-sun); color:var(--vinyl-ink); transform:scale(1.1); }
.volume-wrap { display:flex; align-items:center; gap:.4rem; }
.volume-slider { width:70px; height:4px; -webkit-appearance:none; appearance:none; background:var(--border2); border-radius:2px; outline:none; cursor:pointer; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--accent); cursor:pointer; }

/* ── Auth ── */
.btn-login { background:none; border:1px solid var(--border2); color:var(--text2); border-radius:var(--r-sm); padding:.4rem 1rem; font-family:var(--font); font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s; }
.btn-login:hover { border-color:var(--accent); color:var(--accent); }
.btn-register { background:var(--salmon); border:none; color:#fff; border-radius:var(--r-sm); padding:.4rem 1rem; font-family:var(--font); font-size:.85rem; font-weight:700; cursor:pointer; transition:background .25s,transform .2s; box-shadow:0 7px 18px var(--salmon-glow); }
.btn-register:hover { background:var(--salmon-dark); transform:translateY(-1px); }

/* ── Modal ── */
.modal-content { background:var(--bg2)!important; border:1px solid var(--border2)!important; border-radius:var(--r-lg)!important; color:var(--text)!important; }
.modal-header { border-bottom-color:var(--border)!important; }
.modal-title { font-weight:800; font-size:1.1rem; }
.form-control,.form-select { background:var(--bg)!important; border-color:var(--border2)!important; color:var(--text)!important; border-radius:var(--r-sm)!important; font-family:var(--font)!important; }
.form-control:focus { border-color:var(--accent)!important; box-shadow:0 0 0 3px var(--accent-glow)!important; }
.form-label { color:var(--text2); font-size:.85rem; font-weight:600; margin-bottom:.35rem; }
.btn-submit { background:var(--accent-dim); border:none; color:#fff; border-radius:var(--r-sm); padding:.65rem; font-family:var(--font); font-weight:700; font-size:.95rem; width:100%; cursor:pointer; transition:all .2s; }
.btn-submit:hover { opacity:.9; transform:translateY(-1px); }

/* ── Toast ── */
.toast-container { z-index:1100; }
.toast { background:var(--bg3)!important; border:1px solid var(--border2)!important; color:var(--text)!important; border-radius:var(--r-md)!important; min-width:240px; }
.toast-header { background:transparent!important; border-bottom-color:var(--border)!important; color:var(--text)!important; }

/* ── Loader ── */
.loader { display:none; text-align:center; padding:2.5rem; color:var(--text2); }
.loader.show { display:block; }
.spin { display:inline-block; width:42px; height:42px; border:3px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:.75rem; }

/* ── Animasyonlar ── */
@keyframes spin  { to { transform:rotate(360deg); } }
@keyframes up    { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ── Responsive ── */
@media(max-width:1100px) {
    .hero-editorial { grid-template-columns:1fr; gap:1rem; min-height:0; text-align:center; }
    .hero-copy { max-width:720px; margin:0 auto; }
    .editorial-title em { margin-left:0; }
    .hero-sub { margin-left:auto; margin-right:auto; }
    .hero-art { min-height:440px; max-width:620px; width:100%; margin:0 auto; }
    .hero-art::before { width:430px; }
    .hero-orbit { width:330px; }
    .hero-vinyl { width:285px; }
    .weather-music-layout { grid-template-columns:1fr; }
    .music-panel { max-height:none; overflow:visible; }
}
@media(max-width:768px) {
    .hero { padding:2.75rem 0 2rem; }
    .editorial-title { font-size:clamp(3.7rem,18vw,5.2rem); }
    .hero-art { min-height:370px; }
    .hero-art::before { width:340px; }
    .hero-orbit { width:270px; }
    .hero-vinyl { width:235px; }
    .hero-sun { width:100px; left:10%; top:15%; }
    .hero-cloud { width:115px; height:46px; }
    .hero-cloud::before { width:52px; height:52px; }
    .hero-cloud::after { width:65px; height:65px; }
    .hero-tonearm { right:8%; top:15%; height:178px; width:10px; }
    .hero-tonearm::before { left:-9px; top:-9px; width:29px; height:29px; box-shadow:inset 0 0 0 8px #f06c54; }
    .hero-tonearm span { left:-6px; width:22px; height:34px; }
    .search-card { border-radius:24px; }
    .w-icon { width:60px; height:60px; font-size:2.1rem; }
    .w-row { gap:.8rem; }
    .w-city { font-size:1rem; }
    .weather-record-stage { width:98px; height:94px; flex-basis:98px; }
    .weather-record { width:88px; top:3px; }
    .weather-record-label .w-temp { font-size:.92rem; }
    .weather-tonearm { top:5px; right:4px; width:6px; height:57px; }
    .weather-tonearm::before { top:-6px; left:-5px; width:16px; height:16px; box-shadow:inset 0 0 0 4px var(--vinyl-coral); }
    .weather-tonearm span { bottom:-6px; left:-3px; width:13px; height:18px; border-radius:3px; box-shadow:inset 0 0 0 2px var(--vinyl-ink); }
    .music-panel { padding:1rem; }
    .player-inner { flex-wrap:nowrap; }
    .clock-wrap { flex-direction:column; gap:.1rem; padding:.35rem .75rem; }
    .volume-wrap { display:none; }
}
@media(max-width:480px) {
    .track-genre-tag,.track-dur { display:none; }
    .hero-art { min-height:320px; }
    .hero-art::before { width:290px; }
    .hero-orbit { width:225px; }
    .hero-vinyl { width:198px; }
    .hero-sun { width:82px; }
    .hero-cloud-two { right:1%; }
    .hero-tonearm { right:15%; height:150px; }
    .search-card { padding:1.5rem 1rem 1.2rem; }
    .search-row { min-height:0; padding:.35rem; border-radius:22px; flex-wrap:wrap; }
    .search-leading-icon { margin-left:.7rem; }
    .search-input { min-height:50px; }
    .btn-ara { width:100%; min-height:50px; }
    .player-time { display:none; }
    .player-inner { gap:.45rem; }
}

@media(max-width:768px) {
    html,body { width:100%; max-width:100%; overflow-x:hidden; }
    #weather-canvas { width:100%!important; max-width:100vw; }
    .container,.weather-music-layout,.weather-card,.music-panel,.search-card { min-width:0; max-width:100%; }
    .weather-music-layout { width:100%; margin-inline:0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

.mb-player { margin-bottom:90px; }
.z1 { position:relative; z-index:1; }

/* ── Çerez Banner ─────────────────────────────────────────────────────────── */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
    background: var(--bg2); border-top: 1px solid var(--border);
    padding: .9rem 0; animation: up .4s var(--ease);
    box-shadow: 0 -8px 30px rgba(0,0,0,.3);
}
.cookie-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.cookie-icon { font-size: 1.5rem; flex-shrink: 0; }
.cookie-text { flex: 1; font-size: .88rem; color: var(--text2); margin: 0; }
.cookie-btns { display: flex; gap: .5rem; flex-shrink: 0; }
.btn-cookie-accept {
    background: var(--accent); border: none; color: #fff;
    padding: .4rem 1.2rem; border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 700; cursor: pointer; transition: all .2s;
}
.btn-cookie-accept:hover { background: var(--accent2); }
.btn-cookie-reject {
    background: none; border: 1px solid var(--border2); color: var(--text2);
    padding: .4rem 1rem; border-radius: var(--r-sm);
    font-family: var(--font); font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-cookie-reject:hover { border-color: var(--accent); color: var(--accent); }

/* ── Onboarding ──────────────────────────────────────────────────────────── */
.onboarding-overlay {
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn .4s ease;
}
.onboarding-card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--r-xl); padding: 2.5rem 2rem;
    max-width: 420px; width: 90%; text-align: center;
    position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.ob-skip {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; color: var(--text3);
    font-size: .8rem; cursor: pointer; font-family: var(--font);
}
.ob-skip:hover { color: var(--text2); }
.ob-steps { min-height: 160px; }
.ob-step { display: none; animation: up .3s ease; }
.ob-step.active { display: block; }
.ob-emoji { font-size: 3.5rem; margin-bottom: 1rem; }
.ob-step h2 { font-weight: 800; font-size: 1.4rem; margin-bottom: .6rem; }
.ob-step p { color: var(--text2); font-size: .95rem; line-height: 1.6; }
.ob-dots { display: flex; justify-content: center; gap: .5rem; margin: 1.5rem 0 1rem; }
.ob-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border2); cursor: pointer; transition: all .2s;
}
.ob-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }
.ob-btn {
    background: var(--accent-dim);
    border: none; color: #fff; padding: .7rem 2.5rem;
    border-radius: 100px; font-family: var(--font);
    font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: all .2s; box-shadow: 0 4px 20px var(--accent-glow);
}
.ob-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-glow); }

/* ── Dil Seçici ──────────────────────────────────────────────────────────── */
.lang-switcher { display: flex; gap: .2rem; align-items: center; }
.lang-btn {
    min-width:28px;
    font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.05em;
    text-align:center; text-decoration:none; padding:.22rem .3rem;
    border-radius: 4px; transition: transform .2s; opacity: .6;
    line-height: 1;
}
.lang-btn:hover { transform: scale(1.2); opacity: 1; }
.lang-btn.active { opacity: 1; transform: scale(1.15); }

/* ── Tema Toggle ─────────────────────────────────────────────────────────── */
.theme-toggle {
    background: var(--bg2); border: 1px solid var(--border);
    color: var(--text2); width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s; font-size: 1rem;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Harita Butonu ───────────────────────────────────────────────────────── */
.btn-map-pick {
    display:inline-flex; align-items:center; gap:.45rem;
    margin-top:1.05rem; padding:.35rem .15rem;
    background:transparent; border:0; border-bottom:1px solid var(--border2);
    color:var(--text2); border-radius:0;
    font-family:var(--font); font-size:.78rem;
    cursor:pointer; transition:all .2s;
}
.btn-map-pick:hover { border-color:#f06c54; color:#f06c54; }
.search-secondary-actions { display:flex; justify-content:center; align-items:center; gap:1.25rem; }
.location-status { min-height:1rem; margin:.35rem 0 0; color:var(--text3); font-size:.72rem; }

/* ── Otomatik konumdan açılan somon hava ekranı ─────────────────────────── */
.location-dashboard-wrap {
    position:relative;
    z-index:1;
    padding:2rem 0 1.25rem;
}
.location-dashboard-wrap { display:none!important; }
.location-dashboard {
    position:relative;
    min-height:620px;
    overflow:hidden;
    padding:clamp(2rem,4vw,4.4rem);
    border:1px solid rgba(255,247,239,.28);
    border-radius:38px;
    color:#fff8f1;
    background:
        radial-gradient(circle at 83% 10%,rgba(255,190,100,.42),transparent 24%),
        linear-gradient(135deg,#e87863 0%,#df6e5c 48%,#c95b4d 100%);
    box-shadow:0 34px 80px rgba(129,56,43,.24);
    isolation:isolate;
}
.location-dashboard::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.28;
    background-image:radial-gradient(circle,rgba(255,248,240,.8) 0 1px,transparent 1.5px);
    background-size:46px 46px;
    mask-image:linear-gradient(to bottom,black,transparent 72%);
}
.location-dashboard-head {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:2rem;
}
.location-kicker,.location-section-label {
    margin:0 0 .8rem;
    font-family:var(--mono);
    font-size:.64rem;
    font-weight:500;
    letter-spacing:.16em;
    color:rgba(255,248,241,.8);
}
.location-headline {
    max-width:760px;
    margin:0;
    font-family:var(--serif);
    font-size:clamp(3.4rem,6.8vw,7rem);
    font-weight:600;
    line-height:.82;
    letter-spacing:-.055em;
    color:#fff8f1;
}
.location-temperature {
    display:grid;
    grid-template-columns:auto auto;
    align-items:start;
    min-width:160px;
    padding-top:.5rem;
    text-align:right;
}
.location-temperature strong { font-family:var(--serif); font-size:clamp(4rem,7vw,7rem); font-weight:500; line-height:.75; }
.location-temperature sup { margin:.4rem 0 0 .25rem; font-family:var(--mono); font-size:.72rem; }
.location-temperature span { grid-column:1/-1; margin-top:.85rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.location-metrics {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:3.4rem;
    border-top:1px solid rgba(255,248,241,.28);
    border-bottom:1px solid rgba(255,248,241,.28);
}
.location-metrics > div { min-height:104px; padding:1.15rem 1.35rem; border-right:1px solid rgba(255,248,241,.24); }
.location-metrics > div:last-child { border-right:0; }
.location-metrics span { display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; color:rgba(255,248,241,.76); }
.location-metrics strong { display:block; margin-top:.9rem; font-family:var(--serif); font-size:2rem; font-weight:600; }
.location-feature-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);
    gap:clamp(2rem,5vw,5rem);
    margin-top:2.6rem;
}
.location-energy-pills { display:flex; flex-wrap:wrap; gap:.55rem; }
.location-energy-pills span,.location-change-btn {
    display:inline-flex;
    min-height:36px;
    align-items:center;
    padding:.4rem .85rem;
    border:1px solid rgba(255,248,241,.34);
    border-radius:999px;
    color:#fff8f1;
    background:transparent;
    font-size:.72rem;
}
.location-energy-pills .is-selected { border-color:#ffbe64; background:#ffbe64; color:#713a2f; }
.location-energy p { max-width:430px; margin:1.5rem 0 1.3rem; color:rgba(255,248,241,.82); line-height:1.6; font-size:.86rem; }
.location-change-btn { cursor:pointer; transition:background .2s,color .2s; }
.location-change-btn:hover { background:#fff8f1; color:#b94f42; }
.location-selection-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.65rem; border-bottom:1px solid rgba(255,248,241,.3); }
.location-selection-head .location-section-label { margin:0; }
.location-selection-head span:last-child { font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; }
.location-track-row {
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;
    gap:.75rem;
    min-height:66px;
    border-bottom:1px solid rgba(255,248,241,.23);
    cursor:pointer;
    transition:padding .2s,background .2s;
}
.location-track-row:hover { padding-inline:.6rem; background:rgba(255,248,241,.08); }
.location-track-index { font-family:var(--mono); font-size:.62rem; color:rgba(255,248,241,.65); }
.location-track-copy { min-width:0; }
.location-track-copy strong { display:block; overflow:hidden; color:#fff8f1; font-family:var(--serif); font-size:1.1rem; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.location-track-copy span { display:block; overflow:hidden; margin-top:.22rem; color:rgba(255,248,241,.72); font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }
.location-track-play { border:0; color:#fff8f1; background:transparent; font-size:1rem; }
.location-track-list > p { padding:1.4rem 0; color:rgba(255,248,241,.7); font-size:.82rem; }
.location-sun-scene { position:absolute; z-index:0; right:6%; top:4%; width:240px; height:240px; opacity:.72; }
.location-sun-core {
    position:absolute;
    left:50%; top:50%;
    width:92px; height:92px;
    border-radius:50%;
    background:#ffd878;
    box-shadow:0 0 0 20px rgba(255,216,120,.14),0 0 60px rgba(255,216,120,.46);
    transform:translate(-50%,-50%);
    animation:locationSunBreathe 3.6s ease-in-out infinite;
}
.location-sun-orbit { position:absolute; inset:20px; border:1px solid rgba(255,248,241,.3); border-radius:50%; animation:locationSunSpin 13s linear infinite; }
.location-sun-orbit::after { content:''; position:absolute; left:50%; top:-5px; width:9px; height:9px; border-radius:50%; background:#fff8f1; }
.location-sun-orbit-two { inset:0; animation-duration:19s; animation-direction:reverse; opacity:.58; }
@keyframes locationSunBreathe { 50% { transform:translate(-50%,-50%) scale(1.1); box-shadow:0 0 0 30px rgba(255,216,120,.12),0 0 82px rgba(255,216,120,.58); } }
@keyframes locationSunSpin { to { transform:rotate(360deg); } }

@media(max-width:900px) {
    .location-dashboard { min-height:0; border-radius:28px; }
    .location-dashboard-head { grid-template-columns:1fr; }
    .location-temperature { justify-self:start; text-align:left; }
    .location-feature-grid { grid-template-columns:1fr; }
    .location-sun-scene { right:-40px; top:20px; transform:scale(.72); opacity:.45; }
}
@media(max-width:640px) {
    .search-secondary-actions { gap:.65rem; flex-wrap:wrap; }
    .location-dashboard-wrap { padding:.75rem 0; }
    .location-dashboard { padding:1.5rem; border-radius:22px; }
    .location-headline { font-size:clamp(3rem,16vw,4.5rem); }
    .location-metrics { grid-template-columns:repeat(2,1fr); margin-top:2rem; }
    .location-metrics > div:nth-child(2) { border-right:0; }
    .location-metrics > div:nth-child(-n+2) { border-bottom:1px solid rgba(255,248,241,.24); }
    .location-feature-grid { margin-top:2rem; gap:2rem; }
}


.quick-cities {display: none;flex-wrap: wrap;gap: .4rem;justify-content: center;}
.quick-city-btn {
    background: var(--bg2); border: 1px solid var(--border);
    color: var(--text2); padding: .3rem .8rem; border-radius: 100px;
    font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .2s;
    display: flex; align-items: center; gap: .3rem;
}
.quick-city-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg3); }
.quick-city-remove {
    background: none; border: none; color: var(--text3);
    font-size: .7rem; cursor: pointer; padding: 0; line-height: 1;
    margin-left: .2rem;
}
.quick-city-remove:hover { color: var(--red); }


.leaflet-container { background: var(--bg3) !important; }
.leaflet-popup-content-wrapper {
    background: var(--bg2) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
}
.leaflet-popup-tip { background: var(--bg2) !important; }


.splash-step { display: none; animation: up .35s ease; }
.splash-step.active { display: block; }
.splash-step-icon { font-size: 3.5rem; margin-bottom: .75rem; display: block; }
.splash-step-title {
    font-weight: 800; font-size: 1.6rem;
    margin-bottom: .6rem;
    color: var(--accent);
}
.splash-preview {
    display: flex; flex-direction: column; gap: .5rem;
    margin: 1.25rem auto; max-width: 300px; text-align: left;
}
.splash-preview-item {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: .6rem 1rem;
    font-size: .88rem; color: var(--text2);
    transition: all .2s;
}
.splash-preview-item:hover { border-color: var(--accent); color: var(--text); }


.splash-overlay {
    position: fixed; inset: 0; z-index: 1400;
    overflow:hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,180,95,.3), transparent 22%),
        radial-gradient(circle at 84% 76%, rgba(216,116,98,.2), transparent 24%),
        #edf5f1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
    color:#17353d;
}
.splash-overlay::before,
.splash-overlay::after {
    content:'';
    position:absolute;
    width:34vw; aspect-ratio:1;
    border:1px solid rgba(57,127,115,.12);
    border-radius:50%;
    pointer-events:none;
}
.splash-overlay::before { left:-16vw; bottom:-18vw; box-shadow:0 0 0 38px rgba(57,127,115,.035),0 0 0 76px rgba(57,127,115,.025); }
.splash-overlay::after { right:-18vw; top:-20vw; box-shadow:0 0 0 42px rgba(216,116,98,.035),0 0 0 84px rgba(216,116,98,.02); }
.splash-overlay > * { position:relative; z-index:2; }
.splash-overlay[data-step="2"] { background-color:#eef5f2; }
.splash-overlay[data-step="3"] { background-color:#f2f6f2; }
.splash-overlay.hiding {
    animation: splashFadeOut .5s ease forwards;
}
@keyframes splashFadeOut { to { opacity:0; pointer-events:none; } }

.splash-slide { display:none; flex-direction:column; align-items:center; }
.splash-slide.on { display: flex; }
.splash-overlay > .splash-slide.on {
    position:fixed;
    inset:54px 1.25rem 58px;
    width:auto;
    height:auto;
    max-height:none;
    overflow-y:auto;
    padding:.4rem 0;
    justify-content:center;
    scrollbar-width:none;
    transform:none;
}
.splash-overlay > .splash-slide.on::-webkit-scrollbar { display:none; }
.splash-slide.on > * { animation:splashUp .65s cubic-bezier(.22,1,.36,1) both; }
.splash-slide.on > *:nth-child(2) { animation-delay:.08s; }
.splash-slide.on > *:nth-child(3) { animation-delay:.14s; }
.splash-slide.on > *:nth-child(4) { animation-delay:.2s; }
@keyframes splashUp { from{opacity:0;transform:translateY(28px) scale(.98)} to{opacity:1;transform:none} }

.splash-big-icon {
    display:grid;
    width:clamp(120px,16vw,170px); aspect-ratio:1;
    place-items:center;
    margin-bottom:1.35rem;
    border:1px solid rgba(57,127,115,.16);
    border-radius:42% 58% 58% 42% / 45% 45% 55% 55%;
    background:rgba(255,255,255,.58);
    box-shadow:0 24px 55px rgba(23,53,61,.12);
    font-size:clamp(4.5rem,10vw,7rem);
    animation: splashFloat 3s ease-in-out infinite;
}
@keyframes splashFloat { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-11px) rotate(1deg)} }

/* Onboarding 2–3: ürün akışını anlatan canlı önizleme sahneleri */
.splash-slide[data-s="2"],.splash-slide[data-s="3"] { width:min(760px,100%); }
.splash-feature-scene {
    position:relative;
    width:min(640px,92vw);
    height:270px;
    margin:0 auto 1.15rem;
    overflow:hidden;
    border:1px solid rgba(57,127,115,.22);
    border-radius:32px;
    background:rgba(249,252,249,.84);
    box-shadow:0 28px 70px rgba(23,53,61,.11);
    isolation:isolate;
}
.splash-feature-scene::before {
    content:'';position:absolute;inset:0;z-index:-1;opacity:.42;
    background:radial-gradient(circle at 18% 18%,rgba(216,116,98,.1),transparent 26%),radial-gradient(circle at 86% 78%,rgba(57,127,115,.12),transparent 25%);
}
.splash-scene-kicker {
    position:absolute;left:24px;top:19px;
    color:#397f73;font-family:var(--mono);font-size:.61rem;font-weight:700;letter-spacing:.16em;
}
.splash-scene-chip,.splash-city-chip {
    position:absolute;display:inline-flex;align-items:center;gap:.35rem;
    min-height:30px;padding:.34rem .7rem;border:1px solid rgba(57,127,115,.22);border-radius:999px;
    background:rgba(255,255,255,.84);color:#285f57;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.06em;
    box-shadow:0 10px 24px rgba(23,53,61,.07);
}
.splash-scene-chip-temp { right:22px;top:14px; }
.splash-scene-chip-preview { left:24px;bottom:15px; }
.splash-demo-player {
    position:absolute;left:24px;top:61px;
    display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:.85rem;
    width:47%;height:128px;padding:.9rem;
    border:1px solid rgba(57,127,115,.18);border-radius:20px;background:rgba(238,247,243,.88);
}
.splash-demo-record {
    position:relative;display:grid;place-items:center;width:74px;aspect-ratio:1;border-radius:50%;
    color:#fff3ec;background:repeating-radial-gradient(circle,transparent 0 5px,rgba(255,255,255,.09) 6px 7px),#17353d;
    box-shadow:0 14px 26px rgba(23,53,61,.2);animation:splashDemoSpin 8s linear infinite;
}
.splash-demo-record::before { content:'';position:absolute;width:29px;height:29px;border-radius:50%;background:#e36c57; }
.splash-demo-record span { position:relative;z-index:1;font-family:var(--serif);font-size:.7rem;font-weight:700; }
.splash-demo-now { min-width:0;text-align:left; }
.splash-demo-now small { display:block;color:#397f73;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em; }
.splash-demo-now strong { display:block;overflow:hidden;margin:.38rem 0 .2rem;color:#17353d;font-family:var(--serif);font-size:1rem;text-overflow:ellipsis;white-space:nowrap; }
.splash-demo-now span { color:#57716f;font-size:.62rem; }
.splash-demo-bars { position:absolute;right:14px;bottom:12px;display:flex;align-items:flex-end;gap:3px;height:20px; }
.splash-demo-bars i { width:3px;height:6px;border-radius:8px;background:#e36c57;animation:splashDemoBar .8s ease-in-out infinite alternate; }
.splash-demo-bars i:nth-child(2),.splash-demo-bars i:nth-child(4){height:15px;animation-delay:-.35s}.splash-demo-bars i:nth-child(3){height:20px;animation-delay:-.6s}
.splash-demo-tracks { position:absolute;right:22px;top:61px;width:44%; }
.splash-demo-tracks div { display:grid;grid-template-columns:28px minmax(0,1fr) 22px;align-items:center;min-height:43px;border-bottom:1px solid rgba(57,127,115,.16);text-align:left; }
.splash-demo-tracks span { color:#6c8b86;font-family:var(--mono);font-size:.54rem; }
.splash-demo-tracks strong { overflow:hidden;color:#17353d;font-family:var(--serif);font-size:.82rem;text-overflow:ellipsis;white-space:nowrap; }
.splash-demo-tracks i { color:#e36c57; }
@keyframes splashDemoSpin { to{transform:rotate(360deg)} }
@keyframes splashDemoBar { to{height:20px} }

.splash-location-scene { background:rgba(247,251,248,.88); }
.splash-demo-globe {
    position:absolute;left:50%;top:45%;z-index:3;display:grid;place-items:center;
    width:126px;aspect-ratio:1;border-radius:50%;color:#f7faf6;background:#397f73;
    box-shadow:0 22px 50px rgba(23,53,61,.2),inset -16px -14px 0 rgba(23,53,61,.12);
    transform:translate(-50%,-50%);font-size:4.6rem;animation:splashGlobeFloat 3.2s ease-in-out infinite;
}
.splash-demo-pin { position:absolute;right:8px;top:-8px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#d25f4e;background:#fffaf7;box-shadow:0 10px 24px rgba(166,79,65,.16);font-size:1.15rem; }
.splash-globe-orbit { position:absolute;left:50%;top:45%;border:1px solid rgba(216,95,77,.24);border-radius:50%;transform:translate(-50%,-50%);animation:splashOrbitSpin 13s linear infinite; }
.splash-globe-orbit::after { content:'';position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:#e36c57; }
.splash-globe-orbit-one { width:190px;height:190px; }
.splash-globe-orbit-two { width:255px;height:205px;animation-direction:reverse;animation-duration:18s; }
.splash-city-chip b { color:#17353d; }
.splash-city-istanbul { left:46px;top:74px;animation:splashCityFloat 3s ease-in-out infinite; }
.splash-city-tokyo { right:42px;top:90px;animation:splashCityFloat 3.5s ease-in-out -.9s infinite; }
.splash-city-paris { right:74px;bottom:55px;animation:splashCityFloat 3.2s ease-in-out -1.6s infinite; }
.splash-demo-search {
    position:absolute;left:50%;bottom:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;
    width:min(390px,72%);min-height:42px;padding:.4rem .45rem .4rem .8rem;border:1px solid rgba(216,95,77,.25);border-radius:999px;
    color:#b76556;background:rgba(255,255,255,.9);font-size:.68rem;text-align:left;transform:translateX(-50%);box-shadow:0 12px 28px rgba(166,79,65,.1);
}
.splash-demo-search > i { color:#e36c57;font-size:1rem; }.splash-demo-search b { display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;background:#e36c57; }
@keyframes splashGlobeFloat { 50%{transform:translate(-50%,calc(-50% - 9px)) rotate(3deg)} }
@keyframes splashOrbitSpin { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes splashCityFloat { 50%{transform:translateY(-8px)} }

/* Açılışın imza hareketi: hava ikonlarının çevrelediği plak */
.splash-vinyl-scene {
    position:relative;
    width:min(360px,84vw); height:245px;
    margin:0 auto 1rem;
    isolation:isolate;
}
.splash-record {
    position:absolute;
    left:50%; top:50%;
    z-index:3;
    display:grid; place-items:center;
    width:178px; aspect-ratio:1;
    overflow:hidden;
    border-radius:50%;
    background:
        repeating-radial-gradient(circle,transparent 0 6px,rgba(247,250,246,.1) 7px 8px),
        radial-gradient(circle,#28515a 0 17%,#10282f 17.5% 68%,#17353d 100%);
    box-shadow:0 30px 55px rgba(23,53,61,.22),inset 0 0 0 1px rgba(247,250,246,.14);
    transform:translate(-50%,-50%);
    animation:splashRecordSpin 11s linear infinite;
}
.splash-record::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from 54deg,transparent 0 14%,rgba(255,255,255,.14) 17%,transparent 22% 57%,rgba(255,255,255,.09) 62%,transparent 68%);
}
.splash-record-label {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:42%; aspect-ratio:1; border-radius:50%;
    background:#ffb45f; color:#17353d;
    font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; line-height:1.05;
    box-shadow:inset 0 0 0 1px rgba(23,53,61,.1);
}
.splash-record-label strong { font-family:var(--font); font-size:1.05rem; letter-spacing:-.04em; }
.splash-record-label i { width:7px; height:7px; margin-top:3px; border-radius:50%; background:#17353d; }
.splash-tonearm {
    position:absolute; z-index:5;
    left:calc(50% + 70px); top:32px;
    width:10px; height:120px;
    border-radius:99px;
    background:#d87462;
    box-shadow:inset -2px 0 rgba(23,53,61,.16);
    transform:rotate(-21deg); transform-origin:top center;
    animation:splashTonearm 4s ease-in-out infinite;
}
.splash-tonearm::before {
    content:''; position:absolute; left:-9px; top:-9px;
    width:28px; height:28px; border-radius:50%;
    background:#17353d; box-shadow:inset 0 0 0 7px #d87462;
}
.splash-tonearm span {
    position:absolute; left:-5px; bottom:-10px;
    width:21px; height:29px; border-radius:5px;
    background:#f7faf6; box-shadow:inset 0 0 0 4px #17353d;
}
.splash-orbit-prop {
    position:absolute; z-index:6;
    display:grid; place-items:center;
    width:44px; height:44px;
    border:1px solid rgba(57,127,115,.18);
    border-radius:15px;
    background:rgba(247,250,246,.84);
    box-shadow:0 12px 25px rgba(23,53,61,.1);
    font-size:1.5rem;
    animation:splashOrbitFloat 3.2s ease-in-out infinite;
}
.splash-orbit-sun { left:23px; top:40px; animation-delay:-.4s; }
.splash-orbit-cloud { right:15px; top:70px; animation-delay:-1.6s; }
.splash-orbit-umbrella { left:45px; bottom:18px; animation-delay:-2.2s; }
.splash-orbit-note { right:48px; bottom:10px; color:#397f73; font-size:2rem; font-weight:800; animation-delay:-.9s; }
.splash-sound-bars {
    position:absolute; left:50%; bottom:7px; z-index:4;
    display:flex; align-items:flex-end; gap:5px;
    height:29px; transform:translateX(-50%);
}
.splash-sound-bars i { width:5px; height:8px; border-radius:9px; background:#397f73; animation:splashBar 1s ease-in-out infinite alternate; }
.splash-sound-bars i:nth-child(2),.splash-sound-bars i:nth-child(4) { height:19px; animation-delay:-.35s; }
.splash-sound-bars i:nth-child(3) { height:28px; animation-delay:-.65s; background:#d87462; }
@keyframes splashRecordSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes splashTonearm { 0%,100%{transform:rotate(-23deg)} 50%{transform:rotate(-15deg)} }
@keyframes splashOrbitFloat { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-9px) rotate(3deg)} }
@keyframes splashBar { to { height:28px; } }

.splash-main-title {
    font-family: var(--font);
    font-weight: 900;
    font-size: clamp(2.5rem, 7vw, 4.2rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: 1.25rem;
    color:#d25f4e;
}
.splash-main-desc {
    color:#526a68;
    font-size: clamp(.95rem, 2.5vw, 1.15rem);
    max-width: 500px;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}
.splash-slide[data-s="1"] .splash-main-desc { color:#18282c; }
.splash-main-btn {
    background:#df6b57;
    border: none; color: #fff;
    padding: 1rem 3rem;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    box-shadow:0 14px 34px rgba(201,86,68,.24);
    display: inline-flex; align-items: center; gap: .5rem;
}
.splash-main-btn:hover {
    transform: scale(1.06);
    background:#bf5140;
    box-shadow:0 18px 42px rgba(201,86,68,.3);
}
.splash-main-btn-green {
    background:#d87462;
    box-shadow:0 14px 34px rgba(216,116,98,.24);
}
.splash-main-btn-green:hover { background:#bd5d4d; box-shadow:0 18px 42px rgba(216,116,98,.28); }

.splash-dots-row {
    position:fixed;left:50%;bottom:1.5rem;
    display:flex;gap:.6rem;margin:0;
    transform:translateX(-50%);
}
.splash-dot-item {
    width: 8px; height: 8px; border-radius: 50%;
    background:#bdd1ca; cursor:pointer; transition:all .3s;
}
.splash-dot-item.on {
    background:#df6b57;
    width: 28px; border-radius: 4px;
}

.splash-skip-btn {
    position: fixed; top: 1.5rem; right: 2rem;
    background: none;
    border:1px solid rgba(216,95,77,.4);
    color:#c65a49;
    padding: .4rem 1rem;
    border-radius: 100px;
    font-family: var(--font);
    font-size: .82rem;
    cursor: pointer;
    transition: all .2s;
    z-index: 10;
}
.splash-skip-btn:hover { border-color:#df6b57; color:#ad4637; background:rgba(255,244,239,.86); }

/* Bootstrap yüzeylerinin karanlık temada beyaza dönmesini engelle. */
body[data-theme="dark"] :is(.card,.search-card,.weather-card,.track,.clock-wrap,.modal-content,.section-card,.stat-card,.profile-hero) {
    background-color:var(--bg2)!important;
    color:var(--text);
}
body[data-theme="dark"] :is(.form-control,.form-select,.search-input) {
    background-color:var(--bg)!important;
    color:var(--text)!important;
}

/* Sonuç görünümünde hava efekti kartların arkasından da okunabilsin. */
body[data-weather] #weather-canvas {
    opacity:1!important;
    filter:saturate(1.22) contrast(1.04) brightness(1.06);
}
body[data-weather] .weather-music-layout {
    max-width:1320px;
    margin-inline:auto;
    gap:1.5rem;
}
@media(min-width:1101px) {
    body[data-weather] :is(.weather-card,.music-panel) {
        height:min(760px,calc(100vh - 170px));
        min-height:620px;
        overflow-y:auto;
        overflow-x:hidden;
        scrollbar-gutter:auto;
        scrollbar-width:thin;
    }
    body[data-weather] .weather-card {
        overflow-y:hidden;
        overscroll-behavior:none;
        scrollbar-gutter:auto;
        padding:1.2rem;
    }
    body[data-weather] .weather-card .w-stats { margin-top:.8rem; padding-top:.8rem; }
    body[data-weather] .weather-card .outfit-advice { margin-top:.9rem; padding-top:.9rem; }
    body[data-weather] .weather-card .outfit-columns {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:.75rem;
        margin-top:.75rem;
    }
    body[data-weather] .weather-card .outfit-shop { margin-top:.8rem; padding-top:.7rem; }
    body[data-weather] .weather-card .outfit-shop-links {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:.4rem;
    }
    body[data-weather] .weather-card .outfit-shop-item {
        grid-template-columns:1fr;
        gap:.35rem;
        padding:.42rem .55rem;
    }
    body[data-weather] .weather-card .outfit-shop-actions { justify-content:flex-start; }
    body[data-weather] .weather-card .outfit-shop-link { padding:.34rem .55rem; }
}
body[data-weather] :is(.weather-card,.music-panel) {
    background:color-mix(in srgb,var(--bg2) 80%,transparent)!important;
    border-color:color-mix(in srgb,var(--border2) 78%,transparent);
    backdrop-filter:blur(8px) saturate(1.12);
}
body[data-weather] .track {
    background:color-mix(in srgb,var(--bg3) 76%,transparent)!important;
}
body[data-weather] .weather-card.live {
    box-shadow:0 22px 55px rgba(16,40,47,.24),0 0 0 1px color-mix(in srgb,var(--accent) 52%,transparent);
}

@media(max-width:1100px) {
    .weather-atmosphere-stage { min-height:145px; }
    .weather-atmosphere-stage::before { width:210px; height:210px; }
    .weather-atmosphere-stage::after { width:320px; height:320px; }
}

@media(max-width:768px) {
    body[data-weather] .hero { padding-top:.8rem; }
    body[data-weather] .search-card { padding:1rem; }
    .weather-atmosphere-stage { min-height:120px; margin-bottom:.65rem; }
    .weather-stage-title { font-size:2.65rem; }
    .weather-stage-kicker { top:14%; }
    .weather-stage-line { bottom:10%; }
}

@media(max-width:480px) {
    .splash-overlay { padding:1.25rem; }
    .splash-feature-scene { width:100%; height:232px; margin-bottom:.75rem; border-radius:24px; }
    .splash-scene-kicker { left:14px; top:13px; font-size:.5rem; }
    .splash-scene-chip { min-height:25px; padding:.25rem .48rem; font-size:.46rem; }
    .splash-scene-chip-temp { right:12px; top:9px; }
    .splash-scene-chip-preview { left:14px; bottom:8px; }
    .splash-demo-player { left:12px; top:48px; grid-template-columns:54px minmax(0,1fr); gap:.55rem; width:48%; height:128px; padding:.6rem; border-radius:16px; }
    .splash-demo-record { width:52px; }
    .splash-demo-record::before { width:22px; height:22px; }
    .splash-demo-now small { font-size:.42rem; }
    .splash-demo-now strong { font-size:.69rem; white-space:normal; }
    .splash-demo-now span { display:none; }
    .splash-demo-bars { right:8px; bottom:8px; }
    .splash-demo-tracks { right:10px; top:48px; width:43%; }
    .splash-demo-tracks div { grid-template-columns:21px minmax(0,1fr) 17px; min-height:40px; }
    .splash-demo-tracks strong { font-size:.64rem; }
    .splash-demo-tracks span { font-size:.46rem; }
    .splash-demo-globe { width:100px; font-size:3.6rem; }
    .splash-demo-pin { width:29px; height:29px; font-size:.9rem; }
    .splash-globe-orbit-one { width:150px; height:150px; }
    .splash-globe-orbit-two { width:205px; height:164px; }
    .splash-city-chip { min-height:25px; padding:.25rem .45rem; font-size:.47rem; }
    .splash-city-istanbul { left:10px; top:65px; }
    .splash-city-tokyo { right:8px; top:76px; }
    .splash-city-paris { right:20px; bottom:48px; }
    .splash-demo-search { bottom:8px; width:88%; min-height:36px; font-size:.57rem; }
    .splash-demo-search b { width:26px; height:26px; }
    .splash-vinyl-scene { width:min(300px,90vw); height:205px; margin-bottom:.65rem; }
    .splash-record { width:146px; }
    .splash-tonearm { left:calc(50% + 56px); top:27px; width:8px; height:96px; }
    .splash-tonearm::before { left:-7px; top:-7px; width:22px; height:22px; box-shadow:inset 0 0 0 6px #d87462; }
    .splash-tonearm span { left:-4px; width:17px; height:24px; box-shadow:inset 0 0 0 3px #17353d; }
    .splash-orbit-prop { width:37px; height:37px; border-radius:12px; font-size:1.2rem; }
    .splash-orbit-sun { left:13px; top:30px; }
    .splash-orbit-cloud { right:9px; top:50px; }
    .splash-orbit-umbrella { left:29px; bottom:10px; }
    .splash-orbit-note { right:32px; bottom:5px; font-size:1.65rem; }
    .splash-sound-bars { bottom:1px; }
    .splash-main-title { font-size:clamp(2.15rem,11vw,2.8rem); margin-bottom:.8rem; }
    .splash-main-desc { line-height:1.55; margin-bottom:1.45rem; }
    .splash-main-btn { padding:.85rem 2rem; font-size:1rem; }
    .splash-dots-row { margin-top:1.4rem; }
    .weather-atmosphere-stage { min-height:105px; }
    .weather-stage-title { font-size:2.2rem; }
    .weather-atmosphere-stage::before { width:165px; height:165px; }
    .weather-atmosphere-stage::after { width:245px; height:245px; }
}

/* ══ MOODCAST ONBOARDING — Hava Sesi referans uyarlaması ═══════════════════ */
body.splash-open { overflow:hidden; }

.splash-overlay {
    --mc-ob-ink:#17353d;
    --mc-ob-deep:#10282f;
    --mc-ob-paper:#f7faf6;
    --mc-ob-sun:#ffb45f;
    --mc-ob-rain:#6d7dd7;
    --mc-ob-coral:#f16c4f;
    position:fixed;
    inset:0;
    z-index:1400;
    display:flex;
    min-height:100dvh;
    padding:0;
    overflow:hidden;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    color:var(--mc-ob-ink);
    background:#e5f0ec;
    text-align:center;
    overscroll-behavior:contain;
    opacity:1;
    transition:opacity 420ms ease,visibility 420ms ease;
}
.splash-overlay::before,
.splash-overlay::after {
    content:'';
    position:absolute;
    aspect-ratio:1;
    border:1px solid rgba(23,53,61,.13);
    border-radius:50%;
    pointer-events:none;
}
.splash-overlay::before {
    width:min(58vw,760px);
    left:-24vw;
    bottom:-52%;
    box-shadow:none;
}
.splash-overlay::after {
    width:min(35vw,460px);
    right:-12vw;
    top:-18%;
    box-shadow:0 0 0 70px rgba(255,180,95,.045);
}
.splash-overlay[data-step="2"],
.splash-overlay[data-step="3"] { background:#e5f0ec; }
.splash-overlay.hiding {
    visibility:hidden;
    opacity:0;
    animation:none;
    pointer-events:none;
}

.mc-onboarding-header {
    position:relative;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:min(calc(100% - 56px),1240px);
    min-height:76px;
    margin:0 auto;
    border-bottom:1px solid rgba(23,53,61,.18);
}
.mc-onboarding-brand {
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:var(--mc-ob-ink);
    font-family:var(--font);
    font-size:15px;
    font-weight:700;
    letter-spacing:-.02em;
}
.mc-onboarding-brand-vinyl {
    gap:0;
    color:var(--mc-ob-coral);
    font-family:var(--serif);
    font-size:1.85rem;
    font-weight:700;
    letter-spacing:-.045em;
}
.mc-onboarding-brand-mark {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid currentColor;
    border-radius:50%;
}
.mc-onboarding-brand-mark span {
    width:10px;
    height:10px;
    border:2px solid currentColor;
    border-radius:50%;
}
.splash-skip-btn {
    position:static;
    z-index:auto;
    padding:9px 15px;
    border:1px solid rgba(23,53,61,.28);
    border-radius:999px;
    color:var(--mc-ob-ink);
    background:transparent;
    font-family:var(--font);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:color 180ms ease,background 180ms ease;
}
.splash-skip-btn:hover {
    border-color:var(--mc-ob-ink);
    color:#edf5f1;
    background:var(--mc-ob-ink);
}

.mc-onboarding-stage {
    position:relative;
    z-index:2;
    flex:1;
    width:min(calc(100% - 40px),820px);
    min-height:0;
    margin:0 auto;
}
.splash-overlay .splash-slide,
.splash-overlay > .mc-onboarding-stage > .splash-slide {
    position:absolute;
    inset:0;
    display:flex;
    width:auto;
    height:auto;
    max-height:none;
    padding:12px 0 20px;
    overflow:visible;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    transform:translateX(38px);
    pointer-events:none;
    transition:opacity 430ms ease,transform 430ms cubic-bezier(.22,.8,.25,1);
}
.splash-overlay .splash-slide.on,
.splash-overlay > .mc-onboarding-stage > .splash-slide.on {
    display:flex;
    visibility:visible;
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
}
.splash-slide.on > * { animation:mcObEnter .58s cubic-bezier(.22,1,.36,1) both; }
.splash-slide.on > :nth-child(2) { animation-delay:.06s; }
.splash-slide.on > :nth-child(3) { animation-delay:.11s; }
.splash-slide.on > :nth-child(4) { animation-delay:.16s; }
.splash-slide.on > :nth-child(5) { animation-delay:.21s; }

.mc-onboarding-visual {
    position:relative;
    display:grid;
    place-items:center;
    width:184px;
    height:184px;
    margin-bottom:16px;
    transform:scale(.88);
}
.mc-onboarding-svg {
    width:240px;
    height:210px;
    overflow:visible;
    filter:drop-shadow(0 18px 18px rgba(23,53,61,.11));
}
.mc-svg-orbit {
    fill:none;
    stroke:rgba(23,53,61,.2);
    stroke-width:1;
    stroke-dasharray:3 7;
    transform-origin:120px 105px;
    animation:mcObOrbit 28s linear infinite;
}
.mc-svg-orbit-dot { fill:var(--mc-ob-coral); }
.mc-radio-antenna {
    fill:none;
    stroke:var(--mc-ob-ink);
    stroke-width:6;
    stroke-linecap:round;
    transform-origin:77px 59px;
    animation:mcObAntenna 4.5s ease-in-out infinite;
}
.mc-radio-antenna-tip,
.mc-radio-dial {
    fill:var(--mc-ob-coral);
    stroke:var(--mc-ob-ink);
    stroke-width:4;
}
.mc-radio-body { fill:var(--mc-ob-ink); }
.mc-radio-face { fill:var(--mc-ob-paper); }
.mc-radio-sun { fill:var(--mc-ob-sun); }
.mc-radio-cloud {
    fill:#dce9e5;
    stroke:var(--mc-ob-ink);
    stroke-width:2;
    stroke-linejoin:round;
    transform-origin:center;
    animation:mcObCloud 5.5s ease-in-out infinite;
}
.mc-radio-dial-dot { fill:var(--mc-ob-ink); }
.mc-radio-signal,
.mc-music-line {
    fill:none;
    stroke:var(--mc-ob-coral);
    stroke-width:4;
    stroke-linecap:round;
    opacity:0;
    animation:mcObSignal 2.6s ease-out infinite;
}
.mc-signal-two { animation-delay:.8s; }
.mc-cassette-body-group {
    transform-origin:center;
    animation:mcObCassetteFloat 5s ease-in-out infinite;
}
.mc-cassette-body { fill:var(--mc-ob-ink); }
.mc-cassette-label {
    fill:var(--mc-ob-sun);
    stroke:var(--mc-ob-paper);
    stroke-width:2;
}
.mc-cassette-reel {
    fill:var(--mc-ob-paper);
    stroke:var(--mc-ob-ink);
    stroke-width:4;
    transform-box:fill-box;
    transform-origin:center;
    animation:mcObCassetteSpin 5s linear infinite;
}
.mc-reel-right { animation-direction:reverse; }
.mc-cassette-window,
.mc-cassette-base {
    fill:var(--mc-ob-coral);
    stroke:var(--mc-ob-ink);
    stroke-width:3;
    stroke-linejoin:round;
}
.mc-cassette-screw { fill:var(--mc-ob-coral); }
.mc-music-line-one { animation-delay:.4s; }
.mc-music-line-two { animation-delay:1.3s; }
.mc-map-body-group {
    transform-origin:center;
    animation:mcObMapFloat 5.5s ease-in-out infinite;
}
.mc-map-panel {
    stroke:var(--mc-ob-ink);
    stroke-width:4;
    stroke-linejoin:round;
}
.mc-map-panel-left { fill:var(--mc-ob-paper); }
.mc-map-panel-mid { fill:var(--mc-ob-sun); }
.mc-map-panel-right { fill:var(--mc-ob-rain); }
.mc-map-road {
    fill:none;
    stroke:var(--mc-ob-coral);
    stroke-width:5;
    stroke-linecap:round;
    stroke-dasharray:9 8;
}
.mc-map-road-secondary {
    stroke:rgba(23,53,61,.45);
    stroke-width:3;
}
.mc-map-stop { fill:var(--mc-ob-ink); }
.mc-location-pin {
    fill:var(--mc-ob-coral);
    stroke:var(--mc-ob-ink);
    stroke-width:4;
    stroke-linejoin:round;
    transform-box:fill-box;
    transform-origin:center bottom;
    animation:mcObPin 2.8s ease-in-out infinite;
}
.mc-location-pin circle {
    fill:var(--mc-ob-paper);
    stroke-width:3;
}

.mc-onboarding-eyebrow {
    margin:0 0 17px;
    color:var(--mc-ob-ink);
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.splash-overlay .splash-slide h1 {
    width:100%;
    margin:0;
    color:var(--mc-ob-ink);
    font-family:var(--serif);
    font-size:clamp(46px,5.3vw,68px);
    font-weight:600;
    line-height:.92;
    letter-spacing:-.045em;
}
.splash-overlay .splash-slide h1 em {
    color:var(--mc-ob-coral);
    font-weight:600;
}
.mc-onboarding-copy {
    max-width:560px;
    margin:19px auto 22px;
    color:rgba(23,53,61,.68);
    font-family:var(--font);
    font-size:14px;
    line-height:1.75;
}
.mc-onboarding-next {
    display:inline-flex;
    align-items:center;
    gap:17px;
    padding:15px 24px;
    border:0;
    border-radius:999px;
    color:var(--mc-ob-paper);
    background:var(--mc-ob-ink);
    font-family:var(--font);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    box-shadow:none;
    transition:background 180ms ease,transform 180ms ease;
}
.mc-onboarding-next:hover {
    color:var(--mc-ob-paper);
    background:var(--mc-ob-coral);
    transform:translateY(-2px);
}
.mc-onboarding-next span { font-size:17px; line-height:0; }

.splash-dots-row {
    position:relative;
    left:auto;
    bottom:auto;
    z-index:4;
    display:flex;
    min-height:44px;
    margin:0;
    padding:0 0 12px;
    align-items:center;
    justify-content:center;
    gap:8px;
    transform:none;
}
.splash-dot-item {
    display:block;
    width:7px;
    height:7px;
    min-width:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(23,53,61,.25);
    cursor:pointer;
    transition:width 260ms ease,background 260ms ease;
}
.splash-dot-item.on {
    width:34px;
    background:var(--mc-ob-coral);
    border-radius:999px;
}

@keyframes mcObEnter { from{opacity:0;transform:translateY(24px) scale(.98)} to{opacity:1;transform:none} }
@keyframes mcObOrbit { to{transform:rotate(-360deg)} }
@keyframes mcObAntenna { 50%{transform:rotate(-5deg)} }
@keyframes mcObCloud { 50%{transform:translateX(6px)} }
@keyframes mcObSignal { 0%{opacity:0;transform:scale(.9)} 45%{opacity:.85} 100%{opacity:0;transform:scale(1.08)} }
@keyframes mcObCassetteFloat { 50%{transform:translateY(-6px) rotate(-1.5deg)} }
@keyframes mcObCassetteSpin { to{transform:rotate(360deg)} }
@keyframes mcObMapFloat { 50%{transform:translateY(-7px) rotate(1deg)} }
@keyframes mcObPin { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-8px)} 60%{transform:translateY(-2px)} }

@media(max-width:620px) {
    .mc-onboarding-header { width:calc(100% - 28px); min-height:72px; }
    .mc-onboarding-stage { width:calc(100% - 28px); min-height:0; }
    .splash-overlay .splash-slide,
    .splash-overlay > .mc-onboarding-stage > .splash-slide { padding:18px 0 26px; }
    .mc-onboarding-visual { width:200px; height:184px; margin-bottom:16px; transform:none; }
    .mc-onboarding-svg { width:210px; height:184px; }
    .splash-overlay .splash-slide h1 { font-size:clamp(43px,14vw,60px); }
    .mc-onboarding-copy { margin:20px auto 23px; font-size:12px; }
}

@media(max-width:390px), (max-height:700px) {
    .mc-onboarding-header { min-height:60px; }
    .splash-overlay .splash-slide,
    .splash-overlay > .mc-onboarding-stage > .splash-slide { padding:8px 0 12px; }
    .mc-onboarding-visual { width:166px; height:145px; margin-bottom:8px; transform:none; }
    .mc-onboarding-svg { width:166px; height:145px; }
    .mc-onboarding-eyebrow { margin-bottom:10px; }
    .splash-overlay .splash-slide h1 { font-size:clamp(36px,11vw,48px); }
    .mc-onboarding-copy { margin:14px auto 16px; line-height:1.55; }
    .mc-onboarding-next { padding:13px 21px; }
    .splash-dots-row { min-height:34px; padding-bottom:8px; }
}

@media(prefers-reduced-motion:reduce) {
    .splash-overlay *,
    .splash-overlay *::before,
    .splash-overlay *::after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}