:root {
    --primary-color: #D4A843;
    --primary-gradient: linear-gradient(135deg, #D4A843 0%, #B8791A 100%);
    --secondary-color: #0a0a0b;
    --accent-color: #111110;
    --text-color: #f5f5f7;
    --text-muted: #8892b0;
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(212, 168, 67, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Background Blobs */
.blob {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(80px);
    animation: floatBlob 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes floatBlob {
    0% {
        transform: translate(-10%, -10%) scale(1);
    }

    100% {
        transform: translate(20%, 20%) scale(1.2);
    }
}

/* Glassmorphism Utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

.glass:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 168, 67, 0.28);
}

/* Typography & Reset Baseline */
body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
button,
select,
option,
a {
    font-family: var(--font-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--white);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* Header & Nav */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: var(--transition);
}

html {
    scroll-behavior: smooth;
}

/* Mobil menü açıkken sayfa kaymayı engelle */
html.menu-open {
    overflow: hidden;
}


header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 2rem 0;
    transition: var(--transition);
}

header.scrolled {
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    border-bottom: 1px solid var(--glass-border);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.logo-main {
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -1px;
    line-height: 1;
}

.logo-main span {
    color: var(--primary-color);
    text-shadow: 0 0 15px rgba(212, 168, 67, 0.3);
}

.logo-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
    line-height: 1.3;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    transition: var(--transition);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1px solid transparent;
}

.nav-links a:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    filter: brightness(0.55) saturate(1.1);
}

.hero-content {
    max-width: 700px;
}

.hero h1 {
    font-size: 5.2rem;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    animation: slideUpFade 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: -0.03em;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 span {
    color: var(--primary-color);
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

/* ── Hero Sub (Sayfa Başlığı) ─────────────────── */
.hero-sub {
    position: relative;
    padding: 0;
    background: var(--accent-color);
    overflow: hidden;
    border-bottom: 1px solid var(--glass-border);
}

.hero-sub-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(212, 168, 67, 0.08) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(10, 10, 11, 0.3) 0%, rgba(10, 10, 11, 0.85) 100%),
        url('../assets/images/hero.png') center/cover no-repeat;
    z-index: 0;
    filter: brightness(0.7);
}

.hero-sub-content {
    position: relative;
    z-index: 1;
    padding: 140px 0 48px;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 1.4rem;
    letter-spacing: 0.3px;
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--white);
}

.breadcrumb-sep {
    font-size: 0.65rem;
    opacity: 0.5;
}

/* Başlık */
.hero-sub-title {
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--white);
}

.hero-sub-title span {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Alt açıklama */
.hero-sub-desc {
    font-size: 1.05rem;
    color: rgba(245, 245, 247, 0.7);
    margin-bottom: 2.2rem;
    max-width: 520px;
    line-height: 1.65;
}

/* İstatistik barı */
.hero-sub-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.hero-sub-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hero-sub-stat strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.02em;
    line-height: 1;
}

.hero-sub-stat span {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-sub-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--glass-border);
    flex-shrink: 0;
}

/* Mobil */
@media (max-width: 768px) {
    .hero-sub-content {
        padding: 110px 0 36px;
    }

    .hero-sub-title {
        font-size: 2.2rem;
    }

    .hero-sub-desc {
        font-size: 0.92rem;
        margin-bottom: 1.6rem;
    }

    .hero-sub-stats {
        gap: 1.4rem;
    }

    .hero-sub-stat strong {
        font-size: 1.3rem;
    }
}

@media (max-width: 390px) {
    .hero-sub-content {
        padding: 90px 0 28px;
    }

    .hero-sub-title {
        font-size: 1.9rem;
    }

    .hero-sub-stats {
        gap: 1rem;
    }

    .hero-sub-stat strong {
        font-size: 1.15rem;
    }
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--primary-gradient);
    color: var(--secondary-color);
    font-weight: 700;
    border-radius: 50px;
    transition: var(--transition);
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.2);
}

.btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(212, 168, 67, 0.4);
}

/* Sections */
section {
    padding: 100px 0;
}

/* Section subtitle helper */
.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: -0.5rem auto 3.5rem;
    line-height: 1.7;
}

.section-title {
    font-size: 2.8rem;
    margin-bottom: 1.2rem;
    text-align: center;
    letter-spacing: -0.02em;
}

.section-title span {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* About Section Redesign */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.about-image-card {
    height: 100%;
    min-height: 480px;
    background: linear-gradient(160deg, rgba(212, 168, 67, 0.06) 0%, rgba(10, 10, 11, 0.6) 60%), url('../assets/images/hero.png');
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-end;
    padding: 3rem;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: var(--transition);
}

.about-image-card:hover {
    background: linear-gradient(160deg, rgba(212, 168, 67, 0.08) 0%, rgba(10, 10, 11, 0.55) 60%), url('../assets/images/hero.png') center/cover no-repeat;
    border-color: rgba(212, 168, 67, 0.3);
    transform: translateY(-4px);
}

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.about-card {
    padding: 2.5rem 2rem;
    transition: var(--transition);
    border-radius: var(--radius-md);
    border-bottom: 3px solid transparent;
    border: 1px solid transparent;
}

.about-card:hover {
    border-color: rgba(212, 168, 67, 0.2);
    background: rgba(212, 168, 67, 0.04);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.about-card i {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
}

.about-card:hover i {
    transform: scale(1.15);
}

.about-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    color: var(--white);
}

.about-card p {
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-image-card {
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .about-features {
        grid-template-columns: 1fr;
    }
}

/* Smart Systems Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    padding: 2.5rem 2rem;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
    color: var(--white);
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.75;
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 168, 67, 0.25) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(212, 168, 67, 0.06);
}

/* ... some lines ... */
.project-info {
    padding: 2rem !important;
}

/* ... footer in index.html is inline, I'll need to update it there too or change it to a class ... */

.feature-card:hover i {
    transform: scale(1.2) rotate(10deg);
    color: var(--white);
    text-shadow: 0 0 20px var(--primary-color);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent 70%);
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    animation: floatIcon 3s infinite alternate ease-in-out;
}

@keyframes floatIcon {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

.feature-card:nth-child(2) i {
    animation-delay: 0.5s;
}

.feature-card:nth-child(3) i {
    animation-delay: 1s;
}

/* Smart Pulse Decor */
.smart-pulse {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: pulseOut 2s infinite;
}

@keyframes pulseOut {
    0% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Projects */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.project-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 11, 0.98) 0%, rgba(10, 10, 11, 0.4) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem 2.5rem;
    opacity: 1;
    pointer-events: none;
    transition: var(--transition);
}

.project-overlay h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--white);
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.project-overlay p {
    font-size: 1.15rem;
    margin-bottom: 2rem;
    color: #e0e0e0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.project-overlay>* {
    pointer-events: auto;
}

.project-item:hover .project-overlay {
    background: linear-gradient(to top, rgba(10, 10, 11, 1) 0%, rgba(10, 10, 11, 0.6) 70%, transparent 100%);
}

.project-item:hover img {
    transform: scale(1.1);
}

/* Contact */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

input,
textarea {
    width: 100%;
    padding: 1.2rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--white);
    margin-bottom: 1.5rem;
    font-family: inherit;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Reveal Animations */
.feature-card,
.project-item,
.about-text,
.contact-form,
.project-card,
.consultant-card,
.partner-item {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card.revealed,
.project-item.revealed,
.about-text.revealed,
.contact-form.revealed,
.project-card.revealed,
.consultant-card.revealed,
.partner-item.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* WhatsApp Button */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    z-index: 1000;
    transition: var(--transition);
}

.whatsapp-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5);
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr !important;
    }

    .project-item {
        height: 400px;
    }

    .project-overlay {
        padding: 1.5rem;
    }
}

/* Project Item Highlight (Index) */
.project-item {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    height: 500px;
    transition: var(--transition);
    border: 1px solid var(--glass-border);
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-item:hover img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem;
    background: linear-gradient(to top, rgba(10, 10, 11, 0.95), transparent);
    backdrop-filter: blur(8px);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border-top: 1px solid var(--glass-border);
}

.project-item:hover .project-overlay {
    padding-bottom: 3.5rem;
}

.project-overlay h3 {
    font-size: 1.8rem;
    color: var(--white);
    margin: 0;
}

.project-overlay p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.project-overlay .btn {
    align-self: flex-start;
    padding: 0.8rem 1.8rem;
    font-size: 0.9rem;
}

/* Project Cards & Video */
.project-card {
    overflow: hidden;
    transition: var(--transition);
}

/* Project Image Hero (instead of video) */
.project-hero {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.project-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox Modal */
.lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 11, 0.95);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    padding: 2rem;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: var(--glass-shadow);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox.active img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
}

/* Consultants Section */
.consultants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.consultant-card {
    text-align: center;
    padding: 3rem 2.5rem;
    transition: var(--transition);
    border-radius: var(--radius-lg);
}

.consultant-card:hover {
    transform: translateY(-6px);
    background: rgba(212, 168, 67, 0.04);
    border-color: rgba(212, 168, 67, 0.25) !important;
}

.consultant-card img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 0 6px rgba(212, 168, 67, 0.08), 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}

.consultant-card:hover img {
    box-shadow: 0 0 0 8px rgba(212, 168, 67, 0.15), 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.consultant-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.consultant-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.consultant-card .social-links {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.consultant-card .social-links a {
    font-size: 1.1rem;
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    transition: var(--transition);
}

.consultant-card .social-links a:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(212, 168, 67, 0.08);
}

/* Maps */
.map-container {
    width: 100%;
    height: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 3rem;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Partners Section */
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem 5rem;
    align-items: center;
    margin-top: 3rem;
}

.partner-item {
    filter: grayscale(1) opacity(0.5);
    transition: var(--transition);
}

.partner-item:hover {
    filter: grayscale(0) opacity(1);
    transform: scale(1.12);
}

.partner-item img {
    height: 50px;
    width: auto;
}

.partner-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* ── Footer ─────────────────────────────────── */
.site-footer {
    padding: 5rem 0 2rem;
    border-top: 1px solid var(--glass-border);
    background: var(--accent-color);
    margin-top: 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-brand .logo {
    display: inline-flex;
    margin-bottom: 1.2rem;
}

.footer-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.75;
    max-width: 280px;
    margin-top: 0.8rem;
}

.footer-links h4,
.footer-contact h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.footer-links ul,
.footer-contact ul {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-links ul li a {
    color: var(--text-muted);
    font-size: 0.92rem;
    transition: var(--transition);
}

.footer-links ul li a:hover {
    color: var(--white);
    padding-left: 4px;
}

.footer-contact ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.footer-contact ul li i {
    color: var(--primary-color);
    width: 16px;
    flex-shrink: 0;
}

.footer-contact ul li a {
    color: var(--text-muted);
    transition: var(--transition);
}

.footer-contact ul li a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid var(--glass-border);
    padding-top: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 3.5rem 0 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2.5rem;
    }

    .footer-brand {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-desc {
        max-width: 100%;
        text-align: center;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }

    .footer-links h4,
    .footer-contact h4 {
        text-align: center;
        margin-bottom: 1.2rem;
        position: relative;
    }

    .footer-links h4::after,
    .footer-contact h4::after {
        content: '';
        display: block;
        width: 30px;
        height: 2px;
        background: var(--primary-color);
        margin: 0.4rem auto 0;
        border-radius: 2px;
    }

    /* 2-column compact links on mobile */
    .footer-links ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
        text-align: center;
    }

    .footer-links ul li a {
        display: block;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.015);
        border: 1px solid rgba(255, 255, 255, 0.03);
        border-radius: 8px;
        font-size: 0.88rem;
    }

    /* Tap-friendly contact list on mobile */
    .footer-contact ul {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    .footer-contact ul li {
        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(212, 168, 67, 0.08);
        border-radius: 12px;
        justify-content: flex-start;
        align-items: center;
        transition: var(--transition);
        width: 100%;
    }

    .footer-contact ul li:active {
        background: rgba(212, 168, 67, 0.08);
        border-color: rgba(212, 168, 67, 0.3);
    }

    .footer-contact ul li a {
        display: block;
        width: 100%;
        color: var(--text-color);
        font-size: 0.88rem;
        text-align: left;
    }

    .footer-bottom {
        padding-top: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}


/* Project Detailed List (One per row) */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.project-details {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 4rem;
}

@media (max-width: 1100px) {
    .project-details {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .info-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 1rem !important;
    }
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Modern Project Info Cards */
.info-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(212, 168, 67, 0.12);
    border-radius: 14px;
    transition: var(--transition);
}

.info-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 168, 67, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 168, 67, 0.05);
}

.info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(212, 168, 67, 0.08);
    color: var(--primary-color);
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.info-card:hover .info-card-icon {
    background: var(--primary-gradient);
    color: var(--secondary-color);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(212, 168, 67, 0.3);
}

.info-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    width: 100%;
}

.info-card-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.2;
}

.info-card-value {
    color: var(--text-color);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-card-value.wrap-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.info-card-value a {
    color: var(--primary-color);
    transition: var(--transition);
}

.info-card-value a:hover {
    color: var(--white);
    filter: brightness(1.2);
}

.info-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--glass-border);
    align-items: baseline;
}

.info-item label {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-item span {
    color: var(--white);
    font-weight: 400;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1/1;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

@media (max-width: 968px) {
    .project-details {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Projects-list sayfaları: section padding azaltıldı */
#projects-list {
    padding: 60px 0 80px;
}

/* Navigation CTA Button */
.nav-cta a {
    background: var(--primary-gradient);
    color: var(--white) !important;
    padding: 0.6rem 1.4rem !important;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(212, 168, 67, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 168, 67, 0.4);
}

/* Contact Links (Footer/Address) */
.contact-link {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.contact-link:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}

/* --- Mobile Responsiveness Fixes --- */

@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .project-info h2 {
        font-size: 2rem !important;
    }

    .project-details {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Proje sayfası: başlık + progress bar dikey dizilim */
    .project-info>div:first-child {
        flex-direction: column !important;
        gap: 1rem;
        align-items: flex-start !important;
    }

    .project-info>div:first-child>div:last-child {
        text-align: left !important;
        width: 100% !important;
    }

    .project-info .progress-container {
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* Galeri mobilde tek sütun */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Mobilde project-card animasyonu daha hızlı ve daha az kaymış başlasın */
    .project-card {
        transform: translateY(16px) scale(0.99);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .project-card.revealed {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .info-item {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .info-item label {
        font-size: 0.75rem;
    }

    /* Galeryi tek sütuna indir - 3 görsel de eşit görünsün */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .project-info {
        padding: 1.25rem !important;
    }

    .project-info h2 {
        font-size: 1.6rem !important;
        line-height: 1.2;
    }

    .project-info p {
        font-size: 0.9rem !important;
    }

    /* Başlık + progress bar: mobilde alt alta diz */
    .project-info>div:first-child {
        flex-direction: column !important;
        gap: 1.2rem;
        align-items: flex-start !important;
        text-align: left;
    }

    .project-info>div:first-child>div:last-child {
        text-align: left !important;
        width: 100% !important;
    }

    /* Progress container tam genişlik */
    .project-info .progress-container {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .badge {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    .project-info>div:first-child div:last-child p {
        font-size: 0.8rem !important;
        margin-top: 0.5rem !important;
    }
}

/* Ensure no horizontal overflow */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    /* iOS Safari yatay kayma için ekstra güvenlik: */
    position: relative;
}

/* Sayfa genişliğini geçebilecek tüm elemanları sınırla */
img,
video,
iframe,
.container,
.row,
section {
    max-width: 100%;
}

/* Fix for mobile navigation links being too wide */
.nav-links {
    max-width: 100vw;
}

/* --- Progress Bar Component --- */
.progress-container {
    margin-top: 1rem;
    width: 200px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.progress-percentage {
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary-color);
}

.progress-track {
    width: 100%;
    height: 6px;
    background: var(--glass-border);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 480px) {
    .progress-container {
        width: 100%;
    }
}

/* ============================================
   KAPSAMLI MOBİL İYİLEŞTİRMELER
   ============================================ */

/* --- Hamburger / Mobil Menü Butonu --- */
.mobile-menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--glass-border);
    color: var(--white);
    font-size: 1.3rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1002;
}

.mobile-menu-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Mobil acik menu */
.nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(10, 10, 11, 0.99);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 1001;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 5rem 2rem 2rem;
    animation: menuSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-links.mobile-open li a {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    display: block;
    text-align: center;
    border-radius: 12px;
    transition: var(--transition);
    letter-spacing: 0.3px;
}

.nav-links.mobile-open li a:hover {
    background: rgba(212, 168, 67, 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.nav-links.mobile-open .nav-cta a {
    background: var(--primary-gradient) !important;
    color: var(--secondary-color) !important;
    padding: 0.8rem 2.2rem !important;
    font-size: 1rem !important;
    border-radius: 50px;
    margin-top: 0.8rem;
}

@media (max-width: 768px) {

    /* --- Genel & Responsive Typography --- */
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.05rem;
    }

    section {
        padding: 50px 0;
    }

    .btn {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
        border-radius: 12px;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Hero --- */
    .hero {
        align-items: center;
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2.6rem;
        line-height: 1.15;
        margin-bottom: 1rem;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 2rem;
        color: rgba(245, 245, 247, 0.8);
    }

    .hero-btns .btn {
        width: 100%;
        text-align: center;
        padding: 1rem 2rem;
        font-size: 1rem;
        border-radius: 14px;
    }

    /* --- Neden Furah (About) --- */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-image-card {
        min-height: 220px;
        padding: 2rem;
        border-radius: 16px;
    }

    .about-features {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .about-card {
        padding: 1.5rem 1.2rem;
        border-radius: 14px;
    }

    .about-card i {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .about-card h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .about-card p {
        font-size: 0.82rem;
        line-height: 1.6;
    }

    /* --- Akilli Bina Sistemleri --- */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .feature-card {
        padding: 1.8rem 1.5rem;
        border-radius: 16px;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-card i {
        font-size: 2.2rem;
        margin-bottom: 1rem;
        animation: none;
    }

    .feature-card h3 {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }

    .feature-card p {
        font-size: 0.88rem;
        line-height: 1.65;
        color: var(--text-muted);
    }

    /* --- Projelerimiz --- */
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem;
    }

    .project-item {
        height: 320px !important;
        border-radius: 18px;
    }

    .project-overlay {
        padding: 1.5rem !important;
        gap: 0.5rem;
    }

    .project-overlay h3 {
        font-size: 1.4rem;
    }

    .project-overlay p {
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
    }

    .project-overlay .btn {
        width: auto;
        align-self: flex-start;
        padding: 0.65rem 1.4rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    /* --- Ekibimiz --- */
    .consultants-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: 2rem;
    }

    .consultant-card {
        padding: 2rem 1.5rem;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    .consultant-card img {
        width: 90px;
        height: 90px;
        flex-shrink: 0;
        margin-bottom: 1.2rem;
    }

    .consultant-card h3 {
        font-size: 1.05rem;
        margin-bottom: 0.25rem;
    }

    .consultant-card>p {
        font-size: 0.82rem;
        margin-bottom: 0.8rem;
    }

    .consultant-card .social-links {
        justify-content: center;
        gap: 0.8rem;
    }

    .consultant-card .social-links a {
        font-size: 1rem;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 50%;
        transition: var(--transition);
    }

    .consultant-card .social-links a:hover {
        background: rgba(212, 168, 67, 0.1);
        border-color: var(--primary-color);
    }

    /* --- Is Ortaklari --- */
    .partners-grid {
        gap: 2rem 3rem;
        margin-top: 2rem;
    }

    .partner-text {
        font-size: 1.2rem;
    }

    /* --- Iletisim --- */
    .contact-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-link {
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        width: 100%;
        justify-content: flex-start;
    }

    .map-container {
        height: 260px;
        border-radius: 16px;
        margin-top: 2rem;
    }

    /* --- Section Title --- */
    .section-title {
        font-size: 1.9rem;
        margin-bottom: 2rem;
    }

    /* --- WhatsApp --- */
    .whatsapp-btn {
        bottom: 20px;
        right: 16px;
        width: 52px;
        height: 52px;
        font-size: 1.7rem;
    }
}

@media (max-width: 390px) {
    .hero h1 {
        font-size: 2rem;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-card {
        padding: 1.2rem 1rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .project-item {
        height: 260px !important;
    }

    .consultant-card {
        flex-direction: column;
        text-align: center;
    }

    .consultant-card .social-links {
        justify-content: center;
    }

    .partner-text {
        font-size: 1rem;
    }
}

/* --- Project Plans Section CSS --- */
.project-plans-section {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--glass-border);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.plans-item {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: rgba(10, 10, 11, 0.4);
    transition: var(--transition);
}

.plans-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.plans-item:hover img {
    transform: scale(1.03);
}

.plans-caption {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 11, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem;
    text-align: center;
    transition: var(--transition);
}

.plans-item:hover .plans-caption {
    opacity: 1;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .project-plans-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
}

/* Completed & Ongoing projects grid layout (3 columns) */
.completed-projects-grid,
.ongoing-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
}

.completed-projects-grid .project-card,
.ongoing-projects-grid .project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 0 !important;
    /* overrides margin-top: 4rem */
}

.completed-projects-grid .project-hero,
.ongoing-projects-grid .project-hero {
    height: 240px;
    /* shorter image height for grid cards */
}

.completed-projects-grid .project-info,
.ongoing-projects-grid .project-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 2rem !important;
}

.completed-projects-grid .project-info-header,
.ongoing-projects-grid .project-info-header {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.completed-projects-grid .project-info-features,
.ongoing-projects-grid .project-info-features {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.completed-projects-grid .project-info-feature-item,
.ongoing-projects-grid .project-info-feature-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
    transition: var(--transition);
}

.completed-projects-grid .project-info-feature-item:hover,
.ongoing-projects-grid .project-info-feature-item:hover {
    background: rgba(255, 255, 255, 0.01);
    padding-left: 0.5rem;
    border-bottom-color: rgba(212, 168, 67, 0.2);
}

.completed-projects-grid .project-info-feature-item label,
.ongoing-projects-grid .project-info-feature-item label {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.completed-projects-grid .project-info-feature-item label i,
.ongoing-projects-grid .project-info-feature-item label i {
    color: var(--primary-color);
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
}

.completed-projects-grid .project-info-feature-item span,
.ongoing-projects-grid .project-info-feature-item span {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: right;
}

.completed-projects-grid .project-info-feature-item span a,
.ongoing-projects-grid .project-info-feature-item span a {
    color: var(--primary-color);
    transition: var(--transition);
}

.completed-projects-grid .project-info-feature-item span a:hover,
.ongoing-projects-grid .project-info-feature-item span a:hover {
    color: var(--white);
    filter: brightness(1.2);
}

.completed-projects-grid .btn,
.ongoing-projects-grid .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}

@media (max-width: 992px) {

    .completed-projects-grid,
    .ongoing-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {

    .completed-projects-grid,
    .ongoing-projects-grid {
        grid-template-columns: 1fr;
    }
}

/* Project Features Badges (Grid Cards) */
.project-features-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    border-top: 1px solid var(--glass-border);
    padding-top: 1.5rem;
}

.project-features-badges .badge {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(212, 168, 67, 0.12);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: var(--transition);
    cursor: default;
}

.project-features-badges .badge i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.project-features-badges .badge:hover {
    background: rgba(212, 168, 67, 0.08);
    border-color: rgba(212, 168, 67, 0.4);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(212, 168, 67, 0.15);
}

/* Project Detail Page Styles (SEO & Refactored) */
.project-detail-section {
    padding: 50px 0 100px;
}

.project-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 2rem;
}

.project-detail-header h2 {
    color: var(--primary-color);
}

.project-detail-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.project-detail-header .progress-fill-custom {
    background: var(--primary-color);
}

.project-detail-header-right {
    text-align: right;
}

.project-detail-header-right p {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Feature grid items on details page */
.project-features-section {
    margin-top: 3rem;
    border-top: 1px solid var(--glass-border);
    padding-top: 3rem;
}

.feature-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.feature-item-card {
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-radius: 12px;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: var(--transition);
}

.feature-item-card:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(212, 168, 67, 0.12) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.feature-item-card i {
    font-size: 1.15rem;
    color: var(--primary-color);
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: inline-block;
    flex-shrink: 0;
    transition: var(--transition);
    border: none;
}

.feature-item-card:hover i {
    background: transparent;
    color: var(--white);
    transform: scale(1.1);
    box-shadow: none;
}

.feature-item-card strong {
    color: var(--text-color);
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: normal;
}

.feature-item-card span {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.project-detail-footer {
    margin-top: 3rem;
    text-align: center;
}

.btn-outline {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

.btn-outline:hover {
    background: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.2) !important;
}

/* Completed & Ongoing grid adjustments */
.completed-projects-grid .project-card h2,
.ongoing-projects-grid .project-card h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.completed-projects-grid .project-info-header p,
.ongoing-projects-grid .project-info-header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    line-height: 1.5;
    min-height: 48px;
}

.project-info-feature-item span a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.project-info-feature-item span a:hover {
    color: var(--white);
    filter: brightness(1.2);
}

.btn i {
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.img-pos-center-bottom {
    object-position: center bottom;
}

.footer-developer-info {
    margin-top: 0.5rem;
    opacity: 0.8;
}

.footer-developer-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/* Homepage Cleanups & SEO */
.blob-1 {
    top: 10%;
    left: -5%;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.06) 0%, transparent 70%);
}

.blob-2 {
    bottom: 20%;
    right: -5%;
    background: radial-gradient(circle, rgba(58, 123, 213, 0.04) 0%, transparent 70%);
}

.about-quote-title {
    font-size: 2rem;
    color: var(--white);
    margin-bottom: 1rem;
}

.about-quote-subtitle {
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: 2px;
}

.section-dark-bg {
    background: var(--accent-color) !important;
}

.smart-pulse-container {
    position: relative;
}

.smart-pulse-1 {
    top: 0;
    left: 10%;
}

.smart-pulse-2 {
    bottom: 0;
    right: 10%;
    animation-delay: 1s;
}

.section-subtitle-wide {
    text-align: center;
    color: var(--text-muted);
    max-width: 700px;
    margin: -0.5rem auto 3rem;
}

.img-pos-top {
    object-position: top;
}

.contact-container-centered {
    grid-template-columns: 1fr !important;
    text-align: center;
}

.contact-intro {
    max-width: 600px;
    margin: 0 auto 2rem;
}

.contact-links-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.text-primary {
    color: var(--primary-color) !important;
}

.map-container iframe {
    border: 0;
    filter: grayscale(100%) invert(90%) contrast(90%);
    opacity: 0.8;
    transition: var(--transition);
}

.map-container iframe:hover {
    opacity: 0.95;
}

.footer-bottom-credit {
    margin-top: 0.5rem;
    opacity: 0.8;
}

.footer-bottom-credit a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.project-detail-title {
    color: var(--white);
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
}

.info-item span a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.info-item span a:hover {
    color: var(--white);
    filter: brightness(1.2);
}

.detail-intro {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Flats Section Header & Legend */
.flats-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.flats-section-header .project-detail-title {
    margin-bottom: 0;
}

.flats-legend {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.available {
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
}

.legend-dot.sold {
    background: #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}

/* Minimal Floor Plan Layout */
.minimal-flat-plan {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.floor-row-minimal {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.2rem 1.8rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    transition: var(--transition);
}

.floor-row-minimal:hover {
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(212, 168, 67, 0.1);
}

.floor-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-shrink: 0;
    width: 190px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 3px solid var(--primary-color);
    padding-left: 0.8rem;
}

.floor-sub-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.flat-list-minimal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    flex-grow: 1;
}

.flat-item-minimal {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(212, 168, 67, 0.15);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    cursor: default;
    transition: var(--transition);
}

.flat-item-minimal .flat-no-tag {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.flat-item-minimal:not(.sold) .flat-no-tag::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--primary-color);
}

.flat-type-tag {
    color: #b5bdc4;
    font-size: 0.8rem;
    font-weight: 500;
}

.flat-item-minimal:not(.sold):hover {
    border-color: var(--primary-color);
    background: rgba(212, 168, 67, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 168, 67, 0.15);
}

.flat-item-minimal.sold {
    background: rgba(10, 10, 11, 0.4);
    border-color: rgba(255, 255, 255, 0.03);
    opacity: 0.55;
}

.flat-item-minimal.sold .flat-no-tag {
    color: rgba(255, 255, 255, 0.35);
}

.flat-item-minimal.sold .flat-no-tag::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #e74c3c;
    border-radius: 50%;
    box-shadow: 0 0 6px #e74c3c;
}

.flat-item-minimal.sold .flat-type-tag {
    color: rgba(255, 255, 255, 0.2);
}

.flat-status-tag.sold {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ff6b6b;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.15);
}

@media (max-width: 768px) {
    .flats-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .floor-row-minimal {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 1.2rem;
    }

    .floor-label {
        width: 100%;
        border-left: 3px solid var(--primary-color);
        padding-left: 0.6rem;
    }
}

/* ── Smart Experience Center ────────────────────────── */
#smart-experience {
    padding: 100px 0;
}

.simulator-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
    margin-top: 3rem;
    align-items: stretch;
}

@media (max-width: 992px) {
    .simulator-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Control Dashboard (Phone Mockup UI) */
.phone-mockup {
    width: 320px;
    height: 570px;
    margin: 0 auto;
    background: #05060a;
    border: 12px solid #14151a;
    /* graphite titanium frame */
    outline: 1.5px solid rgba(212, 168, 67, 0.3);
    /* subtle gold accent ring */
    border-radius: 40px;
    position: relative;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 0 8px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Dynamic Island Notch */
.phone-notch {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 15px;
    background: #000;
    border-radius: 12px;
    box-shadow: inset 0 0.5px 1px rgba(255, 255, 255, 0.1);
    z-index: 100;
}

/* Phone Top Status Bar */
.phone-status-bar {
    height: 38px;
    padding: 12px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    z-index: 99;
    background: #07090f;
    letter-spacing: 0.2px;
}

.phone-icons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.phone-icons i {
    font-size: 0.62rem;
}

/* Inner App Frame */
.phone-app-content {
    flex: 1;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: radial-gradient(circle at top, #0f121e 0%, #05060b 100%);
    padding-bottom: 2rem;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}


/* Hide scrollbar for clean app look */
.phone-app-content::-webkit-scrollbar {
    display: none;
}

/* App Header area */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.6rem;
    margin-bottom: 0.2rem;
}

.app-brand {
    font-size: 0.82rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1.2px;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    align-items: center;
}

.app-brand span {
    color: var(--primary-color);
}

/* Phone Bottom Home Swipe Bar */
.phone-home-indicator {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    z-index: 100;
}

.tablet-status {
    display: flex;
    gap: 5px;
}

.status-badge {
    font-size: 0.52rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    /* capsule pills */
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.status-badge.live {
    color: #34c759;
    border: 1px solid rgba(52, 199, 89, 0.25);
    background: rgba(52, 199, 89, 0.06);
}

.status-badge.security-ok {
    color: #ffd880;
    border: 1px solid rgba(212, 168, 67, 0.25);
    background: rgba(212, 168, 67, 0.06);
    transition: var(--transition);
}

.status-badge.security-warn {
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.25);
    background: rgba(255, 59, 48, 0.06);
    animation: pulseRed 1.5s infinite alternate;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #34c759;
    border-radius: 50%;
    animation: pulseGreen 1.5s infinite alternate;
}

@keyframes pulseGreen {
    0% {
        opacity: 0.4;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 8px 2px rgba(52, 199, 89, 0.4);
    }
}

@keyframes pulseRed {
    0% {
        opacity: 0.4;
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 8px 2px rgba(255, 59, 48, 0.4);
    }
}

/* Control Groups & Labels */
.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.control-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.75;
}

.control-label i {
    font-size: 0.7rem;
    color: var(--primary-color);
}

/* Light Mode Tabs */
.light-modes-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    width: 100%;
}

.mode-tab {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition);
}

.mode-tab i {
    font-size: 0.95rem;
}

.mode-tab:hover {
    color: var(--white);
}

.mode-tab.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-color);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Controls Grid — 2 columns */
.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

.control-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 52px;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.control-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 168, 67, 0.25);
    /* Gold outline glow on hover */
}

.control-card.active-card {
    background: linear-gradient(145deg, rgba(212, 168, 67, 0.22) 0%, rgba(180, 130, 30, 0.12) 60%, rgba(10, 8, 3, 0.85) 100%) !important;
    border-color: var(--primary-color) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 0 18px rgba(212, 168, 67, 0.35),
        0 0 40px rgba(212, 168, 67, 0.12) !important;
    transform: scale(1.03);
}

.control-card.active-card:hover {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        0 0 24px rgba(212, 168, 67, 0.5),
        0 0 55px rgba(212, 168, 67, 0.18) !important;
    border-color: #ffd880 !important;
    transform: scale(1.05);
}

.control-card.active-card .card-icon-title {
    color: #ffe8a0 !important;
}

.control-card.active-card .card-icon-title i {
    color: #ffd060 !important;
    text-shadow:
        0 0 8px rgba(212, 168, 67, 0.9),
        0 0 20px rgba(212, 168, 67, 0.5) !important;
    filter: drop-shadow(0 0 4px rgba(212, 168, 67, 0.8));
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card-icon-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
}

.card-icon-title i {
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: var(--transition);
}

.control-card.active-card .card-icon-title i {
    color: #ffd060;
    text-shadow:
        0 0 8px rgba(212, 168, 67, 0.9),
        0 0 20px rgba(212, 168, 67, 0.5);
    filter: drop-shadow(0 0 4px rgba(212, 168, 67, 0.8));
}

.card-body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.card-status-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.control-card.active-card .card-status-text {
    color: #ffd88a;
    font-weight: 700;
}

.control-card.security-card.active-card {
    background: linear-gradient(145deg, rgba(255, 59, 48, 0.22) 0%, rgba(200, 30, 20, 0.12) 60%, rgba(10, 3, 3, 0.85) 100%) !important;
    border-color: #ff3b30 !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        0 0 18px rgba(255, 59, 48, 0.4),
        0 0 40px rgba(255, 59, 48, 0.15) !important;
    transform: scale(1.03);
}

.control-card.security-card.active-card:hover {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 0 24px rgba(255, 59, 48, 0.55),
        0 0 55px rgba(255, 59, 48, 0.2) !important;
    border-color: #ff5e55 !important;
    transform: scale(1.05);
}

.control-card.security-card.active-card .card-icon-title {
    color: #ffb5b0 !important;
}

.control-card.security-card.active-card .card-icon-title i {
    color: #ff5e55 !important;
    text-shadow:
        0 0 8px rgba(255, 59, 48, 0.9),
        0 0 20px rgba(255, 59, 48, 0.5) !important;
    filter: drop-shadow(0 0 4px rgba(255, 59, 48, 0.8));
}



/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch input,
.hidden-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.08);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
}

input:checked+.slider {
    background-color: rgba(212, 168, 67, 0.2);
    border-color: var(--primary-color);
}

.security-card input:checked+.slider {
    background-color: rgba(255, 59, 48, 0.2);
    border-color: #ff3b30;
}

input:checked+.slider:before {
    transform: translateX(16px);
    background-color: var(--primary-color);
}

.security-card input:checked+.slider:before {
    background-color: #ff3b30;
}

/* Floor Plan & Single Room View */
.room-preview {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: rgba(10, 11, 14, 0.4);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* 3D Perspective Living Room Viewport */
.living-room-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background-color: #0d0e12;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95);
}

/* Left Window Side-Wall */
.wall-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 36%;
    height: 62%;
    background: linear-gradient(135deg, #101115, #1d1e26);
    border-right: 2px solid rgba(0, 0, 0, 0.45);
    z-index: 2;
}

/* Outside Sky View behind window */
.outside-sky-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    transition: background 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.living-room-viewport:not(.cinema-active):not(.night-active) .outside-sky-bg {
    background: linear-gradient(180deg, #4fa5ff 0%, #aadaff 100%);
}

.living-room-viewport.cinema-active .outside-sky-bg {
    background: linear-gradient(180deg, #8b4482 0%, #f18e38 100%);
    /* Sunset purple-orange */
}

.living-room-viewport.night-active .outside-sky-bg {
    background: linear-gradient(180deg, #03040b 0%, #0c122b 100%);
}

.sky-sun-moon {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    top: 15px;
    right: 15px;
    transition: all 1.5s ease;
    z-index: 1;
}

.living-room-viewport:not(.cinema-active):not(.night-active) .sky-sun-moon {
    background-color: #ffe680;
    box-shadow: 0 0 15px #ffe680;
}

.living-room-viewport.cinema-active .sky-sun-moon {
    background-color: #ff7d40;
    box-shadow: 0 0 20px #ff5900;
    transform: translateY(20px);
}

.living-room-viewport.night-active .sky-sun-moon {
    background-color: #d1d5db;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    transform: scale(0.85);
}

.sky-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70px 100px, #fff, transparent),
        radial-gradient(1px 1px at 120px 40px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 150px 80px, #fff, transparent);
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 1;
}

.living-room-viewport.night-active .sky-stars {
    opacity: 0.65;
}

/* Nature Forest Silhouette at bottom of window */
.nature-silhouette {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 35%;
    background-color: #1a4224;
    clip-path: polygon(0% 85%, 8% 72%, 15% 78%, 26% 65%, 36% 75%, 48% 57%,
            58% 71%, 68% 53%, 78% 65%, 88% 49%, 95% 61%, 100% 51%,
            100% 100%, 0% 100%);
    z-index: 2;
    transition: background-color 1.5s ease;
}

.living-room-viewport.cinema-active .nature-silhouette {
    background-color: #3b173f;
}

.living-room-viewport.night-active .nature-silhouette {
    background-color: #030611;
}

/* Glass Window Container */
.room-window-container {
    position: absolute;
    top: 16%;
    left: 9%;
    width: 25%;
    height: 44%;
    z-index: 5;
    border: 6px solid #1c1d24;
    border-radius: 4px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.window-glass {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 80%),
        linear-gradient(125deg, transparent 38%, rgba(255, 255, 255, 0.15) 41%, rgba(255, 255, 255, 0.15) 44%, transparent 47%),
        linear-gradient(125deg, transparent 53%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.08) 57%, transparent 59%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.15);
}

/* Glass pane center vertical frame divider */
.window-glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: rgba(28, 29, 36, 0.95);
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4), -1px 0 2px rgba(255, 255, 255, 0.05);
    z-index: 4;
}

/* Glass pane center horizontal frame divider */
.window-glass::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(28, 29, 36, 0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 -1px 2px rgba(255, 255, 255, 0.05);
    z-index: 4;
}

/* Shutter blades sliding down */
.window-shutter-slats {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #2a2b33 0%, #15161b 100%);
    border-bottom: 4px solid var(--primary-color);
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.4);
    z-index: 4;
    transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.window-shutter-slats span {
    display: block;
    height: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.living-room-viewport.shutter-closed .window-shutter-slats {
    height: 100%;
}

/* Horizontal Window Curtains */
.window-curtain-left,
.window-curtain-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 6;
    transition: transform 2.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.window-curtain-left {
    left: 0;
    transform: translateX(-92%);
    background: repeating-linear-gradient(90deg,
            rgba(230, 220, 200, 0.85),
            rgba(230, 220, 200, 0.85) 6px,
            rgba(200, 190, 170, 0.95) 10px,
            rgba(240, 230, 210, 0.8) 14px);
    border-right: 1.5px solid rgba(0, 0, 0, 0.2);
}

.window-curtain-right {
    right: 0;
    transform: translateX(92%);
    background: repeating-linear-gradient(-90deg,
            rgba(230, 220, 200, 0.85),
            rgba(230, 220, 200, 0.85) 6px,
            rgba(200, 190, 170, 0.95) 10px,
            rgba(240, 230, 210, 0.8) 14px);
    border-left: 1.5px solid rgba(0, 0, 0, 0.2);
}

/* Sliding active states */
.living-room-viewport.curtain-closed .window-curtain-left,
.living-room-viewport.curtain-closed .window-curtain-right {
    transform: translateX(0);
}

/* Back Wall */
.wall-back {
    position: absolute;
    top: 0;
    left: 36%;
    width: 64%;
    height: 62%;
    background-color: #17181f;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Luxury Wood Wall Panels */
.wall-wood-panels {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, #181920, #181920 30px, #13141a 30px, #13141a 31px);
    opacity: 0.95;
}

/* TV & Console */
.tv-ambilight-glow {
    position: absolute;
    bottom: 20%;
    left: 0%;
    width: 78%;
    height: 65%;
    background: radial-gradient(circle, rgba(212, 168, 67, 0) 0%, transparent 70%);
    filter: blur(28px);
    z-index: 1;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.living-room-viewport.tv-active .tv-ambilight-glow {
    background: radial-gradient(circle, rgba(212, 168, 67, 0.4) 0%, rgba(212, 168, 67, 0.15) 50%, transparent 80%);
    opacity: 1;
}

.living-room-viewport.cinema-active.tv-active .tv-ambilight-glow {
    background: radial-gradient(circle, rgba(212, 168, 67, 0.3) 0%, rgba(212, 168, 67, 0.1) 50%, transparent 75%);
    opacity: 0.85;
}

.tv-console-unit {
    position: absolute;
    bottom: 10%;
    left: 6%;
    width: 66%;
    height: 60%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.tv-screen-box {
    width: 85%;
    aspect-ratio: 16/9;
    background-color: #050507;
    border: 4px solid #0b0c0f;
    border-radius: 4px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
    transition: border-color 0.5s ease;
}

.tv-active .tv-screen-box {
    border-color: #1a1c22;
    cursor: pointer;
}

.tv-card-controls {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.control-card.active-card .tv-card-controls {
    opacity: 0.7;
    pointer-events: auto;
}

.control-card.active-card .tv-card-controls:hover {
    opacity: 1;
}

.card-btn-up,
.card-btn-down {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 5px;
    padding: 0;
    transition: all 0.2s ease;
}

.control-card.active-card .card-btn-up,
.control-card.active-card .card-btn-down {
    color: var(--primary-color);
    border-color: rgba(212, 168, 67, 0.2);
    background: rgba(212, 168, 67, 0.08);
}

.card-btn-up:hover,
.card-btn-down:hover {
    background: var(--primary-color) !important;
    color: #0b0c10 !important;
    border-color: var(--primary-color) !important;
    transform: scale(1.15);
}



.tv-video-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 75%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tv-active .tv-video-glow {
    opacity: 1;
    animation: tvFlicker 3s infinite alternate;
}

@keyframes tvFlicker {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.95;
    }

    100% {
        opacity: 0.8;
    }
}

.tv-video-content {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a1931 0%, #15305b 50%, #000 100%);
    opacity: 0;
    transform: scale(0.96);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.tv-active .tv-video-content {
    opacity: 1;
    transform: scale(1);
}

/* Movie Simulation Container */
.movie-simulation {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.tv-active .movie-simulation {
    animation: movieStart 1s forwards ease-in-out;
}

@keyframes movieStart {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Space-themed movie scene style */
.movie-scene {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, #4a154b 0%, #0b071a 70%);
    overflow: hidden;
}

/* Starfield animating */
.starfield {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10px 10px, #fff 100%, transparent),
        radial-gradient(1.5px 1.5px at 50px 80px, #fff 100%, transparent),
        radial-gradient(1px 1px at 90px 30px, #fff 100%, transparent),
        radial-gradient(2px 2px at 140px 120px, #ffd880 100%, transparent);
    animation: starsDrift 15s infinite linear;
}

@keyframes starsDrift {
    0% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.1) translate(-3px, 2px);
    }

    100% {
        transform: scale(1) translate(0, 0);
    }
}

/* Distant glowing planet */
.distant-planet {
    position: absolute;
    top: 20%;
    right: 20%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff52a2 0%, #300063 80%);
    box-shadow: 0 0 10px rgba(255, 82, 162, 0.4);
    animation: planetOrbit 12s infinite ease-in-out;
}

@keyframes planetOrbit {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-2px) scale(1.06);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Spaceship fly-by animation */
.space-ship {
    position: absolute;
    bottom: 30%;
    left: -20%;
    width: 18px;
    height: 6px;
    background-color: #f1f3f5;
    clip-path: polygon(0 40%, 80% 0, 100% 50%, 80% 100%, 0 60%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
    animation: spaceshipFly 6s infinite linear;
}

/* Animates immediately on tv-active */

@keyframes spaceshipFly {
    0% {
        left: -20%;
        bottom: 25%;
        transform: rotate(5deg) scale(0.6);
    }

    100% {
        left: 120%;
        bottom: 45%;
        transform: rotate(5deg) scale(1);
    }
}

/* Laser fire animation synced with fly-by */
.laser-beam {
    position: absolute;
    width: 10px;
    height: 1.5px;
    background-color: #ff3b30;
    box-shadow: 0 0 4px #ff3b30;
    opacity: 0;
    animation: laserFire 6s infinite linear;
}

/* Animates immediately on tv-active */

@keyframes laserFire {

    0%,
    30% {
        left: -10%;
        bottom: 25%;
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    45% {
        left: 55%;
        bottom: 34%;
        opacity: 0;
    }

    100% {
        left: 120%;
        bottom: 45%;
        opacity: 0;
    }
}



.floating-shelf {
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, #111216, #07080a);
    border-radius: 2px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    margin-top: 15px;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.living-room-viewport.lights-on-active .floating-shelf {
    box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.5),
        0 4px 20px rgba(255, 204, 0, 0.75),
        0 10px 40px rgba(255, 204, 0, 0.4);
    background: linear-gradient(to bottom, #1d1e26, #ffd880);
}

/* Ceiling */
.room-ceiling {
    position: absolute;
    top: 0;
    left: 36%;
    width: 64%;
    height: 12%;
    background: #0f1014;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    z-index: 3;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 15%;
}

.spotlight {
    width: 10px;
    height: 4px;
    background: #23252e;
    border-radius: 50% 50% 0 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    position: relative;
}

.spotlight::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 140px;
    background: linear-gradient(to bottom, rgba(255, 204, 0, 0.2) 0%, rgba(255, 204, 0, 0) 80%);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.8s ease;
}

.spotlight:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ffcc00;
    box-shadow: 0 0 6px #ffcc00;
    opacity: 0.15;
    transition: var(--transition);
}

.living-room-viewport.cinema-active .spotlight:after {
    opacity: 0.8;
}

.living-room-viewport.lights-on-active .spotlight::before {
    opacity: 1;
}

.living-room-viewport.lights-on-active .spotlight:after {
    opacity: 0.85;
    box-shadow: 0 0 10px #ffcc00, 0 0 20px rgba(255, 204, 0, 0.4);
}

/* Floor */
.room-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38%;
    background-color: #19120e;
    z-index: 3;
    box-shadow: inset 0 15px 30px rgba(0, 0, 0, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.floor-wood-planks {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(0, 0, 0, 0.2) 50px, rgba(0, 0, 0, 0.2) 52px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent 40%);
}

.sofa-shadow {
    position: absolute;
    bottom: 5%;
    left: 40%;
    width: 45%;
    height: 30px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    filter: blur(8px);
    z-index: 1;
}

/* AC Unit mounted */
.ac-mounted-unit {
    position: absolute;
    top: 4%;
    left: 7%;
    width: 22%;
    z-index: 6;
}

.ac-body {
    width: 100%;
    height: 18px;
    background: #e2e2e7;
    border-radius: 2px 2px 5px 5px;
    border-bottom: 3px solid #acacb3;
    position: relative;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.ac-flap {
    position: absolute;
    bottom: 1px;
    left: 5%;
    width: 90%;
    height: 2px;
    background: #b6b6bd;
    transition: transform 0.5s ease;
}

.ac-active .ac-flap {
    transform: rotateX(60deg) translateY(1px);
}

.ac-indicator {
    position: absolute;
    right: 8px;
    top: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #ff3b30;
    transition: var(--transition);
}

.ac-active .ac-indicator {
    background-color: #34c759;
    box-shadow: 0 0 5px #34c759;
}

.ac-breeze-flow {
    position: absolute;
    top: 18px;
    left: 5%;
    width: 90%;
    height: 95px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
}

.ac-active .ac-breeze-flow {
    opacity: 1;
}

.ac-breeze-flow span {
    position: absolute;
    left: 5%;
    width: 90%;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border-bottom: 2.5px solid rgba(0, 220, 255, 0.85);
    filter: blur(1px);
    box-shadow: 0 4px 12px rgba(0, 220, 255, 0.45);
    opacity: 0;
    animation: breezeDownward 2.2s infinite linear;
}

.ac-breeze-flow span:nth-child(1) {
    animation-delay: 0s;
}

.ac-breeze-flow span:nth-child(2) {
    animation-delay: 0.7s;
}

.ac-breeze-flow span:nth-child(3) {
    animation-delay: 1.4s;
}

@keyframes breezeDownward {
    0% {
        top: 0;
        transform: scaleX(0.7) translateY(0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: 0.8;
    }

    100% {
        top: 80px;
        transform: scaleX(1.1) translateY(5px);
        opacity: 0;
    }
}

/* Interior Elements (Luxury Furniture) */
.interior-elements {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

/* Modern luxury sectional sofa */
.luxury-sofa {
    position: absolute;
    bottom: 5%;
    left: 40%;
    width: 45%;
    height: 85px;
    z-index: 6;
}

.sofa-back-rest {
    width: 100%;
    height: 32px;
    background: linear-gradient(to bottom, #2b2e3a, #1a1c23);
    border-radius: 4px 4px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
}

.sofa-seats {
    position: absolute;
    bottom: 24px;
    left: 12px;
    width: calc(100% - 24px);
    height: 52px;
    display: flex;
    z-index: 2;
}

.sofa-seats span {
    flex: 1;
    background: linear-gradient(to bottom, #353846, #2e313d);
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.05);
    margin: 0 1px;
}

.sofa-pillows {
    position: absolute;
    bottom: 24px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 30px;
    z-index: 3;
}

.pillow {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.pillow.orange {
    background-color: #d4a843;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(6px) rotate(-8deg);
}

.sofa-armrests {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: space-between;
    z-index: 4;
}

.sofa-armrests span {
    width: 14px;
    height: 100%;
    background: linear-gradient(to bottom, #242630, #1b1d24);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.arm-left {
    margin-left: -8px;
}

.arm-right {
    margin-right: -8px;
}

/* Floor Lamp & glow cone */
.floor-lamp-unit {
    position: absolute;
    bottom: 12%;
    left: 33%;
    width: 35px;
    height: 165px;
    z-index: 5;
}

.lamp-glow-cone {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 120px;
    background: linear-gradient(to bottom, rgba(212, 168, 67, 0.5) 0%, rgba(212, 168, 67, 0) 80%);
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: -1;
}

.living-room-viewport.night-active .lamp-glow-cone,
.living-room-viewport.lights-on-active .lamp-glow-cone {
    opacity: 1;
}

.living-room-viewport.cinema-active .lamp-glow-cone {
    opacity: 0.6;
}

.lamp-shade {
    width: 26px;
    height: 20px;
    background-color: #fcfcfd;
    border-radius: 5px 5px 0 0;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    z-index: 2;
    transition: background-color 0.8s ease;
}

.living-room-viewport.night-active .lamp-shade,
.living-room-viewport.cinema-active .lamp-shade,
.living-room-viewport.lights-on-active .lamp-shade {
    background-color: #ffd880;
    box-shadow: 0 0 15px rgba(255, 216, 128, 0.8);
}

.lamp-pole {
    width: 3px;
    height: 135px;
    background-color: #3b3d4a;
    margin: 0 auto;
}

.lamp-base {
    width: 22px;
    height: 6px;
    background-color: #1a1b22;
    margin: 0 auto;
    border-radius: 3px;
}

/* Lush Green Indoor Plant — Realistic */
.house-plant-unit {
    position: absolute;
    bottom: 10%;
    right: 3%;
    width: 44px;
    height: 90px;
    z-index: 5;
}

.house-plant-unit::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(52, 199, 89, 0.55) 0%, rgba(52, 199, 89, 0.15) 50%, transparent 75%);
    filter: blur(10px);
    z-index: -1;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    pointer-events: none;
}

.living-room-viewport.cinema-active .house-plant-unit::before {
    opacity: 1;
}

.plant-pot {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 28px;
    /* Terracotta body with gradient for depth */
    background: linear-gradient(160deg, #d4845e 0%, #b05d3a 55%, #8c4325 100%);
    border-radius: 2px 2px 5px 5px;
    box-shadow:
        inset -3px 0 5px rgba(0,0,0,0.25),
        inset 2px 0 4px rgba(255,255,255,0.08),
        0 6px 12px rgba(0,0,0,0.5);
    overflow: visible;
}

/* Pot rim / collar at the top */
.pot-rim {
    position: absolute;
    top: -5px;
    left: -3px;
    width: 32px;
    height: 7px;
    background: linear-gradient(to bottom, #e09070 0%, #b86440 100%);
    border-radius: 3px 3px 1px 1px;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
}

/* Soil surface inside rim */
.pot-soil {
    position: absolute;
    top: -2px;
    left: 2px;
    width: 22px;
    height: 6px;
    background: linear-gradient(to bottom, #3d2a1a 0%, #5a3a22 100%);
    border-radius: 2px;
    overflow: hidden;
}

.soil-texture {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(100,65,30,0.5) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(80,50,20,0.4) 0%, transparent 50%);
}

/* Moisture sheen on pot when watered */
.pot-highlight {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 16px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.14) 0%, transparent 100%);
    border-radius: 3px;
    pointer-events: none;
}

/* Shadow stripe for roundness illusion */
.pot-shadow-stripe {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 4px;
    height: 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, transparent 100%);
    border-radius: 3px;
    pointer-events: none;
}

/* Soil sensor probe visual element */
.plant-pot::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 55%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 9px;
    background: linear-gradient(to bottom, #888, #444);
    border-radius: 1px;
    z-index: 4;
}

/* Soil sensor LED status */
.pot-sensor-led {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #ff5e57;
    /* Amber/red representing dry soil */
    box-shadow: 0 0 4px rgba(255, 94, 87, 0.8);
    transition: all 0.5s ease;
    z-index: 5;
}

.living-room-viewport.watering-active .pot-sensor-led {
    background-color: #007aff;
    box-shadow: 0 0 8px #007aff, 0 0 15px #007aff;
    animation: pulseBlueLed 1s infinite alternate ease-in-out;
}

.living-room-viewport.soil-wet .pot-sensor-led {
    background-color: #34c759;
    /* Healthy green */
    box-shadow: 0 0 6px #34c759;
}

@keyframes pulseBlueLed {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

/* ── Plant Stems ── */
.plant-stem {
    position: absolute;
    bottom: 22px;
    width: 1.5px;
    border-radius: 2px;
    z-index: 3;
}

.stem-center {
    left: 50%;
    transform: translateX(-50%);
    height: 42px;
    background: linear-gradient(to top, #1a6b32 0%, #2a8c47 60%, #22743d 100%);
}

.stem-left {
    left: 32%;
    height: 32px;
    background: linear-gradient(to top, #1a6b32 0%, #248040 100%);
    transform: rotate(-12deg);
    transform-origin: bottom center;
}

.stem-right {
    right: 32%;
    height: 28px;
    background: linear-gradient(to top, #1a6b32 0%, #2a9050 100%);
    transform: rotate(14deg);
    transform-origin: bottom center;
}

/* ── Realistic Leaves ── */
.plant-leaf {
    position: absolute;
    transform-origin: bottom center;
    border-radius: 50% 5% 50% 5%;
    transition: transform 0.6s ease, filter 0.6s ease;
    overflow: hidden;
}

/* Leaf vein */
.leaf-vein {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 90%;
    background: linear-gradient(to top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.06) 100%);
    border-radius: 1px;
    pointer-events: none;
}

/* ─ Leaf 1: left outer ─ */
.leaf-1 {
    width: 10px;
    height: 26px;
    bottom: 38px;
    left: 2px;
    --rot-base: -52deg;
    transform: rotate(var(--rot-base));
    background: linear-gradient(135deg, #28a855 0%, #1a7a3d 50%, #125c2b 100%);
    box-shadow: inset -1px 0 3px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
}

/* ─ Leaf 2: right outer ─ */
.leaf-2 {
    width: 10px;
    height: 25px;
    bottom: 36px;
    right: 2px;
    --rot-base: 50deg;
    transform: rotate(var(--rot-base));
    background: linear-gradient(135deg, #22a04e 0%, #16773a 50%, #0f5828 100%);
    box-shadow: inset -1px 0 3px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.18);
}

/* ─ Leaf 3: center-left ─ */
.leaf-3 {
    width: 9px;
    height: 32px;
    bottom: 40px;
    left: 10px;
    --rot-base: -20deg;
    transform: rotate(var(--rot-base));
    background: linear-gradient(135deg, #30b560 0%, #1e8a44 40%, #145e2e 100%);
    box-shadow: inset -1px 0 3px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.18);
}

/* ─ Leaf 4: center-right ─ */
.leaf-4 {
    width: 9px;
    height: 30px;
    bottom: 38px;
    right: 10px;
    --rot-base: 22deg;
    transform: rotate(var(--rot-base));
    background: linear-gradient(135deg, #26a854 0%, #188040 40%, #0f5c2c 100%);
    box-shadow: inset -1px 0 3px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.16);
}

/* ─ Leaf 5: top-center upright ─ */
.leaf-5 {
    width: 8px;
    height: 28px;
    bottom: 52px;
    left: 50%;
    margin-left: -4px;
    --rot-base: -3deg;
    transform: rotate(var(--rot-base));
    background: linear-gradient(135deg, #3cc96a 0%, #22944a 45%, #166035 100%);
    box-shadow: inset -1px 0 3px rgba(0,0,0,0.14), 0 2px 5px rgba(0,0,0,0.16);
    border-radius: 50% 5% 50% 5%;
}

/* ─ Leaf 6: low-left small ─ */
.leaf-6 {
    width: 8px;
    height: 18px;
    bottom: 24px;
    left: 4px;
    --rot-base: -65deg;
    transform: rotate(var(--rot-base));
    background: linear-gradient(135deg, #1e9e4a 0%, #14703a 60%, #0d502a 100%);
    box-shadow: inset -1px 0 2px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.18);
    opacity: 0.9;
}

/* ─ Leaf 7: low-right small ─ */
.leaf-7 {
    width: 8px;
    height: 17px;
    bottom: 23px;
    right: 4px;
    --rot-base: 62deg;
    transform: rotate(var(--rot-base));
    background: linear-gradient(135deg, #1ea04a 0%, #136e38 60%, #0c4e28 100%);
    box-shadow: inset -1px 0 2px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.18);
    opacity: 0.88;
}

.living-room-viewport.watering-active .plant-leaf {
    animation: plantWiggle 2s ease-in-out infinite alternate;
}

/* When soil is wet: leaves get a greener, healthier shine */
.living-room-viewport.soil-wet .plant-leaf {
    filter: saturate(1.4) brightness(1.08);
}

@keyframes plantWiggle {
    0% {
        transform: rotate(var(--rot-base));
    }
    100% {
        transform: rotate(calc(var(--rot-base) + 4deg)) scale(1.03);
    }
}

/* Smart Watering Arm/Pipe extending from right wall */
.watering-arm {
    position: absolute;
    top: 25px;
    /* positioned above the leaves */
    right: 0;
    width: 0px;
    /* hidden/retracted by default */
    height: 3px;
    background: linear-gradient(to bottom, #7a7e85 0%, #4a4d52 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5px;
    z-index: 12;
    opacity: 0;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.living-room-viewport.watering-active .watering-arm {
    width: 25px;
    /* extends exactly over the plant pot */
    opacity: 1;
}

/* Nozzle tip pointing down */
.arm-nozzle {
    position: absolute;
    left: -2px;
    top: 1px;
    width: 4px;
    height: 4px;
    background-color: #2c2e33;
    border-radius: 1px 1px 2px 2px;
}

.arm-nozzle::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 1px;
    width: 2px;
    height: 2px;
    background-color: #1a1b1d;
}

/* Water sprinkler droplets falling under the extended nozzle */
.plant-water-sprinkler {
    position: absolute;
    top: 28px;
    left: 20px;
    /* centered exactly under the nozzle tip */
    width: 6px;
    height: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: 0.8s;
    /* wait for the arm to fully extend */
    z-index: 10;
}

.living-room-viewport.watering-active .plant-water-sprinkler {
    opacity: 1;
}

.plant-water-sprinkler .drop {
    position: absolute;
    width: 2px;
    height: 6px;
    background-color: #007aff;
    border-radius: 50%;
    opacity: 0;
}

.living-room-viewport.watering-active .plant-water-sprinkler .drop {
    animation: dripWater 0.8s linear infinite;
}

.plant-water-sprinkler .d-1 {
    left: 20%;
    animation-delay: 0.8s !important;
    /* start after arm is extended */
}

.plant-water-sprinkler .d-2 {
    left: 50%;
    animation-delay: 1.05s !important;
}

.plant-water-sprinkler .d-3 {
    left: 80%;
    animation-delay: 1.3s !important;
}

@keyframes dripWater {
    0% {
        top: 0;
        opacity: 0;
        transform: scaleY(1);
    }

    30% {
        opacity: 0.8;
        transform: scaleY(1.5);
    }

    80% {
        opacity: 0.8;
        top: 80%;
        transform: scaleY(1.2);
    }

    100% {
        top: 100%;
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Ambient Color Overlay (blend mask) */
.room-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    transition: background 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    mix-blend-mode: multiply;
}

/* Ambient Mode Conditions */
.living-room-viewport:not(.cinema-active):not(.night-active):not(.lights-on-active) .room-ambient {
    background: rgba(255, 245, 220, 0.05);
    /* Sunlit Day */
}

.living-room-viewport.cinema-active .room-ambient {
    background: rgba(15, 18, 32, 0.62);
    /* Dimmed movie room */
}

.living-room-viewport.night-active .room-ambient {
    background: rgba(6, 8, 22, 0.8);
    /* Cozy Night */
}

.living-room-viewport.lights-on-active .room-ambient {
    background: rgba(25, 20, 15, 0.45);
    /* Warm cozy ambient */
}

/* Day Mode Sun Rays */
.room-ambient.day-sunrays {
    background: linear-gradient(135deg, rgba(255, 235, 170, 0.15) 0%, transparent 60%);
    mix-blend-mode: screen;
    opacity: 1;
    transition: opacity 1.5s ease;
    z-index: 11;
}

.living-room-viewport.cinema-active~.day-sunrays,
.living-room-viewport.night-active~.day-sunrays,
.living-room-viewport.lights-on-active~.day-sunrays,
.living-room-viewport.lights-on-active .day-sunrays {
    opacity: 0;
}

/* AI Security Overlay */
.security-scanner-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.security-active .security-scanner-grid {
    opacity: 1;
}

/* Vertical and horizontal lasers */
.laser-vertical-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #ff3b30, transparent);
    box-shadow: 0 0 10px #ff3b30;
    animation: verticalLaser 4s infinite ease-in-out;
}

.laser-horizontal-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, #ff3b30, transparent);
    box-shadow: 0 0 10px #ff3b30;
    animation: horizontalLaser 4s infinite ease-in-out;
    animation-delay: 2s;
}

@keyframes verticalLaser {
    0% {
        left: 0%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 0%;
    }
}

@keyframes horizontalLaser {
    0% {
        top: 0%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 0%;
    }
}

/* HUD security targeting outlines */
.hud-scanning-target {
    position: absolute;
    border: 1px dashed rgba(255, 59, 48, 0.45);
    background: rgba(255, 59, 48, 0.02);
    box-sizing: border-box;
}

.hud-scanning-target:before,
.hud-scanning-target:after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1.5px solid #ff3b30;
}

.t-window {
    top: 8%;
    left: 3%;
    width: 30%;
    height: 54%;
}

.t-window:before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.t-window:after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.t-door {
    bottom: 8%;
    left: 53%;
    width: 20%;
    height: 52%;
}

.t-door:before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.t-door:after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

/* HUD badge styling */
.security-status-hud {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 11, 14, 0.9);
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 6px;
    padding: 6px 14px;
    display: flex;
    gap: 15px;
    font-size: 0.65rem;
    font-family: monospace;
    font-weight: bold;
    letter-spacing: 1.5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 15;
}

.hud-scanner-text {
    color: #ff3b30;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-status-text {
    color: #34c759;
}

/* ── Robot Vacuum Charger Dock ───────────────────────── */
.vacuum-dock {
    position: absolute;
    bottom: 6%;
    left: 8%;
    width: 9px;
    height: 18px;
    background: linear-gradient(135deg, #2a2b36 0%, #15161e 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px 0 0 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 4;
}

.vacuum-dock::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 3px;
    width: 3px;
    height: 3px;
    background-color: #34c759;
    border-radius: 50%;
    box-shadow: 0 0 3px #34c759;
}

/* ── Robot Vacuum Cleaner ─────────────────────────────── */
.robot-vacuum {
    position: absolute;
    bottom: calc(6% - 9px);
    left: 9.6%;
    width: 36px;
    height: 36px;
    /* perfect 2D circle */
    z-index: 7;
    transform: none;
    /* flat 2D, no rotateX */
    transform-style: preserve-3d;
    transition: bottom 1.2s cubic-bezier(0.25, 1, 0.5, 1),
        left 1.2s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.living-room-viewport.vacuum-active .robot-vacuum {
    animation: vacuumPatrol 30s ease-in-out infinite;
}

.vacuum-body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    /* Let side brushes peek out */
}

.vacuum-direction-wrap {
    position: absolute;
    inset: 0;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transform: rotate(-90deg);
    /* Facing left (dock) by default when parked */
}

.living-room-viewport.vacuum-active .vacuum-direction-wrap {
    animation: vacuumRotate 30s ease-in-out infinite;
}

/* Solid Top Shell of the Vacuum */
.vacuum-chassis {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 30%, #3a3b45 0%, #17181f 70%, #0d0e12 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    z-index: 2;
    /* Sits on top of the brushes */
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* LDS Laser Turret bezel on the chassis */
.vacuum-chassis::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #3a3d4a 0%, #1b1c24 80%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

/* LDS Laser Indicator Light */
.vacuum-chassis::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3c3c3c;
    z-index: 4;
    transition: all 0.3s ease;
}

.living-room-viewport.vacuum-active .vacuum-chassis::after {
    background: #007aff;
    box-shadow: 0 0 6px #007aff, 0 0 12px #007aff;
}

/* Spinning Side Brushes Container */
.vacuum-brush {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    transform: none;
    transform-origin: center;
}

.living-room-viewport.vacuum-active .vacuum-brush {
    opacity: 1;
}

/* Custom Conic Gradient for Brush Spokes */
.vacuum-brush::before,
.vacuum-brush::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.95) 0deg 15deg,
            transparent 15deg 60deg,
            rgba(255, 255, 255, 0.95) 60deg 75deg,
            transparent 75deg 120deg,
            rgba(255, 255, 255, 0.95) 120deg 135deg,
            transparent 135deg 180deg,
            rgba(255, 255, 255, 0.95) 180deg 195deg,
            transparent 195deg 240deg,
            rgba(255, 255, 255, 0.95) 240deg 255deg,
            transparent 255deg 300deg,
            rgba(255, 255, 255, 0.95) 300deg 315deg,
            transparent 315deg 360deg);
}

.vacuum-brush::before {
    top: -2px;
    left: 6px;
}

.vacuum-brush::after {
    top: -2px;
    right: 6px;
}

.living-room-viewport.vacuum-active .vacuum-brush::before {
    animation: spinBrushLeft 0.5s linear infinite;
}

.living-room-viewport.vacuum-active .vacuum-brush::after {
    animation: spinBrushRight 0.5s linear infinite;
}

@keyframes spinBrushLeft {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes spinBrushRight {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Front bumper camera window - curved to match the circular body */
.vacuum-sensor {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top: 2.5px solid #0a0a0d;
    z-index: 3;
    pointer-events: none;
}

/* Status LED */
.vacuum-indicator {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #3c3c3c;
    z-index: 5;
    transition: all 0.3s ease;
}

.living-room-viewport.vacuum-active .vacuum-indicator {
    background: #34c759;
    box-shadow: 0 0 4px rgba(52, 199, 89, 0.8);
    animation: blinkLed 1.2s infinite alternate ease-in-out;
}

@keyframes blinkLed {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

.living-room-viewport.vacuum-active .vacuum-chassis {
    box-shadow: 0 0 12px rgba(0, 122, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.8);
    border-color: rgba(0, 122, 255, 0.4);
}

/* Patrolling movement animation in flat 2D */
@keyframes vacuumPatrol {
    0% {
        bottom: calc(6% - 9px);
        left: 9.6%;
    }

    15% {
        bottom: 9%;
        left: 28%;
    }

    30% {
        bottom: 3%;
        left: 22%;
    }

    50% {
        bottom: 2.5%;
        left: 60%;
    }

    65% {
        bottom: 3%;
        left: 88%;
    }

    75% {
        bottom: 9%;
        left: 90%;
    }

    85% {
        bottom: 3%;
        left: 50%;
    }

    95% {
        bottom: 6%;
        left: 20%;
    }

    100% {
        bottom: calc(6% - 9px);
        left: 9.6%;
    }
}

@keyframes vacuumPatrolMobile {
    0% {
        bottom: calc(6% - 6px);
        left: 9.2%;
    }

    15% {
        bottom: 9%;
        left: 28%;
    }

    30% {
        bottom: 3%;
        left: 22%;
    }

    50% {
        bottom: 2.5%;
        left: 60%;
    }

    65% {
        bottom: 3%;
        left: 88%;
    }

    75% {
        bottom: 9%;
        left: 90%;
    }

    85% {
        bottom: 3%;
        left: 50%;
    }

    95% {
        bottom: 6%;
        left: 20%;
    }

    100% {
        bottom: calc(6% - 6px);
        left: 9.2%;
    }
}

/* Rotational animation for Roomba's internal components to face direction of travel */
@keyframes vacuumRotate {
    0% {
        transform: rotate(-90deg);
        /* Facing left (dock) */
    }

    15% {
        transform: rotate(45deg);
        /* Facing up-right */
    }

    30% {
        transform: rotate(-135deg);
        /* Facing down-left */
    }

    50% {
        transform: rotate(90deg);
        /* Facing right */
    }

    65% {
        transform: rotate(90deg);
        /* Facing right */
    }

    75% {
        transform: rotate(0deg);
        /* Facing up */
    }

    85% {
        transform: rotate(-90deg);
        /* Facing left */
    }

    95% {
        transform: rotate(-90deg);
        /* Facing left */
    }

    100% {
        transform: rotate(-90deg);
        /* Facing left (dock) */
    }
}

/* Dust trail effect */
.vacuum-dust-trail {
    position: absolute;
    bottom: -6px;
    left: 10%;
    width: 80%;
    height: 4px;
    background: radial-gradient(ellipse, rgba(180, 180, 180, 0.15) 0%, transparent 80%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.living-room-viewport.vacuum-active .vacuum-dust-trail {
    opacity: 0.8;
    animation: dustPuff 1s ease-out infinite;
}

@keyframes dustPuff {
    0% {
        transform: scaleX(0.5);
        opacity: 0.5;
    }

    50% {
        transform: scaleX(1.2);
        opacity: 0.2;
    }

    100% {
        transform: scaleX(0.5);
        opacity: 0.5;
    }
}

/* Boiler (Kombi) Unit styling */

.boiler-unit {
    position: absolute;
    top: 16%;
    left: 4%;
    width: 38px;
    height: 68px;
    background: linear-gradient(135deg, #f5f5f7 0%, #e1e1e6 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.9);
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 5px;
    box-sizing: border-box;
}

.boiler-brand {
    font-size: 5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 5px;
    text-shadow: 0 0 3px rgba(212, 168, 67, 0.2);
}

.boiler-display {
    background: #0d0e12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: auto;
}

.temp-display {
    font-family: monospace;
    font-size: 6px;
    color: var(--text-muted);
    font-weight: bold;
    transition: color 0.4s ease;
}

.living-room-viewport.boiler-active .temp-display {
    color: #34c759;
    text-shadow: 0 0 4px rgba(52, 199, 89, 0.4);
}

.flame-window {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #15151c;
    border: 1px solid #2d2d3a;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
    transition: all 0.4s ease;
}

.living-room-viewport.boiler-active .flame-window {
    background: #110e1a;
    border-color: #ff5500;
    box-shadow: 0 0 8px rgba(255, 85, 0, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.8);
}

.fire-flame {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    width: 8px;
    height: 10px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.living-room-viewport.boiler-active .fire-flame {
    opacity: 1;
    animation: igniteBoiler 0.15s infinite alternate ease-in-out;
}

.flame-outer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #ff3300 10%, #ffaa00 70%, transparent 100%);
    border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
}

.flame-core {
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 60%;
    background: linear-gradient(to top, #0099ff, #ffffff);
    border-radius: 50% 50% 20% 20%;
    z-index: 2;
}

@keyframes igniteBoiler {
    0% {
        transform: translateX(-50%) scale(0.85) rotate(-2deg);
    }

    50% {
        transform: translateX(-50%) scale(1.05) rotate(2deg);
        filter: drop-shadow(0 0 2px #ffaa00);
    }

    100% {
        transform: translateX(-50%) scale(0.95) rotate(-1deg);
    }
}

.boiler-pipes {
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: absolute;
    bottom: -8px;
    left: 0;
    padding: 0 4px;
    box-sizing: border-box;
}

.boiler-pipes span {
    display: block;
    width: 3px;
    height: 8px;
    background: linear-gradient(90deg, #7a7a85 0%, #a1a1ab 100%);
    border-radius: 0 0 1px 1px;
}

/* Thermostat (Termometre) styling */
.thermostat-unit {
    position: absolute;
    top: 30%;
    left: 39%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3a3b45 0%, #15161c 100%);
    /* titanium metallic dial bezel */
    border: 2px solid #22232a;
    border-radius: 50%;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.25);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.thermostat-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    /* notched dial ticks */
    transition: all 0.5s ease;
}

/* Active glows */
.thermostat-unit.heat-active {
    border-color: #ff5500;
    box-shadow:
        0 0 0 3px rgba(255, 85, 0, 0.12),
        0 0 15px rgba(255, 85, 0, 0.5),
        0 6px 18px rgba(0, 0, 0, 0.6);
}

.thermostat-unit.heat-active .thermostat-ring {
    border-color: rgba(255, 85, 0, 0.45);
    inset: -6px;
    transform: rotate(45deg);
    /* dynamic dial rotation feel */
}

.thermostat-unit.cool-active {
    border-color: #007aff;
    box-shadow:
        0 0 0 3px rgba(0, 122, 255, 0.12),
        0 0 15px rgba(0, 122, 255, 0.5),
        0 6px 18px rgba(0, 0, 0, 0.6);
}

.thermostat-unit.cool-active .thermostat-ring {
    border-color: rgba(0, 122, 255, 0.45);
    inset: -6px;
    transform: rotate(-45deg);
}

.thermostat-screen {
    position: absolute;
    inset: 4px;
    /* inset screen inside the metal ring */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    color: #f5f5f7;
    background: radial-gradient(circle at 45% 40%, #15161c 0%, #050608 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    transition: background 0.5s ease;
}

/* Heating/Cooling screen glows */
.thermostat-unit.heat-active .thermostat-screen {
    background: radial-gradient(circle at 45% 40%, #3e1503 0%, #0c0502 100%);
}

.thermostat-unit.cool-active .thermostat-screen {
    background: radial-gradient(circle at 45% 40%, #051d38 0%, #020912 100%);
}

/* Curved glass reflection flare overlay */
.thermostat-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
}



.thermostat-temp {
    font-size: 11px;
    line-height: 1;
    font-family: 'Inter', monospace;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
    z-index: 2;
    transition: all 0.5s ease;
}

.thermostat-unit.heat-active .thermostat-temp {
    color: #ff8844;
    text-shadow: 0 0 6px rgba(255, 85, 0, 0.75);
}

.thermostat-unit.cool-active .thermostat-temp {
    color: #55aaff;
    text-shadow: 0 0 6px rgba(0, 122, 255, 0.75);
}

/* Pedestal Fan (Standing Fan) */
.fan-unit {
    position: absolute;
    bottom: 12%;
    right: 10%;
    width: 40px;
    height: 120px;
    z-index: 5;
}

.fan-base {
    width: 26px;
    height: 6px;
    background-color: #1a1b22;
    margin: 0 auto;
    border-radius: 3px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.fan-pole {
    width: 3px;
    height: 85px;
    background-color: #3b3d4a;
    margin: 0 auto;
    position: relative;
}

/* Control box on the pole */
.fan-pole::after {
    content: "";
    position: absolute;
    top: 35px;
    left: -2px;
    width: 7px;
    height: 12px;
    background-color: #1a1b22;
    border-radius: 2px;
}

.fan-head {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle at 35% 35%, #3c3f50 0%, #17181f 100%);
    border: 2px solid #484b5c;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.05);
    z-index: 2;
    box-sizing: border-box;
}

.fan-grill {
    position: absolute;
    inset: 1px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, transparent 35%, rgba(255, 255, 255, 0.04) 36%, rgba(255, 255, 255, 0.04) 38%, transparent 39%, transparent 68%, rgba(255, 255, 255, 0.04) 69%, rgba(255, 255, 255, 0.04) 71%, transparent 72%);
}

.fan-center {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 5px rgba(212, 168, 67, 0.7);
}

.fan-blades {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: transform 0.5s ease;
}

/* Three blades - Leaf shape, pivot from center */
.fan-blades span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 15px;
    background: linear-gradient(to top, #c2c2c9 0%, #686973 100%);
    border-radius: 50% 50% 10% 10% / 60% 60% 40% 40%;
    transform-origin: bottom center;
    margin-left: -4px;
    margin-top: -15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.fan-blades span:nth-child(1) {
    transform: rotate(0deg);
}

.fan-blades span:nth-child(2) {
    transform: rotate(120deg);
}

.fan-blades span:nth-child(3) {
    transform: rotate(240deg);
}

/* Active Spin animation with realistic motion blur */
.fan-active .fan-blades {
    animation: fanSpin 0.12s infinite linear;
    filter: blur(1.2px);
    opacity: 0.8;
}

@keyframes fanSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Fan Breeze flow lines blowing right-upwards towards the room center */
.fan-breeze-flow {
    position: absolute;
    top: 5px;
    right: 35px;
    left: auto;
    width: 120px;
    height: 30px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.fan-active .fan-breeze-flow {
    opacity: 0.8;
}

.fan-breeze-flow span {
    position: absolute;
    height: 1px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    border-radius: 50%;
    animation: fanBreeze 1.5s infinite linear;
    opacity: 0;
}

.fan-breeze-flow span:nth-child(1) {
    top: 5px;
    width: 60px;
    animation-delay: 0s;
}

.fan-breeze-flow span:nth-child(2) {
    top: 15px;
    width: 80px;
    animation-delay: 0.5s;
}

.fan-breeze-flow span:nth-child(3) {
    top: 25px;
    width: 70px;
    animation-delay: 1s;
}

@keyframes fanBreeze {
    0% {
        right: 0;
        transform: scaleY(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        right: 100px;
        transform: scaleY(0.5);
        opacity: 0;
    }
}

.tv-channel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    display: none;
}

.tv-channel.active-channel {
    opacity: 1;
    display: block;
    z-index: 2;
}

/* Aquarium simulation styling */
.aquarium-simulation {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, #0072ff 0%, #001845 100%);
    overflow: hidden;
}

.water-bg {
    position: absolute;
    inset: 0;
}

.bubble {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: bubbleRise 4s infinite linear;
    bottom: -10px;
}

.bubble.b1 {
    width: 4px;
    height: 4px;
    left: 20%;
    animation-duration: 3s;
}

.bubble.b2 {
    width: 6px;
    height: 6px;
    left: 50%;
    animation-duration: 5s;
    animation-delay: 1s;
}

.bubble.b3 {
    width: 3px;
    height: 3px;
    left: 80%;
    animation-duration: 4s;
    animation-delay: 2s;
}

@keyframes bubbleRise {
    0% {
        bottom: -10px;
        transform: translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        bottom: 110%;
        transform: translateX(5px);
        opacity: 0;
    }
}

.fish {
    position: absolute;
    font-size: 8px;
    animation: fishSwim 6s infinite linear;
}

.fish.f1 {
    top: 20%;
    left: -15px;
    animation-duration: 6s;
}

.fish.f2 {
    top: 55%;
    left: -15px;
    animation-duration: 8s;
    animation-delay: 2s;
}

@keyframes fishSwim {
    0% {
        left: -15px;
        transform: scaleX(1);
    }

    49% {
        transform: scaleX(1);
    }

    50% {
        left: 110%;
        transform: scaleX(-1);
    }

    99% {
        transform: scaleX(-1);
    }

    100% {
        left: -15px;
        transform: scaleX(1);
    }
}

.seaweed {
    position: absolute;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to top, #137547, #054a29);
    border-radius: 2px 2px 0 0;
    transform-origin: bottom center;
    animation: seaweedSway 3s infinite alternate ease-in-out;
}

.seaweed.s1 {
    height: 18px;
    left: 15%;
}

.seaweed.s2 {
    height: 25px;
    right: 20%;
    animation-delay: 0.5s;
}

@keyframes seaweedSway {
    0% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(3deg);
    }
}

/* News simulation styling */
.news-simulation {
    position: absolute;
    inset: 0;
    background-color: #060913;
    /* Deep news studio navy */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, sans-serif;
    color: #fff;
    overflow: hidden;
}

.news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #1b2e4c 0%, #0c1526 100%);
    padding: 1px 4px;
    height: 12px;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
    font-size: 5px;
    box-sizing: border-box;
    z-index: 10;
}

.news-logo {
    display: flex;
    align-items: center;
    gap: 1.5px;
    font-weight: 900;
    font-size: 5px;
    letter-spacing: 0.3px;
}

.news-logo-red {
    background-color: #ff3b30;
    color: #fff;
    padding: 0px 1.5px;
    border-radius: 1px;
}

.news-live-badge {
    background-color: #ff3b30;
    color: #fff;
    font-size: 4px;
    font-weight: bold;
    padding: 0px 1.5px;
    border-radius: 1px;
    display: flex;
    align-items: center;
    gap: 1px;
    animation: livePulse 1s infinite alternate;
}

@keyframes livePulse {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.news-live-badge::before {
    content: "";
    width: 2px;
    height: 2px;
    background-color: #fff;
    border-radius: 50%;
}

.news-clock {
    font-size: 4px;
    opacity: 0.8;
}

.news-main-area {
    position: relative;
    flex: 1;
    display: flex;
    background: radial-gradient(circle at 50% 30%, #172a4f 0%, #060913 80%);
    overflow: hidden;
}

/* Studio grid or background decoration */
.news-studio-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0),
        linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 0);
    background-size: 8px 8px, 15px 15px, 15px 15px;
    opacity: 0.6;
}

/* Studio lighting effect */
.news-studio-light {
    position: absolute;
    top: -30%;
    left: 10%;
    width: 80%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(34, 87, 191, 0.4) 0%, transparent 70%);
    pointer-events: none;
}

/* Anchor silhouette */
.news-anchor {
    position: absolute;
    bottom: 11px;
    /* stay above breaking news banner */
    left: 25%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.news-anchor-head {
    width: 6px;
    height: 7px;
    background: #e2bca1;
    border-radius: 50%;
    position: relative;
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.15);
}

.news-anchor-hair {
    position: absolute;
    top: -1.5px;
    left: -1px;
    right: -1px;
    height: 3.5px;
    background-color: #2b1f1d;
    border-radius: 4px 4px 0 0;
}

.news-anchor-neck {
    width: 2px;
    height: 2px;
    background: #d4a78c;
    margin-top: -1px;
}

.news-anchor-body {
    width: 17px;
    height: 17px;
    background: #12213a;
    /* Dark anchor suit */
    border-radius: 6px 6px 0 0;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Tie/Collar */
.news-anchor-body::before {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-top: 3.5px solid #fff;
    /* White shirt collar */
}

.news-anchor-body::after {
    content: "";
    position: absolute;
    top: 1.5px;
    width: 1px;
    height: 5px;
    background-color: #ff3b30;
    /* Red tie */
}

/* Picture-in-picture displaying active smart home model */
.news-pip {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 32px;
    height: 20px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.news-pip-title {
    font-size: 3.5px;
    font-weight: 700;
    background: #ff3b30;
    color: #fff;
    padding: 0.5px 1px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.2px;
}

.news-pip-content {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #0d1e37 0%, #030816 100%);
}

/* Smart building icon inside pip */
.news-pip-building {
    width: 16px;
    height: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5px;
}

.news-pip-bar {
    width: 3.5px;
    background: linear-gradient(to top, rgba(212, 168, 67, 0.9) 0%, rgba(212, 168, 67, 0.2) 100%);
    border-radius: 0.5px 0.5px 0 0;
    position: relative;
}

.news-pip-bar::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0.5px;
    right: 0.5px;
    height: 8px;
    background-image: repeating-linear-gradient(to bottom, #fff 0px, #fff 1px, transparent 1px, transparent 2px);
    opacity: 0.7;
}

.news-pip-bar.b-1 {
    height: 6px;
}

.news-pip-bar.b-2 {
    height: 11px;
}

.news-pip-bar.b-3 {
    height: 8px;
}

/* Breaking news banner overlaying the bottom of main area */
.news-ticker-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, #9a0c0c 0%, #e21c1c 25%, #e21c1c 75%, #9a0c0c 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    height: 11px;
    display: flex;
    align-items: center;
    z-index: 3;
    box-sizing: border-box;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

.news-ticker-label {
    background: #000;
    color: #ffd880;
    font-weight: 900;
    font-size: 4px;
    padding: 0 3px;
    height: 100%;
    display: flex;
    align-items: center;
    letter-spacing: 0.2px;
    border-right: 1px solid #ffd880;
    animation: labelFlash 1s infinite alternate;
}

@keyframes labelFlash {
    0% {
        color: #ffd880;
    }

    100% {
        color: #fff;
    }
}

.news-ticker-text {
    flex: 1;
    font-size: 4px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 4px;
    display: flex;
    align-items: center;
}

.news-ticker-text span {
    display: inline-block;
    padding-left: 100%;
    animation: tickerTextScroll 16s infinite linear;
}

@keyframes tickerTextScroll {
    0% {
        transform: translateX(0);
    }

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

/* Bottom stock/financial bar */
.news-finance-bar {
    background-color: #0b0f19;
    height: 9px;
    display: flex;
    align-items: center;
    font-size: 3.5px;
    font-family: monospace;
    border-top: 1px solid #000;
    box-sizing: border-box;
    z-index: 10;
}

.news-finance-title {
    background: #25334d;
    color: #fff;
    font-weight: bold;
    padding: 0 2px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 3.5px;
}

.news-finance-scroll {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    color: #a0aec0;
    display: flex;
    align-items: center;
}

.news-finance-scroll span {
    display: inline-block;
    padding-left: 100%;
    animation: financeScroll 22s infinite linear;
}

@keyframes financeScroll {
    0% {
        transform: translateX(0);
    }

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


/* Coffee Shelf & Machine */
.coffee-shelf-unit {
    position: absolute;
    bottom: 12%;
    left: 6%;
    width: 54px;
    height: 76px;
    z-index: 5;
}

.mini-shelf {
    width: 100%;
    height: 6px;
    background: linear-gradient(to bottom, #d4a843 0%, #a27c26 100%);
    border-radius: 2px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    left: 0;
}

.coffee-machine {
    width: 36px;
    height: 52px;
    background: linear-gradient(to right, #1f2026, #2d303b);
    border-radius: 6px 6px 3px 3px;
    border: 2px solid #484b5c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 6px;
    left: 9px;
    box-sizing: border-box;
    overflow: visible;
}

/* Water Tank on the back side */
.coffee-water-tank {
    position: absolute;
    top: 4px;
    right: -4px;
    width: 8px;
    height: 32px;
    background: linear-gradient(to right, rgba(173, 216, 230, 0.4), rgba(240, 248, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    z-index: -1;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2);
}

.coffee-water-tank::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%;
    background: linear-gradient(to top, rgba(0, 191, 255, 0.35), rgba(0, 191, 255, 0.15));
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}

/* Coffee Beans container on top */
.coffee-beans-container {
    position: absolute;
    top: -4px;
    left: 8px;
    width: 20px;
    height: 5px;
    background: linear-gradient(to bottom, rgba(50, 30, 10, 0.8), rgba(30, 15, 5, 0.95));
    border-radius: 4px 4px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Chrome Metal Panel on front */
.coffee-metal-panel {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    height: 12px;
    background: linear-gradient(180deg, #e1e1e6 0%, #a2a2ab 50%, #7d7d85 100%);
    border-radius: 3px 3px 0 0;
    border-bottom: 1.5px solid #32333d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    box-sizing: border-box;
}

.coffee-dials {
    display: flex;
    gap: 3px;
}

.coffee-dials span {
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #ffd880 20%, #4a3e26 100%);
    border-radius: 50%;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.5);
}

.coffee-status-led {
    width: 4px;
    height: 4px;
    background-color: #ff3b30;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 0 1.5px rgba(0, 0, 0, 0.5);
}

.coffee-active .coffee-status-led {
    background-color: #34c759;
    box-shadow: 0 0 5px #34c759;
}

/* Chrome Nozzle Spout */
.coffee-nozzle {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 12px;
    background: linear-gradient(to right, #9da0a8, #d1d5db, #6b7280);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.coffee-nozzle::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 1.5px;
    width: 3px;
    height: 2px;
    background: #222;
    border-radius: 50%;
}

/* Cup area and Drip Tray */
.coffee-drip-tray {
    position: absolute;
    bottom: 2px;
    left: 4px;
    right: 4px;
    height: 6px;
    background: linear-gradient(to bottom, #d1d5db, #6b7280);
    border-radius: 1px 1px 2px 2px;
    border-top: 1px solid #1f2026;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    box-sizing: border-box;
}

.coffee-drip-grid {
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(to right, #1f2026, #1f2026 2px, transparent 2px, transparent 4px);
    opacity: 0.8;
}

.coffee-cup {
    position: absolute;
    bottom: 8px;
    left: 12px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e1e1e6 100%);
    border-radius: 1px 1px 5px 5px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.coffee-cup::after {
    content: "";
    position: absolute;
    top: 2px;
    right: -3px;
    width: 4px;
    height: 6px;
    border: 1.5px solid #e1e1e6;
    border-left: none;
    border-radius: 0 3px 3px 0;
}

.coffee-liquid {
    position: absolute;
    bottom: 1px;
    left: 1.5px;
    width: 9px;
    height: 0;
    background-color: #3d1c02;
    border-radius: 0 0 3px 3px;
    transition: height 3s ease;
    overflow: hidden;
}

.coffee-active .coffee-liquid {
    height: 9px;
}

/* Golden Espresso Crema Layer */
.coffee-crema {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to bottom, #ffd880, #c6893f);
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 2.5s;
}

.coffee-active .coffee-crema {
    opacity: 1;
}

/* Steaming effect */
.coffee-steam {
    position: absolute;
    bottom: 20px;
    left: 12px;
    width: 12px;
    height: 24px;
    pointer-events: none;
    display: none;
    z-index: 3;
}

.coffee-active .coffee-steam {
    display: block;
}

.coffee-steam span {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    filter: blur(0.6px);
    animation: steamRise 1.5s infinite ease-in-out;
    opacity: 0;
}

.coffee-steam span:nth-child(1) {
    left: 3px;
    animation-delay: 0s;
}

.coffee-steam span:nth-child(2) {
    left: 6px;
    animation-delay: 0.5s;
}

.coffee-steam span:nth-child(3) {
    left: 9px;
    animation-delay: 1s;
}

/* Coffee Notification Overlay */
.coffee-notification {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translate(-50%, -20px);
    background: rgba(30, 31, 38, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    color: #ffd880;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.coffee-notification-icon {
    font-size: 1.1rem;
    animation: cupBounce 1s infinite alternate ease-in-out;
}

.coffee-active .coffee-notification {
    animation: showCoffeeReady 4s forwards;
    animation-delay: 3s;
}

@keyframes cupBounce {
    0% {
        transform: translateY(0) rotate(0);
    }

    100% {
        transform: translateY(-2px) rotate(5deg);
    }
}

@keyframes showCoffeeReady {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    90% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes steamRise {
    0% {
        bottom: 0;
        transform: translateX(0) scaleX(1);
        opacity: 0;
    }

    30% {
        opacity: 0.8;
    }

    100% {
        bottom: 15px;
        transform: translateX(3px) scaleX(0.5);
        opacity: 0;
    }
}

/* ── Wall Door & Thief & Alarm Simulation ────────────────────────── */

/* Right Wall Door */
.wall-right-door {
    position: absolute;
    bottom: 38%;
    /* stands on the floor */
    right: 1.5%;
    height: 48%;
    /* much larger door, occupying 48% of room height */
    aspect-ratio: 1 / 2.25;
    /* sleek tall door ratio */
    z-index: 4;
}

.door-frame {
    width: 100%;
    height: 100%;
    border: 2px solid #281c15;
    /* rich wooden frame */
    border-bottom: none;
    box-sizing: border-box;
    position: relative;
    background: #0d0907;
    /* dark space behind door */
    perspective: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.door-leaf {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3e2d24 0%, #2b1e17 100%);
    /* premium wood leaf */
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* Elegant glass window in the door */
.door-window {
    position: absolute;
    top: 15%;
    left: 25%;
    width: 50%;
    height: 40%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}


/* Thief silhouette */
.thief-silhouette {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 84%;
    height: 88%;
    opacity: 0;
    transform: scale(0.85) translateX(15px);
    transition: all 1s ease;
    pointer-events: none;
    z-index: 1;
    /* behind the door leaf when closed */
    filter: blur(0.5px);
}

.thief-head {
    position: absolute;
    top: 20%;
    left: 32.5%;
    width: 35%;
    aspect-ratio: 1;
    background: #121212;
    border-radius: 50%;
    z-index: 5;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.thief-beanie {
    position: absolute;
    top: -15%;
    left: -5%;
    width: 110%;
    height: 55%;
    background: linear-gradient(to bottom, #2c2c2c 0%, #151515 100%);
    border-radius: 12px 12px 0 0;
    border-bottom: 1.5px solid #000;
}

.thief-eyes {
    display: flex;
    gap: 30%;
    justify-content: center;
    margin-top: 28%;
}

.thief-eyes span {
    width: 18%;
    aspect-ratio: 1;
    background: #ff3b30;
    /* glowing red eyes */
    border-radius: 50%;
    box-shadow: 0 0 5px #ff3b30, 0 0 10px rgba(255, 59, 48, 0.8);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.thief-flashlight {
    position: absolute;
    top: 48%;
    left: 35%;
    width: 30%;
    height: 6%;
    background: linear-gradient(to right, #555, #222);
    border-radius: 2px;
    transform-origin: right center;
    transform: rotate(-20deg);
    z-index: 6;
}

.flashlight-beam {
    position: absolute;
    top: -300%;
    left: -800%;
    width: 800%;
    height: 700%;
    background: linear-gradient(90deg, rgba(255, 235, 150, 0.35) 0%, rgba(255, 235, 150, 0) 100%);
    clip-path: polygon(100% 48%, 0 0, 0 100%, 100% 52%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Flashlight sweep animation */
@keyframes flashlightSweep {
    0% {
        transform: rotate(-12deg);
    }

    50% {
        transform: rotate(-28deg);
    }

    100% {
        transform: rotate(-12deg);
    }
}

/* Animations for states */

.thief-attempt .door-leaf {
    transform: rotateY(-32deg);
    /* swings open slightly */
}

.thief-attempt .thief-silhouette {
    opacity: 0.95;
    transform: scale(1) translateX(4px);
}

.thief-attempt .thief-eyes span {
    opacity: 1;
}

.thief-attempt .thief-flashlight {
    animation: flashlightSweep 2s infinite ease-in-out;
}

.thief-attempt .flashlight-beam {
    opacity: 1;
}

.thief-flee .flashlight-beam {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Flee state (scared by alarm) */
.thief-flee .door-leaf {
    transform: rotateY(0deg);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    /* slams shut */
}

.thief-flee .thief-silhouette {
    opacity: 0;
    transform: scale(0.8) translateX(25px);
    transition: all 0.4s ease;
}

/* Alarm Triggered Flashing Room Effect */
@keyframes alarmFlashing {
    0% {
        background-color: rgba(255, 59, 48, 0.28);
    }

    50% {
        background-color: rgba(255, 59, 48, 0);
    }

    100% {
        background-color: rgba(255, 59, 48, 0.28);
    }
}

.living-room-viewport.alarm-triggered::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 59, 48, 0.2);
    z-index: 99;
    /* on top of everything inside viewport */
    pointer-events: none;
    animation: alarmFlashing 0.8s ease infinite;
}

/* Flashing red alarm badge / text style */
.status-badge.security-danger {
    background-color: rgba(255, 59, 48, 0.2) !important;
    border-color: #ff3b30 !important;
    color: #ff3b30 !important;
    animation: pulseBadge 1s infinite alternate;
}

@keyframes pulseBadge {
    0% {
        opacity: 0.8;
        box-shadow: 0 0 4px rgba(255, 59, 48, 0.2);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(255, 59, 48, 0.6);
    }
}

/* Flashing alarm card styling in phone app */
.control-card.security-card.active-card.alarm-card-triggered {
    animation: flashingSecurityCard 0.6s infinite alternate;
}

@keyframes flashingSecurityCard {
    0% {
        border-color: #ff3b30;
        box-shadow: 0 0 5px rgba(255, 59, 48, 0.3);
    }

    100% {
        border-color: #ff3b30;
        box-shadow: 0 0 18px rgba(255, 59, 48, 0.8);
        background: rgba(255, 59, 48, 0.25) !important;
    }
}

/* ── Smart Simulator Mobile Responsiveness ────────────────────────── */
@media (max-width: 768px) {
    #smart-experience {
        display: none !important;
    }

    .simulator-wrapper {
        grid-template-columns: auto 1fr;
        gap: 0.5rem;
        align-items: center;
        margin-top: 1.5rem;
    }

    .room-preview {
        padding: 0.4rem;
    }

    /* Scale down the phone mockup and all its internal controls to fit side-by-side */
    .phone-mockup {
        width: 125px;
        height: 232px;
        border-width: 4px;
        border-radius: 18px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .phone-notch {
        width: 30px;
        height: 5px;
        top: 3px;
        border-radius: 3px;
    }

    .phone-status-bar {
        height: 15px;
        padding: 2px 6px 0;
        font-size: 0.38rem;
    }

    .phone-icons {
        gap: 2px;
    }

    .phone-icons i {
        font-size: 0.34rem;
    }

    .phone-app-content {
        padding: 5px 6px 10px;
        gap: 5px;
        padding-bottom: 10px;
    }

    .app-header {
        padding-bottom: 4px;
        margin-bottom: 0;
    }

    .app-brand {
        font-size: 0.42rem;
        letter-spacing: 0.5px;
    }

    .status-badge {
        font-size: 0.34rem;
        padding: 1.5px 5px;
        gap: 1.5px;
        border-radius: 10px;
    }

    .pulse-dot {
        width: 2.5px;
        height: 2.5px;
    }

    .control-group {
        gap: 2px;
    }

    .control-label {
        font-size: 0.38rem;
        letter-spacing: 0.2px;
    }

    .light-modes-tabs {
        padding: 1px;
        border-radius: 3px;
    }

    .mode-tab {
        padding: 3px 1px;
        border-radius: 2px;
        font-size: 0.36rem;
        gap: 1.5px;
    }

    .mode-tab i {
        font-size: 0.5rem;
    }

    .controls-grid {
        gap: 3px;
        grid-template-columns: 1fr 1fr;
    }

    .control-card {
        padding: 3px 5px;
        min-height: 28px;
        border-radius: 6px;
        gap: 2px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .card-icon-title {
        font-size: 0.36rem;
        gap: 1px;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
    }

    .card-icon-title i {
        font-size: 0.5rem;
    }

    .switch {
        width: 16px;
        height: 9px;
    }

    .slider {
        border-radius: 5px;
    }

    .slider:before {
        height: 5px;
        width: 5px;
        left: 1px;
        bottom: 1px;
    }

    input:checked+.slider:before {
        transform: translateX(9px);
    }

    .phone-home-indicator {
        width: 30px;
        height: 1px;
        bottom: 1.5px;
    }

    /* Scale down fixed-height elements in the 3D room preview on mobile */
    .luxury-sofa {
        height: 60px;
    }

    .sofa-back-rest {
        height: 22px;
        bottom: 0;
    }

    .sofa-seats {
        height: 36px;
        bottom: 16px;
        left: 8px;
        width: calc(100% - 16px);
    }

    .sofa-pillows {
        bottom: 16px;
        padding: 0 20px;
    }

    .pillow {
        width: 14px;
        height: 14px;
    }

    .pillow.orange {
        transform: translateY(4px) rotate(-8deg);
    }

    .sofa-armrests {
        height: 50px;
    }

    .sofa-armrests span {
        width: 10px;
        height: 100%;
    }

    .floor-lamp-unit {
        height: 110px;
        bottom: 10%;
    }

    .lamp-glow-cone {
        top: 22px;
        width: 110px;
        height: 80px;
    }

    .lamp-shade {
        width: 18px;
        height: 14px;
    }

    .lamp-pole {
        height: 90px;
    }

    .lamp-base {
        width: 15px;
        height: 4px;
    }

    .house-plant-unit {
        height: 75px;
        width: 30px;
    }

    .plant-pot {
        width: 14px;
        height: 16px;
    }

    .plant-pot::after {
        top: -3px;
        height: 6px;
        width: 1px;
    }

    .pot-sensor-led {
        top: -4px;
        width: 2px;
        height: 2px;
    }

    .plant-leaf {
        transform-origin: bottom center;
    }

    .leaf-1 {
        width: 10px;
        height: 24px;
        bottom: 12px;
        left: 6px;
        --rot-base: -35deg;
        transform: rotate(var(--rot-base));
    }

    .leaf-2 {
        width: 8px;
        height: 26px;
        bottom: 13px;
        right: 6px;
        --rot-base: 35deg;
        transform: rotate(var(--rot-base));
    }

    .leaf-3 {
        width: 10px;
        height: 28px;
        bottom: 14px;
        left: 10px;
        --rot-base: -10deg;
        transform: rotate(var(--rot-base));
    }

    .leaf-4 {
        width: 9px;
        height: 20px;
        bottom: 13px;
        right: 10px;
        --rot-base: 15deg;
        transform: rotate(var(--rot-base));
    }

    .watering-arm {
        top: 15px;
        height: 2px;
    }

    .living-room-viewport.watering-active .watering-arm {
        width: 15px;
    }

    .arm-nozzle {
        width: 3px;
        height: 3px;
        left: -1.5px;
    }

    .arm-nozzle::after {
        width: 1px;
        height: 1.5px;
        bottom: -1.5px;
    }

    .plant-water-sprinkler {
        top: 17px;
        left: 13.5px;
        /* centered under the 15px mobile nozzle tip */
        width: 4px;
        height: 40px;
    }

    .plant-water-sprinkler .drop {
        width: 1px;
        height: 4px;
    }

    /* Scale down boiler unit on mobile */
    .boiler-unit {
        width: 18px;
        height: 33px;
        top: 16%;
        left: 4%;
        right: auto;
        border-radius: 3px;
        padding: 3px;
    }

    .boiler-brand {
        font-size: 2.5px;
        margin-bottom: 2px;
    }

    .boiler-display {
        padding: 1px;
        gap: 1px;
        border-radius: 1.5px;
    }

    .temp-display {
        font-size: 3px;
    }

    .flame-window {
        width: 7px;
        height: 7px;
        border-width: 0.5px;
    }

    .fire-flame {
        width: 4px;
        height: 5px;
    }

    .boiler-pipes {
        bottom: -4px;
        padding: 0 2px;
    }

    .boiler-pipes span {
        width: 1px;
        height: 4px;
    }

    /* Scale down thermostat unit on mobile */
    .thermostat-unit {
        width: 20px;
        height: 20px;
        top: 30%;
        left: 39%;
        right: auto;
        transform: translateX(-50%);
        border-width: 1px;
    }

    .thermostat-screen {
        inset: 2px !important;
    }

    .thermostat-temp {
        font-size: 5px;
    }

    .security-status-hud {
        bottom: 8px;
        padding: 4px 8px;
        font-size: 0.55rem;
        gap: 10px;
    }

    /* Scale down vacuum and dock on mobile to look proportional */
    .vacuum-dock {
        width: 6px;
        height: 12px;
    }

    .vacuum-dock::after {
        top: 3px;
        right: 2px;
        width: 2px;
        height: 2px;
    }

    .robot-vacuum {
        bottom: calc(6% - 6px);
        left: 9.2%;
        width: 24px;
        height: 24px;
    }

    .living-room-viewport.vacuum-active .robot-vacuum {
        animation: vacuumPatrolMobile 30s ease-in-out infinite;
    }

    .vacuum-chassis::before {
        width: 8px;
        height: 8px;
    }

    .vacuum-chassis::after {
        width: 3.5px;
        height: 3.5px;
    }

    .vacuum-brush::before,
    .vacuum-brush::after {
        width: 10px;
        height: 10px;
    }

    .vacuum-brush::before {
        top: -1.5px;
        left: 4px;
    }

    .vacuum-brush::after {
        top: -1.5px;
        right: 4px;
    }

    .vacuum-indicator {
        top: 3px;
        width: 2px;
        height: 2px;
    }

    /* Scale down fan on mobile */
    .fan-unit {
        width: 26px;
        height: 82px;
        bottom: 10%;
        right: 10%;
    }

    .fan-base {
        width: 18px;
        height: 4px;
    }

    .fan-pole {
        width: 2px;
        height: 58px;
    }

    .fan-pole::after {
        top: 25px;
        left: -1px;
        width: 5px;
        height: 8px;
    }

    .fan-head {
        width: 26px;
        height: 26px;
        border-width: 1.5px;
    }

    .fan-center {
        width: 6px;
        height: 6px;
    }

    .fan-blades span {
        width: 5px;
        height: 10px;
        margin-left: -2.5px;
        margin-top: -10px;
        border-radius: 50% 50% 10% 10% / 60% 60% 40% 40%;
    }

    .fan-breeze-flow {
        top: 3px;
        right: 24px;
        left: auto;
        width: 80px;
        height: 20px;
    }

    @keyframes fanBreeze {
        0% {
            right: 0;
            transform: scaleY(1);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 0.8;
        }

        100% {
            right: 60px;
            transform: scaleY(0.5);
            opacity: 0;
        }
    }

    /* Mobile TV Card controls styling */
    .tv-card-controls {
        right: 4px;
        gap: 2px;
    }

    .card-btn-up,
    .card-btn-down {
        width: 10px;
        height: 10px;
        font-size: 4px;
    }


    /* Scale down coffee shelf on mobile */
    .coffee-shelf-unit {
        width: 35px;
        height: 51px;
        bottom: 12%;
        left: 6%;
    }

    .mini-shelf {
        height: 4px;
    }

    .coffee-machine {
        width: 24px;
        height: 35px;
        bottom: 4px;
        left: 5.5px;
    }

    .coffee-water-tank {
        top: 3px;
        right: -3px;
        width: 5px;
        height: 21px;
        background: linear-gradient(to right, rgba(173, 216, 230, 0.4), rgba(240, 248, 255, 0.6));
        border: 0.5px solid rgba(255, 255, 255, 0.25);
        border-radius: 1px;
        z-index: -1;
    }

    .coffee-water-tank::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75%;
        background: linear-gradient(to top, rgba(0, 191, 255, 0.35), rgba(0, 191, 255, 0.15));
    }

    .coffee-beans-container {
        top: -3px;
        left: 5px;
        width: 14px;
        height: 3px;
    }

    .coffee-metal-panel {
        top: 3px;
        left: 3px;
        right: 3px;
        height: 8px;
        padding: 0 2px;
    }

    .coffee-dials span {
        width: 2px;
        height: 2px;
    }

    .coffee-status-led {
        width: 3px;
        height: 3px;
    }

    .coffee-nozzle {
        top: 11px;
        width: 4px;
        height: 8px;
    }

    .coffee-drip-tray {
        bottom: 1px;
        left: 3px;
        right: 3px;
        height: 4px;
    }

    .coffee-drip-grid {
        height: 1px;
    }

    .coffee-cup {
        bottom: 5px;
        left: 8px;
        width: 8px;
        height: 8px;
        border-radius: 1px 1px 3px 3px;
    }

    .coffee-cup::after {
        right: -2px;
        width: 3px;
        height: 4px;
        border-width: 1px;
    }

    .coffee-liquid {
        left: 1px;
        width: 6px;
    }

    .coffee-active .coffee-liquid {
        height: 6px;
    }

    .coffee-crema {
        height: 1.5px;
    }

    .coffee-steam {
        bottom: 13px;
        left: 8px;
        width: 8px;
        height: 16px;
    }

    .coffee-notification {
        top: 10px;
        padding: 5px 12px;
        font-size: 0.7rem;
    }

    .coffee-notification-icon {
        font-size: 0.9rem;
    }

    /* Mobile Door scaling */
    .wall-right-door {
        right: 1.5%;
    }

    .door-frame {
        border-width: 1px;
    }

    .door-leaf {
        border-width: 0.5px;
    }

    .door-window {
        border-width: 0.5px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.85rem !important;
    }
}

/* ── Geçici Görsel Rozeti ─────────────────────────── */
.placeholder-img {
    position: relative;
    overflow: hidden;
}

.placeholder-img::after {
    content: "Geçici Görsel";
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(10, 10, 11, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid rgba(212, 168, 67, 0.35);
    pointer-events: none;
    z-index: 10;
}

/* ── Boş Plans Slot ───────────────────────────────── */
.plans-item-empty {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(212, 168, 67, 0.2);
    border-radius: var(--radius-md);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(136, 146, 176, 0.4);
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    user-select: none;
}