*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#16283a 0%,#0b1420 42%,#03060b 100%);color:#edf6ff;font-family:"Segoe UI",Tahoma,sans-serif}
button{font-family:inherit}
.showroom-shell{height:100vh;max-height:100vh;max-width:1720px;margin:0 auto;padding:18px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;overflow:hidden}
.control-panel{min-width:0;height:calc(100vh - 36px);display:flex;flex-direction:column;gap:14px}
.intro-card,.room-panel,.room-card{border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 20px 60px rgba(0,0,0,.30);backdrop-filter:blur(14px)}
.intro-card{width:100%;height:86px;border-radius:22px;display:flex;align-items:center;gap:14px;padding:14px 18px;color:#f4f8fd;cursor:pointer;text-align:left;transition:.2s}
.intro-card:hover{transform:translateY(-1px);border-color:rgba(80,160,255,.55);background:linear-gradient(145deg,rgba(55,111,220,.22),rgba(255,255,255,.04))}
.intro-play{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#4a90ff,#173d82);box-shadow:0 0 24px rgba(74,144,255,.35);font-weight:900}
.intro-card strong{display:block;font-size:17px}
.intro-card small{display:block;margin-top:3px;color:#a9bbcc;font-size:12px}
.room-panel{border-radius:22px;padding:16px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.room-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.room-panel-head h1{font-size:30px;line-height:1;margin:0 0 8px;font-weight:950}
.room-panel-head p{margin:0;color:#a4b7c9;font-size:13px;font-weight:700}
.active-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);padding:9px 11px;border-radius:14px;font-size:12px;font-weight:900;white-space:nowrap}
.active-pill i{width:10px;height:10px;background:#31d27c;border-radius:50%;box-shadow:0 0 12px #31d27c}
.thermostat-card{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(0,0,0,.18);padding:12px;margin-bottom:12px;flex:0 0 auto}
.temp-values{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.temp-values div{background:rgba(0,0,0,.19);border-radius:14px;padding:10px 12px}
.temp-values span{display:block;color:#91a7ba;font-size:11px;font-weight:800;margin-bottom:4px}
.temp-values strong{font-size:25px;line-height:1}
.mode-grid,.temp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.mode-btn,.temp-btn{height:42px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.06);color:#edf6ff;font-weight:900;cursor:pointer;transition:.18s}
.mode-btn.active{border-color:rgba(75,152,255,.65);background:rgba(50,125,255,.22);color:#9ad0ff}
.temp-btn{font-size:20px}
.climate-status{padding:10px;border-radius:13px;background:rgba(255,255,255,.045);color:#abc0d2;text-align:center;font-weight:850;font-size:12px}
.climate-status.cooling{background:rgba(65,160,255,.12);color:#9bd6ff}
.climate-status.heating{background:rgba(255,128,64,.12);color:#ffbd91}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;overflow-x:hidden;overflow-y:auto;min-height:0;align-content:start;padding:1px 7px 10px 1px;scrollbar-gutter:stable;overscroll-behavior:contain}
.quick-actions::-webkit-scrollbar{width:7px}
.quick-actions::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-radius:10px}
.quick-actions::-webkit-scrollbar-thumb{background:rgba(132,178,220,.38);border-radius:10px}
.quick-actions::-webkit-scrollbar-thumb:hover{background:rgba(132,190,240,.60)}
.action-card{height:84px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));color:#edf6ff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;text-align:center;transition:.18s}
.action-card:hover{transform:translateY(-1px);border-color:rgba(126,224,255,.36)}
.action-card.active{border-color:rgba(49,255,145,.45);background:rgba(49,255,145,.10);box-shadow:0 0 18px rgba(49,255,145,.10)}
.action-card img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28))}
.action-card strong{font-size:12px}
.action-card small{font-size:11px;font-weight:900;color:#91a7ba}
.action-card.active small{color:#31ff91}
.action-card.wide{grid-column:1/3;height:74px;flex-direction:row;text-align:left;justify-content:flex-start;padding:12px 16px}
.rooms-stage{position:relative;min-width:0;height:calc(100vh - 36px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
.room-card{position:relative;overflow:hidden;border-radius:20px;cursor:pointer;transition:.2s;min-height:0}
.room-card:hover{transform:translateY(-1px)}
.room-card.selected-room{border-color:rgba(49,255,145,.80);box-shadow:0 0 0 2px rgba(49,255,145,.32),0 24px 65px rgba(0,0,0,.34)}
.room-card header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(180deg,rgba(10,20,31,.96),rgba(7,14,22,.88));border-bottom:1px solid rgba(255,255,255,.08);font-weight:950;letter-spacing:.3px;position:relative;z-index:30}
.room-card header i{font-style:normal;font-size:26px;color:#cfe4f8}
.room-card img{position:absolute;left:0;right:0;bottom:0;top:54px;width:100%;height:calc(100% - 54px);object-fit:cover;filter:brightness(.36) contrast(1.07) saturate(.90);transition:filter .85s ease,transform .85s ease}
.room-card.ac-on img{filter:brightness(.39) contrast(1.07) saturate(.92)}
.room-card:hover img{transform:scale(1.01)}
.glow,.curtain,.shutter,.air-layer{position:absolute;pointer-events:none;opacity:0;transition:opacity .85s ease,transform .85s ease,height .85s ease;z-index:18}
.glow{inset:54px 0 0 0}
.living-chandelier-glow{background:radial-gradient(circle at 50% 35%,rgba(255,244,205,.58) 0,rgba(255,224,155,.25) 9%,transparent 27%)}
.living-spot-glow{background:radial-gradient(circle at 14% 32%,rgba(255,226,165,.42),transparent 11%),radial-gradient(circle at 14% 74%,rgba(255,226,165,.34),transparent 11%)}
.living-tv-glow{background:radial-gradient(ellipse at 6% 53%,rgba(75,130,255,.48),transparent 16%)}
.room-living.main-on .living-chandelier-glow,.room-living.spots-on .living-spot-glow,.room-living.tv-on .living-tv-glow{opacity:1}
.kitchen-main-glow{background:radial-gradient(circle at 50% 5%,rgba(255,235,185,.46),transparent 12%),radial-gradient(circle at 84% 5%,rgba(255,235,185,.42),transparent 11%)}
.kitchen-led-glow{background:radial-gradient(ellipse at 67% 10%,rgba(255,225,165,.30),transparent 24%),linear-gradient(180deg,rgba(255,225,165,.13),transparent 21%)}
.room-kitchen.main-on .kitchen-main-glow,.room-kitchen.accent-on .kitchen-led-glow{opacity:1}
.bedroom-main-glow{background:radial-gradient(circle at 76% 5%,rgba(255,235,185,.48),transparent 13%)}
.bedroom-side-glow{background:radial-gradient(circle at 21% 22%,rgba(255,230,175,.46),transparent 12%),radial-gradient(circle at 21% 71%,rgba(255,230,175,.42),transparent 12%)}
.room-bedroom.main-on .bedroom-main-glow,.room-bedroom.accent-on .bedroom-side-glow{opacity:1}
.hall-glow-1{background:radial-gradient(circle at 25% 10%,rgba(255,232,178,.38),transparent 11%)}
.hall-glow-2{background:radial-gradient(circle at 56% 10%,rgba(255,232,178,.38),transparent 11%)}
.hall-glow-3{background:radial-gradient(circle at 76% 10%,rgba(255,232,178,.38),transparent 11%)}
.hall-glow-4{background:radial-gradient(circle at 70% 21%,rgba(255,232,178,.34),transparent 10%)}
.room-hall.l1-on .hall-glow-1,.room-hall.l2-on .hall-glow-2,.room-hall.l3-on .hall-glow-3,.room-hall.l4-on .hall-glow-4{opacity:1}
.bath-mirror-glow{background:radial-gradient(ellipse at 24% 37%,rgba(255,242,210,.30),transparent 20%)}
.bath-main-glow{background:radial-gradient(circle at 25% 8%,rgba(255,232,178,.42),transparent 12%),radial-gradient(circle at 54% 8%,rgba(255,232,178,.38),transparent 12%)}
.room-bath.mirror-on .bath-mirror-glow,.room-bath.main-on .bath-main-glow{opacity:1}
.balcony-glow{background:radial-gradient(circle at 19% 50%,rgba(255,210,120,.30),transparent 19%),radial-gradient(circle at 86% 78%,rgba(255,210,120,.24),transparent 18%),radial-gradient(circle at 57% 45%,rgba(255,210,120,.15),transparent 24%)}
.room-balcony.main-on .balcony-glow{opacity:1}
.curtain{top:calc(54px + 15%);height:62%;width:4.8%;border-radius:12px;background:repeating-linear-gradient(90deg,rgba(240,242,245,.82) 0 4px,rgba(185,192,200,.72) 4px 8px);box-shadow:0 10px 18px rgba(0,0,0,.16);opacity:.90}
.curtain-left{right:11%}
.curtain-right{right:2.5%}
.room-living.curtain-open .curtain-left{transform:translateX(-28px) scaleX(.20);opacity:.26}
.room-living.curtain-open .curtain-right{transform:translateX(28px) scaleX(.20);opacity:.26}
.shutter{border-radius:16px;background:repeating-linear-gradient(to bottom,rgba(220,225,230,.94) 0 5px,rgba(150,158,167,.96) 5px 8px);box-shadow:0 10px 18px rgba(0,0,0,.18);opacity:.92}
.living-shutter{right:4.5%;top:calc(54px + 15%);height:62%;width:9%}
.room-living.shutter-open .living-shutter{height:12%;transform:translateY(-6px);opacity:.44}
.balcony-shutter{left:5%;top:calc(54px + 12%);height:64%;width:18%}
.room-balcony.shutter-open .balcony-shutter{height:14%;transform:translateY(-8px);opacity:.48}
.air-layer{left:8%;top:calc(54px + 14%);width:36%;height:38%;z-index:25}
.room-kitchen .air-layer{left:18%;top:calc(54px + 14%);width:34%;height:34%}
.room-bedroom .air-layer{left:18%;top:calc(54px + 14%);width:34%;height:34%}
.air-layer i{position:absolute;left:0;width:76%;height:18%;border-radius:0 0 60% 60%;border-bottom:3px solid rgba(142,215,255,.60);filter:drop-shadow(0 0 5px rgba(142,215,255,.22));animation:airWave 2.6s linear infinite}
.air-layer i:nth-child(2){top:18%;left:8%;animation-delay:.32s}
.air-layer i:nth-child(3){top:36%;left:16%;animation-delay:.64s}
.air-layer i:nth-child(4){top:54%;left:24%;animation-delay:.96s}
.air-warm i{border-bottom-color:rgba(255,157,92,.60)}
.room-card.cooling-on .air-cold,.room-card.heating-on .air-warm{opacity:1}
.room-card.fan-idle .air-cold,.room-card.fan-idle .air-warm{opacity:.22}
@keyframes airWave{0%{transform:translateY(-8px) translateX(0) scaleX(.68);opacity:0}
20%{opacity:.75}
100%{transform:translateY(42px) translateX(22px) scaleX(1.12);opacity:0}
}
.state-bank{display:none}
.toast-message{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);min-width:280px;max-width:480px;background:rgba(14,20,28,.96);color:#f5f8fc;padding:14px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 50px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:all .28s ease;z-index:9999;text-align:center;font-weight:800}
.toast-message.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1280px){.showroom-shell{grid-template-columns:330px 1fr}
.rooms-stage{gap:12px}
.action-card{height:78px}
.intro-card{height:80px}
}
@media(max-width:1050px){.showroom-shell{height:auto;max-height:none;overflow:auto;grid-template-columns:1fr}
.control-panel{height:auto;position:relative}
.rooms-stage{height:auto;grid-template-columns:1fr;grid-template-rows:none}
.room-card{height:330px}
.room-card img{height:calc(100% - 54px)}
.quick-actions{overflow:visible}
}
@media(max-width:650px){.showroom-shell{padding:12px}
.intro-card{height:auto}
.room-panel{padding:14px}
.room-panel-head{flex-direction:column}
.quick-actions{grid-template-columns:1fr 1fr}
.action-card{height:76px}
.action-card.wide{grid-column:1/3}
.room-card{height:260px}
.room-card header{height:48px;font-size:13px}
.room-card img{top:48px;height:calc(100% - 48px)}
.glow{inset:48px 0 0}
.curtain{top:calc(48px + 15%)}
.living-shutter,.balcony-shutter{top:calc(48px + 15%)}
.air-layer{top:calc(48px + 14%)}
}
@media(max-width:420px){.quick-actions{grid-template-columns:1fr}
.action-card.wide{grid-column:auto}
.temp-values,.mode-grid,.temp-grid{grid-template-columns:1fr 1fr}
}




/* ===== v11: soft set-değerli yerden ısıtma göstergesi ===== */
.floor-heat {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 4%;
    height: 30%;
    z-index: 19;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    mix-blend-mode: screen;
    transition: opacity .75s ease;
}
.floor-heat::before {
    content: "";
    position: absolute;
    inset: 18% 0 -22%;
    border-radius: 50% 50% 18% 18%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255, 134, 72, .20), transparent 64%),
        linear-gradient(180deg, transparent 0%, rgba(255, 122, 64, .10) 56%, rgba(255, 142, 82, .18) 100%);
    filter: blur(8px);
    animation: floorHeatBreath 4.8s ease-in-out infinite;
}
.floor-heat i {
    position: absolute;
    bottom: 0;
    width: 38%;
    height: 84%;
    border-radius: 50% 50% 0 0;
    border-top: 2px solid rgba(255, 160, 94, .34);
    filter: blur(.15px) drop-shadow(0 0 5px rgba(255, 126, 64, .14));
    animation: floorHeatLine 4.4s ease-in-out infinite;
}
.floor-heat i:nth-child(1) { left: -5%; animation-delay: 0s; }
.floor-heat i:nth-child(2) { left: 20%; height: 92%; animation-delay: .55s; }
.floor-heat i:nth-child(3) { left: 46%; height: 78%; animation-delay: 1.1s; }
.floor-heat i:nth-child(4) { left: 70%; height: 88%; animation-delay: 1.65s; }
.room-card.floor-heating-on .floor-heat { opacity: 1; }
.room-kitchen .floor-heat,
.room-bedroom .floor-heat { left: 9%; right: 9%; bottom: 5%; height: 27%; }
@keyframes floorHeatBreath {
    0%, 100% { transform: translateY(10px) scaleY(.88); opacity: .42; }
    50% { transform: translateY(0) scaleY(1.08); opacity: .78; }
}
@keyframes floorHeatLine {
    0%, 100% { transform: translateY(16px) scaleY(.74); opacity: .10; }
    45% { transform: translateY(0) scaleY(1.04); opacity: .46; }
    70% { opacity: .28; }
}

/* v11: Set değeri sağlandığında klima yetkili kalsa bile üfleme tamamen durur. */
.room-card.fan-idle .air-cold,
.room-card.fan-idle .air-warm {
    opacity: 0 !important;
}

/* v12: yerden ısıtma klimadan bağımsızdır; klima kapalı olsa da set değeri istiyorsa zemin animasyonu kalır. */
.room-card.floor-heating-on .floor-heat { opacity: 1 !important; }
.room-card:not(.floor-heating-on) .floor-heat { opacity: 0; }
.brand-logo-box {
    width: 100%;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .brand-logo-box img {
        max-width: 68%;
        max-height: 34px;
        object-fit: contain;
        opacity: .88;
        filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
    }
@media (max-width: 680px) {
    .brand-logo-box {
        height: 52px;
        border-radius: 18px;
        margin-bottom: 10px;
    }

        .brand-logo-box img {
            max-width: 64%;
            max-height: 28px;
        }
}
.redirect-page {
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(circle at top left, rgba(0, 122, 255, .18), transparent 34%), radial-gradient(circle at bottom right, rgba(52, 211, 153, .10), transparent 30%), linear-gradient(145deg, #06111f 0%, #091522 45%, #03070d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #eef6ff;
}

.redirect-card {
    width: min(520px, 100%);
    border-radius: 30px;
    padding: 38px 34px;
    text-align: center;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 90px rgba(0,0,0,.42);
    backdrop-filter: blur(18px);
}

.redirect-logo-box {
    width: 100%;
    height: 86px;
    border-radius: 24px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    overflow: hidden;
}

    .redirect-logo-box img {
        max-width: 72%;
        max-height: 48px;
        object-fit: contain;
        opacity: .94;
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
    }

.redirect-card h1 {
    margin: 0 0 12px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 900;
    letter-spacing: -.5px;
}

.redirect-card p {
    margin: 0 auto 24px;
    max-width: 430px;
    color: rgba(238, 246, 255, .72);
    line-height: 1.6;
    font-size: 15px;
}

.redirect-loader {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin: 22px 0;
}

    .redirect-loader span {
        display: block;
        height: 100%;
        width: 45%;
        border-radius: inherit;
        background: linear-gradient(90deg, #1f8cff, #38d996);
        animation: redirectLoad 1.4s ease-in-out infinite;
    }

@keyframes redirectLoad {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(240%);
    }
}

.redirect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1f8cff, #1761c9);
    color: white;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(31, 140, 255, .25);
    transition: .2s ease;
}

    .redirect-btn:hover {
        transform: translateY(-2px);
        color: white;
        box-shadow: 0 18px 40px rgba(31, 140, 255, .34);
    }

@media (max-width: 680px) {
    .redirect-card {
        padding: 28px 22px;
        border-radius: 24px;
    }

    .redirect-logo-box {
        height: 72px;
    }

        .redirect-logo-box img {
            max-height: 38px;
        }
}
.redirect-page {
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(circle at top left, rgba(0, 122, 255, .18), transparent 34%), radial-gradient(circle at bottom right, rgba(52, 211, 153, .10), transparent 30%), linear-gradient(145deg, #06111f 0%, #091522 45%, #03070d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #eef6ff;
}

.redirect-card {
    width: min(520px, 100%);
    border-radius: 30px;
    padding: 38px 34px;
    text-align: center;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 90px rgba(0,0,0,.42);
    backdrop-filter: blur(18px);
}

.redirect-logo-box {
    width: 100%;
    height: 86px;
    border-radius: 24px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    overflow: hidden;
}

    .redirect-logo-box img {
        max-width: 72%;
        max-height: 48px;
        object-fit: contain;
        opacity: .94;
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
    }

.redirect-card h1 {
    margin: 0 0 12px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 900;
    letter-spacing: -.5px;
}

.redirect-card p {
    margin: 0 auto 24px;
    max-width: 430px;
    color: rgba(238, 246, 255, .72);
    line-height: 1.6;
    font-size: 15px;
}

.redirect-loader {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin: 22px 0;
}

    .redirect-loader span {
        display: block;
        height: 100%;
        width: 45%;
        border-radius: inherit;
        background: linear-gradient(90deg, #1f8cff, #38d996);
        animation: redirectLoad 1.4s ease-in-out infinite;
    }

@keyframes redirectLoad {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(240%);
    }
}

.redirect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1f8cff, #1761c9);
    color: white;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(31, 140, 255, .25);
    transition: .2s ease;
}

    .redirect-btn:hover {
        transform: translateY(-2px);
        color: white;
        box-shadow: 0 18px 40px rgba(31, 140, 255, .34);
    }

@media (max-width: 680px) {
    .redirect-card {
        padding: 28px 22px;
        border-radius: 24px;
    }

    .redirect-logo-box {
        height: 72px;
    }

        .redirect-logo-box img {
            max-height: 38px;
        }
}
.redirect-note {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(238, 246, 255, .55);
}